@layer composants {
  .evitement {
    position: absolute; inset-inline-start: var(--e-4); inset-block-start: -10rem; z-index: 100;
    padding: var(--e-3) var(--e-5); border-radius: var(--rayon-bouton);
    background: var(--action); color: var(--sur-action); font-weight: var(--g-ui);
  }
  .evitement:focus { inset-block-start: var(--e-4); }

  .conteneur { inline-size: min(100% - 2 * var(--gouttiere), var(--largeur-max)); margin-inline: auto; }
  .conteneur--etroit { --largeur-max: 46rem; }

  /* Boutons */
  .bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    min-block-size: var(--cible-min); padding: var(--e-3) var(--e-5);
    border: 2px solid var(--bouton); border-radius: var(--rayon-bouton);
    background: var(--bouton); color: var(--sur-action);
    font-family: var(--police-ui); font-size: var(--t-ui); font-weight: var(--g-ui); line-height: 1.1;
    text-align: center; text-decoration: none;
    transition: background-color var(--d-micro) var(--courbe-stylo), transform var(--d-micro) var(--courbe-stylo);
  }
  .bouton:hover { background: var(--bouton-survol); border-color: var(--bouton-survol); }
  .bouton:active { transform: scale(0.97); }
  .bouton--secondaire { background: transparent; color: var(--bouton); }
  .bouton--secondaire:hover { background: var(--bouton-pale); border-color: var(--bouton); }
  .bouton--grand { min-block-size: 3.25rem; padding-inline: var(--e-6); font-size: 1.125rem; }
  .groupe-boutons { display: flex; flex-wrap: wrap; gap: var(--e-3); }
  .lien-creneau { margin: 0; }
  .lien-fort { display: inline-block; padding-block: var(--e-3); font-weight: var(--g-ui); text-decoration-thickness: 2px; }

  .icone { inline-size: 1em; block-size: 1em; fill: currentColor; flex: none; }
  .lien-icone { display: inline-flex; align-items: center; gap: var(--e-2); }
  .lien-fort, .lien-icone { color: var(--bouton); }
  .lien-fort:hover, .lien-icone:hover { color: var(--bouton-survol); }
  .lien-icone .icone, .bouton .icone { inline-size: 1.15em; block-size: 1.15em; }
  .liste-coche { list-style: none; padding: 0; display: grid; gap: var(--e-3); }
  .liste-coche li { display: grid; grid-template-columns: 1.1em 1fr; gap: var(--e-3); align-items: start; }
  .liste-coche .icone { color: var(--accent); margin-block-start: 0.3em; }

  .etiquette {
    display: inline-block; padding: 0.2em 0.75em; border-radius: var(--rayon-bouton);
    background: var(--accent-pale); color: var(--accent);
    font-family: var(--police-ui); font-size: var(--t-petit); font-weight: var(--g-ui); letter-spacing: 0; line-height: 1.3;
  }

  .carte { padding: var(--e-6); background: var(--surface); border-radius: var(--rayon-carte); }

  /* En-tête fixe */
  .entete { position: sticky; inset-block-start: 0; z-index: 20; background: var(--fond); border-block-end: 1px solid var(--filet); }
  .entete__barre { display: flex; align-items: center; gap: var(--e-5); min-block-size: 4.25rem; }
  .entete__logo { display: block; margin-inline-end: auto; padding-block: var(--e-3); }
  .entete__logo img { inline-size: clamp(130px, 30vw, 170px); }
  .entete__nav, .entete__actions .bouton { display: none; }
  .entete__nav ul { display: flex; gap: var(--e-5); }
  .entete__nav a { padding-block: var(--e-3); font-weight: var(--g-ui); color: var(--titre); text-decoration: none; }
  .entete__nav a:hover, .entete__nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
  .entete__actions { display: flex; align-items: center; gap: var(--e-4); }
  @media (width >= 48rem) { .entete__actions .bouton { display: inline-flex; } }
  @media (width >= 64rem) { .entete__nav { display: block; } .entete__actions .bouton-menu { display: none; } }

  .bouton-menu {
    min-block-size: var(--cible-min); padding: var(--e-2) var(--e-4);
    border: 2px solid var(--titre); border-radius: var(--rayon-bouton); background: transparent;
    font-weight: var(--g-ui); font-size: var(--t-ui); color: var(--titre);
  }
  .bouton-menu:hover { background: var(--titre); color: var(--blanc-lilas); }
  .menu[popover] {
    margin: 0; inset: 0 0 auto auto; block-size: 100dvh; inline-size: min(22rem, 100%);
    padding: var(--e-8) var(--e-6) var(--e-6); border: 0; background: var(--surface); color: var(--texte);
    box-shadow: var(--ombre-carte);
  }
  .menu::backdrop { background: rgb(7 3 26 / 0.4); }
  .menu ul { list-style: none; padding: 0; display: grid; gap: var(--e-1); }
  .menu a { display: block; padding-block: var(--e-2); font-family: var(--police-titre); font-weight: var(--g-titre); font-size: 1.75rem; letter-spacing: -0.02em; color: var(--titre); text-decoration: none; }
  .menu a:hover { color: var(--action); }
  .menu .fermer { position: absolute; inset-block-start: var(--e-4); inset-inline-end: var(--e-4); }

  /* Barre d'actions mobile, à portée de pouce */
  .barre-actions {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20;
    display: grid; grid-template-columns: 1fr; gap: var(--e-3);
    padding: var(--e-3) var(--e-4) max(var(--e-3), env(safe-area-inset-bottom));
    background: var(--surface); border-block-start: 1px solid var(--filet);
    box-shadow: 0 -4px 16px rgb(7 3 26 / 0.06);
  }
  .barre-actions .bouton { min-block-size: 3.25rem; }
  .barre-actions .bouton--secondaire { background: var(--surface); }
  @media (width >= 48rem) { .barre-actions { display: none; } }

  /* Fil d'Ariane */
  .ariane { padding-block: var(--e-5) 0; font-size: var(--t-petit); }
  .ariane ol { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; }
  .ariane li + li::before { content: "/"; margin-inline-end: var(--e-2); color: var(--texte-doux); }
  .ariane a { display: inline-block; padding-block: var(--e-1); color: var(--texte); }
  .ariane [aria-current] { color: var(--texte-doux); }

  /* Sections */
  .section { padding-block: var(--e-8); }
  @media (width >= 60rem) { .section { padding-block: var(--e-9); } }
  .section--blanche { background: var(--surface); }
  .section h2 { margin-block-end: var(--e-5); }
  .section__intro { font-size: 1.25rem; margin-block-end: var(--e-7); }

  /* Appel à l'action en bas de page */
  .appel { display: grid; gap: var(--e-5); justify-items: start; }
  .appel h2 { margin: 0; }

  /* Formulaire */
  .formulaire { display: grid; gap: var(--e-5); padding: var(--e-6); background: var(--surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); }
  .formulaire > .bouton { justify-self: stretch; }
  @media (width >= 30rem) { .formulaire > .bouton { justify-self: start; } }
  .champ { display: grid; gap: var(--e-2); }
  .champ label, .champ legend { font-weight: var(--g-ui); font-size: var(--t-ui); color: var(--titre); }
  .aide { font-size: var(--t-petit); color: var(--texte-doux); }
  .facultatif { font-weight: 400; color: var(--texte-doux); }
  .champ :is(input:not([type="checkbox"], [type="range"]), select, textarea) {
    inline-size: 100%; min-block-size: var(--cible-min); padding: var(--e-3) var(--e-4);
    border: 1.5px solid color-mix(in oklch, var(--nuit) 45%, var(--blanc-lilas)); border-radius: var(--rayon-controle);
    background: var(--blanc); font-size: var(--t-ui);
  }
  .champ textarea { min-block-size: 6rem; resize: vertical; }
  .champ ::placeholder { color: var(--texte-doux); }
  .champ .erreur { display: none; font-size: var(--t-petit); font-weight: var(--g-ui); color: var(--erreur); }
  .champ [aria-invalid="true"] { border-color: var(--erreur); }
  .champ:has([aria-invalid="true"]) .erreur { display: block; }
  .accord { grid-template-columns: auto 1fr; gap: var(--e-3); align-items: start; }
  .accord input { inline-size: 1.5rem; block-size: 1.5rem; margin: 0.15em 0 0; accent-color: var(--action); }
  .accord label { font-weight: 400; }
  .accord .erreur { grid-column: 2; }
  .retour-envoi { font-weight: var(--g-ui); color: var(--titre); }
  .retour-envoi:empty { display: none; }
  .selection-envoyee { padding: var(--e-4); border-radius: var(--rayon-controle); background: var(--accent-pale); }
  .selection-envoyee ul { margin-block: var(--e-2); padding-inline-start: var(--e-5); }

  .fait-bloc { display: grid; gap: var(--e-4); align-content: center; min-block-size: 18rem; padding: var(--e-6); background: var(--surface); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); }
  .fait-bloc:focus { outline: none; }
  .fait { font-family: var(--police-titre); font-weight: var(--g-titre); letter-spacing: var(--ie-titre); line-height: 1; color: var(--accent); font-size: clamp(4rem, 3rem + 4vw, 6rem); }

  /* Questions fréquentes */
  .faq details { border-block-end: 1px solid var(--filet); }
  .faq summary {
    display: flex; justify-content: space-between; gap: var(--e-4); align-items: center;
    min-block-size: var(--cible-min); padding-block: var(--e-4);
    font-weight: var(--g-ui); font-size: 1.2rem; color: var(--titre); cursor: pointer; list-style: none;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: ""; flex: none; inline-size: 0.65rem; block-size: 0.65rem;
    border-inline-end: 2.5px solid var(--accent); border-block-end: 2.5px solid var(--accent);
    rotate: 45deg; translate: 0 -25%;
    transition: rotate var(--d-micro) var(--courbe-stylo), translate var(--d-micro) var(--courbe-stylo);
  }
  .faq details[open] summary::after { rotate: -135deg; translate: 0 25%; }
  .faq details p { padding-block-end: var(--e-5); }
  .faq-bloc { display: grid; gap: var(--e-4); }
  @media (width >= 56rem) { .faq-bloc { grid-template-columns: 1fr 2fr; gap: var(--e-8); } }

  /* Pied de page */
  .pied { padding-block: var(--e-8) var(--e-6); background: var(--nuit); color: var(--blanc-lilas); font-size: var(--t-petit); }
  .pied a { display: inline-flex; align-items: center; gap: var(--e-2); padding-block: var(--e-1); color: var(--blanc-lilas); }
  .pied :focus-visible { outline-color: var(--blanc-lilas); }
  .pied__grille { display: grid; gap: var(--e-6); }
  @media (width >= 48rem) { .pied__grille { grid-template-columns: 2fr 1fr 1fr; } }
  .pied__grille ul { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
  .pied__grille p { margin-block-start: var(--e-4); max-inline-size: 32ch; }
  .pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3); margin-block-start: var(--e-7); padding-block-start: var(--e-5); padding-inline-end: calc(3rem + var(--e-4)); border-block-start: 1px solid rgb(246 245 250 / 0.25); }
}

/* Petites touches : rature du héros, coches tracées, tampon « Fait. », curseur desktop */
@layer composants {
  .entete { view-transition-name: entete; }
  .barre-actions { view-transition-name: barre-actions; }

  /* Fond plutôt que pseudo-élément : le trait suit le texte quand il passe sur deux lignes. */
  .heros__tache {
    background: linear-gradient(color-mix(in oklch, var(--marron) 28%, transparent) 0 0) no-repeat 0.3em 100% / 100% 0.4em;
    padding-inline: 0.15em; margin-inline: -0.15em;
    padding-block-end: 0.1em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  @media (prefers-reduced-motion: no-preference) {
    .heros__liste li { --delai: calc(0.5s + var(--n, 0) * 0.45s); }
    .heros__liste li:nth-child(2) { --n: 1; }
    .heros__liste li:nth-child(3) { --n: 2; }
    .heros__tache { animation: barrer 0.4s var(--courbe-stylo) var(--delai) both; }
    .heros__liste .icone { animation: poser 0.45s cubic-bezier(.3, 1.8, .5, 1) calc(var(--delai) + 0.3s) both; }
  }
  @keyframes barrer { from { background-size: 0 0.7em; } }
  @keyframes poser { from { opacity: 0; transform: scale(0.2) rotate(-25deg); } }

  /* La classe est posée par touches.js, seulement si le mouvement est autorisé. */
  .coches-animees .liste-coche:not(.heros__liste) .icone {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.35s var(--courbe-stylo) calc(var(--i, 0) * 90ms + 0.1s);
  }
  .coches-animees .liste-coche.est-vue .icone { clip-path: inset(0 -10% 0 0); }

  .fait { justify-self: start; transform-origin: 20% 60%; rotate: -3deg; }
  @media (prefers-reduced-motion: no-preference) {
    .fait-bloc:not([hidden]) .fait { animation: tamponner 0.5s cubic-bezier(.2, 1.4, .4, 1) both; }
  }
  @keyframes tamponner { from { opacity: 0; scale: 1.8; rotate: -12deg; } 60% { opacity: 1; } }

  .curseur { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
  .curseur.est-actif { opacity: 1; }
  .curseur > * {
    position: absolute; inset-block-start: 0; inset-inline-start: 0; translate: -50% -50%;
    transition: transform 0.25s var(--courbe-stylo), opacity 0.2s;
  }
  .curseur__point { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--accent); }
  .curseur__anneau { inline-size: 52px; block-size: 52px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; transform: scale(0.3); }
  .curseur__coche { inline-size: 16px; block-size: 16px; fill: var(--accent); opacity: 0; transform: scale(0.4) rotate(-25deg); }
  .curseur:is([data-etat="lien"], [data-etat="coche"]) .curseur__anneau { opacity: 1; transform: none; }
  .curseur[data-etat="lien"] .curseur__point { transform: scale(0.5); }
  .curseur:is([data-etat="coche"], [data-etat="texte"]) .curseur__point { opacity: 0; }
  /* Pastille claire : la coche reste visible au-dessus d'un bouton marron. */
  /* Décalée sous la pointe pour ne pas masquer le libellé. */
  .curseur[data-etat="coche"] .curseur__anneau { background: var(--fond); transform: translate(18px, 20px) scale(0.75); }
  .curseur[data-etat="coche"] .curseur__coche { opacity: 1; transform: translate(18px, 20px) scale(0.85); }
}

/* Le curseur dessiné remplace celui du système, sauf dans les champs de saisie (barre de texte) et les cadres externes. */
@layer utilitaires {
  .curseur-actif, .curseur-actif :not(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, iframe) { cursor: none !important; }
  .curseur[data-etat="cadre"] { opacity: 0; }
}

/* Flèches de navigation : retour en haut, pages voisines */
@layer composants {
  .haut-page {
    position: fixed; z-index: 15; inset-inline-end: var(--gouttiere);
    inset-block-end: calc(var(--hauteur-barre) + var(--e-3));
    display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%;
    background: var(--bouton); color: var(--sur-action); border: 2px solid var(--blanc-lilas);
    box-shadow: 0 4px 16px rgb(7 3 26 / 0.18);
    transition: opacity 0.25s, transform 0.25s var(--courbe-stylo);
  }
  .haut-page:hover { background: var(--bouton-survol); }
  .haut-page .icone { inline-size: 1.25rem; block-size: 1.25rem; rotate: -90deg; }
  @media (width >= 48rem) { .haut-page { inset-block-end: var(--e-6); } }
  /* Sans JS le bouton reste affiché ; touches.js le masque tant que l'en-tête est visible. */
  .haut-suivi .haut-page:not(.est-visible) { opacity: 0; transform: translateY(1rem); pointer-events: none; visibility: hidden; }
  .haut-suivi .haut-page { transition: opacity 0.25s, transform 0.25s var(--courbe-stylo), visibility 0.25s; }
  @media (prefers-reduced-motion: reduce) { .haut-page, .haut-suivi .haut-page { transition: none; } }

  .voisins {
    display: grid; gap: var(--e-4); padding-block: var(--e-7);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
  .article + .voisins { --largeur-max: 46rem; }
  .voisins__lien {
    display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-3); align-items: center;
    padding: var(--e-4) var(--e-5); border: 1px solid var(--filet); border-radius: var(--rayon-controle);
    background: var(--surface); color: var(--titre); text-decoration: none;
  }
  .voisins__lien .icone { grid-row: span 2; inline-size: 1.5rem; block-size: 1.5rem; color: var(--action); transition: transform 0.2s var(--courbe-stylo); }
  .voisins__lien--prec .icone { rotate: 180deg; }
  .voisins__lien--suiv { grid-template-columns: 1fr auto; text-align: end; grid-column-end: -1; }
  .voisins__lien--suiv .icone { grid-column: 2; grid-row: 1 / span 2; }
  .voisins__sens { font-family: var(--police-ui); font-size: var(--t-petit); color: var(--texte-doux); }
  .voisins__titre { font-family: var(--police-ui); font-weight: var(--g-ui); }
  .voisins__lien:hover { border-color: var(--action); }
  .voisins__lien:hover .voisins__titre { color: var(--action); }
  @media (prefers-reduced-motion: no-preference) {
    .voisins__lien--prec:hover .icone { transform: translateX(-4px); }
    .voisins__lien--suiv:hover .icone { transform: translateX(4px); }
  }
}