/* Thème de base « Plein air ».
   Les couleurs, polices, tailles et rayons viennent de niche/theme.json (propriétés sur :root).
   Mobile d'abord ; navigation complète à partir de 62em, tailles de bureau à partir de 48em. */

/* Socle */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* En-tête collant : une ancre ou un formulaire ramené en haut ne passe jamais dessous */
  scroll-padding-top: calc(var(--entete-compacte) + var(--e5));
}

:root { --entete-compacte: 72px; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-corps);
  font-size: var(--t-corps);
  line-height: var(--interligne-corps);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  caret-color: var(--lien);
  overflow-x: clip;
}

::selection { background: var(--selection); color: var(--titre); }

h1, h2, h3 {
  font-family: var(--police-titres);
  font-weight: 700;
  color: var(--titre);
  line-height: var(--interligne-titres);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
img, svg { display: block; max-width: 100%; }

a {
  color: var(--lien);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
a:hover { text-decoration-thickness: 2px; }

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

main:focus { outline: none; }
body:focus { outline: none; }

/* Champs de formulaire : focus en vert de la charte (le rouge est réservé aux erreurs) */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--lien);
  outline-offset: 2px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.evitement {
  position: absolute;
  top: var(--e2);
  left: var(--e2);
  z-index: 30;
  padding: var(--e3) var(--e4);
  background: var(--sombre-fond);
  color: var(--sombre-titre);
  border-radius: var(--rayon-petit);
  font-weight: 700;
  transform: translateY(-200%);
}
.evitement:focus { transform: none; }

.ico { width: 24px; height: 24px; flex: none; }
.ico-s { width: 20px; height: 20px; }
.ico-xs { width: 16px; height: 16px; }
.ico-logo { width: 26px; height: 26px; }

.colonne {
  width: 100%;
  max-width: calc(var(--largeur-contenu) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);
}

.large {
  width: 100%;
  max-width: calc(var(--largeur-large) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);
}

.petit { font-size: var(--t-petit); color: var(--texte-secondaire); }
.chapo { font-size: var(--t-chapo); line-height: 1.5; }

/* Mention société privée : bandeau sous le pied de page, sur toutes les pages (contraste vérifié à 7:1) */

.mention-societe {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e3) var(--marge);
  background: var(--mention-fond);
  color: var(--mention-texte);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  box-shadow: inset 0 1px 0 var(--bordure);
}
.mention-societe .ico { margin-top: 2px; }
/* Le bouton de retour en haut, fixe en bas à droite, ne recouvre jamais le bandeau en petit écran */
@media (max-width: 61.99em) { .mention-societe { padding-bottom: calc(var(--e3) + 64px); } }

/* En-tête */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fond);
  box-shadow: 0 1px 0 var(--bordure);
  transition: box-shadow 0.2s ease;
}
/* Au défilement, l'en-tête garde sa hauteur (choix de Jonathan du 29/10/2026) : seule une ombre apparaît. */
.entete-compacte { box-shadow: 0 1px 0 var(--bordure), 0 10px 24px -18px rgba(12, 26, 19, 0.45); }

.entete-barre {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 72px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--cible);
  color: var(--titre);
  text-decoration: none;
}

.logo-marque {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-texte);
  flex: none;
}

.logo-texte {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.logo-texte b { display: block; font-weight: 700; color: var(--titre); }

.nav-principale { display: none; }

.bouton-entete { margin-left: auto; }
.menu-mobile { flex: none; }

.menu-mobile > summary {
  display: grid;
  place-items: center;
  width: var(--cible);
  height: var(--cible);
  border-radius: 50%;
  color: var(--titre);
  box-shadow: inset 0 0 0 1px var(--bordure);
  cursor: pointer;
  list-style: none;
}
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile > summary:hover { background: var(--surface); }
.menu-mobile .menu-fermer, .menu-mobile[open] .menu-ouvrir { display: none; }
.menu-mobile[open] .menu-fermer { display: grid; }

.menu-panneau {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  padding: var(--e2) var(--marge) var(--e5);
  background: var(--fond);
  box-shadow: 0 1px 0 var(--bordure), 0 28px 56px -24px rgba(12, 26, 19, 0.35);
}

.menu-panneau ul { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.menu-panneau li + li { box-shadow: 0 -1px 0 var(--bordure); }

.menu-panneau ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  color: var(--titre);
  font-weight: 700;
  font-size: 19px;
  text-decoration: none;
}
.menu-panneau ul a .ico { color: var(--lien); }

/* Accordéon du menu mobile (élément de navigation à sous-menu) : details natif, utilisable sans script */
.menu-accordeon > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  color: var(--titre);
  font-weight: 700;
  font-size: 19px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-accordeon > summary::-webkit-details-marker { display: none; }
.menu-accordeon > summary .ico { color: var(--lien); transition: transform 0.2s ease; }
.menu-accordeon[open] > summary .ico { transform: rotate(180deg); }
.menu-panneau .menu-accordeon ul { margin: 0 0 var(--e3); padding: 0 0 0 var(--e2); }
.menu-panneau .menu-accordeon li + li { box-shadow: none; }
.menu-panneau .menu-accordeon ul a {
  justify-content: flex-start;
  gap: var(--e3);
  min-height: 52px;
  padding-block: 6px;
  font-size: 17px;
  font-weight: 600;
}
.menu-panneau .menu-accordeon .menu-tout { color: var(--lien); font-weight: 700; }
.menu-panneau .menu-accordeon .menu-tout .ico { margin-left: 2px; }

/* Entrée de sous-menu (panneau du bureau et accordéon mobile) : icône, titre, nombre de pages */
.nav-entree-icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--lime);
  color: var(--vert-profond);
}
.nav-entree-icone .ico { width: 22px; height: 22px; color: inherit; }
.nav-entree-texte { display: flex; flex-direction: column; min-width: 0; }
.nav-entree-titre { color: var(--titre); font-weight: 700; line-height: 1.25; }
.nav-entree-nombre { color: var(--texte-secondaire); font-weight: 400; font-size: 15.5px; line-height: 1.3; }
:is(.nav-panneau, .menu-accordeon) a:focus-visible,
.nav-sous-bouton:focus-visible,
.menu-accordeon > summary:focus-visible { outline: 3px solid var(--lien); outline-offset: 2px; border-radius: var(--rayon-petit); }

.logo-texte b { white-space: nowrap; }

@media (max-width: 61.99em) {
  .entete-barre { padding-inline: 12px; gap: 6px; }
  .entete .logo { gap: 8px; }
  .entete .logo-marque { width: 36px; height: 36px; }
  .entete .logo-texte { font-size: 16px; }
  /* Mobile et tablette : l'appel principal quitte l'en-tête pour la barre collée en bas de l'écran (.appel-collant) */
  .entete .bouton-entete { display: none; }
  .recherche-entete { margin-left: auto; }
  .section-photo-texte .bouton { display: none; }
}

@media (min-width: 62em) {
  :root { --entete-compacte: 88px; }
  .entete-barre { min-height: 88px; gap: var(--e5); }
  .logo-marque { width: 42px; height: 42px; }
  .logo-texte { font-size: 22px; white-space: nowrap; }
  .logo-texte b { display: inline; }
  .nav-principale { display: block; margin-left: auto; }
  .nav-principale > ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
  .nav-principale > ul > li > a, .nav-sous-tete > a {
    display: flex;
    align-items: center;
    min-height: var(--cible);
    padding: 0 14px;
    border-radius: 999px;
    color: var(--titre);
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
    white-space: nowrap;
  }
  .nav-principale > ul > li > a:hover { background: var(--surface); }
  /* Élément à panneau (motif de navigation à divulgation) : le libellé reste un lien, le chevron ouvre le panneau
     (clic, Entrée, Espace, flèche bas), le survol l'ouvre après un court délai (statique/js/site.js). */
  /* Une seule pastille pour le lien et le chevron : le fond se pose sur le conteneur, jamais sur ses deux enfants. */
  .nav-sous-tete { display: flex; align-items: center; border-radius: 999px; }
  .nav-sous-tete:has(.nav-sous-bouton:not([hidden])) { padding-right: 6px; }
  .nav-sous-tete:hover, .nav-sous-ouvert .nav-sous-tete { background: var(--surface); }
  .nav-sous-tete > a:has(+ .nav-sous-bouton:not([hidden])) { padding-right: 4px; }
  .nav-sous-bouton {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: -2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--titre);
    cursor: pointer;
  }
  .nav-sous-bouton[hidden] { display: none; }
  .nav-sous-bouton:hover, .nav-sous-bouton[aria-expanded="true"] { color: var(--lien); }
  .nav-sous-bouton .ico { transition: transform 0.2s ease; }
  .nav-sous-bouton[aria-expanded="true"] .ico { transform: rotate(180deg); }
  .nav-panneau {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--e5) 0 var(--e6);
    background: var(--fond);
    box-shadow: 0 1px 0 var(--bordure), 0 28px 56px -24px rgba(12, 26, 19, 0.35);
  }
  /* Pont invisible entre le libellé et le panneau : la souris le traverse sans refermer le panneau */
  .nav-panneau::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; }
  .nav-panneau-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--e4) var(--e6);
    align-items: start;
  }
  .nav-entrees {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav-entrees a {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: 72px;
    padding: var(--e3);
    border-radius: var(--rayon-petit);
    font-size: 17px;
    text-decoration: none;
  }
  .nav-entrees a:hover { background: var(--surface); }
  .nav-entrees a:hover .nav-entree-titre { color: var(--lien); }
  .nav-une { padding: var(--e3) 0 var(--e3) var(--e5); box-shadow: inset 1px 0 0 var(--bordure); }
  .nav-une-titre { margin-bottom: var(--e2); color: var(--texte-secondaire); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  .nav-une ul { margin: 0; padding: 0; list-style: none; }
  .nav-une li { line-height: 1.35; }
  .nav-une li + li { margin-top: var(--e3); }
  .nav-une a { color: var(--titre); font-weight: 600; font-size: 17px; line-height: 1.35; text-decoration: none; }
  .nav-une a:hover { color: var(--lien); text-decoration: underline; }
  .nav-tout {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--cible);
    padding-inline: var(--e3);
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
  }
  .nav-tout:hover { text-decoration: underline; }
  .bouton-entete { margin-left: 0; }
  .menu-mobile { display: none; }
}

/* Retour en haut : apparaît après un écran de défilement (statique/js/site.js) */

.retour-haut {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 15;
  display: grid;
  place-items: center;
  width: var(--cible);
  height: var(--cible);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fond);
  color: var(--lien);
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--bordure-forte), 0 10px 24px -12px rgba(12, 26, 19, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.retour-haut-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.retour-haut:hover { background: var(--surface); }
.retour-haut:focus-visible { outline: 3px solid var(--lien); outline-offset: 3px; border-radius: 50%; }
@media (min-width: 62em) {
  .retour-haut { right: 24px; bottom: 24px; }
}

/* Barre d'appel collée en bas de l'écran, sur mobile et tablette seulement, absente de la page de l'appel elle-même.
   Le bas de page et le bouton de retour en haut se décalent pour ne jamais passer dessous. */
.appel-collant { display: none; }
@media (max-width: 61.99em) {
  .appel-collant {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 14;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--fond);
    box-shadow: 0 -1px 0 var(--bordure), 0 -12px 24px -16px rgba(12, 26, 19, 0.35);
  }
  .appel-collant .bouton { width: 100%; justify-content: center; }
  body:has(.appel-collant) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body:has(.appel-collant) .retour-haut { bottom: calc(88px + env(safe-area-inset-bottom)); }
  /* Variante à phrase d'accroche (navigation.barre) : bandeau vert foncé, phrase en blanc au-dessus du bouton */
  .appel-collant-accroche { padding-top: 10px; background: var(--vert-profond); box-shadow: 0 -12px 24px -16px rgba(12, 26, 19, 0.45); }
  .appel-collant-phrase { margin: 0 0 8px; color: #FFFFFF; font-weight: 700; font-size: 16px; line-height: 1.3; text-align: center; }
  .appel-collant-accroche .bouton { min-height: 48px; font-size: 16px; }
  body:has(.appel-collant-accroche) { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  body:has(.appel-collant-accroche) .retour-haut { bottom: calc(120px + env(safe-area-inset-bottom)); }
}
@media print { .appel-collant { display: none; } }

/* Bandeau de consentement aux cookies de mesure (mesure.ga4) : carte posée en bas, sans voile ni blocage de la page.
   « Tout refuser » et « Tout accepter » ont la même forme, la même taille et la même couleur. Sur mobile et tablette,
   la carte n'apparaît qu'au premier défilement, puis remplace la barre d'appel collée tant qu'elle est ouverte ;
   le bouton de retour en haut s'efface aussi. */
.consentement {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.consentement[hidden] { display: none; }
.consentement-carte {
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: 760px;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  margin: 0 auto;
  padding: 18px 20px;
  border-radius: var(--rayon-grand);
  background: var(--fond);
  color: var(--texte);
  box-shadow: inset 0 0 0 1.5px var(--bordure-forte), 0 18px 40px -16px rgba(12, 26, 19, 0.5);
}
.consentement-titre { font-family: var(--police-titres); font-weight: 700; font-size: 18px; color: var(--titre); }
.consentement-texte { font-size: 16px; line-height: 1.5; }
/* Boutons compacts, de même largeur l'un et l'autre (aucun choix mis en avant). Sélecteur à deux classes :
   la règle .bouton, plus bas dans la feuille, l'emporterait sinon. */
.consentement-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.consentement .consentement-bouton {
  min-height: 40px;
  padding: 0 14px;
  font-size: 15px;
  background: var(--cta);
  color: var(--cta-texte);
}
.consentement .consentement-bouton:hover { background: var(--cta-survol); color: var(--cta-texte); }
.consentement-personnaliser, .pied-cookies {
  justify-self: start;
  min-height: var(--cible);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.consentement-personnaliser { color: var(--lien); font-size: 16px; }
.consentement-personnaliser[hidden] { display: none; }
.consentement-reglages { display: grid; gap: 12px; padding: 12px 0 4px; box-shadow: 0 -1px 0 var(--bordure); }
.consentement-reglages[hidden] { display: none; }
.consentement-option { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 16px; line-height: 1.5; }
.consentement-option input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--cta); }
.consentement-option-nom { display: block; font-weight: 700; color: var(--titre); }
.consentement-enregistrer { justify-self: start; min-height: var(--cible); padding: 0 20px; }
.pied-cookies { display: inline-flex; align-items: center; color: var(--pied-lien); font-size: 15px; }
.pied-cookies:hover { color: var(--sombre-titre); }
body:has(.consentement:not([hidden])) .retour-haut { visibility: hidden; }
@media (max-width: 61.99em) {
  /* Le bandeau prend la place de la barre d'appel tant qu'il est ouvert ; elle revient dès le choix fait.
     Le padding-bottom du body reste celui de la barre : la page ne saute pas à la fermeture du bandeau. */
  body:has(.consentement:not([hidden])) .appel-collant { display: none; }
}
@media (max-width: 30em) {
  .consentement { padding-left: 8px; padding-right: 8px; }
  .consentement-carte { padding: 14px 16px; gap: 10px; }
  .consentement-texte, .consentement-option { font-size: 15px; }
  .consentement .consentement-bouton { padding: 0 10px; white-space: nowrap; }
}
@media (min-width: 62em) {
  .pied-cookies { min-height: 32px; }
  .consentement-actions { grid-template-columns: repeat(2, 11em); }
}
@media print { .consentement { display: none; } }

/* Boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--bouton-hauteur);
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font-family: var(--police-corps);
  font-size: var(--t-bouton);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s;
}

.bouton-principal {
  background: var(--cta);
  color: var(--cta-texte);
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--cta) 65%, transparent);
}
.bouton-principal:hover {
  background: var(--cta-survol);
  color: var(--cta-texte);
  transform: translateY(-1px);
}
.bouton-principal:active { transform: none; }

.bouton-secondaire {
  background: transparent;
  color: var(--titre);
  font-weight: 800;
  box-shadow: inset 0 0 0 2px var(--sombre-fond);
}
.bouton-secondaire:hover { background: var(--fond); color: var(--titre); }

.bouton-plein { width: 100%; padding: 0 14px; }

.bouton-entete {
  min-height: 56px;
  padding: 0 24px;
  font-size: 17px;
  white-space: nowrap;
}

/* Petits éléments communs */

.pastille {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 30px;
  padding: 2px 12px;
  border-radius: 999px;
  background: #E3EEE7;
  color: var(--titre);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.rond-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--lien);
}
.rond-lime { background: var(--lime); color: var(--titre); width: 56px; height: 56px; }
.rond-blanc { background: var(--carte-fond); color: var(--titre); box-shadow: inset 0 0 0 1px var(--bordure); }
.rond-accent { background: var(--accent); color: var(--accent-texte); }
.rond-grand { width: 72px; height: 72px; }
.rond-grand .ico { width: 30px; height: 30px; }

.surtitre {
  margin-bottom: var(--e2);
  color: var(--lien);
  font-weight: 800;
  font-size: 16px;
}

.section-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e3) var(--e5);
  margin-bottom: var(--e5);
}
.section-tete h2, .faq-tete h2, .a-lire h2 {
  font-size: calc(var(--t-h2) + 4px);
  line-height: 1.12;
}
.section-intro { margin-top: var(--e3); max-width: 62ch; color: var(--texte-secondaire); }

.lien-suite {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--cible);
  color: var(--titre);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.lien-suite:hover { color: var(--lien); }

.section { padding-block: var(--e7); }
.section-fond { padding-block: var(--e7); background: var(--surface); }

.visuel-vide {
  display: grid;
  place-items: center;
  background: var(--lime);
  color: var(--lien);
}

/* Fil d'Ariane */

.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15.5px;
}
.fil-ariane li { display: flex; align-items: center; gap: 4px; }
.fil-ariane li .ico { color: var(--texte-secondaire); margin-right: 4px; }
.fil-ariane a { display: inline-flex; align-items: center; min-height: 44px; color: var(--titre); }
.fil-ariane a[aria-current] { color: var(--texte-secondaire); text-decoration: none; }
/* Sur mobile, le fil tient sur une ligne : les titres longs sont abrégés, l'accueil reste entier. */
@media (max-width: 47.99em) {
  .fil-ariane ol { flex-wrap: nowrap; }
  .fil-ariane li { min-width: 0; flex: 0 1 auto; }
  .fil-ariane li:first-child { flex: none; }
  .fil-ariane a { display: block; line-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fil-ariane li .ico { flex: none; }
}

/* Têtes de page */

/* Fil d'Ariane au-dessus des colonnes du héros, sur toute la largeur du conteneur */
.tete-fil { margin-bottom: var(--e2); }
.tete-texte > h1:first-child { margin-top: 0; }

.tete-page { padding: var(--e3) 0 var(--e5); }
.tete-page h1 {
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: var(--e3) 0 var(--e4);
}
.tete-page .pastille { margin-top: var(--e3); }
.tete-page .pastille + h1 { margin-top: var(--e3); }
.tete-grille { display: grid; gap: var(--e5); }
.tete-texte, .tete-grille > * { min-width: 0; }
.tete-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--rayon-grand);
}
.illustration { margin: var(--e5) 0; }
.illustration img { width: 100%; height: auto; border-radius: var(--rayon-moyen); }
.carte-image { height: auto; }
.chapo-tete p { font-size: var(--t-chapo); line-height: 1.55; max-width: 60ch; }
.chapo-tete p + p { margin-top: var(--e3); }

.tete-simple, .tete-404, .article-rubrique .tete-page { background: var(--lime); padding-bottom: var(--e6); }
.tete-simple .chapo-tete, .article-rubrique .chapo-tete { margin-bottom: var(--e4); }

.signature {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding-block: var(--e4);
  font-size: 15.5px;
  color: var(--texte-secondaire);
  box-shadow: 0 -1px 0 var(--bordure), 0 1px 0 var(--bordure);
}
.signature a { color: var(--titre); font-weight: 700; }
.signature-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-texte);
}
.signature-texte { display: flex; flex-direction: column; gap: 6px; }
.signature-auteur { color: var(--texte); font-size: 16.5px; }
.signature-dates { display: flex; flex-direction: column; gap: 4px; }
.signature-date { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.signature-pastille { box-shadow: none; padding: 0; }
.signature-pastille > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--fond);
  color: var(--titre);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--lime-filet);
}

@media (min-width: 48em) {
  .signature-dates { flex-direction: row; flex-wrap: wrap; }
  .signature-date + .signature-date::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 6px 0 4px;
    border-radius: 50%;
    background: var(--bordure-forte);
  }
  .signature-date .ico { display: none; }
}

@media (min-width: 62em) {
  .tete-page { padding: var(--e4) 0 var(--e7); }
  .article-guide .tete-page, .article-actualite .tete-page { background: var(--lime); }
  .tete-avec-image .tete-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: var(--e7); }
  .article .signature { box-shadow: none; padding-bottom: 0; }
  .tete-page h1 { font-size: calc(var(--t-h1) + 8px); }
}

/* Tête des pages locales : même grille que les rubriques (texte à gauche, photo entière à droite), la photo passe
   au-dessus du texte sous 62em pour que l'unité extérieure, souvent en bas de l'image, ne soit jamais recouverte. */

.tete-locale { background: var(--lime); padding-bottom: var(--e6); }
.tete-locale-carte .bouton { margin-top: var(--e4); }
.tete-locale-carte .signature { box-shadow: none; padding-bottom: 0; }
@media (max-width: 61.99em) {
  .tete-locale .tete-locale-photo { order: -1; }
}

/* Corps des articles : texte et colonne de repères */

.corps-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "reponse" "cote" "principal";
  gap: 0;
  padding-top: var(--e5);
  padding-bottom: var(--e8);
}
.reponse-courte { grid-area: reponse; }
.cote { grid-area: cote; display: grid; gap: var(--e4); align-content: start; margin-bottom: var(--e5); }
.principal { grid-area: principal; min-width: 0; }
.cote-appel { display: none; }

@media (min-width: 62em) {
  .corps-article {
    grid-template-columns: minmax(0, 760px) 340px;
    grid-template-areas: "reponse cote" "principal cote";
    justify-content: space-between;
    column-gap: var(--e7);
    padding-top: var(--e7);
  }
  .cote { position: sticky; top: calc(var(--entete-compacte) + var(--e4)); align-self: start; margin-bottom: 0; }
  .cote-appel {
    display: grid;
    gap: var(--e3);
    padding: 24px;
    border-radius: var(--rayon-grand);
    background: var(--lime);
    box-shadow: inset 0 0 0 1px var(--lime-filet);
  }
  .cote-appel-titre { font-family: var(--police-titres); font-size: 22px; font-weight: 700; color: var(--titre); }
  .cote-appel p:not(.cote-appel-titre) { font-size: 17px; color: var(--texte); }
}

/* Réponse courte (En bref) */

.reponse-courte {
  display: flex;
  gap: var(--e3);
  margin-bottom: var(--e5);
  padding: 20px;
  border-radius: var(--rayon-grand);
  background: var(--lime);
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--lime-filet);
}
.reponse-courte .rond-icone { width: 44px; height: 44px; }

.reponse-titre {
  margin: 8px 0 var(--e2);
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 22px;
  color: var(--titre);
}

.reponse-directe p { font-size: var(--t-chapo); line-height: 1.6; }
.reponse-directe p + p { margin-top: var(--e3); }
.reponse-directe strong { color: var(--vert-profond); }

@media (max-width: 47.99em) {
  .reponse-courte { flex-direction: column; }
  .reponse-courte > div { margin-top: -54px; padding-left: 56px; }
  .reponse-titre { margin-top: 10px; margin-bottom: var(--e4); }
  .reponse-courte > div .reponse-directe { margin-left: -56px; }
}
@media (min-width: 48em) {
  .reponse-courte { padding: 28px 32px; gap: 20px; }
}

/* Sommaire */

.sommaire {
  padding: 6px 20px 10px;
  border-radius: var(--rayon-grand);
  background: var(--carte-fond);
  box-shadow: inset 0 0 0 1px var(--bordure);
}
.sommaire-repli > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
}
.sommaire-repli > summary::-webkit-details-marker { display: none; }
.sommaire-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--police-titres);
  font-size: 20px;
  font-weight: 700;
  color: var(--titre);
}
.sommaire-chevron { transition: transform 0.2s; }
.sommaire-repli[open] .sommaire-chevron { transform: rotate(180deg); }
.sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: sommaire; }
.sommaire li {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  line-height: 1.4;
  counter-increment: sommaire;
  box-shadow: 0 -1px 0 var(--bordure);
}
.sommaire li::before {
  content: counter(sommaire);
  min-width: 14px;
  font-weight: 800;
  color: var(--texte-secondaire);
  font-variant-numeric: tabular-nums;
}
.sommaire a { color: var(--titre); font-size: 17px; }
.sommaire a:hover { color: var(--lien); }

@media (min-width: 62em) {
  .sommaire { padding: 8px 24px 12px; }
  .sommaire-repli > summary { pointer-events: none; }
  .sommaire-chevron { display: none; }
  .sommaire a { text-decoration: none; }
  .sommaire a:hover { text-decoration: underline; }
}

/* Prose */

.prose > * + * { margin-top: var(--e4); }
.prose p, .prose li { max-width: var(--mesure); }

.article .principal { counter-reset: titre; }
.article-guide .prose h2:not(.sources h2), .article-actualite .prose h2:not(.sources h2) { counter-increment: titre; }
.article-guide .prose h2:not(.sources h2)::before, .article-actualite .prose h2:not(.sources h2)::before { content: counter(titre) ". "; }

.prose h2 {
  font-size: calc(var(--t-h2) + 4px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-top: var(--e7);
  margin-bottom: var(--e4);
}
.prose h2 + * { margin-top: 0; }

.prose h3 {
  font-size: var(--t-h3);
  line-height: 1.25;
  margin-top: var(--e6);
  margin-bottom: var(--e2);
}

.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--e2); }
.prose li::marker { color: var(--lien); }
.prose strong { font-weight: 700; color: var(--titre); }

/* Encadré « Bon à savoir » : citation du texte */
.prose blockquote {
  margin: var(--e5) 0;
  padding: 20px 22px;
  border-radius: var(--rayon-moyen);
  background: #EEF8F2;
  color: var(--texte);
  box-shadow: inset 0 0 0 1px #CFE8D9;
}
.prose blockquote > * + * { margin-top: var(--e2); }

.prose hr { border: 0; height: 1px; background: var(--bordure); margin: var(--e7) 0; }

/* Tableaux : le conteneur défile seul si le tableau dépasse, jamais la page */

.tableau {
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--rayon-moyen);
  box-shadow: inset 0 0 0 1px var(--bordure);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
}

.prose th {
  padding: 16px 20px;
  background: var(--sombre-fond);
  color: var(--sombre-titre);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  vertical-align: bottom;
}

.prose td {
  padding: 16px 20px;
  vertical-align: top;
  box-shadow: inset 0 -1px 0 var(--bordure);
}
.prose tbody tr:nth-child(even) { background: var(--surface); }
.prose tbody tr:last-child td { box-shadow: none; }
.prose td strong { color: var(--titre); }

/* FAQ en accordéon natif, une carte par question */

.prose details.faq {
  margin-top: var(--e3);
  border-radius: var(--rayon-moyen);
  background: var(--carte-fond);
  box-shadow: inset 0 0 0 1px var(--bordure);
}
.prose h2 + details.faq { margin-top: 0; }

.faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  padding: 14px 20px 14px 24px;
  cursor: pointer;
  list-style: none;
}
.faq > summary::-webkit-details-marker { display: none; }

.faq > summary h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0;
}

.faq > summary::after {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C1A13' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.faq[open] > summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C1A13' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
.faq > summary:hover h3 { color: var(--lien); }

.faq-reponse { padding: 0 24px 22px; color: var(--texte); }
.faq-reponse > * + * { margin-top: var(--e3); }

/* Encadré des sources (« Chiffres de cette page ») */

.prose .sources {
  margin-top: var(--e7);
  padding: 22px 20px 12px;
  border-radius: var(--rayon-grand);
  background: var(--carte-fond);
  box-shadow: inset 0 0 0 1px var(--bordure);
}

.prose .sources h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--e2);
  font-size: 22px;
  letter-spacing: -0.01em;
}
.prose .sources h2::before {
  content: "";
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: #E3EEE7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C1A13' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4H11v16H5.5A1.5 1.5 0 0 1 4 18.5v-13Z'/%3E%3Cpath d='M20 5.5A1.5 1.5 0 0 0 18.5 4H13v16h5.5a1.5 1.5 0 0 0 1.5-1.5v-13Z'/%3E%3C/svg%3E") center / 22px no-repeat;
}

.prose .sources ul { margin: 0; padding: 0; list-style: none; font-size: 16px; color: var(--texte-secondaire); }
.prose .sources li { max-width: none; padding: 14px 0; box-shadow: 0 -1px 0 var(--bordure); }
.prose .sources li + li { margin-top: 0; }
.prose .sources .source-titre { color: var(--titre); font-weight: 700; font-size: 17px; }

/* Mention du service public : cadre neutre, jamais aux couleurs du site */

.mention {
  position: relative;
  display: block;
  margin-top: var(--e5);
  padding: 20px 20px 20px 76px;
  border-radius: var(--rayon-moyen);
  background: var(--neutre-fond);
  color: var(--neutre-texte);
  font-size: 17px;
  line-height: 1.55;
  box-shadow: inset 0 0 0 1px var(--neutre-filet);
}
.mention::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.2M12 7.8h.01'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: inset 0 0 0 1px var(--neutre-filet);
}
.mention a { color: var(--neutre-texte); font-weight: 700; }
.zone-mention { margin-top: var(--e5); }
.zone-mention .mention { margin-top: 0; }
.zone-mention .mention + .mention { margin-top: var(--e3); }
.zone-mention-hors { padding-block: var(--e6) 0; }
.zone-mention-hors + .large > .bande-reassurance { margin-top: 0; }

/* Section sombre d'appel dans les articles */

.section-sombre {
  background: var(--sombre-fond);
  color: var(--sombre-texte);
}
.section-sombre h2 { color: var(--sombre-titre); }
.section-sombre :focus-visible { outline-color: var(--sombre-titre); }
.section-sombre :is(.carte-formulaire, .appel-outil) :focus-visible { outline-color: var(--focus); }
.section-sombre :is(.carte-formulaire, .appel-outil) :is(input, select, textarea):focus-visible { outline-color: var(--lien); }

.appel {
  margin: var(--e6) 0;
  padding: 26px 22px;
  border-radius: var(--rayon-grand);
}
.appel h2 { font-size: 26px; line-height: 1.15; margin-bottom: var(--e2); }
.section-sombre-intro { color: var(--sombre-texte-secondaire); font-size: 17px; }
.appel .bouton { margin-top: var(--e4); }
.appel .carte-formulaire, .appel .appel-outil { margin-top: var(--e5); }
/* Outil intégré (formulaire complet) : la carte de l'outil prend presque toute la largeur sur mobile */
.appel-avec-outil { padding: 24px 10px 10px; scroll-margin-top: var(--e4); }
.appel-avec-outil .appel-texte { padding-inline: 10px; }
@media (min-width: 48em) {
  .appel { padding: 32px; }
  .appel:not(:has(.carte-formulaire, .appel-outil)) { display: flex; align-items: center; gap: var(--e5); }
  .appel:not(:has(.carte-formulaire, .appel-outil)) .appel-texte { display: contents; }
  .appel:not(:has(.carte-formulaire, .appel-outil)) h2 + p { flex: 1; }
  .appel-avec-outil .appel-texte { padding-inline: 0; }
}

.carte-formulaire {
  padding: 22px 20px;
  border-radius: var(--rayon-grand);
  background: var(--carte-fond);
  color: var(--texte);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
}

.question-progression { display: flex; justify-content: space-between; gap: var(--e3); font-size: 16px; color: var(--texte-secondaire); }
.question-etape { font-weight: 800; color: var(--titre); }
.progression { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 var(--e4); }
.progression span { height: 8px; border-radius: 999px; background: var(--bordure); }
.progression .fait { background: var(--sombre-fond); }
.question-titre {
  margin-bottom: var(--e4);
  font-family: var(--police-titres);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--titre);
}
.choix-grille { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choix-tuile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 16px;
  border-radius: 16px;
  color: var(--titre);
  font-weight: 800;
  text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--bordure-forte);
}
.choix-tuile .ico { color: var(--lien); }
.choix-tuile:hover { background: #EEF9F2; box-shadow: inset 0 0 0 2px var(--lien); color: var(--titre); }

.liste-cochee { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.liste-cochee li { display: flex; align-items: flex-start; gap: var(--e3); line-height: 1.45; }
.liste-cochee .ico { margin-top: 2px; color: var(--sombre-accent); }

.reassurance {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--e2);
  margin-top: var(--e4);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--sombre-reassurance);
}
.reassurance .ico { margin-top: 3px; color: var(--sombre-accent); }

/* Cartes de pages */

.cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--rayon-moyen);
  background: var(--carte-fond);
  color: var(--texte);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--bordure), 0 2px 6px rgba(12, 26, 19, 0.05), 0 16px 36px -18px rgba(12, 26, 19, 0.25);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s;
}
.carte:hover { transform: translateY(-2px); color: var(--texte); }
.carte-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.carte-corps { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 22px 22px; }
.carte-titre-lien { font-size: 21px; line-height: 1.25; }
.carte-resume { font-size: 16.5px; color: var(--texte-secondaire); }
.carte-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 15.5px; color: var(--texte-secondaire); }
a.carte:hover .carte-titre-lien { color: var(--lien); }

@media (min-width: 48em) {
  .cartes-3 { grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
}

.a-lire { padding-block: var(--e7); background: var(--surface); }
.a-lire h2 { margin-bottom: var(--e5); }

/* Grille des pages d'une rubrique ou d'une catégorie : cartes de même hauteur, 1, 2 puis 3 colonnes */

.liste-guides { padding-block: var(--e5) var(--e6); }
.carte-liste .carte-resume {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.liste-guides .carte:focus-visible { outline: 3px solid var(--lien); outline-offset: 3px; }
@media (min-width: 48em) and (max-width: 61.99em) {
  .liste-guides .cartes-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62em) {
  .liste-guides { padding-block: var(--e7); }
}

/* Accueil : héros */

.accueil-hero { background: var(--lime); padding: var(--e5) 0 var(--e7); }
.accueil-hero-grille { display: grid; gap: var(--e5); }
.accueil-hero-texte { display: flex; flex-direction: column; gap: var(--e4); }
.accueil-hero h1 { font-size: calc(var(--t-h1) + 2px); line-height: 1.08; letter-spacing: -0.02em; }
.badge-zone {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 36px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--fond);
  color: var(--titre);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: inset 0 0 0 1px var(--lime-filet);
}
.hero-actions { display: grid; gap: var(--e3); margin-top: var(--e2); }
.accueil-hero-visuel { position: relative; padding-bottom: 40px; }
.accueil-hero-visuel img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon-grand); }
.carte-flottante {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--rayon-moyen);
  background: var(--carte-fond);
  font-size: 16.5px;
  line-height: 1.45;
  box-shadow: 0 2px 6px rgba(12, 26, 19, 0.06), 0 28px 56px -24px rgba(12, 26, 19, 0.35);
}
.carte-flottante b { color: var(--titre); }

@media (min-width: 48em) {
  .hero-actions { display: flex; flex-wrap: wrap; }
}
@media (min-width: 62em) {
  .accueil-hero { padding: var(--e8) 0 calc(var(--e8) + 40px); }
  .accueil-hero-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--e7); }
  .accueil-hero h1 { font-size: calc(var(--t-h1) + 12px); }
  .accueil-hero-visuel { padding-bottom: 0; }
  .accueil-hero-visuel img { aspect-ratio: 1 / 0.95; }
  .carte-flottante { left: -40px; right: auto; bottom: 40px; max-width: 340px; }
}

/* Accueil : bande de réassurance */

.bande-reassurance {
  list-style: none;
  margin: 0;
  padding: var(--e5) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e5) var(--e4);
}
.bande-reassurance li { display: flex; flex-direction: column; gap: 10px; }
.bande-reassurance b { display: block; color: var(--titre); line-height: 1.3; }
.bande-reassurance li > span:last-child > span { display: none; font-size: 16px; color: var(--texte-secondaire); }

@media (min-width: 62em) {
  .bande-reassurance {
    position: relative;
    margin-top: -64px;
    padding: 28px 32px;
    grid-template-columns: repeat(4, 1fr);
    border-radius: var(--rayon-moyen);
    background: var(--carte-fond);
    box-shadow: 0 2px 6px rgba(12, 26, 19, 0.05), 0 16px 36px -18px rgba(12, 26, 19, 0.25);
  }
  .bande-reassurance li { flex-direction: row; align-items: flex-start; gap: 14px; }
  .bande-reassurance li > span:last-child > span { display: block; margin-top: 4px; }
}

/* Accueil : chiffres */

.section-chiffres { padding-top: var(--e6); }
.chiffres {
  padding: var(--e6) 22px;
  border-radius: var(--rayon-grand);
  background: var(--sombre-fond);
  color: var(--sombre-texte);
}
.chiffres h2 { color: var(--sombre-titre); font-size: 28px; margin-bottom: var(--e4); }
.chiffres ul { list-style: none; margin: 0; padding: 0; display: grid; }
.chiffres li { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; box-shadow: 0 -1px 0 rgba(200, 216, 206, 0.18); }
.chiffres strong {
  font-family: var(--police-titres);
  font-size: calc(var(--t-chiffre) + 8px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sombre-titre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chiffres li span { max-width: 34ch; color: var(--sombre-texte); }
.chiffres-sources { margin-top: var(--e3); font-size: 15.5px; color: var(--sombre-texte-secondaire); }
.chiffres-sources a { color: var(--sombre-titre); }
.chiffres :focus-visible { outline-color: var(--sombre-titre); }

@media (min-width: 62em) {
  .section-chiffres { padding-top: var(--e8); }
  .chiffres { padding: 56px; }
  .chiffres ul { grid-template-columns: repeat(3, 1fr); gap: var(--e6); }
  .chiffres li { padding: 0; box-shadow: none; }
  .chiffres strong { font-size: 64px; }
  .chiffres strong::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin-top: 14px;
    border-radius: 2px;
    background: var(--accent);
  }
}

/* Accueil : étapes */

.etapes-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.etapes-cartes li {
  padding: 24px;
  border-radius: var(--rayon-moyen);
  background: var(--carte-fond);
  box-shadow: inset 0 0 0 1px var(--bordure);
}
.etape-haut { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e4); }
.etape-numero {
  font-family: var(--police-titres);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--lime-filet);
}
.etapes-cartes h3 { font-size: 23px; margin-bottom: var(--e2); }
.etapes-cartes p { color: var(--texte-secondaire); font-size: 17px; }
@media (min-width: 62em) {
  .etapes-cartes { grid-template-columns: repeat(3, 1fr); }
  .etapes-cartes li { padding: 32px; }
}

/* Accueil : simulateur sur photo assombrie */

.section-photo {
  padding: var(--e7) 0;
  background: linear-gradient(rgba(6, 16, 10, 0.88), rgba(6, 16, 10, 0.93)), var(--photo, none) center / cover, var(--sombre-fond);
}
.section-photo-grille { display: grid; gap: var(--e6); }
.section-photo-texte { display: flex; flex-direction: column; gap: var(--e4); }
.section-photo .surtitre { color: var(--sombre-accent); margin-bottom: 0; }
.section-photo h2 { font-size: calc(var(--t-h2) + 6px); line-height: 1.12; letter-spacing: -0.02em; }
.section-photo-texte .bouton { align-self: flex-start; }
.section-photo .bouton-principal { box-shadow: 0 0 0 2px #FFFFFF, 0 14px 28px -12px rgba(0, 0, 0, 0.6); }
.section-photo .carte-formulaire .bouton-principal { box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--cta) 65%, transparent); }
@media (min-width: 62em) {
  .section-photo { padding: var(--e8) 0; }
  .section-photo-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center; gap: var(--e8); }
  .carte-formulaire { padding: 32px; }
  .section-photo .reassurance { justify-content: flex-start; }
}

/* Accueil : départements couverts */

.zones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.zone-visuel {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 132px;
  padding: 16px 20px;
  background:
    radial-gradient(circle at 85% 20%, rgba(0, 192, 96, 0.28), transparent 55%),
    repeating-linear-gradient(135deg, rgba(10, 122, 67, 0.07) 0 2px, transparent 2px 14px),
    var(--lime);
  color: var(--lien);
}
.zone-visuel > span {
  font-family: var(--police-titres);
  font-size: 64px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--vert-profond);
}
.zone-visuel .ico { width: 30px; height: 30px; }
.carte-zone .carte-titre-lien { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (min-width: 48em) { .zones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .zones { grid-template-columns: repeat(4, 1fr); } }

/* Accueil : texte de présentation, FAQ et bandeau final */

.section-texte { padding-block: var(--e6) var(--e7); }
.section-texte .prose > h2:first-child, .section-texte .prose > .mention:first-child { margin-top: 0; }

.faq-grille { display: grid; gap: var(--e5); }
.faq-tete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e3); }
.faq-liste details.faq:first-child { margin-top: 0; }
@media (min-width: 62em) {
  .faq-grille { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--e8); align-items: start; }
}
.prose-sources { padding-bottom: var(--e6); }

.section-appel-final { padding-block: var(--e7); }
.bandeau-appel {
  display: grid;
  overflow: hidden;
  border-radius: var(--rayon-grand);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 340' preserveAspectRatio='none' fill='none' stroke='white' stroke-opacity='.35' stroke-width='1.2'%3E%3Cpath d='M-20 40C180 10 300 90 520 40S860 0 1320 50'/%3E%3Cpath d='M-20 108C180 78 300 158 520 108S860 68 1320 118'/%3E%3Cpath d='M-20 176C180 146 300 226 520 176S860 136 1320 186'/%3E%3Cpath d='M-20 244C180 214 300 294 520 244S860 204 1320 254'/%3E%3Cpath d='M-20 312C180 282 300 362 520 312S860 272 1320 322'/%3E%3C/svg%3E") center / 100% 100% no-repeat, var(--accent);
  color: var(--accent-texte);
}
.bandeau-texte { padding: 32px 22px; }
.bandeau-appel h2 { color: var(--accent-texte); font-size: 30px; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: var(--e3); }
.bandeau-appel p { max-width: 52ch; }
.bandeau-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); margin-top: var(--e5); }
.bandeau-appel .bouton-principal {
  box-shadow: 0 0 0 2px var(--sombre-fond), 0 14px 28px -12px rgba(12, 26, 19, 0.55);
}
.bandeau-reassurance { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; }
.bandeau-appel :focus-visible { outline-color: var(--sombre-fond); }
.bandeau-image { display: none; min-height: 100%; }
.bandeau-image picture { display: block; height: 100%; }
.bandeau-image img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 62em) {
  .section-appel-final { padding-block: var(--e8); }
  .bandeau-appel { grid-template-columns: 1.3fr 1fr; }
  .bandeau-texte { padding: 64px; }
  .bandeau-appel h2 { font-size: 40px; }
  .bandeau-image { display: block; position: relative; }
  .bandeau-image picture { position: absolute; inset: 0; }
}


/* Composants visuels des contenus ([[visuel:nom]], voir theme-base/COMPOSANTS.md) */

.visuel { margin: var(--e6) 0; }
.prose .visuel > * + * { margin-top: var(--e3); }
.visuel-titre { font-family: var(--police-titres); font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--titre); }
.visuel-desc, .visuel-note, .visuel-source { font-size: 16px; color: var(--texte-secondaire); }

/* Tableau comparatif : colonne mise en valeur ; en cartes sous 48em */
.comparatif { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 17px; line-height: 1.45; }
.comparatif th, .comparatif td { padding: 14px 16px; text-align: left; vertical-align: top; }
.comparatif thead th { background: var(--sombre-fond); color: var(--sombre-titre); font-size: 16px; }
.comparatif thead th:first-child { border-radius: var(--rayon-moyen) 0 0 0; }
.comparatif thead th:last-child { border-radius: 0 var(--rayon-moyen) 0 0; }
.prose .comparatif tbody th { background: var(--fond); font-size: 17px; font-weight: 700; color: var(--titre); vertical-align: top; }
.comparatif tbody tr > * { box-shadow: inset 0 -1px 0 var(--bordure); }
.comparatif tbody tr:nth-child(even) > * { background: var(--surface); }
.comparatif thead th.fort { background: var(--accent); color: var(--accent-texte); }
.comparatif td.fort { background: var(--lime) !important; font-weight: 700; color: var(--titre); }
@media (max-width: 47.99em) {
  .comparatif thead { display: none; }
  .comparatif, .comparatif tbody, .comparatif tr, .comparatif th, .comparatif td { display: block; width: 100%; }
  .comparatif tr { margin-bottom: var(--e3); overflow: hidden; border-radius: var(--rayon-moyen); box-shadow: inset 0 0 0 1px var(--bordure); }
  .comparatif tbody tr > * { box-shadow: none; background: none !important; }
  .prose .comparatif tbody th { background: var(--sombre-fond) !important; color: var(--sombre-titre); }
  .comparatif td { display: flex; justify-content: space-between; gap: var(--e3); box-shadow: inset 0 -1px 0 var(--bordure) !important; }
  .comparatif td::before { content: attr(data-colonne); font-weight: 700; color: var(--texte-secondaire); }
  .comparatif td.fort { background: var(--lime) !important; }
}

/* Comparaison côte à côte */
.comparaison-grille { display: grid; gap: var(--e3); }
.comparaison-cote { padding: 22px; border-radius: var(--rayon-grand); background: var(--carte-fond); box-shadow: inset 0 0 0 1px var(--bordure); }
.comparaison-cote.fort { box-shadow: inset 0 0 0 2px var(--sombre-fond); }
.comparaison-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: var(--e3); }
.comparaison-nom { font-family: var(--police-titres); font-weight: 700; font-size: 22px; color: var(--titre); }
.comparaison-cote ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.comparaison-cote li { display: flex; gap: 10px; margin: 0; font-size: 17px; }
.comparaison-cote li .ico { margin-top: 3px; color: var(--lien); }
.comparaison-verdict { margin-top: var(--e3); padding-top: var(--e3); font-weight: 700; color: var(--titre); box-shadow: 0 -1px 0 var(--bordure); }
@media (min-width: 48em) { .comparaison-grille { grid-template-columns: 1fr 1fr; } }

/* Barres */
.prose .barres, .prose .chiffres-cles, .prose .frise, .prose .a-retenir ul, .prose .comparaison-cote ul { list-style: none; padding: 0; }
.barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.prose .barres li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; margin: 0; max-width: none; }
.barre-libelle { font-size: 16.5px; color: var(--texte); }
.barre-texte { grid-row: 1; grid-column: 2; font-weight: 800; color: var(--titre); font-variant-numeric: tabular-nums; }
.barre { grid-column: 1 / -1; width: 100%; height: 14px; border-radius: 999px; overflow: hidden; }
.barre-fond { fill: var(--surface); }
.barre-valeur { fill: var(--lien); }
.barres .fort .barre-valeur { fill: var(--cta); }

/* Courbe */
.courbe { width: 100%; height: auto; max-width: 720px; overflow: visible; }
.courbe-axe { stroke: var(--bordure-forte); stroke-width: 2; }
.courbe-trait { fill: none; stroke: var(--lien); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.courbe-point { fill: var(--fond); stroke: var(--lien); stroke-width: 4; }
.courbe-valeur { font: 700 22px var(--police-corps); fill: var(--titre); }
.courbe-libelle { font: 400 20px var(--police-corps); fill: var(--texte-secondaire); }
.visuel-donnees summary { cursor: pointer; font-weight: 700; color: var(--lien); min-height: var(--cible); display: flex; align-items: center; }
.visuel-donnees table { width: 100%; border-collapse: collapse; font-size: 16px; }
.visuel-donnees th, .visuel-donnees td { padding: 8px 12px; text-align: left; box-shadow: inset 0 -1px 0 var(--bordure); }

/* Chiffres clés */
.chiffres-cles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.prose .chiffres-cles li { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 20px; border-radius: var(--rayon-moyen); background: var(--surface); max-width: none; }
.chiffres-cles strong { font-family: var(--police-titres); font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--titre); font-variant-numeric: tabular-nums; }
.chiffres-cles span { font-size: 16.5px; color: var(--texte-secondaire); }
@media (min-width: 48em) { .chiffres-cles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

/* Frise d'étapes */
.frise { list-style: none; margin: 0; padding: 0; }
.prose .frise li { position: relative; display: flex; gap: 18px; margin: 0; padding-bottom: var(--e5); max-width: none; }
.prose .frise li:last-child { padding-bottom: 0; }
.frise li:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 4px; width: 2px; background: var(--lime-filet); }
.frise-rond { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--sombre-fond); color: var(--sombre-accent); font-family: var(--police-titres); font-weight: 700; font-size: 20px; }
.frise-titre { margin-top: 10px; font-family: var(--police-titres); font-weight: 700; font-size: 20px; color: var(--titre); }
.frise-quand { display: inline-block; margin-left: 6px; padding: 0 10px; border-radius: 999px; background: var(--lime); color: var(--vert-profond); font-family: var(--police-corps); font-size: 14.5px; font-weight: 800; vertical-align: middle; }
.frise li p + p { margin-top: 4px; color: var(--texte-secondaire); }

/* À retenir */
.a-retenir { margin: var(--e6) 0; padding: 22px; border-radius: var(--rayon-grand); background: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-filet); }
.a-retenir-titre { display: flex; align-items: center; gap: 12px; margin-bottom: var(--e3); font-family: var(--police-titres); font-weight: 700; font-size: 22px; color: var(--titre); }
.a-retenir-titre .rond-icone { width: 40px; height: 40px; }
.a-retenir ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.prose .a-retenir li { display: flex; gap: 10px; margin: 0; }
.a-retenir li .ico { margin-top: 4px; color: var(--vert-profond); }

/* Schéma SVG */
.schema { padding: 16px; border-radius: var(--rayon-grand); background: var(--surface); }
.schema svg { display: block; width: 100%; height: auto; max-height: 640px; }

/* Pages simples (légales, confiance, outil) */

.corps-simple { padding-top: var(--e6); padding-bottom: var(--e8); }
.corps-simple .prose > :first-child { margin-top: 0; }
/* Outil pleine largeur en tête du corps : collé au héros. Son premier élément visible (après ses feuilles de style)
   perd sa marge haute. */
.corps-colle { padding-top: 0; }
.corps-colle > .prose:first-child > :not(link, style, script):not(:not(link, style, script) ~ *) { margin-top: 0; }

/* Comment ça marche : les parties en étapes reliées par un fil */
.page-comment-ca-marche .prose { counter-reset: etape; }
.page-comment-ca-marche .prose > h2:not(.sources h2) {
  position: relative;
  counter-increment: etape;
  padding-left: 68px;
  margin-top: var(--e6);
}
.page-comment-ca-marche .prose > h2:not(.sources h2)::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -6px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sombre-fond);
  color: var(--sombre-accent);
  font-size: 22px;
}
.page-comment-ca-marche .prose > h2:not(.sources h2) ~ p,
.page-comment-ca-marche .prose > h2:not(.sources h2) ~ ul { padding-left: 68px; }
.page-comment-ca-marche .prose > h2 ~ p { background: linear-gradient(var(--bordure-forte), var(--bordure-forte)) 23px 0 / 2px 100% no-repeat; }
.page-comment-ca-marche .prose > h2 + p { margin-top: 0; }

/* 404 */

.tete-404 { padding-top: var(--e6); }
.code-404 {
  display: flex;
  align-items: center;
  gap: var(--e4);
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--titre);
}
.page-404 h1 { font-size: var(--t-h1); margin: var(--e4) 0 var(--e3); }
.actions-404 { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }
.liens-404 { padding-block: var(--e6) var(--e8); }
.liens-404 h2 { font-size: 24px; margin-bottom: var(--e4); }
.liens-404 ul { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.liens-404 a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 0 18px;
  border-radius: 16px;
  background: var(--carte-fond);
  color: var(--titre);
  font-weight: 800;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--bordure);
}
.liens-404 a > span:nth-child(2) { flex: 1; }
.liens-404-icone { color: var(--lien); display: grid; }
.liens-404 a:hover { box-shadow: inset 0 0 0 2px var(--lien); }

/* Pied */

.pied {
  padding: var(--e7) 0 var(--e5);
  background: var(--pied-fond);
  color: var(--pied-texte);
}
.pied-grille { display: grid; gap: var(--e5); }
.pied .logo { color: var(--sombre-titre); }
.pied .logo-texte b { color: var(--sombre-titre); }
.pied .logo-texte { font-size: 22px; }
.pied .logo-texte b { display: inline; }
.pied-presentation { margin-top: var(--e3); font-size: 17px; line-height: 1.55; max-width: 36ch; color: var(--sombre-texte); }
.pied-points { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; gap: 10px; font-size: 16px; }
.pied-points li { display: flex; align-items: center; gap: 10px; color: var(--sombre-texte); }
.pied-points .ico { color: var(--sombre-accent); }
.pied-colonne { padding-top: var(--e4); box-shadow: 0 -1px 0 rgba(200, 216, 206, 0.18); }
.pied-titre { font-family: var(--police-titres); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--sombre-titre); margin-bottom: var(--e2); }
.pied-liens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e4); }
.pied-liens a {
  display: flex;
  align-items: center;
  min-height: var(--cible);
  padding-block: 4px;
  color: var(--pied-lien);
  font-size: 16.5px;
  line-height: 1.35;
  text-decoration: none;
}
.pied-liens a:hover, .pied-legal a:hover { text-decoration: underline; color: var(--sombre-titre); }
.pied-bas {
  display: grid;
  gap: var(--e2);
  padding-top: var(--e4);
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 -1px 0 rgba(200, 216, 206, 0.18);
}
.pied-legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--e4); }
.pied-legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  color: var(--pied-lien);
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: rgba(226, 236, 230, 0.4);
  text-underline-offset: 3px;
}
.pied :focus-visible { outline-color: var(--sombre-titre); }

/* Tablette : marque sur toute la largeur, colonnes de liens deux par deux */
@media (min-width: 48em) and (max-width: 61.99em) {
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e6); row-gap: var(--e5); }
  .pied-marque, .pied-bas { grid-column: 1 / -1; }
  .pied-liens { grid-template-columns: 1fr; }
}

@media (min-width: 62em) {
  .pied { padding: var(--e8) 0 var(--e6); }
  .pied-grille { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); column-gap: var(--e6); row-gap: var(--e7); align-items: start; }
  .pied-grille:has(> .pied-colonne:nth-of-type(5)) { grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)); column-gap: var(--e5); }
  .pied-colonne { padding-top: 0; box-shadow: none; }
  .pied-liens { grid-template-columns: 1fr; }
  .pied-liens a { min-height: 36px; }
  .pied-bas { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--e6); }
  .pied-copyright { grid-column: 1 / -1; }
  .pied-legal a { min-height: 32px; }
}

/* Bureau : tailles générales */

@media (min-width: 48em) {
  .mention-societe { font-size: 14.5px; }
  .appel h2 { font-size: 28px; }
  .bande-reassurance b { font-size: 18px; }
}

@media (min-width: 62em) {
  .section, .section-fond, .a-lire { padding-block: var(--e8); }
  .mention { padding: 24px 28px 24px 84px; }
  .mention::before { left: 24px; top: 20px; }
  .prose .sources { padding: 28px 28px 14px; }
}

/* Confort */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .bouton-principal:hover, .carte:hover { transform: none; }
}

@media print {
  .mention-societe, .menu-mobile, .nav-principale, .nav-panneau, .bouton-entete, .section-sombre, .evitement, .cote, .a-lire, .bandeau-appel, .retour-haut { display: none; }
  .entete { position: static; }
  body { font-size: 12pt; }
  .pied { background: none; color: #000000; }
  a { color: #000000; }
  details.faq > .faq-reponse { display: block; }
}

/* Parcours (outil avec « parcours: true ») : héros vert pâle, titre à gauche, formulaire à droite.
   En mobile, le formulaire vient juste sous le titre, le chapeau et les puces après. */

.parcours-hero { padding: var(--e3) 0 var(--e6); }
.parcours-grille { display: grid; gap: var(--e4); grid-template-areas: "tete" "outil" "texte"; }
.parcours-tete { grid-area: tete; display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.parcours-hero .badge-zone { display: none; }
.parcours-hero h1 { font-size: 30px; line-height: 1.12; }
.parcours-texte { grid-area: texte; display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.parcours-outil { grid-area: outil; min-width: 0; }
.prose.parcours-points > * { margin: 0; }
.parcours-points ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.parcours-points li { position: relative; margin: 0; padding-left: 36px; font-weight: 700; color: var(--titre); line-height: 1.4; }
.parcours-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fond) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7A43' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: inset 0 0 0 1px var(--lime-filet);
}
.corps-parcours { padding-block: var(--e6) var(--e7); }

@media (min-width: 62em) {
  .parcours-hero { padding: var(--e4) 0 calc(var(--e8) + 40px); }
  .parcours-grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "tete outil" "texte outil" ". outil";
    align-items: start;
    column-gap: var(--e7);
    row-gap: var(--e5);
  }
  .parcours-hero .badge-zone { display: inline-flex; }
  .parcours-hero h1 { font-size: 46px; line-height: 1.08; letter-spacing: -0.02em; }
}

/* Catégories d'actualités : pastilles liées sur le hub /actualites/ et les pages de catégorie */
.categories { padding-top: var(--e4); }
.categories-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.categories-liste a { min-height: var(--cible); display: inline-flex; align-items: center; text-decoration: none; }
.categories-liste a[aria-current="page"] { text-decoration: underline; }
.pastille a { color: inherit; }

/* Recherche interne (Pagefind) : loupe de l'en-tête qui ouvre un champ, page /recherche/ */

.recherche-entete { flex: none; }
.recherche-entete > summary {
  display: grid;
  place-items: center;
  width: var(--cible);
  height: var(--cible);
  border-radius: 50%;
  color: var(--titre);
  box-shadow: inset 0 0 0 1px var(--bordure);
  cursor: pointer;
  list-style: none;
}
.recherche-entete > summary::-webkit-details-marker { display: none; }
.recherche-entete > summary:hover { background: var(--surface); color: var(--lien); }
.recherche-entete .recherche-fermer, .recherche-entete[open] .recherche-ouvrir { display: none; }
.recherche-entete[open] .recherche-fermer { display: grid; }
.recherche-entete[open] > summary { background: var(--surface); }
.recherche-panneau {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--e3) 0 var(--e4);
  background: var(--fond);
  box-shadow: 0 1px 0 var(--bordure), 0 28px 56px -24px rgba(12, 26, 19, 0.35);
}
.recherche-formulaire { display: flex; gap: var(--e2); align-items: stretch; }
.recherche-champ {
  flex: 1;
  min-width: 0;
  min-height: var(--cible);
  padding: 0 16px;
  border: 0;
  border-radius: var(--rayon-moyen);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 18px;
  box-shadow: inset 0 0 0 1.5px var(--bordure-forte);
}
.recherche-champ::placeholder { color: var(--texte-secondaire); opacity: 1; }
.recherche-bouton { min-height: var(--cible); padding: 0 18px; font-size: 17px; flex: none; }
@media (max-width: 47.99em) {
  .recherche-bouton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .recherche-bouton { width: var(--cible); padding: 0; }
}
@media (max-width: 61.99em) {
  .recherche-entete { order: 1; }
  .menu-mobile { order: 2; }
  .entete .recherche-entete > summary { width: 44px; height: 44px; box-shadow: none; }
}

.tete-recherche { padding-bottom: var(--e5); }
.tete-recherche h1 { margin-bottom: var(--e4); }
.corps-recherche { padding-block: var(--e5) var(--e8); }
.recherche-filtres { margin: 0 0 var(--e4); padding: 0; border: 0; }
.recherche-filtres legend { padding: 0; margin-bottom: var(--e2); font-weight: 700; color: var(--titre); font-size: 17px; }
.recherche-filtres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.filtre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--cible);
  padding: 0 16px;
  border-radius: 999px;
  background: var(--fond);
  color: var(--titre);
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--bordure-forte);
}
.filtre input { width: 18px; height: 18px; margin: 0; accent-color: var(--lien); }
.filtre:has(input:checked) { background: var(--lime); box-shadow: inset 0 0 0 1.5px var(--lien); }
.filtre:has(input:focus-visible) { outline: 3px solid var(--lien); outline-offset: 3px; }
.filtre input:focus-visible { outline: none; }
.filtre-nombre { color: var(--texte-secondaire); font-weight: 400; }
.filtre-vide { opacity: 0.75; }
.recherche-etat { margin-bottom: var(--e4); color: var(--texte-secondaire); font-size: 17px; }
.recherche-resultats { list-style: none; margin: 0; padding: 0; }
.resultat { padding: var(--e4) 0; box-shadow: 0 1px 0 var(--bordure); }
.resultat-lien { display: flex; flex-direction: column; gap: 4px; color: var(--titre); text-decoration: none; }
.resultat-type { color: var(--lien); font-weight: 800; font-size: 15px; }
.resultat-titre { font-size: 21px; line-height: 1.25; }
.resultat-lien:hover .resultat-titre { color: var(--lien); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.resultat-extrait { margin-top: 8px; color: var(--texte-secondaire); font-size: 17px; }
.resultat-extrait mark { background: var(--lime); color: var(--titre); font-weight: 600; padding: 0 2px; border-radius: 3px; }
.recherche-plus-zone { margin-top: var(--e5); }

/* Sous le héros : fragment de outils/ déclaré par « sous_heros » (carte des régions, par exemple) */

.sous-heros { padding-top: var(--e6); }
.titre-accent { color: var(--lien); }

/* Carte des régions (outils/carte-regions.html) : régions cliquables, vert de la charte au survol et au focus,
   liste des régions qui double la carte (seule lisible en petit écran). */

.carte-regions { display: grid; gap: var(--e5); align-items: start; }
.carte-regions h2 { margin-bottom: var(--e2); }
.carte-regions-legende { display: flex; gap: 10px; align-items: flex-start; color: var(--texte-secondaire); font-size: 17px; margin-bottom: var(--e4); }
.carte-regions-pastille { flex: none; width: 18px; height: 18px; margin-top: 4px; border-radius: 4px; background: var(--lien); }
.carte-regions-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.carte-regions-liste a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e3);
  min-height: var(--cible);
  color: var(--titre);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 0 var(--bordure);
}
.carte-regions-liste a:hover, .carte-regions-liste a.carte-regions-actif { color: var(--lien); }
.carte-regions-liste a:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.carte-regions-liste a:focus-visible { outline-color: var(--lien); }
.carte-regions-nombre { color: var(--texte-secondaire); font-weight: 400; font-size: 15.5px; white-space: nowrap; }
.carte-regions-svg { width: 100%; height: auto; order: -1; }
.carte-regions-zones path {
  fill: var(--lime);
  stroke: var(--fond);
  stroke-width: 2.5;
  stroke-linejoin: round;
  transition: fill 0.15s ease;
}
.carte-regions-zones a { outline: none; }
.carte-regions-zones a:hover path, .carte-regions-zones a:focus path { fill: var(--lien); }
.carte-regions-zones a:focus path { stroke: var(--titre); stroke-width: 4; }
.carte-regions-zones text { fill: var(--titre); font-family: var(--police-corps); font-size: 19px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.carte-regions-zones a:hover text, .carte-regions-zones a:focus text { fill: #FFFFFF; }
@media (max-width: 47.99em) {
  .carte-regions-zones text { display: none; }
}
@media (min-width: 48em) {
  .carte-regions-liste { grid-template-columns: 1fr 1fr; column-gap: var(--e5); }
}
@media (min-width: 62em) {
  .carte-regions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--e7); }
  .carte-regions-svg { order: 0; }
  .carte-regions-liste { grid-template-columns: 1fr; }
  .carte-regions-liste a { min-height: 40px; }
}

/* Guides par thème : sommaire /guides/ (recherche, une section par thème), pages de thème et pagination des listes */
.sommaire-guides { padding-top: var(--e5); }
.recherche-guides { display: block; margin-bottom: var(--e6); }
.recherche-guides .recherche-formulaire { display: block; }
.recherche-guides-libelle { display: block; margin-bottom: var(--e2); font-weight: 700; color: var(--titre); font-size: 18px; }
.recherche-guides-ligne { display: flex; gap: var(--e2); max-width: 640px; }
.recherche-guides .recherche-champ { flex: 1; min-width: 0; }
.theme-guides { padding-block: var(--e5); box-shadow: 0 -1px 0 var(--bordure); }
.theme-guides:first-of-type { box-shadow: none; }
.theme-guides h2 { margin-bottom: var(--e4); }
.theme-guides-tous { margin-top: var(--e4); }
.theme-guides-tous a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--cible); font-weight: 700; }
.grille-guides { padding-block: var(--e5) var(--e6); }
.sommaire-guides .carte:focus-visible, .grille-guides .carte:focus-visible, .theme-guides-tous a:focus-visible,
.pagination a:focus-visible { outline: 3px solid var(--lien); outline-offset: 3px; }
@media (min-width: 48em) and (max-width: 61.99em) {
  .sommaire-guides .cartes-3, .grille-guides .cartes-3 { grid-template-columns: repeat(2, 1fr); }
}
.pagination { padding-bottom: var(--e7); }
.pagination-etat { margin-bottom: var(--e3); color: var(--texte-secondaire); font-size: 16.5px; }
.pagination-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.pagination-liste a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--cible);
  min-height: var(--cible);
  padding: 0 14px;
  border-radius: var(--rayon-moyen);
  color: var(--lien);
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--bordure-forte);
}
.pagination-liste a:hover { background: var(--lime); }
.pagination-liste a[aria-current="page"] { background: var(--vert-profond); color: #FFFFFF; box-shadow: none; }
.pagination-trou { padding: 0 4px; color: var(--texte-secondaire); }
.ico-retour { transform: scaleX(-1); }
@media (max-width: 47.99em) {
  .pagination-sens span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pagination-sens a { padding: 0; }
}