/* FSE — base partagée (site public + SENTINEL) */
@import url("../fonts/fonts.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fse-charcoal);
  background: var(--fse-ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; letter-spacing: -.01em; line-height: 1.08; }
p { margin: 0; }
::selection { background: var(--fse-greige-light); }
:focus-visible { outline: 2px solid var(--fse-greige-dark); outline-offset: 2px; }

/* ---------- Typo utilitaire ---------- */
.label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fse-ink-3);
}
.label--dark { color: var(--fse-charcoal); }
.label--greige { color: var(--fse-greige-dark); }
.ref {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fse-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ref b { color: var(--fse-charcoal); font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--fse-ink-3); }
.ink2 { color: var(--fse-ink-2); }
.rule { height: 1px; background: var(--fse-line); border: 0; margin: 0; }
.rule-short { width: 56px; height: 1px; background: var(--fse-greige); border: 0; margin: 0; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--fse-charcoal); }
.logo__mark { width: 30px; height: 30px; flex: none; }
.logo__mark .st { stroke: currentColor; }
.logo__mark .gr { fill: var(--fse-greige); }
.logo__mark .gs { stroke: var(--fse-greige); }
.logo__txt { display: flex; flex-direction: column; line-height: 1; }
.logo__word { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: .12em; }
.logo__sub { font-size: 7.5px; font-weight: 500; letter-spacing: .32em; margin-top: 5px; text-transform: uppercase; }
.logo--light { color: var(--fse-ivory); }
.logo--sm .logo__mark { width: 24px; height: 24px; }
.logo--sm .logo__word { font-size: 20px; }
.logo--sm .logo__sub { font-size: 6.5px; margin-top: 4px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 22px;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 2px; border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--greige { background: var(--fse-greige); color: var(--fse-charcoal); }
.btn--greige:hover { background: #C2BBAA; }
.btn--dark { background: var(--fse-charcoal); color: var(--fse-ivory); }
.btn--dark:hover { background: #33322F; }
.btn--ghost { border-color: var(--fse-line-strong); color: var(--fse-charcoal); }
.btn--ghost:hover { border-color: var(--fse-charcoal); }
.btn--ghost-light { border-color: rgba(248,246,242,.35); color: var(--fse-ivory); }
.btn--ghost-light:hover { border-color: var(--fse-ivory); }
.btn--sm { height: 34px; padding: 0 14px; font-size: 11px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--fse-greige); padding-bottom: 4px; }
.link-arrow svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Statuts ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap; line-height: 1;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill--ok { background: var(--status-green-bg); color: var(--status-green); }
.pill--watch { background: var(--status-amber-bg); color: #B06C14; }
.pill--crit { background: var(--status-red-bg); color: #C93A2B; }
.pill--info { background: var(--status-info-bg); color: var(--fse-ink-2); }
.pill--plain::before { display: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot--ok { background: var(--status-green); }
.dot--watch { background: var(--status-amber); }
.dot--crit { background: var(--status-red); }
.dot--info { background: var(--fse-greige); }

/* Niveaux d'automatisation SENTINEL */
.lvl {
  display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 7px;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid; border-radius: 3px; white-space: nowrap;
}
.lvl--auto { color: var(--fse-ink-3); border-color: var(--fse-line-strong); }
.lvl--review { color: var(--fse-greige-dark); border-color: var(--fse-greige); background: var(--fse-greige-tint); }
.lvl--signoff { color: var(--fse-ivory); border-color: var(--fse-charcoal); background: var(--fse-charcoal); }

/* ---------- Anneau de score ---------- */
.ring { position: relative; display: inline-grid; place-items: center; }
.ring svg { transform: rotate(-90deg); }
.ring__val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring__val b { font-family: var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; display: block; line-height: 1; }
.ring__val span { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--fse-ink-3); display: block; margin-top: 4px; }

/* ---------- Icônes ---------- */
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Utilitaires ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide-sm { }
@media (max-width: 720px) { .hide-sm { display: none !important; } }