/* Sivotis — pages de la charte « signal » (refonte-2026-08)
 *
 * Le pendant de css/base.css pour la seconde charte. base.css habille les
 * pages OPS×INTEL, ce fichier habille celles de la refonte ; css/layouts/
 * signal.css, lui, ne porte que la couche composition (barre, pied, boutons)
 * partagée par toutes les pages.
 *
 * POURQUOI CES RÈGLES NE SONT PAS SCOPÉES par [data-theme="signal"], à la
 * différence de css/layouts/signal.css : elles ne le peuvent pas se tromper de
 * charte. Le préfixe `sg-` n'est émis que par les arbres React de la refonte,
 * et ceux-ci ne sont rendus que lorsque `window.SIVOTIS_LAYOUT` vaut `signal`.
 * Une classe `sg-*` ne peut donc pas exister dans une page OPS×INTEL. Le scope
 * reste nécessaire pour les rares règles qui touchent une classe PARTAGÉE —
 * `.site-btn` — et il y est écrit.
 *
 * Valeurs reprises de mockups/refonte-2026-08/, noms de jetons traduits.
 * Aucune couleur littérale : tout passe par css/tokens/.
 */

/* ══════════════════════════ RACINE DE PAGE ═══════════════════════════ */
/* PAS DE FOND ICI, et c'est ce qui permet à la constellation d'exister : elle
 * est un canevas `fixed` en z-index 0, la page passe au-dessus en z-index 2.
 * Un fond opaque sur `.sg-page` masquerait entièrement le canevas. Le fond de
 * la charte est posé par `html, body` dans le <style> de chaque page ; les
 * bandes qui doivent couvrir le canevas portent le leur (`.sg-band`,
 * `.sg-nope`, `.sg-demo`, le pied). C'est exactement ce que fait `.page` dans
 * la maquette. */
.sg-page {
  position: relative;
  z-index: 2;
  color: var(--fg);
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
}
.sg-page *, .sg-page *::before, .sg-page *::after { box-sizing: border-box; }

/* `:where()` NE COMPTE PAS DANS LA SPÉCIFICITÉ, et c'est tout l'intérêt ici.
 * La maquette écrit ces remises à zéro au niveau de l'élément (`p{margin:0}`),
 * si bien que n'importe quelle classe les surcharge — c'est le contrat sur
 * lequel tout son CSS est écrit. Les scoper en `.sg-page p` avait fait passer
 * la remise à zéro DEVANT les classes : `.sg-h2-md{margin-top:16px}`,
 * `.sg-sec-cta`, `.sg-upd` et les marges des paragraphes de chapitre étaient
 * silencieusement annulées. `:where(.sg-page) p` scope sans peser, et rend le
 * contrat de la maquette. */
:where(.sg-page) a { color: inherit; text-decoration: none; }
:where(.sg-page) h1, :where(.sg-page) h2, :where(.sg-page) h3 {
  margin: 0; font-weight: 500; letter-spacing: -.035em; line-height: .96;
}
:where(.sg-page) p { margin: 0; }
/* Titres équilibrés : sans quoi un mot restait seul sur la dernière ligne
 * (« dehors. », « minutes. », « flux. »). Les h2 prennent un peu d'air : à
 * .96, le jambage du « q » de « que » touchait l'accent de « accès » sur la
 * ligne suivante. */
:where(.sg-page) h1, :where(.sg-page) h2 { text-wrap: balance; }
:where(.sg-page) h2 { line-height: 1.04; }

/* ═══════════════════ PRIMITIVES ÉDITORIALES ═════════════════════════ */
/* `width:100%` est indispensable : .sg-wrap peut être enfant d'un conteneur
 * flex, et sans lui il se réduit à la largeur de son contenu. */
.sg-wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 var(--gut); }
.sg-col-wide { max-width: 820px; }

.sg-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
}
.sg-tag .sg-sec { color: var(--accent); }

/* La voix qui commente : c'est le seul endroit du site où la serif sert, et
 * c'est ce qui fait exister --font-serif depuis la phase 3. */
.sg-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--muted);
  max-width: 41ch;
}
.sg-lead b { font-style: normal; font-weight: 400; color: var(--fg); }

.sg-fdata { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--faint); }

/* ══════════════════════════ HERO COURT ══════════════════════════════ */
/* La maquette réserve 190 px en haut pour passer sous sa barre `fixed`. La
 * nôtre est `sticky`, donc dans le flux : elle occupe déjà ses 16 + 60 px, et
 * il ne reste à réserver que l'air. Cf. l'écart assumé de layouts/signal.css. */
.sg-hero { padding: 114px 0 96px; border-bottom: 1px solid var(--hairline); }
.sg-hero h1 { font-size: clamp(40px, 6vw, 80px); max-width: 13ch; margin: 24px 0 26px; }

/* ═══════════════════════════ PRESTATIONS ════════════════════════════ */
.sg-offer {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  padding: 84px 0;
  border-bottom: 1px solid var(--hairline);
}
.sg-offer:last-of-type { border-bottom: 0; }
.sg-offer h2 {
  font-size: clamp(30px, 3.8vw, 50px);
  letter-spacing: -.035em;
  margin: 18px 0 20px;
  max-width: 14ch;
}
.sg-pitch {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 44ch;
}
.sg-pitch b { font-style: normal; font-weight: 400; color: var(--fg); }

.sg-bullets {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
}
.sg-bullets li {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  padding: 13px 0 13px 22px;
  border-bottom: 1px solid var(--hairline-2);
  position: relative;
}
/* Un tiret, pas une puce : le registre est celui du dossier d'enquête. */
.sg-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 21px;
  width: 9px;
  height: 1px;
  background: var(--accent);
}
.sg-bullets li b { color: var(--fg); font-weight: 500; }

/* La fiche technique de la prestation, qui suit la lecture. */
.sg-spec {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(var(--panel-rgb), .72);
  padding: 26px 24px;
  align-self: start;
  position: sticky;
  top: 110px;
}
.sg-spec .sg-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.sg-spec .sg-r { padding: 14px 0; border-bottom: 1px solid var(--hairline-2); }
.sg-spec .sg-r:last-child { border-bottom: 0; padding-bottom: 0; }
.sg-spec .sg-v { font-size: 15px; color: var(--fg); margin-top: 6px; line-height: 1.45; }
.sg-spec .sg-v small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 4px; }

/* ═════════════════════ CE QUE LA MAISON NE FAIT PAS ═════════════════ */
.sg-nope { border-top: 1px solid var(--hairline); padding: 96px 0; background: rgba(var(--bg-rgb), .86); }
.sg-h2-md { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.032em; margin-top: 16px; }
.sg-nope .sg-lead { margin-top: 20px; }
.sg-nope-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--hairline);
  margin-top: 40px;
}
.sg-nope-grid div {
  padding: 24px 28px 26px;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}
.sg-nope-grid div:nth-child(2n) { border-right: 0; }
/* Bornée à 900 px, la grille laissait un tiers de la colonne vide à droite,
 * son filet haut s'arrêtant net avant celui de la section. Elle prend toute
 * la mesure ; à partir de 1280 px, les quatre limites tiennent sur une rangée. */
@media (min-width: 1280px) {
  .sg-nope-grid { grid-template-columns: repeat(4, 1fr); }
  .sg-nope-grid div:nth-child(2n) { border-right: 1px solid var(--hairline); }
  .sg-nope-grid div:last-child { border-right: 0; }
}
.sg-nope-grid h3 { font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--muted); margin-bottom: 8px; line-height: 1.25; }
.sg-nope-grid p { font-size: 14px; color: var(--faint); line-height: 1.55; }

/* ═══════════════════════════════ OUTRO ══════════════════════════════ */
.sg-outro { padding: 110px 0 120px; border-top: 1px solid var(--hairline); }
.sg-outro h2 { font-size: clamp(32px, 4.4vw, 60px); letter-spacing: -.04em; max-width: 17ch; margin-bottom: 26px; }
.sg-outro .sg-lead { margin-bottom: 32px; }
.sg-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* `.site-btn` est une classe PARTAGÉE : la surcharge doit être scopée pour
 * passer devant celle de css/layouts/signal.css, à spécificité égale sinon. */
[data-theme="signal"] .site-btn.sg-btn-lg { padding: 15px 24px; font-size: 15px; }
.sg-ar { display: inline-block; transition: transform .18s; }
[data-theme="signal"] .site-btn:hover .sg-ar { transform: translateX(3px); }

/* ═════════════════════════════ PIED RICHE ═══════════════════════════ */
/* Il porte sa gouttière lui-même, comme `.sg-wrap` : `.site-footer` n'en met
 * pas, sans quoi le pied se retrouverait décalé d'une gouttière entière. */
.sg-fgrid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 48px;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.sg-fgrid p { font-size: 14px; color: var(--muted); margin-top: 16px; max-width: 38ch; line-height: 1.6; }
/* Deux classes, pour passer devant `.sg-fgrid p` (défaut repris de la
 * maquette, où `.fgrid2 p` écrasait déjà `.fh` et `.data`). */
.sg-fgrid .sg-fh {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 16px;
}
/* La mention mono n'a pas la mesure d'un paragraphe : 38ch d'une police à
 * chasse fixe la coupaient en deux dès 768 px. */
.sg-fgrid p.sg-fdata { max-width: none; margin-top: 20px; font-size: 12px; color: var(--faint); }
.sg-fgrid a { display: block; padding: 5px 0; font-size: 14px; color: var(--muted); }
.sg-fgrid a:hover { color: var(--fg); }
/* La marque tient sur une ligne : elle ne suit pas la règle des liens de colonne. */
.sg-fgrid a.site-brand { display: inline-flex; padding: 0; font-size: 17.5px; color: var(--fg); }

/* ══════════════════════════ PAGE LÉGALE ═════════════════════════════ */
/* Pas de constellation ici : du texte, lisible, et c'est tout. */
.sg-legal {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 64px;
  padding: 64px 0 120px;
  align-items: start;
}
.sg-toc {
  position: sticky;
  top: 110px;
  border-left: 1px solid var(--hairline);
  padding-left: 20px;
}
.sg-toc a {
  display: block;
  padding: 9px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color .18s;
}
.sg-toc a:hover { color: var(--fg); }
.sg-toc a .sg-toc-n { color: var(--accent); margin-right: 9px; }

.sg-doc h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.032em; padding-top: 26px; }
.sg-doc section {
  padding-bottom: 56px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 56px;
}
.sg-doc section:last-child { border-bottom: 0; margin-bottom: 0; }
/* Atteinte par ancre (legal.html#l3 depuis l'inscription, menu de gauche) :
 * le titre doit s'arrêter sous la barre sticky, pas dessous. */
.sg-doc section[id] { scroll-margin-top: 96px; }
.sg-doc h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin: 34px 0 10px; }
/* Paragraphes de texte seulement : écrite `.sg-doc p`, la règle passait devant
 * `.sg-tag` et `.sg-upd` — surtitre de section et date de mise à jour
 * s'affichaient en 15,5 px au lieu de leur corps mono de 11 px. */
.sg-doc p:not([class]) { font-size: 15.5px; color: var(--muted); line-height: 1.72; max-width: 68ch; }
.sg-doc p:not([class]) + p:not([class]) { margin-top: 14px; }
.sg-doc ul {
  margin: 14px 0 0;
  padding-left: 20px;
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.72;
  max-width: 68ch;
}
.sg-doc li { margin-bottom: 7px; }
.sg-doc li::marker { color: var(--accent); }
.sg-doc b { color: var(--fg); font-weight: 500; }
.sg-doc a { color: var(--accent); }
.sg-doc a:hover { opacity: .75; }

/* Un champ à compléter doit SE VOIR. Une mention légale incomplète qui se
 * fond dans le texte est pire qu'une mention légale absente. */
.sg-todo {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--warn);
  background: rgba(var(--warn-rgb), .08);
  border: 1px solid rgba(var(--warn-rgb), .24);
  border-radius: 4px;
  padding: 2px 7px;
}
.sg-upd {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 16px;
}

/* ═══════════════════════ PAGE OPERATIONS ════════════════════════════ */
/* Sections numérotées : colonne de titre à gauche, corps à droite. */
.sg-sec-block {
  display: grid;
  grid-template-columns: .42fr 1fr;
  gap: 56px;
  padding: 76px 0;
  border-bottom: 1px solid var(--hairline);
}
.sg-sec-block:last-of-type { border-bottom: 0; }
.sg-sec-head h2 { font-size: clamp(26px, 2.9vw, 38px); letter-spacing: -.032em; margin-top: 14px; max-width: 12ch; }
/* Les paragraphes de texte seulement, enfants directs et sans classe : écrites
 * `.sg-sec-body p` et `p + p`, ces règles atteignaient aussi la table
 * d'outillage (`.sg-stack-v` descendait de 20 px sous son libellé, qui prenait
 * lui-même 16,5 px au lieu de son corps mono) et rognaient la marge de
 * `.sg-sec-cta`. */
.sg-sec-body > p:not([class]) { font-size: 16.5px; color: var(--muted); line-height: 1.68; max-width: 60ch; }
.sg-sec-body > p:not([class]) + p:not([class]) { margin-top: 20px; }
.sg-sec-body p b { color: var(--fg); font-weight: 500; }
.sg-sec-cta { margin-top: 26px; }

/* Secteurs : une ligne = un numéro, un nom, ce qu'on y suit. */
.sg-sectors { border-top: 1px solid var(--hairline); margin-top: 8px; }
.sg-sector {
  display: grid;
  grid-template-columns: 52px 1fr 1.5fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline-2);
  align-items: baseline;
}
.sg-sector-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--accent); }
.sg-sector-name { font-size: 16.5px; font-weight: 500; letter-spacing: -.015em; }
.sg-sector-what { font-size: 14.5px; color: var(--faint); line-height: 1.5; }

/* Outillage : table mono à deux colonnes. */
.sg-stack { border-top: 1px solid var(--hairline); margin-top: 8px; }
.sg-stack-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline-2);
}
.sg-stack-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 3px;
}
.sg-stack-v { font-size: 15px; color: var(--muted); line-height: 1.55; }

/* Fiche de contact. */
.sg-card {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(var(--panel-rgb), .72);
  padding: 26px 26px 22px;
  max-width: 520px;
  margin-top: 10px;
}
.sg-card-r { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--hairline-2); font-size: 15px; }
.sg-card-r:last-child { border-bottom: 0; padding-bottom: 0; }
.sg-card-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  width: 118px; /* « DISPONIBILITÉ » en FR : 113 px, il débordait de 110 */
  flex: none;
  padding-top: 4px;
}
/* Une adresse ou un lien sans espace imposait sa largeur à toute la colonne :
 * à 320 px, la fiche et l'en-tête de section dépassaient l'écran de 35 px. */
.sg-card-v { color: var(--fg); min-width: 0; overflow-wrap: anywhere; }
.sg-card-v a { color: var(--accent); }
.sg-card-v small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 3px; }


/* ══════════════════════════ THREAT REPORTS ══════════════════════════ */
/* La maquette lit les rapports comme le sommaire d'une revue, pas comme des
 * cartes : une ligne par note, la source à gauche, le geste à droite. */

.sg-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
}
.sg-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: 7px 13px;
  background: transparent;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.sg-chip:hover { color: var(--fg); border-color: rgba(var(--white-rgb), .22); }
.sg-chip[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg); }

/* Aucun rapport publié : une phrase à la place de la liste (page Rapports)
 * ou de la grille (accueil). */
.sg-empty {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  padding: 32px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: 0;
}
/* Accueil : même retrait sous l'en-tête de bande que la grille qu'elle remplace. */
.sg-band .sg-empty { margin-top: 48px; }
/* Page Rapports : le héros pose déjà un filet bas, un second le doublait. */
.sg-hero + .sg-wrap > .sg-empty { border-top: 0; }

/* Le bandeau « spécimen ». La maquette l'a perdu ; il énonce un fait sur le
 * contenu, il ne décore pas — d'où sa reprise, dans la forme de la charte. */
.sg-specimen {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .06);
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 6px;
  padding: 11px 15px;
  margin: 26px 0 0;
}

.sg-entry {
  display: grid;
  grid-template-columns: 230px 1fr 130px;
  gap: 36px;
  padding: 30px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
  transition: background .18s;
}
.sg-entries .sg-entry:first-child { border-top: 1px solid var(--hairline); margin-top: 26px; }
.sg-entry:hover { background: rgba(var(--white-rgb), .018); }
.sg-entry-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.9;
  padding-top: 4px;
}
.sg-entry-kind { display: block; color: var(--accent); }
.sg-entry h2 {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.sg-entry:hover h2 { color: var(--accent-soft); }
.sg-entry p {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.sg-entry-read {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 6px;
  text-align: right;
}
.sg-entry-read small { display: block; color: var(--faint); margin-top: 6px; letter-spacing: .1em; }
/* Le PDF est un GESTE, pas une mention : la maquette n'affichait qu'un
 * nombre de pages inerte, la production sert un fichier. */
.sg-entry-pdf { display: block; margin-top: 8px; color: var(--faint); }
.sg-entry-pdf:hover { color: var(--fg); }

.sg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.sg-tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 3px 7px;
}

.sg-note {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(var(--panel-rgb), .72);
  padding: 22px 24px;
  /* Dernier bloc de la page avant la section d'abonnement : sans marge basse,
   * son cadre se confondait avec le filet haut de cette section. */
  margin: 44px 0 96px;
  max-width: 720px;
}
.sg-note p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.sg-note b { color: var(--fg); font-weight: 500; }

/* Recevoir les notes. */
.sg-sub { border-top: 1px solid var(--hairline); padding: 96px 0 110px; background: rgba(var(--bg-rgb), .86); }
.sg-sub-in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sg-sub h2 { max-width: 15ch; }
.sg-sub-cta { margin-top: 24px; }
.sg-sub-data { margin-top: 16px; }

/* La vue d'article : elle n'existe pas dans la maquette, mais elle existe en
 * production et elle marche. Elle emprunte la forme documentaire de la page
 * légale, qui est exactement le bon registre. */
.sg-article { padding: 56px 0 120px; max-width: 900px; }
.sg-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 30px;
}
.sg-back:hover { opacity: .75; }
.sg-art-meta { margin-bottom: 18px; }
.sg-article h1 { font-size: clamp(30px, 4vw, 52px); margin-bottom: 22px; }
.sg-article .sg-lead { max-width: 58ch; }
.sg-article .sg-tags { margin-top: 22px; }
.sg-art-body { margin-top: 34px; }
.sg-art-body section { padding-bottom: 34px; margin-bottom: 34px; }
/* Les intertitres d'un rapport sont des paliers de lecture, pas des chapitres :
 * la taille de `.sg-doc h2`, calibrée pour la page légale, les rendait plus
 * gros que le corps qu'ils annoncent. */
.sg-art-body h2 { font-size: clamp(19px, 1.7vw, 24px); padding-top: 0; margin-bottom: 14px; }
.sg-art-actions { margin-top: 10px; }


/* ═══════════════════════ CONSTELLATION DE FOND ══════════════════════ */
/* `#scene` et `#veil` ne sont émis que par les arbres de la refonte
 * (js/pages-signal.js), jamais par une page OPS×INTEL : ils n'ont donc pas
 * besoin d'être scopés, au même titre que les classes `sg-`. */
#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
/* Voile de lisibilité : le texte vit à gauche, la constellation respire à
 * droite. Sans lui, les étiquettes du graphe tombent dans les paragraphes.
 *
 * Les repères sont posés dans le MÊME cadre que le graphe (js/constellation.js,
 * FRAME) : 1440 px au plus, centré. En pourcentage de la fenêtre, ils glissaient
 * vers la droite sur un écran large — à 2560 px, le voile n'était plus opaque
 * que jusqu'à 819 px, au milieu de la colonne de texte. En dessous de 1440 px,
 * --veil-x vaut 0 et --veil-w 100 % : mêmes repères qu'avant.
 * 90° et non plus 92° : à angle presque horizontal, le tramage du dégradé
 * (opacités très proches sur fond quasi noir) dessinait des traînées
 * verticales, visibles sur grand écran. */
#veil {
  --veil-x: max(0px, 50% - 720px);
  --veil-w: min(100%, 1440px);
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--bg-rgb), .97) 0%,
    rgba(var(--bg-rgb), .94) calc(var(--veil-x) + var(--veil-w) * .32),
    rgba(var(--bg-rgb), .58) calc(var(--veil-x) + var(--veil-w) * .46),
    rgba(var(--bg-rgb), .10) calc(var(--veil-x) + var(--veil-w) * .62),
    rgba(var(--bg-rgb), 0) calc(var(--veil-x) + var(--veil-w) * .74));
}

/* Le bruit de l'accueil, sur toute la largeur : au-dessus du voile, qui le
 * masquerait sous la colonne de texte, et sous le contenu (`.sg-page`,
 * z-index 2). Ses points sont assez pâles pour se lire à travers. */
#fond {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
}

/* Sous 860 px, le texte occupe toute la largeur : il n'y a plus de côté
 * droit où la figure puisse respirer, et le dégradé laissait ses traits et
 * ses nœuds passer à pleine intensité sous les paragraphes. Le voile devient
 * uniforme et la constellation une simple texture de fond. */
@media (max-width: 860px) {
  #veil { background: rgba(var(--bg-rgb), .8); }
}

/* ═════════════════════════════ ACCUEIL ══════════════════════════════ */
.sg-col { max-width: 640px; }
.sg-rule { height: 1px; background: var(--hairline); margin: 18px 0 0; }

/* Le héros doit tenir dans le PREMIER écran, message de défilement compris.
 * La barre est `sticky`, donc dans le flux : le héros commence 76 px plus bas
 * (16 + 60 ; 64 px sous 860 px). Avec `min-height: 100vh`, son bas — et le
 * message posé dessus — tombait sous le bord de l'écran à l'ouverture. On
 * retire la barre, et on compte en `svh` : sur téléphone, `vh` mesure l'écran
 * barre d'adresse repliée, plus haut que ce qu'on voit au chargement.
 * Sur un écran peu haut (portable à 125 %, ~1536×730), le contenu lui-même
 * dépassait : marges et titre suivent aussi la hauteur, plus seulement la
 * largeur. */
.sg-home-hero {
  position: relative;
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
  display: flex;
  align-items: center;
  padding: clamp(40px, 9vh, 96px) 0 clamp(84px, 13vh, 130px);
}
.sg-home-hero h1 {
  font-size: clamp(46px, min(7.6vw, 10.5vh), 104px);
  max-width: 11ch;
  margin: clamp(14px, 2.6vh, 26px) 0 clamp(16px, 3vh, 30px);
}
.sg-hero-lead { font-size: clamp(20px, 1.7vw, 25px); max-width: 44ch; }
.sg-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(22px, 4vh, 38px); }
/* Invitation à défiler, centrée au bas du premier écran : une souris dont la
 * molette descend en boucle, ou un chevron qui rebondit sur écran tactile (une
 * souris n'y veut rien dire). C'est un lien vers § 01, nommé par hero.foot.
 * Centré sur l'en-tête pleine largeur : il ne dépend ni de --measure ni de la
 * colonne de texte. */
.sg-hero-foot {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 52px;
  color: var(--muted);
  /* --fade est posé par InviteDefilement (js/home.js) au fil du défilement. */
  opacity: var(--fade, 1);
  transition: color .2s, opacity .15s linear;
}
.sg-hero-foot.is-gone { visibility: hidden; pointer-events: none; }
.sg-hero-foot:hover, .sg-hero-foot:focus-visible { color: var(--fg); }
.sg-hero-foot:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.sg-scroll-mouse {
  position: relative;
  width: 24px;
  height: 38px;
  border: 1.5px solid currentColor;
  border-radius: 12px;
}
.sg-scroll-wheel {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--accent);
  animation: sg-scroll-wheel 1.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes sg-scroll-wheel {
  0%   { transform: translateY(0);    opacity: 1; }
  65%  { transform: translateY(12px); opacity: 0; }
  66%  { transform: translateY(0);    opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.sg-scroll-chev {
  display: none;
  width: 14px;
  height: 14px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: sg-scroll-chev 1.8s ease-in-out infinite;
}
@keyframes sg-scroll-chev {
  0%, 100% { transform: translateY(-4px) rotate(45deg); opacity: .5; }
  50%      { transform: translateY(4px) rotate(45deg);  opacity: 1; }
}
@media (hover: none) and (pointer: coarse) {
  .sg-scroll-mouse { display: none; }
  .sg-scroll-chev { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-scroll-wheel { animation: none; opacity: 1; }
  .sg-scroll-chev { animation: none; }
}

/* Un chapitre occupe plus qu'un écran : c'est cette hauteur qui donne à la
 * caméra de la constellation la course dont son récit a besoin. */
.sg-chapter { min-height: 118vh; display: flex; align-items: center; padding: 80px 0; }
.sg-chapter-h { font-size: clamp(38px, 5.6vw, 74px); max-width: 15ch; margin-top: 34px; }
.sg-chapter-lead { margin-top: 26px; }
.sg-chapter-data { margin-top: 28px; }

/* § 02 — les six modules. Deux colonnes seulement : la moitié droite de
 * l'écran appartient à la constellation, et ses étiquettes ne doivent jamais
 * tomber sur du texte. */
.sg-mods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--hairline);
  margin-top: 56px;
  max-width: 700px;
}
.sg-mod {
  padding: 24px 26px 28px;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  background: rgba(var(--panel-rgb), .55);
}
.sg-mod:nth-child(2n) { border-right: 0; }
/* Même correction que pour `.sg-cell` : la maquette écrit `.mod .data`. */
.sg-mod .sg-modn { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--accent); }
.sg-mod h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin: 14px 0 8px; line-height: 1.2; }
.sg-mod p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.sg-mod .sg-mod-d { margin-top: 16px; font-family: var(--font-mono); color: var(--faint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* § 04 — le chiffre de la coupe par corrélation. */
.sg-cut { display: flex; align-items: baseline; gap: 22px; margin-top: 44px; flex-wrap: wrap; }
.sg-cut-fig { font-size: clamp(58px, 8vw, 110px); font-weight: 400; letter-spacing: -.05em; line-height: .85; }
.sg-cut-out { color: rgba(var(--fg-rgb), .14); }
.sg-cut-keep { color: var(--confirm); }
.sg-cut-arrow { font-family: var(--font-mono); color: var(--faint); font-size: 20px; }
.sg-cut-legend {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 14px;
}

/* Feuille de route : volontairement en retrait et bordée par la couleur
 * d'avertissement, pour qu'on ne puisse pas la confondre avec une capacité
 * livrée. La maquette emploie une pêche qui n'a pas de jeton ; --warn porte
 * exactement ce rôle, et c'est la charte qui décide de la teinte. */
.sg-roadmap {
  margin-top: 30px;
  max-width: 560px;
  border: 1px dashed rgba(var(--warn-rgb), .34);
  border-radius: 9px;
  background: rgba(var(--warn-rgb), .045);
  padding: 18px 20px 19px;
}
.sg-rm-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--warn);
}
.sg-rm-v { font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin: 9px 0 7px; }
.sg-rm-when {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--warn);
  border: 1px solid rgba(var(--warn-rgb), .34);
  border-radius: 4px;
  padding: 2px 8px;
  margin-left: 9px;
  vertical-align: 2px;
}
.sg-rm-d { font-size: 14px; color: var(--muted); line-height: 1.55; }
.sg-rm-d b { color: var(--fg); font-weight: 500; }

/* § 05 — la fiche d'alerte : le livrable, montré et non décrit. */
.sg-alert {
  margin-top: 44px;
  max-width: 620px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(var(--panel-rgb), .86);
  overflow: hidden;
}
.sg-alert-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.sg-sev {
  padding: 3px 9px;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: .14em;
  background: rgba(var(--accent-rgb), .14);
  color: var(--hot);
  border: 1px solid rgba(var(--accent-rgb), .34);
}
/* Chaque mention reste d'un bloc : à 390 px, « SVT-2026- / 0412 » se coupait
 * au tiret et « 2 / H » séparait le chiffre de son unité. Quand la ligne ne
 * suffit plus, c'est la date qui passe dessous, entière. */
.sg-alert-top { flex-wrap: wrap; row-gap: 8px; }
.sg-alert-top > span { white-space: nowrap; }
.sg-alert-when { margin-left: auto; }
.sg-alert-body { padding: 22px 20px 8px; }
.sg-alert-body h3 { font-size: 21px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.sg-alert-body > p {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 12px;
}
.sg-alert-rows { margin-top: 20px; border-top: 1px solid var(--hairline-2); }
.sg-arow { display: flex; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--hairline-2); font-size: 14px; }
.sg-arow-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  width: 104px;
  flex: none;
  padding-top: 3px;
}
.sg-arow-v { color: var(--fg); }
.sg-arow-v em { font-style: normal; color: var(--confirm); }
.sg-alert-steps {
  padding: 18px 20px 22px;
  background: rgba(var(--white-rgb), .02);
  border-top: 1px solid var(--hairline);
}
.sg-alert-steps-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.sg-alert-steps ol { margin: 12px 0 0; padding-left: 20px; font-size: 14.5px; color: var(--muted); line-height: 1.75; }
.sg-alert-steps li::marker { color: var(--accent); font-family: var(--font-mono); font-size: 12px; }

/* ══════════════════════ BANDES ET GRILLES ═══════════════════════════ */
.sg-band { padding: 110px 0; border-top: 1px solid var(--hairline); background: rgba(var(--bg-rgb), .86); }
.sg-band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.sg-band-h { font-size: clamp(30px, 3.6vw, 50px); letter-spacing: -.032em; max-width: 16ch; margin-top: 16px; }
.sg-band-head .sg-lead { margin-top: 16px; }
.sg-band-cta { margin-top: 34px; }

.sg-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); margin-top: 48px; }
.sg-cell {
  padding: 32px 30px 34px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
}
.sg-cell:nth-child(3n) { border-right: 0; }
/* `.sg-cell .sg-cell-n` et non `.sg-cell-n` : la maquette écrit `.cell .mod-n`
 * et `.cell .meta`, deux classes, pour passer devant `.cell p`. Ramenées à une
 * seule au portage, elles perdaient contre `.sg-cell p` — numéro et mention
 * prenaient 14,5 px au lieu de leur corps mono, et le numéro, étiré par
 * `flex: 1`, repoussait le titre de la carte 03 de 23 px vers le bas. */
.sg-cell .sg-cell-n {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.sg-cell h3 { font-size: 19px; font-weight: 600; letter-spacing: -.022em; margin: 14px 0 10px; line-height: 1.25; }
.sg-cell p { font-size: 14.5px; color: var(--muted); line-height: 1.6; flex: 1; }
.sg-cell .sg-cell-meta {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  flex: none;
}
.sg-go {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.sg-go:hover { opacity: .72; }

/* ═══════════════════════════════ TARIFS ═════════════════════════════ */
/* Le padding haut est identique partout, carte à badge comprise : sinon les
 * trois en-têtes ne s'alignent pas. */
.sg-price {
  padding: 56px 30px 32px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  min-height: 470px;
}
.sg-price:nth-child(3n) { border-right: 0; }
.sg-price-feat {
  position: relative;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .10), transparent 58%);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .30);
}
.sg-price-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.sg-price-amount { font-size: 42px; font-weight: 400; letter-spacing: -.04em; margin: 18px 0 4px; }
.sg-price-amount small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--faint); font-family: var(--font-mono); }
.sg-price-desc { font-size: 14px; color: var(--muted); margin-bottom: 22px; line-height: 1.55; }
.sg-price ul {
  list-style: none;
  margin: 0 0 26px;
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
  border-top: 1px solid var(--hairline);
}
.sg-price li { font-size: 14px; color: var(--muted); display: flex; gap: 10px; line-height: 1.45; }
.sg-price li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 8px;
}
[data-theme="signal"] .sg-price .site-btn { justify-content: center; }
.sg-badge {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  padding: 7px;
  text-align: center;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.sg-price-note { margin-top: 30px; max-width: 70ch; line-height: 1.7; }

/* ════════════════════════════════ DÉMO ══════════════════════════════ */
/* Le fond et le filet courent sur toute la largeur, le contenu reste dans la
 * colonne : sans le rembourrage latéral, la démo s'étalait de bord à bord sur
 * un écran large (2560 px) quand tout le reste du site tient dans --measure.
 * `minmax(0, …)` : sans lui, la largeur minimale du formulaire (deux colonnes
 * de champs) l'emporte sur 1fr et la section déborde de l'écran sur mobile. */
.sg-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  padding: 0 calc((100% - var(--measure)) / 2);
  border-top: 1px solid var(--hairline);
  background: rgba(var(--bg-rgb), .9);
  position: relative;
  z-index: 2;
}
.sg-demo-side { padding: 100px var(--gut); border-right: 1px solid var(--hairline); }
.sg-demo-side h2 { font-size: clamp(38px, 5.2vw, 70px); letter-spacing: -.04em; margin: 22px 0 24px; }
.sg-demo-meta { margin-top: 34px; }
.sg-dm-row { display: flex; gap: 16px; padding: 13px 0; border-top: 1px solid var(--hairline); font-size: 14.5px; color: var(--muted); }
.sg-dm-row:last-child { border-bottom: 1px solid var(--hairline); }
.sg-dm-row b {
  color: var(--fg);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  width: 92px;
  flex: none;
  padding-top: 3px;
}

/* Demandes de démonstration fermées : l'avis prend la place du formulaire
 * (DEMO_OUVERTE, js/pages-signal.js). */
.sg-demo-closed {
  align-self: center;
  padding: 100px var(--gut);
  max-width: 560px;
}
.sg-demo-closed p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 28px; }
.sg-demo-closed .sg-demo-closed-h {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--fg);
  margin-bottom: 16px;
}

/* LE FORMULAIRE DE DÉMO EST CELUI DE LA PRODUCTION (décision 5 du brief) :
 * js/demo-form.js n'est pas réécrit, il est réhabillé. Il émet des classes
 * `oi-*`, PARTAGÉES avec la charte OPS×INTEL — ces règles doivent donc être
 * scopées, contrairement aux `sg-*`. */
[data-theme="signal"] .oi-demo-form-card { padding: 100px var(--gut); }
[data-theme="signal"] .oi-dfc-h {
  margin-bottom: 0;
  padding-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
[data-theme="signal"] .oi-dfc-grid { gap: 22px; margin: 30px 0 26px; }
/* LISIBILITÉ (2026-10-08) : les libellés mono en capitales à 11px et les
 * champs réduits à un filet ne se lisaient plus. Libellé en clair au-dessus,
 * champ encadré et légèrement teinté, anneau d'accent au focus. */
[data-theme="signal"] .oi-dfc-row { gap: 8px; }
[data-theme="signal"] .oi-dfc-row label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(var(--fg-rgb), .86);
}
[data-theme="signal"] .oi-dfc-row:focus-within label { color: var(--fg); }
[data-theme="signal"] .oi-dfc-row input,
[data-theme="signal"] .oi-dfc-row select {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg);
  background-color: rgba(var(--fg-rgb), .045);
  border: 1px solid rgba(var(--fg-rgb), .2);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  min-width: 0;
  scroll-margin-top: 110px; /* le champ ciblé et son libellé restent sous la barre sticky */
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
[data-theme="signal"] .oi-dfc-row input:hover,
[data-theme="signal"] .oi-dfc-row select:hover { border-color: rgba(var(--fg-rgb), .34); }
[data-theme="signal"] .oi-dfc-row input::placeholder {
  color: rgba(var(--fg-rgb), .42);
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 15px;
}
[data-theme="signal"] .oi-dfc-row input:focus,
[data-theme="signal"] .oi-dfc-row select:focus {
  border-color: var(--accent);
  background-color: rgba(var(--fg-rgb), .06);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3);
}
/* Flèche dessinée en dégradés : pas d'image, donc pas de couleur littérale. */
[data-theme="signal"] .oi-dfc-row select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
[data-theme="signal"] .oi-dfc-row select option { background: var(--bg-2); color: var(--fg); }
[data-theme="signal"] .oi-dfc-row select:has(option[value=""]:checked) { color: rgba(var(--fg-rgb), .5); }
[data-theme="signal"] .oi-dfc-foot {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
  margin-top: 16px;
}
/* Le bouton du formulaire : dans cette charte le plein est CLAIR, jamais bleu —
 * même règle que `.site-btn.primary`, appliquée à la classe que le composant
 * de production émet. */
[data-theme="signal"] .oi-btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  word-spacing: .1em; /* même raison que .site-btn (css/layouts/signal.css) */
  text-transform: none;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--fg);
  box-shadow: none;
}
[data-theme="signal"] .oi-btn:hover {
  border-color: rgba(var(--white-rgb), .24);
  background: rgba(var(--white-rgb), .04);
  color: var(--fg);
  box-shadow: none;
}
[data-theme="signal"] .oi-btn.primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  font-weight: 500;
  box-shadow: none;
}
[data-theme="signal"] .oi-btn.primary:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--bg);
  box-shadow: none;
}
[data-theme="signal"] .oi-btn.big { padding: 15px 24px; font-size: 15px; letter-spacing: -.01em; }

/* ═══════════════════════════ RESPONSIVE ═════════════════════════════ */
/* Sous 1080 px, la présentation prend toute la largeur et les deux colonnes de
 * liens se partagent la rangée suivante. En « 1fr 1fr » simple, la seconde
 * colonne tombait seule sur une deuxième rangée et la présentation, à 390 px,
 * n'avait plus que la moitié de l'écran. */
@media (max-width: 1080px) {
  .sg-fgrid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .sg-fgrid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .sg-offer { grid-template-columns: 1fr; gap: 34px; padding: 64px 0; }
  .sg-spec { position: static; }
  .sg-nope-grid { grid-template-columns: 1fr; }
  .sg-nope-grid div { border-right: 0; }
}
@media (max-width: 860px) {
  .sg-hero { padding: 90px 0 72px; }
}

@media (max-width: 900px) {
  .sg-legal { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .sg-toc {
    position: static;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    border-left: 0;
    /* Filet SOUS le sommaire : au-dessus, il doublait à 40 px celui du héros. */
    border-bottom: 1px solid var(--hairline);
    padding: 0 0 16px;
  }
}

@media (max-width: 980px) {
  .sg-sec-block { grid-template-columns: 1fr; gap: 26px; padding: 58px 0; }
  .sg-sector { grid-template-columns: 34px 1fr; }
  .sg-sector-what { grid-column: 2; margin-top: 4px; }
  .sg-stack-row { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 980px) {
  .sg-entry { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .sg-entry-read { text-align: left; padding-top: 2px; }
  .sg-entry-pdf { display: inline-block; margin: 0 0 0 16px; }
  .sg-sub-in { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Accueil : les seuils sont ceux de la maquette (1080 puis 860 px) ── */
@media (max-width: 1080px) {
  .sg-demo { grid-template-columns: minmax(0, 1fr); }
  .sg-demo-side { border-right: 0; border-bottom: 1px solid var(--hairline); padding-bottom: 70px; }
  [data-theme="signal"] .oi-demo-form-card { padding-top: 70px; }
}
@media (max-width: 860px) {
  #veil { background: linear-gradient(180deg, rgba(var(--bg-rgb), .74), rgba(var(--bg-rgb), .93)); }
  .sg-mods { grid-template-columns: 1fr; max-width: none; }
  .sg-mod { border-right: 0; }
  .sg-grid3 { grid-template-columns: 1fr; }
  .sg-cell, .sg-price { border-right: 0; }
  .sg-chapter { min-height: auto; padding: 76px 0; }
  .sg-home-hero { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
  .sg-hero-foot { bottom: 18px; }
}
/* Téléphone peu haut (≤ 720 px visibles, soit la plupart une fois la barre
 * d'adresse comptée) : le héros remplissait tout l'écran et repoussait le
 * chevron de défilement dessous. Titre, chapeau et marges se resserrent. */
@media (max-width: 860px) and (max-height: 720px) {
  .sg-home-hero { padding: 24px 0 76px; }
  .sg-home-hero h1 { font-size: 38px; margin: 12px 0 14px; }
  .sg-hero-lead { font-size: 18px; }
  .sg-hero-ctas { margin-top: 20px; }
}
/* Formulaire de démo sur téléphone : une colonne de champs. À deux colonnes,
 * chaque champ tombait sous 150 px et ses libellés se tronquaient. */
@media (max-width: 560px) {
  [data-theme="signal"] .oi-dfc-grid { grid-template-columns: minmax(0, 1fr); }
  [data-theme="signal"] .oi-dfc-row.span { grid-column: auto; }
  [data-theme="signal"] .oi-dfc-row input,
  [data-theme="signal"] .oi-dfc-row select { min-width: 0; width: 100%; }
}