/* site.css — mise en page du site Synergetik (charte V7.3 « Blue Trust » : aucun texte ni bouton en
   dégradé, décision du dirigeant du 2026-11-09, A219 ; le dégradé signature ne reste que sur des formes
   fines, sans texte, et le dégradé sombre sur les moments de marque ; DESIGN.md § 3).
   Couleurs, polices, tailles, espacements, rayon et focus : tokens.css, source unique
   (framework/templates/design-system/), copié tel quel à la construction.
   Ce fichier ne définit aucune couleur : il n'utilise que les jetons (et leurs mélanges).
   Règles visuelles : framework/templates/design-system/DESIGN.md — dont le relief du
   2026-09-30 (§ 7) : sections alternées, surfaces teintées, mots d'accent, effets légers. */

/* ---------- Polices hébergées avec le site (aucune requête vers un autre domaine) ---------- */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-wght-normal.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-wght-normal.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-wght-italic.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/space-mono-latin-400-normal.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/space-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/space-mono-latin-700-normal.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Mesures propres au site (les jetons de la charte restent la source) ---------- */
:root {
  --space-16: 64px;          /* respiration des grandes sections — ajout local, comme le gabarit du 2026-09-23 */
  --gutter: clamp(16px, 4vw, 48px);
  --largeur: 72rem;
  --largeur-texte: 44rem;
  --hauteur-entete: 72px;
  --duree: 0.2s;             /* survols */
  --duree-apparition: 0.7s;  /* apparition au défilement */
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Un élément masqué l'est toujours, quelle que soit sa mise en page (grille, flex).
   Seule exception : les sous-menus, ouverts au survol sur grand écran. */
[hidden]:not(.sous-menu) { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hauteur-entete) + var(--space-4));
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1; outline: none; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding-left: 1.25em; }
li::marker { color: var(--accent-text); }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-width) solid var(--accent-text); outline-offset: var(--focus-offset); }
strong { font-weight: 700; }
/* Mot d'accent d'un titre (DESIGN.md § 7) : quelques mots, jamais tout le titre. Depuis la V7.3
   (décision du dirigeant du 2026-11-09, A219), plus aucun texte en dégradé : le mot d'accent, les
   chiffres clés et les valeurs mises en avant prennent --accent-text, comme les petits textes accent
   (liens, étiquettes, numéros) : l'accent #0441dc en clair (7,0:1), #5a86f6 en sombre et sur les
   blocs sombres (5,4:1 ; 4,9:1 au plus violet du dégradé sombre), #0441dc à l'impression (plus bas).
   Le remplissage du bas des lettres à jambage (A210) n'a plus d'objet : il servait au texte en dégradé. */
.accent, .chiffres .valeur, .offre-prix { color: var(--accent-text); }
.bande-marque .chiffres .valeur { color: inherit; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

.wrap { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gutter); }
.texte { max-width: var(--largeur-texte); }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-card);
  background: var(--accent); color: var(--ink-on-accent); font-weight: 700; text-decoration: none;
}
.lien-evitement:focus { top: var(--space-4); }

/* Étiquette mono (DESIGN.md § 7) ; les titres de section ont leur propre repère (.section-repere) */
.idx {
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-body);
  color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.idx-accent { color: var(--accent-text); }
.muted { color: var(--muted); }
.petit { font-size: var(--text-sm); }
.note { font-size: var(--text-sm); color: var(--muted); }
.chapo { font-size: var(--text-lg); line-height: 1.5; max-width: 40rem; }

/* Marque de relecture, préversion uniquement */
mark.a-completer {
  background: var(--accent-soft); color: var(--fg); padding: 0 0.25em; border-radius: 4px;
  font-family: var(--font-mono); font-size: 0.85em;
}
.bandeau-preversion {
  background: var(--fg); color: var(--bg); text-align: center;
  font-family: var(--font-mono); font-size: var(--text-xs); padding: var(--space-2) var(--gutter);
}

/* ---------- Logo : formes verrouillées, recolorisation seule ---------- */
.lg-ink { fill: var(--fg); }
.lg-sig { fill: var(--accent); }
.logo { display: inline-flex; flex: none; color: inherit; text-decoration: none; }
.logo svg { display: block; height: 28px; width: auto; }

/* ---------- Boutons : un seul primaire par écran (DESIGN.md § 7) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-6);
  border: 1px solid var(--muted); border-radius: var(--radius-card);
  background: transparent; color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--duree) ease, border-color var(--duree) ease, color var(--duree) ease, transform var(--duree) var(--courbe);
}
.btn:hover { border-color: var(--accent-text); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: none; }
/* Le bouton principal : l'accent plein, #0441dc dans les deux thèmes, survol #1d58ed, texte blanc
   (7,5:1 et 5,7:1) ; plus de dégradé depuis la V7.3 (décision du dirigeant du 2026-11-09, A219). */
.btn-primaire { background: var(--accent); border-color: transparent; color: var(--ink-on-accent); }
.btn-primaire:hover { background: var(--accent-hover); border-color: transparent; }
/* Une icône dans le bouton principal prend la couleur du texte, blanche : la règle générique
   .icone (--accent-text) la rendait invisible sur l'accent plein (A219). */
.btn-primaire .icone { color: inherit; }
.btn-entete { border-color: var(--accent-text); color: var(--accent-text); white-space: nowrap; }
.btn-entete:hover { background: var(--accent); border-color: transparent; color: var(--ink-on-accent); }
/* Les deux boutons du menu (demande du dirigeant du 2026-11-09, exception à la V7.3 : DESIGN.md § 3).
   Le Diagnostic flash garde un contour en dégradé : un anneau de 2 px tracé par un masque, sans
   fond, pour suivre le fond translucide de l'en-tête ; le texte reste uni (--accent-text). Au
   survol, l'accent plein, sans anneau. */
.btn-entete-flash { position: relative; border-color: transparent; }
.btn-entete-flash::before { content: ""; position: absolute; inset: -1px; padding: 2px; border-radius: inherit; background: var(--degrade); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; transition: opacity var(--duree) ease; }
.btn-entete-flash:hover::before { opacity: 0; }
/* Rendez-vous de cadrage (A99, 2026-10-08) : à côté du Diagnostic flash, un bouton plus discret,
   avec l'icône de l'agenda dans le bloc final et dans le menu du téléphone ; contour bleu dans le
   menu (en-tête et menu du téléphone) depuis le 2026-11-09, à la demande du dirigeant. */
.btn-entete-rdv, .nav-rdv { border-color: var(--accent-text); color: var(--fg); }
.btn-rdv .icone, .flash-vers-rdv .icone { flex: none; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-rdv { display: none; }
/* Entre 1 025 et 1 200 px, les deux boutons se resserrent : le menu complet tient sur une ligne. */
@media (min-width: 64.0625rem) and (max-width: 75rem) { .btn-entete { padding: 0 var(--space-4); } }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.lien-suite { font-weight: 700; text-decoration: none; }
.lien-suite::after { content: "→"; display: inline-block; margin-left: 0.3em; transition: transform var(--duree) var(--courbe); }
.lien-suite:hover { text-decoration: underline; }
.lien-suite:hover::after { transform: translateX(4px); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
/* Sur grand écran, l'en-tête laisse deviner la page qui défile dessous. Pas sur téléphone :
   le flou ferait de l'en-tête le repère du menu plein écran, qui est en position fixe. */
@media (min-width: 64.0625rem) {
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .entete {
      background: color-mix(in srgb, var(--bg) 80%, transparent);
      -webkit-backdrop-filter: saturate(1.6) blur(14px);
      backdrop-filter: saturate(1.6) blur(14px);
    }
  }
}
.entete-barre { display: flex; align-items: center; gap: var(--space-4); min-height: var(--hauteur-entete); }
.nav { margin-inline-start: auto; }
.nav-liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-2); }
.nav-item { position: relative; display: flex; align-items: center; }
/* Menu complet (A54, puis menu en cinq entrées, A96) : il tient sur une ligne à partir de
   1 025 px (64rem) ; au-delà, colonne d'en-tête de 77rem, un peu plus large que celle du
   contenu (72rem), entrées séparées par leur seule marge intérieure — le bouton ne déborde
   pas de la colonne. */
@media (min-width: 64.0625rem) {
  .entete-barre { max-width: 77rem; gap: 12px; }
  .nav-liste { gap: 0; }
}
.nav-lien {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 44px; padding: 0 var(--space-2);
  border: 0; background: none; color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.nav-lien:hover, .nav-lien[aria-current="page"], .nav-lien.actif { color: var(--accent-text); }
.nav-lien[aria-current="page"], .nav-lien.actif { font-weight: 700; }
.nav-deplier {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; min-height: 44px; margin-left: calc(-1 * var(--space-2));
  border: 0; background: none; color: var(--fg); cursor: pointer;
}
.nav-deplier:hover { color: var(--accent-text); }
.chevron { flex: none; width: 10px; height: 10px; transition: transform 0.15s ease; }
[aria-expanded="true"] > .chevron { transform: rotate(180deg); }

.sous-menu {
  position: absolute; top: calc(100% + 8px); left: calc(-1 * var(--space-4)); z-index: 30;
  min-width: 18rem; padding: var(--space-6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.sous-menu[hidden] { display: none; }
.sous-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
@media (hover: hover) and (min-width: 64.0625rem) {
  .nav-item-sous:hover > .sous-menu[hidden] { display: block; }
}
.sous-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.sous-menu a { display: block; padding: var(--space-1) 0; color: var(--fg); text-decoration: none; font-size: var(--text-sm); }
.sous-menu a:hover, .sous-menu a[aria-current="page"] { color: var(--accent-text); }
.sous-menu a[aria-current="page"] { font-weight: 700; }
.sous-menu-tout { font-weight: 700; margin-bottom: var(--space-4); }
/* Menu du 2026-10-08 (A96). Sous-menus « Audit » et « Agents IA » : le pictogramme et le nom de
   chaque offre, le catalogue d'agents IA sous un filet. « Ressources » : deux colonnes titrées,
   les titres seuls. */
.sous-menu-liste { min-width: 18rem; }
.sous-menu-liste li a { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.75rem; align-items: center; }
.sous-menu-liste .icone { width: 1.25rem; height: 1.25rem; color: var(--accent-text); }
.sous-menu-separe { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.sous-menu-ressources { min-width: 26rem; }
.sous-menu-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.sous-menu-colonne .idx { display: block; margin-bottom: var(--space-2); }
/* Lien vers un autre site de Synergetik (Routéo, A50) : une flèche discrète après le nom. */
.lien-externe { display: inline; margin-left: 0.3em; color: var(--accent-text); font-size: 0.85em; }

/* Réglages de l'en-tête : le code de l'autre langue et l'icône du thème (A98, 2026-10-08 ;
   ils remplacent les pastilles d'A17). */
.nav { display: flex; align-items: center; gap: 12px; }
.nav-liste, .nav-reglages { flex: none; }
.nav-reglages { display: flex; align-items: center; gap: 2px; }
/* Langue et thème en simple (A98, 2026-10-08) : le code de l'autre langue et une icône, sans
   pastille, de la couleur discrète des liens du menu. */
.reglage {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 4px;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em;
  text-decoration: none; cursor: pointer; transition: color 0.15s ease;
}
.reglage:hover { color: var(--accent-text); }
.reglage svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reglage-soleil, .reglage-theme[data-affiche="dark"] .reglage-lune { display: none; }
.reglage-theme[data-affiche="dark"] .reglage-soleil { display: block; }

.menu-mobile {
  display: none; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--muted); border-radius: var(--radius-card);
  background: transparent; color: var(--fg);
  font-family: var(--font-mono); font-size: var(--text-xs); cursor: pointer;
}
.menu-mobile-icone { display: grid; gap: 4px; width: 16px; }
.menu-mobile-icone span { display: block; height: 2px; background: currentColor; border-radius: 1px; }
.menu-mobile[aria-expanded="true"] .menu-mobile-icone span:nth-child(2) { opacity: 0; }

@media (max-width: 64rem) {
  :root { --hauteur-entete: 64px; }
  .entete-barre { gap: var(--space-4); }
  .logo svg { height: 24px; }
  .menu-mobile { display: inline-flex; }
  .btn-entete { margin-inline-start: auto; padding: 0 var(--space-4); }
  .btn-entete-rdv { display: none; }
  .js .nav.ouvert .nav-rdv { display: flex; width: 100%; margin-top: var(--space-6); }
  .nav {
    display: none; position: fixed; inset: var(--hauteur-entete) 0 0 0; z-index: 25;
    margin: 0; overflow-y: auto; background: var(--bg); padding: var(--space-6) var(--gutter) var(--space-12);
  }
  .js .nav.ouvert { display: block; }
  .nav-liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--border); }
  .nav-lien { flex: 1; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; min-height: 56px; padding: 0; }
  .nav-deplier { width: 56px; min-height: 56px; margin: 0; }
  .sous-menu {
    position: static; min-width: 0; width: 100%; padding: 0 0 var(--space-6);
    border: 0; background: none;
  }
  .sous-menu a { font-size: var(--text-md); padding: var(--space-2) 0; }
  .sous-menu-colonnes { grid-template-columns: 1fr; gap: var(--space-4); }
  /* Dans le menu du téléphone, les deux pastilles se placent sous les entrées. */
  .nav-reglages { padding-top: var(--space-6); gap: var(--space-4); }
  html.menu-ouvert { overflow: hidden; }
}
@media (max-width: 30rem) {
  .btn-entete { font-size: var(--text-xs); padding: 0 var(--space-2); }
  /* Texte masqué à l'écran mais lu par les lecteurs d'écran : le bouton garde son nom. */
  .menu-mobile-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-mobile { padding: 0 var(--space-2); }
}
@media (max-width: 22.5rem) { .entete-barre { gap: var(--space-2); } }

/* ---------- Fil d'Ariane ---------- */
.fil { padding-top: var(--space-6); }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fil li { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.fil li + li::before { content: "/"; margin-right: var(--space-2); color: var(--border); }
.fil a { color: var(--muted); }
.fil a:hover { color: var(--accent-text); }

/* ---------- Sections ---------- */
/* Les sections alternent deux fonds (DESIGN.md § 7) : la première après l'en-tête de page
   est teintée, la suivante neutre, et ainsi de suite ; la teinte sépare, sans filet. */
.section { --fond: var(--bg); background: var(--fond); }
main > .section:nth-of-type(odd) { --fond: var(--bg-alt); }
/* Texte long (pages légales) : toujours sur le fond neutre, plus reposant à lire. */
main > .section.section-texte { --fond: var(--bg); }
.section > .wrap { padding-block: var(--space-16); display: grid; gap: var(--space-8); }
/* Titre de section (DESIGN.md § 7) : repère à gauche — filet, petit titre, numéro —, titre à droite. */
.section-tete { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-4) var(--space-12); align-items: start; }
.section-tete > .section-titre:only-child { grid-column: 1 / -1; }
/* Le filet s'aligne sur le haut des capitales du titre, et non sur le haut de sa boîte :
   avec Instrument Sans et un interligne de 1,12, les capitales commencent à 0,197 fois
   la taille du titre sous le haut de la boîte (mesuré le 2026-09-30). */
.section-repere { position: relative; display: grid; gap: var(--space-2); margin-top: calc(var(--text-2xl) * 0.197); padding-top: var(--space-4); }
/* Le filet du repère : un trait de 2 px, tracé de gauche à droite quand la section apparaît. */
.section-repere::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--degrade); transform-origin: left center; }
.section-nom { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.section-numero { font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.4; letter-spacing: 0.12em; color: var(--violet-text); font-variant-numeric: tabular-nums; }
.section-titre { display: grid; gap: var(--space-2); max-width: var(--largeur-texte); }
.section-tete h2 { font-size: var(--text-2xl); }
.section-tete p { color: var(--muted); }
.section-tete .chapo { color: var(--fg); }
.corps { display: grid; gap: var(--space-4); max-width: var(--largeur-texte); }

.corps h3 { font-size: var(--text-lg); margin-top: var(--space-4); }
@media (max-width: 48rem) {
  /* Sur téléphone, le repère passe au-dessus du titre, petit titre et numéro sur une ligne. */
  .section-tete { grid-template-columns: minmax(0, 1fr); }
  .section-repere { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); max-width: 16rem; margin-top: 0; }
}
@media (max-width: 40rem) {
  .section > .wrap { padding-block: var(--space-12); }
  .section-tete h2 { font-size: var(--text-xl); }
}

/* En-tête de page (hors accueil) */
.entete-page > .wrap { padding-block: var(--space-12) var(--space-16); display: grid; gap: var(--space-6); }
.entete-page h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); max-width: 22ch; }
.entete-page .chapo { color: var(--fg); }
.entete-page-reponse { font-size: var(--text-lg); line-height: 1.5; max-width: 40rem; border-left: 2px solid var(--accent-text); padding-left: var(--space-4); }

.entete-page-simple > .wrap { padding-block: var(--space-12) var(--space-8); }

/* Repères d'une offre (prix, délai, périmètre) */
/* Un bandeau en surface : prix, délai, périmètre côte à côte, séparés d'un filet. */
.reperes {
  display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); width: fit-content; max-width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.reperes div { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-6); }
.reperes div + div { border-left: 1px solid var(--border); }
.reperes dt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.reperes dd { font-weight: 700; }
.reperes div:first-child dd { color: var(--accent-text); }
/* Ce que recouvre un prix de base « à partir de » (#264) : une ligne discrète sous le prix. */
.reperes .repere-note { display: block; margin-top: var(--space-1); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; color: var(--muted); max-width: 28ch; }
@media (max-width: 48rem) {
  .reperes { grid-template-columns: 1fr; width: 100%; }
  .reperes div + div { border-left: 0; border-top: 1px solid var(--border); }
}

/* ---------- Accueil ---------- */
.hero > .wrap {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-12); align-items: center; padding-block: var(--space-16);
}
.hero-texte { display: grid; gap: var(--space-6); }
.hero h1 { font-size: var(--text-hero); }
.hero .chapo { max-width: 36ch; }
.reassurance { font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 60rem) {
  .hero > .wrap { grid-template-columns: 1fr; padding-block: var(--space-12); }
}

/* ---------- Cartes et grilles ---------- */
.carte {
  display: grid; gap: var(--space-2); align-content: start;
  padding: var(--space-6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.carte h3, .carte h4 { font-size: var(--text-lg); }
.carte h3 a, .carte h4 a { color: var(--fg); text-decoration: none; }
.carte h3 a:hover, .carte h4 a:hover { color: var(--accent-text); text-decoration: underline; }
.carte .unite { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.carte-pied { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.carte-lien { position: relative; transition: border-color var(--duree) ease, transform var(--duree) var(--courbe), background-color var(--duree) ease; }
.carte-lien:hover { border-color: var(--accent-text); transform: translateY(-3px); }
/* Carte cliquable : une flèche discrète, qui avance au survol. */
.carte-lien::after {
  content: "→"; position: absolute; top: var(--space-6); right: var(--space-6);
  color: var(--accent-text); font-weight: 700; line-height: 1;
  opacity: 0; transform: translateX(-6px); transition: opacity var(--duree) ease, transform var(--duree) var(--courbe);
}
.carte-lien:hover::after { opacity: 1; transform: none; }
.carte-lien a.etendu::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.grille-2, .grille-3, .grille-4 { display: grid; gap: var(--space-4); }
ul.grille-2, ul.grille-3, ul.grille-4, ol.grille-2, ol.grille-3, ol.grille-4 { list-style: none; margin: 0; padding: 0; }
.h3-carte { font-size: var(--text-lg); }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* RGPD, « Qui fait quoi » (A183) : deux cartes de même hauteur, une colonne chacune, le titre en
   petites capitales comme dans les autres listes titrées. */
.roles-rgpd { align-items: stretch; }
.roles-rgpd .liste-icones { grid-template-columns: minmax(0, 1fr); }
.roles-rgpd .famille-titre { font-size: var(--text-sm); line-height: 1.4; }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 60rem) {
  .grille-3, .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
}

/* Liens vers les pages Maîtrise : autant de colonnes que la largeur permet (5 pages, A21),
   en liste légère — un filet, le nom, une ligne de résumé — plutôt qu'en cartes. */
.grille-maitrise { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.grille-maitrise > li { position: relative; display: grid; gap: var(--space-1); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--border); transition: border-color var(--duree) ease; }
.grille-maitrise > li:hover { border-top-color: var(--accent-text); }
.grille-maitrise h3 { font-size: var(--text-md); }
.grille-maitrise h3 a { color: var(--fg); text-decoration: none; }
.grille-maitrise h3 a::after { content: "→"; display: inline-block; margin-left: 0.35em; color: var(--accent-text); transition: transform var(--duree) var(--courbe); }
.grille-maitrise li:hover h3 a { color: var(--accent-text); }
.grille-maitrise li:hover h3 a::after { transform: translateX(4px); }
.grille-maitrise a.etendu::before { content: ""; position: absolute; inset: 0; }

/* Accueil, ouverture (A35) : le schéma du Cerveau entreprise et de ses agents, d'après la
   maquette du dirigeant (2026-10-01). Il suit le thème : une carte blanche en clair, la
   surface teintée d'accent en sombre. Charte : aucune couleur hors des jetons, sans halo
   lumineux ni dégradé ni quadrillage (DESIGN.md § 7). */
.constellation { --fond: var(--surface); margin: 0; display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--fond); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-card); }
:root[data-theme="dark"] .constellation { --fond: var(--accent-wash); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .constellation { --fond: var(--accent-wash); }
}
.constellation-svg { display: block; width: 100%; height: auto; }
.constellation-legende { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.constellation-legende strong { color: var(--fg); }
.c-halo { fill: color-mix(in srgb, var(--accent-text) 9%, var(--fond)); }
.c-anneau { fill: none; stroke: color-mix(in srgb, var(--accent-text) 32%, var(--fond)); stroke-width: 1.5; }
.c-anneau-large { stroke: color-mix(in srgb, var(--accent-text) 18%, var(--fond)); }
/* Les liens : des tirets qui avancent — vers le cerveau, entre agents (l'anneau), vers l'extérieur. */
.c-lien { fill: none; stroke: color-mix(in srgb, var(--accent-text) 60%, var(--fond)); stroke-width: 1.5; stroke-dasharray: 5 6; animation: c-flux 1.8s linear infinite; }
.c-lien-anneau { stroke: color-mix(in srgb, var(--accent-text) 45%, var(--fond)); stroke-dasharray: 6 8; animation-name: c-flux-anneau; animation-duration: 3.2s; }
.c-lien-ext { stroke: color-mix(in srgb, var(--fg) 45%, var(--fond)); }
@keyframes c-flux { to { stroke-dashoffset: -22; } }
@keyframes c-flux-anneau { to { stroke-dashoffset: -28; } }
.c-port { fill: var(--fg); }
.c-noyau { fill: var(--fond); stroke: var(--accent-text); stroke-width: 2; }
.c-noyau-anneau { fill: none; stroke: color-mix(in srgb, var(--accent-text) 38%, var(--fond)); stroke-width: 1; }
.c-coeur { fill: var(--accent-text); transform-origin: 260px 236px; animation: c-battement 2.4s ease-in-out infinite alternate; }
@keyframes c-battement { to { transform: scale(1.4); } }
/* Une onde part du cerveau, à intervalle régulier. */
.c-onde { fill: none; stroke: var(--accent-text); stroke-width: 1.5; opacity: 0; transform-origin: 260px 265px; animation: c-onde 3.6s ease-out infinite; }
@keyframes c-onde { from { transform: scale(1); opacity: 0.6; } to { transform: scale(1.6); opacity: 0; } }
.c-agent { fill: var(--fond); stroke: var(--accent-text); stroke-width: 2; }
.c-agent-clair { stroke: var(--fg); }
.c-texte { font-family: var(--font-mono); fill: var(--muted); }
/* Le nom du cerveau, dans son cercle, sur deux lignes. */
.c-cerveau { font-size: 13px; letter-spacing: 0.08em; fill: var(--accent-text); }
.c-agent-tag { font-size: 9.5px; letter-spacing: 0.16em; }
.c-agent-nom { font-size: 13px; letter-spacing: 0.06em; fill: var(--fg); }
.c-coin { font-size: 14px; letter-spacing: 0.12em; }
.c-coin-flux { fill: var(--accent-text); }
/* Les signaux : des points qui circulent sur les liens (de --de à --vers), et deux sur l'anneau. */
.c-signal { fill: var(--accent-text); opacity: 0; animation: c-trajet 3.2s var(--courbe) infinite; }
.c-signal-2, .c-signal-4, .c-signal-6, .c-signal-8 { fill: var(--fg); }
@keyframes c-trajet { 0% { transform: var(--de); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: var(--vers); opacity: 0; } }
.c-signal-1 { --de: translate(215px, 220px); --vers: translate(137px, 142px); }
.c-signal-2 { --de: translate(383px, 142px); --vers: translate(305px, 220px); animation-delay: -0.8s; }
.c-signal-3 { --de: translate(305px, 310px); --vers: translate(383px, 388px); animation-delay: -1.6s; }
.c-signal-4 { --de: translate(137px, 388px); --vers: translate(215px, 310px); animation-delay: -2.4s; }
.c-signal-5 { --de: translate(52px, 57px); --vers: translate(83px, 88px); animation-delay: -0.4s; }
.c-signal-6 { --de: translate(437px, 88px); --vers: translate(468px, 57px); animation-delay: -1.2s; }
.c-signal-7 { --de: translate(468px, 473px); --vers: translate(437px, 442px); animation-delay: -2s; }
.c-signal-8 { --de: translate(83px, 442px); --vers: translate(52px, 473px); animation-delay: -2.8s; }
.c-signal-fixe { fill: var(--accent-text); }
.c-signal-clair { fill: var(--fg); }
.c-orbite { transform-origin: 260px 265px; animation: c-tour 28s linear infinite; }
.c-orbite-2 { animation-delay: -14s; }
@keyframes c-tour { to { transform: rotate(360deg); } }
@media (max-width: 40rem) {
  .constellation { padding: var(--space-4) var(--space-2); }
  .constellation-legende { padding-inline: var(--space-2); }
}

/* ---------- Accueil — visuels (A43) ----------
   Dessins de _includes/accueil.njk. Charte : jetons de couleur seulement, sans ombre ni
   dégradé ; les dessins suivent le thème. Les animations ne démarrent qu'à l'apparition du
   bloc (apparition.js) et s'arrêtent si l'appareil réduit les animations : l'état affiché
   à l'arrêt est toujours l'état final, lisible. */
.apparait:not(.visible) :is(.squad, .organigramme, .couloirs, .graphe-temps, .jauges) *,
.apparait:not(.visible):is(.squad, .organigramme, .couloirs, .graphe-temps, .jauges, .roi) * { animation-play-state: paused; }
.glyphe { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glyphe :is(path, rect, circle, line, polyline, polygon, ellipse) { vector-effect: non-scaling-stroke; }

/* 01 — La squad : un espace de travail animé. */
.squad { --fond: var(--surface); margin: 0; }
.squad svg { display: block; width: 100%; height: auto; }
.sq-fenetre { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.sq-barre, .sq-sep, .sq-sol { fill: none; stroke: var(--border); stroke-width: 1.5; }
.sq-point { fill: var(--border); }
.sq-titre { font-family: var(--font-mono); font-size: 14px; fill: var(--muted); }
.sq-en-ligne { fill: var(--accent-text); animation: sq-pouls 2s ease-in-out infinite; }
.sq-tableau { fill: var(--accent-wash); stroke: color-mix(in srgb, var(--accent-text) 25%, var(--border)); }
.sq-col { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; fill: var(--muted); }
.sq-carte { fill: var(--surface); stroke: var(--border); }
.sq-carte-active { stroke: var(--accent-text); stroke-width: 1.5; }
.sq-carte-texte { fill: none; stroke: var(--border); stroke-width: 5; stroke-linecap: round; }
.sq-carte-texte-active { stroke: color-mix(in srgb, var(--accent-text) 45%, var(--surface)); }
.sq-carte-mobile { animation: sq-carte 8s var(--courbe) infinite; }
.sq-forme { fill: var(--surface); stroke: var(--accent-text); stroke-width: 2.5; }
.sq-trait { fill: none; stroke: var(--accent-text); stroke-width: 2.5; stroke-linecap: round; }
.sq-antenne { fill: var(--accent-text); }
.sq-oeil { fill: var(--accent-text); transform-box: fill-box; transform-origin: center; animation: sq-cligne 6s infinite; }
.sq-a2 .sq-oeil { animation-delay: 1.4s; } .sq-a3 .sq-oeil { animation-delay: 2.6s; }
.sq-a4 .sq-oeil { animation-delay: 3.3s; } .sq-a5 .sq-oeil { animation-delay: 0.7s; }
.sq-bureau { fill: color-mix(in srgb, var(--fg) 14%, var(--surface)); }
.sq-pied { fill: none; stroke: color-mix(in srgb, var(--fg) 22%, var(--surface)); stroke-width: 3; stroke-linecap: round; }
.sq-ecran { fill: var(--accent-wash); stroke: var(--accent-text); stroke-width: 2; }
.sq-ligne { fill: none; stroke: var(--accent-text); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 80; animation: sq-tape 3.2s ease-in-out infinite; }
.sq-ligne-2 { animation-delay: 0.5s; } .sq-ligne-3 { animation-delay: 1s; }
.sq-bulle-forme { fill: var(--surface); stroke: var(--accent-text); stroke-width: 2; }
.sq-point-bulle { fill: var(--accent-text); animation: sq-rebond 1.2s ease-in-out infinite; }
.sq-point-bulle:nth-of-type(2) { animation-delay: 0.15s; } .sq-point-bulle:nth-of-type(3) { animation-delay: 0.3s; }
.sq-bulle-1 { animation: sq-bulle-1 8s infinite; } .sq-bulle-2 { animation: sq-bulle-2 8s infinite; }
.sq-doc { fill: var(--accent-wash); stroke: var(--accent-text); stroke-width: 1.5; }
.sq-doc-ligne { stroke: var(--accent-text); stroke-width: 1.5; }
.sq-coche { fill: none; stroke: var(--accent-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sq-bras { transform-origin: 930px 362px; animation: sq-main 8s ease-in-out infinite; }
.sq-bras-trait { fill: none; stroke: var(--accent-text); stroke-width: 9; stroke-linecap: round; }
.sq-main { fill: var(--accent-text); }
.sq-signal { animation: sq-signal 8s infinite; }
.sq-lien { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-dasharray: 4 5; animation: sq-flux 0.9s linear infinite; }
.sq-alerte { fill: var(--accent); }
.sq-alerte-signe, .sq-toast-signe { fill: none; stroke: var(--ink-on-accent); stroke-width: 3; stroke-linecap: round; }
.sq-toast { animation: sq-toast 8s var(--courbe) infinite; }
.sq-toast-fond { fill: var(--surface); stroke: var(--accent-text); stroke-width: 1.5; }
.sq-toast-icone { fill: var(--accent); }
.sq-toast-titre { font-family: var(--font-body); font-size: 15px; font-weight: 700; fill: var(--fg); }
.sq-toast-texte { font-family: var(--font-body); font-size: 13px; fill: var(--muted); }
.sq-bouton { fill: var(--accent); }
.sq-bouton-texte { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--ink-on-accent); }
.sq-bouton-2 { fill: none; stroke: var(--border); }
.sq-bouton-texte-2 { font-family: var(--font-body); font-size: 12px; fill: var(--muted); }
.sq-valider { transform-box: fill-box; transform-origin: center; animation: sq-clic 8s infinite; }
.sq-etiquette { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; fill: var(--muted); }
@keyframes sq-pouls { 50% { opacity: 0.35; } }
@keyframes sq-cligne { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(0.1); } }
@keyframes sq-tape { 0% { stroke-dashoffset: 80; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 80; } }
@keyframes sq-rebond { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }
@keyframes sq-carte { 0%, 18% { transform: none; } 28%, 52% { transform: translate(155px, -34px); } 62%, 92% { transform: translate(310px, 34px); } 100% { transform: translate(310px, 34px); opacity: 0; } }
@keyframes sq-bulle-1 { 0%, 42%, 100% { opacity: 1; } 47%, 95% { opacity: 0; } }
@keyframes sq-bulle-2 { 0%, 45% { opacity: 0; } 50%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes sq-main { 0%, 10% { transform: rotate(150deg); } 18%, 60% { transform: rotate(0); } 26% { transform: rotate(-8deg); } 34% { transform: rotate(6deg); } 42% { transform: rotate(-8deg); } 50% { transform: rotate(4deg); } 68%, 100% { transform: rotate(150deg); } }
@keyframes sq-signal { 0%, 14% { opacity: 0; } 20%, 62% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes sq-flux { to { stroke-dashoffset: -18; } }
@keyframes sq-toast { 0%, 22% { opacity: 0; transform: translateY(-10px); } 28%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes sq-clic { 0%, 54%, 62%, 100% { transform: none; } 58% { transform: scale(0.9); } }

/* 02 — Choisir ses agents : quatre étapes, et le temps passé par action. */
.choisir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-12); align-items: center; }
.etapes-choix { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.etapes-choix li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.etapes-choix li:not(:last-child)::before { content: ""; position: absolute; left: 1.25rem; top: 2.75rem; bottom: calc(-1 * var(--space-6) + 4px); width: 2px; margin-left: -1px; background: color-mix(in srgb, var(--accent-text) 35%, var(--fond, var(--bg))); }
.etape-num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 2px solid var(--accent-text); border-radius: 50%; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-text); background: var(--fond, var(--bg)); }
.etapes-choix h3 { font-size: var(--text-lg); }
.etapes-choix p { font-size: var(--text-sm); color: var(--muted); }
.graphe-temps { margin: 0; gap: var(--space-4); padding: var(--space-6); }
.barres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.barres li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 2.5rem; gap: var(--space-4); align-items: center; font-size: var(--text-sm); }
.barre-nom { color: var(--muted); }
.a-confier .barre-nom { color: var(--fg); font-weight: 700; }
.barre-valeur { font-family: var(--font-mono); font-size: var(--text-xs); text-align: right; color: var(--muted); }
/* La barre : une piste de six heures ; sa longueur, le nombre d'heures (classe duree-N). */
.barre-piste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 0.9rem; }
.barre { border-radius: 999px; background: color-mix(in srgb, var(--fg) 16%, var(--surface)); transform-origin: left center; animation: barre 1.1s var(--courbe) both; }
.a-confier .barre { background: var(--accent); }
.duree-1 .barre { grid-column: span 1; } .duree-2 .barre { grid-column: span 2; } .duree-3 .barre { grid-column: span 3; }
.duree-4 .barre { grid-column: span 4; } .duree-5 .barre { grid-column: span 5; } .duree-6 .barre { grid-column: span 6; }
.barres li:nth-child(2) .barre { animation-delay: 0.1s; } .barres li:nth-child(3) .barre { animation-delay: 0.2s; }
.barres li:nth-child(4) .barre { animation-delay: 0.3s; } .barres li:nth-child(5) .barre { animation-delay: 0.4s; }
.barres li:nth-child(6) .barre { animation-delay: 0.5s; }
@keyframes barre { from { transform: scaleX(0); } }
.graphe-total { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted); }
.graphe-total strong { color: var(--fg); font-family: var(--font-display); font-size: var(--text-lg); }
.graphe-cle { width: 0.9rem; height: 0.9rem; border-radius: 999px; background: var(--accent); flex: none; }
@media (max-width: 60rem) { .choisir { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
@media (max-width: 40rem) {
  .barres li { grid-template-columns: 7.5rem minmax(0, 1fr) 2rem; gap: var(--space-2); }
  .graphe-temps { padding: var(--space-4); }
}

/* 03 — Calculateur de gain (A115 ; sans offre ni prix depuis la décision du dirigeant du
   2026-11-09, A219), sous la méthode : une carte ; en haut, les trois curseurs côte à côte, en
   bande séparée par un filet ; dessous, côte à côte, le gain (à gauche) et la courbe (à droite) ;
   en pied, la note et le lien (demande du dirigeant du 2026-11-09 : plus de vide sous les
   curseurs, qui flottaient seuls à gauche depuis le retrait du choix d'offre). Les curseurs : une piste fine remplie en dégradé jusqu'au
   bouton (--rempli, posé par assets/js/rentabilite.js) ; inactifs sans JavaScript, sans
   remplissage. Le graphique : le gain cumulé sur trois ans, en trait dégradé (une forme fine,
   sans texte : DESIGN.md § 3, V7.3), la surface qu'il couvre en --accent-wash ; un point par
   année, le premier (le budget remboursé en 12 mois) en avant, en violet, comme la phrase du
   budget (.roi-conseil). Ses textes gardent la même taille à l'écran (--roi-echelle, posé par le
   script d'après la largeur du dessin ; sans script, une valeur par largeur d'écran). */
/* Le titre au-dessus de la carte (A119), collé à elle : la grille de .wrap espace ses enfants de 32 px. */
.roi-titre { margin-top: var(--space-8); font-size: var(--text-xl); line-height: var(--leading-tight); }
.roi-titre + .roi { margin-top: calc(-1 * var(--space-4)); }
.roi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8); }
.roi-reglages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid var(--border); min-width: 0; }
.roi-resultat { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-12); align-items: center; min-width: 0; }
.roi-synthese, .roi-courbe { display: grid; gap: var(--space-4); min-width: 0; }
.roi-pied { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-8); }
.roi-pied .roi-note { flex: 1 1 28rem; max-width: 62ch; }
.roi-curseur { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: baseline; }
.roi-curseur label { font-size: var(--text-sm); font-weight: 700; }
.roi-curseur output { font-family: var(--font-mono); font-size: var(--text-md); color: var(--accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.roi-curseur input { grid-column: 1 / -1; }
.roi input[type="range"] { --rempli: 0%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.roi input[type="range"]:disabled { cursor: default; }
.roi input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--degrade) 0 0 / var(--rempli) 100% no-repeat, var(--border); }
.roi input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--border); }
.roi input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--degrade); }
.roi input[type="range"]:disabled::-moz-range-progress { background: transparent; }
.roi input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 2px solid var(--accent-text); border-radius: 50%; background: var(--surface); transition: transform var(--duree) var(--courbe); }
.roi input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--accent-text); border-radius: 50%; background: var(--surface); transition: transform var(--duree) var(--courbe); }
.roi input[type="range"]:not(:disabled):hover::-webkit-slider-thumb { transform: scale(1.12); }
.roi input[type="range"]:not(:disabled):hover::-moz-range-thumb { transform: scale(1.12); }
.roi input[type="range"]:focus-visible { outline: var(--focus-width) solid var(--accent-text); outline-offset: var(--focus-offset); border-radius: 4px; }
.roi-verdict { display: grid; margin: 0; }
.roi-verdict-etiquette { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.roi-delai { justify-self: start; font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: var(--weight-display); line-height: 1.05; letter-spacing: var(--tracking-tight); color: var(--accent-text); }
.roi-conseil { margin: 0; font-size: var(--text-sm); color: var(--violet-text); }
.roi-chiffres { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin: 0; }
.roi-chiffres div { display: flex; flex-direction: column-reverse; }
.roi-chiffres dt { font-size: var(--text-sm); color: var(--muted); }
.roi-chiffres dd { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.roi-graphe { --roi-echelle: 1.12; display: block; width: 100%; height: auto; overflow: visible; }
.roi-graphe text { font-family: var(--font-mono); font-size: calc(11.5px * var(--roi-echelle)); fill: var(--muted); }
.roi-axe { stroke: var(--border); stroke-width: 2; }
.roi-zone-apres { fill: var(--accent-wash); }
.roi-ligne-gain { stroke: url(#roi-degrade); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; }
.roi-degrade-debut { stop-color: var(--accent); }
.roi-degrade-fin { stop-color: var(--violet); }
.roi-ligne-seuil { stroke: var(--violet); stroke-width: 1.5; stroke-dasharray: 2 4; }
.roi-point-seuil { fill: var(--violet); stroke: var(--surface); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.roi-graphe .roi-texte-seuil { fill: var(--violet-text); font-weight: 700; }
.roi-legende { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--muted); }
.roi-legende li { display: flex; align-items: center; gap: var(--space-2); }
.roi-cle { flex: none; width: 1.25rem; height: 4px; border-radius: 2px; background: var(--degrade); }
.roi-cle-seuil { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--violet); }
.roi-note { margin: 0; font-size: var(--text-xs); color: var(--muted); }
/* Le calcul en deux lignes (page Calcul de rentabilité, A126) : des nombres en gros, leur nom
   dessous, des opérateurs violets ; le résultat de chaque ligne en --accent-text (en dégradé
   jusqu'à la V7.3, A219). */
.formule { display: grid; gap: var(--space-4); margin: 0; }
.formule-lignes { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.formule-ligne { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-4); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.formule-terme { display: grid; gap: 2px; }
.formule-terme strong { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.formule-terme span { max-width: 9rem; font-size: var(--text-xs); line-height: 1.3; color: var(--muted); }
.formule-op { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.15; color: var(--violet-text); }
.formule-resultat strong { color: var(--accent-text); }

/* À l'apparition de la carte : la courbe se trace, puis le seuil se pose. */
.apparait .roi-ligne-gain { animation: roi-trace 1.2s var(--courbe) 0.2s both; }
.apparait .roi-point-seuil { animation: roi-seuil 0.45s var(--courbe) 1.3s both; }
@keyframes roi-trace { from { stroke-dashoffset: 1; } }
@keyframes roi-seuil { from { transform: scale(0); } }
@media (max-width: 60rem) {
  /* Sur une colonne, le délai et les deux montants passent en haut de la carte : on les voit
     changer pendant qu'on règle les curseurs (l'ordre du clavier ne change pas). */
  .roi { gap: var(--space-6); }
  .roi-reglages, .roi-resultat, .roi-synthese, .roi-courbe, .roi-pied { display: contents; }
  .roi-verdict, .roi-conseil, .roi-chiffres { order: -1; }
  .roi-graphe { --roi-echelle: 0.85; }
}
@media (max-width: 40rem) {
  .roi { padding: var(--space-4) var(--space-4) var(--space-6); }
  .roi-graphe { --roi-echelle: 1.75; }
}

/* 03 — L'organisation : un organigramme qui se trace, puis des signaux qui descendent. */
.organisation { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.organigramme { --fond: var(--bg-alt); margin: 0; }
.organigramme svg { display: block; width: 100%; height: auto; overflow: visible; }
.or-lien { fill: none; stroke: color-mix(in srgb, var(--accent-text) 45%, var(--fond, var(--bg))); stroke-width: 2; stroke-dasharray: 400; animation: or-trace 0.9s var(--courbe) both; }
.or-lien-1 { animation-delay: 0.3s; } .or-lien-2 { animation-delay: 0.9s; } .or-lien-3 { animation-delay: 1.5s; }
.or-signal { fill: none; stroke: var(--accent-text); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 600; stroke-dashoffset: 8; animation: or-signal 2.8s linear infinite; }
.or-signal-1 { animation-delay: 2.4s; } .or-signal-2 { animation-delay: 2.9s; } .or-signal-3 { animation-delay: 3.4s; }
.or-noeud { fill: var(--surface); stroke: var(--accent-text); stroke-width: 2.5; }
.or-tache { stroke-width: 2; }
.or-glyphe { color: var(--accent-text); }
.or-n2 .or-glyphe { stroke-width: 1.6; } /* l'équipe de l'Agent métier, plus fine pour rester lisible */
.or-n { transform-box: fill-box; transform-origin: center; animation: or-apparait 0.6s var(--courbe) both; }
.or-n2 { animation-delay: 0.7s; } .or-n3 { animation-delay: 1.3s; } .or-n4 { animation-delay: 1.9s; }
.or-onde { fill: none; stroke: var(--accent-text); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: or-onde 3.2s ease-out 2s infinite; }
@keyframes or-trace { from { stroke-dashoffset: 400; } }
@keyframes or-signal { from { stroke-dashoffset: 8; } to { stroke-dashoffset: -260; } }
@keyframes or-apparait { from { opacity: 0; transform: scale(0.6); } }
@keyframes or-onde { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
.niveaux-arbre { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.niveaux-arbre li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-4); align-items: center; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.niveaux-arbre li:last-child { border-bottom: 0; padding-bottom: 0; }
.niveau-arbre-signe { display: grid; place-items: center; }
.niveau-arbre-signe .picto { width: 3rem; height: 3rem; }
.niveau-arbre-signe .icone { width: 2.25rem; height: 2.25rem; }
.niveaux-arbre h3 { font-size: var(--text-md); }
.niveaux-arbre h3 a { color: var(--fg); text-decoration: none; }
.niveaux-arbre h3 a::after { content: " →"; color: var(--accent-text); }
.niveaux-arbre h3 a:hover { color: var(--accent-text); }
.niveaux-arbre p { font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 60rem) { .organisation { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
/* Sur deux colonnes, chaque niveau de la liste se cale sur le niveau du dessin, et ses filets
   sur les liaisons horizontales de l'organigramme (demande du dirigeant, 2026-10-05) : la liste
   a la hauteur du dessin (colonnes 1,5 / 1, dessin de 760 × 420, d'où 760 / 630), et ses lignes
   suivent les paliers du dessin (liaisons à 125, 232 et 338 sur 420). */
@media (min-width: 60.0625rem) {
  .organisation { align-items: start; }
  .niveaux-arbre { aspect-ratio: 760 / 630; grid-template-rows: 125fr 107fr 106fr 82fr; gap: 0; }
  .niveaux-arbre li { padding-block: var(--space-2); }
  .niveaux-arbre li:last-child { padding-bottom: var(--space-2); }
}

/* 04 — La supervision : trois pistes, un jeton qui passe seul, s'arrête pour une
   validation, ou s'arrête chez la personne qui exécute. */
.couloirs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.couloir { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.couloir-texte { display: grid; gap: var(--space-1); }
.couloir-texte h3 { font-size: var(--text-lg); }
.couloir-texte p { font-size: var(--text-sm); color: var(--muted); }
.piste { display: block; width: 100%; height: auto; overflow: visible; }
.pi-ligne { fill: none; stroke: var(--border); stroke-width: 2; stroke-dasharray: 6 6; }
.pi-noeud { fill: var(--surface); stroke: var(--accent-text); stroke-width: 2; }
.pi-noeud-humain { stroke: var(--fg); }
.pi-glyphe { color: var(--accent-text); }
.pi-glyphe-humain { color: var(--fg); }
.pi-absent { opacity: 0.3; }
.pi-absent .pi-noeud { stroke-dasharray: 4 4; }
.pi-jeton { fill: var(--accent-text); }
.pi-jeton-humain { fill: var(--fg); }
.pi-coche-fond { fill: var(--accent); }
.pi-coche-trait { fill: none; stroke: var(--ink-on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pi-action, .pi-personne, .pi-coche { transform-box: fill-box; transform-origin: center; }
.piste-autonome .pi-jeton { animation: pi-direct 5s var(--courbe) infinite; }
.piste-autonome .pi-action { animation: pi-arrivee 5s infinite; }
.piste-validation .pi-jeton { animation: pi-valide 6s var(--courbe) infinite; }
.piste-validation .pi-personne { animation: pi-attente 6s infinite; }
.piste-validation .pi-coche { animation: pi-coche 6s infinite; }
.piste-validation .pi-action { animation: pi-arrivee-tard 6s infinite; }
.piste-preparation .pi-jeton-1 { animation: pi-prepare 6s var(--courbe) infinite; }
.piste-preparation .pi-jeton-2 { animation: pi-execute 6s var(--courbe) infinite; }
.piste-preparation .pi-personne { animation: pi-decide 6s infinite; }
.piste-preparation .pi-action { animation: pi-arrivee-tard 6s infinite; }
@keyframes pi-direct { 0% { transform: none; opacity: 0; } 8% { opacity: 1; } 50% { transform: translateX(376px); opacity: 1; } 56%, 100% { transform: translateX(376px); opacity: 0; } }
@keyframes pi-arrivee { 0%, 48%, 64%, 100% { transform: none; } 54% { transform: scale(1.15); } }
@keyframes pi-valide { 0% { transform: none; opacity: 0; } 6% { opacity: 1; } 28%, 56% { transform: translateX(156px); opacity: 1; } 80% { transform: translateX(376px); opacity: 1; } 86%, 100% { transform: translateX(376px); opacity: 0; } }
@keyframes pi-attente { 0%, 26%, 60%, 100% { transform: none; } 32%, 54% { transform: scale(1.12); } }
@keyframes pi-coche { 0%, 36% { opacity: 0; transform: scale(0.4); } 42%, 66% { opacity: 1; transform: none; } 74%, 100% { opacity: 0; } }
@keyframes pi-arrivee-tard { 0%, 78%, 92%, 100% { transform: none; } 84% { transform: scale(1.15); } }
@keyframes pi-prepare { 0% { transform: none; opacity: 0; } 6% { opacity: 1; } 32% { transform: translateX(156px); opacity: 1; } 38%, 100% { transform: translateX(156px); opacity: 0; } }
@keyframes pi-execute { 0%, 42% { transform: none; opacity: 0; } 48% { opacity: 1; } 80% { transform: translateX(156px); opacity: 1; } 86%, 100% { transform: translateX(156px); opacity: 0; } }
@keyframes pi-decide { 0%, 30%, 84%, 100% { transform: none; } 38%, 78% { transform: scale(1.12); } }
@media (max-width: 48rem) { .couloir { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); } }

/* 06 — Ce qui nous distingue : quatre engagements à icône, puis les chiffres (V2, #264 ; règles .distinctions des lots ci-dessous). */
.distinctions .carte { gap: var(--space-2); }
.distinctions .icone { width: 2rem; height: 2rem; margin-bottom: var(--space-2); }
.distinctions h3 { font-size: var(--text-lg); }

/* 07 — La longueur d'avance : quatre jauges qui se remplissent (V2, #258 ; .jauges-4 ci-dessous). */
.jauges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.jauge { display: grid; justify-items: center; align-content: start; gap: var(--space-2); text-align: center; }
.jauge-cercle { position: relative; width: 10rem; height: 10rem; margin-bottom: var(--space-2); }
.jauge-svg { display: block; width: 100%; height: 100%; }
.jauge-fond { fill: none; stroke: color-mix(in srgb, var(--fg) 14%, var(--fond, var(--bg))); stroke-width: 10; }
.jauge-valeur { fill: none; stroke: var(--accent-text); stroke-width: 10; stroke-linecap: round; animation: jauge 1.8s var(--courbe) 0.2s both; }
.jauge-valeur-objectif { stroke: color-mix(in srgb, var(--accent-text) 55%, var(--fond, var(--bg))); }
.jauge-chiffre { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; }
.jauge p { max-width: 18rem; }
.jauge-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
@keyframes jauge { from { stroke-dashoffset: 326.73; } }
@media (max-width: 48rem) { .jauges { grid-template-columns: minmax(0, 1fr); } }

/* 07 — L'appel final de l'accueil : le Diagnostic flash en trois temps. */
.appel-etapes { list-style: none; margin: 0; padding: var(--space-2) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: var(--space-4) var(--space-6); }
@media (max-width: 30rem) { .appel-etapes { grid-template-columns: minmax(0, 1fr); } }
.appel-etapes li { display: grid; gap: var(--space-1); }
.appel-etape-valeur { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--fg); line-height: 1; }
.appel-etapes li span:last-child { font-size: var(--text-sm); color: var(--muted); }

/* Citation de marque */
.citation-marque {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); max-width: 30ch;
}

/* Engagements chiffrés */
.chiffres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); }
.chiffres li { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.chiffres .valeur { font-family: var(--font-display); font-size: clamp(1.75rem, 2.3vw, 2.125rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.chiffres p { font-size: var(--text-sm); color: var(--muted); }
/* Accueil, « Ce qui nous distingue » : la rangée centrée sous les cartes (demande du dirigeant, 2026-10-05). */
.chiffres-centres li { justify-items: center; text-align: center; }

/* Listes */
.liste-simple { display: grid; gap: var(--space-2); }
.liste-pointee { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.liste-pointee li { position: relative; padding-left: var(--space-6); }
.liste-pointee li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 12px; height: 2px; background: var(--accent-text); }
.liste-non li::before { background: var(--muted); }
/* Longue liste de livrables : deux colonnes sur grand écran, pour une lecture plus aérée. */
.liste-colonnes { display: block; columns: 2 20rem; column-gap: var(--space-12); }
.liste-colonnes li { break-inside: avoid; margin-bottom: var(--space-2); }
/* Étapes : une trajectoire verticale — un repère numéroté par étape, relié au suivant. */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: etape; }
.etapes > li { position: relative; counter-increment: etape; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); padding-bottom: var(--space-6); }
.etapes > li:last-child { padding-bottom: 0; }
.etapes > li::before {
  content: counter(etape, decimal-leading-zero); position: relative; z-index: 1;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 2px solid var(--accent-text); background: var(--fond, var(--bg));
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--accent-text);
}
.etapes > li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.5rem; bottom: 0; width: 2px;
  background: color-mix(in srgb, var(--accent-text) 30%, var(--fond, var(--bg)));
}
.etapes :is(h2, h3) { font-size: var(--text-lg); margin: 0.4rem 0 var(--space-1); }
.etapes p + p { margin-top: var(--space-2); }

/* Intertitre dans le fil d'une section (après un regroupement) */
.sous-titre { font-size: var(--text-xl); margin-top: var(--space-4); }

/* Grille légère : un filet au-dessus de chaque élément, sans carte — pour les listes
   courtes qui n'ont pas besoin de surface. */
.grille-filets > li { display: grid; gap: var(--space-1); align-content: start; padding-top: var(--space-4); border-top: 2px solid var(--fg); }
.grille-filets h3 { font-size: var(--text-lg); }

/* Étapes présentées en cartes côte à côte (Audit métiers) */
.etape-carte { gap: var(--space-2); }
.etape-carte h3 { font-size: var(--text-lg); }
.etape-carte > p { font-size: var(--text-sm); }
.etape-carte .liste-pointee { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); }

/* Cartes du cadre d'une offre : limites, mesure, données */
.carte-cadre { gap: var(--space-4); }
.carte-cadre p, .carte-cadre li { font-size: var(--text-sm); }

/* Encadrés */
.encadre {
  display: grid; gap: var(--space-2);
  padding: var(--space-6); max-width: var(--largeur-texte);
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent-text);
  border-radius: var(--radius-card);
}
.encadre h3 { font-size: var(--text-md); }
/* Encadré mis en avant : surface teintée d'accent, sans filet latéral. */
.encadre-teinte { background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent-text) 28%, var(--border)); }
.encadre p { font-size: var(--text-sm); }
/* Un encadré d'une seule phrase prend toute la largeur de la page et tient sur une ligne
   (demande du dirigeant du 2026-10-10, A190 ; longueur contrôlée par scripts/verifier.mjs). */
.encadre-large, p.encadre { max-width: none; }
/* Un paragraphe reste un paragraphe, même avec une classe de bloc en grille : ses liens
   restent dans la ligne au lieu de passer chacun sur la leur. */
p.corps, p.encadre { display: block; }
/* Le symbole « information » (demande du dirigeant du 2026-10-10, A148) : sur chaque encadré qui n'a
   pas déjà son icône, à gauche de la première ligne, à la couleur de l'accent. Un masque
   (assets/img/info.svg, Lucide « info »), comme le numéro de téléphone : aucune image en ligne. */
.encadre:not(:has(> .icone)) { position: relative; padding-left: calc(var(--space-6) + 2rem); }
.encadre:not(:has(> .icone))::before {
  content: ""; position: absolute; left: var(--space-6);
  /* Centré sur la première ligne : la moitié de l'écart entre l'interligne et l'icône. */
  top: calc(var(--space-6) + 4px); top: calc(var(--space-6) + (1lh - 1.25rem) / 2);
  width: 1.25rem; height: 1.25rem; background: var(--accent-text);
  -webkit-mask: var(--encadre-icone, url("/assets/img/info.svg")) center / contain no-repeat;
  mask: var(--encadre-icone, url("/assets/img/info.svg")) center / contain no-repeat;
}
/* L'icône suit ce que dit l'encadré : information par défaut ; une règle importante, une mise en
   garde, une orientation vers une autre offre, un conseil, la décision humaine, le Cerveau entreprise. */
.encadre-important { --encadre-icone: url("/assets/img/encadre-important.svg"); }
.encadre-alerte { --encadre-icone: url("/assets/img/encadre-alerte.svg"); }
.encadre-orientation { --encadre-icone: url("/assets/img/encadre-orientation.svg"); }
.encadre-conseil { --encadre-icone: url("/assets/img/encadre-conseil.svg"); }
.encadre-humain { --encadre-icone: url("/assets/img/encadre-humain.svg"); }
.encadre-cerveau { --encadre-icone: url("/assets/img/encadre-cerveau.svg"); }

/* Titre de groupe dans une section (Évaluer, Réaliser…) : capitales mono, suivies d'un filet. */
.groupe-titre {
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; line-height: 1.4;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text);
}
.groupe-titre::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- Tableaux ---------- */
.tableau-conteneur { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tableau caption { text-align: left; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); padding-bottom: var(--space-2); }
.tableau th {
  text-align: left; vertical-align: bottom; padding: var(--space-2) var(--space-4) var(--space-2) 0;
  border-bottom: 1px solid var(--muted);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--muted);
}
.tableau td { vertical-align: top; padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: 1px solid var(--border); }
.tableau td:first-child { font-weight: 700; }
.tableau th:last-child, .tableau td:last-child { padding-right: 0; }
/* Audits IA, « En largeur ou en profondeur ? » : le tableau compact des examens (A191). La portée
   en étiquette au-dessus de ce qu'examine l'audit : en largeur (contour), en profondeur (pleine),
   sur votre description (pointillés). */
/* Une promesse en deux lignes de livrables sous sa phrase (Audit des usages IA, A204). */
.chapo-lignes { display: grid; gap: var(--space-3, 0.75rem); }
.chapo-lignes p { margin: 0; }
.chapo-lignes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.chapo-lignes li { display: flex; align-items: flex-start; gap: var(--space-3, 0.75rem); }
.chapo-lignes .icone { flex: none; width: 1.4rem; height: 1.4rem; margin-top: 0.2em; color: var(--accent-text); }
.tableau-audits td:first-child { width: 25%; }
.tableau-audits td:first-child a { font-family: var(--font-display); font-size: var(--text-md); color: var(--fg); text-decoration: none; }
.tableau-audits td:first-child a::after { content: " →"; color: var(--accent-text); }
.tableau-audits td:first-child a:hover { color: var(--accent-text); text-decoration: underline; }
.ta-prix { display: block; margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--accent-text); }
.ta-prix > span { white-space: nowrap; }
.ta-question { font-weight: 700; }
.tableau-audits .puce { display: block; width: fit-content; margin-bottom: var(--space-2); }
@media (max-width: 45rem) {
  .tableau-empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau-empile tr { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
  .tableau-empile td { display: grid; gap: var(--space-1); padding: 0; border: 0; }
  .tableau-empile td::before { content: attr(data-label); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--muted); }
  .tableau-audits td:first-child { width: auto; }
  .tableau-audits td:first-child::before { content: none; }
}

/* ---------- Offres — visuels (A44) ----------
   Page Offres, dans l'esprit de l'accueil : l'aiguillage besoin → offre, les unités
   emboîtées, le parcours, les familles, les curseurs du prix, les conditions et le
   paiement. Animations lancées à l'apparition, coupées si l'appareil réduit les
   animations ; à l'arrêt, chaque visuel reste lisible. */
.apparait:not(.visible) :is(.aiguillage, .unites, .parcours, .curseurs, .paiement) *,
.apparait:not(.visible) :is(.aiguillage, .unites, .parcours, .curseurs, .paiement) *::before,
.apparait:not(.visible) :is(.aiguillage, .unites, .parcours, .curseurs, .paiement) *::after,
.apparait:not(.visible):is(.aiguillage, .unites, .parcours, .curseurs, .paiement) *::before,
.apparait:not(.visible):is(.aiguillage, .unites, .parcours, .curseurs, .paiement) *::after,
.apparait:not(.visible):is(.aiguillage, .unites, .parcours, .curseurs, .paiement),
.apparait:not(.visible):is(.aiguillage, .unites, .parcours, .curseurs, .paiement) *,
.apparait:not(.visible):is(.aiguillage, .unites, .parcours, .curseurs, .paiement)::before,
.apparait:not(.visible):is(.aiguillage, .unites, .parcours, .curseurs, .paiement)::after { animation-play-state: paused; }

/* En-tête : le texte, et un escalier de prix dont les marches montent à l'ouverture. */
.entete-offres > .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-12); }
.entete-offres-texte { display: grid; gap: var(--space-6); align-content: start; }
.marches-prix { margin: 0; }
.marches-prix ol { list-style: none; margin: 0; padding: 0; height: 17rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); align-items: end; }
.marche { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); }
.marche-prix { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.35; color: var(--muted); }
.marche-barre { border-radius: 10px 10px 4px 4px; transform-origin: bottom center; animation: marche 0.9s var(--courbe) both; }
.marche-1 .marche-barre { height: 16%; background: var(--surface); border: 2px solid var(--accent-text); animation-delay: 0.2s; }
.marche-2 .marche-barre { height: 34%; background: color-mix(in srgb, var(--accent) 35%, var(--surface)); animation-delay: 0.35s; }
.marche-3 .marche-barre { height: 55%; background: color-mix(in srgb, var(--accent) 65%, var(--surface)); animation-delay: 0.5s; }
.marche-4 .marche-barre { height: 78%; background: var(--accent); animation-delay: 0.65s; }
/* Deux lignes réservées au nom : un nom long (« Agent de processus ») ne soulève pas sa barre. */
.marche-nom { min-height: 2.5em; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; line-height: 1.25; color: var(--fg); text-decoration: none; }
.marche-nom:hover { color: var(--accent-text); text-decoration: underline; }
@keyframes marche { from { transform: scaleY(0); } }
@media (max-width: 60rem) {
  .entete-offres > .wrap { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
  .marches-prix ol { height: 13rem; }
}

/* 01 — L'aiguillage : un besoin, une flèche parcourue par un point, l'offre et son prix. */
.aiguillage { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.aiguillage-ligne {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 16rem); align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  transition: border-color var(--duree) ease, transform var(--duree) var(--courbe);
}
.aiguillage-ligne:hover { border-color: var(--accent-text); transform: translateX(4px); }
.aiguillage-besoin { display: flex; align-items: center; gap: var(--space-4); }
.aiguillage-besoin .icone { width: 1.5rem; height: 1.5rem; }
.aiguillage-fleche { position: relative; height: 2px; background: color-mix(in srgb, var(--accent-text) 30%, var(--surface)); }
.aiguillage-fleche::after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--accent-text); border-right: 2px solid var(--accent-text); transform: translateY(-50%) rotate(45deg); }
.aiguillage-fleche::before { content: ""; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent-text); animation: aiguillage 2.6s ease-in-out infinite; }
.aiguillage-ligne:nth-child(2) .aiguillage-fleche::before { animation-delay: 0.3s; }
.aiguillage-ligne:nth-child(3) .aiguillage-fleche::before { animation-delay: 0.6s; }
.aiguillage-ligne:nth-child(4) .aiguillage-fleche::before { animation-delay: 0.9s; }
.aiguillage-ligne:nth-child(5) .aiguillage-fleche::before { animation-delay: 1.2s; }
.aiguillage-ligne:nth-child(6) .aiguillage-fleche::before { animation-delay: 1.5s; }
.aiguillage-ligne:nth-child(7) .aiguillage-fleche::before { animation-delay: 1.8s; }
.aiguillage-ligne:nth-child(8) .aiguillage-fleche::before { animation-delay: 2.1s; }
@keyframes aiguillage { 0% { left: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.aiguillage-offre { display: grid; gap: 2px; color: var(--fg); text-decoration: none; }
.aiguillage-offre::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.aiguillage-offre strong { font-family: var(--font-display); font-size: var(--text-md); color: var(--accent-text); }
.aiguillage-prix { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
@media (max-width: 48rem) {
  .aiguillage-ligne { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4); }
  .aiguillage-fleche { display: none; }
  .aiguillage-offre { padding-left: calc(1.5rem + var(--space-4)); }
}
/* 01 — Les unités emboîtées (V2 : boîtes nommées, lots ci-dessous) ; la légende s'allume
   tour à tour (un-legende-1 à 3, reprises par .niveau-1 à 3). */
.unites { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.unites-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.unites-legende li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-4); border: 1px solid transparent; border-radius: var(--radius-card); }
.unites-legende li > div { display: grid; gap: var(--space-1); }
.unites-legende h3 { font-size: var(--text-md); }
.unites-legende p { font-size: var(--text-sm); color: var(--muted); }
.unites-legende .lien-suite { font-size: var(--text-sm); }
@keyframes un-legende-1 { 0%, 3%, 33%, 100% { border-color: transparent; background: transparent; } 6%, 30% { border-color: var(--accent-text); background: var(--surface); } }
@keyframes un-legende-2 { 0%, 33%, 66%, 100% { border-color: transparent; background: transparent; } 36%, 63% { border-color: var(--accent-text); background: var(--surface); } }
@keyframes un-legende-3 { 0%, 66%, 99%, 100% { border-color: transparent; background: transparent; } 69%, 96% { border-color: var(--accent-text); background: var(--surface); } }
.unite-marque { justify-self: center; margin-top: 0.25rem; border: 2px solid var(--accent-text); }
.unite-marque-tache { width: 1rem; height: 1rem; border-radius: 50%; }
.unite-marque-processus { width: 2.25rem; height: 1.1rem; border-radius: 6px; }
.unite-marque-domaine { width: 2.5rem; height: 1.75rem; border-radius: 8px; border-width: 3px; }
.phrase-cle { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); text-align: center; }
@media (max-width: 60rem) { .unites { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }

/* 02 — Le parcours : une ligne et ses arrêts, un point qui avance d'arrêt en arrêt, et la
   Supervision TMA en continu dessous. */
.parcours { display: grid; gap: var(--space-8); }
.ligne-parcours { --rail: 0.6rem; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
/* Le rail s'arrête au dernier arrêt (début de la quatrième colonne). */
.ligne-parcours::before { content: ""; position: absolute; top: var(--rail); left: var(--rail); right: calc(25% - 0.75rem - var(--rail)); height: 3px; margin-top: -1.5px; border-radius: 3px; background: color-mix(in srgb, var(--accent-text) 30%, var(--fond, var(--bg))); }
.ligne-parcours::after { content: ""; position: absolute; top: var(--rail); left: 0; width: calc(2 * var(--rail)); height: calc(2 * var(--rail)); margin-top: calc(-1 * var(--rail)); border-radius: 50%; background: var(--accent); z-index: 1; animation: train 8s ease-in-out infinite; }
@keyframes train {
  0%, 10% { left: 0; opacity: 1; }
  22%, 32% { left: calc((100% + 1rem) * 0.25); }
  44%, 54% { left: calc((100% + 1rem) * 0.5); }
  66%, 80% { left: calc((100% + 1rem) * 0.75); opacity: 1; }
  88% { left: calc((100% + 1rem) * 0.75); opacity: 0; }
  92% { left: 0; opacity: 0; }
  100% { left: 0; opacity: 1; }
}
.arret { position: relative; display: grid; gap: var(--space-2); align-content: start; padding-top: calc(2 * var(--rail) + var(--space-4)); }
.arret-point { position: absolute; top: 0; left: 0; width: calc(2 * var(--rail)); height: calc(2 * var(--rail)); border-radius: 50%; background: var(--fond, var(--bg)); border: 3px solid var(--accent-text); box-sizing: border-box; }
.voie { display: grid; gap: 2px; align-content: start; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.voie > a { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; color: var(--fg); text-decoration: none; }
.voie > a:hover { color: var(--accent-text); text-decoration: underline; }
.voie > .idx { margin-bottom: var(--space-1); }
.arret:first-child .voie { border-color: var(--accent-text); }
.arret:nth-child(3) .voie { background: color-mix(in srgb, var(--accent-wash) 55%, var(--surface)); }
.arret:nth-child(4) .voie { background: var(--accent-wash); }
.arret-detail { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.parcours-continu { display: grid; gap: var(--space-2); }
.continu-svg { display: block; width: 100%; height: 8px; }
.continu-trait { fill: none; stroke: var(--accent-text); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 8; vector-effect: non-scaling-stroke; animation: continu 1.2s linear infinite; }
@keyframes continu { to { stroke-dashoffset: -36; } }
.parcours-continu p { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.parcours-continu p a { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; }
@media (max-width: 48rem) {
  .ligne-parcours { grid-template-columns: minmax(0, 1fr); }
  .ligne-parcours::before { top: var(--rail); bottom: var(--rail); right: auto; left: var(--rail); width: 3px; height: auto; margin: 0 0 0 -1.5px; }
  .ligne-parcours::after { top: 0; left: 0; margin: 0; animation-name: train-vertical; }
  .arret { padding: 0 0 0 calc(2 * var(--rail) + var(--space-4)); }
  .arret-point { top: var(--space-4); }
}
@keyframes train-vertical { 0%, 8% { top: 0; opacity: 1; } 80% { top: calc(100% - 1.2rem); opacity: 1; } 90% { opacity: 0; top: calc(100% - 1.2rem); } 95% { top: 0; opacity: 0; } 100% { top: 0; opacity: 1; } }

/* 03 — Les familles d'offres et leurs cartes, prix mis en avant. */
.famille { display: grid; gap: var(--space-4); }
.famille-titre { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); }
.famille-titre::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.famille-titre .icone { width: 1.5rem; height: 1.5rem; }
.famille-note { font-weight: 400; letter-spacing: 0.08em; text-transform: none; color: var(--muted); }
.familles-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }
/* Carte d'offre (A105, 2026-10-09) : l'unité, le nom, le prix, ce qui est inclus, puis les
   options sous un filet, alignées en bas de la carte. */
.offre-carte { grid-template-rows: auto auto auto 1fr auto; gap: var(--space-2); }
.offre-unite { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
/* Le pictogramme de l'offre, dans un rond teinté, à gauche de son unité (2026-10-05). */
.offre-tete { display: flex; align-items: center; gap: var(--space-3, 0.75rem); }
.offre-picto { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--accent-wash); color: var(--accent-text); }
.offre-picto .icone { width: 1.5rem; height: 1.5rem; }
.offre-prix { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.15; letter-spacing: var(--tracking-tight); color: var(--accent-text); }
.offre-etiquette { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.offre-inclus { font-size: var(--text-sm); }
/* Carte avec son besoin (page Agents IA, A194) : la phrase du besoin sous le nom, le délai sous le prix. */
.offre-carte-besoin { grid-template-rows: auto auto auto auto 1fr auto; }
/* Sur grand écran, les quatre cartes d'une rangée partagent leurs lignes : noms, besoins, prix et options alignés. */
@media (min-width: 72.01rem) { .famille-cartes.grille-4 .offre-carte-besoin { grid-row: span 6; grid-template-rows: subgrid; } }
.offre-besoin { font-size: var(--text-sm); line-height: 1.45; }
.offre-options { padding-top: var(--space-3, 0.75rem); border-top: 1px solid var(--border); font-size: var(--text-sm); }
.offre-options ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
@media (max-width: 48rem) { .familles-duo { grid-template-columns: minmax(0, 1fr); } }

/* 04 — Les curseurs du prix : chaque facteur va d'une situation simple à une situation
   exigeante ; le curseur parcourt la piste. */
.curseurs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); }
.curseur { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.curseur h3 { font-size: var(--text-md); }
.curseur-piste { position: relative; height: 6px; margin: var(--space-2) 0; border-radius: 999px; background: color-mix(in srgb, var(--fg) 12%, var(--fond, var(--bg))); }
.curseur-piste::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 999px; background: var(--accent-text); animation: curseur-remplissage 6s ease-in-out infinite; animation-delay: inherit; }
.curseur-pouce { position: absolute; top: 50%; left: calc(50% - 0.6rem); width: 1.2rem; height: 1.2rem; margin-top: -0.6rem; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent-text); box-sizing: border-box; animation: curseur 6s ease-in-out infinite; animation-delay: inherit; }
.curseur:nth-child(2) .curseur-piste { animation-delay: -1.2s; } .curseur:nth-child(3) .curseur-piste { animation-delay: -2.4s; }
.curseur:nth-child(4) .curseur-piste { animation-delay: -3.6s; } .curseur:nth-child(5) .curseur-piste { animation-delay: -4.8s; }
.curseur:nth-child(6) .curseur-piste { animation-delay: -0.6s; } .curseur:nth-child(7) .curseur-piste { animation-delay: -1.8s; }
.curseur:nth-child(8) .curseur-piste { animation-delay: -3s; } .curseur:nth-child(9) .curseur-piste { animation-delay: -4.2s; }
@keyframes curseur { 0%, 10% { left: 0; } 45%, 60% { left: calc(100% - 1.2rem); } 95%, 100% { left: 0; } }
@keyframes curseur-remplissage { 0%, 10% { width: 0.6rem; } 45%, 60% { width: calc(100% - 0.6rem); } 95%, 100% { width: 0.6rem; } }
.curseur-bornes { display: flex; justify-content: space-between; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.curseur-bornes span:last-child { text-align: right; }
@media (max-width: 60rem) { .curseurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .curseurs { grid-template-columns: minmax(0, 1fr); } }

/* 05 — Les conditions, en icônes, et le paiement en trois jalons, le dernier lié aux
   indicateurs. */
.conditions .carte { gap: var(--space-4); }
.liste-icones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.liste-icones li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-2); align-items: start; font-size: var(--text-sm); }
.liste-icones .icone { width: 1.5rem; height: 1.5rem; padding: 3px; border-radius: 50%; background: var(--accent-wash); }
.liste-icones-non .icone { background: color-mix(in srgb, var(--fg) 8%, var(--surface)); color: var(--muted); }
.paiement { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.paiement h3 { font-size: var(--text-xl); }
.jalons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: var(--space-2); }
.jalons li { display: grid; gap: var(--space-2); align-content: start; }
.jalon-barre { height: 0.75rem; border-radius: 999px; background: color-mix(in srgb, var(--accent-text) 35%, var(--surface)); transform-origin: left center; animation: barre 0.8s var(--courbe) both; }
.jalons li:nth-child(2) .jalon-barre { animation-delay: 0.5s; }
.jalons li:nth-child(3) .jalon-barre { animation-delay: 1s; }
.jalon-resultat .jalon-barre { background: var(--accent); }
.jalon-nom { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: 700; }
.jalon-nom .icone { width: 1rem; height: 1rem; }
.jalon-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-text); }
@media (max-width: 40rem) { .jalons { grid-template-columns: minmax(0, 1fr); } }

/* 06 — Les questions, en fenêtres teintées comme les processus du catalogue. */
.replis.replis-questions > details { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent-text) 22%, var(--border)); }
.replis.replis-questions > details[open] { border-color: color-mix(in srgb, var(--accent-text) 55%, var(--border)); }
/* « Vos questions » sur deux colonnes sur grand écran (A212) : la liste, plus complète, reste lisible
   d'un coup d'œil ; une réponse ouverte ne se coupe jamais d'une colonne à l'autre. */
@media (min-width: 60.0625rem) {
  .replis.replis-questions { display: block; columns: 2; column-gap: var(--space-4); }
  .replis.replis-questions > details { break-inside: avoid; margin-bottom: var(--space-2); }
}

/* ---------- Cerveau entreprise — visuels (A45) ----------
   Page Cerveau entreprise, dans l'esprit de l'accueil et de la page Offres : le noyau et ce
   qui s'y branche, les pertes et leur remède, la pile des livrables, les trois chemins, le
   déroulé, le prix, la preuve. Le Cerveau entreprise y est un noyau à deux couches — la
   mémoire, les règles communes —, figuré par un noyau (BR-11.08 ; une icône de cerveau sobre est permise, plateforme § 10). Animations lancées
   à l'apparition, coupées si l'appareil réduit les animations ; à l'arrêt, chaque visuel
   reste lisible. */
.apparait:not(.visible):is(.pertes, .obtenez, .chemins, .preuve-flux) *,
.apparait:not(.visible):is(.pertes, .obtenez, .chemins, .preuve-flux) *::before,
.apparait:not(.visible):is(.pertes, .obtenez, .chemins, .preuve-flux) *::after { animation-play-state: paused; }

/* Le noyau en petit : deux couches et le cœur, le symbole du Cerveau entreprise dans la page. */
.noyau { display: block; flex: none; }
.noyau-regles { fill: color-mix(in srgb, var(--accent-text) 12%, transparent); stroke: var(--accent-text); stroke-width: 1.5; }
.noyau-memoire { fill: color-mix(in srgb, var(--accent-text) 8%, transparent); stroke: color-mix(in srgb, var(--accent-text) 60%, transparent); stroke-width: 1.5; }
.noyau-coeur { fill: var(--accent-text); }

/* Un trajet : une ligne, sa pointe, et un point qui la parcourt. */
.trajet { position: relative; display: block; height: 2px; background: color-mix(in srgb, var(--accent-text) 30%, var(--fond, var(--bg))); }
.trajet::after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--accent-text); border-right: 2px solid var(--accent-text); transform: translateY(-50%) rotate(45deg); }
.trajet::before { content: ""; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent-text); opacity: 0; animation: trajet 2.6s ease-in-out infinite; }
.perte .trajet, .chemin .trajet { background: color-mix(in srgb, var(--accent-text) 30%, var(--surface)); }
@keyframes trajet { 0% { left: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }

/* En-tête à visuel (A45, repris par les pages d'offre et Maîtrise, A46) : le texte, et le
   visuel de la page dans une vitrine. */
.entete-visuel > .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; column-gap: var(--space-12); }
.entete-visuel-texte { display: grid; gap: var(--space-6); align-content: start; }
/* Les repères sur deux lignes : le prix et le délai, puis le périmètre, plus long. */
.entete-visuel .reperes { grid-template-columns: repeat(2, minmax(0, max-content)); }
.entete-visuel .reperes div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); }
/* Le prix des options dans l'encadré (A136) : prix et délai en haut, périmètre et options dessous. */
.entete-visuel .reperes:has(> .repere-options) div:nth-child(3) { grid-column: auto; }
.entete-visuel .reperes:has(> .repere-options) div:nth-child(4) { border-top: 1px solid var(--border); }
.repere-options ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* Sur téléphone, les boutons d'action passent avant les repères chiffrés, pour tenir dans le
   premier écran (revue d'ergonomie du 2026-10-10, A193 ; charte éditoriale § 10, « L'en-tête » :
   une action principale, puis les repères). */
@media (max-width: 48rem) { .entete-visuel-texte > .reperes { order: 1; } }
.reperes .repere-options dd { font-size: var(--text-sm); font-weight: 400; }
.entete-visuel-texte > *, .entete-visuel .vitrine { animation: entree 0.8s var(--courbe) both; }
.entete-visuel-texte > :nth-child(2) { animation-delay: 0.08s; }
.entete-visuel-texte > :nth-child(3) { animation-delay: 0.16s; }
.entete-visuel-texte > :nth-child(4) { animation-delay: 0.24s; }
.entete-visuel-texte > :nth-child(5) { animation-delay: 0.3s; }
.entete-visuel .vitrine { animation-delay: 0.2s; }
@media (max-width: 60rem) { .entete-visuel > .wrap { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); } }
/* Audit entreprise et Audit de processus (demandes du dirigeant du 2026-10-09, A133, A134) : sur
   deux colonnes, le visuel prend exactement la hauteur du texte de gauche ; ses lignes, resserrées
   pour y tenir, se répartissent la hauteur restante. */
@media (min-width: 60.0625rem) {
  .entete-visuel .vitrine:has(> .tps, > .cahier) { align-self: stretch; grid-template-rows: minmax(0, 1fr); }
  .vitrine > .doc:is(.tps, .cahier) { align-content: space-between; }
}
/* Sur un écran plus étroit, des marges et une colonne d'intitulés plus petites gardent le visuel
   dans la hauteur du texte. */
@media (min-width: 60.0625rem) and (max-width: 72rem) {
  .entete-visuel .vitrine:has(> .tps, > .cahier) { padding: var(--space-4); }
  .entete-visuel .cahier-ligne { grid-template-columns: 7.75rem minmax(0, 1fr); gap: var(--space-1) var(--space-2); padding-inline: var(--space-2); }
}

/* La vitrine : une carte blanche en clair, la surface teintée d'accent en sombre, comme le
   schéma de l'accueil (A35). */
.vitrine { --fond: var(--surface); margin: 0; display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--fond); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-card); }
:root[data-theme="dark"] .vitrine { --fond: var(--accent-wash); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .vitrine { --fond: var(--accent-wash); }
}
.branchement-svg { display: block; width: 100%; max-width: 26rem; height: auto; margin-inline: auto; overflow: visible; }
/* Sur grand écran, la fenêtre du schéma prend la hauteur du texte de gauche, et le schéma vertical
   s'y loge sans la pousser (A174). */
@media (min-width: 60.0625rem) {
  .entete-cerveau .vitrine:has(.branchement-zone) { align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .branchement-zone { position: relative; min-height: 20rem; }
  .branchement-zone .branchement-svg { position: absolute; inset: 0; max-width: none; height: 100%; }
}
/* Sur téléphone, le schéma vertical garde l'essentiel de sa taille : ses textes restent à leur taille
   de base, sans le grossissement prévu pour les schémas larges (sinon ils sortent des cadres). */
@media (max-width: 40rem) {
  .branchement-svg .cv-nom { font-size: 12px; letter-spacing: 0.06em; }
  .branchement-svg .cv-arc { font-size: 11.5px; letter-spacing: 0.16em; }
  .branchement-svg .cv-arc-detail { font-size: 9.5px; letter-spacing: 0.12em; }
  .branchement-svg .cv-bloc-nom { font-size: 12.5px; letter-spacing: 0.04em; }
  .branchement-svg .cv-bloc-role { font-size: 11px; letter-spacing: 0.04em; }
  .branchement-svg .cv-domaine { font-size: 12.5px; letter-spacing: 0.06em; }
}
.vitrine-legende { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.vitrine-etiquette { justify-self: start; }
.vitrine-legende .citation-marque { font-size: var(--text-lg); max-width: none; color: var(--fg); }
.cv-regles { fill: color-mix(in srgb, var(--accent-text) 10%, var(--fond)); stroke: var(--accent-text); stroke-width: 1.5; }
.cv-memoire { fill: color-mix(in srgb, var(--accent-text) 4%, var(--fond)); stroke: color-mix(in srgb, var(--accent-text) 55%, var(--fond)); stroke-width: 1.5; }
.cv-coeur { fill: var(--fond); stroke: var(--accent-text); stroke-width: 2.5; }
.cv-regles, .cv-memoire, .cv-coeur { transform-box: fill-box; transform-origin: center; animation: cv-apparait 0.8s var(--courbe) 0.3s both; }
.cv-memoire { animation-delay: 0.45s; }
.cv-coeur { animation-delay: 0.6s; }
.cv-texte { font-family: var(--font-mono); fill: var(--muted); }
.cv-nom { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; fill: var(--accent-text); }
.cv-arc { font-size: 11.5px; letter-spacing: 0.16em; fill: var(--accent-text); animation: cv-fondu 0.6s ease 0.9s both; }
.cv-arc-detail { font-size: 9.5px; letter-spacing: 0.12em; fill: var(--muted); }
.cv-onde { fill: none; stroke: var(--accent-text); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: cv-onde 3.6s ease-out 2s infinite; }
.cv-orbite { transform-origin: 200px 240px; animation: cv-tour 24s linear infinite; }
.cv-satellite { fill: var(--accent-text); }
/* Les liaisons se tracent du noyau vers les agents, des personnes vers le noyau ; puis des
   signaux les parcourent dans le même sens. */
.cv-lien { fill: none; stroke: color-mix(in srgb, var(--accent-text) 45%, var(--fond)); stroke-width: 2; stroke-dasharray: 100; animation: cv-trace 0.7s var(--courbe) both; }
.cv-lien-1 { animation-delay: 0.9s; } .cv-lien-2 { animation-delay: 1.05s; } .cv-lien-3 { animation-delay: 1.2s; }
.cv-signal { fill: none; stroke: var(--accent-text); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 120; stroke-dashoffset: 14; opacity: 0; animation: cv-signal 3s linear infinite; }
.cv-signal-entree { stroke: var(--fg); }
.cv-signal-entree.cv-signal-1 { animation-delay: 1.8s; } .cv-signal-entree.cv-signal-2 { animation-delay: 2.2s; } .cv-signal-entree.cv-signal-3 { animation-delay: 2.6s; }
.cv-signal-sortie.cv-signal-1 { animation-delay: 3.3s; } .cv-signal-sortie.cv-signal-2 { animation-delay: 3.7s; } .cv-signal-sortie.cv-signal-3 { animation-delay: 4.1s; }
.cv-port { fill: var(--fond); stroke: var(--accent-text); stroke-width: 2; animation: cv-fondu 0.4s ease 1.5s both; }
.cv-cadre { fill: var(--fond); stroke: var(--accent-text); stroke-width: 2; }
.cv-glyphe { color: var(--accent-text); }
.cv-bloc-humain .cv-cadre { stroke: var(--fg); }
.cv-bloc-humain .cv-glyphe { color: var(--fg); }
.cv-bloc-nom { font-size: 12.5px; letter-spacing: 0.04em; fill: var(--fg); }
.cv-bloc-role { font-size: 11px; letter-spacing: 0.04em; fill: var(--accent-text); }
.cv-bloc-humain .cv-bloc-role { fill: var(--muted); }
.cv-bloc { animation: cv-fondu 0.6s ease 0.6s both; }
.cv-bloc-2 { animation-delay: 0.75s; } .cv-bloc-3 { animation-delay: 0.9s; }
@keyframes cv-apparait { from { opacity: 0; transform: scale(0.7); } }
@keyframes cv-fondu { from { opacity: 0; } }
@keyframes cv-trace { from { stroke-dashoffset: 100; } }
@keyframes cv-signal { 0% { stroke-dashoffset: 14; opacity: 1; } 70% { stroke-dashoffset: -104; opacity: 1; } 71%, 100% { stroke-dashoffset: -104; opacity: 0; } }
@keyframes cv-onde { from { opacity: 0.5; transform: scale(1); } to { opacity: 0; transform: scale(1.28); } }
@keyframes cv-tour { to { transform: rotate(360deg); } }
/* Sur téléphone, le dessin rapetisse : ses textes grossissent d'autant pour rester lisibles. */
@media (max-width: 40rem) {
  .vitrine { padding: var(--space-4); }
  .vitrine:has(.branchement-svg) { padding-inline: var(--space-2); }
  .vitrine:has(.branchement-svg) .vitrine-legende { padding-inline: var(--space-2); }
  .cv-nom { font-size: 13px; letter-spacing: 0.02em; }
  .cv-arc { font-size: 12.5px; letter-spacing: 0.1em; }
  .cv-arc-detail { font-size: 10.5px; letter-spacing: 0.06em; }
  .cv-bloc-nom { font-size: 14px; letter-spacing: 0; }
  .cv-bloc-role { font-size: 13px; letter-spacing: 0.02em; }
  .cv-domaine { font-size: 14.5px; letter-spacing: 0.01em; }
}

/* 01 — Les pertes et leur remède : l'icône de la perte s'efface, un point traverse la
   flèche, le remède s'affirme. */
.pertes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.perte { display: grid; grid-template-columns: minmax(0, 1.5fr) 5rem minmax(0, 1fr); align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.perte-avant { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.perte-avant > div { display: grid; gap: var(--space-1); }
.perte-avant .icone { width: 2.75rem; height: 2.75rem; padding: 0.65rem; border-radius: 50%; background: color-mix(in srgb, var(--fg) 7%, var(--surface)); color: var(--muted); animation: perte 4.5s ease-in-out infinite; }
.perte-avant h3 { font-size: var(--text-md); }
.perte-avant p { font-size: var(--text-sm); color: var(--muted); }
.perte .trajet::before { animation: perte-trajet 4.5s ease-in-out infinite; }
.perte-apres { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; line-height: 1.3; color: var(--accent-text); }
.perte-apres .icone { width: 1.75rem; height: 1.75rem; padding: 0.3rem; border-radius: 50%; background: var(--accent); color: var(--ink-on-accent); animation: perte-remede 4.5s ease-in-out infinite; }
.perte:nth-child(2) .icone, .perte:nth-child(2) .trajet::before { animation-delay: 0.5s; }
.perte:nth-child(3) .icone, .perte:nth-child(3) .trajet::before { animation-delay: 1s; }
@keyframes perte { 0%, 12%, 88%, 100% { opacity: 1; transform: none; } 30%, 70% { opacity: 0.25; transform: translateX(-6px); } }
@keyframes perte-trajet { 0%, 28% { left: 0; opacity: 0; } 34%, 56% { opacity: 1; } 62%, 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes perte-remede { 0%, 58%, 76%, 100% { transform: none; } 66% { transform: scale(1.22); } }
@media (max-width: 48rem) {
  .perte { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4); }
  .perte .trajet { display: none; }
  .perte-apres { padding-left: calc(2.75rem + var(--space-4)); }
}

/* 02 — Ce que vous obtenez : le socle, le premier domaine posé dessus, le domaine suivant
   qui attend ; à côté, ce qui rend l'ensemble utilisable. */
.obtenez { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.pile { display: grid; gap: var(--space-2); }
.pile-bloc { display: grid; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-card); animation: pile-pose 0.7s var(--courbe) both; }
.pile-bloc h3 { font-size: var(--text-lg); }
.pile-bloc p { font-size: var(--text-sm); color: var(--muted); }
.pile-socle { background: var(--accent); color: var(--ink-on-accent); animation-delay: 0.1s; }
.pile-socle .idx { color: color-mix(in srgb, var(--ink-on-accent) 78%, var(--accent)); }
.pile-domaine { margin-inline: var(--space-6); background: var(--accent-wash); border: 2px solid var(--accent-text); animation-delay: 0.6s; }
.pile-suivant { margin-inline: var(--space-12); padding: var(--space-4) var(--space-6); gap: 2px; border: 2px dashed color-mix(in srgb, var(--accent-text) 45%, var(--fond, var(--bg))); animation: pile-pose 0.7s var(--courbe) 1.1s both, pile-flotte 2.8s ease-in-out 1.8s infinite alternate; }
.pile-suivant strong { font-family: var(--font-display); font-size: var(--text-md); }
.pile-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.pastilles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pastilles li { padding: 0.15rem 0.7rem; border: 1px solid color-mix(in srgb, var(--ink-on-accent) 45%, var(--accent)); border-radius: 999px; font-size: var(--text-sm); animation: pastille 0.5s var(--courbe) both; }
.pastilles li:nth-child(1) { animation-delay: 0.5s; } .pastilles li:nth-child(2) { animation-delay: 0.58s; } .pastilles li:nth-child(3) { animation-delay: 0.66s; }
.pastilles li:nth-child(4) { animation-delay: 0.74s; } .pastilles li:nth-child(5) { animation-delay: 0.82s; } .pastilles li:nth-child(6) { animation-delay: 0.9s; }
.pastilles li:nth-child(7) { animation-delay: 0.98s; } .pastilles li:nth-child(8) { animation-delay: 1.06s; } .pastilles li:nth-child(9) { animation-delay: 1.14s; }
.pastilles li:nth-child(n+10) { animation-delay: 1.22s; } .pastilles li:nth-child(n+14) { animation-delay: 1.3s; }
@keyframes pile-pose { from { opacity: 0; transform: translateY(-24px); } }
@keyframes pile-flotte { to { transform: translateY(-5px); } }
@keyframes pastille { from { opacity: 0; transform: scale(0.8); } }
.livrables { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.livrables li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.livrables li > div { display: grid; gap: var(--space-1); }
.livrables .icone { width: 2.75rem; height: 2.75rem; padding: 0.65rem; border-radius: 50%; background: var(--accent-wash); }
.livrables h3 { font-size: var(--text-md); }
.livrables p { font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 60rem) { .obtenez { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
@media (max-width: 40rem) {
  .pile-bloc { padding: var(--space-4); }
  .pile-domaine { margin-inline: var(--space-2); }
  .pile-suivant { margin-inline: var(--space-6); }
}

/* 03 — Facultatif : trois chemins, un point qui va de l'un à l'autre. */
.chemins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.chemin { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.chemin p { font-size: var(--text-sm); color: var(--muted); }
.chemin-trace { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem; align-items: center; }
.chemin-noeud { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 2px solid var(--accent-text); border-radius: 50%; background: var(--surface); }
.chemin-noeud:has(.noyau) { border-color: transparent; }
.chemin-noeud .icone { width: 1.6rem; height: 1.6rem; }
.chemin-noeud .noyau { width: 3.5rem; height: 3.5rem; }
.chemin-trace .trajet { margin-inline: var(--space-2); }
.chemin-trace .trajet::before { animation-duration: 3s; }
.chemin-arrivee { animation: chemin-arrivee 3s ease-in-out infinite; }
.chemin:nth-child(2) .chemin-arrivee, .chemin:nth-child(2) .trajet::before { animation-delay: 0.5s; }
.chemin:nth-child(3) .chemin-arrivee, .chemin:nth-child(3) .trajet::before { animation-delay: 1s; }
@keyframes chemin-arrivee { 0%, 82%, 100% { transform: none; } 92% { transform: scale(1.12); } }
@media (max-width: 48rem) { .chemins { grid-template-columns: minmax(0, 1fr); } }

/* 04 — Le déroulé : la ligne du parcours (A44), sans lien ; le test des trois mois en
   avant ; puis les deux conditions de réussite. */
.voie > strong { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; }
.deroule .arret:last-child .voie { border-color: var(--accent-text); }
.conditions-cerveau { display: grid; gap: var(--space-4); }
.condition { gap: var(--space-2); }
.condition .icone { width: 2rem; height: 2rem; margin-bottom: var(--space-2); }
.condition h3 { font-size: var(--text-lg); }
.condition p { font-size: var(--text-sm); color: var(--muted); }

/* « Comment se fixe le prix ? » (macro commentSeFixeLePrix, décision du dirigeant du 2026-11-09,
   A219) : la carte de ce qui fait varier le prix, puis le chemin en trois temps (.prix-variation),
   dans la mise en page .choisir. Jusqu'à A219, la carte du prix en grand et son curseur. */
.prix-principal { gap: var(--space-4); padding: var(--space-8); }
.prix-variation { display: grid; gap: var(--space-4); }
.prix-variation h3 { font-size: var(--text-lg); }
.prix-variation p { font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 40rem) { .prix-principal { padding: var(--space-6); } }

/* 07 — La preuve, en bande de marque (A196) : ce que contient notre Cerveau entreprise, rangé comme
   celui que nous proposons (socle commun, puis domaines métiers), un référentiel unique, nos douze
   agents internes, et trois faits vérifiables dessous. */
.preuve-flux { display: grid; grid-template-columns: minmax(0, 1.7fr) 3rem minmax(0, 0.9fr) 3rem minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.preuve-cerveau { display: grid; gap: var(--space-3, 0.75rem); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: color-mix(in srgb, var(--fg) 3%, transparent); }
.preuve-groupe { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.preuve-groupe + ul { margin-bottom: var(--space-2); }
.preuve-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.preuve-sources li { padding: var(--space-1) var(--space-3, 0.75rem); border: 1px solid var(--border); border-radius: 999px; font-size: var(--text-sm); background: color-mix(in srgb, var(--fg) 4%, var(--fond, var(--bg))); animation: preuve-source 4s ease-in-out infinite; }
.preuve-sources li:nth-child(2) { animation-delay: 1s; } .preuve-sources li:nth-child(3) { animation-delay: 2s; } .preuve-sources li:nth-child(4) { animation-delay: 3s; }
.preuve-domaines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.preuve-domaines li { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3, 0.75rem); border: 1px solid var(--border); border-radius: 10px; font-size: var(--text-sm); line-height: 1.35; color: var(--muted); }
.preuve-domaines li strong { display: block; color: var(--fg); }
.preuve-domaines .icone { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 1px; color: var(--accent-text); }
.preuve-centre { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.preuve-centre .noyau { width: 7rem; height: 7rem; animation: preuve-pouls 2.4s ease-in-out infinite alternate; }
.preuve-centre strong, .preuve-agents strong { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; }
.preuve-trajet-2::before { animation-delay: 1.3s; }
.preuve-agents { display: grid; gap: var(--space-2); justify-items: start; }
.preuve-agents strong { max-width: 16rem; }
.preuve-note { font-size: var(--text-sm); color: var(--muted); }
.preuve-robots { display: grid; grid-template-columns: repeat(4, auto); gap: var(--space-2); }
.preuve-robots .icone { width: 2.25rem; height: 2.25rem; padding: 0.4rem; border: 2px solid var(--accent-text); border-radius: 10px; animation: preuve-robot 3s ease-in-out infinite; }
.preuve-robots .icone:nth-child(4n+2) { animation-delay: 0.4s; } .preuve-robots .icone:nth-child(4n+3) { animation-delay: 0.8s; } .preuve-robots .icone:nth-child(4n) { animation-delay: 1.2s; }
.preuve-faits { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.preuve-faits li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); }
.preuve-faits .icone { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 2px; color: var(--accent-text); }
@keyframes preuve-source { 0%, 30%, 100% { border-color: var(--border); } 8%, 22% { border-color: var(--accent-text); } }
@keyframes preuve-pouls { to { transform: scale(1.06); } }
@keyframes preuve-robot { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-4px); } 80% { transform: none; } }
@media (max-width: 64rem) {
  .preuve-flux { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .preuve-cerveau { width: 100%; }
  .preuve-centre, .preuve-agents { text-align: center; justify-items: center; }
  .preuve-trajet { width: 2px; height: 2.5rem; }
  .preuve-trajet::after { top: auto; bottom: 0; right: 50%; transform: translateX(50%) rotate(135deg); }
  .preuve-trajet::before { left: 50%; margin: 0 0 0 -4px; animation-name: trajet-vertical; }
  .preuve-faits { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) { .preuve-domaines { grid-template-columns: minmax(0, 1fr); } }
@keyframes trajet-vertical { 0% { top: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }

/* ---------- Pages d'offre et Maîtrise — visuels (A46) ----------
   Les sept pages d'offre et les cinq pages Maîtrise, dans l'esprit de l'accueil, de la page
   Offres et du Cerveau entreprise : un visuel d'en-tête par page (_includes/fiches.njk), puis
   des blocs communs — situations, tuiles, livrables, déroulé, mesure, lieux de traitement,
   suites. Animations lancées à l'apparition, coupées si l'appareil réduit les
   animations ; à l'arrêt, chaque visuel reste lisible. */
.apparait:not(.visible):is(.lieux, .cadre-fiche, .liste-titree) *,
.apparait:not(.visible):is(.lieux, .cadre-fiche, .liste-titree) *::before,
.apparait:not(.visible):is(.lieux, .cadre-fiche, .liste-titree) *::after,
.apparait:not(.visible):is(.lieux, .cadre-fiche) { animation-play-state: paused; }

/* Situations et tuiles : une carte, une icône dans une pastille, un texte court. */
.situations, .tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-4); }
.tuiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tuiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tuiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tuiles-5 { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.situation, .tuile { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.situation > .icone, .tuile > .icone:first-child { width: 2.75rem; height: 2.75rem; padding: 0.65rem; margin-bottom: var(--space-2); border-radius: 50%; background: var(--accent-wash); }
.situation p { font-size: var(--text-md); line-height: 1.45; }
.tuile h3 { font-size: var(--text-lg); }
.tuile p { font-size: var(--text-sm); color: var(--muted); }
.tuile-puce { display: inline-flex; align-items: center; gap: var(--space-1); justify-self: start; margin-top: var(--space-2); padding: 0.15rem 0.65rem; border-radius: 999px; background: var(--accent-wash); color: var(--accent-text); font-family: var(--font-mono); font-size: var(--text-xs); }
.tuile-puce .icone { width: 0.95rem; height: 0.95rem; }
@media (max-width: 60rem) { .tuiles-3, .tuiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .tuiles-3, .tuiles-4, .tuiles-2 { grid-template-columns: minmax(0, 1fr); } }

/* Livrables sur deux colonnes ; listes à icônes titrées, sur plusieurs colonnes. */
.livrables-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-12); }
@media (max-width: 48rem) { .livrables-grille { grid-template-columns: minmax(0, 1fr); } }
.liste-titree { display: grid; gap: var(--space-4); }
.liste-titree .liste-icones { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-2) var(--space-8); }
.liste-titree .liste-icones li { grid-template-columns: 1.5rem minmax(0, 1fr); font-size: var(--text-sm); }

/* Le déroulé en trois arrêts : la ligne du parcours (A44) sur trois colonnes. */
@media (min-width: 48.0625rem) {
  .ligne-parcours.ligne-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ligne-parcours.ligne-3::before { right: calc(100% / 3 - 0.67rem - var(--rail)); }
  .ligne-parcours.ligne-3::after { animation-name: train-3; }
}
@keyframes train-3 {
  0%, 12% { left: 0; opacity: 1; }
  32%, 44% { left: calc((100% + 1rem) / 3); }
  64%, 80% { left: calc((100% + 1rem) * 2 / 3); opacity: 1; }
  88% { left: calc((100% + 1rem) * 2 / 3); opacity: 0; }
  92% { left: 0; opacity: 0; }
  100% { left: 0; opacity: 1; }
}

/* Le cadre : la mesure (deux barres, avant et après) et les limites, côte à côte. */
.cadre-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
/* Les deux cartes à la même hauteur (A208), titres alignés en haut. */
.cadre-fiche > .mesure { align-content: start; }
.mesure .liste-icones { margin-top: var(--space-1); }
.mesure, .carte-liste { gap: var(--space-4); }
.mesure h3, .carte-liste h3 { font-size: var(--text-lg); }
.mesure > p { font-size: var(--text-sm); color: var(--muted); }
.mesure-vis { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center; }
.mesure-nom { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.mesure-piste { display: block; height: 0.9rem; }
.mesure-barre { display: block; height: 100%; border-radius: 999px; transform-origin: left center; animation: barre 1.1s var(--courbe) both; }
.mesure-avant { width: 100%; background: color-mix(in srgb, var(--fg) 16%, var(--surface)); }
.mesure-apres { width: 42%; background: var(--accent); animation-delay: 0.5s; }
.mesure-prepare .mesure-apres { width: 70%; background: transparent; border: 2px dashed var(--accent-text); box-sizing: border-box; }
.carte-liste .liste-icones li { font-size: var(--text-sm); }
/* Les livrables des étapes de l'Audit métiers (A151) : une icône par ligne, à la place des tirets,
   sous un filet qui les sépare du titre de l'étape (A152). */
.etape-liste { margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); gap: 0.75rem; }
/* Les livrables du Setup assistant IA, en trois cartes (A165) : mêmes cartes, sans numéro d'étape ;
   un large espace les détache de la note de choix. */
.groupes-livrables + .duo { margin-top: var(--space-12); }
@media (max-width: 48rem) { .cadre-fiche { grid-template-columns: minmax(0, 1fr); } }

/* Les lieux de traitement : l'Europe, la France, chez vous — trois zones emboîtées qui
   s'allument tour à tour. */
.lieux { display: grid; }
.lieu { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-6); border: 2px solid color-mix(in srgb, var(--accent-text) 22%, var(--border)); border-radius: var(--radius-card); }
.lieu-1 { background: color-mix(in srgb, var(--accent-wash) 45%, var(--fond, var(--bg))); animation: lieu-1 9s infinite; }
.lieu-2 { margin-top: var(--space-2); background: var(--accent-wash); animation: lieu-2 9s infinite; }
.lieu-3 { margin-top: var(--space-2); background: var(--surface); animation: lieu-3 9s infinite; }
/* Un lieu proposé avec une autre offre : le pointillé et la pastille le disent ; le texte
   garde son contraste (pas d'opacité). */
.lieu-ailleurs { border-style: dashed; }
.lieu-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.lieu-tete .icone { width: 1.5rem; height: 1.5rem; }
.lieu-nom { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; }
.lieu-etat { margin-left: auto; padding: 0.15rem 0.65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.lieu-etat-inclus { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.lieu-texte { max-width: 40rem; font-size: var(--text-sm); color: var(--muted); }
@keyframes lieu-1 { 0%, 30%, 100% { border-color: color-mix(in srgb, var(--accent-text) 22%, var(--border)); } 6%, 26% { border-color: var(--accent-text); } }
@keyframes lieu-2 { 0%, 33%, 63%, 100% { border-color: color-mix(in srgb, var(--accent-text) 22%, var(--border)); } 39%, 59% { border-color: var(--accent-text); } }
@keyframes lieu-3 { 0%, 66%, 96%, 100% { border-color: color-mix(in srgb, var(--accent-text) 22%, var(--border)); } 72%, 92% { border-color: var(--accent-text); } }
@media (max-width: 40rem) { .lieu { padding: var(--space-4); } }
.lieux-compact .lieu { padding: var(--space-4); }
.lieux-compact .lieu-3 { padding-block: var(--space-6); }
/* En-tête de la page Souveraineté (A177) : sur grand écran, la fenêtre des trois niveaux prend la
   hauteur du texte de gauche ; les périmètres emboîtés s'étirent pour la remplir. */
@media (min-width: 60.0625rem) {
  .entete-visuel .vitrine:has(> .lieux-compact) { align-self: stretch; display: grid; padding: var(--space-4); }
  .vitrine > .lieux-compact, .lieux-compact .lieu-1 { height: 100%; }
  .lieux-compact .lieu-1, .lieux-compact .lieu-2 { grid-template-rows: auto minmax(0, 1fr); }
  /* Resserré pour tenir dans la hauteur du texte : marges intérieures de 12 px, pastille au plus
     près du nom. */
  .lieux-compact .lieu, .lieux-compact .lieu-3 { padding: 0.75rem var(--space-4); }
  .lieux-compact .lieu-2, .lieux-compact .lieu-3 { margin-top: 0; }
  .lieux-compact .lieu-tete { row-gap: var(--space-1); }
}

/* Suites sans lien (« vous repartez avec cette réponse ») : le texte reste neutre. */
.aiguillage-offre-texte strong { color: var(--fg); }

/* Disponibilité par offre (Souveraineté) : une puce par niveau. */
.puce { display: inline-block; padding: 0.15rem 0.65rem; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.puce-inclus { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.puce-option { border-color: var(--accent-text); color: var(--accent-text); }
.puce-etude { border-style: dashed; border-color: var(--accent-text); color: var(--accent-text); }

/* Deux colonnes : un texte, et un graphique ou un encadré. */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-12); align-items: center; }
/* Une liste titrée sous le texte d'un duo (Audit entreprise, A139) : son titre garde la taille des titres de famille. */
.duo .corps .liste-titree { margin-top: var(--space-4); }
.duo .corps .famille-titre { font-size: var(--text-sm); line-height: 1.4; }
@media (max-width: 60rem) { .duo { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
/* Délais en semaines (Audit métiers) : une piste de quatre semaines, en demi-semaines. */
.barres-semaines .barre-piste { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.barres-semaines li { grid-template-columns: 6.5rem minmax(0, 1fr) 7.5rem; }
.barres-semaines .barre-valeur { font-size: var(--text-xs); }
.duree-7 .barre { grid-column: span 7; } .duree-8 .barre { grid-column: span 8; }
.barres-semaines li:nth-child(n) .barre-nom { font-weight: 400; color: var(--muted); }
@media (max-width: 40rem) { .barres-semaines li { grid-template-columns: 5.5rem minmax(0, 1fr) 6rem; } }
/* Une icône en tête de carte ou d'encadré. */
.carte > .icone:first-child, .encadre > .icone:first-child { width: 2rem; height: 2rem; margin-bottom: var(--space-2); }
.encadre:has(> .icone:first-child) { display: grid; gap: var(--space-2); }
/* Paliers de la Supervision TMA : la pile (A45) sur quatre étages. */
.pile-haut { margin-inline: 2.75rem; animation-delay: 0.85s; }
.pile-4 .pile-suivant { margin-inline: 4rem; }
.pile-texte { font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 40rem) { .pile-haut { margin-inline: var(--space-4); } .pile-4 .pile-suivant { margin-inline: var(--space-6); } }

/* ----- Visuels d'en-tête ----- */
/* Un document qui se remplit : lignes, puis coches. Aussi pour l'inventaire, le tableau de
   bord et la demande de validation. */
.doc, .inv, .tb { display: grid; gap: var(--space-4); }
.doc-tete { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.doc-tete .icone { width: 1.5rem; height: 1.5rem; }
.doc-tete strong { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.25; }
.doc-badge { margin-left: auto; padding: 0.15rem 0.65rem; border-radius: 999px; background: var(--accent); color: var(--ink-on-accent); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.doc-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.doc-lignes li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--accent-text) 4%, var(--fond)); font-size: var(--text-sm); animation: doc-ligne 0.6s var(--courbe) both; }
.doc-lignes li > .icone:first-child { width: 1.5rem; height: 1.5rem; }
.doc-lignes li > .icone:last-child { width: 1.5rem; height: 1.5rem; padding: 3px; border-radius: 50%; background: var(--accent); color: var(--ink-on-accent); animation: doc-coche 0.4s var(--courbe) both; }
.doc-lignes li:nth-child(1) { animation-delay: 0.4s; } .doc-lignes li:nth-child(1) > .icone:last-child { animation-delay: 0.8s; }
.doc-lignes li:nth-child(2) { animation-delay: 0.7s; } .doc-lignes li:nth-child(2) > .icone:last-child { animation-delay: 1.1s; }
.doc-lignes li:nth-child(3) { animation-delay: 1s; } .doc-lignes li:nth-child(3) > .icone:last-child { animation-delay: 1.4s; }
.doc-lignes li:nth-child(4) { animation-delay: 1.3s; } .doc-lignes li:nth-child(4) > .icone:last-child { animation-delay: 1.7s; }
.doc-lignes li:nth-child(5) { animation-delay: 1.6s; } .doc-lignes li:nth-child(5) > .icone:last-child { animation-delay: 2s; }
@keyframes doc-ligne { from { opacity: 0; transform: translateY(8px); } }
@keyframes doc-coche { from { opacity: 0; transform: scale(0.4); } }

/* Une chaîne d'étapes : des nœuds reliés, un point qui va de l'un à l'autre. */
.chaine { list-style: none; margin: 0; padding: var(--space-4) 0; display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr) 3rem minmax(0, 1fr); align-items: start; }
.chaine-4 { grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr); }
.chaine-noeud { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.chaine-noeud > .icone { width: 4rem; height: 4rem; padding: 1rem; border: 2px solid var(--accent-text); border-radius: 50%; background: var(--fond); animation: chaine-noeud 4.5s infinite; }
.chaine-noeud:last-child > .icone { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.chaine-noeud strong { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.25; }
.chaine-noeud span { font-size: var(--text-sm); color: var(--muted); }
.chaine-trajet { padding-top: calc(2rem - 1px); }
.chaine-trajet .trajet::before { animation: chaine-trajet 4.5s ease-in-out infinite; }
.chaine-trajet:nth-child(4) .trajet::before { animation-delay: 1.1s; }
.chaine-trajet:nth-child(6) .trajet::before { animation-delay: 2.2s; }
.chaine-noeud:nth-child(3) > .icone { animation-delay: 1s; }
.chaine-noeud:nth-child(5) > .icone { animation-delay: 2.1s; }
.chaine-noeud:nth-child(7) > .icone { animation-delay: 3.2s; }
@keyframes chaine-trajet { 0% { left: 0; opacity: 0; } 4%, 18% { opacity: 1; } 22% { left: calc(100% - 10px); opacity: 0; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes chaine-noeud { 0%, 26%, 100% { transform: none; } 4% { transform: none; } 12% { transform: scale(1.1); } }
@media (max-width: 30rem) {
  .chaine, .chaine-4 { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .chaine-trajet { padding: 0; }
  .chaine-trajet .trajet { width: 2px; height: 1.75rem; }
  .chaine-trajet .trajet::after { top: auto; bottom: 0; right: 50%; transform: translateX(50%) rotate(135deg); }
  .chaine-trajet .trajet::before { left: 50%; margin: 0 0 0 -4px; animation-name: chaine-trajet-v; }
}
@keyframes chaine-trajet-v { 0% { top: 0; opacity: 0; } 4%, 18% { opacity: 1; } 22% { top: calc(100% - 10px); opacity: 0; } 100% { top: calc(100% - 10px); opacity: 0; } }

/* Agent de processus : le cas courant va jusqu'au résultat, le cas particulier passe par une
   personne. Matrice de l'Audit métiers : les processus se placent, le retenu s'allume. */
.fv-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fv-lien { fill: none; stroke: color-mix(in srgb, var(--accent-text) 45%, var(--fond)); stroke-width: 2; }
.fv-lien-exception, .fv-lien-retour { stroke: color-mix(in srgb, var(--fg) 40%, var(--fond)); stroke-dasharray: 5 6; }
.fv-noeud { fill: var(--fond); stroke: var(--accent-text); stroke-width: 2; }
.fv-noeud-fin { fill: var(--accent); stroke: var(--accent); }
.fv-noeud-humain { stroke: var(--fg); }
.fv-glyphe { color: var(--accent-text); }
.fv-fin .fv-glyphe { color: var(--ink-on-accent); }
.fv-humain .fv-glyphe { color: var(--fg); }
.fv-signe { font-family: var(--font-display); font-size: 26px; font-weight: 700; fill: var(--accent-text); }
.fv-texte { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; fill: var(--muted); }
.fv-texte-humain { fill: var(--fg); }
.fv-n { transform-box: fill-box; transform-origin: center; animation: or-apparait 0.6s var(--courbe) both; }
.fv-n:nth-of-type(2) { animation-delay: 0.15s; } .fv-n:nth-of-type(3) { animation-delay: 0.3s; } .fv-n:nth-of-type(4) { animation-delay: 0.45s; }
.fv-n:nth-of-type(5) { animation-delay: 0.6s; } .fv-n:nth-of-type(6) { animation-delay: 0.75s; }
.fv-jeton { fill: none; stroke: var(--accent-text); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0.1 200; opacity: 0; animation: fv-jeton 7s linear 1s infinite; }
.fv-jeton-2 { stroke: var(--fg); animation-delay: 4.5s; }
.fv-humain { animation: or-apparait 0.6s var(--courbe) 0.75s both, fv-humain 7s ease-in-out 4.5s infinite; }
@keyframes fv-jeton { 0% { stroke-dashoffset: 0; opacity: 0; } 4% { opacity: 1; } 46% { opacity: 1; } 50%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes fv-humain { 0%, 20%, 34%, 100% { transform: none; } 27% { transform: scale(1.08); } }
.fm-zone { fill: color-mix(in srgb, var(--accent-text) 7%, var(--fond)); stroke: color-mix(in srgb, var(--accent-text) 35%, var(--fond)); stroke-dasharray: 5 5; }
.fm-axe, .fm-pointe { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fm-disque { fill: var(--fond); stroke: var(--accent-text); stroke-width: 2; }
.fm-retenu .fm-disque { fill: var(--accent); stroke: var(--accent); }
.fm-retenu .fm-nom { fill: var(--fg); font-weight: 700; }
.fm-point { transform-box: fill-box; transform-origin: center; animation: or-apparait 0.6s var(--courbe) both; }
.fm-point-2 { animation-delay: 0.15s; } .fm-point-3 { animation-delay: 0.3s; } .fm-point-4 { animation-delay: 0.45s; }
.fm-point-5 { animation-delay: 0.6s; } .fm-point-6 { animation-delay: 0.75s; }
.fm-point-1 { animation-delay: 1s; }
.fm-onde { fill: none; stroke: var(--accent-text); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: or-onde 2.4s ease-out 1.8s infinite; }
.fm-etiquette { fill: var(--accent-text); font-weight: 700; animation: cv-fondu 0.5s ease 1.4s both; }
/* Sur téléphone, le dessin rapetisse : ses textes grossissent d'autant pour rester lisibles. */
@media (max-width: 40rem) { .fv-texte { font-size: 15px; letter-spacing: 0.03em; } }

/* Agents métiers : un domaine, sa connaissance, ses processus confiés à des agents. */
.dv { display: grid; gap: var(--space-4); padding: var(--space-4); border: 2px solid var(--accent-text); border-radius: var(--radius-card); background: color-mix(in srgb, var(--accent-wash) 60%, var(--fond)); }
.dv-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.dv-nom { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.dv-nom .icone { width: 1.25rem; height: 1.25rem; }
.dv-savoir { padding: var(--space-2) var(--space-4); border-radius: 999px; background: var(--accent); color: var(--ink-on-accent); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; text-align: center; }
.dv-voies { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.dv-voie { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: center; gap: 0.35rem var(--space-4); padding: 0.4rem var(--space-4); border: 1px solid var(--border); border-radius: 12px; background: var(--fond); animation: doc-ligne 0.6s var(--courbe) both; }
.dv-voie:nth-child(1) { animation-delay: 0.4s; } .dv-voie:nth-child(2) { animation-delay: 0.6s; } .dv-voie:nth-child(3) { animation-delay: 0.8s; } .dv-voie:nth-child(4) { animation-delay: 1s; } .dv-voie:nth-child(5) { animation-delay: 1.2s; }
.dv-agent { grid-row: span 2; }
.dv-agent .icone { width: 2.25rem; height: 2.25rem; padding: 0.4rem; border: 2px solid var(--accent-text); border-radius: 10px; }
.dv-voie-nom { font-size: var(--text-sm); font-weight: 700; }
.dv-flux { position: relative; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--accent-text) 18%, var(--fond)); overflow: hidden; }
.dv-flux::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 4px; background: var(--accent-text); animation: dv-flux 2.4s ease-in-out infinite; }
.dv-voie:nth-child(2) .dv-flux::before { animation-delay: 0.6s; } .dv-voie:nth-child(3) .dv-flux::before { animation-delay: 1.2s; }
.dv-voie:nth-child(4) .dv-flux::before { animation-delay: 1.8s; } .dv-voie:nth-child(5) .dv-flux::before { animation-delay: 0.3s; }
@keyframes dv-flux { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* Audit des usages IA : un balayage ligne à ligne ; les usages non déclarés ressortent. */
.inv-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.inv-lignes li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: 10px; font-size: var(--text-sm); animation: inv-balayage 6s infinite; }
.inv-lignes .icone { width: 1.25rem; height: 1.25rem; }
.inv-etat { padding: 0.1rem 0.55rem; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.inv-cache .inv-etat { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); animation: inv-trouve 6s infinite; }
.inv-lignes li:nth-child(2), .inv-lignes li:nth-child(2) .inv-etat { animation-delay: 0.6s; }
.inv-lignes li:nth-child(3), .inv-lignes li:nth-child(3) .inv-etat { animation-delay: 1.2s; }
.inv-lignes li:nth-child(4), .inv-lignes li:nth-child(4) .inv-etat { animation-delay: 1.8s; }
.inv-lignes li:nth-child(5), .inv-lignes li:nth-child(5) .inv-etat { animation-delay: 2.4s; }
@keyframes inv-balayage { 0%, 12%, 100% { border-color: var(--border); background: transparent; } 3%, 9% { border-color: var(--accent-text); background: var(--accent-wash); } }
@keyframes inv-trouve { 0%, 4%, 14%, 100% { transform: none; } 9% { transform: scale(1.15); } }

/* Supervision TMA : le pouls de ce qui est en service, et ce que la supervision fait. */
.tb-voyant { width: 0.7rem; height: 0.7rem; flex: none; border-radius: 50%; background: var(--accent-text); animation: sq-pouls 2s ease-in-out infinite; }
.tb-pouls { display: block; width: 100%; height: 4.5rem; }
.tb-ligne { fill: none; stroke: var(--accent-text); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; animation: tb-trace 3.6s linear infinite; }
@keyframes tb-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -100; } }

/* Gouvernance : une demande de validation ; le bouton est pressé, l'action part. */
.val { display: grid; gap: var(--space-2); padding: var(--space-6); border: 1px solid var(--accent-text); border-radius: 14px; background: var(--fond); }
.val-tete { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.val-tete .icone { width: 1.25rem; height: 1.25rem; }
.val-tete strong { font-weight: 400; }
.val-objet { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.25; }
.val-detail { font-size: var(--text-sm); color: var(--muted); }
.val-actions { display: flex; gap: var(--space-2); padding-top: var(--space-2); }
.val-bouton { padding: 0.45rem 1.1rem; border-radius: 8px; background: var(--accent); color: var(--ink-on-accent); font-size: var(--text-sm); font-weight: 700; animation: val-clic 7s infinite; }
.val-bouton-2 { background: transparent; border: 1px solid var(--border); color: var(--muted); font-weight: 400; animation: none; }
.val-etat { position: relative; display: grid; padding-top: var(--space-4); margin-top: var(--space-2); border-top: 1px solid var(--border); font-size: var(--text-sm); }
.val-attente, .val-fait { grid-area: 1 / 1; display: flex; align-items: center; gap: var(--space-2); }
.val-etat .icone { width: 1.25rem; height: 1.25rem; }
.val-attente { color: var(--muted); animation: val-attente 7s infinite; }
.val-attente .icone { color: var(--fg); }
.val-fait { color: var(--accent-text); font-weight: 700; opacity: 0; animation: val-fait 7s infinite; }
@keyframes val-clic { 0%, 44%, 52%, 100% { transform: none; } 48% { transform: scale(0.92); } }
@keyframes val-attente { 0%, 48% { opacity: 1; } 52%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes val-fait { 0%, 50% { opacity: 0; } 54%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* AI Act : la transparence — l'IA se présente, le contenu généré est signalé. */
.tr { display: grid; gap: var(--space-4); }
.tr-bulle { max-width: 88%; padding: var(--space-2) var(--space-4); border-radius: 14px; font-size: var(--text-sm); animation: doc-ligne 0.6s var(--courbe) both; }
.tr-bulle-client { justify-self: end; border-bottom-right-radius: 4px; background: color-mix(in srgb, var(--fg) 8%, var(--fond)); animation-delay: 0.3s; }
.tr-bulle-ia { justify-self: start; display: grid; gap: var(--space-1); border: 1px solid color-mix(in srgb, var(--accent-text) 35%, var(--border)); border-bottom-left-radius: 4px; background: var(--accent-wash); animation-delay: 1s; }
.tr-mention { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-text); }
.tr-mention .icone { width: 1rem; height: 1rem; }
.tr-contenu { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-2); border: 1px solid var(--border); border-radius: 14px; animation: doc-ligne 0.6s var(--courbe) 1.7s both; }
.tr-image { display: grid; place-items: center; height: 4.5rem; border-radius: 10px; background: var(--accent-wash); }
.tr-image .icone { width: 2rem; height: 2rem; }
.tr-contenu > div { display: grid; gap: var(--space-1); }
.tr-contenu strong { font-size: var(--text-sm); }

/* ---------- Touches de violet dans les visuels (charte V7.2) ----------
   Le violet marque ce qui touche à la décision et au cœur du système : le Cerveau entreprise, la
   validation humaine, l'offre ou le résultat retenus. Le bleu reste la couleur dominante. Depuis la
   V7.3 (décision du dirigeant du 2026-11-09, A219), le dégradé signature n'habille plus que les
   formes sans texte mises en avant (barres, icônes, points) ; les pastilles, étiquettes et blocs qui
   portent un texte gardent l'accent plein de leur règle de base. */
/* Accueil : le cœur du Cerveau entreprise, l'agent qui lève la main, la validation. */
.c-noyau, .c-onde { stroke: var(--violet); }
.c-cerveau { fill: var(--violet-text); }
.c-coeur, .c-signal-2, .c-signal-4, .c-signal-6, .c-signal-8, .c-signal-clair { fill: var(--violet); }
.sq-a5 .sq-forme, .sq-a5 .sq-trait, .sq-bras-trait, .sq-lien, .sq-toast-fond { stroke: var(--violet); }
.sq-a5 .sq-oeil, .sq-a5 .sq-antenne, .sq-main, .sq-alerte, .sq-toast-icone, .sq-bouton { fill: var(--violet); }
.etapes-choix li:nth-child(even) .etape-num { border-color: var(--violet); color: var(--violet-text); }
.a-confier .barre, .graphe-cle { background: var(--degrade); }
.or-n1 .or-noeud, .or-onde, .or-signal-1 { stroke: var(--violet); }
.or-n1 .or-glyphe { color: var(--violet); }
.pi-coche-fond, .piste-validation .pi-jeton { fill: var(--violet); }
.jauges .jauge:nth-child(2) .jauge-valeur { stroke: color-mix(in srgb, var(--accent-text) 45%, var(--violet)); }
.jauges .jauge:nth-child(3) .jauge-valeur { stroke: var(--violet); }
/* Page Offres : la dernière marche, le point qui avance, les curseurs, le paiement au résultat. */
.marche-3 .marche-barre { background: color-mix(in srgb, #5a2df0 60%, var(--surface)); }
.marche-4 .marche-barre { background: var(--degrade); }
.ligne-parcours::after { background: var(--violet); }
.curseur-piste::before, .jalon-resultat .jalon-barre { background: var(--degrade); }
/* Cerveau entreprise : le cœur, ce qui s'y branche, le socle, les remèdes. */
.cv-coeur { stroke: var(--violet); }
.cv-nom { fill: var(--violet-text); }
.cv-satellite { fill: var(--violet); }
.cv-signal-entree { stroke: var(--violet); }
.noyau-coeur { fill: var(--violet); }
/* Le socle du Cerveau entreprise porte un titre et un texte : l'accent plein de sa règle de base (V7.3). */
.perte-apres .icone { background: var(--accent) var(--degrade); }
/* Pages d'offre et Maîtrise : icône et barre mises en avant (le processus retenu, la mesure après).
   Les pastilles, badges et boutons à texte (.doc-badge, .lieu-etat-inclus, .puce-inclus,
   .inv-cache .inv-etat, .val-bouton, .dv-savoir) gardent l'accent plein de leur règle de base (V7.3). */
.chaine-noeud:last-child > .icone, .mesure-apres { background: var(--accent) var(--degrade); border-color: transparent; }
.mesure-prepare .mesure-apres { background: transparent; border-color: var(--violet); }
.fv-jeton-2 { stroke: var(--violet); }
.fm-retenu .fm-disque { fill: var(--violet); stroke: var(--violet); }
.fm-onde { stroke: var(--violet); }
.fm-etiquette { fill: var(--violet-text); }
.tb-voyant { background: var(--violet); }
.tuile-puce { background: color-mix(in srgb, var(--violet) 12%, var(--surface)); color: var(--violet-text); }

/* ---------- Répertoire Agents IA ---------- */
.repertoire-outils { display: grid; gap: var(--space-4); }
/* Deux filtres en cascade : domaine, puis rôle (A22). */
.filtre { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: flex-start; }
.filtre-champ { display: grid; gap: var(--space-1); flex: 1 1 16rem; max-width: 24rem; }
.filtre label { font-weight: 700; }
.filtre select {
  width: 100%; min-height: 48px; padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4);
  border: 1px solid var(--muted); border-radius: var(--radius-card); background: var(--surface); color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-md); appearance: none;
}
.filtre select:disabled { opacity: 0.55; cursor: not-allowed; }
.filtre-aide { font-size: var(--text-xs); color: var(--muted); }
.filtre-etat { flex-basis: 100%; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.filtre[hidden] { display: none; }
/* Icônes des domaines et des rôles (A42) : en traits, couleur d'accent. */
.icone { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--accent-text); }
.domaine-tete h3 { display: flex; align-items: center; gap: var(--space-2); }
.domaine-tete h3 .icone { width: 1.75rem; height: 1.75rem; }
/* Le titre d'un rôle s'aligne sur sa première ligne : le tiret de l'arbre y arrive. */
.role h4 { display: flex; align-items: flex-start; gap: var(--space-2); line-height: 1.5rem; }
.role h4 .icone { width: 1.35rem; height: 1.35rem; margin-top: 0.075rem; }

/* Arborescence tracée dans le répertoire (A42), d'après le schéma du dirigeant : sous l'icône
   d'un domaine, un trait vertical relie ses rôles ; sous l'icône d'un rôle, un trait relie
   ses processus. Chaque élément reçoit un tiret ; le trait s'arrête au dernier (« └ »), un
   cache de la couleur du fond effaçant ce qui dépasse.
   Une branche porte son retrait (--retrait) et l'axe de son trait (--axe, le centre de
   l'icône du dessus). */
.branche { --depart: -1.25rem; --retrait: 2.75rem; --axe: 0.875rem; position: relative; display: grid; gap: var(--space-2); padding-left: var(--retrait); }
.role > .branche { --depart: -0.3rem; --retrait: 1.85rem; --axe: 0.675rem; }
.branche::before { content: ""; position: absolute; left: calc(var(--axe) - 1px); top: var(--depart); bottom: 0; border-left: 2px solid var(--accent-text); }
.branche > .role { position: relative; margin-top: var(--space-6); }
.branche > .encadre { margin-top: var(--space-2); }
.branche > .liste-processus > li { position: relative; }
/* Les tirets : vers l'icône d'un rôle (un écart avant l'icône), vers la fenêtre d'un processus. */
.branche > .role::before, .branche > .liste-processus > li::before {
  content: ""; position: absolute; left: calc(var(--axe) - var(--retrait)); border-top: 2px solid var(--accent-text);
}
.branche > .role::before { top: calc(0.75rem - 1px); width: calc(var(--retrait) - var(--axe) - 6px); }
.branche > .liste-processus > li::before { top: calc(1.875rem - 1px); width: calc(var(--retrait) - var(--axe)); }
/* Le trait s'arrête au tiret du dernier rôle affiché, ou du dernier processus. */
.branche > .role.dernier::after, .branche > .liste-processus > li:last-child::after {
  content: ""; position: absolute; left: calc(var(--axe) - var(--retrait) - 3px); bottom: 0; width: 8px; background: var(--fond);
}
.branche > .role.dernier::after { top: calc(0.75rem + 1px); }
.branche > .liste-processus > li:last-child::after { top: calc(1.875rem + 1px); }
@media (max-width: 40rem) {
  .branche { --retrait: 2.25rem; }
  .role > .branche { --retrait: 1.85rem; }
}
.domaine { display: grid; gap: var(--space-6); padding-top: var(--space-8); border-top: 2px solid var(--fg); }
.domaine[hidden] { display: none; }
.domaine-tete { display: grid; gap: var(--space-2); max-width: var(--largeur-texte); }
.domaine-tete h3 { font-size: var(--text-xl); }
/* Accroche et chapô du domaine : sous son titre, dans la branche de l'arbre (A42). */
.domaine > .branche > .accroche { font-style: italic; max-width: var(--largeur-texte); }
.domaine > .branche > .chapo-domaine { color: var(--muted); font-size: var(--text-sm); max-width: var(--largeur-texte); }
/* Pictogrammes du catalogue (A40) : en traits, couleur d'accent, une pastille pour le niveau d'agent. */
.picto { width: 2.75rem; height: 2.75rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; color: var(--accent-text); }
/* Même épaisseur de trait, en pixels, quelle que soit la taille du dessin. */
.picto :is(path, rect, circle) { vector-effect: non-scaling-stroke; }
.picto .plein { fill: currentColor; stroke: none; }
/* Organigrammes : liaisons fines, éléments du bas d'un trait plus léger que l'agent du haut. */
.picto .liaison { stroke-width: 1px; }
.picto .subordonne { stroke-width: 1.4px; }
.role { display: grid; gap: var(--space-2); }
.role h4 { font-size: var(--text-lg); }
.role .accroche { font-style: italic; color: var(--muted); font-size: var(--text-sm); max-width: var(--largeur-texte); }

/* Processus repliés (A37) : chaque processus dans une fenêtre teintée d'accent, le nom seul ;
   le détail et l'exemple s'ouvrent au clic. Un intitulé « Processus » ouvre chaque liste.
   Le TOP cas d'usage (A38) reprend la même forme, avec son rang et son domaine. */
.liste-processus-titre { margin-top: var(--space-2); }
.liste-processus { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.processus {
  background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent-text) 22%, var(--border));
  border-radius: var(--radius-card); transition: border-color var(--duree) ease;
}
.processus:hover, .processus[open] { border-color: color-mix(in srgb, var(--accent-text) 55%, var(--border)); }
/* Rang (TOP) | nom, et domaine dessous (TOP) | « + » : le signe reste sur la ligne du nom. */
.processus > summary {
  cursor: pointer; list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; row-gap: var(--space-1); padding: var(--space-4) var(--space-6); font-weight: 700;
}
.processus > summary::-webkit-details-marker { display: none; }
.processus > summary::after { content: "+"; grid-column: 3; grid-row: 1; padding-left: var(--space-4); font-family: var(--font-mono); font-weight: 400; color: var(--accent-text); }
.processus-nom, .processus-etiquette { grid-column: 2; }
.processus[open] > summary::after { content: "−"; }
.processus > summary:hover .processus-nom { color: var(--accent-text); }
.processus-rang { grid-column: 1; margin-right: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.processus-etiquette { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--muted); white-space: nowrap; }
.processus-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-4) var(--space-8); margin: 0; padding: 0 var(--space-6) var(--space-6); font-size: var(--text-sm); }
.processus-detail dt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--space-1); }
.processus-detail dd { margin: 0; }
/* L'exemple de cas d'usage : une carte claire dans la fenêtre teintée, sous le détail. */
.processus-exemple { grid-column: 1 / -1; padding: var(--space-4) var(--space-6); background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent-text) 28%, var(--border)); border-radius: var(--radius-card); }
.processus-detail .processus-exemple dt { color: var(--accent-text); }
/* Exemples de cas d'usage, étape par étape (2026-10-07, A91) : à la place de l'exemple de cas
   d'usage, les cartes du schéma de la page Agent de processus (.emb-proc), puis la légende des
   signes ; seules les pastilles s'animent (plus bas). */
.processus-enchainements { display: grid; gap: var(--space-2); padding: 0 var(--space-6) var(--space-6); }
.processus-enchainements-titre { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-text); }
.processus-enchainements .emb-proc { padding: var(--space-3, 0.75rem) var(--space-4) var(--space-4); }
.processus-enchainements .emb-memo { margin: var(--space-1) 0 0; }
/* La situation de départ de l'exemple, dans l'en-tête de sa fenêtre, en texte courant. */
.emb-situation { font-size: var(--text-sm); line-height: 1.5; color: var(--fg); }
.emb-tete strong + .emb-situation { margin-top: 2px; }
/* Plusieurs exemples : un bouton par exemple (les boutons du schéma, .emb-choix), un seul exemple
   affiché ; tous occupent la même place, à la hauteur du plus long, pour que rien ne saute dessous. */
.ench-choix .emb-choix legend { float: none; margin: 0 0 var(--space-2); padding: 0; color: var(--accent-text); }
.ench-choix .emb-processus { grid-template-areas: "exemple"; }
.ench-choix .emb-proc { grid-area: exemple; visibility: hidden; }
.ench-choix:has(input[value="1"]:checked) .emb-proc:nth-child(1),
.ench-choix:has(input[value="2"]:checked) .emb-proc:nth-child(2),
.ench-choix:has(input[value="3"]:checked) .emb-proc:nth-child(3) { visibility: visible; }
/* Le nom d'un exemple est sur son bouton : dans la fenêtre, il ne sert qu'au repli sans :has, qui
   montre tous les exemples à la suite, sans boutons (la légende du groupe reste). */
@supports selector(:has(*)) {
  .ench-choix .emb-tete strong { display: none; }
}
@supports not selector(:has(*)) {
  .ench-choix .emb-choix-liste { display: none; }
  .ench-choix .emb-proc { grid-area: auto; visibility: visible; }
}
/* La fenêtre de l'exemple porte un marqueur violet fixe à gauche, sans animation (demande du
   dirigeant, 2026-10-07 : catalogue seulement). Seules les tâches s'animent, à l'horloge du schéma
   de la page Agent de processus (DESIGN.md § 7, « Animer un schéma » : cycle de 4 s) : chaque
   pastille se soulève à son tour, à 0,3 s d'écart (anneau bleu pour une tâche, violet pour une
   décision ou une validation), puis un temps de repos. Seul l'exemple affiché s'anime : au
   changement de bouton, le nouveau repart du début. Arrêt 40 s après l'ouverture du volet ou le
   choix de l'exemple (assets/js/animations.js). */
.processus-enchainements .emb-taches { padding-left: 10px; }
.processus-enchainements .emb-proc::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; box-shadow: inset 4px 0 0 var(--violet); pointer-events: none; }
:is(.processus-enchainements:not(.ench-choix) .emb-proc,
  .ench-choix:has(input[value="1"]:checked) .emb-proc:nth-child(1),
  .ench-choix:has(input[value="2"]:checked) .emb-proc:nth-child(2),
  .ench-choix:has(input[value="3"]:checked) .emb-proc:nth-child(3)) .emb-tache { animation: emb-flux-4 4s var(--pas, 0.3s) infinite; }
/* Réouverture d'un volet : animations.js retire puis remet l'animation (classe anim-raz), qui repart du début. */
.processus-enchainements.anim-raz .emb-tache { animation: none !important; }
/* Le pas de chaque pastille passe par une variable : la règle ci-dessus, plus spécifique, l'emporterait sur un délai posé à part. */
.processus-enchainements .emb-taches > :nth-child(2) { --pas: 0.6s; }
.processus-enchainements .emb-taches > :nth-child(3) { --pas: 0.9s; }
.processus-enchainements .emb-taches > :nth-child(4) { --pas: 1.2s; }
.processus-enchainements .emb-taches > :nth-child(5) { --pas: 1.5s; }
.processus-enchainements .emb-taches > :nth-child(6) { --pas: 1.8s; }
.processus-enchainements .emb-taches > :nth-child(7) { --pas: 2.1s; }
.processus-enchainements .emb-taches > :nth-child(8) { --pas: 2.4s; }
/* TOP cas d'usage : le domaine et le rôle du chantier, en deux petites fenêtres-liens (A40). */
.processus-reperes { list-style: none; margin: 0; padding: 0 var(--space-6) var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.repere {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  font-size: var(--text-sm); font-weight: 700; color: var(--fg); text-decoration: none;
  transition: border-color var(--duree) ease, color var(--duree) ease;
}
.repere:hover { border-color: var(--accent-text); color: var(--accent-text); }
.repere .picto { width: 1.25rem; height: 1.25rem; stroke-width: 1.5px; }
.repere .icone { width: 1.1rem; height: 1.1rem; }
@media (max-width: 40rem) {
  .processus > summary { padding-inline: var(--space-4); }
  .processus-detail { grid-template-columns: 1fr; padding-inline: var(--space-4); }
  .processus-exemple { padding-inline: var(--space-4); }
  .processus-reperes { padding-inline: var(--space-4); }
  .processus-enchainements { padding-inline: var(--space-4); }
  .processus-enchainements .emb-proc { padding: var(--space-3, 0.75rem); }
  .processus-enchainements .emb-compte { white-space: normal; }
}
/* Le TOP cas d'usage ouvre le répertoire : un filet d'accent le distingue des domaines. */
.domaine-top { border-top-color: var(--accent-text); }

/* Replis (secteurs, questions) */
.replis { display: grid; gap: var(--space-2); }
.replis > details { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.replis > details > summary {
  cursor: pointer; list-style: none; padding: var(--space-4) var(--space-6);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
  display: flex; justify-content: space-between; gap: var(--space-4); align-items: center;
}
.replis > details > summary::-webkit-details-marker { display: none; }
.replis > details > summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent-text); }
.replis > details[open] > summary::after { content: "−"; }
.replis-contenu { padding: 0 var(--space-6) var(--space-6); display: grid; gap: var(--space-4); }

/* ---------- Bande de marque et appel final ----------
   Moments de marque (DESIGN.md § 1 et § 7) : l'élément porte data-theme="dark", donc les
   jetons du thème sombre. Sur un site affiché en sombre, il se distingue par la surface
   teintée d'accent. */
/* Leur fond : le dégradé sombre de la charte (V7.2), du bleu nuit au violet nuit ; --fond reste la
   teinte de base, pour les mélanges des visuels posés dessus. */
main > .section.bande-marque, .appel-final-bloc { --fond: var(--bg); background: var(--fond) var(--degrade-sombre); color: var(--fg); }
:root[data-theme="dark"] :is(.bande-marque, .appel-final-bloc) { --fond: var(--accent-wash); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] :is(.bande-marque, .appel-final-bloc) { --fond: var(--accent-wash); }
}
.bande-marque .chiffres li { border-top-color: color-mix(in srgb, var(--accent-text) 55%, var(--border)); }

.appel-final { background: var(--bg); }
.appel-final > .wrap { padding-block: var(--space-16); }
.appel-final-bloc {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); align-items: center;
  padding: var(--space-12);
  border: 1px solid var(--border); border-radius: var(--radius-card);
}
.appel-final h2 { font-size: clamp(var(--text-xl), 3.4vw, 2.625rem); }
.appel-final-texte p { color: var(--muted); }
.appel-final-texte { display: grid; gap: var(--space-4); }
.appel-final-actions { display: grid; gap: var(--space-4); justify-items: start; }
@media (max-width: 48rem) {
  .appel-final-bloc { grid-template-columns: 1fr; padding: var(--space-8) var(--space-6); }
}

/* ---------- Formulaires ---------- */
.formulaire { display: grid; gap: var(--space-8); max-width: var(--largeur-texte); }
.formulaire fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--space-6); }
.formulaire legend { padding: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: var(--leading-tight); margin-bottom: var(--space-2); }
.etape-intro { color: var(--muted); }
.champ { display: grid; gap: var(--space-2); }
.champ label, .groupe-choix legend, .champ-titre { font-weight: 700; font-family: var(--font-body); font-size: var(--text-md); }
.groupe-choix legend { font-size: var(--text-md); margin-bottom: var(--space-2); }
.facultatif { font-weight: 400; color: var(--muted); font-size: var(--text-sm); }
.obligatoire { color: var(--accent-text); }
.aide { font-size: var(--text-sm); color: var(--muted); }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"], .formulaire select, .formulaire textarea {
  width: 100%; min-height: 48px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--muted); border-radius: var(--radius-card);
  background: var(--surface); color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.4;
}
.formulaire textarea { min-height: 8rem; resize: vertical; padding-block: var(--space-4); }
.formulaire select { appearance: none; background-image: none; padding-right: var(--space-8); }
.select { position: relative; }
.select::after { content: ""; position: absolute; right: var(--space-4); top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--fg); border-bottom: 2px solid var(--fg); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.formulaire input:focus-visible, .formulaire select:focus-visible, .formulaire textarea:focus-visible { outline: var(--focus-width) solid var(--accent-text); outline-offset: var(--focus-offset); border-color: var(--accent-text); }
.formulaire [aria-invalid="true"] { border-color: var(--accent-text); border-width: 2px; }
.message-erreur { font-size: var(--text-sm); font-weight: 700; color: var(--accent-text); }
.message-erreur:empty { display: none; }
.message-erreur::before { content: "À corriger : "; }
:lang(en) .message-erreur::before { content: "Please fix: "; }
.groupe-choix { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-2); }
.choix { display: grid; gap: var(--space-2); }
.choix-ligne { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.choix label {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-2) var(--space-4); min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface);
  font-weight: 400; cursor: pointer;
}
.choix label:hover { border-color: var(--accent-text); }
.choix label:has(input:checked) { border-color: var(--accent-text); outline: 1px solid var(--accent-text); outline-offset: -2px; }
.choix input { accent-color: var(--accent); margin: 0.3em 0 0; flex: none; width: 1.1em; height: 1.1em; }
.pot-de-miel { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire-pied { display: grid; gap: var(--space-4); }
.formulaire-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; }
.progression-barre { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progression-barre span { display: block; height: 100%; background: var(--accent-text); width: 20%; transition: width 0.2s ease; }
.alerte-envoi { padding: var(--space-4) var(--space-6); border: 2px solid var(--accent-text); border-radius: var(--radius-card); font-weight: 700; }
.alerte-envoi[hidden] { display: none; }
.confirmation { display: grid; gap: var(--space-6); max-width: var(--largeur-texte); }
.confirmation h2 { font-size: var(--text-2xl); }
.bloc-formulaire { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.bloc-formulaire aside { display: grid; gap: var(--space-6); }
/* Page Contact : l'encadré du Diagnostic flash ne touche plus la note qui le suit. */
.bloc-formulaire .encadre { margin-bottom: var(--space-6); }
/* Seule la colonne de droite reste à l'écran : l'encadré placé au-dessus du formulaire de
   contact, collé lui aussi, recouvrait les champs puis la confirmation. */
.bloc-formulaire > aside { position: sticky; top: calc(var(--hauteur-entete) + var(--space-6)); }
@media (max-width: 60rem) {
  .bloc-formulaire { grid-template-columns: 1fr; }
  .bloc-formulaire > aside { position: static; }
}

/* ---------- Blog ---------- */
.liste-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 60rem) { .liste-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .liste-articles { grid-template-columns: 1fr; } }
.carte-article { gap: var(--space-4); grid-template-rows: auto auto 1fr auto; }
.carte-article h3 { font-size: var(--text-lg); }
/* Le logo d'un article (A49) : son icône, en blanc sur le dégradé signature. */
.logo-article { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--accent) var(--degrade); color: var(--ink-on-accent); }
.logo-article svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logo-article-grand { width: 4rem; height: 4rem; border-radius: 16px; }
.logo-article-grand svg { width: 2rem; height: 2rem; }
.carte-article-tete { display: flex; align-items: center; gap: var(--space-4); }
.carte-article-tete .meta { display: grid; gap: 2px; }
.carte-article-tete .meta > * + *::before { content: none; }
.carte-article-pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.carte-article-pied time { margin-left: auto; }
.public-puce { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--violet) 12%, var(--surface)); color: var(--violet-text); font-family: var(--font-mono); font-size: var(--text-xs); }
.publics { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.carte-article[hidden] { display: none; }
/* Filtres de la grille du blog (A49) : recherche, thèmes, public, nombre d'articles. */
.filtres-blog { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.filtre-blog-titre { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.filtre-blog-recherche, .filtre-blog-groupe { display: grid; gap: var(--space-2); }
.filtre-blog-recherche input { width: 100%; max-width: 32rem; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg); color: var(--fg); font: inherit; }
.filtre-blog-recherche input:focus-visible { border-color: var(--accent-text); }
.filtre-puces { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.filtre-puces a, .filtre-puces button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--fg); font: inherit; font-size: var(--text-sm); text-decoration: none; cursor: pointer; }
.filtre-puces a:hover, .filtre-puces button:hover { border-color: var(--accent-text); color: var(--accent-text); }
/* Pastille choisie : l'accent plein, texte blanc (V7.3, décision du dirigeant du 2026-11-09, A219). */
.filtre-puces a[aria-current], .filtre-puces button[aria-pressed="true"] { border-color: transparent; background: var(--accent); color: var(--ink-on-accent); font-weight: 700; }
.filtre-puces .compte { font-family: var(--font-mono); font-size: var(--text-xs); opacity: 0.75; }
.filtre-blog-compte { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.lien-bouton { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 40rem) { .filtres-blog { padding: var(--space-4); } }
/* L'article : son logo à côté du titre, l'encadré « En bref », les questions fréquentes. */
.article-titre { display: flex; align-items: flex-start; gap: var(--space-6); }
.article-titre h1 { margin-top: 0.25rem; }
.en-bref { display: grid; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-card); background: var(--accent-wash); border-left: 3px solid var(--violet); }
.en-bref p:last-child { font-size: var(--text-md); color: var(--fg); }
.faq-article { display: grid; gap: var(--space-2); margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.faq-article h2 { margin-top: 0; }
.faq-article h3 { font-size: var(--text-md); margin-top: var(--space-4); }
@media (max-width: 40rem) { .article-titre { flex-direction: column; gap: var(--space-4); } .logo-article-grand { width: 3.25rem; height: 3.25rem; } }
.meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.meta > * + *::before { content: "·"; margin-right: var(--space-2); }
.badge-brouillon { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); padding: 0 var(--space-2); border: 1px dashed var(--muted); border-radius: var(--radius-card); color: var(--muted); }
.categories { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.categories a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); font-size: var(--text-sm); text-decoration: none; color: var(--fg); }
.categories a:hover { border-color: var(--accent-text); color: var(--accent-text); }
.categories a[aria-current="page"] { border-color: var(--accent-text); color: var(--accent-text); font-weight: 700; }
.pagination { display: flex; justify-content: space-between; gap: var(--space-4); }
.article-entete > .wrap { padding-block: var(--space-12) var(--space-8); display: grid; gap: var(--space-4); }
.article-entete h1 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 26ch; }

/* Texte long (articles, pages légales) */
.prose { max-width: var(--largeur-texte); display: grid; gap: var(--space-4); }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-8); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-4); }
.prose ul, .prose ol { display: grid; gap: var(--space-2); }
.prose blockquote { padding-left: var(--space-4); border-left: 2px solid var(--accent-text); color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
/* Tableau large d'un article sur téléphone : il défile seul, la page ne déborde pas (V2). */
@media (max-width: 40rem) { .prose table { display: block; overflow-x: auto; } }
.prose th { text-align: left; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--muted); border-bottom: 1px solid var(--muted); padding: var(--space-2) var(--space-4) var(--space-2) 0; }
.prose td { border-bottom: 1px solid var(--border); padding: var(--space-2) var(--space-4) var(--space-2) 0; vertical-align: top; }
.prose > :first-child { margin-top: 0; }
.encart-brouillon { padding: var(--space-4) var(--space-6); border: 1px dashed var(--muted); border-radius: var(--radius-card); font-size: var(--text-sm); color: var(--muted); max-width: var(--largeur-texte); }

/* ---------- Pied de page ---------- */
.pied { background: var(--bg-alt); border-top: 1px solid var(--border); margin-top: auto; }
.pied > .wrap { padding-block: var(--space-12) var(--space-6); display: grid; gap: var(--space-8); }
/* Une rangée (A144) : la marque et ses contacts, puis quatre colonnes de liens, comme le menu. */
.pied-haut { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.pied-marque { display: grid; gap: var(--space-3, 0.75rem); align-content: start; }
.pied-contact ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.pied-contact a { color: var(--fg); text-decoration: none; }
.pied-contact a:hover { color: var(--accent-text); text-decoration: underline; }
.pied-colonne h2 a { color: inherit; text-decoration: none; }
/* Un titre en lien mène à sa page : une flèche le dit (A145). Une seconde section dans une colonne : un peu d'air au-dessus. */
.pied-colonne h2 a::after { content: " →"; }
.pied-colonne ul + h2 { margin-top: var(--space-4); }
/* Une section d'un seul lien sous une liste (Cerveau entreprise, Catalogue d'agents IA ; A145) : en clair, sous un filet. */
.pied-colonne .pied-section { padding-top: var(--space-4); border-top: 1px solid var(--border); font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0; }
.pied-colonne .pied-section a { color: var(--fg); }
.pied-colonne .pied-section a:hover { color: var(--accent-text); }
.pied-colonne h2 a:hover { color: var(--accent-text); text-decoration: underline; }
.pied-marque .logo svg { height: 32px; }
.pied-signature { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.3; max-width: 28ch; }
.pied-colonne { display: grid; gap: var(--space-2); align-content: start; }
.pied-colonne h2 { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--muted); letter-spacing: 0.02em; }
.pied-colonne ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.pied-colonne a { color: var(--fg); text-decoration: none; }
.pied-colonne a:hover { color: var(--accent-text); text-decoration: underline; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted); }
.pied-bas ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.pied-bas a { color: var(--muted); }
.pied-bas a:hover { color: var(--accent-text); }
@media (max-width: 64rem) { .pied-haut { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pied-marque { grid-column: 1 / -1; } }
@media (max-width: 48rem) { .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .pied-haut { gap: var(--space-6) var(--space-4); } .pied > .wrap { padding-block: var(--space-8) var(--space-6); } }

/* ---------- Page 404 ---------- */
.introuvable > .wrap { padding-block: var(--space-16); display: grid; gap: var(--space-6); max-width: var(--largeur-texte); margin-inline: 0; }

/* ---------- Effets légers ----------
   Ouverture de l'accueil : le texte et le schéma entrent l'un après l'autre (CSS seul).
   Au défilement : assets/js/apparition.js pose .apparait sur les blocs encore sous la ligne
   de flottaison, puis .visible quand ils arrivent à l'écran — un bloc déjà visible au
   chargement n'est jamais masqué, et sans JavaScript tout reste affiché. */
@keyframes entree { from { opacity: 0; transform: translateY(14px); } }
.hero-texte > *, .hero .constellation { animation: entree 0.8s var(--courbe) both; }
.hero-texte > :nth-child(2) { animation-delay: 0.08s; }
.hero-texte > :nth-child(3) { animation-delay: 0.16s; }
.hero-texte > :nth-child(4) { animation-delay: 0.24s; }
.hero-texte > :nth-child(5) { animation-delay: 0.3s; }
.hero .constellation { animation-delay: 0.28s; }

.apparait { opacity: 0; transform: translateY(18px); transition: opacity var(--duree-apparition) var(--courbe), transform var(--duree-apparition) var(--courbe); }
.apparait.visible { opacity: 1; transform: none; }
.apparait:nth-child(2) { transition-delay: 0.07s; }
.apparait:nth-child(3) { transition-delay: 0.14s; }
.apparait:nth-child(4) { transition-delay: 0.21s; }
.apparait:nth-child(5) { transition-delay: 0.28s; }
.apparait:nth-child(n+6) { transition-delay: 0.35s; }
.apparait .section-repere::before { transform: scaleX(0); transition: transform 0.9s var(--courbe) 0.25s; }
.apparait.visible .section-repere::before { transform: none; }

/* ---------- Mouvement réduit et impression ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .apparait { opacity: 1; transform: none; }
  .apparait .section-repere::before { transform: none; }
  /* Schémas de l'accueil et du Cerveau entreprise : sans mouvement, les points et signaux qui circulent n'ont pas de
     place fixe, et les jetons des pistes resteraient au départ : on les retire. */
  .c-signal, .c-onde, .or-signal, .or-onde, .pi-jeton, .cv-signal, .cv-onde, .fv-jeton, .fm-onde { display: none; }
}
.impression-logo { display: none; }
@media print {
  .entete, .pied, .appel-final, .bandeau-preversion, .lien-evitement, .menu-mobile, .formulaire-nav { display: none !important; }
  /* Le logo en tête de chaque document imprimé (A124, 2026-10-09). */
  .impression-logo { display: block; padding: 0 var(--gutter) var(--space-6); }
  .impression-logo svg { display: block; height: 52px; width: auto; }
  .section, .bande-marque { background: none !important; color: inherit; }
  .apparait { opacity: 1 !important; transform: none !important; }
  a { color: inherit; }
  /* À l'impression, les mots d'accent, chiffres et valeurs mises en avant prennent l'accent #0441dc,
     quel que soit le thème affiché (DESIGN.md § 3, V7.3). */
  .accent, .chiffres .valeur, .offre-prix, .roi-delai, .formule-resultat strong { color: var(--accent) !important; }
}

/* ==========================================================================
   V2 du site (épic #257, 2026-10-05) — règles ajoutées page par page, après le reste de la
   feuille : elles complètent ou surchargent les règles des sections ci-dessus. Le mouvement
   réduit (animation: none !important, plus haut) s'applique aussi à elles.
   ========================================================================== */

/* ---------- V2 — Accueil ---------- */
/* Ouverture (A35, retour #249) : les agents du schéma changent de domaine toutes les 2 s.
   Trois jeux superposés (noms des agents, interlocuteurs et flux des coins), chacun visible
   2 s sur un cycle de 6 s ; les fondus se chevauchent (l'un s'efface pendant que le suivant
   apparaît : le schéma n'est jamais vide). Après cinq tours (31 s), l'animation s'arrête sur
   le premier jeu : chaque jeu finit à l'opacité qu'il a sans animation. Sans animation
   (mouvement réduit), le premier jeu seul reste affiché. */
.c-jeu { animation: c-jeu 6s linear; }
.c-jeu:not(.c-jeu-1) { opacity: 0; }
.c-jeu-1 { animation-iteration-count: 5.1667; }                          /* de 0 à 31 s */
.c-jeu-2 { animation-delay: -4s; animation-iteration-count: 5.8333; }   /* de -4 à 31 s */
.c-jeu-3 { animation-delay: -2s; animation-iteration-count: 5.5; }      /* de -2 à 31 s */
@keyframes c-jeu { 0%, 28.333% { opacity: 1; } 33.333%, 95% { opacity: 0; } 100% { opacity: 1; } }
/* Noms longs (Space Mono, chasse fixe) : le plus grand corps qui tient dans le cercle. */
.c-agent-nom-8 { font-size: 12px; letter-spacing: 0; }
.c-agent-nom-9 { font-size: 11px; letter-spacing: 0; }
.c-agent-nom-10 { font-size: 10px; letter-spacing: 0; }

/* 01 — Synergetik en une minute (#259) : la vidéo dans sa fenêtre, boîte 16:9 réservée d'avance
   (seule l'affiche se charge, lecture au clic), et à sa droite le schéma des quatre services
   (décision du dirigeant du 2026-10-05) ; sur tablette et téléphone, le schéma passe dessous. */
.video-services { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--space-8); align-items: center; }
.video-cadre { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.video-cadre video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.services-apercu { display: grid; gap: var(--space-4); }
.services-liste { --rail: 1rem; position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3, 0.75rem); }
.services-liste::before { content: ""; position: absolute; left: var(--rail); top: var(--rail); bottom: var(--rail); width: 2px; margin-left: -1px; background: color-mix(in srgb, var(--accent-text) 35%, var(--fond, var(--bg))); }
.services-liste::after { content: ""; position: absolute; left: var(--rail); top: var(--rail); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--violet); animation: service-signal 6s ease-in-out 5; }
@keyframes service-signal { 0% { top: var(--rail); opacity: 0; } 10%, 90% { opacity: 1; } 100% { top: calc(100% - var(--rail)); opacity: 0; } }
.service-etape { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3, 0.75rem); align-items: start; }
.service-signe { position: relative; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-wash); border: 1.5px solid var(--accent-text); color: var(--accent-text); }
.service-signe .icone { width: 1rem; height: 1rem; }
.service-nom { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base, 1rem); color: var(--fg); text-decoration: none; }
.service-nom:hover { color: var(--accent-text); text-decoration: underline; }
.service-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.service-etape p { margin: 0.1rem 0 0; font-size: var(--text-xs); line-height: 1.45; color: var(--muted); }
@media (max-width: 60rem) { .video-services { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .services-liste::after { display: none; } }

/* 05 — Ce qui nous distingue (#264) : quatre engagements, en grille de quatre cartes
   (deux colonnes sur tablette, une sur téléphone : .grille-4 de site.css). */
.distinctions.grille-4 h3 { text-wrap: balance; }

/* 06 — Le moment (#258) : quatre jauges. Les trois mesures passent du bleu au violet ;
   la quatrième, un objectif de l'État et non une mesure, reste distincte : arc violet pâle,
   piste en pointillé, mention « objectif » dans le cercle. Sur téléphone, chaque jauge
   se range en ligne (cercle à gauche, texte à droite) pour rester compacte. */
.jauges-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.jauges-4 .jauge:nth-child(1) .jauge-valeur { stroke: var(--accent-text); }
.jauges-4 .jauge:nth-child(2) .jauge-valeur { stroke: color-mix(in srgb, var(--accent-text) 70%, var(--violet)); }
.jauges-4 .jauge:nth-child(3) .jauge-valeur { stroke: color-mix(in srgb, var(--accent-text) 40%, var(--violet)); }
.jauges-4 .jauge-objectif .jauge-valeur { stroke: color-mix(in srgb, var(--violet) 50%, var(--fond, var(--bg))); }
.jauges-4 .jauge-objectif .jauge-fond { stroke-dasharray: 2 6; stroke-width: 4; }
.jauge-chiffre { align-content: center; }
.jauge-prefixe { display: block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.04em; color: var(--muted); }
/* « mi-2025 » / « mid-2025 » : le trait d'union reste ordinaire dans la source, sans coupure à l'affichage. */
.sans-coupure { white-space: nowrap; }
/* La source sous chaque chiffre : le nom de l'étude, en lien (demande du dirigeant, 2026-10-05). */
.jauge-source { margin-top: var(--space-2); font-size: var(--text-xs); }
.jauge-source a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.jauge-source a:hover { color: inherit; }
@media (max-width: 64rem) { .jauges-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) {
  .jauges-4 { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .jauges-4 .jauge { grid-template-columns: 6.5rem minmax(0, 1fr); justify-items: start; align-items: center; column-gap: var(--space-4); row-gap: var(--space-1); text-align: left; }
  .jauges-4 .jauge-cercle { grid-row: span 2; width: 6.5rem; height: 6.5rem; margin: 0; }
  .jauges-4 .jauge-chiffre { font-size: 1.5rem; }
  .jauges-4 .jauge-prefixe { font-size: 0.625rem; }
}

/* ---------- V2 — Page Offres ---------- */
/* Lot V2 « offres » (#257) — fusionné dans site.css avant la Pull Request.
   Page Offres (P02) : l'aiguillage dit ce que chaque offre comprend ; les unités emboîtées
   et nommées, du domaine à la tâche, et la règle de comptage ; le parcours et ses audits ;
   la famille Analyser en quatre cartes. Jetons de tokens.css uniquement ; animations
   coupées sous prefers-reduced-motion (règle générale de site.css), état final lisible. */

/* 01 — L'aiguillage : l'offre et son prix, la flèche, le besoin, puis ce qui est compris. */
.aiguillage-bloc { display: grid; gap: var(--space-2); }
.aiguillage-entetes,
.aiguillage-compris { grid-template-columns: minmax(0, 15rem) 3.5rem minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--space-6); }
.aiguillage-entetes { display: grid; padding: 0 calc(var(--space-6) + 1px); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.aiguillage-compris { align-items: center; }
.aiguillage-compris .aiguillage-offre { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-4); align-items: center; }
/* Le pictogramme de l'offre, plus grand (demande du dirigeant, 2026-10-05). */
.aiguillage-compris .aiguillage-offre .icone { grid-row: span 2; width: 2.5rem; height: 2.5rem; color: var(--accent-text); }
.aiguillage-compris .aiguillage-prix { grid-column: 2; line-height: 1.45; }
/* Sous le prix de l'Agent de processus et des Agents métiers : ce que couvre le prix de base. */
.aiguillage-note { grid-column: 2; margin-top: var(--space-1); font-size: var(--text-xs); line-height: 1.4; color: var(--muted); }
.aiguillage-compris .aiguillage-besoin { display: block; margin: 0; font-size: var(--text-md); line-height: 1.4; }
.aiguillage-ligne:nth-child(8) .aiguillage-fleche::before { animation-delay: 2.1s; }
.aig-etiquette { display: block; margin-bottom: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* Sur grand écran, les en-têtes de colonnes suffisent : les étiquettes de chaque ligne ne
   restent que pour les lecteurs d'écran. */
.aiguillage-compris .aig-etiquette { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.aig-compris { padding-left: var(--space-6); border-left: 1px solid var(--border); }
.aig-compris ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.aig-compris li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--space-2); align-items: start; font-size: var(--text-sm); line-height: 1.4; }
.aig-compris .icone { width: 1rem; height: 1rem; margin-top: 0.1rem; color: var(--accent-text); }
@media (max-width: 72rem) {
  .aiguillage-entetes { display: none; }
  .aiguillage-compris { grid-template-columns: minmax(0, 14rem) 3rem minmax(0, 1fr); row-gap: var(--space-4); }
  .aiguillage-compris .aiguillage-offre, .aiguillage-compris .aiguillage-fleche { grid-row: span 2; }
  .aiguillage-compris .aiguillage-besoin, .aig-compris { grid-column: 3; }
  .aiguillage-compris .aig-etiquette { position: static; width: auto; height: auto; margin: 0 0 var(--space-1); overflow: visible; clip: auto; white-space: normal; }
  .aig-compris { padding: var(--space-4) 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 48rem) {
  .aiguillage-compris { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
  .aiguillage-compris .aiguillage-offre, .aiguillage-compris .aiguillage-fleche { grid-row: auto; }
  .aiguillage-compris .aiguillage-besoin, .aig-compris { grid-column: 1; }
  .aiguillage-compris .aiguillage-offre { padding-left: 0; }
}

/* 01 — Les unités emboîtées et nommées : le domaine, ses processus, leurs tâches. Tour à
   tour s'allument le domaine, le premier processus, puis sa première tâche ; la légende
   (niveau-1 à 3) suit le même ordre. */
.unites { align-items: start; }
.emb { margin: 0; display: grid; gap: var(--space-2); }
.emb-domaine { display: grid; gap: var(--space-4); padding: var(--space-4); background: color-mix(in srgb, var(--accent-wash) 70%, var(--fond, var(--bg))); border: 2px solid color-mix(in srgb, var(--accent-text) 30%, var(--border)); border-radius: 18px; animation: emb-domaine 9s infinite; }
.emb-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin: 0; font-size: var(--text-sm); line-height: 1.35; }
.emb-tete strong { font-family: var(--font-display); font-size: var(--text-md); color: var(--fg); }
.emb-type { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
/* Le compte se range à droite de son en-tête, et passe à la ligne d'un bloc. */
.emb-compte { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.emb-processus { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.emb-proc { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-4); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-card); }
.emb-proc-actif { animation: emb-proc 9s infinite; }
.emb-taches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 0; }
.emb-tache { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 10px 3px 6px; font-size: var(--text-xs); line-height: 1.3; color: var(--fg); background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent-text) 45%, var(--border)); border-radius: 999px; }
/* Une flèche discrète devant chaque tâche suivante : le processus les enchaîne. Posée
   devant la tâche, elle ouvre la ligne quand les tâches passent à la ligne. */
.emb-tache + .emb-tache { margin-left: var(--space-6); }
.emb-tache + .emb-tache::before { content: "→"; position: absolute; left: calc(-1 * var(--space-6)); width: var(--space-6); text-align: center; color: var(--muted); font-size: var(--text-xs); }
.emb-point { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 2px solid var(--accent-text); background: var(--surface); }
.emb-tache-active { animation: emb-tache 9s infinite; }
.emb-tache-active .emb-point { animation: emb-point 9s infinite; }
.emb-legende { margin: 0; }
@keyframes emb-domaine { 0%, 3%, 33%, 100% { border-color: color-mix(in srgb, var(--accent-text) 30%, var(--border)); } 6%, 30% { border-color: var(--accent-text); } }
@keyframes emb-proc { 0%, 33%, 66%, 100% { border-color: var(--border); background: var(--surface); } 36%, 63% { border-color: var(--accent-text); background: var(--accent-wash); } }
@keyframes emb-tache { 0%, 66%, 99%, 100% { border-color: color-mix(in srgb, var(--accent-text) 45%, var(--border)); } 69%, 96% { border-color: var(--accent-text); } }
@keyframes emb-point { 0%, 66%, 99%, 100% { background: var(--surface); } 69%, 96% { background: var(--accent); } }
/* La légende, du domaine à la tâche, s'allume en même temps que le dessin. */
.niveau-1 { animation: un-legende-1 9s infinite; } .niveau-2 { animation: un-legende-2 9s infinite; } .niveau-3 { animation: un-legende-3 9s infinite; }
.unites-legende .unite-marque-tache { width: 0.9rem; height: 0.9rem; }
.unite-liens { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.unite-liens .lien-suite { font-size: var(--text-sm); }
/* La règle de comptage, sous les unités. */
.regle-comptage { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-4); align-items: start; margin: 0; padding: var(--space-4) var(--space-6); font-size: var(--text-sm); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent-text); border-radius: var(--radius-card); }
.regle-comptage .icone { width: 1.5rem; height: 1.5rem; color: var(--accent-text); }
.regle-comptage strong { color: var(--fg); }
@media (max-width: 40rem) {
  .emb-domaine { padding: var(--space-2); }
  .emb-proc { padding: var(--space-2); }
  .regle-comptage { padding: var(--space-4); }
}
/* Pour compter, en petit schéma (A117, page Audits IA) : trois équations sur une rangée. La
   tâche, un carré cerclé d'accent (en pointillé quand elle est facultative) ; le processus, une
   gélule teintée qui enchaîne des tâches ; le domaine métier, un cadre violet qui réunit des
   processus. Sur tablette et téléphone, une équation par ligne. */
.comptage { display: grid; gap: var(--space-4); margin: var(--space-8) 0 0; }
.comptage-regles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.comptage-regle { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.cpt-cote { display: grid; justify-items: center; gap: var(--space-2); min-width: 0; text-align: center; }
.cpt-dessin { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 2.5rem; }
.cpt-texte { font-size: var(--text-sm); line-height: 1.3; }
span.cpt-texte { color: var(--muted); }
.cpt-egal { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 2.5rem; color: var(--violet-text); }
.cpt-tache { flex: none; width: 10px; height: 10px; border: 2px solid var(--accent-text); border-radius: 3px; }
.cpt-facultatif { border-style: dashed; opacity: 0.55; }
.cpt-processus { display: inline-flex; flex: none; gap: 3px; padding: 5px 7px; background: var(--accent-wash); border: 2px solid var(--accent-text); border-radius: 999px; }
.cpt-processus .cpt-tache { width: 7px; height: 7px; border-width: 1.5px; border-radius: 2px; }
.cpt-domaine { display: inline-flex; gap: 4px; padding: 5px; background: color-mix(in srgb, var(--violet) 10%, transparent); border: 2px solid var(--violet); border-radius: 12px; }
.cpt-plus { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 60rem) { .comptage-regles { grid-template-columns: minmax(0, 1fr); } }

/* 02 — Le parcours : les trois audits sous « Comprendre d'abord », chacun avec ce qu'il
   prépare ; la condition d'entrée de l'Agent de processus et des Agents métiers. */
.voie-audits > a { margin-top: var(--space-1); }
.voie-audits > a:first-of-type { margin-top: 0; }
.arret-condition { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--border); font-size: var(--text-xs); font-weight: 700; line-height: 1.4; color: var(--accent-text); }

/* 03 — Les familles : Analyser en trois colonnes (cinq cartes), Développer en quatre. Un prix trop long
   pour sa carte passe sur deux lignes équilibrées (« À partir de » / « 12 900 € HT ») plutôt
   que de laisser « HT » seul. En quatre colonnes, l'en-tête de carte a la hauteur de deux lignes
   d'unité : les noms d'offre restent alignés dans la rangée. */
.famille-cartes.grille-4 .offre-prix { font-size: var(--text-lg); }
@media (min-width: 72.01rem) { .famille-cartes.grille-4 .offre-tete { min-height: 3.75rem; } }
.famille .offre-prix { text-wrap: balance; }

/* Audits IA, section 03 (A116) : le Rendez-vous de cadrage, gratuit, en bandeau d'entrée avec son
   bouton ; les quatre audits dessous, sur une rangée (deux sur tablette, une sur téléphone). */
.au-gamme { display: grid; gap: var(--space-4); }
/* Sur une rangée, les cinq lignes des cartes (en-tête, nom, prix, inclus, options) s'alignent d'une carte à l'autre. */
@media (min-width: 72.01rem) { .au-cartes .offre-carte { grid-row: span 5; grid-template-rows: subgrid; } }
/* Audits IA (A202) : la situation, précédée de sa mention, sous le nom ; six lignes partagées par les quatre cartes. */
@media (min-width: 72.01rem) { .au-cartes .offre-carte-besoin { grid-row: span 6; } }
.offre-mention { display: block; margin-bottom: 2px; }
.au-entree { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2) var(--space-6); }
.au-entree-texte { display: grid; gap: 2px; min-width: 0; }
.au-entree h3 { font-size: var(--text-xl); line-height: 1.15; }
.au-entree h3 a { color: inherit; text-decoration: none; }
.au-entree h3 a:hover { color: var(--accent-text); }
.au-entree .offre-prix { margin: 0; font-size: var(--text-md); font-weight: 600; }
@media (max-width: 40rem) {
  .au-entree { grid-template-columns: auto minmax(0, 1fr); }
  .au-entree .offre-prix { grid-column: 2; }
  .au-entree .btn { grid-column: 1 / -1; justify-self: start; }
}

/* 04 — Les curseurs : la piste reste à la même hauteur dans une rangée, même quand une borne
   tient sur deux lignes. */
.curseurs .curseur { align-content: start; }
@media (max-width: 72rem) and (min-width: 60.01rem) {
  .famille-cartes.grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- V2 — Cerveau entreprise ---------- */
/* Lot V2 « cerveau » (#257) — fusionné dans site.css avant la Pull Request.
   Page Cerveau entreprise : retouches de la V2 (retours #249, grille #264). */

/* En-tête — le branchement : des agents numérotés, chacun avec un domaine d'exemple qui
   change toutes les 2,5 s, en fondu ; trois domaines superposés par agent, un seul visible.
   La rotation fait quatre tours (30 s), puis le premier domaine revient et reste : un contenu
   qui se met à jour seul ne tourne pas sans fin (WCAG 2.2.2). Le premier domaine s'arrête à
   4,04 tours, soit au point de ses images clés où il est de nouveau visible ; les deux autres
   finissent effacés. Sans animation (prefers-reduced-motion, site.css), le premier domaine
   reste affiché.
   Les domaines et les rôles des personnes sont les deux messages du schéma (#249, D4) : ils
   sont écrits plus grand que dans site.css, qui est surchargé ici. */
.cv-domaine { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; fill: var(--accent-text); opacity: 0; animation: cv-domaine 7.5s linear 4 both; }
.cv-domaine-1 { opacity: 1; animation-iteration-count: 4.04; }
.cv-domaine-2 { animation-delay: 2.5s; }
.cv-domaine-3 { animation-delay: 5s; }
@keyframes cv-domaine {
  0% { opacity: 0; }
  4%, 30% { opacity: 1; }
  34%, 100% { opacity: 0; }
}
.cv-bloc-role { font-size: 11px; letter-spacing: 0.04em; }
.vitrine-legende .vitrine-etiquette { margin-bottom: var(--space-1); }
@media (max-width: 40rem) {
  .cv-domaine { font-size: 14.5px; letter-spacing: 0.01em; }
  .cv-bloc-role { font-size: 13px; letter-spacing: 0.02em; }
}

/* ---------- V2 — Pages d'offre « Analyser » ---------- */
/* Lot V2 « fiches » (#257) — fusionné dans site.css avant la Pull Request.
   Pages d'offre « Analyser » (#264) : le cahier de cadrage de l'Audit de processus, l'inventaire
   des règles métier et le domaine de la matrice de l'Audit métiers (_includes/fiches.njk).
   Mêmes principes que les autres visuels d'en-tête (site.css, « Pages d'offre et Maîtrise —
   visuels ») : animations lancées à l'apparition, coupées si l'appareil réduit les animations
   (règle générale de site.css) ; à l'arrêt, chaque visuel montre son état final. */

/* Un visuel encore sous la ligne de flottaison attend d'être à l'écran pour s'animer. */
.apparait:not(.visible) :is(.cahier, .regles) *,
.apparait:not(.visible):is(.cahier, .regles) * { animation-play-state: paused; }

/* ----- Audit de processus : le cahier de cadrage ----- */
.cahier-processus { display: flex; align-items: center; gap: var(--space-2); margin-top: calc(-1 * var(--space-2)); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.cahier-processus .icone { width: 1.25rem; height: 1.25rem; flex: none; }
.cahier-lignes { margin: 0; display: grid; gap: var(--space-1); }
.cahier-ligne { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center; padding: 0.375rem var(--space-4); border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--accent-text) 4%, var(--fond)); animation: doc-ligne 0.6s var(--courbe) both; }
.cahier-ligne dt { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.cahier-ligne dt .icone { width: 1.25rem; height: 1.25rem; flex: none; color: var(--accent-text); }
.cahier-ligne dd { margin: 0; display: grid; gap: 0.4rem; font-size: var(--text-sm); line-height: 1.4; }
.cahier-ligne:nth-child(1) { animation-delay: 0.35s; } .cahier-ligne:nth-child(2) { animation-delay: 0.6s; }
.cahier-ligne:nth-child(3) { animation-delay: 0.85s; } .cahier-ligne:nth-child(4) { animation-delay: 1.1s; }
.cahier-ligne:nth-child(5) { animation-delay: 1.35s; } .cahier-ligne:nth-child(6) { animation-delay: 1.6s; }
/* Le fil du processus : des tâches (ronds) et des décisions (losanges violets), reliées. */
.cahier-trace { display: flex; align-items: center; gap: 0.55rem; }
.cahier-trace > span { position: relative; flex: none; }
.cahier-trace > span + span::before { content: ""; position: absolute; top: 50%; right: 100%; width: 0.55rem; height: 2px; margin-top: -1px; background: color-mix(in srgb, var(--accent-text) 45%, var(--fond)); }
.ct-tache { width: 0.7rem; height: 0.7rem; border: 2px solid var(--accent-text); border-radius: 50%; }
.ct-decision { width: 0.7rem; height: 0.7rem; }
.ct-decision::after { content: ""; position: absolute; inset: 0.08rem; border: 2px solid var(--violet); transform: rotate(45deg); }
/* La conclusion : le prix ferme de la suite, coché en dernier. */
.cahier-conclusion { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 2px solid var(--violet); border-radius: 12px; background: color-mix(in srgb, var(--violet) 8%, var(--fond)); font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; line-height: 1.25; animation: doc-ligne 0.6s var(--courbe) 1.9s both; }
.cahier-conclusion > .icone:first-child { width: 1.5rem; height: 1.5rem; color: var(--violet-text); }
.cahier-conclusion > .icone:last-child { width: 1.5rem; height: 1.5rem; padding: 3px; border-radius: 50%; background: var(--accent) var(--degrade); color: var(--ink-on-accent); animation: doc-coche 0.4s var(--courbe) 2.4s both; }
@media (max-width: 30rem) {
  .cahier-ligne { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; padding: var(--space-2) var(--space-4) var(--space-4); }
  .cahier-conclusion { font-size: var(--text-sm); gap: var(--space-2); }
}

/* ----- Audit métiers : l'inventaire des règles métier ----- */
.regles-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.regle { display: grid; grid-template-columns: minmax(0, 1fr) 8.25rem 6rem; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: 10px; font-size: var(--text-sm); line-height: 1.4; animation: regle-balayage 7.5s infinite; }
.regle-nature, .regle-etat { justify-self: start; padding: 0.1rem 0.55rem; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.regle-pret .regle-etat { background: var(--accent); border-color: transparent; color: var(--ink-on-accent); }
.regle-ecrire .regle-etat { border-color: var(--accent-text); color: var(--accent-text); }
.regle-trancher .regle-etat { border-color: var(--violet); color: var(--violet-text); border-style: dashed; }
.regle:nth-child(2) { animation-delay: 0.75s; } .regle:nth-child(3) { animation-delay: 1.5s; }
.regle:nth-child(4) { animation-delay: 2.25s; } .regle:nth-child(5) { animation-delay: 3s; }
@keyframes regle-balayage { 0%, 10%, 100% { border-color: var(--border); background: transparent; } 2%, 8% { border-color: var(--accent-text); background: var(--accent-wash); } }
@media (max-width: 40rem) {
  .regle { grid-template-columns: auto auto minmax(0, 1fr); }
  .regle-texte { grid-column: 1 / -1; }
}
/* Le texte et l'inventaire, côte à côte : le visuel prend un peu plus de place ; un large
   espace les détache des cartes des étapes (A152). */
.duo-regles { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); margin-top: var(--space-12); }
@media (max-width: 60rem) { .duo-regles { grid-template-columns: minmax(0, 1fr); } }

/* ----- Audit métiers : le domaine dont les processus sont classés ----- */
.fm-domaine { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.fm-domaine .icone { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---------- V2 — Pages d'offre « Développer » et « Perdurer » ---------- */
/* Lot V2 « realisations » (#257) — fusionné dans site.css avant la Pull Request.
   Pages d'offre « Développer » et « Perdurer » (#264) : Automatisation de tâches, Agent de processus,
   Agents métiers, Supervision TMA. Visuels de _includes/fiches-realisations.njk — les cas avec ou
   sans audit (classes cas-audit… et etape-voie, jamais .chemins ni
   .chemin, qui sont à la page Cerveau entreprise dans site.css), les deux processus et leur
   socle métier — et la note du prix de base. Mêmes principes que les autres visuels (site.css, « Pages d'offre et
   Maîtrise — visuels ») : jetons de tokens.css seulement, animations lancées à l'apparition,
   coupées si l'appareil réduit les animations (règle générale de site.css) ; à l'arrêt,
   chaque visuel montre son état final. */

/* Un visuel encore sous la ligne de flottaison attend d'être à l'écran pour s'animer. */
.apparait:not(.visible):is(.cas-audit-liste, .dp-comparaison, .obtenez-metiers, .audit-avant) *,
.apparait:not(.visible) :is(.cas-audit-liste, .dp, .etapes-voie) * { animation-play-state: paused; }

/* ----- Avec ou sans audit : un cas par carte, et la voie qu'il prend ----- */
.cas-audit-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.cas-audit { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-2); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.cas-audit-accent { border-color: color-mix(in srgb, var(--violet) 55%, var(--border)); background: color-mix(in srgb, var(--violet) 5%, var(--surface)); }
.cas-audit-tete { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.cas-audit-tete .icone { width: 2.75rem; height: 2.75rem; padding: 0.65rem; border-radius: 50%; background: var(--accent-wash); }
.cas-audit-accent .cas-audit-tete .icone { color: var(--violet-text); background: color-mix(in srgb, var(--violet) 12%, var(--surface)); }
.cas-audit-badge { margin-left: auto; padding: 0.15rem 0.65rem; border-radius: 999px; border: 1px solid var(--accent-text); color: var(--accent-text); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.cas-audit-accent .cas-audit-badge { border-color: transparent; background: var(--accent); color: var(--ink-on-accent); }
.cas-audit h3 { font-size: var(--text-md); line-height: 1.3; }
.cas-audit > p { font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 60rem) { .cas-audit-liste { grid-template-columns: minmax(0, 1fr); } }

/* La voie : des étapes qui se suivent, de haut en bas, reliées par un fil. */
.etapes-voie { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-4) 0 0; display: grid; gap: var(--space-4); border-top: 1px solid var(--border); }
.etape-voie { position: relative; display: grid; gap: 2px; padding-left: calc(1rem + var(--space-2)); font-size: var(--text-sm); line-height: 1.35; animation: etape-voie 0.5s var(--courbe) both; }
.etape-voie::before { content: ""; position: absolute; left: 0; top: 0.2rem; width: 0.75rem; height: 0.75rem; border: 2px solid var(--accent-text); border-radius: 50%; background: var(--surface); }
.etape-voie:last-child::before { border-color: transparent; background: var(--accent) var(--degrade); }
.etape-voie:not(:last-child)::after { content: ""; position: absolute; left: calc(0.375rem - 1px); top: 1.05rem; bottom: calc(-1 * var(--space-4) + 0.2rem); width: 2px; background: color-mix(in srgb, var(--accent-text) 40%, var(--surface)); }
.etape-voie strong, .etape-voie a { font-family: var(--font-display); font-weight: 700; }
.etape-voie span { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--muted); }
.etape-voie:nth-child(2) { animation-delay: 0.2s; }
.etape-voie:nth-child(3) { animation-delay: 0.4s; }
.cas-audit-accent .etape-voie:first-child::before { border-color: var(--violet); }
@keyframes etape-voie { from { opacity: 0; transform: translateY(6px); } }

/* Sur la page Agents métiers : l'Audit métiers d'abord, en encadré, avec son chemin à plat. */
.audit-avant { display: grid; gap: var(--space-2); }
.audit-avant .etapes-voie { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-2); border-top-color: color-mix(in srgb, var(--accent-text) 25%, var(--border)); }
.audit-avant .etape-voie { background: transparent; }
.audit-avant .etape-voie:not(:last-child)::before { background: var(--accent-wash); }
.audit-avant .etape-voie:not(:last-child)::after { display: none; }
@media (max-width: 48rem) {
  .audit-avant .etapes-voie { grid-template-columns: minmax(0, 1fr); }
  .audit-avant .etape-voie:not(:last-child)::after { display: block; }
}

/* ----- Deux processus et leur socle métier ----- */
.dp-comparaison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: stretch; margin-bottom: var(--space-8); }
.obtenez-metiers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-8); align-items: start; margin-bottom: var(--space-4); }
@media (max-width: 60rem) { .dp-comparaison, .obtenez-metiers { grid-template-columns: minmax(0, 1fr); } }
.obtenez-metiers .livrables-grille { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.dp .doc-tete { flex-wrap: wrap; }
.dp .doc-tete strong { flex: 1 1 12rem; min-width: 0; }
.dp-processus { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); align-items: stretch; }
.dp-fil { align-self: center; }
.dp-p { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-2); text-align: center; font-size: var(--text-sm); font-weight: 700; line-height: 1.3; background: var(--fond); border: 1.5px solid var(--border); border-radius: var(--radius-card); }
.dp-p .icone { width: 1.75rem; height: 1.75rem; color: var(--accent-text); }
/* Sans lien : deux processus séparés, un fil coupé. Avec lien : un fil plein, un signal qui va et vient. */
.dp-fil { position: relative; height: 2px; margin: 0 var(--space-2); background: repeating-linear-gradient(90deg, var(--border) 0 4px, transparent 4px 9px); }
.dp-relies .dp-fil { background: var(--accent-text); }
.dp-relies .dp-p { border-color: color-mix(in srgb, var(--accent-text) 55%, var(--border)); }
.dp-signal { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--violet); opacity: 0; }
.dp-relies .dp-signal { animation: dp-signal 2.6s ease-in-out 0.6s infinite; }
@keyframes dp-signal { 0% { left: 0; opacity: 0; } 12%, 38% { opacity: 1; } 50% { left: calc(100% - 10px); opacity: 0; } 62%, 88% { opacity: 1; } 100% { left: 0; opacity: 0; } }
.dp-lien { font-size: var(--text-sm); color: var(--muted); }
.dp-relies .dp-lien { color: var(--fg); }
.dp-socle { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-card); background: color-mix(in srgb, var(--accent-text) 6%, var(--fond)); border: 1.5px solid color-mix(in srgb, var(--accent-text) 45%, var(--border)); }
.dp-socle-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.dp-socle-liste li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-2); align-items: start; font-size: var(--text-sm); line-height: 1.4; animation: etape-voie 0.5s var(--courbe) both; }
.dp-socle-liste .icone { width: 1.25rem; height: 1.25rem; color: var(--accent-text); }
/* Le Cerveau entreprise : le noyau, jamais un cerveau dessiné (BR-11.08). */
.dp-socle-liste .noyau { width: 1.25rem; height: 1.25rem; }
.dp-socle-liste li:last-child .icone { color: var(--violet-text); }
.dp-socle-liste li:nth-child(2) { animation-delay: 0.15s; } .dp-socle-liste li:nth-child(3) { animation-delay: 0.3s; }
.dp-socle-liste li:nth-child(4) { animation-delay: 0.45s; } .dp-socle-liste li:nth-child(5) { animation-delay: 0.6s; }
@media (max-width: 40rem) {
  .dp-processus { grid-template-columns: minmax(0, 1fr) 1.75rem minmax(0, 1fr); }
  .dp-fil { margin: 0 var(--space-1); }
  .dp .doc-tete { flex-wrap: wrap; }
  .dp .doc-badge { margin-left: 0; }
}

/* ---------- V2 — Catalogue d'agents IA ---------- */
/* Agent sur mesure (#249) : une entrée du répertoire présentée comme un domaine, en fin de
   répertoire, hors des volumes. Même tracé d'arborescence que les domaines (A42) ; un filet
   d'accent en pointillés le distingue des domaines du catalogue. */
.domaine-sur-mesure { border-top: 2px dashed var(--accent-text); }
/* Les trois situations : un titre à icône, comme un rôle, et son texte aligné sur le titre. */
.cas-sur-mesure .cas-texte {
  padding-left: calc(1.35rem + var(--space-2)); max-width: calc(var(--largeur-texte) + 1.35rem + var(--space-2));
  font-size: var(--text-sm); color: var(--muted);
}
/* Comment nous le construisons : trois étapes en cartes cliquables, chacune avec son délai
   (« Gratuit » pour le Rendez-vous de cadrage ; plus de prix depuis A219). */
.etapes-sur-mesure {
  list-style: none; margin: var(--space-2) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4);
}
.etapes-sur-mesure .carte { grid-template-rows: auto auto 1fr auto; }
/* Sous-grille : les quatre rangées (repère, titre, texte, délai) sont partagées par les trois
   cartes, si bien que la ligne du délai et son filet restent alignés même quand un texte
   allonge une carte. Sans sous-grille, la règle ci-dessus reste. */
.etapes-sur-mesure .carte { grid-row: span 4; grid-template-rows: subgrid; }
.etapes-sur-mesure h5 {
  margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-lg);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance;
}
.etapes-sur-mesure h5 a { color: var(--fg); text-decoration: none; }
.etapes-sur-mesure .carte-lien:hover h5 a { color: var(--accent-text); }
.etapes-sur-mesure .carte-lien:has(a.etendu:focus-visible) { border-color: var(--accent-text); }
.etape-prix {
  margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border);
  font-size: var(--text-sm); font-weight: 700;
}
/* Renvoi vers les Agents métiers, sous les trois étapes. */
.renvoi-sur-mesure { margin-top: var(--space-2); max-width: var(--largeur-texte); color: var(--muted); }
@media (max-width: 60rem) {
  .etapes-sur-mesure { grid-template-columns: 1fr; }
  .etapes-sur-mesure .carte { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 40rem) {
  .cas-sur-mesure .cas-texte { padding-left: 0; }
}

/* ---------- V2 — Pages Maîtrise ---------- */
/* Souveraineté § 02 (#264) : chaque offre en en-tête de ligne ; l'option Niveau 2 — France
   nommée, sans montant depuis A219 (décision du dirigeant du 2026-11-09). */
.tableau-niveaux tbody th {
  vertical-align: top; padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  font-family: inherit; font-size: inherit; font-weight: 700; color: var(--fg);
}
@media (max-width: 45rem) {
  .tableau-niveaux tbody th { display: block; padding: 0; border: 0; }
  .tableau-niveaux tbody th::before { content: attr(data-label); display: block; margin-bottom: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--muted); }
  .tableau-niveaux td { justify-items: start; }
}

/* ---------- V2 — Qui sommes-nous ---------- */
/* ---------- Qui sommes-nous — visuels (V2, #257, retour #249) ----------
   Page Qui sommes-nous, dans l'esprit de l'accueil (A43) et des pages refondues (A45, A46) :
   la mise en phase en en-tête, la synergétique et sa transposition, notre propre Cerveau
   entreprise et nos agents, les fondateurs (monogrammes, aucun portrait), nos principes.
   Couleurs : jetons seulement ; violet en touches sur ce qui touche au cœur (les objectifs,
   le noyau). Animations lancées à l'apparition, coupées si l'appareil réduit les
   animations : chaque dessin montre alors son état final, les éléments en phase et reliés. */
.apparait:not(.visible) :is(.qs-equipe, .qs-correspondances) *,
.apparait:not(.visible) :is(.qs-equipe, .qs-correspondances) *::before,
.apparait:not(.visible) :is(.qs-equipe, .qs-correspondances) *::after { animation-play-state: paused; }

/* En-tête : la mise en phase. Les éléments, d'abord dispersés (--d), se mettent en phase et
   se relient à vos objectifs ; des signaux parcourent alors les liens. Cycle de 9 s, quatre fois,
   puis arrêt sur l'état en phase (60 % du cycle) : rien ne bouge au-delà de ~36 s (WCAG 2.2.2). */
.qs-phase-svg { display: block; width: 100%; height: auto; }
.qs-lien { fill: none; stroke: color-mix(in srgb, var(--accent-text) 45%, var(--fond)); stroke-width: 1.5; stroke-dasharray: 5 6; animation: qs-flux 1.8s linear 18, qs-liens 9s ease-in-out 3.6 forwards; }
.qs-signal { fill: none; stroke: var(--accent-text); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 4 100; stroke-dashoffset: 4; opacity: 0; animation: qs-signal 9s linear 4; }
.qs-signal-2 { animation-delay: 0.12s; } .qs-signal-3 { animation-delay: 0.24s; } .qs-signal-4 { animation-delay: 0.36s; }
.qs-signal-5 { animation-delay: 0.48s; } .qs-signal-6 { animation-delay: 0.6s; } .qs-signal-7 { animation-delay: 0.72s; }
.qs-el { transform-box: fill-box; transform-origin: center; animation: qs-disperse 9s var(--courbe) 3.6 forwards; }
.qs-el-1 { --d: translate(46px, 10px) rotate(-12deg); }
.qs-el-2 { --d: translate(8px, -8px) rotate(9deg); }
.qs-el-3 { --d: translate(70px, 14px) rotate(16deg); }
.qs-el-4 { --d: translate(22px, -6px) rotate(-18deg); }
.qs-el-5 { --d: translate(84px, 6px) rotate(7deg); }
.qs-el-6 { --d: translate(14px, 12px) rotate(-8deg); }
.qs-el-7 { --d: translate(56px, -12px) rotate(13deg); }
.qs-el-cadre { fill: var(--fond); stroke: var(--accent-text); stroke-width: 1.5; animation: qs-cadre 9s ease-in-out 3.6 forwards; }
.qs-el-point { fill: var(--accent-text); }
.qs-el-texte { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; fill: var(--fg); }
.qs-cible { fill: color-mix(in srgb, var(--violet) 9%, var(--fond)); stroke: var(--violet); stroke-width: 2; }
.qs-cible-coeur { fill: var(--fond); stroke: color-mix(in srgb, var(--violet) 45%, var(--fond)); stroke-width: 1.5; }
.qs-cible-texte { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; fill: var(--violet-text); }
.qs-cible-onde { fill: none; stroke: var(--violet); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: qs-onde 9s ease-out 4; }
@keyframes qs-flux { to { stroke-dashoffset: -22; } }
@keyframes qs-disperse { 0%, 12% { transform: var(--d); } 38%, 88% { transform: none; } 100% { transform: var(--d); } }
@keyframes qs-cadre { 0%, 12%, 100% { stroke: color-mix(in srgb, var(--fg) 28%, var(--fond)); } 38%, 88% { stroke: var(--accent-text); } }
@keyframes qs-liens { 0%, 28%, 96%, 100% { opacity: 0; } 42%, 86% { opacity: 1; } }
@keyframes qs-signal {
  0%, 45% { stroke-dashoffset: 4; opacity: 0; }
  46% { stroke-dashoffset: 4; opacity: 1; }
  58% { stroke-dashoffset: -100; opacity: 1; }
  59%, 65% { stroke-dashoffset: -100; opacity: 0; }
  65.5% { stroke-dashoffset: 4; opacity: 0; }
  66% { stroke-dashoffset: 4; opacity: 1; }
  78% { stroke-dashoffset: -100; opacity: 1; }
  79%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes qs-onde { 0%, 52% { opacity: 0; transform: scale(1); } 53% { opacity: 0.6; transform: scale(1); } 68% { opacity: 0; transform: scale(1.3); } 72%, 100% { opacity: 0; } }

/* 01 — La synergétique, et chez vous : une ligne par notion, reliées par un trajet. */
.qs-recit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-12); align-items: start; }
.qs-correspondances { display: grid; gap: var(--space-2); }
.qs-corr-entete, .qs-corr { display: grid; grid-template-columns: minmax(0, 0.9fr) 3rem minmax(0, 1.4fr); gap: var(--space-4); align-items: center; }
.qs-corr-entete { padding-inline: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.qs-corr-entete span:last-child { color: var(--accent-text); }
.qs-corr-liste { margin: 0; display: grid; gap: var(--space-2); }
.qs-corr { --fond: var(--surface); padding: var(--space-4); background: var(--fond); border: 1px solid var(--border); border-radius: var(--radius-card); }
.qs-corr dt { display: flex; gap: var(--space-2); align-items: baseline; font-family: var(--font-display); font-weight: 700; line-height: 1.3; }
.qs-corr-numero { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--violet-text); }
/* Le <dd> porte le trajet et le texte : il couvre les deux dernières colonnes et reprend
   leur tracé (sous-grille ; à défaut, des colonnes équivalentes). */
.qs-corr dd { grid-column: 2 / -1; display: grid; grid-template-columns: 3rem minmax(0, 1fr); grid-template-columns: subgrid; align-items: center; margin: 0; font-size: var(--text-sm); color: var(--muted); }
.qs-corr:nth-child(2) .trajet::before { animation-delay: 0.5s; }
.qs-corr:nth-child(3) .trajet::before { animation-delay: 1s; }
.qs-corr:nth-child(4) .trajet::before { animation-delay: 1.5s; }
.qs-corr:nth-child(5) .trajet::before { animation-delay: 2s; }

/* 02 — Une agence IA native : le texte et ses trois preuves, puis notre Cerveau entreprise et
   nos agents. */
.qs-native { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.qs-native-texte { display: grid; gap: var(--space-6); }
.qs-preuves { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.qs-preuves li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.qs-preuves .icone { width: 2.75rem; height: 2.75rem; padding: 0.65rem; border-radius: 50%; background: var(--accent-wash); color: var(--accent-text); }
.qs-preuves div { display: grid; gap: var(--space-1); }
.qs-preuves h3 { font-size: var(--text-md); }
.qs-preuves p { font-size: var(--text-sm); color: var(--muted); }
.qs-equipe { width: 100%; max-width: 27rem; justify-self: center; }
@keyframes qs-battement { to { transform: scale(1.5); } }

/* 03 — Les fondateurs : un monogramme à la place du portrait (D9), le rôle, ce qu'il apporte. */
.qs-encadre { display: grid; gap: var(--space-2); }

/* 04 — Nos principes : cinq tuiles, l'icône en accent. */
.qs-principes .tuile > .icone:first-child { color: var(--accent-text); }
/* Trois tuiles, puis deux plus larges : chaque texte garde une ligne lisible. */
.qs-principes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.qs-principes > li { grid-column: span 2; }
.qs-principes > li:nth-child(n + 4) { grid-column: span 3; }

@media (max-width: 60rem) {
  .qs-recit, .qs-native { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .qs-principes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qs-principes > li, .qs-principes > li:nth-child(n + 4) { grid-column: auto; }
  .qs-principes > li:last-child { grid-column: 1 / -1; }
}
/* Sur téléphone : les dessins rapetissent, leurs textes grossissent d'autant ; chaque
   correspondance passe sur deux lignes, la notion puis sa traduction chez vous. */
@media (max-width: 40rem) {
  .qs-phase { padding: var(--space-4) var(--space-2); }
  .qs-phase .vitrine-legende { padding-inline: var(--space-2); }
  .qs-el-texte { font-size: 13.5px; }
  .qs-cible-texte { font-size: 14px; }
  .qs-equipe { padding: var(--space-4) var(--space-2); }
  .qs-equipe .vitrine-legende { padding-inline: var(--space-2); }
  .qs-corr-entete { display: flex; gap: var(--space-2); }
  .qs-corr-entete span:nth-child(2)::before { content: "→"; }
  .qs-corr { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .qs-corr .qs-corr-trajet { display: none; }
  .qs-corr dd { grid-column: auto; display: block; padding-left: var(--space-4); border-left: 2px solid var(--accent-text); }
  .qs-principes { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .qs-signal, .qs-cible-onde, .qs-eq-onde { display: none; }
}

/* ---------- V2 — Notes de prix de base (D7) ---------- */
/* Sous l'escalier de la page Offres : ce que recouvrent les prix « à partir de ». */
.marches-note { margin-top: var(--space-4); font-size: var(--text-xs); line-height: 1.4; color: var(--muted); }
/* Dans les cartes « Et après » des pages d'offre, la note suit le prix, sur une colonne. */
.aiguillage-ligne:not(.aiguillage-compris) .aiguillage-note { grid-column: auto; margin-top: 0; }

/* ---------- V2 — Tableaux des articles sur téléphone ---------- */
/* Un tableau large défile seul, sans élargir la page. */
.prose { min-width: 0; }
@media (max-width: 48rem) {
  .prose table { display: block; overflow-x: auto; }
}

/* ---------- V2 — Qui sommes-nous : l'organisation de nos agents (décision du 2026-10-05) ---------- */
.qs-equipe { width: 100%; max-width: 30rem; justify-self: center; display: grid; gap: var(--space-4); }
.qs-eq-tete { display: flex; align-items: center; gap: var(--space-4); }
.qs-eq-noyau-svg { width: 4.5rem; height: 4.5rem; flex: none; overflow: visible; }
.qs-eq-memoire { fill: color-mix(in srgb, var(--accent-text) 6%, var(--fond, var(--bg))); stroke: color-mix(in srgb, var(--accent-text) 55%, var(--fond, var(--bg))); stroke-width: 2; }
.qs-eq-regles { fill: color-mix(in srgb, var(--violet) 10%, var(--fond, var(--bg))); stroke: var(--violet); stroke-width: 2; }
.qs-eq-coeur { fill: var(--violet); transform-box: fill-box; transform-origin: center; animation: qs-battement 2.4s ease-in-out 12 alternate; }
.qs-eq-onde { fill: none; stroke: var(--violet); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: qs-eq-onde 3.6s ease-out 8; }
@keyframes qs-eq-onde { from { opacity: 0.5; transform: scale(1); } to { opacity: 0; transform: scale(1.3); } }
.qs-eq-titre { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--violet-text); }
.qs-eq-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.qs-eq-agent { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3, 0.75rem); border: 1.5px solid var(--accent-text); border-radius: 10px; background: var(--fond, var(--bg)); font-size: var(--text-sm); line-height: 1.3; }
.qs-eq-agent .icone { width: 1.25rem; height: 1.25rem; flex: none; color: var(--accent-text); }
.qs-eq-prep { border-style: dashed; border-color: color-mix(in srgb, var(--accent-text) 55%, var(--border)); color: var(--muted); }
.qs-eq-prep .icone { color: var(--muted); }
.qs-eq-cle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted); }
.qs-eq-cle-plein, .qs-eq-cle-prep { display: inline-block; width: 1.5rem; height: 0.75rem; border: 1.5px solid var(--accent-text); border-radius: 4px; }
.qs-eq-cle-prep { margin-left: var(--space-2); border-style: dashed; border-color: color-mix(in srgb, var(--accent-text) 55%, var(--border)); }
@media (max-width: 30rem) { .qs-eq-grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Symboles Agent métier et Agent de processus (DESIGN.md § 7, 2026-10-05) ---------- */
/* Dessinés sur 24 au lieu de 48 : même épaisseur de trait apparente que les autres pictogrammes. */
.picto.picto-agent { stroke-width: 0.9px; }

/* ---------- Page Offres, section 01 : le schéma des unités (2026-10-05) ----------
   Le schéma et sa légende à parts égales, à la même hauteur ; chaque niveau porte l'icône de
   son offre ; une décision se distingue des tâches (losange « ? »). */
@media (min-width: 60.0625rem) {
  .unites { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .unites .emb { grid-template-rows: 1fr auto; }
  .unites .emb-domaine { align-content: space-between; }
}
.emb-domaine { padding: var(--space-6); gap: var(--space-4); }
.emb-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3, 0.75rem); }
.emb-tete > div { display: grid; gap: 2px; }
.emb-tete strong { font-size: var(--text-lg, 1.25rem); line-height: 1.2; }
.emb-proc .emb-tete strong { font-size: var(--text-md); }
.emb-sens { font-size: var(--text-xs); color: var(--muted); }
.emb-compte { margin-left: 0; align-self: start; }
.emb-signe { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--accent-text); color: var(--accent-text); }
.emb-signe .icone { width: 1.5rem; height: 1.5rem; }
.emb-signe-petit { width: 2.25rem; height: 2.25rem; background: var(--accent-wash); border-width: 1px; }
.emb-signe-petit .icone { width: 1.25rem; height: 1.25rem; }
.emb-proc { padding: var(--space-3, 0.75rem) var(--space-4) var(--space-4); }
.emb-tache { font-size: var(--text-sm); padding: 4px 12px 4px 6px; }
.emb-coche { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent-wash); color: var(--accent-text); }
.emb-coche .icone { width: 0.75rem; height: 0.75rem; stroke-width: 3; }
.emb-decision { border-style: dashed; border-color: var(--violet); color: var(--fg); }
.emb-losange { position: relative; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; font-size: 0.65rem; font-weight: 700; line-height: 1; color: var(--violet-text); }
.emb-losange::before { content: ""; position: absolute; inset: 2px; transform: rotate(45deg); border: 1.5px solid var(--violet); border-radius: 2px; }
.emb-losange > span { position: relative; }
.unite-signe { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent-text) 35%, var(--border)); }
.unite-signe .icone { width: 1.6rem; height: 1.6rem; }
.unites-legende li { grid-template-columns: 3rem minmax(0, 1fr); align-items: center; }
.emb-tache-active .emb-coche { animation: emb-coche 9s infinite; }
@keyframes emb-coche { 0%, 66%, 99%, 100% { background: var(--accent-wash); color: var(--accent-text); } 69%, 96% { background: var(--accent); color: #fff; } }
@media (max-width: 40rem) {
  .emb-tete { grid-template-columns: auto minmax(0, 1fr); }
  .emb-tete .emb-compte { grid-column: 2; }
  .emb-domaine { padding: var(--space-4) var(--space-2); }
}
.emb-legende { display: grid; gap: var(--space-2); }
.emb-memo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.emb-memo .emb-tache { margin-left: 0; }
.emb-memo .emb-tache::before { content: none; }
.emb-memo-fleche { font-size: var(--text-xs); color: var(--muted); }

/* ---------- Page Offres, section 02 : le parcours en chemins (2026-10-05) ----------
   Le Diagnostic flash à gauche, puis un chemin par besoin, de l'audit éventuel à ce qui est
   mis en service ; un trait part du diagnostic et se divise vers chaque chemin. */
div.chemins { --ch-cols: 10.5rem minmax(0, 1fr) 2.25rem minmax(0, 1.1fr); --ch-ecart: var(--space-3, 0.75rem); --ch-branche: 2.5rem; display: grid; grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--ch-branche); }
.ch-etape { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); }
.ch-num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: var(--text-xs); letter-spacing: 0; }
.ch-depart { display: grid; grid-template-rows: auto 1fr; gap: var(--space-4); }
.ch-depart .ch-carte { align-self: center; position: relative; }
.ch-depart .ch-carte::after { content: ""; position: absolute; top: 50%; left: 100%; width: calc(var(--ch-branche) / 2); height: 2px; background: var(--accent-text); }
.ch-carte { display: grid; gap: 2px; align-content: center; padding: var(--space-2) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.ch-carte > a { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; line-height: 1.25; color: var(--fg); text-decoration: none; }
.ch-carte > a:hover { color: var(--accent-text); text-decoration: underline; }
.ch-carte-depart { border: 2px solid var(--accent-text); }
.ch-carte-depart .idx { margin-bottom: var(--space-1); }
.ch-note { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--border); font-size: var(--text-sm); line-height: 1.4; }
.ch-suite { display: grid; gap: var(--space-4); }
.ch-entetes { display: grid; grid-template-columns: var(--ch-cols); gap: var(--space-4); padding: 0 var(--space-4); }
.ch-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ch-ecart); }
.ch-chemin { position: relative; display: grid; grid-template-columns: var(--ch-cols); gap: var(--space-4); align-items: stretch; padding: var(--space-2) var(--space-4); background: color-mix(in srgb, var(--accent-wash) 45%, var(--fond, var(--bg))); border-radius: 18px; }
/* La branche : un trait vertical à gauche des chemins, un embranchement vers chacun. */
.ch-chemin::before { content: ""; position: absolute; left: calc(-1 * var(--ch-branche) / 2); top: calc(-1 * var(--ch-ecart) / 2); bottom: calc(-1 * var(--ch-ecart) / 2); width: 2px; margin-left: -1px; background: var(--accent-text); }
.ch-chemin:first-child::before { top: 50%; }
.ch-chemin:last-child::before { bottom: 50%; }
.ch-chemin::after { content: ""; position: absolute; top: 50%; left: calc(-1 * var(--ch-branche) / 2); width: calc(var(--ch-branche) / 2); height: 2px; margin-top: -1px; background: var(--accent-text); }
.ch-besoin { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; line-height: 1.25; }
.ch-signe { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--surface); color: var(--accent-text); }
.ch-signe .icone { width: 1.25rem; height: 1.25rem; }
.ch-sans { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); background: transparent; border-style: dashed; text-align: center; }
.ch-selon { border-style: dashed; border-color: var(--accent-text); }
.ch-condition { margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 700; line-height: 1.4; color: var(--accent-text); }
.ch-fleche { position: relative; align-self: center; height: 2px; background: var(--accent-text); }
.ch-fleche::after { content: ""; position: absolute; right: -1px; top: 50%; width: 0.6rem; height: 0.6rem; border-top: 2px solid var(--accent-text); border-right: 2px solid var(--accent-text); transform: translateY(-50%) rotate(45deg); }
.ch-cible { position: relative; border-color: var(--accent-text); }
.ch-resultat { border-color: var(--border); }
.ch-texte { font-size: var(--text-sm); line-height: 1.4; }
/* Entre deux chemins d'agents : on va plus loin si le résultat le justifie. */
.ch-monter { position: absolute; left: 0; right: 0; bottom: calc(100% + var(--space-3, 0.75rem)); height: var(--ch-ecart); display: flex; align-items: center; justify-content: center; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--violet-text); white-space: nowrap; }
.ch-monter::before { content: "↓"; font-size: var(--text-sm); }
/* Juste au-dessus du seuil du menu, la mention, plus large que sa carte, déborderait sur la marge
   où se tient l'onglet du Diagnostic flash (A159) : elle s'aligne alors sur le bord droit de la carte. */
@media (min-width: 60.0625rem) and (max-width: 70rem) { .ch-monter { justify-content: flex-end; } }
@media (max-width: 60rem) {
  div.chemins { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .ch-depart .ch-carte::after, .ch-chemin::before, .ch-chemin::after, .ch-entetes, .ch-monter { display: none; }
  .ch-liste { gap: var(--space-4); }
  .ch-chemin { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .ch-fleche { justify-self: center; width: 2px; height: 1.25rem; }
  .ch-fleche::after { top: auto; bottom: -1px; right: 50%; transform: translateX(50%) rotate(135deg); }
}

/* ---------- Page Offres, section 01 : le Cerveau entreprise et le choix du domaine (2026-10-05) ----------
   Le schéma plus large que la légende ; la légende resserrée, la règle de comptage dessous ;
   la fenêtre violette du Cerveau entreprise englobe le domaine choisi dans le petit menu. */
.unites { align-items: start; gap: var(--space-8); }
@media (min-width: 60.0625rem) {
  .unites { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
  .unites .emb { grid-template-rows: auto; }
  .unites .emb-domaine { align-content: start; }
}
.unites-cote { display: grid; gap: var(--space-4); align-content: start; }
.unites-legende { gap: 0; }
.unites-legende li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3, 0.75rem); align-items: start; padding: var(--space-2) var(--space-3, 0.75rem); }
.unites-legende li > div { gap: 2px; }
.unites-legende p { line-height: 1.45; }
.unite-signe { width: 2.5rem; height: 2.5rem; }
.unite-signe .icone { width: 1.35rem; height: 1.35rem; }
/* La fenêtre du Cerveau entreprise. */
.emb-cerveau { position: relative; display: grid; gap: var(--space-3, 0.75rem); padding: var(--space-3, 0.75rem); background: color-mix(in srgb, var(--violet) 5%, var(--surface)); border: 2px solid color-mix(in srgb, var(--violet) 35%, var(--border)); border-radius: 22px; animation: emb4-cerveau 12s infinite; }
.emb-tete-cerveau { padding: 0 var(--space-1) var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--violet) 25%, var(--border)); }
.emb-tete-cerveau .emb-type { color: var(--violet-text); }
.emb-signe-cerveau { width: 2.25rem; height: 2.25rem; border-color: var(--violet); color: var(--violet-text); }
.emb-signe-cerveau .icone { width: 1.3rem; height: 1.3rem; color: var(--violet-text); }
.emb-tete-cerveau strong { font-size: var(--text-md); }
.emb-socle { margin: 0; padding: 4px var(--space-3, 0.75rem); font-size: var(--text-xs); color: var(--muted); border: 1.5px dashed color-mix(in srgb, var(--violet) 45%, var(--border)); border-radius: 999px; }
.emb-socle strong { color: var(--violet-text); }
/* Le petit menu des domaines. */
.emb-choix { margin: 0; padding: 0; border: 0; min-width: 0; }
.emb-choix legend { float: left; margin: 0 var(--space-2) 0 0; padding: 5px 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.emb-choix-liste { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.emb-choix input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.emb-choix label { padding: 4px 12px; font-size: var(--text-xs); line-height: 1.3; color: var(--fg); background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer; }
.emb-choix label:hover { border-color: var(--accent-text); }
.emb-choix input:checked + label { color: var(--ink-on-accent); background: var(--accent); border-color: transparent; font-weight: 700; }
.emb-choix input:focus-visible + label { outline: 2px solid var(--accent-text); outline-offset: 2px; }
/* Un seul domaine visible ; les autres restent en place, invisibles (animation synchrone). */
.emb-cerveau .emb-domaine { position: absolute; left: var(--space-3, 0.75rem); right: var(--space-3, 0.75rem); top: 0; visibility: hidden; }
.emb-cerveau:has(input[value="1"]:checked) .emb-domaine[data-domaine="1"],
.emb-cerveau:has(input[value="2"]:checked) .emb-domaine[data-domaine="2"],
.emb-cerveau:has(input[value="3"]:checked) .emb-domaine[data-domaine="3"],
.emb-cerveau:has(input[value="4"]:checked) .emb-domaine[data-domaine="4"],
.emb-cerveau:has(input[value="5"]:checked) .emb-domaine[data-domaine="5"],
.emb-cerveau:has(input[value="6"]:checked) .emb-domaine[data-domaine="6"] { position: static; visibility: visible; }
@supports not selector(:has(*)) {
  .emb-choix { display: none; }
  .emb-cerveau .emb-domaine[data-domaine="1"] { position: static; visibility: visible; }
}
/* Plus compact : le domaine, ses processus et leurs tâches. */
.emb-domaine { padding: var(--space-3, 0.75rem) var(--space-4); gap: var(--space-3, 0.75rem); animation: emb4-domaine 12s infinite; }
.emb-domaine .emb-signe { width: 2.25rem; height: 2.25rem; }
.emb-domaine .emb-signe .icone { width: 1.3rem; height: 1.3rem; }
.emb-tete-domaine strong { font-size: var(--text-md); }
.emb-processus { gap: var(--space-2); }
.emb-proc { gap: 6px; padding: var(--space-2) var(--space-3, 0.75rem) var(--space-3, 0.75rem); }
.emb-signe-petit { width: 1.9rem; height: 1.9rem; }
.emb-signe-petit .icone { width: 1.05rem; height: 1.05rem; }
.emb-proc .emb-tete strong { font-size: var(--text-sm); }
.emb-proc .emb-type { font-size: 0.65rem; }
.emb-taches { gap: 6px 0; }
.emb-tache { font-size: var(--text-xs); padding: 2px 10px 2px 4px; }
.emb-proc-actif { animation: emb4-proc 12s infinite; }
.emb-tache-active { animation: emb4-tache 12s infinite; }
.emb-tache-active .emb-coche { animation: emb4-coche 12s infinite; }
.unites-legende .niveau-0 { animation: emb4-legende-0 12s infinite; }
.unites-legende .niveau-1 { animation: emb4-legende-1 12s infinite; }
.unites-legende .niveau-2 { animation: emb4-legende-2 12s infinite; }
.unites-legende .niveau-3 { animation: emb4-legende-3 12s infinite; }
@keyframes emb4-cerveau { 0%, 1%, 25%, 100% { border-color: color-mix(in srgb, var(--violet) 35%, var(--border)); } 3%, 23% { border-color: var(--violet); } }
@keyframes emb4-domaine { 0%, 25%, 50%, 100% { border-color: color-mix(in srgb, var(--accent-text) 30%, var(--border)); } 27%, 48% { border-color: var(--accent-text); } }
@keyframes emb4-proc { 0%, 50%, 75%, 100% { border-color: var(--border); background: var(--surface); } 52%, 73% { border-color: var(--accent-text); background: var(--accent-wash); } }
@keyframes emb4-tache { 0%, 75%, 99%, 100% { border-color: color-mix(in srgb, var(--accent-text) 45%, var(--border)); } 77%, 97% { border-color: var(--accent-text); } }
@keyframes emb4-coche { 0%, 75%, 99%, 100% { background: var(--accent-wash); color: var(--accent-text); } 77%, 97% { background: var(--accent); color: #fff; } }
@keyframes emb4-legende-0 { 0%, 1%, 25%, 100% { border-color: transparent; background: transparent; } 3%, 23% { border-color: var(--violet); background: var(--surface); } }
@keyframes emb4-legende-1 { 0%, 25%, 50%, 100% { border-color: transparent; background: transparent; } 27%, 48% { border-color: var(--accent-text); background: var(--surface); } }
@keyframes emb4-legende-2 { 0%, 50%, 75%, 100% { border-color: transparent; background: transparent; } 52%, 73% { border-color: var(--accent-text); background: var(--surface); } }
@keyframes emb4-legende-3 { 0%, 75%, 99%, 100% { border-color: transparent; background: transparent; } 77%, 97% { border-color: var(--accent-text); background: var(--surface); } }
.unites-legende .niveau-0 .unite-signe .icone { color: var(--violet-text); }
@media (max-width: 40rem) {
  .emb-cerveau { padding: var(--space-2); }
  .emb-cerveau .emb-domaine { left: var(--space-2); right: var(--space-2); }
  .emb-domaine { padding: var(--space-3, 0.75rem) var(--space-2); }
}

/* ---------- Page Offres, section 01 : l'aiguillage par familles (2026-10-05) ----------
   Mêmes familles et même ordre qu'en section 03, avec le même titre de famille. */
.aiguillage-bloc { gap: var(--space-4); }
.aig-famille { display: grid; gap: var(--space-2); }
.aig-famille + .aig-famille { margin-top: var(--space-2); }
.aig-famille .famille-titre { margin: 0; }
.unites .emb-legende { font-size: var(--text-sm); line-height: 1.45; color: var(--muted); }
.unites .emb-memo { margin-top: 2px; }

/* Page Offres, section 02 : l'audit facultatif ou obligatoire, dit en violet (2026-10-05). */
/* Le nom de l'audit d'abord, en grand ; la mention dessous, en petit. */
.ch-mention { margin-top: 1px; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-text); }

/* Cartes d'offre : le nom de l'offre, plus gros que son prix, pour qu'on les distingue bien
   (demande du dirigeant du 2026-10-05 ; le nom de l'offre est toujours en haut et le plus gros). */
/* Le nom nettement plus gros que le prix, qui reste en couleur mais moins appuyé : on distingue
   l'offre d'un coup d'œil (demande du dirigeant du 2026-10-10, A195 : nom de 28 px contre 22). */
.offre-carte :is(h3, h4), .famille-cartes.grille-4 .offre-carte :is(h3, h4) { font-size: var(--text-xl); line-height: 1.15; }
.offre-carte .offre-prix, .famille-cartes.grille-4 .offre-prix { font-size: var(--text-md); font-weight: 600; line-height: 1.3; }

/* « Pour qui, et quand » : le petit titre de chaque situation, plus gros que son texte (2026-10-05). */
.situation h3 { font-size: var(--text-lg); line-height: 1.25; }
.situation h3 + p { font-size: var(--text-sm); color: var(--muted); }
/* Le titre en face de l'icône, le texte dessous sur toute la largeur (2026-10-05). */
.situation:has(> h3) { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); align-items: center; }
.situation:has(> h3) > .icone { margin-bottom: 0; }
.situation:has(> h3) > p { grid-column: 1 / -1; margin-top: var(--space-2); }
.situation:has(> h3) > h3 { font-size: var(--text-md); line-height: 1.3; text-wrap: pretty; }

/* « La maîtrise, page par page » : six pages, donc trois par ligne (3 + 3) plutôt que 5 + 1
   (demande du dirigeant du 2026-10-05) ; deux par ligne sur tablette, une sur téléphone. */
.grille-maitrise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 60rem) { .grille-maitrise { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .grille-maitrise { grid-template-columns: minmax(0, 1fr); } }
/* Lien externe (Routéo) : la flèche ↗ suffit, pas de seconde flèche →. */
.grille-maitrise h3 a:has(.lien-externe)::after { content: none; }

/* ---------- Audit métiers, section 03 : le déroulé (2026-10-05) ----------
   Deux cartes de même hauteur, puis ce que nous attendons de vous sur toute la largeur. */
.deroule-am { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.deroule-carte { margin: 0; display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); }
.deroule-tete { display: flex; align-items: center; gap: var(--space-3, 0.75rem); }
.deroule-tete > .icone { flex: none; width: 2.75rem; height: 2.75rem; padding: 0.65rem; border-radius: 50%; background: var(--accent-wash); color: var(--accent-text); }
.deroule-tete h3, .deroule-tete > span { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; line-height: 1.3; color: var(--fg); }
.deroule-carte > p { font-size: var(--text-md); line-height: 1.55; }
.deroule-bas { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
/* Les fourchettes : la partie pleine jusqu'au délai le plus court, la claire jusqu'au plus long. */
.barres-plage { gap: var(--space-3, 0.75rem); }
.barres-plage li, .plage-axe { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 7.5rem; gap: var(--space-4); align-items: center; }
.barres-plage .barre-piste { grid-template-columns: repeat(8, minmax(0, 1fr)); background: color-mix(in srgb, var(--fg) 6%, var(--surface)); border-radius: 999px; }
.barres-plage .barre { grid-row: 1; }
.barres-plage .barre-nom { font-weight: 400; color: var(--fg); }
.plein-4 { grid-column: 1 / 5; } .plein-6 { grid-column: 1 / 7; } .plein-8 { grid-column: 1 / 9; }
.marge-4-6 { grid-column: 5 / 7; } .marge-6-8 { grid-column: 7 / 9; }
.barre-plein:has(+ .barre-marge) { border-radius: 999px 0 0 999px; }
.barres-plage .barre-marge { border-radius: 0 999px 999px 0; background: color-mix(in srgb, var(--accent) 32%, var(--surface)); animation-delay: 0.5s; }
.plage-graduations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.plage-graduations > span { text-align: right; border-right: 1px solid var(--border); padding-right: 4px; }
@media (max-width: 60rem) { .deroule-am { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) {
  .barres-plage li, .plage-axe { grid-template-columns: 5.5rem minmax(0, 1fr) 6rem; gap: var(--space-2); }
  .deroule-carte { padding: var(--space-4); }
}
.deroule-tete h3, .deroule-tete > span { margin: 0; letter-spacing: normal; }
.deroule-carte .barres-plage { margin-top: var(--space-2); }

/* Les petits textes de fin de section prennent toute la largeur : moins de hauteur
   (demande du dirigeant du 2026-10-06). */
.renvoi-sur-mesure, .wrap > .note, .wrap > p.petit { max-width: none; }

/* Encadré qui commence par une icône puis un titre : l'icône sur la ligne du titre, le reste
   dessous sur toute la largeur (demande du dirigeant du 2026-10-06). */
.encadre:has(> .icone:first-child + h3) { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3, 0.75rem); align-items: center; }
.encadre:has(> .icone:first-child + h3) > :not(.icone):not(h3) { grid-column: 1 / -1; }
.encadre:has(> .icone:first-child + h3) > .icone { margin: 0; }

/* Agents métiers, section 02 : la liste des livrables dans une fenêtre de la même hauteur que
   l'exemple à sa gauche, les livrables répartis sur toute la hauteur (2026-10-06). */
.obtenez-metiers { align-items: stretch; }
.obtenez-metiers > .livrables { align-content: space-between; padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
@media (max-width: 60rem) { .obtenez-metiers > .livrables { gap: var(--space-6); } }

/* Le schéma des unités hors de la page Offres (Agents métiers) : un peu d'air avant l'encadré suivant. */
.famille-titre + .unites { margin-top: var(--space-2); }
.unites + .famille-titre { margin-top: var(--space-8); }

/* Le schéma sans la fenêtre du Cerveau entreprise (page Agents métiers, 2026-10-06). */
.emb-cerveau.emb-sans-cerveau { padding: 0; background: none; border: 0; animation: none; }
.emb-sans-cerveau .emb-domaine { left: 0; right: 0; }

/* Schéma au niveau du processus (page Agent de processus, 2026-10-06) : pas de cadre de domaine. */
.emb-domaine.emb-domaine-nu { padding: 0; background: none; border: 0; animation: none; gap: var(--space-2); }
.emb-contexte { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.emb-domaine-nu .emb-proc { padding: var(--space-4); }
.emb-domaine-nu .emb-proc .emb-tete strong { font-size: var(--text-md); }
.emb-sinon { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 0; padding-top: var(--space-2); border-top: 1px dashed color-mix(in srgb, var(--violet) 35%, var(--border)); font-size: var(--text-sm); color: var(--fg); }
.emb-sinon .emb-losange { flex: none; }
/* Six exemples : les boutons tiennent sur une ligne. */
.emb-choix-liste { gap: 6px; }
.emb-choix label { padding: 4px 10px; }
.emb-choix legend { margin-right: 6px; }

/* La validation humaine : un troisième signe, une silhouette cochée sur fond violet clair
   (2026-10-06). Elle n'est pas une tâche de l'agent. */
.emb-validation { border-color: color-mix(in srgb, var(--violet) 55%, var(--border)); background: color-mix(in srgb, var(--violet) 8%, var(--surface)); }
.emb-valide { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: color-mix(in srgb, var(--violet) 18%, var(--surface)); color: var(--violet-text); }
.emb-valide .icone { width: 0.8rem; height: 0.8rem; stroke-width: 2.5; color: var(--violet-text); }
/* Liste de points courts, tous sur une ligne (2026-10-06). */
.liste-titree .liste-icones.liste-ligne { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-2) var(--space-6); }
/* Points à égale distance les uns des autres : le même espace entre chaque point. */
.liste-titree .liste-icones.liste-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); }

/* ---------- Schémas des unités : animations (2026-10-06) ---------- */
@keyframes emb-entree { from { opacity: 0; transform: translateY(10px); } }
.emb-cerveau:has(input[value="1"]:checked) .emb-domaine[data-domaine="1"] :is(.emb-tete-domaine, .emb-contexte, .emb-proc > *) { animation: emb-entree 0.5s var(--courbe) both; }
.emb-cerveau:has(input[value="1"]:checked) .emb-domaine[data-domaine="1"] .emb-processus > li:nth-child(2) > * { animation-delay: 0.12s; }
.emb-cerveau:has(input[value="1"]:checked) .emb-domaine[data-domaine="1"] .emb-processus > li:nth-child(3) > * { animation-delay: 0.24s; }
.emb-cerveau:has(input[value="1"]:checked) .emb-domaine[data-domaine="1"] .emb-processus > li:nth-child(4) > * { animation-delay: 0.36s; }
.emb-cerveau:has(input[value="2"]:checked) .emb-domaine[data-domaine="2"] :is(.emb-tete-domaine, .emb-contexte, .emb-proc > *) { animation: emb-entree 0.5s var(--courbe) both; }
.emb-cerveau:has(input[value="2"]:checked) .emb-domaine[data-domaine="2"] .emb-processus > li:nth-child(2) > * { animation-delay: 0.12s; }
.emb-cerveau:has(input[value="2"]:checked) .emb-domaine[data-domaine="2"] .emb-processus > li:nth-child(3) > * { animation-delay: 0.24s; }
.emb-cerveau:has(input[value="2"]:checked) .emb-domaine[data-domaine="2"] .emb-processus > li:nth-child(4) > * { animation-delay: 0.36s; }
.emb-cerveau:has(input[value="3"]:checked) .emb-domaine[data-domaine="3"] :is(.emb-tete-domaine, .emb-contexte, .emb-proc > *) { animation: emb-entree 0.5s var(--courbe) both; }
.emb-cerveau:has(input[value="3"]:checked) .emb-domaine[data-domaine="3"] .emb-processus > li:nth-child(2) > * { animation-delay: 0.12s; }
.emb-cerveau:has(input[value="3"]:checked) .emb-domaine[data-domaine="3"] .emb-processus > li:nth-child(3) > * { animation-delay: 0.24s; }
.emb-cerveau:has(input[value="3"]:checked) .emb-domaine[data-domaine="3"] .emb-processus > li:nth-child(4) > * { animation-delay: 0.36s; }
.emb-cerveau:has(input[value="4"]:checked) .emb-domaine[data-domaine="4"] :is(.emb-tete-domaine, .emb-contexte, .emb-proc > *) { animation: emb-entree 0.5s var(--courbe) both; }
.emb-cerveau:has(input[value="4"]:checked) .emb-domaine[data-domaine="4"] .emb-processus > li:nth-child(2) > * { animation-delay: 0.12s; }
.emb-cerveau:has(input[value="4"]:checked) .emb-domaine[data-domaine="4"] .emb-processus > li:nth-child(3) > * { animation-delay: 0.24s; }
.emb-cerveau:has(input[value="4"]:checked) .emb-domaine[data-domaine="4"] .emb-processus > li:nth-child(4) > * { animation-delay: 0.36s; }
.emb-cerveau:has(input[value="5"]:checked) .emb-domaine[data-domaine="5"] :is(.emb-tete-domaine, .emb-contexte, .emb-proc > *) { animation: emb-entree 0.5s var(--courbe) both; }
.emb-cerveau:has(input[value="5"]:checked) .emb-domaine[data-domaine="5"] .emb-processus > li:nth-child(2) > * { animation-delay: 0.12s; }
.emb-cerveau:has(input[value="5"]:checked) .emb-domaine[data-domaine="5"] .emb-processus > li:nth-child(3) > * { animation-delay: 0.24s; }
.emb-cerveau:has(input[value="5"]:checked) .emb-domaine[data-domaine="5"] .emb-processus > li:nth-child(4) > * { animation-delay: 0.36s; }
.emb-cerveau:has(input[value="6"]:checked) .emb-domaine[data-domaine="6"] :is(.emb-tete-domaine, .emb-contexte, .emb-proc > *) { animation: emb-entree 0.5s var(--courbe) both; }
.emb-cerveau:has(input[value="6"]:checked) .emb-domaine[data-domaine="6"] .emb-processus > li:nth-child(2) > * { animation-delay: 0.12s; }
.emb-cerveau:has(input[value="6"]:checked) .emb-domaine[data-domaine="6"] .emb-processus > li:nth-child(3) > * { animation-delay: 0.24s; }
.emb-cerveau:has(input[value="6"]:checked) .emb-domaine[data-domaine="6"] .emb-processus > li:nth-child(4) > * { animation-delay: 0.36s; }
/* Le travail passe d'étape en étape. Anneau bleu pour une tâche, violet pour une décision ou une
   validation humaine ; la pastille se soulève un instant. */
.emb-tache { --anneau: color-mix(in srgb, var(--accent) 30%, transparent); }
.emb-decision, .emb-validation { --anneau: color-mix(in srgb, var(--violet) 35%, transparent); }
.emb-tache-active, .emb-tache-active .emb-coche { animation: none; }
.emb-proc-actif .emb-tache { animation: emb-passage 12s infinite; }
.emb-proc-actif .emb-tache:nth-child(2) { animation-delay: 0.45s; }
.emb-proc-actif .emb-tache:nth-child(3) { animation-delay: 0.90s; }
.emb-proc-actif .emb-tache:nth-child(4) { animation-delay: 1.35s; }
.emb-proc-actif .emb-tache:nth-child(5) { animation-delay: 1.80s; }
.emb-proc-actif .emb-tache:nth-child(6) { animation-delay: 2.25s; }
.emb-proc-actif .emb-tache:nth-child(7) { animation-delay: 2.70s; }
@keyframes emb-passage { 0%, 74%, 81%, 100% { box-shadow: 0 0 0 0 transparent; transform: none; } 76%, 79% { box-shadow: 0 0 0 4px var(--anneau); transform: translateY(-2px); } }
.emb-validation .emb-valide { transition: transform 0.3s var(--courbe); }
/* Sans le Cerveau entreprise (Agents métiers) : domaine, processus, tâches, en 9 s. */
.emb-sans-cerveau .emb-domaine { animation: emb-domaine 9s infinite; }
.emb-sans-cerveau .emb-proc-actif { animation: emb-proc 9s infinite; }
.emb-sans-cerveau .emb-proc-actif .emb-tache { animation-name: emb-passage-9; animation-duration: 9s; }
@keyframes emb-passage-9 { 0%, 66%, 74%, 100% { box-shadow: 0 0 0 0 transparent; transform: none; } 68%, 72% { box-shadow: 0 0 0 4px var(--anneau); transform: translateY(-2px); } }
.unites:has(.emb-sans-cerveau) .unites-legende .niveau-1 { animation: un-legende-1 9s infinite; }
.unites:has(.emb-sans-cerveau) .unites-legende .niveau-2 { animation: un-legende-2 9s infinite; }
.unites:has(.emb-sans-cerveau) .unites-legende .niveau-3 { animation: un-legende-3 9s infinite; }
/* Au niveau du processus (Agent de processus) : le processus, puis ses étapes, en 7 s. */
.emb-domaine-nu .emb-proc-actif { animation: emb-proc-p 7s infinite; }
.emb-domaine-nu .emb-proc-actif .emb-tache { animation-name: emb-passage-p; animation-duration: 7s; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(2) { animation-delay: 0.50s; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(3) { animation-delay: 1.00s; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(4) { animation-delay: 1.50s; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(5) { animation-delay: 2.00s; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(6) { animation-delay: 2.50s; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(7) { animation-delay: 3.00s; }
@keyframes emb-proc-p { 0%, 40%, 100% { border-color: var(--border); background: var(--surface); } 4%, 36% { border-color: var(--accent-text); background: color-mix(in srgb, var(--accent-wash) 60%, var(--surface)); } }
@keyframes emb-passage-p { 0%, 44%, 53%, 100% { box-shadow: 0 0 0 0 transparent; transform: none; } 46%, 51% { box-shadow: 0 0 0 4px var(--anneau); transform: translateY(-2px); } }
@keyframes un-legende-p2 { 0%, 40%, 100% { border-color: transparent; background: transparent; } 4%, 36% { border-color: var(--accent-text); background: var(--surface); } }
@keyframes un-legende-p3 { 0%, 42%, 98%, 100% { border-color: transparent; background: transparent; } 46%, 94% { border-color: var(--accent-text); background: var(--surface); } }
.unites:has(.emb-domaine-nu) .unites-legende .niveau-2 { animation: un-legende-p2 7s infinite; }
.unites:has(.emb-domaine-nu) .unites-legende .niveau-3 { animation: un-legende-p3 7s infinite; }
/* Les boutons d'exemple : le bouton choisi se pose doucement. */
.emb-choix label { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--courbe); }
.emb-choix label:hover { transform: translateY(-1px); }

/* ---------- Schéma des unités : arrivée sur la section, les éléments à la suite (2026-10-06) ----------
   Le bloc ne fond plus d'un coup : le menu, la fenêtre du Cerveau entreprise, le domaine, chaque
   processus, puis la légende ligne par ligne, la règle de comptage et la phrase d'exemple. */
.unites.apparait { opacity: 1; transform: none; }
.unites :is(.emb-choix, .emb-tete-cerveau, .emb-socle, .emb-legende),
.unites .unites-legende li > * { animation: emb-entree 0.55s var(--courbe) both; }
.unites .emb-tete-cerveau { animation-delay: 0s; }
.unites .emb-socle { animation-delay: 0.05s; }
.unites .emb-choix { animation-delay: 0.08s; }
.emb-cerveau:has(input[value="1"]:checked) .emb-domaine[data-domaine="1"] :is(.emb-tete-domaine, .emb-contexte) { animation-delay: 0.15s; }
.emb-cerveau:has(input[value="1"]:checked) .emb-domaine[data-domaine="1"] .emb-processus > li:nth-child(1) > * { animation-delay: 0.30s; }
.emb-cerveau:has(input[value="1"]:checked) .emb-domaine[data-domaine="1"] .emb-processus > li:nth-child(2) > * { animation-delay: 0.45s; }
.emb-cerveau:has(input[value="1"]:checked) .emb-domaine[data-domaine="1"] .emb-processus > li:nth-child(3) > * { animation-delay: 0.60s; }
.emb-cerveau:has(input[value="1"]:checked) .emb-domaine[data-domaine="1"] .emb-processus > li:nth-child(4) > * { animation-delay: 0.75s; }
.emb-cerveau:has(input[value="2"]:checked) .emb-domaine[data-domaine="2"] :is(.emb-tete-domaine, .emb-contexte) { animation-delay: 0.15s; }
.emb-cerveau:has(input[value="2"]:checked) .emb-domaine[data-domaine="2"] .emb-processus > li:nth-child(1) > * { animation-delay: 0.30s; }
.emb-cerveau:has(input[value="2"]:checked) .emb-domaine[data-domaine="2"] .emb-processus > li:nth-child(2) > * { animation-delay: 0.45s; }
.emb-cerveau:has(input[value="2"]:checked) .emb-domaine[data-domaine="2"] .emb-processus > li:nth-child(3) > * { animation-delay: 0.60s; }
.emb-cerveau:has(input[value="2"]:checked) .emb-domaine[data-domaine="2"] .emb-processus > li:nth-child(4) > * { animation-delay: 0.75s; }
.emb-cerveau:has(input[value="3"]:checked) .emb-domaine[data-domaine="3"] :is(.emb-tete-domaine, .emb-contexte) { animation-delay: 0.15s; }
.emb-cerveau:has(input[value="3"]:checked) .emb-domaine[data-domaine="3"] .emb-processus > li:nth-child(1) > * { animation-delay: 0.30s; }
.emb-cerveau:has(input[value="3"]:checked) .emb-domaine[data-domaine="3"] .emb-processus > li:nth-child(2) > * { animation-delay: 0.45s; }
.emb-cerveau:has(input[value="3"]:checked) .emb-domaine[data-domaine="3"] .emb-processus > li:nth-child(3) > * { animation-delay: 0.60s; }
.emb-cerveau:has(input[value="3"]:checked) .emb-domaine[data-domaine="3"] .emb-processus > li:nth-child(4) > * { animation-delay: 0.75s; }
.emb-cerveau:has(input[value="4"]:checked) .emb-domaine[data-domaine="4"] :is(.emb-tete-domaine, .emb-contexte) { animation-delay: 0.15s; }
.emb-cerveau:has(input[value="4"]:checked) .emb-domaine[data-domaine="4"] .emb-processus > li:nth-child(1) > * { animation-delay: 0.30s; }
.emb-cerveau:has(input[value="4"]:checked) .emb-domaine[data-domaine="4"] .emb-processus > li:nth-child(2) > * { animation-delay: 0.45s; }
.emb-cerveau:has(input[value="4"]:checked) .emb-domaine[data-domaine="4"] .emb-processus > li:nth-child(3) > * { animation-delay: 0.60s; }
.emb-cerveau:has(input[value="4"]:checked) .emb-domaine[data-domaine="4"] .emb-processus > li:nth-child(4) > * { animation-delay: 0.75s; }
.emb-cerveau:has(input[value="5"]:checked) .emb-domaine[data-domaine="5"] :is(.emb-tete-domaine, .emb-contexte) { animation-delay: 0.15s; }
.emb-cerveau:has(input[value="5"]:checked) .emb-domaine[data-domaine="5"] .emb-processus > li:nth-child(1) > * { animation-delay: 0.30s; }
.emb-cerveau:has(input[value="5"]:checked) .emb-domaine[data-domaine="5"] .emb-processus > li:nth-child(2) > * { animation-delay: 0.45s; }
.emb-cerveau:has(input[value="5"]:checked) .emb-domaine[data-domaine="5"] .emb-processus > li:nth-child(3) > * { animation-delay: 0.60s; }
.emb-cerveau:has(input[value="5"]:checked) .emb-domaine[data-domaine="5"] .emb-processus > li:nth-child(4) > * { animation-delay: 0.75s; }
.emb-cerveau:has(input[value="6"]:checked) .emb-domaine[data-domaine="6"] :is(.emb-tete-domaine, .emb-contexte) { animation-delay: 0.15s; }
.emb-cerveau:has(input[value="6"]:checked) .emb-domaine[data-domaine="6"] .emb-processus > li:nth-child(1) > * { animation-delay: 0.30s; }
.emb-cerveau:has(input[value="6"]:checked) .emb-domaine[data-domaine="6"] .emb-processus > li:nth-child(2) > * { animation-delay: 0.45s; }
.emb-cerveau:has(input[value="6"]:checked) .emb-domaine[data-domaine="6"] .emb-processus > li:nth-child(3) > * { animation-delay: 0.60s; }
.emb-cerveau:has(input[value="6"]:checked) .emb-domaine[data-domaine="6"] .emb-processus > li:nth-child(4) > * { animation-delay: 0.75s; }
.unites .unites-legende li:nth-child(1) > * { animation-delay: 0.7s; }
.unites .unites-legende li:nth-child(2) > * { animation-delay: 0.85s; }
.unites .unites-legende li:nth-child(3) > * { animation-delay: 1s; }
.unites .unites-legende li:nth-child(4) > * { animation-delay: 1.15s; }
.unites .emb-legende { animation-delay: 1.4s; }

/* ---------- Schémas des unités : seule l'animation entre les tâches reste (2026-10-06) ----------
   Plus d'apparition en cascade ni de cadres qui s'allument : seul le passage d'étape en étape
   dans le premier processus, en boucle continue (4,5 s), anneau bleu pour une tâche, violet pour
   une décision ou une validation. */
.unites *:not(.emb-tache):not(.unites-legende > li) { animation-name: none !important; }
.emb-proc-actif .emb-tache { animation-name: emb-flux !important; animation-duration: 4.5s !important; animation-iteration-count: infinite !important; }
@keyframes emb-flux { 0%, 11%, 100% { box-shadow: 0 0 0 0 transparent; transform: none; } 3%, 8% { box-shadow: 0 0 0 4px var(--anneau); transform: translateY(-2px); } }

/* Légende du schéma des unités : un petit curseur passe d'une ligne à l'autre (domaine, processus,
   tâche ; Cerveau entreprise en tête sur la page Offres), 1,5 s par ligne (2026-10-06). */
.unites-legende > li { position: relative; }
.unites-legende > li::before { content: ""; position: absolute; left: -10px; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--accent) var(--degrade); opacity: 0; transform-origin: center; animation: curseur-3 4.5s infinite; }
.unites-legende > li:nth-child(2)::before { animation-delay: 1.5s; }
.unites-legende > li:nth-child(3)::before { animation-delay: 3s; }
.unites-legende > li:nth-child(4)::before { animation-delay: 4.5s; }
.unites-legende:has(> li:nth-child(4)) > li::before { animation-name: curseur-4; animation-duration: 6s; }
.unites-legende:not(:has(> li:nth-child(3))) > li::before { animation-name: curseur-2; animation-duration: 3s; }
@keyframes curseur-3 { 0%, 33%, 100% { opacity: 0; transform: scaleY(0.3); } 4%, 29% { opacity: 1; transform: none; } }
@keyframes curseur-4 { 0%, 25%, 100% { opacity: 0; transform: scaleY(0.3); } 3%, 22% { opacity: 1; transform: none; } }
@keyframes curseur-2 { 0%, 50%, 100% { opacity: 0; transform: scaleY(0.3); } 6%, 44% { opacity: 1; transform: none; } }
/* Le curseur entre l'icône et le texte : marge intérieure + largeur de l'icône + moitié de l'écart. */
.unites-legende > li::before { left: calc(var(--space-3, 0.75rem) + 2.5rem + var(--space-3, 0.75rem) / 2 - 1.5px); }

/* ---------- Schéma de gauche : curseur synchronisé avec celui de la légende (2026-10-06) ---------- */
.emb-proc, .emb-taches { position: relative; }
.emb-cerveau:has(input[value="1"]:checked) .emb-domaine[data-domaine="1"] { position: relative; }
.emb-cerveau:has(input[value="2"]:checked) .emb-domaine[data-domaine="2"] { position: relative; }
.emb-cerveau:has(input[value="3"]:checked) .emb-domaine[data-domaine="3"] { position: relative; }
.emb-cerveau:has(input[value="4"]:checked) .emb-domaine[data-domaine="4"] { position: relative; }
.emb-cerveau:has(input[value="5"]:checked) .emb-domaine[data-domaine="5"] { position: relative; }
.emb-cerveau:has(input[value="6"]:checked) .emb-domaine[data-domaine="6"] { position: relative; }
.emb-cerveau::before, .emb-domaine::before, .emb-proc-actif::before, .emb-proc-actif .emb-taches::before { content: ""; position: absolute; left: -9px; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--accent) var(--degrade); opacity: 0; pointer-events: none; transform-origin: center; animation: curseur-3 4.5s infinite; }
.emb-proc-actif .emb-taches::before { top: 2px; bottom: 2px; }
/* Agents métiers : domaine, processus, tâches (4,5 s, comme la légende). */
.emb-sans-cerveau::before { content: none; }
.emb-sans-cerveau .emb-domaine::before { animation-delay: 0s; }
.emb-sans-cerveau .emb-proc-actif::before { animation-delay: 1.5s; }
.emb-sans-cerveau .emb-proc-actif .emb-taches::before { animation-delay: 3s; }
/* Offres : Cerveau entreprise, domaine, processus, tâches (6 s). */
.emb-cerveau:not(.emb-sans-cerveau)::before,
.emb-cerveau:not(.emb-sans-cerveau) .emb-domaine::before,
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif::before,
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif .emb-taches::before { animation-name: curseur-4; animation-duration: 6s; }
.emb-cerveau:not(.emb-sans-cerveau)::before { animation-delay: 0s; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-domaine::before { animation-delay: 1.5s; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif::before { animation-delay: 3s; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif .emb-taches::before { animation-delay: 4.5s; }
/* Agent de processus : processus, tâches (3 s). */
.emb-domaine-nu::before { content: none; }
.emb-domaine-nu .emb-proc-actif::before { animation-name: curseur-2; animation-duration: 3s; animation-delay: 0s; }
.emb-domaine-nu .emb-proc-actif .emb-taches::before { animation-name: curseur-2; animation-duration: 3s; animation-delay: 1.5s; }

/* ---------- Surbrillance synchronisée : côté gauche en violet (2026-10-06) ----------
   À gauche, le côté gauche de la fenêtre (Cerveau entreprise, domaine, processus) et de la ligne
   des tâches s'allume ; à droite, la ligne courante de la légende s'encadre, côté gauche violet. */
.emb-cerveau::before, .emb-domaine::before, .emb-proc-actif::before { left: -1.5px; top: -1.5px; bottom: -1.5px; width: 4px; background: var(--violet); }
.emb-cerveau::before { border-radius: 22px 0 0 22px; }
.emb-domaine::before { border-radius: 18px 0 0 18px; }
.emb-proc-actif::before { border-radius: var(--radius-card) 0 0 var(--radius-card); }
.emb-proc-actif .emb-taches { padding-left: 10px; }
.emb-proc-actif .emb-taches::before { left: 0; top: 0; bottom: 0; width: 3px; background: var(--violet); }
@keyframes curseur-3 { 0%, 33%, 100% { opacity: 0; } 3%, 30% { opacity: 1; } }
@keyframes curseur-4 { 0%, 25%, 100% { opacity: 0; } 2%, 23% { opacity: 1; } }
@keyframes curseur-2 { 0%, 50%, 100% { opacity: 0; } 4%, 46% { opacity: 1; } }
/* Légende : plus de curseur, la ligne courante s'encadre. */
.unites-legende > li::before { content: none; }
/* Propriétés séparées, et non le raccourci « animation » : un raccourci en !important forçait aussi
   l'état « en marche », et la légende tournait seule pendant que le schéma attendait d'être à
   l'écran (désynchronisation après une navigation, corrigée le 2026-10-06). */
.unites-legende > li { animation-name: cadre-3 !important; animation-duration: 4.5s !important; animation-iteration-count: infinite !important; animation-delay: 0s !important; animation-timing-function: ease !important; }
/* Les anciennes surbrillances de la légende (plus spécifiques) sont remplacées : !important. */
.unites-legende > li:nth-child(2) { animation-delay: 1.5s !important; }
.unites-legende > li:nth-child(3) { animation-delay: 3s !important; }
.unites-legende > li:nth-child(4) { animation-delay: 4.5s !important; }
.unites-legende:has(> li:nth-child(4)) > li { animation-name: cadre-4 !important; animation-duration: 6s !important; }
.unites-legende:not(:has(> li:nth-child(3))) > li { animation-name: cadre-2 !important; animation-duration: 3s !important; }
@keyframes cadre-3 { 0%, 33%, 100% { border-color: transparent; background: transparent; box-shadow: none; } 3%, 30% { border-color: var(--border); background: var(--surface); box-shadow: inset 3px 0 0 var(--violet); } }
@keyframes cadre-4 { 0%, 25%, 100% { border-color: transparent; background: transparent; box-shadow: none; } 2%, 23% { border-color: var(--border); background: var(--surface); box-shadow: inset 3px 0 0 var(--violet); } }
@keyframes cadre-2 { 0%, 50%, 100% { border-color: transparent; background: transparent; box-shadow: none; } 4%, 46% { border-color: var(--border); background: var(--surface); box-shadow: inset 3px 0 0 var(--violet); } }
/* Côté gauche qui suit exactement l'arrondi de la fenêtre : un calque de la taille de la fenêtre,
   même arrondi, avec une ombre intérieure à gauche (comme la légende), au lieu d'une barre. */
.emb-cerveau::before, .emb-domaine::before, .emb-proc-actif::before { inset: -1.5px; width: auto; background: none; border-radius: inherit; box-shadow: inset 4px 0 0 var(--violet); }
.emb-cerveau::before { inset: -2px; }

/* ---------- Schémas des unités : synchronisation complète (2026-10-06) ---------- */
.unites .unites-legende > li { animation-duration: 6s !important; }
.unites .unites-legende > li:nth-child(2) { animation-delay: 2s !important; }
.unites .unites-legende > li:nth-child(3) { animation-delay: 4s !important; }
.unites .unites-legende > li:nth-child(4) { animation-delay: 6s !important; }
.unites .unites-legende:has(> li:nth-child(4)) > li { animation-duration: 8s !important; }
.unites .unites-legende:not(:has(> li:nth-child(3))) > li { animation-duration: 4s !important; }
.emb-sans-cerveau .emb-domaine::before { animation-duration: 6s; animation-delay: 0s; }
.emb-sans-cerveau .emb-proc-actif::before { animation-duration: 6s; animation-delay: 2s; }
.emb-sans-cerveau .emb-proc-actif .emb-taches::before { animation-duration: 6s; animation-delay: 4s; }
.emb-cerveau:not(.emb-sans-cerveau)::before { animation-duration: 8s; animation-delay: 0s; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-domaine::before { animation-duration: 8s; animation-delay: 2s; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif::before { animation-duration: 8s; animation-delay: 4s; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif .emb-taches::before { animation-duration: 8s; animation-delay: 6s; }
.emb-domaine-nu .emb-proc-actif::before { animation-duration: 4s; animation-delay: 0s; }
.emb-domaine-nu .emb-proc-actif .emb-taches::before { animation-duration: 4s; animation-delay: 2s; }
.emb-sans-cerveau .emb-proc-actif .emb-tache { animation-name: emb-flux-6 !important; animation-duration: 6s !important; }
.emb-sans-cerveau .emb-proc-actif .emb-tache:nth-child(1) { animation-delay: 4.0s !important; }
.emb-sans-cerveau .emb-proc-actif .emb-tache:nth-child(2) { animation-delay: 4.3s !important; }
.emb-sans-cerveau .emb-proc-actif .emb-tache:nth-child(3) { animation-delay: 4.6s !important; }
.emb-sans-cerveau .emb-proc-actif .emb-tache:nth-child(4) { animation-delay: 4.9s !important; }
.emb-sans-cerveau .emb-proc-actif .emb-tache:nth-child(5) { animation-delay: 5.2s !important; }
.emb-sans-cerveau .emb-proc-actif .emb-tache:nth-child(6) { animation-delay: 5.5s !important; }
.emb-sans-cerveau .emb-proc-actif .emb-tache:nth-child(7) { animation-delay: 5.8s !important; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif .emb-tache { animation-name: emb-flux-8 !important; animation-duration: 8s !important; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif .emb-tache:nth-child(1) { animation-delay: 6.0s !important; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif .emb-tache:nth-child(2) { animation-delay: 6.3s !important; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif .emb-tache:nth-child(3) { animation-delay: 6.6s !important; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif .emb-tache:nth-child(4) { animation-delay: 6.9s !important; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif .emb-tache:nth-child(5) { animation-delay: 7.2s !important; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif .emb-tache:nth-child(6) { animation-delay: 7.5s !important; }
.emb-cerveau:not(.emb-sans-cerveau) .emb-proc-actif .emb-tache:nth-child(7) { animation-delay: 7.8s !important; }
.emb-domaine-nu .emb-proc-actif .emb-tache { animation-name: emb-flux-4 !important; animation-duration: 4s !important; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(1) { animation-delay: 2.0s !important; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(2) { animation-delay: 2.3s !important; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(3) { animation-delay: 2.6s !important; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(4) { animation-delay: 2.9s !important; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(5) { animation-delay: 3.2s !important; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(6) { animation-delay: 3.5s !important; }
.emb-domaine-nu .emb-proc-actif .emb-tache:nth-child(7) { animation-delay: 3.8s !important; }
@keyframes emb-flux-6 { 0%, 5.5%, 100% { box-shadow: 0 0 0 0 transparent; transform: none; } 1%, 4.5% { box-shadow: 0 0 0 4px var(--anneau); transform: translateY(-2px); } }
@keyframes emb-flux-8 { 0%, 4%, 100% { box-shadow: 0 0 0 0 transparent; transform: none; } 0.7%, 3.3% { box-shadow: 0 0 0 4px var(--anneau); transform: translateY(-2px); } }
@keyframes emb-flux-4 { 0%, 8%, 100% { box-shadow: 0 0 0 0 transparent; transform: none; } 1.5%, 6.5% { box-shadow: 0 0 0 4px var(--anneau); transform: translateY(-2px); } }

/* Tant que le schéma n'est pas à l'écran, TOUTES ses animations attendent, sans exception : des
   règles plus spécifiques relançaient la légende seule, d'où un décalage après une navigation
   (2026-10-06). À l'arrivée, tout repart ensemble, synchronisé. */
.unites.apparait:not(.visible) *, .unites.apparait:not(.visible) *::before, .unites.apparait:not(.visible) *::after,
.apparait:not(.visible) .unites *, .apparait:not(.visible) .unites *::before, .apparait:not(.visible) .unites *::after { animation-play-state: paused !important; }

/* Agents métiers, livrables : un trait relie les icônes, de l'une à la suivante (2026-10-06).
   Rangées de même hauteur ; chaque livrable trace le trait sous son icône jusqu'au suivant. */
.obtenez-metiers > .livrables { grid-auto-rows: 1fr; gap: 0; align-content: stretch; }
.obtenez-metiers > .livrables li { position: relative; }
.obtenez-metiers > .livrables li:not(:last-child)::before { content: ""; position: absolute; left: calc(1.375rem - 1px); top: calc(2.75rem + 6px); bottom: 6px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--accent-text) 30%, var(--border)); }
@media (max-width: 60rem) { .obtenez-metiers > .livrables { grid-auto-rows: auto; gap: var(--space-6); } .obtenez-metiers > .livrables li:not(:last-child)::before { bottom: calc(-1 * var(--space-6) + 6px); } }
/* Le dernier livrable en bas de la fenêtre, comme avant : six livrables, la dernière rangée à sa taille. */
@media (min-width: 60.0625rem) { .obtenez-metiers > .livrables:has(> li:nth-child(6):last-child) { grid-template-rows: repeat(5, minmax(0, 1fr)) auto; } }

/* ---------- Cerveau entreprise, « Ce que vous obtenez » (2026-10-06) ----------
   Le socle commun et le domaine en pastilles, à gauche ; à droite, une fenêtre de même hauteur,
   ses livrables répartis et reliés par un trait. */
.obtenez-cerveau { align-items: stretch; gap: var(--space-8); }
.obtenez-cerveau .pile { gap: var(--space-3, 0.75rem); align-content: start; }
.obtenez-cerveau .pile-domaine { margin-inline: 0; gap: var(--space-3, 0.75rem); }
.pile-exemple { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.pastilles-claires li { border-color: color-mix(in srgb, var(--accent-text) 40%, var(--border)); background: var(--surface); color: var(--fg); }
.cerveau-usage { display: grid; grid-template-rows: auto 1fr; gap: var(--space-4); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.cerveau-usage .livrables { grid-auto-rows: minmax(0, 1fr); gap: 0; }
.cerveau-usage .livrables:has(> li:nth-child(4):last-child) { grid-template-rows: repeat(3, minmax(0, 1fr)) auto; }
.cerveau-usage .livrables li { position: relative; }
.cerveau-usage .livrables li:not(:last-child)::before { content: ""; position: absolute; left: calc(1.375rem - 1px); top: calc(2.75rem + 6px); bottom: 6px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--accent-text) 30%, var(--border)); }
@media (max-width: 60rem) { .cerveau-usage .livrables { grid-auto-rows: auto; grid-template-rows: none; gap: var(--space-6); } .cerveau-usage .livrables li:not(:last-child)::before { bottom: calc(-1 * var(--space-6) + 6px); } }

/* Cerveau entreprise : les intitulés « Le socle commun » et « Puis vos domaines » en pastille ;
   les exemples de domaines au choix (2026-10-06). */
.obtenez-cerveau .pile-bloc > .idx { justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; }
.obtenez-cerveau .pile-socle > .idx { color: var(--ink-on-accent); background: color-mix(in srgb, #fff 16%, transparent); border: 1px solid color-mix(in srgb, #fff 45%, transparent); }
.obtenez-cerveau .pile-domaine > .idx { color: var(--ink-on-accent); background: var(--accent); }
.cv-choix { margin-top: var(--space-1); }
.cv-domaines [data-cv] { display: none; }
.pile-domaine:has(input[value="1"]:checked) .cv-domaines [data-cv="1"],
.pile-domaine:has(input[value="2"]:checked) .cv-domaines [data-cv="2"],
.pile-domaine:has(input[value="3"]:checked) .cv-domaines [data-cv="3"],
.pile-domaine:has(input[value="4"]:checked) .cv-domaines [data-cv="4"],
.pile-domaine:has(input[value="5"]:checked) .cv-domaines [data-cv="5"] { display: flex; }
@supports not selector(:has(*)) { .cv-choix { display: none; } .cv-domaines [data-cv="1"] { display: flex; } }

/* Cerveau entreprise : cinq livrables à droite ; et, dans « Vos domaines métiers », les exemples
   à choisir (boutons) se distinguent du contenu du domaine (étiquettes douces, sous un filet). */
.cerveau-usage .livrables:has(> li:nth-child(5):last-child) { grid-template-rows: repeat(4, minmax(0, 1fr)) auto; }
.cv-domaines { padding-top: var(--space-3, 0.75rem); border-top: 1px solid color-mix(in srgb, var(--accent-text) 25%, var(--border)); }
.cv-domaines .pastilles-claires { gap: 6px; }
.cv-domaines .pastilles-claires li { padding: 0.2rem 0.6rem; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--fg); font-size: var(--text-sm); }
.cv-choix .emb-choix-liste label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; }
.cv-choix .emb-choix-liste label { letter-spacing: 0; padding: 3px 9px; }

/* Cerveau entreprise, « Ce que vous obtenez » : le socle commun sur toute la largeur ; dessous,
   vos domaines métiers à gauche et « Et pour l'utiliser au quotidien » à droite (2026-10-06).
   La pile s'efface (display: contents) pour placer ses deux fenêtres dans la grille. */
@media (min-width: 60.0625rem) {
  .obtenez-cerveau { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "socle socle" "domaine usage"; gap: var(--space-4) var(--space-6); }
  .obtenez-cerveau .pile { display: contents; }
  .obtenez-cerveau .pile-socle { grid-area: socle; }
  .obtenez-cerveau .pile-domaine { grid-area: domaine; }
  .obtenez-cerveau .cerveau-usage { grid-area: usage; }
}
/* Contenu calé en haut des fenêtres ; rangées des livrables jamais plus petites que leur texte. */
.obtenez-cerveau .pile-bloc { align-content: start; }
.obtenez-cerveau .pile-bloc > .idx { align-self: start; }
.cerveau-usage .livrables { grid-auto-rows: minmax(min-content, 1fr); }
.cerveau-usage .livrables:has(> li:nth-child(4):last-child) { grid-template-rows: repeat(3, minmax(min-content, 1fr)) auto; }
.cerveau-usage .livrables:has(> li:nth-child(5):last-child) { grid-template-rows: repeat(4, minmax(min-content, 1fr)) auto; }
.cerveau-usage .livrables li { padding-bottom: var(--space-3, 0.75rem); }
/* Hauteurs équilibrées : livrables à leur taille (écart fixe, trait prolongé dans l'écart) ; la
   fenêtre des domaines métiers en colonne, sa note calée en bas. */
@media (min-width: 60.0625rem) {
  .cerveau-usage .livrables, .cerveau-usage .livrables:has(> li:nth-child(4):last-child), .cerveau-usage .livrables:has(> li:nth-child(5):last-child) { grid-auto-rows: auto; grid-template-rows: none; gap: var(--space-4); align-content: start; }
  .cerveau-usage .livrables li { padding-bottom: 0; }
  .cerveau-usage .livrables li:not(:last-child)::before { bottom: calc(-1 * var(--space-4) + 6px); }
  .obtenez-cerveau .pile-domaine { display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); }
  .obtenez-cerveau .pile-domaine > .pile-texte { margin-top: auto; }
}
/* Le parcours de la page Offres (div.chemins) ne touche plus aux trois fenêtres de la page
   Cerveau entreprise (ol.chemins) : mêmes largeurs, mêmes hauteurs, alignées (2026-10-06). */
ol.chemins { align-items: stretch; }

/* ---------- Supervision TMA, « Ce que vous obtenez » (2026-10-06) ----------
   Trois paliers côte à côte, de même hauteur ; un « + » entre deux paliers dit que chacun ajoute
   au précédent ; dessous, deux encadrés côte à côte. */
.sv-paliers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); align-items: stretch; }
.sv-palier { position: relative; display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.sv-palier:first-child { background: color-mix(in srgb, var(--accent-wash) 60%, var(--surface)); border-color: color-mix(in srgb, var(--accent-text) 35%, var(--border)); }
.sv-palier-plus::before { content: "+"; position: absolute; left: calc(-1 * var(--space-8) / 2 - 0.85rem); top: 50%; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-top: -0.85rem; border-radius: 50%; background: var(--accent); color: var(--ink-on-accent); font-family: var(--font-display); font-weight: 700; line-height: 1; }
.sv-tete { display: flex; align-items: center; gap: var(--space-3, 0.75rem); }
.sv-tete > div { display: grid; gap: 2px; }
.sv-tete h3 { margin: 0; font-size: var(--text-lg); line-height: 1.2; }
.sv-signe { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--accent-wash); color: var(--accent-text); }
.sv-signe .icone { width: 1.4rem; height: 1.4rem; }
.sv-palier .liste-icones { display: grid; gap: var(--space-2); }
.sv-palier .liste-icones li { grid-template-columns: 1.25rem minmax(0, 1fr); font-size: var(--text-sm); }
.sv-bas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); align-items: stretch; }
.sv-maintenance { border-style: dashed; }
.sv-option { display: inline-block; margin-right: var(--space-1); padding: 0 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--violet) 12%, var(--surface)); color: var(--violet-text); font-family: var(--font-mono); font-size: var(--text-xs); }
@media (max-width: 60rem) {
  .sv-paliers, .sv-bas { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .sv-palier-plus::before { left: 50%; top: calc(-1 * var(--space-6) / 2 - 0.85rem); margin: 0 0 0 -0.85rem; }
}

/* ---------- AI Act, « Le calendrier » : une frise chronologique (2026-10-06) ----------
   L'axe couvre 2025 à 2027 ; les positions sont calculées depuis les dates (1er janvier 2025 =
   0 %, 1er janvier 2028 = 100 %) : 2 février 2025, 2 août 2026, 2 décembre 2026, 2 décembre 2027,
   et l'état du droit (11 septembre 2026) pour « aujourd'hui ». En vigueur à gauche, à venir à droite. */
.frise { position: relative; height: 30rem; margin: var(--space-4) 0 var(--space-2); }
.frise-axe { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--violet) 45%, var(--border)) 0 10px, transparent 10px 16px); }
.frise-axe-fait { position: absolute; left: 0; top: 0; bottom: 0; width: 56.4%; border-radius: 4px; background: var(--accent) var(--degrade); }
.frise-annees { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: calc(50% + 10px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); pointer-events: none; }
.frise-annees li { padding-left: 6px; border-left: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); line-height: 1; height: 1.4rem; }
.frise-auj { position: absolute; left: 56.4%; top: calc(50% - 2.6rem); bottom: calc(50% - 2.6rem); width: 2px; margin-left: -1px; background: var(--fg); }
.frise-auj > span { position: absolute; top: -1.4rem; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: var(--fg); color: var(--surface); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.frise-evts { list-style: none; margin: 0; padding: 0; }
.frise-evt { position: absolute; top: 50%; width: 0; }
.frise-evt-1 { left: 2.9%; } .frise-evt-2 { left: 52.8%; } .frise-evt-3 { left: 63.9%; } .frise-evt-4 { left: 97.3%; }
.frise-point { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent-text); }
.frise-fait .frise-point { background: var(--accent); border-color: var(--accent); }
.frise-avenir .frise-point { border-color: var(--violet); }
.frise-evt::before { content: ""; position: absolute; left: -1px; width: 2px; height: 2.2rem; background: color-mix(in srgb, var(--accent-text) 35%, var(--border)); }
.frise-haut::before { bottom: 9px; }
.frise-bas::before { top: 9px; }
.frise-carte { position: absolute; width: 16rem; display: grid; gap: 4px; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); transform: translateX(-50%); }
.frise-haut .frise-carte { bottom: calc(9px + 2.2rem); }
.frise-bas .frise-carte { top: calc(9px + 2.2rem); }
.frise-evt-1 .frise-carte { transform: translateX(-1.5rem); }
.frise-evt-4 .frise-carte { transform: translateX(calc(-100% + 1.5rem)); }
.frise-avenir .frise-carte { border-style: dashed; border-color: color-mix(in srgb, var(--violet) 50%, var(--border)); }
.frise-statut { justify-self: start; padding: 0 8px; border-radius: 999px; font-family: var(--font-mono); font-size: var(--text-xs); background: var(--accent-wash); color: var(--accent-text); }
.frise-avenir .frise-statut { background: color-mix(in srgb, var(--violet) 12%, var(--surface)); color: var(--violet-text); }
.frise-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.frise-carte h3 { margin: 0; font-size: var(--text-md); line-height: 1.25; }
.frise-carte p { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--muted); }
@media (max-width: 60rem) {
  .frise { height: auto; padding-left: 1.75rem; }
  .frise-axe { left: 0.5rem; right: auto; top: 0; bottom: 0; width: 4px; height: auto; margin: 0; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--violet) 45%, var(--border)) 0 10px, transparent 10px 16px); }
  .frise-axe-fait { width: auto; right: 0; height: 50%; }
  .frise-annees, .frise-auj { display: none; }
  .frise-evts { display: grid; gap: var(--space-4); }
  .frise-evt { position: relative; left: auto !important; top: auto; width: auto; }
  .frise-evt::before { display: none; }
  .frise-point { left: calc(-1.75rem + 0.5rem - 7px); top: var(--space-4); }
  .frise-carte { position: static; width: auto; transform: none !important; }
}
/* Frise : juste la hauteur des cartes du haut, de part et d'autre de l'axe (31,5rem depuis le
   2026-10-10, A184 : 35rem auparavant, qui laissaient un vide sous les cartes du bas) ; « aujourd'hui »
   posé sous l'axe, à droite de son trait. */
@media (min-width: 60.0625rem) {
  .frise { height: 31.5rem; margin-bottom: -1.5rem; }
  /* La note des sources, plus près de la frise et du bas de la section (A184). */
  .wrap:has(> .frise) { padding-bottom: var(--space-12); }
  .frise-auj { top: calc(50% - 0.9rem); bottom: auto; height: 2.8rem; }
  .frise-auj > span { top: auto; bottom: 0; left: 6px; transform: none; }
}

/* ---------- V2 — Page Offres, en-tête : le Cerveau entreprise sous l'escalier (A83) ---------- */
/* Une barre horizontale sur toute la largeur, sous les marches : le socle qui les porte, à part
   de l'escalier. Violet, la couleur du Cerveau entreprise (DESIGN.md § 3) ; elle s'étire de
   gauche à droite après la dernière marche. Nom puis prix, sur une ligne, sous la barre. */
.marche-socle { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.marche-socle-barre { display: block; height: 0.75rem; border-radius: 4px; background: var(--violet); transform-origin: left center; animation: marche-socle 0.9s var(--courbe) 0.85s both; }
.marche-socle-libelle { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-4); row-gap: var(--space-1); }
.marche-socle .marche-nom { min-height: 0; }
@keyframes marche-socle { from { transform: scaleX(0); } }
/* Retouche du 2026-10-06 : marches un peu moins hautes, barre du Cerveau entreprise plus épaisse,
   et le pictogramme de chaque offre (celui de l'aiguillage) dans une pastille : en haut de sa
   marche, à l'extrémité gauche de la barre du Cerveau entreprise. */
/* Hauteurs fixes, et non plus en pourcentage de la colonne : avec les prix sur deux lignes, les
   grandes marches étaient tassées et la 3e finissait aussi haute que la 4e sur téléphone. */
.marches-prix ol { height: auto; }
.marche { height: auto; }
.marche-barre { flex: none; }
.marche-1 .marche-barre { height: 2.5rem; }
.marche-2 .marche-barre { height: 5rem; }
.marche-3 .marche-barre { height: 8rem; }
.marche-4 .marche-barre { height: 10.5rem; }
.marche-barre { display: flex; justify-content: center; align-items: flex-start; padding-top: 0.25rem; }
.marche-picto { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--surface); color: var(--accent-text); }
.marche-picto .icone { width: 1.05rem; height: 1.05rem; }
.marche-1 .marche-picto { background: var(--accent-wash); }
.marche-socle-trait { position: relative; display: flex; align-items: center; min-height: 1.75rem; }
.marche-socle-barre { flex: 1; height: 1.25rem; border-radius: 6px; }
.marche-picto-cerveau { position: absolute; left: 0.25rem; top: 50%; translate: 0 -50%; border: 2px solid var(--violet); color: var(--violet-text); animation: marche-picto 0.5s var(--courbe) 1.4s both; }
@keyframes marche-picto { from { opacity: 0; scale: 0.6; } }
@media (max-width: 60rem) {
  .marche-1 .marche-barre { height: 2.25rem; }
  .marche-2 .marche-barre { height: 4rem; }
  .marche-3 .marche-barre { height: 6.25rem; }
  .marche-4 .marche-barre { height: 8.5rem; }
  .marche-picto { width: 1.5rem; height: 1.5rem; }
  .marche-picto .icone { width: 0.9rem; height: 0.9rem; }
  .marche-barre { padding-top: 0.2rem; }
}

/* ---------- V2 — Cerveau entreprise, en-tête : le cerveau au centre du noyau (2026-10-06) ---------- */
.cv-coeur-glyphe .cv-glyphe { color: var(--violet-text); }
.cv-coeur-glyphe { animation: cv-fondu 0.6s ease 0.9s both; }
/* En-tête de la page : le bas du schéma aligné sur le bas des boutons (demande du dirigeant du 2026-10-06). */
.entete-cerveau > .wrap { align-items: end; }

/* ---------- V2 — Qui sommes-nous, 02 : le cerveau au centre du noyau (2026-10-06) ---------- */
/* Il remplace le point qui battait ; il bat à son tour, doucement, le même nombre de fois. */
.qs-eq-cerveau { color: var(--violet-text); transform-box: fill-box; transform-origin: center; }

/* ---------- V2 — Qui sommes-nous, en-tête : un point violet vers vos objectifs (2026-10-06) ---------- */
/* Les signaux de la mise en phase deviennent des points violets, ronds, qui partent de chaque
   élément et arrivent sur vos objectifs (demande du dirigeant). Trait de longueur nulle à bout
   rond = un point ; période de 120 pour qu'aucun point ne reparaisse en bout de lien au départ.
   Même rythme qu'avant : deux passages par cycle, quand les éléments sont en phase, quatre cycles. */
.qs-signal { stroke: var(--violet); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0.01 120; }

/* ---------- V2 — Qui sommes-nous, 02 : le cerveau puis les agents s'allument un par un (2026-10-06) ---------- */
/* Un relais de 13 temps de 0,6 s (cycle de 7,8 s) : le cerveau s'allume, son onde part, puis
   chaque agent prend tour à tour un cadre et un fond violets (demande du dirigeant). Quatre
   cycles, puis tout revient au repos : rien ne bouge au-delà de ~38 s, comme l'en-tête (WCAG
   2.2.2). Lancé à l'apparition de la section, coupé si l'appareil réduit les animations. */
.qs-eq-cerveau { animation: qs-eq-cerveau-clignote 7.8s ease-in-out 4; }
.qs-eq-regles { animation: qs-eq-regles-clignote 7.8s ease-in-out 4; }
.qs-eq-onde { animation: qs-eq-onde-relais 7.8s ease-out 4; }
.qs-eq-agent { animation: qs-eq-clignote 7.8s ease-in-out 4; }
.qs-eq-agent .icone { animation: qs-eq-clignote-icone 7.8s ease-in-out 4; }
.qs-eq-agent:nth-child(1), .qs-eq-agent:nth-child(1) .icone { animation-delay: 0.6s; }
.qs-eq-agent:nth-child(2), .qs-eq-agent:nth-child(2) .icone { animation-delay: 1.2s; }
.qs-eq-agent:nth-child(3), .qs-eq-agent:nth-child(3) .icone { animation-delay: 1.8s; }
.qs-eq-agent:nth-child(4), .qs-eq-agent:nth-child(4) .icone { animation-delay: 2.4s; }
.qs-eq-agent:nth-child(5), .qs-eq-agent:nth-child(5) .icone { animation-delay: 3.0s; }
.qs-eq-agent:nth-child(6), .qs-eq-agent:nth-child(6) .icone { animation-delay: 3.6s; }
.qs-eq-agent:nth-child(7), .qs-eq-agent:nth-child(7) .icone { animation-delay: 4.2s; }
.qs-eq-agent:nth-child(8), .qs-eq-agent:nth-child(8) .icone { animation-delay: 4.8s; }
.qs-eq-agent:nth-child(9), .qs-eq-agent:nth-child(9) .icone { animation-delay: 5.4s; }
.qs-eq-agent:nth-child(10), .qs-eq-agent:nth-child(10) .icone { animation-delay: 6.0s; }
.qs-eq-agent:nth-child(11), .qs-eq-agent:nth-child(11) .icone { animation-delay: 6.6s; }
.qs-eq-agent:nth-child(12), .qs-eq-agent:nth-child(12) .icone { animation-delay: 7.2s; }
@keyframes qs-eq-cerveau-clignote { 0%, 9%, 100% { transform: scale(1); } 3%, 6% { transform: scale(1.18); } }
@keyframes qs-eq-regles-clignote { 0%, 9%, 100% { fill: color-mix(in srgb, var(--violet) 10%, var(--fond, var(--bg))); } 3%, 6% { fill: color-mix(in srgb, var(--violet) 28%, var(--fond, var(--bg))); } }
@keyframes qs-eq-onde-relais { 0% { opacity: 0; transform: scale(1); } 3% { opacity: 0.55; transform: scale(1); } 18% { opacity: 0; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes qs-eq-clignote {
  0%, 9%, 100% { border-color: var(--accent-text); background-color: var(--fond, var(--bg)); }
  2.5%, 6% { border-color: var(--violet); background-color: color-mix(in srgb, var(--violet) 14%, var(--fond, var(--bg))); }
}
@keyframes qs-eq-clignote-icone { 0%, 9%, 100% { color: var(--accent-text); } 2.5%, 6% { color: var(--violet-text); } }

/* (2026-10-08, A98) Les pastilles verticales de langue et de thème du 2026-10-06 sont
   remplacées par le code de la langue et une icône : voir « .reglage ». */

/* ---------- Page Questions fréquentes (P24, A85) ---------- */
/* En-tête : une grande recherche, puis les questions les plus posées. Dessous, deux colonnes :
   les filtres (thème, offre), collants sur grand écran, et les questions par thème. Sur
   téléphone, les filtres se replient derrière un bouton. Jetons de la charte uniquement. */
.entete-faq > .wrap { padding-block-end: var(--space-12); }
.faq-recherche { max-width: 44rem; }
.faq-recherche-champ { position: relative; display: flex; align-items: center; }
.faq-recherche-champ > .icone { position: absolute; left: var(--space-4); width: 1.35rem; height: 1.35rem; color: var(--accent-text); pointer-events: none; }
.faq-recherche-champ input {
  width: 100%; min-height: 3.5rem; padding: 0 6.5rem 0 3.25rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--fg);
  font: inherit; font-size: var(--text-md);
  transition: border-color 0.15s ease;
}
.faq-recherche-champ input::placeholder { color: var(--muted); }
.faq-recherche-champ input:hover { border-color: color-mix(in srgb, var(--accent-text) 45%, var(--border)); }
.faq-recherche-champ input:focus-visible { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 22%, transparent); }
.faq-recherche-champ input::-webkit-search-cancel-button { display: none; }
.faq-recherche-effacer { position: absolute; right: 3rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.faq-recherche-effacer:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
.faq-recherche-effacer .icone { width: 1.1rem; height: 1.1rem; }
.faq-raccourci { position: absolute; right: var(--space-4); display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border: 1px solid var(--border); border-radius: 6px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.faq-recherche-champ:focus-within .faq-raccourci { display: none; }
.faq-recherche-champ:focus-within .faq-recherche-effacer { right: var(--space-2); }
@media (hover: none) { .faq-raccourci { display: none; } .faq-recherche-effacer { right: var(--space-2); } }

.faq-populaires { display: grid; gap: var(--space-2); max-width: 60rem; }
.faq-populaires-titre { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.faq-populaires-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-8); }
.faq-populaires-liste a { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) 0; color: var(--fg); font-size: var(--text-sm); line-height: 1.4; text-decoration: none; }
.faq-populaires-liste a::before { content: "→"; flex: none; color: var(--violet-text); font-family: var(--font-mono); transition: transform 0.15s ease; }
.faq-populaires-liste a:hover { color: var(--accent-text); }
.faq-populaires-liste a:hover::before { transform: translateX(3px); }

.faq-grille { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: var(--space-12); align-items: start; }

/* Filtres : une liste par groupe, une ligne par choix, son nombre à droite. */
.faq-filtres { position: sticky; top: calc(var(--hauteur-entete) + var(--space-6)); max-height: calc(100vh - var(--hauteur-entete) - var(--space-12)); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--space-6); }
.faq-filtres-panneau { display: grid; gap: var(--space-6); }
.faq-filtre-groupe { display: grid; gap: var(--space-2); }
.faq-filtre-titre { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.faq-filtre-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.faq-filtre {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 2.25rem; padding: 0 var(--space-2);
  border: 0; border-radius: 8px; background: transparent; color: var(--fg);
  font: inherit; font-size: var(--text-sm); line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.faq-filtre .icone { flex: none; width: 1.1rem; height: 1.1rem; color: var(--accent-text); }
.faq-filtre-nom { flex: 1; min-width: 0; padding-block: var(--space-1); }
.faq-filtre .compte { flex: none; min-width: 1.75rem; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 7%, transparent); font-family: var(--font-mono); font-size: var(--text-xs); text-align: center; color: var(--muted); }
.faq-filtre:hover { background: color-mix(in srgb, var(--accent-text) 8%, transparent); color: var(--accent-text); }
.faq-filtre[aria-current="true"], .faq-filtre[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent-text); font-weight: 700; box-shadow: inset 3px 0 0 var(--violet); }
.faq-filtre[aria-current="true"] .compte, .faq-filtre[aria-pressed="true"] .compte { background: var(--accent); color: var(--ink-on-accent); }
.faq-filtre-vide { opacity: 0.45; }

/* Barre des résultats : le nombre, les filtres actifs, tout déplier. */
.faq-resultats { display: grid; gap: var(--space-12); min-width: 0; scroll-margin-top: calc(var(--hauteur-entete) + var(--space-4)); }
.faq-resultats:focus { outline: none; }
.faq-barre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: calc(var(--space-6) * -1); }
.faq-compte { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.faq-actifs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.faq-actif { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 1.9rem; padding: 0 var(--space-2) 0 var(--space-4); border: 1px solid color-mix(in srgb, var(--accent-text) 40%, var(--border)); border-radius: 999px; background: var(--accent-wash); color: var(--accent-text); font: inherit; font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.faq-actif span { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: 1rem; line-height: 1; }
.faq-actif:hover span { background: color-mix(in srgb, var(--accent-text) 15%, transparent); }
.faq-deplier { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; padding: var(--space-1) var(--space-2); border: 0; border-radius: 8px; background: transparent; color: var(--accent-text); font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.faq-deplier:hover { background: color-mix(in srgb, var(--accent-text) 8%, transparent); }
.faq-deplier .icone { width: 1rem; height: 1rem; }

/* Un thème : son pictogramme, son nom, une phrase ; puis ses questions. */
.faq-theme { display: grid; gap: var(--space-4); scroll-margin-top: calc(var(--hauteur-entete) + var(--space-4)); }
.faq-theme-tete { display: flex; align-items: center; gap: var(--space-4); }
.faq-theme-picto { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--accent-wash); color: var(--accent-text); }
.faq-theme-picto .icone { width: 1.35rem; height: 1.35rem; }
.faq-theme-titre { font-size: var(--text-xl); line-height: 1.2; }
.faq-theme-intro { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--muted); }

/* Une question : le titre, le signe +, et la réponse. */
.faq-liste { gap: var(--space-2); }
.faq-q { scroll-margin-top: calc(var(--hauteur-entete) + var(--space-4)); transition: border-color 0.15s ease; }
.faq-q:hover { border-color: color-mix(in srgb, var(--accent-text) 40%, var(--border)); }
.faq-q[open] { border-color: color-mix(in srgb, var(--accent-text) 55%, var(--border)); }
.replis > details.faq-q > summary { font-size: var(--text-md); font-weight: 700; line-height: 1.35; }
.faq-q > summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; border-radius: var(--radius-card); }
.faq-r { gap: var(--space-4); }
.faq-r-texte { display: grid; gap: var(--space-2); max-width: 46rem; font-size: var(--text-md); line-height: 1.6; color: var(--fg); }
.faq-r-texte p, .faq-r-texte ul { margin: 0; }
.faq-r-texte ul { padding-left: 1.25rem; display: grid; gap: var(--space-1); }
.faq-r-texte li::marker { color: var(--accent-text); }
.faq-r-texte a { color: var(--accent-text); }
.faq-q mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, var(--violet) 22%, transparent); color: inherit; }
.faq-r-pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); padding-top: var(--space-4); border-top: 1px dashed var(--border); font-size: var(--text-sm); }
.faq-r-offres, .faq-r-liens { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.faq-r-etiquette { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.faq-tag { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 1.75rem; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: 999px; color: var(--fg); font-size: var(--text-xs); font-weight: 700; text-decoration: none; }
.faq-tag .icone { width: 0.95rem; height: 0.95rem; color: var(--accent-text); }
.faq-tag:hover { border-color: var(--accent-text); color: var(--accent-text); }
.faq-r-liens a { color: var(--accent-text); font-weight: 700; text-decoration: none; }
.faq-r-liens a::after { content: " →"; }
.faq-r-liens a:hover { text-decoration: underline; }
.faq-copier { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; padding: var(--space-1) var(--space-2); border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.faq-copier:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); }
.faq-copier .icone { width: 0.95rem; height: 0.95rem; }
.faq-copier.copie { color: var(--accent-text); }

/* Aucun résultat. */
.faq-vide { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); border: 1px dashed var(--border); border-radius: var(--radius-card); text-align: center; color: var(--muted); }
.faq-vide-picto { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent-wash); color: var(--accent-text); }
.faq-vide-picto .icone { width: 1.5rem; height: 1.5rem; }
.faq-vide-titre { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--fg); }
.faq-vide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }

/* Téléphone et tablette : une colonne ; les filtres derrière un bouton, en puces. */
.faq-filtres-bouton { display: none; }
@media (max-width: 60rem) {
  .faq-grille { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .faq-filtres { position: static; max-height: none; overflow: visible; gap: var(--space-4); }
  .faq-filtres-bouton:not([hidden]) {
    display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; min-height: 2.75rem; padding: 0 var(--space-4);
    border: 1.5px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--fg);
    font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer;
  }
  .faq-filtres-bouton .icone { width: 1.1rem; height: 1.1rem; color: var(--accent-text); }
  .faq-filtres-bouton[aria-expanded="true"] { border-color: var(--accent-text); }
  .faq-filtres-nombre { display: grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--accent); color: var(--ink-on-accent); font-size: var(--text-xs); }
  .js .faq-filtres-panneau:not(.ouvert) { display: none; }
  .faq-filtres-panneau { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  .faq-filtre-liste { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .faq-filtre { width: auto; min-height: 2.25rem; padding: 0 var(--space-2) 0 var(--space-4); border: 1px solid var(--border); border-radius: 999px; }
  .faq-filtre .icone { display: none; }
  .faq-filtre[aria-current="true"], .faq-filtre[aria-pressed="true"] { box-shadow: none; border-color: var(--accent-text); }
  .faq-populaires-liste { grid-template-columns: minmax(0, 1fr); }
  .faq-barre { margin-bottom: calc(var(--space-4) * -1); }
  .faq-deplier { margin-left: 0; }
}
@media (max-width: 40rem) {
  .replis > details.faq-q > summary { font-size: var(--text-sm); }
  .faq-r-texte { font-size: var(--text-sm); }
  .faq-theme-titre { font-size: var(--text-lg); }
  .faq-recherche-champ input { min-height: 3.25rem; font-size: 1rem; }
}

/* ---------- Le numéro de téléphone, dessiné (A86) ---------- */
/* Un masque : le dessin (assets/img/telephone.svg, tracés seuls) prend la couleur du lien et
   du thème. Dimensions du dessin en em de la police du texte (scripts/telephone-svg.swift) :
   9,024 × 1,303, ligne de base à 0,303 du bas. */
.telephone { display: inline-block; color: inherit; text-decoration: none; }
a.telephone { color: var(--accent-text); }
.pied a.telephone { color: inherit; }
.telephone-dessin {
  display: inline-block; width: 9.024em; height: 1.303em; vertical-align: -0.303em;
  background: currentColor;
  -webkit-mask: url("/assets/img/telephone.svg") center / 100% 100% no-repeat;
  mask: url("/assets/img/telephone.svg") center / 100% 100% no-repeat;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.telephone:hover .telephone-dessin { opacity: 0.8; }
@media (forced-colors: active) { .telephone-dessin { forced-color-adjust: none; background: LinkText; } }

/* ---------- Qui sommes-nous, 04 : la localisation (A87) ---------- */
/* À gauche, sur place, en visio, un seul tarif ; à droite, la France schématique : la zone du
   bassin annécien (violet, son onde), et des liaisons en visio parcourues par un point violet,
   l'une après l'autre. Cycle de 6 s, six fois, puis arrêt ; coupé si l'appareil réduit les
   animations (les liaisons et les points restent). */
.qs-localisation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-12); align-items: center; }
.qs-carte { width: 100%; max-width: 32rem; justify-self: center; }
.qs-carte-svg { display: block; width: 100%; height: auto; overflow: visible; }
.qs-carte-pays { fill: color-mix(in srgb, var(--accent-text) 7%, var(--fond, var(--bg))); stroke: color-mix(in srgb, var(--accent-text) 45%, var(--fond, var(--bg))); stroke-width: 1.5; stroke-linejoin: round; }
.qs-carte-lien { fill: none; stroke: color-mix(in srgb, var(--accent-text) 50%, var(--fond, var(--bg))); stroke-width: 1.5; stroke-dasharray: 4 5; }
.qs-carte-signal { fill: none; stroke: var(--violet); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0.01 120; stroke-dashoffset: 0.01; opacity: 0; animation: qs-carte-signal 6s linear 6; }
.qs-carte-client { fill: var(--accent-text); stroke: var(--fond, var(--bg)); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: qs-carte-client 6s ease-out 6; }
.qs-carte-zone { fill: color-mix(in srgb, var(--violet) 16%, transparent); stroke: var(--violet); stroke-width: 1.5; }
.qs-carte-onde { fill: none; stroke: var(--violet); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: qs-carte-onde 3s ease-out 12; }
.qs-carte-repere { fill: var(--violet); }
.qs-carte-repere-coeur { fill: var(--fond, var(--bg)); }
.qs-carte-texte { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; fill: var(--violet-text); paint-order: stroke; stroke: var(--fond, var(--bg)); stroke-width: 4px; stroke-linejoin: round; }
.qs-carte-n2 { animation-delay: 0.45s; } .qs-carte-n3 { animation-delay: 0.9s; } .qs-carte-n4 { animation-delay: 1.35s; }
.qs-carte-n5 { animation-delay: 1.8s; } .qs-carte-n6 { animation-delay: 2.25s; } .qs-carte-n7 { animation-delay: 2.7s; } .qs-carte-n8 { animation-delay: 3.15s; }
@keyframes qs-carte-signal { 0% { stroke-dashoffset: 0.01; opacity: 1; } 22% { stroke-dashoffset: -99.9; opacity: 1; } 23%, 100% { stroke-dashoffset: -99.9; opacity: 0; } }
@keyframes qs-carte-client { 0%, 20% { transform: scale(1); } 25% { transform: scale(1.6); } 34%, 100% { transform: scale(1); } }
@keyframes qs-carte-onde { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
.qs-carte-cle { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-xs); color: var(--muted); }
.qs-carte-cle li { display: inline-flex; align-items: center; gap: var(--space-2); }
.qs-carte-cle-zone { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1.5px solid var(--violet); background: color-mix(in srgb, var(--violet) 16%, transparent); }
.qs-carte-cle-visio { width: 1.5rem; border-top: 1.5px dashed color-mix(in srgb, var(--accent-text) 60%, transparent); }
.apparait:not(.visible) .qs-carte *, .apparait:not(.visible).qs-carte * { animation-play-state: paused; }
@media (max-width: 60rem) { .qs-localisation { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
@media (max-width: 40rem) { .qs-carte-texte { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .qs-carte-signal, .qs-carte-onde { display: none; } }
/* La Suisse : même dessin, un ton plus léger ; son nom en petit. */
.qs-carte-suisse { fill: color-mix(in srgb, var(--accent-text) 4%, var(--fond, var(--bg))); }
.qs-carte-nom { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; fill: var(--muted); }
.qs-carte-n9 { animation-delay: 3.6s; }
@media (max-width: 40rem) { .qs-carte-nom { font-size: 11px; } }
/* Titre de la section : « en France comme en Suisse » passe d'un bloc à la ligne. */
h2#localisation .accent { display: inline-block; }

/* ---------- Audit entreprise : la carte du temps et les portées des audits (2026-10-08) ----------
   Lot de la page /offres/audit-entreprise/ (_includes/fiches.njk, macros carteTemps et
   portees, remplacée par un tableau le 2026-10-10), fusionné dans site.css (fin de feuille) le 2026-10-08. Mêmes principes que
   les autres visuels d'offre : animations jouées une seule fois, à l'apparition ; rien ne tourne
   sans fin, donc rien à arrêter à 40 s (animations.js) ; tout est coupé si l'appareil réduit les
   animations (règle générale de site.css), et l'état de base est l'état final lisible. Couleurs :
   jetons seulement ; le violet marque la recommandation de départ et l'offre de la page. */

/* Un visuel encore sous la ligne de flottaison attend d'être à l'écran pour s'animer : la fiche
   du relevé de temps (section 04, f.document). Complète la règle
   de site.css qui couvre déjà .cahier et .regles, sous ses deux formes. */
.apparait:not(.visible) .doc *,
.apparait:not(.visible).doc * { animation-play-state: paused; }

/* Mouvement réduit : aucun point ni signal ne circule dans ces deux visuels, donc rien à retirer ;
   la règle générale de site.css coupe les animations et laisse l'état final (barres pleines,
   pastilles visibles, départ en violet, cases couvertes allumées). */

/* ----- En-tête : la carte du temps -----
   La piste et les barres du graphique d'heures de l'accueil (.barre-piste, .barre, .duree-N,
   .a-confier), regroupées par domaine métier ; la préconisation en pastille ; la recommandation
   de départ en violet (le résultat retenu, comme la matrice de l'Audit métiers). Aucune valeur
   affichée (A61). Horloge commune : les domaines métiers entrent à 0,3, 0,9 et 1,5 s, leurs barres
   poussent aussitôt, les préconisations suivent l'ordre de lecture de 2,7 à 4,2 s, le cadre violet
   et « Par où commencer » arrivent à 4,8 s ; tout est fini vers 5,4 s. */
.tps-domaines, .tps-taches { list-style: none; margin: 0; padding: 0; display: grid; }
/* Carte du temps resserrée pour tenir à la hauteur du texte de l'en-tête (A133, 2026-10-09). */
.doc.tps { gap: 0.75rem; }
.tps-domaines { gap: 0.5rem; }
.tps-taches { gap: var(--space-1); }
.tps-domaine { display: grid; gap: var(--space-1); animation: doc-ligne 0.6s var(--courbe) calc(0.3s + var(--tps-d, 0s)) both; }
.tps-domaine:nth-child(2) { --tps-d: 0.6s; } .tps-domaine:nth-child(3) { --tps-d: 1.2s; }
.tps-domaine-nom { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.tps-domaine-nom .icone { width: 1.25rem; height: 1.25rem; flex: none; }
.tps-tache { display: grid; gap: 0.3rem; padding: 0.35rem var(--space-4); border: 2px solid transparent; border-radius: 10px; font-size: var(--text-sm); }
.tps-tache:nth-child(2) { --tps-t: 0.1s; --tps-p: 0.3s; }
.tps-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); }
.tps-nom { display: grid; gap: 2px; }
@media (min-width: 40.01rem) { .tps-ligne { flex-wrap: nowrap; } .tps-nom { flex: 1 1 auto; min-width: 0; } }
.tps .barre { animation-delay: calc(0.4s + var(--tps-d, 0s) + var(--tps-t, 0s)); }
.tps-reponse { padding: 0.1rem 0.55rem; border: 1px solid var(--accent-text); border-radius: 999px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg); white-space: nowrap; animation: doc-coche 0.4s var(--courbe) calc(2.7s + var(--tps-d, 0s) + var(--tps-p, 0s)) both; }
.tps-garder .tps-reponse { border-style: dashed; border-color: var(--muted); color: var(--muted); }
.tps-depart { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 8%, var(--fond)); animation: tps-retenu 0.6s var(--courbe) 4.8s both; }
.tps-depart .ch-mention { animation: doc-ligne 0.6s var(--courbe) 4.8s both; }
@keyframes tps-retenu { from { border-color: transparent; background-color: transparent; } }
.tps .barre-piste { height: 0.65rem; }
.tps-cle { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding-top: var(--space-1); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 40rem) { .tps-tache { padding-inline: var(--space-2); } }

/* ---------- Setup assistant IA (2026-10-08) ----------
   Lot « setup-assistant-ia », fusionné dans site.css le 2026-10-08.
   Page /offres/setup-assistant-ia/ (barreau 2 bis, décision du dirigeant du 2026-10-08). Deux
   visuels de _includes/fiches-realisations.njk : l'en-tête (espaceAssistants : l'outil, un
   assistant par équipe, vos documents de référence) et la section 02 (modes : assistant,
   automatisation ou agent). Mêmes principes que les autres visuels (site.css, bloc des visuels des
   pages d'offre et Maîtrise, A46) : jetons de tokens.css seulement ; une horloge commune de 6 s par
   visuel ; animations lancées à l'apparition, arrêtées après 40 s par animations.js, coupées si
   l'appareil réduit les animations (règle générale de site.css) ; à l'arrêt, chaque visuel
   montre son état de repos, lisible. Pas de violet dans l'en-tête (rien n'y est décidé) ; dans
   la section 02, le violet ne marque que la personne qui décide ou valide. */

/* Un visuel encore sous la ligne de flottaison attend d'être à l'écran pour s'animer (ajout de
   .modes aux règles de pause des visuels de la page Offres, A44, sous ses deux formes : le visuel dans un
   bloc qui apparaît, ou le visuel qui apparaît lui-même). */
.apparait:not(.visible) .modes *,
.apparait:not(.visible) .modes *::before,
.apparait:not(.visible) .modes *::after,
.apparait:not(.visible).modes *,
.apparait:not(.visible).modes *::before,
.apparait:not(.visible).modes *::after { animation-play-state: paused; }

/* Sans mouvement, un point qui circule n'a pas de place fixe : on le retire (ajout à la liste
   « .fv-jeton, .fm-onde » du mouvement réduit). */
@media (prefers-reduced-motion: reduce) {
  .espace-signal, .mode-lien .trajet::before { display: none; }
}

/* ----- Setup assistant IA : l'outil, un assistant par équipe, vos documents de référence ----- */
/* Horloge de 6 s, à partir de 1,8 s : le point monte des documents vers l'outil (0 à 1 s), puis
   la ligne de chaque équipe s'allume tour à tour (2,8 s, 4 s et 5,2 s). État de repos : tout
   est affiché, rien n'est allumé, le point est invisible. */
.vitrine.espace { gap: 0; }
.espace > .vitrine-etiquette { margin-bottom: var(--space-4); }
.espace > .vitrine-legende { margin-top: var(--space-4); }
.espace-outil { display: grid; gap: var(--space-4); padding: var(--space-4); border: 2px solid var(--accent-text); border-radius: var(--radius-card); background: color-mix(in srgb, var(--accent-wash) 60%, var(--fond)); }
.espace .doc-tete { flex-wrap: wrap; padding-bottom: var(--space-2); }
.espace-detail { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.espace-assistants { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.espace-assistant { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--fond); animation: doc-ligne 0.6s var(--courbe) 0.4s both, espace-actif 6s ease-in-out 2.8s infinite; }
.espace-assistant:nth-child(2) { animation-delay: 0.7s, 4s; }
.espace-assistant:nth-child(3) { animation-delay: 1s, 5.2s; }
.espace-assistant > .icone { width: 2.25rem; height: 2.25rem; padding: 0.5rem; border-radius: 50%; background: var(--accent-wash); }
.espace-equipe { display: block; font-family: var(--font-display); font-size: var(--text-md); line-height: 1.25; }
.espace-demande, .espace-lieu { display: block; font-size: var(--text-sm); line-height: 1.4; color: var(--muted); }
.espace-copie { position: relative; display: flex; justify-content: center; height: 3rem; animation: cv-fondu 0.5s ease 1.2s both; }
.espace-fil { position: relative; width: 2px; height: 100%; background: color-mix(in srgb, var(--accent-text) 45%, var(--fond)); }
.espace-fil::after { content: ""; position: absolute; top: 1px; left: 50%; width: 8px; height: 8px; border-top: 2px solid var(--accent-text); border-left: 2px solid var(--accent-text); transform: translateX(-50%) rotate(45deg); }
.espace-signal { position: absolute; left: -4px; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-text); opacity: 0; animation: espace-signal 6s ease-in-out 1.8s infinite; }
.espace-copie-nom { position: absolute; top: 50%; left: calc(50% + var(--space-4)); transform: translateY(-50%); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.espace-reference { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--accent-text) 28%, var(--border)); border-radius: var(--radius-card); background: color-mix(in srgb, var(--accent-text) 7%, var(--fond)); animation: doc-ligne 0.6s var(--courbe) 1.3s both; }
.espace-reference > .icone { width: 2.25rem; height: 2.25rem; }
.espace-reference strong { display: block; font-family: var(--font-display); font-size: var(--text-md); line-height: 1.25; }
@keyframes espace-signal { 0% { bottom: 0; opacity: 0; } 3%, 13% { opacity: 1; } 16% { bottom: calc(100% - 10px); opacity: 0; } 100% { bottom: calc(100% - 10px); opacity: 0; } }
@keyframes espace-actif { 0%, 17%, 100% { border-color: var(--border); background: var(--fond); } 3%, 14% { border-color: var(--accent-text); background: color-mix(in srgb, var(--accent-text) 8%, var(--fond)); } }
@media (max-width: 40rem) {
  .espace-detail { margin-left: 0; flex-basis: 100%; }
  .espace-reference { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .espace-reference .doc-badge { grid-column: 2; justify-self: start; margin-left: 0; }
}

/* ----- Setup assistant IA : assistant, automatisation ou agent ----- */
/* Trois cartes de même forme : qui lance, qui fait, qui décide. Horloge de 6 s, 2 s par carte,
   de gauche à droite : le point parcourt chaque lien, puis l'étape suivante grossit un instant.
   Le point du trajet a une opacité de base nulle : à l'arrêt, il est invisible. */
.modes { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.mode { --mode-d: 0s; display: grid; grid-template-rows: auto auto auto 1fr; gap: var(--space-4); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.mode:nth-child(2) { --mode-d: 2s; } .mode:nth-child(3) { --mode-d: 4s; }
.mode-retenu { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--degrade) border-box; }
/* L'en-tête de carte : l'icône, puis le nom des offres, qui passe à la ligne dans sa colonne ;
   la mention « Cette offre » dessous, en violet (DESIGN.md § 7, « Mentions : sous le nom »). */
.mode-tete { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.mode-tete > .ch-mention { grid-column: 2; margin-top: -0.25rem; }
.mode-tete > .idx { text-wrap: balance; line-height: 2; }
.mode-tete > .icone { width: 2.25rem; height: 2.25rem; padding: 0.5rem; border-radius: 50%; background: var(--accent-wash); }
.mode h3 { font-size: var(--text-md); line-height: 1.3; }
.mode > p { font-size: var(--text-sm); color: var(--muted); }
.mode-pas { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr) 1.5rem minmax(0, 1fr); align-items: start; }
.mode-etape { display: grid; justify-items: center; gap: var(--space-2); text-align: center; font-size: var(--text-sm); line-height: 1.3; }
.mode-etape > .icone { width: 2.5rem; height: 2.5rem; padding: 0.6rem; border-radius: 50%; background: var(--accent-wash); }
/* Le libellé déborde un peu sous les liens (« Une demande arrive » sur deux lignes), en gardant
   un écart net avec le libellé voisin. */
.mode-etape > span { margin-inline: -0.25rem; }
.mode-personne > .icone { background: var(--surface); border: 1.5px solid var(--border); color: var(--fg); }
.mode-humain > .icone { background: color-mix(in srgb, var(--violet) 12%, var(--surface)); color: var(--violet-text); }
.mode-lien { padding-top: calc(1.25rem - 1px); }
.mode-lien .trajet { background: color-mix(in srgb, var(--accent-text) 30%, var(--surface)); }
.mode-lien .trajet::before { animation: mode-trajet 6s ease-in-out infinite; animation-delay: calc(var(--mode-d) + 0.6s); }
.mode-lien:nth-child(4) .trajet::before { animation-delay: calc(var(--mode-d) + 1.4s); }
.mode-etape:not(:first-child) > .icone { animation: mode-etape 6s ease-in-out infinite; animation-delay: calc(var(--mode-d) + 1.2s); }
.mode-etape:nth-child(5) > .icone { animation-delay: calc(var(--mode-d) + 2s); }
@keyframes mode-trajet { 0% { left: 0; opacity: 0; } 2%, 9% { opacity: 1; } 11% { left: calc(100% - 8px); opacity: 0; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes mode-etape { 0%, 8%, 100% { transform: none; } 4% { transform: scale(1.12); } }
/* Les trois cartes partagent leurs rangées : titres et pas alignés d'une carte à l'autre. */
@supports (grid-template-rows: subgrid) {
  .mode { grid-row: span 4; grid-template-rows: subgrid; }
}
@media (max-width: 60rem) { .modes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) {
  .mode-pas { grid-template-columns: minmax(0, 1fr) 1rem minmax(0, 1fr) 1rem minmax(0, 1fr); }
  .mode-etape > .icone { width: 2.25rem; height: 2.25rem; }
  /* Le lien reste au milieu de l'icône, plus petite. */
  .mode-lien { padding-top: calc(1.125rem - 1px); }
  .mode-etape > span { margin-inline: 0; }
}

/* Une liste de quatre éléments longs se range en deux sur deux, plutôt que trois plus un seul sur
   la deuxième ligne (« Ce que nous attendons de vous », « Un assistant, par exemple », les quatre
   situations du Setup assistant IA) ; une colonne sur téléphone. Les listes .liste-ligne, en
   flex, ne sont pas touchées. */
.liste-titree .liste-icones:has(> li:nth-child(4):last-child), .situations:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }

/* ---------- Audits IA — page et visuel d'en-tête (A97, 2026-10-08) ----------
   Page /audits-ia/ et /en/ai-audits/ (pages/audits-ia.njk, pages/en/audits-ia.njk) ; visuel :
   _includes/audits-visuels.njk. Lot fusionné dans site.css le 2026-10-08. Jetons du design system seulement ;
   animations lancées à l'ouverture, en pause hors écran, coupées si l'appareil réduit les
   animations (règle générale de site.css) : à l'arrêt, chaque visuel reste lisible. */

/* En-tête — « À chaque question, son audit » : une ligne par offre de la famille Analyser,
   la question, puis l'offre et son prix court. Les lignes arrivent l'une après l'autre ; un
   point descend ensuite de ligne en ligne, de la question vers l'offre. Toute la ligne mène
   à la page de l'offre. Le Diagnostic flash, en tête, porte son prix « Gratuit » en pastille. */
.qa { align-content: start; }
.qa .doc-tete .icone { color: var(--accent-text); }
.qa-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.qa-ligne {
  position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1); align-items: center;
  padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent-text) 4%, var(--fond, var(--surface)));
  transition: border-color var(--duree) ease, transform var(--duree) var(--courbe);
  animation: qa-entree 0.6s var(--courbe) backwards;
}
.qa-ligne:hover { border-color: var(--accent-text); transform: translateX(4px); }
.qa-ligne:nth-child(1) { animation-delay: 0.35s; }
.qa-ligne:nth-child(2) { animation-delay: 0.5s; }
.qa-ligne:nth-child(3) { animation-delay: 0.65s; }
.qa-ligne:nth-child(4) { animation-delay: 0.8s; }
.qa-ligne:nth-child(n+5) { animation-delay: 0.95s; }
.qa-gratuit { border-color: color-mix(in srgb, var(--accent-text) 55%, var(--border)); }
.qa-picto { grid-row: span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: color-mix(in srgb, var(--accent-text) 12%, var(--fond, var(--surface))); color: var(--accent-text); }
.qa-picto .icone { width: 1.35rem; height: 1.35rem; }
.qa-question { margin: 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.35; color: var(--fg); }
/* Le nom de l'offre au-dessus de son prix, toujours plus gros que lui (charte éditoriale § 4) :
   la flèche, puis le nom ; le prix dessous, aligné sur le nom. */
.qa-reponse { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-2); row-gap: 2px; }
.qa-nom { font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; line-height: 1.25; color: var(--accent-text); text-decoration: none; }
.qa-nom::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.qa-ligne:hover .qa-nom { text-decoration: underline; }
.qa-ligne:has(.qa-nom:focus-visible) { border-color: var(--accent-text); }
.qa-prix { grid-column: 2; justify-self: start; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.35; color: var(--muted); }
.qa-gratuit .qa-prix { padding: 0.1rem 0.65rem; border-radius: 999px; background: var(--accent); color: var(--ink-on-accent); }
/* La flèche, de la question vers l'offre ; le point la parcourt, ligne après ligne. */
.qa-trajet { position: relative; width: 1.75rem; height: 2px; background: color-mix(in srgb, var(--accent-text) 30%, var(--fond, var(--surface))); }
.qa-trajet::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-top: 2px solid var(--accent-text); border-right: 2px solid var(--accent-text); transform: translateY(-50%) rotate(45deg); }
.qa-trajet::before { content: ""; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent-text); opacity: 0; animation: qa-point 6s ease-in-out 1.6s infinite; }
.qa-ligne:nth-child(2) .qa-trajet::before { animation-delay: 2.8s; }
.qa-ligne:nth-child(3) .qa-trajet::before { animation-delay: 4s; }
.qa-ligne:nth-child(4) .qa-trajet::before { animation-delay: 5.2s; }
.qa-ligne:nth-child(n+5) .qa-trajet::before { animation-delay: 6.4s; }
@keyframes qa-entree { from { opacity: 0; transform: translateY(8px); } }
@keyframes qa-point { 0% { left: 0; opacity: 0; } 3% { opacity: 1; } 14% { left: calc(100% - 8px); opacity: 1; } 18%, 100% { left: calc(100% - 8px); opacity: 0; } }
@media (max-width: 40rem) {
  .qa-ligne { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-2); padding-inline: var(--space-2); }
  .qa-picto { width: 2.25rem; height: 2.25rem; }
  .qa-picto .icone { width: 1.2rem; height: 1.2rem; }
}

/* 02 — Faut-il un audit ? Les mentions du parcours sous le nom de l'offre (« Sans audit »,
   « Facultatif », « Obligatoire » : charte éditoriale § 4), en petites capitales violettes,
   comme dans le parcours de la page Agents IA. */
.au-suites .aiguillage-note { margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-text); }

/* 04 — Ce qui fait varier le prix : trois curseurs, chacun avec ce qu'il change, et deux
   précisions (« à partir de », lieu de traitement). */
.au-curseur-texte { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--muted); }

/* 05 — Le paiement des audits : deux jalons, la commande et la restitution. */
.au-jalons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) { .au-jalons { grid-template-columns: minmax(0, 1fr); } }

/* Pause hors écran : le visuel, s'il sert plus bas dans une page, attend d'être à l'écran. */
.apparait:not(.visible) .qa *, .apparait:not(.visible) .qa *::before, .apparait:not(.visible) .qa *::after,
.apparait:not(.visible).qa *, .apparait:not(.visible).qa *::before, .apparait:not(.visible).qa *::after { animation-play-state: paused; }

/* Mouvement réduit : les lignes sont affichées d'emblée (règle générale de site.css) ; le point
   n'a pas de place fixe, on le retire. */
@media (prefers-reduced-motion: reduce) { .qa-trajet::before { display: none; } }

/* ---------- Diagnostic flash en ligne et Rendez-vous de cadrage (A99, 2026-10-08) ----------
   Une question par écran, des réponses en tuiles à cliquer, une barre de progression ; puis le
   résultat (jauge de maturité, l'offre pour commencer, les cas d'usage) et la réservation. Sans
   JavaScript, tout s'affiche à la suite, comme un formulaire ordinaire. */
.section-flash .formulaire { max-width: 52rem; }
/* En-tête resserré : la première question se voit sans défiler (A102, pour la conversion). */
.entete-flash > .wrap { padding-block: var(--space-8) var(--space-6); gap: var(--space-4); }
.entete-flash h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.entete-flash .chapo { font-size: var(--text-md); }
.section.section-flash > .wrap { padding-block-start: var(--space-8); }
.section.section-agenda > .wrap { padding-block: var(--space-8) var(--space-12); gap: var(--space-4); }
.flash-vers-rdv { justify-self: start; margin-top: var(--space-4); }
/* Après « Vos questions », une sortie discrète vers le formulaire de contact (A215). */
.questions-autre { margin-top: var(--space-6); }
@media (max-width: 40rem) { .flash-vers-rdv { justify-self: stretch; } }
.flash .flash-question legend { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.flash.flash-actif .flash-question[hidden], .flash-resultat[hidden], .flash-reserver[hidden], .flash-nav[hidden], .flash-progression[hidden] { display: none; }
.tuiles-choix { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.tuiles-choix-serrees { grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); }
.tuiles-choix-larges { grid-template-columns: 1fr; max-width: 40rem; }
.tuile-choix { position: relative; display: block; cursor: pointer; }
.tuile-choix input { position: absolute; top: 50%; transform: translateY(-50%); left: var(--space-4); margin: 0; width: 1.1em; height: 1.1em; accent-color: var(--accent); }
.tuile-choix-corps {
  display: flex; align-items: center; gap: var(--space-2); height: 100%;
  min-height: 52px; padding: var(--space-2) var(--space-4) var(--space-2) calc(var(--space-4) + 1.6em);
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface);
  font-size: var(--text-sm); line-height: 1.35; font-weight: 400;
  transition: border-color var(--duree) ease, transform var(--duree) var(--courbe), background-color var(--duree) ease;
}
.tuile-choix-corps .icone { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--accent-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tuile-choix:hover .tuile-choix-corps { border-color: var(--accent-text); transform: translateY(-1px); }
.tuile-choix input:checked + .tuile-choix-corps { border-color: var(--accent-text); outline: 1px solid var(--accent-text); outline-offset: -2px; background: var(--accent-wash); font-weight: 700; }
.tuile-choix input:focus-visible + .tuile-choix-corps { outline: var(--focus-width) solid var(--accent-text); outline-offset: var(--focus-offset); }
.tuile-choix input:disabled + .tuile-choix-corps { opacity: 0.45; cursor: not-allowed; transform: none; }
.flash-progression { display: grid; gap: var(--space-2); }
.flash-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.flash-nav [data-flash-continuer] { margin-inline-start: auto; }
.flash-nav [hidden] { display: none; }

/* Le résultat */
.flash-resultat { display: grid; gap: var(--space-6); }
.flash-resultat h2 { font-size: var(--text-2xl); }
.flash-resultat h2:focus { outline: none; }
.flash-resultat-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-6); align-items: stretch; }
.flash-resultat .carte { display: grid; gap: var(--space-4); align-content: start; }
.flash-etiquette { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.flash-jauge { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.flash-jauge li { height: 10px; border-radius: 5px; background: var(--border); transition: background-color 0.4s ease; }
.flash-jauge[data-niveau="1"] li:nth-child(-n+1), .flash-jauge[data-niveau="2"] li:nth-child(-n+2),
.flash-jauge[data-niveau="3"] li:nth-child(-n+3), .flash-jauge[data-niveau="4"] li { background: var(--accent) var(--degrade); }
.flash-niveau-nom { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); }
.flash-niveau-nom .idx { display: block; margin-bottom: var(--space-1); }
.flash-offre-choix { display: grid; gap: var(--space-2); }
.flash-offre-choix h3 { font-size: var(--text-lg); }
/* Le nom de l'offre reste plus gros que son prix (règle des cartes d'offre). */
.flash-offre-choix .offre-prix { font-size: var(--text-md); }
.flash-offre-choix h3 a { text-decoration: none; }
.flash-offre-choix h3 a::after { content: " →"; }
.flash-ensuite { color: var(--muted); }
.flash-ensuite[hidden] { display: none; }
/* Les autres pistes (A121) : sous l'offre conseillée, plus discrètes qu'elle, sous un filet. */
.flash-pistes { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.flash-pistes[hidden], .flash-pistes-liste li[hidden] { display: none; }
.flash-pistes-liste { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.flash-pistes-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-2); align-items: baseline; font-size: var(--text-sm); }
.flash-pistes-liste a { font-weight: 700; text-decoration: none; }
.flash-pistes-liste a::after { content: " →"; }
.flash-piste-prix { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.flash-piste-si { grid-column: 1 / -1; color: var(--muted); }
.flash-a-savoir[hidden] { display: none; }
.flash-cas { display: grid; gap: var(--space-4); }
.flash-cas h3 { font-size: var(--text-lg); }
.flash-cas-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); counter-reset: cas; }
.flash-cas-liste li {
  counter-increment: cas; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; column-gap: var(--space-4); row-gap: 2px; align-items: baseline;
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface);
}
.flash-cas-liste li[hidden] { display: none; }
.flash-cas-liste li::before { content: counter(cas, decimal-leading-zero); grid-row: span 2; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-text); }
.flash-cas-liste a { font-weight: 700; text-decoration: none; }
.flash-cas-liste a:hover { text-decoration: underline; }
.flash-cas-domaine { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); text-align: right; }
.flash-cas-gain { grid-column: 2 / -1; font-size: var(--text-sm); color: var(--muted); }
.flash-avertissement { font-style: italic; }
.flash-reserver { display: grid; gap: var(--space-6); padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--accent-wash); }
.flash-reserver h2 { font-size: var(--text-xl); }
.flash-reserver .formulaire-nav { justify-content: flex-start; }
@media (max-width: 48rem) {
  .flash-resultat-grille { grid-template-columns: 1fr; }
  .flash-cas-liste li { grid-template-columns: 2rem minmax(0, 1fr); }
  .flash-cas-domaine { grid-column: 2; text-align: left; }
  .flash-reserver { padding: var(--space-6) var(--space-4); }
  .flash .flash-question legend { font-size: var(--text-lg); }
  /* Les 16 secteurs sur deux colonnes : la question tient sur un écran de téléphone. */
  .tuiles-choix-serrees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuiles-choix-serrees .tuile-choix-corps { min-height: 48px; padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + 1.5em); font-size: var(--text-xs); }
  .tuiles-choix-serrees .tuile-choix input { left: var(--space-2); }
}

/* L'agenda Google du Rendez-vous de cadrage : la page de réservation de Google, sur fond clair
   dans les deux thèmes (elle n'a pas de thème sombre). */
.agenda { display: grid; gap: var(--space-2); margin-block: var(--space-6); }
.agenda-cadre { display: block; width: 100%; height: 720px; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; }
/* Sans agenda en ligne (A199) : une phrase et le bouton vers le formulaire de contact. */
.agenda-attente { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.agenda-vide {
  display: grid; place-items: center; align-content: center; gap: var(--space-4); min-height: 16rem; padding: var(--space-8);
  border: 1px dashed var(--muted); border-radius: var(--radius-card); background: var(--surface); text-align: center;
}
.agenda-vide .icone { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--accent-text); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 48rem) { .agenda-cadre { height: 860px; } }
/* Pendant le chargement, le message se lit sous le cadre ; la page de Google le recouvre ensuite. */
.agenda-zone { position: relative; display: grid; }
.agenda-zone::before {
  content: attr(data-chargement); position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--text-sm); color: #565a6b; background: #fff; border-radius: var(--radius-card);
}
.agenda-zone .agenda-cadre { position: relative; background: transparent; }
/* La page Rendez-vous (A102) : un titre, une phrase, l'agenda. */
.section-agenda h1 { font-size: var(--text-2xl); }
.section-agenda .chapo { font-size: var(--text-md); margin-top: var(--space-2); }

/* La fenêtre de l'agenda (A102) : « Prendre RDV » l'ouvre par-dessus la page, sans la quitter ;
   plein écran sur téléphone. */
.agenda-fenetre {
  width: min(60rem, 100% - 2 * var(--space-6)); max-width: none; max-height: none;
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--bg); color: var(--fg); overscroll-behavior: contain;
}
.agenda-fenetre::backdrop { background: rgb(8 9 15 / 0.65); }
.agenda-fenetre-corps { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-4); height: min(54rem, calc(100dvh - 2 * var(--space-6))); padding: var(--space-6); }
.agenda-fenetre-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.agenda-fenetre-tete h2 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.agenda-fenetre-fermer {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer;
}
.agenda-fenetre-fermer:hover { border-color: var(--accent-text); color: var(--accent-text); }
.agenda-fenetre-fermer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.agenda-fenetre .agenda { display: grid; grid-template-rows: minmax(0, 1fr) auto; margin: 0; min-height: 0; }
.agenda-fenetre .agenda-zone, .agenda-fenetre .agenda-vide { min-height: 0; }
.agenda-fenetre .agenda-cadre { height: 100%; min-height: 24rem; }
html.agenda-ouvert { overflow: hidden; }
@media (max-width: 48rem) {
  .agenda-fenetre { width: 100%; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .agenda-fenetre-corps { height: 100dvh; padding: var(--space-4); }
  .agenda-fenetre-tete h2 { font-size: var(--text-lg); }
}

@media print {
  .flash-nav, .flash-reserver, .flash-progression { display: none !important; }
  .tuile-choix-corps, .flash-cas-liste li { break-inside: avoid; }
  /* Le résultat imprimé (A124) : sans l'introduction de la page ; la jauge de maturité garde ses
     couleurs (les fonds ne s'impriment pas d'office) ; les cartes ne se coupent pas. */
  body:has([data-flash-resultat]:not([hidden])) .entete-page { display: none; }
  .flash-jauge li { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .flash-resultat .carte, .flash-a-savoir { break-inside: avoid; }
}

/* ---------- Schéma des unités : la légende à la hauteur du schéma (A106, 2026-10-09) ----------
   Demande du dirigeant : la colonne de droite fait la même hauteur que le schéma de gauche. Sur
   grand écran, le schéma occupe deux rangées (le cadre, puis la légende des signes) qu'il partage
   avec la grille (subgrid) ; la colonne de droite occupe la première, celle du cadre : mêmes haut
   et bas. Ses niveaux se partagent cette hauteur à parts égales, leur texte centré. Pages Agents
   IA, Agents métiers et Agent de processus. */
@media (min-width: 60.0625rem) {
  .unites { grid-template-rows: auto auto; gap: var(--space-2) var(--space-8); align-items: stretch; }
  .unites .emb { grid-column: 1; grid-row: 1 / span 2; grid-template-rows: subgrid; gap: 0; }
  .unites .unites-cote { grid-column: 2; grid-row: 1; grid-template-rows: minmax(0, 1fr); align-content: stretch; }
  .unites .unites-legende { grid-auto-rows: 1fr; align-content: stretch; }
  .unites .unites-legende li { align-items: center; }
}

/* En-tête de la page Agents IA, deux voies (option A, A107, 2026-10-09) : à gauche « Vos équipes »,
   le Setup assistant IA ; une ligne en pointillés ; à droite « Vos agents », l'escalier des trois
   offres d'agents ; dessous, le Cerveau entreprise, commun aux deux. */
.prix-voies { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 3fr); gap: var(--space-4); align-items: stretch; }
.prix-voie { display: grid; grid-template-rows: auto 1fr; gap: var(--space-3, 0.75rem); }
.prix-voie ol { align-self: end; }
.prix-voie-titre { display: block; }
.prix-voie-equipes { position: relative; padding-right: var(--space-4); }
.prix-voie-equipes::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--space-2)); border-right: 1px dashed var(--border); }
.prix-voie-equipes ol { grid-template-columns: minmax(0, 1fr); }
.prix-voie-agents ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.marche-setup .marche-barre { height: 5.75rem; background: color-mix(in srgb, var(--violet) 45%, var(--surface)); animation-delay: 0.2s; }
.marche-setup .marche-picto { color: var(--violet-text); }
@media (max-width: 40rem) {
  .prix-voies { gap: var(--space-2); }
  .prix-voie-equipes { padding-right: var(--space-2); }
  .prix-voie-equipes::after { right: calc(-1 * var(--space-1)); }
  .marche-setup .marche-barre { height: 5rem; }
}

/* ---------- Onglet du Diagnostic flash (A159, 2026-10-10) ----------
   Demande du dirigeant : un appel discret au Diagnostic flash sur toutes les pages, sauf la sienne,
   rectangulaire, sur un bord du site, absent sur téléphone. Un onglet vertical collé au bord droit,
   à mi-hauteur : 36 px de large, moins que la marge des pages dès 64rem (41 px à 1 024 px, la marge
   grandit ensuite) ; il ne couvre donc jamais le texte. Largeur en px (marges et icône) : elle reste
   sous la marge des pages, même avec une police agrandie dans le navigateur ; le texte suit, lui, la
   taille choisie. Au survol, il sort de 4 px. Gabarit : _includes/partials/onglet-flash.njk. */
.onglet-flash { display: none; }
@media (min-width: 64rem) {
  .onglet-flash {
    position: fixed; top: 50%; right: 0; z-index: 15;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-4) 9px; overflow: hidden;
    border: 1px solid var(--border); border-right: 0; border-left: 0; border-radius: 10px 0 0 10px;
    background: var(--surface); color: var(--fg);
    font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 24px rgb(8 9 15 / 0.16);
    transform: translate(0, -50%);
    transition: transform 0.2s var(--courbe), border-color 0.2s var(--courbe);
    animation: onglet-entree 0.6s var(--courbe) 1.2s backwards;
  }
  /* Le liseré en dégradé, sur le côté qui regarde la page ; le cadre l'arrondit à ses coins. */
  .onglet-flash::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--accent) var(--degrade); }
  .onglet-flash .icone { width: 17px; height: 17px; }
  /* Le texte se lit de bas en haut, comme le dos d'un classeur rangé à droite. */
  .onglet-flash-texte { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .onglet-flash-detail { color: var(--muted); font-weight: 500; }
  .onglet-flash:hover, .onglet-flash:focus-visible { transform: translate(-4px, -50%); border-color: var(--accent-text); color: var(--fg); }
  .onglet-flash:focus-visible { outline-offset: 2px; }
}
@keyframes onglet-entree { from { transform: translate(100%, -50%); } }
@media (prefers-reduced-motion: reduce) { .onglet-flash { animation: none; transition: none; } }
@media print { .onglet-flash { display: none !important; } }

/* Écran tactile (revue d'ergonomie du 2026-10-10, A193) : les liens « → » et les petits boutons
   gardent une zone de toucher d'au moins 44 px de haut ; pour les liens et les boutons de la FAQ,
   sans rien déplacer : la marge négative rend exactement ce que le remplissage ajoute. */
@media (pointer: coarse) {
  .lien-suite { padding-block: 0.6rem; margin-block: -0.6rem; }
  .faq-deplier, .faq-copier { padding-block: calc(var(--space-1) + 0.45rem); margin-block: -0.45rem; }
  .filtre-puces a, .filtre-puces button { min-height: 44px; }
}

/* ---------- Mesure d'audience : bandeau de consentement et bouton du pied de page (A220) ---------- */
.bandeau-mesure {
  position: fixed; inset: auto var(--space-4) var(--space-4) auto; z-index: 60;
  max-width: 26rem;
  padding: var(--space-4) var(--space-6);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);
  font-size: var(--text-sm); line-height: 1.5;
}
.bandeau-mesure p { margin: 0 0 var(--space-4); }
.bandeau-mesure-boutons { display: flex; gap: var(--space-2); }
.bandeau-mesure-boutons .btn { flex: 1 1 0; min-height: 40px; padding: 0 var(--space-4); }
@media (max-width: 30rem) { .bandeau-mesure { inset-inline: var(--space-2); inset-block-end: var(--space-2); max-width: none; } }
.lien-bouton { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }
.lien-bouton:hover { color: var(--accent-text); }
@media print { .bandeau-mesure { display: none; } }