/* ==========================================================================
   M22VISION — feuille de style unique
   Le terrain, pas le cloud. Voir /DESIGN.md pour le raisonnement.
   ========================================================================== */

/* -- 1. Reset minimal ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}
img, picture, svg { display: block; max-width: 100%; }
/* Garde-fou structurel (LOT 2, découvert en testant en vrai navigateur) : toute
   règle d'auteur qui pose `display` sur une classe (au moins 3 cas déjà rencontrés
   dans ce fichier — .selecteur-metier, .demo-pilotable__toutes, .bouton) court-
   circuite silencieusement l'attribut [hidden], qui perd systématiquement face à
   une règle de MÊME origine (auteur) même à spécificité égale ou inférieure. Une
   seule règle ici, une fois pour toutes, plutôt qu'un correctif par classe à
   chaque nouvelle occurrence. */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

/* -- 2. Tokens -------------------------------------------------------------- */
/* Palette "étiquette d'entrepôt" (LOT 2, mission Refonte v2, 2026-08-15) — voir
   l'historique de cette section dans git log si besoin du détail d'origine
   (accent TEAL, contrastes 16.28:1 / 5.93:1 / 4.77:1).
   REMPLACÉE le 19/08/2026 (demande explicite de Mathéo, style inspiré de
   medeartis.ch — structure regardée en ligne, jamais copiée-collée ni son code
   touché — recoloré avec le code couleur bleu/blanc/rouge de la France) : même
   RÔLE pour chaque token (encre=texte, papier=fond, ardoise=fond sombre,
   marqueur=couleur d'action), seules les VALEURS changent, donc aucune classe
   du reste du fichier n'a besoin d'être retouchée pour cette bascule. Rouge
   réservé au rôle d'accent/action (boutons, liens, mot mis en avant) comme
   l'ancien teal — jamais un aplat de bleu/blanc/rouge, pour rester sobre et pro.
   Contrastes vérifiés AA (calcul WCAG explicite, pas à l'œil) au moment du
   choix : encre sur papier 18.67:1, texte doux 7.35:1, blanc sur marqueur
   5.88:1, marqueur sur papier 5.88:1, marqueur-texte (petit texte/liens)
   9.64:1, papier sur ardoise 16.87:1. */
:root {
  /* Couleurs */
  --encre: #0B1128;
  --papier: #FFFFFF;
  --ardoise: #0F1B3D;
  --marqueur: #C8102E;
  --graphite: #4A5670;
  --craie: #EEF2F8;
  --filet-couleur: #D7DEE8;

  /* Rôles sémantiques (fond papier par défaut) */
  --fond: var(--papier);
  --texte: var(--encre);
  --texte-doux: var(--graphite);
  --accent: var(--marqueur);
  --separateur: var(--filet-couleur);

  /* Typo — budget total plafonné à 100 Ko (contrainte explicite du LOT 2) :
     Archivo Black (titrage, ~16 Ko) + Roboto Mono (chiffres/interface, ~56 Ko)
     = ~72 Ko. Le texte courant utilise la police SYSTÈME du téléphone (zéro
     Ko à charger) — c'est aussi le choix du vrai Jarvis (voir fonts.css). */
  --f-display: 'Archivo Black', 'Arial Narrow', sans-serif;
  --f-texte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Échelle — clamp(min, fluide, max), REFAITE le 2026-08-15 (correctif "typo
     mobile") : chaque taille est désormais calculée pour tenir EXACTEMENT une
     cible en pixels à 390px (borne basse) ET à 1280px (borne haute) — plus une
     borne basse choisie après coup, l'inverse de l'ancienne méthode. Annule la
     décision du 2026-08-13 ("le label eyebrow devient plus grand que le
     titre") : à 390px, l'eyebrow redevient un simple libellé (14-18px), le
     titre (h1/.display) redevient le repère visuel dominant, sur toutes les
     pages y compris le hero d'accueil. Cibles à 390px (données par Mathéo) :
     h1 28-32px/1.15, h2 22-24px/1.2, h3 18-20px/1.3, corps 16-17px/1.5-1.6,
     légendes 13-14px/1.4 — jamais de corps sous 16px (zoom auto iOS sinon). */
  /* ⚠️ 2026-08-15 (correctif, fix technique) : le coefficient devant "vw" avait
     été divisé par 16 par erreur (comme si "vw" avait besoin d'une conversion
     rem, ce qui est faux — vw est déjà une unité absolue liée au viewport, seule
     la partie constante + les bornes min/max ont besoin d'être en rem). Résultat
     avant fix : le terme vw était ~16x trop petit, donc `preferred` restait
     collé à la borne basse sur toute la plage 390→1280px, aucune mise à l'échelle
     réelle (confirmé par mesure : h1 mesurait 32px aussi bien à 390px qu'à
     1280px). Coefficients vw corrigés ci-dessous (×16) ; bornes min/max et la
     partie constante en rem restent inchangées (déjà justes). */
  --fs-mono:    clamp(0.8125rem, 0.7577rem + 0.2247vw, 0.9375rem);
  --fs-sm:      clamp(0.8125rem, 0.7577rem + 0.2247vw, 0.9375rem);
  --fs-body:    clamp(1rem, 0.9726rem + 0.1124vw, 1.0625rem);
  --fs-lead:    clamp(1.0625rem, 0.9803rem + 0.3371vw, 1.25rem);
  --fs-h5:      clamp(1.0625rem, 0.9803rem + 0.3371vw, 1.25rem);
  --fs-h4:      clamp(1.1875rem, 1.0232rem + 0.6742vw, 1.5625rem);
  --fs-h3:      clamp(1.1875rem, 0.9958rem + 0.7865vw, 1.625rem);
  --fs-eyebrow: clamp(0.875rem, 0.7654rem + 0.4494vw, 1.125rem);
  --fs-h2:      clamp(1.4375rem, 1.3006rem + 0.5618vw, 1.75rem);
  --fs-h1:      clamp(1.875rem, 1.6559rem + 0.8989vw, 2.375rem);
  --fs-display: clamp(2rem, 0.8497rem + 4.7191vw, 4.625rem);

  --lh-h1: 1.15;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-heading: 1.2;
  --lh-label: 1.4;
  --lh-texte: 1.6;

  /* Rythme — espace-lg/xl resserrés le 2026-08-15 (correctif "typo mobile") :
     l'espacement généreux hérité de l'ordinateur (50-76px entre sections à
     390px) rendait chaque section trop longue à franchir au pouce. Nouvelles
     cibles à 390px : 36px (lg) / 48px (xl), contre 50/76px avant — la
     borne haute (desktop) baisse aussi légèrement, dans le même esprit. */
  --espace-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --espace-sm: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --espace-md: clamp(1.75rem, 1.5rem + 1.25vw, 2.75rem);
  /* ⚠️ 2026-08-15 : même bug que les --fs-* juste au-dessus (coefficient vw
     divisé par 16 par erreur) — corrigé ici aussi (×16), bornes inchangées. */
  --espace-lg: clamp(2.25rem, 1.4831rem + 3.1461vw, 4rem);
  --espace-xl: clamp(3rem, 1.2472rem + 7.191vw, 7rem);

  --marge-page: clamp(1.25rem, 1rem + 2vw, 3rem);
  --largeur-max: 1280px;
  --gouttiere: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  --colonne-lecture: 66ch;

  /* Page /demonstration/ + aperçu d'accueil (MISSION Refonte, LOT 2 ; recolorées le
     19/08/2026 avec le reste de la palette). Toujours des VARIANTES dérivées, pas
     une palette à part : --demo-nuit = une nuance de --ardoise (même famille bleu
     nuit, légèrement distincte pour donner du relief à l'entrée de la page) ;
     --demo-kraft = une nuance de --craie (même bleu-blanc très clair) ;
     --demo-carbone reste réservée au filigrane "brouillon", nulle part ailleurs.
     Le tampon de validation réutilise --marqueur À L'IDENTIQUE (voir DESIGN.md/plan
     LOT 2) : la couleur d'action est la même partout sur le site, pas une couleur
     de plus. Voir le plan complet (LOT 2, Passe 1/2) pour la justification d'origine. */
  --demo-nuit: #0D1730;
  --demo-kraft: #E7EDF6;
  --demo-carbone: #8C97AC;

  --marqueur-clair: #D62A43;
  /* Contrôlé (LOT 2, direction C) : --marqueur en texte sur --papier passe déjà
     largement l'AA (6,66:1) — --marqueur-texte reste une teinte plus sombre de
     la même famille (10,50:1), même logique que l'ancienne palette : plus de
     marge sur le tout petit texte (liens, badges), jamais sur les
     fonds/bordures/icônes qui gardent --marqueur. */
  --marqueur-texte: #8C0A1F;

  --rayon: 2px;
  --filet: 1px solid var(--separateur);

  --duree: 480ms;
  --easing: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* -- 3. Base ----------------------------------------------------------------- */
body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--fs-body);
  line-height: var(--lh-texte);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.01em; font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.01em; font-weight: 700; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h3); font-weight: 600; }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h3); font-weight: 600; }

.display { font-size: var(--fs-display); line-height: var(--lh-h1); letter-spacing: -0.025em; font-weight: 800; font-family: var(--f-display); text-wrap: balance; }
/* Mot mis en avant par dégradé (19/08/2026, un seul détail structurel repris du
   style de medeartis.ch — pas son code, juste le PRINCIPE d'un mot du titre en
   dégradé de couleur — traduit ici en bleu-nuit → rouge). `color` sert de repli
   pour les navigateurs sans background-clip:text (rare aujourd'hui). */
.accent-degrade {
  background: linear-gradient(120deg, var(--encre) 0%, var(--marqueur) 100%);
  color: var(--marqueur);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

p { max-width: var(--colonne-lecture); }
p.lead { font-size: var(--fs-lead); color: var(--texte); max-width: 42ch; }
.texte-doux { color: var(--texte-doux); }
small, .fs-sm { font-size: var(--fs-sm); line-height: var(--lh-label); }

a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:not([class]) { color: var(--marqueur-texte); }
a:not([class]):hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.fond-encre :focus-visible { outline-color: var(--papier); }

/* -- 4. Utilitaire mono ------------------------------------------------------ */
.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--espace-sm);
}
.eyebrow::before {
  content: "";
  width: 1.4em;
  height: 1px;
  background: var(--accent);
  flex: none;
}

/* -- 5. Mise en page ---------------------------------------------------------- */
.conteneur {
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}
.section { padding-block: var(--espace-xl); }
.section--serre { padding-block: var(--espace-lg); }
.fond-encre { background: var(--ardoise); color: var(--papier); }
.fond-encre .texte-doux { color: #AEB9D6; }
.fond-craie { background: var(--craie); }

.grille12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gouttiere);
}
/* colonnes 2-7 : le texte. Sur 12 colonnes, on nomme les tranches usuelles */
.col-texte      { grid-column: 2 / span 6; }
.col-texte-large{ grid-column: 2 / span 8; }
.col-annot      { grid-column: 9 / span 4; }
.col-pleine     { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .grille12 { grid-template-columns: 1fr; gap: var(--espace-md); }
  .col-texte, .col-texte-large, .col-annot, .col-pleine { grid-column: 1 / -1; }
}

/* Couloir d'annotation en marge — motif répété (hero, méthode, audit) */
.annotations { display: flex; flex-direction: column; gap: var(--espace-sm); }
.annotation {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--texte-doux);
  border-left: 2px solid var(--separateur);
  padding-left: 1em;
  line-height: 1.5;
}
.annotation strong { color: var(--texte); font-weight: 600; }
.annotation--accent { border-left-color: var(--accent); color: var(--texte); }
.annotation--total { border-left-color: var(--marqueur); color: var(--texte); font-size: var(--fs-sm); padding-top: 0.4em; margin-top: 0.4em; border-top: 1px dashed var(--separateur); }
.fond-encre .annotation { border-left-color: #28355C; color: #AEB9D6; }
.fond-encre .annotation strong { color: var(--papier); }
/* mission UX 18/08, point 6 : .detail-repli utilisé pour la 1re fois sur fond sombre
   (section "L'engagement") — sans ceci le texte serait quasi illisible (gris sombre
   sur ardoise, hérité des réglages pensés pour fond clair du calculateur). */
.fond-encre .detail-repli, .fond-encre .calculateur__formule { color: #AEB9D6; border-top-color: #28355C; }
.fond-encre .detail-repli summary, .fond-encre .calculateur__formule summary { color: var(--papier); }
.fond-encre .tableau-simple th { color: #AEB9D6; }
.fond-encre .tableau-simple th, .fond-encre .tableau-simple td { border-bottom-color: #28355C; }

/* -- 6. En-tête / navigation --------------------------------------------------- */
.skip-link {
  position: absolute; left: 1rem; top: -3.5rem;
  background: var(--encre); color: var(--papier);
  padding: 0.7em 1.1em; z-index: 200; transition: top 0.2s var(--easing);
  font-family: var(--f-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em;
}
.skip-link:focus { top: 1rem; }

.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,250,247,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--filet);
}
/* Le header est sticky (~94px) : sans ceci, un lien d'ancre (#demo, #engagement...)
   place le haut de la cible SOUS le header au lieu de dessous, contenu masqué. */
section[id] { scroll-margin-top: 110px; }
.entete__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espace-md);
  padding-block: 1.1rem;
}
.logo {
  font-family: var(--f-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: 0.01em; text-decoration: none; display: flex; align-items: center; gap: 0.5em;
  flex: none;
}
.logo__marque { color: var(--texte); }
.logo__point { width: 7px; height: 7px; background: var(--accent); flex: none; display: inline-block; }

.nav-principale { display: flex; align-items: center; gap: var(--espace-md); }
.nav-principale__liens { display: flex; align-items: center; gap: clamp(1rem, 0.7rem + 1vw, 2rem); }
.nav-principale__liens a {
  text-decoration: none; font-size: var(--fs-sm); font-weight: 500; color: var(--texte);
  padding-block: 0.3em; border-bottom: 1px solid transparent;
}
.nav-principale__liens a:hover, .nav-principale__liens a[aria-current="page"] { border-bottom-color: var(--accent); }

.tel-entete { display: flex; align-items: center; gap: var(--espace-sm); flex: none; }
.tel-lien { text-decoration: none; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }

.bascule-nav { display: none; }

@media (max-width: 900px) {
  .nav-principale { display: none; }
  .bascule-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border: var(--filet); background: none; flex: none;
  }
  .bascule-nav__trait { display: block; width: 1.1rem; height: 1px; background: var(--texte); position: relative; }
  .bascule-nav__trait::before, .bascule-nav__trait::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: var(--texte); transition: transform var(--duree) var(--easing); }
  .bascule-nav__trait::before { top: -6px; }
  .bascule-nav__trait::after { top: 6px; }
  html.nav-ouverte .bascule-nav__trait { background: transparent; }
  html.nav-ouverte .bascule-nav__trait::before { transform: translateY(6px) rotate(45deg); }
  html.nav-ouverte .bascule-nav__trait::after { transform: translateY(-6px) rotate(-45deg); }

  .panneau-nav-mobile {
    position: fixed; inset: 0; top: 0;
    background: var(--papier);
    padding: 5.5rem var(--marge-page) var(--espace-lg);
    transform: translateY(-100%);
    transition: transform var(--duree) var(--easing);
    z-index: 90; overflow-y: auto;
  }
  html.nav-ouverte .panneau-nav-mobile { transform: translateY(0); }
  .panneau-nav-mobile ul { display: flex; flex-direction: column; gap: 0; }
  .panneau-nav-mobile a { display: block; text-decoration: none; font-family: var(--f-display); font-size: 1.6rem; font-weight: 700; padding: 0.7em 0; border-bottom: var(--filet); }
  .panneau-nav-mobile .panneau-nav-mobile__tel { margin-top: var(--espace-md); font-size: var(--fs-body); }
}
@media (min-width: 901px) { .panneau-nav-mobile { display: none; } }

/* -- 7. Boutons --------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--f-texte); font-weight: 600; font-size: var(--fs-body);
  padding: 0.85em 1.5em; border-radius: var(--rayon);
  text-decoration: none; border: 1px solid transparent; transition: background var(--duree) var(--easing), color var(--duree) var(--easing), border-color var(--duree) var(--easing);
  white-space: nowrap;
}
.bouton--principal { background: var(--accent); color: var(--papier); }
.bouton--principal:hover { background: var(--marqueur-clair); }
.bouton--secondaire { background: transparent; color: var(--texte); border-color: var(--texte); }
.bouton--secondaire:hover { border-color: var(--accent); color: var(--accent); }
.fond-encre .bouton--secondaire { color: var(--papier); border-color: #28355C; }
.fond-encre .bouton--secondaire:hover { border-color: var(--papier); }
.bouton--fleche::after { content: "→"; transition: transform var(--duree) var(--easing); }
.bouton--fleche:hover::after { transform: translateX(3px); }
.bouton--pleine-largeur { width: 100%; justify-content: center; }

/* -- 8. Hero -------------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 2rem + 2.5vw, var(--espace-xl)) var(--espace-lg); }
.hero__accroche { grid-column: 2 / span 8; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-md); margin-top: var(--espace-md); }
.hero__assistant { display: flex; flex-direction: column; gap: 0.3em; }
.hero__tel { font-family: var(--f-mono); font-size: var(--fs-body); font-weight: 500; text-decoration: none; }
.hero__ligne-assistant { font-size: var(--fs-sm); color: var(--texte-doux); max-width: 32ch; }
@media (max-width: 860px) { .hero__accroche { grid-column: 1 / -1; } }

/* -- 9. Frictions (bloc "ce que vous reconnaissez") ------------------------------ */
.frictions__liste { display: grid; gap: var(--espace-sm); grid-template-columns: repeat(2, 1fr); }
.friction { border-top: var(--filet); padding-top: var(--espace-sm); font-size: var(--fs-lead); font-family: var(--f-display); font-weight: 500; line-height: 1.35; }
@media (max-width: 700px) { .frictions__liste { grid-template-columns: 1fr; } }

/* -- 10. Carte de processus (élément signature) ---------------------------------- */
.carte-process { padding-block: var(--espace-lg); }
.carte-process__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: var(--espace-lg); align-items: start; }
.carte-process__svg-wrap { width: 100%; }
.carte-process__svg-wrap svg { width: 100%; height: auto; }
.carte-process .trait-flux { fill: none; stroke: var(--graphite); stroke-width: 1.5; }
.carte-process .noeud { fill: var(--papier); stroke: var(--encre); stroke-width: 1.5; }
.carte-process .noeud-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.02em; fill: var(--encre); text-transform: uppercase; }
.carte-process .trait-annotation {
  fill: none; stroke: var(--marqueur); stroke-width: 1.5;
  stroke-dasharray: var(--longueur, 120); stroke-dashoffset: var(--longueur, 120);
  transition: stroke-dashoffset 900ms var(--easing);
}
.carte-process.est-visible .trait-annotation { stroke-dashoffset: 0; }
.carte-process .etiquette-friction {
  font-family: var(--f-mono); font-size: 11.5px; fill: var(--marqueur);
  opacity: 0; transform: translateY(4px); transition: opacity 500ms var(--easing), transform 500ms var(--easing);
}
.carte-process.est-visible .etiquette-friction { opacity: 1; transform: translateY(0); }
.carte-process .point-ocre { fill: var(--marqueur); opacity: 0; transition: opacity 400ms var(--easing); }
.carte-process.est-visible .point-ocre { opacity: 1; }
.carte-process__chiffrage { display: flex; flex-direction: column; gap: var(--espace-xs); padding-top: 0.5rem; }
.carte-process__chiffrage .annotation {
  opacity: 0; transform: translateX(6px);
  transition: opacity 450ms var(--easing), transform 450ms var(--easing);
}
.carte-process.est-visible .carte-process__chiffrage .annotation { opacity: 1; transform: translateX(0); }
.carte-process.est-visible .carte-process__chiffrage .annotation:nth-child(1) { transition-delay: 120ms; }
.carte-process.est-visible .carte-process__chiffrage .annotation:nth-child(2) { transition-delay: 280ms; }
.carte-process.est-visible .carte-process__chiffrage .annotation:nth-child(3) { transition-delay: 440ms; }
.carte-process.est-visible .carte-process__chiffrage .annotation:nth-child(4) { transition-delay: 600ms; }
.carte-process.est-visible .carte-process__chiffrage .annotation--total { transition-delay: 780ms; }
.friction-1 .trait-annotation, .friction-1 .etiquette-friction, .friction-1 .point-ocre { transition-delay: 60ms; }
.friction-2 .trait-annotation, .friction-2 .etiquette-friction, .friction-2 .point-ocre { transition-delay: 320ms; }
.friction-3 .trait-annotation, .friction-3 .etiquette-friction, .friction-3 .point-ocre { transition-delay: 580ms; }
.friction-4 .trait-annotation, .friction-4 .etiquette-friction, .friction-4 .point-ocre { transition-delay: 840ms; }
@media (max-width: 860px) { .carte-process__grille { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .carte-process .trait-annotation { stroke-dashoffset: 0; transition: none; }
  .carte-process .etiquette-friction, .carte-process .point-ocre, .carte-process__chiffrage .annotation {
    opacity: 1; transform: none; transition: none;
  }
}

/* -- 11. Méthode (5 étapes) ------------------------------------------------------- */
.methode-liste { display: flex; flex-direction: column; }
.etape { display: grid; grid-template-columns: minmax(0,5rem) minmax(0,1fr); gap: var(--espace-md); padding-block: var(--espace-md); border-top: var(--filet); align-items: baseline; }
.methode-liste .etape:last-child { border-bottom: var(--filet); }
/* Couleur sourde comme les autres libellés (mission "Corrections après revue
   du site", 17/08/2026, point 7a) — c'était --accent (le teal vif des CTA),
   pas la couleur discrète utilisée pour les autres puces .mono. La police
   était déjà --f-mono (Roboto Mono, aucune police manuscrite dans ce
   dépôt) : seule la couleur avait besoin d'être corrigée. */
.etape__numero { font-family: var(--f-mono); font-size: var(--fs-h5); color: var(--texte-doux); }
.etape__corps h3 { font-size: var(--fs-h4); margin-bottom: 0.4em; }
.etape__livrable { margin-top: 0.8em; font-size: var(--fs-sm); color: var(--texte-doux); }
.etape__livrable strong { color: var(--texte); font-weight: 600; }
@media (max-width: 620px) { .etape { grid-template-columns: 1fr; gap: 0.4rem; } }

/* -- 12. Engagement (clause) -------------------------------------------------------- */
.engagement__grille { align-items: center; }
.engagement__clause { font-family: var(--f-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1.25; max-width: 16ch; }
.engagement__clause em { font-style: normal; color: var(--marqueur); }
.engagement__detail { display: flex; flex-direction: column; gap: var(--espace-sm); }
.engagement__detail p { max-width: 46ch; }
.engagement__detail .annotation { font-size: var(--fs-sm); }

/* -- 13. Cartes (captures, journal) ---------------------------------------- */
.cartes { display: grid; gap: var(--espace-md); }
.cartes--3 { grid-template-columns: repeat(3, 1fr); }
.cartes--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .cartes--3, .cartes--2 { grid-template-columns: 1fr; } }

.carte {
  border: var(--filet); padding: var(--espace-md);
  display: flex; flex-direction: column; gap: var(--espace-sm);
  text-decoration: none; color: inherit;
  transition: border-color var(--duree) var(--easing), transform var(--duree) var(--easing);
}
a.carte:hover { border-color: var(--accent); transform: translateY(-2px); }
.carte__legende { font-size: var(--fs-sm); color: var(--texte-doux); }
.carte__titre { font-size: var(--fs-h5); font-family: var(--f-display); font-weight: 700; }
.carte__cadre-capture {
  aspect-ratio: 16/10; background: var(--craie); border: var(--filet);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.carte__cadre-capture img { width: 100%; height: 100%; object-fit: cover; }
/* Captures Jarvis (Phase 3) : écrans de téléphone, portrait — un recadrage
   16/10 couperait l'essentiel de l'interface. object-fit: contain + fond
   craie (pilier) montre l'écran entier, jamais rogné. */
.carte__cadre-capture--telephone { aspect-ratio: 3/4; padding: var(--espace-sm); }
.carte__cadre-capture--telephone img { object-fit: contain; }
/* Variante "pleine largeur", mur de capacités de l'accueil UNIQUEMENT (mission
   "Corrections après revue du site", 17/08/2026, point 4) — additive : n'affecte
   que les cadres qui portent aussi cette classe, /jarvis/ garde --telephone seul,
   intact. Mesuré avant correctif : le ratio 3/4 fixe de --telephone laissait un
   tiers de vide autour d'une capture réelle de 1170×2532 (contain dans un cadre
   plus large que haut). Ici pas de ratio forcé : l'image s'affiche à sa propre
   hauteur naturelle (déduite de ses attributs width/height), bord à bord avec la
   carte (marge négative = padding de la carte). CHANGÉ le 19/08/2026 (retour
   utilisateur "hyper zoomé, on ne comprend rien") : un ratio fixe unique
   (1170/2532, celui de la 1ʳᵉ génération de captures) + object-fit:cover
   RECADRAIT chaque image dans cette boîte — sans dégât tant que la capture
   remplissait déjà toute sa hauteur, mais les captures ont depuis été recadrées
   à leur propre contenu réel (fini le vide noir en bas) et n'ont donc plus
   toutes le même ratio : forcer 1170/2532 aurait recréé un zoom/rognage
   arbitraire sur celles qui sont maintenant plus courtes (ex. 942×807, 1170×1275).
   Chaque carte peut donc avoir une hauteur d'image différente désormais — c'est
   volontaire, pas un défaut de mise en page. */
.carte__cadre-capture--pleine {
  margin: 0 calc(-1 * var(--espace-md));
  padding: 0;
  border: none;
}
.carte__cadre-capture--pleine img { width: 100%; height: auto; display: block; }
.carte__lien-fleche { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--marqueur-texte); display: inline-flex; align-items: center; gap: 0.5em; }

/* Icônes de capacité — dessinées en SVG (pas de capture d'écran indisponible
   affichée à moitié) : trait fin, palette du site, un seul accent. */
.carte__icone { width: 40px; height: 40px; }
.carte__icone .trait { fill: none; stroke: var(--encre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.carte__icone .accent { fill: var(--accent); }
.fond-craie .carte__icone .trait { stroke: var(--encre); }

/* -- 14. Qui parle (fondateurs) -------------------------------------------------- */
.fondateurs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espace-lg); }
.fondateur { display: flex; flex-direction: column; gap: var(--espace-sm); }
.fondateur__portrait {
  aspect-ratio: 4/5; background: var(--craie); border: var(--filet);
  display: flex; align-items: center; justify-content: center; color: var(--texte-doux);
  font-family: var(--f-mono); font-size: var(--fs-mono); text-align: center; padding: 1rem;
}
.fondateur__portrait img { width: 100%; height: 100%; object-fit: cover; }
.fondateur__nom { font-size: var(--fs-h5); }
.fondateur__role { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--marqueur-texte); }
@media (max-width: 700px) { .fondateurs { grid-template-columns: 1fr; } }

/* -- 15. Rendez-vous / formulaires ------------------------------------------------- */
.rdv-grille { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--espace-lg); align-items: start; }
@media (max-width: 900px) { .rdv-grille { grid-template-columns: 1fr; } }

.formulaire { display: flex; flex-direction: column; gap: var(--espace-sm); }
.champ { display: flex; flex-direction: column; gap: 0.4em; }
.champ label { font-family: var(--f-mono); font-size: var(--fs-mono); }
.champ input, .champ select, .champ textarea {
  border: var(--filet); background: var(--papier); padding: 0.85em 1em;
  font-family: var(--f-texte); font-size: var(--fs-body); border-radius: var(--rayon);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.champ textarea { resize: vertical; min-height: 8rem; }
.champ--ligne { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espace-sm); }
@media (max-width: 560px) { .champ--ligne { grid-template-columns: 1fr; } }
.champ-rgpd { display: flex; align-items: flex-start; gap: 0.7em; font-size: var(--fs-sm); color: var(--texte-doux); }
.champ-rgpd input { margin-top: 0.3em; flex: none; width: 1.1em; height: 1.1em; }
.champ-rgpd a { color: var(--texte-doux); }

.champ-radios { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5em; }
.champ-radios legend { font-family: var(--f-mono); font-size: var(--fs-mono); padding: 0; margin-bottom: 0.2em; }
.champ-radios .champ-radio { display: flex; align-items: center; gap: 0.6em; font-size: var(--fs-body); font-family: var(--f-texte); cursor: pointer; min-height: 44px; }
.champ-radios input { width: 1.1em; height: 1.1em; flex: none; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__delai { font-size: var(--fs-sm); color: var(--texte-doux); }
.formulaire__ok { display: none; border: var(--filet); border-left: 3px solid var(--accent); padding: var(--espace-sm) var(--espace-md); font-size: var(--fs-body); }

.blocs-rdv { display: flex; flex-direction: column; gap: var(--espace-sm); }
.bloc-rdv { border: var(--filet); padding: var(--espace-sm) var(--espace-md); cursor: pointer; }
.bloc-rdv[aria-selected="true"] { border-color: var(--accent); background: rgba(199,122,46,0.06); }
.bloc-rdv__titre { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h5); }
.bloc-rdv__duree { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--accent); }

/* -- 16. Bandeau appel mobile fixe ------------------------------------------------- */
.appel-fixe {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--marqueur); color: var(--papier);
  display: flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.9em 1em; text-decoration: none; font-weight: 600;
  transform: translateY(100%); transition: transform var(--duree) var(--easing);
  padding-bottom: max(0.9em, env(safe-area-inset-bottom));
}
.appel-fixe.est-visible { transform: translateY(0); }
@media (min-width: 901px) { .appel-fixe { display: none; } }

/* -- 17. Pied de page --------------------------------------------------------------- */
.pied { border-top: var(--filet); padding-block: var(--espace-lg) calc(var(--espace-lg) + 3rem); }
.pied__grille { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--espace-md); }
.pied__colonne h5 { font-size: var(--fs-mono); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--texte-doux); margin-bottom: var(--espace-sm); font-weight: 500; }
.pied__colonne ul { display: flex; flex-direction: column; gap: 0.6em; }
.pied__colonne a { text-decoration: none; font-size: var(--fs-sm); }
.pied__colonne a:hover { color: var(--marqueur-texte); }
.pied__marque { font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; margin-bottom: 0.6em; }
.pied__bas { margin-top: var(--espace-lg); padding-top: var(--espace-sm); border-top: var(--filet); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6em; font-size: var(--fs-sm); color: var(--texte-doux); }
@media (min-width: 901px) { .pied { padding-block: var(--espace-lg); } }
@media (max-width: 860px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } }

/* -- 18. Révélations au défilement -------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 550ms var(--easing), transform 550ms var(--easing); }
.reveal.est-visible { opacity: 1; transform: translateY(0); }
.reveal[data-groupe] { transition-delay: var(--delai, 0ms); }

/* -- 19. Pages intérieures / contenu éditorial ---------------------------------------- */
.entete-page { padding-block: var(--espace-lg) var(--espace-md); }
/* grid-column n'a d'effet que sur les enfants DIRECTS d'un conteneur grid —
   eyebrow/h1/lead doivent donc être frères, jamais enveloppés dans un <div>. */
.entete-page .eyebrow, .entete-page h1, .entete-page .lead { grid-column: 2 / span 8; }
.entete-page .eyebrow { margin-bottom: var(--espace-xs); }
.entete-page .lead { margin-top: var(--espace-sm); }
@media (max-width: 860px) { .entete-page .eyebrow, .entete-page h1, .entete-page .lead { grid-column: 1 / -1; } }

.article { max-width: var(--colonne-lecture); }
.article > * + * { margin-top: var(--espace-sm); }
.article h2 { margin-top: var(--espace-lg); }
.article h3 { margin-top: var(--espace-md); }
.article ul, .article ol { list-style: disc; padding-left: 1.3em; }
.article ol { list-style: decimal; }
.article li + li { margin-top: 0.5em; }

.tableau-simple { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tableau-simple th, .tableau-simple td { text-align: left; padding: 0.9em 1em; border-bottom: var(--filet); }
.tableau-simple th { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-mono); color: var(--texte-doux); font-weight: 500; }
/* Défilement horizontal dédié — jamais le corps de page (voir contrainte artefact/
   responsive générale) : un tableau à 3 colonnes reste lisible à 390px, mais cette
   marge de sécurité évite tout débordement si une cellule s'allonge un jour. */
.tableau-defilement { overflow-x: auto; }

/* Exemple de livrable d'audit : structure problème → solution → pourquoi ça
   compte, en 3 blocs verticaux (pas un tableau large — reste lisible sans
   défilement horizontal sur mobile, et garde l'esprit "plan annoté"). */
.exemple-audit { border: var(--filet); padding: var(--espace-md); }
.exemple-audit + .exemple-audit { margin-top: var(--espace-sm); }
.exemple-audit__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-md); }
.exemple-audit__bloc .mono { color: var(--marqueur-texte); display: block; margin-bottom: 0.5em; }
.exemple-audit__bloc p { margin: 0; }
@media (max-width: 700px) {
  .exemple-audit__grille { grid-template-columns: 1fr; gap: var(--espace-sm); }
  .exemple-audit__bloc + .exemple-audit__bloc { border-top: var(--filet); padding-top: var(--espace-sm); margin-top: var(--espace-sm); }
}

.fil-ariane { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--texte-doux); display: flex; gap: 0.5em; align-items: center; margin-bottom: var(--espace-sm); }
.fil-ariane a { text-decoration: none; }
.fil-ariane a:hover { color: var(--marqueur-texte); }

.badge-config {
  display: inline-block; font-family: var(--f-mono); font-size: var(--fs-mono);
  color: var(--marqueur-texte); border: 1px dashed var(--marqueur); padding: 0.4em 0.7em; margin-bottom: var(--espace-sm);
}

.cta-bandeau { text-align: center; }
.cta-bandeau h2 { max-width: 20ch; margin-inline: auto; }
.cta-bandeau .hero__cta { justify-content: center; }

/* -- 20. Démo — aperçu d'accueil (MISSION Refonte, LOT 2) ---------------------------- */
/* Une seule séquence, un seul bandeau, aucun réglage. Le journal se lit comme un
   carnet de bord (ligne horodatée), pas des bulles de messagerie — voir le plan LOT 2
   (Passe 1/2) : c'est le point qui évite le réflexe visuel le plus commun des démos
   IA. Élément "carnet" conservé (coin corné) pour la cohérence avec le reste du site. */
.demo-pilotable {
  position: relative;
  background: var(--papier); border: var(--filet); border-radius: var(--rayon);
  padding: var(--espace-md); max-width: 480px; margin-inline: auto;
  box-shadow: 0 1px 0 var(--separateur), 0 18px 40px -24px rgba(18,22,27,0.35);
}
.demo-pilotable::after {
  content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px;
  background: linear-gradient(135deg, transparent 50%, var(--craie) 50%);
  border-left: var(--filet); border-bottom: var(--filet);
  border-bottom-left-radius: 3px;
}
/* .demo-pilotable__badge supprimé le 2026-08-15 (retour utilisateur : pas joli,
   même une fois sorti du positionnement absolu) — la mention "Démonstration —
   entreprise fictive" est reprise en simple .eyebrow au-dessus de la carte
   (index.html), le même style que tous les autres libellés de section du site,
   plutôt qu'un badge dédié qui se distinguait mal. Toujours visible, règle de
   mission "toute démo étiquetée" respectée. */
.demo-pilotable__intro { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--texte-doux); margin-bottom: var(--espace-sm); }
.demo-pilotable__rejouer {
  margin-top: 0.8em; font-family: var(--f-mono); font-size: var(--fs-mono);
  background: none; border: none; color: var(--marqueur-texte); padding: 0; text-decoration: underline;
  text-underline-offset: 0.2em;
}
.demo-pilotable__suite {
  margin-top: var(--espace-sm); font-family: var(--f-texte); font-weight: 600; font-size: var(--fs-sm);
  color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em;
}
.demo-pilotable__suite:hover { text-decoration: underline; }

.demo-pilotable noscript img { width: 100%; height: auto; border: var(--filet); }
.demo-pilotable__legende-noscript { font-size: var(--fs-sm); color: var(--texte-doux); margin-bottom: 0.6em; }
.demo-pilotable noscript figure { margin-bottom: var(--espace-sm); }
.demo-pilotable noscript figcaption { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--texte-doux); margin-top: 0.4em; }

/* -- Journal : la conversation rejouée, réutilisé par l'aperçu d'accueil ET par
   /demonstration/ (voir section 28). Une ligne horodatée par échange, jamais de
   bulle alignée gauche/droite — un carnet de bord est une seule colonne. Hauteur
   réservée AVANT l'arrivée du premier message (cause n°1 du saccadement, LOT 2) :
   dimensionnée sur le scénario le plus long du jeu curaté (devis dicté, 4 lignes). */
.demo-journal {
  display: flex; flex-direction: column;
  min-height: clamp(260px, 44svh, 360px);
  contain: content;
}
.demo-journal__ligne {
  display: flex; gap: 0.7em; align-items: baseline;
  padding: 0.55em 0; border-bottom: 1px solid var(--separateur);
  font-family: var(--f-mono); font-size: var(--fs-sm); line-height: 1.5;
  contain: content; content-visibility: auto;
  opacity: 0; transform: translateY(6px);
  animation: demo-ligne-entree 420ms var(--easing) forwards;
  animation-delay: var(--demo-delai, 0ms);
}
.demo-journal__heure { flex: none; color: var(--texte-doux); font-size: 0.75em; white-space: nowrap; }
.demo-journal__marque { flex: none; color: var(--marqueur-texte); font-weight: 700; }
.demo-journal__ligne--assistant .demo-journal__marque { color: var(--texte-doux); font-weight: 400; }
.demo-journal__texte { color: var(--texte); }
@keyframes demo-ligne-entree {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-journal__ligne { animation: none; opacity: 1; transform: none; }
}

.demo-journal__carte {
  margin: 0.3em 0 0.6em; padding: 0.7em 0.9em; border: 1px dashed var(--separateur);
  background: var(--craie);
  font-family: var(--f-mono); font-size: var(--fs-sm);
  opacity: 0; transform: translateY(6px);
  animation: demo-ligne-entree 420ms var(--easing) forwards;
  animation-delay: var(--demo-delai, 0ms);
}
.demo-journal__carte p { margin: 0.15em 0; }
.demo-journal__carte .demo-journal__total { margin-top: 0.35em; color: var(--marqueur-texte); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .demo-journal__carte { animation: none; opacity: 1; transform: none; } }

/* -- 21. Mur de capacités (accueil, filtrable) -------------------------------------- */
.filtre-capacites { display: flex; flex-wrap: wrap; gap: 0.6em; margin-block: var(--espace-md); }
.filtre-capacites button {
  font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: 0.04em;
  background: transparent; border: 1px solid var(--separateur); color: var(--texte-doux);
  padding: 0.5em 0.9em; border-radius: 999px;
  transition: border-color var(--duree) var(--easing), color var(--duree) var(--easing), background var(--duree) var(--easing);
}
.filtre-capacites button:hover { border-color: var(--marqueur); color: var(--marqueur-texte); }
.filtre-capacites button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.carte-capacite[hidden] { display: none; }
.carte-capacite__categorie { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--marqueur-texte); }

/* -- 22. Avant / après — journée du patron -------------------------------------------- */
.journee { display: flex; flex-direction: column; }
.journee__moment {
  display: grid; grid-template-columns: minmax(0,4.5rem) minmax(0,1fr) minmax(0,1fr);
  gap: var(--espace-md); padding-block: var(--espace-md); border-top: var(--filet); align-items: start;
}
.journee .journee__moment:last-child { border-bottom: var(--filet); }
.journee__heure { font-family: var(--f-mono); font-size: var(--fs-h5); color: var(--texte-doux); }
.journee__avant, .journee__apres { display: flex; flex-direction: column; gap: 0.3em; }
.journee__label { font-family: var(--f-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.journee__avant .journee__label { color: var(--graphite); }
.journee__apres .journee__label { color: var(--marqueur-texte); }
.journee__avant p:last-child, .journee__apres p:last-child { font-size: var(--fs-sm); }
@media (max-width: 700px) {
  .journee__moment { grid-template-columns: 1fr; gap: 0.6rem; }
  .journee__heure { font-size: var(--fs-body); }
}

/* -- 22bis. Pages /jarvis/<famille>/ (mission "Corrections après revue du site",
   17/08/2026, point 5) — capture pleine largeur + échange concret reproduit. -------- */
/* Capture : pas de vide (même correctif que .carte__cadre-capture--pleine, point 4)
   mais plafonnée à une largeur proche de la résolution native de la capture (420px,
   sous les 1170px réels) — sur une page de détail, l'image occupe déjà toute la
   largeur disponible sur mobile ; l'étirer à 1200px sur desktop l'aurait rendue
   floue (agrandissement au-delà du natif) sans rien ajouter à la lisibilité.
   CHANGÉ le 19/08/2026 (même correctif que .carte__cadre-capture--pleine ci-dessus) :
   plus de ratio fixe 1170/2532 ni de object-fit:cover — chaque capture a désormais
   sa propre hauteur réelle après recadrage, affichée sans rognage. */
.jarvis-capacite__capture {
  max-width: 420px; margin: var(--espace-md) auto;
  border: var(--filet);
}
.jarvis-capacite__capture img { width: 100%; height: auto; display: block; }
.jarvis-capacite__etapes { display: flex; flex-direction: column; gap: var(--espace-xs); padding-left: 0; list-style: none; counter-reset: etape-capacite; }
.jarvis-capacite__etapes li { display: flex; gap: 0.8em; align-items: baseline; }
.jarvis-capacite__etapes li::before {
  counter-increment: etape-capacite; content: counter(etape-capacite);
  font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--accent); flex: none; width: 1.4em;
}
.echange { border: var(--filet); background: var(--craie); padding: var(--espace-sm) var(--espace-md); display: flex; flex-direction: column; gap: 0.8em; }
.echange__tour { display: flex; flex-direction: column; gap: 0.2em; }
.echange__qui { font-family: var(--f-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-doux); }
.echange__tour--jarvis .echange__qui { color: var(--marqueur-texte); }
.echange__tour p:last-child { font-size: var(--fs-sm); }
.jarvis-capacite__limites { border-top: 1px dashed var(--separateur); padding-top: var(--espace-sm); margin-top: var(--espace-sm); }
.jarvis-capacite__limites ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 0.4em; }
.jarvis-capacite__limites li { font-size: var(--fs-sm); color: var(--texte-doux); }

/* -- 23. Calculateur (self-service, aucun envoi sans clic — Itération V2) ------------- */
.calculateur { border: var(--filet); padding: var(--espace-md); }
.calculateur__curseurs { display: flex; flex-direction: column; gap: var(--espace-sm); }
.calculateur__curseur label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.6em;
  font-family: var(--f-mono); font-size: var(--fs-mono); margin-bottom: 0.4em;
}
.calculateur__curseur output { color: var(--marqueur-texte); font-weight: 700; white-space: nowrap; }
.calculateur__curseur input[type="range"] {
  width: 100%; accent-color: var(--marqueur); height: 1.4rem; cursor: pointer;
}
/* .detail-repli : alias générique du même style de <details> discret, réutilisable
   hors du calculateur (ex. mission UX 18/08, point 6, section "L'engagement"). */
.calculateur__formule, .detail-repli {
  font-size: var(--fs-sm); color: var(--texte-doux);
  border-top: 1px dashed var(--separateur); margin-top: var(--espace-sm); padding-top: var(--espace-sm);
}
.calculateur__formule summary, .detail-repli summary { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--texte); cursor: pointer; margin-bottom: 0.6em; }
.calculateur__formule p, .detail-repli p { margin-top: 0.3em; }
.calculateur__hypotheses { display: flex; flex-wrap: wrap; gap: var(--espace-md); margin-top: 0.8em; }
.calculateur__hypotheses label { display: flex; align-items: center; gap: 0.5em; font-family: var(--f-texte); color: var(--texte); }
.calculateur__hypotheses input[type="number"] {
  width: 4.5rem; border: var(--filet); background: var(--papier); padding: 0.4em 0.5em;
  font-family: var(--f-texte); border-radius: var(--rayon);
}
.calculateur__hypotheses input[type="range"] { flex: 1; min-width: 8rem; accent-color: var(--marqueur); height: 1.4rem; cursor: pointer; }
.calculateur__hypotheses output { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--marqueur-texte); font-weight: 700; white-space: nowrap; }

/* LOT 4 : chaque curseur doublé d'un champ numérique synchronisé (pénible au
   pouce en curseur seul sur mobile). */
.calculateur__paire { display: flex; align-items: center; gap: 0.7em; }
.calculateur__paire input[type="range"] { flex: 1; }
.calculateur__paire input[type="number"] {
  width: 4.5rem; flex: none; border: var(--filet); background: var(--papier); padding: 0.5em 0.4em;
  font-family: var(--f-mono); font-size: var(--fs-sm); text-align: center; border-radius: var(--rayon);
  min-height: 44px;
}
.calculateur__hors-perimetre { margin-top: var(--espace-sm); max-width: 50ch; }

.calculateur__resultat { display: flex; flex-direction: column; gap: var(--espace-sm); margin-top: var(--espace-md); }
/* Deux résultats séparés, JAMAIS un total unique (LOT 4) — deux colonnes, pas
   un "+" entre les deux qui suggérerait une addition. */
.calculateur__deux-chiffres { display: flex; flex-wrap: wrap; gap: var(--espace-lg); }
.calculateur__chiffre { font-family: var(--f-display); font-size: var(--fs-h3); font-weight: 800; color: var(--marqueur-texte); }
.calculateur__note { font-size: var(--fs-sm); color: var(--texte-doux); max-width: 40ch; }

/* -- 24. Sécurité & contrôle ----------------------------------------------------------- */
.securite { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espace-md); }
@media (max-width: 900px) { .securite { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .securite { grid-template-columns: 1fr; } }
.securite__point { display: flex; flex-direction: column; gap: 0.4em; border-top: var(--filet); padding-top: var(--espace-sm); }
.securite__point h3 { font-size: var(--fs-h5); font-family: var(--f-display); }
.securite__point p { font-size: var(--fs-sm); color: var(--texte-doux); }

/* -- 25. Raffinements "carnet" (Phase 4, promis au plan de design) --------------------- */
/* (a) Étiquette tamponnée — catégorie d'une capacité, légèrement de travers,
   fond façon tampon encreur (pas un badge SaaS parfaitement droit). */
.carte-capacite__categorie {
  display: inline-block; transform: rotate(-1.3deg);
  background: rgba(199,122,46,0.1); border: 1px solid rgba(199,122,46,0.35);
  padding: 0.2em 0.6em; border-radius: 2px; width: fit-content;
}
.carte-capacite:nth-child(3n+2) .carte-capacite__categorie { transform: rotate(1.1deg); }
.carte-capacite:nth-child(3n+3) .carte-capacite__categorie { transform: rotate(-0.6deg); }

/* (b) Soulignement marqueur — trait irrégulier façon feutre, pas un
   soulignement CSS parfaitement droit, pour l'emphase clé d'une clause. */
.engagement__clause em {
  font-style: normal; position: relative; color: var(--papier);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2,9 C40,13 90,4 130,8 C155,10.5 175,6 198,9' fill='none' stroke='%23C77A2E' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 0.5em;
  padding-inline: 0.05em;
}

/* (c) Fond registre — fines réglures horizontales derrière un chiffre mono,
   façon page de comptes tenue à la main (calculateur, chiffrage en marge). */
.chiffre-registre {
  background-image: repeating-linear-gradient(to bottom, transparent, transparent calc(1em - 1px), var(--separateur) 1em);
  background-position: 0 0.15em;
}

/* -- 26. Sélecteur de métier (Itération V2 — "le site s'adapte au métier") ------------- */
/* [hidden] par défaut dans le HTML : sans JS, ce bloc ne s'affiche jamais (§1.4,
   "le sélecteur disparaît proprement") — metiers.js retire l'attribut une fois prêt. */
.selecteur-metier {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7em;
  margin-bottom: var(--espace-sm);
  font-size: var(--fs-sm);
}
.selecteur-metier[hidden] { display: none; }
.selecteur-metier label { color: var(--texte-doux); white-space: nowrap; }
.selecteur-metier select {
  font-family: var(--f-texte); font-size: var(--fs-sm); font-weight: 500; color: var(--texte);
  background: var(--papier); border: var(--filet); border-radius: var(--rayon);
  padding: 0.5em 2em 0.5em 0.9em; max-width: 100%; min-height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23565B62' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8em center; appearance: none;
}
.selecteur-metier select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -- 27. Devis ouvrable (overlay, Itération V2) ------------------------------------------ */
.devis-ouvrir {
  margin-top: 0.6em; font-family: var(--f-mono); font-size: var(--fs-mono);
  background: none; border: 1px solid var(--marqueur); color: var(--marqueur-texte);
  padding: 0.5em 0.9em; border-radius: var(--rayon);
}
.devis-ouvrir:hover { background: rgba(199,122,46,0.08); }

.devis-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(18,22,27,0.72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--espace-md) var(--marge-page);
  overflow-y: auto;
}
.devis-overlay[hidden] { display: none; }

.devis-fermer {
  position: sticky; top: 0; margin-left: auto; margin-bottom: 0.6em;
  display: flex; align-items: center; gap: 0.5em;
  background: var(--encre); color: var(--papier); border: none;
  font-family: var(--f-mono); font-size: var(--fs-mono);
  padding: 0.6em 1em; border-radius: var(--rayon);
}

/* LOT 3 : le devis n'est plus une réplique HTML façon "image dans la page" — le
   vrai document est un PDF (assets/demo/, généré par tools/generate-devis-pdf.mjs).
   Cette carte résume et met en scène le passage brouillon → validé, elle ne
   redessine plus le tableau/les totaux. */
.devis-document {
  position: relative; background: #fff; color: #1a1a1a;
  width: min(560px, 100%); margin-top: 3.2rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 3px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
  font-family: 'Inter', Arial, sans-serif;
  overflow: hidden;
}
.devis-resume__emetteur { font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; }
.devis-resume__client { font-size: 0.9rem; color: #444; margin-top: 0.5em; line-height: 1.5; }
.devis-resume__montant {
  font-family: var(--f-display); font-weight: 800; font-size: 2.1rem; margin-top: 0.6em;
}
.devis-resume__montant span { font-family: var(--f-mono); font-size: 0.8rem; font-weight: 400; color: #777; margin-left: 0.3em; }

.devis-pdf-zone { display: flex; flex-direction: column; gap: 0.6em; margin-top: 1.2em; }
.devis-pdf-lien {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--f-texte); font-weight: 600; font-size: 0.92rem;
  background: var(--craie); color: #1a1a1a; border: 1px solid var(--filet-couleur);
  border-radius: var(--rayon); padding: 0.75em 1em; text-decoration: none;
}
.devis-pdf-lien:hover { border-color: var(--marqueur); }
.devis-pdf-lien--valide {
  background: var(--marqueur); color: #fff; border-color: var(--marqueur); font-weight: 700;
}
.devis-pdf-lien--brouillon { background: transparent; font-size: 0.82rem; padding: 0.55em 0.9em; }

.devis-resume__pied { margin-top: 1.4em; font-size: 0.68rem; color: #888; }
.devis-actions { display: flex; flex-wrap: wrap; gap: 0.7em; margin-top: 1.2em; }
.devis-actions .bouton { font-size: 0.85rem; padding: 0.7em 1.2em; }

.devis-carte-validation {
  width: min(720px, 100%); margin-top: 0.9em; background: var(--papier); color: var(--texte);
  border: var(--filet); border-radius: 3px; padding: var(--espace-sm) var(--espace-md);
}
.devis-carte-validation p:first-child { font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--texte-doux); margin-bottom: 0.4em; }
.devis-carte-validation__actions { display: flex; gap: 0.7em; margin-top: 0.8em; }
.devis-carte-validation__actions button {
  font-family: var(--f-texte); font-weight: 600; font-size: var(--fs-sm);
  padding: 0.6em 1.1em; border-radius: var(--rayon); border: 1px solid transparent;
}
.devis-carte-validation__actions .valider { background: var(--marqueur); color: #fff; }
.devis-carte-validation__actions .annuler { background: transparent; border-color: var(--texte-doux); color: var(--texte); }

@media (max-width: 560px) {
  .devis-overlay { padding: var(--espace-sm) 0.6rem; }
  .devis-document { margin-top: 2.6rem; }
}

/* -- 28. Page /demonstration/ (MISSION Refonte, LOT 2) -------------------------------- */
/* Traitement "plus immersif" que le reste du site (mission LOT 2) : bandeau --demo-nuit
   en entrée (console), corps sur --demo-kraft (papier de terrain plus dense que le
   papier de bureau du reste du site). Le devis reste un vrai modal plein écran
   déclenché depuis le journal (voir section 27) — jamais un panneau latéral fixe
   façon copilote logiciel (revu en Passe 2 du plan). */
.demonstration-entete {
  background: var(--demo-nuit); color: var(--papier);
  padding: var(--espace-lg) var(--marge-page) var(--espace-md);
}
.demonstration-conteneur { max-width: 720px; margin-inline: auto; }
.demonstration-entete h1 { color: var(--papier); max-width: 20ch; }
.demonstration-entete__lead { color: #B9C4E0; max-width: 54ch; margin-top: 0.7em; font-size: var(--fs-body); }

.demonstration-corps { background: var(--demo-kraft); padding: var(--espace-lg) var(--marge-page); }

@media (max-width: 640px) {
  .demonstration-entete, .demonstration-corps { padding-inline: var(--marge-page); }
}

/* L'ancien chat "métier en texte libre" (.jarvis-chat__*) a été retiré ici (MISSION
   V2, LOT 4) : la démo interactive vit désormais dans un composant à part entière,
   réplique du VRAI Jarvis (voir assets/css/demo-jarvis.css, .demo-app), chargé
   uniquement sur /demonstration/. */

/* -- 29. Séquence éclair de l'accueil (mission UX 18/08, point 9 ; REFAITE le
   19/08/2026, retour utilisateur "pas professionnel, pas interactif, mauvais format
   sur téléphone") --------------------------------------------------------------
   Ancienne version : 4 calques en fondu (texte → capture → capture → texte)
   superposés dans un cadre à RATIO UNIQUE FIXE (1170/2532), purement automatique,
   sans aucun contrôle utilisateur — 2 des 4 calques étaient une simple phrase
   flottant seule dans cet immense cadre vide (aucune image), ce qui lisait comme un
   gros bloc creux plutôt qu'une démonstration du produit.
   Nouvelle version : un vrai petit carrousel de 2 VRAIES captures (jamais de calque
   texte seul — la légende sous le cadre porte le récit), navigable au clic
   (flèches + puces), au doigt (glisser horizontal) et au clavier (flèches ← →).
   L'auto-défilement s'arrête dès la première interaction manuelle (JS) — il ne
   revient jamais s'imposer une fois que le visiteur a pris la main. Le cadre épouse
   la hauteur RÉELLE de la capture affichée (recalculée en JS à chaque étape,
   transition douce) au lieu d'un rectangle vertical géant identique pour les 2
   images, qui laissait un vide autour de la plus courte des deux (04-carte-
   validation, 942×807, bien plus large que haute que 02-devis-terrain, 1170×2532). */
.demo-eclair { max-width: 420px; margin: 0 auto; }
.demo-eclair__cadre { position: relative; }
.demo-eclair__ecran {
  border: var(--filet); background: var(--craie);
  overflow: hidden; transition: height 380ms var(--easing);
}
.demo-eclair__ecran img { width: 100%; height: 100%; object-fit: contain; display: block; }
.demo-eclair__fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0; border-radius: 50%; border: var(--filet);
  background: rgba(244, 245, 243, 0.92); color: var(--encre);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; box-shadow: 0 1px 6px rgba(22, 24, 26, 0.14);
  transition: background 200ms var(--easing), transform 150ms var(--easing);
}
.demo-eclair__fleche:hover, .demo-eclair__fleche:focus-visible { background: var(--papier); transform: translateY(-50%) scale(1.06); }
.demo-eclair__fleche--prev { left: 10px; }
.demo-eclair__fleche--next { right: 10px; }
.demo-eclair__legende { margin-top: 0.7em; text-align: center; min-height: 2.6em; }
.demo-eclair__points { display: flex; justify-content: center; gap: 0.5em; margin-top: 0.6em; }
.demo-eclair__points button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; border: none;
  background: var(--separateur); cursor: pointer;
  transition: background 300ms var(--easing), transform 200ms var(--easing);
}
.demo-eclair__points button.est-actif { background: var(--marqueur); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .demo-eclair__ecran { transition: none; }
}