/* =========================================================
   Fontes — Barlow (SIL Open Font License 1.1), hébergées
   localement : aucune requête vers un service tiers, donc
   aucune donnée visiteur transmise (conformité RGPD).
   Sous-ensemble latin uniquement, suffisant pour le français.
   ========================================================= */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-800.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
}

/* =========================================================
   ETS-BZH — Design System
   Bleu Marseille · Angles stricts (border-radius: 0)
   ========================================================= */

:root {
  /* Couleurs principales */
  --bleu: #0a5f8c;          /* bleu Marseille, éclairci depuis #005580 */
  --bleu-clair: #0e86be;    /* intermédiaire : sûr sous du texte blanc */
  --bleu-ciel: #33a9dc;     /* bleu ciel marseillais — accents et dégradés */
  --bleu-hover: #084d72;
  --bleu-pale: #e7f4fb;
  --bleu-pale-2: #f4fafd;
  --bleu-voile: #eaf5fb;    /* fond de section, plus lumineux que le gris */

  /* Textes — bleu nuit éclairci */
  --nuit: #16303f;
  --nuit-2: #1f4157;
  --gris: #4d6272;
  --gris-clair: #627585;   /* assombri : 4,6:1 sur blanc, conforme AA */

  /* Fonds & bordures */
  --blanc: #ffffff;
  --fond: #eef6fb;          /* bleuté plutôt que gris : la page respire */
  --bordure: #dcebf4;
  --bordure-forte: #bcd4e2;

  /* Famille chaude — elle réchauffe une charte autrement très bleue.
     --ambre-txt est la seule déclinaison posée sur du texte (6,1:1 sur blanc) ;
     les autres servent aux aplats, filets et tuiles. */
  --ivoire: #fff8ef;
  --ivoire-2: #fdf1e1;
  --ambre: #c2610a;
  --ambre-clair: #e8901f;
  --ambre-pale: #fdf0dc;
  --ambre-txt: #9a4d06;

  /* Accents */
  --urgence: #d43f1a;
  --urgence-hover: #b3330f;
  --succes: #1f7a4d;
  --or: #f5a623;

  /* Layout */
  --max: 1200px;
  --header-h: 84px;
  --ombre: 0 2px 14px rgba(12, 74, 112, .10);
  --ombre-forte: 0 10px 30px rgba(12, 74, 112, .17);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: "Barlow", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Confort de lecture : corps à 19 px et interlignage généreux. Une part
     importante des visiteurs lit sans lunettes de près, souvent sur téléphone. */
  font-size: 19px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--nuit-2);
  background: var(--blanc);
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--bleu-hover); text-decoration: underline; }
.prose a:not(.btn), .faq__body a, .consent a, .form-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
ul { padding-left: 0; list-style: none; margin: 0; }
p { margin: 0 0 1em; }

h1, h2, h3, h4 {
  color: var(--nuit);
  margin: 0 0 .5em;
}
/* Les deux premiers niveaux passent en Barlow Condensed : plus de présence,
   un rythme de signalétique de chantier, et des titres longs qui tiennent
   sur moins de lignes. */
h1, h2 {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.005em;
}
h3, h4 { font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.85rem, 3.7vw, 2.75rem); }
h3 { font-size: 1.2rem; }

:focus-visible { outline: 4px solid var(--ambre-clair); outline-offset: 3px; }

/* ---------- Utilitaires ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.section { padding: 76px 0; }
/* Dégradés verticaux très courts : la section s'ouvre et se referme sur du
   blanc, ce qui évite l'effet « bloc » et allège l'ensemble de la page. */
.section--pale {
  background: linear-gradient(180deg, #ffffff 0%, var(--bleu-pale-2) 22%,
              var(--bleu-pale-2) 78%, #ffffff 100%);
}
.section--fond {
  background: linear-gradient(180deg, #ffffff 0%, var(--ivoire) 18%,
              var(--ivoire) 82%, #ffffff 100%);
}
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bleu);
  background: var(--bleu-pale);
  padding: 7px 14px 7px 12px;
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 14px; height: 3px;
  background: var(--bleu-ciel);
  flex: none;
}
.hero .eyebrow {
  color: var(--ambre-txt);
  background: var(--ambre-pale);
  border: 1px solid #f0d7ae;
}
.hero .eyebrow::before { background: var(--ambre-clair); }
.section-head { max-width: 800px; margin-bottom: 46px; }
.section-head h2 { position: relative; padding-bottom: 18px; }
.section-head h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 72px; height: 6px;
  background: linear-gradient(90deg, var(--bleu) 0%, var(--bleu) 50%,
              var(--ambre-clair) 50%, var(--ambre-clair) 100%);
}
.section-head.center h2::after { left: 50%; transform: translateX(-50%); }
.section-head.center { margin-left: auto; margin-right: auto; }
.lead { font-size: 1.18rem; color: var(--gris); }

/* ---------- Boutons ---------- */
.btn {
  letter-spacing: .005em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 17px 30px;
  font-size: 1.06rem;
  font-weight: 800;
  font-family: inherit;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.btn--primary:hover { background: var(--bleu-hover); border-color: var(--bleu-hover); color: #fff; }

.btn--urgence { background: var(--urgence); color: #fff; border-color: var(--urgence); }
.btn--urgence:hover { background: var(--urgence-hover); border-color: var(--urgence-hover); color: #fff; }

.btn--ghost { background: transparent; color: var(--bleu); border-color: var(--bleu); }
.btn--ghost:hover { background: var(--bleu); color: #fff; }

.btn--blanc { background: #fff; color: var(--bleu); border-color: #fff; }
.btn--blanc:hover { background: var(--bleu-pale); color: var(--bleu-hover); border-color: var(--bleu-pale); }

.btn--outline-blanc { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--outline-blanc:hover { background: #fff; color: var(--bleu); border-color: #fff; }

/* Sur le bandeau devenu clair, les deux variantes « blanches » s'inversent :
   le bouton d'appel redevient un aplat bleu plein. */
.hero .btn--blanc {
  background: var(--bleu); color: #fff; border-color: var(--bleu);
  box-shadow: 0 6px 0 var(--bleu-hover);
}
.hero .btn--blanc:hover { background: var(--bleu-hover); color: #fff; border-color: var(--bleu-hover); }
.hero .btn--outline-blanc { background: #fff; color: var(--bleu); border-color: var(--bleu); }
.hero .btn--outline-blanc:hover { background: var(--bleu); color: #fff; border-color: var(--bleu); }

.btn--bloc { width: 100%; }
.btn--xl { min-height: 66px; padding: 20px 34px; font-size: 1.2rem; }

/* ---------- Barre d'urgence ---------- */
.topbar {
  background: linear-gradient(90deg, #0c6893 0%, #0f79ac 55%, #117fb4 100%);
  color: #ffffff;
  font-size: .86rem;
  padding: 10px 0;
}
.topbar__inner { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; justify-content: space-between; }
.topbar__list { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.topbar__list li { display: flex; align-items: center; gap: 7px; }
.topbar a { color: #fff; font-weight: 700; }
.dot { width: 8px; height: 8px; background: var(--succes); display: inline-block; flex: none; }
.dot--live { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------- Header sticky ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfe 100%);
  border-bottom: 3px solid var(--bleu);
  box-shadow: 0 3px 16px rgba(12, 74, 112, .10);
}
.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo:hover { text-decoration: none; }
/* Le mot-symbole porte le nom : plus d'emblème carré ni de « ETS-BZH »
   répété à côté. Hauteur fixe, largeur libre — c'est le rapport du fichier
   qui décide. */
.logo__mark { width: auto; height: 34px; flex: none; }
/* Plus de baseline dans l'en-tête. Le mot-symbole fait 208 px de large à lui
   seul : avec la baseline en « nowrap » à côté, le verrou passait à 450 px et
   venait chevaucher la navigation. Elle n'apparaissait de toute façon qu'au-
   delà de 1540 px, et la page dit déjà les quatre métiers dès son titre. */

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  padding: 10px 13px;
  white-space: nowrap;
  font-size: .95rem;
  font-weight: 700;
  color: var(--nuit-2);
  border-bottom: 3px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--bleu); border-bottom-color: var(--bleu); text-decoration: none; }

.header__cta { display: flex; align-items: center; gap: 12px; }
.tel-btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--bleu); color: #fff;
  min-height: 56px; padding: 14px 24px; font-weight: 800; font-size: 1.08rem;
  border: 2px solid var(--bleu); white-space: nowrap;
  transition: background-color .15s ease;
}
.tel-btn:hover { background: var(--bleu-hover); border-color: var(--bleu-hover); color: #fff; text-decoration: none; }
.tel-btn svg { flex: none; }

.burger {
  display: none; width: 48px; height: 46px;
  background: #fff; border: 2px solid var(--bleu); cursor: pointer;
  padding: 0; align-items: center; justify-content: center;
}
.burger span { display: block; width: 22px; height: 2px; background: var(--bleu); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--bleu);
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }

/* ---------- Dropdown zones ---------- */
.has-sub { position: relative; }
.has-sub > a { display: inline-flex; align-items: center; gap: 7px; }
.has-sub > a::after {
  content: ""; flex: none;
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.sub {
  position: absolute; top: 100%; left: 0; min-width: 270px;
  background: #fff; border: 2px solid var(--bleu); box-shadow: var(--ombre-forte);
  padding: 8px; display: none; z-index: 120;
}
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
.sub a { display: block; padding: 10px 12px; border-bottom: none; font-weight: 600; font-size: .92rem; }
.sub a:hover { background: var(--bleu-pale); color: var(--bleu); border-bottom-color: transparent; }
.sub strong {
  display: block; padding: 8px 12px 6px; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris-clair); border-bottom: 1px solid var(--bordure); margin-bottom: 4px;
}

/* ---------- Hero ---------- */
.hero {
  /* Photo d'équipe en fond, fortement voilée : elle reste perceptible sans
     jamais concurrencer le texte. Le dégradé est la couche du dessus. */
  background-color: var(--ivoire);
  background-image:
    linear-gradient(104deg,
      rgba(255,246,234,.96) 0%, rgba(255,247,237,.93) 34%,
      rgba(238,247,253,.84) 64%, rgba(206,234,249,.74) 100%),
    url("../img/fond-equipe.jpg");
  /* WebP (-41 %) pour les navigateurs qui le gèrent ; les autres gardent
     la déclaration JPEG ci-dessus. */
  background-image:
    linear-gradient(104deg,
      rgba(255,246,234,.96) 0%, rgba(255,247,237,.93) 34%,
      rgba(238,247,253,.84) 64%, rgba(206,234,249,.74) 100%),
    image-set(url("../img/fond-equipe.webp") type("image/webp"),
              url("../img/fond-equipe.jpg") type("image/jpeg"));
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  color: var(--nuit-2);
  padding: 62px 0 70px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e6dccd;
}
/* arrière-plan : réseau de plomberie */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../img/motif-plomberie.svg");
  background-size: 420px 420px;
  background-repeat: repeat;
  background-position: center;
  opacity: .07;
  filter: invert(1);
  pointer-events: none;
}
/* voile latéral : il éclaircit encore la zone du texte */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(255,252,247,.82) 0%, rgba(255,252,247,.60) 44%,
              rgba(255,252,247,0) 80%);
  pointer-events: none;
}

/* bandeau d'en-tête compact (pages légales, 404) */
.hero--compact { padding: 46px 0 52px; }
/* Pas de formulaire pour couvrir la droite du bandeau : le voile doit rester
   assez dense sur toute la largeur pour que le titre tienne le contraste. */
.hero--compact {
  background-image:
    linear-gradient(112deg,
      rgba(255,250,244,.95) 0%, rgba(250,248,244,.93) 45%,
      rgba(230,244,251,.90) 100%),
    url("../img/fond-equipe.jpg");
  background-image:
    linear-gradient(112deg,
      rgba(255,250,244,.95) 0%, rgba(250,248,244,.93) 45%,
      rgba(230,244,251,.90) 100%),
    image-set(url("../img/fond-equipe.webp") type("image/webp"),
              url("../img/fond-equipe.jpg") type("image/jpeg"));
}
.hero--compact .hero__sub { margin-bottom: 0; }

.hero--compact .hero__actions { margin-top: 26px; }
.hero > .container { position: relative; z-index: 1; }
/* Deux zones de texte à gauche, le formulaire à droite sur toute la hauteur :
   cette découpe ne se voit pas sur ordinateur, mais elle permet de glisser le
   formulaire entre les deux sur mobile. */
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas: "haut form" "bas form";
  column-gap: 54px; row-gap: 0;
  align-items: start;
}
.hero__haut { grid-area: haut; }
.hero__bas  { grid-area: bas; }
.hero__form { grid-area: form; }
.hero--compact .hero__grid { grid-template-columns: 1fr; grid-template-areas: "haut" "bas"; }
.hero h1 { color: var(--nuit); margin-bottom: 20px; }
.hero__sub { font-size: 1.26rem; color: var(--nuit-2); margin-bottom: 28px; max-width: 640px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: #ffffff; border: 2px solid var(--urgence);
  color: var(--urgence-hover);
  padding: 9px 17px; font-size: .86rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 22px;
  box-shadow: var(--ombre);
}
.hero__badge .dot { background: var(--urgence); }
.hero__points { display: grid; gap: 14px; margin: 0 0 30px; }
.hero__points li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.1rem; color: var(--nuit-2); }
.hero__points .tick {
  flex: none; width: 28px; height: 28px; background: var(--succes); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-top: 3px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__villes { margin-top: 26px; font-size: .96rem; color: var(--gris); }
.hero__villes strong { color: var(--nuit); }

/* ---------- Formulaire ---------- */
.form-card {
  background: #fff;
  border: 3px solid var(--bleu);
  box-shadow: 12px 12px 0 rgba(10, 95, 140, .22);
  color: var(--nuit-2);
}
.form-card__head {
  background: linear-gradient(115deg, var(--bleu) 0%, #0d7cad 100%);
  color: #fff; padding: 18px 24px;
}
.form-card__head h2, .form-card__head h3 { color: #fff; font-size: 1.34rem; margin: 0 0 4px; }
.form-card__head p { margin: 0; font-size: .95rem; color: #ffffff; }
.form-card__body { padding: 26px 24px 24px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--nuit); margin-bottom: 8px; }
.field .req { color: var(--urgence); }
/* Champs hauts et texte à 1,05 rem : la saisie au doigt ou à la souris ne doit
   pas demander de précision. */
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 56px;
  padding: 15px 16px;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--nuit);
  background: var(--blanc);
  border: 2px solid var(--bordure-forte);
  transition: border-color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23005580' d='M0 0h14L7 9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--bleu); outline: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--gris); margin: 6px 0 18px; }
.consent input { width: 24px; height: 24px; flex: none; margin-top: 2px; accent-color: var(--bleu); }

.form-atouts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 16px; margin: 14px 0 6px;
  font-size: .86rem; font-weight: 600; color: var(--gris);
}
.form-atouts li { display: flex; align-items: center; gap: 5px; }
.form-atouts svg { color: var(--bleu-ciel); flex: none; }

.form-note {
  font-size: .95rem; color: var(--nuit-2); text-align: center;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--bordure);
}
.form-note a { font-weight: 800; font-size: 1.08rem; }
.form-note__sur { display: inline-block; margin-top: 4px; font-size: .86rem; color: var(--gris); }
.form-note a, .hero__villes strong, .tel-btn, .cta__tel { white-space: nowrap; }
.form-msg { display: none; padding: 14px 16px; font-size: .92rem; font-weight: 700; margin-bottom: 16px; border-left: 5px solid; }
.form-msg--ok { display: block; background: #e7f5ee; border-color: var(--succes); color: #14603c; }
.form-msg--err { display: block; background: #fdeee9; border-color: var(--urgence); color: #8f2a0c; }
/* Un envoi qui échoue ne doit pas coûter la demande : le numéro repart en
   bouton cliquable à l'intérieur du message. */
.form-msg__tel {
  display: block; margin-top: 10px; padding: 13px 18px;
  background: var(--urgence); color: #fff !important;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; text-align: center;
}
.form-msg__tel:hover { background: var(--urgence-hover); text-decoration: none; }

/* ---------- Bandeau chiffres ---------- */
.stats {
  position: relative;
  /* Bleu ciel adouci, repris de --bleu-ciel : la bande respire au lieu de
     prolonger le bandeau sombre. Texte foncé, donc lisible sans effort. */
  background: linear-gradient(115deg, #dcf0fa 0%, #b9e1f4 55%, #a2d7f0 100%);
  color: var(--nuit);
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid #93cfeb;
}
.stats::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/motif-plomberie.svg") center / 300px 300px repeat;
  opacity: .1;
  filter: invert(1);
  pointer-events: none;
}
.stats__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 30px 22px; text-align: center; border-right: 1px solid rgba(10,48,63,.13); }
.stat:last-child { border-right: none; }
.stat__num { font-family: "Barlow Condensed", "Barlow", sans-serif; font-size: 2.7rem;
  font-weight: 700; color: #07496e; line-height: 1; margin-bottom: 6px; }
.stat__lbl { font-size: .82rem; color: var(--nuit); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

/* ---------- Grilles / cartes ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--bordure);
  border-top: 4px solid var(--bleu-ciel);
  padding: 30px 28px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover {
  border-top-color: var(--bleu);
  box-shadow: 0 14px 34px rgba(12, 74, 112, .16);
  transform: translateY(-5px);
}
.card--atout .card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; margin-bottom: 18px;
  background: var(--bleu-pale); color: var(--bleu);
  transition: background-color .18s ease, color .18s ease;
}
.card--atout:hover .card__ico { background: var(--bleu); color: #fff; }
.card--atout:nth-child(2n) .card__ico { background: var(--ambre-pale); color: var(--ambre-txt); }
.card--atout:nth-child(2n):hover .card__ico { background: var(--ambre); color: #fff; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--gris); font-size: 1.02rem; margin-bottom: 0; }
.card__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  background: var(--bleu); color: #fff;
  font-weight: 800; font-size: 1.05rem; margin-bottom: 16px;
}
.icon-box {
  width: 54px; height: 54px; background: var(--bleu-pale); color: var(--bleu);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex: none;
}
.icon-box svg { width: 28px; height: 28px; }

/* Carte service (accueil) */
.svc { display: flex; flex-direction: column; height: 100%; }
.svc__list { margin: 14px 0 20px; display: grid; gap: 8px; }
.svc__list li { font-size: 1.01rem; color: var(--gris); padding-left: 22px; position: relative; }
.svc__list li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; background: var(--bleu-ciel); }
.svc__foot { margin-top: auto; padding-top: 6px; }

/* Liste prestations landing */
.presta {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid var(--bordure); border-left: 5px solid var(--bleu);
  padding: 24px 26px;
  transition: border-left-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.presta:hover {
  box-shadow: 0 12px 30px rgba(12, 74, 112, .15);
  border-left-color: var(--bleu-ciel);
  transform: translateX(3px);
}
.presta__ico {
  flex: none; width: 44px; height: 44px;
  background: var(--bleu); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 1.3rem; font-weight: 700; line-height: 1;
  transition: background-color .18s ease;
}
.presta:hover .presta__ico { background: var(--bleu-hover); }
.presta:nth-child(2n) .presta__ico { background: var(--ambre-clair); color: var(--nuit); }
.presta:nth-child(2n):hover .presta__ico { background: var(--ambre); color: #fff; }
.presta:nth-child(2n) { border-left-color: var(--ambre-clair); }
.presta:nth-child(2n):hover { border-left-color: var(--ambre); }
.presta h3 { font-size: 1.04rem; margin-bottom: 6px; }
.presta p { font-size: 1rem; color: var(--gris); margin: 0; }

/* Puces simples */
.checks { display: grid; gap: 12px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.06rem; color: var(--nuit-2); }
.checks .tick {
  flex: none; width: 24px; height: 24px; background: var(--bleu); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.checks .tick--alerte { background: var(--urgence); }
.checks .tick--plein { position: relative; background: var(--bleu-pale); }
.checks .tick--plein::after {
  content: ""; position: absolute; inset: 8px; background: var(--bleu);
}

/* ---------- Emplacements photo ---------- */
.photo { margin: 0; }

.photo__cadre {
  position: relative;
  overflow: hidden;
  background: var(--bleu-pale);
  border: 2px solid var(--bordure);
}
.photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* cadre d'attente : visible tant que le fichier photo n'existe pas.
   Pour masquer complètement les emplacements vides en production,
   décommentez la règle « .photo--vide { display: none } » plus bas. */
.photo__attente {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  color: var(--bleu);
  background:
    linear-gradient(rgba(232,241,246,.88), rgba(232,241,246,.88)),
    url("../img/motif-plomberie.svg") center / 260px 260px repeat;
}
.photo--vide .photo__attente { display: flex; }
.photo--vide .photo__img { visibility: hidden; }
.photo--vide .photo__cadre { border-style: dashed; border-color: var(--bleu-ciel); }

.photo__aide {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.photo__nom {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .76rem;
  background: #fff;
  border: 1px solid var(--bordure-forte);
  padding: 4px 9px;
  color: var(--gris);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.photo__legende { padding: 14px 2px 0; }
.photo__titre {
  display: block;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 1.24rem; font-weight: 700; line-height: 1.15;
  color: var(--nuit); margin-bottom: 7px;
}
.photo__texte {
  display: block;
  font-size: 1rem; line-height: 1.6; color: var(--gris);
}

/* Décommentez pour masquer les emplacements non remplis :
.photo--vide { display: none; }
*/

/* ---------- Avis clients ---------- */
.avis {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--bordure); border-top: 5px solid var(--or);
  padding: 30px 28px; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.avis:hover { box-shadow: 0 14px 34px rgba(12,74,112,.15); transform: translateY(-4px); }
.avis::before {
  content: "\201C";
  position: absolute; top: -18px; right: 14px;
  font-family: Georgia, serif; font-size: 7rem; line-height: 1;
  color: var(--bleu-pale); pointer-events: none;
}
.avis > * { position: relative; }
.avis__stars { color: var(--or); display: flex; gap: 3px; margin-bottom: 14px; }
.avis__txt { font-size: 1.06rem; color: var(--nuit-2); font-style: italic; margin-bottom: 20px; }
.avis__auteur { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--bordure); }
.avis__ini { width: 42px; height: 42px; background: var(--bleu); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.avis__nom { font-weight: 800; font-size: .95rem; color: var(--nuit); }
.avis__ville { font-size: .82rem; color: var(--gris-clair); }

.note-globale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  background: #fff;
  border: 2px solid var(--bordure);
  border-top: 4px solid var(--bleu);
  padding: 18px 28px;
  margin-top: 34px;
  text-align: left;
  color: var(--nuit-2);
  box-shadow: var(--ombre);
}
a.note-globale:hover { border-color: var(--bleu); text-decoration: none; }
.avis-note__logo { height: 38px; width: auto; }
.avis-note__sep { width: 1px; height: 40px; background: var(--bordure); }
.avis-note__bloc { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.avis-note__chiffre { font-size: 1.05rem; color: var(--gris); line-height: 1; }
.avis-note__chiffre strong { font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 2.2rem; font-weight: 700; color: var(--nuit); }
.avis-note__etoiles { color: var(--or); display: flex; gap: 2px; }
.avis-note__txt { font-size: .87rem; color: var(--gris); line-height: 1.5; }

/* ---------- Bandeau CTA ---------- */
.cta {
  background: linear-gradient(125deg, var(--bleu) 0%, #0c72a4 58%, #0d7cad 100%);
  color: #fff;
  padding: 66px 0;
  position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; top: -70px; right: -70px;
  width: 300px; height: 300px; border: 40px solid rgba(255,255,255,.07);
}
.cta > .container { position: relative; z-index: 1; }
.cta__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.cta h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.cta p { color: #ffffff; font-size: 1.08rem; }
.cta__tel {
  display: inline-flex; align-items: center; gap: 14px;
  background: #fff; color: var(--bleu); padding: 20px 34px;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: .01em;
  border: 3px solid #fff; margin-top: 8px;
}
.cta__tel:hover { background: var(--bleu-hover); color: #fff; border-color: var(--bleu-hover); text-decoration: none; }
.cta__dispo { margin-top: 14px; font-size: .9rem; color: #ffffff; }

/* ---------- Zones / départements ---------- */
.dept-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dept {
  background: #fff; border: 2px solid var(--bordure); padding: 26px 24px;
  display: flex; flex-direction: column; transition: all .15s ease;
}
.dept:hover { border-color: var(--bleu); box-shadow: var(--ombre); transform: translateY(-3px); }
.dept__num {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 2.9rem; font-weight: 700; color: var(--bleu); line-height: 1; margin-bottom: 4px;
}
.dept__nom { font-size: 1.12rem; font-weight: 800; color: var(--nuit); margin-bottom: 10px; }
.dept__villes { font-size: .85rem; color: var(--gris-clair); margin-bottom: 18px; }
.dept__links { display: grid; gap: 8px; margin-top: auto; }
.dept__links a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 14px; background: var(--bleu-pale-2); border-left: 3px solid var(--bleu);
  font-size: .9rem; font-weight: 700; color: var(--nuit-2);
}
.dept__links a:hover { background: var(--bleu); color: #fff; text-decoration: none; }
.dept__links a::after {
  content: ""; flex: none;
  width: 8px; height: 8px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Maillage interne */
.liens-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 26px; }
.liens-grid a { font-size: .9rem; padding: 7px 0; display: block; border-bottom: 1px solid var(--bordure); color: var(--nuit-2); }
.liens-grid a:hover { color: var(--bleu); }

/* ---------- Process ---------- */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  position: relative;
}
/* le fil qui relie les étapes */
.steps::before {
  content: "";
  position: absolute; top: 27px; left: 12%; right: 12%;
  height: 3px; background: #ecdcc6;
}
.step { position: relative; padding: 0 12px; text-align: center; }
.step__pastille {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 20px;
  background: var(--bleu); color: #fff;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 1.75rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 8px var(--ivoire);
}
.step:nth-child(2) .step__pastille { background: #0b6e9f; }
.step:nth-child(3) .step__pastille { background: #0d7cad; }
.step:nth-child(4) .step__pastille { background: var(--ambre-clair); color: var(--nuit); }
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { font-size: 1rem; color: var(--gris); margin: 0; }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; margin: 0 auto; }
.faq details { background: #fff; border: 2px solid var(--bordure); margin-bottom: 12px; }
.faq details[open] { border-color: var(--bleu); }
.faq summary {
  padding: 22px 58px 22px 24px; font-weight: 800; font-size: 1.1rem; color: var(--nuit);
  cursor: pointer; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.9rem; font-weight: 400; color: var(--ambre); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { background: var(--bleu-pale-2); }
.faq__body { padding: 0 24px 22px; color: var(--gris); font-size: 1.02rem; border-top: 1px solid var(--bordure); padding-top: 16px; margin-top: 0; }

/* ---------- Grille des communes ---------- */
.villes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 26px; }

/* ---------- Tableau tarifs ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tarifs { width: 100%; border-collapse: collapse; background: #fff; border: 2px solid var(--bordure); font-size: .96rem; }
.tarifs caption { caption-side: bottom; padding-top: 14px; font-size: .84rem; color: var(--gris-clair); text-align: left; }
.tarifs th, .tarifs td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--bordure); }
.tarifs thead th { background: var(--bleu); color: #fff; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.tarifs tbody tr:last-child td { border-bottom: none; }
.tarifs tbody tr:nth-child(even) { background: var(--bleu-pale-2); }
.tarifs td:last-child { font-weight: 800; color: var(--bleu); white-space: nowrap; }
.tarifs tbody tr { transition: background-color .15s ease; }
.tarifs tbody tr:hover { background: var(--bleu-pale); }

/* ---------- Encadré info ---------- */
.encadre { background: var(--bleu-pale); border-left: 5px solid var(--bleu); padding: 24px 26px; }
.encadre h3 { font-size: 1.08rem; margin-bottom: 8px; }
.encadre p:last-child { margin-bottom: 0; }

/* ---------- Articles d'urgence ---------- */
/* Les pastilles carrées de couleur ont été retirées : les numéros d'étape et
   les puces étaient des aplats rouges et bleus qui donnaient un air de notice
   d'avertissement. La hiérarchie repose désormais sur la typographie, des
   filets et un seul aplat — le bouton d'appel, qui doit rester le point fort. */
.urgence {
  background: #fff;
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--urgence);
  box-shadow: 0 10px 30px rgba(12, 74, 112, .08);
  padding: 30px 32px 28px;
  margin: 0 0 32px;
}
.urgence__titre {
  display: flex; align-items: baseline; gap: 14px;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 1.85rem; font-weight: 700; line-height: 1.05;
  color: var(--nuit); margin: 0 0 4px;
}
.urgence__sur {
  display: block; margin: 0 0 22px;
  font-size: .82rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--urgence-hover);
}
.urgence__liste { margin: 0 0 26px; padding: 0; list-style: none; counter-reset: etape; }
.urgence__liste li {
  display: grid; grid-template-columns: 48px 1fr; align-items: baseline;
  gap: 0 14px; padding: 15px 0;
  border-top: 1px solid var(--bordure);
  font-size: 1.06rem; color: var(--nuit-2);
}
.urgence__liste li:first-child { border-top: none; padding-top: 4px; }
/* Le numéro est un chiffre, pas une pastille : grande graisse condensée,
   aligné sur la première ligne du texte. */
.urgence__num {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 1.9rem; font-weight: 700; line-height: 1;
  color: var(--urgence); text-align: right; letter-spacing: -.02em;
}
.urgence__appel { margin: 0; }

/* Avertissement de sécurité : un filet ambre et un fond très léger, pas de
   bloc qui concurrence l'encadré d'action. */
.danger {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--ivoire);
  border-left: 5px solid var(--ambre-clair);
  padding: 22px 26px;
  margin: 0 0 34px;
}
.danger svg { flex: none; color: var(--ambre-txt); margin-top: 3px; }
.danger p { margin: 0; color: var(--nuit-2); font-size: 1.02rem; }
.danger strong { color: var(--ambre-txt); }

/* ---- Ligne de contexte sous le titre ---- */
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin: 0 0 30px; padding-bottom: 20px;
  border-bottom: 1px solid var(--bordure);
  font-size: .92rem; color: var(--gris);
}
.article-meta__item { display: inline-flex; align-items: center; gap: 8px; }
.article-meta svg { color: var(--bleu); flex: none; }
.article-meta strong { color: var(--nuit-2); font-weight: 700; }

/* ---- Sommaire ---- */
.sommaire {
  background: var(--bleu-pale-2);
  border: 1px solid var(--bordure);
  border-top: 4px solid var(--bleu);
  padding: 24px 28px;
  margin: 0 0 34px;
}
.sommaire__titre {
  display: block; margin: 0 0 14px;
  font-size: .82rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--bleu);
}
.sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: som; display: grid; gap: 2px; }
.sommaire li { counter-increment: som; }
.sommaire a {
  display: block; padding: 9px 0 9px 36px; position: relative;
  color: var(--nuit-2); font-weight: 600; font-size: 1.02rem;
  border-bottom: 1px solid var(--bordure);
}
.sommaire li:last-child a { border-bottom: none; }
.sommaire a::before {
  content: counter(som, decimal-leading-zero);
  position: absolute; left: 0; top: 9px;
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-weight: 700; font-size: 1.05rem; color: var(--bleu);
}
.sommaire a:hover { color: var(--bleu); }
.sommaire a:hover::before { color: var(--ambre); }

/* ---- Tableau ville par ville ---- */
/* Un visiteur cherche « plombier urgence Lannion », pas « plombier
   Côtes-d'Armor » : la page doit nommer sa commune et dire quelque chose de
   vrai sur elle. Deux colonnes, des filets, aucune pastille. */
.villes-urg {
  background: #fff;
  border: 1px solid var(--bordure);
  border-top: 4px solid var(--bleu);
  padding: 28px 30px 24px;
  margin: 36px 0 0;
}
.prose--article .villes-urg h2 { font-size: 1.5rem; margin: 0 0 12px; }
.villes-urg > p { color: var(--gris); }
.villes-urg__liste { margin: 22px 0; padding: 0; list-style: none; display: grid; }
.villes-urg__liste li {
  display: grid; grid-template-columns: 190px 1fr; gap: 4px 20px;
  padding: 15px 0; border-top: 1px solid var(--bordure);
}
.villes-urg__liste li:first-child { border-top: none; padding-top: 0; }
/* La puce carrée de .prose ul li a une spécificité supérieure : il faut la
   neutraliser depuis .prose--article, sinon elle se glisse devant chaque ville. */
.prose--article .villes-urg__liste li { padding-left: 0; }
.prose--article .villes-urg__liste li::before { content: none; }
.villes-urg__nom {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 1.3rem; font-weight: 700; line-height: 1.15; color: var(--nuit);
}
.villes-urg__note { color: var(--gris); font-size: 1rem; line-height: 1.6; }
.villes-urg__pied {
  margin: 0; padding-top: 18px; border-top: 2px solid var(--bordure);
  font-size: .98rem; color: var(--gris);
}

/* ---- Bloc d'intervention locale ---- */
.zone-locale {
  background: #fff;
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--bleu);
  padding: 26px 30px;
  margin: 36px 0 0;
}
.prose--article .zone-locale h2 { font-size: 1.5rem; margin: 0 0 12px; }
.zone-locale p { color: var(--gris); margin-bottom: 1em; }
.zone-locale p:last-child { margin-bottom: 0; }
.zone-locale__liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.zone-locale__liens a {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 11px 18px; background: var(--bleu-pale);
  border-left: 3px solid var(--bleu);
  color: var(--nuit-2); font-weight: 700; font-size: .98rem;
}
.zone-locale__liens a:hover { background: var(--bleu); color: #fff; text-decoration: none; }

.prose--article { max-width: 860px; }
.prose--article h2 { margin-top: 1.6em; scroll-margin-top: calc(var(--header-h) + 20px); }
.prose--article .urgence__titre { margin-top: 0; }
/* Le soulignement systématique des liens de contenu vaut pour le texte courant,
   pas pour le sommaire ni pour les pastilles de zone : six liens soulignés
   d'affilée font un bloc illisible. */
.prose--article .sommaire a,
.prose--article .zone-locale__liens a { text-decoration: none; }
.prose--article .sommaire a:hover {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
}
/* Listes d'article : une coche fine, sans aplat, et un filet de séparation.
   La puce carrée de .prose est neutralisée pour ne pas doubler le marqueur. */
.prose--article .checks { margin: .4em 0 1.6em; display: grid; gap: 0; }
.prose--article .checks li {
  display: grid; grid-template-columns: 26px 1fr; align-items: baseline;
  gap: 0 12px; padding: 13px 0;
  border-top: 1px solid var(--bordure);
  font-size: 1.04rem; color: var(--nuit-2);
}
.prose--article .checks li:first-child { border-top: none; }
.prose--article .checks li::before { content: none; }
.prose--article .checks li { padding-left: 0; }
.prose--article .checks .tick {
  width: auto; height: auto; background: none; margin: 0;
  color: var(--succes); display: block;
}
.prose--article .checks .tick--alerte { background: none; color: var(--urgence); }
/* La coche est dessinée à 13 px dans le HTML : sans son fond, elle a besoin
   d'un peu plus de présence pour rester lisible. */
.prose--article .checks .tick svg { width: 17px; height: 17px; }

.hero--article .hero__sub { max-width: 760px; margin-bottom: 26px; }

/* Vignettes d'articles */
.art-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.art-grille--2 { grid-template-columns: repeat(2, 1fr); }
.art-carte {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--bordure); border-top: 5px solid var(--bleu);
  padding: 22px 22px 20px; color: var(--nuit-2);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.art-carte:hover {
  border-top-color: var(--ambre); box-shadow: 0 14px 34px rgba(12, 74, 112, .16);
  transform: translateY(-4px); text-decoration: none; color: var(--nuit-2);
}
.art-carte__dept {
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ambre-txt);
}
.art-carte__titre {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 1.35rem; font-weight: 700; line-height: 1.12; color: var(--nuit);
}
.art-carte__txt { font-size: .98rem; color: var(--gris); line-height: 1.55; }
.art-carte__lire {
  margin-top: auto; padding-top: 12px;
  font-weight: 800; font-size: .93rem; color: var(--bleu);
}
.art-carte:hover .art-carte__lire { text-decoration: underline; }

.conseils-dept { margin-bottom: 44px; }
.conseils-dept:last-child { margin-bottom: 0; }
.conseils-dept h2 {
  padding-bottom: 12px; margin-bottom: 22px;
  border-bottom: 3px solid var(--bordure-forte);
}

/* ---------- Rubrique conseils : filtres et pagination ---------- */
/* Sous-catégories par département. Ce sont des liens, pas un script : la page
   filtrée a sa propre URL, elle est partageable et indexable. */
.filtres {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 26px; padding-bottom: 24px;
  border-bottom: 2px solid var(--bordure);
}
.filtre {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 12px 18px;
  background: #fff; border: 2px solid var(--bordure-forte);
  color: var(--nuit-2); font-weight: 700; font-size: 1rem;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.filtre:hover { border-color: var(--bleu); color: var(--bleu); text-decoration: none; }
.filtre.est-actif {
  background: var(--bleu); border-color: var(--bleu); color: #fff;
}
.filtre.est-actif:hover { color: #fff; }
.filtre__nb {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 24px; padding: 0 6px;
  background: var(--bleu-pale); color: var(--bleu);
  font-size: .82rem; font-weight: 800;
}
/* Un voile blanc sur le bleu ne donnait que 4,24:1 sous le chiffre : le fond
   passe au bleu foncé, qui tient 8:1 tout en restant lisible comme une pastille. */
.filtre.est-actif .filtre__nb { background: var(--bleu-hover); color: #fff; }

.compteur {
  font-size: .95rem; color: var(--gris); margin: 0 0 24px;
}

/* Numéros de page : cibles larges, état courant lisible sans la couleur seule
   (il est aussi porté par aria-current et par le cadre plein). */
.pagination {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 40px; padding-top: 28px;
  border-top: 2px solid var(--bordure);
}
.page-num, .page-lien {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 52px; min-height: 52px; padding: 12px 16px;
  background: #fff; border: 2px solid var(--bordure-forte);
  color: var(--nuit-2); font-weight: 800; font-size: 1.05rem;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.page-num:hover, .page-lien:hover {
  border-color: var(--bleu); color: var(--bleu); text-decoration: none;
}
.page-num.est-actif {
  background: var(--bleu); border-color: var(--bleu); color: #fff; cursor: default;
}
.page-lien--prec { margin-right: auto; }
.page-lien--suiv { margin-left: auto; }

/* ---------- Contenu SEO ---------- */
.prose { max-width: 820px; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.5em; font-size: 1.12rem; }
.prose p, .prose li { color: var(--gris); }
.prose ul { display: grid; gap: 9px; margin: 0 0 1.2em; }
.prose ul li { padding-left: 20px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px; background: var(--bleu-ciel); }
.prose strong { color: var(--nuit-2); }

/* ---------- Fil d'ariane ---------- */
.ariane { background: var(--fond); border-bottom: 1px solid var(--bordure); padding: 13px 0; font-size: .85rem; }
.ariane ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; color: var(--gris-clair); }
.ariane li::after { content: "/"; margin-left: 8px; color: var(--bordure-forte); }
.ariane li:last-child::after { content: ""; }
.ariane a { color: var(--gris); }

/* ---------- Carte des zones ---------- */
.zone-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
/* sans cela, le SVG impose sa largeur intrinsèque et déborde sur petit écran */
.zone-grid > * { min-width: 0; }
.zone-titre { margin-bottom: 18px; }

.carte { background: #fff; border: 1px solid var(--bordure); padding: 22px; }
.carte__svg { width: 100%; height: auto; display: block; }

.carte__zone path {
  fill: #cfe7f6;
  stroke: #fff;
  stroke-width: 3;
  transition: fill .18s ease;
}
.carte__zone text {
  fill: var(--bleu);
  text-anchor: middle;
  pointer-events: none;
  transition: fill .18s ease;
}
.carte__num {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 48px; font-weight: 700;
}
.carte__nom { font-size: 21px; font-weight: 600; }
/* liseré pour que les libellés restent lisibles sur toutes les teintes */
.carte__zone text { paint-order: stroke fill; stroke: rgba(255,255,255,.5); stroke-width: 3; }
.carte__zone.est-courant text, .carte__zone:hover text { stroke: rgba(10,48,63,.35); }

.carte__zone:hover path, .carte__zone:focus-visible path { fill: var(--bleu-ciel); }
.carte__zone:hover text, .carte__zone:focus-visible text { fill: #fff; }
.carte__zone.est-courant path { fill: var(--bleu); }
.carte__zone.est-courant text { fill: #fff; }
.carte__zone:focus-visible { outline: none; }
.carte__zone:focus-visible path { stroke: var(--nuit); stroke-width: 5; }

.carte__legende {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bordure);
}
.carte__legende a {
  display: block; padding: 7px 10px; font-size: .92rem; font-weight: 600;
  color: var(--nuit-2); background: var(--bleu-pale-2);
  border-left: 3px solid var(--bordure-forte);
}
.carte__legende a:hover { background: var(--bleu-pale); border-left-color: var(--bleu-ciel); text-decoration: none; }
.carte__legende a strong { color: var(--bleu); margin-right: 6px; }
.carte__legende .est-courant a { border-left-color: var(--bleu); background: var(--bleu-pale); }

.dept-grid--compact { grid-template-columns: 1fr 1fr; gap: 16px; }
.dept-grid--compact .dept { min-width: 0; }
.dept-grid--compact .dept { padding: 20px 18px; }
.dept-grid--compact .dept__num { font-size: 2.2rem; }

/* ---------- Bandeau de logos (avant le pied de page) ---------- */
/* Fond clair obligatoire : les logos comportent du texte noir. */
.confiance { background: #fff; border-top: 3px solid var(--bleu); padding: 30px 0; }

.confiance__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px clamp(20px, 5vw, 64px);
}

/* Hauteur propre à chaque logo (--h), mise à l'échelle par --scale.
   --dy aligne les centres optiques : un logo dont l'encre se concentre en haut
   est descendu, et inversement.
   La hauteur de repli (48px) s'applique si les variables ne sont pas lues. */
.confiance__logo {
  --scale: 1;
  height: 48px;
  height: calc(var(--h, 48px) * var(--scale));
  width: auto;
  max-width: 44vw;
  object-fit: contain;
  transform: translateY(calc(var(--h, 48px) * var(--scale) * var(--dy, 0)));
}

/* ---------- Footer ---------- */
/* Pied clair : le bloc sombre pesait un tiers de la page d'accueil. Le bleu
   reste présent par les filets, le nom de marque et le bouton d'appel. */
.footer {
  background: linear-gradient(180deg, #f4fafd 0%, var(--bleu-pale) 100%);
  color: var(--gris);
  border-top: 3px solid var(--bleu);
  padding: 58px 0 0;
  font-size: .93rem;
}
.footer h3 {
  color: var(--nuit); font-size: .82rem; letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--bleu); display: inline-block;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 42px;
  padding: 44px 0 46px;
  border-top: 1px solid var(--bordure-forte);
}

/* ---- Bloc de marque centré ---- */
.footer__marque { text-align: center; padding-bottom: 42px; }

.footer__nom {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--bleu);
  margin: 0 0 6px;
}

.footer__accroche {
  max-width: 620px;
  margin: 14px auto 22px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gris);
}

.footer__marque .footer__tel { margin: 0 0 20px; font-size: 1.16rem; padding: 15px 26px; }

.footer__contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 32px;
  font-size: .93rem;
}
.footer__contacts li { display: flex; align-items: center; gap: 9px; }
.footer a { color: var(--nuit-2); }
.footer a:hover { color: var(--bleu); }
.footer ul { display: grid; gap: 9px; }
.footer__tel {
  display: inline-flex; align-items: center; gap: 10px; background: var(--bleu);
  color: #fff !important; padding: 13px 20px; font-weight: 800; font-size: 1.06rem; margin: 8px 0 14px;
  border: 2px solid var(--bleu);
}
.footer__tel:hover { background: var(--bleu-hover); border-color: var(--bleu-hover); text-decoration: none; }
.footer__bas {
  border-top: 1px solid var(--bordure-forte); padding: 22px 0; font-size: .84rem;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: center;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---------- Barre d'action collante (ordinateur) ---------- */
.barre-fixe {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
  background: rgba(255, 255, 255, .97);
  border-top: 3px solid var(--bleu);
  padding: 12px 0;
  box-shadow: 0 -8px 28px rgba(12, 74, 112, .20);
  animation: monte .25s ease;
}
.barre-fixe[hidden] { display: none; }
@keyframes monte { from { transform: translateY(100%); } to { transform: none; } }
.barre-fixe__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.barre-fixe__txt {
  display: flex; align-items: center; gap: 10px;
  color: var(--nuit); font-weight: 700; font-size: .98rem;
}
.barre-fixe__actions { display: flex; gap: 12px; }
.barre-fixe .btn { padding: 12px 22px; font-size: 1rem; }
.barre-fixe .btn--ghost { color: var(--bleu); border-color: var(--bleu); }
.barre-fixe .btn--ghost:hover { background: var(--bleu); color: #fff; border-color: var(--bleu); }

/* ---------- Barre mobile fixe ---------- */
.mobile-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  border-top: 2px solid var(--bleu-hover);
}
.mobile-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 8px; min-height: 62px; font-weight: 800; font-size: 1.05rem; text-decoration: none;
}
.mobile-bar__tel { background: var(--bleu); color: #fff; }
.mobile-bar__devis { background: var(--nuit-2); color: #fff; }

/* ---------- Responsive ---------- */
/* L'en-tête libère de la place par étapes pour que le bouton d'appel
   reste toujours entièrement visible. */
@media (max-width: 1279px) {
  .nav a { padding: 10px 9px; font-size: .9rem; }
}

@media (max-width: 1149px) {
  .tel-btn__long { display: none; }
  .nav a { padding: 10px 7px; font-size: .87rem; }
}

@media (max-width: 1080px) {
  /* Sur une colonne, le formulaire passe devant les arguments et les boutons :
     il est le premier geste possible, il doit arriver le premier. */
  .art-grille { grid-template-columns: repeat(2, 1fr); }
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "haut" "form" "bas";
    row-gap: 34px;
  }
  .dept-grid, .grid--4, .liens-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .zone-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid rgba(10,48,63,.13); }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .villes-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
  .steps::before { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .cta__grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 900px) {
  .confiance__logo { --scale: .88; }
  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: #fff; border-bottom: 3px solid var(--bleu); box-shadow: var(--ombre-forte);
    padding: 10px; gap: 0; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open a { padding: 14px 12px; border-bottom: 1px solid var(--bordure); }
  .nav.is-open .sub { position: static; display: block; border: none; border-left: 3px solid var(--bleu-pale); box-shadow: none; padding: 0 0 8px 10px; }
  .burger { display: flex; }
  /* Le numéro reste écrit dans l'en-tête : le masquer ne laissait qu'une
     icône, et le visiteur devait deviner. */
  .header__cta .tel-btn { padding: 13px 14px; font-size: 1rem; gap: 8px; }
  .logo__mark { height: 28px; }
}

@media (max-width: 430px) {
  /* Sous cette largeur, le numéro ne tient plus à côté du nom écrit : c'est
     l'emblème qui cède la place, pas le numéro. */
  .header__cta .tel-btn .tel-btn__txt { display: none; }
  .header__cta .tel-btn { padding: 12px 14px; }
  .header__inner { gap: 10px; }
  .burger { width: 44px; height: 44px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; padding-bottom: 58px; }
  .section { padding: 52px 0; }
  .grid--2, .grid--3, .grid--4, .dept-grid, .liens-grid, .steps, .field-row { grid-template-columns: 1fr; }
  .art-grille, .art-grille--2 { grid-template-columns: 1fr; }
  .filtre { width: 100%; justify-content: space-between; }
  .pagination { gap: 8px; justify-content: center; }
  .page-lien--prec, .page-lien--suiv { margin: 0; width: 100%; }
  .urgence { padding: 22px 20px 20px; }
  .urgence__liste li { grid-template-columns: 34px 1fr; gap: 0 10px; }
  .urgence__num { font-size: 1.55rem; }
  .danger { padding: 18px 18px; gap: 12px; }
  .sommaire { padding: 20px 20px; }
  .zone-locale { padding: 22px 20px; }
  .zone-locale__liens a { width: 100%; }
  .villes-urg { padding: 22px 20px 20px; }
  .villes-urg__liste li { grid-template-columns: 1fr; gap: 2px; }
  .dept-grid--compact { grid-template-columns: 1fr 1fr; }
  .carte { padding: 14px; }
}

/* sous 420 px, les noms de département ne tiennent plus à deux colonnes */
@media (max-width: 420px) {
  .dept-grid--compact { grid-template-columns: 1fr; }
  .carte__legende { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .step { display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; text-align: left; }
  .step__pastille { margin-bottom: 0; grid-row: span 2; box-shadow: none; }
  .barre-fixe { display: none; }
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid rgba(10,48,63,.13); }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .confiance { padding: 22px 0; }
  .confiance__logo { --scale: .74; }
  .footer__accroche { font-size: .95rem; margin: 22px auto 20px; }
  .footer__contacts { flex-direction: column; align-items: center; gap: 10px; }
  .mobile-bar { display: flex; }
  /* barre d'infos compacte : on garde l'urgence et l'e-mail */
  .topbar { font-size: .8rem; }
  .topbar__inner { justify-content: center; text-align: center; gap: 4px 16px; }
  .topbar__list { justify-content: center; }
  /* Sur mobile, la barre du haut ne garde que deux informations : la
     disponibilité et le numéro. L'adresse e-mail et la liste des départements
     prenaient la place de la seule chose qu'on veut voir en urgence. */
  .topbar__list:first-child li:not(:first-child),
  .topbar li.topbar__zone, .topbar li.topbar__mail { display: none; }
  .topbar { font-size: .95rem; }
  .topbar__tel a { font-size: 1.05rem; letter-spacing: .01em; }
  .hero {
    padding: 44px 0 52px;
    background-image:
      linear-gradient(160deg,
        rgba(255,250,244,.94) 0%, rgba(252,249,245,.91) 55%,
        rgba(228,243,251,.86) 100%),
      url("../img/fond-equipe-mobile.jpg");
    background-image:
      linear-gradient(160deg,
        rgba(255,250,244,.94) 0%, rgba(252,249,245,.91) 55%,
        rgba(228,243,251,.86) 100%),
      image-set(url("../img/fond-equipe-mobile.webp") type("image/webp"),
                url("../img/fond-equipe-mobile.jpg") type("image/jpeg"));
  }
  .hero::before { background-size: 300px 300px; }
  .hero::after { background: linear-gradient(180deg, rgba(255,252,247,.72) 0%, rgba(255,252,247,.42) 100%); }
  .hero--compact { padding: 34px 0 38px; }
  .form-card { box-shadow: 6px 6px 0 rgba(10, 95, 140, .22); }
  .footer { padding-bottom: 58px; }
  .note-globale { flex-direction: column; text-align: center; padding: 18px 22px; gap: 12px; }
  .avis-note__sep { display: none; }
  .btn--xl { padding: 18px 26px; font-size: 1.05rem; width: 100%; }
  .cta__tel { width: 100%; justify-content: center; padding: 18px 20px; }
  .tarifs { min-width: 420px; }
  .villes-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .header, .topbar, .mobile-bar, .form-card, .burger { display: none !important; }
}