/* ============================================================================
   SmartAGT HOME V2 - COUCHE FONDATION (charge APRES styles.css)
   Direction artistique : ART-DIRECTION.md (document autoritaire).
   Ce fichier pose : polices self-hebergees, tokens semantiques V2, grain,
   le composant signature .sovereign-rule, et les utilitaires editoriaux
   (.block-editorial, .blk-grid, .eyebrow, .h2-block, .lede, .instrument).
   Aucun appel CDN. Zero em-dash. Accents FR preserves.
   ========================================================================== */

/* Ancrage : les sections cliquees (ex : depuis l'anneau #sec-b0) se posent
   sous la nav sticky (~67px) au lieu d'etre masquees derriere. */
html { scroll-padding-top: 5rem; }

/* ---------------------------------------------------------------------------
   1. POLICES (self-hebergees, OFL/Apache, zero Google Fonts)
   --------------------------------------------------------------------------- */

/* Lexend Deca - variable, axe wght 100..900. Fichier principal. */
@font-face {
  font-family: "Lexend Deca";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/lexend-deca-variable.woff2") format("woff2-variations");
}
/* Lexend Deca - fallback statique latin (sous-ensemble), + latin-ext. */
@font-face {
  font-family: "Lexend Deca Fallback";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/lexend-deca-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend Deca Fallback";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/lexend-deca-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono - latin + latin-ext (poids 400/500, statique). */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   2. TOKENS V2 (couche semantique 2.2 de l'ART-DIRECTION, par-dessus l'existant)
   --------------------------------------------------------------------------- */

:root {
  /* --- Polices (3 roles porteurs de sens) --- */
  --font-display: "Lexend Deca", "Lexend Deca Fallback", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Plus de mono (demande client) : le token reste pour ne rien casser mais pointe sur Inter (charte). */
  --font-mono:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Encres souveraines (ruptures sombres B6, B7, CTA) --- */
  --ink-sovereign: #0b1220; /* dark mode PRODUIT (frontend), fond des sections sombres. */
  --ink-pressed:   #070b16; /* le plus profond (proche app) : CTA final, audit, sceaux. */

  /* --- Profondeurs cyan --- */
  --cyan-signal: #00BDFF; /* = --color-action-primary, alias "donnee active / preuve". */
  --cyan-deep:   #0086D4; /* profondeur, etats presses, fin de degrade de filet. */
  --cyan-hi:     #00D1ED; /* fin du gradient officiel, halos. */

  /* --- La seule couleur a sens unique (VERT SCEAU) --- */
  --seal-mint: #10b981; /* = couleur SUCCES du frontend. statut "verifie / chaine intacte / conforme".
                           JAMAIS decoratif, JAMAIS en fond, JAMAIS en bordure deco. */

  /* --- Etat d'attente / tension (parcimonieux) --- */
  --alert-amber: #f59e0b; /* = couleur WARNING du frontend. attente HITL, jauge proche du plafond. */

  /* --- Surfaces & filets souverains --- */
  --paper-act:     #F7F9FC; /* le "papier" du light mode, plus froid que blanc pur. */
  --char-graphite: #111827; /* surface PRODUIT (frontend) des cartouches d'instrument sombres. */
  --seal-line:     rgba(0, 189, 255, 0.22); /* le filet hairline cyan, systeme de cadre. */

  /* --- Easings nommes (3 seulement, coherence d'auteur) --- */
  --ease-rule: cubic-bezier(0.22, 1, 0.36, 1);    /* le trace officiel : filets, glisses. */
  --ease-seal: cubic-bezier(0.34, 1.56, 0.64, 1); /* micro-pop des preuves (overshoot). */
  --ease-calm: cubic-bezier(0.4, 0, 0.2, 1);      /* reveals sobres, hovers, fondus. */

  /* --- Echelle typo fluide (clamp, section 2.4) --- */
  --fs-h2:      clamp(2.25rem, 4vw, 3.5rem);        /* Bloc titre H2 - Lexend 600, -0.03em, lh 1.04 */
  --fs-lede:    clamp(1.0625rem, 1.6vw, 1.4rem);    /* Lede - Inter 400, lh 1.55 */
  --fs-eyebrow: 0.78rem;                            /* Eyebrow mono - 0.18em, uppercase */
  --fs-data:    0.8125rem;                          /* Data/caption mono tabular-nums */

  /* --- Padding inter-blocs souverain (via .block-editorial, jamais .section nu) --- */
  --block-pad: 5rem;
}

/* Grain SVG (feTurbulence baseFrequency 0.9, opacite ~0.025) en data-URI,
   applicable via .grain sur fonds sombres uniquement. */
:root {
  --grain-uri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   3. GRAIN utilitaire (matiere anti-flat sur sections sombres)
   --------------------------------------------------------------------------- */

.grain { position: relative; isolation: isolate; }
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain-uri);
  background-size: 160px 160px;
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}
.grain > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   4. UTILITAIRES EDITORIAUX (consommes par les builders de section)
   --------------------------------------------------------------------------- */

/* Bloc editorial : surcharge --section-pad SANS toucher l'element .section nu
   (conflit de specificite documente : `section { padding: var(--section-pad) }`).
   On neutralise le padding vertical de l'element et on l'impose ici. */
.block-editorial {
  /* Cadrage regulier : chaque bloc occupe au moins un ecran et CENTRE son
     contenu verticalement (le filet inter-bloc est en absolu-bas, hors flux). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding-top: var(--block-pad);
  padding-bottom: var(--block-pad);
  position: relative;
  /* Coupe l'animation fadeInUp generique de l'element section nu. */
  animation: none;
}
/* PLEINE LARGEUR UTILE (approche V1) : les blocs editoriaux ne se ratatinent
   plus a 80rem centre. Le CONTENEUR remplit la largeur de l'ecran avec un
   padding lateral FLUIDE (clamp/vw, jamais de px fixe) exactement comme le
   hero/cta-final de la V1, qui montaient jusqu'a --maxw-wide (90rem) voire
   95rem. On pousse le plafond plus haut (fluide) pour que les blocs respirent
   pleine largeur a 1920 sans bord mort, tout en restant lisibles a 1280.
   Le TEXTE reste sur une mesure raisonnable grace aux max-width internes
   (.lede 46ch, .blk-text, etc.) : seul le BLOC/visuel prend la pleine largeur. */
.block-editorial > .container {
  max-width: clamp(80rem, 92vw, 120rem);
  width: 100%;
  padding-left: clamp(1.5rem, 4vw, 5rem);
  padding-right: clamp(1.5rem, 4vw, 5rem);
}
/* La grille asymetrique s'etale sur toute la largeur utile du conteneur. */
.block-editorial > .container > .blk-grid,
.block-editorial > .container > .blk-grid--reverse { width: 100%; }

/* Grille asymetrique 5/7 (texte 5 colonnes, visuel 7 : le visuel domine). */
.blk-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
/* Alternance : sur les blocs pairs, le texte passe a droite. */
.blk-grid--reverse { grid-template-columns: 7fr 5fr; }
.blk-grid--reverse > .blk-text { order: 2; }
.blk-grid--reverse > .blk-visual { order: 1; }
@media (max-width: 1024px) {
  .blk-grid, .blk-grid--reverse { grid-template-columns: 1fr; gap: 2.5rem; }
  .blk-grid--reverse > .blk-text { order: 0; }
  .blk-grid--reverse > .blk-visual { order: 0; }
}

/* Eyebrow folioté §0N - mono cyan rationne. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-signal);
  font-variant-numeric: tabular-nums;
  margin: 0 0 1.25rem;
}
/* Icone ecrou de marque dans l'eyebrow : taille par defaut. Evite l'ecrou GEANT
   quand une section oublie de contraindre l'img (bug B5 "Regles & Quotas" :
   l'ecrou rendait a sa taille intrinseque 44px). Les regles scopees par section
   (#sec-bX .eyebrow img, plus specifiques) restent prioritaires. */
.eyebrow img { width: 14px; height: 14px; flex: none; display: block; }

/* Titre de bloc - Lexend 600. */
.h2-block {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--color-text-default);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.h2-block em {
  font-style: normal;
  color: var(--cyan-signal);
}

/* Lede - Inter, support. */
.lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--color-text-subtle);
  margin: 0;
  max-width: 46ch;
  text-wrap: balance;
}

/* Cartouche d'instrument - radius 4px ("afficheur de mesure"), exception unique. */
.instrument {
  background: var(--char-graphite);
  border: 1px solid var(--seal-line);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04),
              0 30px 80px -30px rgba(0, 189, 255, 0.18);
  color: #E6EDF7;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  position: relative;
  overflow: hidden;
}
.instrument::after {
  /* legere texture grain sur le cartouche graphite. */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain-uri);
  background-size: 160px 160px;
  opacity: 0.025;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Cesure manuelle d'un H1/H2 (force le saut a un point precis). */
.brk { display: block; }

/* ---------------------------------------------------------------------------
   5. LE COMPOSANT SIGNATURE : .sovereign-rule (UNE mecanique, 3 roles)
   --------------------------------------------------------------------------- */

/* ROLE A - barre de progression de scroll, sous la nav.
   La largeur est pilotee par scripts-v2.js (requestAnimationFrame, passif). */
.sovereign-rule--progress {
  position: relative;
  height: 2px;
  width: 100%;
  background: var(--seal-line);
  overflow: hidden;
}
.sovereign-rule--progress .sr-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan-signal) 60%, var(--cyan-hi));
  will-change: width;
}
/* La tete de traceur (puce-ecrou) glisse au bout de la barre de progression. */
.sovereign-rule--progress .sr-head {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease-calm);
}
.sovereign-rule--progress[data-active="true"] .sr-head { opacity: 1; }

/* ROLE B - separateur inter-bloc : SVG trace de gauche a droite a l'entree.
   Pose en bas de chaque <section data-block>, gere par SR (.is-traced). */
.sovereign-rule--sep {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 14px;
  margin: 0;
  pointer-events: none;
  /* Le filet est trace au CENTRE du SVG (y=7 sur 14). Sans correction il flotte
     7px AU-DESSUS de la frontiere de section : a une transition clair -> sombre
     (ex : roles -> CTA) on voit un liseré clair entre le filet et le bloc sombre.
     On decale la boite pour que le filet affleure exactement la couture. */
  transform: translateY(6.5px);
}
.sovereign-rule--sep .sr-line {
  /* filet gris discret, theme-aware (clair en blanc / fonce en sombre). */
  stroke: var(--color-border-default);
  stroke-width: 1;
  stroke-linecap: round;
  fill: none;
  /* dash anime par SR : longueur posee au runtime via --sr-len. */
  stroke-dasharray: var(--sr-len, 2000);
  stroke-dashoffset: var(--sr-len, 2000);
  transition: stroke-dashoffset 900ms var(--ease-rule), stroke 600ms var(--ease-calm);
}
.sovereign-rule--sep .sr-nut {
  /* boulon retire : le separateur est un simple filet gris discret. */
  display: none;
}
.sovereign-rule--sep.is-traced .sr-line {
  stroke-dashoffset: 0;
  filter: none;
}
.sovereign-rule--sep.is-traced .sr-nut {
  offset-distance: 100%;
  opacity: 1;
}
/* Vire mint quand verifie (role partage avec la hash-chain). */
.sovereign-rule--sep.is-verified .sr-line { stroke: var(--color-border-default); filter: none; }

/* ---------------------------------------------------------------------------
   6. PRIMITIVES PARTAGEES (ledger, puce-ecrou, hash slot)
   --------------------------------------------------------------------------- */

/* Conteneur ledger (B7) - rendu par SR.renderLedger(). */
#audit-ledger { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.sr-ledger-row {
  display: grid;
  grid-template-columns: auto 7.5rem 7rem 1fr 7rem 9rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-data);
  color: #C7D2E3;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
}
.sr-ledger-row .sr-chain-node {
  /* la puce = maillon de la chaine (particle-2). */
  width: 10px; height: 10px; flex: none;
  filter: drop-shadow(0 0 0 transparent);
}
.sr-ledger-row .sr-cell-time   { color: #8DA2BE; }
.sr-ledger-row .sr-cell-actor  { color: #E6EDF7; }
.sr-ledger-row .sr-cell-action { color: var(--cyan-signal); }
/* Statuts en cyan par defaut (en circulation), mint seulement une fois verifie.
   hitl reste amber en toutes circonstances (etat de tension). */
.sr-ledger-row .sr-cell-status[data-status="valid"]  { color: var(--cyan-deep); }
.sr-ledger-row .sr-cell-status[data-status="sealed"] {
  color: var(--cyan-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sr-ledger-row .sr-cell-status[data-status="hitl"]   {
  color: var(--alert-amber);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sr-ledger-row.is-verified .sr-cell-status[data-status="valid"],
.sr-ledger-row.is-verified .sr-cell-status[data-status="sealed"] { color: var(--seal-mint); }
/* sceau SEALED (ligne SYSTEM) en mint sature, micro-cartouche bordure mint hairline. */
.sr-ledger-row.is-verified .sr-cell-status[data-status="sealed"] {
  color: var(--seal-mint);
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--seal-mint) 45%, transparent);
  border-radius: 3px;
}
.sr-ledger-row .sr-cell-hash {
  /* placeholder au repos : etat d'attente discret, tabular-nums conserve
     pour ne pas faire sauter la colonne quand le vrai hash s'affiche. */
  color: var(--color-text-muted);
  opacity: 0.45;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sr-ledger-row.is-verified .sr-cell-hash { color: var(--seal-mint); opacity: 1; }
.sr-ledger-row.is-verified .sr-chain-node {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--seal-mint) 55%, transparent));
}
/* maillon vertical entre deux lignes (la chaine). */
.sr-ledger-row::before {
  content: "";
  position: absolute;
  left: calc(0.75rem + 4px);
  top: -6px;
  width: 1.25px;
  height: 6px;
  background: var(--cyan-signal);
  opacity: 0;
  transition: opacity 300ms var(--ease-rule);
}
.sr-ledger-row.is-linked::before { opacity: 1; }
.sr-ledger-row.is-verified::before { background: var(--seal-mint); }

/* le sceau final : un vrai FOOTER du plateau qui s'anime (chaine verifiee). */
.sr-ledger-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.62rem 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--seal-mint) 35%, var(--color-border-default));
  border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, var(--seal-mint) 8%, transparent);
  color: var(--seal-mint);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 400ms var(--ease-calm), transform 400ms var(--ease-calm);
}
.sr-ledger-seal svg { width: 16px; height: 16px; flex: none; }
.sr-ledger-seal.is-on { opacity: 1; transform: none; }

/* effet slot-machine sur le hash pendant la verification. */
.sr-hash-rolling { color: var(--cyan-hi); }

/* Bouton mono "Verifier la chaine". */
.sr-verify-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-data);
  letter-spacing: 0.04em;
  color: var(--cyan-signal);
  background: transparent;
  border: 1px solid var(--seal-line);
  border-radius: 4px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: border-color 180ms var(--ease-calm), color 180ms var(--ease-calm),
              background-color 180ms var(--ease-calm);
}
.sr-verify-btn:hover {
  border-color: color-mix(in srgb, var(--cyan-signal) 60%, transparent);
  background: color-mix(in srgb, var(--cyan-signal) 8%, transparent);
}
.sr-verify-btn[data-done="true"] { color: var(--seal-mint); border-color: color-mix(in srgb, var(--seal-mint) 50%, transparent); }

/* ---------------------------------------------------------------------------
   7. REVEAL etendu ([data-reveal] = .reveal-once, variantes rule|fade|seal)
   --------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-calm), transform 600ms var(--ease-calm);
  will-change: opacity, transform;
}
[data-reveal="rule"] { transform: translateX(-18px); }
[data-reveal="seal"] {
  transform: scale(0.94);
  transition: opacity 250ms var(--ease-seal), transform 250ms var(--ease-seal);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  /* On RELACHE la couche GPU une fois l'anim terminee : sinon le will-change
     persistant garde l'element composite -> texte rasterise en AA niveaux de
     gris (au lieu du sub-pixel) et le gras parait flou. Retour rendu net. */
  will-change: auto;
}

/* ---------------------------------------------------------------------------
   8. NAV V2 (etendue : 3 ancres + CTA + theme-toggle + filet de progression)
   --------------------------------------------------------------------------- */

.nav-v2 {
  position: sticky;
  top: 0;
  z-index: 100;
  /* fond SOLIDE (jamais de glass translucide). */
  background: var(--color-page-background);
  border-bottom: 1px solid var(--color-border-default);
}

/* Switcher de langue (chrome bilingue FR/EN) : pilule, langue active mise en avant. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-page-background);
}
.lang-switch-cur,
.lang-switch-link {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  text-decoration: none;
}
.lang-switch-cur { background: var(--color-action-primary); color: var(--color-action-primary-text); }
.lang-switch-link { color: var(--color-text-muted); transition: color 0.18s, background 0.18s; }
.lang-switch-link:hover { color: var(--color-text-default); background: color-mix(in srgb, var(--color-text-muted) 12%, transparent); }
/* pas de filet cyan : seule la fine bordure basse grise discrete reste
   (--color-border-default : gris clair en light, gris fonce en dark, deja sur .nav-v2). */
/* 3 zones : logo a gauche, nav VRAIMENT centree, actions a droite. */
.nav-v2 .nav-v2-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: 66px;
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: 0 2rem;
}
.nav-v2 .nav-v2-brand { justify-self: start; display: inline-flex; align-items: center; text-decoration: none; }
.nav-v2 .nav-v2-brand img { height: 31px; width: auto; display: block; }
.nav-v2 .nav-v2-brand .on-dark { display: none; }
:root[data-color-mode="dark"] .nav-v2 .nav-v2-brand .on-light { display: none; }
:root[data-color-mode="dark"] .nav-v2 .nav-v2-brand .on-dark { display: block; }

/* nav centree, hover en pill discret (plus d'underline old-school). */
.nav-v2 .nav-v2-links { justify-self: center; display: flex; align-items: center; gap: 0.12rem; }
.nav-v2 .nav-v2-links a {
  position: relative;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  color: var(--color-text-subtle);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border-radius: 9px;
  transition: color 160ms var(--ease-calm), background-color 160ms var(--ease-calm);
}
/* hover des liens nav : NOIR franc en light, BLANC franc en dark (dynamisme).
   Scope sur les liens directs (Souveraineté/Tarifs) + les triggers, PAS les items du menu. */
:root[data-color-mode="light"] .nav-v2 .nav-v2-links > a:hover,
:root[data-color-mode="light"] .nav-v2 .nav-v2-item:hover > .nav-v2-trigger,
:root[data-color-mode="light"] .nav-v2 .nav-v2-item:focus-within > .nav-v2-trigger { color: #000; }
:root[data-color-mode="dark"] .nav-v2 .nav-v2-links > a:hover,
:root[data-color-mode="dark"] .nav-v2 .nav-v2-item:hover > .nav-v2-trigger,
:root[data-color-mode="dark"] .nav-v2 .nav-v2-item:focus-within > .nav-v2-trigger { color: #fff; }
.nav-v2 .nav-v2-links a.is-current { color: var(--cyan-signal); }

/* ===== Dropdowns nav desktop (Produit, Fonctionnalités) ===== */
.nav-v2 .nav-v2-links .nav-v2-item { position: relative; display: flex; align-items: center; }
.nav-v2 .nav-v2-links .nav-v2-trigger { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-v2 .nav-v2-chevron { width: 12px; height: 12px; opacity: 0.55; transition: transform 0.25s var(--ease-calm), opacity 0.2s; }
.nav-v2 .nav-v2-item:hover .nav-v2-chevron,
.nav-v2 .nav-v2-item:focus-within .nav-v2-chevron { transform: rotate(180deg); opacity: 1; }
.nav-v2 .nav-v2-item:hover .nav-v2-trigger,
.nav-v2 .nav-v2-item:focus-within .nav-v2-trigger { color: var(--color-text-default); }

.nav-v2 .nav-v2-menu {
  position: absolute; top: 100%; left: 50%;
  margin-top: 0.6rem;
  transform: translateX(-50%) translateY(8px) scale(0.98);
  transform-origin: top center;
  width: 340px; padding: 0.45rem;
  background: var(--color-page-background);
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  box-shadow: 0 24px 64px -28px rgba(11,27,43,0.35), 0 6px 16px -10px rgba(11,27,43,0.18);
  display: grid; gap: 1px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s var(--ease-calm), transform 0.24s var(--ease-calm), visibility 0.22s;
  z-index: 120;
}
/* pont invisible : garde le survol entre le trigger et le panneau. */
.nav-v2 .nav-v2-menu::before { content: ""; position: absolute; top: -0.8rem; left: -10px; right: -10px; height: 0.8rem; }
.nav-v2 .nav-v2-item:hover .nav-v2-menu,
.nav-v2 .nav-v2-item:focus-within .nav-v2-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.nav-v2 .nav-v2-menu .nav-v2-mi {
  display: flex; align-items: center; gap: 0.72rem;
  padding: 0.58rem 0.65rem; border-radius: 11px;
  transition: background-color 0.15s var(--ease-calm);
}
.nav-v2 .nav-v2-menu .nav-v2-mi:hover { background: color-mix(in srgb, var(--cyan-signal) 9%, transparent); }
.nav-v2 .nav-v2-menu .nav-v2-mi-ic {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cyan-signal) 13%, transparent);
  color: var(--cyan-deep);
  transition: background-color 0.16s var(--ease-calm), color 0.16s var(--ease-calm);
}
.nav-v2 .nav-v2-menu .nav-v2-mi:hover .nav-v2-mi-ic { background: var(--cyan-signal); color: #fff; }
.nav-v2 .nav-v2-menu .nav-v2-mi-ic svg { width: 18px; height: 18px; }
.nav-v2 .nav-v2-menu .nav-v2-mi-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-v2 .nav-v2-menu .nav-v2-mi-tx b { font-size: 0.875rem; font-weight: 600; color: var(--color-text-default); letter-spacing: -0.01em; }
.nav-v2 .nav-v2-menu .nav-v2-mi-tx span { font-size: 0.76rem; line-height: 1.35; color: var(--color-text-subtle); }

/* micro-fil d'Ariane mono : scene courante de la console. */
.nav-v2 .nav-v2-scene {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 200ms var(--ease-calm);
  white-space: nowrap;
}
.nav-v2 .nav-v2-scene.is-on { opacity: 1; color: var(--cyan-signal); }

.nav-v2 .nav-v2-actions { justify-self: end; display: flex; align-items: center; gap: 0.4rem; }
/* toggle clair/sombre : sans bordure ni fond, juste une icone qui se fonce au survol. */
.nav-v2 .theme-toggle { border: 0; background: transparent; color: var(--color-text-subtle); padding: 0.4rem; border-radius: 9px; }
.nav-v2 .theme-toggle:hover { color: var(--color-text-default); background: transparent; }
/* CTA demo : plus de respiration. */
.nav-v2 .nav-v2-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.64rem 1.2rem; font-size: 0.9rem; }
.nav-v2 .nav-v2-cta-arrow { display: inline-block; transition: transform 180ms var(--ease-seal); }
.nav-v2 .nav-v2-cta:hover .nav-v2-cta-arrow { transform: translateX(3px); }

/* ----- header responsive : menu hamburger sous 860px ----- */
.nav-v2-burger { display: none; }
.nav-v2-mobile { display: none; }
@media (max-width: 860px) {
  .nav-v2 .nav-v2-bar { grid-template-columns: 1fr auto; gap: 0.5rem; }
  .nav-v2 .nav-v2-links { display: none; }
  .nav-v2 .nav-v2-cta { display: none; }
  .nav-v2-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 40px; padding: 0 9px; border: 0; background: transparent; cursor: pointer; border-radius: 9px;
  }
  .nav-v2-burger span { display: block; height: 2px; width: 100%; background: var(--color-text-default); border-radius: 2px;
    transition: transform .22s var(--ease-seal), opacity .18s; }
  .nav-v2.is-menu-open .nav-v2-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-v2.is-menu-open .nav-v2-burger span:nth-child(2) { opacity: 0; }
  .nav-v2.is-menu-open .nav-v2-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-v2-mobile {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.6rem 1.25rem 1.25rem;
    background: var(--color-page-background);
    border-bottom: 1px solid var(--color-border-default);
  }
  .nav-v2-mobile[hidden] { display: none; }
  .nav-v2-mobile a {
    font-family: var(--font-body); font-weight: 500; font-size: 1.02rem; color: var(--color-text-default);
    text-decoration: none; padding: 0.72rem 0.5rem; border-radius: 9px;
  }
  .nav-v2-mobile a:active { background: color-mix(in srgb, var(--color-text-default) 7%, transparent); }
  .nav-v2-mobile a.is-current { color: var(--cyan-signal) !important; }
  /* accordeons mobile (Produit, Fonctionnalités) via <details>. */
  .nav-v2-macc summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-body); font-weight: 500; font-size: 1.02rem; color: var(--color-text-default);
    padding: 0.72rem 0.5rem; border-radius: 9px;
  }
  .nav-v2-macc summary::-webkit-details-marker { display: none; }
  /* neutralise le chevron GLOBAL (styles.css : summary::after triangle) -> on garde notre chevron SVG. */
  .nav-v2-macc summary::after { content: none; display: none; }
  /* pas de cyan a l'ouverture (override styles.css details[open] summary). */
  .nav-v2-macc[open] summary { color: var(--color-text-default); }
  .nav-v2-macc summary:active { background: color-mix(in srgb, var(--color-text-default) 7%, transparent); }
  .nav-v2-macc summary .nav-v2-chevron { width: 16px; height: 16px; opacity: 0.5; transition: transform 0.25s var(--ease-calm), opacity 0.2s; }
  .nav-v2-macc[open] summary .nav-v2-chevron { transform: rotate(180deg); opacity: 1; }
  .nav-v2-macc-body { display: flex; flex-direction: column; margin: 0.05rem 0 0.5rem 0.9rem; padding-left: 0.85rem; border-left: 2px solid var(--color-border-default); }
  .nav-v2-macc-body a { font-size: 0.95rem !important; color: var(--color-text-subtle) !important; padding: 0.5rem !important; }
  .nav-v2-macc-body a:active { color: var(--color-text-default) !important; }
  .nav-v2-mobile-cta { margin-top: 0.65rem; width: 100%; justify-content: center; }
}

/* ----- b0 : VISUEL MOBILE DEDIE. Meme histoire que la scene desktop, en flux
   VERTICAL : besoins (acteurs) -> SmartAGT (orchestrateur, 3 piliers) -> agnostique
   multi-LLM -> fournisseurs. La scene desktop (riche, en absolu) est masquee. ----- */
.b0-mob { display: none; }
@media (max-width: 760px) {
  #sec-b0 .b0-scene-area, #sec-b0 .b0-controls { display: none !important; }
  /* structure mobile = titre > visuel > texte : le sous-titre gris sous le titre
     est retire, un texte concis (.b0-mob-foot) le remplace sous le visuel. */
  #sec-b0 .b0-legend { display: none !important; }
  .b0-mob { display: flex; flex-direction: column; align-items: center; max-width: 23rem; margin: 1.6rem auto 0; }

  /* fleche de flux (besoins -> plateforme). */
  .b0-mob-arrow { width: 22px; height: 22px; color: var(--cyan-deep); opacity: 0.6; margin: 0.5rem 0; flex: none; }

  /* 1. LES BESOINS : 3 acteurs sur UNE ligne (boutons cliquables -> helper). */
  .b0-mob-actors { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0.35rem; width: 100%; }
  .b0-mob-actor { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.32rem; font-family: inherit; font-size: 0.72rem; font-weight: 600; color: var(--color-text-default); background: var(--color-card-background); border: 1px solid var(--color-border-default); border-radius: 6px; padding: 0.42rem 0.6rem; box-shadow: 0 3px 10px rgba(11,27,43,.05); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .b0-mob-actor svg { width: 15px; height: 15px; flex: none; color: var(--cyan-deep); }
  .b0-mob-actor:active { border-color: var(--cyan-signal); }

  /* 2. SMARTAGT : l'orchestrateur (carte cyan) avec ses 3 piliers. */
  .b0-mob-core { width: 100%; border: 1.5px solid color-mix(in srgb, var(--cyan-signal) 38%, var(--color-border-default)); border-radius: 18px; background: var(--color-card-background); box-shadow: 0 14px 36px rgba(0,189,255,.12); overflow: hidden; }
  .b0-mob-core-h { display: flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1rem; background: color-mix(in srgb, var(--cyan-signal) 9%, transparent); border-bottom: 1px solid var(--color-border-default); }
  .b0-mob-core-h img { width: 26px; height: 26px; }
  .b0-mob-core-h b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 0.98rem; color: var(--color-text-default); line-height: 1.1; }
  .b0-mob-core-h i { font-style: normal; font-size: 0.72rem; color: var(--cyan-deep); font-weight: 600; }

  .b0-mob-pillar { padding: 0.75rem 1rem; border-top: 1px solid var(--color-border-default); }
  .b0-mob-pillar:first-of-type { border-top: none; }
  .b0-mob-pillar-h { display: flex; align-items: center; gap: 0.45rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 0.55rem; }
  .b0-mob-pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-signal); flex: none; }
  /* capacites = boutons ICONE SEULE, plus gros, cliquables -> ouvrent le helper. */
  .b0-mob-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .b0-mob-chip { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; color: var(--cyan-deep); background: var(--color-mockup-background); border: 1px solid var(--color-border-default); border-radius: 12px; padding: 0; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .b0-mob-chip:active { transform: translateY(-1px) scale(1.04); border-color: var(--cyan-signal); box-shadow: 0 6px 16px rgba(0,189,255,.18); }
  .b0-mob-chip svg { width: 22px; height: 22px; flex: none; stroke-width: 1.8; }

  /* gate agnostique multi-LLM. */
  .b0-mob-gate { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.55rem 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-text-subtle); }
  .b0-mob-gate svg { width: 18px; height: 18px; color: var(--cyan-signal); }
  .b0-mob-gate b { color: var(--cyan-deep); }

  /* 3. LES MOTEURS : fournisseurs SaaS + on-prem (boutons cliquables -> helper). */
  .b0-mob-provs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; width: 100%; }
  .b0-mob-prov { font-family: inherit; border: 1px solid var(--color-border-default); border-radius: 14px; background: var(--color-card-background); padding: 0.7rem 0.6rem; text-align: center; cursor: pointer; }
  .b0-mob-prov:active { border-color: var(--cyan-signal); }
  .b0-mob-prov-lab { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.5rem; }
  .b0-mob-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
  .b0-mob-logos img { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid var(--color-border-default); padding: 5px; box-shadow: 0 3px 9px rgba(11,27,43,.07); object-fit: contain; }

  /* texte concis SOUS le visuel (le resume de la scene). */
  .b0-mob-foot { margin: 1.1rem 0 0; text-align: center; font-size: 0.95rem; font-weight: 600; color: var(--color-text-default); max-width: 22rem; }
}

/* ----- inf : VISUEL MOBILE. On garde le VRAI bloc LLM anime (.llm-wrap cycle
   OpenAI/Mistral/Llama via JS) : on masque juste l'entreprise/rail de la scene et
   on prepose une plateforme-conteneur claire, reliee au LLM par un trait. ----- */
.inf-mob { display: none; }
@media (max-width: 760px) {
  /* la scene RESTE affichee (l'IntersectionObserver doit la voir pour lancer le
     cycle), mais on ne garde que le LLM anime ; le reste passe au .inf-mob. */
  #sec-inf .inf-scene { display: block !important; }
  #sec-inf .ent, #sec-inf .rail, #sec-inf #inf-pf-wires { display: none !important; }
  #sec-inf .llm-wrap { width: 100% !important; max-width: 19rem !important; margin: 0 auto !important; }
  /* "Le modele, au choix" inutile sur mobile (le trait + la carte suffisent). */
  #sec-inf .llm-lab { display: none !important; }
  /* structure mobile = titre > visuel > texte : on retire le sous-titre gris sous le
     titre (la legende sous le visuel resume deja la scene). */
  #sec-inf .inf-head p { display: none !important; }

  .inf-mob { display: block; max-width: 23rem; margin: 1.6rem auto 0; }

  /* PLATEFORME : un conteneur clair qui DETIENT le contexte. */
  .inf-mob-pf { border: 1.5px solid color-mix(in srgb, var(--cyan-signal) 35%, var(--color-border-default)); border-radius: 16px; padding: 0.9rem 1rem 1rem; background: var(--color-card-background); box-shadow: 0 10px 30px rgba(0,189,255,.10); }
  .inf-mob-pf-h { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--color-text-default); padding-bottom: 0.7rem; border-bottom: 1px solid var(--color-border-default); margin-bottom: 0.6rem; }
  .inf-mob-pf-h img { width: 22px; height: 22px; }
  .inf-mob-pf-h b { font-weight: 800; }
  .inf-mob-assets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
  .inf-mob-assets li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; color: var(--color-text-default); background: var(--color-mockup-background); border: 1px solid var(--color-border-default); border-radius: 9px; padding: 0.5rem 0.55rem; }
  .inf-mob-assets svg { width: 16px; height: 16px; flex: none; color: var(--cyan-deep); }
  .inf-mob-pf-f { margin-top: 0.7rem; text-align: center; font-size: 0.78rem; font-weight: 600; color: var(--cyan-deep); }

  /* TRAIT : relie la plateforme au LLM (remplace l'etiquette "interchangeable"). */
  .inf-mob-link { display: block; width: 2px; height: 2.1rem; margin: 0.2rem auto 0.1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--cyan-signal) 60%, transparent), color-mix(in srgb, var(--cyan-signal) 20%, transparent)); border-radius: 2px; }

  /* respiration entre le bloc LLM et la legende de cloture. */
  #sec-inf .inf-legend { margin-top: 2.6rem !important; padding-top: 0 !important; }
}

/* ----- corrections 2e tour (retours utilisateur) ----- */
.b6-mob-fx, .b4-mob-action { display: none; }
/* dual-label b1 : par defaut (desktop) on montre le label LONG, on cache le COURT.
   (!important car #sec-b1 .b1-kb-tx span force display:block, plus specifique.) */
#sec-b1 .b1-kb-tx .b1-sm, #sec-b1 .b1-conn-tx .b1-sm { display: none !important; }
@media (max-width: 760px) {
  /* #1 b8 : sous-labels du toggle a la ligne (on-premise / modele externe). */
  #sec-b8 .b8-sov-tab span { display: block; }

  /* #2 b6 : le toggle a un IMPACT visible (le morph desktop est masque sur mobile).
     local = donnee interne ; SaaS = PII masquee. Pilote par #sec-b6[data-mode]. */
  /* instrument sur fond sombre (--char-graphite) : texte clair lisible + accents
     en cyan de MARQUE (--cyan-signal #00BDFF, comme le titre / la peri-tag). */
  #sec-b6 .b6-mob-fx { display: flex; align-items: flex-start; gap: 0.45rem; margin-top: 0.85rem; padding: 0.65rem 0.75rem; border-radius: 10px; font-size: 0.8rem; line-height: 1.4; border: 1px solid color-mix(in srgb, var(--cyan-signal) 32%, transparent); background: color-mix(in srgb, var(--cyan-signal) 12%, transparent); color: #CDD9E4; }
  #sec-b6 .b6-mob-fx svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--cyan-signal); }
  #sec-b6 .b6-mob-fx b { color: var(--cyan-signal); font-weight: 700; }
  #sec-b6[data-mode="local"] .b6-mob-fx-saas,
  #sec-b6[data-mode="saas"] .b6-mob-fx-local { display: none; }

  /* #3 b7 : on retire 2 lignes sur mobile pour que titre + journal tiennent a l'ecran. */
  #sec-b7 .sr-ledger-row:nth-child(2),
  #sec-b7 .sr-ledger-row:nth-child(5) { display: none !important; }

  /* #6 b4 : on retire la coche verte de succes ; l'action validee apparait entre les
     deux paragraphes via .b4-mob-action (marqueur compact). */
  #sec-b4 .b4-reply2-b .b4-ck { display: none !important; }
  #sec-b4 .b4-mob-action { display: inline-flex; align-self: flex-start; align-items: center; gap: 0.4rem; margin: 0.1rem 0 0.1rem 2rem; padding: 0.4rem 0.7rem; border-radius: 6px; font-size: 0.78rem; font-weight: 600; color: var(--cyan-deep); background: color-mix(in srgb, var(--cyan-signal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cyan-signal) 28%, transparent); }
  #sec-b4 .b4-mob-action svg { width: 14px; height: 14px; color: var(--cyan-deep); }
  #sec-b4 .b4-mob-action b { font-weight: 800; }

  /* #7 b1 : labels courts (JIRA / SharePoint / Base documentaire), 3 chips retires,
     base documentaire pleine largeur pour tenir. */
  #sec-b1 .b1-kb-tx .b1-lg, #sec-b1 .b1-conn-tx .b1-lg { display: none !important; }
  #sec-b1 .b1-kb-tx .b1-sm, #sec-b1 .b1-conn-tx .b1-sm { display: inline !important; }
  #sec-b1 .b1-tools { display: none !important; }
  #sec-b1 .b1-know { flex-wrap: wrap !important; }
  #sec-b1 .b1-kb { flex: 1 1 100% !important; }
}

/* ----- b6 souverainete + b7 journal : versions PENSEES mobile ----- */
@media (max-width: 760px) {
  /* b6 : ordre titre > visuel > lede gere par le bloc GENERALISATION (display:contents). */
  /* b6 instrument SIMPLIFIE mobile : on garde plateforme + toggle moteur + les 3 preuves.
     On retire les labels redondants, le morph PII verbeux et les clusters d'icones. */
  #sec-b6 .b6-frame-head { display: none !important; }
  #sec-b6 .b6-morph { display: none !important; }
  #sec-b6 .b6-engine-favs { display: none !important; }
  #sec-b6 .b6-instrument { padding: 1rem 0.9rem !important; }
  #sec-b6 .b6-perimeter { padding: 1.4rem 0.85rem 0.95rem !important; }
  #sec-b6 .b6-engine-opt { padding: 0.6rem 0.8rem !important; font-size: 0.86rem !important; }
  #sec-b6 .b6-proof { margin-top: 0.9rem !important; }

  /* b8 : la grille 3 colonnes des capacites debordait (clippee a droite) -> 2 colonnes,
     tout rentre sans coupe (le visuel reste nickel, juste reflowe portrait). */
  #sec-b8 .b8-sov, #sec-b8 .b8-sov-stage, #sec-b8 .b8-peri { max-width: 100% !important; }
  #sec-b8 .b8-peri-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* b7 : le journal d'audit en CARTES empilees (vrai pattern mobile), au lieu
     de la table large qui defile horizontalement (degrade <=1024 par defaut). */
  #sec-b7 .b7-ledger-frame { grid-template-columns: 1fr !important; max-width: 100% !important; }
  #sec-b7 .b7-timerule { display: none !important; }
  #sec-b7 .sr-ledger-head { display: none !important; }
  #sec-b7 #audit-ledger { overflow-x: visible !important; border-radius: 4px !important; }
  #sec-b7 .sr-ledger-body { display: flex !important; flex-direction: column !important; gap: 0.4rem !important; padding: 0.6rem !important; }
  /* cartes COMPACTES 2 lignes : (heure - acteur - statut) / (action - hash). Glanceable. */
  #sec-b7 .sr-ledger-row {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "time actor status" "action action hash" !important;
    gap: 0.12rem 0.55rem !important;
    align-items: baseline !important;
    padding: 0.5rem 0.7rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.025) !important;
  }
  #sec-b7 .sr-ledger-row::before { display: none !important; } /* le maillon vertical n'a plus de sens en cartes */
  #sec-b7 .sr-chain-node { display: none !important; }
  #sec-b7 .sr-cell-time   { grid-area: time; font-family: var(--font-mono); font-size: 0.72rem; }
  #sec-b7 .sr-cell-status { grid-area: status; justify-self: end; }
  #sec-b7 .sr-cell-actor  { grid-area: actor; justify-self: start; font-weight: 600; }
  #sec-b7 .sr-cell-action { grid-area: action; }
  #sec-b7 .sr-cell-hash   { grid-area: hash; justify-self: end; white-space: nowrap !important; font-size: 0.7rem; }
  /* bouton verifier : pleine largeur lisible sur mobile. */
  #sec-b7 .sr-verify-btn { min-width: 0 !important; width: 100% !important; padding: 0.9rem 1.25rem !important; }
}


/* =====================================================================
   GENERALISATION mobile : structure UNIQUE Titre > Visuel > Texte concis.
   Plus de sous-titre gris sous le titre : la lede passe SOUS le visuel,
   en noir semi-gras (accent en gras). Mobile uniquement.
   ===================================================================== */
@media (max-width: 760px) {
  /* sections editoriales .blk-grid (b1, b2, b3, b4, b5, b6) : on deplie .blk-text
     (display:contents) et on reordonne -> eyebrow, titre, VISUEL, puis lede. */
  .blk-grid { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
  .blk-grid > .blk-text { display: contents !important; }
  .blk-grid > .blk-text > .eyebrow { order: 1; align-self: flex-start; }
  .blk-grid > .blk-text > .h2-block { order: 2; }
  /* eyebrow COLLE a son titre : l'ecart venait du gap 2.5rem du flex + margin-bottom eyebrow.
     Le visuel (order 3) et la lede (order 4) gardent leurs marges explicites (1.4rem / 1.2rem). */
  .blk-grid { gap: 0.5rem !important; }
  .blk-grid > .blk-text > .eyebrow { margin-bottom: 0.3rem !important; }
  .blk-grid > .blk-visual { order: 3; width: 100% !important; align-self: stretch !important; min-width: 0 !important; margin-top: 1.4rem !important; }
  .blk-grid > .blk-text > .lede {
    order: 4; margin: 1.2rem 0 0 !important;
    color: var(--color-text-default) !important; font-weight: 600 !important;
    font-size: 1rem !important; line-height: 1.5 !important;
  }
  .blk-grid > .blk-text > .lede em { font-style: normal; font-weight: 800; color: inherit; }
  /* b6 est sur fond sombre : la lede repositionnee doit rester lisible (texte clair). */
  #sec-b6 .blk-grid > .blk-text > .lede { color: #E6EDF7 !important; }
  #sec-b6 .blk-grid > .blk-text > .lede em { color: var(--cyan-signal); }
  /* b6-proof (3 checkmarks) = enfant direct de blk-grid, remontait avant le titre ET
     faisait doublon avec la lede : on le masque (la lede = le texte concis sous le visuel). */
  #sec-b6 .b6-proof { display: none !important; }

  /* b7 (journal) : sous-titre "Hash-chaine..." sous le ledger. */
  #sec-b7 .container { display: flex !important; flex-direction: column !important; }
  #sec-b7 .b7-head { display: contents !important; }
  #sec-b7 .b7-head .eyebrow { order: 1; }
  #sec-b7 .b7-head .h2-block { order: 2; margin-top: 0 !important; }
  #sec-b7 .b7-head .h2-block h2 { margin-top: 0 !important; }
  #sec-b7 .b7-ledger-frame { order: 3; }
  #sec-b7 .b7-subline { order: 4; margin: 1.2rem 0 0 !important; color: #E6EDF7 !important; font-weight: 600 !important; }
  #sec-b7 .b7-subline .b7-sha { color: var(--cyan-signal); }
  #sec-b7 .b7-actions { order: 5; }

  /* b8 (la promesse) : sous-titre "Ce n'est pas contractuel..." sous le visuel. */
  #sec-b8 .container { display: flex !important; flex-direction: column !important; }
  #sec-b8 .b8-head { display: contents !important; }
  #sec-b8 .b8-head .eyebrow { order: 1; }
  #sec-b8 .b8-head .b8-title { order: 2; }
  #sec-b8 .b8-sov { order: 3; }
  #sec-b8 .b8-head .b8-sub { order: 4; margin: 1.2rem auto 0 !important; color: #E6EDF7 !important; font-weight: 600 !important; }
  #sec-b8 .b8-foot { order: 5; }

  /* ----- b1 studio : connecteurs = cartes COULEUR PRODUIT (logo + nom seul). ----- */
  #sec-b1 .b1-conn-tx span { display: none !important; }
  #sec-b1 .b1-conn { padding: 0.6rem 0.7rem !important; border-radius: 12px !important; gap: 0.55rem !important; }
  #sec-b1 .b1-conn-logo { width: 32px !important; height: 32px !important; }
  #sec-b1 .b1-conn-logo svg { width: 18px !important; height: 18px !important; }
  #sec-b1 .b1-conn-tx b { font-size: 0.86rem !important; }
  #sec-b1 .b1-conns .b1-conn:nth-child(1) { background: color-mix(in srgb, #2684FF 11%, var(--color-card-background)) !important; border-color: color-mix(in srgb, #2684FF 40%, transparent) !important; }
  #sec-b1 .b1-conns .b1-conn:nth-child(2) { background: color-mix(in srgb, #0a7d82 11%, var(--color-card-background)) !important; border-color: color-mix(in srgb, #0a7d82 42%, transparent) !important; }

  /* ----- b1 studio : documents = vignettes IMAGEES (icone type coloree), compactes. ----- */
  #sec-b1 .b1-doc { flex: 1 1 calc(50% - 0.2rem) !important; flex-direction: row !important; align-items: center !important; gap: 0.5rem !important; padding: 0.45rem 0.55rem !important; border-radius: 10px !important; }
  #sec-b1 .b1-doc svg { width: 24px !important; height: 24px !important; flex: none !important; }
  #sec-b1 .b1-doc b { font-size: 0.74rem !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  #sec-b1 .b1-doc span { display: none !important; } /* taille fichier = bruit sur mobile. */
  #sec-b1 .b1-know .b1-doc:nth-child(2) { background: color-mix(in srgb, #E5484D 9%, var(--color-card-background)) !important; border-color: color-mix(in srgb, #E5484D 34%, transparent) !important; }
  #sec-b1 .b1-know .b1-doc:nth-child(2) svg { color: #E5484D !important; }
  #sec-b1 .b1-know .b1-doc:nth-child(3) { background: color-mix(in srgb, #1F9D55 9%, var(--color-card-background)) !important; border-color: color-mix(in srgb, #1F9D55 34%, transparent) !important; }
  #sec-b1 .b1-know .b1-doc:nth-child(3) svg { color: #1F9D55 !important; }

  /* on allege le studio (profil secondaire masque) pour un carrousel PLUS BAS. */
  #sec-b1 .b1-prof-lbl, #sec-b1 .b1-profs { display: none !important; }
  #sec-b1 .b1-win { aspect-ratio: 5 / 6 !important; }

  /* b1 EXCEPTION au reorder global : c'est un carrousel a LEGENDE SYNCHRONISEE
     (.b1-copy = grid d'overlap des 3 legendes). display:contents casserait l'overlap.
     On restaure : legende (titre + lede) AU-DESSUS du carrousel, lede en noir/gras. */
  #sec-b1 .blk-grid { display: block !important; align-items: initial !important; }
  #sec-b1 .blk-grid > .blk-text.b1-copy { display: grid !important; }
  #sec-b1 .blk-grid > .blk-visual { width: auto !important; align-self: auto !important; margin-top: 1.4rem !important; }
  #sec-b1 .b1-cp .lede { color: var(--color-text-default) !important; font-weight: 600 !important; }
}



/* ----- HERO mobile : visuel desktop (blob + mockup + pills) masque ; hero epure
   texte + CTA en haut, vague en bas de l'ecran (pense mobile, comme l'ancien /m/). ----- */
@media (max-width: 760px) {
  /* garde anti-debordement : tue la bande sombre a droite (overflow horizontal ~15px,
     watermarks/vagues decoratives). clip (et non hidden) preserve position:sticky du header. */
  html, body { overflow-x: clip !important; }

  .hero { justify-content: flex-start !important; padding-top: 4.5rem !important; padding-bottom: clamp(58px, 15vw, 96px) !important; min-height: calc(100svh - 3.5rem); }
  .hero-visual { display: none !important; }
  .hero-ocean { display: block !important; transform: translateY(0) !important; height: clamp(96px, 24vw, 150px); }
  /* la colonne texte remplit la hauteur : titre en haut, chips de confiance pousses
     EN BAS (margin-top:auto) -> ils se posent juste au-dessus de la vague. */
  .hero .container { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .hero .hero-grid { flex: 1 1 auto; display: flex; }
  .hero .hero-grid > div { display: flex; flex-direction: column; width: 100%; }
  /* chip du haut "Plateforme d'agents IA gouvernes" retiree sur mobile. */
  .hero .hero-grid > div > .badge-primary { display: none !important; }
  /* titre HERO plus GENEREUX (prend l'espace), la vague reste visible en bas. */
  .hero h1 { font-size: clamp(2.55rem, 11.5vw, 3.3rem) !important; line-height: 1.05 !important; margin: 0 0 1.3rem !important; }
  .hero p.lede { font-size: 1.05rem !important; line-height: 1.5 !important; margin-bottom: 0 !important; }
  .hero .hero-ctas { margin-top: 2.1rem !important; }
  .hero-trust { margin-top: auto !important; padding-top: 1.8rem !important; gap: 0.45rem 0.55rem !important; }
  .hero-trust .badge { font-size: 0.74rem !important; }
  /* b1 (no-code) : hauteur du carrousel reglee plus bas (cf bloc generalisation). */
  /* b1 STUDIO simplifie mobile : colonne unique (config seule), console de test
     masquee, toggles secondaires retires, texte agrandi -> lisible et minimal. */
  #sec-b1 .b1-studio { grid-template-columns: 1fr !important; }
  #sec-b1 .b1-test { display: none !important; }
  #sec-b1 .b1-cfg { padding: 0.7rem 0.95rem !important; gap: 0.65rem !important; justify-content: flex-start !important; }
  #sec-b1 .b1-cap-row { display: none !important; }
  #sec-b1 .b1-sec-h { font-size: 0.66rem !important; }
  #sec-b1 .b1-prompt { font-size: 0.8rem !important; }
  #sec-b1 .b1-kb-tx b, #sec-b1 .b1-conn-tx b { font-size: 0.82rem !important; }
  /* b5 onglet Modeles : 1 colonne sur mobile (sinon les noms debordent du widget). */
  #sec-b5 .mgrid { grid-template-columns: 1fr !important; }
  /* b3 : barre d'onglets providers scrollable (sinon le dernier est coupe). */
  #sec-b3 .b3-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #sec-b3 .b3-tabs::-webkit-scrollbar { display: none; }
  #sec-b3 .b3-tab { flex: 0 0 auto; }
  /* b3 SIMPLIFIE mobile : 2 resultats autorises + 1 hors-liste (le concept whitelist
     suffit), et 3 domaines sources. On allege le composant trop dense. */
  #sec-b3 .b3-left > .b3-result:nth-child(4),
  #sec-b3 .b3-left > .b3-result:nth-child(6) { display: none !important; }
  #sec-b3 .b3-allow .b3-sw:nth-of-type(n+4) { display: none !important; }
  /* b4 : fenetre conversation a hauteur auto sur mobile (le contenu long rentre). */
  #sec-b4 .b4-win { height: auto !important; min-height: 0 !important; }
  /* moins de texte : on clampe les longues bulles agent a 3 lignes (la carte de
     validation HitL = le heros, elle reste entiere). Glanceable, l'histoire tient. */
  #sec-b4 .b4-bot-txt,
  #sec-b4 .b4-reply2-b {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ---------------------------------------------------------------------------
   8b. DRAWER DEMO (overlay formulaire de contact, remplace la page /contact/)
   --------------------------------------------------------------------------- */
body.demo-locked { overflow: hidden; }
.demo-drawer { position: fixed; inset: 0; z-index: 200; }
.demo-drawer[hidden] { display: none; }
.demo-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, #060E1A 55%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 320ms var(--ease-calm);
}
.demo-drawer.is-open .demo-backdrop { opacity: 1; }
.demo-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(500px, 100vw);
  background: var(--color-page-background);
  border-left: 1px solid var(--color-border-default);
  box-shadow: -30px 0 80px -40px rgba(0,0,0,0.5);
  transform: translateX(100%);
  transition: transform 360ms cubic-bezier(0.22, 0.85, 0.26, 1);
  display: flex; flex-direction: column;
  will-change: transform;
}
.demo-drawer.is-open .demo-panel { transform: none; }
.demo-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--color-border-default); border-radius: 10px;
  background: var(--color-page-background); color: var(--color-text-subtle);
  cursor: pointer; transition: color 160ms, border-color 160ms, background-color 160ms;
}
.demo-close:hover { color: var(--color-text-default); border-color: var(--color-text-muted); }
.demo-close svg { width: 18px; height: 18px; }
/* en-tete du drawer (titre + accroche + mention contextuelle), puis l'iframe Bookings pleine hauteur. */
.demo-head { padding: 3.4rem 2rem 1.1rem; }

.demo-panel h2 { margin: 0 0 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; line-height: 1.12; letter-spacing: -0.02em; color: var(--color-text-default); }
.demo-sub { margin: 0 0 0.9rem; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.5; color: var(--color-text-subtle); }

/* Contexte "quel assistant" : Microsoft Bookings n'accepte aucun prefill d'URL, donc on affiche
   l'objet a rappeler dans le champ message de la reservation, avec un bouton copier. */
.demo-mention { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0.2rem 0 0; padding: 0.65rem 0.85rem;
  border-radius: 11px; background: color-mix(in srgb, var(--color-action-primary) 8%, var(--color-card-background));
  border: 1px solid color-mix(in srgb, var(--color-action-primary) 22%, transparent); }
.demo-mention[hidden] { display: none; }
.demo-mention-body { flex: 1 1 160px; min-width: 0; font-size: 0.8rem; line-height: 1.4; color: var(--color-text-subtle); }
.demo-mention-object { display: block; margin-top: 1px; color: var(--color-text-default); font-weight: 700; }
.demo-mention-copy { flex: none; border: 1px solid var(--color-border-default); background: var(--color-card-background);
  color: var(--color-action-primary); font-family: inherit; font-weight: 700; font-size: 0.76rem; padding: 0.35rem 0.7rem;
  border-radius: 8px; cursor: pointer; transition: color 160ms, border-color 160ms; }
.demo-mention-copy:hover { border-color: var(--color-action-primary); }
.demo-mention-copy.is-copied { border-color: var(--color-action-primary); }

/* la prise de RDV Microsoft Bookings, en iframe pleine hauteur sous l'en-tete (fond blanc = celui de Bookings). */
.demo-bookings { flex: 1 1 auto; min-height: 0; display: flex; background: #fff; border-top: 1px solid var(--color-border-default); }
.demo-bookings-frame { flex: 1; width: 100%; height: 100%; border: 0; }

@media (max-width: 520px) {
  .demo-panel { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-backdrop, .demo-panel, .nav-v2 .nav-v2-cta-arrow { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   8c. CONSOLE PARTAGEE (#shared-console)
   Source unique de #demoStage. Hors-flux par defaut (hidden). Un builder de
   section la rend visible en lui posant la classe .is-hosted (et retire hidden)
   apres l'avoir relogee, ou la pilote a distance via SR.showScene.
   --------------------------------------------------------------------------- */
.shared-console[hidden] { display: none; }
.shared-console.is-hosted { display: block; }
.shared-console.is-hosted[hidden] { display: block; } /* le builder retire hidden ; garde-fou */

/* ---------------------------------------------------------------------------
   9. ACCESSIBILITE : focus clavier visible global (anneau --color-focus-ring)
   --------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.sr-verify-btn:focus-visible,
.nav-v2 .nav-v2-links a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   10. prefers-reduced-motion : ETAT FINAL STATIQUE (aucune perte d'info)
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

  .sovereign-rule--sep .sr-line {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .sovereign-rule--sep .sr-nut { offset-distance: 100% !important; opacity: 1 !important; transition: none !important; }

  .sr-ledger-row::before { opacity: 1 !important; }
  .sr-ledger-row .sr-cell-hash { color: var(--seal-mint) !important; opacity: 1 !important; }
  .sr-ledger-row.is-verified .sr-chain-node,
  .sr-ledger-row .sr-chain-node { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--seal-mint) 55%, transparent)) !important; }
  .sr-ledger-seal { opacity: 1 !important; transform: none !important; transition: none !important; }
}