/* ══════════════════════════════════════════════════════════
   TDE — Design System : Artisan Premium Crème
   Froid = Bleu (#3dc3ec) · Chaud = Rouge (#e33325)
   ══════════════════════════════════════════════════════════ */

/* ── Polices ───────────────────────────────────────────── */
/* Les polices sont hebergees sur le site (/polices/, depuis le 17/10/2026) et
   declarees dans /polices/polices.css, charge par un <link> dans le <head> de
   chaque page. Un @import ici les rendrait sequentielles : le navigateur
   devrait d'abord telecharger ET analyser styles.css avant de decouvrir
   polices.css, soit un aller-retour entier ajoute au premier rendu. */

/* ── CSS Custom Properties ─────────────────────────────── */
:root {
  --cream:       #f4efe6;
  --cream-mid:   #ede5d8;
  --cream-deep:  #e0d5c5;
  --ink:         #0d0d0d;
  --blue:        #3dc3ec;   /* froid / climatisation */
  /* Texte bleu sur creme (09/11/2026) : --blue n'y fait que 1,8:1. Celui-ci :
     5,0:1 sur --cream, 4,6 sur --cream-mid. Sur l'encre, garder --blue (9,5). */
  --blue-ink:    #0f6f8a;
  --red:         #e33325;   /* chaud / pompe à chaleur */
  --red-dark:    #c02a1e;   /* texte rouge sur creme (5,1:1) ; fond sous blanc (5,85) */
  --red-deep:    #9a2318;   /* survol sous texte blanc (8,0:1) */
  --white:       #fff;
  --chip-cold-bg: #0e3f52;  --chip-cold-fg: #7de6f7;
  --chip-hot-bg:  #4a1208;  --chip-hot-fg:  #ffa899;
  --chip-mute-bg: #2a2a2a;  --chip-mute-fg: #d1d5db;
  /* --muted : #7a7265 -> #6c6559 (17/10/2026). L'ancien ne faisait que 4,15:1
     sur le creme et 3,80 sur --cream-mid (articles, FAQ, zones) ; le nouveau
     fait 5,03 et 4,61. */
  --muted:       #6c6559;
  /* --muted-light (2,2 a 2,4:1) ne sert plus qu'aux filets decoratifs : les
     textes qui l'utilisaient (numeros, indice de defilement, « + » de la FAQ)
     passent sur --muted. */
  --muted-light: #a09a90;
  /* Le pied de page est CREME (#e0d5c5), pas noir : --muted (#7a7265) n'y
     atteint que 3.28:1. Cette variante plus sombre monte a 4.64 sur ce fond
     et reste lisible (5.88) sur le creme clair des sections. */
  --muted-contraste: #615b50;
  --border:      rgba(13,13,13,0.1);
  --font-display: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;
  /* Rayons concentriques : controles, encadres internes, cartes. */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-round: 50%;
  /* Mouvement : trois durees, une seule courbe (09/11/2026). */
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 600ms;
  --ease:  cubic-bezier(.16,1,.3,1);
  --section-pad: 8rem;
  --h-pad:       5vw;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.15;
  text-wrap: balance;
}
/* Etiquettes et controles d'une ligne : interligne serre, le corps reste a 1,5. */
.tag, .chip, .srv-pill, .ft-badge, .zone-tag, .btn-fill, .btn-wh, .btn-line, .btn-lw,
.nav-logo, .nav-links a, .certif-label, .certif-item, .section-eyebrow span, .cta-c-label,
.sci-label, .zone-info-title, .ville-link, .breadcrumb, .hero-scroll-hint { line-height: 1.2; }
.srv-name, .gar-name, .zone-info-val { line-height: 1.3; }

/* Icones au trait (09/11/2026) : remplacent les emojis. Une seule famille,
   meme trait, couleur du texte. */
.ico {
  width: 1.1em; height: 1.1em; flex-shrink: 0; vertical-align: -.18em;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Boutons ───────────────────────────────────────────── */
.btn-fill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--ink); color: var(--white);
  padding: .9rem 2rem; border-radius: var(--r-sm);
  font-family: var(--font-body); font-weight: 700; font-size: .875rem;
  letter-spacing: .025em; text-decoration: none;
  cursor: pointer; border: none;
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.btn-fill:hover { background: var(--red-dark); transform: translateY(-2px); }

.btn-line {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--ink); font-family: var(--font-body);
  font-weight: 500; font-size: .875rem; text-decoration: none;
  padding-bottom: 2px; border-bottom: 1.5px solid rgba(13,13,13,0.3);
  background: none; border-top: none; border-left: none; border-right: none;
  cursor: pointer; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn-line:hover { color: var(--red-dark); border-color: var(--red-dark); }

.btn-wh {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--white); color: var(--ink);
  padding: .9rem 2rem; border-radius: var(--r-sm);
  font-weight: 700; font-size: .875rem; text-decoration: none;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.btn-wh:hover { background: var(--red-dark); color: var(--white); transform: translateY(-2px); }

.btn-lw {
  display: inline-flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.55); font-size: .875rem; font-weight: 500;
  text-decoration: none; padding-bottom: 2px;
  border-bottom: 1.5px solid rgba(255,255,255,.2);
  background: none; border-top: none; border-left: none; border-right: none;
  cursor: pointer; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn-lw:hover { color: var(--white); border-color: var(--white); }

/* ── Tags / Pills ──────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .875rem; border-radius: var(--r-sm); white-space: nowrap;
}
/* Blanc sur --blue (#3dc3ec) = 2,06:1 et sur --red = 4,41:1 : le petit texte
   des pastilles passe sur des fonds plus profonds (18/10/2026). */
.tag-blue  { background: var(--blue-ink);  color: var(--white); }  /* 5,74:1 */
.tag-red   { background: var(--red-dark);  color: var(--white); }  /* 5,85:1 */
.tag-ghost { border: 1.5px solid var(--border); color: var(--muted); }

/* ── Section helpers ───────────────────────────────────── */
.section { padding: var(--section-pad) var(--h-pad); }

.section-eyebrow {
  display: flex; align-items: center; gap: .875rem; margin-bottom: 1.5rem;
}
.section-eyebrow span {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.section-eyebrow::after {
  content: ''; width: 48px; height: 1px; background: var(--muted-light);
}

.section-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  letter-spacing: -0.04em; line-height: 1.15;
  color: var(--ink); margin-bottom: 4.5rem; max-width: 18ch;
}
.section-title em  { font-style: normal; color: var(--red-dark); }   /* 5,1:1 (--red : 3,85) */
.section-title .eb { font-style: normal; color: var(--blue-ink); }   /* 5,0:1 (--blue : 1,8) */
.villes-section .section-title .eb { color: var(--blue); }           /* sur l'encre : 9,5:1 */

/* ── Scroll reveal ─────────────────────────────────────── */
/* Seulement quand le JavaScript tourne (classe posée en tête de page) : sans
   lui, ou si script.js échoue, le contenu reste lisible (audit du 17/10/2026). */
.js .rev {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.js .rev.in { opacity: 1; transform: translateY(0); }
/* Filet (18/10/2026) : la classe js est posée en ligne, que script.js se
   charge ou non. S'il échoue, les blocs réapparaissent seuls après 1,5 s ;
   script.js pose rev-ok dès qu'il prend la main. */
.js:not(.rev-ok) .rev { animation: rev-secours 0s 1.5s forwards; }
@keyframes rev-secours { to { opacity: 1; transform: none; } }
/* Mouvement reduit (09/11/2026) : plus aucun deplacement. Les apparitions
   restent, en simple fondu, y compris la cascade du heros. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rev { transform: none; transition: opacity var(--dur-3) var(--ease); }
  .hero-wm, .hero-tags, .hero-headline, .hero-bar, .hero-desc, .hero-ctas, .hero-stats { animation-name: fadeIn; }
  .btn-fill:hover, .btn-wh:hover, .ville:hover, .gar:hover, .srv:hover .srv-body { transform: none; }
}
/* Le focus clavier se voit, partout. */
:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 2px; }

/* Lien d'evitement : hors ecran, il apparait au premier Tab. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ink); color: var(--white); padding: .75rem 1.1rem; border-radius: var(--r-sm);
  font-family: var(--font-body); font-weight: 700; font-size: .875rem; text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible { left: 1rem; top: 1rem; }
/* Cible focalisee par script (tabindex="-1") : pas de cadre autour du bloc. */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus { outline: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .40s; }


/* ══════════════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════════════ */

/* Pages villes : hero sombre → nav blanche avant scroll */
.page-local #nav:not(.stuck) .nav-logo           { color: var(--white); }
.page-local #nav:not(.stuck) .nav-logo .l-d      { color: var(--red); }
.page-local #nav:not(.stuck) .nav-logo .l-e      { color: var(--blue); }  /* sur l'encre : 9,5:1 */
.page-local #nav:not(.stuck) .nav-links a        { color: rgba(255,255,255,.8); }  /* x opacite .6 = 5,0:1 sur l'encre (avant : 3,28) */
.page-local #nav:not(.stuck) .nav-links a:hover  { color: var(--white); opacity: 1; }
.page-local #nav:not(.stuck) .nav-links .nav-cta { background: var(--white); color: var(--ink); opacity: 1; }
.page-local #nav:not(.stuck) .nav-links .nav-cta:hover { background: var(--red-dark); color: var(--white); }
.page-local #nav:not(.stuck) .nav-toggle span    { background: var(--white); }

/* Le fond flouté de la barre collée est porté par #nav::before, jamais par
   #nav elle-même (revue du tour 4) : un backdrop-filter sur #nav en faisait
   le bloc conteneur de ses descendants en position: fixed, et le panneau
   mobile (.nav-links) se dimensionnait sur la barre (68 px de haut au lieu de
   l'écran) dès qu'on avait fait défiler la page. Aucun ancêtre du panneau
   (header, #nav) ne doit porter transform, filter, backdrop-filter,
   perspective, contain ou will-change. La bordure basse passe elle aussi sur
   le pseudo-élément (qui descend d'1 px sur celle, transparente, de #nav) :
   peinte par #nav, elle serait recouverte par le fond, ou posée sans lui. */
#nav {
  position: fixed; inset: 0 0 auto; z-index: 900; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem var(--h-pad);
  border-bottom: 1px solid transparent;
}
/* 09/11/2026 : la barre ne change plus de hauteur (le padding n'est plus
   anime) et le flou n'a pas de transition : il s'applique d'un coup, seuls la
   teinte du fond et le filet fondent. */
#nav::before {
  content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; pointer-events: none;
  background-color: rgba(244,239,230,0);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
#nav.stuck::before {
  background-color: rgba(244,239,230,.93);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border-bottom-color: var(--border);
}

.nav-logo {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.6rem; letter-spacing: -.04em;
  color: var(--ink); text-decoration: none;
  display: flex; align-items: center; gap: .6rem;
}
.nav-logo-img {
  height: 36px; width: auto; flex-shrink: 0;
  border-radius: var(--r-round); object-fit: cover;
}
.nav-logo .l-d { color: var(--red-dark); }
.nav-logo .l-e { color: var(--blue-ink); }  /* --blue sur creme : 1,8:1 ; celui-ci : 5,0 */
.nav-logo .dot { color: var(--red-dark); font-size: .55em; margin-left: .1em; line-height: 1; }

.nav-links {
  display: flex; align-items: center; gap: 2rem; list-style: none;
}
.nav-links a {
  font-size: .85rem; font-weight: 500; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; transition: opacity var(--dur-1) var(--ease);
}
/* L'opacite porte sur les seuls liens texte : posee sur tous les <a>, elle
   fanait aussi le bouton « Devis gratuit » (2,6:1). .6 = 4,9:1 sur le creme
   (avant : .55 = 4,13). */
.nav-links .nav-link { opacity: .6; }
.nav-links a:hover { opacity: 1; }
/* Lien courant (09/11/2026) : pleine encre et souligne, rien de plus. */
.nav-links .nav-link[aria-current] {
  opacity: 1; text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: .45em;
}
.nav-links .nav-cta {
  display: inline-block; background: var(--ink); color: var(--white); opacity: 1;
  padding: .625rem 1.375rem; border-radius: var(--r-sm); font-weight: 600;
  transition: background var(--dur-2) var(--ease);
}
.nav-links .nav-cta:hover { background: var(--red-dark); }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; padding: .5rem; min-width: 44px; min-height: 44px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--ink); border-radius: var(--r-sm); transition: background-color var(--dur-2) var(--ease);
}


/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; padding: 0 var(--h-pad);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(13,13,13,.045) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 82% 35%, rgba(61,195,236,.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 15% 70%, rgba(227,51,37,.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero-wm {
  position: absolute; right: -1vw; top: 50%; transform: translateY(-54%);
  font-family: var(--font-display); font-weight: 900;
  font-size: 32vw; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(13,13,13,.055);
  user-select: none; pointer-events: none; z-index: 0;
  animation: wmIn var(--dur-3) var(--ease) both;
}
@keyframes wmIn {
  from { opacity: 0; transform: translateY(-52%) scale(1.04); }
  to   { opacity: 1; transform: translateY(-54%) scale(1); }
}

.hero-body {
  display: flex; flex-direction: row; align-items: flex-start;
  justify-content: space-between; gap: 5vw;
  padding-top: 9rem; padding-bottom: 6rem;  /* place pour l'indice « Defiler » */
  position: relative; z-index: 1;
}

.hero-content {
  flex: 1; display: flex; flex-direction: column;
}

.hero-visual {
  flex-shrink: 0;
  display: flex; align-items: flex-start;
  /* padding-top aligne le logo sur le titre (tags ≈ 4.5rem) */
  padding-top: 4.5rem;
}
.hero-logo-img {
  width: clamp(220px, 26vw, 440px); height: auto;
  filter: drop-shadow(0 32px 80px rgba(13,13,13,.22));
  animation: fadeIn var(--dur-3) var(--ease) .2s both;
}

@keyframes up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.hero-tags {
  display: flex; align-items: center; gap: .625rem;
  margin-bottom: 2.25rem; flex-wrap: wrap;
  animation: up var(--dur-3) var(--ease) both;
}

.hero-headline {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(4.5rem, 11vw, 11.5rem);
  letter-spacing: -.04em; line-height: 1.15;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: 2rem; animation: up var(--dur-3) var(--ease) .06s both;
}
.hero-headline .hl-accent {
  display: block; -webkit-text-stroke: 2px var(--red); color: transparent;
}
.hero-headline .hl-sub {
  display: block; font-size: .22em; font-weight: 300;
  letter-spacing: .18em; color: var(--muted);
  -webkit-text-stroke: 0; text-transform: uppercase; margin-top: .6em;
}

.hero-bar {
  width: 70px; height: 3px; border-radius: var(--r-sm);
  background: var(--red);
  margin-bottom: 1.75rem; animation: up var(--dur-3) var(--ease) .12s both;
}

.hero-desc {
  font-size: 1.05rem; line-height: 1.75; color: var(--muted-contraste);
  max-width: 44ch; margin-bottom: 2.75rem; animation: up var(--dur-3) var(--ease) .16s both;
}

.hero-ctas {
  display: flex; align-items: center; gap: 1.25rem;
  margin-bottom: 4.5rem; flex-wrap: wrap; animation: up var(--dur-3) var(--ease) .2s both;
}

.hero-stats {
  display: flex; gap: 0; padding-top: 2.75rem;
  border-top: 1px solid var(--border); animation: up var(--dur-3) var(--ease) .26s both;
}
.stat {
  flex: 1; padding-right: 2rem; border-right: 1px solid var(--border);
}
.stat:first-child { padding-left: 0; }
.stat:not(:first-child) { padding-left: 2rem; }
.stat:last-child { border-right: none; padding-right: 0; }

.stat-n {
  font-family: var(--font-display); font-weight: 900;
  font-size: 2.75rem; letter-spacing: -.04em; line-height: 1; color: var(--ink);
}
.stat-n .u  { font-size: .55em; color: var(--red-dark); }
.stat-n .ub { font-size: .55em; color: var(--blue-ink); }  /* --blue sur crème : 1,8:1 ; celui-ci : 5:1 (revue du tour 3) */
.stat-l { font-size: .8rem; color: var(--muted-contraste); margin-top: .3rem; letter-spacing: .02em; }

.hero-scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--muted); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; animation: fadeIn var(--dur-3) var(--ease) .6s both;
}
.hint-line {
  width: 1px; height: 36px;
  background: linear-gradient(var(--muted-light), transparent);
}


/* ══════════════════════════════════════════════════════════
   BANDE CERTIFICATIONS
   ══════════════════════════════════════════════════════════ */
.certif-band {
  background: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem var(--h-pad); gap: 2rem; overflow: hidden;
}
.certif-label {
  font-size: .75rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.62); white-space: nowrap;
}
.certif-items { display: flex; align-items: center; gap: 2.5rem; }
.certif-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.7);
}
.ci-dot { width: 7px; height: 7px; border-radius: var(--r-round); flex-shrink: 0; }


/* ══════════════════════════════════════════════════════════
   SERVICES
   ══════════════════════════════════════════════════════════ */
.services-section { background: var(--cream); }
.services-list { border-top: 1px solid var(--border); }

.srv {
  display: grid; grid-template-columns: 1fr 10rem;
  align-items: center; gap: 2rem;
  padding: 1.875rem 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
/* Survol : le texte glisse (transform), le padding ne s'anime plus. */
.srv-body { transition: transform var(--dur-2) var(--ease); }
.srv:hover .srv-body { transform: translateX(.75rem); }
.srv:hover .srv-arrow { opacity: 1; transform: translateX(0); }
.srv-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.015em; color: var(--ink); margin-bottom: .375rem;
}
.srv-desc { font-size: .875rem; color: var(--muted-contraste); line-height: 1.55; }
.srv-meta { display: flex; align-items: center; justify-content: flex-end; gap: .875rem; }

.srv-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: .25rem .7rem; border-radius: var(--r-sm);
}
.p-cold { background: rgba(61,195,236,.12); color: var(--blue-ink); }  /* 4,65:1 */
.p-hot  { background: rgba(227,51,37,.10);  color: var(--red-deep); }  /* 6,07:1 */
.p-urg  { background: rgba(13,13,13,.07);   color: var(--ink); }

.srv-arrow {
  color: var(--ink); font-size: 1.1rem; opacity: 0;
  transform: translateX(-10px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
/* Tuile qui mene a une page service : le dire en toutes lettres (la fleche
   n'apparait qu'au survol, et pas du tout sur mobile). */
.srv-plus {
  display: inline-block; margin-top: .6rem;
  font-size: .8rem; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════
   VILLES
   ══════════════════════════════════════════════════════════ */
.villes-section { background: var(--ink); color: var(--white); }
.villes-section .section-title { color: var(--white); }
.villes-section .section-eyebrow span { color: rgba(255,255,255,.5); }  /* 5,3:1 (avant : .35 = 3,19) */
.villes-section .section-eyebrow::after { background: rgba(255,255,255,.15); }

.villes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }

.ville {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-lg); padding: 2.25rem 1.875rem;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: .875rem;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  position: relative; overflow: hidden;
}
.ville::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease);
}
.ville:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); transform: translateY(-5px); }
.ville:hover::after { transform: scaleX(1); }

.ville-icon { display: block; color: var(--blue); }
.ville-icon .ico { width: 1.75rem; height: 1.75rem; stroke-width: 1.5; }
.ville-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -.035em; line-height: 1.15;
}
.ville-cp { font-size: .75rem; color: rgba(255,255,255,.6); letter-spacing: .03em; }  /* 7,0:1 (avant : .35 = 3,22) */
.ville-svcs { font-size: .85rem; color: rgba(255,255,255,.55); line-height: 1.55; margin-top: auto; }
.ville-link {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.6); padding-top: 1.25rem;  /* 7,0:1 (avant : .35 = 3,22) */
  border-top: 1px solid rgba(255,255,255,.07); transition: color var(--dur-1) var(--ease);
}
.ville:hover .ville-link { color: rgba(255,255,255,.7); }


/* ══════════════════════════════════════════════════════════
   GARANTIES
   ══════════════════════════════════════════════════════════ */
.garanties-section { background: var(--cream-mid); }
.gars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.gar {
  background: var(--cream); border-radius: var(--r-lg); padding: 2.5rem 2.25rem;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.gar:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(13,13,13,.09); }

/* Le chaud et le froid passent par la couleur de l'icone, plus par un filet. */
.gar-icon { display: block; margin-bottom: 1.25rem; color: var(--ink); }
.gar-icon .ico { width: 1.875rem; height: 1.875rem; stroke-width: 1.5; }
.gar:nth-child(3n+1) .gar-icon { color: var(--red-dark); }
.gar:nth-child(3n+2) .gar-icon { color: var(--blue-ink); }
.gar-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink); margin-bottom: .625rem;
}
.gar-desc { font-size: .875rem; color: var(--muted-contraste); line-height: 1.6; }


/* ══════════════════════════════════════════════════════════
   ZONE D'INTERVENTION
   ══════════════════════════════════════════════════════════ */
.zone-section { background: var(--cream); }
.zone-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }

.zone-desc { font-size: 1.05rem; color: var(--muted-contraste); line-height: 1.75; margin-bottom: 2rem; }
.zone-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.zone-tag {
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .375rem .875rem; border: 1.5px solid var(--border); border-radius: var(--r-sm); color: var(--muted-contraste);
}

.zone-map-block { display: flex; flex-direction: column; gap: 1rem; }
.zone-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }

.zone-btn {
  background: var(--cream-mid); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: .75rem 1rem; cursor: pointer;
  text-align: left; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
  font-family: var(--font-body);
}
.zone-btn strong { display: block; font-size: .875rem; font-weight: 700; color: var(--ink); margin-bottom: .2rem; }
.zone-btn span   { font-size: .75rem; color: var(--muted); }
.zone-btn.active, .zone-btn:hover { background: var(--ink); border-color: var(--ink); }
.zone-btn.active strong, .zone-btn:hover strong { color: var(--white); }
.zone-btn.active span,   .zone-btn:hover span   { color: rgba(255,255,255,.6); }

.zone-map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); height: 380px; }
.zone-map iframe { width: 100%; height: 100%; border: none; display: block; }

.zone-info {
  background: var(--cream-mid); border-radius: var(--r-md);
  padding: 1rem 1.25rem; border: 1px solid var(--border);
}
.zone-info-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .375rem;
}
.zone-info-val { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink); }


/* ══════════════════════════════════════════════════════════
   SECTION CTA / CONTACT
   ══════════════════════════════════════════════════════════ */
.cta-section {
  background: var(--ink); padding: 10rem var(--h-pad);
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: 'TDE'; position: absolute; right: -.08em; bottom: -.15em;
  font-family: var(--font-display); font-weight: 900; font-size: 30vw;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.04);
  line-height: 1; user-select: none; pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; max-width: 750px; }

.cta-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3.5rem, 8vw, 8rem);
  letter-spacing: -.04em; line-height: 1.15; color: var(--white);
  text-transform: uppercase; margin-bottom: 2.5rem;
}
.cta-title .ct-red { color: var(--red); }  /* grand texte sur l'encre : 4,4:1 */
/* « nicien » etait en simple contour blanc a 40 % (illisible) : plein. */
.cta-title .ct-out { color: var(--white); }

.cta-desc {
  font-size: 1.05rem; line-height: 1.72; color: rgba(255,255,255,.55);
  max-width: 46ch; margin-bottom: 3.25rem;
}
.cta-btns { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 4rem; flex-wrap: wrap; }
.cta-contacts {
  display: flex; gap: 3rem; padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,.08); flex-wrap: wrap;
}
.cta-c { display: flex; flex-direction: column; gap: .3rem; }
.cta-c-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5);  /* 5,3:1 sur l'encre (avant : .3 = 2,65) */
}
.cta-c-val {
  font-family: var(--font-display); font-weight: 600; font-size: .975rem; color: rgba(255,255,255,.85);
}
.cta-c-val a { color: inherit; text-decoration: none; }

/* Reveal buttons */
.reveal-btn {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-body); padding: 0;
  min-height: 24px; min-width: 24px;  /* cible tactile WCAG 2.5.8 (sans padding, elle faisait ~14 px) */
}
.reveal-btn .reveal-masked {
  font-size: .875rem; color: rgba(255,255,255,.6);
  text-decoration: underline; text-underline-offset: 3px;
}
.reveal-btn:hover .reveal-masked { color: var(--white); }
.reveal-btn .reveal-value a { color: rgba(255,255,255,.85); text-decoration: none; }
.reveal-btn .eye-icon { color: rgba(255,255,255,.4); flex-shrink: 0; }


/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
footer {
  background: var(--cream-deep); padding: 5rem var(--h-pad) 3rem;
  border-top: 3px solid var(--ink);
}
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; gap: 3rem; margin-bottom: 4rem; }

.ft-logo-img {
  height: 52px; width: auto; border-radius: var(--r-round); object-fit: cover;
  display: block; margin-bottom: 1rem;
}
.ft-logo {
  font-family: var(--font-display); font-weight: 900;
  font-size: 2.5rem; letter-spacing: -.04em; color: var(--ink); margin-bottom: 1.25rem; line-height: 1;
}
.ft-logo .fl-d { color: var(--red-dark); }  /* grand texte sur --cream-deep : 4,0:1 */
.ft-logo .fl-e { color: var(--blue-ink); }  /* 4,0:1 (--blue : 1,4) */
.ft-tagline { font-size: .9rem; color: var(--muted-contraste); line-height: 1.65; max-width: 30ch; margin-bottom: 1.75rem; }
.ft-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.ft-badge {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .7rem; border: 1.5px solid var(--border); border-radius: var(--r-sm); color: var(--muted-contraste);
}

.ft-col h3 {
  font-family: var(--font-display); font-weight: 700; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 1.5rem;
}
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.ft-col a { font-size: .875rem; color: var(--muted-contraste); text-decoration: none; transition: color var(--dur-1) var(--ease); }
.ft-col a:hover { color: var(--ink); }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 2.5rem; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p { font-size: .78rem; color: var(--muted-contraste); }


/* ══════════════════════════════════════════════════════════
   PAGES VILLES (lieux/*.html)
   ══════════════════════════════════════════════════════════ */
.local-hero {
  background: var(--ink); color: var(--white);
  padding: 9rem var(--h-pad) 5rem; position: relative; overflow: hidden;
}
.local-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px; pointer-events: none;
}
.local-hero-inner { position: relative; z-index: 1; }

.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; color: rgba(255,255,255,.5);  /* page courante : 5,3:1 (avant : .4 = 3,81) */ margin-bottom: 2rem; letter-spacing: .04em;
}
.breadcrumb a { color: rgba(255,255,255,.5); text-decoration: none; transition: color var(--dur-1) var(--ease); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb .sep { color: rgba(255,255,255,.2); }

.local-hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .3rem .75rem; border-radius: var(--r-sm);
}
.chip-blue  { background: var(--chip-cold-bg); color: var(--chip-cold-fg); }  /* froid */
.chip-red   { background: var(--chip-hot-bg);  color: var(--chip-hot-fg); }   /* chaud */
.chip-white { background: var(--chip-mute-bg); color: var(--chip-mute-fg); }  /* neutre */

.local-hero h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.75rem, 7vw, 6rem);
  letter-spacing: -.04em; line-height: 1.15; color: var(--white);
  max-width: 18ch; margin-bottom: 1.5rem;
}
.local-hero h1 em { font-style: normal; color: var(--blue); }
.local-desc { font-size: 1.05rem; color: rgba(255,255,255,.6); max-width: 52ch; line-height: 1.7; }

/* Layout principal */
.local-main {
  padding: 6rem var(--h-pad); background: var(--cream);
  display: grid; grid-template-columns: 1fr 320px;
  gap: 5rem; align-items: start;
}

.local-grid { display: flex; flex-direction: column; gap: 1.75rem; }

.local-article {
  background: var(--cream-mid); border-radius: var(--r-lg); padding: 2.5rem;
  transition: box-shadow var(--dur-2) var(--ease);
}
/* Bloc de texte, pas un lien : au survol, une ombre douce seulement. */
.local-article:hover { box-shadow: 0 8px 32px rgba(13,13,13,.07); }
.local-article h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; letter-spacing: -.02em; color: var(--ink); margin-bottom: .875rem;
}
.local-article p { font-size: .9rem; color: var(--muted); line-height: 1.7; }
.local-article p + p { margin-top: .75rem; }
/* Liens vers les pages service, dans le corps des pages villes : souligne
   et a l'encre, pour qu'on les distingue du texte sans compter sur la couleur. */
.local-article .local-article-lien { margin-top: .875rem; }
.local-article a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.local-article a:hover { text-decoration-thickness: 2px; }

/* Sidebar */
.local-sidebar { position: sticky; top: 7rem; display: flex; flex-direction: column; gap: 1.25rem; }
/* Trois blocs depuis le 09/11/2026 : colle, la colonne depasserait l'ecran
   et son bas resterait hors d'atteinte. */
@media (max-height: 1000px) { .local-sidebar { position: static; } }

.sidebar-card { background: var(--ink); color: var(--white); border-radius: var(--r-lg); padding: 2rem; }
.sidebar-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; letter-spacing: -.01em; color: var(--white); margin-bottom: 1.5rem;
}
.sidebar-contact-item { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1.25rem; }
.sidebar-contact-item:last-of-type { margin-bottom: 0; }
.sci-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.5);  /* 5,3:1 sur l'encre (avant : .3 = 2,65) */
}
.sci-val { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: rgba(255,255,255,.85); }
.sci-val a { color: inherit; text-decoration: none; }

/* Reveal dans sidebar */
.sidebar-reveal-btn {
  background: none; border: none; cursor: pointer;
  padding: 0; display: inline-flex; align-items: center; gap: .35rem;
  min-height: 24px; min-width: 24px;
}
.sidebar-reveal-btn .reveal-masked {
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: rgba(255,255,255,.5); text-decoration: underline; text-underline-offset: 3px;
}
.sidebar-reveal-btn:hover .reveal-masked { color: var(--white); }
.sidebar-reveal-btn .reveal-value a { color: rgba(255,255,255,.85); text-decoration: none; }

.sidebar-cta-btn {
  display: block; width: 100%; margin-top: 1.5rem; text-align: center;
  background: var(--red-dark); color: var(--white); padding: .875rem; border-radius: var(--r-sm);  /* 5,85:1 (avant : --red = 4,41) */
  font-weight: 700; font-size: .875rem; text-decoration: none; transition: background var(--dur-2) var(--ease);
}
.sidebar-cta-btn:hover { background: var(--red-deep); }

.sidebar-zones { background: var(--cream-mid); border-radius: var(--r-md); padding: 1.75rem; border: 1px solid var(--border); }
.sidebar-zones h3 {
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 1rem;
}
.sidebar-zones p { font-size: .875rem; color: var(--muted); line-height: 1.65; }
/* Encadre creme DANS une carte noire : les liens heritaient du blanc de la
   carte (1,24:1) et s'enchainaient en ligne (cibles collees). Encre, un par
   ligne, cible de 24 px au moins. */
.sidebar-card .sidebar-zones a { display: block; padding: .2rem 0; color: var(--ink); line-height: 1.5; }
.sidebar-card .sidebar-zones a:hover { color: var(--red-dark); }  /* 4,68:1 */

/* FAQ */
.faq-section { padding: 6rem var(--h-pad); background: var(--cream-mid); }
.faq-list { max-width: 760px; }

details { border-bottom: 1px solid var(--border); }
details:first-child { border-top: 1px solid var(--border); }
summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink);
  cursor: pointer; list-style: none; gap: 1rem; transition: color var(--dur-1) var(--ease);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+'; font-size: 1.5rem; font-weight: 300;
  color: var(--muted); flex-shrink: 0; transition: transform var(--dur-2) var(--ease);
}
details[open] summary::after { transform: rotate(45deg); }
details[open] summary { color: var(--red-dark); }  /* 4,68:1 sur --cream-mid (--red : 3,52) */
.faq-answer { padding: 0 0 1.75rem; font-size: .9rem; color: var(--muted); line-height: 1.75; max-width: 65ch; }

/* CTA local */
.local-cta {
  background: var(--ink); padding: 6rem var(--h-pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 3rem; flex-wrap: wrap; position: relative; overflow: hidden;
}
.local-cta::before {
  content: 'CONFORT'; position: absolute; right: -.05em; bottom: -.2em;
  font-family: var(--font-display); font-weight: 900; font-size: 18vw;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.04);
  line-height: 1; user-select: none; pointer-events: none;
}
.local-cta-text { position: relative; z-index: 1; }
.local-cta h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.04em;
  color: var(--white); margin-bottom: 1rem; line-height: 1.15;
}
.local-cta p { font-size: 1rem; color: rgba(255,255,255,.55); max-width: 44ch; line-height: 1.65; }
.local-cta-actions { position: relative; z-index: 1; flex-shrink: 0; display: flex; gap: 1rem; flex-wrap: wrap; }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --section-pad: 6rem; }
  .hero-stats { gap: 1.5rem; }
  .stat { padding-right: 1.5rem; }
  .stat:not(:first-child) { padding-left: 1.5rem; }
  .hero-logo-img { width: clamp(180px, 22vw, 300px); }
  .villes-grid { grid-template-columns: repeat(2, 1fr); }
  .villes-grid .ville:first-child { grid-column: span 2; }
  .gars-grid   { grid-template-columns: repeat(2, 1fr); }
  .zone-inner  { grid-template-columns: 1fr; gap: 3rem; }
  .zone-map-block { order: -1; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .ft-brand   { grid-column: span 2; }
  .srv { grid-template-columns: 1fr auto; }
  .local-main { grid-template-columns: 1fr; gap: 3rem; }
  .local-sidebar { position: static; }
}

@media (max-width: 768px) {
  :root { --section-pad: 4.5rem; --h-pad: 6vw; }

  /* Au-dessus du panneau ouvert : sinon le bouton (qui le referme) restait
     cache dessous, focus compris (WCAG 2.4.11). */
  .nav-toggle { display: flex; position: relative; z-index: 801; }
  /* Ferme, le panneau est aussi invisible (visibility) : ses liens sortent du
     parcours clavier. La visibility bascule apres le glissement a la fermeture. */
  .nav-links {
    position: fixed; inset: 0 0 0 25%; background: var(--cream);
    flex-direction: column; justify-content: center;
    padding: 2rem; gap: 1.75rem;
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
    border-left: 1px solid var(--border); z-index: 800;
    box-shadow: -8px 0 32px rgba(13,13,13,.12);
  }
  .nav-links.open { transform: translateX(0); visibility: visible; transition: transform var(--dur-2) var(--ease), visibility 0s; }
  .nav-links a { font-size: 1.1rem; }
  .nav-links .nav-link { opacity: .7; }
  .nav-links .nav-cta { font-size: 1rem; text-align: center; opacity: 1; }
  /* Pages villes, haut de page : la nav est blanche sur le heros sombre, mais
     le panneau mobile est creme. Liens et bouton fermer repassent a l'encre
     (blanc sur creme : 1,06:1). */
  .page-local #nav:not(.stuck) .nav-links a,
  .page-local #nav:not(.stuck) .nav-links a:hover { color: var(--ink); }
  .page-local #nav:not(.stuck) .nav-links .nav-cta { background: var(--ink); color: var(--white); }
  .page-local #nav:not(.stuck) .nav-toggle[aria-expanded="true"] span { background: var(--ink); }

  .hero-body { flex-direction: column; }
  .hero-visual { display: none; }
  .hero-headline { font-size: clamp(3.5rem, 14vw, 6rem); }
  .hero-headline .hl-accent { -webkit-text-stroke-width: 1.5px; }
  .hero-stats { flex-wrap: wrap; gap: 1.5rem; }
  .stat {
    flex: 0 0 calc(50% - .75rem); border-right: none; padding-right: 0;
    padding-bottom: 1.5rem; border-bottom: 1px solid var(--border);
  }
  .stat:nth-child(odd), .stat:nth-child(even) { padding-left: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }

  .villes-grid { grid-template-columns: 1fr 1fr; }
  .gars-grid   { grid-template-columns: 1fr; }
  .zone-btns   { grid-template-columns: 1fr 1fr; }
  .zone-map    { height: 280px; }
  .srv { grid-template-columns: 1fr; }
  .srv-meta { display: none; }
  /* Les garanties restent visibles sur mobile, en lignes. */
  .certif-band { flex-direction: column; align-items: flex-start; gap: .875rem; }
  .certif-items { flex-wrap: wrap; gap: .75rem 1.75rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .ft-brand   { grid-column: span 1; }
  .cta-contacts { gap: 1.5rem; }
  .local-cta { flex-direction: column; align-items: flex-start; }
  .local-hero { padding-top: 8rem; }
}

@media (max-width: 480px) {
  :root { --h-pad: 5vw; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .villes-grid { grid-template-columns: 1fr; }
  .villes-grid .ville:first-child { grid-column: span 1; }
  .cta-btns { flex-direction: column; align-items: flex-start; }
  .zone-btns { grid-template-columns: 1fr; }
}


/* ---- Prestations par ville (accueil) ----------------------------------
   Vingt liens internes vers les pages service x ville : c'est ce qui donne
   a Google un chemin vers elles, et au visiteur une entree directe sur son
   besoin reel plutot que sur une page ville generique. */
.prestations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2rem; max-width: 1200px; margin: 3rem auto 0; padding: 0 var(--h-pad); }
.prestation-col h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-bottom: .9rem; color: var(--ink); }
.prestation-col ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; padding: 0; margin: 0; }
.prestation-col a { font-size: .9rem; color: var(--muted-contraste); text-decoration: none; transition: color var(--dur-1) var(--ease); }
.prestation-col a:hover { color: var(--blue-ink); }


/* ---- Pages de texte (mentions legales, 404) ---------------------------
   La feuille du site sert le one-pager anime ; ces regles posent un
   document lisible par-dessus, sans toucher au reste. */
.doc { max-width: 76ch; margin: 0 auto; padding: 10rem 5vw 5rem; }
.doc h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem,5vw,3rem); line-height: 1.15; margin: 0 0 .7rem; }
.doc .doc-sub { color: var(--muted); margin: 0 0 3rem; }
.doc h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin: 2.6rem 0 .8rem; }
.doc p, .doc li { line-height: 1.7; }
.doc dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.6rem; margin: 1rem 0 0; }
.doc dt { font-weight: 700; }
.doc dd { margin: 0; }
.doc ul { padding-left: 1.2rem; }
.doc a { color: var(--blue-ink); }  /* 5,0:1 sur le creme */
.doc .retour { display: inline-block; margin-top: 3rem; font-weight: 700; }
@media (max-width: 620px) { .doc dl { grid-template-columns: 1fr; gap: .1rem 0; } .doc dd { margin-bottom: .7rem; } }


/* ---- Boutons de revelation dans le pied de page -----------------------
   .reveal-btn est dessine pour la section contact, sur fond sombre : son
   texte blanc y fonctionne. Le pied de page, lui, est creme (--cream-deep),
   et le meme blanc y tombe a 1.25:1. On repasse en encre lisible. */
footer .reveal-btn .reveal-masked { color: var(--muted-contraste); }
footer .reveal-btn:hover .reveal-masked { color: var(--ink); }
footer .reveal-btn .reveal-value,
footer .reveal-btn .reveal-value a { color: var(--ink); }

/* Carte chargée à la demande (17/10/2026) : le bouton couvre l'emplacement. */
.zone-map { position: relative; }
.map-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1.5rem; border: 0; cursor: pointer; text-align: center; font: inherit; background: var(--ink); color: var(--cream); }
.map-consent b { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.map-consent span { max-width: 34ch; font-size: .85rem; opacity: .85; }
.map-consent:hover b { text-decoration: underline; }

/* Appeler depuis le haut des pages service (relecture du 17/10/2026). */
.hero-appel { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1.6rem; }
.hero-appel-devis { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero-appel-devis:hover { color: var(--blue); }


/* ---- Barre d'appel mobile (09/11/2026) ---------------------------------
   Sous 760 px, un bouton d'appel reste au pied de l'ecran. C'est un
   .reveal-btn comme les autres : le premier appui affiche le numero, le
   second appelle. Le numero n'est donc jamais ecrit dans la page. */
.call-bar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
  .call-bar {
    display: block; position: fixed; inset: auto 0 0; z-index: 850;
    padding: .625rem var(--h-pad) calc(.625rem + env(safe-area-inset-bottom, 0px));
    background: var(--ink); border-top: 1px solid rgba(255,255,255,.08);
  }
  .call-bar .reveal-btn {
    width: 100%; min-height: 48px; justify-content: center; gap: .6rem;
    background: var(--red-dark); color: var(--white); border-radius: var(--r-sm);
    font-weight: 700; font-size: 1rem; line-height: 1.2;
    transition: background-color var(--dur-1) var(--ease);
  }
  .call-bar .reveal-btn:hover, .call-bar .reveal-btn:active { background: var(--red-deep); }
  .call-bar .reveal-btn .reveal-masked,
  .call-bar .reveal-btn .reveal-value { font: inherit; color: inherit; text-decoration: none; }
  .hero-scroll-hint { display: none; }
}
/* Menu mobile en mouvement reduit : il apparait en fondu, sans glisser. */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .nav-links { transform: none; opacity: 0; transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); }
  .nav-links.open { opacity: 1; transition: opacity var(--dur-2) var(--ease), visibility 0s; }
}