/* ══════════════════════════════════════════════════════════════════════════
   DMS SYSTEM — Feuille de style

   DIRECTION ARTISTIQUE — « Bleu de chantier »
   ---------------------------------------------------------------------------
   Bleu nuit profond + cyan électrique. Le site avance par ZONES DE COULEUR :
   nuit (hero) → clair (métiers) → nuit (dépannage + aides) → clair → nuit
   (pied de page). Chaque zone a sa matière : grain, trame de points, filets
   diagonaux. La navigation est en verre : sombre au repos, blanche au
   défilement. Les cartes flottent avec des ombres colorées, jamais grises.

   SOMMAIRE
     1. Tokens                    10. Aides & RGE (zone sombre)
     2. Base & utilitaires        11. Réalisations
     3. Boutons                   12. Entreprise
     4. Bascule d'univers         13. Contact & formulaire
     5. En-tête en verre          14. Partenaires
     6. Hero                      15. Pied de page & flottants
     7. Ticker services           16. Animations
     8. Cartes métiers
     9. Sections métiers · Dépannage · Avis
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. TOKENS ─────────────────────────── */
:root {
  /* Zones claires */
  --white:      #FFFFFF;
  --slate-50:   #F8FAFC;
  --slate-100:  #F1F5F9;
  --slate-200:  #E2E8F0;
  --slate-300:  #CBD5E1;

  /* Zones sombres */
  --navy-900:   #0F172A;
  --navy-950:   #080F1E;

  /* Texte */
  --ink:        #0F172A;
  --ink-soft:   #334155;
  --muted:      #64748B;

  /* Marque + accent vif */
  --primary:      #1B5A9E;
  --primary-2:    #2571C0;
  --primary-dark: #14477E;
  --electric:     #0EA5E9;
  --electric-2:   #38BDF8;
  --electric-3:   #7DD3FC;
  --electric-soft:#E0F2FE;
  --steel:        #A8C5E2;

  --alert: #DC2626;
  --amber: #B45309;
  --green: #059669;

  /* Plus Jakarta Sans — grotesque géométrique, ouverte et très lisible.
     La chaîne de repli reste renseignée : si Google Fonts est injoignable,
     le texte s'affiche dans une police système proche plutôt qu'en serif. */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rythme */
  --wrap: 1180px;
  --gut: 20px;
  --sec-y: 72px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  /* Ombres — la carte de référence demandée, plus deux crans */
  --sh-card:  0 10px 25px -5px rgba(15, 23, 42, .10), 0 4px 8px -4px rgba(15, 23, 42, .05);
  --sh-hover: 0 20px 45px -12px rgba(14, 165, 233, .35), 0 8px 16px -8px rgba(15, 23, 42, .12);
  --sh-deep:  0 30px 60px -18px rgba(15, 23, 42, .32);
  --sh-btn:   0 4px 14px -4px rgba(27, 90, 158, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
  --sh-btn-h: 0 14px 30px -8px rgba(14, 165, 233, .65), inset 0 1px 0 rgba(255, 255, 255, .25);

  --tr: all .3s ease;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 900px) { :root { --gut: 32px; --sec-y: 110px; } }

/* ───────────────────── 2. BASE & UTILITAIRES ───────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* PAS de `scroll-padding-top` ici : il s'AJOUTERAIT au `scroll-margin-top` des
   sections (mesuré : 130 + 130 = 260 px d'arrêt, soit deux fois trop bas).
   Le décalage est géré à un seul endroit, sur les cibles elles-mêmes. */
/* overflow-x sur html ET body : sur iOS, la règle posée sur body seul ne
   suffit pas à bloquer le glissement horizontal (le débordement remonte au
   viewport). Les deux sont nécessaires. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 17px; } }
body.is-locked { overflow: hidden; }

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

h1, h2, h3 { margin: 0; font-weight: 600; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; letter-spacing: -.02em; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.55rem); line-height: 1.12; letter-spacing: -.03em; }
h3 { font-size: clamp(1.18rem, 1.8vw, 1.38rem); line-height: 1.32; letter-spacing: -.018em; }

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

a { color: var(--primary); text-decoration: none; transition: var(--tr); }
a:hover { color: var(--electric); }

ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }

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

.i {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 11px 20px; border-radius: var(--r-sm);
  background: var(--electric); color: #fff; font-weight: 600;
  transition: var(--tr);
}
.skip-link:focus { top: 12px; color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/*
   ANCRAGE DU MENU — l'en-tête est collant (position: sticky). Sans cette marge,
   un clic sur une entrée de menu amènerait le titre de section SOUS l'en-tête.
   C'est l'UNIQUE source du décalage : posé sur les cibles, il vaut aussi bien
   pour un clic sur un lien d'ancre que pour un scrollIntoView() déclenché par
   un script tiers (le widget Elfsight, par exemple).
   `#main` est inclus : c'est la cible du lien d'évitement clavier.
   Valeur portée à 130 px : l'en-tête mesure 78 px, mais les sections ouvrent
   sur un badge (.eyebrow) avant leur titre. À 100 px le badge arrivait collé
   sous l'en-tête ; 130 px dégage le titre franchement, sans remonter au point
   de laisser voir la section précédente.
*/
section[id], [id="top"], [id="main"] { scroll-margin-top: 130px; }

/* ── ZONES DE COULEUR ── */
.sec { position: relative; padding-block: var(--sec-y); background: var(--white); }
.sec-tight { padding-block: 60px; }
.sec-alt { background: var(--slate-50); border-block: 1px solid var(--slate-200); }

/* Trame de points sur les zones claires alternées */
.sec-alt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(14, 165, 233, .13) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(130% 85% at 50% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(130% 85% at 50% 0%, #000 0%, transparent 70%);
}
.sec-alt > * { position: relative; z-index: 1; }

/* Zone sombre : dépannage + aides forment un chapitre continu.
   CORRECTIF — ces règles ciblaient `.zone-dark`, une classe qui n'est posée sur
   aucun élément du HTML : elles étaient donc inertes. On vise désormais les deux
   sections sombres réelles. Elles redéfinissent chacune leur fond plus bas ;
   ce bloc reste le socle commun (couleur de texte héritée par tout enfant
   ajouté ultérieurement). */
.urgency, #aides { background: var(--navy-900); color: rgba(255, 255, 255, .78); }
.urgency h1, .urgency h2, .urgency h3,
#aides h1, #aides h2, #aides h3 { color: #fff; }

.sec-head { margin-bottom: 46px; max-width: 62ch; }
@media (min-width: 900px) { .sec-head { margin-bottom: 62px; } }

.sec-head-split { display: flex; flex-direction: column; gap: 24px; max-width: none; }
@media (min-width: 760px) {
  .sec-head-split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .sec-head-split > div:first-child { max-width: 56ch; }
}

/* ── BADGE au-dessus des titres ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 20px;
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(14, 165, 233, .28);
  border-radius: 999px;
  background: var(--electric-soft);
  font-size: .715rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #0369A1;
  box-shadow: 0 2px 8px -3px rgba(14, 165, 233, .35);
  transition: var(--tr);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--electric);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .2);
}
/* Le badge porte déjà sa pastille : on masque le point décoratif du HTML. */
.eyebrow .live-dot { display: none; }

/* Point « en direct » — utilisé hors badge (étiquette « Prévu pour septembre ») */
.live-dot { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.live-dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: currentColor;
  animation: pulse 2.6s var(--ease-out) infinite;
}
.live-dot--amber { color: #F59E0B; }

/* Variante sur fond sombre.
   CORRECTIF — `.zone-dark` remplacé par les sections sombres réelles. Les règles
   spécifiques posées plus bas (`.urgency .eyebrow` en rouge, `#aides .eyebrow`
   en cyan) conservent la main : même spécificité mais déclarées après, et
   `#aides` l'emporte de toute façon par son sélecteur d'ID. */
.eyebrow-light, .urgency .eyebrow, #aides .eyebrow {
  background: rgba(14, 165, 233, .13);
  border-color: rgba(56, 189, 248, .34);
  color: var(--electric-3);
  box-shadow: none;
}

@keyframes pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* Pictogramme hexagonal — construction reprise du logo */
.hex { flex: none; width: 46px; height: 50px; display: block; }
.hex svg { width: 100%; height: 100%; overflow: visible; }
.hex-lg { width: 58px; height: 63px; }
.hex-frame, .hex-glyph {
  fill: none; stroke: var(--accent, var(--electric));
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: var(--tr);
}

/* Barre de progression de lecture (injectée par script.js) */
.progress {
  position: fixed; top: 0; left: 0; z-index: 130;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--primary), var(--electric) 70%, var(--electric-2));
  box-shadow: 0 0 12px rgba(14, 165, 233, .8);
  border-end-end-radius: 3px;
  transition: width .12s linear;
}

/* ─────────────────────────── 3. BOUTONS ─────────────────────────── */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 600; line-height: 1.2;
  letter-spacing: -.005em;
  text-align: center; white-space: nowrap;
  cursor: pointer;
  transition: var(--tr);
}
.btn .i { width: 1.05em; height: 1.05em; stroke-width: 2.2; transition: var(--tr); }
.btn:hover .i:last-child { transform: translateX(4px); }
.btn:active { transform: translateY(-1px) scale(.99); }

/* Bouton principal : dégradé vertical discret + ombre colorée + reflet interne */
.btn-primary {
  background: linear-gradient(180deg, var(--primary-2) 0%, var(--primary) 55%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: var(--sh-btn);
}
/* Voile cyan qui traverse au survol */
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--electric) 0%, #0284C7 100%);
  opacity: 0;
  transition: var(--tr);
}
.btn-primary:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--sh-btn-h);
}
.btn-primary:hover::before { opacity: 1; }

.btn-line {
  background: var(--white); border-color: var(--slate-200); color: var(--ink);
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, .10);
}
.btn-line:hover {
  border-color: var(--electric); color: var(--primary-dark);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 28px -10px rgba(14, 165, 233, .45);
}

.btn-ghost { background: var(--slate-100); color: var(--ink); border-color: var(--slate-200); }
.btn-ghost:hover { background: var(--white); border-color: var(--electric); transform: translateY(-3px); box-shadow: var(--sh-card); }

.btn-alert {
  background: linear-gradient(180deg, #EF4444 0%, var(--alert) 60%, #B91C1C 100%);
  color: #fff;
  box-shadow: 0 6px 20px -6px rgba(220, 38, 38, .7), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn-alert:hover {
  color: #fff; transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 34px -8px rgba(220, 38, 38, .8), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.btn-lg { min-height: 58px; padding: 17px 34px; font-size: 1.03rem; }
.btn-block { width: 100%; }

/* Sur fond sombre : verre dépoli.
   CORRECTIF — `.zone-dark` remplacé par les sections sombres réelles. Règle
   conservée (et non supprimée) : un bouton contour posé un jour dans le
   bandeau Dépannage ou la section Aides doit rester lisible sur le marine. */
.hero .btn-line, .urgency .btn-line, #aides .btn-line {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .24);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.hero .btn-line:hover, .urgency .btn-line:hover, #aides .btn-line:hover {
  background: rgba(14, 165, 233, .18);
  border-color: var(--electric-2);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(14, 165, 233, .8);
}

/* ───────────────────── 4. BASCULE D'UNIVERS ───────────────────── */
[data-uni] { display: none; }
body[data-audience="part"] [data-uni="part"],
body[data-audience="pro"]  [data-uni="pro"] { display: block; }

body[data-audience="part"] .drawer .drawer-nav[data-uni="part"],
body[data-audience="pro"]  .drawer .drawer-nav[data-uni="pro"] { display: flex; }

.switch {
  position: relative;
  display: inline-flex;
  padding: 4px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.switch-thumb {
  position: absolute; top: 4px; left: 4px; z-index: 0;
  width: calc(50% - 4px); height: calc(100% - 8px);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, #EDF5FC 100%);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .35), 0 0 0 1px rgba(14, 165, 233, .3);
  transition: transform .45s var(--ease-out);
}
body[data-audience="pro"] .switch-thumb { transform: translateX(100%); }

.switch-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* CORRECTIF — la pastille .switch-thumb est calculée en `calc(50% - 4px)`.
     Avec `flex: 1 0 auto`, chaque bouton prenait la largeur de son libellé et
     « Professionnels » étant plus long que « Particuliers », la pastille ne se
     calait jamais sur l'onglet actif. `flex: 1 1 0` force deux moitiés égales ;
     `min-width` empêche l'écrasement des libellés sur écran moyen. */
  flex: 1 1 0;
  min-width: 132px;
  padding: 8px 18px;
  min-height: 34px;
  background: none; border: 0; border-radius: 999px;
  font-size: .8rem; font-weight: 500; color: rgba(255, 255, 255, .68);
  white-space: nowrap;
  transition: var(--tr);
}
.switch-btn .i { width: 14px; height: 14px; transition: var(--tr); }
.switch-btn:hover { color: #fff; }
.switch-btn:hover .i { transform: translateY(-2px); }
.switch-btn.is-on { color: var(--primary-dark); font-weight: 700; }

.switch-block {
  display: flex; background: var(--slate-100); border-color: var(--slate-200);
  margin-bottom: 26px; backdrop-filter: none;
}
.switch-block .switch-thumb { box-shadow: var(--sh-card), 0 0 0 1px rgba(14, 165, 233, .25); }
/* Le tiroir mobile est déjà pleine largeur : on annule le min-width hérité,
   il provoquerait un débordement à 320 px. */
.switch-block .switch-btn { flex: 1 1 0; min-width: 0; min-height: 46px; font-size: .95rem; color: var(--muted); }
.switch-block .switch-btn:hover { color: var(--ink); }

/* Sous 420 px, les deux libellés + pictogrammes dépassent la largeur utile de
   la barre utilitaire (débordement constaté). On retire le min-width et les
   pictogrammes, on resserre le rembourrage : la bascule reste lisible. */
@media (max-width: 419px) {
  .topbar .switch-btn { min-width: 0; padding: 8px 12px; font-size: .75rem; }
  .topbar .switch-btn .i { display: none; }
}

/* ─────────── 5. TOPBAR & EN-TÊTE EN VERRE ─────────── */
.topbar {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .62);
  font-size: .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.topbar-in { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 50px; }
.topbar p { margin: 0; display: flex; align-items: center; gap: 9px; transition: var(--tr); }
.topbar p:hover { color: #fff; }
.topbar .i { width: 14px; height: 14px; color: var(--electric); }
.topbar p.topbar-loc, .topbar p.topbar-hours { display: none; }
@media (min-width: 720px) {
  .topbar-in { justify-content: space-between; }
  .topbar p.topbar-hours { display: flex; }
}
@media (min-width: 1020px) { .topbar p.topbar-loc { display: flex; } }

/*
   L'en-tête reste en verre marine sur toute la page : jamais de bandeau blanc.
   Au défilement il se densifie, s'ourle d'un filet cyan et prend une ombre
   profonde pour se détacher des sections claires.
*/
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(8, 15, 30, .9);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.hdr.is-stuck {
  background: rgba(8, 15, 30, .96);
  border-bottom-color: rgba(14, 165, 233, .3);
  box-shadow: 0 14px 44px -14px rgba(0, 0, 0, .75);
}

.hdr .wrap { max-width: 1360px; }
.hdr-in { display: flex; align-items: center; gap: 14px; min-height: 78px; }

.brand { display: flex; align-items: center; gap: 14px; min-height: 48px; flex: none; transition: var(--tr); }

/*
   LOGO — détouré, posé à même le fond, sans pastille ni cadre.
   Le carré sombre venait du conteneur .brand-mark, pas de l'image : c'est donc
   lui qu'il faut neutraliser en premier. Les `!important` sur l'<img> sont là
   en garde-fou, au cas où un style tiers réintroduirait un fond.
   L'en-tête comme le pied de page étant marine, le logo blanc s'y détache
   naturellement — la pastille n'avait plus lieu d'être.
   Boîte agrandie (62 → 76 px) : sans le rembourrage de la pastille, le
   monogramme paraissait plus petit à taille égale.
*/
.brand-mark {
  display: grid; place-items: center; flex: none;
  width: 76px; height: 76px;
  min-width: 76px; min-height: 76px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transition: var(--tr);
}
.brand:hover .brand-mark { transform: translateY(-3px) rotate(-3deg); }

.brand-mark img {
  display: block;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  border-radius: 0;
}
.brand-mark--lg {
  width: 128px; height: 128px; min-width: 128px; min-height: 128px;
}

.brand-name {
  font-size: 1.16rem; font-weight: 700; letter-spacing: -.03em;
  white-space: nowrap; color: #fff;
  transition: var(--tr);
}
.brand:hover .brand-name { color: var(--electric-2); }
@media (max-width: 359px) { .brand-name { display: none; } }
/*
   Univers Professionnels : menu à huit entrées + téléphone + bouton d'action.
   Mesuré à 1440 px, la ligne débordait de 23 px. On rend la place au menu en
   masquant le mot-symbole — aucune perte d'information, le fichier logo porte
   déjà « DMS SYSTEM » en toutes lettres juste à côté.
*/
@media (min-width: 1240px) { body[data-audience="pro"] .brand-name { display: none; } }

/* Navigation principale — masquée sous 1240 px (menu hamburger) */
.hdr .nav[data-uni] { display: none; }
@media (min-width: 1240px) {
  body[data-audience="part"] .hdr .nav[data-uni="part"],
  body[data-audience="pro"]  .hdr .nav[data-uni="pro"] {
    display: flex; align-items: center; gap: 2px; margin-left: 14px;
  }
  .nav a {
    position: relative;
    padding: 11px 12px;
    font-size: .875rem; font-weight: 500;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
    transition: var(--tr);
  }
  .nav a::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--electric), var(--electric-2));
    box-shadow: 0 0 10px rgba(14, 165, 233, .9);
    transform: scaleX(0);
    transition: transform .35s var(--ease-out);
  }
  .nav a:hover { color: #fff; }
  /* Lien actif — posé par script.js (§9) sur la section affichée à l'écran,
     et immédiatement au clic. Trois signaux cumulés pour qu'il se repère au
     premier coup d'œil sur le verre marine : soulignement plein, couleur
     accentuée et pastille de fond. */
  .nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
  .nav a.active {
    color: var(--electric-2);
    font-weight: 600;
    background: rgba(14, 165, 233, .14);
    border-radius: var(--r-sm);
  }
}

.hdr-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.hdr-tel {
  display: none; align-items: center; gap: 10px;
  font-size: .95rem; font-weight: 600; color: #fff;
  white-space: nowrap;
  transition: var(--tr);
}
.hdr-tel:hover { color: var(--electric-2); }
.hdr-tel .i { width: 17px; height: 17px; color: var(--electric); transition: var(--tr); }
.hdr-tel:hover .i { transform: rotate(-14deg) scale(1.15); }
@media (min-width: 640px) { .hdr-tel { display: flex; } }
@media (min-width: 1240px) and (max-width: 1379px) { .hdr-tel span { display: none; } }

/* Sous 900 px, le bouton d'en-tête cède la place au menu hamburger — l'appel
   à l'action reste accessible en tête du tiroir. */
@media (max-width: 899px) { .hdr-cta { display: none; } }

.burger {
  width: 50px; height: 50px;
  display: grid; place-content: center; gap: 5px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-sm);
  transition: var(--tr);
}
.burger:hover { border-color: var(--electric); box-shadow: 0 8px 20px -8px rgba(14, 165, 233, .6); }
.burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: #fff;
  transition: var(--tr);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1240px) { .burger { display: none; } }

/* z-index inférieur à l'en-tête (90) : le bouton hamburger reste cliquable. */
.drawer {
  position: fixed; inset: 0; z-index: 85;
  display: flex; flex-direction: column;
  padding: 100px var(--gut) 32px;
  background: var(--white);
  overflow-y: auto;
  animation: drawer-in .35s var(--ease-out);
}
.drawer[hidden] { display: none; }
@keyframes drawer-in { from { opacity: 0; transform: translateY(-14px); } }

.drawer-nav { flex-direction: column; }
.drawer-nav a {
  position: relative;
  display: flex; align-items: center;
  padding: 18px 2px 18px 0;
  border-bottom: 1px solid var(--slate-200);
  font-size: 1.12rem; font-weight: 500; color: var(--ink);
  transition: var(--tr);
}
.drawer-nav a::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--electric);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, .18);
  opacity: 0; transform: scale(.3);
  transition: var(--tr);
}
.drawer-nav a:hover { color: var(--primary); padding-left: 22px; }
.drawer-nav a:hover::before { opacity: 1; transform: scale(1); }
/* Le menu mobile reçoit le même état actif que la barre de navigation. */
.drawer-nav a.active { color: var(--primary); font-weight: 700; padding-left: 22px; }
.drawer-nav a.active::before { opacity: 1; transform: scale(1); }
.drawer-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }

/* ─────────────────────────── 6. HERO ─────────────────────────── */
/*
   Composition centrée : logo, titre, chapeau et boutons forment une colonne
   alignée sur l'axe de l'écran. La vidéo reste largement visible — le voile
   est volontairement léger (0,38) — et la lisibilité est assurée non plus par
   un fond sombre, mais par des ombres portées sur le texte lui-même.
*/
.hero { position: relative; background: var(--navy-950); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-poster, .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Pleine opacité : c'est le voile qui dose l'assombrissement, pas l'image.
     Auparavant l'image était à 42 % ET recouverte d'un voile épais — la vidéo
     n'était quasiment plus perceptible. */
  opacity: 1;
}
.hero-video { opacity: 0; transition: opacity 1s ease; }
.hero-video.is-playing { opacity: 1; }

/* Voile unique et léger. Un aplat régulier plutôt que des dégradés croisés :
   la vidéo garde sa lisibilité sur toute la surface. Un halo cyan discret en
   haut à droite conserve la signature couleur du site. */
.hero-veil { position: absolute; inset: 0; }
.hero-veil::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(14, 165, 233, .12) 0%, transparent 60%),
    /* Calque plat très léger : la vidéo reste lumineuse sur toute la surface. */
    rgba(15, 23, 42, .2);
}
/*
   Renfort en haut et en bas (assise de l'en-tête et du ticker) PLUS un voile
   ovale au centre. Ce dernier est indispensable : la vidéo filme une scène
   très claire — mur blanc, plan de travail — alors que le logo et les titres
   sont encrés en blanc. Le voile plat à 38 % ne suffisait pas, le monogramme
   se dissolvait sur le mur. L'ovale n'assombrit que la colonne de contenu :
   les bords de l'image restent lumineux, la vidéo garde toute sa présence.
*/
.hero-veil::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 56% at 50% 50%, rgba(8, 15, 30, .52) 0%, rgba(8, 15, 30, .24) 58%, transparent 80%),
    linear-gradient(180deg, rgba(8, 15, 30, .45) 0%, transparent 24%, transparent 76%, rgba(8, 15, 30, .5) 100%);
}

.hero-in {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-block: 52px 72px;
}
@media (min-width: 900px) {
  /* Bloc centré verticalement : le hero occupe l'écran moins la barre
     utilitaire et l'en-tête, le contenu se cale au milieu.
     Rembourrage resserré : logo + titre + chapeau + boutons doivent tenir
     dans un écran d'ordinateur portable (900 px de haut) sans déborder. */
  .hero-in { min-height: calc(100svh - 128px); justify-content: center; padding-block: 56px 76px; }
}

/* ── Logo central ── */
.hero-logo {
  display: block;
  width: min(78vw, 340px);
  height: auto;
  /* Le fichier comporte de larges marges transparentes en haut ET en bas.
     Ces marges négatives les rattrapent : sans elles, un vide d'une soixantaine
     de pixels s'installait entre le logo et le titre, et les boutons passaient
     sous la ligne de flottaison. */
  margin-top: -6%;
  /* Attention : une marge en pourcentage se calcule sur la LARGEUR du bloc
     conteneur, pas sur sa hauteur. À -1,5 % cela faisait -17 px sur grand
     écran et la boîte du titre chevauchait celle du logo. -0,5 % laisse un
     écart positif à toutes les largeurs testées (320 → 1440). */
  margin-bottom: -.5%;
  filter: drop-shadow(0 10px 34px rgba(0, 0, 0, .55));
}
@media (min-width: 700px)  { .hero-logo { width: min(44vw, 320px); } }
@media (min-width: 1100px) { .hero-logo { width: 340px; } }

.hero .eyebrow { text-shadow: none; }

/*
   Hiérarchie du hero : le LOGO porte l'impact, le titre le relaie sans lui
   voler la vedette. Il est donc nettement plus compact qu'un titre de héros
   classique (2,4 rem au lieu de 3,75), avec un interlignage aéré et un
   resserrement léger — le rendu reste posé, jamais tassé.
*/
.hero h1 {
  color: #fff;
  max-width: 22ch;
  margin-top: 14px;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .85);
}
/* Le chapeau descend d'un cran sous le titre : trois niveaux de lecture
   clairement distincts (logo → titre → description). */
.hero-lead {
  margin-top: 16px;
  max-width: 56ch;
  font-size: .96rem; line-height: 1.65;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .85);
}
@media (min-width: 900px) { .hero-lead { font-size: 1.02rem; } }

.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
/* Sur une vidéo claire, les boutons ont besoin de se détacher du fond. */
.hero-cta .btn { text-shadow: 0 2px 8px rgba(0, 0, 0, .85); }

.hero-scroll {
  position: absolute; left: 50%; bottom: 26px; z-index: 2;
  display: none; place-content: center;
  width: 46px; height: 46px; margin-left: -23px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: #fff;
  background: rgba(8, 15, 30, .35);
  backdrop-filter: blur(4px);
  animation: nudge 2.8s ease infinite;
  transition: var(--tr);
}
.hero-scroll:hover {
  border-color: var(--electric-2); color: #fff;
  background: rgba(14, 165, 233, .3);
  box-shadow: 0 0 24px -4px rgba(14, 165, 233, .8);
}
.hero-scroll .i { width: 18px; height: 18px; stroke-width: 2.2; }
@media (min-width: 900px) { .hero-scroll { display: grid; } }
@keyframes nudge {
  0%, 68%, 100% { transform: translateY(0); }
  34%           { transform: translateY(7px); }
}


/* ─────────────── 7. TICKER SERVICES (défilement auto) ─────────────── */
.ticker {
  position: relative;
  background: var(--navy-950);
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding-block: 19px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: ticker 34s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-row { display: flex; align-items: center; }
.ticker-row li {
  display: flex; align-items: center; gap: 14px;
  padding-inline: 26px;
  font-size: .87rem; font-weight: 500; letter-spacing: .07em;
  color: rgba(255, 255, 255, .72);
  white-space: nowrap;
  transition: var(--tr);
}
.ticker-row li:hover { color: #fff; }
.ticker-row li span {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  transition: var(--tr);
}
.ticker-row li:hover span { transform: scale(1.5); box-shadow: 0 0 18px var(--accent); }
@keyframes ticker { to { transform: translateX(-33.3333%); } }

/* ─────────────────── 8. CARTES MÉTIERS (encart) ─────────────────── */
/* Les cartes viennent se poser sur le bandeau sombre : effet de calque. */
#metiers { background: var(--white); }
@media (min-width: 1000px) {
  #metiers { padding-top: 0; margin-top: -22px; background: transparent; }
  #metiers .wrap { position: relative; z-index: 3; }
  #metiers::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 22px;
    background: var(--white); z-index: 0;
  }
}

.recap { display: grid; gap: 16px; }
@media (min-width: 600px)  { .recap { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1000px) { .recap { grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; } }
@media (min-width: 1000px) { .recap-card:nth-child(even) { margin-top: 28px; } }

.recap-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 32px 28px 26px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  color: var(--ink);
  box-shadow: var(--sh-card);
  transition: var(--tr);
}
/* Voile d'accent qui monte du bas */
.recap-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 30%, var(--accent) 100%);
  opacity: 0;
  transition: var(--tr);
}
/* Filet d'accent lumineux */
.recap-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.recap-card:hover {
  transform: translateY(-5px);
  border-color: rgba(14, 165, 233, .45);
  box-shadow: var(--sh-hover);
  color: var(--ink);
}
.recap-card:hover::before { opacity: .07; }
.recap-card:hover::after  { transform: scaleX(1); }
.recap-card:hover .hex-frame, .recap-card:hover .hex-glyph { stroke-width: 2.3; }

.recap-num {
  position: absolute; top: 26px; right: 26px;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .04em;
  color: var(--slate-300);
  transition: var(--tr);
}
.recap-card:hover .recap-num { color: var(--electric); transform: translateY(-2px) scale(1.08); }

.recap-card h2 { margin: 22px 0 0; font-size: 1.3rem; letter-spacing: -.025em; }
.recap-go {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--slate-200);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 700; letter-spacing: .02em; color: var(--electric);
  transition: var(--tr);
}
.recap-go .i { width: 15px; height: 15px; stroke-width: 2.4; transition: var(--tr); }
.recap-card:hover .recap-go { gap: 13px; color: var(--primary); }

/* ─────────────────── 9. SECTIONS MÉTIERS ─────────────────── */
.metier { display: grid; gap: 30px; }
@media (min-width: 940px) {
  .metier { grid-template-columns: 220px 1fr; column-gap: 76px; row-gap: 36px; }
  .metier-head { grid-column: 1; grid-row: 1 / 3; align-self: stretch; }
  .metier-body { grid-column: 2; grid-row: 1; }
  .metier-foot { grid-column: 2; grid-row: 2; }
}

.metier-head { position: relative; display: flex; align-items: center; gap: 18px; padding-left: 24px; }
@media (min-width: 940px) { .metier-head { display: block; padding-left: 32px; } }

/* Filet vertical lumineux qui se trace à l'apparition */
.metier-head::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), transparent 90%);
  box-shadow: 0 0 12px var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 1s var(--ease-out) .1s;
}
.metier-head.is-in::before { transform: scaleY(1); }

.metier-index {
  display: block;
  font-size: 1.7rem; font-weight: 700; line-height: 1;
  letter-spacing: -.05em;
  color: var(--electric);
}
.metier-head .hex { display: none; }
.metier-head .eyebrow { margin: 0; }

@media (min-width: 940px) {
  .metier-index {
    font-size: 4rem; margin-bottom: 24px;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--slate-300);
  }
  .metier-head .hex { display: block; margin-bottom: 22px; }
}

.metier-body h2 { margin-bottom: 26px; }
.metier-body p { color: var(--muted); max-width: 64ch; }
/* Chapeau : le premier paragraphe porte la section */
.metier-body p:first-of-type { font-size: 1.08rem; line-height: 1.78; color: var(--ink-soft); }
@media (min-width: 940px) { .metier-body p:first-of-type { font-size: 1.14rem; } }
.metier-foot { display: flex; flex-wrap: wrap; gap: 14px; }

/* ─────────── 9 bis. DÉPANNAGE (zone sombre) ─────────── */
.urgency {
  position: relative; overflow: hidden;
  background: var(--navy-900); color: rgba(255, 255, 255, .78);
  padding-block: 72px;
}
.urgency::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 120% at 88% 50%, rgba(220, 38, 38, .16) 0%, transparent 62%),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 13px);
}
.urgency-in { position: relative; display: flex; flex-direction: column; gap: 32px; }
.urgency h2 { color: #fff; max-width: 20ch; }
.urgency .eyebrow {
  background: rgba(220, 38, 38, .16);
  border-color: rgba(248, 113, 113, .4);
  color: #FCA5A5;
}
.urgency .eyebrow::before { background: #F87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, .25); }
.urgency-txt { margin-top: 20px; max-width: 62ch; color: rgba(255, 255, 255, .74); font-size: 1.02rem; line-height: 1.78; }
.urgency-cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.urgency-cta span { font-size: .84rem; color: rgba(255, 255, 255, .55); letter-spacing: .04em; }
.urgency-cta .btn { font-size: 1.2rem; }

@media (min-width: 900px) {
  .urgency { padding-block: 96px; }
  .urgency-in { flex-direction: row; align-items: center; justify-content: space-between; gap: 64px; }
  .urgency-cta { align-items: center; flex: none; }
}

/* ─────────── 9 ter. AVIS CLIENTS (widget Elfsight) ─────────── */
/*
   Les flèches .rail-nav / .rail-btn définies ici servent désormais la galerie
   de réalisations (§11) : elles sont conservées telles quelles.
   Le widget Elfsight injecte son propre balisage — on ne l'habille donc pas,
   on lui donne seulement un conteneur centré, à la largeur du site, avec une
   hauteur minimale qui réserve sa place pendant le chargement différé.
*/
.rail-nav { display: none; gap: 10px; }
@media (min-width: 760px) { .rail-nav { display: flex; } }
.rail-btn {
  width: 50px; height: 50px;
  display: grid; place-content: center;
  background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--r-sm);
  color: var(--ink);
  box-shadow: var(--sh-card);
  transition: var(--tr);
}
.rail-btn:hover:not([disabled]) {
  border-color: var(--electric); color: var(--electric);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -10px rgba(14, 165, 233, .5);
}
.rail-btn[disabled] { opacity: .32; cursor: not-allowed; }
.rail-btn .i { width: 19px; height: 19px; stroke-width: 2.2; }

/*
   Le widget Elfsight est configuré en fond TRANSPARENT côté Elfsight : c'est
   donc cette carte qui lui donne son assise. Fond gris-bleuté très doux, grands
   arrondis, rembourrage aéré et ombre légère — le widget paraît intégré au site
   plutôt que collé dessus.
*/
.reviews-embed {
  width: 100%;
  margin-inline: auto;
  padding: 28px 20px;
  border-radius: 24px;
  border: 1px solid var(--slate-200);
  background: linear-gradient(180deg, var(--slate-50) 0%, #F2F7FC 100%);
  box-shadow: var(--sh-card);
  /* Réserve la place du widget avant son chargement différé (évite le saut de
     mise en page). Il s'étire ensuite librement au-delà de cette valeur. */
  min-height: 320px;
  transition: var(--tr);
}
.reviews-embed:hover { border-color: rgba(14, 165, 233, .32); box-shadow: var(--sh-hover); }
@media (min-width: 700px) { .reviews-embed { padding: 40px 34px; } }

/* Le widget est un bloc tiers : on borne seulement sa largeur pour qu'il
   respecte la gouttière du site sur les très grands écrans. */
.reviews-embed > div { max-width: 100%; }


/* ─────────────── 10. AIDES & RGE — ZONE SOMBRE D'IMPACT ─────────────── */
[data-rge-on] { display: none; }
body[data-rge="on"] [data-rge-on] { display: block; }
body[data-rge="on"] [data-rge-off] { display: none; }
body[data-rge="on"] .ftr-rge-on[data-rge-on] { display: flex; }

#aides {
  position: relative; overflow: hidden;
  background: var(--navy-900);
  color: rgba(255, 255, 255, .78);
}
#aides::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 110% at 14% 0%, rgba(14, 165, 233, .22) 0%, transparent 60%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: auto, 26px 26px;
}
#aides .wrap { position: relative; z-index: 1; }
#aides h2 { color: #fff; }
#aides .eyebrow {
  background: rgba(14, 165, 233, .14);
  border-color: rgba(56, 189, 248, .4);
  color: var(--electric-3);
  box-shadow: none;
}

.aides { display: grid; gap: 22px; align-items: start; }
/* Grille inégale : la carte disponible prend le dessus */
@media (min-width: 900px) { .aides { grid-template-columns: 1.14fr .86fr; gap: 28px; } }

.aide {
  position: relative; overflow: hidden;
  padding: 38px 32px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  box-shadow: var(--sh-deep);
  transition: var(--tr);
}
.aide:hover { transform: translateY(-5px); box-shadow: var(--sh-hover); border-color: rgba(14, 165, 233, .5); }
.aide p { font-size: .99rem; color: var(--muted); }
.aide .btn { margin-top: 28px; }

.aide-now::before, .aide-soon::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
}
.aide-now::before  { background: linear-gradient(180deg, var(--electric), var(--primary)); }
.aide-soon::before { background: linear-gradient(180deg, #F59E0B, var(--amber)); }
body[data-rge="on"] .aide-soon::before { background: linear-gradient(180deg, #34D399, var(--green)); }

.aide-flag {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 22px;
  padding: 8px 17px;
  border-radius: 999px;
  background: var(--electric-soft);
  border: 1px solid rgba(14, 165, 233, .3);
  font-size: .71rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #0369A1;
}
.aide-flag-soon { background: #FEF3C7; border-color: rgba(245, 158, 11, .4); color: var(--amber); }
.aide-flag-ok   { background: #D1FAE5; border-color: rgba(5, 150, 105, .4); color: #047857; }

.aide-head { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.aide-rate {
  flex: none;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--electric) 0%, var(--primary) 100%);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.035em;
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(14, 165, 233, .8);
}
.aide-soon h3 { margin-bottom: 20px; }
.aide strong { color: var(--ink); font-weight: 700; }

.rge-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.rge-badge {
  display: inline-flex; align-items: center;
  padding: 10px 22px;
  border: 1px solid rgba(5, 150, 105, .45);
  border-radius: 999px;
  background: #D1FAE5;
  font-size: .84rem; font-weight: 700; letter-spacing: .06em;
  color: #047857;
  transition: var(--tr);
}
.rge-badge:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -8px rgba(5, 150, 105, .7); }

/* ─────────────────────── 11. RÉALISATIONS (galerie) ─────────────────────── */
/*
   Carrousel de photos de chantier. On réutilise le langage de rail déjà en
   place (flèches .rail-btn, accroche scroll-snap) : défilement natif, donc
   tactile, molette, clavier et flèches fonctionnent sans JS supplémentaire —
   le script ne fait qu'ajouter les boutons et l'état désactivé aux extrémités.
*/
.gallery {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(78%, 320px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 2px 14px;
  margin: -6px -2px -14px;
}
.gallery::-webkit-scrollbar { display: none; }
@media (min-width: 700px)  { .gallery { grid-auto-columns: calc((100% - 36px) / 2.4); gap: 18px; } }
@media (min-width: 1000px) { .gallery { grid-auto-columns: calc((100% - 60px) / 3.3); gap: 20px; } }
/* Le rail reçoit le focus clavier : on rend l'anneau lisible sur fond teinté. */
.gallery:focus-visible { outline: 2px solid var(--electric); outline-offset: 6px; border-radius: var(--r-md); }

.shot {
  position: relative;
  scroll-snap-align: start;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--slate-200);
  background: var(--slate-100);
  box-shadow: var(--sh-card);
  transition: var(--tr);
}
/* Voile marine bas : les photos de chantier ont des fonds très variés,
   ce dégradé leur donne une base commune et assoit la carte. */
.shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(8, 15, 30, .28) 100%);
  transition: var(--tr);
}
.shot img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.shot:hover {
  transform: translateY(-5px);
  border-color: rgba(14, 165, 233, .45);
  box-shadow: var(--sh-hover);
}
.shot:hover img { transform: scale(1.07); }
.shot:hover::after { background: linear-gradient(180deg, transparent 55%, rgba(8, 15, 30, .4) 100%); }


/* ────────────────────────── 12. ENTREPRISE ────────────────────────── */
/* Photo d'équipe + présentation : grille inégale, image collante au défilement */
.about { display: grid; gap: 32px; align-items: start; }
@media (min-width: 940px) { .about { grid-template-columns: .82fr 1.18fr; gap: 60px; } }

/*
   La photo d'équipe est un PNG DÉTOURÉ (fond transparent, 2048×2048).
   Le traitement précédent — cadre arrondi, bordure, ombre de carte et voile
   marine en dégradé — était conçu pour une photo rectangulaire avec décor :
   sur un détourage il dessinerait un rectangle vide autour des personnes et
   étalerait un dégradé sombre en travers de leurs jambes.
   Nouveau parti pris : les techniciens se posent directement sur la section,
   sur un halo bleu pâle qui fait office de sol et rend la transparence
   volontaire. Aucune couleur nouvelle : --electric-soft, déjà au jeu de tokens.
*/
/*
   La photo d'équipe est une photo pleine (fond opaque, format carré 1024×1024) :
   traitement carte classique — cadre arrondi, filet, ombre, recadrage `cover`.
   NOTE — si le fichier était un jour remplacé par un PNG DÉTOURÉ (fond
   transparent), ce traitement serait à revoir : le cadre dessinerait un
   rectangle vide autour des personnes et le voile marine du ::after
   s'étalerait en travers de leurs jambes.
*/
.about-photo {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--slate-200);
  box-shadow: var(--sh-deep);
  transition: var(--tr);
}
@media (min-width: 940px) { .about-photo { position: sticky; top: 118px; } }
.about-photo img {
  width: 100%; height: auto;
  /* Source carrée recadrée en paysage : `cover` conserve toute la largeur
     (personne n'est coupé sur les côtés) et l'ancrage haut à 30 % garde les
     visages dans le cadre. */
  aspect-ratio: 4 / 3.6;
  object-fit: cover; object-position: center 30%;
  transition: transform .9s var(--ease-out);
}
/* Voile marine bas + liseré cyan au survol */
.about-photo::after {
  /* CORRECTIF — `content: \;` : l'antislash échappait le point-virgule, le
     parseur avalait la déclaration `background` suivante et invalidait
     `content`. Résultat : le pseudo-élément n'était jamais généré et le voile
     marine sur la photo d'équipe ne s'affichait pas. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 15, 30, .38) 100%);
  box-shadow: inset 0 0 0 0 rgba(14, 165, 233, 0);
  transition: var(--tr);
}
.about-photo:hover { border-color: rgba(14, 165, 233, .5); box-shadow: var(--sh-hover); }
.about-photo:hover img { transform: scale(1.05); }
.about-photo:hover::after { box-shadow: inset 0 0 0 3px rgba(14, 165, 233, .45); }

.about-text p { color: var(--muted); max-width: 66ch; }
/* Chapeau : le premier paragraphe porte la présentation */
.about-text p:first-child { font-size: 1.08rem; line-height: 1.8; color: var(--ink-soft); }
@media (min-width: 940px) { .about-text p:first-child { font-size: 1.14rem; } }
.about-text strong { color: var(--ink); font-weight: 700; }


/* ────────────────────── 13. CONTACT & FORMULAIRE ────────────────────── */
.contact { display: grid; gap: 36px; align-items: start; }
@media (min-width: 980px) { .contact { grid-template-columns: .74fr 1.26fr; gap: 56px; } }

.contact-aside { display: block; }
.contact-list { display: grid; gap: 14px; margin-bottom: 32px; }
.contact-list li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-card);
  transition: var(--tr);
}
.contact-list li:hover {
  transform: translateX(6px);
  border-color: rgba(14, 165, 233, .45);
  box-shadow: 0 12px 26px -10px rgba(14, 165, 233, .4);
}
.contact-list .i { width: 21px; height: 21px; color: var(--electric); margin-top: 4px; transition: var(--tr); }
.contact-list li:hover .i { transform: scale(1.12); }
.contact-list b {
  display: block;
  font-size: .71rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.contact-list a, .contact-list span { display: block; font-size: 1rem; color: var(--ink); }
.contact-list a { font-weight: 700; }

.map-frame {
  height: 290px;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--slate-100);
  box-shadow: var(--sh-card);
  transition: var(--tr);
}
.map-frame:hover { box-shadow: var(--sh-hover); border-color: rgba(14, 165, 233, .45); }
.map-frame iframe { display: block; width: 100%; height: 100%; filter: grayscale(.45) contrast(1.05); transition: filter .5s ease; }
.map-frame:hover iframe { filter: none; }

.form {
  position: relative;
  display: grid; gap: 22px;
  padding: 32px 26px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-deep);
}
@media (min-width: 620px) { .form { grid-template-columns: 1fr 1fr; padding: 42px; } }

.honeypot { position: absolute; left: -9999px; opacity: 0; }

.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field-full { grid-column: 1 / -1; }
.field[hidden] { display: none; }

.field > label, .field > legend {
  padding: 0;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field em { color: var(--alert); font-style: normal; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  font: inherit; font-size: .95rem;
  color: var(--ink);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-sm);
  transition: var(--tr);
}
.field :is(input, select, textarea):hover { border-color: var(--slate-300); background: var(--white); }
.field textarea { resize: vertical; min-height: 145px; line-height: 1.65; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230EA5E9' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}
.field :is(input, select, textarea):focus {
  outline: none;
  background: var(--white);
  border-color: var(--electric);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, .16);
}
.field.has-error :is(input, select, textarea) { border-color: var(--alert); }
.field.has-error :is(input, select, textarea):focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .14); }

.err { display: none; font-size: .8rem; font-weight: 500; color: var(--alert); }
.field.has-error .err { display: block; }

.radio-row { display: flex; gap: 12px; flex-wrap: wrap; }
.radio { flex: 1 1 140px; position: relative; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio span {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 16px;
  min-height: 52px;
  border: 1px solid var(--slate-200); border-radius: var(--r-sm);
  background: var(--slate-50);
  font-size: .94rem;
  cursor: pointer;
  transition: var(--tr);
}
.radio:hover span { border-color: var(--slate-300); background: var(--white); transform: translateY(-2px); }
.radio input:checked + span {
  border-color: var(--electric);
  background: var(--electric-soft);
  font-weight: 700; color: #0369A1;
  box-shadow: 0 6px 18px -8px rgba(14, 165, 233, .6);
}
.radio input:focus-visible + span { outline: 2px solid var(--electric); outline-offset: 2px; }

.consent {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .87rem; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--muted);
  cursor: pointer;
}
.consent input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--electric); }

.form > .btn { grid-column: 1 / -1; }
.form-foot { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: var(--muted); }
.form-foot em { color: var(--alert); font-style: normal; }
.btn.is-busy { opacity: .7; pointer-events: none; }

.form-done {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 38px; text-align: center;
  background: var(--white);
  border-radius: var(--r-lg);
  animation: drawer-in .35s var(--ease-out);
}
.form-done[hidden] { display: none; }
.form-done .i {
  width: 56px; height: 56px; padding: 14px;
  color: #fff;
  background: linear-gradient(140deg, #34D399, var(--green));
  border: 0; border-radius: 50%;
  box-shadow: 0 10px 26px -8px rgba(5, 150, 105, .8);
  stroke-width: 2.6;
}
.form-done p { color: var(--muted); font-size: .95rem; }

/* ───────────────────────── 14. PARTENAIRES ───────────────────────── */
.partners {
  padding-block: 64px;
  background: var(--white);
  border-top: 1px solid var(--slate-200);
  overflow: hidden;
}
.partners-title {
  margin: 0 0 42px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  text-align: center;
}

.partners-marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partners-track { display: flex; width: max-content; animation: partners 64s linear infinite; }
.partners-marquee:hover .partners-track { animation-play-state: paused; }
.partners-row { display: flex; align-items: center; }
.partners-row li {
  display: flex; align-items: center; justify-content: center;
  width: 178px; height: 82px;
  margin-inline: 7px;
  padding: 14px 20px;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: var(--tr);
}
.partners-row li:hover {
  background: var(--white);
  border-color: rgba(14, 165, 233, .35);
  box-shadow: 0 14px 30px -12px rgba(14, 165, 233, .45);
  transform: translateY(-5px);
}
.partners-row img {
  max-height: 48px; max-width: 100%; width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .5;
  transition: var(--tr);
}
.partners-row li:hover img { filter: none; opacity: 1; }

/* Emplacement en attente d'un fichier logo */
.pl-name {
  font-size: .8rem; font-weight: 700; line-height: 1.35;
  letter-spacing: .02em; text-align: center;
  color: var(--slate-300);
  transition: var(--tr);
}
.partners-row li:hover .pl-name { color: var(--primary); }
@keyframes partners { to { transform: translateX(-50%); } }

/* ───────────── 15. PIED DE PAGE & FLOTTANTS ───────────── */
.ftr {
  position: relative; overflow: hidden;
  background: var(--navy-950);
  color: rgba(255, 255, 255, .7);
  padding-block: 72px 32px;
  font-size: .92rem;
}
.ftr::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 90% at 12% 0%, rgba(14, 165, 233, .16) 0%, transparent 62%),
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: auto, 28px 28px;
}
.ftr .wrap { position: relative; z-index: 1; }

.ftr-top { display: grid; gap: 44px; }
@media (min-width: 700px)  { .ftr-top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ftr-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 52px; } }

/* Pied de page : même traitement détouré, aucun aplat derrière le logo. */
.ftr-brand .brand-mark { background: transparent; box-shadow: none; margin-bottom: 24px; }

.ftr-rge { margin: 0; font-size: .84rem; line-height: 1.7; color: rgba(255, 255, 255, .55); max-width: 40ch; }
.ftr-rge b { color: var(--electric-3); font-weight: 700; }
.ftr-rge-on { flex-wrap: wrap; align-items: center; gap: 10px; }
.ftr-rge .rge-badge { background: rgba(52, 211, 153, .1); color: #6EE7B7; border-color: rgba(52, 211, 153, .4); }

/* Le `gap` est repris par le rembourrage des liens : le texte seul ne mesurait
   que ~27 px de haut, sous le minimum de 44 px recommandé pour le pouce
   (WCAG 2.5.8 « Target Size », iOS HIG). Le rembourrage agrandit la zone
   cliquable sans écarter visuellement les entrées. */
.ftr-col { display: flex; flex-direction: column; gap: 0; }
.ftr-col h3 {
  margin-bottom: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--electric-3);
}
.ftr-col a {
  position: relative; width: fit-content;
  padding-block: 9px;
  color: rgba(255, 255, 255, .74);
  transition: var(--tr);
}
/* Le soulignement suit le texte, pas le bord de la zone tactile. */
.ftr-col a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 7px;
  height: 1px; background: var(--electric-2);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.ftr-col a:hover { color: #fff; transform: translateX(4px); }
.ftr-col a:hover::after { transform: scaleX(1); }
.ftr-col span { color: rgba(255, 255, 255, .52); line-height: 1.65; }

.ftr-bottom {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  margin-top: 52px; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .82rem; color: rgba(255, 255, 255, .5);
}
.ftr-bottom nav { display: flex; flex-wrap: wrap; gap: 24px; }
.ftr-bottom a { color: rgba(255, 255, 255, .5); }
.ftr-bottom a:hover { color: var(--electric-2); }

.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 52px; height: 52px;
  display: grid; place-content: center;
  background: linear-gradient(180deg, var(--electric) 0%, var(--primary) 100%);
  color: #fff;
  border: 0; border-radius: 50%;
  box-shadow: 0 12px 28px -8px rgba(14, 165, 233, .75);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85);
  transition: var(--tr);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 20px 40px -10px rgba(14, 165, 233, .9); }
.to-top .i { width: 21px; height: 21px; stroke-width: 2.4; }

.toasts {
  position: fixed; left: 50%; bottom: 24px; z-index: 120;
  transform: translateX(-50%);
  display: grid; gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  padding: 15px 22px;
  background: var(--navy-900); color: #fff;
  border: 1px solid rgba(14, 165, 233, .35);
  border-radius: var(--r-sm);
  font-size: .9rem;
  box-shadow: var(--sh-deep);
  animation: toast-in .35s var(--ease-out);
}
.toast[data-kind="error"] { background: #7F1D1D; border-color: rgba(248, 113, 113, .45); }
/* Confirmation d'envoi du formulaire : vert franc, lisible sur toute section. */
.toast[data-kind="success"] {
  background: #065F46;
  border-color: rgba(52, 211, 153, .5);
  box-shadow: var(--sh-deep), 0 0 24px -8px rgba(5, 150, 105, .7);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.95); } }

/* ─────────────────────── 16. ANIMATIONS ─────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .metier-head::before { transform: scaleY(1); }
  .ticker-track, .partners-track { animation: none; }
  .ticker, .partners-marquee { overflow-x: auto; }
  .progress { display: none; }
}

@media print {
  .topbar, .hdr, .drawer, .to-top, .toasts, .hero-media, .map-frame,
  .ticker, .partners-marquee, .hero-scroll, .progress { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .sec, #aides, .urgency { padding-block: 18pt; background: #fff !important; color: #000 !important; }
  #aides h2, .urgency h2 { color: #000 !important; }
  .sec-alt::before, .urgency::before, .ftr::before, #aides::before { display: none; }
  .reveal { opacity: 1; transform: none; }
  [data-uni] { display: block !important; }
  * { box-shadow: none !important; }
}