/* === POLICES === */

/* Polices auto-hébergées : sous-ensemble latin uniquement, vérifié suffisant pour
   les 74 caractères distincts des 5 pages — accents français, guillemets, tiret
   cadratin et points de suspension compris. Déclarées ici et non dans un fichier
   séparé, pour ne pas ajouter une requête.
   font-display:swap est posé explicitement : ce comportement venait du paramètre
   display=swap de l'URL Google. C'est lui qui affiche le texte immédiatement dans
   la police de repli au lieu de le laisser invisible le temps du téléchargement.
   Les trois familles sont sous licence SIL Open Font License 1.1 : texte intégral
   et attributions dans assets/fonts/OFL.txt. */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bricolage-grotesque-700-800-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bricolage-grotesque-700-800-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/public-sans-400-600-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/public-sans-400-600-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/public-sans-400-600-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/*
  Saberscript — styles de base (reset + éléments)
  À charger APRÈS tokens.css.

  NOTE POUR LES TÂCHES SUIVANTES — soulignement des liens :
  la règle `a{border-bottom:...}` ci-dessous souligne TOUS les liens par défaut,
  y compris ceux qui serviront de logo, d'éléments de navigation ou de boutons
  (header, footer, CTA). Ces cas devront explicitement neutraliser ce trait au
  niveau de leurs classes spécifiques (par ex. `border:none` sur `.nav__link`,
  `.logo`, `.btn`) — à traiter lors de l'intégration du header/footer et des
  composants, pas ici.
*/
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--size-body);font-weight:var(--weight-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-title);line-height:var(--leading-title);margin:0}
h1{font-size:var(--size-h1);letter-spacing:var(--tracking-display)}
h2{font-size:var(--size-h2)}
h3{font-size:var(--size-h3)}
h4{font-size:var(--size-h4);font-weight:var(--weight-display-soft)}
p{margin:0;max-width:var(--measure)}
code,kbd,samp{font-family:var(--font-mono);font-size:var(--size-mono)}
a{color:var(--text-accent);text-decoration:none;border-bottom:var(--hairline) solid var(--border-accent);transition:var(--transition-ui)}
a:hover{color:var(--text-body);border-bottom-color:var(--border-strong)}
a:active{opacity:.8}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--ring-focus)}
hr{border:none;border-top:var(--separator);margin:var(--space-6) 0}
::selection{background:var(--rouge-cardinal);color:var(--blanc-casse)}

/* === UTILITAIRES === */
/* Masque un élément à l'écran tout en le laissant lisible par les lecteurs
   d'écran et les moteurs de recherche. Ni display:none ni visibility:hidden,
   qui le retireraient aussi de l'arbre d'accessibilité. */
.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}

/* Lien d'évitement (WCAG 2.4.1). Invisible et hors flux au repos — position:fixed
   plus un décalage hors écran — mais jamais display:none ni visibility:hidden, qui
   le retireraient de l'ordre de tabulation. border:none neutralise le soulignement
   rouge que la règle générique sur <a> appliquerait ; z-index:30 le fait passer
   au-dessus du header collant, qui est à 20. */
.skip-link{position:fixed;top:0;left:var(--gutter);z-index:30;transform:translateY(-200%);background:var(--surface-inverse);color:var(--text-on-inverse);border:none;padding:var(--space-3) var(--space-4);border-radius:var(--radius-xs);font-family:var(--font-body);font-size:var(--size-body-sm);transition:transform var(--duration-fast) var(--ease-standard)}
.skip-link:focus{transform:translateY(0)}

/* === COMPOSANTS === */

/* 1 — Icônes (lucide-static, chargées en mask-image ; la couleur suit currentColor) */
/* Les SVG sont intégrés en data URI pourcent-encodé plutôt que chargés depuis
   unpkg.com : un masque qui échoue est traité comme entièrement transparent, donc
   une panne du CDN faisait disparaître toutes les icônes — burger compris, ce qui
   rendait la navigation mobile inutilisable. Pourcent-encodage et non base64 : le
   SVG reste du texte et se compresse comme tel. */
.icon{display:inline-block;flex:0 0 auto;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:var(--icon-url);mask-image:var(--icon-url);width:20px;height:20px}
.icon--sm{width:16px;height:16px}
.icon--lg{width:24px;height:24px}
.icon-arrow-right{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14' /%3E%3Cpath d='m12 5 7 7-7 7' /%3E%3C/svg%3E")}
.icon-check{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E")}
.icon-chevron-down{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m6 9 6 6 6-6' /%3E%3C/svg%3E")}
.icon-corner-down-right{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='15 10 20 15 15 20' /%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12' /%3E%3C/svg%3E")}
.icon-info{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cpath d='M12 16v-4' /%3E%3Cpath d='M12 8h.01' /%3E%3C/svg%3E")}
.icon-linkedin{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z' /%3E%3Crect width='4' height='12' x='2' y='9' /%3E%3Ccircle cx='4' cy='4' r='2' /%3E%3C/svg%3E")}
.icon-pen-tool{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z' /%3E%3Cpath d='m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18' /%3E%3Cpath d='m2.3 2.3 7.286 7.286' /%3E%3Ccircle cx='11' cy='11' r='2' /%3E%3C/svg%3E")}
.icon-rotate-ccw{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' /%3E%3Cpath d='M3 3v5h5' /%3E%3C/svg%3E")}
.icon-search{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='11' cy='11' r='8' /%3E%3Cpath d='m21 21-4.3-4.3' /%3E%3C/svg%3E")}
.icon-target{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Ccircle cx='12' cy='12' r='6' /%3E%3Ccircle cx='12' cy='12' r='2' /%3E%3C/svg%3E")}
.icon-user{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2' /%3E%3Ccircle cx='12' cy='7' r='4' /%3E%3C/svg%3E")}
.icon-building-2{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z' /%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2' /%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2' /%3E%3Cpath d='M10 6h4' /%3E%3Cpath d='M10 10h4' /%3E%3Cpath d='M10 14h4' /%3E%3Cpath d='M10 18h4' /%3E%3C/svg%3E")}
.icon-coins{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='8' cy='8' r='6' /%3E%3Cpath d='M18.09 10.37A6 6 0 1 1 10.34 18' /%3E%3Cpath d='M7 6h1v4' /%3E%3Cpath d='m16.71 13.88.7.71-2.82 2.82' /%3E%3C/svg%3E")}
.icon-x{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M18 6 6 18' /%3E%3Cpath d='m6 6 12 12' /%3E%3C/svg%3E")}
/* Ajout tâche 2b — icône du toast d'erreur. Nommée alert-circle côté classe (nom
   attendu par le design system) mais pointée sur circle-alert.svg : lucide a renommé
   ce fichier, alert-circle.svg renvoie un 404 en 0.454.0. */
.icon-alert-circle{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10' /%3E%3Cline x1='12' x2='12' y1='8' y2='12' /%3E%3Cline x1='12' x2='12.01' y1='16' y2='16' /%3E%3C/svg%3E")}

/* 2 — Bouton */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;font-family:var(--font-body);font-size:var(--size-body);font-weight:var(--weight-body-strong);line-height:1;white-space:nowrap;letter-spacing:0.005em;text-decoration:none;border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition-ui);border:1px solid transparent}
/* État désactivé neutre : même rendu quelle que soit la variante d'origine. */
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;background:transparent;color:var(--text-muted);border-color:var(--border-hairline)}
.btn:active:not(:disabled):not([aria-disabled="true"]){transform:scale(var(--press-scale))}
.btn--sm{height:36px;padding:0 14px;font-size:var(--size-body-sm);gap:8px}
.btn--lg{height:52px;padding:0 28px;font-size:var(--size-body-lg);gap:12px}
.btn--primary{background:var(--surface-accent);color:var(--text-on-accent);border-color:var(--surface-accent)}
.btn--primary:hover:not(:disabled):not([aria-disabled="true"]){background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--secondary{background:transparent;color:var(--text-body);border-color:var(--border-strong)}
.btn--secondary:hover:not(:disabled):not([aria-disabled="true"]){border-color:var(--border-accent);color:var(--text-accent)}
.btn--ghost{background:transparent;color:var(--text-body);border-color:transparent}
.btn--ghost:hover:not(:disabled):not([aria-disabled="true"]){background:var(--state-hover-ink)}
.btn--full{display:flex;width:100%}
/* Aucune règle a.btn n'est nécessaire : le shorthand border:1px solid de .btn
   couvre les 4 côtés et l'emporte sur la règle générique a{border-bottom:...}
   du reset (tâche 1). */

/* 3 — Carte */
.card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-5);border-radius:var(--radius-xs);background:var(--surface-card);border:1px solid var(--border-hairline);color:var(--text-body)}
.card--plain{background:transparent;border:none;border-top:1px solid var(--border-hairline);padding:var(--space-5) 0 0}
.card--inverse{background:var(--surface-inverse);border-color:var(--surface-inverse);color:var(--text-on-inverse)}
.card--accent-bar{border-top:var(--accent-bar) solid var(--rouge-cardinal)}

/* 4 — Badge */
.badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;font-family:var(--font-body);font-size:var(--size-caption);font-weight:var(--weight-body-strong);text-transform:uppercase;letter-spacing:var(--tracking-caps);line-height:1;border-radius:var(--radius-xs)}
.badge--accent{background:var(--surface-accent);color:var(--text-on-accent);border:1px solid var(--surface-accent)}
.badge--ink{background:var(--surface-inverse);color:var(--text-on-inverse);border:1px solid var(--surface-inverse)}
.badge--outline{background:transparent;color:var(--text-body);border:1px solid var(--border-hairline)}

/* 5 — Pastille sur fond sombre */
.chip{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:var(--size-caption);padding:6px 10px;border:1px solid rgb(247 244 241 / 0.18);border-radius:var(--radius-xs);color:inherit}

/* 6 — Enveloppe de section */
.section{padding:var(--section-y) 0}
.section__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.section__label{display:block;font-family:var(--font-mono);font-size:var(--size-caption);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-accent);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-hairline);margin-bottom:var(--space-6)}
.section__title{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--size-h1);letter-spacing:var(--tracking-display);line-height:var(--leading-title);max-width:22ch;margin:0 0 var(--space-6)}
.section--inverse{background:var(--noir-intense);color:var(--blanc-casse)}
/* Correction a11y tâche 2a : le libellé de section en Rouge Cardinal sur fond sombre
   ne mesure que 3,17:1 (échec AA en texte courant à 13px). Sur fond sombre il passe
   donc en Blanc Cassé translucide ; le rouge reste réservé au gros texte, aux boutons
   et aux barres d'accent. Sur fond clair, il reste en Rouge Cardinal (5,37:1, AA ✓). */
.section--inverse .section__label{color:rgb(247 244 241 / 0.72);border-bottom-color:rgb(247 244 241 / 0.18)}

/* 7 — Utilitaire de focus sur fond sombre (prêt à l'emploi, non utilisé en 2a) */
.focus-on-dark:focus-visible{outline:none;box-shadow:var(--ring-focus-on-dark)}

/* 8 — Colonne de lecture pour texte long */
/* Les pages légales sont faites de longs paragraphes, là où le reste du site
   aligne des blocs courts. La règle générique p{max-width:var(--measure)} tenait
   déjà les paragraphes à une mesure lisible, mais pas les titres, les listes ni
   les tableaux : sur un conteneur de 1200px, la colonne se disloquait d'un bloc
   à l'autre. Cette classe étend la même mesure à tout le bloc et installe le
   rythme vertical dont les sections courtes n'avaient pas besoin.
   La mesure retenue est --measure-narrow et non --measure : le ch vaut la largeur
   du « 0 », nettement plus large que la moyenne des glyphes de Public Sans. Mesuré
   dans le navigateur, --measure (62ch) laisse passer 85 caractères par ligne, bien
   au-delà du confort de lecture ; --measure-narrow (46ch) en donne 63, soit la
   plage classique. */
.prose{max-width:var(--measure-narrow)}
.prose > * + *{margin-top:var(--space-5)}
/* Les intertitres respirent davantage que les paragraphes entre eux, pour que
   l'œil retrouve les sections d'un coup d'œil dans un texte long. */
.prose h2{font-weight:var(--weight-display-soft);margin-top:var(--space-8)}
/* La ligne de date qui suit le H1 : même grammaire que les autres métadonnées du
   site (mono, corps réduit, gris). Ciblée par sa position, pour ne pas ajouter
   une classe là où la structure suffit — la page Mentions légales n'a pas de
   paragraphe à cet endroit, elle n'est donc pas concernée. */
.prose > h1 + p{font-family:var(--font-mono);font-size:var(--size-body-sm);color:var(--text-muted)}
.prose ul{margin:0;padding-left:var(--space-5)}
.prose li + li{margin-top:var(--space-2)}

/* 9 — Avertissement d'information manquante — BLOC TEMPORAIRE */
/* Rend visible un trou dans le contenu légal, pour qu'il ne franchisse pas la
   mise en ligne inaperçu. Reprend la barre d'accent de .card--accent-bar sur le
   lavis d'accent déjà défini ; aucune couleur nouvelle.
   À SUPPRIMER, avec le bloc correspondant de mentions-legales.html, dès que
   l'identité de l'hébergeur est connue. */
.a-completer{padding:var(--space-5);background:var(--accent-wash);border:var(--hairline) solid var(--border-accent);border-left:var(--accent-bar) solid var(--border-accent);border-radius:var(--radius-xs);font-weight:var(--weight-body-medium)}

/* 10 — Tableau de données */
/* Les deux tableaux de la page Confidentialité sont les premiers du site : aucun
   composant n'existait. Sobre, sans filets verticaux, en-têtes dans la même
   grammaire que .section__label.
   Le conteneur défile horizontalement quand la place manque, au lieu de laisser
   trois colonnes se tasser : à 320px il reste 256px entre les gouttières, et
   « Adresse email professionnelle » ne s'y découpe pas sans que le document
   entier se mette à défiler. C'est le choix inverse de celui fait pour .tabs,
   parce que le motif du refus là-bas — un conteneur de défilement rogne l'anneau
   de focus — ne s'applique pas ici : ces tableaux ne contiennent aucun élément
   focalisable. WCAG 1.4.10 excepte d'ailleurs explicitement les tableaux de
   données du reflow. Le tabindex="0" posé dans le balisage rend ce défilement
   atteignable au clavier (WCAG 2.1.1). */
/* max-width et min-width ne sont pas redondants avec overflow-x :
   - max-width:100% empêche le conteneur de dépasser son parent si le tableau
     impose sa largeur par min-width ; sans lui, un conteneur de défilement en
     largeur auto peut être dimensionné par son contenu.
   - min-width:0 n'a aucun effet ici, .prose étant un bloc, mais le jour où ce
     conteneur devient enfant d'un flex ou d'une grille, le min-width:auto par
     défaut lui interdirait de se réduire et le débordement remonterait jusqu'au
     document. Deux lignes qui coûtent zéro et ferment la porte. */
.table-wrap{max-width:100%;min-width:var(--space-0);overflow-x:auto}
/* min-width:38ch vaut 349px avec Public Sans chargée (1ch = 9,17px, mesuré).
   Mesuré aussi : la largeur min-content des deux tableaux est de 318px et
   365px, toutes deux déjà au-dessus des 256px disponibles à 320px de viewport.
   Le défilement horizontal est donc imposé par le contenu lui-même, pas par
   cette déclaration — la supprimer ne supprimerait pas le défilement.
   Ce qu'elle fait : elle ne porte que sur le premier tableau, qu'elle fait passer
   de 318 à 349px, ce qui ramène la hauteur de ses lignes de 165px à deux lignes
   de texte. Le second tableau, dont le minimum naturel est 365px, n'est pas
   concerné. Une valeur plus haute n'achèterait que du défilement en plus. */
.table{width:100%;min-width:38ch;border-collapse:collapse;font-size:var(--size-body-sm)}
.table th,.table td{padding:var(--space-3) var(--space-4) var(--space-3) var(--space-0);text-align:left;vertical-align:top;border-bottom:var(--separator)}
.table th{font-family:var(--font-mono);font-size:var(--size-caption);font-weight:var(--weight-body);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.table tbody tr:last-child td{border-bottom:none}

/* === COMPOSANTS FORMULAIRE === */
/* L'état coché des cases et des radios repose sur le sélecteur natif :checked
   combiné à ~ sur l'élément visuel : aucun JavaScript n'est nécessaire.
   L'input réel reste dans le DOM (focusable, lisible par un lecteur d'écran)
   mais visuellement masqué ; le focus est reporté sur .checkbox__box / .radio__dot. */

/* 2 — Enveloppe de champ */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field__label{font-family:var(--font-body);font-size:var(--size-caption);font-weight:var(--weight-body-strong);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-muted)}
.field__hint{font-family:var(--font-body);font-size:var(--size-body-sm);color:var(--text-muted)}
.field__error{font-family:var(--font-body);font-size:var(--size-body-sm);color:var(--text-accent)}

/* 3 — Champ texte / zone de texte */
/* box-sizing explicite : le reset ne pose pas de border-box global, donc en
   content-box un width:100% déborderait de son conteneur des 24px de padding
   et des 2px de bordure. Le <select> n'est pas concerné, les navigateurs le
   passent déjà en border-box. */
.input{box-sizing:border-box;width:100%;height:44px;padding:0 12px;font-family:var(--font-body);font-size:var(--size-body);color:var(--text-body);background:transparent;border:1px solid var(--border-field);border-radius:var(--radius-xs);outline:none;transition:var(--transition-ui)}
/* opacity:1 est nécessaire : Firefox applique une opacité par défaut aux
   placeholders, qui ferait retomber le contraste sous le seuil malgré la couleur. */
.input::placeholder{color:var(--text-muted);opacity:1}
.input:focus{border-color:var(--border-accent)}
.input--error{border-color:var(--border-accent)}
textarea.input{height:auto;padding:12px;line-height:var(--leading-body);resize:vertical}

/* 4 — Select */
.select-wrap{position:relative;display:flex;align-items:center}
.select-wrap .input{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.select-wrap .icon{position:absolute;right:12px;pointer-events:none;color:var(--text-muted)}

/* 5 — Case à cocher */
.checkbox{display:inline-flex;align-items:flex-start;gap:var(--space-3);min-height:44px;padding:10px 0;cursor:pointer;font-family:var(--font-body);font-size:var(--size-body);color:var(--text-body)}
.checkbox input{position:absolute;opacity:0;width:1px;height:1px}
.checkbox__box{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 auto;margin-top:2px;color:var(--text-on-accent);border:1px solid var(--border-strong);border-radius:var(--radius-xs);transition:var(--transition-ui)}
.checkbox__box .icon{display:none}
.checkbox input:checked ~ .checkbox__box{background:var(--surface-accent);border-color:var(--surface-accent)}
.checkbox input:checked ~ .checkbox__box .icon{display:inline-block}
.checkbox input:focus-visible ~ .checkbox__box{box-shadow:var(--ring-focus)}

/* 6 — Bouton radio */
.radio{display:inline-flex;align-items:center;gap:var(--space-3);min-height:44px;cursor:pointer;font-family:var(--font-body);font-size:var(--size-body);color:var(--text-body)}
.radio input{position:absolute;opacity:0;width:1px;height:1px}
.radio__dot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 auto;border:1px solid var(--border-strong);border-radius:var(--radius-pill);transition:var(--transition-ui)}
.radio__dot::after{content:"";width:10px;height:10px;border-radius:var(--radius-pill);background:transparent}
.radio input:checked ~ .radio__dot{border-color:var(--border-accent)}
.radio input:checked ~ .radio__dot::after{background:var(--surface-accent)}
.radio input:focus-visible ~ .radio__dot{box-shadow:var(--ring-focus)}

/* 7 — Toast */
.toast{display:flex;align-items:center;gap:var(--space-3);padding:12px 12px 12px 16px;background:var(--surface-inverse);color:var(--text-on-inverse);border-left:var(--accent-bar) solid var(--rouge-cardinal);border-radius:var(--radius-xs);font-family:var(--font-body);font-size:var(--size-body-sm)}
.toast__message{flex:1}
/* Tonalité erreur : box claire à texte rouge. Bordure complète nécessaire ici,
   le fond de page étant déjà en Blanc Cassé — contrairement au toast sombre,
   qui se détache du fond sans bordure. S'ajoute à .toast, ne le remplace pas. */
.toast--error{background:var(--blanc-casse);color:var(--rouge-cardinal);border:1px solid var(--border-hairline);border-left:var(--accent-bar) solid var(--rouge-cardinal)}

/* 8 — Tooltip */
.tooltip{position:relative;display:inline-flex}
.tooltip__bubble{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-8px);padding:6px 10px;white-space:nowrap;background:var(--surface-inverse);color:var(--text-on-inverse);font-family:var(--font-body);font-size:var(--size-caption);line-height:1.4;border-radius:var(--radius-xs);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-standard);z-index:50}
/* pointer-events passe à auto seulement quand la bulle est visible : au repos,
   en opacity:0, elle intercepterait les clics dans la zone qu'elle occupe
   au-dessus du déclencheur. */
.tooltip:hover .tooltip__bubble,.tooltip:focus-within .tooltip__bubble{opacity:1;pointer-events:auto}
.tooltip.is-dismissed .tooltip__bubble{opacity:0;pointer-events:none}

/* 9 — Bouton icône */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;color:var(--text-body);background:transparent;border:1px solid transparent;border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition-ui)}
.icon-btn:hover{background:var(--state-hover-ink)}
.icon-btn--sm{width:36px;height:36px}

/* 10 — Champ-piège anti-robot */
/* Volontairement distinct de .sr-only : .sr-only sert à exposer du contenu aux
   lecteurs d'écran en le retirant de l'affichage. Ici l'intention est inverse —
   le champ ne doit atteindre personne. Il est sorti du flux et renvoyé hors de
   la fenêtre ; le aria-hidden et le tabindex="-1" du balisage le retirent aussi
   du clavier et des technologies d'assistance. */
.piege-robot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* === HEADER & FOOTER === */

/* Ajout — icône manquante pour le bouton burger */
.icon-menu{--icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='4' x2='20' y1='12' y2='12' /%3E%3Cline x1='4' x2='20' y1='6' y2='6' /%3E%3Cline x1='4' x2='20' y1='18' y2='18' /%3E%3C/svg%3E")}

/* En-tête */
.site-header{position:sticky;top:0;z-index:20;background:var(--surface-page);border-bottom:1px solid var(--border-hairline)}
.site-header__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);height:84px;display:flex;align-items:center;gap:var(--space-7)}
.logo-link{display:flex;align-items:center;border:none}
.logo-link img{height:38px;width:auto;display:block}
.nav-toggle{display:none;margin-left:auto}
.site-header__panel{display:flex;align-items:center;gap:var(--space-7)}
.nav{display:flex;gap:var(--space-6);margin-left:var(--space-5)}
.nav__link{border-bottom:1px solid transparent;color:var(--text-body);font-family:var(--font-body);font-size:var(--size-body-sm);font-weight:var(--weight-body);padding-bottom:2px;transition:var(--transition-ui)}
.nav__link:hover{border-bottom-color:var(--border-strong)}
.nav__link--active{font-weight:var(--weight-body-strong);border-bottom-color:var(--rouge-cardinal)}
.site-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}

@media (max-width:767px){
  .nav-toggle{display:inline-flex}
  .site-header__panel{display:none;position:absolute;top:84px;left:0;right:0;flex-direction:column;align-items:stretch;gap:var(--space-4);background:var(--surface-page);border-bottom:1px solid var(--border-hairline);padding:var(--space-5) var(--gutter)}
  .site-header__panel.is-open{display:flex}
  .site-header__panel .nav{flex-direction:column;gap:var(--space-3);margin-left:0}
  .site-header__actions{flex-direction:column;align-items:stretch;gap:var(--space-3)}
  .site-header__actions .btn{width:100%}
}

/* Pied de page */
.site-footer{background:var(--noir-intense);color:var(--blanc-casse);margin-top:var(--space-10)}
.site-footer__grid{max-width:var(--container-max);margin:0 auto;padding:var(--space-8) var(--gutter);display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-7)}
.site-footer__brand{display:flex;flex-direction:column;gap:var(--space-4)}
/* L'image est un élément flex en colonne : sans align-self, elle est étirée à la
   largeur de la colonne (cross-size auto + align-items:stretch), ce qui déforme un
   PNG et recentre un SVG au lieu de le caler à gauche. */
.site-footer__brand img{align-self:flex-start;height:40px;width:auto}
.site-footer__brand p{font-size:var(--size-body-sm);color:rgb(247 244 241 / 0.72);max-width:38ch}
.site-footer__col{display:flex;flex-direction:column;gap:var(--space-2)}
.site-footer__heading{font-size:var(--size-caption);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:rgb(247 244 241 / 0.72);margin-bottom:6px}
.site-footer__col a{color:var(--blanc-casse);border:none;font-size:var(--size-body-sm)}
.site-footer__col a:hover{color:rgb(247 244 241 / 0.72)}
.site-footer__bottom{border-top:1px solid rgb(247 244 241 / 0.18)}
.site-footer__bottom-inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-4) var(--gutter);display:flex;align-items:center;gap:var(--space-4);font-family:var(--font-mono);font-size:var(--size-caption);color:rgb(247 244 241 / 0.72)}
.site-footer__bottom img{height:10px}
/* Les deux liens légaux. display:flex pour les espacer sans marge sur le lien
   lui-même. Ils héritent la couleur de la barre : le rouge d'accent des liens
   génériques n'est pas lisible sur le Noir Intense. Comme le texte voisin a la
   même couleur, le soulignement est ce qui les distingue — la couleur seule ne
   suffirait pas (WCAG 1.4.1).
   flex-wrap permet aux deux liens de se répartir sur deux lignes quand la place
   manque. Il ne suffit pas à lui seul : tant que le parent reste en rangée
   unique, cet élément ne peut pas descendre sous la mention de copyright. La
   seconde moitié du correctif est dans la media query du pied de page, plus bas
   — les deux se lisent ensemble. */
.site-footer__legal{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--space-4)}
.site-footer__legal a{color:inherit;border:none;text-decoration:underline;text-underline-offset:0.2em}
.site-footer__legal a:hover{color:var(--text-on-inverse)}
@media (max-width:767px){
  .site-footer__grid{grid-template-columns:1fr;gap:var(--space-6)}

  /* La barre du bas est un flex en rangée unique. Son flex-wrap:nowrap par défaut
     verrouille la rangée : quoi que déclare .site-footer__legal, les deux liens ne
     peuvent pas descendre sous la mention de copyright, et toute largeur en trop
     ressort en défilement du document (WCAG 1.4.10).
     min-width:0 sur les enfants est la seconde moitié du correctif : sur un enfant
     flex, min-width vaut auto, ce qui lui interdit de se réduire sous la largeur de
     son contenu — le flex-wrap du parent ne suffirait pas.
     Entre 520 et 767px la rangée tient encore sur une seule ligne : ces deux
     déclarations ne changent alors rien au rendu, elles ouvrent seulement le
     passage à la ligne pour le jour où il devient nécessaire.
     Tout est confiné à cette media query : au-dessus de 768px, rien ne change. */
  .site-footer__bottom-inner{flex-wrap:wrap;row-gap:var(--space-3)}
  .site-footer__bottom-inner > *{min-width:var(--space-0)}
}

/* Neutralisation de margin-left:auto, calée sur la largeur où la rangée passe
   réellement à la ligne. Mesurée sur le site déployé en faisant varier le
   viewport pixel par pixel : la barre mesure 52px de haut (une seule ligne) à
   partir de 520px, et 84px (deux lignes) à 519px et en dessous. Le seuil est
   donc 520, et la marge automatique n'est neutralisée qu'en dessous de lui.
   Pourquoi la neutraliser : sur une rangée passée à la ligne, la marge
   automatique repousserait les liens à droite de leur propre ligne, laissant un
   décalage résiduel au lieu d'un empilement aligné à gauche. Au-dessus de 520px
   elle reprend son rôle et les liens restent collés au bord droit, comme en
   desktop — le comportement n'est plus perdu avant d'être devenu gênant.
   520 ne réutilise aucun point de rupture existant : les seuls en place sont
   767/768, à 247px de là. La borne entière 519 suit la convention déjà retenue
   pour ce couple. */
@media (max-width:519px){
  .site-footer__legal{margin-left:var(--space-0)}
}

/* === PAGE — ACCUEIL === */

/* Hero — mobile d'abord : les deux colonnes s'empilent, la colonne latérale est
   séparée par un filet horizontal ; à partir de 768px, grille 7fr/4fr alignée en
   bas et le filet passe à la verticale. Aucun style de bouton n'est redéfini ici :
   seule la largeur est forcée sous 768px pour éviter la troncature à 375px. */
.hero{border-bottom:1px solid var(--border-hairline)}
.hero__inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-10) var(--gutter) var(--space-9)}
.hero__grid{display:grid;gap:var(--space-8)}
.hero__kicker{font-family:var(--font-mono);font-size:var(--size-caption);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-accent)}
.hero__title{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--size-display);letter-spacing:var(--tracking-display);line-height:var(--leading-display);margin:var(--space-5) 0 0}
.hero__lead{font-size:var(--size-body-lg);margin-top:var(--space-5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.hero__aside{border-top:1px solid var(--border-hairline);padding-top:var(--space-6)}
.hero__aside p{font-size:var(--size-body-sm);color:var(--text-muted)}
.hero__aside .hero__meta{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-muted);margin-top:var(--space-5)}

@media (max-width:767px){
  .hero__actions .btn{width:100%}
}
@media (min-width:768px){
  .hero__grid{grid-template-columns:7fr 4fr;align-items:end}
  .hero__aside{border-top:none;border-left:1px solid var(--border-hairline);padding-top:0;padding-left:var(--space-6)}
}

/* Section « Trois niveaux d'intervention » — seule la grille et la ligne d'en-tête
   des cartes sont propres à la page. Les cartes réutilisent .card + .card--plain,
   et les H3 prennent déjà police display / graisse display / --size-h3 du reset :
   aucune règle de titre n'est redéfinie ici. */
.levels{display:grid;gap:var(--space-6)}
.level__head{display:flex;align-items:center;gap:var(--space-3)}
.level__num{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-muted)}
.level__text{font-size:var(--size-body-sm);color:var(--text-muted)}

@media (min-width:768px){
  .levels{grid-template-columns:repeat(3,1fr)}
}

/* Section « Différenciateur » (fond inverse) — pas de H2 : l'accroche est un
   paragraphe stylé. Les tags réutilisent .chip (livrée en 2b précisément pour ce
   bloc) : police mono, --size-caption, padding 6px 10px, filet Blanc Cassé à 18 %
   et --radius-xs y sont déjà définis, rien n'est redéclaré ici. */
.diff{display:grid;gap:var(--space-8)}
.diff__lead{font-family:var(--font-display);font-weight:var(--weight-display-soft);font-size:var(--size-h2);line-height:var(--leading-title);letter-spacing:var(--tracking-title);max-width:30ch}
.diff__accent{color:var(--rouge-cardinal)}
.diff__side{display:flex;flex-direction:column;gap:var(--space-4)}
.diff__side p{font-size:var(--size-body-sm);color:rgb(247 244 241 / 0.72)}
.diff__tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}

@media (min-width:768px){
  .diff{grid-template-columns:3fr 2fr;align-items:start}
}

/* Bloc CTA final — le H2 reste nu : le reset lui donne déjà police display,
   graisse display, --size-h2 et --tracking-title, rien à redéclarer. En colonne
   (mobile) le bouton s'étire de lui-même via align-items:stretch : aucune règle
   de largeur n'est posée sur .btn. */
.cta{display:flex;flex-direction:column;gap:var(--space-6);border-top:var(--accent-bar) solid var(--rouge-cardinal);padding-top:var(--space-6)}
.cta__sub{color:var(--text-muted);margin-top:var(--space-2)}

@media (min-width:768px){
  .cta{flex-direction:row;align-items:center;justify-content:space-between}
}

/* === PAGE — SERVICES === */

/* Section « Services ». Deux écarts assumés à l'échelle de tokens, tous deux
   documentés :
   1. l'icône est fixée à 18px, valeur du design system qui ne correspond à aucune
      classe .icon existante (20 / 16 / 24) — même traitement que le padding
      6px 10px des tags de l'Accueil ;
   2. son décalage vertical est calculé à partir de --leading-body plutôt que posé
      en dur, pour centrer l'icône sur la première ligne de texte sans introduire
      une seconde valeur brute.
   Le H3 ne redéclare que sa graisse : police display et --size-h3 lui viennent
   déjà du reset, seul --weight-display-soft diffère. */
.services{display:grid;gap:var(--space-8)}
.services__head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}
.services__sub{font-weight:var(--weight-display-soft)}
.services__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.offer{display:flex;gap:var(--space-4);border-top:1px solid var(--border-hairline);padding:var(--space-4) 0}
.offer .icon{width:18px;height:18px;color:var(--rouge-cardinal);margin-top:calc((1em * var(--leading-body) - 18px) / 2)}
.offer__title{font-weight:var(--weight-body-strong)}
.offer__desc{font-size:var(--size-body-sm);color:var(--text-muted)}

@media (min-width:768px){
  .services{grid-template-columns:1fr 1fr}
}

/* Section « Pour qui » (fond inverse). Écart assumé à l'échelle : les icônes sont
   fixées à 22px, valeur du design system qui ne correspond à aucune classe .icon
   (20 / 16 / 24) — même traitement que le 18px de la section Services ci-dessus.
   Le paragraphe final ne redéclare pas sa mesure : p{max-width:var(--measure)}
   du reset vaut déjà 62ch. */
.audience{display:grid;gap:var(--space-6)}
.audience__item{border-top:1px solid rgb(247 244 241 / 0.18);padding-top:var(--space-4)}
.audience__item .icon{width:22px;height:22px;color:var(--rouge-cardinal)}
.audience__label{font-family:var(--font-display);font-weight:var(--weight-display-soft);font-size:var(--size-h4);margin-top:var(--space-3)}
.audience__note{color:rgb(247 244 241 / 0.72);margin-top:var(--space-6)}

@media (min-width:768px){
  .audience{grid-template-columns:repeat(3,1fr)}
}

/* Bloc CTA final — réutilise .cta de la page Accueil telle quelle (trait d'accent,
   ligne en desktop, colonne en mobile). .cta ne présuppose aucune structure interne :
   le paragraphe remplace directement le bloc titre + sous-titre, sans réécrire de
   layout. Seuls deux points diffèrent : un gap plus serré, et la mesure du
   paragraphe. Le bouton est poussé à l'opposé par le justify-content:space-between
   déjà porté par .cta — aucune marge automatique n'est nécessaire. */
.cta--lead{gap:var(--space-5)}
.cta__lead{font-size:var(--size-body-lg);max-width:var(--measure-narrow)}

/* === PAGE — MÉTHODE === */

/* Onglets. Écart assumé à l'échelle : le padding bas de 14px vient du design
   system et ne correspond à aucun pas de --space-* — même traitement que le 18px
   de 5a et le 22px de 5b. Le filet actif de 2px chevauche celui du conteneur via
   margin-bottom:-1px. */
.tabs{display:flex;gap:var(--space-6);border-bottom:1px solid var(--border-hairline)}
.tab{padding:0 0 14px;margin-bottom:-1px;background:none;border:none;border-bottom:var(--border-emphasis) solid transparent;font-family:var(--font-body);font-size:var(--size-body);font-weight:var(--weight-body);color:var(--text-muted);cursor:pointer;transition:var(--transition-ui)}
.tab[aria-selected="true"]{border-bottom-color:var(--border-accent);font-weight:var(--weight-body-strong);color:var(--text-body)}

/* Panneaux. .method porte à la fois le rôle de tabpanel et la grille : sans cette
   règle, le display:grid de l'auteur l'emporterait sur le [hidden]{display:none}
   de la feuille du navigateur et les panneaux inactifs resteraient visibles. */
.method{display:grid;gap:var(--space-8);margin-top:var(--space-7)}
.method[hidden]{display:none}
.method__summary{max-width:24ch}

.deliverables{list-style:none;margin:var(--space-6) 0 0;padding:0;display:flex;flex-direction:column}
.deliverable{display:flex;align-items:center;gap:var(--space-4);border-top:1px solid var(--border-hairline);padding:var(--space-4) 0}
.deliverable__num{font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-accent)}
.deliverable .icon{margin-left:auto;color:var(--text-muted)}

.method__duration{font-family:var(--font-mono);font-size:var(--size-h4)}
/* .card aligne ses enfants en flex-start : un <hr>, sans contenu propre, s'y
   réduirait à une largeur nulle et disparaîtrait. */
.method__card hr{align-self:stretch;width:100%}
.method__cta{margin-top:var(--space-3)}

@media (min-width:768px){
  .method{grid-template-columns:3fr 2fr}
}

/* === PAGE — DIAGNOSTIC === */

/* Le h1 ne reçoit que sa mesure : police, graisse, taille et interlettrage lui
   viennent déjà du reset. Écart assumé à l'échelle : l'icône des bénéfices est
   fixée à 18px, comme dans la section Services. */
.diagnostic__grid{display:grid;gap:var(--space-9)}
.diagnostic__title{max-width:22ch}
.diagnostic__lead{margin-top:var(--space-5);max-width:50ch}

.diagnostic__benefits{list-style:none;margin:var(--space-7) 0 0;padding:0;display:flex;flex-direction:column}
.diagnostic__benefit{display:flex;align-items:center;gap:var(--space-3);border-top:1px solid var(--border-hairline);padding:var(--space-3) 0;font-size:var(--size-body-sm)}
.diagnostic__benefit .icon{width:18px;height:18px;color:var(--rouge-cardinal)}

.diagnostic__contact{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-7);font-family:var(--font-mono);font-size:var(--size-caption);color:var(--text-muted)}
.diagnostic__contact img{height:12px;width:auto}

/* .card apporte le fond, le filet et la barre d'accent ; seul le padding change. */
.diagnostic__card{padding:var(--space-6)}
.field__required{color:var(--text-accent)}
/* .card aligne ses enfants en flex-start : sans align-self, le <form> se
   réduirait à sa largeur de contenu au lieu d'occuper la carte, et les champs
   en width:100% seraient calés sur cette largeur réduite. */
.diagnostic__form{align-self:stretch;display:flex;flex-direction:column;gap:var(--space-4)}
.diagnostic__radios{display:flex;gap:var(--space-5)}
/* Le formulaire est un flex en colonne : ses enfants sont étirés par défaut, ce
   qui transformait le badge en bandeau pleine largeur. Il reprend sa largeur de
   contenu ; la règle du composant .badge n'est pas touchée. */
.diagnostic__form .badge{align-self:flex-start}

/* Bloc de confirmation. Même align-self:stretch que le formulaire, pour la même
   raison (.card aligne ses enfants en flex-start). C'est désormais PHP qui décide
   lequel des deux blocs est écrit dans la page : la règle [hidden] ci-dessous ne
   sert plus qu'à garantir que le display d'auteur ne l'emporte pas sur le
   [hidden]{display:none} du navigateur si l'attribut réapparaît. */
.diagnostic__sent{align-self:stretch;display:flex;flex-direction:column;gap:var(--space-4)}
.diagnostic__form[hidden],.diagnostic__sent[hidden]{display:none}

/* Récapitulatif des erreurs de validation, en tête du formulaire. Reprend le
   composant .toast--error ; seuls l'alignement (le message tient sur plusieurs
   lignes, l'icône doit rester en haut) et les puces de la liste sont ajustés. */
.diagnostic__erreurs{align-items:flex-start}
.diagnostic__erreurs ul{margin:var(--space-2) 0 0;padding:0;list-style:none}
.diagnostic__erreurs li+li{margin-top:var(--space-1)}

@media (min-width:768px){
  .diagnostic__grid{grid-template-columns:5fr 4fr}
}

@media (max-width:767px){
  /* .tooltip__bubble est centrée sur son déclencheur et en white-space:nowrap.
     Ici le déclencheur est en bout de ligne : à 375px la bulle sortait de l'écran
     et provoquait un défilement horizontal de toute la page — en opacity:0 elle
     reste dans le flux de calcul. Sur mobile, elle s'ancre donc au bord droit.
     Recadrage d'ancrage propre à cette page, la règle du composant est intacte. */
  .diagnostic__contact .tooltip__bubble{left:auto;right:0;transform:translate(0,-8px)}
}

/* === PAGE — 404 === */

/* Contenu aligné à gauche comme le reste du site — pas de centrage. Le lien
   secondaire ne porte aucune classe : le reset générique sur <a> lui donne déjà
   le traitement voulu. */
.notfound{padding:var(--space-10) 0}
.notfound__title{max-width:28ch}
.notfound__lead{margin-top:var(--space-5);max-width:50ch}
.notfound__actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);margin-top:var(--space-7)}

@media (min-width:768px){
  .notfound__actions{flex-direction:row;align-items:center}
}

/* === REFLOW — SOUS 768px === */

/* Correction du défilement horizontal à 320px (WCAG 1.4.10).
   Tout est confiné à cette media query : au-dessus de 768px, rien ne change.
   La règle générique .btn n'est pas touchée, seulement surchargée ici. */
@media (max-width:767px){
  /* Les libellés de bouton peuvent passer à la ligne. Sans ça, white-space:nowrap
     impose la largeur du texte au document entier : « Réserver un diagnostic » exige
     297px alors qu'un écran de 320px n'en offre que 256 entre les gouttières.
     La hauteur fixe cède la place à un min-height de même valeur : un libellé sur une
     seule ligne garde exactement la hauteur d'avant, seul un libellé qui passe à la
     ligne fait grandir le bouton. Les cibles gardent leur hauteur d'origine : 46px
     pour .btn, 54px pour .btn--lg, 38px pour .btn--sm — cette dernière reste donc
     sous les 44px de confort tactile, comme avant cette media query.
     box-sizing:border-box est indispensable ici : .btn est en content-box, donc
     sans lui le min-height s'ajouterait au padding vertical au lieu de l'inclure
     et les boutons passeraient de 54 à 86px de haut. Les min-height reprennent
     les hauteurs totales d'origine (bordures comprises) : un libellé sur une seule
     ligne rend donc exactement comme avant. */
  .btn{box-sizing:border-box;white-space:normal;text-align:center;height:auto;min-height:46px;padding-top:var(--space-3);padding-bottom:var(--space-3)}
  .btn--sm{min-height:38px;padding-top:var(--space-2);padding-bottom:var(--space-2)}
  .btn--lg{min-height:54px;padding-top:var(--space-4);padding-bottom:var(--space-4)}

  /* Ligne image + adresse + infobulle : son contenu mesure 334px, au-delà des 256px
     disponibles. Elle passe sur plusieurs lignes plutôt que de pousser toute la
     colonne de gauche. */
  .diagnostic__contact{flex-wrap:wrap}

  /* Barre d'onglets : les trois onglets et leurs gouttières mesurent 301px pour 256
     disponibles. Passage sur plusieurs lignes plutôt que défilement horizontal, qui
     aurait créé un conteneur de défilement susceptible de rogner l'anneau de focus.
     L'interligne ne s'applique que s'il y a effectivement deux rangées : sur une
     seule ligne, le rendu est inchangé. */
  .tabs{flex-wrap:wrap;row-gap:var(--space-3)}
}