/* ============================================================================
 * tokens.css — GENERE PAR scripts/gen-tokens.mjs. NE PAS EDITER.
 *
 * Source : 13_company/marque/delvance.tokens.json
 * Toute correction se fait dans les jetons, puis « npm run jetons ».
 *
 * Couche exposee : « decision » uniquement. Un composant ne cite jamais une
 * option, et n'emploie jamais un jeton hors de son role (regle GOV.UK).
 * ========================================================================== */

:root {
  --espace-2: 2px;
  --espace-4: 4px;
  --espace-8: 8px;
  --espace-12: 12px;
  --espace-16: 16px;
  --espace-24: 24px;
  --espace-32: 32px;
  --espace-48: 48px;
  --espace-64: 64px;
  --espace-96: 96px;
  --rayon-nul: 0px;
  --rayon-doux: 3px;
  --rayon-plein: 999px;
  --corps-note: 13px;
  --corps-petit: 15px;
  --corps-courant: 17px;
  --corps-sous-titre: 21px;
  --corps-titre-3: 25px;
  --corps-titre-2: 31px;
  --corps-titre-1: 39px;
  --corps-affiche: 55px;
  --police-titrage: Newsreader, Georgia, serif;
  --police-texte: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --police-trace: "IBM Plex Mono", Consolas, monospace;
  --police-accessible: "Atkinson Hyperlegible Next", "IBM Plex Sans", sans-serif;
  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-forte: 600;
  --mesure-ligne: 68;
  --mesure-interligne: 1.55;
  --mesure-interligne-titre: 1.15;
  --mesure-cible-minimale: 24;

  --d-fond-page: #FAFBFC;
  --d-fond-enfonce: #F2F5F7;
  --d-fond-haut: #E8EBEF;
  --d-fond-inverse: #181F26;
  --d-fond-accent: #F8EFE0;
  --d-texte-principal: #181F26;
  --d-texte-secondaire: #4C535B;
  --d-texte-mention: #6E757D;
  --d-texte-accent: #6D4615;
  --d-texte-inverse: #FAFBFC;
  --d-bordure-filet: #D5DADE;
  --d-bordure-controle: #868D95;
  --d-bordure-active: #8E5D1E;
  --d-bordure-focus: #8E5D1E;
  --d-repere-trait: #8E5D1E;
  --d-etat-succes-texte: #286535;
  --d-etat-succes-solide: #4D9960;
  --d-etat-alerte-texte: #7F6117;
  --d-etat-alerte-solide: #AD8D12;
  --d-etat-erreur-texte: #A72724;
  --d-etat-erreur-solide: #D1433C;
  --d-etat-info-texte: #295F8A;
  --d-etat-info-solide: #4081B6;
}

/* Le theme suit le systeme, sauf choix explicite du lecteur. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) {
  --d-fond-page: #0E1319;
  --d-fond-enfonce: #161C23;
  --d-fond-haut: #20272F;
  --d-fond-inverse: #EAEDF1;
  --d-fond-accent: #362817;
  --d-texte-principal: #EAEDF1;
  --d-texte-secondaire: #ABB2BA;
  --d-texte-mention: #828A93;
  --d-texte-accent: #DEB77A;
  --d-texte-inverse: #0E1319;
  --d-bordure-filet: #2F363E;
  --d-bordure-controle: #626C76;
  --d-bordure-active: #CFA064;
  --d-bordure-focus: #CFA064;
  --d-repere-trait: #CFA064;
  --d-etat-succes-texte: #7FC48E;
  --d-etat-succes-solide: #5AA66C;
  --d-etat-alerte-texte: #EAD482;
  --d-etat-alerte-solide: #E2CA6F;
  --d-etat-erreur-texte: #F0877C;
  --d-etat-erreur-solide: #DA645A;
  --d-etat-info-texte: #8EBBE3;
  --d-etat-info-solide: #6198C6;
  }
}

:root[data-theme='sombre'] {
  --d-fond-page: #0E1319;
  --d-fond-enfonce: #161C23;
  --d-fond-haut: #20272F;
  --d-fond-inverse: #EAEDF1;
  --d-fond-accent: #362817;
  --d-texte-principal: #EAEDF1;
  --d-texte-secondaire: #ABB2BA;
  --d-texte-mention: #828A93;
  --d-texte-accent: #DEB77A;
  --d-texte-inverse: #0E1319;
  --d-bordure-filet: #2F363E;
  --d-bordure-controle: #626C76;
  --d-bordure-active: #CFA064;
  --d-bordure-focus: #CFA064;
  --d-repere-trait: #CFA064;
  --d-etat-succes-texte: #7FC48E;
  --d-etat-succes-solide: #5AA66C;
  --d-etat-alerte-texte: #EAD482;
  --d-etat-alerte-solide: #E2CA6F;
  --d-etat-erreur-texte: #F0877C;
  --d-etat-erreur-solide: #DA645A;
  --d-etat-info-texte: #8EBBE3;
  --d-etat-info-solide: #6198C6;
}

:root[data-theme='clair'] {
  --d-fond-page: #FAFBFC;
  --d-fond-enfonce: #F2F5F7;
  --d-fond-haut: #E8EBEF;
  --d-fond-inverse: #181F26;
  --d-fond-accent: #F8EFE0;
  --d-texte-principal: #181F26;
  --d-texte-secondaire: #4C535B;
  --d-texte-mention: #6E757D;
  --d-texte-accent: #6D4615;
  --d-texte-inverse: #FAFBFC;
  --d-bordure-filet: #D5DADE;
  --d-bordure-controle: #868D95;
  --d-bordure-active: #8E5D1E;
  --d-bordure-focus: #8E5D1E;
  --d-repere-trait: #8E5D1E;
  --d-etat-succes-texte: #286535;
  --d-etat-succes-solide: #4D9960;
  --d-etat-alerte-texte: #7F6117;
  --d-etat-alerte-solide: #AD8D12;
  --d-etat-erreur-texte: #A72724;
  --d-etat-erreur-solide: #D1433C;
  --d-etat-info-texte: #295F8A;
  --d-etat-info-solide: #4081B6;
}

/* ============================================================================
 * polices.css — GENERE PAR scripts/fetch-fonts.mjs. NE PAS EDITER.
 *
 * Quatre familles sous SIL Open Font License, sous-ensemblees au francais et
 * servies depuis ce domaine. Aucun appel a un service tiers.
 * Les licences accompagnent les fichiers : src/assets/fonts/OFL-*.txt
 * ========================================================================== */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/a/f/plex-sans.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/a/f/plex-sans-italique.woff2') format('woff2');
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/a/f/newsreader.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/a/f/plex-mono.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/a/f/plex-mono-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/a/f/atkinson.woff2') format('woff2');
}

/* ============================================================================
 * site.css — la seule feuille ecrite a la main.
 *
 * Deux regles gouvernent ce fichier :
 *   1. Aucun hexadecimal. Toute couleur vient d'un jeton --d-* genere depuis
 *      la charte. Si une valeur manque ici, elle manque dans la charte.
 *   2. La couleur ne sert qu'a marquer ce qui est mesure. Le laiton
 *      (--d-repere-trait) marque la coincidence, l'etat actif, la source
 *      verifiee. Il n'est jamais un aplat decoratif.
 *
 * Organisation en couches : ce qui est plus bas gagne, sans jamais recourir
 * a !important ni a une specificite artificielle.
 * ========================================================================== */

@layer reglage, socle, texte, page, composants, utilitaires;

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

  :root {
    --gouttiere: var(--espace-24);
    --colonne: 68ch;
    --transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);
    /* Le jeton de la charte est un nombre sans unite : « min-height: 24 » est
       une declaration invalide, jetee en silence par le navigateur. On en
       derive une longueur une seule fois, et on n'emploie plus que celle-ci. */
    --cible: calc(var(--mesure-cible-minimale) * 1px);
    color-scheme: light;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='clair']) {
      color-scheme: dark;
    }
  }

  :root[data-theme='sombre'] {
    color-scheme: dark;
  }

  @media (min-width: 40rem) {
    :root {
      --gouttiere: var(--espace-32);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* -------------------------------------------------------------------- socle */
@layer socle {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--espace-64);
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    margin: 0;
    background: var(--d-fond-page);
    color: var(--d-texte-principal);
    font-family: var(--police-texte);
    font-size: var(--corps-courant);
    line-height: var(--mesure-interligne);
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  /* Variante accessible : activee par le lecteur, jamais par defaut.
     Atkinson Hyperlegible Next est dessinee pour lever les confusions de
     formes (I/l/1, O/0) ; elle n'est telechargee que si elle est demandee. */
  body[data-lecture='accessible'] {
    font-family: var(--police-accessible);
    --police-titrage: var(--police-accessible);
    letter-spacing: 0.01em;
  }

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

  :where(a) {
    color: inherit;
    text-decoration-color: var(--d-bordure-controle);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    transition: text-decoration-color var(--transition);
  }

  :where(a:hover) {
    text-decoration-color: var(--d-repere-trait);
  }

  :focus-visible {
    outline: 2px solid var(--d-bordure-focus);
    outline-offset: 2px;
    border-radius: var(--rayon-doux);
  }

  ::selection {
    background: var(--d-fond-accent);
    color: var(--d-texte-principal);
  }

  hr {
    border: 0;
  }

  /* Mesure, pas préférence : l'encre de mention sur le fond enfoncé donne
     4,26:1, sous le seuil de 4,5:1 du critère 1.4.3. Plutôt que de corriger
     chaque composant, le rôle « mention » est rebasculé sur l'encre secondaire
     partout où la surface est enfoncée — un seul endroit à tenir, et aucun
     composant à modifier. La garde de contraste vérifie que cette règle existe. */
  .cle,
  .sommaire,
  .pied,
  .bande-enfoncee,
  .orientation-pied,
  thead {
    --d-texte-mention: var(--d-texte-secondaire);
  }

  /* Cible d'au moins 24 px : critere 2.5.8 de WCAG 2.2. Applique aux
     commandes reelles, pas aux liens en ligne dans un paragraphe (exception
     prevue par le critere). */
  button,
  summary,
  .bouton,
  nav a,
  .carte-lien {
    min-height: var(--cible);
  }
}

/* -------------------------------------------------------------------- texte */
@layer texte {
  h1,
  h2,
  h3,
  h4 {
    font-family: var(--police-titrage);
    font-weight: var(--graisse-normale);
    line-height: var(--mesure-interligne-titre);
    letter-spacing: -0.012em;
    text-wrap: balance;
    margin: 0;
  }

  h1 {
    font-size: clamp(var(--corps-titre-1), 5vw, var(--corps-affiche));
  }
  h2 {
    font-size: var(--corps-titre-2);
    margin-block: var(--espace-64) var(--espace-16);
  }
  h3 {
    font-size: var(--corps-titre-3);
    margin-block: var(--espace-32) var(--espace-12);
  }
  h4 {
    font-size: var(--corps-sous-titre);
    margin-block: var(--espace-24) var(--espace-8);
  }

  p,
  ul,
  ol {
    margin-block: var(--espace-16);
  }

  ul,
  ol {
    padding-inline-start: var(--espace-24);
  }

  li + li {
    margin-top: var(--espace-8);
  }

  li::marker {
    color: var(--d-texte-mention);
  }

  strong {
    font-weight: var(--graisse-forte);
  }

  code {
    font-family: var(--police-trace);
    font-size: 0.92em;
    background: var(--d-fond-enfonce);
    border: 1px solid var(--d-bordure-filet);
    border-radius: var(--rayon-doux);
    padding: 0.08em 0.32em;
  }

  blockquote {
    margin: var(--espace-32) 0;
    padding-inline-start: var(--espace-24);
    border-inline-start: 2px solid var(--d-repere-trait);
    color: var(--d-texte-secondaire);
    font-size: var(--corps-sous-titre);
    line-height: 1.45;
  }

  blockquote p:first-child {
    margin-top: 0;
  }
  blockquote p:last-child {
    margin-bottom: 0;
  }

  /* Le lien d'ancrage d'un titre : discret, visible au survol et au clavier. */
  .ancre {
    margin-inline-start: var(--espace-8);
    color: var(--d-texte-mention);
    text-decoration: none;
    font-family: var(--police-trace);
    font-size: 0.55em;
    opacity: 0;
    transition: opacity var(--transition);
  }

  h2:hover .ancre,
  h3:hover .ancre,
  .ancre:focus-visible {
    opacity: 1;
  }

}

/* --------------------------------------------------------------------- page */
@layer page {
  /* Grille editoriale. Trois largeurs : la colonne de lecture, une largeur
     intermediaire pour les tableaux et les listes d'etapes, la pleine largeur.
     C'est la mise en page d'un rapport, pas d'une plaquette. */
  .flux {
    display: grid;
    grid-template-columns:
      [pleine-debut] minmax(var(--gouttiere), 1fr)
      [large-debut] minmax(0, 9rem)
      [texte-debut] min(100% - var(--gouttiere) * 2, var(--colonne)) [texte-fin]
      minmax(0, 9rem) [large-fin]
      minmax(var(--gouttiere), 1fr) [pleine-fin];
  }

  /* Les bornes sont citées en toutes lettres, jamais par le raccourci
     « grid-column: texte » : ce raccourci cherche des lignes nommées
     texte-start et texte-end, suffixes imposés par la spécification et non
     traduisibles. Avec des noms français, il échoue en silence et tout le
     contenu part se ranger dans une colonne implicite. */
  .flux > * {
    grid-column: texte-debut / texte-fin;
  }
  .flux > .large,
  .flux > .tableau-cadre,
  .flux > .etapes,
  .flux > .grille {
    grid-column: large-debut / large-fin;
  }
  .flux > .pleine {
    grid-column: pleine-debut / pleine-fin;
  }

  .bande {
    padding-block: var(--espace-64);
  }

  /* Un titre de page et le texte qui le suit appartiennent au même bloc de
     lecture : cumuler les deux marges creusait un blanc de cent pixels qui
     donnait l'impression d'une section manquante. */
  .titre-page + .bande,
  .hero + .bande {
    padding-top: var(--espace-32);
  }

  .bande + .bande {
    border-top: 1px solid var(--d-bordure-filet);
  }

  .bande-enfoncee {
    background: var(--d-fond-enfonce);
  }

  main {
    flex: 1;
  }

  .saut {
    position: absolute;
    inset-inline-start: var(--espace-8);
    top: var(--espace-8);
    z-index: 20;
    padding: var(--espace-8) var(--espace-16);
    background: var(--d-fond-page);
    border: 1px solid var(--d-bordure-active);
    border-radius: var(--rayon-doux);
    transform: translateY(-200%);
    transition: transform var(--transition);
  }

  .saut:focus {
    transform: translateY(0);
  }

  /* --- entete --- */
  .entete {
    border-bottom: 1px solid var(--d-bordure-filet);
    background: var(--d-fond-page);
  }

  .entete-interne {
    /* Alignée sur la bande « large » de la grille : le logo tombe exactement
     sur le bord des tableaux et des cartes. */
    max-width: 82rem;
    margin-inline: auto;
    padding: var(--espace-12) var(--gouttiere);
    display: flex;
    align-items: center;
    gap: var(--espace-16);
    flex-wrap: wrap;
  }

  .marque {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-12);
    text-decoration: none;
    margin-inline-end: auto;
  }

  .marque svg {
    width: 28px;
    height: 28px;
    flex: none;
  }

  .marque-nom {
    font-family: var(--police-titrage);
    font-size: var(--corps-sous-titre);
    letter-spacing: 0.02em;
  }

  .marque-baseline {
    display: none;
    font-size: var(--corps-note);
    color: var(--d-texte-mention);
    border-inline-start: 1px solid var(--d-bordure-filet);
    padding-inline-start: var(--espace-12);
  }

  @media (min-width: 64rem) {
    .marque-baseline {
      display: inline;
    }
  }

  .navigation {
    display: flex;
    gap: var(--espace-4);
    align-items: center;
    flex-wrap: wrap;
  }

  .navigation a {
    display: inline-flex;
    align-items: center;
    padding: var(--espace-8) var(--espace-12);
    font-size: var(--corps-petit);
    text-decoration: none;
    color: var(--d-texte-secondaire);
    border-radius: var(--rayon-doux);
    position: relative;
    transition: color var(--transition), background var(--transition);
  }

  .navigation a:hover {
    color: var(--d-texte-principal);
    background: var(--d-fond-enfonce);
  }

  /* L'onglet courant porte le trait de coincidence : la marque de ce qui est
     mesure, appliquee a la position du lecteur. Redondee par aria-current. */
  .navigation a[aria-current='page'] {
    color: var(--d-texte-principal);
  }

  .navigation a[aria-current='page']::after {
    content: '';
    position: absolute;
    inset-inline: var(--espace-12);
    bottom: -1px;
    height: 2px;
    background: var(--d-repere-trait);
  }

  /* Le repli mobile ne repose pas sur <details> : un navigateur masque le
     contenu d'un details fermé même en display:contents, et la navigation
     disparaissait donc sur grand écran. Ici, la navigation est un <nav>
     ordinaire ; le bouton ne l'escamote que si JavaScript est là pour le
     rouvrir. Sans script, le menu s'affiche simplement sur plusieurs lignes —
     ce qui reste parfaitement utilisable. */
  .menu-bouton {
    display: none;
    font: inherit;
    font-size: var(--corps-petit);
    align-items: center;
    gap: var(--espace-8);
    padding: var(--espace-8) var(--espace-12);
    color: var(--d-texte-principal);
    background: transparent;
    border: 1px solid var(--d-bordure-controle);
    border-radius: var(--rayon-doux);
    cursor: pointer;
  }

  .menu-bouton[aria-expanded='true'] {
    border-color: var(--d-repere-trait);
  }

  @media (max-width: 59.999rem) {
    .navigation {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      padding-top: var(--espace-8);
    }

    .navigation a {
      padding-block: var(--espace-12);
    }

    .navigation a[aria-current='page']::after {
      inset-inline: auto;
      inset-block: var(--espace-8);
      width: 2px;
      height: auto;
      inset-inline-start: 0;
      bottom: auto;
    }

    .js .menu-bouton {
      display: inline-flex;
    }

    .js .navigation {
      display: none;
    }

    .js .navigation[data-ouvert] {
      display: flex;
    }
  }

  .reglages {
    display: flex;
    gap: var(--espace-4);
  }

  .reglage-bouton {
    font: inherit;
    font-size: var(--corps-note);
    color: var(--d-texte-secondaire);
    background: transparent;
    border: 1px solid var(--d-bordure-filet);
    border-radius: var(--rayon-doux);
    padding: var(--espace-4) var(--espace-8);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--espace-4);
    transition: border-color var(--transition), color var(--transition);
  }

  .reglage-bouton:hover {
    border-color: var(--d-bordure-active);
    color: var(--d-texte-principal);
  }

  .reglage-bouton[aria-pressed='true'] {
    border-color: var(--d-repere-trait);
    color: var(--d-texte-principal);
  }

  /* --- fil d'ariane --- */
  .fil {
    font-size: var(--corps-note);
    color: var(--d-texte-mention);
    padding-block: var(--espace-16) 0;
  }

  .fil ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-8);
    margin: 0;
    padding: 0;
  }

  .fil li + li::before {
    content: '/';
    margin-inline-end: var(--espace-8);
    color: var(--d-bordure-controle);
  }

  .fil li {
    margin: 0;
  }

  /* --- pied --- */
  .pied {
    border-top: 1px solid var(--d-bordure-filet);
    background: var(--d-fond-enfonce);
    padding-block: var(--espace-48) var(--espace-32);
    font-size: var(--corps-petit);
    color: var(--d-texte-secondaire);
    margin-top: var(--espace-96);
  }

  .pied-interne {
    max-width: 82rem;
    margin-inline: auto;
    padding-inline: var(--gouttiere);
    display: grid;
    gap: var(--espace-32);
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }

  .pied h2 {
    font-family: var(--police-texte);
    font-size: var(--corps-note);
    font-weight: var(--graisse-moyenne);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--d-texte-mention);
    margin: 0 0 var(--espace-12);
  }

  .pied ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .pied li + li {
    margin-top: var(--espace-8);
  }

  .pied-bas {
    max-width: 82rem;
    margin: var(--espace-32) auto 0;
    padding: var(--espace-24) var(--gouttiere) 0;
    border-top: 1px solid var(--d-bordure-filet);
    font-size: var(--corps-note);
    color: var(--d-texte-mention);
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-16);
    justify-content: space-between;
  }
}

/* -------------------------------------------------------------- composants */
@layer composants {
  /* --- le filet vernier ---
     Deux echelles de pas 12 et 13 qui ne coincident qu'au centre, ou le trait
     est plus long, plus epais, et en laiton. C'est le signe de la marque
     transforme en separateur : la regle « deux sources concordantes » rendue
     visible. Le sens ne repose pas sur la couleur (critere 1.4.1). */
  .filet-vernier {
    position: relative;
    height: var(--espace-24);
    /* La feuille par défaut du navigateur donne « margin-inline: auto » à hr.
       Sur un élément de grille, une marge automatique l'emporte sur l'étirement
       et le réduit à sa largeur de contenu — soit zéro pour un hr. Le filet
       existait, mesurait 0 px de large, et ne peignait rien. */
    margin-inline: 0;
    margin-block: var(--espace-32);
    background:
      repeating-linear-gradient(90deg, var(--d-bordure-controle) 0 1px, transparent 1px 12px) left top / 100% 9px no-repeat,
      repeating-linear-gradient(90deg, var(--d-bordure-controle) 0 1px, transparent 1px 13px) left bottom / 100% 9px no-repeat;
  }

  /* Le trait de coïncidence est plus long ET plus épais que les graduations :
     il se lit en niveaux de gris, en photocopie et au vidéoprojecteur. La
     couleur ne fait que le confirmer — critère 1.4.1. */
  .filet-vernier::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -3px;
    bottom: -3px;
    width: 3px;
    transform: translateX(-50%);
    background: var(--d-repere-trait);
  }

  /* --- boutons --- */
  .bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-8);
    padding: var(--espace-12) var(--espace-24);
    font-size: var(--corps-petit);
    font-weight: var(--graisse-moyenne);
    text-decoration: none;
    border-radius: var(--rayon-doux);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }

  .bouton-plein {
    background: var(--d-fond-inverse);
    color: var(--d-texte-inverse);
  }

  .bouton-plein:hover {
    background: var(--d-texte-secondaire);
  }

  .bouton-vide {
    border-color: var(--d-bordure-controle);
    color: var(--d-texte-principal);
  }

  .bouton-vide:hover {
    border-color: var(--d-repere-trait);
    background: var(--d-fond-enfonce);
  }

  .cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-12);
    margin-block: var(--espace-32);
  }

  /* --- encadres --- */
  .cle {
    background: var(--d-fond-enfonce);
    border: 1px solid var(--d-bordure-filet);
    border-inline-start: 2px solid var(--d-repere-trait);
    border-radius: var(--rayon-doux);
    padding: var(--espace-24);
    margin-block: var(--espace-32);
  }

  .cle-titre {
    font-family: var(--police-texte);
    font-size: var(--corps-note);
    font-weight: var(--graisse-moyenne);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--d-texte-mention);
    margin: 0 0 var(--espace-12);
  }

  .cle ul {
    margin-bottom: 0;
  }

  .cle > :last-child {
    margin-bottom: 0;
  }

  .alerte {
    display: flex;
    gap: var(--espace-16);
    background: var(--d-fond-page);
    border: 1px solid var(--d-etat-alerte-solide);
    border-radius: var(--rayon-doux);
    padding: var(--espace-16) var(--espace-24);
    margin-block: var(--espace-32);
  }

  /* Le codage n'est jamais chromatique seul : la barre a gauche et
     l'etiquette « A savoir » portent le sens en niveaux de gris. */
  .alerte-marque {
    flex: none;
    width: 3px;
    background: var(--d-etat-alerte-solide);
    border-radius: var(--rayon-plein);
  }

  .alerte-etiquette {
    font-size: var(--corps-note);
    font-weight: var(--graisse-moyenne);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--d-etat-alerte-texte);
    margin: 0 0 var(--espace-4);
  }

  .alerte-corps > :last-child {
    margin-bottom: 0;
  }

  /* --- bloc de preuve --- */
  .preuve {
    margin: var(--espace-32) 0;
    padding: var(--espace-16) var(--espace-24);
    border: 1px solid var(--d-bordure-filet);
    border-radius: var(--rayon-doux);
    background: var(--d-fond-page);
  }

  .preuve-corps > :first-child {
    margin-top: 0;
  }

  .preuve-corps > :last-child {
    margin-bottom: 0;
  }

  .preuve-corps p {
    font-size: var(--corps-sous-titre);
    line-height: 1.45;
  }

  .preuve-source {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-8) var(--espace-16);
    align-items: baseline;
    margin-top: var(--espace-12);
    padding-top: var(--espace-12);
    border-top: 1px solid var(--d-bordure-filet);
    font-family: var(--police-trace);
    font-size: var(--corps-note);
    color: var(--d-texte-secondaire);
  }

  .preuve-date {
    color: var(--d-texte-mention);
  }

  /* --- etapes --- */
  .etapes {
    list-style: none;
    padding: 0;
    margin-block: var(--espace-32);
    counter-reset: etape;
  }

  .etape {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--espace-16);
    padding-block: var(--espace-24);
    border-top: 1px solid var(--d-bordure-filet);
  }

  .etape + .etape {
    margin-top: 0;
  }

  .etape:last-child {
    border-bottom: 1px solid var(--d-bordure-filet);
  }

  .etape-rang {
    font-family: var(--police-trace);
    font-size: var(--corps-petit);
    color: var(--d-texte-mention);
    padding-top: 0.35em;
    font-variant-numeric: tabular-nums;
  }

  .etape-corps h3 {
    margin-top: 0;
    font-size: var(--corps-sous-titre);
  }

  .etape-corps > :last-child {
    margin-bottom: 0;
  }

  /* --- questions / reponses --- */
  .faq {
    margin-block: var(--espace-32);
    border-top: 1px solid var(--d-bordure-filet);
  }

  .qr {
    border-bottom: 1px solid var(--d-bordure-filet);
  }

  .qr > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-16);
    padding: var(--espace-16) 0;
    cursor: pointer;
    font-weight: var(--graisse-moyenne);
    list-style: none;
  }

  .qr > summary::-webkit-details-marker {
    display: none;
  }

  .qr > summary::after {
    content: '+';
    font-family: var(--police-trace);
    color: var(--d-texte-mention);
    flex: none;
  }

  .qr[open] > summary::after {
    content: '–';
    color: var(--d-repere-trait);
  }

  .qr-corps {
    padding-bottom: var(--espace-16);
    color: var(--d-texte-secondaire);
  }

  .qr-corps > :first-child {
    margin-top: 0;
  }

  /* --- tableaux --- */
  .tableau-cadre {
    margin-block: var(--espace-32);
    overflow-x: auto;
    border: 1px solid var(--d-bordure-filet);
    border-radius: var(--rayon-doux);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--corps-petit);
    font-variant-numeric: tabular-nums;
  }

  th,
  td {
    text-align: start;
    padding: var(--espace-12) var(--espace-16);
    border-bottom: 1px solid var(--d-bordure-filet);
    vertical-align: top;
  }

  thead th {
    background: var(--d-fond-enfonce);
    font-weight: var(--graisse-moyenne);
    font-size: var(--corps-note);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--d-texte-secondaire);
    white-space: nowrap;
  }

  tbody th {
    font-weight: var(--graisse-moyenne);
  }

  tbody tr:last-child th,
  tbody tr:last-child td {
    border-bottom: 0;
  }

  .al-right {
    text-align: end;
  }
  .al-center {
    text-align: center;
  }

  /* --- cartes --- */
  .grille {
    display: grid;
    gap: var(--espace-16);
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    margin-block: var(--espace-32);
    padding: 0;
    list-style: none;
  }

  .carte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--espace-8);
    padding: var(--espace-24);
    border: 1px solid var(--d-bordure-filet);
    border-radius: var(--rayon-doux);
    background: var(--d-fond-page);
    transition: border-color var(--transition);
    margin: 0;
  }

  .carte:hover {
    border-color: var(--d-bordure-active);
  }

  /* Le trait de coincidence apparait au survol : la carte visee est celle qui
     est mesuree. Purement decoratif, donc invisible au lecteur d'ecran. */
  .carte::before {
    content: '';
    position: absolute;
    inset-block: -1px auto;
    inset-inline-start: var(--espace-24);
    width: 2rem;
    height: 2px;
    background: var(--d-repere-trait);
    opacity: 0;
    transition: opacity var(--transition);
  }

  .carte:hover::before,
  .carte:focus-within::before {
    opacity: 1;
  }

  .carte h3 {
    margin: 0;
    font-size: var(--corps-sous-titre);
  }

  .carte p {
    margin: 0;
    color: var(--d-texte-secondaire);
    font-size: var(--corps-petit);
  }

  .carte-lien {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }

  /* Toute la carte devient cliquable sans imbriquer de lien. */
  .carte-lien::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .carte-etiquette {
    font-family: var(--police-trace);
    font-size: var(--corps-note);
    color: var(--d-texte-mention);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .carte-suite {
    margin-top: auto;
    padding-top: var(--espace-12);
    font-size: var(--corps-petit);
    color: var(--d-texte-accent);
    font-weight: var(--graisse-moyenne);
  }

  /* --- entete de page --- */
  .titre-page {
    padding-block: var(--espace-48) 0;
  }

  .titre-page .chapeau {
    font-family: var(--police-titrage);
    font-size: var(--corps-sous-titre);
    line-height: 1.45;
    color: var(--d-texte-secondaire);
    margin-top: var(--espace-24);
    max-width: 46ch;
  }

  .meta-page {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-8) var(--espace-24);
    margin-top: var(--espace-24);
    padding-top: var(--espace-16);
    border-top: 1px solid var(--d-bordure-filet);
    font-family: var(--police-trace);
    font-size: var(--corps-note);
    color: var(--d-texte-mention);
  }

  .meta-page b {
    font-weight: var(--graisse-normale);
    color: var(--d-texte-secondaire);
  }

  /* --- accueil --- */
  .hero {
    padding-block: var(--espace-64) var(--espace-32);
  }

  @media (min-width: 48rem) {
    .hero {
      padding-block: var(--espace-96) var(--espace-48);
    }
  }

  .hero h1 {
    max-width: 20ch;
  }

  .hero-chapeau {
    font-size: var(--corps-sous-titre);
    line-height: 1.5;
    color: var(--d-texte-secondaire);
    max-width: 52ch;
    margin-top: var(--espace-24);
  }

  .hero-signature {
    font-family: var(--police-trace);
    font-size: var(--corps-note);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--d-texte-mention);
    margin-bottom: var(--espace-24);
    display: flex;
    align-items: center;
    gap: var(--espace-12);
  }

  .hero-signature::before {
    content: '';
    width: var(--espace-32);
    height: 2px;
    background: var(--d-repere-trait);
  }

  /* --- sommaire --- */
  .sommaire {
    border: 1px solid var(--d-bordure-filet);
    border-radius: var(--rayon-doux);
    padding: var(--espace-16) var(--espace-24);
    margin-block: var(--espace-32);
    background: var(--d-fond-enfonce);
  }

  .sommaire h2 {
    font-family: var(--police-texte);
    font-size: var(--corps-note);
    font-weight: var(--graisse-moyenne);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--d-texte-mention);
    margin: 0 0 var(--espace-12);
  }

  .sommaire ol {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: var(--espace-32);
  }

  @media (max-width: 40rem) {
    .sommaire ol {
      columns: 1;
    }
  }

  .sommaire li {
    margin: 0 0 var(--espace-8);
    break-inside: avoid;
    font-size: var(--corps-petit);
  }

  .sommaire a {
    text-decoration: none;
    color: var(--d-texte-secondaire);
  }

  .sommaire a:hover {
    color: var(--d-texte-principal);
    text-decoration: underline;
  }

  /* --- formulaire --- */
  .formulaire {
    display: grid;
    gap: var(--espace-24);
    margin-block: var(--espace-32);
    max-width: 40rem;
  }

  .champ {
    display: grid;
    gap: var(--espace-8);
  }

  .champ label {
    font-size: var(--corps-petit);
    font-weight: var(--graisse-moyenne);
  }

  .champ .aide {
    font-size: var(--corps-note);
    color: var(--d-texte-mention);
  }

  input[type='text'],
  input[type='email'],
  textarea,
  select {
    font: inherit;
    font-size: var(--corps-petit);
    color: var(--d-texte-principal);
    background: var(--d-fond-page);
    border: 1px solid var(--d-bordure-controle);
    border-radius: var(--rayon-doux);
    padding: var(--espace-12);
    width: 100%;
    transition: border-color var(--transition);
  }

  input:hover,
  textarea:hover,
  select:hover {
    border-color: var(--d-bordure-active);
  }

  textarea {
    min-height: 9rem;
    resize: vertical;
  }

  .consentement {
    display: flex;
    gap: var(--espace-12);
    align-items: start;
    font-size: var(--corps-petit);
    color: var(--d-texte-secondaire);
  }

  .consentement input {
    margin-top: 0.25em;
    width: var(--cible);
    height: var(--cible);
    accent-color: var(--d-repere-trait);
    flex: none;
  }

  .pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .message-etat {
    padding: var(--espace-16);
    border-radius: var(--rayon-doux);
    border: 1px solid var(--d-bordure-filet);
    font-size: var(--corps-petit);
  }

  .message-etat[data-etat='succes'] {
    border-color: var(--d-etat-succes-solide);
    color: var(--d-etat-succes-texte);
  }

  .message-etat[data-etat='erreur'] {
    border-color: var(--d-etat-erreur-solide);
    color: var(--d-etat-erreur-texte);
  }

  /* --- orientation --- */
  .orientation {
    border: 1px solid var(--d-bordure-filet);
    border-radius: var(--rayon-doux);
    background: var(--d-fond-page);
    margin-block: var(--espace-32);
  }

  .orientation-entete {
    padding: var(--espace-24);
    border-bottom: 1px solid var(--d-bordure-filet);
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-12);
    align-items: baseline;
    justify-content: space-between;
  }

  .orientation-avancement {
    font-family: var(--police-trace);
    font-size: var(--corps-note);
    color: var(--d-texte-mention);
    font-variant-numeric: tabular-nums;
  }

  /* La jauge reprend l'echelle graduee du signe. */
  .jauge {
    display: flex;
    gap: var(--espace-4);
    margin-top: var(--espace-8);
  }

  .jauge span {
    height: 3px;
    width: var(--espace-24);
    background: var(--d-bordure-filet);
    border-radius: var(--rayon-plein);
  }

  .jauge span[data-fait='oui'] {
    background: var(--d-repere-trait);
  }

  .orientation-corps {
    padding: var(--espace-24);
  }

  .orientation fieldset {
    border: 0;
    padding: 0;
    margin: 0;
  }

  .orientation legend {
    font-family: var(--police-titrage);
    font-size: var(--corps-titre-3);
    line-height: var(--mesure-interligne-titre);
    padding: 0;
    margin-bottom: var(--espace-8);
  }

  .orientation .aide {
    color: var(--d-texte-mention);
    font-size: var(--corps-petit);
    margin-bottom: var(--espace-24);
  }

  .choix {
    display: grid;
    gap: var(--espace-16);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .choix li {
    margin: 0;
  }

  .choix label {
    display: flex;
    gap: var(--espace-12);
    align-items: start;
    padding: var(--espace-16);
    border: 1px solid var(--d-bordure-controle);
    border-radius: var(--rayon-doux);
    cursor: pointer;
    font-size: var(--corps-petit);
    transition: border-color var(--transition), background var(--transition);
  }

  .choix label:hover {
    border-color: var(--d-bordure-active);
    background: var(--d-fond-enfonce);
  }

  .choix input {
    margin-top: 0.15em;
    width: var(--cible);
    height: var(--cible);
    accent-color: var(--d-repere-trait);
    flex: none;
  }

  .choix input:checked + span {
    font-weight: var(--graisse-moyenne);
  }

  .choix label:has(input:checked) {
    border-color: var(--d-repere-trait);
    background: var(--d-fond-accent);
  }

  .orientation-pied {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-12);
    justify-content: space-between;
    padding: var(--espace-16) var(--espace-24);
    border-top: 1px solid var(--d-bordure-filet);
    background: var(--d-fond-enfonce);
  }

  .resultat-titre {
    display: flex;
    align-items: baseline;
    gap: var(--espace-12);
    flex-wrap: wrap;
  }

  .resultat-etiquette {
    font-family: var(--police-trace);
    font-size: var(--corps-note);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--d-texte-accent);
    border: 1px solid var(--d-repere-trait);
    border-radius: var(--rayon-plein);
    padding: var(--espace-2) var(--espace-12);
  }

  /* --- filtres de la liste de cas --- */
  .filtres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-8);
    margin-block: var(--espace-24);
    padding: 0;
    list-style: none;
  }

  /* Les boutons sont portes par des <li>, et la marge de prose « li + li »
     s'y applique a tous sauf au premier : dans une rangee flex, elle les
     descend d'un cran et le premier bouton reste seul en haut. Ici
     l'espacement est tenu par « gap ». */
  .filtres li {
    margin: 0;
  }

  .filtres button {
    font: inherit;
    font-size: var(--corps-note);
    padding: var(--espace-8) var(--espace-16);
    border: 1px solid var(--d-bordure-controle);
    background: transparent;
    color: var(--d-texte-secondaire);
    border-radius: var(--rayon-plein);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
  }

  .filtres button:hover {
    border-color: var(--d-bordure-active);
    color: var(--d-texte-principal);
  }

  .filtres button[aria-pressed='true'] {
    border-color: var(--d-repere-trait);
    color: var(--d-texte-principal);
    background: var(--d-fond-accent);
  }

  /* --- liste d'articles --- */
  .liste-articles {
    list-style: none;
    padding: 0;
    margin-block: var(--espace-32);
    border-top: 1px solid var(--d-bordure-filet);
  }

  .liste-articles li {
    margin: 0;
    border-bottom: 1px solid var(--d-bordure-filet);
  }

  .article-lien {
    display: grid;
    gap: var(--espace-4);
    padding-block: var(--espace-24);
    text-decoration: none;
  }

  .article-lien:hover h3 {
    text-decoration: underline;
    text-decoration-color: var(--d-repere-trait);
  }

  .article-lien h3 {
    margin: 0;
    font-size: var(--corps-titre-3);
  }

  .article-lien p {
    margin: 0;
    color: var(--d-texte-secondaire);
    font-size: var(--corps-petit);
  }

  .article-meta {
    font-family: var(--police-trace);
    font-size: var(--corps-note);
    color: var(--d-texte-mention);
  }
}

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

  .mention {
    color: var(--d-texte-mention);
    font-size: var(--corps-note);
  }

  .sans-js-cache {
    display: none;
  }

  .js .sans-js-cache {
    display: revert;
  }

  .js .sans-js-seul {
    display: none;
  }

  [hidden] {
    display: none !important;
  }
}

/* ------------------------------------------------------------------ impression */
@media print {
  .entete,
  .pied,
  .cta,
  .reglages,
  .menu-mobile,
  .saut,
  .filtres {
    display: none !important;
  }

  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
  }

  .flux > * {
    grid-column: pleine;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    word-break: break-all;
  }

  .qr {
    break-inside: avoid;
  }

  details {
    display: block;
  }

  details > summary {
    list-style: none;
  }

  details:not([open]) > *:not(summary) {
    display: block !important;
  }
}