/* ===========================================================
   Sani-Chauffe — Skeuomorphisme clair & glassy
   Matières réelles du métier :
     · Céramique  → lavabo / vasque (blanc émaillé, reflet doux)
     · Inox + Verre → douche (graphite brossé, verre dépoli teinté)
     · Cuivre     → tuyauterie (bronze poli, accents)
   Animations au scroll (parallaxe d'images chaudières / salles de bains).
   Pas de WebGL — site léger.
   =========================================================== */

:root{
  /* surfaces */
  --pearl:#fbf9f6; --stone:#f1ece4; --parchment:#e7ded2; --ink:#2b2521;
  --muted:#6c5f58; --faint:rgba(43,37,33,.34);
  /* matières */
  --copper:#b87333; --copper-l:#e0a874; --copper-d:#8a4f22; --copper-sheen:#f0cda3;
  --azure:#1294ca; --azure-d:#0e6fa0; --royal:#1e40af;
  --inox-1:#5b6473; --inox-2:#3a4250; --inox-3:#262c36; --inox-edge:#aeb6c2;
  --ceramic:#ffffff; --ceramic-2:#f4f0ea;
  --glass:rgba(255,255,255,.62); --glass-tint:rgba(18,148,202,.05);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; -webkit-font-smoothing:antialiased; color:var(--ink);
  background-color:var(--stone);
  /* marbre veiné en CSS pur (fond fixe) */
  background-image:
    repeating-linear-gradient(-19deg,
      transparent 0 95px, rgba(165,145,120,.06) 95px 96px,
      transparent 96px 190px, rgba(188,168,140,.08) 190px 192px),
    repeating-linear-gradient(-68deg,
      transparent 0 140px, rgba(140,120,95,.045) 140px 141px),
    linear-gradient(165deg, var(--pearl) 0%, var(--stone) 52%, var(--parchment) 100%);
  /* NB : pas de background-attachment:fixed → évite un repaint plein écran à chaque scroll */
}

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--parchment); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--copper-l),var(--copper-d)); border-radius:10px; border:2px solid var(--parchment); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* couche de profondeur : empilement */
header, main, section, footer, #scroll-progress, #urgent-fab{ position:relative; z-index:2; }

/* ====================================================
   Barre de progression — filet cuivre/azur
   ==================================================== */
#scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:100;
  background:linear-gradient(90deg,var(--azure),var(--royal),var(--copper));
  box-shadow:0 0 10px rgba(18,148,202,.35); }

/* ====================================================
   VERRE de douche — panneaux glassy (sections)
   ==================================================== */
/* Verre dépoli SANS backdrop-filter : on simule le givré avec un fond
   translucide assez opaque (zéro coût de re-rendu au scroll). */
.section-glass{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(252,250,247,.86)),
    var(--glass-tint);
  border-top:1px solid rgba(255,255,255,.95);
  border-bottom:1px solid rgba(120,140,160,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96), inset 0 0 80px rgba(18,148,202,.03), 0 1px 30px rgba(60,80,100,.05);
}
/* arête de verre supérieure */
.section-glass::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 30%,rgba(18,148,202,.35) 50%,rgba(255,255,255,.95) 70%,transparent); opacity:.7; }
/* sections aérées : le marbre du fond respire (translucide, sans flou) */
#services, #realisations, #zones{ background:rgba(251,249,246,.50); }

/* ====================================================
   HEADER
   ==================================================== */
#header.scrolled{
  /* fond quasi-opaque (pas de backdrop-filter : header fixe = repaint à chaque scroll) */
  background:linear-gradient(180deg,rgba(251,249,246,.985),rgba(245,241,235,.96));
  border-bottom:1px solid rgba(120,140,160,.18);
  box-shadow:0 8px 30px -16px rgba(60,70,90,.18);
}
.nav-link{ position:relative; transition:color .3s; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:linear-gradient(90deg,var(--azure),var(--copper)); transition:width .35s ease; }
.nav-link:hover{ color:var(--ink); }
.nav-link:hover::after{ width:100%; }
#mobile-menu{ background:rgba(251,249,246,.97); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid rgba(120,140,160,.18); }
.mobile-link{ display:block; padding:.85rem .25rem; border-bottom:1px solid rgba(43,37,33,.07); }

/* ====================================================
   LOGO — icône sur plaque inox brossé
   ==================================================== */
.brand{ display:inline-flex; align-items:center; gap:.7rem; }
.brand-plate{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg,#eef1f5,#aeb4be 45%,#cbd0d8 55%,#8b919c);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.20), inset 0 1px 1px rgba(255,255,255,.9), inset 0 -2px 4px rgba(0,0,0,.14);
  position:relative; overflow:hidden; transition:transform .4s; }
.brand-plate::after{ content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.22) 0 1px, transparent 1px 3px); opacity:.55; }
.brand:hover .brand-plate{ transform:translateY(-2px) rotate(-2deg); }
.brand-icon{ width:40px; height:40px; position:relative; z-index:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.18rem; letter-spacing:.01em; }
.brand-tag{ font-size:.54rem; letter-spacing:.16em; color:rgba(43,37,33,.42); margin-top:4px; white-space:nowrap; }
footer .brand-plate{ width:48px; height:48px; } footer .brand-icon{ width:34px; height:34px; }

/* ====================================================
   BOUTONS — inox graphite brossé + halo azur
   (urgence = bleu eau ; plus d'orange/jaune)
   ==================================================== */
.btn-metal,.btn-water{ position:relative; display:inline-flex; align-items:center; gap:.55rem;
  padding:.74rem 1.5rem; border-radius:999px; font-weight:700; font-size:.92rem;
  overflow:hidden; isolation:isolate; white-space:nowrap; transition:transform .3s, box-shadow .3s, filter .3s;
  border:1px solid rgba(255,255,255,.16); color:#f4f7fb; }
.btn-metal{ background:linear-gradient(180deg,var(--inox-1),var(--inox-2) 46%,var(--inox-3) 80%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.30), inset 0 -3px 7px rgba(0,0,0,.42), 0 8px 20px -10px rgba(38,44,54,.6); }
.btn-water{ background:linear-gradient(180deg,#46c4ef,var(--azure) 46%,var(--azure-d) 82%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), inset 0 -3px 7px rgba(8,60,90,.4), 0 8px 22px -10px rgba(14,111,160,.62); }
.btn-lg{ padding:.98rem 1.9rem; font-size:1rem; }
/* texture inox brossé / reflet verre */
.btn-metal::before,.btn-water::before{ content:''; position:absolute; inset:0; z-index:-1;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px); opacity:.6; }
/* balayage lumineux */
.btn-metal::after,.btn-water::after{ content:''; position:absolute; top:0; left:0; bottom:0; width:55%;
  background:linear-gradient(115deg,transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform:translateX(-160%) skewX(-12deg); transition:transform .8s ease; }
.btn-metal:hover,.btn-water:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn-metal:hover{ box-shadow:inset 0 1px 1px rgba(255,255,255,.30), inset 0 -3px 7px rgba(0,0,0,.42), 0 0 0 1px rgba(18,148,202,.55), 0 12px 30px -8px rgba(18,148,202,.5); }
.btn-water:hover{ box-shadow:inset 0 1px 1px rgba(255,255,255,.45), inset 0 -3px 7px rgba(8,60,90,.4), 0 12px 30px -8px rgba(18,148,202,.6); }
.btn-metal:hover::after,.btn-water:hover::after{ transform:translateX(320%) skewX(-12deg); }
.btn-metal:active,.btn-water:active{ transform:translateY(1px); box-shadow:inset 0 2px 7px rgba(0,0,0,.5); }

/* ====================================================
   BADGES / pills (accent cuivre = matière)
   ==================================================== */
.badge-metal{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem 1rem; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--copper-d);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(245,239,231,.7));
  border:1px solid rgba(184,115,51,.30); box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px rgba(120,80,40,.05); }
.trust-pill{ padding:.4rem .9rem; border-radius:999px; background:rgba(255,255,255,.7);
  border:1px solid rgba(120,140,160,.20); box-shadow:inset 0 1px 0 rgba(255,255,255,.95); color:var(--muted); font-size:.85rem; }

/* ====================================================
   TYPO / titres
   ==================================================== */
.text-shadow-lux{ text-shadow:0 2px 18px rgba(60,70,90,.08), 0 1px 2px rgba(60,40,20,.06); }
.text-gradient-water{ background:linear-gradient(120deg,var(--azure),var(--royal) 55%,var(--azure));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-copper{ color:var(--copper) !important; }
.eyebrow{ display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--copper); margin-bottom:1rem; }
.eyebrow::before{ content:'— '; opacity:.6; }
.section-title{ font-family:'Sora',sans-serif; font-weight:800; line-height:1.08;
  font-size:clamp(1.9rem,4.5vw,3.25rem); letter-spacing:-.02em; color:var(--ink); }
.section-sub{ margin-top:1.1rem; color:var(--muted); font-size:1.05rem; line-height:1.7; }

/* ====================================================
   CÉRAMIQUE — cartes blanc émaillé (reflet doux)
   ==================================================== */
.hero-rise{ opacity:0; transform:translateY(38px); }

.ceramic, .stat-card, .why-card, .service-card, .review-card, .contact-row, .info-plate, .map-wrap, .quote-form{
  position:relative;
  background:linear-gradient(157deg,#ffffff 0%,#fcfaf7 60%,#f4efe8 100%);
  border:1px solid rgba(120,140,160,.18);
  box-shadow:0 10px 30px -16px rgba(60,70,90,.16), inset 0 1px 0 rgba(255,255,255,.98), inset 0 -10px 22px -16px rgba(150,140,125,.18);
}
/* glaçure : reflet en haut */
.ceramic::after, .stat-card::before, .service-card::after, .why-card::after, .quote-form::after{
  content:''; position:absolute; left:6%; right:6%; top:0; height:42%; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent); opacity:.6; }
.stat-card{ position:relative; border-radius:1.1rem; padding:1.6rem 1.4rem; overflow:hidden; transition:transform .4s,border-color .4s; }
.stat-card:hover{ transform:translateY(-6px); border-color:rgba(18,148,202,.38); }
.counter{ font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(2rem,4vw,2.8rem);
  background:linear-gradient(135deg,var(--azure),var(--royal),var(--copper)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-card p{ margin-top:.35rem; color:var(--muted); font-size:.92rem; position:relative; z-index:1; }

/* ====================================================
   TIMELINE — colonne cuivre
   ==================================================== */
.timeline-spine{ background:linear-gradient(180deg,var(--azure),var(--royal),var(--copper)); box-shadow:0 0 10px rgba(18,148,202,.2); }
.tl-dot{ position:absolute; left:-6px; top:6px; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--copper-sheen), var(--copper-d)); box-shadow:0 0 0 5px rgba(184,115,51,.13), 0 2px 6px rgba(60,40,20,.2); }
@media(min-width:1024px){ .tl-item .tl-dot{ left:auto; right:-9px; } }
.tl-item{ opacity:0; }
.tl-year{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.6rem; color:var(--copper); }
.tl-h{ font-size:1.2rem; font-weight:700; margin-top:.25rem; color:var(--ink); }
.tl-p{ color:var(--muted); margin-top:.5rem; }

/* ====================================================
   SERVICES — cartes céramique + orbe inox brossé
   ==================================================== */
.service-card{ position:relative; border-radius:1.25rem; padding:2rem 1.8rem; overflow:hidden;
  transform-style:preserve-3d; transition:transform .25s ease, box-shadow .4s, border-color .4s; }
.service-card::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),rgba(18,148,202,.1),transparent 45%); opacity:0; transition:opacity .4s; }
.service-card > *{ position:relative; z-index:1; }
.service-card:hover{ border-color:rgba(18,148,202,.4); box-shadow:0 26px 50px -24px rgba(18,148,202,.34), inset 0 1px 0 rgba(255,255,255,.98); }
.service-card:hover::before{ opacity:1; }
.service-card h3{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.3rem; margin:1.1rem 0 .6rem; transform:translateZ(45px); color:var(--ink); }
.service-card p{ color:var(--muted); line-height:1.65; font-size:.96rem; transform:translateZ(22px); }
.icon-orb{ width:66px; height:66px; border-radius:1rem; display:grid; place-items:center; transform:translateZ(65px);
  background:linear-gradient(145deg,#e3e7ee,#9aa0aa 50%,#c2c7d0 60%,#7c828d); color:var(--inox-3);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.95), inset 0 -3px 5px rgba(0,0,0,.18); position:relative; overflow:hidden; }
.icon-orb::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(120deg, rgba(255,255,255,.2) 0 1px, transparent 1px 3px); opacity:.55; }
.icon-orb svg{ width:32px; height:32px; position:relative; z-index:1; }
.service-card:hover .icon-orb{ color:var(--azure-d); }
.card-line{ display:block; height:2px; width:0; margin-top:1.4rem; border-radius:2px;
  background:linear-gradient(90deg,var(--azure),var(--copper)); transition:width .5s ease; }
.service-card:hover .card-line{ width:100%; }

/* ====================================================
   HERO — visuel "verre de douche" + accent cuivre
   ==================================================== */
.hero-visual{ position:relative; }
.glass-frame{ position:relative; border-radius:1.6rem; overflow:hidden; aspect-ratio:4/5;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 40px 80px -36px rgba(40,60,80,.4), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 8px rgba(255,255,255,.35); }
.glass-frame::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(125deg, rgba(255,255,255,.4) 0%, transparent 26%, transparent 70%, rgba(18,148,202,.12) 100%); }
.glass-frame img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06); }
/* tuyau cuivre décoratif */
.copper-pipe{ position:absolute; border-radius:999px;
  background:linear-gradient(90deg,#7a4520,var(--copper) 25%,var(--copper-sheen) 50%,var(--copper) 75%,#7a4520);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.5), inset 0 -3px 4px rgba(80,40,15,.6), 0 8px 18px -8px rgba(120,70,30,.5); }
.copper-pipe.v{ width:16px; top:-26px; bottom:34%; left:-8px; }
.copper-pipe.h{ height:16px; left:-8px; width:42%; bottom:34%; }
.hero-chip{ position:absolute; right:-14px; bottom:8%; display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1.15rem; border-radius:1rem; background:linear-gradient(157deg,#fff,#f4efe8);
  border:1px solid rgba(120,140,160,.2); box-shadow:0 18px 40px -18px rgba(40,60,80,.4), inset 0 1px 0 rgba(255,255,255,.95); }
.hero-chip .ring{ width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff;
  background:linear-gradient(180deg,var(--azure),var(--azure-d)); box-shadow:inset 0 1px 1px rgba(255,255,255,.5); }
.hero-chip b{ font-family:'Sora',sans-serif; font-size:1.2rem; color:var(--ink); line-height:1; }
.hero-chip small{ display:block; color:var(--muted); font-size:.72rem; margin-top:2px; }

/* ====================================================
   BANDEAUX SHOWCASE — parallaxe images chaudière / sdb
   ==================================================== */
.showcase{ position:relative; min-height:78vh; display:flex; align-items:flex-end; overflow:hidden; }
.showcase-media{ position:absolute; inset:-12% 0; z-index:0; will-change:transform; }
.showcase-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.showcase::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(20,24,30,.82) 0%,rgba(20,24,30,.5) 45%,rgba(20,24,30,.15) 100%),
            linear-gradient(0deg,rgba(20,24,30,.45),transparent 55%); }
/* En dessous de lg le texte occupe toute la largeur : le dégradé latéral ne
   suffit plus à le détacher de la photo → on passe à un voile vertical. */
@media(max-width:1023px){
  .showcase::after{
    background:linear-gradient(0deg,rgba(20,24,30,.88) 0%,rgba(20,24,30,.68) 48%,rgba(20,24,30,.42) 100%); }
}
.showcase-inner{ position:relative; z-index:2; }
.showcase .eyebrow{ color:var(--copper-l); }
.showcase h2{ color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.5); }
.showcase p{ color:rgba(255,255,255,.85); }
.showcase .stat-inline{ color:#fff; }
.showcase .stat-inline b{ font-family:'Sora',sans-serif; color:var(--copper-l); }
/* fines arêtes verre haut/bas */
.showcase::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); }

/* ====================================================
   RÉNOVATION — triptyque de réalisations
   ==================================================== */
.reno-marble{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.05;
  mix-blend-mode:multiply; filter:contrast(1.1) saturate(.7); }
.reno-duo{ display:grid; grid-template-columns:1.04fr .96fr; grid-template-rows:1fr 1fr; gap:.85rem; aspect-ratio:1/1; }
.reno-shot{ position:relative; border-radius:1.15rem; overflow:hidden; min-height:0;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 26px 52px -30px rgba(40,60,80,.34), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 5px rgba(255,255,255,.3); }
.reno-shot.tall{ grid-row:span 2; }
.reno-shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.reno-shot:hover img{ transform:scale(1.06); }
.reno-shot figcaption{ position:absolute; inset:auto 0 0 0; padding:2rem .85rem .75rem;
  font-size:.74rem; font-weight:600; line-height:1.35; color:#fff; letter-spacing:.01em;
  background:linear-gradient(180deg,transparent,rgba(24,19,15,.34) 42%,rgba(24,19,15,.82)); }
@media(max-width:520px){
  .reno-duo{ grid-template-columns:1fr; grid-template-rows:auto; aspect-ratio:auto; }
  .reno-shot{ aspect-ratio:4/3; }
  .reno-shot.tall{ grid-row:auto; aspect-ratio:3/4; }
}

/* features (coches cuivre = matière) */
.feat-li{ position:relative; padding-left:2rem; color:var(--muted); }
.feat-li::before{ content:'✓'; position:absolute; left:0; top:-1px; width:1.35rem; height:1.35rem; border-radius:50%;
  display:grid; place-items:center; font-size:.72rem; font-weight:900; color:#fff;
  background:linear-gradient(145deg,var(--copper-l),var(--copper-d)); box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 2px 6px rgba(120,80,40,.22); }

/* ====================================================
   GALERIE masonry
   ==================================================== */
.filter-btn{ padding:.5rem 1.1rem; border-radius:999px; font-size:.88rem; font-weight:600; color:var(--muted);
  border:1px solid rgba(120,140,160,.24); transition:all .3s;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.62)); box-shadow:inset 0 1px 0 rgba(255,255,255,.96), 0 2px 4px rgba(60,70,90,.05); }
.filter-btn:hover{ color:var(--ink); border-color:var(--azure); }
.filter-btn.is-active{ color:#f4f7fb; background:linear-gradient(180deg,var(--inox-1),var(--inox-3)); border-color:transparent;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25), 0 6px 16px -8px rgba(38,44,54,.5); }
.gal-item{ position:relative; break-inside:avoid; margin-bottom:1.25rem; border-radius:1rem; overflow:hidden; display:block;
  border:1px solid rgba(120,140,160,.18); box-shadow:0 16px 38px -24px rgba(60,70,90,.3); transition:transform .45s, box-shadow .45s, opacity .4s; }
.gal-item img{ width:100%; height:auto; display:block; transition:transform .7s ease, filter .5s; }
.gal-item::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(20,24,30,.9),transparent 55%); pointer-events:none; }
.gal-item figcaption{ position:absolute; left:1.1rem; bottom:1rem; right:1.1rem; z-index:2; font-weight:700; font-size:1.02rem; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.55); }
.gal-cat{ position:absolute; top:1rem; left:1rem; z-index:2; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(20,24,30,.68); padding:.25rem .6rem; border-radius:999px; border:1px solid rgba(184,115,51,.42); }
.gal-item:hover{ transform:translateY(-6px); box-shadow:0 30px 56px -22px rgba(18,148,202,.4); }
.gal-item:hover img{ transform:scale(1.07); filter:saturate(1.08); }
.gal-item.is-hidden{ display:none; }
/* tuile d'appel à l'action en fin de masonry (hors filtre : toujours visible) */
.gal-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; break-inside:avoid; margin-bottom:1.25rem;
  padding:1.8rem 1.5rem; border-radius:1rem;
  background:linear-gradient(157deg,#ffffff 0%,#fcfaf7 60%,#f2ece3 100%);
  border:1px solid rgba(120,140,160,.18);
  box-shadow:0 16px 38px -24px rgba(60,70,90,.3), inset 0 1px 0 rgba(255,255,255,.98);
  transition:transform .45s, box-shadow .45s; }
.gal-cta:hover{ transform:translateY(-6px); box-shadow:0 30px 56px -22px rgba(18,148,202,.4), inset 0 1px 0 rgba(255,255,255,.98); }
.gal-cta-orb{ width:44px; height:44px; border-radius:.85rem; display:grid; place-items:center; color:var(--azure-d); margin-bottom:.35rem;
  background:linear-gradient(145deg,rgba(18,148,202,.16),rgba(18,148,202,.05));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85), 0 2px 8px -4px rgba(18,148,202,.16); }
.gal-cta-orb svg{ width:22px; height:22px; }
.gal-cta strong{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.02rem; line-height:1.3; color:var(--ink); }
.gal-cta small{ font-size:.88rem; line-height:1.5; color:var(--muted); }
.gal-cta-link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.35rem;
  font-size:.88rem; font-weight:700; color:var(--copper-d); transition:gap .3s; }
.gal-cta-link svg{ width:15px; height:15px; }
.gal-cta:hover .gal-cta-link{ gap:.75rem; }

/* ====================================================
   POURQUOI NOUS CHOISIR — circuit + nœuds inox
   ==================================================== */
.circuit-path{ stroke-dashoffset:600; filter:drop-shadow(0 0 5px rgba(184,115,51,.3)); }
.why-card{ position:relative; text-align:center; padding:2rem 1.4rem; border-radius:1.25rem; transition:transform .4s,border-color .4s; }
.why-card:hover{ transform:translateY(-6px); border-color:rgba(18,148,202,.38); }
.why-node{ width:76px; height:76px; margin:0 auto 1.1rem; border-radius:50%; display:grid; place-items:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.25rem; color:var(--inox-3);
  background:linear-gradient(145deg,#e3e7ee,#9aa0aa 50%,#c2c7d0 60%,#7c828d);
  border:2px solid rgba(255,255,255,.6); box-shadow:0 0 0 6px rgba(18,148,202,.05), inset 0 1px 1px rgba(255,255,255,.95), 0 6px 16px -10px rgba(60,70,90,.2); position:relative; overflow:hidden; }
.why-node::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,.2) 0 1px, transparent 1px 3px); opacity:.45; pointer-events:none; }
.why-node svg{ width:32px; height:32px; position:relative; z-index:1; }
.why-card h3{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.18rem; color:var(--ink); position:relative; z-index:1; }
.why-card p{ margin-top:.5rem; color:var(--muted); font-size:.95rem; line-height:1.6; position:relative; z-index:1; }

/* ====================================================
   ZONES / carte
   ==================================================== */
.dept-chip{ display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem; border-radius:.9rem; text-align:left; color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.62)); border:1px solid rgba(120,140,160,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 6px rgba(60,70,90,.05); transition:all .3s; }
.dept-chip strong{ font-family:'Sora',sans-serif; color:var(--copper); font-size:1.1rem; }
.dept-chip:hover,.dept-chip.active{ border-color:var(--azure); background:rgba(18,148,202,.08); transform:translateX(4px); }
.map-wrap{ position:relative; aspect-ratio:1; max-width:28rem; margin:0 auto; border-radius:1.5rem; padding:1.5rem; }
.dept-map path{ fill:rgba(30,64,175,.1); stroke:var(--azure); stroke-width:1.5; transition:fill .3s, filter .3s; }
.dept-map path:hover,.dept-map path.active{ fill:rgba(184,115,51,.3); filter:drop-shadow(0 0 8px rgba(184,115,51,.42)); }
.map-cap{ position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(43,37,33,.36); }

/* ====================================================
   AVIS clients
   ==================================================== */
.review-card{ flex:0 0 100%; padding:2.2rem; border-radius:1.4rem; }
@media(min-width:768px){ .review-card{ flex:0 0 calc(50% - .75rem); } }
.review-card p{ font-size:1.05rem; line-height:1.7; color:var(--ink); font-style:italic; }
.rev-author{ display:flex; align-items:center; gap:.85rem; margin-top:1.4rem; }
.rev-author span{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#f4f7fb; font-family:'Sora',sans-serif;
  background:linear-gradient(180deg,var(--inox-1),var(--inox-3)); box-shadow:inset 0 1px 1px rgba(255,255,255,.3), 0 3px 8px -4px rgba(40,50,60,.4); }
.rev-author strong{ display:block; color:var(--ink); }
.rev-author small{ color:var(--muted); }
.rev-nav{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:var(--ink); transition:all .3s;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(250,247,242,.72)); border:1px solid rgba(120,140,160,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.96), 0 2px 6px rgba(60,70,90,.06); }
.rev-nav:hover{ background:linear-gradient(180deg,var(--inox-1),var(--inox-3)); color:#f4f7fb; border-color:transparent; }

/* ====================================================
   CONTACT & FORMULAIRE
   ==================================================== */
.contact-row{ display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; border-radius:1rem; transition:all .3s; }
.contact-row:hover{ border-color:rgba(18,148,202,.4); transform:translateX(4px); }
.contact-row .ic{ flex:none; width:46px; height:46px; border-radius:.85rem; display:grid; place-items:center; color:var(--azure-d);
  background:linear-gradient(145deg,rgba(18,148,202,.14),rgba(18,148,202,.05)); box-shadow:inset 0 1px 1px rgba(255,255,255,.8), 0 2px 8px -4px rgba(18,148,202,.1); }
.contact-row .ic svg{ width:22px; height:22px; }
.contact-row small{ display:block; color:var(--muted); font-size:.78rem; }
.contact-row strong{ font-weight:600; color:var(--ink); }
/* zone texte cliquable d'une ligne de contact (le bouton WhatsApp est un lien voisin) */
.contact-row .row-main{ flex:1 1 auto; min-width:0; }
.contact-row a.row-main strong{ transition:color .25s; }
.contact-row a.row-main:hover strong{ color:var(--azure-d); }
/* pastille WhatsApp en bout de ligne */
.wa-mini{ flex:none; display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .75rem; border-radius:.7rem;
  font-size:.78rem; font-weight:700; color:#0f7a4a; white-space:nowrap;
  background:linear-gradient(145deg,rgba(37,211,102,.2),rgba(37,211,102,.07));
  border:1px solid rgba(37,211,102,.38);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85), 0 2px 8px -5px rgba(15,122,74,.4);
  transition:transform .25s, box-shadow .25s, background .25s; }
.wa-mini svg{ width:16px; height:16px; }
.wa-mini:hover{ transform:translateY(-1px);
  background:linear-gradient(145deg,rgba(37,211,102,.3),rgba(37,211,102,.13));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95), 0 6px 14px -8px rgba(15,122,74,.55); }
/* sur petit écran la pastille se réduit à l'icône : on garde une cible tactile de 44px */
@media(max-width:430px){
  .wa-mini span{ display:none; }
  .wa-mini{ padding:0; width:44px; height:44px; justify-content:center; }
  .wa-mini svg{ width:20px; height:20px; }
}
.info-plate{ border-radius:1rem; padding:1.1rem 1.25rem; color:var(--muted); }
.quote-form{ border-radius:1.5rem; padding:1.6rem; }
@media(min-width:1024px){ .quote-form{ padding:2.25rem; } }
.field{ position:relative; z-index:1; }
.field label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:.45rem; }
.field input,.field select,.field textarea{ width:100%; padding:.8rem 1rem; border-radius:.8rem; color:var(--ink); font-size:.96rem;
  background:linear-gradient(180deg,#fbfbfa,#fff); border:1px solid rgba(120,140,160,.26);
  box-shadow:inset 0 2px 4px rgba(60,70,90,.06); transition:border-color .3s, box-shadow .3s; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(43,37,33,.3); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--azure); box-shadow:inset 0 2px 4px rgba(60,70,90,.05), 0 0 0 4px rgba(18,148,202,.13); }
.field select option{ background:var(--pearl); color:var(--ink); }

/* ====================================================
   FOOTER
   ==================================================== */
.foot-h{ font-family:'Sora',sans-serif; font-weight:700; font-size:1rem; margin-bottom:1rem; color:var(--ink); }
.foot-list{ display:flex; flex-direction:column; gap:.6rem; }
.foot-list a{ color:var(--muted); font-size:.92rem; transition:color .3s; }
.foot-list a:hover{ color:var(--copper); }
/* liens du pied de page : cibles tactiles plus confortables sur mobile */
@media(max-width:640px){ .foot-list a{ display:inline-block; padding-block:.5rem; } }
.foot-soc{ width:42px; height:42px; border-radius:.8rem; display:grid; place-items:center; color:var(--ink); transition:all .3s;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.62)); border:1px solid rgba(120,140,160,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.96), 0 2px 4px rgba(60,70,90,.06); }
.foot-soc:hover{ background:linear-gradient(180deg,var(--inox-1),var(--inox-3)); color:#f4f7fb; transform:translateY(-3px); }
/* numéros de téléphone en clair dans le pied de page */
.foot-tel{ display:inline-flex; align-items:center; gap:.6rem; padding:.55rem .9rem; border-radius:.85rem; color:var(--ink); transition:all .3s;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.62)); border:1px solid rgba(120,140,160,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96), 0 2px 4px rgba(60,70,90,.06); }
.foot-tel svg{ width:18px; height:18px; flex:none; color:var(--azure-d); transition:color .3s; }
.foot-tel span{ display:block; font-family:'Sora',sans-serif; font-weight:700; font-size:.95rem; line-height:1.15; }
.foot-tel small{ display:block; font-family:'Manrope',sans-serif; font-weight:500; font-size:.72rem; color:var(--muted); transition:color .3s; }
.foot-tel:hover{ background:linear-gradient(180deg,var(--inox-1),var(--inox-3)); color:#f4f7fb; transform:translateY(-3px); }
.foot-tel:hover svg{ color:var(--copper-sheen); }
.foot-tel:hover small{ color:rgba(244,247,251,.75); }
/* adresses du pied de page */
.foot-addr-h{ font-family:'Sora',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--copper-d); margin-bottom:.4rem; }
.foot-addr{ font-style:normal; font-size:.92rem; line-height:1.55; color:var(--muted); }

/* ====================================================
   BOUTON URGENT flottant — bleu eau
   ==================================================== */
#urgent-fab{ position:fixed; bottom:1.5rem; right:1.5rem; z-index:50; display:inline-flex; align-items:center; gap:.7rem;
  padding:.85rem 1.2rem; border-radius:999px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,#46c4ef,var(--azure) 55%,var(--azure-d)); border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 30px -4px rgba(18,148,202,.6), inset 0 1px 1px rgba(255,255,255,.5); transition:transform .35s, box-shadow .35s; }
#urgent-fab:hover{ transform:scale(1.06); box-shadow:0 0 48px -2px rgba(18,148,202,.78); }