/* =========================================================================
   EGA SOLUTIONS — Feuille de style principale (v2 — premium)
   Charte graphique : bleu foncé #0e2538 / turquoise #6bc1b4
   Fonts : Oswald (titres display) & Open Sans (corps)
   ========================================================================= */

/* ---------- Variables ---------- */
:root {
  /* Couleurs principales */
  --c-blue:        #0e2538;
  --c-blue-soft:   #122e44;
  --c-blue-80:    #3e515f;
  --c-blue-60:    #6e7c87;
  --c-blue-40:    #9fa7af;
  --c-blue-20:    #cfd3d7;

  --c-turquoise:   #6bc1b4;
  --c-turquoise-d: #4eada0;
  --c-turquoise-l: #b6e0d9;

  /* Couleurs secteurs */
  --c-eau:        #0099c4;
  --c-incendie:   #ea4f3d;
  --c-catastrophe: #93c462;

  /* Neutres */
  --c-white:      #ffffff;
  --c-bg:         #f6f9fa;
  --c-bg-2:       #eef3f5;
  --c-text:       #0e2538;
  --c-text-light: #5a6873;
  --c-border:     #e3e9ec;
  --c-border-soft: #eef2f4;

  /* Typographie */
  --font-title: "Oswald", "Arial Narrow", sans-serif;
  --font-body:  "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* Layout — ~5% de marge gauche/droite, fluide, plafonné sur très grands écrans */
  --max-width: 1800px;
  --gutter:    clamp(20px, 5vw, 110px);
  --radius:    18px;
  --radius-sm: 12px;
  --shadow-xs: 0 1px 2px rgba(14,37,56,.04);
  --shadow-sm: 0 4px 14px rgba(14,37,56,.06);
  --shadow:    0 14px 40px rgba(14,37,56,.08);
  --shadow-lg: 0 28px 80px rgba(14,37,56,.14);

  /* Transitions */
  --tr-fast: 180ms ease;
  --tr:      320ms cubic-bezier(.2,.7,.3,1);
  --tr-slow: 600ms cubic-bezier(.2,.7,.3,1);

  /* Header height (utilisé pour offsets) */
  --header-h: 92px;
}

/* ---------- Reset minimal ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* « hidden » fait du body un conteneur de défilement sous Safari, ce qui
     annule le position: sticky de .site-header. « clip » coupe le débordement
     horizontal sans créer de conteneur. « hidden » reste en repli pour les
     navigateurs antérieurs à Safari 16. Corrigé le 27/09/2026. */
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--tr-fast); }
a:hover { color: var(--c-turquoise); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; margin: 0; }
::selection { background: var(--c-turquoise); color: var(--c-blue); }

/* ---------- Typographie ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.05;
  color: var(--c-blue);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); line-height: 1; }
h2 { font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.05; }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.2; }
h4 { font-size: 1.1rem; letter-spacing: .02em; }
p  { margin: 0 0 1em; }
.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  color: var(--c-text-light);
  line-height: 1.65;
  max-width: 64ch;
}

/* eyebrow / kicker */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-turquoise);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 32px; height: 2px;
  background: var(--c-turquoise);
  display: inline-block;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
section { padding: clamp(70px, 9vw, 130px) 0; position: relative; }
@media (max-width: 768px) {
  section { padding: 64px 0; }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all var(--tr);
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
}
.btn-primary {
  background: var(--c-turquoise);
  color: var(--c-blue);
  box-shadow: 0 10px 28px rgba(107,193,180,.35);
  position: relative;
  overflow: hidden;
}
/* Effet shine subtil au hover */
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transition: left .7s ease;
  pointer-events: none;
}
.btn-primary:hover::before { left: 130%; }
.btn-primary:hover {
  background: var(--c-blue);
  color: var(--c-white);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(14,37,56,.28);
}
.btn-secondary {
  background: var(--c-blue);
  color: var(--c-white);
}
.btn-secondary:hover {
  background: var(--c-turquoise);
  color: var(--c-blue);
  transform: translateY(-3px);
}
.btn-outline {
  border: 2px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.05);
  color: var(--c-white);
  padding: 14px 28px;
  backdrop-filter: blur(6px);
}
.btn-outline:hover {
  background: var(--c-white);
  color: var(--c-blue);
  border-color: var(--c-white);
}
.btn-ghost {
  color: var(--c-blue);
  padding: 8px 0;
  font-weight: 600;
  border-radius: 0;
  border-bottom: 2px solid var(--c-turquoise);
}
.btn-ghost:hover { color: var(--c-turquoise); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--c-border-soft);
  transition: box-shadow var(--tr-fast), background var(--tr-fast);
}
.site-header.is-scrolled {
  box-shadow: 0 8px 30px rgba(14,37,56,.06);
  background: rgba(255,255,255,.98);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: var(--header-h);
  flex-wrap: nowrap;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.logo img { height: 62px; width: auto; display: block; }  /* +30% par rapport à 48px, sans changer la hauteur du header */

/* Navigation — force le menu sur une seule ligne */
.nav-main {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.4vw, 6px);
  flex: 1;
  justify-content: center;
  flex-wrap: nowrap;
  min-width: 0;
}
.nav-main a {
  position: relative;
  padding: 10px clamp(8px, 0.9vw, 14px);
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(.85rem, 0.95vw, 1rem);
  letter-spacing: .03em;
  color: var(--c-blue);
  white-space: nowrap;       /* JAMAIS de retour à la ligne */
  flex-shrink: 0;
}
.nav-main a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--c-turquoise);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}
.nav-main a:hover::after,
.nav-main a.active::after { transform: scaleX(1); }
.nav-main a.active { color: var(--c-turquoise); }

/* Bouton téléphone du header — toujours sur une ligne */
.header-phone {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.header-phone .phone-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--c-turquoise);
  color: var(--c-blue);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(.95rem, 1vw, 1.05rem);
  letter-spacing: .02em;
  box-shadow: 0 8px 22px rgba(107,193,180,.35);
  transition: all var(--tr);
  white-space: nowrap;
  line-height: 1;
}
.header-phone .phone-call:hover {
  background: var(--c-blue);
  color: var(--c-white);
  transform: translateY(-2px);
}
.header-phone .phone-call .pulse {
  display: inline-flex;
  width: 30px; height: 30px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-turquoise);
  position: relative;
  flex-shrink: 0;
}
.header-phone .phone-call:hover .pulse { background: var(--c-turquoise); color: var(--c-blue); }
.header-phone .phone-call .pulse::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: .55;
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.9); opacity: 0;   }
}

/* Burger mobile */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 10px;
}
.burger span { position: relative; width: 22px; height: 2px; background: var(--c-blue); transition: all var(--tr); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--c-blue); transition: all var(--tr);
}
.burger span::before { top: -7px; }
.burger span::after  { top:  7px; }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .burger span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1180px) {
  /* Bloque le scroll du body quand le menu est ouvert */
  body.menu-open { overflow: hidden; }

  .nav-main {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    height: calc(100dvh - var(--header-h));  /* 100dvh = viewport dynamique (mobile-safe) */
    background: var(--c-blue);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 28px var(--gutter) 40px;
    gap: 0;
    transform: translateX(100%);
    /* Fermé, le panneau n'a ni ombre ni visibilité. Son ombre de 60 px
       débordait dans l'écran en permanence, et ses liens restaient
       atteignables au clavier. La visibilité ne bascule qu'une fois le
       glissement de fermeture terminé (320 ms), l'animation est conservée.
       Corrigé le 27/09/2026. */
    visibility: hidden;
    box-shadow: none;
    transition: transform var(--tr), box-shadow var(--tr), visibility 0s linear 320ms;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 99;
  }
  .nav-main a {
    display: block;
    width: 100%;
    color: var(--c-white);
    font-size: 1.25rem;
    padding: 18px 4px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    flex-shrink: 0;
  }
  .nav-main a::after { display: none; }
  body.menu-open .nav-main {
    transform: translateX(0);
    visibility: visible;
    box-shadow: -20px 0 40px rgba(0,0,0,.25);
    transition: transform var(--tr), box-shadow var(--tr), visibility 0s;
  }
  .burger { display: inline-flex; }
}
/* Fallback pour navigateurs sans 100dvh */
@supports not (height: 100dvh) {
  @media (max-width: 1180px) {
    .nav-main { height: calc(100vh - var(--header-h)); }
  }
}
@media (max-width: 640px) {
  :root { --header-h: 74px; }
  .header-phone .phone-call span:not(.pulse) { display: none; }
  .header-phone .phone-call { padding: 10px; gap: 0; }
  .logo img { height: 50px; }  /* +30% par rapport à 38px */
}

/* ===========================================================================
   HERO — Vidéo en background plein écran (homepage ET pages services)
   ========================================================================== */
.hero,
.page-hero {
  position: relative;
  min-height: clamp(640px, 92vh, 940px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-blue);
  color: var(--c-white);
  padding: clamp(110px, 12vw, 180px) 0 clamp(110px, 12vw, 170px);
  isolation: isolate;
}
.hero-media,
.page-hero-media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  overflow: hidden;
}
.hero-media video,
.hero-media iframe,
.page-hero-media video,
.page-hero-media iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}
.hero-media iframe,
.page-hero-media iframe {
  /* iframe YouTube ratio fix : on agrandit pour cover */
  width: 178vh; min-width: 100%;
  height: 56.25vw; min-height: 100%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.hero-bg-fallback,
.page-hero-bg-fallback {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(107,193,180,.30), transparent 60%),
    radial-gradient(900px 500px at 80% 100%, rgba(107,193,180,.18), transparent 60%),
    linear-gradient(135deg, #0e2538 0%, #122e44 100%);
}
/* fallback pattern (sablier discret) */
.hero-bg-fallback::before,
.page-hero-bg-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .5;
}
.hero-overlay,
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,37,56,.55) 0%, rgba(14,37,56,.78) 60%, rgba(14,37,56,.92) 100%),
    linear-gradient(90deg, rgba(14,37,56,.65) 0%, rgba(14,37,56,.25) 100%);
}
.hero-inner,
.page-hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  /* pas d'override de max-width : on hérite du .container (1800px)
     → hero et reste du site partagent exactement la même marge */
}
/* Logo sectoriel couleur, en tête de la section d'intro (fond clair).
   Version bleu nuit + accent : réservée aux fonds blancs — sur le hero
   sombre, ce sont les logos à texte blanc qui sont utilisés. */
.service-intro-logo {
  display: block;
  width: clamp(190px, 21vw, 300px);
  height: auto;
  margin: 0 0 26px;
}
@media (max-width: 900px) { .service-intro-logo { width: clamp(160px, 44vw, 230px); margin-bottom: 20px; } }

/* ===========================================================================
   HERO AVEC ENCART VIDÉO VERTICAL
   ---------------------------------------------------------------------------
   Structure commune aux 5 hero (accueil + 4 pages services) :

     .hero / .page-hero            ← reçoit .has-hero-card (posé par main.js)
       .hero-inner / .page-hero-inner
         .hero-copy                ← colonne texte
         .hero-aside               ← colonne média, vide tant qu'aucune vidéo
           .hero-video-card        ← la coque (cadre + boutons latéraux)
             .hero-video-screen    ← l'écran (ratio 9/16, masque le débord)
               video / iframe

   Sans vidéo, .hero-aside est vide et masquée : le hero est strictement
   identique à sa version d'origine. Pour brancher une vidéo sur une page,
   il n'y a QUE config.videos.<clé> à renseigner en mode "card".

   Dimensionnement : l'ÉCRAN est piloté par sa hauteur sur desktop (il se cale
   sur la hauteur utile du hero) et par sa largeur sous 960 px. aspect-ratio
   9/16 déduit l'autre dimension, donc le ratio n'est jamais cassé. La coque,
   elle, se dimensionne sur son contenu.
   ========================================================================== */
.hero-aside:empty { display: none; }

.hero.has-hero-card,
.page-hero.has-hero-card {
  --hero-card-h: clamp(460px, 66vh, 760px);   /* hauteur de l'écran, desktop */
  --shell-pad:   clamp(9px, .75vw, 13px);     /* épaisseur du cadre */
  --shell-r:     clamp(34px, 3vw, 52px);      /* rayon extérieur */
  --screen-r:    clamp(26px, 2.3vw, 42px);    /* rayon de l'écran */
  /* Le padding d'origine (jusqu'à 180px) rendait le hero démesuré une fois
     l'encart présent : on resserre pour que l'ensemble tienne dans l'écran. */
  padding-top: clamp(96px, 8vw, 136px);
  padding-bottom: clamp(96px, 8vw, 136px);
}

/* ---------- La coque ---------- */
.hero-video-card {
  position: relative;
  padding: var(--shell-pad);
  border-radius: var(--shell-r);
  /* Dégradé oblique : arête claire en haut à gauche, masse sombre au centre,
     reflet froid en bas à droite — c'est ce qui donne l'effet métal. */
  background: linear-gradient(155deg,
      #46586a 0%, #1b2733 26%, #0a1119 52%, #14202b 74%, #35485a 100%);
  box-shadow:
    0 54px 120px -26px rgba(0, 0, 0, .72),
    0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .26),
    inset 0 -1px 0 rgba(255, 255, 255, .07);
  animation: card-rise .95s cubic-bezier(.2,.7,.3,1) both;
}

/* Boutons latéraux — volume à gauche, veille à droite */
.hero-video-card::before,
.hero-video-card::after {
  content: "";
  position: absolute;
  width: clamp(2px, .22vw, 4px);
  border-radius: 4px;
  background: linear-gradient(180deg, #4e6070, #16202a);
}
.hero-video-card::before {          /* volume : deux traits simulés par un dégradé */
  left: calc(var(--shell-pad) * -.28);
  top: 21%;
  height: 15%;
  background:
    linear-gradient(180deg, #4e6070, #16202a) 0 0 / 100% 44% no-repeat,
    linear-gradient(180deg, #4e6070, #16202a) 0 100% / 100% 44% no-repeat;
}
.hero-video-card::after {           /* veille */
  right: calc(var(--shell-pad) * -.28);
  top: 27%;
  height: 11%;
}

/* ---------- L'écran ---------- */
.hero-video-screen {
  position: relative;
  height: var(--hero-card-h);
  aspect-ratio: 9 / 16;
  border-radius: var(--screen-r);
  overflow: hidden;
  background: #0b1a26;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
}
.hero-video-screen video,
.hero-video-screen img,
.hero-video-screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
/* Îlot de caméra */
.hero-video-screen::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: clamp(9px, .9vw, 15px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(56px, 6.5vw, 92px);
  height: clamp(16px, 1.7vw, 25px);
  border-radius: 999px;
  background: #05090d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
/* Reflet vitré en diagonale, discret */
.hero-video-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(112deg,
      rgba(255,255,255,.17) 0%, rgba(255,255,255,.05) 20%, transparent 44%);
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-video-card { animation: none; } }

/* ---------- Desktop & grandes tablettes : deux colonnes ----------
   Variante retenue : le texte occupe la largeur disponible plutôt que d'être
   plafonné, sinon un écran large ouvrait un vide de ~370px au milieu du hero.
   L'alignement à gauche reste celui des sections du dessous, et l'encart reste
   sur la gouttière droite. */
@media (min-width: 960px) {
  .has-hero-card .hero-inner,
  .has-hero-card .page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(44px, 4.5vw, 96px);
  }
  .has-hero-card .hero-copy { min-width: 0; max-width: none; }
  .has-hero-card .hero-copy h1 { max-width: 20ch; }
  .has-hero-card .hero-copy .lead { max-width: 78ch; }
}

/* Tablette paysage / petit portable : écrans larges mais PEU HAUTS (1024×768).
   La hauteur disponible est ici le facteur limitant. */
@media (min-width: 960px) and (max-width: 1279px) {
  .hero.has-hero-card,
  .page-hero.has-hero-card { --hero-card-h: clamp(400px, 60vh, 580px); }
  .has-hero-card .hero-copy h1 { max-width: 14ch; }
}

/* ---------- Tablette portrait & mobile : encart sous le texte, centré ----------
   On pilote par la largeur : une hauteur en vh donnerait un encart ridiculement
   étroit sur un téléphone.

   ⚠️ Spécificité 0,2,0 obligatoire : le bloc @media (max-width: 640px) en fin de
   feuille repose padding:100px 0 90px sur « .hero, .page-hero » et gagnerait à
   égalité, étant déclaré plus bas. */
@media (max-width: 959px) {
  .hero.has-hero-card,
  .page-hero.has-hero-card {
    min-height: 0;
    padding-top: clamp(64px, 10vw, 92px);
    padding-bottom: clamp(44px, 7vw, 68px);
  }
  .has-hero-card .hero-aside {
    display: flex;
    justify-content: center;
    margin-top: clamp(24px, 4.5vw, 40px);
  }
  /* Logo sectoriel réduit pour ne pas repousser l'encart hors de l'écran */
  .has-hero-card .service-brand-badge {
    width: clamp(92px, 26vw, 130px);
    margin-bottom: 18px;
  }
  .hero-video-card { width: min(88vw, 380px); }
  .hero-video-screen { width: 100%; height: auto; }
}

.hero h1, .page-hero h1 {
  color: var(--c-white);
  font-size: clamp(2.8rem, 7.4vw, 7rem);
  margin-bottom: .45em;
  max-width: 16ch;
}
.page-hero h1 { max-width: 22ch; }
.hero h1 span,
.hero h1 strong,
.page-hero h1 strong {
  color: var(--c-turquoise);
  font-weight: 700;
}
.hero .lead, .page-hero .lead {
  color: rgba(255,255,255,.88);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  max-width: 900px;
  margin-bottom: 0;
}

.hero-ctas {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 48px;
}
.hero-meta {
  display: flex; gap: clamp(28px, 4vw, 56px); flex-wrap: wrap;
  margin-top: clamp(48px, 6vw, 84px);
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.hero-meta-item {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-title);
  font-weight: 500;
  letter-spacing: .04em;
  font-size: 1rem;
}
.hero-meta-item .ico {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(107,193,180,.18);
  color: var(--c-turquoise);
}

.page-hero .breadcrumb {
  font-size: .85rem;
  color: rgba(255,255,255,.65);
  margin-bottom: 36px;
  font-family: var(--font-title);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.page-hero .breadcrumb a:hover { color: var(--c-turquoise); }
.page-hero .breadcrumb span { color: var(--c-turquoise); }

/* Courbe décorative en bas du hero */
.hero-curve, .page-hero-curve {
  position: absolute; bottom: -1px; left: 0; right: 0;
  width: 100%; height: 90px; z-index: 3;
  pointer-events: none;
}
.hero-curve svg, .page-hero-curve svg { width: 100%; height: 100%; }

/* Couleurs accent par page service */
.theme-eau         { --accent: var(--c-eau);         --accent-glow: rgba(0,153,196,.35); --accent-soft: rgba(0,153,196,.18); --on-accent: #ffffff; }
.theme-fuite     { --accent: var(--c-turquoise);   --accent-glow: rgba(107,193,180,.35); --accent-soft: rgba(107,193,180,.18); --on-accent: var(--c-blue); }
.theme-incendie    { --accent: var(--c-incendie);    --accent-glow: rgba(234,79,61,.30); --accent-soft: rgba(234,79,61,.16); --on-accent: #ffffff; }
.theme-catastrophe { --accent: var(--c-catastrophe); --accent-glow: rgba(147,196,98,.32); --accent-soft: rgba(147,196,98,.16); --on-accent: var(--c-blue); }

/* ============================================================
   SURCHARGES THÉMATIQUES — chaque page service applique sa
   propre couleur dominante sur les éléments d'accent clés.
   Sobre, sans flashy : reste premium et lisible.
   ============================================================ */

/* Eyebrow (sur-titre) */
.theme-eau .eyebrow,
.theme-incendie .eyebrow,
.theme-catastrophe .eyebrow {
  color: var(--accent);
}
.theme-eau .eyebrow::before,
.theme-incendie .eyebrow::before,
.theme-catastrophe .eyebrow::before {
  background: var(--accent);
}

/* Fil d'Ariane → segment courant */
.theme-eau .page-hero .breadcrumb span,
.theme-incendie .page-hero .breadcrumb span,
.theme-catastrophe .page-hero .breadcrumb span {
  color: var(--accent);
}

/* CTA principal — fond = accent, texte = lisible sur l'accent */
.theme-eau .btn-primary,
.theme-incendie .btn-primary,
.theme-catastrophe .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 28px var(--accent-glow);
}
.theme-eau .btn-primary:hover,
.theme-incendie .btn-primary:hover,
.theme-catastrophe .btn-primary:hover {
  background: var(--c-blue);
  color: var(--c-white);
}
/* Variante "shine" : éclaircir le balayage si fond foncé */
.theme-incendie .btn-primary::before,
.theme-eau .btn-primary::before {
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
}

/* CTA secondaire / contour (sur fond bleu hero) — garde le blanc, mais hover prend l'accent */
.theme-eau .btn-secondary,
.theme-incendie .btn-secondary,
.theme-catastrophe .btn-secondary {
  background: var(--c-blue);
}
.theme-eau .btn-secondary:hover,
.theme-incendie .btn-secondary:hover,
.theme-catastrophe .btn-secondary:hover {
  background: var(--accent);
  color: var(--on-accent);
}

/* Bouton téléphone du header — adopte la couleur de la page */
.theme-eau .header-phone .phone-call,
.theme-incendie .header-phone .phone-call,
.theme-catastrophe .header-phone .phone-call {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 22px var(--accent-glow);
}
.theme-eau .header-phone .phone-call .pulse,
.theme-incendie .header-phone .phone-call .pulse,
.theme-catastrophe .header-phone .phone-call .pulse {
  background: var(--c-blue);
  color: var(--accent);
}
.theme-eau .header-phone .phone-call:hover,
.theme-incendie .header-phone .phone-call:hover,
.theme-catastrophe .header-phone .phone-call:hover {
  background: var(--c-blue);
  color: var(--c-white);
}
.theme-eau .header-phone .phone-call:hover .pulse,
.theme-incendie .header-phone .phone-call:hover .pulse,
.theme-catastrophe .header-phone .phone-call:hover .pulse {
  background: var(--accent);
  color: var(--c-blue);
}

/* Lien actif dans le menu (navigation principale) */
.theme-eau .nav-main a.active,
.theme-incendie .nav-main a.active,
.theme-catastrophe .nav-main a.active {
  color: var(--accent);
}
.theme-eau .nav-main a:hover::after,
.theme-eau .nav-main a.active::after,
.theme-incendie .nav-main a:hover::after,
.theme-incendie .nav-main a.active::after,
.theme-catastrophe .nav-main a:hover::after,
.theme-catastrophe .nav-main a.active::after {
  background: var(--accent);
}
.theme-eau .nav-main a:hover,
.theme-incendie .nav-main a:hover,
.theme-catastrophe .nav-main a:hover { color: var(--accent); }

/* Step / étape : numéro déjà --accent. Renforcer la barre verticale */
.theme-eau .step::after,
.theme-incendie .step::after,
.theme-catastrophe .step::after { background: var(--accent); }

/* Liens dans le contenu legal/services */
.theme-eau a.btn-ghost,
.theme-incendie a.btn-ghost,
.theme-catastrophe a.btn-ghost {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Floating call mobile — garde le rouge urgence par défaut, sauf sur theme-incendie
   où on passe en navy pour éviter l'effet "tout rouge" */
.theme-incendie .floating-call {
  background: var(--c-blue);
  box-shadow: 0 14px 34px rgba(14,37,56,.4);
}
.theme-eau .page-hero-overlay,
.theme-fuite .page-hero-overlay,
.theme-incendie .page-hero-overlay,
.theme-catastrophe .page-hero-overlay {
  background:
    linear-gradient(180deg, rgba(14,37,56,.55) 0%, rgba(14,37,56,.78) 60%, rgba(14,37,56,.94) 100%),
    radial-gradient(900px 600px at 80% 30%, var(--accent-glow), transparent 70%);
}
.theme-eau .page-hero h1 strong         { color: var(--c-eau); }
.theme-fuite .page-hero h1 strong     { color: var(--c-turquoise); }
.theme-incendie .page-hero h1 strong    { color: var(--c-incendie); }
.theme-catastrophe .page-hero h1 strong { color: var(--c-catastrophe); }

/* ===========================================================================
   SECTIONS GÉNÉRIQUES
   ========================================================================== */
.section-head {
  max-width: 760px;
  margin: 0 auto clamp(50px, 6vw, 80px);
  text-align: center;
}
.section-head.left { text-align: left; margin-left: 0; }
.section-head h2 + p { color: var(--c-text-light); }
.section-bg-light { background: var(--c-bg); }
.section-bg-dark { background: var(--c-blue); color: var(--c-white); }
.section-bg-dark h2 { color: var(--c-white); }
.section-bg-dark .lead { color: rgba(255,255,255,.82); }

/* ---------- Bloc Intro / About — version premium avec carte glass ---------- */
.about-section {
  position: relative;
  overflow: hidden;
}
.about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at -10% 20%, rgba(107,193,180,.08), transparent 55%),
    radial-gradient(800px 500px at 110% 80%, rgba(14,37,56,.05), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.about-section > .container { position: relative; z-index: 1; }

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

/* Visuel : image principale + carte glassmorphism flottante */
.about-visual {
  position: relative;
}
.about-img {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 5 / 4;
  background:
    linear-gradient(135deg, var(--c-blue) 0%, #1a3a52 45%, #2c5d6e 80%, var(--c-turquoise) 130%);
  transition: transform var(--tr-slow);
}
.about-img:hover { transform: scale(1.02) translateY(-4px); }
.about-img::before {
  content: "";
  position: absolute;
  bottom: -10px; left: -10px;
  width: 70%; height: 38%;
  background: var(--c-turquoise);
  clip-path: ellipse(85% 65% at 0% 100%);
  opacity: .85;
}
.about-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.10), transparent 50%),
    radial-gradient(circle at 30% 80%, rgba(107,193,180,.20), transparent 40%);
}
/* Forme abstraite décorative derrière l'image */
.about-visual::before {
  content: "";
  position: absolute;
  inset: -24px -24px auto auto;
  width: 70%; height: 70%;
  border: 2px solid var(--c-turquoise);
  border-radius: var(--radius);
  z-index: -1;
  opacity: .25;
  transition: transform var(--tr-slow);
}
.about-visual:hover::before { transform: translate(8px, -8px); }

/* Carte glassmorphism flottante */
.about-badge {
  position: absolute;
  left: -24px; bottom: 30px;
  z-index: 2;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: 0 18px 50px rgba(14,37,56,.18);
  display: flex; align-items: center; gap: 14px;
  max-width: 280px;
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.about-badge .b-rating {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-turquoise), var(--c-blue));
  color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.about-badge .b-text { line-height: 1.3; }
.about-badge .b-stars { color: #fbbf24; font-size: .85rem; letter-spacing: 1px; }
.about-badge .b-label { font-size: .82rem; color: var(--c-text-light); font-weight: 600; }

@media (max-width: 980px) {
  .about-badge { left: 16px; bottom: -20px; }
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.about-stat {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 24px 26px;
  transition: all var(--tr);
  position: relative;
  overflow: hidden;
}
.about-stat::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-turquoise), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}
.about-stat:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.about-stat:hover::after { transform: scaleX(1); }
.about-stat .num {
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 2.4vw, 2.5rem);
  font-weight: 700;
  color: var(--c-turquoise);
  line-height: 1;
  letter-spacing: -.01em;
}
.about-stat .lbl {
  font-size: .94rem;
  color: var(--c-text-light);
  margin-top: 10px;
  line-height: 1.4;
}
@media (max-width: 980px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ===========================================================================
   CARTES SERVICES (page accueil)
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.2vw, 32px);
}
.service-card {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  padding: 44px 36px 36px;
  display: flex; flex-direction: column;
  transition: all var(--tr);
  overflow: hidden;
  isolation: isolate;
}
.service-card::after {
  content: "";
  position: absolute;
  inset: auto -50% -60% auto;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--service-color, var(--c-turquoise));
  opacity: 0;
  transform: scale(.6);
  transition: all var(--tr);
  z-index: -1;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.service-card:hover::after {
  opacity: .07;
  transform: scale(1);
}
.service-card .ico-wrap {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: var(--service-bg, rgba(107,193,180,.12));
  color: var(--service-color, var(--c-turquoise));
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-bottom: 26px;
  transition: all var(--tr);
}
.service-card:hover .ico-wrap {
  background: var(--service-color, var(--c-turquoise));
  color: var(--c-white);
  transform: scale(1.05) rotate(-4deg);
}
.service-card .ico-wrap svg { width: 36px; height: 36px; }
.service-card h3 { font-size: clamp(1.3rem, 1.6vw, 1.55rem); margin-bottom: 12px; }
.service-card p { color: var(--c-text-light); flex: 1; font-size: .98rem; }
.service-card .more {
  display: inline-flex;
  align-items: center; gap: 10px;
  margin-top: 18px;
  font-weight: 600;
  font-family: var(--font-title);
  letter-spacing: .04em;
  font-size: .95rem;
  text-transform: uppercase;
  color: var(--c-blue);
}
.service-card:hover .more { color: var(--service-color, var(--c-turquoise)); }
.service-card .more svg { transition: transform var(--tr); }
.service-card:hover .more svg { transform: translateX(6px); }

/* Couleurs par carte */
.service-card.s-fuite       { --service-color: var(--c-turquoise);   --service-bg: rgba(107,193,180,.14); }
.service-card.s-eau         { --service-color: var(--c-eau);         --service-bg: rgba(0,153,196,.10); }
.service-card.s-urgence     { --service-color: var(--c-turquoise);   --service-bg: rgba(107,193,180,.14); }
.service-card.s-incendie    { --service-color: var(--c-incendie);    --service-bg: rgba(234,79,61,.10); }
.service-card.s-catastrophe { --service-color: var(--c-catastrophe); --service-bg: rgba(147,196,98,.12); }

/* ===========================================================================
   "POURQUOI NOUS CHOISIR" — version premium
   Layout 2 colonnes : titre + 4 features numérotées
   ========================================================================== */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.why-intro h2 {
  color: var(--c-white);
  margin-bottom: 24px;
}
.why-intro .lead { color: rgba(255,255,255,.78); margin-bottom: 30px; }
.why-intro .btn { margin-top: 8px; }

.why-list { display: grid; gap: 18px; }
.why-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  align-items: flex-start;
  padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  transition: all var(--tr);
}
.why-item:first-child { border-top: 0; padding-top: 0; }
.why-item .why-num {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 3rem;
  color: var(--c-turquoise);
  line-height: 1;
  letter-spacing: -.02em;
  position: relative;
  padding-bottom: 6px;
  transition: all var(--tr);
}
.why-item .why-num::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 36px; height: 3px;
  background: var(--c-turquoise);
  transition: width var(--tr);
}
.why-item:hover .why-num { transform: translateY(-3px); }
.why-item:hover .why-num::after { width: 60px; }
.why-item h3 {
  color: var(--c-white);
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  margin-bottom: 8px;
}
.why-item p {
  color: rgba(255,255,255,.7);
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}
@media (max-width: 980px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-item { grid-template-columns: 70px 1fr; gap: 20px; }
  .why-item .why-num { font-size: 2.4rem; }
}

/* ===========================================================================
   AVIS GOOGLE
   ========================================================================== */
.reviews-head { text-align: center; margin-bottom: 56px; }
.reviews-rating {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 12px 26px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.reviews-rating .stars { color: #fbbf24; font-size: 1.15rem; letter-spacing: 2px; }
.reviews-rating .score { font-family: var(--font-title); font-weight: 700; font-size: 1.25rem; }
.reviews-rating .label { color: var(--c-text-light); font-size: .92rem; }
/* Le nombre d'avis servis par Google varie (5 au maximum, parfois moins) :
   une grille laissait le dernier avis orphelin. Même carrousel horizontal que
   le feed Instagram — flèches, défilement au doigt, accroche au scroll. */
.reviews-carousel { position: relative; }
.reviews-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 2px;
  align-items: stretch;
}
.reviews-grid::-webkit-scrollbar { display: none; }
.reviews-grid > .review {
  flex: 0 0 calc((100% - 24px * 2) / 3);   /* 3 avis visibles sur desktop */
  scroll-snap-align: start;
}
@media (max-width: 1100px) {
  .reviews-grid > .review { flex-basis: calc((100% - 24px) / 2); }  /* 2 visibles */
}
@media (max-width: 700px) {
  .reviews-grid > .review { flex-basis: 86%; }                      /* swipe mobile */
}
.review {
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  padding: 32px 30px;
  transition: all var(--tr);
  position: relative;
}
.review::before {
  content: "“";
  position: absolute;
  top: 10px; right: 22px;
  font-family: Georgia, serif;
  font-size: 5rem;
  color: var(--c-turquoise);
  opacity: .14;
  line-height: 1;
}
.review:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.review .head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.review .avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-blue), var(--c-turquoise));
  color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1rem;
}
/* Avatar photo (photo de profil Google quand elle est disponible) */
img.avatar { object-fit: cover; flex: 0 0 auto; background: var(--c-bg-2); }

/* Lien d'attribution obligatoire vers l'avis d'origine sur Google */
.review .r-link {
  display: inline-block;
  margin-top: 14px;
  font-size: .84rem;
  font-weight: 600;
  /* #357d73 : même teinte que le turquoise du site, assez foncée pour être
     lisible sur fond clair (4,8:1, le turquoise d'origine plafonnait à 2,7:1). */
  color: #357d73;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.review .r-link:hover { color: var(--c-blue); }

/* Mention sous la grille : l'API Places ne sert que 5 avis */
.reviews-note {
  margin: 26px auto 0;
  max-width: 620px;
  text-align: center;
  font-size: .86rem;
  color: var(--c-text-light);
}

/* ---------- États de chargement (avis + Instagram) ----------
   Aucun contenu factice : un simple bloc en attente, remplacé
   par la donnée réelle ou masqué si l'API ne répond pas. */
.is-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-2);
  border-color: transparent;
  min-height: 190px;
  pointer-events: none;
}
.is-skeleton::before,
.is-skeleton::after { content: none !important; }
.is-skeleton::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: translateX(-100%);
  animation: ega-shimmer 1.5s infinite;
}
@keyframes ega-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .is-skeleton::after { animation: none; } }

.review .name { font-weight: 700; font-family: var(--font-title); font-size: 1.02rem; color: var(--c-blue); }
.review .date { font-size: .85rem; color: var(--c-text-light); }
.review .stars { color: #fbbf24; letter-spacing: 1px; margin-bottom: 10px; font-size: .98rem; }
.review p { color: var(--c-text); font-size: .96rem; margin: 0; line-height: 1.65; }

/* ===========================================================================
   BLOC URGENCE / CTA bandeau
   ========================================================================== */
.urgency {
  background:
    linear-gradient(135deg, rgba(14,37,56,.94), rgba(14,37,56,.94)),
    radial-gradient(circle at 90% 10%, rgba(107,193,180,.45), transparent 50%);
  color: var(--c-white);
  border-radius: var(--radius);
  padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 70px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.urgency::before {
  content: "";
  position: absolute;
  right: -120px; bottom: -120px;
  width: 420px; height: 420px;
  background: rgba(107,193,180,.20);
  border-radius: 50%;
  filter: blur(40px);
}
.urgency h2 {
  color: var(--c-white);
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
}
.urgency p { color: rgba(255,255,255,.85); margin-bottom: 0; font-size: 1.05rem; }
.urgency-cta { text-align: center; position: relative; z-index: 1; }
.urgency-cta .label {
  display: block;
  font-family: var(--font-title);
  font-size: .85rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-turquoise);
  margin-bottom: 10px;
}
.urgency-cta .num {
  display: block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3rem);
  color: var(--c-white);
  letter-spacing: .02em;
  margin-bottom: 22px;
  line-height: 1;
}
@media (max-width: 880px) {
  .urgency { grid-template-columns: 1fr; text-align: center; }
}

/* ===========================================================================
   INSTAGRAM — feed visuel
   ========================================================================== */
.insta-section {
  background: var(--c-bg);
  padding: clamp(70px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.insta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 500px at 110% -10%, rgba(220,39,67,.06), transparent 55%),
    radial-gradient(700px 400px at -10% 110%, rgba(240,148,51,.06), transparent 55%);
  pointer-events: none;
}
.insta-section > .container { position: relative; z-index: 1; }
.insta-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 50px;
}
.insta-head .h-left { max-width: 600px; }
.insta-head h2 { margin-bottom: 14px; }
.insta-head p { color: var(--c-text-light); margin: 0; }
.insta-cta-handle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--c-blue);
  padding: 12px 22px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  transition: all var(--tr);
}
.insta-cta-handle:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(220,39,67,.30);
}
.insta-cta-handle:hover svg { color: #fff; }

/* Carousel horizontal du feed */
.insta-carousel {
  position: relative;
}
.insta-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 2px;
}
.insta-grid::-webkit-scrollbar { display: none; }
.insta-grid > .insta-post {
  flex: 0 0 calc((100% - 16px * 3) / 4);  /* 4 posts visibles sur desktop */
  scroll-snap-align: start;
}
@media (max-width: 1100px) {
  .insta-grid > .insta-post { flex-basis: calc((100% - 16px * 2) / 3); } /* 3 visibles */
}
@media (max-width: 760px) {
  .insta-grid > .insta-post { flex-basis: calc((100% - 16px) / 2); }      /* 2 visibles */
}
@media (max-width: 480px) {
  .insta-grid > .insta-post { flex-basis: 80%; }                           /* swipe mobile */
}

/* Flèches de navigation */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-blue);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all var(--tr);
}
.carousel-arrow:hover {
  background: var(--c-blue);
  color: var(--c-white);
  transform: translateY(-50%) scale(1.06);
  border-color: var(--c-blue);
}
.carousel-arrow:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: translateY(-50%) scale(.95);
}
.carousel-arrow:disabled:hover {
  background: var(--c-white);
  color: var(--c-blue);
  border-color: var(--c-border);
}
.carousel-arrow.prev { left: -22px; }
.carousel-arrow.next { right: -22px; }
@media (max-width: 720px) {
  .carousel-arrow { width: 44px; height: 44px; }
  .carousel-arrow.prev { left: 4px; }
  .carousel-arrow.next { right: 4px; }
}
.insta-post {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #1a3a52, var(--c-blue));
  display: block;
  cursor: pointer;
  transition: transform var(--tr);
}
.insta-post img {
  /* position + z-index indispensables : ::before ci-dessous est un dégradé
     absolu qui, sans ça, se peint PAR-DESSUS l'image (un pseudo-élément
     positionné passe devant un contenu non positionné). Le dégradé reste
     visible pendant le chargement, l'image le recouvre une fois arrivée. */
  position: relative;
  z-index: 1;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--tr-slow);
}
.insta-post:hover { transform: translateY(-4px); }
.insta-post:hover img { transform: scale(1.08); }

/* Placeholder visuel (lorsque pas d'image fournie) */
.insta-post::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(107,193,180,.22), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(234,79,61,.18), transparent 60%),
    linear-gradient(135deg, #122e44, #1f4a66);
}
.insta-post .ico-ph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,.20);
  z-index: 1;
}
/* Overlay au hover */
.insta-post::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(14,37,56,.78));
  opacity: 0;
  transition: opacity var(--tr);
  z-index: 2;
}
.insta-post:hover::after { opacity: 1; }
.insta-post .post-info {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 3;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: all var(--tr);
}
.insta-post:hover .post-info { opacity: 1; transform: translateY(0); }
.insta-post .post-info .stat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; margin-right: 12px;
  font-family: var(--font-title);
}
.insta-post .post-info .stat svg { width: 14px; height: 14px; }
.insta-post .badge-ig {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--tr);
}
.insta-post:hover .badge-ig { opacity: 1; }


/* ===========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--c-blue);
  color: rgba(255,255,255,.72);
  position: relative;
  padding-top: 90px;
  margin-top: 0;
}
.footer-curve { position: absolute; top: -1px; left: 0; right: 0; transform: rotate(180deg); pointer-events: none; }
.footer-curve svg { width: 100%; height: 60px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: clamp(40px, 4vw, 70px);
  padding-bottom: 60px;
}
.footer-col h3,
.footer-col h4 {
  color: var(--c-white);
  font-size: .98rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-weight: 600;
}
.footer-col a {
  display: block;       /* chaque lien sur sa propre ligne, espacé */
  padding: 8px 0;
  color: rgba(255,255,255,.72);
  font-size: .98rem;
  width: fit-content;
  position: relative;
  transition: padding-left var(--tr), color var(--tr-fast);
}
.footer-col a:hover { padding-left: 10px; }
.footer-col a:not(h3 + a):not(h4 + a)::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 2px;
  background: var(--c-turquoise);
  transform: translateY(-50%);
  transition: width var(--tr);
}
.footer-col a:hover::before { width: 6px; }
.footer-col a:hover { color: var(--c-turquoise); }
.footer-brand .logo img { height: 50px; }
.footer-brand p { margin-top: 24px; font-size: .98rem; max-width: 380px; line-height: 1.7; }
.footer-social {
  display: flex; gap: 10px;
  margin-top: 26px;
}
.footer-social a {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-white);
  transition: all var(--tr);
}
.footer-social a:hover {
  background: var(--c-turquoise);
  color: var(--c-blue);
  transform: translateY(-3px);
}
.footer-contact li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: .96rem; }
.footer-contact svg { flex-shrink: 0; color: var(--c-turquoise); margin-top: 4px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 26px 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .88rem;
  color: rgba(255,255,255,.55);
}
.footer-bottom a { color: rgba(255,255,255,.55); margin-left: 20px; }
.footer-bottom a:hover { color: var(--c-turquoise); }
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom a { margin: 0 10px; }
}

/* ===========================================================================
   PAGES SERVICES — sections internes
   ========================================================================== */

/* Bloc texte service */
.service-intro {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(30px, 4vw, 70px);
}
.service-intro h2 { margin-top: 0; }
.service-intro .col-right p { color: var(--c-text-light); }
@media (max-width: 980px) {
  .service-intro { grid-template-columns: 1fr; gap: 30px; }
}

/* Étapes d'intervention — version premium */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2vw, 28px);
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  padding: 36px 30px 30px;
  transition: all var(--tr);
  counter-increment: step;
  overflow: hidden;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 18px; right: 24px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 3rem;
  color: var(--accent, var(--c-turquoise));
  opacity: .14;
  line-height: 1;
  transition: all var(--tr);
}
.step::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 0;
  background: var(--accent, var(--c-turquoise));
  transition: height var(--tr);
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.step:hover::before { opacity: .28; transform: scale(1.08); }
.step:hover::after  { height: 100%; }
.step h3 { font-size: 1.15rem; margin-bottom: 10px; padding-right: 50px; }
.step p { color: var(--c-text-light); font-size: .96rem; margin: 0; line-height: 1.7; }

/* Bénéfices — premium, grille flex centrée (gère les nombres impairs) */
.benefits-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 1.8vw, 24px);
}
.benefit {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 28px 28px;
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--shadow-xs);
  transition: all var(--tr);
  overflow: hidden;
  /* base flex : ~3 par ligne sur desktop, 2 sur tablette, 1 sur mobile */
  flex: 1 1 320px;
  max-width: 420px;
}
@media (min-width: 1100px) {
  .benefit { flex-basis: calc(33.333% - 16px); max-width: calc(33.333% - 16px); }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .benefit { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 699px) {
  .benefit { flex-basis: 100%; max-width: 100%; }
}
.benefit::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--accent, var(--c-turquoise));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}
.benefit:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.benefit:hover::before { transform: scaleX(1); }
.benefit .b-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(107,193,180,.14);
  color: var(--accent, var(--c-turquoise));
  transition: all var(--tr);
}
.benefit:hover .b-ico {
  background: var(--accent, var(--c-turquoise));
  color: var(--c-white);
}
.benefit strong {
  display: block; margin-bottom: 4px;
  font-family: var(--font-title);
  font-size: 1.1rem; font-weight: 600;
  color: var(--c-blue);
}
.benefit span {
  color: var(--c-text-light);
  font-size: .94rem;
  line-height: 1.6;
}

/* Réassurance — version premium */
.reassurance {
  background: var(--c-blue);
  color: var(--c-white);
  border-radius: var(--radius);
  padding: clamp(46px, 6vw, 80px) clamp(28px, 4vw, 60px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.reassurance::before {
  content: "";
  position: absolute;
  right: -100px; top: -100px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: var(--accent, rgba(107,193,180,.30));
  opacity: .25;
  filter: blur(60px);
}
.reassurance-head { text-align: center; max-width: 700px; margin: 0 auto clamp(40px,5vw,60px); position: relative; }
.reassurance-head h2 { color: var(--c-white); margin: 0 0 14px; }
.reassurance-head p { color: rgba(255,255,255,.85); margin: 0; }
.re-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 24px;
  position: relative;
}
.re-item {
  text-align: center;
  padding: 24px 20px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: all var(--tr);
}
.re-item:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.08);
  border-color: rgba(107,193,180,.35);
}
.re-item .num {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  color: var(--accent, var(--c-turquoise));
  line-height: 1;
  margin-bottom: 10px;
}
.re-item .txt { color: rgba(255,255,255,.82); font-size: .94rem; }

/* CTA final */
.cta-final {
  text-align: center;
  background: var(--c-bg);
  border-radius: var(--radius);
  padding: clamp(46px, 6vw, 90px) clamp(28px, 5vw, 60px);
  position: relative;
  overflow: hidden;
}
.cta-final::before, .cta-final::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .35;
  z-index: 0;
}
.cta-final::before {
  width: 280px; height: 280px;
  background: var(--c-turquoise);
  top: -100px; left: -100px;
}
.cta-final::after {
  width: 320px; height: 320px;
  background: var(--accent, var(--c-turquoise));
  bottom: -120px; right: -120px;
}
.cta-final > * { position: relative; z-index: 1; }
.cta-final h2 { margin-bottom: 16px; font-size: clamp(2rem, 3.6vw, 3rem); }
.cta-final p { color: var(--c-text-light); max-width: 640px; margin: 0 auto 30px; font-size: 1.08rem; }
.cta-final .btns { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ===========================================================================
   PAGE CONTACT
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
}
.contact-info-card {
  background: var(--c-blue);
  color: var(--c-white);
  border-radius: var(--radius);
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.contact-info-card::after {
  content: "";
  position: absolute;
  right: -80px; bottom: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(107,193,180,.30);
  filter: blur(40px);
}
.contact-info-card h2 { color: var(--c-white); }
.contact-info-card ul { position: relative; z-index: 1; }
.contact-info-card li {
  display: flex; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.contact-info-card li:last-child { border-bottom: 0; }
.contact-info-card .ico {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(107,193,180,.20);
  color: var(--c-turquoise);
  display: flex; align-items: center; justify-content: center;
}
.contact-info-card .lbl { font-family: var(--font-title); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-turquoise); }
.contact-info-card .val { font-weight: 600; color: var(--c-white); font-size: 1.08rem; }
.contact-info-card .val a { color: var(--c-white); }
.contact-info-card .val a:hover { color: var(--c-turquoise); }

.contact-form {
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius);
  padding: 44px 40px;
  box-shadow: var(--shadow-sm);
}
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--font-title);
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 8px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  font: inherit;
  color: var(--c-text);
  transition: border-color var(--tr-fast), background var(--tr-fast), box-shadow var(--tr-fast);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-turquoise);
  background: var(--c-white);
  box-shadow: 0 0 0 5px rgba(107,193,180,.16);
}
.field textarea { resize: vertical; min-height: 140px; }
.field .hint { font-size: .8rem; color: var(--c-text-light); margin-top: 6px; }
.form-status {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  display: none;
  font-size: .95rem;
}
.form-status.ok      { display: block; background: rgba(107,193,180,.15); color: #0a6f60; }
.form-status.pending { display: block; background: rgba(14,37,56,.07); color: var(--c-text-light); }

/* Pot de miel : masqué à l'œil ET au lecteur d'écran, mais présent dans le DOM
   pour que les robots le remplissent. display:none serait ignoré par certains. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.form-status.error { display: block; background: rgba(234,79,61,.15); color: #b73224; }
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form .row { grid-template-columns: 1fr; }
}

/* ===========================================================================
   ÉLÉMENTS GRAPHIQUES DE MARQUE (PNG fournis par EGA)
   ========================================================================== */

/* Badge logo service — alignement GAUCHE, inline au-dessus du breadcrumb */
.service-brand-badge {
  display: block;
  width: clamp(150px, 16vw, 220px);
  height: auto;
  margin: 0 0 32px 0;          /* aligné à gauche par défaut */
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.32));
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
/* Variante « sablier seul » (visuel carré) : gabarit réduit pour rester
   à la même hauteur optique que les logos sectoriels 1640×856. */
.service-brand-badge.is-mark { width: clamp(92px, 9vw, 130px); }
@media (max-width: 640px) { .service-brand-badge.is-mark { width: clamp(76px, 20vw, 104px); } }

.service-brand-badge.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (max-width: 640px) {
  .service-brand-badge {
    width: clamp(110px, 32vw, 160px);
    margin-bottom: 24px;
  }
}

/* Courbe décorative en arrière-plan de section (utilise les PNG de marque) */
.has-decor {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.has-decor::before,
.has-decor::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.has-decor > .container,
.has-decor > div { position: relative; z-index: 1; }

/* Variante : courbe turquoise en bas/droite (subtile) */
.decor-curve-tr {
  background-image: url("../images/decor-curve-turquoise.png");
  background-repeat: no-repeat;
  background-position: 110% 90%;
  background-size: clamp(380px, 50vw, 720px);
}
.decor-curve-bl {
  background-image: url("../images/decor-curve-navy.png");
  background-repeat: no-repeat;
  background-position: -10% 110%;
  background-size: clamp(380px, 50vw, 720px);
}

/* Watermark "logo mark" — un sablier en filigrane derrière certaines sections */
.has-watermark {
  position: relative;
  overflow: hidden;
}
.has-watermark::before {
  content: "";
  position: absolute;
  right: calc(var(--gutter) * -.2);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 32vw, 460px);
  aspect-ratio: 1 / 1;
  background: url("../images/logo-mark.png") no-repeat center / contain;
  opacity: .04;          /* TRÈS discret */
  z-index: 0;
  pointer-events: none;
}
.section-bg-dark.has-watermark::before {
  /* Sur fond sombre, on utilise la version cercle navy fondue */
  background-image: url("../images/logo-mark-circle-turquoise.png");
  opacity: .06;
}
.has-watermark > .container { position: relative; z-index: 1; }

/* Séparateur courbe entre 2 sections (utilise une vraie image PNG cette fois) */
.section-divider {
  position: relative;
  height: clamp(60px, 8vw, 110px);
  background: url("../images/decor-curve-turquoise.png") no-repeat center / 100% 100%;
  margin-top: -1px;
  pointer-events: none;
}

/* ===========================================================================
   ANIMATIONS SCROLL — micro-animations sobres et premium
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Stagger via le parent : chaque enfant attendra son tour */
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* Variantes de reveal */
.reveal-left  { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal-left.visible, .reveal-right.visible { transform: translateX(0); }
.reveal-scale { transform: scale(.96); }
.reveal-scale.visible { transform: scale(1); }

/* Pulse subtil sur certains éléments clés */
@media (prefers-reduced-motion: no-preference) {
  .pulse-soft {
    animation: pulseSoft 3.4s ease-in-out infinite;
  }
  @keyframes pulseSoft {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
  }
}

/* Respect des préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ===========================================================================
   BOUTON FLOTTANT MOBILE
   ========================================================================== */
.floating-call {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 10px;
  /* Rouge un cran plus soutenu que --c-incendie (#ea4f3d) : texte blanc
     lisible à 4,6:1 au lieu de 3,7:1, écart de teinte à peine visible. */
  background: #d63f2d;
  color: var(--c-white);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow: 0 14px 34px rgba(234,79,61,.45);
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.floating-call svg { width: 18px; height: 18px; }
@media (max-width: 768px) { .floating-call { display: inline-flex; } }

/* ===========================================================================
   BOUTON WHATSAPP FLOTTANT  (injecté par main.js — cf. config.whatsapp)
   ========================================================================== */
.wa-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 91;                 /* juste au-dessus de .floating-call (90) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;         /* vert officiel WhatsApp */
  color: var(--c-white);
  box-shadow: 0 10px 26px rgba(37,211,102,.38), var(--shadow-xs);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
}
.wa-fab:hover,
.wa-fab:focus-visible {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 34px rgba(37,211,102,.5);
}
.wa-fab:focus-visible { outline: 3px solid var(--c-white); outline-offset: 3px; }
.wa-fab svg { display: block; }

/* Sur mobile, .floating-call occupe déjà le coin : on empile au-dessus */
@media (max-width: 768px) {
  .wa-fab { width: 52px; height: 52px; bottom: 88px; right: 20px; }
  .wa-fab svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:hover, .wa-fab:focus-visible { transform: none; }
}

@media print { .wa-fab, .floating-call { display: none !important; } }

/* ===========================================================================
   AJUSTEMENTS MOBILE
   ========================================================================== */
@media (max-width: 640px) {
  .hero, .page-hero { min-height: 78vh; padding: 100px 0 90px; }
  .urgency, .reassurance { padding: 36px 24px; }
  .contact-info-card, .contact-form { padding: 28px 22px; }
  .footer-brand p { max-width: 100%; }
  .service-card { padding: 32px 24px; }
  .benefit { padding: 20px; }
}

/* ===========================================================================
   BANDEAU DE CONSENTEMENT  (injecté par consent.js — mesure d'audience GA4)
   Accepter et Refuser ont la même taille et la même place : la CNIL exige
   que refuser soit aussi simple qu'accepter. Sur mobile le bandeau prend la
   largeur de l'écran et remonte les boutons Urgence et WhatsApp au-dessus
   de lui, pour qu'ils restent visibles.
   ========================================================================== */
.consent {
  position: fixed;
  z-index: 95;
  /* À droite sur ordinateur : à gauche, il masquait le bouton « Appeler
     maintenant » du haut de page, l'action principale du site. */
  right: 22px;
  bottom: 22px;
  width: min(440px, calc(100vw - 44px));
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  background: var(--c-white);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--tr), transform var(--tr);
}
.consent[hidden] { display: none; }
.consent.is-open { opacity: 1; transform: none; }
.consent-text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--c-text-light);
}
.consent-text a {
  color: var(--c-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-text a:hover { color: var(--c-turquoise-d); }
.consent-actions { display: flex; gap: 10px; }
.consent-btn {
  flex: 1;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
}
.consent-btn:active { transform: scale(.97); }
.consent-btn:focus-visible { outline: 3px solid var(--c-turquoise); outline-offset: 2px; }
.consent-refuse {
  border: 2px solid var(--c-blue);
  background: transparent;
  color: var(--c-blue);
}
.consent-refuse:hover { background: var(--c-blue); color: var(--c-white); }
.consent-accept {
  border: 2px solid var(--c-turquoise);
  background: var(--c-turquoise);
  color: var(--c-blue);
}
.consent-accept:hover { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); }

/* Le bouton WhatsApp, en bas à droite, passe au-dessus du bandeau */
body.has-consent .wa-fab { bottom: calc(34px + var(--consent-h, 0px)); }

/* Lien « Gérer les cookies » du pied de page : un bouton habillé en lien */
.footer-consent {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 20px;
  font: inherit;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: color var(--tr-fast);
}
.footer-consent:hover { color: var(--c-turquoise); }

@media (max-width: 768px) {
  .consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  }
  body.has-consent .floating-call { bottom: calc(22px + var(--consent-h, 0px)); }
  body.has-consent .wa-fab { bottom: calc(88px + var(--consent-h, 0px)); }
}
@media (max-width: 560px) {
  .footer-consent { margin: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}
@media print { .consent { display: none !important; } }

/* reCAPTCHA v3 : le badge flottant de Google masquerait les boutons Urgence
   et WhatsApp. Google autorise à le cacher si la mention ci-dessous figure
   près du formulaire (.form-recaptcha). */
.grecaptcha-badge { visibility: hidden !important; }
.form-recaptcha {
  margin: 14px 0 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--c-text-light);
}
.form-recaptcha a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-recaptcha a:hover { color: var(--c-blue); }

/* Photo d'équipe du bloc « Qui sommes-nous » : elle remplit le cadre 5:4 */
.about-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}