/*
Theme Name: Ideelec
Theme URI: https://ideelec17.fr/
Author: SAS Ideelec
Description: Thème bloc du site Ideelec, électricien à Benon (17170). Tout le contenu est fait de blocs natifs, modifiables dans l'éditeur.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: Tous droits réservés
Text Domain: ideelec
*/
/* ==========================================================
   IDEELEC — maquette d'accueil
   Registre : référence Handyma (grotesque grasse en capitales,
   fond crème, bandes pleine largeur + blocs arrondis encartés).
   Couleurs : anthracite + jaune Ideelec + crème (validé client).
   ========================================================== */

/* Archivo, hébergée sur le site (plus d'appel à Google Fonts) : police variable, graisses 400 à 900,
   jeu « latin » (accents français, œ, €, guillemets, tirets). Licence SIL Open Font License 1.1. */
:root {
  --nuit: #1E1E1D;
  --nuit-2: #2A2A29;
  --anthracite: #494948;
  --jaune: #FDC700;
  --creme: #FFF4E8;
  --blanc: #FFFFFF;
  --gris: #63605B;
  --ligne: rgba(30, 30, 29, .12);
  --ligne-claire: rgba(255, 255, 255, .12);

  --grotesque: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serial: "Digital Serial", "Archivo", sans-serif;

  --rayon: 10px;
  --rayon-bloc: 12px;
  --largeur: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--creme);
  color: var(--nuit);
  font-family: var(--grotesque);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.02; hyphens: none; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* lien d'évitement : caché, il apparaît à la première tabulation pour sauter le menu */
.lien-evitement {
  position: fixed; z-index: 1000; left: 16px; top: -80px; padding: 12px 18px; border-radius: 6px;
  background: var(--jaune); color: var(--nuit); font-size: 14px; font-weight: 800; transition: top .2s;
}
.lien-evitement:focus { top: 12px; }
/* navigation au clavier : contour bien visible (anthracite sur fond clair ou jaune, jaune sur fond sombre) */
:focus-visible { outline: 3px solid var(--nuit); outline-offset: 3px; }
.entete :focus-visible, .heros :focus-visible, .sombre :focus-visible, .pied-sombre :focus-visible,
.contact-form :focus-visible, .defile-fleche:focus-visible { outline-color: var(--jaune); }
/* liens dans le texte (maillage interne) : soulignés en jaune, en anthracite sur le bloc jaune */
.lien-texte { font-weight: 700; text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lien-texte:hover { text-decoration-color: currentColor; }
.devis-jaune .lien-texte { text-decoration-color: var(--nuit); }

.enveloppe { width: min(var(--largeur), 100% - 48px); margin-inline: auto; }

/* ---------- boutons ---------- */
.duo { display: inline-flex; align-items: stretch; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.btn-carre {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 6px;
  background: var(--jaune); color: var(--nuit);
  transition: transform .2s;
}
.btn-carre svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.entete-actions .btn-carre svg, .heros .btn-carre svg { fill: currentColor; stroke: none; }
.btn-carre-sombre { background: var(--anthracite); color: var(--jaune); }
.btn-pilule {
  display: inline-flex; align-items: center;
  height: 46px; padding: 0 22px; border-radius: 6px;
  background: var(--jaune); color: var(--nuit);
  font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.btn-blanc { background: var(--blanc); }
.btn-nuit { background: var(--nuit); color: var(--blanc); }
.duo:hover .btn-carre, .btn-carre:hover { transform: rotate(-8deg); }

/* ---------- surtitres ---------- */
.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serial); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 18px;
}
.surtitre i { width: 10px; height: 10px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 3px rgba(253, 199, 0, .25); }

.entete-section { text-align: center; max-width: 760px; margin-inline: auto; }
.entete-section h2 { font-size: clamp(30px, 3.3vw, 46px); }
.entete-section p { margin-top: 14px; font-size: 15px; color: var(--gris); }
.entete-clair h2 { color: var(--blanc); }
.entete-clair p { color: rgba(255, 255, 255, .62); }

/* ==========================================================
   EN-TÊTE
   ========================================================== */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding: 18px 0;
  transition: background .3s, padding .3s, box-shadow .3s;
}
.entete.est-colle { background: rgba(30, 30, 29, .94); backdrop-filter: blur(8px); padding: 10px 0; box-shadow: 0 1px 0 var(--ligne-claire); }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.entete-logo img { width: 48px; height: 48px; }
.entete-nav { display: flex; gap: 34px; }
.entete-nav a {
  color: rgba(255, 255, 255, .78); font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  position: relative; padding: 6px 0;
}
.entete-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--jaune); transition: right .25s; }
.entete-nav a:hover { color: var(--blanc); }
.entete-nav a:hover::after { right: 0; }
.entete-actions { display: flex; gap: 6px; }
.entete-actions .btn-carre, .entete-actions .btn-pilule { height: 42px; }
.entete-actions .btn-carre { width: 42px; }

/* ---------- menu mobile : bouton « burger » (anthracite, traits jaunes) qui devient une croix ---------- */
.entete-burger { display: none; }
@media (max-width: 900px) {
  .entete-burger {
    display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
    border: 0; border-radius: 6px; background: var(--anthracite); cursor: pointer;
  }
  .entete-burger span, .entete-burger span::before, .entete-burger span::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--jaune);
    transition: transform .25s, background .2s;
  }
  .entete-burger span { position: relative; }
  .entete-burger span::before, .entete-burger span::after { content: ""; position: absolute; left: 0; }
  .entete-burger span::before { top: -6px; }
  .entete-burger span::after { top: 6px; }
  .menu-ouvert .entete-burger span { background: transparent; }
  .menu-ouvert .entete-burger span::before { transform: translateY(6px) rotate(45deg); }
  .menu-ouvert .entete-burger span::after { transform: translateY(-6px) rotate(-45deg); }
  /* téléphone : fond plein, sans flou d'arrière-plan (le flou est recalculé à chaque pas du défilement) */
  .entete.est-colle, .entete.menu-ouvert { background: rgba(30, 30, 29, .97); backdrop-filter: none; }

  /* le menu se déroule sous l'en-tête : carte anthracite, numéros jaunes en Digital Serial, flèche à droite */
  .entete-nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; padding: 6px 22px;
    background: var(--nuit); border: 1px solid var(--ligne-claire); border-radius: var(--rayon-bloc);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
    counter-reset: rubrique;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .25s, transform .25s, visibility 0s .25s;
  }
  .menu-ouvert .entete-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
  /* sur mobile, le menu ne garde que Accueil, Zone, Réalisations et Contact */
  .entete-nav a[data-page="services"] { display: none; }
  .entete-nav a {
    counter-increment: rubrique; display: flex; align-items: center; gap: 16px; padding: 17px 0;
    font-size: 17px; letter-spacing: .06em; color: var(--blanc); border-bottom: 1px solid var(--ligne-claire);
  }
  .entete-nav a:last-child { border-bottom: 0; }
  .entete-nav a::before { content: counter(rubrique, decimal-leading-zero); font: 700 14px var(--serial); color: var(--jaune); }
  .entete-nav a::after {
    position: static; margin-left: auto; width: 9px; height: 9px; background: none;
    border-top: 2px solid var(--jaune); border-right: 2px solid var(--jaune); transform: rotate(45deg); transition: transform .2s;
  }
  .entete-nav a:hover::after, .entete-nav a.est-actif::after { right: auto; transform: translateX(3px) rotate(45deg); }
}

/* ==========================================================
   HÉROS
   ========================================================== */
.heros {
  position: relative; overflow: hidden; isolation: isolate;
  /* l'accueil tient exactement dans un écran */
  height: 100vh; height: 100svh; min-height: 620px;
  padding: clamp(104px, 15vh, 160px) 0 0;
  background: linear-gradient(105deg, #1A1A19 0%, #262625 42%, #3D3D3C 100%);
  color: var(--blanc);
  display: flex; flex-direction: column;
}
.heros-photo {
  /* camion face à la tour Saint-Nicolas : cadré à droite pour garder la tour */
  position: absolute; z-index: -2; top: 0; right: 0;
  width: 80%; height: 112%; object-fit: cover; object-position: 100% 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 16%, #000 32%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 16%, #000 32%);
  filter: saturate(.92) brightness(.82);
}
.heros::before {
  /* voile : assombrit le ciel derrière le texte de droite et le pied du héros */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(26,26,25,.78) 0%, rgba(26,26,25,.25) 34%, rgba(26,26,25,0) 55%, rgba(26,26,25,.72) 100%),
    linear-gradient(90deg, rgba(26,26,25,.65) 0%, rgba(26,26,25,0) 55%);
}
/* ---------- apparition en mode orage (2,2 s) ----------
   0,08 s  la foudre frappe dès l'ouverture, double impact, le camion s'éclaire
   0,6 s   bref retour au noir : seul le logo IDEELEC reste allumé, comme un néon
   0,85 s  la nuit se lève, puis textes et boutons apparaissent (tout est là à 1,9 s).
   Le menu est visible et cliquable dès l'ouverture.
   Un clic, une touche ou un défilement passe l'intro (app.js ajoute .intro-passee). */
.orage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orage-nuit { position: absolute; inset: 0; background: #0B0B0A; opacity: 0; animation: nuit 2.2s ease-out both; }
.orage-flash {
  position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 60% 70% at var(--fx, 60%) var(--fy, 16%), #FFFFFF 0%, rgba(255, 246, 214, .85) 30%, rgba(255, 246, 214, 0) 75%);
  animation: flash 2.2s linear both;
}
.eclair {
  position: absolute; left: 47%; top: 0; width: 22%; height: 62%; opacity: 0; overflow: visible;
  filter: drop-shadow(0 0 4px #FFFFFF) drop-shadow(0 0 16px rgba(253, 199, 0, .85)) drop-shadow(0 0 40px rgba(253, 199, 0, .5));
  animation: foudre 2.2s linear both;
}
.eclair path { fill: none; stroke: #FFFDF2; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.eclair .eclair-branche { stroke-width: 1.6; }
/* petit éclair lointain, rejoué de temps en temps (position tirée au hasard par app.js) */
.eclair-petit { left: var(--ex, 72%); width: 8%; height: var(--eh, 36%); transform: scaleX(var(--es, 1)); animation: none; }
.eclair-petit path { stroke-width: 2.2; }

.heros-photo { animation: illumine 2.2s linear both; }
.heros-logo { animation: neon 2.2s linear both; }
.heros-slogan, .heros-cote, .heros-bandeau { animation: apparait 2.2s ease-out both; }
.heros-slogan { animation-delay: .08s; }
.heros-cote { animation-delay: .16s; }
.heros-bandeau { animation-delay: .24s; }

/* repères : 3,6 % = 0,08 s · 12,3 % = 0,27 s · 16,8 % = 0,37 s · 27,3 % = 0,6 s · 38,6 % = 0,85 s · 72,7 % = 1,6 s */
@keyframes nuit {
  0%, 3.4% { opacity: 1; } 3.6% { opacity: 0; } 12.3% { opacity: .7; } 16.8% { opacity: 0; } 20.5% { opacity: .3; }
  27.3%, 38.6% { opacity: .92; } 72.7%, 100% { opacity: 0; }
}
@keyframes flash {
  0%, 3.4% { opacity: 0; } 3.6% { opacity: .95; } 8% { opacity: .2; } 12.3% { opacity: 0; }
  16.8% { opacity: .75; } 19% { opacity: .3; } 23% { opacity: .1; } 27.3%, 100% { opacity: 0; }
}
@keyframes foudre {
  0%, 3% { opacity: 0; clip-path: inset(0 0 100% 0); }
  3.1% { opacity: .8; clip-path: inset(0 0 100% 0); }
  5.5% { opacity: 1; clip-path: inset(0 0 0 0); }
  12.3% { opacity: .25; } 16.8% { opacity: 1; } 20% { opacity: .9; } 23% { opacity: .55; }
  27.3%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes illumine {
  0%, 3.4% { filter: saturate(.92) brightness(.82); } 3.6% { filter: saturate(.45) brightness(1.8); } 12.3% { filter: saturate(.92) brightness(.82); }
  16.8% { filter: saturate(.55) brightness(1.5); } 23% { filter: saturate(.8) brightness(1); } 27.3%, 100% { filter: saturate(.92) brightness(.82); }
}
@keyframes neon {
  0%, 3.4% { opacity: 0; filter: none; }
  3.6% { opacity: 1; filter: brightness(1.6) drop-shadow(0 0 26px rgba(253, 199, 0, .95)); }
  /* un seul grésillement (au plus 3 flashs par seconde avec l'éclair : critère WCAG 2.3.1, épilepsie photosensible) */
  8% { opacity: .15; } 12% { opacity: 1; } 17% { opacity: .75; }
  23%, 38.6% { opacity: 1; filter: brightness(1.25) drop-shadow(0 0 34px rgba(253, 199, 0, .8)); }
  72.7% { opacity: 1; filter: brightness(1.05) drop-shadow(0 0 22px rgba(253, 199, 0, .35)); }
  100% { opacity: 1; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
}
/* version téléphone du néon : même rythme, opacité seule (aucun filtre à recalculer) */
@keyframes neon-leger {
  0%, 3.4% { opacity: 0; } 3.6% { opacity: 1; } 8% { opacity: .15; } 12% { opacity: 1; } 17% { opacity: .75; } 23%, 100% { opacity: 1; }
}
@keyframes apparait {
  0%, 40% { opacity: 0; transform: translateY(14px); }
  75%, 100% { opacity: 1; transform: none; }
}

/* intro terminée ou passée : chaque élément revient à son état de repos */
.intro-passee .orage-nuit, .intro-passee .orage-flash, .intro-passee .eclair,
.intro-passee .heros-photo, .intro-passee .heros-logo,
.intro-passee .heros-slogan, .intro-passee .heros-cote, .intro-passee .heros-bandeau { animation: none; }

/* petit éclair de temps en temps : la page reste visible, le ciel s'allume une seconde */
.eclair-lointain .orage-flash { animation: petit-flash 1.3s linear; }
.eclair-lointain .eclair-petit { animation: petit-eclair 1.3s linear; }
.eclair-lointain .heros-photo { animation: petit-illumine 1.3s linear; }
.eclair-lointain .heros-logo { animation: reflet-logo 1.3s linear; }
@keyframes petit-flash { 0% { opacity: 0; } 7% { opacity: .38; } 13% { opacity: .05; } 21% { opacity: .28; } 36%, 100% { opacity: 0; } }
@keyframes petit-eclair {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); } 6% { opacity: 1; clip-path: inset(0 0 0 0); }
  13% { opacity: .25; } 21% { opacity: 1; } 36%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes petit-illumine {
  0%, 100% { filter: saturate(.92) brightness(.82); } 7% { filter: saturate(.7) brightness(1.2); }
  13% { filter: saturate(.92) brightness(.85); } 21% { filter: saturate(.8) brightness(1.08); } 36% { filter: saturate(.92) brightness(.82); }
}
@keyframes reflet-logo {
  0%, 100% { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
  7% { filter: brightness(1.3) drop-shadow(0 0 24px rgba(253, 199, 0, .8)); }
  13% { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
  21% { filter: brightness(1.15) drop-shadow(0 0 18px rgba(253, 199, 0, .6)); }
  40% { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
}

/* ---------- éclair réaliste (classe .eclair-realiste sur le héros) ----------
   Le tracé est dessiné par app.js dans un canvas, à partir des mêmes animations
   (foudre, petit-eclair) : les SVG restent animés mais invisibles et servent d'horloge. */
.eclair-realiste .eclair { visibility: hidden; }
.eclair-toile { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.eclair-realiste .orage-flash {
  background: radial-gradient(ellipse 65% 75% at var(--fx, 57%) var(--fy, 12%), #F4F6FF 0%, rgba(206, 214, 255, .8) 30%, rgba(206, 214, 255, 0) 75%);
}

@media (prefers-reduced-motion: reduce) {
  .orage { display: none; }
  .heros-photo, .heros-logo, .heros-slogan, .heros-cote, .heros-bandeau { animation: none !important; }
}

.heros-grille { display: grid; grid-template-columns: 1.15fr .85fr; align-items: start; gap: 40px; flex: 1; }
.heros-titre { padding-top: 6vh; }
.heros h1 { line-height: 0; }
.heros-logo { width: min(680px, 100%, 78vh); height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.heros-slogan {
  margin-top: 26px;
  font-family: var(--serial); font-size: clamp(22px, 2.3vw, 34px); letter-spacing: .02em; line-height: 1.2;
}
.heros-slogan i { font-style: normal; color: var(--jaune); margin: 0 .25em; }
/* texte et boutons sous le logo, à gauche du camion */
.heros-cote { margin-top: clamp(20px, 4vh, 36px); max-width: 430px; }
.heros-cote p { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .86); margin-bottom: 24px; text-shadow: 0 1px 12px rgba(0,0,0,.4); }

.heros-bandeau {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 24px 0 28px;
  border-top: 1px solid var(--ligne-claire);
}
.heros-bandeau li {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82);
}
.heros-bandeau li::before { content: ""; width: 8px; height: 8px; background: var(--jaune); border-radius: 50%; }
/* maillage interne : les intitulés mènent aux cartes Services, sans changer leur apparence (jaune au survol) */
.heros-bandeau a { transition: color .2s; }
.heros-bandeau a:hover { color: var(--jaune); }

/* ==========================================================
   ZONE D'INTERVENTION
   ========================================================== */
.zone {
  position: relative; overflow: hidden; isolation: isolate;
  /* marge du haut liée à la hauteur d'écran, comme la section Méthode : juste de quoi passer sous le menu sur un petit portable */
  padding: clamp(88px, 14vh, 120px) 0 130px;
}
.zone-texte { position: relative; isolation: isolate; }
.zone-texte::before {
  /* plan d'électricien dessiné à la main, uniquement sous le texte : il ne déborde jamais sur la carte */
  content: ""; position: absolute; z-index: -1; inset: -50px -70px -40px -10px;
  background: url("assets/img/plan-maison.svg") center / contain no-repeat;
  opacity: .06;
}
.zone-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
/* la carte posée comme une fiche : fond blanc pointillé, angles arrondis, ombre douce */
.zone-carte {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--blanc);
  background-image: radial-gradient(rgba(30, 30, 29, .1) 1px, transparent 1.4px);
  background-size: 14px 14px;
  border-radius: var(--rayon-bloc);
  box-shadow: 0 2px 6px rgba(30, 30, 29, .06), 0 32px 64px -26px rgba(30, 30, 29, .38);
}
.zone-carte::before {
  /* halo jaune derrière la zone couverte */
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(253,199,0,.22) 0%, rgba(253,199,0,0) 66%);
}
.carte { position: relative; display: block; width: 100%; height: auto; overflow: hidden; }
.carte-monde { transform-origin: 0 0; transition: transform 1.6s cubic-bezier(.7, 0, .2, 1) 1.5s; }
.dep { fill: #EEE8DF; stroke: var(--blanc); stroke-width: .7; opacity: 0; transition: opacity .8s, fill .6s; }

/* rose des vents, posée sur la carte une fois le zoom terminé */
.carte-nord { position: absolute; top: 18px; right: 18px; width: 38px; height: 49px; opacity: 0; transition: opacity .6s 3s; }
.carte-nord path { fill: var(--nuit); }
.carte-nord .nord-ombre { fill: var(--jaune); }
.carte-nord text { font: 700 11px var(--serial); fill: var(--nuit); text-anchor: middle; }
.zone.visible .carte-nord { opacity: 1; }
.dep.cible {
  fill: rgba(253, 199, 0, 0); stroke: var(--nuit); stroke-width: 1.1; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: opacity .8s, fill .7s .9s, stroke-dashoffset 1.1s .4s;
}
.carte-etiquettes, .carte-epingle { opacity: 0; transition: opacity .6s 3s; }
.carte-etiquettes text { text-anchor: middle; fill: var(--nuit); font-family: var(--grotesque); }
.carte-etiquettes .num { font-family: var(--serial); font-size: 8px; }
.carte-etiquettes .nom { font-size: 2.4px; font-weight: 800; letter-spacing: .05em; }
.carte-epingle .point { fill: var(--nuit); stroke: var(--jaune); stroke-width: 1.2; }
.carte-epingle .onde { fill: none; stroke: var(--nuit); stroke-width: .6; transform-box: fill-box; transform-origin: center; }
.carte-epingle .ville { font-family: var(--serial); font-size: 4.6px; fill: var(--nuit); }
/* halo jaune derrière les noms : lisibles même quand ils croisent la côte ou une frontière */
.carte-trajets text, .carte-epingle .ville { paint-order: stroke; stroke: var(--jaune); stroke-width: 1px; stroke-linejoin: round; }

.carte-trajets path { fill: none; stroke: var(--nuit); stroke-width: .55; stroke-linecap: round; stroke-dasharray: .04 .03; opacity: 0; transition: opacity .6s 3.4s; }
.carte-trajets circle { fill: var(--nuit); opacity: 0; transition: opacity .4s 4.3s; }
.carte-trajets text { font-family: var(--grotesque); font-size: 2.7px; font-weight: 600; fill: var(--nuit); opacity: 0; transition: opacity .4s 4.4s; }
.zone.visible .carte-trajets path { opacity: 1; animation: trajet 1.4s 3.4s linear infinite; }
.zone.visible .carte-trajets circle, .zone.visible .carte-trajets text { opacity: 1; }
/* les tirets avancent depuis Benon : on se déplace chez vous */
@keyframes trajet { to { stroke-dashoffset: -.07; } }

.zone.visible .dep { opacity: 1; }
.zone.visible .dep.cible { fill: var(--jaune); stroke-dashoffset: 0; }
.zone.visible .carte-monde { transform: scale(2.9) translate(-66px, -210px); }
.zone.visible .carte-etiquettes, .zone.visible .carte-epingle { opacity: 1; }
.zone.visible .carte-epingle .onde { animation: onde 2.2s 3.2s ease-out infinite; }
/* section sortie de l'écran (app.js) : les animations en boucle s'arrêtent, rien n'est recalculé pour rien */
.hors-champ, .hors-champ * { animation-play-state: paused !important; }
@keyframes onde { from { transform: scale(1); opacity: 1; } to { transform: scale(4.5); opacity: 0; } }
/* animations limitées : la carte s'affiche directement, sans zoom ni boucles */
@media (prefers-reduced-motion: reduce) {
  .carte-monde, .carte-etiquettes, .carte-epingle, .carte-trajets path, .carte-trajets circle, .carte-trajets text, .dep { transition: none; }
  .zone.visible .carte-trajets path, .zone.visible .carte-epingle .onde { animation: none; }
}

/* titre réduit (demande du client, 2026-11-09) : la section tient dans l'écran, sous le menu, sans faire défiler */
.zone-texte h2 { font-size: clamp(26px, min(2.3vw, 4.4vh), 34px); }
/* espacements liés à la hauteur d'écran : inchangés sur un grand écran, resserrés sur un portable */
.zone-texte .surtitre { margin-bottom: clamp(12px, 2.2vh, 18px); }
.zone-texte .chapo { margin-top: clamp(12px, 2.2vh, 20px); color: var(--gris); font-size: 16px; max-width: 520px; }
.zone-texte .lien-fleche { margin-top: clamp(14px, 2.8vh, 26px); }
.zone-deps { margin-top: clamp(16px, 3.2vh, 30px); border-top: 1px solid var(--ligne); }
/* taille et interligne posés sur le li : sinon l'interligne du texte courant (16 px) écartait les lignes plus que prévu */
.zone-deps li { padding: clamp(10px, 1.9vh, 18px) 0; border-bottom: 1px solid var(--ligne); font-size: 14px; line-height: 1.5; }
.zone-deps span { font-size: 14px; color: var(--gris); line-height: 1.5; }
.zone-deps strong { display: block; color: var(--nuit); font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
/* communes qui ont déjà leur page : soulignées en jaune */
.lien-fleche { display: inline-block; margin-top: 26px; font-size: 14px; font-weight: 600; border-bottom: 2px solid var(--jaune); padding-bottom: 2px; }
/* numéro de téléphone jamais coupé en fin de ligne */
.lien-fleche em { font-style: normal; font-family: var(--serial); white-space: nowrap; }
/* téléphone et tablette : plus de trait sous toute la phrase, seul le numéro est souligné pour montrer qu'il se touche */
@media (max-width: 900px) {
  .lien-fleche[href^="tel:"] { border-bottom: 0; padding-bottom: 0; }
  .lien-fleche[href^="tel:"] em { text-decoration-line: underline; text-decoration-thickness: 2px; text-decoration-color: var(--jaune); text-underline-offset: 5px; }
}

/* ==========================================================
   SERVICES — cartes qui défilent
   ========================================================== */
.services { position: relative; overflow: hidden; isolation: isolate; padding: 40px 0 70px; }

.defile { position: relative; margin-top: 56px; }
/* touch-action : au doigt, le glisser horizontal reste au carrousel, le défilement vertical à la page */
.defile-piste { display: flex; gap: 26px; width: max-content; padding-left: 26px; will-change: transform; cursor: grab; user-select: none; touch-action: pan-y; }
.defile-piste.saisi { cursor: grabbing; }
.carte-service { width: 252px; flex: none; text-align: center; }
.carte-service img {
  /* height: auto : la hauteur vient du ratio 5/6, pas des attributs width/height (qui servent à réserver la place) */
  width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--rayon);
  pointer-events: none; transition: transform .4s;
}
@media (hover: hover) { .carte-service:hover img { transform: translateY(-6px); } }
.carte-service h3 { margin-top: 18px; font-size: 15px; letter-spacing: .02em; }
.carte-service p { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--gris); padding-inline: 8px; }
.defile-fleche {
  position: absolute; z-index: 2; right: max(24px, calc((100vw - var(--largeur)) / 2 - 20px)); top: 120px;
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--jaune); color: var(--nuit); border: 0; cursor: pointer;
  box-shadow: 0 0 0 7px var(--creme), 0 0 0 9px var(--nuit), 0 18px 40px rgba(30,30,29,.25);
  display: grid; place-items: center; transition: transform .25s;
}
.defile-fleche svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.defile-fleche:hover { transform: translateX(4px); }

/* ==========================================================
   BANDE SOMBRE — les 4 étapes du chantier (tient dans un écran)
   ========================================================== */
/* marges calées sur la hauteur d'écran + menu fixe (~62 px) : la section tient même sur un portable 1366 × 657 */
.sombre { background: var(--nuit); color: var(--blanc); padding: clamp(100px, 15vh, 120px) 0 clamp(36px, 7vh, 72px); overflow: hidden; }
.sombre .entete-section { max-width: 980px; }
.sombre .entete-section p { margin-top: 12px; }

.etapes-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(26px, 4.5vh, 44px); }
.etape-carte {
  position: relative; display: flex; flex-direction: column; padding: 24px 24px 26px;
  border-radius: var(--rayon-bloc); background: var(--nuit-2); border: 1px solid var(--ligne-claire);
  transition: transform .3s, border-color .3s;
}
.etape-carte:hover { transform: translateY(-4px); border-color: rgba(253, 199, 0, .45); }
/* filet jaune qui relie une étape à la suivante */
.etape-carte:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -15px; width: 16px; height: 2px; background: var(--jaune); }
.etape-num { font: 700 42px/1 var(--serial); color: var(--jaune); text-shadow: 3px 3px 0 rgba(0, 0, 0, .55); }
.etape-carte h3 { margin-top: 16px; font-size: 17px; line-height: 1.15; }
.etape-carte p { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .7); }

/* ==========================================================
   CHIFFRES CLÉS — 3 compteurs animés (années, clients, réalisations)
   ========================================================== */
.chiffres { padding: 100px 0 0; }
/* même panneau blanc à filets de 1 px que le bandeau partenaires */
.chiffres-liste {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--rayon-bloc); overflow: hidden;
  box-shadow: 0 2px 6px rgba(30, 30, 29, .04), 0 24px 48px -30px rgba(30, 30, 29, .28);
}
.chiffre { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 32px 40px; background: var(--blanc); }
.chiffre-nombre { font: 700 clamp(64px, 7vw, 96px)/1 var(--serial); color: var(--nuit); white-space: nowrap; }
/* largeur finale réservée par app.js : les chiffres défilent sans faire bouger le « + » */
.chiffre-val { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.chiffre-nombre i { display: inline-block; margin-left: .04em; font-style: normal; color: var(--jaune); text-shadow: 3px 3px 0 var(--nuit); }
/* jauge de 10 segments qui s'allument un à un pendant le comptage (--charge : 0 à 100 %) */
.chiffre-jauge {
  position: relative; width: min(224px, 100%); height: 10px; margin-top: 24px;
  background: repeating-linear-gradient(90deg, var(--ligne) 0 calc(10% - 4px), transparent 0 10%);
}
.chiffre-jauge::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--jaune) 0 calc(10% - 4px), transparent 0 10%);
  clip-path: inset(0 calc(100% - var(--charge, 100%)) 0 0);
}
.chiffre-titre { margin-top: 24px; font-size: 18px; line-height: 1.15; }

/* animation (classes posées par app.js) : chiffres éteints à 0, allumage néon, comptage, étincelle à l'arrivée */
.compte-pret .chiffre-nombre { opacity: .14; }
.compte-lance .chiffre-nombre { animation: allumage .8s linear both; }
.compte-lance .chiffre:nth-child(2) .chiffre-nombre { animation-delay: .18s; }
.compte-lance .chiffre:nth-child(3) .chiffre-nombre { animation-delay: .36s; }
.chiffre.est-fini .chiffre-nombre i { animation: etincelle .7s ease-out; }
.chiffre.est-fini .chiffre-jauge { animation: jauge-pleine .9s ease-out; }
@keyframes allumage {
  0% { opacity: .14; text-shadow: none; }
  8% { opacity: 1; text-shadow: 0 0 22px rgba(253, 199, 0, .9); }
  16% { opacity: .25; text-shadow: none; }
  26% { opacity: 1; text-shadow: 0 0 26px rgba(253, 199, 0, .9); }
  36% { opacity: .5; }
  48% { opacity: 1; text-shadow: 0 0 18px rgba(253, 199, 0, .6); }
  100% { opacity: 1; text-shadow: none; }
}
@keyframes etincelle {
  0% { transform: none; }
  30% { transform: scale(1.4); text-shadow: 3px 3px 0 var(--nuit), 0 0 20px rgba(253, 199, 0, .95); }
  100% { transform: none; }
}
@keyframes jauge-pleine {
  0%, 50%, 100% { filter: none; }
  20%, 72% { filter: drop-shadow(0 0 7px rgba(253, 199, 0, .95)); }
}
@media (prefers-reduced-motion: reduce) {
  .compte-lance .chiffre-nombre, .chiffre.est-fini .chiffre-nombre i, .chiffre.est-fini .chiffre-jauge { animation: none; }
}

/* ==========================================================
   ASSURANCE ET GARANTIES — texte + logos à gauche, 3 garanties à droite
   ========================================================== */
.assurance { padding: 110px 0 0; }
.assurance-grille { display: grid; grid-template-columns: .92fr 1.08fr; gap: 64px; align-items: center; }
.assurance-texte h2 { font-size: clamp(30px, 3.1vw, 44px); }
.assurance-texte .chapo { margin-top: 18px; max-width: 500px; font-size: 16px; line-height: 1.65; color: var(--gris); }
.assurance-texte .chapo strong { color: var(--nuit); }
/* logos en tuiles blanches, même esprit que le bandeau partenaires, mais en couleurs : ce sont des gages de confiance */
.assurance-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.assurance-logos li {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 112px; padding: 18px 16px 14px; text-align: center;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon-bloc);
}
/* logo MAAF : un pavé plein, un peu moins haut que le logo Artisan pour peser autant */
.assurance-logos img { width: auto; max-width: 100%; height: 70px; }
.assurance-logos span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.assurance-logos img.logo-artisan { height: 80px; }
.assurance-cartes { display: grid; gap: 10px; }
.assurance-carte {
  display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start;
  padding: 24px 28px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon-bloc);
  box-shadow: 0 2px 6px rgba(30, 30, 29, .04), 0 24px 48px -30px rgba(30, 30, 29, .28);
}
.assurance-icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--rayon); background: var(--nuit); }
.assurance-icone svg { width: 26px; height: 26px; fill: none; stroke: var(--jaune); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.assurance-carte h3 { font-size: 18px; line-height: 1.15; }
.assurance-carte p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--gris); }
/* la carte « 20 ans sans sinistre » en sombre : c'est l'argument propre à Ideelec */
.assurance-carte-sombre { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.assurance-carte-sombre .assurance-icone { background: var(--jaune); }
.assurance-carte-sombre .assurance-icone svg { stroke: var(--nuit); }
.assurance-carte-sombre p { color: rgba(255, 255, 255, .7); }

/* ==========================================================
   NOS RÉALISATIONS — mosaïque de photos
   ========================================================== */
.realisations { padding: 120px 0 20px; }
.realisations-grille { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 10px; margin-top: 50px; }
.realisation { position: relative; margin: 0; overflow: hidden; border-radius: var(--rayon); background: var(--nuit); }
.realisation img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.realisation:hover img { transform: scale(1.05); }
.realisation::after {
  /* léger dégradé anthracite en pied de photo pour lire la légende */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 30, 29, 0) 58%, rgba(30, 30, 29, .78) 100%);
}
/* légende sur une ligne : Commune (dép.) · Travaux · Objet */
.realisation figcaption {
  position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 16px;
  color: var(--blanc); font-size: 15px; font-weight: 500; line-height: 1.35; text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.realisation figcaption b { font-weight: 800; }
/* chaque élément reste entier : la ligne ne se coupe qu'après un point */
.realisation figcaption b, .realisation figcaption span { white-space: nowrap; }
.realisation figcaption i { font-style: normal; font-weight: 800; color: var(--jaune); margin: 0 .45em; }
.real-grande { grid-column: span 2; grid-row: span 2; }
.real-grande figcaption { left: 26px; bottom: 22px; font-size: 18px; }
.real-haute { grid-row: span 2; }
.real-large { grid-column: span 2; }
.realisations-pied { display: flex; justify-content: center; margin-top: 34px; }

/* ==========================================================
   AVIS CLIENTS — note Google (carte anthracite) + avis (carte blanche)
   ========================================================== */
.avis { padding: 110px 0 0; }
.avis-grille { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 10px; margin-top: 50px; }
/* étoiles dessinées en SVG (5 étoiles jaunes), indépendantes de la police */
.etoiles {
  display: block; width: 130px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M11 1.5l2.8 6.1 6.6.7-5 4.5 1.4 6.5L11 16l-5.8 3.3 1.4-6.5-5-4.5 6.6-.7z' fill='%23FDC700'/%3E%3C/svg%3E") 0 0 / 26px 22px repeat-x;
}
.etoiles-petites { width: 90px; height: 15px; background-size: 18px 15px; }
.avis-note {
  display: flex; flex-direction: column; padding: 40px 38px 38px;
  background: var(--nuit); color: var(--blanc); border-radius: var(--rayon-bloc);
}
.avis-note-chiffre { font: 700 92px/1 var(--serial); color: var(--jaune); text-shadow: 3px 3px 0 rgba(0, 0, 0, .55); }
.avis-note-chiffre small { margin-left: 6px; font-size: 28px; color: rgba(255, 255, 255, .45); text-shadow: none; }
.avis-note .etoiles { margin-top: 18px; }
.avis-note-texte { margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.avis-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: auto; padding-top: 30px; }
.avis-lien { margin-top: 0; }
.avis-carte {
  position: relative; display: flex; flex-direction: column; margin: 0; padding: 48px 52px 40px;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon-bloc);
  box-shadow: 0 2px 6px rgba(30, 30, 29, .04), 0 24px 48px -30px rgba(30, 30, 29, .28);
}
/* grand guillemet jaune à ombre noire, comme les numéros d'étapes */
.avis-carte::before {
  content: "\201C"; position: absolute; top: 18px; right: 40px;
  font: 900 150px/1 var(--grotesque); color: var(--jaune); text-shadow: 4px 4px 0 var(--nuit);
}
.avis-carte blockquote { margin: 0; max-width: 620px; }
.avis-carte blockquote p { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.avis-carte figcaption { display: grid; gap: 4px; margin-top: 28px; }
.avis-carte figcaption .etoiles { margin-bottom: 6px; }
.avis-carte figcaption b { font-size: 16px; font-weight: 800; }
.avis-carte figcaption span:not(.etoiles) { font-size: 13px; color: var(--gris); }
.avis-carte .avis-lien { align-self: flex-start; margin-top: auto; padding-top: 0; }
.avis-carte figcaption .avis-lien { justify-self: start; margin-top: 22px; }
.avis-mention { margin-top: 18px; font-size: 12.5px; line-height: 1.55; color: var(--gris); }

/* ==========================================================
   DEVIS — bloc jaune « un seul numéro » + formulaire
   ========================================================== */
.devis { padding: 140px 0 40px; }
.devis-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.devis-jaune {
  position: relative; display: flex; flex-direction: column;
  background: var(--jaune); border-radius: var(--rayon-bloc); padding: 52px 56px 44px;
}
/* grand éclair en filigrane dans le coin bas droit : habille le bloc sans ajouter d'information */
.devis-jaune::after {
  content: ""; position: absolute; right: 44px; bottom: 34px; width: 112px; height: 192px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='51 43 19 34'%3E%3Cpath d='M63 44 52 62h8l-2 14 11-19h-8z' fill='%231E1E1D'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .08; transform: rotate(8deg);
}
/* accroche courte en Digital Serial, puis le vrai titre avec les mots-clés (devis, électricien, villes) */
.devis-accroche { font-family: var(--serial); font-size: 24px; line-height: 1.25; letter-spacing: .02em; margin-bottom: 16px; }
.devis-jaune h2 { font-size: clamp(30px, 3vw, 42px); }
.devis-intro { position: relative; z-index: 1; margin-top: 18px; max-width: 470px; font-size: 16px; line-height: 1.65; }
.devis-intro + .devis-intro { margin-top: 10px; }
.devis-jaune strong { font-weight: 700; }
/* horaires d'ouverture, en pastille sous le texte */
.devis-horaires {
  position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px; padding: 9px 18px 9px 12px; border-radius: 999px; background: rgba(30, 30, 29, .08); font-size: 15px; line-height: 1.3;
}
.devis-horaires svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--nuit); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* le numéro en bas du bloc, à hauteur du bouton « Envoyer ma demande » (même bouton double) */
.devis-appel { position: relative; z-index: 1; margin-top: auto; padding-top: 28px; font-style: normal; }
.btn-anthracite { background: var(--anthracite); color: var(--blanc); font: 700 19px var(--serial); letter-spacing: .05em; }
.devis-appel .duo:hover .btn-anthracite { background: var(--nuit); }
/* macaron tournant : il déborde du coin haut droit du bloc jaune */
.badge { position: absolute; right: 40px; top: -58px; width: 132px; height: 132px; animation: tourne 16s linear infinite; filter: drop-shadow(0 12px 24px rgba(30, 30, 29, .25)); }
.badge circle { fill: var(--nuit); }
.badge text { fill: var(--jaune); font: 700 11.4px var(--serial); letter-spacing: .12em; }
.badge-eclair { fill: var(--jaune); }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ==========================================================
   FAQ
   ========================================================== */
.faq { padding: 120px 0 80px; }

/* ==========================================================
   PARTENAIRES — bandeau de logos entre la FAQ et le pied de page
   ========================================================== */
.partenaires { padding: 0 0 60px; }
.partenaires-titre { margin-bottom: 18px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--gris); }
/* filets de 1 px entre les cases, quel que soit le nombre de colonnes */
.partenaires-liste {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
  background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--rayon-bloc); overflow: hidden;
  box-shadow: 0 2px 6px rgba(30, 30, 29, .04), 0 24px 48px -30px rgba(30, 30, 29, .28);
}
.partenaires-liste li { display: grid; place-items: center; height: 104px; padding: 18px 14px; background: var(--blanc); }
.partenaires-liste img { width: auto; max-width: 100%; max-height: 38px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.partenaires-liste li:hover img { filter: none; opacity: 1; }
/* écran tactile (pas de survol possible) : logos directement en couleurs */
@media (hover: none) { .partenaires-liste img { filter: none; opacity: 1; } }
/* logo carré : un peu plus haut pour peser autant que les logos horizontaux */
.partenaires-liste img.logo-carre { max-height: 52px; }
.faq-grille { max-width: 880px; margin: 50px auto 0; }
.faq-liste { display: grid; gap: 10px; }
.faq-liste details { background: var(--blanc); border-radius: var(--rayon); padding: 0 24px; }
.faq-liste summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-size: 14px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
}
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid var(--nuit); border-bottom: 2px solid var(--nuit); transform: rotate(45deg); transition: transform .3s, margin .3s;
}
.faq-liste details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq-liste details p { padding: 0 0 22px; margin-top: -6px; font-size: 14.5px; color: var(--gris); max-width: 620px; }
/* FAQ de l'accueil sur deux colonnes, toute la largeur du site (les pages communes gardent une colonne) */
.faq-grille.faq-colonnes { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; align-items: start; }

/* ==========================================================
   FORMULAIRE DE CONTACT (section Devis)
   ========================================================== */
/* en colonne : si le bloc jaune voisin est plus haut, c'est la zone « Votre projet » qui grandit (les autres champs gardent leur taille) */
.contact-form { background: var(--nuit); color: var(--blanc); border-radius: var(--rayon-bloc); padding: 44px 40px; display: flex; flex-direction: column; gap: 16px; }
.contact-form .champ-projet { flex: 1; grid-template-rows: auto 1fr; }
.contact-form h3 { font-size: 22px; margin-bottom: 6px; }
.contact-form label { display: grid; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.75); }
.champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; background: var(--nuit-2); border: 1px solid transparent; border-radius: 6px;
  color: var(--blanc); font: 14px var(--grotesque); padding: 13px 14px; outline: none; transition: border-color .2s;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
/* exemples dans les champs : contraste 5:1 sur le fond du formulaire */
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.5); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--jaune); }
.contact-form button { align-self: flex-start; margin-top: 8px; }
.form-obligatoire { margin-top: -10px; font-size: 12px; color: rgba(255,255,255,.6); }
/* champ piège anti-spam : hors de l'écran, ignoré par les lecteurs d'écran et la tabulation */
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-retour { font-size: 14px; font-weight: 600; color: var(--jaune); }
.form-retour:empty { display: none; }
/* message d'erreur du serveur (champ manquant, envoi impossible…) : blanc, filet jaune */
.form-retour.est-erreur { color: var(--blanc); border-left: 3px solid var(--jaune); padding-left: 12px; }
.contact-form button:disabled { opacity: .6; cursor: wait; }
.form-mention { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.6); }
.form-mention a { color: var(--blanc); text-decoration: underline; text-underline-offset: 2px; }
.form-mention a:hover { color: var(--jaune); }

/* ==========================================================
   PIED DE PAGE
   ========================================================== */
/* un seul bloc anthracite : pages, services, informations */
.pied { padding-bottom: 30px; }
.pied h2 { font-size: 11px; letter-spacing: .12em; font-weight: 700; margin-bottom: 18px; opacity: .6; }
/* la colonne Services, plus large, range ses 11 liens sur 3 colonnes : le pied de page ne fait que 5 lignes de haut */
/* Services pile au milieu du bloc (demande du client) : deux colonnes latérales égales, Informations calée à droite */
.pied-sombre { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; background: var(--nuit); color: var(--blanc); border-radius: var(--rayon-bloc); padding: 44px 48px; }
.pied-col { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.pied-col a { color: rgba(255,255,255,.82); }
.pied-col a:hover { color: var(--jaune); }
/* colonnes à la largeur de leur plus long service + écart fixe : exactement le même vide entre les colonnes (demande du client) ;
   align-content: start empêche les lignes de s'étirer à la hauteur de la colonne Pages */
.pied-services { display: grid; grid-template-columns: repeat(3, auto); column-gap: 40px; row-gap: 0; justify-content: start; align-content: start; justify-self: start; }
/* marge du titre = marge des autres colonnes + leur écart de 9 px : les premiers liens sont alignés */
/* titre « Services » centré au-dessus de ses colonnes (demande du client, 2026-11-09) */
.pied-services h2 { grid-column: 1 / -1; margin-bottom: 27px; text-align: center; }
.pied-services a { margin-bottom: 9px; }
.pied-infos { justify-self: end; }
.pied-copy { text-align: center; font-size: 12px; color: var(--gris); margin-top: 22px; }

/* ==========================================================
   PAGES INTÉRIEURES — bandeau de titre, pages communes, textes légaux
   ========================================================== */
.entete-nav a.est-actif { color: var(--blanc); }
.entete-nav a.est-actif::after { right: 0; }

.page-heros {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end; min-height: 470px; padding: 170px 0 70px;
  background: linear-gradient(105deg, #1A1A19 0%, #262625 42%, #3D3D3C 100%); color: var(--blanc);
}
.page-heros::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26,26,25,.72) 0%, rgba(26,26,25,0) 45%, rgba(26,26,25,.55) 100%);
}
.fil-ariane { display: flex; gap: 10px; margin-bottom: 18px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.fil-ariane a:hover { color: var(--jaune); }
.fil-ariane [aria-hidden] { color: var(--jaune); }
.page-heros h1 { font-size: clamp(36px, 5vw, 66px); max-width: 860px; }
.page-heros p { margin-top: 18px; max-width: 600px; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.84); }

/* ---------- pages communes « Électricien à … » : héros + radar ---------- */
.commune-heros { align-items: center; min-height: 0; padding: 150px 0 80px; }
.commune-heros-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 64px; align-items: center; }
.commune-heros h1 em { font-style: normal; color: var(--jaune); }
.commune-heros .duo { margin-top: 30px; }
.commune-heros .btn-carre svg, .commune-fiche .btn-carre svg { fill: currentColor; stroke: none; }
.commune-reperes { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.commune-reperes li { display: flex; align-items: center; gap: 9px; }
.commune-reperes li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 3px rgba(253, 199, 0, .2); }
.commune-reperes b { font: 700 16px var(--serial); letter-spacing: .03em; color: var(--blanc); }

/* radar : Benon au centre, un cercle tous les 10 km, la commune de la page en jaune (points ajoutés par app.js) */
.radar { margin: 0; }
.radar-ecran {
  position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, #31312F 0%, #1F1F1E 72%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 12px rgba(255, 255, 255, .03), 0 40px 70px -30px rgba(0, 0, 0, .7);
}
/* faisceau qui balaie le cadran */
.radar-ecran::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(253, 199, 0, 0) 0deg 290deg, rgba(253, 199, 0, .2) 358deg, rgba(253, 199, 0, 0) 360deg);
  animation: balayage 6s linear infinite;
}
@keyframes balayage { to { transform: rotate(1turn); } }
.radar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* mer bleutée avec houle sous la terre ; la terre garde la teinte du cadran (+ 4,5 % de blanc) */
.radar-mer { fill: url(#radar-eau); }
.radar-terre { fill: url(#radar-sol); }
.radar-deps path { fill: url(#radar-sol); stroke: rgba(255, 255, 255, .62); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.radar-ocean { font: italic 700 2.2px var(--grotesque); letter-spacing: .35px; fill: #8FB6C7; }
.radar-ile { font: 700 2.2px var(--grotesque); letter-spacing: .3px; fill: rgba(255, 255, 255, .62); }
.radar-anneaux circle { fill: none; stroke: rgba(253, 199, 0, .28); stroke-width: .22; stroke-dasharray: .8 1.1; }
.radar-anneaux text { font: 700 2.2px var(--grotesque); fill: rgba(255, 255, 255, .5); }
.radar-point { fill: rgba(255, 255, 255, .55); transition: fill .15s, r .15s; }
/* chaque point mène à la page de sa commune : zone de clic élargie, point jaune et nom au survol */
.radar-lien { cursor: pointer; }
.radar-zone { fill: transparent; }
.radar-lien:hover .radar-point { fill: var(--jaune); r: 1.3px; }
.radar-lien:hover .radar-benon { fill: var(--jaune); }
.radar-bulle { pointer-events: none; font-family: var(--serial); font-size: 3px; fill: var(--blanc); paint-order: stroke; stroke: #1F1F1E; stroke-width: .9px; stroke-linejoin: round; }
.radar-renvoi { fill: none; stroke: var(--jaune); stroke-width: .3; opacity: .8; }
.radar-trajet { fill: none; stroke: var(--jaune); stroke-width: .5; stroke-linecap: round; stroke-dasharray: 1.4 1; animation: radar-trajet 1s linear infinite; }
@keyframes radar-trajet { to { stroke-dashoffset: -2.4; } }
.radar-benon { fill: var(--blanc); stroke: #1F1F1E; stroke-width: .5; }
.radar-cible { fill: var(--jaune); stroke: #1F1F1E; stroke-width: .5; }
.radar-onde { fill: none; stroke: var(--jaune); stroke-width: .4; transform-box: fill-box; transform-origin: center; animation: onde 2.2s ease-out infinite; }
/* noms détourés de la couleur du fond : lisibles même sur une frontière */
.radar-nom, .radar-base { font-family: var(--serial); paint-order: stroke; stroke: #1F1F1E; stroke-linejoin: round; }
.radar-nom { font-size: 4.2px; fill: var(--jaune); stroke-width: 1px; }
.radar-nom-long { font-size: 3.4px; }
.radar-base { font-size: 3px; fill: var(--blanc); stroke-width: .8px; }
.radar figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 24px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.radar figcaption span { display: inline-flex; align-items: center; gap: 8px; }
.radar figcaption span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.radar figcaption .legende-base::before { width: 9px; height: 9px; background: var(--blanc); }
.radar figcaption .legende-cible { color: var(--blanc); }
.radar figcaption .legende-cible::before { width: 9px; height: 9px; background: var(--jaune); }
@media (prefers-reduced-motion: reduce) {
  .radar-ecran::after, .radar-trajet { animation: none; }
  .radar-onde { display: none; }
}

/* ---------- pages communes : présentation + fiche pratique ---------- */
.commune-intro { padding: 110px 0 50px; }
.commune-intro-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); gap: 72px; align-items: start; }
.commune-texte h2 { font-size: clamp(30px, 3.2vw, 44px); }
.commune-texte p:not(.surtitre) { margin-top: 18px; font-size: 16px; line-height: 1.75; color: var(--gris); }
.commune-texte h2 + p { margin-top: 24px; }
.commune-texte strong { color: var(--nuit); font-weight: 700; }
.commune-fiche { padding: 32px 30px 30px; border-radius: var(--rayon-bloc); background: var(--blanc); box-shadow: 0 2px 6px rgba(30, 30, 29, .05), 0 24px 48px -28px rgba(30, 30, 29, .3); }
.commune-fiche h3 { font-size: 17px; }
.commune-fiche dl { margin: 16px 0 0; border-top: 1px solid var(--ligne); }
.commune-fiche dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ligne); font-size: 14px; }
.commune-fiche dt { color: var(--gris); }
.commune-fiche dd { margin: 0; font-weight: 700; text-align: right; }
.commune-fiche h4 { margin-top: 22px; font-size: 12px; letter-spacing: .1em; color: var(--gris); }
.commune-quartiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.commune-quartiers li { padding: 5px 10px; border-radius: 6px; background: var(--creme); font-size: 13px; font-weight: 600; }
.commune-fiche .duo { margin-top: 24px; }

/* ---------- pages communes : bon à savoir (bande sombre, 3 cartes), chantiers, communes voisines ---------- */
.etapes-cartes.etapes-trois { grid-template-columns: repeat(3, 1fr); }
.commune-chantiers { padding: 110px 0 0; }
.chantiers-grille { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 10px; margin-top: 50px; }
.voisines { padding: 0 0 70px; }
.voisines-bloc {
  display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 44px; align-items: center;
  padding: 40px 44px; border-radius: var(--rayon-bloc); background: var(--blanc);
  box-shadow: 0 2px 6px rgba(30, 30, 29, .05), 0 24px 48px -28px rgba(30, 30, 29, .3);
}
.voisines h2 { font-size: clamp(22px, 2.2vw, 28px); }
.voisines-bloc p { margin-top: 12px; font-size: 14.5px; color: var(--gris); }
.voisines .lien-fleche { margin-top: 18px; }
.voisines-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.voisines-liste a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 6px; background: var(--creme); font-size: 14px; font-weight: 700; transition: background .2s; }
.voisines-liste a::after { content: ""; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.voisines-liste a:hover { background: var(--jaune); }

.page-heros-court { min-height: 340px; padding-bottom: 56px; }

/* ---------- textes légaux ---------- */
.texte-legal .texte-legal-date { margin-bottom: 30px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.texte-legal { padding: 80px 0 100px; }
.texte-legal .enveloppe { width: min(820px, 100% - 48px); }
.texte-legal h2 { margin: 44px 0 14px; font-size: 22px; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p, .texte-legal li { font-size: 15.5px; line-height: 1.75; color: var(--gris); }
.texte-legal p + p { margin-top: 10px; }
.texte-legal ul { margin: 10px 0; padding-left: 22px; list-style: disc; }
.texte-legal a { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; }
.texte-legal mark { padding: 1px 6px; border-radius: 3px; background: var(--jaune); color: var(--nuit); font-weight: 700; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1100px) {
  .entete-nav { gap: 22px; }
}
@media (max-width: 900px) {
  .faq-grille.faq-colonnes { grid-template-columns: 1fr; }
  /* sur mobile, l'accueil remplit l'écran sans jamais rogner son contenu */
  /* mobile : le camion entier, centré, posé au-dessus du bandeau (calé depuis le bas du héros),
     avec de l'air sous les boutons quelle que soit la hauteur du téléphone.
     Photo 4:3 de largeur --l : camion entre 35 et 79 % de la largeur, 46 et 73 % de la hauteur,
     soit un camion haut de 0,205 × --l, dont le bas est à 0,201 × --l du bord inférieur de la photo.
     Le bas du camion est à --sol au-dessus du bandeau ; --l grandit avec la hauteur d'écran
     (ce qui reste une fois placés le haut, le texte et les boutons, l'air, le sol et le bandeau).
     Écran court (moins de 700 px de haut) : les marges se resserrent pour que tout tienne dans l'écran ;
     la photo garde toute la largeur (117vw au moins, camion centré) et app.js resserre l'air et le sol si besoin. */
  .heros {
    --haut: clamp(80px, 30svh - 90px, 112px);   /* sous l'en-tête */
    --mt: clamp(16px, 6svh - 12px, 28px);       /* logo → texte */
    --mb: clamp(14px, 5svh - 10px, 24px);       /* texte → boutons */
    --air: clamp(16px, 10svh - 40px, 30px);     /* boutons → camion */
    --sol: clamp(30px, 20svh - 80px, 58px);     /* camion → bandeau */
    --bp1: clamp(16px, 8svh - 30px, 24px);      /* marges du bandeau */
    --bp2: clamp(18px, 8svh - 26px, 28px);
    --texte: calc(211px + var(--mt) + var(--mb));    /* logo, slogan, texte, boutons */
    --bandeau: calc(66px + var(--bp1) + var(--bp2));
    --l: clamp(117vw, (100svh - var(--haut) - var(--texte) - var(--air) - var(--sol) - var(--bandeau) - 11px) * 4.88, 170vw);
    height: auto; min-height: 100svh; padding-top: var(--haut);
  }
  .heros-photo {
    top: auto; right: auto; left: 50%; bottom: calc(var(--bandeau) + var(--sol) - var(--l) * .201);
    width: var(--l); max-width: none; height: auto; transform: translateX(-57%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 74%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 74%, transparent 100%);
  }
  /* sous les boutons, toujours la place du camion (sa hauteur + 30 px au-dessus + 58 px de sol) :
     sur un petit téléphone, l'accueil s'allonge un peu plutôt que de superposer camion et boutons */
  .heros-grille { grid-template-columns: 1fr; gap: 0; flex: none; margin-bottom: calc(var(--l) * .205 + var(--air) + var(--sol)); }
  .heros-titre { padding-top: 0; }
  /* une seule ligne, même sur un téléphone étroit ; écran très court : espacements un peu resserrés */
  .heros-slogan { font-size: clamp(18px, 5.6vw, 22px); margin-top: clamp(12px, 5svh - 8px, 26px); }
  .heros-cote { margin-top: var(--mt); max-width: 460px; }
  .heros-cote p { margin-bottom: var(--mb); line-height: clamp(21px, 4.6svh - 3px, 24.75px); }
  .heros-bandeau { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding: var(--bp1) 0 var(--bp2); }
  /* téléphone : pas de filtre animé sur la photo ni sur le logo (chaque image serait redessinée) ;
     l'éclair reste visible par le voile lumineux, le logo grésille par son opacité */
  .heros-photo, .eclair-lointain .heros-photo, .eclair-lointain .heros-logo { animation: none; }
  .heros-logo { animation-name: neon-leger; }
  .eclair:not(.eclair-petit) { left: 40%; width: 40%; height: 48%; }
  .eclair-petit { width: 16%; }
  .zone { padding: 80px 0; }
  .zone-grille, .devis-grille { grid-template-columns: 1fr; }
  .pied-sombre { grid-template-columns: 1fr 1.7fr; }
  .pied-services { grid-template-columns: repeat(2, auto); }
  .pied-infos { justify-self: start; }
  .assurance { padding-top: 80px; }
  .assurance-grille { grid-template-columns: 1fr; gap: 36px; }
  .zone-grille { gap: 30px; }
  .zone-texte::before { inset: 0 -16px -20px; }
  .partenaires-liste { grid-template-columns: repeat(4, 1fr); }
  /* mobile : les cartes défilent à l'horizontale pour que la section tienne dans l'écran */
  .sombre { padding: 100px 0 56px; }
  .etapes-cartes { display: flex; gap: 12px; margin: 34px -24px 0; padding: 0 24px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .etapes-cartes::-webkit-scrollbar { display: none; }
  .etape-carte { flex: 0 0 78%; scroll-snap-align: start; }
  .etape-carte:not(:last-child)::after { display: none; }
  .chiffres { padding-top: 70px; }
  .chiffre { padding: 34px 18px 30px; }
  .chiffre-nombre { font-size: clamp(46px, 7.4vw, 64px); }
  .page-heros { min-height: 0; padding: 130px 0 50px; }
  .realisations { padding-top: 80px; }
  .realisations-grille { grid-template-columns: 1fr 1fr; grid-auto-rows: 210px; }
  .avis { padding-top: 80px; }
  .avis-grille { grid-template-columns: 1fr; }
  /* mobile : le guillemet passe au-dessus de la citation au lieu de la chevaucher */
  .avis-carte { padding: 92px 28px 32px; }
  .avis-carte::before { top: 14px; left: 26px; right: auto; font-size: 100px; }
  .avis-note { padding: 34px 28px 32px; }
  .real-grande { grid-row: span 1; }
  .real-grande figcaption { font-size: 16px; left: 20px; bottom: 16px; }
  .real-large { grid-column: span 1; }
  .devis { padding-top: 100px; }
  .devis-jaune { padding: 48px 28px 32px; }
  .devis-jaune::after { display: none; }
  .badge { right: 20px; top: -62px; width: 106px; height: 106px; }
  /* pages communes : une colonne, le radar sous le texte */
  .commune-heros { padding: 120px 0 56px; }
  .commune-heros-grille, .commune-intro-grille, .voisines-bloc { grid-template-columns: 1fr; }
  .commune-heros-grille { gap: 46px; }
  .radar { width: min(100%, 400px); margin-inline: auto; }
  .commune-intro { padding-top: 80px; }
  .commune-intro-grille { gap: 40px; }
  .commune-chantiers { padding-top: 80px; }
  .chantiers-grille { grid-auto-rows: 220px; }
  .voisines-bloc { gap: 24px; padding: 32px 28px; }
}
@media (max-width: 600px) {
  .enveloppe { width: calc(100% - 32px); }
  .entete-actions .btn-pilule { display: none; }
  .heros-logo { width: 100%; }
  .heros-bandeau li { font-size: 11px; }
  .carte-nord { top: 12px; right: 12px; width: 24px; height: 31px; }
  .carte-service { width: 220px; }
  .defile-fleche { top: 100px; width: 62px; height: 62px; right: 16px; }
  .realisations-grille { grid-template-columns: 1fr; grid-auto-rows: 230px; }
  /* mobile : une ligne par compteur (chiffre à gauche, titre à droite, jauge dessous) pour rester compact */
  .chiffres-liste { grid-template-columns: 1fr; }
  /* colonne du chiffre assez large pour « 1600+ » (4 chiffres) */
  .chiffre { display: grid; grid-template-columns: 150px 1fr; column-gap: 16px; align-items: center; text-align: left; padding: 24px 22px 22px; }
  .chiffre-nombre { grid-column: 1; grid-row: 1; font-size: 46px; }
  .chiffre-titre { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 16px; }
  .chiffre-jauge { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 8px; margin-top: 16px; }
  .partenaires-liste { grid-template-columns: repeat(2, 1fr); }
  .partenaires-liste li { height: 88px; }
  .texte-legal .enveloppe { width: calc(100% - 32px); }
  .real-grande, .real-large { grid-column: span 1; }
  .real-haute { grid-row: span 1; }
  .champs-duo { grid-template-columns: 1fr; }
  .devis-jaune, .contact-form { padding: 36px 24px; }
  .assurance-texte h2 { font-size: 28px; }
  .assurance-texte .chapo { font-size: 15px; }
  .assurance-logos li { min-height: 96px; padding: 14px 10px 12px; }
  .assurance-logos img { height: 50px; }
  .assurance-logos img.logo-artisan { height: 58px; }
  .assurance-carte { grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 20px 22px; }
  .assurance-icone { width: 44px; height: 44px; }
  .assurance-icone svg { width: 22px; height: 22px; }
  .assurance-carte h3 { font-size: 16px; }
  .assurance-carte p { font-size: 14px; }
  .devis-jaune { padding-top: 56px; }
  .devis-accroche { font-size: 21px; }
  .devis-jaune h2 { font-size: 28px; }
  .devis-intro { font-size: 15px; }
  .devis-horaires { font-size: 14px; }
  .faq-liste details { padding: 0 18px; }
  .pied-sombre { grid-template-columns: 1fr; gap: 30px; padding: 36px 26px; }
  /* téléphone : titres empilés, tous alignés à gauche */
  .pied-services { column-gap: 28px; }
  .pied-services h2 { text-align: left; }
  /* sur téléphone, les pages aussi sur deux colonnes */
  .pied-pages { display: block; columns: 2; column-gap: 20px; }
  .pied-pages h2 { column-span: all; margin-bottom: 27px; }
  .pied-pages a { display: block; margin-bottom: 9px; break-inside: avoid; }
  .chantiers-grille { grid-template-columns: 1fr; grid-auto-rows: 230px; }
  .commune-fiche { padding: 26px 22px; }
  .voisines-bloc { padding: 28px 22px; }
}

/* ==========================================================
   ADAPTATIONS WORDPRESS
   Tout ce qui précède est la feuille de la maquette, reprise telle quelle.
   Ce qui suit suit le DOM des blocs natifs (figure.wp-block-image, div.wp-block-group,
   boutons, navigation…). Le CSS des blocs étant imprimé à part, chaque surcharge
   d'un style de bloc est plus spécifique que lui (jamais seulement plus tardive).
   ========================================================== */

/* ---------- neutralisations (à spécificité nulle : les marges du design gardent la main) ---------- */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
:where(.wp-site-blocks) > * { margin-block: 0; }
figure.wp-block-image { margin: 0; }
.wp-block-image figcaption.wp-element-caption { margin: 0; }
.wp-block-quote { margin: 0; }
/* barre d'administration (connecté) : l'en-tête fixe passe dessous */
.admin-bar .entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .entete { top: 46px; } }

/* lien d'évitement fourni par WordPress (« Aller au contenu ») : même apparence que la maquette */
body .skip-link.screen-reader-text:focus {
  position: fixed !important; z-index: 1000; left: 16px; top: 12px; width: auto; height: auto; padding: 12px 18px;
  border-radius: 6px; background: var(--jaune); color: var(--nuit); font: 800 14px/1.6 var(--grotesque); clip-path: none;
}

/* ---------- icônes (dessins des SVG de la maquette, posés en fond) ---------- */
:root {
  --icone-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icone-fleche-epaisse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icone-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E1E1D'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
  --icone-tel-jaune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDC700' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
  --icone-horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

/* ---------- boutons (blocs Boutons) ----------
   b-carre : carré à icône (son texte reste lu par les lecteurs d'écran)
   b-pilule : pastille de texte
   b-duo : un seul lien = carré flèche (::before) + pastille (::after, sous le texte) */
.wp-block-buttons.duo { display: inline-flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
.wp-block-buttons.entete-actions { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
.wp-block-buttons > .wp-block-button { margin: 0; }
.wp-block-button.b-carre .wp-block-button__link,
.wp-block-button.b-pilule .wp-block-button__link,
.wp-block-button.b-duo .wp-block-button__link {
  display: inline-flex; align-items: center; height: 46px; padding: 0; border: 0; border-radius: 6px;
  background: var(--jaune); color: var(--nuit); word-break: normal; text-align: left; white-space: nowrap;
  font: 800 13px/1.6 var(--grotesque); letter-spacing: .04em; text-transform: uppercase;
  transition: background .2s, color .2s, transform .2s;
}
.wp-block-button.b-carre .wp-block-button__link {
  width: 46px; overflow: hidden; font-size: 0; color: transparent;
  background: var(--jaune) var(--icone-tel) center / 20px 20px no-repeat;
}
.wp-block-button.b-carre .wp-block-button__link:hover,
.wp-block-buttons.duo:hover .b-carre .wp-block-button__link { transform: rotate(-8deg); }
.wp-block-button.b-pilule .wp-block-button__link { padding: 0 22px; }
.wp-block-button.b-blanc .wp-block-button__link { background: var(--blanc); }
.wp-block-button.b-duo .wp-block-button__link { position: relative; isolation: isolate; padding: 0 22px 0 74px; background: none; }
.wp-block-button.b-duo .wp-block-button__link::before {
  content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 6px;
  background: var(--jaune) var(--icone-fleche) center / 20px 20px no-repeat; transition: transform .2s;
}
.wp-block-button.b-duo .wp-block-button__link::after {
  content: ""; position: absolute; z-index: -1; inset: 0 0 0 52px; border-radius: 6px;
  background: var(--fond-pilule, var(--jaune)); transition: background .2s;
}
.wp-block-button.b-duo:hover .wp-block-button__link::before { transform: rotate(-8deg); }
.wp-block-button.b-nuit .wp-block-button__link { --fond-pilule: var(--nuit); color: var(--blanc); }
/* numéro du bloc jaune : carré anthracite à téléphone jaune, pastille anthracite en Digital Serial */
.wp-block-button.b-appel .wp-block-button__link { --fond-pilule: var(--anthracite); color: var(--blanc); font: 700 19px var(--serial); letter-spacing: .05em; }
.wp-block-button.b-appel .wp-block-button__link::before { background: var(--anthracite) var(--icone-tel-jaune) center / 20px 20px no-repeat; }
.wp-block-button.b-appel:hover .wp-block-button__link { --fond-pilule: var(--nuit); }

/* ---------- en-tête : logo (bloc Image lié), menu (bloc Navigation), actions (blocs Boutons + burger du thème) ---------- */
.entete .entete-logo > a { display: block; }
.entete .entete-logo img { width: 48px; height: 48px; }
.entete .entete-actions .b-carre .wp-block-button__link { width: 42px; height: 42px; }
.entete .entete-actions .b-pilule .wp-block-button__link { height: 42px; }
.entete .wp-block-navigation.entete-nav { gap: 0; }
.entete .wp-block-navigation.entete-nav .wp-block-navigation__container { gap: 34px; }
.entete .wp-block-navigation.entete-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
  display: block; position: relative; padding: 6px 0;
  color: rgba(255, 255, 255, .78); font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.entete .wp-block-navigation.entete-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { color: var(--blanc); }
@media (max-width: 1100px) {
  .entete .wp-block-navigation.entete-nav .wp-block-navigation__container { gap: 22px; }
}
@media (max-width: 900px) {
  .entete .wp-block-navigation.entete-nav { position: absolute; display: block; }
  /* selon la version de WordPress, la liste du menu reçoit aussi la classe du bloc : elle ne doit pas devenir une 2e carte.
     visibility: inherit (pas visible) : menu fermé, la liste reste cachée comme sa carte et ses liens ne captent aucun toucher */
  .entete .wp-block-navigation__container.entete-nav {
    display: flex; position: static; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: inherit; transform: none; transition: none;
  }
  /* même écart de 22 px entre les rubriques que la maquette (sa règle « moins de 1100 px » s'applique aussi au menu mobile) */
  .entete .wp-block-navigation.entete-nav .wp-block-navigation__container { flex-direction: column; align-items: stretch; gap: 22px; }
  .entete .wp-block-navigation.entete-nav .wp-block-navigation-item { display: block; }
  .entete .wp-block-navigation.entete-nav .nav-services { display: none; }
  .entete .wp-block-navigation.entete-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
    display: flex; align-items: center; gap: 16px; padding: 17px 0;
    font-size: 17px; letter-spacing: .06em; color: var(--blanc); border-bottom: 1px solid var(--ligne-claire);
  }
  .entete .wp-block-navigation.entete-nav .wp-block-navigation-item:last-child > .wp-block-navigation-item__content { border-bottom: 0; }
}
@media (max-width: 600px) {
  .entete .entete-actions .b-pilule { display: none; }
}

/* ---------- surtitres : la pastille jaune est un pseudo-élément ---------- */
.surtitre::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 3px rgba(253, 199, 0, .25); }

/* ---------- héros : photo et logo sont des blocs Image (la classe est sur la figure) ---------- */
.heros .heros-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 0; }
.heros .heros-logo img { width: 100%; height: auto; }
.heros-slogan em { font-style: normal; color: var(--jaune); margin: 0 .25em; }
@media (max-width: 900px) {
  .heros .heros-photo img { height: auto; }
}

/* ---------- zone : liste des secteurs (plus de span) ---------- */
.zone-deps li { color: var(--gris); }

/* ---------- services : flèche = paragraphe (le script lui donne le rôle de bouton) ---------- */
.defile p.defile-fleche {
  font-size: 0; line-height: 0; color: transparent; overflow: hidden;
  background: var(--jaune) var(--icone-fleche-epaisse) center / 30px 30px no-repeat;
}

/* ---------- compteurs : le « + » et la jauge sont des pseudo-éléments ---------- */
.chiffre { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.chiffre-nombre { grid-row: 1; }
/* le script découpe le nombre (« 20+ » lu par les lecteurs d'écran) : le « + » dessiné n'est alors plus lu */
.chiffre-nombre:has(.sr)::after { content: "+" / ""; }
.chiffre-nombre::after {
  content: "+"; display: inline-block; margin-left: .04em; font-style: normal; color: var(--jaune); text-shadow: 3px 3px 0 var(--nuit);
}
.chiffre::before, .chiffre::after {
  content: ""; grid-row: 2; grid-column: 1; width: min(224px, 100%); height: 10px; margin-top: 24px;
  background: repeating-linear-gradient(90deg, var(--ligne) 0 calc(10% - 4px), transparent 0 10%);
}
.chiffre::after {
  background: repeating-linear-gradient(90deg, var(--jaune) 0 calc(10% - 4px), transparent 0 10%);
  clip-path: inset(0 calc(100% - var(--charge, 100%)) 0 0);
}
.chiffre-titre { grid-row: 3; }
.chiffre.est-fini .chiffre-nombre::after { animation: etincelle .7s ease-out; }
.chiffre.est-fini::after { animation: jauge-pleine .9s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .chiffre.est-fini .chiffre-nombre::after, .chiffre.est-fini::after { animation: none; }
}
@media (max-width: 600px) {
  .chiffre { grid-template-columns: 150px 1fr; justify-items: stretch; }
  .chiffre-nombre { grid-column: 1; grid-row: 1; }
  .chiffre-titre { grid-column: 2; grid-row: 1; }
  .chiffre::before, .chiffre::after { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 8px; margin-top: 16px; }
}

/* ---------- assurance : tuiles de logos (groupes) et icônes des cartes (pseudo-éléments) ---------- */
.assurance-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 112px; padding: 18px 16px 14px; text-align: center;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon-bloc);
}
.assurance-logos .wp-block-image img { width: auto; max-width: 100%; height: 70px; }
.assurance-logos .logo-artisan img { height: 80px; }
.assurance-logo p { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.assurance-carte::before {
  content: ""; width: 52px; height: 52px; border-radius: var(--rayon);
  background: var(--nuit) var(--icone) center / 26px 26px no-repeat;
}
.icone-decennale { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDC700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.6 7.5 9.5 4.3-.9 7.5-4.9 7.5-9.5V6z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.icone-rc { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDC700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.icone-sinistre { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5.5'/%3E%3Cpath d='m9.8 9 1.6 1.6 2.8-3'/%3E%3Cpath d='m9 13.8-1.5 7.2 4.5-2.5 4.5 2.5-1.5-7.2'/%3E%3C/svg%3E"); }
.assurance-carte-sombre::before { background-color: var(--jaune); }
@media (max-width: 600px) {
  .assurance-logo { min-height: 96px; padding: 14px 10px 12px; }
  .assurance-logos .wp-block-image img { height: 50px; }
  .assurance-logos .logo-artisan img { height: 58px; }
  .assurance-carte::before { width: 44px; height: 44px; background-size: 22px 22px; }
}

/* ---------- réalisations : figures natives avec légende ---------- */
.realisations-grille .realisation img { width: 100%; height: 100%; object-fit: cover; }
.realisations-grille .realisation figcaption { margin: 0; text-align: left; }
.realisation figcaption strong { font-weight: 800; white-space: nowrap; }
.realisation figcaption em { font-style: normal; font-weight: 800; color: var(--jaune); margin: 0 .45em; }

/* ---------- avis : la note, les étoiles et la carte sont des paragraphes et des groupes ---------- */
.avis-note-chiffre em { margin-left: 6px; font-size: 28px; font-style: normal; color: rgba(255, 255, 255, .45); text-shadow: none; }
p.etoiles { overflow: hidden; font-size: 0; line-height: 0; color: transparent; }
.ligne-lien { display: flex; }
.avis-auteur { display: grid; gap: 4px; margin-top: 28px; }
.avis-auteur .etoiles { margin-bottom: 6px; }
.avis-auteur-nom { font-size: 16px; font-weight: 800; }
.avis-auteur-infos { font-size: 13px; color: var(--gris); }
.avis-auteur > .ligne-lien { justify-self: start; margin-top: 22px; }

/* ---------- avis Google automatiques (functions.php) ---------- */
/* étoiles à la note réelle : la largeur suit --note (5 = 5 étoiles pleines) */
.etoiles[style*="--note"] { width: calc(130px * var(--note) / 5); }
.etoiles-petites[style*="--note"] { width: calc(90px * var(--note) / 5); }
.avis-auteur-nom a { color: inherit; text-decoration: none; }
.avis-auteur-nom a:hover { text-decoration: underline; text-decoration-color: var(--jaune); text-underline-offset: 3px; }
/* avis complets (plus longs que l'extrait de la maquette) : texte un peu plus petit */
.avis-carte.avis-texte-long blockquote p { font-size: clamp(18px, 1.55vw, 21px); font-weight: 600; line-height: 1.5; letter-spacing: 0; text-wrap: pretty; }
/* plusieurs avis : une carte à la fois, flèches dessous ; au doigt, on fait glisser */
.avis-defile { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.avis-piste {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 10px; flex: 1;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  padding-bottom: 26px; margin-bottom: -26px; /* l'ombre des cartes n'est pas coupée */
}
.avis-piste::-webkit-scrollbar { display: none; }
.avis-piste > .avis-carte { scroll-snap-align: start; }
.avis-nav { display: flex; align-items: center; gap: 10px; position: relative; }
.avis-nav button {
  display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 6px; background: var(--jaune); color: var(--nuit); cursor: pointer; transition: opacity .2s;
}
.avis-nav button[disabled] { opacity: .3; cursor: default; }
.avis-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.avis-prec svg { transform: scaleX(-1); }
.avis-compteur { min-width: 4.2em; text-align: center; font: 700 16px/1 var(--serial); letter-spacing: .06em; }

/* ---------- devis : horloge en pseudo-élément ----------
   bloc (et non flex) : le gras et le reste du texte restent sur une même ligne de texte, comme dans la maquette */
.devis-jaune p.devis-horaires { display: block; position: relative; min-height: 40px; padding: 9px 18px 9px 44px; }
.devis-horaires::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  background: var(--icone-horloge) center / 22px 22px no-repeat;
}

/* ---------- méthode : dans la maquette, les étapes sont une liste numérotée (ol) :
   le navigateur décale son contenu de 40 px et ajoute 1 em dessous (repris pour garder la même mise en page) ---------- */
@media (min-width: 901px) {
  /* sélecteur renforcé : WordPress annule la marge basse du dernier bloc d'un groupe */
  .sombre .enveloppe .etapes-cartes { padding-left: 40px; margin-bottom: 16px; }
}
/* le numéro est un paragraphe : il ne doit pas prendre le style des textes de la carte */
.etape-carte p.etape-num { margin-top: 0; font: 700 42px/1 var(--serial); color: var(--jaune); }

/* ---------- partenaires : chaque logo est un bloc Image ---------- */
.partenaires-liste > .wp-block-image { display: grid; place-items: center; height: 104px; padding: 18px 14px; background: var(--blanc); }
.partenaires-liste > .wp-block-image:hover img { filter: none; opacity: 1; }
.partenaires-liste .logo-carre img { max-height: 52px; }
@media (max-width: 600px) {
  .partenaires-liste > .wp-block-image { height: 88px; }
}

/* ---------- pied de page : liens dans des paragraphes ---------- */
.pied-services > p { margin-bottom: 9px; }
@media (max-width: 600px) {
  .pied-pages > p { display: block; margin-bottom: 9px; break-inside: avoid; }
}

/* ---------- pages légales : fil d'Ariane ---------- */
.fil-ariane em { font-style: normal; color: var(--jaune); }
/* le fil d'Ariane est un paragraphe : il ne prend pas le style des paragraphes du bandeau */
.page-heros p.fil-ariane { margin-top: 0; max-width: none; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .6); }