/* ==========================================================================
   TH DÉPANNAGE — feuille de style unique
   Palette : fond crème + jaune signature #FED30B + sections sombres pour les
   temps forts (en-tête, pied, zone, badges). Polices Archivo + Spline Sans Mono.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices — auto-hébergées (licence OFL). Fichiers « variables » : un seul
   fichier couvre toutes les graisses, et rien ne part chez un tiers avant
   l'affichage. Le latin-ext n'est téléchargé que si la page en a besoin.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/static/fonts/spline-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/static/fonts/spline-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fond:        #F5F3EE;
  --fond-alt:    #F0EDE5;
  --blanc:       #FFFFFF;
  --texte:       #121316;
  --texte-att:   #5A5F66;
  --texte-att-2: #4C5158;
  --bord:        #E7E4DD;
  --bord-2:      #EAE7DF;

  --sombre:      #0E0F11;
  --sombre-2:    #16191D;
  --sombre-3:    #191B1F;
  --bord-sombre: #2C3037;
  --bord-sombre-clair: #22262c;
  --gris-sombre: #9AA0A8;
  --gris-sombre-2: #A7ACB3;
  --gris-sombre-3: #8A9099;

  --jaune:        #FED30B;
  --jaune-vif:    #FFE04A;
  --jaune-sombre: #B69800;   /* décoratif uniquement : traits, bordures, contours */
  --jaune-texte:  #7A6500;   /* dès qu'il s'agit de texte sur fond clair — 5,1:1 sur
                                le crème, 5,7:1 sur blanc, 4,9:1 sur le crème alterné.
                                Le #B69800 ne montait qu'à 2,5:1, sous le minimum
                                WCAG AA de 4,5:1. */
  --jaune-alerte-fond: #FDF6DC;
  --jaune-alerte-bord: #F1E4A8;

  --sans: 'Archivo', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  --largeur: 1200px;
  --rayon: 12px;
  --rayon-lg: 16px;
  --rayon-sm: 9px;
  --barre-mobile: 68px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* L'en-tête est collé en haut : sans cette réserve, une ancre amène la cible
     sous l'en-tête, y compris le lien « Aller au contenu ». */
  scroll-padding-top: 92px;
}

/* Fondu croisé entre deux pages. Sur un site de 420 pages où l'on passe d'une
   commune à l'autre, ça supprime le clignotement blanc de la navigation.
   Les navigateurs qui ne connaissent pas la règle l'ignorent sans rien casser. */
@view-transition { navigation: auto; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (max-width: 860px) {
  body { padding-bottom: var(--barre-mobile); }
}

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

a { color: var(--texte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--jaune-texte); }

::selection { background: var(--jaune); color: var(--texte); }

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

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
/* L'en-tête est identique d'une page à l'autre : on le sort du fondu pour
   qu'il reste parfaitement immobile pendant la transition. */
.entete { view-transition-name: entete; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}

/* --------------------------------------------------------------------------
   Révélation au défilement — voir static/js/site.js
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].in { opacity: 1; transform: none; }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: 22px; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--jaune); color: #000; padding: 12px 20px; font-weight: 700; z-index: 200;
}
.saut-contenu:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0 0 .6em; font-weight: 900; line-height: 1.05; letter-spacing: -0.025em; }

h1 { font-size: clamp(2.1rem, 5.6vw, 3.9rem); letter-spacing: -0.03em; line-height: 1; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.14rem, 1.9vw, 1.3rem); letter-spacing: -0.012em; }
h4 { font-size: 1.02rem; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.chapeau { font-size: clamp(1.08rem, 1.9vw, 1.2rem); color: var(--texte-att-2); line-height: 1.6; }

/* Sur-titre : petites capitales espacées, marqueur doré. */
.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--jaune-texte);
  margin: 0 0 16px;
}
.surtitre::before {
  content: ""; width: 24px; height: 8px; flex: none;
  background-image: repeating-linear-gradient(90deg, var(--jaune-texte) 0 2px, transparent 2px 6px);
}

.jaune { color: var(--jaune-texte); }
.discret { color: var(--texte-att); }

/* Surlignage : la moitié basse de la ligne de texte reçoit un trait jaune,
   comme un coup de surligneur — utilisé sur les titres d'accroche. */
.surligne {
  color: var(--texte);
  background-image: linear-gradient(180deg, transparent 62%, var(--jaune) 62%);
  padding: 0 .06em;
}

/* Pastille "disponible maintenant" avec point qui pulse */
.dispo {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--texte); color: #fff;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; margin-bottom: 20px;
}
.dispo__point {
  width: 8px; height: 8px; border-radius: 50%; background: #40C463;
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(64,196,99,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(64,196,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(64,196,99,0); }
}

/* Graduations : séparateur repris de l'arc du compteur */
.graduations {
  height: 9px;
  background-image: repeating-linear-gradient(90deg, var(--jaune) 0 2px, transparent 2px 11px);
  opacity: .55;
  margin: 0;
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.entete {
  position: sticky; top: 0; z-index: 100;
  background: var(--sombre);
  border-bottom: 1px solid var(--bord-sombre-clair);
  transition: background .28s ease, box-shadow .28s ease;
}

.entete__interieur {
  display: flex; align-items: center; gap: 24px;
  min-height: 76px; padding-block: 10px;
  transition: min-height .28s cubic-bezier(.22,.61,.36,1);
}

.entete__logo { flex: none; }
.entete__logo img { height: 42px; width: auto; transition: height .28s cubic-bezier(.22,.61,.36,1); }

/* Passé les premiers pixels de défilement, l'en-tête se resserre et laisse
   deviner le contenu à travers lui. Classe posée par site.js. */
.entete--reduit {
  background: rgba(14,15,17,.86);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.8);
}
.entete--reduit .entete__interieur { min-height: 60px; padding-block: 5px; }
.entete--reduit .entete__logo img { height: 34px; }
/* C'est le bouton d'appel qui fixe la hauteur réelle de la barre, pas le
   min-height : sans le resserrer aussi, l'en-tête ne se condensait pas. */
.entete--reduit .entete__interieur .bouton--appel { padding: 10px 18px; font-size: .93rem; }

/* Avancement de lecture — deux pixels sous l'en-tête. Utile sur les pages
   communes, qui font environ mille mots. */
.progression {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 101;
  background: var(--jaune);
  transform: scaleX(var(--avancement, 0)); transform-origin: 0 50%;
  will-change: transform; pointer-events: none;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }

.nav__liens { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav__liens a {
  color: #E9E9E6; text-decoration: none; font-size: .95rem; font-weight: 600;
  padding-block: 6px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav__liens a:hover, .nav__liens a[aria-current="page"] {
  color: var(--jaune); border-bottom-color: var(--jaune);
}

@media (max-width: 980px) { .nav__liens { display: none; } }
/* Ciblé sur la barre d'en-tête seule : le bouton d'appel du panneau mobile,
   lui, doit rester visible. La barre fixe en bas d'écran prend le relais ici. */
@media (max-width: 860px) { .entete__interieur .bouton--appel { display: none; } }

/* --------------------------------------------------------------------------
   Menu mobile — sous 980 px les liens de navigation disparaissaient sans être
   remplacés : l'en-tête ne contenait plus que le logo, et les pages Services,
   Zone et Contact n'étaient atteignables qu'en descendant jusqu'au pied de page.
   -------------------------------------------------------------------------- */

.nav__bascule {
  display: none;                       /* affiché par la media query ci-dessous */
  flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0; margin-left: auto;
  background: transparent; border: 1px solid var(--bord-sombre);
  border-radius: var(--rayon-sm); cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.nav__bascule:hover { border-color: var(--jaune); }
.nav__bascule span {
  display: block; width: 20px; height: 2px; margin-inline: auto;
  background: #E9E9E6; border-radius: 2px;
  transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
}
/* Les trois barres deviennent une croix. */
.nav__bascule[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__bascule[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__bascule[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: 0; z-index: 99;
  padding: 96px 22px calc(28px + var(--barre-mobile));
  background: var(--sombre);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.22,.61,.36,1);
}
.menu-mobile[hidden] { display: none; }
.menu-mobile.ouvert { opacity: 1; transform: none; }

.menu-mobile ul { list-style: none; margin: 0 0 30px; padding: 0; }
.menu-mobile li {
  border-bottom: 1px solid var(--bord-sombre-clair);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.menu-mobile.ouvert li { opacity: 1; transform: none; }
/* Restreint aux liens de navigation : sans le « nav », la règle écrasait aussi
   le display, la couleur et les marges du bouton d'appel placé en bas du
   panneau — texte gris clair sur fond jaune. */
.menu-mobile nav a {
  display: block; padding: 15px 2px; color: #E9E9E6;
  text-decoration: none; font-weight: 800; font-size: 1.16rem; letter-spacing: -0.015em;
}
.menu-mobile nav a:hover, .menu-mobile nav a[aria-current="page"] { color: var(--jaune); }

.menu-mobile h4 {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gris-sombre-3); margin: 0 0 8px;
}
.menu-mobile nav .menu-mobile__services a { font-size: 1rem; font-weight: 600; padding-block: 12px; }
.menu-mobile .bouton { width: 100%; }

@media (max-width: 980px) { .nav__bascule { display: flex; } }
@media (min-width: 981px) { .menu-mobile { display: none !important; } }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: var(--rayon); border: 2px solid transparent;
  font-family: inherit; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .2s cubic-bezier(.34,1.56,.64,1),
              box-shadow .2s ease, padding .28s cubic-bezier(.22,.61,.36,1), font-size .28s cubic-bezier(.22,.61,.36,1);
}

.bouton--appel {
  background: var(--jaune); color: #000;
  box-shadow: 0 10px 24px -10px rgba(254,211,11,.7);
}
.bouton--appel:hover { background: var(--jaune-vif); color: #000; transform: translateY(-2px); }
/* Retour au doigt : sur mobile il n'y a pas de survol, seul l'appui existe. */
.bouton:active { transform: translateY(0) scale(.985); }

.bouton--fantome { background: transparent; color: var(--texte); border-color: var(--texte); }
.entete .bouton--fantome, .pied .bouton--fantome { color: var(--blanc); border-color: var(--bord-sombre); }
.bouton--fantome:hover { border-color: var(--jaune-texte); color: var(--jaune-texte); }

.bouton--grand { padding: 18px 32px; font-size: 1.1rem; }
.bouton--bloc { width: 100%; }

.bouton__num { font-family: var(--mono); font-weight: 700; letter-spacing: -0.02em; }

/* Barre d'appel fixe en bas d'écran sur mobile */
.barre-appel {
  position: fixed; inset: auto 0 0 0; z-index: 120;
  display: none; align-items: stretch;
  background: var(--jaune); border-top: 2px solid #000;
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-appel a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--barre-mobile); color: #000; text-decoration: none; font-weight: 800;
  transition: transform .12s ease, background .12s ease;
}
.barre-appel a:active { transform: scale(.985); background: var(--jaune-vif); }
.barre-appel__label {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; opacity: .72;
}
.barre-appel__num { font-size: 1.42rem; font-family: var(--mono); letter-spacing: -0.02em; line-height: 1.2; }

@media (max-width: 860px) { .barre-appel { display: flex; } }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding-block: clamp(56px, 8vw, 96px); }
.section--sombre {
  position: relative; isolation: isolate;
  background: var(--sombre); color: var(--blanc); border-block: 1px solid var(--bord-sombre-clair);
}
/* Grain très fin sur les aplats sombres : une tuile de bruit de 160 px répétée,
   à 2,5 % d'opacité. On ne le voit pas, on voit seulement que le noir n'est
   plus un aplat mort. */
.section--sombre::before,
.badges::before,
.pied::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .025; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23b)'/%3E%3C/svg%3E");
}
.badges, .pied { position: relative; isolation: isolate; }
.section--sombre h1, .section--sombre h2, .section--sombre h3, .section--sombre h4 { color: var(--blanc); }
.section--sombre .chapeau, .section--sombre p { color: var(--gris-sombre-2); }
.section--sombre .surtitre { color: var(--jaune); }
.section--sombre .surtitre::before { background-image: repeating-linear-gradient(90deg, var(--jaune) 0 2px, transparent 2px 6px); }
.section--serree { padding-block: clamp(38px, 5vw, 60px); }
.section--blanche { background: var(--blanc); border-top: 1px solid var(--bord-2); }

.section__entete { max-width: 760px; margin-bottom: 44px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(48px, 7vw, 88px) clamp(40px, 6vw, 70px);
  background: var(--fond);
}
.hero::before {
  content: ""; position: absolute; top: -140px; right: -120px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(254,211,11,.22), transparent 68%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero__grille {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
/* La photo prend nettement le dessus sur le bloc de texte : c'est la
   dépanneuse qui doit accrocher l'œil en premier. Le titre est resserré
   d'autant — sans ça, la colonne plus étroite le faisait passer de quatre à
   cinq lignes. Réglage local : les 419 autres pages gardent leur h1 pleine
   taille. */
.hero__grille--photo { grid-template-columns: 1fr 1.52fr; gap: clamp(22px, 3.4vw, 42px); }
/* Le coefficient vw est abaissé en plus du plafond : la colonne de texte étant
   proportionnellement plus étroite, un titre calé sur 5,6vw partait à six
   lignes autour de 1024 px. */
.hero__grille--photo h1 { font-size: clamp(2.1rem, 4.5vw, 3.5rem); }
@media (max-width: 880px) {
  .hero__grille { grid-template-columns: 1fr; }
  .hero__grille > .jauge, .hero__visuel { order: -1; margin-inline: auto; }
}

.hero__visuel { position: relative; max-width: 760px; margin-left: auto; }
.hero__entree { animation: heroEntree 1.25s cubic-bezier(.22,.61,.36,1) both; overflow: visible; }
.hero__photo { width: 100%; height: auto; animation: heroFlotte 5.5s ease-in-out infinite; animation-delay: 1.15s; }

/* Sur l'accueil, la jauge n'est qu'une pastille posée sur la photo : elle est
   volontairement plus petite que sur les pages communes, où elle porte
   l'information principale du hero. Les textes du SVG sont en unités de
   viewBox, ils se réduisent tout seuls — seule la légende, en rem, est à
   reprendre. */
.hero__visuel .jauge {
  position: absolute; left: -10px; bottom: 14px; z-index: 2;
  /* Le plancher n'est pas là pour la place mais pour la lisibilité : les
     textes du SVG suivent la largeur de la boîte, et sous ~130 px le délai
     devient trop petit sur téléphone. */
  width: clamp(132px, 14vw, 146px); padding: 10px 10px 8px;
  border-radius: var(--rayon);
}
.hero__visuel .jauge__legende {
  font-size: .58rem; letter-spacing: .08em; margin-top: 6px; line-height: 1.35;
}
@media (max-width: 480px) { .hero__visuel .jauge { left: 50%; transform: translateX(-50%); } }

@keyframes heroEntree {
  0%   { transform: translateX(120%) scale(.96); opacity: 0; }
  45%  { opacity: 1; }
  80%  { transform: translateX(-2%) scale(1.005); }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes heroFlotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
@media (max-width: 520px) { .hero__actions .bouton { width: 100%; } }

/* Bandeau de données : les chiffres réels de la commune. */
.donnees {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 1px; background: var(--bord); border: 1px solid var(--bord);
  margin-top: 36px; border-radius: var(--rayon); overflow: hidden;
}
.donnees__cel { background: var(--blanc); padding: 16px 18px; }
.donnees__val {
  font-family: var(--mono); font-size: 1.32rem; font-weight: 700;
  color: var(--texte); letter-spacing: -0.03em; line-height: 1.2;
}
.donnees__lab {
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--texte-att); margin-top: 5px; font-weight: 600;
}

/* --------------------------------------------------------------------------
   Badges — bandeau sombre sous le hero (urgence, plateau, véhicules...)
   -------------------------------------------------------------------------- */

.badges { background: var(--sombre); padding: 26px 0; }
.badges__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.badge-item { display: flex; align-items: center; gap: 14px; padding: 6px 4px; transition: transform .2s ease; }
.badge-item:hover { transform: translateX(4px); }
.badge-item__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--rayon-sm); background: rgba(254,211,11,.14);
  flex: none; transition: background .2s ease;
}
.badge-item:hover .badge-item__icone { background: rgba(254,211,11,.28); }
.badge-item__icone img { width: 30px; height: 30px; object-fit: contain; }
.badge-item__texte { color: #fff; line-height: 1.25; }
.badge-item__titre { font-weight: 800; font-size: 1rem; }
.badge-item__sous { color: var(--gris-sombre); font-size: .85rem; }

/* --------------------------------------------------------------------------
   Jauge — élément signature, arc de compteur repris du logo.
   -------------------------------------------------------------------------- */

.jauge {
  width: clamp(190px, 25vw, 240px); flex: none;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon-lg);
  padding: 20px 18px 16px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.22);
}
.jauge svg { width: 100%; height: auto; overflow: visible; }
.jauge__piste { stroke: #EBE7DE; }
.jauge__actif {
  stroke: var(--jaune); stroke-linecap: round;
  animation: jaugeTrace 1.6s cubic-bezier(.22,.61,.36,1) .4s both;
}
@keyframes jaugeTrace { to { stroke-dashoffset: 0; } }
.jauge__grad { stroke: #DAD6CB; }
.jauge__grad--on { stroke: var(--jaune-sombre); }
.jauge__val {
  font-family: var(--mono); font-size: 30px; font-weight: 700;
  fill: var(--texte); letter-spacing: -1.4px;
}
.jauge__unite {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  fill: var(--texte-att); letter-spacing: 2.4px;
}
.jauge__legende {
  text-align: center; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--texte-att); margin-top: 10px;
}

/* --------------------------------------------------------------------------
   Carte de situation — deuxième élément généré à partir des données de la
   commune, après la jauge. Dessinée pour vivre sur fond sombre.
   -------------------------------------------------------------------------- */

.carte-sit {
  margin: 0; max-width: 380px;
  background: var(--sombre-2); border: 1px solid var(--bord-sombre);
  border-radius: var(--rayon-lg); padding: 20px 20px 16px;
}
.carte-sit svg { width: 100%; height: auto; overflow: visible; }

.carte-sit__zone  { stroke: var(--jaune); stroke-width: 1.4; stroke-dasharray: 3 5; opacity: .55; }
.carte-sit__grad  { stroke: var(--bord-sombre); stroke-width: 1; }
.carte-sit__axe   { stroke: var(--bord-sombre); stroke-width: 1; }
.carte-sit__nord  {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  fill: var(--gris-sombre-3); letter-spacing: 1px;
}

.carte-sit__trait { stroke: var(--jaune); stroke-width: 1.6; stroke-dasharray: 4 3; opacity: .9; }
.carte-sit__base  { fill: #fff; stroke: var(--sombre-2); stroke-width: 2; }
.carte-sit__voisin{ fill: var(--gris-sombre-3); opacity: .5; }

/* Le point de la commune : c'est le sujet de l'image, il pulse doucement. */
.carte-sit__halo  { fill: var(--jaune); opacity: .18; animation: carteHalo 3.2s ease-in-out infinite; }
.carte-sit__point { fill: var(--jaune); stroke: var(--sombre-2); stroke-width: 2; }
@keyframes carteHalo {
  0%, 100% { opacity: .18; transform: scale(1); }
  50%      { opacity: .07; transform: scale(1.35); }
}
/* La mise à l'échelle doit partir du centre du point, pas du coin du SVG. */
.carte-sit__halo { transform-box: fill-box; transform-origin: center; }

.carte-sit__etiq {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  fill: #fff; letter-spacing: .02em;
  paint-order: stroke; stroke: var(--sombre-2); stroke-width: 3px; stroke-linejoin: round;
}

.carte-sit__legende {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--bord-sombre);
  font-family: var(--mono); font-size: .74rem; line-height: 1.5;
  letter-spacing: .04em; color: var(--gris-sombre-2);
}
.carte-sit__legende strong { color: var(--jaune); font-weight: 700; }

@media (max-width: 880px) { .carte-sit { max-width: 320px; margin-inline: auto; } }

/* --------------------------------------------------------------------------
   Duo texte / image (pourquoi le plateau, zone d'intervention)
   -------------------------------------------------------------------------- */

.duo { display: grid; grid-template-columns: .95fr 1.05fr; gap: 52px; align-items: center; }
@media (max-width: 880px) { .duo { grid-template-columns: 1fr; } }
/* Texte dominant, carte en appui : l'inverse du duo texte/photo. */
.duo--carte { grid-template-columns: 1.35fr auto; align-items: start; gap: 44px; }
@media (max-width: 880px) { .duo--carte { grid-template-columns: 1fr; } }
.duo__media {
  border-radius: var(--rayon-lg); overflow: hidden; aspect-ratio: 4/3;
  box-shadow: 0 24px 50px -22px rgba(0,0,0,.35);
}
.duo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section--sombre .duo__media { box-shadow: none; border: 1px solid var(--bord-sombre); }

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */

.grille { display: grid; gap: 18px; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); }

.carte {
  position: relative; isolation: isolate;
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--rayon-lg); padding: 26px 24px;
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, border-color .22s ease, background .16s;
}

/* Halo qui suit le curseur sur les cartes cliquables. Les coordonnées --mx/--my
   sont écrites par site.js, et seulement sur les appareils à survol réel :
   au doigt, l'effet resterait collé là où on a tapé. */
a.carte::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
                              rgba(254,211,11,.13), transparent 68%);
}
@media (hover: hover) { a.carte:hover::after { opacity: 1; } }
.section--sombre a.carte::after {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
                              rgba(254,211,11,.10), transparent 68%);
}
.section--sombre .carte { background: var(--sombre-2); border-color: var(--bord-sombre); }
.carte h3 { margin-bottom: .45em; }
.carte p { color: var(--texte-att); font-size: .96rem; margin: 0; }
.section--sombre .carte p { color: var(--gris-sombre-2); }

a.carte { text-decoration: none; color: inherit; display: block; }
a.carte:hover {
  border-color: var(--texte); transform: translateY(-6px);
  box-shadow: 0 22px 40px -24px rgba(0,0,0,.35);
}
.section--sombre a.carte:hover { border-color: var(--jaune); }
a.carte:hover h3 { color: var(--jaune-texte); }
.section--sombre a.carte:hover h3 { color: var(--jaune); }

.carte__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 13px; background: var(--texte);
  margin-bottom: 18px; transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.carte__icone img { width: 34px; height: 34px; object-fit: contain; }
a.carte:hover .carte__icone { transform: translateY(-3px) rotate(-4deg); }

.carte__lien {
  display: inline-block; margin-top: 14px; font-weight: 700; color: var(--texte); font-size: .92rem;
}
.carte__fleche { display: inline-block; transition: transform .25s ease; }
a.carte:hover .carte__fleche { transform: translateX(6px); }

/* Compteur d'ordre : utilisé pour le déroulé d'une intervention. */
.etapes { counter-reset: etape; }
.etapes.stepsGrid, .etapes--grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.etape { position: relative; padding-left: 62px; margin-bottom: 30px; }
.etape:last-child { margin-bottom: 0; }
.etape::before {
  counter-increment: etape; content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--jaune-texte);
  -webkit-text-stroke: 1px var(--jaune-texte);
}
.section--sombre .etape::before { color: var(--jaune); -webkit-text-stroke: 1px #C9A600; }
.etape::after {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: -30px; width: 1px;
  background: var(--bord);
}
.section--sombre .etape::after { background: var(--bord-sombre); }
.etape:last-child::after { display: none; }
.etape h3 { margin-bottom: .3em; }
.etape p { color: var(--texte-att); margin: 0; }
.section--sombre .etape p { color: var(--gris-sombre-2); }

/* --------------------------------------------------------------------------
   Prestations
   -------------------------------------------------------------------------- */

.prestation { border-top: 1px solid var(--bord); padding-block: 26px; }
.section--sombre .prestation { border-top-color: var(--bord-sombre); }
.prestation:last-child { border-bottom: 1px solid var(--bord); }
.section--sombre .prestation:last-child { border-bottom-color: var(--bord-sombre); }
.prestation h3 { margin-bottom: .35em; }
.prestation p { color: var(--texte-att); margin: 0; max-width: 68ch; }
.section--sombre .prestation p { color: var(--gris-sombre-2); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: 820px; }
.faq details {
  border-bottom: 1px solid var(--bord-2);
  padding-block: 6px;
}
.section--sombre .faq details { border-bottom-color: var(--bord-sombre); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-weight: 800; font-size: 1.08rem; letter-spacing: -0.012em;
  transition: color .18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; width: 26px; height: 26px;
  border-radius: 50%; background: var(--fond-alt); color: var(--jaune-texte);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700; line-height: 1;
  transform: translateY(-50%); transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.section--sombre .faq summary::after { background: var(--sombre-2); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--jaune-texte); }
.faq__reponse { padding: 0 44px 22px 0; color: var(--texte-att); max-width: 72ch; }
.section--sombre .faq__reponse { color: var(--gris-sombre-2); }

/* --------------------------------------------------------------------------
   Zone d'intervention
   -------------------------------------------------------------------------- */

.communes {
  columns: 4 190px; column-gap: 26px;
  list-style: none; margin: 0; padding: 0; font-size: .93rem;
}
.communes li { break-inside: avoid; padding-block: 4px; }
.communes a { color: var(--texte-att); text-decoration: none; }
.communes a:hover { color: var(--jaune-texte); text-decoration: underline; }
.section--sombre .communes a { color: var(--gris-sombre-2); }
.section--sombre .communes a:hover { color: var(--jaune); }

.voisines, .puces { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.voisines a, .puces a {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon-sm);
  padding: 9px 14px; color: var(--texte); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.section--sombre .voisines a, .section--sombre .puces a {
  background: var(--sombre-3); border-color: var(--bord-sombre); color: #E7E7E4;
}
.voisines a:hover, .puces a:hover { border-color: var(--jaune-texte); color: var(--jaune-texte); }
.section--sombre .voisines a:hover, .section--sombre .puces a:hover { border-color: var(--jaune); color: var(--jaune); }
.voisines .km { font-family: var(--mono); font-size: .78rem; color: var(--texte-att); font-weight: 500; }
.voisines a:hover .km { color: var(--jaune-texte); }

/* --------------------------------------------------------------------------
   Encadrés
   -------------------------------------------------------------------------- */

.encart {
  border-left: 3px solid var(--jaune); background: var(--blanc);
  padding: 22px 26px; border-radius: 0 var(--rayon) var(--rayon) 0; margin-block: 30px;
  border-top: 1px solid var(--bord); border-right: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
}
.section--sombre .encart { background: var(--sombre-2); border-top-color: var(--bord-sombre); border-right-color: var(--bord-sombre); border-bottom-color: var(--bord-sombre); }
.encart h3 { margin-bottom: .4em; }
.encart p { color: var(--texte-att); margin: 0; }
.section--sombre .encart p { color: var(--gris-sombre-2); }
.encart--alerte { border-left-color: #B69800; background: var(--jaune-alerte-fond); border-color: var(--jaune-alerte-bord); }
.encart--alerte p { color: var(--texte-att-2); }

.liste-check { list-style: none; margin: 0; padding: 0; }
.liste-check li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--texte-att); }
.section--sombre .liste-check li { color: var(--gris-sombre-2); }
.liste-check li::before {
  content: ""; position: absolute; left: 4px; top: .52em; width: 9px; height: 5px;
  border-left: 2px solid var(--jaune-texte); border-bottom: 2px solid var(--jaune-texte);
  transform: rotate(-45deg);
}
.section--sombre .liste-check li::before { border-color: var(--jaune); }
.liste-croix li::before {
  border: 0; left: 3px; top: .38em; width: 12px; height: 12px;
  background: linear-gradient(45deg, transparent 43%, var(--texte-att) 43% 57%, transparent 57%),
              linear-gradient(-45deg, transparent 43%, var(--texte-att) 43% 57%, transparent 57%);
  transform: none;
}

/* Appel à l'action en bas de page */
.rappel {
  background: var(--jaune); color: #000; text-align: center;
  padding-block: clamp(48px, 7vw, 80px);
}
.rappel h2 { color: #000; margin-bottom: .35em; }
.rappel p { color: rgba(0,0,0,.68); max-width: 56ch; margin-inline: auto; font-weight: 500; }
.rappel .bouton {
  background: #000; color: var(--jaune); margin-top: 26px;
  font-size: clamp(1.2rem, 3vw, 1.6rem); padding: 20px 40px; font-family: var(--mono);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .15s, color .15s;
}
.rappel .bouton:hover { background: #16191D; color: var(--jaune-vif); transform: translateY(-3px) scale(1.02); }

/* --------------------------------------------------------------------------
   Fil d'Ariane
   -------------------------------------------------------------------------- */

.ariane {
  font-size: .82rem; color: var(--texte-att); padding-block: 14px;
  border-bottom: 1px solid var(--bord-2); background: var(--fond);
}
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.ariane li::after { content: "›"; margin-left: 8px; color: var(--texte-att); opacity: .5; }
.ariane li:last-child::after { display: none; }
.ariane a { color: var(--texte-att); text-decoration: none; }
.ariane a:hover { color: var(--jaune-texte); }

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */

.formulaire { max-width: 620px; }
.champ { margin-bottom: 20px; }
.champ label { display: block; font-weight: 700; font-size: .93rem; margin-bottom: 7px; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 13px 15px;
  background: var(--blanc); color: var(--texte);
  border: 1px solid var(--bord); border-radius: var(--rayon-sm);
  font-family: inherit; font-size: 1rem;
}
/* La bordure se renforce au focus, mais sans « outline: none » : cette règle
   étant plus spécifique que le :focus-visible global, elle supprimait aussi
   l'anneau de focus au clavier — un champ devenait impossible à situer en
   navigation au Tab. */
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--jaune-texte);
  box-shadow: 0 0 0 3px rgba(254,211,11,.28);
}
.champ input:focus:not(:focus-visible),
.champ select:focus:not(:focus-visible),
.champ textarea:focus:not(:focus-visible) { outline: none; }
.champ textarea { min-height: 130px; resize: vertical; }
.champ__aide { font-size: .82rem; color: var(--texte-att); margin-top: 6px; }
.pot-de-miel { position: absolute; left: -9999px; }

/* --------------------------------------------------------------------------
   Contenu rédactionnel
   -------------------------------------------------------------------------- */

.prose { max-width: 74ch; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose > *:first-child { margin-top: 0; }
.prose ul, .prose ol { color: var(--texte-att); padding-left: 1.3em; }
.section--sombre .prose ul, .section--sombre .prose ol { color: var(--gris-sombre-2); }
.prose li { margin-bottom: .5em; }
.prose strong { color: var(--texte); font-weight: 700; }
.section--sombre .prose strong { color: var(--blanc); }
.prose p { color: var(--texte-att-2); }
.section--sombre .prose p { color: var(--gris-sombre-2); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied { background: #0B0C0E; border-top: 1px solid var(--bord-sombre-clair); padding-block: 60px 28px; color: var(--gris-sombre); }
.pied__grille {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; margin-bottom: 42px;
}
@media (max-width: 820px) { .pied__grille { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 480px) { .pied__grille { grid-template-columns: 1fr; } }

.pied img { height: 44px; width: auto; margin-bottom: 16px; }
.pied h4 {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gris-sombre-3); margin-bottom: 16px; font-weight: 600;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 9px; }
.pied a { color: #B9BEC4; text-decoration: none; font-size: .92rem; }
.pied a:hover { color: var(--jaune); }
.pied p { color: var(--gris-sombre-3); font-size: .92rem; }

.pied__tel {
  display: block; font-family: var(--mono); font-size: 1.3rem; font-weight: 700;
  color: var(--jaune) !important; letter-spacing: -0.02em; margin-bottom: 10px;
}

.pied__bas {
  border-top: 1px solid #1E2126; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: .82rem; color: var(--gris-sombre-3);
}
.pied__bas a { font-size: .82rem; color: var(--gris-sombre-3); }
.pied__bas a:hover { color: var(--jaune); }

/* --------------------------------------------------------------------------
   Impression
   -------------------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  .entete, .barre-appel, .rappel, .pied__grille, .badges { display: none; }
  a { color: #000; }
}