/* ==========================================================================
   CVE Energy — feuille de style unique
   CSS natif, sans préprocesseur. Conçu d'abord pour mobile.

   Sommaire
   1. Polices
   2. Variables (couleurs, typographie, espacements)
   3. Réinitialisation légère
   4. Base et typographie
   5. Mise en page
   6. En-tête et navigation
   7. Pied de page et barre d'appel mobile
   8. Composants (boutons, cartes, étapes, prix, FAQ…)
   9. Formulaire
   10. Sections spécifiques
   11. Utilitaires et accessibilité
   12. Impression
   ========================================================================== */

/* 1. Polices ============================================================== */

/* Manrope (variable, 200 à 800), auto-hébergée. Fichier copié depuis le paquet npm
   @fontsource-variable/manrope (voir eleventy.config.js). Licence SIL OFL. */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Police de secours ajustée aux proportions de Manrope, pour limiter le
   décalage de mise en page pendant le chargement. */
@font-face {
  font-family: "Manrope Secours";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 105%;
  ascent-override: 101%;
  descent-override: 28%;
  line-gap-override: 0%;
}

/* 2. Variables ============================================================ */

:root {
  color-scheme: light;

  /* Couleurs de la marque (extraites du logo vectoriel) */
  --ardoise: #34434a;          /* texte, titres — contraste 10,3:1 sur blanc */
  --ardoise-fonce: #2a363c;    /* pied de page */
  --ardoise-doux: #586a71;     /* texte secondaire — 5,6:1 sur blanc */
  --vert: #1b6e35;             /* couleur principale, boutons — 6,3:1 sur blanc */
  --vert-fonce: #155a2b;       /* survol des boutons */
  --vert-clair: #7cae2b;       /* accent graphique uniquement, jamais pour du texte */
  --vert-pale: #e6f0dc;        /* fonds d'icônes */
  --fond-doux: #f4f8f1;        /* sections alternées */
  --blanc: #ffffff;
  --bordure: #d5ded2;
  --bordure-champ: #76878e;    /* bordure des champs — 3,7:1 sur blanc */
  --erreur: #b3261e;
  --succes-fond: #e6f0dc;

  /* Échelle du label énergétique (usage graphique uniquement) */
  --label-1: #1a7d34;
  --label-2: #72a92f;
  --label-3: #c8c725;
  --label-4: #f09323;
  --label-5: #e3361c;

  /* Typographie */
  --police: "Manrope", "Manrope Secours", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --taille-base: 1.0625rem;                             /* 17 px */
  --taille-petite: 0.9375rem;                           /* 15 px */
  --taille-h1: clamp(2rem, 1.35rem + 2.8vw, 3.25rem);
  --taille-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --taille-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);

  /* Espacements */
  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 2rem;
  --espace-7: 3rem;
  --espace-section: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Divers */
  --largeur-max: 72rem;
  --largeur-texte: 42rem;
  --gouttiere: 1rem;
  --rayon: 0.75rem;
  --rayon-petit: 0.5rem;
  --ombre: 0 1px 2px rgb(42 54 60 / 0.06), 0 4px 16px rgb(42 54 60 / 0.06);
  --focus: 3px solid var(--ardoise);
  --hauteur-barre-mobile: 4rem;
}

@media (min-width: 48em) {
  :root { --gouttiere: 1.5rem; }
}

/* 3. Réinitialisation légère ============================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--espace-5);
}

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

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

input,
button,
textarea,
select { font: inherit; color: inherit; }

/* 4. Base et typographie ================================================== */

body {
  font-family: var(--police);
  font-size: var(--taille-base);
  line-height: 1.65;
  color: var(--ardoise);
  background: var(--blanc);
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main { flex: 1; }

h1, h2, h3, h4 {
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ardoise);
  text-wrap: balance;
}

h1 { font-size: var(--taille-h1); }
h2 { font-size: var(--taille-h2); }
h3 { font-size: var(--taille-h3); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; font-weight: 700; }
.h3 { font-size: var(--taille-h3); font-weight: 700; letter-spacing: -0.01em; }

p, li { text-wrap: pretty; }

a {
  color: var(--vert);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--vert-fonce); text-decoration-thickness: 0.14em; }

strong { font-weight: 700; }

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

::selection { background: var(--vert-pale); color: var(--ardoise); }

/* Texte courant : espacement vertical automatique */
.prose > * + * { margin-top: var(--espace-4); }
.prose > * + h2 { margin-top: var(--espace-7); }
.prose > * + h3 { margin-top: var(--espace-6); }
.prose ul,
.prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--espace-2); }
.prose { max-width: var(--largeur-texte); }
.prose .liste-label,
.prose .liste-coche,
.prose .cases,
.prose .etapes { padding-left: 0; }
.prose .etapes > li + li { margin-top: 0; }
.prose .etapes { margin-block: var(--espace-5); }

.chapeau {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--ardoise-doux);
  max-width: 40rem;
}

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-3);
  font-size: var(--taille-petite);
  font-weight: 700;
  color: var(--vert);
  letter-spacing: 0.01em;
}

.surtitre .echelle { width: 1.5rem; height: auto; flex: none; }

/* 5. Mise en page ========================================================= */

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

.section { padding-block: var(--espace-section); }
.section--douce { background: var(--fond-doux); }
.section--serree { padding-block: var(--espace-7); }

.section__entete { max-width: 44rem; margin-bottom: var(--espace-6); }
.section__entete > * + * { margin-top: var(--espace-3); }
.section__entete--centre { margin-inline: auto; text-align: center; }

.grille {
  display: grid;
  gap: var(--espace-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.colonnes {
  display: grid;
  gap: var(--espace-6);
  align-items: start;
}

@media (min-width: 60em) {
  .colonnes { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--espace-7); }
  .colonnes--egales { grid-template-columns: 1fr 1fr; }
  .colonnes__aside { position: sticky; top: var(--espace-5); }
}

/* En-tête de page intérieure */
.entete-page {
  background: var(--fond-doux);
  padding-block: var(--espace-6) var(--espace-7);
  border-bottom: 1px solid var(--bordure);
}

.entete-page h1 { margin-top: var(--espace-3); max-width: 48rem; }
.entete-page .chapeau { margin-top: var(--espace-4); }

/* Fil d'Ariane */
.ariane ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1) var(--espace-2);
  font-size: var(--taille-petite);
  color: var(--ardoise-doux);
}

.ariane li + li::before {
  content: "/";
  margin-right: var(--espace-2);
  color: var(--bordure-champ);
}

.ariane a { color: var(--ardoise-doux); }
.ariane [aria-current] { color: var(--ardoise); font-weight: 600; }

/* 6. En-tête et navigation ================================================= */

.lien-evitement {
  position: absolute;
  left: var(--espace-4);
  top: -10rem;
  z-index: 100;
  padding: var(--espace-3) var(--espace-4);
  background: var(--ardoise);
  color: var(--blanc);
  font-weight: 700;
  border-radius: var(--rayon-petit);
}

.lien-evitement:focus { top: var(--espace-4); color: var(--blanc); }

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
  position: relative;
  z-index: 20;
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  min-height: 4.5rem;
  padding-block: var(--espace-2);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-3);
  text-decoration: none;
  color: var(--ardoise);
  flex: none;
}

.marque:hover { color: var(--ardoise); }
.marque img { width: 5rem; height: auto; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque__nom { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.01em; }
.marque__signature { font-size: 0.8125rem; color: var(--ardoise-doux); font-weight: 600; }

.nav__bouton { display: none; }

.nav__liste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-1) var(--espace-4);
}

.nav__lien {
  display: inline-block;
  padding-block: var(--espace-2);
  color: var(--ardoise);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9688rem;
  border-bottom: 2px solid transparent;
}

.nav__lien:hover { color: var(--vert); border-bottom-color: var(--vert-clair); }
.nav__lien[aria-current="page"] { color: var(--vert); border-bottom-color: var(--vert); }

.nav__action { display: none; }

/* Mobile, sans JavaScript : la navigation s'affiche sous le logo. */
@media (max-width: 74.99em) {
  .entete__barre { flex-wrap: wrap; }
  .js .entete__barre { flex-wrap: nowrap; }
  .nav { width: 100%; }
  .nav__liste { padding-bottom: var(--espace-2); }

  /* Avec JavaScript : menu repliable derrière un bouton. */
  .js .nav { width: auto; }
  .js .nav__bouton {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
    min-height: 2.75rem;
    padding: var(--espace-2) var(--espace-3);
    background: transparent;
    border: 1.5px solid var(--bordure);
    border-radius: var(--rayon-petit);
    font-weight: 700;
    cursor: pointer;
  }
  .js .nav__bouton .icone { width: 1.375rem; height: 1.375rem; }
  .js .nav__bouton .icone--fermer { display: none; }
  .js .nav__bouton[aria-expanded="true"] .icone--menu { display: none; }
  .js .nav__bouton[aria-expanded="true"] .icone--fermer { display: block; }

  .js .nav__panneau {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--blanc);
    border-bottom: 1px solid var(--bordure);
    box-shadow: 0 12px 24px rgb(42 54 60 / 0.12);
    padding: var(--espace-2) var(--gouttiere) var(--espace-5);
  }
  .js .nav__panneau[hidden] { display: none; }
  .js .nav__liste { flex-direction: column; gap: 0; }
  .js .nav__lien {
    display: block;
    padding: var(--espace-3) 0;
    border-bottom: 1px solid var(--bordure);
    font-size: 1.0625rem;
  }
  .js .nav__lien[aria-current="page"] { border-bottom-color: var(--bordure); }
  .js .nav__action { display: block; margin-top: var(--espace-5); }
  .js .nav__action .bouton { width: 100%; }
}

@media (min-width: 75em) {
  .nav { display: flex; align-items: center; gap: var(--espace-5); }
  .nav__panneau { display: flex !important; align-items: center; gap: var(--espace-5); }
  .nav__action { display: block; }
}

/* Menu complet sur grand écran : la signature sous le nom est masquée pour laisser la place. */
@media (min-width: 75em) {
  .marque__signature { display: none; }
  .nav__liste { flex-wrap: nowrap; gap: var(--espace-1) var(--espace-4); }
  .nav__lien, .nav__action .bouton { white-space: nowrap; }
}

/* Petit écran : logo réduit et signature masquée pour que le bouton Menu tienne sur la même ligne. */
@media (max-width: 29.99em) {
  .marque img { width: 4rem; }
  .marque__signature { display: none; }
}

/* 7. Pied de page et barre d'appel mobile ================================= */

.pied {
  background: var(--ardoise-fonce);
  color: #d7dfe2;
  font-size: var(--taille-petite);
  position: relative;
}

/* Bande aux couleurs de l'échelle du label */
.pied::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg,
    var(--label-1) 0 20%, var(--label-2) 20% 40%, var(--label-3) 40% 60%,
    var(--label-4) 60% 80%, var(--label-5) 80% 100%);
}

.pied a { color: var(--blanc); }
.pied a:hover { color: #b9e08a; }
.pied :focus-visible { outline-color: var(--blanc); }

.pied__grille {
  display: grid;
  gap: var(--espace-6);
  padding-block: var(--espace-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.pied__logo { width: 7rem; margin-bottom: var(--espace-4); }
.pied__titre { color: var(--blanc); font-size: 1rem; font-weight: 700; margin-bottom: var(--espace-3); }
.pied__liste { list-style: none; padding: 0; }
.pied__liste li + li { margin-top: var(--espace-2); }
.pied__contact li { display: flex; gap: var(--espace-2); align-items: flex-start; }
.pied__contact .icone { width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; flex: none; color: #b9e08a; }

.pied__bas {
  border-top: 1px solid rgb(255 255 255 / 0.14);
  padding-block: var(--espace-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2) var(--espace-5);
  justify-content: space-between;
}

.pied__bas ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--espace-4); }

/* Barre d'appel fixe (mobile uniquement) */
.barre-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espace-2);
  padding: var(--espace-2) var(--gouttiere) calc(var(--espace-2) + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.97);
  border-top: 1px solid var(--bordure);
  box-shadow: 0 -4px 16px rgb(42 54 60 / 0.08);
}

.barre-mobile .bouton { width: 100%; min-height: 3rem; padding-inline: var(--espace-3); }

body { padding-bottom: calc(var(--hauteur-barre-mobile) + env(safe-area-inset-bottom)); }

@media (min-width: 48em) {
  .barre-mobile { display: none; }
  body { padding-bottom: 0; }
}

/* 8. Composants ============================================================ */

/* --- Boutons --- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  min-height: 2.875rem;
  padding: var(--espace-3) var(--espace-5);
  border: 2px solid transparent;
  border-radius: var(--rayon-petit);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bouton .icone { width: 1.25rem; height: 1.25rem; flex: none; }

.bouton--principal { background: var(--vert); color: var(--blanc); }
.bouton--principal:hover { background: var(--vert-fonce); color: var(--blanc); }

.bouton--secondaire { background: var(--blanc); color: var(--ardoise); border-color: var(--ardoise); }
.bouton--secondaire:hover { background: var(--fond-doux); color: var(--ardoise); }

.bouton--clair { background: var(--blanc); color: var(--vert); }
.bouton--clair:hover { background: var(--vert-pale); color: var(--vert-fonce); }

.bouton--contour-clair { background: transparent; color: var(--blanc); border-color: var(--blanc); }
.bouton--contour-clair:hover { background: rgb(255 255 255 / 0.12); color: var(--blanc); }

.bouton--grand { min-height: 3.25rem; padding-inline: var(--espace-6); font-size: 1.0625rem; }

.actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); }

/* --- Lien fléché --- */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  font-weight: 700;
  text-decoration: none;
}

.lien-fleche .icone { width: 1.125rem; height: 1.125rem; transition: transform 0.15s ease; }
.lien-fleche:hover .icone { transform: translateX(3px); }
.lien-fleche:hover { text-decoration: underline; }

/* --- Liste à puces « label » --- */
.liste-label { list-style: none; padding: 0; }
.liste-label li { position: relative; padding-left: 1.75rem; }
.liste-label li + li { margin-top: var(--espace-3); }

.liste-label li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 1rem;
  height: 0.6rem;
  background: var(--vert-clair);
  clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
}

/* Variante avec coche (liste « inclus ») */
.liste-coche { list-style: none; padding: 0; }
.liste-coche li { display: flex; gap: var(--espace-2); align-items: flex-start; }
.liste-coche li + li { margin-top: var(--espace-2); }
.liste-coche .icone { width: 1.25rem; height: 1.25rem; color: var(--vert); flex: none; margin-top: 0.2rem; }

/* --- Cartes --- */
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  padding: var(--espace-5);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.carte__icone {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--vert-pale);
  color: var(--vert);
}

.carte__icone .icone { width: 1.5rem; height: 1.5rem; }
.carte h3 a { color: inherit; text-decoration: none; }
.carte h3 a:hover { color: var(--vert); }
.carte__pied { margin-top: auto; padding-top: var(--espace-3); display: flex; flex-direction: column; gap: var(--espace-3); }

/* Toute la carte est cliquable via le lien du titre */
.carte--lien h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon); }
.carte--lien:hover { border-color: var(--vert-clair); }
.carte--lien:focus-within { outline: var(--focus); outline-offset: 3px; }
.carte--lien h3 a:focus-visible { outline: none; }

/* --- Prix --- */
.prix { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--espace-1) var(--espace-2); }
.prix__montant { font-weight: 800; color: var(--ardoise); }

.prix__mention {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--vert);
  background: var(--vert-pale);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- Étapes (barre de progression aux couleurs du label, du rouge vers le vert) --- */
.etapes {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--espace-5);
  counter-reset: etape;
}

@media (min-width: 48em) { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .etapes--4 { grid-template-columns: repeat(4, 1fr); } .etapes--3 { grid-template-columns: repeat(3, 1fr); } }

.etapes > li { counter-increment: etape; }
.etapes > li > * + * { margin-top: var(--espace-2); }

.etapes > li::before {
  content: "";
  display: block;
  height: 0.5rem;
  margin-bottom: var(--espace-4);
  clip-path: polygon(0 0, calc(100% - 0.4rem) 0, 100% 50%, calc(100% - 0.4rem) 100%, 0 100%);
  background: var(--couleur-etape, var(--label-1));
}

.etapes > li:nth-child(1) { --couleur-etape: var(--label-4); }
.etapes > li:nth-child(2) { --couleur-etape: var(--label-3); }
.etapes > li:nth-child(3) { --couleur-etape: var(--label-2); }
.etapes > li:nth-child(4) { --couleur-etape: var(--label-1); }
.etapes--3 > li:nth-child(1) { --couleur-etape: var(--label-3); }
.etapes--3 > li:nth-child(2) { --couleur-etape: var(--label-2); }
.etapes--3 > li:nth-child(3) { --couleur-etape: var(--label-1); }

.etapes__numero {
  display: block;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--ardoise-doux);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.etapes__numero::before { content: "Étape " counter(etape); }

/* --- Arguments (icône + texte) --- */
.argument { display: flex; gap: var(--espace-4); align-items: flex-start; }
.argument > div > * + * { margin-top: var(--espace-2); }
.argument .carte__icone { flex: none; }

/* --- Encadré --- */
.encadre {
  padding: var(--espace-5);
  border-radius: var(--rayon);
  background: var(--fond-doux);
  border: 1px solid var(--bordure);
}

.encadre > * + * { margin-top: var(--espace-3); }
.encadre--vert { background: var(--vert-pale); border-color: #c9ddb5; }
.encadre h2, .encadre h3 { font-size: var(--taille-h3); }

/* --- Carte de contact (colonne latérale) --- */
.contact-rapide { list-style: none; padding: 0; }
.contact-rapide li { display: flex; gap: var(--espace-3); align-items: flex-start; }
.contact-rapide li + li { margin-top: var(--espace-3); }
.contact-rapide .icone { width: 1.25rem; height: 1.25rem; color: var(--vert); flex: none; margin-top: 0.2rem; }
.contact-rapide a { font-weight: 700; }

/* --- Tableau des tarifs --- */
.tableau-conteneur { overflow-x: auto; }

.tableau {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}

.tableau caption {
  text-align: left;
  font-weight: 800;
  font-size: var(--taille-h3);
  padding-bottom: var(--espace-3);
}

.tableau th,
.tableau td {
  padding: var(--espace-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--bordure);
}

.tableau thead th {
  background: var(--fond-doux);
  font-size: var(--taille-petite);
  font-weight: 700;
  color: var(--ardoise-doux);
}

.tableau tbody th { font-weight: 700; width: 58%; }
.tableau tbody th span { display: block; font-weight: 400; color: var(--ardoise-doux); font-size: var(--taille-petite); margin-top: var(--espace-1); }
.tableau tr:last-child > * { border-bottom: 0; }

/* --- FAQ (details/summary natifs) --- */
.faq { border-top: 1px solid var(--bordure); }
.faq details { border-bottom: 1px solid var(--bordure); }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espace-4);
  padding: var(--espace-4) 0;
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--vert), var(--vert)) center / 0.75rem 2px no-repeat,
    linear-gradient(var(--vert), var(--vert)) center / 2px 0.75rem no-repeat,
    var(--vert-pale);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  background:
    linear-gradient(var(--vert), var(--vert)) center / 0.75rem 2px no-repeat,
    var(--vert-pale);
}

.faq summary:hover { color: var(--vert); }
.faq__reponse { padding-bottom: var(--espace-5); max-width: var(--largeur-texte); }
.faq__reponse > * + * { margin-top: var(--espace-3); }

/* --- Liste des communes --- */
.communes {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--espace-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.communes li {
  padding: var(--espace-4);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
}

.communes__nom { font-weight: 700; display: block; }
.communes__cp { font-weight: 600; color: var(--ardoise-doux); font-size: var(--taille-petite); }
.communes__localites { display: block; font-size: var(--taille-petite); color: var(--ardoise-doux); margin-top: var(--espace-1); }
.communes__siege { border-color: var(--vert) !important; box-shadow: inset 4px 0 0 var(--vert); }

/* --- Checklist --- */
.checklist { display: grid; gap: var(--espace-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.checklist h3 { display: flex; align-items: center; gap: var(--espace-3); margin-bottom: var(--espace-3); }
.checklist .carte__icone { width: 2.5rem; height: 2.5rem; }

.cases { list-style: none; padding: 0; }
.cases li { position: relative; padding-left: 1.875rem; }
.cases li + li { margin-top: var(--espace-3); }

.cases li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--bordure-champ);
  border-radius: 4px;
}

/* --- Témoignages (masqués par défaut, voir temoignages.json) --- */
.temoignage { margin: 0; }
.temoignage blockquote { font-size: 1.0625rem; }
.temoignage figcaption { margin-top: var(--espace-3); font-weight: 700; font-size: var(--taille-petite); }
.temoignage figcaption span { font-weight: 400; color: var(--ardoise-doux); }

/* --- Photo --- */
.photo img { border-radius: var(--rayon); width: 100%; height: auto; }

/* 9. Formulaire ============================================================= */

.formulaire { display: grid; gap: var(--espace-5); }
.formulaire fieldset { border: 0; padding: 0; min-width: 0; display: grid; gap: var(--espace-5); }

.formulaire legend {
  font-weight: 800;
  font-size: var(--taille-h3);
  margin-bottom: var(--espace-4);
  padding: 0;
}

.champs-duo { display: grid; gap: var(--espace-5); }
@media (min-width: 40em) { .champs-duo { grid-template-columns: 1fr 1fr; } }

.champ { display: grid; gap: var(--espace-2); align-content: start; }
.champ label,
.champ .champ__libelle { font-weight: 700; }
.champ__statut { font-weight: 500; color: var(--ardoise-doux); font-size: var(--taille-petite); }
.champ__aide { font-size: var(--taille-petite); color: var(--ardoise-doux); }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--espace-3) var(--espace-4);
  background: var(--blanc);
  border: 1.5px solid var(--bordure-champ);
  border-radius: var(--rayon-petit);
  font-size: 1rem;
}

.champ textarea { min-height: 8rem; resize: vertical; }

.champ select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334434a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.25rem;
}

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline: var(--focus);
  outline-offset: 1px;
  border-color: var(--ardoise);
}

.champ [aria-invalid="true"] { border-color: var(--erreur); border-width: 2px; }

.champ__erreur {
  display: flex;
  gap: var(--espace-2);
  align-items: flex-start;
  color: var(--erreur);
  font-weight: 600;
  font-size: var(--taille-petite);
}

.champ__erreur[hidden] { display: none; }

.consentement { display: flex; gap: var(--espace-3); align-items: flex-start; }

.consentement input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.15rem;
  accent-color: var(--vert);
}

.consentement label { font-weight: 500; }

/* Champ piège anti-robots : invisible pour les humains et les lecteurs d'écran */
.piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.formulaire__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-4); }
.formulaire__note { font-size: var(--taille-petite); color: var(--ardoise-doux); }

.message-formulaire {
  padding: var(--espace-4) var(--espace-5);
  border-radius: var(--rayon-petit);
  font-weight: 600;
}

.message-formulaire[hidden] { display: none; }
.message-formulaire--succes { background: var(--succes-fond); border: 1px solid #c9ddb5; }
.message-formulaire--erreur { background: #fbeceb; border: 1px solid #efc4c1; color: var(--erreur); }
.message-formulaire:focus { outline: var(--focus); outline-offset: 3px; }

.bouton[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* 10. Sections spécifiques ================================================== */

/* --- Accueil : bandeau principal --- */
.hero {
  background:
    radial-gradient(60rem 30rem at 100% 0%, rgb(124 174 43 / 0.12), transparent 60%),
    var(--fond-doux);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  border-bottom: 1px solid var(--bordure);
}

.hero__grille { display: grid; gap: var(--espace-7); align-items: center; }
@media (min-width: 60em) { .hero__grille { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

.hero h1 { margin-top: var(--espace-4); }
.hero .chapeau { margin-top: var(--espace-4); }
.hero .actions { margin-top: var(--espace-6); }

.hero__atouts {
  list-style: none;
  padding: 0;
  margin-top: var(--espace-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3) var(--espace-5);
  font-weight: 600;
  font-size: var(--taille-petite);
}

.hero__atouts li { display: inline-flex; align-items: center; gap: var(--espace-2); }
.hero__atouts .icone { width: 1.25rem; height: 1.25rem; color: var(--vert); }

/* Carte explicative de l'échelle du label (A++ à G) */
.label-carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: 0 10px 40px rgb(42 54 60 / 0.10);
  padding: var(--espace-5);
  max-width: 26rem;
  width: 100%;
  justify-self: center;
}

.label-carte__titre { font-size: 1.0625rem; font-weight: 800; }
.label-carte__texte { font-size: var(--taille-petite); color: var(--ardoise-doux); margin-top: var(--espace-2); }

.label-carte__echelle { list-style: none; padding: 0; margin-top: var(--espace-4); display: grid; gap: 0.3rem; }
.label-carte__echelle li { display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; gap: var(--espace-3); }
.label-carte__classe { font-weight: 800; font-size: 0.875rem; text-align: right; }

.label-carte__barre {
  height: 1.05rem;
  width: var(--l);
  background: var(--c);
  clip-path: polygon(0 0, calc(100% - 0.55rem) 0, 100% 50%, calc(100% - 0.55rem) 100%, 0 100%);
}

.label-carte__echelle li:nth-child(1) { --c: #0f6b34; --l: 34%; }
.label-carte__echelle li:nth-child(2) { --c: #1a7d34; --l: 42%; }
.label-carte__echelle li:nth-child(3) { --c: #3f932f; --l: 50%; }
.label-carte__echelle li:nth-child(4) { --c: #72a92f; --l: 58%; }
.label-carte__echelle li:nth-child(5) { --c: #b3bf27; --l: 66%; }
.label-carte__echelle li:nth-child(6) { --c: #e0c523; --l: 74%; }
.label-carte__echelle li:nth-child(7) { --c: #f09323; --l: 82%; }
.label-carte__echelle li:nth-child(8) { --c: #ea6420; --l: 90%; }
.label-carte__echelle li:nth-child(9) { --c: #e3361c; --l: 100%; }

.label-carte__legende {
  display: flex;
  justify-content: space-between;
  margin-top: var(--espace-3);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ardoise-doux);
}

/* --- Bandeau d'appel à l'action --- */
.appel {
  background: var(--vert);
  color: var(--blanc);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.appel h2 { color: var(--blanc); }
.appel p { color: #eef5e8; max-width: 40rem; margin-top: var(--espace-3); }
.appel .actions { margin-top: var(--espace-5); }
.appel :focus-visible { outline-color: var(--blanc); }
.appel__grille { display: grid; gap: var(--espace-5); align-items: center; }
@media (min-width: 60em) { .appel__grille { grid-template-columns: 1.5fr 1fr; } .appel .actions { justify-content: flex-end; margin-top: 0; } }

/* --- Page 404 --- */
.page-404 { text-align: center; }
.page-404 .prose,
.page-404 .chapeau { margin-inline: auto; }
.page-404 .echelle { width: 4rem; margin: 0 auto var(--espace-5); }
.page-404 .actions { justify-content: center; margin-top: var(--espace-5); }

/* --- Texte légal --- */
.legal h2 { font-size: var(--taille-h3); }
.legal dl { display: grid; gap: var(--espace-2) var(--espace-5); }
@media (min-width: 40em) { .legal dl { grid-template-columns: max-content 1fr; } }
.legal dt { font-weight: 700; }

/* 11. Utilitaires et accessibilité ========================================= */

.visuellement-cache {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mt-4 { margin-top: var(--espace-4); }
.mt-5 { margin-top: var(--espace-5); }
.mt-6 { margin-top: var(--espace-6); }
.centre { text-align: center; }
.texte-doux { color: var(--ardoise-doux); }
.petit { font-size: var(--taille-petite); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* 12. Impression ============================================================ */

@media print {
  .entete .nav,
  .barre-mobile,
  .lien-evitement,
  .appel,
  .pas-imprime { display: none !important; }

  body { padding: 0; font-size: 11pt; color: #000; }
  .pied { background: none; color: #000; }
  .pied::before { display: none; }
  .pied a { color: #000; }
  .section, .hero, .entete-page { padding-block: 1rem; background: none; }
  .carte { box-shadow: none; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}