/* ==========================================================================
   CHEMINÉES BROYE — système de design bespoke
   Registre « âtre éditorial » : parchemin clair / bandes braise sombres,
   cartes à bordure franche (pas de verre ni de flou), grain statique,
   illustration vectorielle du foyer plutôt que glassmorphism.
   Le contenu ne dépend jamais du JS ni du scroll pour être visible.
   ========================================================================== */

/* ---- Polices auto-hébergées (variables, latin) ---- */
@font-face {
  font-family: 'Literata';
  src: url('../fonts/literata-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  /* Parchemin (bandes claires) */
  --parchemin:   #f7f0e3;
  --parchemin-2: #efe3cd;
  --papier:      #fffaf1;

  /* Braise (bandes sombres) */
  --suie:      #241a13;
  --suie-2:    #34261a;
  --creme:     #f4e9d8;
  --creme-2:   #d9c6a9;

  /* Encre (texte sur parchemin) */
  --encre:     #2c2016;
  --encre-2:   #5c4c3b;
  --encre-3:   #786650; /* ratio 4.86:1 sur --parchemin — corrigé pour AA (était 3.75:1) */

  /* Accent — braise / terre cuite */
  --braise:      #b5451f;
  --braise-vive: #e0692f; /* ratio 5.06:1 en texte sur --suie — corrigé pour AA (était 4.40:1) */
  --braise-fonce:#8a3216;
  --or-fume:     #b9863f;

  --ligne:        rgba(44,32,22,.16);
  --ligne-sombre: rgba(244,233,216,.18);

  --ombre-carte: 0 1px 0 rgba(44,32,22,.06), 0 14px 30px -18px rgba(44,32,22,.35);
  --ombre-cta:   0 10px 24px -10px rgba(181,69,31,.55);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;

  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --container: 74rem;
  --gutter: clamp(1.125rem, 4vw, 2rem);

  --f-titre: 'Literata', Georgia, serif;
  --f-texte: 'Manrope', system-ui, -apple-system, sans-serif;
  --fs-h1: clamp(2.6rem, 1.1rem + 6.4vw, 4.6rem);
  --fs-h2: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem);
  --fs-h3: 1.15rem;
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-chiffre: clamp(2.1rem, 1.4rem + 2.8vw, 3.1rem);

  --z-entete: 40;
  --z-nav: 50;
}

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

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

body {
  margin: 0;
  background: var(--parchemin);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grain statique — signature de texture du site, jamais animé */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Halos lumineux (signature "premium/glow") ----
   Deux halos flous par section porteuse (::before/::after), qui dérivent
   lentement. Toujours en z-index:0, sous .wrap (z-index:1) donc jamais
   au-dessus du texte ni des CTA. */
@keyframes derive-halo {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(4%,-5%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .intro::before, .intro::after,
  .bande-sombre::after,
  .devis-section::after { animation: none; }
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 560;
  line-height: 1.15;
  margin: 0 0 .6em;
  color: var(--encre);
  letter-spacing: -.01em;
}
h1 { font-size: var(--fs-h1); font-weight: 480; line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 650; }
em { font-style: italic; color: var(--braise); }
.intro h1 em, .intro-page h1 em {
  display: inline-block;
  /* Padding généreux + marge négative égale pour compenser visuellement :
     -webkit-background-clip:text ne peint le dégradé QUE dans la boîte de
     fond de l'élément (padding-box). Un simple line-height desserré ne
     suffit pas à garantir assez de marge (dépend de la répartition du
     "leading" par le moteur de rendu) — le padding, lui, agrandit la boîte
     de façon déterministe. Sans cette marge, les fioritures de l'italique
     Literata (jambages qui débordent largement la boîte em standard)
     tombent hors de la zone peinte et paraissent "coupées" net. */
  padding-block: .22em; margin-block: -.22em;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .intro h1 em, .intro-page h1 em {
    background: linear-gradient(135deg, var(--braise-vive) 10%, var(--or-fume) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  }
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
small { font-size: var(--fs-small); color: var(--encre-2); }

.bande-sombre h1, .bande-sombre h2, .bande-sombre h3 { color: var(--creme); }
.bande-sombre em { color: var(--braise-vive); }
.bande-sombre p, .bande-sombre li { color: var(--creme-2); }
.bande-sombre small { color: var(--creme-2); }
.bande-sombre a { color: var(--creme); text-decoration-color: var(--braise-vive); }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--suie); color: var(--creme);
  padding: .8em 1.2em; z-index: 100; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2.5px solid var(--braise); outline-offset: 3px; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }

/* ---- Boutons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-texte); font-weight: 700; font-size: .98rem;
  padding: .85em 1.5em; border-radius: var(--r-sm);
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1.5px); }
.btn-braise {
  background: linear-gradient(135deg, var(--braise-vive), var(--braise) 65%, var(--braise-fonce));
  color: #fff8ef; box-shadow: var(--ombre-cta);
}
.btn-braise:hover {
  background: linear-gradient(135deg, var(--braise-vive), var(--or-fume));
  box-shadow: 0 16px 36px -10px rgba(216,90,44,.65), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.bande-claire .btn-contour { border-color: var(--encre); color: var(--encre); background: transparent; }
.bande-claire .btn-contour:hover { background: var(--encre); color: var(--parchemin); }
.bande-sombre .btn-contour { border-color: var(--ligne-sombre); color: var(--creme); background: transparent; }
.bande-sombre .btn-contour:hover { background: rgba(244,233,216,.1); }

/* ---- En-tête ---- */
.entete {
  position: sticky; top: 0; z-index: var(--z-entete);
  background: var(--papier);
  border-bottom: 1px solid var(--ligne);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .entete {
    background: rgba(255,250,241,.78);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
  }
}
.entete .wrap { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; gap: 1.5rem; }
.marque {
  display: flex; align-items: center; gap: .55em;
  font-family: var(--f-titre); font-size: 1.2rem; font-weight: 600;
  text-decoration: none; color: var(--encre); white-space: nowrap;
}
.marque span { color: var(--braise); }
nav[aria-label="Navigation principale"] {
  display: flex; align-items: center; gap: 1.75rem;
}
nav[aria-label="Navigation principale"] a {
  font-size: .96rem; font-weight: 600; text-decoration: none; color: var(--encre-2);
  padding: .3em 0; border-bottom: 2px solid transparent;
}
nav[aria-label="Navigation principale"] a:hover,
nav[aria-label="Navigation principale"] a[aria-current="page"] { color: var(--braise); border-color: var(--braise); }
.cta-entete { margin-left: .25rem; }
.nav-mobile-cta { display: none; }
.bascule {
  display: none; background: none; border: none; color: var(--encre); cursor: pointer; padding: .4em;
}
.bascule .icone-menu, .bascule .icone-fermer { width: 22px; height: 22px; flex-shrink: 0; }

@media (max-width: 860px) {
  nav[aria-label="Navigation principale"] {
    position: fixed; inset: 4.5rem 0 0 0; z-index: var(--z-nav);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    padding: .5rem var(--gutter) 2rem;
    overflow-y: auto;
  }
  nav[aria-label="Navigation principale"].nav-ouverte { opacity: 1; transform: translateY(0); pointer-events: auto; }
  nav[aria-label="Navigation principale"] a {
    padding: 1em 0; border-bottom: 1px solid var(--ligne); font-size: 1.05rem;
  }
  .cta-entete { display: none; }
  .nav-mobile-cta { display: block; margin-top: .5rem; text-align: center; }
  .bascule { display: block; }
  .icone-fermer { display: none; }
  .bascule[aria-expanded="true"] .icone-menu { display: none; }
  .bascule[aria-expanded="true"] .icone-fermer { display: block; }
  body.nav-verrou { overflow: hidden; }
}

/* ---- Fil d'Ariane ---- */
.fil-ariane { font-size: .9rem; color: var(--encre-3); margin-bottom: 1.2rem; }
.fil-ariane a { text-decoration: underline; text-decoration-color: var(--ligne); }
.bande-sombre .fil-ariane { color: var(--creme-2); }

/* ---- Étiquettes (petits badges) ---- */
.etiquette {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  padding: .4em .9em; border-radius: 999px; margin-bottom: 1.1em;
  background: linear-gradient(135deg, rgba(181,69,31,.14), rgba(185,134,63,.1));
  color: var(--braise-fonce);
  border: 1px solid rgba(181,69,31,.25);
}
.bande-sombre .etiquette { background: rgba(244,233,216,.1); color: var(--creme); border-color: var(--ligne-sombre); }
.etiquettes-data { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.3rem 0; }
.etiquettes-data .etiquette { margin: 0; }

/* ---- Hero / intro ---- */
.intro { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem); background: var(--parchemin); position: relative; overflow: clip; }
.intro::before, .intro::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  animation: derive-halo 24s ease-in-out infinite;
}
/* Mesh à deux foyers — plus grand, plus saturé, façon "aurora" des refs
   Dribbble (Clearbit/Novify), transposé dans la palette braise/or plutôt
   que violet/bleu. */
.intro::before {
  width: 46rem; height: 46rem; top: -18rem; right: -14rem; filter: blur(75px);
  background:
    radial-gradient(circle at 38% 35%, rgba(216,90,44,.4), transparent 55%),
    radial-gradient(circle at 65% 68%, rgba(185,134,63,.3), transparent 60%);
}
.intro::after {
  width: 26rem; height: 26rem; bottom: -9rem; left: -7rem; filter: blur(65px);
  background: radial-gradient(circle, rgba(181,69,31,.26), transparent 68%);
  animation-direction: reverse; animation-duration: 29s;
}
.intro .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.intro-page .wrap { grid-template-columns: 1fr; max-width: 46rem; }
@media (max-width: 860px) {
  .intro .wrap { grid-template-columns: 1fr; }
  .intro-media { margin-top: 2.5rem; max-width: 26rem; }
  .badge-flottant { max-width: 11rem; padding: .8rem 1rem; }
  .badge-flottant .valeur { font-size: 1.4rem; }
  .badge-flottant .libelle { font-size: .74rem; }
  .badge-flottant--haut { top: -.8rem; right: -.6rem; }
  .badge-flottant--bas { bottom: -.8rem; left: -.6rem; }
}
.intro .lead { font-size: 1.15rem; color: var(--encre-2); max-width: 42rem; }
.intro-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.6rem 0 1rem; }
.intro-note { font-size: .9rem; color: var(--encre-3); }

.intro-media { position: relative; }
.foyer-illu {
  width: 100%; height: auto; border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--suie), var(--suie-2));
  box-shadow: var(--ombre-carte);
}

/* ---- Photo de foyer (hero réel) + badge flottant ---- */
.intro-photo {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--ombre-carte); aspect-ratio: 4 / 5;
}
.intro-photo img {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg);
}
.intro-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(36,26,19,0) 45%, rgba(36,26,19,.55) 100%);
  pointer-events: none;
}
.badge-flottant {
  position: absolute; z-index: 2; max-width: 15rem;
  border: 1px solid transparent; border-radius: var(--r-md);
  background:
    linear-gradient(rgba(36,26,19,.72), rgba(36,26,19,.72)) padding-box,
    linear-gradient(135deg, rgba(244,233,216,.5), rgba(216,90,44,.4) 45%, rgba(244,233,216,.1)) border-box;
  padding: 1rem 1.2rem;
  color: var(--creme);
  box-shadow: var(--ombre-carte), 0 0 48px -8px rgba(216,90,44,.6);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .badge-flottant { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
}
.badge-flottant .valeur {
  font-family: var(--f-titre); font-size: 1.9rem; color: var(--braise-vive); display: block;
  padding-top: .22em; margin-top: -.22em; margin-bottom: .2rem;
}
.badge-flottant .libelle { font-size: .82rem; color: var(--creme-2); font-weight: 600; }
.badge-flottant--haut { top: -1.2rem; right: -1rem; }
.badge-flottant--bas { bottom: -1.2rem; left: -1rem; }
@media (max-width: 640px) {
  .badge-flottant--haut { top: .8rem; right: .8rem; }
  .badge-flottant--bas { bottom: .8rem; left: .8rem; }
}

/* ---- Bandeau de réassurance ---- */
.garanties { background: var(--suie); border-top: 1px solid var(--ligne-sombre); border-bottom: 1px solid var(--ligne-sombre); }
.garanties ul { list-style: none; margin: 0; padding: .95rem 0; display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; justify-content: center; }
.garanties li { display: flex; align-items: center; gap: .55em; font-size: .92rem; font-weight: 600; color: var(--creme); }
.garanties svg { color: var(--braise-vive); flex-shrink: 0; }

/* ---- Bandes de section ---- */
.bande-claire { background: var(--parchemin); padding: var(--section-y) 0; }
.bande-claire:nth-of-type(even) { background: var(--parchemin-2); }
.bande-sombre {
  position: relative; overflow: hidden;
  background:
    radial-gradient(55% 65% at 88% 8%, rgba(216,90,44,.34), transparent 70%),
    radial-gradient(50% 60% at 4% 96%, rgba(185,134,63,.26), transparent 70%),
    var(--suie);
  padding: var(--section-y) 0; color: var(--creme-2);
}
.bande-sombre::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .09; mix-blend-mode: overlay;
}
.bande-sombre::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  width: 42rem; height: 42rem; top: 5%; right: -16rem; filter: blur(80px);
  background:
    radial-gradient(circle at 40% 40%, rgba(216,90,44,.4), transparent 55%),
    radial-gradient(circle at 65% 65%, rgba(185,134,63,.28), transparent 60%);
  animation: derive-halo 27s ease-in-out infinite;
}

.intitule { max-width: 46rem; margin-bottom: 2.4rem; }
.intitule .intro-texte { font-size: 1.08rem; color: var(--encre-2); }
.bande-sombre .intitule .intro-texte { color: var(--creme-2); }

/* ---- Grille de fiches ---- */
.grille-fiches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
@media (max-width: 900px) { .grille-fiches { grid-template-columns: 1fr; } }
.fiche {
  background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--r-md);
  padding: 1.75rem; box-shadow: var(--ombre-carte), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fiche:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-carte), inset 0 1px 0 rgba(255,255,255,.6), 0 0 34px -14px rgba(181,69,31,.4);
  border-color: rgba(181,69,31,.35);
}
.bande-sombre .fiche { background: var(--suie-2); border-color: var(--ligne-sombre); box-shadow: inset 0 1px 0 rgba(244,233,216,.06); }
.bande-sombre .fiche:hover { box-shadow: inset 0 1px 0 rgba(244,233,216,.08), 0 0 34px -12px rgba(216,90,44,.45); border-color: rgba(216,90,44,.4); }
.fiche .marque-icone {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-sm); margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(181,69,31,.12); color: var(--braise);
}
.bande-sombre .fiche .marque-icone { background: rgba(244,233,216,.08); color: var(--braise-vive); }
.fiche p, .fiche p a { font-size: .98rem; }
.fiche .lien-fiche { display: inline-block; margin-top: .8rem; font-weight: 700; color: var(--braise); text-decoration: none; }
.fiche .lien-fiche:hover { text-decoration: underline; }

/* ---- Aparté (encadré) ---- */
.aparte {
  border-left: 4px solid var(--braise); background: var(--parchemin-2);
  padding: 1.5rem 1.75rem; border-radius: 0 var(--r-md) var(--r-md) 0; margin-top: 2rem;
}
.bande-sombre .aparte { background: var(--suie-2); border-left-color: var(--braise-vive); }
.aparte.avertissement { border-left-color: var(--or-fume); }
.titre-aparte { display: block; font-family: var(--f-titre); font-size: 1.05rem; margin-bottom: .5rem; color: var(--encre); }
.bande-sombre .titre-aparte { color: var(--creme); }

/* ---- Parcours (étapes numérotées) ---- */
.parcours { list-style: none; margin: 0; padding: 0; counter-reset: etape; display: grid; gap: 1.5rem; grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px) { .parcours { grid-template-columns: 1fr; } }
.parcours li { position: relative; padding-left: 3.4rem; counter-increment: etape; }
.parcours li::before {
  content: counter(etape); position: absolute; left: 0; top: -.1rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-titre); font-size: 1.1rem; font-weight: 600;
  background: var(--braise); color: #fff8ef;
}

/* ---- Chiffres (stats) ---- */
.chiffres { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; margin: 2rem 0; }
@media (max-width: 900px) { .chiffres { grid-template-columns: 1fr; } }
.chiffre { border-top: 3px solid var(--braise); padding-top: 1rem; }
.chiffre .valeur { font-family: var(--f-titre); font-size: var(--fs-chiffre); color: var(--braise); display: block; padding-top: .22em; margin-top: -.22em; margin-bottom: .5rem; }
.chiffre .valeur small { font-size: 1.2rem; opacity: .8; }
.bande-sombre .chiffre { border-top-color: var(--braise-vive); }
.bande-sombre .chiffre .valeur { color: var(--braise-vive); }

/* Chiffres/badges en dégradé — signature "premium" ; unité (small) reste en couleur pleine */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .badge-flottant .valeur, .chiffre .valeur {
    background: linear-gradient(135deg, var(--braise-vive) 15%, var(--or-fume) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  }
  .chiffre .valeur small { -webkit-text-fill-color: var(--braise); color: var(--braise); opacity: 1; }
  .bande-sombre .chiffre .valeur small { -webkit-text-fill-color: var(--braise-vive); color: var(--braise-vive); }
}

/* ---- Bande photo (section plein bleed avec image réelle) ---- */
.bande-photo {
  position: relative; padding: clamp(4rem,9vw,7rem) 0; color: var(--creme);
  background-size: cover; background-position: center;
}
.bande-photo::before {
  /* Overlay volontairement sombre et quasi uniforme : une photo peut avoir
     des zones claires n'importe où (flamme, vitre) — on ne peut pas compter
     sur un dégradé directionnel pour garantir le contraste du texte. */
  content: ''; position: absolute; inset: 0; opacity: 1; mix-blend-mode: normal;
  background: linear-gradient(100deg, rgba(10,7,5,.96) 0%, rgba(10,7,5,.94) 55%, rgba(10,7,5,.91) 100%);
}
.bande-photo .wrap { position: relative; z-index: 1; }
.bande-photo h2 { color: var(--creme); text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.bande-photo p { color: var(--creme-2); }
.bande-photo .intro-texte { color: var(--creme-2); text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.bande-photo .etiquette {
  background: rgba(36,26,19,.72); color: var(--creme); border-color: rgba(244,233,216,.25); text-shadow: none;
}
.bande-photo .chiffre .valeur, .bande-photo .chiffre p { text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.bande-photo .chiffre { border-top-color: var(--braise-vive); }

/* ---- Fiche avec photo ---- */
.fiche-photo { padding: 0; overflow: hidden; }
.fiche-photo img { width: 100%; height: 12rem; object-fit: cover; }
.fiche-photo .fiche-corps { padding: 1.5rem; }

/* ---- Tableau ---- */
.table-scroll { overflow-x: auto; margin: 1.5rem 0; border-radius: var(--r-md); border: 1px solid var(--ligne); }
.bande-sombre .table-scroll { border-color: var(--ligne-sombre); }
table { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--papier); }
.bande-sombre table { background: var(--suie-2); }
caption { text-align: left; font-size: .85rem; color: var(--encre-3); padding: .8rem 1rem 0; }
th, td { text-align: left; padding: .9rem 1.1rem; font-size: .95rem; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.bande-sombre th, .bande-sombre td { border-color: var(--ligne-sombre); }
thead th { background: var(--parchemin-2); font-family: var(--f-titre); font-weight: 600; }
.bande-sombre thead th { background: var(--suie); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }
.valeur-forte { color: var(--braise); font-weight: 700; }
.bande-sombre .valeur-forte { color: var(--braise-vive); }

/* ---- Zones / villes ---- */
.liste-communes { list-style: none; display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 1.5rem; padding: 0; }
.liste-communes a {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .6em 1.1em; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .95rem;
  background: var(--suie-2); color: var(--creme); border: 1px solid var(--ligne-sombre);
}
.liste-communes a { transition: background-color .18s ease, box-shadow .18s ease, border-color .18s ease; }
.liste-communes a:hover { background: var(--braise); border-color: var(--braise); box-shadow: 0 10px 24px -10px rgba(181,69,31,.6); }
.liste-communes svg { flex-shrink: 0; }

/* ---- FAQ ---- */
.questions { display: grid; gap: 1rem; }
.question {
  background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--r-md); padding: .3rem;
}
.bande-sombre .question { background: var(--suie-2); border-color: var(--ligne-sombre); }
.question summary {
  cursor: pointer; list-style: none; font-family: var(--f-titre); font-weight: 600; font-size: 1.05rem;
  padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: '+'; font-family: var(--f-texte); font-size: 1.4rem; color: var(--braise); flex-shrink: 0; line-height: 1;
}
.question[open] summary::after { content: '–'; }
.question > div { padding: 0 1.2rem 1.2rem; }
.question > div p { font-size: .98rem; }

/* ---- Sources ---- */
.sources { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--ligne); }
.bande-sombre .sources { border-color: var(--ligne-sombre); }
.sources ul { margin: .8rem 0 0; padding-left: 1.2rem; }
.sources li { margin-bottom: .4rem; font-size: .9rem; }
.sources a { text-decoration: underline; color: var(--encre-2); }
.bande-sombre .sources a { color: var(--creme-2); }

/* ---- Devis / formulaire ---- */
.devis-section { background: var(--suie); padding: var(--section-y) 0; position: relative; overflow: hidden; }
.devis-section::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  width: 38rem; height: 38rem; top: -12rem; left: -12rem; filter: blur(80px);
  background:
    radial-gradient(circle at 45% 45%, rgba(216,90,44,.34), transparent 55%),
    radial-gradient(circle at 60% 60%, rgba(185,134,63,.22), transparent 62%);
  animation: derive-halo 30s ease-in-out infinite;
}
.devis-bloc {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem,5vw,3.5rem); padding: clamp(1.75rem,4vw,3rem);
  border-radius: var(--r-lg); border: 1px solid transparent;
  background:
    linear-gradient(var(--suie-2), var(--suie-2)) padding-box,
    linear-gradient(135deg, rgba(244,233,216,.32), rgba(216,90,44,.32) 45%, rgba(244,233,216,.08)) border-box;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.55), 0 0 70px -22px rgba(216,90,44,.35);
}
@media (max-width: 900px) { .devis-bloc { grid-template-columns: 1fr; } }
.devis-bloc h2 { color: var(--creme); }
.devis-bloc > div > p { color: var(--creme-2); }
.champ { margin-bottom: 1.1rem; }
.champ label { display: block; font-size: .9rem; font-weight: 700; color: var(--creme); margin-bottom: .4rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .8em 1em; border-radius: var(--r-sm); border: 1.5px solid var(--ligne-sombre);
  background: var(--suie); color: var(--creme); font-family: var(--f-texte); font-size: .98rem;
}
.champ textarea { min-height: 6rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--braise-vive); box-shadow: 0 0 0 3px rgba(216,90,44,.2); }
.statut-formulaire { font-size: .9rem; color: var(--creme-2); min-height: 1.2em; }
.note-formulaire { font-size: .85rem; color: var(--creme-2); margin-top: 1rem; }
.note-formulaire a { text-decoration: underline; color: var(--creme); }
.devis-aside h3 { color: var(--creme); }
.devis-aside ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .9rem; }
.devis-aside li { display: flex; gap: .6em; font-size: .92rem; color: var(--creme-2); }
.devis-aside svg { color: var(--braise-vive); flex-shrink: 0; margin-top: .15em; }

/* ---- Calculateur ---- */
.calculateur { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--r-lg); padding: clamp(1.5rem,3vw,2.25rem); margin: 2rem 0; }
.calculateur .champs-calc { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; margin-bottom: 1.2rem; }
@media (max-width: 640px) { .calculateur .champs-calc { grid-template-columns: 1fr; } }
.calculateur label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: .4rem; }
.calculateur select, .calculateur input {
  width: 100%; padding: .7em .9em; border-radius: var(--r-sm); border: 1.5px solid var(--ligne); font-family: var(--f-texte);
}
#calc-resultat { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px dashed var(--ligne); }
#calc-resultat[hidden] { display: none; }

/* ---- Pied de page ---- */
.pied { background: var(--suie); border-top: 1px solid var(--ligne-sombre); padding: 3.5rem 0 2rem; }
.pied .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 760px) { .pied .wrap { grid-template-columns: 1fr; gap: 2rem; } }
.pied .marque { color: var(--creme); margin-bottom: .8rem; }
.pied p { color: var(--creme-2); font-size: .92rem; }
.pied h2 { font-size: 1rem; font-family: var(--f-texte); font-weight: 700; color: var(--creme); margin-bottom: .9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pied a { color: var(--creme-2); text-decoration: none; font-size: .92rem; }
.pied a:hover { color: var(--creme); text-decoration: underline; }
.mentions { grid-column: 1/-1; border-top: 1px solid var(--ligne-sombre); padding-top: 1.5rem; margin-top: .5rem; font-size: .85rem; color: var(--creme-2); }
.mentions a { color: var(--creme-2); text-decoration: underline; }

/* ---- Pages légales ---- */
.legal { padding: clamp(3rem,6vw,5rem) 0 clamp(4rem,8vw,6rem); max-width: 46rem; margin: 0 auto; }
.legal h1 { margin-bottom: 1.2rem; }
.legal h2 { font-size: 1.15rem; margin-top: 2.2rem; }
.legal p, .legal li { color: var(--encre-2); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .5rem; }

/* ---- Utilitaires ---- */
.section-serree { padding: clamp(2.5rem,5vw,3.5rem) 0; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}