/* ==========================================================================
   LES LYANOO — Système de design
   Ancrage : le basalte des puys, les pâtures d'Auvergne, la gentiane jaune.
   Accent unique = gentiane. Tout le reste reste calme.
   NE PAS MODIFIER ce fichier depuis une page : créer assets/css/pages.css.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Couleur */
  --puy:        #17403A;  /* vert volcanique profond — surfaces sombres, titres */
  --puy-clair:  #245A50;
  --basalte:    #1D2422;  /* texte principal, chaud et non pur noir */
  --ardoise:    #566662;  /* texte secondaire */
  --craie:      #F7F8F5;  /* fond de page, blanc minéral légèrement vert */
  --craie-2:    #EDF0EA;  /* fond alterné */
  --brume:      #DCE4DF;  /* filets, bordures */
  --gentiane:   #E4A32B;  /* ACCENT UNIQUE — aplats, CTA, grands chiffres */
  /* Gentiane foncée = la MÊME famille, mais assez sombre pour du texte :
     l'ancienne valeur (#C4870F) plafonnait à 2,89:1 sur le fond de page, donc
     sous le seuil AA — or c'est elle qui portait le prix après crédit d'impôt,
     l'information la plus importante du site. Celle-ci donne 5,35:1. */
  --gentiane-f: #8A5E00;
  /* Bordure des contrôles de saisie : 3:1 minimum (WCAG 1.4.11), sinon le champ
     ne se distingue pas du fond. --brume reste réservée aux filets décoratifs.
     Assombri à 4,1:1 (l'ancien #7E9488 ne laissait que 3,04:1, une marge trop
     fine pour rester conforme si le fond --craie venait à changer légèrement). */
  --bordure-champ: #6B7D73;
  --blanc:      #FFFFFF;
  --alerte:     #A63A22;  /* erreurs de formulaire uniquement */
  --succes:     #1F6B4A;

  /* Typographie */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --texte:   "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle de type.
     Le corps reste à 17 px : c'est le confort de lecture du public visé, et il
     n'est pas négociable. Ce sont les TITRES qui ont été ramenés à des tailles
     raisonnables — un h1 à 69 px repoussait le contenu utile hors de l'écran
     sans rien apporter à la compréhension. */
  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-b:   1.0625rem;   /* corps = 17px */
  --t-lg:  1.125rem;
  --t-xl:  clamp(1.2rem, 1.08rem + 0.45vw, 1.4rem);
  --t-2xl: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  --t-3xl: clamp(1.65rem, 1.38rem + 1.15vw, 2.25rem);
  --t-4xl: clamp(1.95rem, 1.55rem + 1.75vw, 2.85rem);

  /* Rythme */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3.25rem;
  --sp-9: 4rem;     --sp-10: 5rem;

  /* Respiration verticale des sections : proportionnelle, jamais fixe à 96 px. */
  --sp-section: clamp(2.5rem, 4.5vw, 3.75rem);
  --sp-section-serre: clamp(1.75rem, 3vw, 2.5rem);

  --page:   1180px;
  --etroit: 720px;
  --r-s: 4px;  --r-m: 10px;  --r-l: 18px;  --r-xl: 28px;

  --ombre-s: 0 1px 2px rgba(29,36,34,.06), 0 2px 8px rgba(29,36,34,.04);
  --ombre-m: 0 2px 4px rgba(29,36,34,.05), 0 12px 28px rgba(29,36,34,.08);
  --ombre-l: 0 4px 8px rgba(29,36,34,.06), 0 24px 56px rgba(29,36,34,.12);

  --transition: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* --- 2. Reset et base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut `hidden` doit toujours masquer, sans exception.
   La règle du navigateur ([hidden] { display: none }) vient de sa feuille par
   défaut : n'importe quelle classe de ce fichier qui déclare un display la
   supplante. Concrètement, `element.hidden = true` restait sans effet sur tout
   ce qui portait .billet, .pagination ou .simu — les filtres du blog ne
   masquaient rien. Cette règle rétablit le comportement attendu partout. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--craie);
  color: var(--basalte);
  font-family: var(--texte);
  font-size: var(--t-b);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--puy);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); letter-spacing: -0.028em; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.022em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); font-family: var(--texte); font-weight: 700; letter-spacing: 0; }
p  { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--puy); text-decoration-color: var(--brume); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-color: var(--gentiane); }

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
li { margin-bottom: var(--sp-2); }
strong { font-weight: 700; color: var(--puy); }
hr { border: 0; border-top: 1px solid var(--brume); margin: var(--sp-7) 0; }
:target { scroll-margin-top: 6rem; }

/* Focus — visible et non négociable */
:focus-visible {
  outline: 3px solid var(--gentiane-f);
  outline-offset: 3px;
  border-radius: var(--r-s);
}
.saut-contenu {
  position: absolute; left: var(--sp-4); top: -100%;
  background: var(--puy); color: var(--blanc);
  padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--r-m) var(--r-m);
  z-index: 200; text-decoration: none; font-weight: 600;
}
.saut-contenu:focus { top: 0; }

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

/* --- 3. Mise en page ----------------------------------------------------- */
.contenant { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--sp-5); }
.contenant--etroit { max-width: var(--etroit); }

.section { padding-block: var(--sp-section); }
.section--serre { padding-block: var(--sp-section-serre); }
.section--sombre { background: var(--puy); color: #DCE8E3; }
.section--sombre h2, .section--sombre h3 { color: var(--blanc); }
.section--sombre a { color: var(--gentiane); }
.section--alt { background: var(--craie-2); }

.grille { display: grid; gap: var(--sp-5); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Surtitre : indique toujours une catégorie réelle, jamais un ornement */
.surtitre {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--data); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ardoise); margin-bottom: var(--sp-4);
}
.surtitre::before {
  content: ""; width: 28px; height: 2px; background: var(--gentiane); flex: none;
}
.section--sombre .surtitre { color: #9FBAB2; }

.entete-section { max-width: 62ch; margin-bottom: var(--sp-6); }
.entete-section h2 { margin-bottom: var(--sp-3); }
.entete-section p { font-size: var(--t-b); color: var(--ardoise); }
.section--sombre .entete-section p { color: #B9CFC8; }

/* --- 4. Courbes de niveau (signature) ------------------------------------
   Les puys en arrière-plan. Discret : c'est un fil conducteur, pas un motif. */
.courbes {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  z-index: 0; opacity: .5;
}
.courbes svg { width: 100%; height: 100%; }
.courbes path { fill: none; stroke: var(--puy); stroke-width: 1; opacity: .13; }
.section--sombre .courbes path { stroke: #8FB5AA; opacity: .18; }
.a-courbes { position: relative; }
.a-courbes > *:not(.courbes) { position: relative; z-index: 1; }

/* --- 5. Boutons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  font-family: var(--texte); font-size: var(--t-b); font-weight: 600; line-height: 1.2;
  padding: 0.9rem 1.6rem; min-height: 52px; /* cible tactile confortable */
  border-radius: var(--r-m); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primaire { background: var(--gentiane); color: #2A1D00; box-shadow: var(--ombre-s); }
.btn--primaire:hover { background: #F2B33C; box-shadow: var(--ombre-m); }

.btn--fonce { background: var(--puy); color: var(--blanc); }
.btn--fonce:hover { background: var(--puy-clair); box-shadow: var(--ombre-m); }

.btn--ligne { background: transparent; color: var(--puy); border-color: var(--bordure-champ); }
.btn--ligne:hover { border-color: var(--puy); background: var(--blanc); }
.section--sombre .btn--ligne { color: var(--blanc); border-color: rgba(255,255,255,.3); }
.section--sombre .btn--ligne:hover { border-color: var(--gentiane); background: rgba(255,255,255,.06); }

.btn--large { width: 100%; }
.btn--petit { padding: 0.6rem 1.1rem; min-height: 44px; font-size: var(--t-sm); }

.groupe-btn { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Lien fléché */
.lien-fleche {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 600; text-decoration: none; color: var(--puy);
}
.lien-fleche::after { content: "→"; transition: transform var(--transition); }
.lien-fleche:hover::after { transform: translateX(4px); }
.lien-fleche:hover { color: var(--gentiane-f); }

/* --- 6. Cartes ----------------------------------------------------------- */
.carte {
  background: var(--blanc);
  border: 1px solid var(--brume);
  border-radius: var(--r-l);
  padding: var(--sp-5);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte--lien:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); border-color: #C6D3CB; }
.carte h3 { margin-bottom: var(--sp-3); }
.carte p { color: var(--ardoise); font-size: var(--t-sm); }

/* Bandeau de confiance : faits vérifiables uniquement */
.confiance { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); align-items: center; }
.confiance__item {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--t-sm); font-weight: 600; color: var(--puy);
}
.confiance__item svg { width: 22px; height: 22px; flex: none; color: var(--gentiane-f); }

/* Étiquette */
.etiquette {
  display: inline-block; font-family: var(--data); font-size: var(--t-xs);
  padding: 0.25rem 0.6rem; border-radius: 999px;
  background: var(--craie-2); color: var(--ardoise); border: 1px solid var(--brume);
}
.etiquette--accent { background: #FBF0D8; color: #6B4A00; border-color: #F0DCA8; }

/* --- 7. Chiffres et données ---------------------------------------------- */
.chiffre {
  font-family: var(--data); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.chiffre--geant { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.8rem); color: var(--puy); line-height: 1; }
.chiffre--accent { color: var(--gentiane-f); }

/* --- 8. Formulaires ------------------------------------------------------ */
.champ { margin-bottom: var(--sp-5); }
.champ > label, .legende {
  display: block; font-weight: 600; font-size: var(--t-sm);
  color: var(--puy); margin-bottom: var(--sp-2);
}
.champ__aide { font-size: var(--t-xs); color: var(--ardoise); margin: 0 0 var(--sp-2); }
.requis { color: var(--alerte); font-weight: 700; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="search"], input[type="file"], select, textarea {
  width: 100%; font-family: var(--texte); font-size: var(--t-b); color: var(--basalte);
  background: var(--blanc); border: 1.5px solid var(--bordure-champ); border-radius: var(--r-m);
  padding: 0.8rem 1rem; min-height: 52px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566662' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px;
  padding-right: 2.8rem;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--puy); box-shadow: 0 0 0 3px rgba(23,64,58,.12);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gentiane-f); outline-offset: 2px;
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--alerte); background: #FDF6F4;
}
.champ__erreur {
  display: none; align-items: center; gap: var(--sp-2);
  color: var(--alerte); font-size: var(--t-sm); font-weight: 600; margin-top: var(--sp-2);
}
.champ__erreur.visible { display: flex; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); }

/* Choix (radio / case) sous forme de tuiles cliquables */
.choix { display: grid; gap: var(--sp-3); }
.choix--ligne { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.choix__tuile {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); background: var(--blanc);
  border: 1.5px solid var(--bordure-champ); border-radius: var(--r-m);
  cursor: pointer; transition: all var(--transition);
}
.choix__tuile:hover { border-color: #B9C9C0; background: #FCFDFB; }
.choix__tuile input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--puy); min-height: 0; }
/* :has() (support Chrome/Edge 105+, Safari 15.4+, Firefox 121+) porte l'état
   coché ; .choix__tuile--coche (posée par app.js sur le "change") fait la même
   chose pour les navigateurs plus anciens sans :has() — le radio/checkbox
   natif restant de toute façon visible entre-temps. */
.choix__tuile:has(input:checked), .choix__tuile--coche { border-color: var(--puy); background: #F1F6F3; box-shadow: 0 0 0 1px var(--puy); }
.choix__tuile:has(input:focus-visible) { outline: 3px solid var(--gentiane-f); outline-offset: 2px; }
.choix__titre { font-weight: 600; color: var(--puy); display: block; }
.choix__detail { font-size: var(--t-sm); color: var(--ardoise); }
/* Prix après crédit d'impôt mis en avant (formulaire de devis) : c'est le
   montant réellement payé qui doit dominer visuellement, pas le tarif brut. */
.choix__detail-net { font-weight: 700; color: var(--puy); font-family: var(--data); }
.choix__detail-brut { font-size: var(--t-xs); }

/* Curseur */
input[type="range"] {
  width: 100%; height: 40px; background: transparent; appearance: none; cursor: pointer; padding: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--bordure-champ);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 30px; height: 30px; margin-top: -12px;
  border-radius: 50%; background: var(--puy); border: 3px solid var(--blanc);
  box-shadow: var(--ombre-m); transition: transform var(--transition);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.08); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--bordure-champ); }
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: var(--puy);
  border: 3px solid var(--blanc); box-shadow: var(--ombre-m);
}
/* Focus visible du curseur : l'outline global ne dessine rien d'utile autour
   d'une piste transparente, on le porte sur le pouce lui-même. */
input[type="range"]:focus-visible {
  outline: none;
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--gentiane-f); outline-offset: 2px;
  box-shadow: var(--ombre-m), 0 0 0 3px var(--gentiane-f);
}
input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 3px solid var(--gentiane-f); outline-offset: 2px;
  box-shadow: var(--ombre-m), 0 0 0 3px var(--gentiane-f);
}

/* Messages de formulaire */
.message { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-m); margin-bottom: var(--sp-5); font-size: var(--t-sm); }
.message--erreur { background: #FBEFEC; border: 1px solid #E8C4BA; color: #7A2A16; }
.message--succes { background: #EAF4EE; border: 1px solid #B6D8C4; color: #14502F; }
.message--info   { background: #FBF4E4; border: 1px solid #EEDCB0; color: #6B4A00; }

/* --- 9. En-tête ---------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247, 248, 245, .93);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.entete.defile { border-bottom-color: var(--brume); box-shadow: var(--ombre-s); }
.entete__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: 76px;
}

.logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex: none; }
.logo__glyphe { width: 34px; height: 34px; flex: none; }
.logo__mot {
  font-family: var(--display); font-size: 1.4rem; font-weight: 600;
  color: var(--puy); letter-spacing: -0.02em; line-height: 1;
}
.logo__lieu {
  display: block; font-family: var(--data); font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ardoise); margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav a {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none; color: var(--basalte);
  transition: color var(--transition), background var(--transition);
}
.nav a:hover { color: var(--puy); background: var(--craie-2); }
.nav a[aria-current="page"] { color: var(--puy); box-shadow: inset 0 -2px 0 var(--gentiane); border-radius: 0; }

.nav__menu { position: relative; }
.nav__declencheur {
  display: flex; align-items: center; gap: 4px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s);
  font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--basalte);
  background: none; border: none; cursor: pointer; white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.nav__declencheur:hover, .nav__declencheur[aria-expanded="true"] { color: var(--puy); background: var(--craie-2); }
.nav__declencheur--actif { color: var(--puy); box-shadow: inset 0 -2px 0 var(--gentiane); border-radius: 0; }
.nav__chevron { width: 14px; height: 14px; flex: none; transition: transform var(--transition); }
.nav__declencheur[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.nav__sous-menu {
  display: none;
  position: absolute; top: calc(100% + var(--sp-2)); left: 0; z-index: 10;
  min-width: 240px; padding: var(--sp-2);
  background: var(--craie); border: 1px solid var(--brume); border-radius: var(--r-m);
  box-shadow: var(--ombre-s);
  flex-direction: column; gap: 2px;
}
.nav__sous-menu.ouvert { display: flex; }
.nav__sous-menu a {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s);
  font-size: var(--t-sm); font-weight: 500; color: var(--basalte); text-decoration: none; white-space: nowrap;
}
.nav__sous-menu a:hover { color: var(--puy); background: var(--craie-2); }
.nav__sous-menu a[aria-current="page"] { color: var(--puy); background: var(--craie-2); font-weight: 600; }

.entete__actions { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.tel {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--data); font-size: var(--t-sm); font-weight: 500;
  color: var(--puy); text-decoration: none; white-space: nowrap;
}
.tel svg { width: 17px; height: 17px; }
.tel:hover { color: var(--gentiane-f); }

.burger {
  display: none; width: 48px; height: 48px; padding: 0;
  background: transparent; border: 1.5px solid var(--bordure-champ); border-radius: var(--r-m);
  cursor: pointer; align-items: center; justify-content: center; color: var(--puy);
}
.burger svg { width: 24px; height: 24px; }
.burger .fermer { display: none; }
.burger[aria-expanded="true"] .ouvrir { display: none; }
.burger[aria-expanded="true"] .fermer { display: block; }

.nav a { white-space: nowrap; }

/* Le seuil est calé sur la largeur réellement occupée par les 6 liens, le
   téléphone et le bouton : en dessous, ils s'empilaient sur trois lignes. */
@media (max-width: 1280px) {
  .burger { display: flex; }
  .entete__actions .tel { display: none; }
  .entete__actions .btn { display: none; }
  /* Le menu s'ouvre EN FLUX, sur une seconde ligne de l'en-tête, juste sous le
     bouton qui l'a déclenché.
     Un panneau en position:fixed serait plus spectaculaire, mais il s'ancre au
     sommet du bloc d'affichage : dès que la page est intégrée dans un cadre
     étiré à la hauteur du contenu (c'est le cas d'un artifact publié), « en haut
     de l'écran » devient « en haut d'un document de 9000 px ». Le menu s'ouvrait
     alors des milliers de pixels au-dessus du lecteur, et le bouton paraissait
     ne rien faire. En flux, le menu est toujours là où on l'attend.
     Fermé, il est en display:none : ni visible, ni atteignable au clavier. */
  .entete__barre { flex-wrap: wrap; }
  .nav {
    display: none;
    order: 3; flex-basis: 100%; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding-bottom: var(--sp-4);
    border-top: 1px solid var(--brume);
    max-height: 70vh; overflow-y: auto;
  }
  /* Fond opaque : l'en-tête est translucide avec flou d'arrière-plan, ce qui
     est agréable sur une barre fine mais rend un menu déroulant illisible,
     le contenu de la page transparaissant derrière les liens. */
  .nav.ouverte {
    display: flex; background: var(--craie);
    box-shadow: 0 12px 24px -12px rgba(29, 36, 34, .18);
    animation: nav-entre 180ms cubic-bezier(.4, 0, .2, 1);
  }
  @keyframes nav-entre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .nav a { padding: var(--sp-4); font-size: var(--t-lg); border-bottom: 1px solid var(--brume); border-radius: 0; }
  .nav__mobile { display: block !important; margin-top: var(--sp-5); }

  .nav__menu { width: 100%; }
  .nav__declencheur {
    width: 100%; justify-content: space-between;
    padding: var(--sp-4); font-size: var(--t-lg); border-bottom: 1px solid var(--brume); border-radius: 0;
  }
  .nav__declencheur--actif { box-shadow: none; }
  .nav__sous-menu {
    position: static; min-width: 0; padding: 0;
    background: var(--craie-2); border: none; border-radius: 0; box-shadow: none;
  }
  .nav__sous-menu a { padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--brume); border-radius: 0; font-size: var(--t-b); }
}
.nav__mobile { display: none; }

/* --- 10. Fil d'Ariane ---------------------------------------------------- */
.ariane { font-size: var(--t-xs); color: var(--ardoise); padding-block: var(--sp-4); }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.ariane li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.ariane li + li::before { content: "›"; color: var(--brume); }
.ariane a { color: var(--ardoise); text-decoration: none; }
.ariane a:hover { color: var(--puy); text-decoration: underline; }
.ariane [aria-current] { color: var(--puy); font-weight: 600; }

/* --- 11. Accordéon (FAQ) ------------------------------------------------- */
.accordeon { border-top: 1px solid var(--brume); }
.accordeon__item { border-bottom: 1px solid var(--brume); }
.accordeon__bouton {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  width: 100%; padding: var(--sp-5) 0; background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-size: var(--t-lg); font-weight: 600; color: var(--puy);
  text-align: left; line-height: 1.3;
}
.accordeon__bouton:hover { color: var(--gentiane-f); }
.accordeon__icone { flex: none; width: 26px; height: 26px; margin-top: 2px; transition: transform var(--transition); color: var(--ardoise); }
.accordeon__bouton[aria-expanded="true"] .accordeon__icone { transform: rotate(45deg); color: var(--gentiane-f); }
.accordeon__panneau { display: none; padding-bottom: var(--sp-5); max-width: 68ch; color: var(--ardoise); }
.accordeon__panneau.ouvert { display: block; }

/* --- 12. Zone photo (maquette : aucune photo inventée) ------------------- */
.photo {
  position: relative; border-radius: var(--r-l); overflow: hidden;
  background: linear-gradient(160deg, #E4EDE7 0%, #D5E3DA 100%);
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  border: 1px solid var(--brume);
}
.photo--haute { aspect-ratio: 3 / 4; }
.photo--large { aspect-ratio: 16 / 9; }
.photo__note {
  position: relative; z-index: 1; font-family: var(--data); font-size: var(--t-xs);
  color: #4E6B61; text-align: center; padding: var(--sp-4); max-width: 26ch; line-height: 1.5;
}
.photo svg.motif { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; }

/* --- 13. Pied de page ---------------------------------------------------- */
.pied { background: var(--puy); color: #B9CFC8; padding-block: var(--sp-8) var(--sp-6); font-size: var(--t-sm); }
.pied h3 { color: var(--blanc); font-family: var(--texte); font-size: var(--t-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--sp-4); }
.pied a { color: #B9CFC8; text-decoration: none; }
.pied a:hover { color: var(--gentiane); text-decoration: underline; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: var(--sp-2); }
.pied__grille { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
/* `columns: 3 130px` imposait un minimum de 3 × 130 px et faisait déborder la
   page sous 400 px. En ne fixant que la largeur, le nombre de colonnes s'adapte. */
.pied__communes { columns: 130px; column-gap: var(--sp-5); }
.pied__communes li { break-inside: avoid; }
/* Le bloc des communes occupe deux colonnes (style en ligne dans les pages).
   Sur une grille qui n'en propose qu'une, ce span en crée une seconde et
   double la largeur du pied de page : on le neutralise en dessous de 700 px. */
@media (max-width: 700px) {
  .pied__grille > * { grid-column: auto !important; }
}
.pied__bas {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5);
  align-items: center; justify-content: space-between; font-size: var(--t-xs);
}
.pied__maquette {
  margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4);
  border: 1px dashed rgba(228,163,43,.5); border-radius: var(--r-m);
  font-size: var(--t-xs); color: #D8C79E;
}

/* --- 14. Utilitaires ----------------------------------------------------- */
.centre { text-align: center; }
.centre .entete-section { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.discret { color: var(--ardoise); font-size: var(--t-sm); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose ul { padding-left: 1.2em; }
.prose li::marker { color: var(--gentiane-f); }

/* Apparition au défilement — seulement quand JS est là pour révéler (html.js
   posé par app.js) : sans script, le contenu reste visible d'emblée. */
html.js .apparait { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
html.js .apparait.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .apparait { opacity: 1; transform: none; } }

/* Impression */
@media print {
  .entete, .pied, .burger, .btn { display: none !important; }
  body { background: #fff; font-size: 11pt; }
}