/* ==========================================================================
   Dégorgement Richard — feuille de style unique.

   Organisation
     01. Polices             06. En-tête            11. Formulaires
     02. Jetons de design    07. Héros              12. Article et blog
     03. Base et typographie 08. Cartes et grilles  13. Pied de page
     04. Utilitaires         09. Sections métier    14. Animations
     05. Boutons             10. FAQ et tableaux    15. Impression

   Toute couleur, tout rayon, toute ombre et tout espacement vient d'une
   variable déclarée en 02. Aucune valeur n'est écrite en dur dans une page :
   changer une teinte ici la change sur les 111 pages du site.

   Contrastes : chaque couleur de texte a été vérifiée à 4.5:1 minimum sur son
   fond (WCAG AA). L'identité est entièrement bleue : le bleu clair porte les
   aplats, les badges et les fonds ; le bleu profond porte le texte, les liens
   et les boutons pleins, parce que lui seul tient le contraste.
   ========================================================================== */

/* == 01. Polices ========================================================== */
/* Deux familles variables, sous-ensemble latin, servies depuis le domaine :
   aucune requête vers un tiers, aucun cookie, et une seule graisse à charger
   pour toute l'échelle 400–800. */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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: 'Jakarta';
  src: url('/assets/fonts/jakarta-latin-var.woff2') format('woff2-variations');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  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;
}

/* == 02. Jetons de design ================================================= */

:root {
  /* --- Rôles : ce que la couleur FAIT ------------------------------------
     C'est ce jeu-là qu'écrivent les composants. Les valeurs qu'il désigne
     peuvent bouger dans l'échelle ci-dessous sans qu'une seule règle change. */
  --color-primary:        #38bdf8;   /* bleu clair — aplats, badges, icônes  */
  --color-primary-dark:   #0284c7;   /* interactif                            */
  --color-primary-deep:   #0369a1;   /* texte et boutons pleins — 5,9:1       */
  --color-primary-light:  #e0f2fe;   /* fonds de pastille, cercles d'icône    */
  --color-primary-soft:   #f0f9ff;   /* fonds de section                      */
  --color-accent:         #0ea5e9;   /* action secondaire, traits d'accent    */

  --color-dark:           #0f172a;   /* pied de page, sections sombres        */
  --color-text:           #1e293b;   /* texte courant — 13,6:1 sur blanc      */
  --color-text-strong:    #0f172a;   /* titres                                */
  --color-text-secondary: #5b687d;   /* texte secondaire — voir la note       */

  --color-background:      #f8fafc;
  --color-background-blue: #f0f9ff;
  --color-surface:         #ffffff;
  --color-white:           #ffffff;
  --color-border:          #e2e8f0;
  --color-border-strong:   #cbd5e1;

  --color-success:        #16a34a;   /* confirmation, jalon franchi          */
  --color-success-deep:   #15803d;   /* même rôle en texte — 4,6:1 sur blanc  */

  --shadow-soft: 0 10px 30px rgba(15, 23, 42, .06);

  /* NOTE sur --color-text-secondary. La direction demandait #64748b. Posé sur
     le bleu très pâle des sections (#f0f9ff), il tombe à 4,48:1 — sous le
     seuil AA de 4,5. Assombri de deux crans, il tient 5,4:1 sur ce même fond
     et reste visuellement un gris-bleu secondaire. C'est le seul écart à la
     palette fournie, et il est mesuré, pas supposé. */

  /* --- Échelle : les teintes disponibles ---------------------------------- */
  --bleu-50:  #f0f9ff;
  --bleu-100: #e0f2fe;
  --bleu-200: #bae6fd;
  --bleu-300: #7dd3fc;
  --bleu-400: #38bdf8;
  --bleu-500: #0ea5e9;
  --bleu-600: #0284c7;
  --bleu-700: #0369a1;
  --bleu-800: #075985;
  --bleu-900: #0c4a6e;

  --nuit:     #0f172a;
  --nuit-800: #1e293b;
  --nuit-700: #334155;

  --blanc:    #ffffff;
  --gris-50:  #f8fafc;
  --gris-100: #f1f5f9;
  --gris-200: #e2e8f0;
  --texte:      var(--color-text);
  --texte-fort: var(--color-text-strong);
  --texte-doux: var(--color-text-secondary);
  --bordure:       var(--color-border);
  --bordure-forte: var(--color-border-strong);

  --vert:  #15803d;
  --rouge: #b91c1c;

  /* Rayons — l'identité est à angles vifs.
     Les six jetons sont conservés, et valent tous zéro : un composant
     continue d'écrire l'intention (« ce bloc porte le rayon d'une carte »),
     et revenir à des angles adoucis se fait ici, en une ligne, sans toucher
     à une seule règle. */
  --r-xs: 0;  --r-sm: 0;  --r-md: 0;
  --r-lg: 0;  --r-xl: 0;  --r-full: 0;

  /* Ombres — douces et bleutées, jamais lourdes. */
  --ombre-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --ombre-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .05);
  --ombre-md: 0 1px 3px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .07);
  --ombre-lg: 0 2px 6px rgba(15, 23, 42, .05), 0 20px 45px rgba(15, 23, 42, .10);
  --ombre-bleue: 0 8px 22px rgba(3, 105, 161, .22);

  /* Espacement — échelle de 4 px. */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 2.5rem;  --e-8: 3rem;
  --e-9: 4rem;    --e-10: 5rem;   --e-11: 6.5rem;

  --section-y: clamp(2.75rem, 1.4rem + 5vw, 5.25rem);

  --largeur: 1200px;
  --largeur-etroite: 760px;
  --gouttiere: clamp(1rem, .5rem + 2vw, 2rem);

  --police:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --police-titre: 'Jakarta', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Surfaces. */
  --fond:      var(--color-surface);
  --fond-doux: var(--color-background);
  --fond-bleu: var(--color-background-blue);
  --surface:   var(--color-surface);
}

/* Mode sombre : mêmes rôles, teintes inversées. Le bleu clair reste l'accent. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary-deep:   #7dd3fc;
    --color-primary-dark:   #38bdf8;
    --color-primary-light:  #12293f;
    --color-primary-soft:   #0d1b2b;
    --color-text:           #c3d2e2;
    --color-text-strong:    #f1f5f9;
    --color-text-secondary: #93a4bb;
    --color-background:      #0f1829;
    --color-background-blue: #0d1b2b;
    --color-surface:         #101a2c;
    --color-border:          #22304b;
    --color-border-strong:   #33415c;

    --blanc:    #0b1220;
    --gris-50:  #0f1829;
    --gris-100: #16223a;
    --gris-200: #22304b;
    --bleu-50:  #0d1b2b;
    --bleu-100: #12293f;
    --bleu-200: #1a3d5c;
    --bleu-700: #7dd3fc;
    --bleu-800: #bae6fd;
    --nuit:     #0b1220;
    --nuit-800: #131e33;
    --fond:     #0b1220;

    --ombre-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --ombre-sm: 0 1px 3px rgba(0, 0, 0, .5);
    --ombre-md: 0 2px 10px rgba(0, 0, 0, .5);
    --ombre-lg: 0 8px 34px rgba(0, 0, 0, .55);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, .45);
  }
}

/* == 03. Base et typographie ============================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* l'en-tête collant ne masque plus les ancres */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 400;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;         /* aucun débordement horizontal, jamais */
}

img, svg, video { max-width: 100%; height: auto; display: block; }
picture { display: contents; }   /* la mise en page vise l'<img>, pas l'enveloppe */

h1, h2, h3, h4, h5 {
  font-family: var(--police-titre);
  color: var(--texte-fort);
  line-height: 1.16;
  letter-spacing: -.022em;
  font-weight: 800;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.3rem + 2.9vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); font-weight: 700; }
h4 { font-size: 1.0625rem; font-weight: 700; }

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

strong, b { font-weight: 700; color: var(--texte-fort); }
em { font-style: italic; }
small { font-size: .875rem; }

a {
  color: var(--bleu-700);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .15s ease;
}
a:hover { color: var(--bleu-800); }

ul, ol { padding-left: 1.3rem; margin: 0 0 1.15em; }
li { margin-bottom: .45em; }
li:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--bordure); margin: var(--e-7) 0; }

::selection { background: var(--bleu-200); color: var(--nuit); }

/* == 04. Utilitaires ====================================================== */

.wrap {
  width: min(100% - (var(--gouttiere) * 2), var(--largeur));
  margin-inline: auto;
}

main > section { padding-block: var(--section-y); }
main > section:first-child { padding-top: clamp(2rem, 1rem + 3vw, 3.25rem); }

/* Alternance des fonds. Le rythme de la page repose dessus : blanc, bleu très
   clair, blanc… Une page dont toutes les sections ont le même fond se lit
   comme un seul bloc, quelle que soit la qualité de son contenu. */
section.alt  { background: var(--color-background-blue); }
/* Deux sections de même fond qui se suivent : la seconde reprend le blanc,
   sinon la frontière disparaît et l'alternance ne sert plus à rien. */
section.alt + section.alt { background: var(--color-surface); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: .5rem; top: -100px; z-index: 999;
  background: var(--nuit); color: #fff;
  padding: .85rem 1.25rem; border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: .5rem; color: #fff; }

:focus-visible {
  outline: 3px solid var(--bleu-500);
  outline-offset: 3px;
  border-radius: 0;
}

/* Titre de section : sur-titre discret, titre, chapeau. */
.section-titre { max-width: 62ch; margin-bottom: var(--e-7); }
.section-titre > h1,
.section-titre > h2 { margin-bottom: .4em; }
.section-titre > p {
  font-size: 1.09rem;
  color: var(--texte);
  margin-bottom: 0;
}

.sur-titre {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--police);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bleu-700);
  margin: 0 0 .85rem;
}
.sur-titre::before {
  content: ""; width: 1.6rem; height: 2px; border-radius: 0;
  background: linear-gradient(90deg, var(--bleu-500), var(--bleu-300));
}
.sur-titre.accent { color: var(--color-primary-deep); }
.sur-titre.accent::before { background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); }

/* Point clignotant de disponibilité. */
.pastille {
  width: .6rem; height: .6rem; border-radius: 0;
  background: #22c55e; flex: none;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .55);
  animation: pouls 2.4s ease-out infinite;
}
@keyframes pouls {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 .55rem rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* == 05. Boutons ========================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.4rem;
  border-radius: var(--r-sm);
  font-family: var(--police);
  font-size: .98rem; font-weight: 650; line-height: 1.25;
  text-decoration: none; text-align: center;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.7,.4,1),
              box-shadow .16s ease, background-color .16s ease,
              border-color .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn-large { padding: 1.02rem 1.85rem; font-size: 1.05rem; border-radius: var(--r-md); }
.btn-bloc  { display: flex; width: 100%; }

/* Appel — l'action prioritaire. Bleu profond plein : c'est la seule teinte de
   la famille qui supporte du texte blanc, et son poids visuel la distingue
   nettement du devis sans recourir à une couleur d'alerte. */
.btn-call {
  background: linear-gradient(180deg, var(--color-primary-deep), #075985);
  color: #fff;
  box-shadow: var(--ombre-bleue);
}
.btn-call:hover {
  background: linear-gradient(180deg, #075985, #0c4a6e);
  color: #fff; box-shadow: 0 12px 30px rgba(3, 105, 161, .32);
}

/* Devis — action secondaire. Bleu clair vif, texte bleu nuit : 6,2:1, et
   assez lumineux pour ressortir sur un en-tête blanc. */
.btn-devis {
  background: var(--color-accent); color: #06283d;
  box-shadow: 0 6px 18px rgba(14, 165, 233, .28);
}
.btn-devis:hover {
  background: var(--color-primary-dark); color: #fff;
  box-shadow: 0 12px 28px rgba(2, 132, 199, .34);
}

/* Contour — action tertiaire. S'adapte au fond clair comme au fond sombre. */
.btn-ghost {
  border-color: var(--bordure-forte);
  color: var(--texte-fort);
  background: var(--surface);
}
.btn-ghost:hover {
  border-color: var(--bleu-400);
  color: var(--bleu-800);
  background: var(--bleu-50);
  box-shadow: var(--ombre-sm);
}

/* Variante sur fond sombre. */
.btn-ghost.clair {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.28);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn-ghost.clair:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}

/* Lien fléché — micro-action de fin de carte. */
.lien-fleche {
  display: inline-flex; align-items: center; gap: .4rem;
  /* 24 px de haut au minimum : c'est la cible tactile exigée par le critère
     WCAG 2.5.8. Un lien d'action isolé ne bénéficie pas de l'exception
     accordée aux liens insérés dans une phrase. */
  min-height: 1.6rem; padding-block: .15rem;
  font-weight: 650; font-size: .95rem;
  color: var(--bleu-700); text-decoration: none;
}
.lien-fleche::after {
  content: "→";
  transition: transform .18s cubic-bezier(.2,.7,.4,1);
  font-family: var(--police);
}
.lien-fleche:hover { color: var(--bleu-800); }
.lien-fleche:hover::after { transform: translateX(4px); }

/* == 06. En-tête ========================================================== */

/* L'en-tête tient en trois zones : la marque à gauche, le menu au centre, le
   téléphone et le bouton d'intervention à droite. La grille `auto 1fr auto`
   centre le menu sur la largeur utile, pas sur ce qui reste entre les deux
   blocs latéraux — c'est ce qui distingue un menu vraiment centré d'un menu
   simplement poussé. */

/* Bandeau d'annonce : disponibilité à gauche, zone à droite. Disparaît sous
   900 px pour ne pas voler de hauteur au contenu sur mobile. */
.topbar {
  background: var(--color-primary-deep);
  color: #e2e8f0;
  font-size: .82rem;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); min-height: 2.4rem; padding-block: .35rem;
}
.topbar-dispo { display: inline-flex; align-items: center; gap: .5rem; }
.topbar-zone  { color: #cfe6f5; }
.topbar strong { color: #fff; font-weight: 600; }
@media (max-width: 899px) { .topbar { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.site-header.est-colle {
  box-shadow: 0 1px 0 var(--bordure), 0 12px 28px rgba(15, 23, 42, .08);
  border-bottom-color: transparent;
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-4);
  min-height: 4.6rem;
  padding-block: .7rem;
}

.brand {
  display: inline-flex; align-items: center;
  text-decoration: none; flex: none;
}
/* Le logo est servi en SVG : sa hauteur est la seule chose à fixer, la
   largeur suit son rapport (3,46 pour 1). Les attributs width et height de la
   balise réservent la place avant le chargement — pas de saut de mise en
   page, même sur un réseau lent. */
.brand-logo {
  display: block;
  height: 2.9rem; width: auto;
  transition: opacity .18s ease;
}
.brand:hover .brand-logo { opacity: .82; }
/* Deux paliers, pour la même raison que le reste de la barre : la ligne
   « EN BRETAGNE » doit rester lisible là où il y a la place, et le logo doit
   savoir se serrer là où il n'y en a pas. */
@media (min-width: 1400px) { .brand-logo { height: 3.2rem; } }
@media (max-width: 559px)  { .brand-logo { height: 2.5rem; } }
@media (max-width: 359px)  { .brand-logo { height: 2.25rem; } }

.nav { justify-self: center; }
.nav ul {
  display: flex; align-items: center; gap: .1rem;
  list-style: none; margin: 0; padding: 0;
}
/* Sans cette remise à zéro, le dernier <li> — seul à ne pas porter la marge
   basse par défaut — n'a pas la même hauteur de boîte que ses voisins, et
   « Contact » se retrouve désaligné du reste du menu. */
.nav li { margin: 0; }
.nav ul a {
  position: relative;
  display: block; padding: .55rem .58rem;
  border-radius: var(--r-xs);
  font-size: .92rem; font-weight: 550;
  color: var(--texte-fort); text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}
/* Le soulignement se dessine depuis le centre : c'est le seul mouvement du
   menu, et il remplace l'aplat de fond qui alourdissait la barre. */
.nav ul a::after {
  content: ""; position: absolute; left: .58rem; right: .58rem; bottom: .18rem;
  height: 2px; border-radius: 0;
  background: var(--color-primary-dark);
  transform: scaleX(0); transform-origin: center;
  transition: transform .22s ease;
}
.nav ul a:hover { color: var(--bleu-800); }
.nav ul a:hover::after { transform: scaleX(1); }
.nav ul a[aria-current="page"] { color: var(--bleu-700); }
.nav ul a[aria-current="page"]::after { transform: scaleX(1); }

/* Les deux actions de l'en-tête. */
.header-actions { display: flex; align-items: center; gap: .55rem; flex: none; }
.header-call {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; padding: .45rem .7rem .45rem .45rem;
  border-radius: var(--r-sm);
  transition: background .18s ease;
}
.header-call .tel-icone {
  width: 2.15rem; height: 2.15rem; flex: none;
  display: grid; place-items: center;
  border-radius: 0;
  background: var(--color-primary-light); color: var(--color-primary-deep);
  transition: background .18s ease, color .18s ease;
}
.header-call .tel-icone svg { width: 1.1rem; height: 1.1rem; }
.header-call .tel-texte { display: grid; line-height: 1.15; text-align: left; }
/* Même arbitrage que pour l'accroche de la marque : l'étiquette n'apparaît
   que lorsque la barre a de quoi la loger. */
.header-call .tel-texte small {
  display: none;
  font-size: .68rem; color: var(--texte-doux); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
@media (min-width: 1400px) { .header-call .tel-texte small { display: block; } }
.header-call .tel-texte strong {
  font-family: var(--police-titre);
  font-size: 1rem; font-weight: 800; color: var(--texte-fort);
  letter-spacing: -.01em; white-space: nowrap;
}
.header-call:hover { background: var(--bleu-50); }
.header-call:hover .tel-icone { background: var(--color-primary-deep); color: #fff; }

.header-actions .btn-devis { font-size: .92rem; padding: .72rem 1.1rem; }

/* Raccourci téléphone de la barre mobile. */
.header-call-compact {
  display: none;
  align-items: center; gap: .45rem;
  justify-self: end;
  min-height: 2.9rem; padding: 0 .8rem;
  border-radius: var(--r-sm);
  background: var(--color-primary-light);
  color: var(--color-primary-deep);
  text-decoration: none;
  font-family: var(--police-titre);
  font-weight: 800; font-size: .95rem; letter-spacing: -.01em;
  white-space: nowrap;
}
.header-call-compact svg { width: 1.15rem; height: 1.15rem; flex: none; }
/* Sous 560 px, la barre doit loger la marque, ce raccourci et le bouton de
   menu dans moins de 520 px utiles : on garde l'icône seule, le numéro
   complet restant à un pouce dans la barre fixe basse. */
@media (max-width: 559px) { .header-call-compact-num { display: none; } }

.nav-toggle {
  display: none;
  width: 2.9rem; height: 2.9rem;
  align-items: center; justify-content: center;
  background: var(--gris-100); border: 1px solid var(--bordure);
  border-radius: var(--r-sm); cursor: pointer; color: var(--texte-fort);
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 1.15rem; height: 2px; border-radius: 0;
  background: currentColor; transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { content: ""; position: absolute; top: -6px; }
.nav-toggle-bars::after  { content: ""; position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Tiroir de navigation mobile. */
/* Le tiroir prend le relais jusqu'à 1179 px. En dessous, la barre complète —
   marque, six entrées, téléphone et bouton d'intervention — ne tient plus
   dans la largeur utile et pousse la page en défilement horizontal. C'est ce
   que mesure scripts/check-responsive.py. */
@media (max-width: 1179px) {
  .header-inner {
    grid-template-columns: 1fr auto auto;
    gap: var(--e-3);
  }
  .nav-toggle { display: flex; position: relative; z-index: 130; }
  .header-call-compact { display: inline-flex; }
  .header-actions { display: none; }
  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(88vw, 24rem);
    margin: 0;
    background: var(--surface);
    border-left: 1px solid var(--bordure);
    box-shadow: -20px 0 50px rgba(15,23,42,.16);
    padding: 5.5rem var(--e-5) var(--e-6);
    overflow-y: auto;
    transform: translateX(100%);
    /* Un tiroir simplement décalé hors écran reste focalisable au clavier et
       lu par les synthèses vocales : ses liens seraient donc atteignables
       alors qu'il est fermé. « visibility » le retire vraiment de la page, et
       n'est rétablie qu'à la fin de la glissade pour ne pas la couper. */
    visibility: hidden;
    transition: transform .28s cubic-bezier(.4,0,.2,1),
                visibility 0s linear .28s;
    z-index: 120;
  }
  .nav[data-ouvert="true"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s;
  }
  .nav ul { display: grid; gap: .1rem; }
  .nav ul a {
    padding: .85rem .9rem; font-size: 1.05rem; font-weight: 600;
    border-radius: var(--r-sm);
  }
  .nav ul a::after { display: none; }
  .nav li + li a { border-top: 1px solid var(--bordure); border-radius: 0; }
  .nav-actions { display: grid; gap: .7rem; margin-top: var(--e-5); }
  /* Le voile passe SOUS l'en-tête : celui-ci porte le bouton de fermeture,
     qui doit rester cliquable. Le tiroir, lui, est un enfant de l'en-tête et
     se retrouve donc naturellement au-dessus du voile. */
  .voile {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  .voile[data-visible="true"] { opacity: 1; pointer-events: auto; }
  body[data-menu="ouvert"] { overflow: hidden; }
}
@media (min-width: 1180px) {
  .nav-actions { display: none; }
}

/* Entre 1180 et 1339 px, la barre complète tient — mais de justesse. Deux
   crans de moins sur les respirations du menu et du bouton rendent la
   quarantaine de pixels qui sépare « ça tient » de « ça pousse la page ». */
@media (min-width: 1180px) and (max-width: 1339px) {
  .header-inner { gap: var(--e-3); }
  .nav ul a { padding-inline: .45rem; font-size: .89rem; }
  .nav ul a::after { left: .45rem; right: .45rem; }
  .header-actions .btn-devis { font-size: .88rem; padding: .68rem .9rem; }
}

/* Sous 480 px, c'est la hauteur du logo qui se réduit, plus haut dans cette
   feuille : une image ne se replie pas sur deux lignes. */

/* Fil d'Ariane. */
.fil { padding-top: var(--e-5); }
.fil ol {
  display: flex; flex-wrap: wrap; gap: .3rem .5rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .85rem; color: var(--texte-doux);
}
.fil li { margin: 0; }
.fil li + li::before { content: "/"; margin-right: .5rem; color: var(--bordure-forte); }
.fil a { color: var(--texte-doux); text-decoration: none; }
.fil a:hover { color: var(--bleu-700); text-decoration: underline; }

/* == 07. Héros ============================================================ */

.hero {
  position: relative;
  background:
    radial-gradient(60rem 32rem at 88% -12%, var(--bleu-100), transparent 62%),
    radial-gradient(46rem 28rem at 4% 108%, var(--bleu-50), transparent 60%),
    var(--fond);
  border-bottom: 1px solid var(--bordure);
  overflow: hidden;
}
main > section.hero { padding-block: clamp(2.25rem, 1rem + 4.4vw, 4.5rem); }

.hero-grid {
  display: grid; gap: clamp(2rem, 1rem + 3.5vw, 3.75rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
}
/* Toutes les pages ne portent pas de photographie d'ouverture : celles dont
   la photographie n'apprenait rien de propre à leur sujet l'ont perdue. Leur
   bande d'ouverture n'a plus qu'une colonne, qui prend alors toute la
   largeur — bornée à la longueur de ligne lisible, faute de quoi le chapeau
   s'étirerait sur 1200 px. */
.hero-grid > :only-child { grid-column: 1 / -1; max-width: 54rem; }

.urgence-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .95rem .45rem .7rem;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre-sm);
  font-size: .84rem; font-weight: 650; color: var(--texte-fort);
  margin: 0 0 var(--e-5);
}

.hero h1 { margin-bottom: .45em; }
.hero h1 .accent {
  background: linear-gradient(100deg, var(--bleu-700), var(--bleu-600));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--bleu-700);
}

.chapeau {
  font-size: clamp(1.02rem, .97rem + .28vw, 1.15rem);
  color: var(--texte);
  max-width: 58ch;
  margin-bottom: var(--e-6);
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-bottom: var(--e-6);
}

/* Trois preuves chiffrées, en ligne. */
.hero-preuves {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  padding-top: var(--e-5);
  border-top: 1px solid var(--bordure);
}
.preuve { display: grid; gap: .1rem; }
.preuve strong {
  font-family: var(--police-titre);
  font-size: clamp(1.15rem, .9rem + .8vw, 1.5rem);
  font-weight: 800; color: var(--color-primary-deep);
  letter-spacing: -.02em; line-height: 1.15;
  overflow-wrap: anywhere;
}
.preuve span { font-size: .84rem; color: var(--texte-doux); line-height: 1.4; }

/* Média du héros : image cadrée, forme d'accent derrière, carte flottante. */
.hero-media { position: relative; }
.hero-media img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-lg);
  background: var(--bleu-50);
}

.hero-carte {
  position: absolute; left: -1rem; bottom: -1.25rem;
  display: flex; align-items: center; gap: .75rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-lg);
  padding: .8rem 1.05rem;
  max-width: 17rem;
}
.hero-carte .icone {
  width: 2.4rem; height: 2.4rem; flex: none;
  display: grid; place-items: center; border-radius: 0;
  background: var(--color-primary-light); color: var(--color-primary-deep);
}
.hero-carte .icone svg { width: 1.2rem; height: 1.2rem; }
.hero-carte strong { display: block; font-size: .95rem; color: var(--texte-fort); font-family: var(--police-titre); }
.hero-carte span { font-size: .8rem; color: var(--texte-doux); line-height: 1.35; display: block; }
@media (max-width: 979px) {
  .hero-carte { position: static; margin-top: var(--e-4); max-width: none; }
}

/* Héros des pages intérieures : même langage que l'accueil, moins haut, et
   le fil d'Ariane intégré à la bande plutôt que posé au-dessus. */
main > section.hero-interieur { padding-block: 0 clamp(2rem, 1rem + 3vw, 3.25rem); }
.hero-interieur .fil { padding-top: var(--e-4); margin-bottom: var(--e-5); }
.hero-interieur .hero-grid { align-items: center; }
.hero-interieur h1 { font-size: clamp(1.85rem, 1.25rem + 2.3vw, 2.85rem); }
.hero-interieur .chapeau { margin-bottom: var(--e-5); }
.hero-interieur .hero-actions { margin-bottom: 0; }
.hero-interieur .hero-media img { border-radius: var(--r-lg); }
@media (min-width: 980px) {
  .hero-interieur .hero-grid { grid-template-columns: 1.1fr .9fr; }
}

/* Article : le titre occupe toute la largeur, l'image le suit en bandeau. */
.hero-article .article-entete { max-width: var(--largeur-etroite); }
.hero-article .article-entete .article-meta {
  margin-bottom: 0; padding-bottom: 0; border-bottom: 0;
}
.hero-article h1 { margin-bottom: .35em; }

/* Héros compact, sans visuel : pages légales et de contact. */
.hero-page {
  background: linear-gradient(180deg, var(--bleu-50), transparent);
  border-bottom: 1px solid var(--bordure);
}
.hero-page .wrap { max-width: 78ch; }
.hero-page .fil { padding-top: var(--e-4); margin-bottom: var(--e-5); }

/* == 08. Cartes et grilles ================================================ */

.grille { display: grid; gap: var(--e-5); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20.5rem), 1fr)); }
/* Quatre colonnes seulement quand la largeur les autorise vraiment : sous
   16 rem par carte, le titre d'une prestation se coupe en trois lignes. */
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.carte {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--ombre-sm);
  transition: transform .2s cubic-bezier(.2,.7,.4,1),
              box-shadow .2s ease, border-color .2s ease;
}
.carte:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-md);
  border-color: var(--bleu-200);
}
.carte h2, .carte h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.carte h2 a, .carte h3 a { color: inherit; text-decoration: none; }
.carte h2 a:hover, .carte h3 a:hover { color: var(--bleu-700); }
.carte p { font-size: .96rem; }
.carte > :last-child { margin-top: auto; }

/* Icône de carte : cercle bleu très clair, trait bleu. */
.carte-icone {
  width: 3.1rem; height: 3.1rem;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--bleu-100), var(--bleu-50));
  color: var(--bleu-700);
  margin-bottom: var(--e-4);
  border: 1px solid var(--bleu-200);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.carte-icone svg { width: 1.5rem; height: 1.5rem; }
.carte:hover .carte-icone {
  background: linear-gradient(145deg, var(--bleu-500), var(--bleu-700));
  color: #fff;
  border-color: transparent;
  transform: scale(1.04);
}

.carte-service .probleme {
  font-size: .9rem; color: var(--texte-doux);
  padding: .6rem .8rem; margin-bottom: .8rem;
  background: var(--fond-doux);
  border-left: 3px solid var(--bleu-300);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.carte-service .probleme strong { color: var(--texte-fort); }

.carte-pied {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem;
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--bordure);
}
/* 40 px de haut : en dessous, un pouce rate la cible une fois sur trois.
   Le bouton reste visuellement secondaire par sa taille de texte. */
.carte-pied .btn {
  padding: .6rem 1rem; min-height: 2.65rem;
  font-size: .875rem; box-shadow: none;
}

/* Carte avec visuel en tête (blog, galerie de services). */
.carte-media { padding: 0; overflow: hidden; }
/* L'image peut être un <img> direct, ou enveloppée dans un <a> et/ou un
   <picture> quand elle vient du pipeline photo. Les sélecteurs suivent l'arbre
   DOM, pas les boîtes : `display: contents` sur <picture> ne dispense pas de
   le nommer. */
.carte-media > img,
.carte-media > a > img,
.carte-media > picture > img,
.carte-media > a > picture > img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 0; background: var(--bleu-50);
  transition: transform .4s cubic-bezier(.2,.7,.4,1);
}
.carte-media:hover > img,
.carte-media:hover > a > img,
.carte-media:hover > picture > img,
.carte-media:hover > a > picture > img { transform: scale(1.035); }
.carte-media .carte-corps { padding: var(--e-5); display: flex; flex-direction: column; flex: 1; }
.carte-media .carte-corps > :last-child { margin-top: auto; }

/* Carte d'article sans visuel : l'étiquette tient lieu d'accroche, et le
   titre doit peser plus qu'il ne pesait sous une image. */
.carte-article { padding: var(--e-5); }
.carte-article h2 { font-size: 1.22rem; line-height: 1.3; }
.carte-article p { margin-bottom: var(--e-4); }

.carte-etiquettes {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: .7rem;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--bleu-700);
}
.carte-etiquettes .duree { color: var(--texte-doux); font-weight: 600; letter-spacing: .02em; text-transform: none; }
.carte-etiquettes .duree::before { content: "·"; margin-right: .4rem; color: var(--bordure-forte); }

/* == 09. Sections métier ================================================== */

/* --- Bloc « réponse rapide » (GEO) --------------------------------------- */
/* Réponse autoportante placée haut dans la page : un moteur génératif peut la
   citer telle quelle sans avoir à recomposer le reste du document. */
.reponse-rapide {
  background: var(--color-surface);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem, .8rem + 2vw, 2.4rem);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.reponse-rapide::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
}
.reponse-rapide > h2 {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bleu-700);
  font-family: var(--police);
  margin-bottom: .9rem;
}
.definition {
  font-size: clamp(1.02rem, .97rem + .3vw, 1.16rem);
  line-height: 1.6;
  color: var(--texte);
  margin-bottom: var(--e-5);
}
.definition strong { color: var(--texte-fort); }

/* Les sept entrées QUI/QUOI/OÙ/QUAND/COMMENT/POURQUOI/COMBIEN deviennent
   autant de blocs. En liste, elles se lisaient comme un tableau administratif ;
   en blocs, chacune se repère et se cite isolément — ce qui est exactement
   l'usage qu'en fait un moteur génératif. */
.qr-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .7rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .qr-liste { grid-template-columns: 1fr 1fr; }
  /* La dernière entrée, souvent la plus longue (« Combien »), prend toute la
     largeur plutôt que de laisser une case vide à côté d'elle. */
  .qr-liste li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.qr-liste li {
  display: grid; gap: .3rem;
  margin: 0; padding: .85rem 1rem;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--r-md);
  font-size: .95rem;
  transition: border-color .18s ease, background-color .18s ease;
}
.qr-liste li:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.cle {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--police-titre);
  font-size: .72rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-primary-deep);
}
.cle::before {
  content: ""; width: .45rem; height: .45rem; flex: none;
  border-radius: 0; background: var(--color-primary);
}

/* --- Bandeau d'urgence — le seul aplat de bleu soutenu de la page --------- */
/* Bleu soutenu, et non bleu nuit : c'est la seule section colorée de la page,
   elle doit trancher avec le blanc sans basculer dans le sombre. Le blanc y
   passe à 5,9:1, ce qui autorise du texte courant. */
.bandeau-urgence {
  background:
    radial-gradient(38rem 22rem at 92% 8%, rgba(125, 211, 252, .28), transparent 62%),
    linear-gradient(135deg, #0369a1 0%, #075985 58%, #0c4a6e 100%);
  color: #eaf6fd;
  position: relative;
  overflow: hidden;
}
/* Sur ce fond bleu, l'action prioritaire s'inverse : fond blanc, texte bleu
   profond. Un bouton bleu sur un aplat bleu ne se détacherait pas. */
.bandeau-urgence .btn-call {
  background: var(--color-white); color: var(--color-primary-deep);
  box-shadow: 0 8px 22px rgba(3, 26, 46, .28);
}
.bandeau-urgence .btn-call:hover {
  background: var(--color-primary-light); color: #075985;
}
.bandeau-urgence::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.bandeau-urgence h1,
.bandeau-urgence h2,
.bandeau-urgence h3 { color: #fff; }
.bandeau-urgence .sur-titre { color: #bae6fd; }
.bandeau-urgence .sur-titre::before { background: linear-gradient(90deg, var(--color-primary), #bae6fd); }
.bandeau-urgence a:not(.btn) { color: #e0f2fe; }
/* Le fil d'Ariane pose sa couleur sur le <ol> lui-même : la redéfinir sur le
   conteneur ne suffit pas, elle ne fait qu'être héritée puis écrasée. */
.bandeau-urgence .fil ol { color: #cfe6f5; }
.bandeau-urgence .fil a { color: #eaf6fd; }
.bandeau-urgence .fil li + li::before { color: #6ea8cc; }
.bandeau-urgence strong { color: #fff; }

.urgence-inner {
  display: grid; gap: clamp(1.75rem, 1rem + 2.6vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .urgence-inner { grid-template-columns: 1.35fr .65fr; } }

.liste-situations {
  list-style: none; margin: var(--e-5) 0 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  font-size: .95rem;
}
.liste-situations li {
  display: flex; align-items: flex-start; gap: .55rem; margin: 0;
  color: #dbeefb;
}
.liste-situations li::before {
  content: "";
  width: .45rem; height: .45rem; margin-top: .55rem; flex: none;
  border-radius: 0; background: var(--color-primary);
}

.urgence-encart {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  backdrop-filter: blur(8px);
  text-align: center;
}
.bandeau-urgence .urgence-encart .numero-tel,
.urgence-encart .numero-tel {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem);
  font-weight: 800; color: #fff; letter-spacing: -.01em;
  text-decoration: none; margin-bottom: .3rem;
}
.urgence-encart .horaires { font-size: .85rem; color: #d7edfa; margin-bottom: var(--e-4); }

/* --- Étapes : chronologie verticale numérotée ---------------------------- */
.etapes {
  list-style: none; counter-reset: etape;
  margin: 0; padding: 0;
  display: grid; gap: 0;
}
.etapes > li {
  counter-increment: etape;
  position: relative;
  margin: 0;
  padding: 0 0 var(--e-6) 3.6rem;
}
.etapes > li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 0;
  background: var(--surface);
  border: 1.5px solid var(--bleu-200);
  color: var(--bleu-700);
  font-family: var(--police-titre);
  font-size: .85rem; font-weight: 800;
  z-index: 1;
}
.etapes > li::after {
  content: "";
  position: absolute; left: 1.24rem; top: 2.5rem; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--bleu-200), var(--bordure));
}
.etapes > li:last-child { padding-bottom: 0; }
.etapes > li:last-child::after { display: none; }
.etapes h3 { margin-bottom: .35rem; padding-top: .3rem; }
.etapes p { font-size: .98rem; margin-bottom: 0; }

@media (min-width: 1180px) {
  /* La chronologie ne passe à l'horizontale qu'une fois ses cinq étapes
     tenant sur UNE ligne. En dessous, elles se répartissaient en 4 + 1, et
     le trait de liaison de la quatrième débordait dans le vide à droite. */
  .etapes.horizontale {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--e-5);
    overflow: hidden;   /* garde-fou : aucun trait ne dépasse de la grille */
  }
  .etapes.horizontale > li { padding: 3.4rem 0 0; }
  .etapes.horizontale > li::after {
    left: 2.5rem; right: -1.5rem; top: 1.24rem; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--bleu-200), var(--bordure));
  }
  .etapes.horizontale > li:last-child::after { display: none; }
}

/* --- Galerie d'interventions --------------------------------------------- */
.galerie {
  display: grid; gap: var(--e-3);
  grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
}
/* Deux colonnes dès qu'il y a la place, trois au-delà : une photographie
   d'intervention reste lisible en vignette, contrairement à un schéma. */
@media (min-width: 480px) { .galerie { grid-template-columns: 1fr 1fr; gap: var(--e-4); } }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie > li { margin: 0; }
.galerie figure {
  margin: 0; position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--bordure);
  background: var(--bleu-50);
  box-shadow: var(--ombre-sm);
}
.galerie img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .45s cubic-bezier(.2,.7,.4,1);
}
.galerie figure:hover img { transform: scale(1.05); }
.galerie figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 1.9rem .9rem .75rem;
  font-size: .85rem; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, transparent,
              rgba(15, 23, 42, .62) 45%, rgba(15, 23, 42, .94));
}
/* La galerie met en avant la première image sur les grands écrans. */
@media (min-width: 900px) {
  /* Quatre colonnes : la vignette mise en avant occupe un carré de 2×2 et les
     quatre autres remplissent exactement les deux colonnes restantes. Aucun
     trou dans la grille — c'est ce qui distingue une galerie composée d'une
     galerie qui déborde. */
  .galerie.mise-en-avant { grid-template-columns: repeat(4, 1fr); }
  .galerie.mise-en-avant > li:first-child { grid-column: span 2; grid-row: span 2; }
  .galerie.mise-en-avant > li:first-child img { aspect-ratio: 3 / 2; height: 100%; object-fit: cover; }
  .galerie.mise-en-avant > li:first-child figure { height: 100%; }
}

/* --- Départements -------------------------------------------------------- */
.departements {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.departement-carte {
  position: relative; overflow: hidden;
  margin: 0; padding: var(--e-5);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-xs);
  transition: transform .2s cubic-bezier(.2,.7,.4,1), box-shadow .2s ease, border-color .2s ease;
}
.departement-carte:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-md);
  border-color: var(--bleu-200);
}
.departement-carte h3 {
  display: flex; align-items: center; gap: .65rem;
  font-size: 1.15rem; margin-bottom: .55rem;
}
.departement-carte::after {
  /* Le numéro en très grand, en filigrane : il donne à la carte un repère
     visuel immédiat sans ajouter de texte à lire. */
  content: attr(data-numero);
  position: absolute; right: -.4rem; bottom: -1.6rem;
  font-family: var(--police-titre); font-size: 5.5rem; font-weight: 800;
  line-height: 1; color: var(--color-primary-light);
  pointer-events: none; z-index: 0;
}
.departement-carte > * { position: relative; z-index: 1; }
.numero {
  display: inline-grid; place-items: center;
  min-width: 2.35rem; height: 2.35rem; padding: 0 .4rem;
  border-radius: var(--r-sm);
  background: linear-gradient(145deg, var(--bleu-700), var(--bleu-800));
  color: #fff;
  font-family: var(--police-titre);
  font-size: .92rem; font-weight: 800; letter-spacing: -.01em;
  box-shadow: var(--ombre-bleue);
}
.villes { font-size: .9rem; color: var(--texte-doux); margin-bottom: .9rem; }

/* --- Liens connexes et colonnes de liens --------------------------------- */
.liens-connexes {
  background: var(--fond-doux);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  margin-top: var(--e-6);
}
.liens-connexes h2, .liens-connexes h3 {
  font-size: 1.05rem; margin-bottom: .8rem;
}
/* Le bloc s'emploie soit comme conteneur (<div> + <ul>), soit directement
   sur la liste : les deux formes existent dans les pages, les deux sont
   stylées ici plutôt que d'aller réécrire cent gabarits. */
.liens-connexes ul,
ul.liens-connexes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
ul.liens-connexes { padding: var(--e-5); }
.liens-connexes li { margin: 0; }
.liens-connexes a { font-size: .95rem; font-weight: 500; }

.colonnes-liens {
  columns: 3 13rem; column-gap: var(--e-6);
  list-style: none; margin: 0; padding: 0;
}
.colonnes-liens li { break-inside: avoid; margin-bottom: .45rem; font-size: .95rem; }

/* --- Encadrés et alertes -------------------------------------------------- */
.encadre {
  background: var(--fond-bleu);
  border: 1px solid var(--bleu-200);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  margin: var(--e-6) 0;
}
.encadre > h2, .encadre > h3 {
  font-size: 1.1rem; margin-bottom: .6rem;
  display: flex; align-items: center; gap: .5rem;
}
.encadre > :last-child { margin-bottom: 0; }

.alerte {
  background: var(--color-primary-soft);
  border: 1px solid #fed7aa;
  border-left: 4px solid var(--color-accent);
  border-radius: var(--r-sm);
  padding: var(--e-4) var(--e-5);
  margin: var(--e-5) 0;
  font-size: .97rem;
}
.alerte > :last-child { margin-bottom: 0; }

.infos-pratiques {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  margin-top: var(--e-6);
  box-shadow: var(--ombre-xs);
}
.infos-pratiques h2, .infos-pratiques h3 { font-size: 1.1rem; }
.infos-pratiques ul { list-style: none; padding: 0; }
.infos-pratiques li {
  padding: .55rem 0; border-top: 1px solid var(--bordure);
  font-size: .96rem; margin: 0;
}
.infos-pratiques li:first-child { border-top: 0; }

/* --- Appel à l'action de fin de page ------------------------------------- */
.cta-final {
  background:
    radial-gradient(44rem 24rem at 15% 0%, rgba(14, 165, 233, .20), transparent 60%),
    linear-gradient(135deg, var(--bleu-800) 0%, #0b3a5c 50%, var(--nuit) 100%);
  color: #dbeafe;
  text-align: center;
}
.cta-final h1,
.cta-final h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-final p { max-width: 60ch; margin-inline: auto; font-size: 1.05rem; }
.cta-final .btn-ghost {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
}
.cta-final .btn-ghost:hover { background: rgba(255, 255, 255, .17); color: #fff; }
.cta-final-actions {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
  margin-top: var(--e-6);
}


/* --- Bande de réassurance ------------------------------------------------
   Quatre affirmations, et pas une de plus que ce que l'entreprise peut tenir.
   Aucune ne parle de garantie, de délai chiffré ni de certification : ce sont
   exactement les quatre points que le visiteur cherche après le héros. */
.rassurance {
  display: grid; gap: var(--e-4);
  grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 620px)  { .rassurance { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .rassurance { grid-template-columns: repeat(4, 1fr); } }
.rassurance > li { margin: 0; }
.rassurance-carte {
  height: 100%;
  display: grid; gap: .55rem; align-content: start;
  padding: var(--e-5);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rassurance-carte:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-md);
  border-color: var(--bleu-200);
}
.rassurance-carte .icone {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--color-primary-light); color: var(--color-primary-deep);
}
.rassurance-carte .icone svg { width: 1.35rem; height: 1.35rem; }
.rassurance-carte h3 { font-size: 1.05rem; margin: 0; }
.rassurance-carte p { font-size: .93rem; color: var(--texte-doux); margin: 0; }

/* --- Bloc « problèmes fréquents » ----------------------------------------
   Une liste de symptômes, pas une liste de mots-clés : le visiteur doit
   reconnaître SA situation en une lecture. */
.problemes {
  display: grid; gap: var(--e-3);
  grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 560px)  { .problemes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .problemes { grid-template-columns: repeat(4, 1fr); } }
.problemes > li {
  margin: 0; padding: var(--e-4) var(--e-4) var(--e-4) 2.5rem;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-sm);
  font-size: .95rem;
}
.problemes > li::before {
  content: ""; position: absolute; left: 1rem; top: 1.35rem;
  width: .55rem; height: .55rem; border-radius: 0;
  background: var(--color-primary-dark);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}
.problemes strong { display: block; color: var(--texte-fort); margin-bottom: .15rem; }

/* --- Cas type : problème → diagnostic → méthode → résultat ----------------
   Composant réutilisable. Il décrit une SÉQUENCE DE TRAVAIL, pas un chantier
   passé : tant qu'aucune intervention datée et vérifiable n'est fournie, rien
   ici ne prétend en être une. Le jour où de vrais dossiers arrivent, le même
   balisage les accueille sans changer une règle de style. */
.cas {
  display: grid; gap: var(--e-5);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-sm);
  overflow: hidden;
}
@media (min-width: 900px) {
  .cas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; align-items: stretch; }
  .cas + .cas { margin-top: var(--e-5); }
  /* En alternance, la photographie passe à droite — et les colonnes doivent
     suivre, sinon c'est le texte qui hérite de la colonne étroite. */
  .cas.inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .cas.inverse .cas-visuel { order: 2; }
}
.cas + .cas { margin-top: var(--e-5); }
/* La figure est une colonne : l'image occupe la hauteur restante, la légende
   garde la sienne. Sans cela, une image en `height: 100%` et sa légende
   dépassent ensemble la hauteur de la rangée. */
.cas-visuel {
  position: relative; margin: 0;
  display: flex; flex-direction: column;
  background: var(--bleu-50);
}
.cas-visuel img {
  display: block; width: 100%;
  flex: 1 1 auto;
  min-height: 200px; max-height: 420px;
  object-fit: cover;
}
.cas-visuel figcaption {
  padding: .7rem var(--e-4);
  font-size: .84rem; color: var(--texte-doux);
  background: var(--bleu-50);
  border-top: 1px solid var(--bordure);
}
.cas-corps { padding: var(--e-5) var(--e-5) var(--e-6); }
@media (min-width: 900px) { .cas-corps { padding: var(--e-6); } }
.cas-corps h3 { font-size: 1.2rem; margin-bottom: var(--e-4); }
.cas-lieu {
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-primary-deep); margin-bottom: var(--e-4);
}
.cas-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.cas-etapes > li {
  margin: 0; padding-left: 1.1rem;
  border-left: 2px solid var(--bleu-200);
  font-size: .96rem;
}
.cas-etapes > li:last-child { border-left-color: var(--color-success); }
.cas-etapes .cle-cas {
  display: block;
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texte-doux); margin-bottom: .1rem;
}
.cas-etapes > li:last-child .cle-cas { color: var(--color-success-deep); }

/* --- Avant / après -------------------------------------------------------
   Le composant existe ; il ne s'affiche que lorsqu'un couple de clichés du
   même ouvrage, pris avant puis après, est réellement disponible. */
.avant-apres { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .avant-apres { grid-template-columns: 1fr 1fr; } }
.avant-apres figure {
  margin: 0; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--r-md);
  overflow: hidden;
}
.avant-apres img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.avant-apres figcaption { padding: var(--e-4); font-size: .92rem; }
.avant-apres .etiquette {
  display: inline-block; margin-bottom: .3rem;
  padding: .18rem .6rem; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  background: var(--gris-100); color: var(--texte-doux);
}
.avant-apres .apres .etiquette { background: #dcfce7; color: var(--color-success-deep); }

/* --- Liste de communes ---------------------------------------------------- */
.villes-liste {
  display: grid; gap: .55rem;
  /* 12,5 rem : « Loire-Atlantique (44) » tient alors sur une ligne. En
     dessous, il se coupait en deux et son pavé dépassait ses voisins d'une
     hauteur de ligne. Le min(100%) garde la colonne unique sur un écran
     étroit, où 12,5 rem seraient plus larges que la place disponible. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
  list-style: none; margin: 0; padding: 0;
}
.villes-liste > li { margin: 0; }
.villes-liste a {
  display: flex; align-items: center; gap: .5rem;
  min-height: 2.9rem; padding: .55rem .85rem;
  background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 600; color: var(--texte-fort);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.villes-liste a::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 0; flex: none;
  background: var(--color-primary-dark);
}
.villes-liste a:hover {
  background: var(--bleu-50); border-color: var(--bleu-300);
  transform: translateY(-1px);
}
.villes-liste .principale a {
  background: var(--color-primary-light); border-color: var(--bleu-200);
  color: var(--bleu-900);
}
.villes-autres { margin-top: var(--e-4); font-size: .93rem; color: var(--texte-doux); }

/* --- Appels à l'action : quatre traitements pour quatre moments -----------
   Répéter le même pavé cinq fois le rend invisible. Chaque emplacement a donc
   sa forme : encart clair après une explication, bande pleine après une
   démonstration, bandeau sombre à l'approche du pied de page. */
.cta-clair {
  display: grid; gap: var(--e-4);
  align-items: center;
  padding: var(--e-5) var(--e-6);
  background: var(--color-primary-soft);
  border: 1px solid var(--bleu-200);
  border-left: 4px solid var(--color-primary-dark);
  border-radius: var(--r-md);
}
@media (min-width: 820px) {
  .cta-clair { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-6); }
}
.cta-clair h2, .cta-clair h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.cta-clair p { margin: 0; font-size: .96rem; color: var(--texte-doux); }
.cta-clair .cta-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.cta-plein {
  padding: var(--e-6);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--bleu-700), var(--bleu-900));
  color: #eaf6fd;
  text-align: center;
  box-shadow: var(--ombre-lg);
}
.cta-plein h2, .cta-plein h3 { color: #fff; margin-bottom: .4rem; }
.cta-plein p { color: #cfe6f5; margin-bottom: var(--e-5); }
.cta-plein .cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.cta-plein .btn-call {
  background: #fff; color: var(--bleu-900); border-color: #fff;
  background-image: none;
}
.cta-plein .btn-call:hover { background: var(--color-primary-light); color: var(--bleu-900); }
.cta-plein .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.cta-plein .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* --- Section « évacuations » ---------------------------------------------- */
.evacuations {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.evacuations > li { margin: 0; }
.evacuations a {
  display: block; height: 100%;
  padding: var(--e-4);
  background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--r-sm);
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.evacuations a:hover {
  border-color: var(--bleu-300); box-shadow: var(--ombre-sm);
  transform: translateY(-2px);
}
.evacuations strong {
  display: block; font-size: .98rem; color: var(--texte-fort); margin-bottom: .15rem;
}
.evacuations span { display: block; font-size: .85rem; color: var(--texte-doux); }

/* --- Tarifs « à partir de » -----------------------------------------------
   Un prix d'appel n'est utile que s'il est lisible d'un coup d'œil ET
   immédiatement replacé dans son contexte : ce qu'il couvre, et le fait qu'un
   devis écrit précède l'intervention. Les trois informations tiennent dans la
   même carte, jamais séparées. */
.tarifs { margin: var(--e-6) 0; }
.tarifs > h2 { margin-bottom: .6rem; }

.tarifs-grille {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  list-style: none; margin: var(--e-5) 0 0; padding: 0;
}
.tarifs-grille > li {
  margin: 0; display: grid; gap: .35rem; align-content: start;
  padding: var(--e-5);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--color-primary-dark);
  box-shadow: var(--ombre-sm);
}
.tarif-nom { font-weight: 700; color: var(--texte-fort); }
.tarif-prix { font-size: .95rem; color: var(--texte-doux); }
.tarif-prix strong {
  font-family: var(--police-titre);
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--color-primary-deep);
  display: block; line-height: 1.2;
}
.tarif-detail { font-size: .9rem; color: var(--texte-doux); }

.tarifs-base {
  list-style: none; margin: var(--e-5) 0 0; padding: 0;
  border: 1px solid var(--bordure);
  background: var(--color-primary-soft);
}
.tarifs-base li {
  margin: 0; display: flex; flex-wrap: wrap; gap: .4rem var(--e-4);
  justify-content: space-between; align-items: baseline;
  padding: .8rem var(--e-5);
  font-size: .96rem;
}
.tarifs-base li + li { border-top: 1px solid var(--bordure); }
.tarifs-base strong {
  font-family: var(--police-titre); font-weight: 800;
  color: var(--color-primary-deep); white-space: nowrap;
}
.tarifs-mention {
  margin-top: var(--e-4);
  font-size: .85rem; color: var(--texte-doux);
}
.tarifs-absents .btn { margin-right: .5rem; margin-top: .5rem; }

/* Ligne de prix posée sur une page de prestation. */
.prix-depuis {
  display: grid; gap: .15rem;
  margin: var(--e-5) 0;
  padding: var(--e-4) var(--e-5);
  background: var(--color-primary-soft);
  border: 1px solid var(--bleu-200);
  border-left: 4px solid var(--color-primary-dark);
}
.prix-intitule { font-weight: 700; color: var(--texte-fort); }
.prix-montant { font-size: .95rem; color: var(--texte-doux); }
.prix-montant strong {
  font-family: var(--police-titre);
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--color-primary-deep);
}
.prix-note { font-size: .88rem; color: var(--texte-doux); }

/* == 10. FAQ et tableaux ================================================== */

.faq { display: grid; gap: .7rem; max-width: 62rem; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.faq details:hover { border-color: var(--bleu-200); }
.faq details[open] { border-color: var(--bleu-200); box-shadow: var(--ombre-sm); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: 1.05rem var(--e-5);
  font-family: var(--police-titre);
  font-size: 1.02rem; font-weight: 700; color: var(--texte-fort);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 0;
  background: var(--bleu-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / .85rem no-repeat;
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--bleu-700); }
.faq details > :not(summary) {
  padding: 0 var(--e-5) 1.2rem;
  font-size: .99rem;
}
.faq details > p:first-of-type { margin-top: -.15rem; }

.tableau-wrap {
  overflow-x: auto;
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  margin: var(--e-5) 0;
  background: var(--surface);
}
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: .8rem var(--e-4); text-align: left; border-bottom: 1px solid var(--bordure); }
thead th {
  background: var(--fond-doux);
  font-family: var(--police-titre);
  font-size: .84rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--texte-fort);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--fond-doux); }
.oui { color: var(--vert); font-weight: 700; }
.non { color: var(--rouge); font-weight: 700; }
.ok  { color: var(--vert); font-weight: 700; }

.comparatif td:first-child { font-weight: 600; color: var(--texte-fort); }

/* == 11. Formulaires ====================================================== */

.formulaire {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  box-shadow: var(--ombre-md);
}
.champs {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.champ { display: grid; gap: .38rem; }
.champ-large { grid-column: 1 / -1; }
.champ label {
  font-size: .9rem; font-weight: 650; color: var(--texte-fort);
}
.requis { color: var(--color-primary-deep); font-weight: 700; }
.aide { font-size: .82rem; color: var(--texte-doux); }

.champ input, .champ select, .champ textarea {
  font-family: var(--police);
  font-size: 1rem;
  color: var(--texte-fort);
  background: var(--fond);
  border: 1.5px solid var(--bordure-forte);
  border-radius: var(--r-sm);
  padding: .72rem .9rem;
  width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.champ textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--bleu-300); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--bleu-500);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, .16);
}
.champ input[type="file"] { padding: .55rem .7rem; background: var(--fond-doux); }

/* Cases et boutons radio : le contrôle natif fait 13 px, ce qui est
   inatteignable au pouce. C'est le LABEL qui devient la cible — 44 px de haut,
   toute la largeur — et le contrôle lui-même est agrandi. */
.champ-radio { display: grid; gap: .35rem; }
.champ-radio label,
.champ-case {
  display: flex; align-items: flex-start; gap: .65rem;
  min-height: 2.75rem; padding: .55rem .75rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  font-size: .95rem; font-weight: 500; color: var(--texte);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.champ-radio label:hover,
.champ-case:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.champ-radio input[type="radio"],
.champ-case input[type="checkbox"] {
  width: 1.2rem; height: 1.2rem; flex: none; margin: .15rem 0 0;
  accent-color: var(--color-primary-deep);
}
.champ-radio label:has(input:checked),
.champ-case:has(input:checked) {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-light);
}
.champ-radio label:focus-within,
.champ-case:focus-within { outline: 3px solid var(--color-primary); outline-offset: 2px; }
@media (min-width: 560px) {
  .champ-radio { grid-template-columns: 1fr 1fr; }
}
.champ-case { font-size: .9rem; line-height: 1.55; margin: 0; }
.champ-case label { cursor: pointer; }
.champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 1.05rem;
  padding-right: 2.6rem;
}

.formulaire-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4);
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--bordure);
}
.formulaire-note { font-size: .84rem; color: var(--texte-doux); margin: 0; }

.pot-de-miel {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.message-etat {
  border-radius: var(--r-sm);
  padding: var(--e-4) var(--e-5);
  margin-bottom: var(--e-5);
  font-size: .97rem;
  border: 1px solid var(--bordure);
  background: var(--fond-doux);
}
.message-etat.succes { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.message-etat.erreur { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }

/* == 12. Article et blog ================================================== */

.article {
  max-width: var(--largeur-etroite);
  font-size: 1.08rem;
  line-height: 1.75;
}
.article > h1 { margin-bottom: .35em; }
.article > h2 {
  margin-top: 2.1em; font-size: clamp(1.35rem, 1.15rem + .9vw, 1.75rem);
  scroll-margin-top: 6rem;
}
.article > h3 { margin-top: 1.7em; }
.article > p > a { font-weight: 500; }
.article ul, .article ol { margin-bottom: 1.3em; }
.article li { margin-bottom: .55em; }
.article > figure { margin: var(--e-6) 0; }
.article > figure img { border-radius: var(--r-lg); box-shadow: var(--ombre-sm); width: 100%; }
.article > figure figcaption {
  font-size: .86rem; color: var(--texte-doux);
  margin-top: .6rem; text-align: center;
}
.article blockquote {
  margin: var(--e-6) 0;
  padding: .2rem 0 .2rem var(--e-5);
  border-left: 3px solid var(--bleu-400);
  font-size: 1.12rem; color: var(--texte-fort);
  font-style: italic;
}

.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .88rem; color: var(--texte-doux);
  margin-bottom: var(--e-6);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid var(--bordure);
}

/* Image d'introduction d'article. */
.article-visuel {
  margin: 0 0 var(--e-6);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--ombre-md);
  background: var(--bleu-50);
}
.article-visuel img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.article-visuel figcaption {
  padding: .75rem var(--e-5);
  font-size: .88rem; color: var(--texte-doux);
  background: var(--fond-doux); border-top: 1px solid var(--bordure);
}
/* Fond OPAQUE, et non translucide : la légende est adjacente à la
   photographie, et un fond semi-transparent laisserait sa lisibilité dépendre
   de ce qui se trouve derrière — donc de l'image. */
.bandeau-urgence .article-visuel figcaption {
  background: #06405f; color: #d7edfa;
  border-top-color: rgba(255,255,255,.2);
}

/* Sommaire d'article. */
.sommaire {
  background: var(--fond-doux);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  margin-bottom: var(--e-6);
}
.sommaire h2 {
  font-size: .8rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texte-doux);
  font-family: var(--police); margin-bottom: .7rem;
}
.sommaire ol { margin: 0; padding-left: 1.15rem; font-size: .96rem; }
.sommaire li { margin-bottom: .35em; }

/* Pagination du sommaire du blog.
   Une séquence de pages est une liste ordonnée : le balisage le dit, et la
   page courante est un <span aria-current>, pas un lien vers soi-même. Les
   cibles font 44 px de côté au minimum, taille de doigt. */
.pagination {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--e-3);
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: 1px solid var(--bordure);
}
.pagination ol {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  list-style: none; margin: 0; padding: 0;
}
.pagination li { margin: 0; }
/* Le cadre ne s'applique qu'aux ÉLÉMENTS DE PAGINATION eux-mêmes — les
   <span> de libellé et de flèche qu'ils contiennent ne doivent pas hériter
   d'une bordure, faute de quoi « ← Précédent » s'affiche en deux boîtes. */
.pagination > a,
.pagination > span,
.pagination li > a,
.pagination li > span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem;
  padding: 0 .85rem;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--texte-fort);
  font-weight: 600; font-size: .98rem;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pagination > a:hover, .pagination > a:focus-visible,
.pagination li > a:hover, .pagination li > a:focus-visible {
  background: var(--bleu-50);
  border-color: var(--bleu-700);
  color: var(--bleu-900);
}
.pagination [aria-current="page"] {
  background: var(--bleu-700);
  border-color: var(--bleu-700);
  color: var(--blanc);
}
.pagination-bord { font-weight: 500; gap: .45rem; }
.pagination-bord .pagination-fleche { font-size: 1.05rem; line-height: 1; }
/* Les deux <span> intérieurs sont du texte, pas des boutons. */
.pagination .pagination-fleche,
.pagination .pagination-libelle {
  display: inline; min-width: 0; min-height: 0;
  padding: 0; border: 0; background: none; color: inherit; font-weight: inherit;
}
.pagination-inactif {
  color: var(--texte-doux);
  border-color: var(--bordure);
  background: transparent;
}

@media (max-width: 560px) {
  .pagination { gap: var(--e-2); }
  /* Sous 560 px, seules les flèches restent visibles : trois lignes de
     pagination valent moins qu'une ligne lisible. Le libellé n'est pas
     supprimé mais masqué visuellement — il reste le nom accessible du lien,
     là où un display:none le retirerait à la synthèse vocale. */
  .pagination-bord { padding: 0 .7rem; }
  .pagination-bord .pagination-libelle {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
  }
}

/* == 13. Pied de page ===================================================== */

.site-footer {
  background: var(--nuit);
  /* Un filet dégradé sépare le pied de page du contenu sans ajouter de bloc :
     c'est le seul rappel de l'identité en bas de page. */
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--color-primary), var(--bleu-700)) 1;
  color: #94a3b8;
  font-size: .94rem;
  padding-top: var(--e-9);
  margin-top: 0;
}
.site-footer a { color: #cbd5e1; text-decoration: none; }
.site-footer a:hover { color: var(--bleu-300); text-decoration: underline; }
.site-footer h2 {
  font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; font-family: var(--police);
  margin-bottom: var(--e-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .25rem; }
/* Cible tactile de 24 px sur les liens du pied de page : ce sont des listes
   denses, et c'est là qu'un pouce rate sa cible (WCAG 2.5.8). */
.site-footer li a {
  display: inline-flex; align-items: center;
  min-height: 1.6rem; padding-block: .12rem;
}

.footer-grid {
  display: grid; gap: var(--e-6) var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-bottom: var(--e-8);
}
.footer-brand { grid-column: span 1; }
@media (min-width: 900px) { .footer-brand { grid-column: span 2; max-width: 30rem; } }
.footer-logo {
  display: block;
  height: 3rem; width: auto;
  margin-bottom: var(--e-4);
}
.footer-brand > strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.2rem; font-weight: 800; color: #fff;
  margin-bottom: .4rem;
}
.footer-brand p { color: #94a3b8; }
.footer-horaires {
  font-size: .86rem; color: #94a3b8;
  margin-top: var(--e-4); padding-top: var(--e-4);
  border-top: 1px solid rgba(255,255,255,.1);
}

.footer-tel {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: var(--e-4) 0 0;
  font-family: var(--police-titre);
  font-size: 1.22rem; font-weight: 800; color: #fff !important;
  text-decoration: none !important;
}
.footer-tel .icone {
  width: 2.4rem; height: 2.4rem; flex: none;
  display: grid; place-items: center; border-radius: 0;
  background: var(--color-accent); color: #06283d;
}
.footer-tel .icone svg { width: 1.15rem; height: 1.15rem; }
.footer-tel:hover .icone { background: var(--color-primary); }

/* Les six départements, sur une ligne : c'est la promesse territoriale du
   site, et elle doit rester lisible jusqu'au bas de la dernière page. */
.footer-departements {
  padding-bottom: var(--e-6);
}
.footer-departements-titre {
  font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; margin-bottom: var(--e-4);
}
.footer-departements ul {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
}
.footer-departements li { margin: 0; }
.footer-departements a {
  display: flex; align-items: center; gap: .6rem;
  min-height: 2.75rem; padding: .5rem .85rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  color: #e2e8f0 !important; text-decoration: none !important;
  font-weight: 600; font-size: .92rem;
  transition: background .18s ease, border-color .18s ease;
}
.footer-departements a:hover {
  background: rgba(56, 189, 248, .12);
  border-color: rgba(56, 189, 248, .45);
}
.footer-departements .numero {
  font-family: var(--police-titre);
  font-size: .82rem; font-weight: 800; letter-spacing: .02em;
  color: #06283d; background: var(--color-primary);
  border-radius: var(--r-xs);
  padding: .12rem .38rem;
  flex: none;
}

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: var(--e-6);
  font-size: .85rem; color: #7c8da3;
}
.footer-legal p { margin-bottom: .5rem; }
.footer-liens-legaux {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  list-style: none; margin: 0 0 var(--e-4); padding: 0;
}
.footer-liens-legaux li { margin: 0; }
.copyright { margin-bottom: 0; }

/* Barre d'action fixe sur mobile. */
.barre-mobile {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: none;
  gap: .5rem;
  padding: .5rem .65rem calc(.5rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--bordure);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, .1);
}
.barre-mobile a {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .78rem .6rem;
  border-radius: var(--r-sm);
  font-family: var(--police);
  font-size: .92rem; font-weight: 700;
  text-decoration: none;
  min-height: 2.9rem;
  white-space: nowrap;
}
.barre-mobile a svg { width: 1.15rem; height: 1.15rem; flex: none; }
.barre-mobile-appel {
  background: linear-gradient(180deg, var(--color-primary-deep), #075985);
  color: #fff; flex: 1.45 !important;
}
.barre-mobile-appel:hover { color: #fff; }
.barre-mobile-devis {
  background: var(--surface); color: var(--texte-fort);
  border: 1.5px solid var(--bordure-forte);
}
@media (max-width: 767px) {
  .barre-mobile { display: flex; }
  body { padding-bottom: 4.3rem; }
}
@media (prefers-color-scheme: dark) {
  .barre-mobile { background: rgba(11, 18, 32, .93); }
}

/* --- Confiance : les arguments vérifiables -------------------------------- */
.confiance {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.confiance > li {
  display: flex; gap: var(--e-4); margin: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--ombre-xs);
  transition: transform .2s cubic-bezier(.2,.7,.4,1), box-shadow .2s ease, border-color .2s ease;
}
.confiance > li:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-md);
  border-color: var(--bleu-200);
}
.confiance-icone {
  width: 2.9rem; height: 2.9rem; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--bleu-100), var(--bleu-50));
  border: 1px solid var(--bleu-200);
  color: var(--bleu-700);
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.confiance-icone svg { width: 1.4rem; height: 1.4rem; }
.confiance > li:hover .confiance-icone {
  background: linear-gradient(145deg, var(--bleu-500), var(--bleu-700));
  border-color: transparent; color: #fff;
  transform: rotate(-4deg) scale(1.06);
}
.confiance strong {
  display: block; font-family: var(--police-titre);
  font-size: 1.05rem; margin-bottom: .3rem;
}
.confiance span { display: block; font-size: .95rem; color: var(--texte); }

/* --- Schémas explicatifs -------------------------------------------------- */
/* --- Carte des zones d'intervention --------------------------------------- */
.carte-bloc {
  display: grid; gap: var(--e-5);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .carte-bloc { grid-template-columns: 1.25fr .75fr; gap: var(--e-6); }
}
.carte-zone { display: flex; }
.carte-toile {
  position: relative;
  flex: 1;
  /* 400 px sur téléphone — assez pour situer les six départements sans manger
     tout l'écran. Au-delà de 900 px, la carte s'aligne sur la hauteur de la
     colonne voisine plutôt que d'imposer la sienne. */
  min-height: 400px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bleu-50);
  border: 1px solid var(--bleu-200);
}
.carte-attente {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: .5rem; padding: var(--e-6);
  text-align: center;
  background:
    radial-gradient(28rem 18rem at 50% 30%, var(--bleu-100), transparent 70%),
    var(--fond-bleu);
}
.carte-attente svg { width: 3rem; height: 3rem; color: var(--bleu-600); opacity: .8; }
.carte-attente p { margin: 0; }
.carte-attente .carte-note {
  font-size: .87rem; color: var(--texte-doux);
  max-width: 34ch; margin-bottom: .6rem;
}
.carte-toile[data-actif="true"] { border-color: var(--bordure); }
/* Leaflet impose ses propres polices et couleurs de contrôle ; on les
   raccorde au reste du site plutôt que de laisser deux chartes cohabiter. */
.carte-toile .leaflet-container { font-family: var(--police); background: var(--bleu-50); }
.carte-toile .leaflet-popup-content { font-size: .93rem; line-height: 1.5; }
.carte-toile .leaflet-popup-content a { color: var(--bleu-700); font-weight: 600; }
.carte-toile .leaflet-bar a {
  color: var(--texte-fort); border-bottom-color: var(--bordure);
}
.carte-toile .leaflet-control-attribution {
  font-size: .72rem; background: rgba(255,255,255,.86);
}
/* La feuille de Leaflet arrondit ses bulles, ses boutons de zoom et sa ligne
   d'attribution. On ne modifie pas le fichier du fournisseur : on le corrige
   ici, là où la décision se lit. */
.carte-toile .leaflet-popup-content-wrapper,
.carte-toile .leaflet-popup-tip,
.carte-toile .leaflet-bar,
.carte-toile .leaflet-bar a,
.carte-toile .leaflet-bar a:first-child,
.carte-toile .leaflet-bar a:last-child,
.carte-toile .leaflet-control-attribution,
.carte-toile .leaflet-control-zoom-in,
.carte-toile .leaflet-control-zoom-out { border-radius: 0; }
.carte-toile .carte-etiquette {
  background: var(--surface); color: var(--texte-fort);
  border: 1px solid var(--bleu-200); border-radius: var(--r-full);
  box-shadow: var(--ombre-sm);
  padding: .18rem .6rem;
  font-family: var(--police); font-size: .78rem; font-weight: 650;
  white-space: nowrap;
}
.carte-toile .carte-etiquette::before { display: none; }

.carte-legende {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--ombre-xs);
}
.carte-legende h3 { font-size: 1.05rem; margin-bottom: var(--e-4); }
.carte-liste { list-style: none; margin: 0 0 var(--e-4); padding: 0; }
.carte-liste li { margin: 0; }
.carte-liste a {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem 0;
  border-top: 1px solid var(--bordure);
  color: var(--texte-fort); text-decoration: none;
  font-weight: 600; font-size: .96rem;
}
.carte-liste li:first-child a { border-top: 0; }
.carte-liste a:hover { color: var(--bleu-700); }
.carte-liste a:hover .numero { transform: scale(1.06); }
.carte-liste .numero {
  min-width: 2.1rem; height: 2.1rem; font-size: .82rem;
  transition: transform .18s cubic-bezier(.2,.7,.4,1);
}
.carte-liste small {
  display: block; font-weight: 400; font-size: .8rem;
  color: var(--texte-doux); margin-left: auto; text-align: right;
}
/* Sous 560 px, aligner les villes à droite du nom force le département à se
   couper en deux lignes. Elles passent donc dessous, sur toute la largeur. */
@media (max-width: 559px) {
  .carte-liste a { flex-wrap: wrap; }
  .carte-liste small {
    flex-basis: 100%; margin-left: 2.8rem; text-align: left;
    margin-top: -.15rem;
  }
}
.carte-precision {
  font-size: .87rem; color: var(--texte-doux);
  padding-top: var(--e-4); border-top: 1px solid var(--bordure);
}
.carte-legende .btn { margin-top: auto; }

/* --- Avis clients --------------------------------------------------------- */
/* La section n'est publiée que si src/avis.tsv contient de vrais avis ; ces
   règles ne s'appliquent donc à rien tant que le fichier est vide. */
.avis-carte blockquote {
  margin: 0 0 var(--e-4); padding: 0; border: 0;
  font-style: normal; font-size: 1rem; color: var(--texte);
}
.avis-carte blockquote p { margin: 0; }
.avis-carte blockquote::before { content: "« "; color: var(--bleu-300); }
.avis-carte blockquote::after  { content: " »"; color: var(--bleu-300); }
.avis-note { margin: 0 0 .8rem; letter-spacing: .1em; line-height: 1; }
.etoile { color: var(--bordure-forte); font-size: 1.05rem; }
.etoile.pleine { color: #f59e0b; }
.avis-auteur {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem;
  margin: auto 0 0; padding-top: var(--e-4);
  border-top: 1px solid var(--bordure);
  font-size: .88rem; color: var(--texte-doux);
}
.avis-auteur strong { color: var(--texte-fort); }
.avis-auteur time { margin-left: auto; }

/* Bandeau de consentement — injecté par site.js, jamais présent sans mesure
   d'audience configurée. Il se place au-dessus de la barre d'action mobile. */
.cookie-bandeau {
  position: fixed; inset: auto .75rem .75rem; z-index: 130;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-lg);
  padding: var(--e-5);
  max-width: 34rem; margin-inline: auto;
}
.cookie-inner { display: grid; gap: var(--e-4); }
.cookie-bandeau p { font-size: .9rem; margin: 0; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie-actions .btn { flex: 1; box-shadow: none; }
@media (max-width: 767px) { .cookie-bandeau { bottom: 4.6rem; } }

/* == 14. Animations ======================================================= */

/* Apparition au défilement.

   L'état masqué n'est appliqué QUE si <html> porte la classe « anim », posée
   par un script en tête de page. Autrement dit : sans JavaScript, script en
   échec, ou mouvement réduit demandé, aucune règle ne masque quoi que ce
   soit. Une animation ne doit jamais être la condition d'affichage d'un
   contenu — c'est ainsi qu'on se retrouve avec une page blanche. */
.anim [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.4,1);
  will-change: opacity, transform;
}
.anim [data-reveal].est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .anim [data-reveal] { opacity: 1; transform: none; }
  .btn:hover, .carte:hover, .departement-carte:hover { transform: none; }
}

/* == 15. Impression ======================================================= */

@media print {
  .site-header, .site-footer, .barre-mobile, .topbar, .nav, .voile,
  .cta-final, .bandeau-urgence, .skip-link { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; padding-bottom: 0; }
  .wrap { width: 100%; }
  a[href^="/"]::after { content: " (deboucheur-richard.fr" attr(href) ")"; font-size: 9pt; }
  .carte, .encadre, .reponse-rapide { break-inside: avoid; box-shadow: none; }
  details { open: true; }
  details > * { display: block !important; }
}