/* ==========================================================================
   S BOIS — variante chaleureuse
   Palette : bois, terracotta, vert forêt, crème chaude
   Police titres : Bitter (auto-hébergée, .woff2 locaux) — police corps : system-ui
   ========================================================================== */

@font-face {
  font-family: "Bitter";
  src: url("../fonts/bitter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bitter";
  src: url("../fonts/bitter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bitter";
  src: url("../fonts/bitter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Bois & nature */
  --bois-fonce: #3f2a1a;
  --bois: #6b4226;
  --bois-clair: #a97a52;
  --terracotta: #b8542f;
  --terracotta-fonce: #953f20;
  --terracotta-clair: #f3c9a8; /* variante éclaircie : seule à utiliser en texte sur fond sombre (vert forêt), le terracotta standard n'y passe pas le contraste AA (~2,7:1) */
  --foret: #2f4d3a;
  --foret-fonce: #203527;
  --creme: #f6ede0;
  --creme-carte: #efe0c7;
  --creme-vive: #fbf6ec;
  --encre: #342315;
  --encre-douce: #5a4433;
  --bordure: #d8c3a0;

  --font-titre: "Bitter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-corps: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  --rayon: 14px;
  --rayon-petit: 8px;
  --ombre-tampon: 5px 5px 0 var(--bois-clair);
  --ombre-tampon-sm: 3px 3px 0 var(--bois-clair);
  --conteneur: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--font-corps);
  font-size: 1.03rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--terracotta-fonce); }
a:not(.btn):not(.logo):not(.nav-link) { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
ul { padding-left: 1.25rem; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-titre);
  color: var(--bois-fonce);
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: 68ch; }
.container { max-width: var(--conteneur); margin: 0 auto; padding: 0 1.25rem; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--foret); color: #fff; padding: 0.6rem 1rem;
  border-radius: var(--rayon-petit); z-index: 1000; transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- Icônes ---------- */
.icone { width: 1.35em; height: 1.35em; flex-shrink: 0; }
.icone-inline { vertical-align: -0.22em; margin-right: 0.4em; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-corps); font-weight: 700; font-size: 1rem;
  padding: 0.75rem 1.35rem; border-radius: 999px; border: 2.5px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.1;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-tel {
  background: var(--terracotta); color: #fff; box-shadow: var(--ombre-tampon-sm);
}
.btn-tel:hover { background: var(--terracotta-fonce); }
.btn-whatsapp {
  background: var(--foret); color: #fff; box-shadow: var(--ombre-tampon-sm);
}
.btn-whatsapp:hover { background: var(--foret-fonce); }
.btn-outline {
  background: transparent; border-color: var(--bois-fonce); color: var(--bois-fonce);
}
.btn-outline:hover { background: var(--bois-fonce); color: var(--creme); }
.btn-large { padding: 1rem 1.9rem; font-size: 1.08rem; }
.btn-bloc { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 246, 236, 0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 4px solid var(--terracotta);
}
.entete-barre {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.25rem;
  max-width: var(--conteneur); margin: 0 auto;
  gap: 1rem;
}
.logo { display: flex; align-items: center; text-decoration: none; }
.logo-img { height: 44px; width: auto; display: block; }

.entete-contacts { display: flex; align-items: center; gap: 0.6rem; }
.entete-contacts .btn { padding: 0.55rem 1rem; font-size: 0.92rem; }
.entete-contacts .btn span.txt-long { display: inline; }

.nav-burger {
  display: none; background: none; border: 2px solid var(--bois-fonce);
  border-radius: var(--rayon-petit); width: 44px; height: 44px;
  align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.nav-burger svg { width: 22px; height: 22px; }

.nav-principale { }
.nav-principale ul {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.15rem;
  list-style: none; margin: 0; padding: 0.6rem 1.25rem 0.9rem;
  max-width: var(--conteneur); margin: 0 auto;
}
.nav-link {
  text-decoration: none; color: var(--encre-douce); font-weight: 600;
  padding: 0.3rem 0.15rem; border-bottom: 2.5px solid transparent;
}
.nav-link:hover, .nav-link[aria-current="page"] {
  color: var(--terracotta-fonce); border-bottom-color: var(--terracotta);
}

@media (max-width: 980px) {
  .entete-contacts .btn span.txt-long { display: none; }
}
@media (max-width: 980px) {
  .nav-burger { display: inline-flex; }
  .nav-principale {
    display: none; background: var(--creme-carte);
    border-top: 1px solid var(--bordure);
  }
  .nav-principale.ouvert { display: block; }
  .nav-principale ul { flex-direction: column; gap: 0; padding: 0.5rem 1.25rem 1rem; }
  .nav-link { display: block; padding: 0.65rem 0.2rem; border-bottom: 1px solid var(--bordure); }
  .entete-contacts .btn-outline-tel-label { display: none; }
}

/* ---------- Bandeau info (garantie / horaires courts) ---------- */
.bandeau-info {
  background: var(--foret-fonce); color: var(--creme-vive);
  text-align: center; font-size: 0.88rem; padding: 0.45rem 1rem;
}
.bandeau-info a { color: #fff; }

/* ---------- Hero ---------- */
.hero {
  padding: 3rem 0 3.5rem;
  background: linear-gradient(180deg, var(--creme-vive) 0%, var(--creme) 100%);
  overflow: hidden;
}
.hero .container {
  display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: center;
}
@media (min-width: 900px) {
  .hero .container { grid-template-columns: 1.5fr 0.5fr; gap: 2.4rem; align-items: start; }
}
.hero-accroche { font-size: 1.02rem; font-weight: 700; color: var(--terracotta-fonce); margin-bottom: 0.5rem; }
.hero-texte h1 { margin-bottom: 0.5rem; }
.hero-texte .intro { font-size: 1.12rem; color: var(--encre-douce); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.5rem; }
.hero-atouts {
  list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem;
}
.hero-atouts li { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--bois-fonce); }
.hero-atouts .icone { color: var(--foret); }

/* Visuel hero volontairement compact (secondaire au texte/CTA, pas une colonne pleine hauteur) */
.hero-visuel {
  position: relative;
  max-width: 300px; margin: 0 auto;
}
@media (min-width: 900px) {
  .hero-visuel { max-width: none; margin: 0; margin-top: 0.3rem; }
}
.hero-visuel img {
  border-radius: 20px 60px 20px 60px;
  border: 5px solid var(--creme-vive);
  box-shadow: 7px 7px 0 var(--bois-clair);
  width: 100%; object-fit: cover; aspect-ratio: 1/1;
}
.hero-badge {
  position: absolute; bottom: -0.8rem; left: -0.8rem;
  background: var(--terracotta); color: #fff;
  border-radius: 50%; width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-titre); font-weight: 700; font-size: 0.66rem; line-height: 1.12;
  border: 3px solid var(--creme-vive); box-shadow: 3px 3px 0 var(--bois-clair);
  transform: rotate(-8deg); padding: 0.35rem;
}

/* ---------- Bande "Essentiels" (prix, formats, paiement, simulateur) ---------- */
.essentiels { background: var(--creme-carte); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); padding: 1.5rem 0; }
.essentiels-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.essentiels-grille-3 .essentiel-prix-tailles { grid-column: 1 / -1; }
@media (min-width: 780px) {
  .essentiels-grille { grid-template-columns: repeat(4, 1fr); }
  .essentiels-grille-3 { grid-template-columns: repeat(3, 1fr); }
  .essentiels-grille-3 .essentiel-prix-tailles { grid-column: auto; }
}
.essentiel-bloc {
  background: var(--creme-vive); border: 2px solid var(--bordure); border-radius: var(--rayon-petit);
  padding: 0.85rem 1rem;
}
.essentiel-label { display: block; font-size: 0.76rem; color: var(--encre-douce); font-weight: 700; margin-bottom: 0.35rem; }
.essentiel-valeur { font-family: var(--font-titre); font-size: 1.25rem; color: var(--bois-fonce); }

.essentiel-tailles-prix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.essentiel-tailles-prix li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
  padding: 0.15rem 0; border-bottom: 1px dashed var(--bordure);
}
.essentiel-tailles-prix li:last-child { border-bottom: none; }
.essentiel-tailles-prix .taille { font-weight: 700; color: var(--bois-fonce); }
.essentiel-tailles-prix .prix { font-family: var(--font-titre); font-weight: 700; font-size: 1.1rem; color: var(--terracotta-fonce); }
.essentiel-tailles-prix .prix small { font-family: var(--font-corps); font-weight: 600; font-size: 0.68rem; color: var(--encre-douce); margin-left: 0.15em; }
.essentiel-paiement { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 0.88rem; color: var(--bois-fonce); }
.essentiel-paiement .icone { width: 1.3rem; height: 1.3rem; color: var(--foret); flex-shrink: 0; }
.essentiel-cta {
  background: var(--terracotta); border-color: var(--terracotta-fonce); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  text-decoration: none; font-weight: 700; transition: background-color 0.12s ease;
}
.essentiel-cta:hover, .essentiel-cta:focus-visible { background: var(--terracotta-fonce); }
.essentiel-cta .icone { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

/* ---------- Teaser simulateur (renvoi court vers la page dédiée) ---------- */
.teaser-simulateur { padding: 0.4rem 0; }
.teaser-simulateur-lien {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem; flex-wrap: wrap;
  background: var(--foret); color: #fff; text-decoration: none;
  padding: 1.1rem 1.5rem; border-radius: var(--rayon); text-align: center;
  font-weight: 600; transition: background-color 0.12s ease;
}
.teaser-simulateur-lien strong { font-family: var(--font-titre); font-weight: 700; }
.teaser-simulateur-lien:hover, .teaser-simulateur-lien:focus-visible { background: var(--foret-fonce); }
.teaser-simulateur-lien .icone { width: 1.3rem; height: 1.3rem; flex-shrink: 0; color: var(--creme-vive); }

/* ---------- Libellé "eyebrow" numéroté ---------- */
.eyebrow-num {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-corps); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--terracotta-fonce);
  margin-bottom: 0.6rem;
}
.eyebrow-num::before {
  content: ""; width: 1.6rem; height: 2px; background: var(--terracotta);
}
.simulateur .eyebrow-num { color: #f3c9a8; }
.simulateur .eyebrow-num::before { background: #f3c9a8; }

/* ---------- Séparateur bois (rondelle décorative) ---------- */
.separateur-buche {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 1.6rem;
}
.separateur-buche svg { flex-shrink: 0; }
.separateur-buche .trait { flex: 1; height: 3px; background: repeating-linear-gradient(90deg, var(--bois-clair) 0 10px, transparent 10px 16px); }

/* ---------- Sections génériques ---------- */
.section { padding: 3.2rem 0; }
.section-alt { background: var(--creme-carte); }
.section-eyebrow-free h2 { margin-bottom: 0.4rem; }
.section-intro { color: var(--encre-douce); max-width: 62ch; }

/* ---------- Essences ---------- */
.grille-essences {
  display: grid; gap: 1.1rem; margin-top: 1.8rem;
  /* Progression figée 1 → 2 → 4 : en auto-fit, les 4 essences tombaient en 3 + 1 orphelin
     selon la largeur. Aucune ligne incomplète désormais. */
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .grille-essences { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) { .grille-essences { grid-template-columns: repeat(4, 1fr); }
}
.carte-essence {
  background: var(--creme-vive); border: 2px solid var(--bordure); border-radius: var(--rayon);
  padding: 1.4rem 1.3rem; box-shadow: var(--ombre-tampon-sm);
}
.carte-essence .icone { width: 2.1rem; height: 2.1rem; color: var(--foret); margin-bottom: 0.6rem; }
.carte-essence h3 { margin-bottom: 0.35rem; font-size: 1.15rem; }
.carte-essence p { margin: 0; font-size: 0.95rem; color: var(--encre-douce); }

/* ---------- Simulateur ---------- */
.simulateur {
  background: var(--foret); color: var(--creme-vive);
  border-radius: 24px; padding: 2.2rem 1.5rem; margin-top: 1.6rem;
  border: 3px solid var(--foret-fonce);
}
.simulateur h1, .simulateur h2, .simulateur h3 { color: #fff; }
.simulateur .section-intro { color: #dfe9de; }
.simulateur-champs {
  display: flex; flex-direction: column; gap: 1.5rem; margin: 1.4rem 0 1.8rem;
  background: rgba(255,255,255,0.08); padding: 1.3rem 1.4rem; border-radius: var(--rayon);
}
.simulateur fieldset.champ-sim { border: 0; margin: 0; padding: 0; min-width: 0; }
.champ-sim label, .champ-sim-label { font-weight: 700; display: block; margin-bottom: 0.5rem; }

/* Slider "surface à chauffer" */
.champ-slider output {
  font-family: var(--font-titre); font-weight: 700; font-size: 1.1rem; color: #fff;
  background: rgba(255,255,255,0.16); padding: 0.1rem 0.65rem; border-radius: 999px; margin-left: 0.4rem;
}
.champ-slider input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px;
  margin-top: 0.8rem; cursor: pointer; outline: none;
  background: linear-gradient(to right, var(--terracotta) 0%, var(--terracotta) var(--fill, 10%), rgba(255,255,255,0.28) var(--fill, 10%), rgba(255,255,255,0.28) 100%);
}
.champ-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--creme-vive); border: 4px solid var(--terracotta); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.champ-slider input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--creme-vive); border: 4px solid var(--terracotta); cursor: pointer;
}
.champ-slider input[type="range"]::-moz-range-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.28); }
.champ-slider input[type="range"]::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--terracotta); }
.champ-slider input[type="range"]:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.slider-bornes { display: flex; justify-content: space-between; font-size: 0.78rem; color: #dfe9de; margin-top: 0.4rem; }

/* Groupes de boutons segmentés (pill toggle) : usage / isolation */
.simulateur-toggles { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .simulateur-toggles { grid-template-columns: 1fr 1fr; } }
.pill-toggle { display: flex; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.35); border-radius: 999px; padding: 4px; gap: 2px; }
.pill-toggle input { position: absolute; width: 0; height: 0; opacity: 0; }
.pill-toggle label {
  flex: 1; text-align: center; cursor: pointer; padding: 0.65rem 0.7rem; border-radius: 999px;
  font-weight: 700; font-size: 0.86rem; color: #eaf2e9; transition: background-color 0.15s ease, color 0.15s ease;
}
.pill-toggle input:checked + label { background: var(--terracotta); color: #fff; }
.pill-toggle input:focus-visible + label { outline: 3px solid #fff; outline-offset: 2px; }

.simulateur-resultat-steres { margin-bottom: 1.6rem; }
.simulateur-encart-steres {
  background: rgba(255,255,255,0.14); border: 2px solid rgba(255,255,255,0.35); border-radius: var(--rayon);
  padding: 1rem 1.3rem; font-size: 1.08rem; margin: 0; color: #fff;
}
.simulateur-encart-steres strong { color: var(--creme-vive); font-size: 1.25rem; }
.simulateur-disclaimer { font-size: 0.85rem; color: #dfe9de; margin: 1.6rem 0 0; max-width: 70ch; }

.detail-simulateur { background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.25); border-radius: var(--rayon); padding: 0.2rem 1.2rem; margin: 0; }
.detail-simulateur summary {
  cursor: pointer; font-weight: 700; color: #fff; padding: 0.9rem 1.6rem 0.9rem 0;
  position: relative; list-style: none; font-size: 1rem;
}
.detail-simulateur summary::-webkit-details-marker { display: none; }
.detail-simulateur summary::after {
  content: "+"; position: absolute; right: 0; top: 0.7rem; font-size: 1.4rem; color: var(--creme-vive);
  font-weight: 700; transition: transform 0.15s ease;
}
.detail-simulateur[open] summary::after { transform: rotate(45deg); }
.detail-simulateur > .grille-resultats { padding-bottom: 1.2rem; }

.grille-resultats { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.carte-resultat {
  background: var(--creme-vive); color: var(--encre); border-radius: var(--rayon);
  padding: 1.3rem; border: 3px solid transparent; position: relative;
}
.carte-resultat.mise-en-avant { border-color: var(--terracotta); }
.carte-resultat h4 {
  font-family: var(--font-titre); color: var(--bois-fonce); font-size: 1.2rem; margin: 0 0 0.7rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.carte-resultat dl { margin: 0; }
.carte-resultat dt { font-size: 0.82rem; color: var(--encre-douce); margin-top: 0.5rem; }
.carte-resultat dd { margin: 0; font-weight: 700; font-size: 1.02rem; }
.carte-resultat .livraison-note { font-size: 0.85rem; margin-top: 0.5rem; color: var(--foret-fonce); font-weight: 700; }
.carte-resultat .livraison-note.payante { color: var(--terracotta-fonce); }
.carte-resultat .total-final { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 2px dashed var(--bordure); font-size: 1.5rem; font-weight: 700; color: var(--terracotta-fonce); }

/* ---------- Zones desservies (département uniquement, pas de liste de communes) ---------- */
.zones-departements { list-style: none; padding: 0; margin: 1.4rem 0; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.zones-departements li {
  background: var(--foret); color: #fff;
  padding: 0.55rem 1.3rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
  box-shadow: var(--ombre-tampon-sm);
}
.zones-intro-prio { font-weight: 700; color: var(--foret-fonce); }
.zones-verif-cta {
  background: var(--creme-carte); border: 2px dashed var(--bois-clair); border-radius: var(--rayon);
  padding: 1.3rem 1.4rem; margin-top: 1.6rem;
}
.zones-verif-cta p { margin-bottom: 1rem; font-weight: 600; color: var(--bois-fonce); }
.zones-verif-cta .hero-cta { margin-top: 0; }

/* ---------- Timeline "Comment ça marche" ---------- */
.timeline-etapes {
  display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 1.8rem;
}
.etape-timeline { border-top: 3px solid var(--terracotta); padding-top: 1rem; }
.etape-timeline .etape-num {
  font-family: var(--font-titre); font-size: 2rem; font-weight: 700; color: var(--terracotta);
  display: block; margin-bottom: 0.3rem;
}
.etape-timeline h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.etape-timeline p { font-size: 0.95rem; color: var(--encre-douce); margin: 0; }

/* ---------- Avis clients (place réservée, Google en cours de création) ---------- */
.avis-grille { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 1.8rem; }
.carte-avis {
  background: var(--creme-vive); border: 2px solid var(--bordure); border-radius: var(--rayon);
  padding: 1.4rem; text-align: center;
}
.carte-avis .icone { width: 1.9rem; height: 1.9rem; color: var(--foret); margin: 0 auto 0.7rem; }
.carte-avis h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.carte-avis p { font-size: 0.92rem; color: var(--encre-douce); margin: 0; }
.avis-note-attente {
  text-align: center; margin-top: 1.6rem; font-size: 0.92rem; color: var(--encre-douce);
  max-width: 55ch; margin-inline: auto;
}

/* ---------- FAQ ---------- */
.faq-liste { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  background: var(--creme-vive); border: 2px solid var(--bordure); border-radius: var(--rayon-petit);
  padding: 0.2rem 1.2rem;
}
.faq-item summary {
  cursor: pointer; font-family: var(--font-titre); font-weight: 700; color: var(--bois-fonce);
  padding: 1rem 1.6rem 1rem 0; position: relative; list-style: none; font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0; top: 0.85rem; font-size: 1.5rem; color: var(--terracotta);
  font-weight: 700; transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 1rem; color: var(--encre-douce); }

/* ---------- CTA bande finale ---------- */
.cta-bande {
  background: var(--terracotta); color: #fff; text-align: center; padding: 2.25rem 1.25rem;
}
.cta-bande h2 { color: #fff; }
.cta-bande p { color: #fff6f2; margin: 0 auto 1.6rem; }
.cta-bande .hero-cta { justify-content: center; }
.cta-bande .btn-tel { background: #fff; color: var(--terracotta-fonce); }
.cta-bande .btn-tel:hover { background: var(--creme-vive); }
.cta-bande .btn-whatsapp { background: var(--foret-fonce); }
/* 3e bouton de la bande CTA (formulaire de contact). Le .btn-outline générique est pensé pour
   les fonds clairs : son bois-fonce sur le terracotta de la bande ne donne que 2,79:1.
   Contour et texte blancs ici, soit 4,83:1 sur le même fond. */
.cta-bande .btn-outline { border-color: #fff; color: #fff; background: transparent; }
.cta-bande .btn-outline:hover { background: #fff; color: var(--terracotta-fonce); }

.liens-savoir-plus {
  text-align: center; font-size: 0.92rem; color: var(--encre-douce);
  padding: 1.6rem 1.25rem; margin: 0;
  /* max-width:none annule la règle globale p { max-width: 68ch }, qui enfermait la ligne dans
     une boîte calée à gauche. text-wrap:balance répartit la coupure proprement si l'écran est
     trop étroit pour une seule ligne, au lieu de laisser « foire aux / questions » orphelin. */
  max-width: none;
  text-wrap: balance;
}
.liens-savoir-plus a { white-space: nowrap; }

/* ---------- Footer ---------- */
.pied {
  background: var(--foret-fonce); color: #e8ecdf; padding: 2.2rem 0 1.2rem;
}
.pied a { color: #fff; }
.pied h3 { color: #fff; font-size: 1.05rem; margin-bottom: 0.7rem; }
.pied-grille {
  display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 2rem;
}
.pied-logo {
  display: inline-flex; background: var(--creme-vive); padding: 0.5rem 0.9rem;
  border-radius: var(--rayon-petit); margin: 0 0 0.8rem;
}
.pied-logo-img { height: 36px; width: auto; display: block; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.5rem; }
.pied .btn { margin-top: 0.5rem; }
.pied-col-marque p { max-width: 32ch; }
.pied-adresse { margin-top: 0.6rem; font-size: 0.92rem; color: #cfd8c4; }
.pied-contact-liste { display: flex; flex-direction: column; gap: 0.5rem; }
.pied-contact-liste li { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; }
.pied-contact-liste .icone { width: 1.15em; height: 1.15em; color: var(--terracotta-clair); flex-shrink: 0; margin-top: 0.18em; }
.pied-contact-liste span { color: #e8ecdf; }
.pied-zones {
  margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid #3f5c48;
  font-size: 0.88rem; color: #cfd8c4;
  /* Centrée et tenue sur une ligne : le texte a été raccourci en conséquence. */
  text-align: center; max-width: none; text-wrap: balance;
}
.pied-zones a { white-space: nowrap; }
.pied-credits { font-size: 0.78rem; color: #b9c2ac; border-top: 1px solid #3f5c48; padding-top: 1.2rem; line-height: 1.7; }
.pied-bas { text-align: center; font-size: 0.8rem; color: #a6b09a; margin-top: 1.2rem; max-width: none; }

/* ---------- Tableaux (produits) ---------- */
.table-wrap { overflow-x: auto; margin: 1.6rem 0; }
.table-produits {
  width: 100%; min-width: 0; border-radius: var(--rayon); overflow: hidden;
  border: 2px solid var(--bordure); table-layout: fixed;
}
.table-produits th, .table-produits td { padding: 0.75rem 0.6rem; text-align: left; word-break: normal; overflow-wrap: break-word; }
@media (min-width: 560px) {
  .table-produits th, .table-produits td { padding: 0.9rem 1.1rem; }
}
.table-produits thead th {
  background: var(--bois-fonce); color: #fff; font-family: var(--font-titre); font-size: 1rem;
}
.table-produits tbody tr:nth-child(odd) { background: var(--creme-vive); }
.table-produits tbody tr:nth-child(even) { background: var(--creme-carte); }
.table-produits td.prix { font-weight: 700; color: var(--terracotta-fonce); font-size: 1.1rem; }

/* ---------- Articles génériques (astuces, à propos, légal) ---------- */
.article-page { padding: 2.6rem 0 3.5rem; }
.article-page .container { max-width: 880px; }
.entete-page { margin-bottom: 2rem; }
.entete-page .fil-ariane { font-size: 0.85rem; color: var(--encre-douce); margin-bottom: 0.6rem; }
.entete-page .fil-ariane a { color: var(--foret-fonce); }
article section { margin-bottom: 2.4rem; }
article section:last-child { margin-bottom: 0; }
.article-page img.illustration {
  border-radius: var(--rayon); border: 5px solid var(--creme-vive); box-shadow: var(--ombre-tampon-sm);
  margin: 1.2rem 0 1.4rem; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
}
.galerie-filiere { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 1.4rem 0; }
.galerie-filiere figure { margin: 0; }
.galerie-filiere img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--rayon); border: 5px solid var(--creme-vive); box-shadow: var(--ombre-tampon-sm);
}
.galerie-filiere figcaption {
  text-align: center; margin-top: 0.6rem; font-weight: 700; color: var(--bois-fonce); font-size: 0.92rem;
}

.legal-section h2 { border-bottom: 2px solid var(--bordure); padding-bottom: 0.4rem; }
.legal-section dl { margin: 0.6rem 0; }
.legal-section dt { font-weight: 700; color: var(--bois-fonce); margin-top: 0.6rem; }
.legal-section dd { margin: 0 0 0.2rem; }

/* ---------- Contact ---------- */
.contact-grille { display: grid; gap: 2.4rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
@media (min-width: 880px) { .contact-grille { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: stretch; } }
.carte-coordonnees {
  background: var(--creme-carte); border: 2px solid var(--bordure); border-radius: var(--rayon);
  padding: 1.6rem;
}
.carte-coordonnees h2 { font-size: 1.3rem; }
.carte-coordonnees ul { list-style: none; padding: 0; margin: 1rem 0; }
.carte-coordonnees li { margin-bottom: 0.9rem; display: flex; gap: 0.6rem; align-items: flex-start; }
.carte-coordonnees .icone { color: var(--foret); margin-top: 0.15rem; }
.carte-coordonnees .hero-cta { margin-top: 1.2rem; }

.formulaire { background: var(--creme-vive); border: 2px solid var(--bordure); border-radius: var(--rayon); padding: 1.6rem; }
.champ { margin-bottom: 1.1rem; }
.champ label { display: block; font-weight: 700; margin-bottom: 0.35rem; color: var(--bois-fonce); }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: 0.7rem 0.85rem; border-radius: var(--rayon-petit); border: 2px solid var(--bordure);
  font-family: var(--font-corps); font-size: 1rem; background: #fff; color: var(--encre);
}
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--foret); }
/* Case de consentement à la prospection (lot 36). Hors de `.champ` : la règle width: 100% des
   champs étirerait la case sur toute la largeur. Le libellé reste en graisse normale — c'est
   un texte à lire, pas un intitulé de champ. */
.consentement { display: flex; gap: 0.65rem; align-items: flex-start; margin: 0.4rem 0 1.2rem; }
.consentement input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--foret); }
.consentement label { font-size: 0.92rem; line-height: 1.5; color: var(--encre); }
.champ textarea { resize: vertical; min-height: 130px; }
.champ-requis { color: var(--terracotta-fonce); }
.honeypot-field { position: absolute; left: -9999px; top: -9999px; }
.formulaire .note-rgpd { font-size: 0.82rem; color: var(--encre-douce); margin-top: 0.6rem; }
/* Échec d'envoi : texte en --encre (contraste > 12:1 sur la crème), la couleur d'alerte
   ne sert qu'au liseré — le terracotta standard ne passe pas AA en petit texte. */
.alerte-envoi { background: var(--creme-carte); border-left: 5px solid var(--terracotta-fonce); border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0; padding: 0.9rem 1.1rem; margin: 0 0 1.2rem; color: var(--encre); font-weight: 600; }
.alerte-envoi[hidden] { display: none; }
.confirmation-envoi { background: #e5efe1; border: 2px solid var(--foret); border-radius: var(--rayon); padding: 1.2rem; margin-bottom: 1.4rem; color: var(--foret-fonce); font-weight: 700; }

/* ---------- Astuces cards ---------- */
.astuce-liste-etapes { padding-left: 1.3rem; }
.astuce-liste-etapes li { margin-bottom: 0.5rem; }
.encadre-conseil {
  background: var(--creme-carte); border-left: 5px solid var(--terracotta); border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 1.1rem 1.3rem; margin: 1.2rem 0; font-weight: 600; color: var(--bois-fonce);
}

/* ---------- Utilitaires ---------- */
.mt-0 { margin-top: 0; }
.centre { text-align: center; }

/* Note précontractuelle sous le formulaire (conditions de vente) — même traitement discret
   que la note RGPD, dont elle est le pendant. */
.formulaire .note-cgv { font-size: 0.82rem; color: var(--encre-douce); margin-top: 1rem; }

/* Horaires d'ouverture affichés dans le pied de page — ils n'apparaissaient jusqu'ici que dans
   le JSON-LD, avec des valeurs placeholder. Un visiteur ne savait pas quand appeler. */
.pied-horaires { margin: 0.9rem 0 0; font-size: 0.92rem; color: #cfd8c4; }

/* --- Utilitaires d'espacement (remplacent les styles inline, pour permettre une CSP
   style-src sans 'unsafe-inline') --- */
.u-mt-1 { margin-top: 1rem; }
.u-mt-2 { margin-top: 2.4rem; }

/* Prix unitaire dans les cartes de résultat du simulateur. Était appliqué en style inline
   depuis simulateur.js : la CSP stricte (style-src 'self') l'aurait bloqué. */
.carte-resultat h4 small {
  font-weight: 600;
  color: var(--encre-douce);
  font-size: 0.8rem;
}

/* Bouton « Laisser un avis sur Google » sous les engagements. */
.avis-cta { margin: 1rem 0 0; text-align: center; max-width: none; }

/* Colonne « Liens utiles » : 9 entrées, elle pilotait à elle seule la hauteur du pied.
   Sur deux colonnes en desktop, le pied retrouve un équilibre. */
@media (min-width: 900px) { .pied-liens { columns: 2; column-gap: 1.5rem; } }

/* ---------- Bande « De la forêt à votre bûcher » ---------- */
.filiere-chapeau { max-width: 62ch; }
.filiere-bande { position: relative; margin-top: 1.6rem; --filiere-largeur: clamp(240px, 62vw, 400px); }

/* Conteneur à défilement NATIF : le script ne fait que pousser scrollLeft, si bien que le
   doigt, la molette, le clavier et la barre de défilement continuent de fonctionner. */
/* Gouttière simple, et non `calc(50% - largeur / 2)` comme jusqu'au 04/10 : ce remplissage
   valait 520 px à 1440 et se lisait comme deux emplacements vides en bout de bande. Il ne
   servait qu'à laisser la première et la dernière photo atteindre le centre ; la boucle du
   lot 26 l'a rendu inutile. Son retrait impose `scroll-snap-align: start` ci-dessous — sans
   lui, centrer la première photo demanderait un scrollLeft négatif — et le calcul des arrêts
   de js/filiere.js doit viser le même bord, sinon le snap recale la bande après chaque pas. */
.filiere-liste { display: flex; width: max-content; gap: 1.1rem; list-style: none; margin: 0; padding: 0 1.25rem 0.9rem; }
.filiere-piste {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--bois-clair) transparent;
}
.filiere-piste::-webkit-scrollbar { height: 8px; }
.filiere-piste::-webkit-scrollbar-thumb { background: var(--bois-clair); border-radius: 999px; }
.filiere-item { flex: 0 0 auto; width: var(--filiere-largeur); scroll-snap-align: start; }
.filiere-item figure { margin: 0; }
.filiere-item img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--rayon); border: 5px solid var(--creme-vive); box-shadow: var(--ombre-tampon-sm);
}
.filiere-item figcaption {
  text-align: center; margin-top: 0.6rem; font-weight: 700;
  color: var(--bois-fonce); font-size: 0.9rem;
}
.filiere-pause[hidden] { display: none; }
.filiere-pause {
  display: block; margin: 0.9rem auto 0;
  font: inherit; font-size: 0.85rem; font-weight: 700;
  background: transparent; color: var(--bois-fonce);
  border: 2px solid var(--bordure); border-radius: 999px;
  padding: 0.45rem 1.1rem; cursor: pointer;
}
.filiere-pause:hover { background: var(--creme-vive); border-color: var(--bois-clair); }
/* Plus de media query d'alignement ici : les marges de centrage ci-dessus doivent
   s'appliquer à toutes les tailles, sinon les photos d'extrémité ne peuvent pas
   atteindre le centre de la fenêtre. */

/* Pendant le défilement automatique seulement : scroll-snap ramènerait la position au point
   d'ancrage le plus proche à chaque frame et annulerait l'avance. Il reste actif pour le
   défilement à la main, où il aide à caler les vignettes. */
.filiere-piste--auto { scroll-snap-type: none; }

/* L'en-tête est collant (126 px en desktop, 75 px en mobile) : sans scroll-margin, toute
   arrivée sur une ancre — #titre-filiere depuis À propos, #zones-desservies depuis le pied —
   place le titre visé SOUS l'en-tête, invisible. */
:target, [id] { scroll-margin-top: 90px; }
@media (min-width: 780px) { :target, [id] { scroll-margin-top: 140px; } }

/* ---------- Avis clients (js/avis.js) ---------- */
.avis-google-titre { text-align: center; margin: 2.4rem 0 0.6rem; font-size: 1.25rem; }
.avis-mention {
  text-align: center; max-width: 62ch; margin: 0 auto 1.6rem;
  font-size: 0.85rem; color: var(--encre-douce);
}
.avis-google-grille {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.carte-temoignage {
  background: var(--creme-vive); border: 2px solid var(--bordure);
  border-radius: var(--rayon); padding: 1.3rem;
}
.avis-etoiles { display: flex; gap: 0.15rem; margin: 0 0 0.6rem; color: var(--terracotta-fonce); }
.avis-etoiles svg { width: 1.05rem; height: 1.05rem; }
.avis-texte { margin: 0 0 0.8rem; font-size: 0.95rem; }
.avis-auteur { margin: 0; font-size: 0.85rem; color: var(--encre-douce); font-weight: 600; }

/* ---------- Section « Nous livrons près de chez vous » : tout centré ---------- */
/* Ciblée par aria-labelledby plutôt que par une classe : la section n'en porte pas de
   spécifique, et cet attribut est stable — il sert déjà de lien avec le titre. */
[aria-labelledby="titre-zones"] .container { text-align: center; }
[aria-labelledby="titre-zones"] .section-intro { margin-inline: auto; }
[aria-labelledby="titre-zones"] .zones-departements { justify-content: center; }
[aria-labelledby="titre-zones"] .zones-verif-cta { max-width: 44rem; margin-inline: auto; }
[aria-labelledby="titre-zones"] .zones-verif-cta .hero-cta { justify-content: center; }

/* ---------- Page simulateur : outil à gauche, méthode à droite ---------- */
/* L'outil reçoit plus de largeur : il contient un curseur, des pastilles et trois cartes
   de résultat, là où la méthode n'est que du texte, qui se lit bien en colonne étroite.
   Une seule colonne sous 960 px : à deux, le curseur de surface deviendrait inutilisable. */
.simulateur-colonnes { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) {
  .simulateur-colonnes { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; }
}
.simulateur-cta-final { text-align: center; }
.simulateur-cta-final p { margin-inline: auto; max-width: 52ch; }
.simulateur-cta-final .hero-cta { justify-content: center; }

/* ---------- Page contact : les deux blocs à la même hauteur ---------- */
/* Sans cela, la carte des coordonnées s'arrête à son contenu et laisse un vide à côté
   d'un formulaire deux fois plus haut. */
.contact-grille > * { min-width: 0; }
.contact-grille .carte-coordonnees { display: flex; flex-direction: column; }

/* ---------- Très grands écrans ---------- */
/* Mesuré : sur un 34 pouces (3440 px), un conteneur figé à 1180 px n'occupe que 34 % de
   la largeur. On l'élargit par paliers plutôt que d'un coup — les grilles en
   `auto-fit` gagnent une colonne, et la longueur des lignes de texte reste bornée par
   les `max-width` en `ch` posées sur les paragraphes, qui ne dépendent pas du conteneur. */
@media (min-width: 1600px) { :root { --conteneur: 1360px; } }
@media (min-width: 2200px) { :root { --conteneur: 1560px; } }
@media (min-width: 3000px) { :root { --conteneur: 1760px; } }

/* Conteneur élargi = lignes de texte plus longues. Mesuré à 3440 px avant cette règle :
   jusqu'à 1720 px de large, soit plus de 200 caractères par ligne — l'œil perd la ligne
   suivante. On borne la mesure de lecture à 74 caractères, seuil au-delà duquel la
   lecture se dégrade nettement.
   Pas de `margin-inline: auto` ici : dans un bloc aligné à gauche, il décalerait le texte
   vers la droite. Les sections centrées ont leur propre règle, posée plus haut. */
@media (min-width: 1500px) {
  main .container p,
  main .container li,
  main .container dd,
  main .container figcaption { max-width: 74ch; }
  /* Il y avait ici une règle qui posait `margin-inline: auto` sur `.section-intro` et sur
     les paragraphes de note et d'appel à l'action, pour recentrer leur boîte. Elle était
     fausse : ces sélecteurs attrapent aussi des sections alignées à GAUCHE, où centrer la
     boîte décale le paragraphe vers la droite pendant que le titre reste en place.
     Mesuré avant retrait : jusqu'à 531 px d'écart entre « Un bois choisi pour bien
     chauffer tout l'hiver » et son chapeau, dès 1600 px de large.
     Les blocs réellement centrés ont chacun leur règle ciblée, posée plus haut. */
}

/* `.article-page .container` est plafonné à 880 px : c'est une largeur de lecture, juste
   pour un texte suivi, trop étroite pour deux colonnes. La page simulateur s'en affranchit. */
.article-page--large .container { max-width: var(--conteneur); }
/* Les deux colonnes doivent démarrer à la même hauteur : sans cela, le titre de la colonne
   de droite porte sa marge haute et décroche de quelques dizaines de pixels. */
.simulateur-colonnes > * { margin-top: 0; }
.simulateur-colonnes > * > :first-child,
.simulateur-colonnes h2:first-child { margin-top: 0; }

/* ---------- Simulateur : les deux colonnes forment une paire de même taille ---------- */
/* `align-items: start` laissait chaque colonne à la hauteur de son contenu. En `stretch`,
   les deux blocs font la même hauteur et se répondent.
   Le bloc méthode reprend les mêmes métriques que le bloc simulateur — rayon, épaisseur de
   bordure, générosité du padding — mais garde un fond clair : reprendre le vert foncé
   imposerait d'inverser les couleurs de son texte, de ses liens et de ses `<strong>`, dont
   aucun n'est prévu pour un fond sombre. */
@media (min-width: 960px) {
  .simulateur-colonnes { align-items: stretch; }
}
.simulateur-colonnes > section:not(.simulateur) {
  background: var(--creme-vive);
  border: 3px solid var(--bordure);
  border-radius: 24px;
  padding: 2.2rem 1.5rem;
}
.simulateur-colonnes > section:not(.simulateur) > :first-child { margin-top: 0; }
.simulateur-colonnes > section:not(.simulateur) > :last-child { margin-bottom: 0; }

/* Une marge basse sur une seule des deux colonnes rabotait sa carte de 38 px malgré le
   stretch : les boîtes font bien la hauteur de la rangée, marges déduites. */
.simulateur-colonnes > * { margin-bottom: 0; }

/* ---------- Retouches ---------- */
/* Les blocs du simulateur touchaient le bloc « Une estimation à affiner ? » : la marge
   basse des colonnes avait été neutralisée pour égaliser leurs hauteurs, il faut donc la
   porter sur la grille elle-même. */
.simulateur-colonnes { margin-bottom: 3.5rem; }

/* Un conteneur qui centre son texte doit aussi centrer la BOÎTE de ses enfants : un enfant
   à largeur bornée reste sinon collé à gauche, et seul son texte paraît centré. */
.cta-bande > *,
[aria-labelledby="titre-zones"] .container > * { margin-inline: auto; }
/* Ce paragraphe a sa propre largeur de lecture : sans marges automatiques, sa boîte reste
   à gauche dans l'encadré, ce qui se voit d'une vingtaine de pixels. */
.zones-verif-cta p { margin-inline: auto; }

/* ---------- Page Livraison, section « Zones desservies » ---------- */
/* La rangée occupait toute la largeur de l'encadré, boutons tassés à gauche. */
.zones-verif-cta .hero-cta,
#zones-desservies .hero-cta { justify-content: center; }

/* Cette phrase tenait sur deux lignes à cause de la largeur de lecture. Elle est courte et
   sert de renvoi, pas de texte suivi : on lève la contrainte et on la centre. La
   spécificité doit dépasser celle du plafond `main .container p`, d'où le sélecteur long. */
main .container p.zones-renvoi-contact,
p.zones-renvoi-contact {
  max-width: none;
  text-align: center;
  margin-inline: auto;
  margin-top: 1.2rem;
}

/* 38 px entre les sections de ces pages, contre 133 et 206 dans les deux autres variantes :
   le rythme vertical était nettement plus serré ici. */
article section { margin-bottom: 4rem; }

/* ---------- Bandeau de pré-pied : deux renvois côte à côte ---------- */
/* La ligne des zones vivait au bas de la colonne Contact, où elle passait pour une
   information de contact alors que c'en est une de couverture géographique. Elle est ici
   au même niveau que le renvoi vers les astuces et la FAQ : deux renvois de même nature.
   Une seule colonne sous 720 px, sinon les deux blocs deviennent illisibles. */
.pied-renvois {
  display: grid; gap: 1.5rem;
  padding-bottom: 2.2rem; margin-bottom: 2.2rem;
  border-bottom: 1px solid var(--bois-clair);
}
@media (min-width: 720px) { .pied-renvois { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.pied-renvoi { text-align: center; }
.pied-renvoi h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.pied-renvoi p { margin: 0 0 0.4rem; font-size: 0.92rem; max-width: 42ch; margin-inline: auto; }
.pied-renvoi p:last-child { margin-bottom: 0; }

/* `.avis-cta` est centré, et le plafond de mesure de lecture l'emporte sur son
   `max-width: none` (sélecteur plus spécifique). Sa boîte restait donc à gauche au-delà de
   1500 px. Règle ciblée, plutôt que le sélecteur large retiré plus haut, qui attrapait
   aussi des blocs alignés à gauche. */
.avis-cta { margin-inline: auto; }

/* ---------- Correctifs du 29/09 ---------- */

/* 1. Panneau « Voir le détail par longueur de bûche ».
   Depuis la mise en deux colonnes, le panneau ne fait plus que ~530 px : avec
   `minmax(220px, 1fr)`, la grille tombait à 2 colonnes et la troisième carte passait
   seule à la ligne. On impose trois colonnes égales, et on réduit la typographie des
   prix pour qu'ils tiennent dans une carte plus étroite. */
.detail-simulateur .grille-resultats { grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.detail-simulateur .carte-resultat { padding: 0.9rem; }
.detail-simulateur .carte-resultat h4 { font-size: 0.95rem; }
.detail-simulateur .carte-resultat h4 small { display: block; font-size: 0.72rem; }
.detail-simulateur .carte-resultat dl { font-size: 0.78rem; }
.detail-simulateur .total-final { font-size: 1rem; }
.detail-simulateur .livraison-note { font-size: 0.75rem; }
/* Sous 700 px la contrainte de trois colonnes devient illisible : on laisse empiler. */
@media (max-width: 700px) {
  .detail-simulateur .grille-resultats { grid-template-columns: 1fr; }
}

/* 2. Phrase de clôture de la FAQ : bornée à 604 px, elle laissait « contact. » seul sur
   une deuxième ligne alors que 676 px suffisaient et que 840 px étaient disponibles. */
#titre-faq-cta + p { max-width: none; text-wrap: pretty; }

/* 3. Page Contact : les deux boutons faisaient 238 et 200 px. `flex: 1` leur donne la
   même largeur, et ils occupent toute la carte. */
.carte-coordonnees .hero-cta { flex-direction: column; gap: 0.6rem; }
.carte-coordonnees .hero-cta .btn { width: 100%; text-align: center; }

/* ---------- Liste des communes, pages par département ---------- */
/* Jusqu'à 242 noms : en une seule colonne la page deviendrait interminable. Le nombre de
   colonnes suit la largeur, et `break-inside: avoid` empêche qu'un nom soit coupé entre
   deux colonnes. */
.communes-liste {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  columns: 2; column-gap: 1.6rem;
  font-size: 0.88rem; color: var(--encre-douce);
}
.communes-liste li { break-inside: avoid; padding: 0.15rem 0; }
.communes-liste li span { color: var(--bois); font-size: 0.82em; }
@media (min-width: 560px) { .communes-liste { columns: 3; } }
@media (min-width: 900px) { .communes-liste { columns: 4; } }
@media (min-width: 1400px) { .communes-liste { columns: 5; } }
/* Renvois vers les pages par département, sous la liste des zones. */
.zones-detail-depts { margin-top: 1.2rem; font-size: 0.92rem; }
.zones-detail-depts a { font-weight: 600; white-space: nowrap; }