:root {
  --dark: #00323b;
  --dark2: #002830;
  --card: #184c54;
  --green: #4dd9e8;
  --green2: #2ec9da;
  --text: #f0f6f7;
  --muted: #8ab8bf;
  --muted-on-card: #9dc6cc;
  --border: rgba(255,255,255,0.09);
  --wa: #4dd9e8;
  --wa-dark: #2ec9da;
  --accent: #e8f0f2;
  --accent2: #4dd9e8;
  --price: #fb923c;          /* orange des prix, version fond sombre */
  --fr-blue: #002395;
  --fr-white: #ffffff;
  --fr-red: #ED2939;
  --font-head: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; }

/* Effet de bord mesure le 08/08 : tant que cette declaration est active,
   Chrome n'execute pas le saut d'ancre a l'arrivee sur une URL du type
   index.html#contact — le visiteur restait sur le hero. Les sauts d'ancre
   sont donc repris a la main par js/app.js, en instantane, arrivee comme
   clic. La declaration reste ici parce qu'elle sert encore aux defilements
   programmatiques qui ne precisent pas leur behavior (app.js, navigation
   au clavier dans les resultats de recherche). */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── SCROLL PROGRESS BAR ─── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--green2));
  z-index: 1100;
  transition: width 0.08s linear;
  box-shadow: 0 0 10px rgba(77,217,232,0.5);
  pointer-events: none;
}

/* ─── STICKY BAR ─── */
.sticky-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(0,50,59,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
}

.sticky-ctas { display: flex; gap: 10px; align-items: center; }
.btn-wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wa); color: var(--dark);
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.9rem;
  padding: 10px 20px; border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(77,217,232,0.3);
  white-space: nowrap;
}
.btn-wa:hover {
  background: var(--wa-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(77,217,232,0.45);
}
.btn-wa svg { width: 18px; height: 18px; fill: var(--dark); flex-shrink: 0; }
.btn-tel {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  padding: 10px 18px; border-radius: 50px;
  border: 1px solid rgba(77,217,232,0.25);
  background: rgba(77,217,232,0.04);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
  white-space: nowrap;
}
.btn-tel svg {
  width: 16px; height: 16px;
  fill: var(--green);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.btn-tel:hover {
  background: rgba(77,217,232,0.12);
  border-color: var(--green);
  color: var(--accent);
  transform: translateY(-1px);
}
.btn-tel:hover svg { transform: rotate(-8deg); }
.btn-tel-num { font-feature-settings: "tnum"; }

/* ─── HERO ─── */
/* Bandeau d'accueil.
   L'image est un panorama 2,5:1 qui montre la meme piece degradee a gauche
   et restauree a droite. La hauteur du hero est donc bornee : a 100vh sur un
   grand ecran, le cadrage "cover" amputait les deux extremites, c'est-a-dire
   precisement ce que la photo raconte. */
.hero {
  min-height: clamp(600px, 86vh, 880px);
  padding: 116px 24px 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(0,40,48,0.88) 0%,
      rgba(0,50,59,0.64) 45%,
      rgba(0,50,59,0.88) 82%,
      var(--dark) 100%),
    url('../photos/hero-banner.jpg') center center / cover no-repeat;
  background:
    linear-gradient(180deg,
      rgba(0,40,48,0.88) 0%,
      rgba(0,50,59,0.64) 45%,
      rgba(0,50,59,0.88) 82%,
      var(--dark) 100%),
    image-set(url('../photos/hero-banner.webp') type('image/webp'), url('../photos/hero-banner.jpg') type('image/jpeg')) center center / cover no-repeat;
}

/* En portrait, un panorama 2,5:1 en "cover" ne laisserait voir qu'un cinquieme
   de sa largeur : la bascule avant/apres disparaitrait. On sert donc une
   tranche centrale recadree, prise a cheval sur la separation. */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(77,217,232,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 120px; height: 3px;
  background: linear-gradient(90deg,
    var(--fr-blue) 0%, var(--fr-blue) 33.33%,
    var(--fr-white) 33.33%, var(--fr-white) 66.66%,
    var(--fr-red) 66.66%, var(--fr-red) 100%);
  border-radius: 2px;
  opacity: 0;
  animation: fr-flag-reveal 1.6s cubic-bezier(0.25, 1, 0.5, 1) 0.4s forwards;
  box-shadow: 0 0 0 rgba(77,217,232,0);
}
@keyframes fr-flag-reveal {
  0%   { width: 0;     opacity: 0;   box-shadow: 0 0 0 rgba(77,217,232,0); }
  25%  { width: 40px;  opacity: 0.9; }
  60%  { width: 120px; opacity: 0.9; box-shadow: 0 0 14px rgba(77,217,232,0.35); }
  100% { width: 120px; opacity: 0.7; box-shadow: 0 0 0 rgba(77,217,232,0); }
}
.urgence-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
  color: var(--text);
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0;
  padding: 8px 17px 8px 14px; border-radius: 50px;
  margin-bottom: 28px;
  white-space: nowrap;
}
.dot-live {
  position: relative;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(77,217,232,0.9);
  flex-shrink: 0;
}
.dot-live::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: var(--green);
  animation: dot-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes dot-ping {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}
.urgence-badge.veille .dot-live { background: #f5b13d; box-shadow: 0 0 9px rgba(245,177,61,0.8); }
.urgence-badge.veille .dot-live::after { background: #f5b13d; }
.ub-etat {
  font-weight: 700; color: #ffffff;
  text-transform: uppercase; letter-spacing: 0.7px;
  font-size: 0.76rem;
}
.ub-detail { color: var(--muted); }
.ub-heure { color: var(--green); font-variant-numeric: tabular-nums; font-weight: 600; }
.ub-heure::before, .ub-detail::before {
  content: ""; display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,0.40);
  vertical-align: middle; margin-right: 9px;
}
@media (max-width: 600px) {
  .urgence-badge { font-size: 0.76rem; padding: 7px 14px 7px 12px; gap: 7px; }
  .ub-etat { font-size: 0.71rem; letter-spacing: 0.5px; }
  .ub-detail { display: none; }
}
@media (max-width: 360px) {
  .ub-heure { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dot-live::after { animation: none; opacity: 0; }
}

.hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.25;
  letter-spacing: 0;
  max-width: 780px;
  margin: 0 auto 40px;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent2);
  text-shadow: 0 0 30px rgba(95,212,215,0.25);
}
.hero .subtitle {
  font-size: clamp(0.98rem, 1.8vw, 1.1rem);
  color: var(--muted);
  max-width: 580px;
  margin: 0 auto 40px;
  line-height: 1.75;
  text-wrap: pretty;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-bottom: 48px;
}
.btn-wa-hero {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--wa);
  color: var(--dark); font-family: var(--font-body);
  font-weight: 700; font-size: 1.1rem;
  padding: 16px 32px; border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(77,217,232,0.4);
  transition: all 0.2s;
  animation: wa-pulse 2.5s infinite;
}
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 8px 32px rgba(77,217,232,0.4); }
  50% { box-shadow: 0 8px 48px rgba(77,217,232,0.65); }
}
.btn-wa-hero:hover { background: var(--wa-dark); transform: translateY(-3px); }
.btn-wa-hero svg { width: 22px; height: 22px; fill: var(--dark); }
/* Meme raison que .btn-devis-hero : fond propre pour ne pas dependre des
   pixels de la photo a cet endroit du hero. */
.btn-tel-hero {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(0,40,48,0.55);
  color: var(--text); font-weight: 600; font-size: 1.05rem;
  text-decoration: none;
  padding: 16px 28px; border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,0.15);
  transition: all 0.2s;
}
.btn-tel-hero:hover { background: rgba(0,40,48,0.72); border-color: var(--accent); color: var(--accent); }

/* Canal prioritaire = WhatsApp plein, cyan, pleine largeur mobile.
   Sous 600px on empile les trois CTA en pleine largeur pour un rendu
   propre, sans toucher aux fonds/couleurs : la hierarchie (WA en aplat
   sature, devis en contour, telephone en lien discret) reste intacte. */
@media (max-width: 600px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .btn-wa-hero,
  .btn-devis-hero,
  .btn-tel-hero { width: 100%; justify-content: center; }
}

/* La photo de fond etant plus visible, on protege la lisibilite du texte */
.hero h1,
.hero .subtitle,
.hero .trust-row { text-shadow: 0 2px 16px rgba(0,22,27,0.8); }

.hero-rating {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 auto 28px;
  padding: 7px 17px; border-radius: 50px;
  background: rgba(0,40,48,0.55);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  color: var(--muted); font-size: 0.85rem;
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.hero-rating:hover { border-color: var(--green); color: var(--text); }
.hero-rating .hr-stars { color: #ffd166; letter-spacing: 1.5px; font-size: 0.9rem; }
.hero-rating strong { color: var(--text); font-weight: 700; }

/* Liens vers la fiche Google (consultation + depot d'avis) sous les temoignages */
.avis-google-wrap {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.avis-google {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 50px;
  border: 1px solid var(--border);
  color: var(--muted); font-size: 0.85rem; font-weight: 500;
  text-decoration: none; text-align: left;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.avis-google:hover { border-color: var(--green); color: var(--text); background: rgba(77,217,232,0.06); }
.avis-google:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.avis-google svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

.trust-row {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: center;
  color: var(--muted); font-size: 0.88rem;
}
.trust-row span { display: flex; align-items: center; gap: 6px; }
.trust-row .tick { color: var(--accent); font-size: 1rem; }

/* ─── BANDEAU DEFILANT ─── */
/* Remplace la barre de stats du 23/08/2026. L'ancienne faisait 233 px de
   haut : mesuree a l'ouverture du site en 1920x945, elle debordait de
   101 px sous le pli et ses deux pastilles n'etaient jamais vues sans
   defiler. Le bandeau tient sur UNE ligne, donc il entre entierement dans
   le premier ecran, et fait passer les six informations en boucle.

   La piste contient QUATRE series identiques et se translate de -25%, soit
   exactement une serie : au moment ou l'animation reboucle, la serie
   suivante occupe la place de la premiere et la jointure est invisible.
   C'est ce qui evite le saut visible d'un defilement naif. Le detail du
   choix de quatre series plutot que deux est plus bas, sur @keyframes.
   (Ce commentaire annoncait deux series et -50% : faux depuis l'origine,
   corrige le 26/08/2026.) */
.ticker {
  background: var(--dark2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* Le masque est porte par la fenetre, jamais par .ticker : pose sur le
   bloc exterieur il ferait aussi disparaitre le fond aux extremites, et
   la bande semblerait trouee. */
.ticker-fenetre {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}

.ticker-piste {
  display: flex;
  width: max-content;
  animation: tk-defile var(--tk-duree, 26s) linear infinite;
  will-change: transform;
}

/* Lecture interrompue au survol et des qu'un element de la bande prend le
   focus : sans ca, une information lue a moitie s'echappe et il faut
   attendre un tour complet. */
.ticker:hover .ticker-piste,
.ticker:focus-within .ticker-piste { animation-play-state: paused; }

/* Quatre series, translation de -25% : soit exactement UNE serie.
   Deux series seulement ne suffisent pas - une serie fait 1623 px et un
   ecran large en fait 1920 : au moment ou la boucle repasse, il resterait
   moins d une largeur d ecran de contenu et un trou apparaitrait a droite.
   Avec quatre copies, il reste toujours trois series derriere, soit plus
   de 4800 px : le vide est impossible sur tout ecran raisonnable. */
@keyframes tk-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

.ticker-serie {
  display: flex;
  align-items: center;
  flex: none;
}

.tk-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  height: 58px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1;
}

.tk-item b {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.06rem;
  color: var(--accent);
  letter-spacing: 0;
}

.tk-sep {
  color: var(--accent);
  opacity: 0.6;
  font-size: 0.6rem;
  line-height: 1;
  flex: none;
}

/* Drapeau et bouclier : dessines a plat, sans degrade. Les degrades du
   drapeau du hero passent par des <defs> a identifiant unique, et la
   piste duplique sa serie - deux copies auraient produit deux fois le
   meme id dans la page. */
.tk-drapeau {
  display: inline-block;
  width: 20px; height: 14px;
  border-radius: 2px;
  overflow: hidden;
  flex: none;
  box-shadow: 0 0 0 1px var(--border);
}
.tk-drapeau svg { display: block; width: 100%; height: 100%; }

.tk-bouclier {
  width: 15px; height: 15px;
  color: var(--accent);
  flex: none;
}
.tk-bouclier svg { display: block; width: 100%; height: 100%; }

@media (max-width: 760px) {
  .tk-item { height: 52px; padding: 0 16px; font-size: 0.82rem; }
  .tk-item b { font-size: 0.98rem; }
  .ticker-fenetre {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
}

/* PAS DE REPLI "mouvement reduit" SUR CE BANDEAU - decision du client du
   26/08/2026, prise en connaissance de cause. NE PAS LE RETABLIR sans le
   lui redemander.

   Ce qu'il y avait avant : un bloc @media (prefers-reduced-motion: reduce)
   qui coupait le defilement, retirait les series surnumeraires et faisait
   passer les six informations a la ligne.

   Pourquoi il a saute. Le client a constate sur son telephone un bandeau
   fige et des informations "mises n'importe comment". Ce n'etait pas un
   defaut : le site obeissait a son appareil. Mesure en 390 px, le repli
   faisait passer la bande de 54 px a 160 px, six pastilles empilees sur
   trois lignes - ecrit pour ne rien perdre, pas pour etre regarde.

   Le piege a connaitre : sur iPhone, le MODE ECONOMIE D'ENERGIE suffit a
   declencher "mouvement reduit" dans Safari, sans que personne n'ait
   touche aux reglages d'accessibilite. C'est de la que venait le cas
   constate, pas d'un choix delibere du visiteur.

   Ce que ca coute, dit franchement. Le bandeau ne se met en pause qu'au
   survol et au focus clavier - un telephone n'a ni l'un ni l'autre, donc
   sur mobile RIEN NE L'ARRETE, et une information ratee se rattrape en
   26 s. Un bouton pause a ete propose et refuse : "c'est moche". Le
   compromis est assume et il est esthetique.

   Ce qui limite la casse, et qui doit le rester : la bande fait une seule
   ligne fine, sans plein ecran, sans parallaxe, sans clignotement, et les
   six informations sont aussi ecrites en clair ailleurs dans la page - la
   phrase unique en fin de bloc, lue par les technologies d'assistance.
   Aucune information n'est accessible UNIQUEMENT par le bandeau. Si un
   jour une information ne vit plus que la, ce compromis ne tient plus. */

/* ─── SECTION GENERIC ─── */
section { padding: 80px 24px; }
.section-inner { max-width: 1060px; margin: 0 auto; }
.section-tag {
  display: inline-block;
  background: rgba(77,217,232,0.08);
  border: 1px solid rgba(77,217,232,0.2);
  color: var(--accent);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 50px;
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  letter-spacing: 0;
  line-height: 1.3;
  margin-bottom: 14px;
  text-wrap: balance;
}
.section-title em { font-style: normal; color: var(--accent2); }
.section-sub { color: var(--muted); font-size: 1rem; max-width: 560px; line-height: 1.7; }

/* ═══════════ SERVICES ═══════════
   Grille editoriale asymetrique : la specialite occupe deux colonnes sur la
   premiere rangee, les quatre autres prestations une colonne chacune, et
   l'appel au devis forme un bandeau pleine largeur. Pas de bento ni de
   glassmorphism : la hierarchie est portee par la typographie, l'echelle
   d'elevation et le rythme vertical.                                        */

/* Apres le reordonnancement du 08/08, #services precede la section des
   zones, elle aussi en fond blanc. Sans ce filet les deux se lisent comme
   une seule section. La section des zones n'a ni id ni classe : le trait
   est porte par #services. */
#services { border-bottom: 1px solid var(--border); }

/* ── Rappel de la promotion d'aout, au-dessus de la grille de services ──
   Les prix de l'accueil restent affiches au tarif plein : le detail des
   montants remises est sur la page tarifs, ou ce bandeau renvoie.
   Le garde-fou de date est dans le <head> de index.html. */
.promo-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin: 0 0 30px;
  padding: 14px 18px;
  background: rgba(169,84,31,0.07);
  border: 1px solid rgba(169,84,31,0.24);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.promo-banner:hover {
  background: rgba(169,84,31,0.11);
  border-color: rgba(169,84,31,0.40);
}
.promo-banner:focus-visible { outline: 2px solid var(--price); outline-offset: 3px; }
.promo-tag {
  flex-shrink: 0;
  padding: 6px 13px; border-radius: 50px;
  background: var(--price); color: #fff;
  font-family: var(--font-head); font-weight: 800;
  font-size: 0.82rem; letter-spacing: 0.3px;
  white-space: nowrap;
}
.promo-text {
  color: var(--text);
  font-size: 0.85rem; line-height: 1.6;
}
.promo-text sup { font-size: 0.7em; }
.promo-text strong { color: var(--price); white-space: nowrap; }

/* Passe le 31 aout 2026, le rappel disparait tout seul. */
.promo-finie .promo-banner { display: none; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 46px;
}
.service-card.is-featured { grid-column: span 2; }
.services-cta { grid-column: 1 / -1; }

@media (max-width: 920px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card.is-featured { grid-column: span 2; }
}
@media (max-width: 620px) {
  .services-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-card.is-featured { grid-column: span 1; }
}

/* --- Carte --- */
.service-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* Elevation a deux couches : une ombre courte qui pose la carte, une
     longue et diffuse qui la detache du fond sombre. */
  box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 5px 16px rgba(0,0,0,0.16);
  transition: border-color 0.25s, transform 0.25s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.25s;
}
.service-card:hover {
  border-color: rgba(77,217,232,0.34);
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.32), 0 18px 40px rgba(0,0,0,0.30);
}
.service-card:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Filet superieur qui se revele au survol : signal de survol discret, sans
   deplacer un seul pixel de contenu. */
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--green), rgba(77,217,232,0));
  opacity: 0;
  transition: opacity 0.25s;
}
.service-card:hover::before { opacity: 1; }

.sc-flag {
  /* align-self indispensable : dans un conteneur flex en colonne, un enfant
     est etire sur toute la largeur. inline-block seul n'y change rien. */
  align-self: flex-start;
  margin-bottom: 14px;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--dark);
  background: var(--green);
  padding: 4px 11px; border-radius: 50px;
}

.service-card h3 {
  font-family: var(--font-head);
  font-size: 1.1rem; font-weight: 700;
  line-height: 1.28; letter-spacing: -0.2px;
  margin-bottom: 9px;
  color: var(--text);
  transition: color 0.2s;
  text-wrap: balance;
}
.service-card:hover h3 { color: var(--green); }
.service-card p {
  color: var(--muted-on-card);
  font-size: 0.885rem; line-height: 1.72;
  text-wrap: pretty;                /* evite les mots isoles en fin de bloc */
}

/* ── Carte vedette : composition en deux colonnes ──
   Etiree sur deux colonnes, elle laissait une zone morte a droite parce que
   le texte restait plafonne. Le contenu editorial tient desormais la colonne
   de gauche, et le prix, le delai et l'appel a l'action forment une colonne
   laterale separee par un filet. Ce n'est plus une petite carte agrandie. */
.service-card.is-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  padding: 30px 30px 28px;
}
.sc-main { display: flex; flex-direction: column; min-width: 0; }
.service-card.is-featured h3 {
  font-size: 1.44rem; letter-spacing: -0.5px;
  line-height: 1.22; margin-bottom: 12px;
}
.service-card.is-featured p {
  font-size: 0.945rem; line-height: 1.68;
  max-width: 52ch;                  /* confort de lecture sur une carte large */
}

.sc-rail {
  display: flex; flex-direction: column;
  align-items: flex-end; justify-content: space-between;
  gap: 18px;
  margin-left: 30px; padding-left: 30px;
  border-left: 1px solid var(--border);
  min-width: 172px;
}
.service-card.is-featured .sc-prix { font-size: 1.62rem; }
.service-card.is-featured .sc-go {
  margin-top: 0; padding-top: 0;
  border-top: 0;                    /* le filet vertical du rail suffit */
}

/* Sous 780px la colonne laterale n'a plus la place : elle repasse en ligne,
   sous le texte, comme sur les autres cartes. */
@media (max-width: 780px) {
  .service-card.is-featured { display: flex; flex-direction: column; padding: 26px 24px 22px; }
  .service-card.is-featured h3 { font-size: 1.24rem; }
  .service-card.is-featured p { font-size: 0.885rem; max-width: none; }
  .sc-rail {
    flex-direction: row; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    margin-left: 0; padding-left: 0; margin-top: auto; padding-top: 20px;
    border-left: 0; min-width: 0;
  }
  .service-card.is-featured .sc-prix { font-size: 1.2rem; }
  .service-card.is-featured .sc-go {
    width: 100%; margin-top: 4px; padding-top: 15px;
    border-top: 1px solid var(--border);
  }
}

/* --- Pied de carte : delai a gauche, prix a droite --- */
.sc-meta {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-top: auto; padding-top: 20px;
}
.service-card .service-urgence { margin-top: 0; align-self: auto; }
.service-urgence {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--accent);
  background: rgba(77,217,232,0.08);
  border: 1px solid rgba(77,217,232,0.16);
  padding: 4px 11px; border-radius: 50px;
}

/* Le prix est traite comme un chiffre, pas comme une etiquette : c'est
   l'information que le visiteur cherche en premier. */
.sc-prix {
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.1; white-space: nowrap;
  font-family: var(--font-head);
  font-size: 1.12rem; font-weight: 800;
  color: var(--price);
  font-variant-numeric: tabular-nums;
}
.sc-prix i {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.sc-prix-devis {
  font-size: 0.9rem; font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.2px;
  align-self: flex-end;
}

/* --- Affordance de clic --- */
.sc-go {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px; padding-top: 15px;
  border-top: 1px solid var(--border);
  color: var(--green);
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.2px;
}
.sc-go svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.22s cubic-bezier(0.22,0.61,0.36,1);
}
.service-card:hover .sc-go svg { transform: translateX(5px); }

/* --- Bandeau d'appel au devis, pleine largeur --- */
.services-cta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  padding: 24px 28px;
  border-radius: 18px;
  background:
    linear-gradient(120deg, rgba(77,217,232,0.13), rgba(77,217,232,0.03) 62%),
    var(--card);
  border: 1px solid rgba(77,217,232,0.26);
  box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 5px 16px rgba(0,0,0,0.16);
}
.sca-txt { min-width: 0; }
.services-cta h3 {
  font-family: var(--font-head);
  font-size: 1.06rem; font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 5px;
  color: var(--text);
}
.services-cta p {
  color: var(--muted-on-card);
  font-size: 0.87rem; line-height: 1.65;
  max-width: 62ch;
}
.sc-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--green), var(--green2));
  color: var(--dark);
  font-family: var(--font-head); font-weight: 800; font-size: 0.9rem;
  border: none; border-radius: 50px; padding: 13px 24px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(77,217,232,0.22);
  transition: transform 0.2s, box-shadow 0.2s;
}
.sc-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(77,217,232,0.32); }
.sc-cta-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.sc-cta-btn svg {
  width: 17px; height: 17px;
  stroke: var(--dark); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Les deux CTA du bandeau Services forment un seul enfant flex face au texte,
   empiles pour que WhatsApp soit au-dessus du devis et non a cote. */
.sca-actions { display: flex; flex-direction: column; gap: 12px; }
.sca-actions .cta-big-wa { margin-bottom: 0; }
@media (max-width: 620px) {
  .services-cta { padding: 22px 20px; }
  .sc-cta-btn { width: 100%; }
  .sca-actions { width: 100%; }
  .sca-actions .cta-big-wa { width: 100%; justify-content: center; }
}

/* --- Regle tarifaire sous la grille --- */
.services-note {
  margin-top: 22px;
  font-size: 0.81rem; line-height: 1.7;
  color: var(--muted);
  max-width: 78ch;
}
.services-note a {
  color: var(--green); text-decoration: none;
  border-bottom: 1px solid rgba(77,217,232,0.35);
  font-weight: 600; white-space: nowrap;
}
.services-note a:hover { border-bottom-color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .service-card, .service-card::before, .sc-go svg, .sc-cta-btn { transition: none; }
  .service-card:hover { transform: none; }
}

/* ─── AVANT/APRÈS ─── */
.gallery-section { background: var(--dark2); }
/* ══ Comparateur principal, centre et large ══ */
.ba-featured {
  max-width: 1060px;
  margin: 26px auto 0;
}
.ba-featured figcaption {
  margin-top: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem; line-height: 1.65;
  text-wrap: pretty;
}

/* ══ Les deux autres, en vis-a-vis fige ══ */
/* Les deux realisations sont empilees plutot que cote a cote : chacune prend
   toute la largeur, donc chaque photo passe d'environ 211 a 528 px. */
.ba-pairs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 38px;
  max-width: 1060px;
  margin: 44px auto 0;
}
.ba-pair-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--border);
}
/* Les photos avant/apres sont dans un <picture> (WebP, repli JPG). Sans
   display: contents, le <picture> devient une boite intermediaire : le
   height: 100% de l'image se rapporterait a lui et non au cadre. */
picture { display: contents; }
.ba-shot { position: relative; }
.ba-shot img {
  display: block;
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ba-tag {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-head);
  font-size: 0.64rem; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: #fff;
  padding: 4px 10px; border-radius: 50px;
  backdrop-filter: blur(6px);
}
.ba-tag.is-avant { background: rgba(180,30,30,0.88); }
/* Vert assombri le 23/08 : blanc sur rgba(0,150,120,0.9) pose sur une
   photo tombait a 3.26 quand la photo est claire, sous le seuil AA de 4.5.
   La pastille AVANT, elle, tenait deja 5.51 - seul le vert etait en cause.
   Mesure faite sur les deux extremes, photo blanche et photo noire. */
.ba-tag.is-apres { background: rgba(0,110,88,0.94); left: auto; right: 10px; }
.ba-pair figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.83rem; line-height: 1.6;
  text-wrap: pretty;
}

@media (max-width: 700px) {
  .ba-pairs { grid-template-columns: 1fr; gap: 30px; margin-top: 32px; }
}
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  background: #000;
}
.ba-slider:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.ba-slider img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.ba-slider .img-apres { z-index: 1; }
.ba-slider .img-avant {
  z-index: 2;
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.05s linear;
}
.ba-slider .ba-handle {
  position: absolute; top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: #fdfefe;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 16px rgba(0,0,0,0.6);
  transition: left 0.05s linear;
}
.ba-slider .ba-handle-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  background: #fdfefe;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 4px rgba(255,255,255,0.15);
  color: var(--dark);
  font-weight: 700;
}
.ba-slider .ba-handle-circle::before {
  content: '\25C0  \25B6';
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--dark);
}
.ba-slider .ba-label {
  position: absolute;
  top: 14px;
  z-index: 4;
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 50px;
  pointer-events: none;
}
.ba-slider .ba-label.avant {
  left: 14px;
  background: rgba(180,30,30,0.9);
  border: 1px solid rgba(255,100,100,0.3);
}
.ba-slider .ba-label.apres {
  right: 14px;
  /* Meme correction que .ba-tag.is-apres, en pire : ce vert-ci tombait a
     2.43 sur une photo claire. */
  background: rgba(0,110,88,0.94);
  border: 1px solid rgba(77,217,232,0.4);
}
/* ══ Signature EDND ══
   Remplace le motif repete en diagonale qui recouvrait toute la photo. Une
   marque unique en bas a droite, reprenant la barre verticale cyan de la
   signature de marque. Le texte est en gras cerne d'une ombre douce : il
   reste lisible aussi bien sur une zone claire que sur une zone sombre.
   Le meme rendu s'applique aux vignettes figees, via ::after. */
.ba-slider .ba-watermark,
.ba-shot::after {
  content: 'EDND';
  position: absolute;
  inset: auto 14px 12px auto;      /* en bas a droite */
  z-index: 3;
  display: block;
  width: auto; height: auto;
  background: none;
  font-family: var(--font-head);
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 3.5px;
  line-height: 1;
  color: rgba(255,255,255,0.86);
  padding: 2px 0 2px 9px;
  border-left: 2px solid rgba(77,217,232,0.92);
  text-shadow: 0 1px 5px rgba(0,0,0,0.6), 0 0 2px rgba(0,0,0,0.45);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* La photo principale est plus grande : la signature suit l'echelle. */
.ba-slider .ba-watermark {
  inset: auto 17px 15px auto;
  font-size: 0.8rem;
  padding-left: 11px;
}

/* ══ Marque centrale, large et tres transparente ══
   Dissuade la reprise de l'image : elle traverse le sujet, on ne peut pas
   la recadrer sans amputer la photo.
   Le texte est pose en flex plutot que dessine en SVG : la version SVG
   centrait sa zone de dessin et non le texte lui-meme, qui apparaissait
   donc decale vers la gauche. Ici le centrage est reellement optique, et
   la police du site est utilisee. */
.ba-slider,
.ba-shot { container-type: inline-size; }

.ba-slider::before,
.ba-shot::before {
  content: 'EDND';
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.6rem;               /* repli si les unites de conteneur manquent */
  font-size: 16cqw;                /* proportionnel a la largeur de la photo */
  letter-spacing: 0.12em;
  /* L'interlettrage s'applique aussi apres la derniere lettre : la boite
     depasse l'encre a droite, ce qui decalerait le mot vers la gauche.
     Ce padding compense exactement la moitie de cet ecart. */
  padding-left: 0.12em;
  line-height: 1;
  color: rgba(255,255,255,0.17);
  text-shadow: 0 2px 0 rgba(0,0,0,0.10);
}
@media (max-width: 620px) {
  .ba-slider .ba-watermark,
  .ba-shot::after {
    font-size: 0.62rem;
    letter-spacing: 2.5px;
    inset: auto 10px 9px auto;
    padding-left: 7px;
  }
}

.ba-hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 9px 17px;
  border-radius: 50px;
  background: rgba(77, 217, 232, 0.09);
  border: 1px solid rgba(77, 217, 232, 0.26);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.ba-hint span { color: var(--accent); font-weight: 600; }
.ba-hint .icon {
  display: inline-block;
  font-size: 1.1rem;
  vertical-align: -2px;
  color: var(--green);
}
@media (max-width: 560px) {
  .ba-hint { border-radius: 14px; align-items: flex-start; }
}


/* ─── AVIS ─── */
.reviews-section { background: var(--dark2); }

/* ─── REVIEWS CAROUSEL ─── */
.reviews-carousel {
  position: relative;
  margin-top: 48px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 48px;
}
.reviews-track-wrap {
  overflow: hidden;
  border-radius: 16px;
}
.reviews-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
  /* pan-y = le navigateur gère le scroll vertical, nous gérons l'horizontal.
     C'est ce qui permet au swipe horizontal de fonctionner sans être annulé. */
  touch-action: pan-y;
  /* Empêche la sélection de texte pendant le swipe */
  user-select: none;
  -webkit-user-select: none;
}
.reviews-track.is-dragging {
  transition: none;
}
.review-card {
  flex: 0 0 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: border-color 0.2s;
  /* Évite le drag natif des images/texte sur desktop */
  -webkit-user-drag: none;
}
.review-card:hover { border-color: rgba(77,217,232,0.25); }
.stars { color: #ffd166; font-size: 1rem; margin-bottom: 14px; letter-spacing: 2px; }
.review-text {
  color: var(--text); font-size: 0.98rem; line-height: 1.7;
  font-style: italic; margin-bottom: 18px;
}
.review-author { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.review-type { color: var(--accent); font-size: 0.78rem; display: block; margin-top: 2px; }

/* Flèches */
.reviews-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(77,217,232,0.08);
  border: 1px solid rgba(77,217,232,0.3);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  z-index: 2;
  padding: 0;
}
.reviews-arrow:hover {
  background: rgba(77,217,232,0.2);
  border-color: var(--green);
  transform: translateY(-50%) scale(1.08);
}
.reviews-arrow:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.reviews-arrow svg { width: 16px; height: 16px; fill: currentColor; }
.reviews-arrow.prev { left: 0; }
.reviews-arrow.next { right: 0; }

/* Points de navigation */
.reviews-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  margin-top: 16px;
}
.reviews-controls .reviews-dots { margin-top: 0; }
.reviews-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
/* La pastille visible reste petite, mais la zone tactile fait 44px de haut
   (minimum recommandé) : sur mobile, les flèches sont masquées et les points
   deviennent le seul repli si le swipe échoue. */
.reviews-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.2s, transform 0.2s, width 0.3s;
}
.reviews-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 44px;
}
.reviews-dot:hover { background: rgba(77,217,232,0.4); }
.reviews-dot.active {
  background: var(--green);
  width: 24px;
  border-radius: 4px;
}
.reviews-dot:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* Au-dessus de 900 px : les deux avis cote a cote, plus de carrousel. La
   largeur est la : la carte prenait 540 px sur 1568, et 500 px de vide de
   chaque cote ne portaient que deux fleches, pendant que le second avis
   restait cache derriere un geste. Les commandes disparaissent, la piste
   cesse d'etre une piste. transform en !important : le JS pose encore un
   translate3d pendant la bascule, il ne doit pas decaler la grille.
   En dessous, le carrousel reprend : la place manque pour deux cartes. */
@media (min-width: 901px) {
  .reviews-track-wrap { overflow: visible; }
  .reviews-track {
    transform: none !important;
    gap: 24px;
    transition: none;
    /* La piste interdit la selection pour que le glissement du doigt ne
       surligne pas le texte. Hors carrousel, un avis se lit et se copie. */
    user-select: auto;
    -webkit-user-select: auto;
    touch-action: auto;
  }
  /* justify-content: center convient a une carte seule ; cote a cote, deux
     textes de longueurs differentes decalent les etoiles et les auteurs.
     Alignement en haut, les deux cartes se lisent sur la meme ligne. */
  .reviews-track .review-card { flex: 1 1 0; min-width: 0; justify-content: flex-start; }
  .reviews-arrow, .reviews-controls { display: none; }
  .reviews-carousel { padding: 0; }
}

/* Adaptation mobile : carte plus compacte, et surtout les fleches descendent
   sous la carte au lieu d'etre masquees. Elles l'etaient jusqu'au 22/09/2026,
   le glissement du doigt etant cense suffire ; il ne se voit pas, et depuis le
   retrait de l'avance automatique plus rien ne signalait qu'il y a un second
   avis. Elles ne peuvent pas rester posees sur les bords comme en grand
   ecran : a 375 px la carte occupe toute la largeur et elles mordraient sur le
   texte. On repasse donc le carrousel en flux avec ordre explicite, ce qui
   donne une rangee « < points > » sous la carte. */
@media (max-width: 600px) {
  .reviews-carousel {
    padding: 0 12px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 0 14px;
  }
  .reviews-track-wrap { order: 1; flex: 1 0 100%; }
  .reviews-arrow {
    position: static;
    transform: none;
    order: 2;
    margin-top: 16px;
    /* 44 px : cible tactile confortable, alors que 36 px suffisait a la
       souris. Meme regle que la zone etendue des points. */
    width: 44px; height: 44px;
  }
  .reviews-arrow:hover { transform: scale(1.08); }
  .reviews-controls { order: 3; margin-top: 16px; }
  .reviews-arrow.next { order: 4; }
  .review-card { padding: 26px 22px; min-height: 240px; }
  .review-text { font-size: 0.92rem; }
}

/* Respect préférence motion réduit */
@media (prefers-reduced-motion: reduce) {
  .reviews-track { transition: none; }
}

/* En-tete Google de la section des avis. La note est ecrite a la main :
   elle porte sa date de releve, c'est ce qui la rend honnete. */
.avis-note {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 14px;
  margin-top: 32px;
}
.avis-note-logo { width: 22px; height: 22px; fill: currentColor; }
/* La note est un lien vers la fiche Google depuis le 22/09/2026 : elle garde
   l'apparence d'un texte, le soulignement n'apparaissant qu'au survol, mais
   elle reste un lien pour le clavier et les lecteurs d'ecran. */
.avis-note-chiffre {
  display: flex; align-items: center; gap: 8px; margin: 0;
  color: inherit;
  /* Souligne en permanence, et pas seulement au survol : le lien existe pour
     que le lecteur puisse verifier une note ecrite a la main. Invisible, il
     ne verifie rien. Le soulignement porte sur le compte d'avis, pas sur le
     chiffre ni les etoiles, pour ne pas alourdir la ligne. */
  text-decoration: none;
}
.avis-note-compte { text-decoration: underline; text-underline-offset: 3px; }
.avis-note-chiffre:hover .avis-note-compte { text-decoration-thickness: 2px; }
.avis-note-chiffre:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; }
.avis-note-chiffre strong { font-size: 1.35rem; }
.avis-note-etoiles { color: #ffd166; letter-spacing: 2px; }

/* Le bouton pause (.reviews-pause) a ete retire le 22/09/2026 en meme temps
   que l'avance automatique : plus rien ne defile tout seul, WCAG 2.2.2 ne
   s'applique plus. Les points restent seuls dans .reviews-controls. */

/* La carte est passee de <div> a <article> le 22/09 : le selecteur de classe
   suffit, mais la marge par defaut du <blockquote> doit sauter. */
.review-card blockquote.review-text { margin: 0 0 18px; }
.review-author cite { font-style: normal; }
.review-meta { color: var(--muted); font-size: 0.8rem; margin: 6px 0 0; }
.review-meta a { color: var(--green); }

.avis-origine {
  max-width: 760px;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: 0.72rem; line-height: 1.55;
  text-align: center;
}
/* Sans cette regle, le lien prenait le bleu par defaut du navigateur. Couleur
   du texte, soulignement garde : contraste 5,68 mesure le 15/09 (theme clair). */
.avis-origine a { color: inherit; }

/* ─── ZONE ─── */
.zone-tags {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 32px;
}
.zone-tag {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 0.85rem; color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.zone-tag:hover { border-color: var(--green); color: var(--green); background: rgba(77,217,232,0.06); }
.zone-tag:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.zone-hors-idf {
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.8;
}
.zone-hors-idf strong { color: var(--text); font-weight: 600; }
.zone-hors-idf a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid rgba(77,217,232,0.35);
}
.zone-hors-idf a:hover { border-bottom-color: var(--green); }

/* ─── CTA SECTION ─── */
.cta-section {
  background: linear-gradient(135deg, rgba(77,217,232,0.08) 0%, rgba(46,201,218,0.04) 100%);
  border-top: 1px solid rgba(77,217,232,0.15);
  border-bottom: 1px solid rgba(77,217,232,0.15);
  text-align: center;
}
.cta-section .section-title { max-width: 700px; margin: 0 auto 14px; }
.cta-section .section-sub { max-width: 480px; margin: 0 auto 40px; }
.cta-big-wa {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--wa);
  color: var(--dark); font-family: var(--font-body);
  font-weight: 700; font-size: 1.25rem;
  padding: 20px 44px; border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 12px 48px rgba(77,217,232,0.45);
  transition: all 0.25s;
  margin-bottom: 20px;
}
.cta-big-wa:hover { background: var(--wa-dark); transform: translateY(-3px); box-shadow: 0 16px 56px rgba(77,217,232,0.6); }
.cta-big-wa svg { width: 26px; height: 26px; fill: var(--dark); }
.cta-note { color: var(--muted); font-size: 0.85rem; }
.cta-note strong { color: var(--accent); }

/* ─── FAQ ─── */
.faq-list { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.faq-q {
  width: 100%;
  padding: 20px 24px;
  background: none; border: 0;
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.95rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  user-select: none;
  transition: color 0.2s;
}
.faq-q:hover { color: var(--accent); }
.faq-q:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.faq-q .chevron { transition: transform 0.3s; font-size: 0.8rem; color: var(--muted); flex-shrink: 0; }
.faq-item.open .faq-q .chevron { transform: rotate(180deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease, padding 0.25s;
  color: var(--muted); font-size: 0.88rem; line-height: 1.7;
  padding: 0 24px;
}
/* 1000px : marge large pour que la reponse la plus longue ne soit jamais
   coupee, meme sur un ecran de 320px de large. */
.faq-item.open .faq-a { max-height: 1000px; padding: 0 24px 20px; }
@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-q .chevron { transition: none; }
}
.faq-a a { color: var(--green); text-decoration: none; font-weight: 600; }
.faq-a a:hover { text-decoration: underline; }

/* ─── FOOTER ─── */
footer {
  background: var(--dark2);
  border-top: 1px solid var(--border);
  padding: 48px 24px 32px;
}
.footer-inner {
  max-width: 1060px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;
  margin-bottom: 40px;
}
.footer-desc { color: var(--muted); font-size: 0.85rem; max-width: 260px; line-height: 1.7; }
.footer-col h2 {
  font-family: var(--font-head);
  font-weight: 700; font-size: 0.85rem;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.footer-col a, .footer-col p {
  display: block; color: var(--text);
  text-decoration: none; font-size: 0.88rem;
  margin-bottom: 8px; transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  max-width: 1060px; margin: 0 auto;
  padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 0.8rem;
}
.footer-bottom a { color: var(--muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--accent); }

/* ─── FLOAT WHATSAPP — Premium conversion button ─── */
.float-wa {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 999;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0;
}
.float-wa-btn {
  width: 60px;
  height: 60px;
  background: var(--wa);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 14px rgba(77,217,232,0.4),
    0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
  position: relative;
  flex-shrink: 0;
  animation: wa-bounce 3.5s ease-in-out 2s infinite;
}
.float-wa-btn svg {
  width: 30px;
  height: 30px;
  fill: var(--dark);
  position: relative;
  z-index: 2;
}
@keyframes wa-bounce {
  0%, 92%, 100% { transform: translateY(0); }
  94% { transform: translateY(-6px); }
  96% { transform: translateY(0); }
  98% { transform: translateY(-3px); }
}
/* Pulse rings */
.float-wa-btn::before,
.float-wa-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(77,217,232,0.6);
  animation: wa-pulse-ring 2.4s ease-out infinite;
}
.float-wa-btn::after { animation-delay: 1.2s; }
@keyframes wa-pulse-ring {
  0%   { transform: scale(1);    opacity: 0.7; }
  80%, 100% { transform: scale(1.6); opacity: 0; }
}
.float-wa-btn:hover {
  transform: scale(1.1);
  box-shadow:
    0 8px 24px rgba(77,217,232,0.55),
    0 4px 10px rgba(0,0,0,0.2);
  animation-play-state: paused;
}
.float-wa-btn:hover::before,
.float-wa-btn:hover::after {
  animation-play-state: paused;
}

/* Smart tooltip - desktop only, auto-hide */
.float-wa-tip {
  background: #fdfefe;
  color: #111;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(12px) scale(0.85);
  transform-origin: bottom right;
  pointer-events: none;
  margin-right: 10px;
  max-width: 240px;
  animation: wa-tip-appear 0.4s ease-out 2.5s forwards, wa-tip-hide 0.3s ease-in 8s forwards;
}
.float-wa-tip strong { color: var(--dark); font-weight: 700; }
@keyframes wa-tip-appear {
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes wa-tip-hide {
  to { opacity: 0; transform: translateX(12px) scale(0.85); }
}

/* Mobile : hide tooltip, only keep tiny round button */
@media (max-width: 640px) {
  .float-wa-tip { display: none; }
  .float-wa-btn {
    width: 52px;
    height: 52px;
  }
  .float-wa-btn svg {
    width: 26px;
    height: 26px;
  }
  .float-wa {
    bottom: 16px;
    right: 16px;
  }
}

/* ─── Drapeau français — version SVG premium ─── */
.fr-flag-svg {
  width: 22px;
  height: 15px;
  border-radius: 2px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.25),
    inset 0 0 0 0.5px rgba(255,255,255,0.15);
  display: inline-block;
  vertical-align: -2px;
}
.fr-flag-svg svg { width: 100%; height: 100%; display: block; }

/* Hero slim tricolor accent line */
.fr-accent {
  display: block;
  width: 60px;
  height: 3px;
  margin: 0 auto 20px;
  background: linear-gradient(to right,
    #002395 0%, #002395 33.33%,
    #fdfefe 33.33%, #fdfefe 66.66%,
    #ED2939 66.66%, #ED2939 100%);
  border-radius: 2px;
  opacity: 0.85;
}

/* Badge "Entreprise française" */
.fr-badge-pro {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 10px;
  background: rgba(0,50,59,0.03);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.2px;
  transition: border-color 0.2s, background 0.2s;
}
.fr-badge-pro:hover {
  border-color: rgba(11,127,146,0.28);
  background: rgba(0,50,59,0.05);
}
.fr-badge-pro strong {
  color: var(--text);
  font-weight: 600;
}
.fr-badge-pro .sep {
  color: var(--muted);
  margin: 0 2px;
}
.fr-badge-pro .siret {
  color: var(--muted);
  font-weight: 500;
}

/* Badges certifications */
.cert-badge {
  padding: 7px 14px;
}
.cert-badge .cert-icon {
  display: inline-flex;
  color: var(--green);
  flex-shrink: 0;
}
.cert-badge .cert-icon svg {
  width: 15px; height: 15px;
}
.cert-badge:hover .cert-icon {
  color: var(--green2);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768.98px) {
  .sticky-bar { padding: 10px 16px; }
  .sticky-bar .brand-name { font-size: 1.15rem; letter-spacing: 2px; }
  .btn-tel { display: none; }
  .btn-wa { padding: 9px 16px; font-size: 0.82rem; }
  .hero { padding: 100px 16px 60px; }

  section { padding: 60px 16px; }

  .gallery-item img { height: 380px; }
}

@media (max-width: 480px) {
  .hero h1 { letter-spacing: 0; }
  .btn-wa-hero { font-size: 1rem; padding: 14px 24px; }
  .btn-tel-hero { font-size: 0.9rem; padding: 12px 20px; }
  .gallery-item img { height: 320px; }
}


/* Footer logo */



/* EDND text logo - nav */
.sticky-bar .brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.sticky-bar .brand-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  color: #ffffff;
  letter-spacing: 3px;
}
/* EDND text logo - footer */
.footer-brand {
  margin-bottom: 12px;
}
.footer-brand-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.8rem;
  color: #ffffff;
  letter-spacing: 3px;
}
/* ─── MENU BURGER ─── */
/* Groupe gauche de la barre : burger + logo */
.sticky-left { display: flex; align-items: center; gap: 12px; }
@media (max-width: 380px) { .sticky-left { gap: 8px; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 50px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}
.burger:hover { border-color: var(--green); background: rgba(77,217,232,0.08); }
.burger:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.burger-lines { position: relative; width: 18px; height: 12px; }
.burger-lines span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1), opacity 0.2s;
}
.burger-lines span:nth-child(1) { top: 0; }
.burger-lines span:nth-child(2) { top: 5px; }
.burger-lines span:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .burger-lines span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-lines span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-lines span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,20,25,0.65);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1050;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

.nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(390px, 88vw);
  background: var(--dark2);
  border-right: 1px solid var(--border);
  z-index: 1060;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.25,1,0.5,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-drawer.open { transform: translateX(0); }
body.nav-open { overflow: hidden; }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--dark2);
  z-index: 2;
}
.nav-drawer-brand {
  font-family: var(--font-head);
  font-weight: 800; font-size: 1.35rem;
  letter-spacing: 3px; color: #ffffff;
  text-decoration: none;
}
.nav-close {
  background: none; border: none; cursor: pointer;
  color: var(--muted);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.nav-close:hover { color: var(--green); background: rgba(255,255,255,0.06); }
.nav-close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.nav-close svg { width: 20px; height: 20px; }

.nav-list { list-style: none; padding: 6px 0 0; margin: 0; }
.nav-item { border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-link, .nav-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 15px 22px;
  font-family: var(--font-body);
  font-size: 0.97rem; font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: none; border: none;
  text-align: left; cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.nav-link:hover, .nav-toggle:hover { color: var(--green); background: rgba(77,217,232,0.05); }
.nav-link:focus-visible, .nav-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.nav-link[aria-current="page"] {
  color: var(--green);
  box-shadow: inset 3px 0 0 var(--green);
}
.nav-toggle .chev {
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: var(--muted); fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1), stroke 0.2s;
}
.nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); stroke: var(--green); }
.nav-toggle[aria-expanded="true"] { color: var(--green); }

.nav-sub {
  list-style: none; margin: 0; padding: 0;
  max-height: 0; overflow: hidden;
  background: rgba(0,0,0,0.2);
  transition: max-height 0.35s cubic-bezier(0.25,1,0.5,1);
}
.nav-sub a {
  display: block;
  padding: 11px 22px 11px 38px;
  font-size: 0.88rem; font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-sub a:hover { color: var(--green); border-left-color: var(--green); background: rgba(77,217,232,0.05); }
.nav-sub a:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.nav-sub a[aria-current="page"] { color: var(--green); border-left-color: var(--green); }
.nav-sub-deep a {
  padding-left: 52px;
  font-size: 0.84rem;
  color: rgba(138,184,191,0.8);
}
.nav-sub-deep a::before {
  content: "–";
  margin-right: 8px;
  color: rgba(138,184,191,0.45);
}
.nav-sub-deep a:hover::before { color: var(--green); }

.nav-sub-group {
  padding: 12px 22px 5px 38px;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(138,184,191,0.55);
}

.nav-drawer-foot {
  margin-top: auto;
  padding: 20px 22px 26px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.nav-drawer-foot .btn-wa { justify-content: center; }
.nav-drawer-foot .nav-foot-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 50px;
  border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  font-size: 0.92rem; font-weight: 600;
  transition: border-color 0.2s, color 0.2s;
}
.nav-drawer-foot .nav-foot-tel:hover { border-color: var(--green); color: var(--green); }
.nav-drawer-foot .nav-foot-note {
  text-align: center; color: var(--muted);
  font-size: 0.78rem; margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-sub, .burger-lines span, .nav-toggle .chev { transition: none; }
}


/* ═══════════ FORMULAIRE DE DEVIS EN 3 ÉTAPES ═══════════ */
.dv-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 28px;
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}
/* ===== FORMULAIRE H3 (01/10/2026) =====
   Progression en barre, passage d'etape qui glisse, cartes et pastilles qui
   s'allument (plein bleu-vert, pastille blanche, coche qui se trace, « pop »
   et halo), parties facultatives repliees. Place AVANT le bloc THEME CLAIR :
   les couleurs passent par les variables, que le theme redefinit. */
/* Repli pour Safari < 16 (pas de clip) : hidden d'abord, clip ensuite l'emporte la ou il existe. */
.dv-form { overflow-x: hidden; overflow-x: clip; }
.dv-prog { display: block; margin-bottom: 20px; }
.dv-prog-t { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.dv-prog-track { display: block; height: 4px; margin-top: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.dv-prog-fill { display: block; height: 100%; width: 33.34%; border-radius: 4px; background: var(--green); transition: width 0.45s cubic-bezier(.4,.2,.2,1); }
.dv-form[data-etape="1"] .dv-prog-fill { width: 66.67%; }
.dv-form[data-etape="2"] .dv-prog-fill,
.dv-form[data-etape="3"] .dv-prog-fill { width: 100%; }
/* Panneau de confirmation (etape 3) : plus de progression. */
.dv-form[data-etape="3"] .dv-prog { display: none; }

.dv-panel.is-active.dv-in-d { animation: dvInD 0.38s cubic-bezier(.4,.2,.2,1); }
.dv-panel.is-active.dv-in-g { animation: dvInG 0.38s cubic-bezier(.4,.2,.2,1); }
@keyframes dvInD { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes dvInG { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.dv-hint { display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 400; font-size: 0.8rem; color: var(--muted); }

.dv-card {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 9px;
  min-height: 52px; padding: 10px 36px 10px 10px;
  background: rgba(255,255,255,0.03); border: 1.5px solid var(--border); border-radius: 14px;
  cursor: pointer; text-align: left;
  color: var(--text); font-size: 0.84rem; font-weight: 600; line-height: 1.3; font-family: var(--font-body);
  transition: background 0.28s, border-color 0.28s, color 0.28s;
}
.dv-card:hover { border-color: var(--green); }
.dv-card-i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: rgba(77,217,232,0.1); display: flex; align-items: center; justify-content: center; transition: background 0.28s; }
.dv-card-i svg { width: 16px; height: 16px; stroke: var(--green); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.28s; }
.dv-card-o { position: absolute; top: 50%; right: 10px; width: 20px; height: 20px; margin-top: -10px; overflow: visible; }
.dv-card-o circle { fill: var(--card); stroke: var(--muted); stroke-width: 1.5; transition: fill 0.28s, stroke 0.28s; }
.dv-card-o path { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 0.32s 0.1s ease-out; }
.dv-card.is-sel { background: var(--green); border-color: var(--green); color: #ffffff; }
/* Pop et halo : classe ephemere posee au clic (is-pop), pas rejouee quand un panneau reaffiche une carte deja cochee. */
.dv-card.is-pop { animation: dvPop 0.38s cubic-bezier(.34,1.56,.64,1); }
.dv-card.is-pop::after { content: ""; position: absolute; inset: -1.5px; border-radius: 14px; pointer-events: none; animation: dvHalo 0.6s ease-out; }
.dv-card.is-sel .dv-card-i { background: rgba(255,255,255,0.18); }
.dv-card.is-sel .dv-card-i svg { stroke: #ffffff; }
.dv-card.is-sel .dv-card-o circle { fill: #ffffff; stroke: #ffffff; }
.dv-card.is-sel .dv-card-o path { stroke-dashoffset: 0; }
@keyframes dvPop { 45% { transform: scale(1.04); } }
@keyframes dvHalo { from { box-shadow: 0 0 0 0 rgba(10,112,128,0.45); } to { box-shadow: 0 0 0 10px rgba(10,112,128,0); } }

.dv-chip:hover { border-color: var(--green); }
.dv-chip.is-sel { background: var(--green); border-color: var(--green); color: #ffffff; font-weight: 600; }
.dv-chip.is-pop { animation: dvPop 0.38s cubic-bezier(.34,1.56,.64,1); }

.dv-plus {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  margin: -8px 0 16px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--green); font-family: var(--font-body); font-size: 0.88rem; font-weight: 600;
}
.dv-plus-s { display: inline-block; transition: transform 0.25s; }
.dv-plus[aria-expanded="true"] .dv-plus-s { transform: rotate(45deg); }
.dv-plus small { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
.dv-repli[hidden] { display: none; }
.dv-note { margin: 0 0 22px; font-size: 0.82rem; line-height: 1.55; color: var(--muted); }
.dv-note strong { color: var(--text); font-weight: 600; }

.dv-assur { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 14px 0 4px; }
.dv-assur span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.dv-assur span::before { content: "✓"; color: var(--green); font-size: 0.72rem; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .dv-card.is-pop, .dv-chip.is-pop, .dv-card.is-pop::after,
  .dv-panel.is-active.dv-in-d, .dv-panel.is-active.dv-in-g { animation: none; }
  .dv-card-o path, .dv-prog-fill, .dv-plus-s { transition: none; }
}

.dv-panel { display: none; }
.dv-panel.is-active { display: block; }

.dv-field { border: 0; margin: 0 0 24px; padding: 0; }
.dv-field legend,
.dv-label {
  display: block; padding: 0;
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.98rem; color: var(--text);
  margin-bottom: 12px;
}
.dv-label small { font-family: var(--font-body); font-weight: 500; color: var(--muted); font-size: 0.8rem; }

.dv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.dv-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.dv-chip {
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--border);
  border-radius: 50px; padding: 9px 17px;
  cursor: pointer; color: var(--text);
  font-size: 0.86rem; font-weight: 500; font-family: var(--font-body);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.dv-input, .dv-textarea {
  width: 100%;
  background: rgba(0,0,0,0.18);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px;
  color: var(--text); font-size: 0.92rem; font-family: var(--font-body);
  transition: border-color 0.2s;
}
.dv-input::placeholder, .dv-textarea::placeholder { color: rgba(138,184,191,0.65); }
.dv-input:focus, .dv-textarea:focus { outline: none; border-color: var(--green); }
.dv-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

.dv-check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; margin-bottom: 22px; }
.dv-check input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--green); cursor: pointer; }
.dv-check span { font-size: 0.82rem; color: var(--muted); line-height: 1.6; }

.dv-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.dv-nav.dv-nav-end { justify-content: flex-end; }
.dv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--green), var(--green2));
  color: var(--dark);
  font-family: var(--font-head); font-weight: 800; font-size: 0.95rem;
  border: none; border-radius: 50px; padding: 14px 28px;
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 22px rgba(77,217,232,0.22);
}
.dv-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(77,217,232,0.32); }
.dv-btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.dv-btn-full { width: 100%; }
.dv-back {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 0.88rem; font-weight: 500;
  font-family: var(--font-body); padding: 8px 4px;
  transition: color 0.2s;
}
.dv-back:hover { color: var(--green); }

.dv-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; color: var(--muted); font-size: 0.78rem;
}
.dv-or::before, .dv-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.dv-wa {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; background: var(--wa); color: var(--dark);
  font-weight: 600; font-size: 0.9rem; font-family: var(--font-body);
  padding: 13px 20px; border-radius: 50px;
  border: none; cursor: pointer; text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.dv-wa:hover { background: var(--wa-dark); transform: translateY(-2px); }
.dv-wa svg { width: 18px; height: 18px; fill: var(--dark); }

.dv-conf { text-align: center; font-size: 0.76rem; color: var(--muted); margin-top: 14px; }
.dv-err { display: block; color: #ff8a8a; font-size: 0.8rem; margin-top: 8px; }
.dv-input.has-err, .dv-textarea.has-err { border-color: #ff8a8a; }

.dv-done { text-align: center; padding: 18px 0 8px; }
.dv-done-i {
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(77,217,232,0.12); border: 1.5px solid var(--green);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.dv-done-i svg { width: 26px; height: 26px; stroke: var(--green); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dv-done h3 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.dv-done p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 20px; }

/* ─── Fenêtre modale ─── */
.dv-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; }
.dv-modal[hidden] { display: none; }
.dv-modal-veil { position: fixed; inset: 0; background: rgba(0,20,24,0.82); backdrop-filter: blur(4px); }
.dv-modal-box { position: relative; width: 100%; max-width: 620px; margin: auto; }
.dv-modal-box .dv-form { box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.dv-modal-close {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--dark2); border: 1px solid var(--border);
  color: var(--text); font-size: 1.2rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.dv-modal-close:hover { border-color: var(--green); color: var(--green); }
body.dv-lock { overflow: hidden; }

/* Le bouton du hero conserve l'apparence du bouton WhatsApp */
button.btn-wa-hero { border: none; cursor: pointer; font-family: var(--font-head); }

/* ─── Coordonnées sous le formulaire de contact ─── */
.dv-contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; max-width: 620px; margin: 26px auto 0; text-align: left;
}
.dv-contact-item {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px;
}
.dv-contact-item span {
  display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.dv-contact-item a, .dv-contact-item p { color: var(--text); font-size: 0.92rem; text-decoration: none; font-weight: 600; }
.dv-contact-item a:hover { color: var(--green); }
.dv-contact-item em { display: block; font-style: normal; font-size: 0.78rem; color: var(--muted); font-weight: 400; margin-top: 3px; }

@media (max-width: 620px) {
  .dv-form { padding: 24px 18px; border-radius: 16px; }
  .dv-cards { grid-template-columns: repeat(2, 1fr); }
  .dv-card { font-size: 0.8rem; gap: 6px; padding: 10px 32px 10px 8px; }
  .dv-card-i { width: 26px; height: 26px; }
  .dv-modal { padding: 12px; }
  .dv-modal-close { top: 4px; right: 4px; }
  /* La croix passe DANS la boite en petit ecran, faute de place au-dessus :
     sans reserve de hauteur elle se posait sur " Sans engagement " de la
     ligne d assurances. Vu au rendu en 390 px le 22/08. */
  .dv-modal-box .dv-form { padding-top: 46px; }
  .dv-btn { padding: 13px 22px; font-size: 0.9rem; }
}

/* Tres petits ecrans : le mot « Desinfection » doit tenir dans sa carte sans toucher la pastille. */
@media (max-width: 380px) {
  .dv-form { padding: 24px 16px; }
  .dv-card { font-size: 0.74rem; gap: 5px; padding: 10px 34px 10px 7px; }
  .dv-card-i { width: 22px; height: 22px; }
}
/* <= 348px : deux colonnes conservees, icone masquee pour laisser la place au libelle. */
@media (max-width: 348px) {
  .dv-card-i { display: none; }
  .dv-card { padding-left: 10px; }
}

/* Bouton du hero qui ouvre le formulaire */
/* Niveau 2 de la hierarchie : bouton contour, pour ne pas concurrencer
   le WhatsApp qui est le canal prioritaire. Le fond derriere le texte n'est
   pas transparent : .hero superpose une photo a un degrade dont le point le
   plus clair (rgba(0,50,59,0.64)) tombe justement sur la zone des CTA. Sans
   fond propre, le contraste du texte dependrait des pixels de la photo a cet
   endroit precis, ce qui n'est pas mesurable une fois pour toutes. Un fond
   semi-opaque fonce (meme teinte que .hero-rating) rend le contraste
   deterministe : voir le calcul dans task-3-report.md. */
.btn-devis-hero {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(0,40,48,0.55);
  color: var(--text);
  border: 2px solid var(--green);
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  padding: 14px 28px; border-radius: 50px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-devis-hero:hover { background: rgba(0,40,48,0.72); border-color: var(--green2); }
.btn-devis-hero svg { width: 20px; height: 20px; stroke: var(--dark); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { .btn-devis-hero { font-size: 0.98rem; padding: 14px 24px; } }

/* ═══════════ BARRE DE NAVIGATION MOBILE ═══════════ */
.mbar { display: none; }

/* ─── RECHERCHE DE SERVICE (barre du haut) ─── */
.site-search { position: relative; flex: 1 1 auto; max-width: 380px; margin: 0 18px; }
.site-search-field {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(77,217,232,0.22);
  border-radius: 50px;
  padding: 0 8px 0 14px;
  transition: border-color 0.2s, background 0.2s;
}
.site-search-field:focus-within { border-color: var(--green); background: rgba(77,217,232,0.10); }
.site-search-field .ss-ico { width: 16px; height: 16px; stroke: var(--muted); fill: none; flex-shrink: 0; transition: stroke 0.2s; }
.site-search-field:focus-within .ss-ico { stroke: var(--green); }
.site-search input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--text); font-family: var(--font-body); font-size: 0.9rem;
  padding: 10px 0;
  -webkit-appearance: none; appearance: none;
}
.site-search input::-webkit-search-cancel-button { display: none; }
.site-search input::placeholder { color: var(--muted); }
.site-search-clear {
  display: none; background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 1.25rem; line-height: 1; padding: 0 6px 3px;
}
.site-search-clear:hover { color: var(--accent); }
.site-search.has-text .site-search-clear { display: block; }
.site-search-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: rgba(77,217,232,0.06);
  border: 1px solid rgba(77,217,232,0.22);
  border-radius: 12px; cursor: pointer; flex-shrink: 0; padding: 0;
}
.site-search-toggle:hover { border-color: var(--green); background: rgba(77,217,232,0.12); }
.site-search-toggle svg { width: 18px; height: 18px; stroke: var(--green); fill: none; }
.site-search-results {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 1200;
  background: #012b33;
  border: 1px solid rgba(77,217,232,0.25);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
  overflow-x: hidden; overflow-y: auto;
  max-height: 460px;
  max-height: min(62vh, 460px);
}
.site-search-results[hidden] { display: none; }
.ss-head {
  padding: 11px 16px 7px;
  color: var(--muted); font-size: 0.68rem;
  letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600;
}
a.ss-item {
  display: block; padding: 10px 16px; text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.ss-head + a.ss-item { border-top: 0; }
a.ss-item:hover, a.ss-item.active { background: rgba(77,217,232,0.11); }
a.ss-item .ss-t { display: block; color: var(--text); font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
a.ss-item .ss-d { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 2px; line-height: 1.45; }
.ss-none { padding: 16px; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.ss-none a { color: var(--green); font-weight: 600; text-decoration: none; }
.ss-none a:hover { text-decoration: underline; }

@media (max-width: 768.98px) {
  .site-search { position: static; flex: 0 0 auto; max-width: none; margin: 0 0 0 10px; }
  .site-search-toggle { display: inline-flex; }
  .site-search-field { display: none; }
  .site-search.open .site-search-field {
    display: flex;
    position: fixed; top: calc(var(--sb-h, 62px) + 8px); left: 12px; right: 12px;
    z-index: 1200; background: #012b33; padding: 0 10px 0 14px;
  }
  .site-search.open .site-search-toggle { border-color: var(--green); background: rgba(77,217,232,0.16); }
  .site-search-results { position: fixed; top: calc(var(--sb-h, 62px) + 62px); left: 12px; right: 12px; }
}
@media (max-width: 380px) {
  .site-search { margin-left: 6px; }
  .site-search-toggle { width: 38px; height: 38px; }
}
/* --- Lien d'evitement : visible uniquement au focus clavier --- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; }
.skip-link:focus {
  left: 12px; top: 12px;
  padding: 10px 18px; border-radius: 10px;
  background: var(--green); color: var(--dark);
  font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
/* ===== LOT3 ===== */

/* Contraste : --muted tombe a 4.41:1 sur les cartes (--card #184c54), sous le
   seuil WCAG AA de 4.5:1. --muted-on-card (#9dc6cc) remonte a 5.18:1. */
.service-card p,
.why-card p,
.review-author,
.dv-assur span,
.dv-check span,
.dv-conf,
.dv-done p { color: var(--muted-on-card); }

/* Mouvement reduit : couvre les animations infinies laissees de cote
   (CTA WhatsApp, bulle flottante, lisere tricolore du hero). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-wa-hero,
  .float-wa-btn,
  .float-wa-btn::before,
  .float-wa-btn::after,
  .float-wa-tip,
  .hero::after { animation: none; }
  .float-wa-tip { opacity: 1; transform: none; }
  .hero::after { width: 120px; opacity: 0.7; box-shadow: none; }
  .dv-card, .dv-chip, .dv-btn, .service-card, .btn-devis-hero,
  .btn-wa, .btn-wa-hero, .float-wa-btn { transition: none; }
}
/* ===== LOT4 ===== */

/* Texte reserve aux lecteurs d'ecran (annonce de l'etape en cours). */
.dv-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;
}

/* Focus visible sur les choix du formulaire : indispensable maintenant que
   les groupes se parcourent aux fleches. */
.dv-card:focus-visible,
.dv-chip:focus-visible,
.dv-btn:focus-visible,
.dv-back:focus-visible,
.dv-plus:focus-visible,
.dv-wa:focus-visible,
.dv-modal-close:focus-visible,
.site-search-toggle:focus-visible,
.site-search-clear:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
/* ===== LOT5 ===== */

/* Zone tactile du bouton "effacer la recherche" : 20x20 auparavant, sous le
   minimum de 24x24 du critere WCAG 2.5.8. */
.site-search-clear {
  width: 28px; height: 28px; min-width: 28px;
  padding: 0; border-radius: 50%;
  align-items: center; justify-content: center;
}
.site-search.has-text .site-search-clear { display: inline-flex; }

/* Placeholders : 3.18:1 auparavant, sous le seuil AA. --muted donne 5.37:1. */
.dv-input::placeholder,
.dv-textarea::placeholder { color: var(--muted); }

/* Intitules de groupe du menu : 3.31:1 auparavant, 7.9:1 avec --muted. */
.nav-sub-group { color: var(--muted); }

/* ===== FLUIDITE MENU + RECHERCHE ===== */

/* La gouttiere de scrollbar est reservee en permanence. Sans cela,
   body.nav-open { overflow: hidden } supprime la scrollbar et decale toute la
   page de ~15 px a l'instant precis ou le tiroir commence a glisser. */
html { scrollbar-gutter: stable; }

/* Le voile couvrait tout l'ecran avec un backdrop-filter dont l'opacite etait
   animee : le flou etait donc recalcule sur la totalite du viewport a chaque
   frame, pendant que le tiroir glissait. C'etait le cout dominant.
   On conserve l'assombrissement, legerement renforce, et on retire le flou. */
.nav-overlay {
  background: rgba(0,20,25,0.74);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity 0.26s ease, visibility 0s linear 0.26s;
}
.nav-overlay.open {
  transition: opacity 0.26s ease, visibility 0s linear 0s;
}

/* Couche promue a l'avance : evite l'a-coup de la premiere frame, quand le
   navigateur decouvre qu'il doit composer le tiroir. */
.nav-drawer {
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-sub {
  transition: max-height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Recherche --- */

.site-search-results {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.site-search-results.is-open {
  opacity: 1;
  transform: none;
}

@media (max-width: 768.98px) {
  /* display:none -> display:flex ne s'anime pas : le champ apparaissait d'un
     bloc. Il reste desormais en place, rendu inerte par visibility, et seules
     l'opacite et la position sont animees. */
  .site-search-field {
    display: flex;
    position: fixed;
    top: calc(var(--sb-h, 62px) + 8px);
    left: 12px; right: 12px;
    z-index: 1200;
    background: #012b33;
    padding: 0 10px 0 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .site-search.open .site-search-field {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-sub, .nav-overlay,
  .site-search-field, .site-search-results { transition: none; }
  .site-search-results { transform: none; }
}


/* ===== NAV PC ===== */

/* Les onglets n'existent que sur grand ecran. Cette regle vient AVANT la
   media query pour que celle-ci puisse la reactiver. */
.dnav { display: none; }

@media (min-width: 769px) {

  /* La navigation etant visible, le burger n'a plus d'objet sur PC.
     Le tiroir reste en place et sert toujours sous 769px. */
  .burger { display: none; }

  .dnav { display: block; flex: 1 1 auto; min-width: 0; margin-left: 18px; }
  .dnav-list {
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0; padding: 0;
  }
  .dnav-item { position: relative; }

  .dnav-link {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 13px; border-radius: 10px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
    color: var(--text); text-decoration: none; white-space: nowrap;
    transition: color 0.18s, background 0.18s;
  }
  .dnav-link:hover { color: var(--green); background: rgba(77,217,232,0.08); }
  .dnav-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  .dnav-link .chev {
    width: 13px; height: 13px; flex-shrink: 0;
    stroke: currentColor; fill: none; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.2s;
  }
  .dnav-item.is-open > .dnav-link { color: var(--green); background: rgba(77,217,232,0.08); }
  .dnav-item.is-open > .dnav-link .chev { transform: rotate(180deg); }

  /* Page courante : soulignement discret sous l'onglet concerne. */
  .dnav-item.is-current > .dnav-link { color: var(--green); }
  .dnav-item.is-current > .dnav-link::after {
    content: ''; position: absolute;
    left: 13px; right: 13px; bottom: 3px; height: 2px;
    background: var(--green); border-radius: 2px;
  }

  .dnav-panel {
    position: absolute; top: calc(100% + 12px); left: 0;
    min-width: 272px;
    background: #012b33;
    border: 1px solid rgba(77,217,232,0.25);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.5);
    padding: 8px;
    z-index: 1200;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  }
  .dnav-item.is-open .dnav-panel {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s;
  }
  /* Zone tampon invisible : la souris traverse l'ecart onglet/panneau
     sans declencher la fermeture. */
  .dnav-panel::before {
    content: ''; position: absolute;
    left: 0; right: 0; top: -12px; height: 12px;
  }

  .dnav-panel a {
    display: block; padding: 9px 12px; border-radius: 9px;
    color: var(--text); text-decoration: none;
    font-size: 0.88rem; font-weight: 500; line-height: 1.35;
    transition: color 0.15s, background 0.15s;
  }
  .dnav-panel a:hover { color: var(--green); background: rgba(77,217,232,0.09); }
  .dnav-panel a:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
  .dnav-panel a[aria-current="page"] { color: var(--green); }
  .dnav-panel a small {
    display: block; margin-top: 2px;
    color: var(--muted); font-size: 0.76rem; font-weight: 400;
  }
  .dnav-panel a.dnav-deep {
    padding-left: 28px; font-size: 0.84rem; color: var(--muted);
  }
  .dnav-panel a.dnav-deep::before { content: '–'; margin-right: 8px; opacity: 0.5; }
  .dnav-panel a.dnav-deep:hover { color: var(--green); }

  .dnav-sep { height: 1px; background: rgba(255,255,255,0.07); margin: 6px 4px; }
  .dnav-head {
    padding: 8px 12px 4px;
    font-size: 0.68rem; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--muted); font-weight: 700;
  }
  .dnav-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; min-width: 452px; }

  /* --- Recherche repliee en icone : libere les ~380 px pris par le champ --- */
  .site-search {
    position: relative;
    flex: 0 0 auto; max-width: none;
    margin: 0 8px 0 10px;
  }
  .site-search-toggle { display: inline-flex; }
  .site-search-field {
    position: absolute; top: calc(100% + 12px); right: 0; left: auto;
    width: 340px; z-index: 1200;
    background: #012b33;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .site-search.open .site-search-field {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
  }
  .site-search-results {
    left: auto; right: 0; width: 340px;
    top: calc(100% + 68px);
  }
}

/* Ecrans PC etroits : on resserre les onglets et on masque le numero en
   clair, le bouton WhatsApp restant l'action prioritaire. */
@media (min-width: 769px) and (max-width: 1120px) {
  .btn-tel { display: none; }
  .dnav { margin-left: 10px; }
  .dnav-link { padding: 9px 9px; font-size: 0.85rem; }
  .dnav-cols { min-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .dnav-link, .dnav-link .chev, .dnav-panel { transition: none; }
}


/* ===== NAV PC v2 ===== onglets elargis et repartis ===== */

@media (min-width: 769px) {

  .dnav { flex: 1 1 auto; min-width: 0; margin: 0 12px 0 20px; }

  /* Chaque onglet prend une part egale de l'espace disponible. La liste etait
     alignee a gauche dans un conteneur flex:1, donc tout l'espace libre
     s'accumulait en un seul vide entre le dernier onglet et la recherche. */
  .dnav-list { width: 100%; gap: 6px; }
  .dnav-item { flex: 1 1 0; min-width: 0; }
  .dnav-link {
    width: 100%;
    justify-content: center;
    padding: 12px 10px;
    font-size: 0.97rem;
    letter-spacing: 0.1px;
  }

  /* Page courante : fond teinte plutot qu'un trait. Sur un onglet large, un
     soulignement pleine largeur pesait trop. */
  .dnav-item.is-current > .dnav-link {
    background: rgba(77,217,232,0.12);
    color: var(--green);
  }
  .dnav-item.is-current > .dnav-link::after { content: none; }

  /* Le panneau se centre sous son onglet, devenu large. */
  .dnav-panel {
    left: 50%; right: auto;
    transform: translate(-50%, -6px);
  }
  .dnav-item.is-open .dnav-panel { transform: translate(-50%, 0); }
}

/* PC etroit : on resserre sans casser la repartition. */
@media (min-width: 769px) and (max-width: 1120px) {
  .dnav { margin: 0 8px 0 12px; }
  .dnav-link { padding: 11px 6px; font-size: 0.89rem; }
}


/* ===== NAV PC v3 ===== largeur plafonnee et bloc centre ===== */

@media (min-width: 769px) {
  /* flex-basis 700px sans croissance. Au-dela, l'espace restant est absorbe
     a parts egales par les marges auto : le bloc se centre entre le logo et
     la recherche au lieu de s'etirer. Sous 700px de place disponible, il
     retrecit normalement et remplit tout. */
  .dnav {
    flex: 0 1 700px;
    max-width: 700px;
    min-width: 0;
    margin: 0 auto;
  }
}

@media (min-width: 769px) and (max-width: 1120px) {
  .dnav { margin: 0 auto; }
}


/* ===== NAV PC v4 ===== onglets a gauche, recherche elargie, barre amincie ===== */

@media (min-width: 769px) {

  /* Onglets colles au logo : largeur naturelle, plus de plafond ni de marges
     auto. L'espace libre n'est donc plus absorbe ici mais par la recherche. */
  .dnav {
    flex: 0 0 auto;
    max-width: none;
    margin: 0 0 0 16px;
  }
  .dnav-list { width: auto; gap: 4px; }
  .dnav-item { flex: 0 0 auto; }
  .dnav-link { padding: 9px 14px; font-size: 0.94rem; }

  /* La recherche redevient un vrai champ visible et prend tout l'espace
     restant entre les onglets et les boutons d'action. */
  .site-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 460px;
    min-width: 190px;
    margin: 0 14px;
  }
  .site-search-toggle { display: none; }
  .site-search-field {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(255,255,255,0.06);
    transition: border-color 0.2s, background 0.2s;
  }
  .site-search-field:focus-within { background: rgba(77,217,232,0.10); }
  .site-search-results {
    left: 0; right: 0; width: auto;
    top: calc(100% + 10px);
  }

  /* --- Barre amincie --- */
  .sticky-bar { padding: 7px 22px; }
  .site-search input { padding: 8px 0; font-size: 0.88rem; }
  .btn-wa { padding: 8px 17px; font-size: 0.86rem; }
  .btn-tel { padding: 8px 15px; font-size: 0.9rem; }
  .sticky-bar .brand-name { font-size: 1.3rem; letter-spacing: 2.5px; }
}

@media (min-width: 769px) and (max-width: 1120px) {
  .dnav { margin: 0 0 0 10px; }
  .dnav-link { padding: 9px 9px; font-size: 0.87rem; }
  .site-search { margin: 0 10px; max-width: none; }
}


/* ===== BADGE CERTIBIOCIDE ===== */
/* Le logo officiel a un fond blanc et ne doit pas etre recolore : on le pose
   donc sur un cartouche clair plutot que de le detourer. */
.footer-cert { max-width: 200px; }
.footer-cert img {
  display: block;
  width: 100%; height: auto;
  background: #fdfefe;
  border-radius: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,0.14);
}
.footer-cert .cert-note {
  display: block;
  margin-top: 10px;
  font-size: 0.72rem; line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 620px) {
  .footer-cert { max-width: 170px; }
}


/* ===== NAV PC v5 ===== 7 onglets : densite fluide et seuil releve ===== */

@media (min-width: 769px) {
  /* Padding et corps varient continument avec la largeur, plutot que par
     paliers devines : la barre se resserre d'elle-meme sans rupture. */
  .dnav { flex: 0 1 auto; min-width: 0; }
  .dnav-list { flex-wrap: nowrap; gap: 2px; }
  .dnav-link {
    padding: 9px clamp(6px, 0.85vw, 15px);
    font-size: clamp(0.8rem, 0.55vw + 0.46rem, 0.95rem);
  }

  /* La recherche cede la place en premier : elle peut retrecir jusqu'a
     rester utilisable, les onglets non. */
  .site-search { max-width: 400px; min-width: 150px; }
}

/* Sous 1200px, sept onglets plus la recherche plus les deux boutons ne
   tiennent plus. On rend la main au burger, qui reste complet. */
@media (min-width: 769px) and (max-width: 1199.98px) {
  .dnav { display: none; }
  .burger { display: inline-flex; }
}

/* Entre 1200 et 1699px, les onglets, le champ de recherche et les boutons
   ne tenaient pas ensemble : le champ recouvrait « A propos », « Contact »
   et « Retour au site » sur 31 pages sur 32 (mesure Chrome du 14/09/2026).
   Decision client du 14/09/2026 : la recherche se replie en loupe jusqu'a
   1699px, comme elle le faisait deja sous 1200px. Les onglets restent. */
@media (min-width: 769px) and (max-width: 1699.98px) {
  .site-search {
    position: relative;
    flex: 0 0 auto; max-width: none; min-width: 0;
    margin: 0 8px 0 10px;
  }
  .site-search-toggle { display: inline-flex; }
  .site-search-field {
    position: absolute; top: calc(100% + 12px); right: 0; left: auto;
    width: 340px; z-index: 1200; background: #012b33;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .site-search.open .site-search-field {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
  }
  .site-search-results { left: auto; right: 0; width: 340px; top: calc(100% + 68px); }
}

/* Le numero en clair ne reapparait que lorsqu'il reste vraiment de la place. */
@media (min-width: 1200px) and (max-width: 1519.98px) {
  .btn-tel { display: none; }
}
@media (min-width: 1520px) {
  .btn-tel { display: inline-flex; }
  .site-search { max-width: 440px; }
}


/* ===== ONGLET CONTACT ===== mise en avant dans la barre ===== */

@media (min-width: 769px) {
  /* Detache du groupe de navigation par un filet vertical : Contact n'est
     pas une rubrique de plus, c'est la sortie vers le devis. */
  .dnav-contact {
    position: relative;
    margin-left: 10px;
    padding-left: 12px;
  }
  .dnav-contact::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 18px;
    background: var(--border);
  }

  /* Fond teinte plutot que plein : reconnaissable au premier coup d'oeil,
     sans venir concurrencer le bouton WhatsApp qui reste l'action primaire. */
  .dnav-contact .dnav-link {
    background: rgba(77,217,232,0.11);
    color: var(--green);
    font-weight: 700;
  }
  .dnav-contact .dnav-link:hover {
    background: rgba(77,217,232,0.21);
    color: var(--accent2);
  }
  .dnav-ico {
    width: 15px; height: 15px; flex-shrink: 0;
    stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* Sous 1360px l'icone part en premier : le libelle seul reste lisible. */
  @media (max-width: 1360px) {
    .dnav-ico { display: none; }
    .dnav-contact { margin-left: 8px; padding-left: 10px; }
  }
}


/* ─── Recapitulatif de l'etape 3 (audit UX du 22/08/2026) ───
   Six reponses sont donnees aux etapes 1 et 2 et aucune n'etait plus
   visible au moment d'envoyer : on demandait de valider une demande dont
   on ne voyait plus le contenu. Chaque ligne ramene a son etape.

   Aucune couleur en dur : le bloc THEME CLAIR plus bas redefinit ces
   variables, donc ce bloc suit les deux themes sans surcharge. */
/* Le panneau actif recoit le focus au changement d etape (voir app.js)
   pour ne pas laisser le clavier retomber sur <body>. Il n est pas
   atteignable au Tab - tabindex=-1 - donc son contour de focus ne
   signale rien a personne et dessine un cadre autour de l etape. */
.dv-panel:focus,
.dv-modal-box:focus { outline: none; }

.dv-recap-t {
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  opacity: 0.7; margin: 0 0 8px;
}
.dv-recap { display: grid; gap: 6px; margin-bottom: 24px; }
.dv-recap-l {
  display: grid; grid-template-columns: minmax(84px, auto) 1fr auto;
  align-items: center; gap: 12px;
  width: 100%; min-height: 44px; padding: 8px 14px;
  background: var(--dark2); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text);
  font-family: var(--font-body); font-size: 0.86rem; text-align: left;
  cursor: pointer;
  transition: border-color 0.2s;
}
.dv-recap-l:hover { border-color: var(--green); }
.dv-recap-l:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.dv-recap-l span { opacity: 0.7; font-size: 0.78rem; }
.dv-recap-l strong { font-weight: 600; }
.dv-recap-l em { font-style: normal; color: var(--green); font-size: 0.78rem; }

/* Hauteur tactile des pastilles (audit UX du 22/08/2026) : elles
   mesuraient ~37 px, au-dessus du minimum WCAG 2.2 AA (24 px) mais sous
   les 44 px recommandes au doigt - alors que ce sont les cibles les plus
   cliquees du tunnel. inline-flex plutot que le centrage par defaut du
   bouton : la hauteur imposee doit rester centree meme sur deux lignes. */
.dv-chip { min-height: 44px; display: inline-flex; align-items: center; }


/* Texte lu par les lecteurs d'ecran, invisible a l'ecran : annonce du
   nombre de resultats de la recherche (voir app.js). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* LIENS DE CONVERSION SOULIGNES */
/* WCAG 1.4.1 : un lien au fil du texte ne se distinguait que par sa couleur,
   a 2,59:1 du texte voisin quand 3:1 sont exiges (axe-core, 14/09/2026).
   Decision client du 14/09/2026 : seuls les liens menant a une conversion
   sont soulignes - contact direct, pages services, tarifs. Les liens vers
   les guides, les sources, a propos et les pages legales restent en l'etat,
   donc toujours en defaut sur ce critere : choix assume. Liens de paragraphe
   seulement : les listes de services des pages zones n'etaient pas en cause. */
main p > a:not([class]):is(
  [href^="mailto:"], [href^="tel:"], [href*="wa.me/"],
  [href="debarras.html"], [href$="/debarras.html"], [href^="debarras.html#"], [href*="/debarras.html#"],
  [href="nettoyage-diogene.html"], [href$="/nettoyage-diogene.html"], [href^="nettoyage-diogene.html#"], [href*="/nettoyage-diogene.html#"],
  [href="nettoyage-insalubre.html"], [href$="/nettoyage-insalubre.html"], [href^="nettoyage-insalubre.html#"], [href*="/nettoyage-insalubre.html#"],
  [href="decontamination-post-mortem.html"], [href$="/decontamination-post-mortem.html"], [href^="decontamination-post-mortem.html#"], [href*="/decontamination-post-mortem.html#"],
  [href="desinfection.html"], [href$="/desinfection.html"], [href^="desinfection.html#"], [href*="/desinfection.html#"],
  [href="nettoyage-locaux-professionnels.html"], [href$="/nettoyage-locaux-professionnels.html"], [href^="nettoyage-locaux-professionnels.html#"], [href*="/nettoyage-locaux-professionnels.html#"],
  [href="tarifs.html"], [href$="/tarifs.html"], [href^="tarifs.html#"], [href*="/tarifs.html#"]
) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ===== THEME CLAIR ===== fonds blancs sur tout le site ===== */
/* Le site etait concu en mode sombre : texte clair, traits blancs
   semi-transparents, ombres profondes. Passer les fonds au blanc sans
   toucher au reste rendait des pans entiers illisibles. Ce bloc bascule
   la palette entiere, ce qui supprime la cause au lieu de rustiner.
   Seul le hero reste sombre : son texte est pose sur une photo.
   Pour revenir en arriere : supprimer ce bloc dans les 7 feuilles. */

:root {
  --dark: #f5f8f8;              /* fond de page, casse et visible */
  --dark2: #e6edef;             /* sections alternees */
  --card: #fdfefe;              /* cartes, formulaire, panneaux */
  --text: #0c2b31;              /* encre principale, 13.99:1 sur le fond */
  --muted: #456066;             /* encre secondaire, 6.31:1 sur le fond */
  --muted-on-card: #456066;
  --border: rgba(0,50,59,0.16);
  --accent: #0a6b7c;
  --accent2: #0a6b7c;
  --green: #0a6b7c;             /* 5.77 sur le fond, 5.20 sur les sections */
  --price: #a9541f;             /* terracotta des prix, 5.28:1 sur blanc */
  --green2: #095c6b;
  --wa: #4dd9e8;                /* aplat WhatsApp, garde vif */
  --wa-dark: #2ec9da;
  --on-accent: #06242a;         /* encre sur aplat cyan vif */
}

body { background: var(--dark); color: var(--text); }

/* ── Barre du haut, panneaux et surfaces flottantes ── */
.sticky-bar { background: rgba(255,255,255,0.94); border-bottom: 1px solid var(--border); }
.sticky-bar .brand-name, .footer-brand-name, .nav-drawer-brand { color: var(--text); }
.dnav-panel, .site-search-results { background: #fdfefe; border-color: var(--border); box-shadow: 0 14px 34px rgba(0,50,59,0.13); }
.nav-drawer { background: #fdfefe; border-right: 1px solid var(--border); }
.nav-drawer-head { background: #fdfefe; }
.nav-sub { background: rgba(0,50,59,0.035); }
.mbar { background: rgba(255,255,255,0.97); border-top: 1px solid var(--border); box-shadow: 0 -4px 18px rgba(0,50,59,0.10); }
.site-search-field { background: rgba(0,50,59,0.04); border-color: rgba(11,127,146,0.28); }
.site-search-field:focus-within { background: rgba(11,127,146,0.06); }
.burger { background: rgba(0,50,59,0.04); }
.burger-lines span { background: var(--text); }
.site-search-toggle { background: rgba(11,127,146,0.06); border-color: rgba(11,127,146,0.28); }

/* ── Cartes et champs ── */
.service-card, .review-card, .faq-item, .zone-tag, .dv-form,
.formule-card, .dv-contact-item {
  background: #fdfefe;
  border-color: var(--border);
}
.service-card, .services-cta { box-shadow: 0 1px 2px rgba(0,50,59,0.06), 0 6px 18px rgba(0,50,59,0.07); }
.service-card:hover { box-shadow: 0 2px 4px rgba(0,50,59,0.08), 0 16px 34px rgba(0,50,59,0.12); }
.dv-input, .dv-textarea { background: rgba(0,50,59,0.04); border-color: var(--border); }
.dv-card, .dv-chip { background: rgba(0,50,59,0.03); border-color: var(--border); }
.service-urgence { background: rgba(11,127,146,0.08); border-color: rgba(11,127,146,0.20); }
.sc-prix { color: var(--price); }
.services-cta { background: linear-gradient(120deg, rgba(11,127,146,0.09), rgba(11,127,146,0.02) 62%), #fdfefe; border-color: rgba(11,127,146,0.24); }

/* ── Encre posee sur les aplats ── */
.dv-btn, .sc-cta-btn, .btn-devis-hero, .sc-flag { color: #ffffff; }
.sc-cta-btn svg, .btn-devis-hero svg, .mbar-devis-circle svg { stroke: #ffffff; }
.btn-wa, .btn-wa-hero, .cta-big-wa, .dv-wa, .skip-link { color: var(--on-accent); }
.btn-wa svg, .btn-wa-hero svg, .cta-big-wa svg, .dv-wa svg { fill: var(--on-accent); }
.float-wa-btn svg { fill: var(--on-accent); }

/* ── Le hero garde un fond sombre : son texte est sur une photo ── */
.hero, .hero .subtitle, .hero .trust-row, .urgence-badge, .hero .fr-badge-pro { color: #eef5f6; }
.hero h1, .hero h1 em { color: #ffffff; }
.hero h1 em { color: #7fe3ef; }
.hero-rating { color: #dbe9eb; background: rgba(0,40,48,0.55); border-color: rgba(255,255,255,0.18); }
.hero-rating strong, .trust-row .tick, .ub-heure { color: #7fe3ef; }
.ub-etat { color: #ffffff; }
.ub-detail, .hero .fr-badge-pro .siret, .hero .fr-badge-pro .sep { color: #c3d9dc; }
.urgence-badge, .hero .fr-badge-pro { border-color: rgba(255,255,255,0.20); background: rgba(255,255,255,0.07); }
.hero .fr-badge-pro:hover { border-color: rgba(77,217,232,0.25); background: rgba(255,255,255,0.1); }
.dot-live { background: #4dd9e8; }
.btn-tel-hero { color: #eef5f6; border-color: rgba(255,255,255,0.28); }
.btn-tel-hero:hover { color: #ffffff; border-color: #7fe3ef; }
.hero .cert-badge .cert-icon { color: #7fe3ef; }

/* ── Pied de page ── */
footer { background: var(--dark2); border-top: 1px solid var(--border); }
.footer-col a, .footer-col p { color: var(--text); }
.footer-bottom, .footer-desc, .footer-col h2 { color: var(--muted); }

/* ── Divers ── */
.scroll-progress { box-shadow: 0 0 8px rgba(11,127,146,0.35); }
.nav-overlay { background: rgba(0,32,38,0.42); }
.ba-pair-shots { background: var(--border); }
.faq-a a, .zone-hors-idf a, .services-note a { color: var(--green); }
.dv-err { color: #b3261e; }
.dv-input.has-err, .dv-textarea.has-err { border-color: #b3261e; }
.avis-google { border-color: var(--border); }
.footer-cert img { background: #fdfefe; border-color: var(--border); }

/* --- Corrections de lisibilite relevees apres bascule en clair --- */
/* Le gris-bleu du placeholder tombait a 1.62:1 sur blanc. */
.dv-input::placeholder,
.dv-textarea::placeholder { color: #4e6f75; }
/* Les etoiles dorees etaient a 1.44:1 : invisibles sur fond blanc. */
.stars, .hr-stars { color: #8a6d0b; }
/* Le rouge clair des contre-exemples etait a 2.02:1. */
.compare-card.bad h3,
.compare-card.bad .compare-list li::before { color: #b3261e; }

/* Carrousel des avis : le bloc de base vient du mode sombre. Points et
   fleches y sont poses en blanc translucide et en cyan, invisibles ou trop
   pales sur fond clair. Repris ici sur l'encre du theme. */
.reviews-arrow {
  background: rgba(10,107,124,0.08);
  border-color: rgba(10,107,124,0.35);
  color: var(--green);
}
.reviews-arrow:hover { background: rgba(10,107,124,0.16); border-color: var(--green); }
/* Pastille inactive : rgba(12,43,49,0.22) donnait 1,54:1 mesure au rendu sur
   le fond de section, la ou WCAG 1.4.11 demande 3:1 pour un composant. Couleur
   pleine : 3,24:1 sur #e6edef et 3,60:1 sur #f5f8f8. */
.reviews-dot { background: #6f868c; }
.reviews-dot:hover { background: rgba(10,107,124,0.55); }
.reviews-dot.active { background: var(--green); }
.review-card:hover { border-color: rgba(10,107,124,0.3); }
/* Les etoiles de la note Google (fond de section, pas la carte) etaient a
   1.22:1 avec la couleur sombre de base : assombries specifiquement pour ce
   fond, plus clair que la carte. Le rouge/or de .stars sur la carte est deja
   corrige plus haut, a une valeur qui ne convient pas a ce fond-ci. */
.avis-note-etoiles { color: #7c620a; }


/* ===== THEME CLAIR : correctifs mobile ===== */
/* Quatre points que la bascule en clair avait laisses de cote, tous
   visibles surtout sur telephone. */

/* 1. Le degrade du hero se terminait sur var(--dark), passe au blanc :
      la rangee de gages, en texte clair, devenait invisible en bas. */
.hero {
  background:
    linear-gradient(180deg,
      rgba(0,40,48,0.88) 0%,
      rgba(0,50,59,0.64) 45%,
      rgba(0,50,59,0.88) 82%,
      #00323b 100%),
    url('../photos/hero-banner.jpg') center center / cover no-repeat;
  background:
    linear-gradient(180deg,
      rgba(0,40,48,0.88) 0%,
      rgba(0,50,59,0.64) 45%,
      rgba(0,50,59,0.88) 82%,
      #00323b 100%),
    image-set(url('../photos/hero-banner.webp') type('image/webp'), url('../photos/hero-banner.jpg') type('image/jpeg')) center center / cover no-repeat;
}

/* Sur mobile, deux barres fixes floutees au-dessus d'un contenu qui defile
   obligent le navigateur a recomposer la scene a chaque image. Les fonds
   deviennent opaques : rendu identique, cout supprime. */
@media (max-width: 768.98px) {
  .sticky-bar { background: #fdfefe; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mbar { background: #fdfefe; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 2. Le champ de recherche mobile gardait un fond #012b33 : sa regle est
      plus specifique que celle du theme, on la reprend a l'identique. */
@media (max-width: 768.98px) {
  .site-search.open .site-search-field {
    background: #fdfefe;
    border-color: rgba(11,127,146,0.34);
    box-shadow: 0 12px 30px rgba(0,50,59,0.16);
  }
  .site-search-results {
    background: #fdfefe;
    box-shadow: 0 12px 30px rgba(0,50,59,0.16);
  }
}

/* 3. Les entrees de second niveau du tiroir etaient en gris-bleu clair,
      autour de 2:1 sur un tiroir devenu blanc. */
.nav-sub-deep a { color: var(--muted); }
.nav-sub-deep a::before { color: rgba(12,43,49,0.38); }

/* 6. Le hero est reste sombre, mais plusieurs de ses textes pointaient
      encore vers des variables passees en encre foncee : ils devenaient
      sombres sur fond sombre. Le scanner de contraste ne les voyait pas,
      il ne testait que le fond blanc. */

/* Les trois gages passent en cyan vif, comme demande — uniquement dans
   le hero sombre. Hors hero (ex. bandeau Stats), ces badges restent sur
   fond clair et gardent l'encre par defaut du theme clair (contraste
   verifie separement). */
.hero .fr-badge-pro strong { color: #4dd9e8; font-weight: 700; }
.hero .cert-badge .cert-icon,
.hero .cert-badge:hover .cert-icon { color: #4dd9e8; }

/* Etoiles de la note : dorees sur le hero sombre. Celles des avis, sur
   fond blanc, gardent leur or fonce. */
.hr-stars { color: #ffd166; }

/* Au survol, la pastille de note virait a l'encre foncee. */
.hero-rating:hover { color: #ffffff; border-color: #4dd9e8; }

/* 5. Bouton "Obtenir mon devis gratuit" du hero : desormais en contour
      (niveau 2 de la hierarchie des CTA), il ne doit pas reprendre l'aplat
      de .sc-cta-btn. Sur le hero, qui reste sombre meme en theme clair,
      --green (fonce en theme clair) est trop peu visible : le trait et le
      texte reprennent donc le cyan vif de WhatsApp. .sc-cta-btn, qui vit
      sur fond blanc ailleurs, garde son aplat. Le fond rgba(0,40,48,0.55)
      de la regle de base (index.css:1897) n'est pas ecrase ici : il reste
      necessaire pour rendre le contraste independant de la photo du hero. */
.sc-cta-btn {
  background: linear-gradient(135deg, var(--wa), var(--wa-dark));
  color: var(--on-accent);
  box-shadow: 0 8px 26px rgba(77,217,232,0.34);
}
.sc-cta-btn:hover { box-shadow: 0 14px 36px rgba(77,217,232,0.44); }
.sc-cta-btn svg { stroke: var(--on-accent); }
.btn-devis-hero {
  color: #ffffff;
  border-color: #4dd9e8;
}
.btn-devis-hero:hover {
  border-color: #2ec9da;
}

/* --- Couleur d'action unique ---
   Les boutons de devis restaient sur --green, fonce par le theme clair pour
   rester lisible en texte. Ils rejoignent le cyan vif de WhatsApp, avec
   l'encre foncee qui donne 9,59:1 dessus. Une seule couleur d'action sur
   tout le site. */
.dv-btn {
  background: linear-gradient(135deg, var(--wa), var(--wa-dark));
  color: var(--on-accent);
  box-shadow: 0 6px 20px rgba(77,217,232,0.26);
}
.dv-btn:hover { box-shadow: 0 10px 28px rgba(77,217,232,0.36); }
.mbar-devis-circle {
  background: linear-gradient(135deg, var(--wa), var(--wa-dark));
  box-shadow: 0 6px 18px rgba(77,217,232,0.34);
}
.mbar-devis-circle svg { stroke: var(--on-accent); }

/* --- Textes restes en var(--dark), devenu blanc ---
   Ces elements sont poses sur des surfaces BLANCHES : l'infobulle du bouton
   WhatsApp flottant et la pastille du comparateur avant/apres. Ils
   devenaient blanc sur blanc. */
.float-wa-tip strong { color: var(--text); }
.ba-slider .ba-handle-circle,
.ba-slider .ba-handle-circle::before { color: #0c2b31; }


/* ===== CORRECTIFS DE LISIBILITE ===== */

:root {
  --green: #0a7080;
  --accent: #0a7080;
  --accent2: #0a7080;
}

/* Le tiret des entrees de second niveau du tiroir etait a 2.27:1. */
.nav-sub-deep a::before { color: var(--muted); }



/* --- Comparateur : latence pendant le glissement ---
   img-avant et la poignee portaient une transition de 0,05 s. Rejouee a
   chaque mouvement du doigt, elle faisait trainer le curseur derriere le
   geste. On la coupe pendant le glissement, on la garde pour les sauts au
   clavier et le retour a 50 %. */
.ba-slider.is-dragging .img-avant,
.ba-slider.is-dragging .ba-handle { transition: none; }
.ba-slider.is-dragging { cursor: grabbing; }
/* Previent le navigateur que ces deux couches vont bouger. */
.ba-slider .img-avant { will-change: clip-path; }
.ba-slider .ba-handle { will-change: left; }
/* Le badge du pied de page mene a la page qui explique la certification.
   Regle repliquee dans les 7 feuilles : le pied de page est partage. */
.cert-link {
  display: block;
  border-radius: 10px;
  transition: opacity 0.2s, transform 0.2s;
}
.cert-link:hover { opacity: 0.82; transform: translateY(-2px); }
.cert-link:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

/* CTA de fin de galerie Avant/Apres : pic d'intention du parcours. */
.ba-cta { margin-top: 40px; text-align: center; }
.ba-cta p { max-width: 46ch; margin: 0 auto 20px; color: var(--muted); }
@media (max-width: 768.98px) {
  .ba-cta { margin-top: 28px; }
  .ba-cta .cta-big-wa { width: 100%; justify-content: center; }
}

/* CTA de fin de FAQ : dernier point de decision de la page. */
.faq-cta { margin-top: 44px; text-align: center; }
.faq-cta p { max-width: 48ch; margin: 0 auto 22px; color: var(--muted); }
.faq-cta-row { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; }
.faq-cta-row .cta-big-wa { margin-bottom: 0; }
@media (max-width: 768.98px) {
  .faq-cta { margin-top: 30px; }
  .faq-cta-row { flex-direction: column; }
  .faq-cta-row .cta-big-wa,
  .faq-cta-row .sc-cta-btn { width: 100%; justify-content: center; }
}

/* ===== BARRE MOBILE : WhatsApp + devis, deux entrees pleine largeur =====
   La demande client retire Accueil et Appeler : il ne reste que les deux
   canaux de conversion, chacun un vrai bouton CTA (plein pour WhatsApp,
   contour pour le devis) plutot que des onglets de navigation. Les blocs
   "refonte" et "v2" ci-dessus sont retires : ils ne decrivaient plus que
   des entrees qui n'existent plus, garder une couche morte aurait ete la
   meme dette qu'ils denoncaient chacun en arrivant.
   Repartition 60/40 (WhatsApp/devis) : WhatsApp reste le canal n 1 de la
   hierarchie du projet, le devis le n 2. Calculs de largeur, contrastes et
   hauteur detailles dans le rapport de la tache. */

@media (max-width: 768.98px) {

  .mbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1150;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,0.93);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 0;
    border-top: 1px solid rgba(0,50,59,0.11);
    box-shadow: none;
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
  }

  /* ─── Repli pendant le hero (07/09/2026) ───
     Mesure sur un ecran de 390x844 : la barre recouvrait 44 des 54 px du
     bandeau defilant. Les six arguments de reassurance etaient donc
     invisibles a l'arrivee, alors que c'est le premier ecran qui decide.
     La barre se retire tant que le hero est a l'ecran et remonte des qu'il
     est passe : le visiteur qui defile a deja lu le bandeau.
     L'etat replie est pose des le HTML (class="mbar is-repliee") : le poser
     en JavaScript ferait clignoter la barre le temps du premier calcul.
     C'est donc le <noscript> du <head> qui la retablit sans JavaScript. */
  .mbar.is-repliee {
    /* 110 % et non 100 % : l'ombre et le liseré du haut doivent sortir
       eux aussi, sinon un trait clair reste colle au bas de l'ecran. */
    transform: translateY(110%);
  }

  /* Zone tactile commune : 48px de haut, au-dessus du minimum de 44px. */
  .mbar-item.is-wa,
  .mbar-devis {
    position: relative;
    flex: 1 1 0; min-width: 0;
    min-height: 48px;
    margin: 0; padding: 0 10px;
    display: flex; flex-direction: row;
    align-items: center; justify-content: center;
    gap: 8px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.75rem; font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1px;
    text-decoration: none; cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s, opacity 0.16s;
  }
  .mbar-item.is-wa svg,
  .mbar-devis-circle svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
  }

  /* WhatsApp : canal n 1, bouton plein. Icone et texte en --on-accent sur
     l'aplat --wa-dark : 8,10:1 mesure. Du blanc y tomberait a 2,00:1. */
  .mbar-item.is-wa {
    flex: 3 1 0;
    background: var(--wa-dark);
    color: var(--on-accent);
  }
  .mbar-item.is-wa svg { fill: var(--on-accent); stroke: none; }
  .mbar-item.is-wa:active { background: var(--wa); }
  .mbar-item.is-wa:focus-visible { outline: 2px solid var(--on-accent); outline-offset: -3px; }

  /* Devis : canal n 2, bouton en contour. Fond OPAQUE (#ffffff, pas
     transparent) : le bouton est fixe au-dessus d'un contenu qui defile
     (hero sombre, galerie avant/apres, sections --dark2). Sans fond propre,
     le bouton aurait laisse voir le fond translucide de .mbar
     (rgba(255,255,255,0.93) + blur), compose avec ce qui defile derriere :
     4,11:1 mesure sur photo sombre, 4,02:1 sur noir, sous le seuil.
     Texte et bordure en --green sur ce blanc opaque : 4,70:1 mesure, stable
     quel que soit le contenu qui defile derriere la barre. */
  .mbar-devis {
    flex: 2 1 0;
    background: #fdfefe;
    border: 2px solid var(--green);
    color: var(--green);
  }
  .mbar-devis-circle {
    width: auto; height: auto;
    margin: 0; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    display: flex; align-items: center; justify-content: center;
  }
  .mbar-devis-circle svg {
    stroke: var(--green); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  /* Etat actif signale par la bordure (--green2, 6,16:1 sur blanc), pas
     par une teinte de fond : une teinte de --green a 8% d'opacite, meme
     rendue opaque sur blanc, ne donne que 4,24:1 (mesure), sous le seuil.
     Le fond reste #ffffff, identique au repos (4,70:1 stable). */
  .mbar-devis:active { background: #fdfefe; border-color: var(--green2); }
  .mbar-devis:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }

  /* Place reservee sous le contenu : hauteur reelle de la barre = 10px
     padding-top + 48px bouton (min-height, dominant sur l'icone 18px et sur
     la boite de ligne du libelle 0.75rem x 1.2 = 12px x 1.2 = 14,4px, les
     deux tenant dans les 48px sans le forcer) + 10px padding-bottom + 1px
     border-top = 69px. Reserve a 75px : marge de +6px. */
  body { padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px)); }

  /* La bulle WhatsApp flottante ferait doublon avec la barre. */
  .float-wa { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mbar-item.is-wa, .mbar-devis { transition: none; }
  /* Le repli reste, le glissement disparait : la barre apparait et
     disparait d'un coup. C'est le mouvement qui gene, pas la regle. */
  .mbar { transition: none; }
}

/* ═══════════ BARRE DU HAUT SUR MOBILE : TELEPHONE ═══════════
   Le bouton WhatsApp cede la place au numero, cliquable pour appeler.
   WhatsApp reste accessible sur la barre fixe du bas et sur le bouton
   flottant : le canal n'est pas retire du site, il est deplace.
   Le lien wa.me reste dans le HTML, seul son affichage change.
   Regle posee en fin de feuille a dessein : sur six feuilles sur sept,
   « .btn-tel { display: none } » vit dans un media TABLETTE (769-1120px)
   et non dans le bloc mobile. S'y greffer aurait cache WhatsApp sur
   tablette sans rien changer sur telephone.
   Portee limitee a .sticky-ctas : le bouton WhatsApp du tiroir de
   navigation n'est pas concerne. */
@media (max-width: 768.98px) {
  .sticky-ctas .btn-tel {
    display: inline-flex;
    align-items: center;
    /* min-height explicite plutot qu'un padding calcule : avec padding
       seul la hauteur depend des metriques de la police et tombait a
       43 px, sous le minimum de 44 que ce site s'impose deja pour la
       barre du bas. Un min-height ne depend de rien. */
    min-height: 44px;
    padding: 8px 16px;
    font-size: 0.86rem;
  }
}

/* ═══════════ BARRE DU HAUT : BOUTON DEVIS ═══════════
   Remplace le bouton WhatsApp, retire de cette barre a la demande du
   client. Le devis y devient le canal de grand ecran, le telephone celui
   du mobile. WhatsApp reste partout ailleurs sur le site.
   Aplat --green a --green2 avec encre blanche : 5,77:1 au point le plus
   clair du degrade, au-dessus des 4,5 exiges. */
.btn-devis-bar {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--green), var(--green2));
  color: #ffffff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.9rem;
  padding: 10px 20px; border-radius: 50px;
  border: none; cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.2s;
}
.btn-devis-bar:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10,112,128,0.28); }

/* Sur mobile la barre du haut ne porte QUE le telephone : le devis y est
   deja present sur la barre fixe du bas, l'y remettre ferait doublon et
   surchargerait une largeur de 375 px. */
@media (max-width: 768.98px) {
  .sticky-ctas .btn-devis-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-devis-bar { transition: none; }
  .btn-devis-bar:hover { transform: none; }
}

/* ═══════════ FIN DE FEUILLE — OU AJOUTER UNE REGLE ═══════════
   Le bloc THEME CLAIR commence ligne 2824 et court jusqu'ici. Il
   redefinit la palette entiere et surcharge les regles de base.

   Une regle de base ajoutee SOUS ce commentaire passe donc APRES le theme
   et l'ecrase — sur toutes les pages, en silence, sans qu'aucun controle du
   harnais ne le voie. L'erreur a ete commise le 09/08 en portant la grille
   des prestations : 303 lignes ajoutees en fin de fichier auraient annule
   le theme clair sur les cartes.

   Ou ajouter :
   - une regle de base (structure, geometrie, palette sombre) : AVANT la
     ligne 2824
   - une surcharge de theme clair : dans le bloc, avec les autres
   - une regle qui doit gagner sur tout : ici, et le dire en commentaire */