/* ==========================================================================
   allaux.fr — feuille de style unique
   Les valeurs (échelle typographique, rayons, espacements, densité) sont reprises
   de la maquette de référence : conteneur 1200px, corps à 14.5px, rayons 9/12/14/16,
   sections à 56–72px, cartes à 22px/24px, boutons à 13px/22px.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    color-scheme: dark;

    --bg: #0b0e12;
    --bg-2: #0f141b;
    --surface: #141b23;
    --surface-2: #1a222c;
    --border: rgba(255, 255, 255, .09);
    --border-strong: rgba(255, 255, 255, .17);
    --text: #e9edf2;
    --text-muted: #98a2b0;
    /* Relevé depuis #5e6a79, qui plafonnait à 3,5:1 sur le fond sombre alors qu'il porte du
       texte réel (fil d'Ariane, mentions légales, libellés de code). */
    --text-faint: #7d8896;
    --accent: #f5a524;
    --accent-2: #ffbe5c;
    --accent-ink: #1b1305;
    --accent-dim: rgba(245, 165, 36, .12);
    /* Teinte réservée au TEXTE en accent. Sur fond sombre elle est identique à --accent ;
       en thème clair elle est assombrie, car l'ambre de la maquette ne passe pas 4,5:1
       sur un fond crème. Les aplats de bouton continuent d'utiliser --accent. */
    --accent-text: #f5a524;
    --good: #3ecf8e;
    --danger: #ff6f5e;
    --danger-dim: rgba(255, 111, 94, .12);
    --link: #f5a524;
    --code-bg: #0c1218;

    --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

    /* Échelle reprise de la maquette : dense, proche d'une interface d'outil technique. */
    --fs-hero: clamp(34px, 5vw, 54px);
    --fs-h1: clamp(30px, 4.4vw, 48px);
    --fs-h2: clamp(26px, 3.5vw, 36px);
    --fs-h3: clamp(22px, 2.6vw, 28px);
    --fs-h4: clamp(16px, 2vw, 18px);
    --fs-lede: clamp(16px, 2vw, 18px);
    --fs-base: 14.5px;
    --fs-sm: 13.5px;
    --fs-xs: 12.5px;
    --fs-2xs: 11.5px;

    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 44px;
    --sp-9: 56px;  --sp-10: 72px; --sp-11: 96px;

    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-pill: 100px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .55);
    --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, .6);

    --z-header: 100;
    --z-dropdown: 200;
    --z-mobile-bar: 300;
    --z-modal: 900;

    --dur-instant: 80ms;
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 400ms;
    --ease-out: cubic-bezier(.22, .9, .28, 1);

    --wrap: 1200px;
    --wrap-prose: 820px;
    --wrap-narrow: 700px;
    --gutter: 24px;
    --header-h: 66px;
  }

  :root[data-theme="light"] {
    color-scheme: light;

    --bg: #f6f4ef;
    --bg-2: #eeebe3;
    --surface: #ffffff;
    --surface-2: #f3f0e9;
    --border: rgba(18, 20, 24, .10);
    --border-strong: rgba(18, 20, 24, .22);
    --text: #161a1f;
    --text-muted: #54606d;
    /* Assombri depuis #8b95a2 (2,8:1) pour atteindre le seuil de lisibilité. */
    --text-faint: #67717d;
    --accent: #c8790c;
    --accent-2: #a5620a;
    --accent-ink: #fff8ec;
    --accent-dim: rgba(200, 121, 12, .10);
    /* L'ambre de la maquette tombe à 3,1:1 sur le fond crème : le texte en accent utilise
       donc une déclinaison plus sombre, tandis que les aplats gardent la teinte d'origine. */
    --accent-text: #8a5405;
    --good: #1f9e6b;
    --danger: #c0402f;
    --danger-dim: rgba(192, 64, 47, .09);
    --link: #8a5405;
    --code-bg: #f0ede6;

    --shadow-sm: 0 1px 2px rgba(20, 20, 20, .06);
    --shadow-md: 0 8px 24px -8px rgba(20, 20, 20, .12);
    --shadow-lg: 0 24px 60px -16px rgba(20, 20, 20, .16);
  }
}

/* ----------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
  }

  body { margin: 0; }

  h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.01em;
  }
  p, ul, ol, figure, pre, dl { margin: 0; }
  ul, ol { padding: 0; list-style: none; }

  img, svg, video { max-width: 100%; height: auto; display: block; }

  a { color: var(--link); text-decoration: none; }
  a:hover { text-decoration: underline; }

  button, input, textarea, select { font: inherit; color: inherit; }
  code, kbd, samp { font-family: var(--font-mono); }

  ::selection { background: var(--accent); color: var(--accent-ink); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
  }
}

/* ------------------------------------------------------------------ base */
@layer base {
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.55;
    min-height: 100vh;
  }

  .mono { font-family: var(--font-mono); }
  .text-muted { color: var(--text-muted); }
  .text-faint { color: var(--text-faint); }

  /* Le préfixe « // » en ambre et en monospace est la signature de la maquette :
     il ouvre chaque section et donne au site son air de sortie de terminal. */
  .kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent-text);
    margin-bottom: var(--sp-3);
  }
  .kicker::before { content: "// "; }

  .prose { max-width: var(--wrap-prose); }
  .prose > * + * { margin-top: var(--sp-4); }
  .prose h2 { margin-top: var(--sp-8); font-size: var(--fs-h3); }
  .prose h3 { margin-top: var(--sp-7); font-size: var(--fs-h4); }
  .prose ul, .prose ol { display: grid; gap: var(--sp-2); }
  .prose ul li, .prose ol li { padding-left: 18px; position: relative; }
  /* Puce triangulaire ambrée, comme dans la maquette. */
  .prose ul li::before {
    content: "▹";
    position: absolute; left: 0; top: 0;
    color: var(--accent); font-size: 13px; line-height: 1.7;
  }
  .prose ol { counter-reset: item; }
  .prose ol li::before {
    counter-increment: item; content: counter(item) ".";
    position: absolute; left: 0; top: 0;
    color: var(--accent); font-family: var(--font-mono); font-size: 12px;
  }
  .prose code {
    font-size: .9em; background: var(--code-bg);
    padding: 2px 6px; border-radius: var(--radius-xs);
  }
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }

  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: var(--z-modal);
    background: var(--accent); color: var(--accent-ink);
    padding: 10px 16px; font-weight: 600;
  }
  .skip-link:focus { position: fixed; left: 12px; top: 12px; }
}

/* ---------------------------------------------------------------- layout */
@layer layout {
  .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
  .wrap--prose { max-width: var(--wrap-prose); }
  .wrap--narrow { max-width: var(--wrap-narrow); }

  /* Rythme vertical : les sections s'espacent par une marge unique plutôt que par des
     paddings qui s'additionnent ou s'annulent selon l'ordre. Une seule variable gouverne
     donc l'air entre deux blocs, ce qui rend l'ensemble prévisible. */
  .section { margin-top: var(--sp-10); }
  .section:first-child { margin-top: 0; }
  .section--tight { margin-top: var(--sp-8); }
  .section--wide { margin-top: var(--sp-11); }

  .section__head { margin-bottom: var(--sp-7); max-width: var(--wrap-prose); }
  .section__title { font-size: var(--fs-h2); }
  .section__lede { margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-lede); }

  .page { padding-bottom: var(--sp-11); }
  .page > .wrap { padding-top: var(--sp-10); }

  /* Bandeau d'en-tête pleine largeur, avec le halo ambré de la maquette. */
  .page-hero {
    position: relative; overflow: hidden;
    padding: 22px 0 56px;
    border-bottom: 1px solid var(--border);
  }
  .page-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(80% 120% at 85% 0%, var(--accent-dim), transparent 55%);
  }
  .page-hero > .wrap { position: relative; }
  .page__title { font-size: var(--fs-h1); margin-top: 14px; max-width: 820px; }
  .page__lede { margin-top: 18px; font-size: var(--fs-lede); color: var(--text-muted); max-width: 680px; }
  .page-hero .hero__actions { margin-top: 28px; }
  .page-hero .hero__stack { margin-top: 30px; padding-top: 0; border-top: 0; }

  @media (max-width: 780px) {
    .page-hero { padding-bottom: 40px; }
    .page > .wrap { padding-top: var(--sp-9); }
    .section { margin-top: var(--sp-9); }
  }

  .field-row { display: grid; gap: var(--sp-4); }
  @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
}

/* ------------------------------------------------------------ components */
@layer components {

  /* -- boutons ------------------------------------------------------------ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 13px 22px;
    min-height: 44px;                     /* cible tactile confortable (WCAG 2.5.8) */
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm); font-weight: 600; line-height: 1;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  .btn:hover { text-decoration: none; }

  .btn--primary { background: var(--accent); color: var(--accent-ink); }
  .btn--primary:hover { background: var(--accent-2); }

  .btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
  .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

  .btn--outline { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
  .btn--outline:hover { border-color: var(--accent); }

  .btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
  .btn--danger:hover { background: var(--danger-dim); }

  .btn--sm { padding: 9px 13px; min-height: 38px; font-size: var(--fs-xs); }
  .btn--lg { padding: 15px 26px; min-height: 50px; font-size: var(--fs-base); }
  .btn--icon { padding: 11px 13px; width: 44px; }

  .dot { width: 7px; height: 7px; border-radius: var(--radius-pill); display: inline-block; flex: none; }
  .dot--good { background: var(--good); }
  .dot--danger { background: var(--danger); }
  .dot--accent { background: var(--accent); }

  .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: var(--radius-xs);
    background: var(--accent-dim); color: var(--accent);
    font-family: var(--font-mono); font-size: var(--fs-2xs);
  }
  .badge--muted { background: var(--surface-2); color: var(--text-muted); }

  /* -- barre supérieure --------------------------------------------------- */
  .topbar {
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--text-muted);
  }
  .topbar__inner {
    display: flex; flex-wrap: wrap; gap: 16px;
    align-items: center; justify-content: space-between;
    padding-block: 8px;
  }
  .topbar__status { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); }
  .topbar__status .accent { color: var(--accent-text); }
  .topbar__links { display: flex; align-items: center; gap: 18px; }
  .topbar__links a { color: var(--text-muted); }
  .topbar__links a:hover { color: var(--text); }

  /* Point de disponibilité : le clignotement signale une présence réelle, pas une décoration.
     Il est neutralisé par prefers-reduced-motion comme toutes les autres animations. */
  .dot--pulse { animation: blink 2.4s ease-in-out infinite; }
  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

  @media (max-width: 640px) { .topbar__links a:not(.topbar__lang a) { display: none; } }

  /* -- en-tête ------------------------------------------------------------ */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-header);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }
  .site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; height: 70px;
  }
  .site-header__actions { display: flex; align-items: center; gap: 10px; }

  .brand { display: flex; align-items: center; gap: 11px; color: var(--text); }
  .brand:hover { text-decoration: none; }
  .brand__mark {
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 1.5px solid var(--accent); border-radius: 8px; background: transparent;
    color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 18px;
  }
  .brand__name {
    font-family: var(--font-display); font-weight: 700; font-size: 21px;
    letter-spacing: -.02em; color: var(--text);
  }
  .brand__dot { color: var(--accent); }

  /* Navigation resserrée : les entrées sont espacées par leur propre padding, pas par un gap
     large. C'est ce qui donne à la barre son aspect compact d'outil plutôt que de site vitrine. */
  .nav__list { display: flex; align-items: center; gap: 4px; }
  .nav__item { position: relative; }
  .nav__link {
    display: flex; align-items: center; gap: 6px;
    /* Un libelle de menu ne se coupe jamais : « A propos » sur deux lignes deforme toute
       la barre, alors qu'un menu un peu plus serre reste lisible. */
    white-space: nowrap;
    padding: 9px 13px; border-radius: 7px;
    font-size: 14.5px; color: var(--text-muted);
    background: none; border: 0; cursor: pointer; font-family: inherit;
  }
  .nav__link:hover { color: var(--text); text-decoration: none; }
  .nav__link[aria-current="page"] { color: var(--text); }
  .nav__item--has-children > .nav__link::after { content: "▾"; font-size: 10px; color: var(--accent); }

  /* Méga-menu : deux colonnes, ouvert au survol et au clavier. Le padding-top du conteneur
     sert de zone tampon pour que le panneau ne se ferme pas en traversant l'espace vide. */
  .nav__mega {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    padding-top: 12px; width: min(760px, 90vw); z-index: var(--z-dropdown);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  }
  .nav__item:hover > .nav__mega,
  .nav__item:focus-within > .nav__mega { opacity: 1; visibility: visible; }

  .nav__mega-panel {
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 14px; padding: 10px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55);
  }
  .nav__mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .nav__mega-item { display: block; padding: 12px 14px; border-radius: 9px; }
  .nav__mega-item:hover { background: var(--surface-2); text-decoration: none; }
  .nav__mega-name { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
  .nav__mega-tag { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
  .nav__mega-footer {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    margin-top: 8px; padding: 12px 14px 6px; border-top: 1px solid var(--border);
  }
  .nav__mega-note { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
  .nav__mega-all { font-size: 13.5px; font-weight: 600; }

  .btn--urgence {
    padding: 8px 13px; min-height: 0; font-size: 13.5px; font-weight: 600;
    color: var(--danger); border: 1px solid var(--danger); border-radius: 8px; background: transparent;
  }
  .btn--urgence:hover { background: var(--danger-dim); }

  .btn--square {
    display: grid; place-items: center; width: 38px; height: 38px; min-height: 0; padding: 0;
    border: 1px solid var(--border); background: var(--surface); border-radius: 9px;
    color: var(--text-muted); font-size: 15px;
  }
  .btn--square:hover { border-color: var(--border-strong); color: var(--text); }
  .nav-toggle { width: 40px; height: 40px; font-size: 18px; color: var(--text); }

  /* Bascule unique à 900px, comme la maquette : au-delà la navigation complète, en dessous
     le seul menu plein écran. Pas d'état intermédiaire où les deux coexistent à moitié. */
  @media (max-width: 900px) { .nav, .site-header__actions .desktop-only { display: none !important; } }
  @media (min-width: 901px) { .nav-toggle { display: none !important; } }

  /* -- menu mobile plein écran -------------------------------------------- */
  .mobile-menu {
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: var(--bg); overflow-y: auto;
    animation: fadeUp .2s var(--ease-out);
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu__inner { max-width: 640px; margin-inline: auto; padding: 20px 24px 60px; }
  .mobile-menu__head {
    display: flex; align-items: center; justify-content: space-between;
    height: 50px; margin-bottom: 14px;
  }
  .mobile-menu__cta {
    display: block; text-align: center; padding: 14px; font-weight: 600;
    background: var(--accent); color: var(--accent-ink); border-radius: 10px; margin-bottom: 10px;
  }
  .mobile-menu__cta:hover { text-decoration: none; }
  .mobile-menu__urgent {
    display: block; text-align: center; padding: 12px; font-weight: 600;
    color: var(--danger); border: 1px solid var(--danger); border-radius: 10px; margin-bottom: 22px;
  }
  .mobile-menu__urgent:hover { text-decoration: none; }
  .mobile-menu__nav a { display: block; border-bottom: 1px solid var(--border); }
  .mobile-menu__nav > a { padding: 13px 6px; font-size: 17px; font-weight: 600; color: var(--text); }
  .mobile-menu__group { padding: 16px 6px 4px; }
  .mobile-menu__group code {
    font-size: 12px; color: var(--text-faint); letter-spacing: .06em; text-transform: uppercase;
  }
  .mobile-menu__link { padding: 11px 6px; font-size: 15.5px; color: var(--text-muted); }
  .mobile-menu__link:hover { color: var(--text); text-decoration: none; }
  .mobile-menu__contact { margin-top: 24px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }

  @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

  /* -- sélecteur de langue, segmenté comme dans la maquette --------------- */
  .lang-switch { display: flex; align-items: center; gap: 2px; }
  .lang-switch--boxed {
    gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 3px;
  }
  .lang-switch__item {
    padding: 6px 9px; min-height: 26px; display: inline-flex; align-items: center; border-radius: 5px; border: 0; background: none; cursor: pointer;
    font-size: 12px; color: var(--text-faint);
  }
  .lang-switch__item:hover { color: var(--text); text-decoration: none; }
  .lang-switch__item.is-active { background: var(--accent-dim); color: var(--accent-text); font-weight: 600; }
  /* Langue non encore traduite : visible pour signaler qu'elle est prévue, mais non cliquable
     — un lien vers une page inexistante coûte plus qu'un libellé grisé. */
  .lang-switch__item.is-unavailable { opacity: .38; cursor: default; }

  /* -- hero --------------------------------------------------------------- */
  .hero { padding-block: var(--sp-10) var(--sp-8); border-bottom: 1px solid var(--border); }
  .hero__title { font-size: var(--fs-hero); max-width: 18ch; }
  .hero__lede { margin-top: var(--sp-5); font-size: var(--fs-lede); color: var(--text-muted); max-width: 62ch; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); }
  .hero__stack {
    margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border);
    font-size: var(--fs-xs); color: var(--text-muted); line-height: 2;
  }

  .page__header .hero__actions { margin-top: var(--sp-6); }

  /* -- cartes ------------------------------------------------------------- */
  .card-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
  @media (max-width: 720px) { .card-grid--2 { grid-template-columns: 1fr; } }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    height: 100%;
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .card--link:hover { border-color: var(--border-strong); }
  .card__link { color: inherit; display: block; height: 100%; }
  .card__link:hover { text-decoration: none; }
  .card__kicker {
    display: block; font-family: var(--font-mono); font-size: var(--fs-2xs);
    color: var(--accent-text); margin-bottom: var(--sp-2);
  }
  .card__title { font-size: var(--fs-h4); }
  .card__text { margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }

  /* Listes à puce triangulaire ambrée : le motif dominant de la maquette.
     Le glyphe est ▹ (U+25B9), celui réellement employé dans la maquette. */
  .tick-list { display: grid; gap: 9px; margin-top: var(--sp-4); }
  .tick-list li {
    display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start;
    font-size: 14px; color: var(--text-muted); line-height: 1.4;
  }
  .tick-list li::before { content: "▹"; color: var(--accent); font-size: 13px; margin-top: 2px; }

  /* Variante chevron, employée pour les listes de problèmes. */
  .chevron-list { display: grid; gap: 9px; }
  .chevron-list li {
    display: grid; grid-template-columns: 12px 1fr; gap: 11px; align-items: start;
    font-size: 14.5px; color: var(--text-muted); line-height: 1.45;
  }
  .chevron-list li::before { content: "›"; color: var(--accent); font-size: 15px; line-height: 1.1; }

  /* -- fil d'Ariane ------------------------------------------------------- */
  .breadcrumb { margin-bottom: 22px; font-size: 13px; }
  .breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-faint); }
  .breadcrumb__list li { display: flex; align-items: center; gap: 8px; }
  .breadcrumb__list li + li::before { content: "/"; color: var(--text-faint); }
  .breadcrumb__list a { color: var(--text-faint); }
  .breadcrumb__list a:hover { color: var(--text-muted); }
  .breadcrumb__list [aria-current="page"] { color: var(--text-muted); }

  /* -- blocs de contenu --------------------------------------------------- */
  .symptom-list { display: grid; gap: var(--sp-2); }
  .symptom {
    display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3); align-items: start;
    padding: 14px 16px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    font-size: var(--fs-sm);
  }
  .symptom__icon {
    display: grid; place-items: center; width: 22px; height: 22px;
    border-radius: var(--radius-xs); background: var(--danger-dim); color: var(--danger);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  }

  .step-list { display: grid; gap: var(--sp-5); }
  .step { display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-4); align-items: start; }
  .step__index {
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    color: var(--accent-text); font-family: var(--font-mono); font-size: var(--fs-xs);
  }
  .step__title { font-size: var(--fs-h4); }
  .step p { margin-top: 6px; font-size: var(--fs-sm); }

  .stat-row {
    display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: var(--border); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
  }
  .stat { background: var(--surface); padding: 18px 20px; }
  .stat__value { display: block; font-family: var(--font-display); font-size: clamp(22px, 2.8vw, 30px); color: var(--accent-text); }
  .stat__label { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }
  .stat-source { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-faint); }

  .codeblock { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-top: var(--sp-5); }
  .codeblock__head {
    padding: 9px 13px; background: var(--surface-2); color: var(--text-faint);
    border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--fs-2xs);
  }
  .codeblock__body {
    padding: var(--sp-4); background: var(--code-bg); overflow-x: auto;
    font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.7;
  }

  .note {
    margin-top: var(--sp-5); padding: 18px 20px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--fs-sm);
  }
  .note--good { border-left-color: var(--good); }
  .note--danger { border-left-color: var(--danger); }
  .note__title { font-weight: 600; color: var(--text); margin-bottom: 4px; }

  /* -- FAQ ---------------------------------------------------------------- */
  /* Un seul cadre, les questions séparées par un filet : c'est la forme de la maquette,
     et elle évite l'effet « pile de boîtes » d'un accordéon à cartes détachées. */
  .faq__list {
    border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
    max-width: 900px;
  }
  .faq__item { border-bottom: 1px solid var(--border); }
  .faq__item:last-child { border-bottom: 0; }
  .faq__question {
    padding: 18px 20px; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--text);
    display: flex; justify-content: space-between; gap: 14px;
  }
  .faq__question::-webkit-details-marker { display: none; }
  .faq__question::after {
    content: "+"; color: var(--accent); flex: none;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .faq__item[open] .faq__question::after { transform: rotate(45deg); }
  .faq__answer { padding: 0 20px 18px; color: var(--text-muted); font-size: 14.5px; }

  /* -- formulaires -------------------------------------------------------- */
  .label {
    display: block; font-family: var(--font-mono); font-size: var(--fs-2xs);
    color: var(--text-muted); margin-bottom: 6px;
  }
  .input {
    width: 100%; padding: 11px 13px; min-height: 44px;
    background: var(--bg-2); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .input::placeholder { color: var(--text-faint); }
  .input:focus { border-color: var(--accent); }
  .input[aria-invalid="true"] { border-color: var(--danger); }
  textarea.input { min-height: 110px; resize: vertical; line-height: 1.55; }

  /* -- questionnaire de qualification ------------------------------------- */
  .questionnaire {
    padding: 36px 24px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  }
  @media (min-width: 780px) { .questionnaire { padding: 44px 40px; } }
  .questionnaire__intro { max-width: 640px; margin-bottom: var(--sp-7); }
  .questionnaire__intro p { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--sp-2); }

  .qstep { border: 0; padding: 0; margin: 0 0 var(--sp-6); }
  .qstep__legend {
    display: flex; align-items: baseline; gap: var(--sp-3);
    font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600;
    margin-bottom: var(--sp-3);
  }
  .qstep__legend .mono { color: var(--accent); font-size: var(--fs-xs); }
  .qstep__optional { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 400; }
  .qstep__help { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }

  .choice-grid { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .choice {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 11px 13px; min-height: 44px;
    background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font-size: var(--fs-sm); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .choice:hover { border-color: var(--accent); }
  /* :has() met en évidence l'option cochée sans passer par JavaScript. */
  .choice:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
  .choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .choice input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; }

  .field { margin-bottom: var(--sp-4); }
  .questionnaire__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); }
  .questionnaire__progress { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-2xs); }

  /* -- bandeau d'appel à l'action ----------------------------------------- */
  .cta-band {
    position: relative; overflow: hidden;
    padding: 44px 24px; text-align: center;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: 16px;
  }
  /* Halo ambré discret, repris de la maquette : il distingue le bandeau final du reste
     de la page sans recourir à un aplat de couleur qui écraserait le texte. */
  .cta-band::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(80% 120% at 50% 0%, var(--accent-dim), transparent 60%);
  }
  .cta-band > * { position: relative; }
  .cta-band__title { font-size: clamp(26px, 3.5vw, 36px); }
  .cta-band p { margin-top: var(--sp-4); color: var(--text-muted); font-size: 17px; max-width: 600px; margin-inline: auto; }
  .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }

  /* -- messages ----------------------------------------------------------- */
  .flash-stack { padding: var(--sp-3) var(--gutter) 0; }
  .flash {
    max-width: var(--wrap); margin-inline: auto;
    padding: 13px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-sm);
  }
  .flash--success { border-color: var(--good); }
  .flash--error { border-color: var(--danger); }

  /* -- barre d'action mobile ---------------------------------------------- */
  .mobile-bar {
    position: fixed; inset: auto 0 0 0; z-index: var(--z-mobile-bar);
    display: flex; gap: var(--sp-2);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(10px); border-top: 1px solid var(--border);
  }
  .mobile-bar[hidden] { display: none; }
  .mobile-bar__action {
    display: grid; place-items: center; min-height: 46px;
    border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600;
  }
  .mobile-bar__action--whatsapp { width: 46px; flex: none; border: 1px solid var(--border-strong); color: var(--text); }
  .mobile-bar__action--primary { flex: 1; background: var(--accent); color: var(--accent-ink); }
  .mobile-bar__action:hover { text-decoration: none; }
  @media (min-width: 901px) { .mobile-bar { display: none !important; } }

  /* -- pied de page ------------------------------------------------------- */
  .site-footer { border-top: 1px solid var(--border); background: var(--bg-2); padding-block: var(--sp-10) var(--sp-6); }
  .site-footer__grid { display: grid; gap: var(--sp-8); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .site-footer__brand { max-width: 320px; display: grid; gap: var(--sp-4); align-content: start; }
  .site-footer__brand p { color: var(--text-muted); font-size: var(--fs-sm); }
  .site-footer__title {
    font-family: var(--font-mono); font-size: var(--fs-2xs);
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-faint); margin-bottom: var(--sp-4); font-weight: 400;
  }
  .site-footer__col ul { display: grid; gap: var(--sp-3); }
  .site-footer__col a { color: var(--text-muted); font-size: var(--fs-sm); }
  .site-footer__col a:hover { color: var(--accent); }

  .social-row { display: flex; gap: var(--sp-2); }
  .social {
    display: grid; place-items: center; width: 38px; height: 38px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: var(--fs-xs);
  }
  .social:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

  .site-footer__legal {
    display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between;
    margin-top: var(--sp-9); padding-top: var(--sp-5); border-top: 1px solid var(--border);
  }
  .site-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
  .site-footer__legal-links a { color: var(--text-faint); font-size: var(--fs-xs); }
  .site-footer__copy { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-faint); }

  /* -- bandeau cookies ---------------------------------------------------- */
  .cookie-banner {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    z-index: var(--z-modal); width: min(520px, calc(100vw - 32px));
    padding: 22px 24px; background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }
  .cookie-banner[hidden] { display: none; }
  .cookie-banner__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-h4); }
  .cookie-banner__title::before { content: "◆"; color: var(--accent); font-size: 12px; }
  .cookie-banner p { margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }
  .cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-5); }

  /* -- erreurs ------------------------------------------------------------ */
  .error__suggestions { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
  .error__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
}

/* ------------------------------------------------------------- utilities */
@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  [hidden] { display: none !important; }

  /* Verrou de défilement pendant l'ouverture du menu plein écran. */
  .is-menu-open { overflow: hidden; }

  /* Entrée au scroll : uniquement transform et opacity, les seules propriétés qui
     n'entraînent ni recalcul de mise en page ni repeinture. */
  [data-reveal] { opacity: 0; transform: translateY(14px); }
  [data-reveal][data-inview] {
    opacity: 1; transform: none;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

  /* -- recherche ----------------------------------------------------------- */

  .search-form { display: flex; gap: 8px; align-items: center; }
  .search-form__input {
    width: 168px; padding: 7px 11px; border-radius: 7px;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
    font: inherit; font-size: 13px;
  }
  .search-form__input::placeholder { color: var(--text-faint); }
  .search-form__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

  /* Sur la page de résultats le champ prend la largeur : c'est l'action principale de l'écran,
     alors que dans l'en-tête il reste un raccourci discret. */
  .search-form--page { margin-top: 24px; max-width: 620px; }
  .search-form--page .search-form__input { flex: 1; padding: 12px 14px; font-size: 15px; }
  .search-form--mobile { margin-bottom: 16px; }
  .search-form--mobile .search-form__input { flex: 1; }

  .search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
  .search-result__title { font-size: 18px; margin: 0 0 4px; }
  .search-result__path { font-size: 12px; color: var(--text-faint); margin: 0 0 6px; word-break: break-all; }
  .search-result__excerpt { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }

  @media (max-width: 1320px) {
    /* Le champ est le premier element sacrifie quand la barre se resserre : il reste
       atteignable dans le menu mobile, alors qu'un menu tronque ne se rattrape pas. */
    .search-form.desktop-only { display: none; }
  }