@charset "UTF-8";
/* =====================================================================
   V5 — « L'assurance confort » · Climat Actif 66
   Direction artistique : clair et lumineux (bleu glacial très pâle),
   texte noir, accents violet / cyan et touche lavande de la charte.
   Le premier écran, le bandeau de navigation, les panneaux flottants et
   le pied de page restent nocturnes : ils encadrent la page claire.
   ===================================================================== */

:root{
  /* Fonds clairs — jamais de blanc pur : une surface à 100 % de luminance
     juste après la photo sombre fatigue l'œil. On reste dans les 95 %. */
  --bg:#EEF3F8; --bg2:#E3EBF3; --lav:#F3EDFF;
  /* fonds nocturnes (premier écran, bandeau, pied de page, fenêtres) */
  --night:#0F171A; --night2:#14232A;
  --nline:rgba(202,184,255,.16); --nline2:rgba(202,184,255,.30);
  --nmuted:#C9C5D6;
  /* traits et textes */
  --line:rgba(20,32,48,.13); --line2:rgba(20,32,48,.24);
  --text:#182131; --muted:#5B6680; --ink:#241938;
  /* couleurs de marque — versions lisibles sur fond clair */
  --vio:#7B2FF7; --vio2:#6320D8; --cyan:#0B8FD4; --turq:#0FA383; --mag:#BE2AA9;
  /* versions lumineuses, réservées aux fonds nocturnes */
  --n-turq:#2FE3B8; --n-cyan:#10B9FF; --n-vio:#8B5CF6; --n-mag:#E23FD0;
  --grad:linear-gradient(95deg,var(--turq),var(--cyan) 26%,var(--vio) 64%,var(--mag));
  --grad-n:linear-gradient(95deg,var(--n-turq),var(--n-cyan) 24%,var(--n-vio) 62%,var(--n-mag));
  --grot:'Space Grotesk','Plus Jakarta Sans',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter','Inter Fallback',system-ui,sans-serif;
  --max:1420px; --pad:clamp(22px,4.4vw,64px);
  --ease:cubic-bezier(.22,.74,.18,1);
  --head:84px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 18px);color-scheme:light}
body{
  font-family:var(--sans);font-size:16.5px;line-height:1.7;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,summary,input{font:inherit;color:inherit}
button,summary{cursor:pointer;background:none;border:none}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
[hidden]{display:none !important}
strong,b{font-weight:700;color:var(--text)}
::selection{background:var(--vio);color:#fff}
:focus-visible{outline:2px solid var(--vio2);outline-offset:3px;border-radius:2px}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:#C3CFDD;border-radius:2px;border:3px solid var(--bg2)}
::-webkit-scrollbar-thumb:hover{background:var(--vio)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
em,.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:.005em}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:12px;left:12px;z-index:500;transform:translateY(-200%);
  background:var(--vio2);color:#fff;padding:12px 22px;border-radius:2px;font:600 .85rem var(--grot)}
.skip:focus{transform:none}

/* ---- grain + halos : très discrets sur fond clair --------------------- */
.v4-grain{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation:v4grain 1.1s steps(3) infinite}
@keyframes v4grain{0%{background-position:0 0}33%{background-position:61px -43px}66%{background-position:-47px 81px}100%{background-position:29px 53px}}
.v4-bgglow{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 540px at 88% 8%,rgba(123,47,247,.07),transparent 62%),
    radial-gradient(760px 500px at -6% 46%,rgba(11,143,212,.06),transparent 60%),
    radial-gradient(880px 640px at 104% 88%,rgba(190,42,169,.05),transparent 64%)}

/* ---- curseur custom (desktop pointeur fin uniquement) ----------------- */
.v4-dot,.v4-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);display:none}
@media(pointer:fine){
  .v4-dot{display:block;width:6px;height:6px;background:var(--vio2)}
  .v4-ring{display:block;width:34px;height:34px;border:1.5px solid rgba(123,47,247,.45);
    transition:width .25s var(--ease),height .25s var(--ease),border-color .25s,background .25s}
  .v4-ring.on{width:58px;height:58px;border-color:var(--vio);background:rgba(123,47,247,.07)}
}
/* vestige V4 (image flottante) : le moteur partagé l'exige, on ne l'affiche plus */
.v4-float{display:none !important}

/* =====================================================================
   HEADER — bandeau de verre nocturne, lisible sur la photo comme sur le clair
   ===================================================================== */
.v4-head{position:fixed;inset:0 0 auto;z-index:80;color:#F6F3FF;
  border-bottom:1px solid transparent;
  background:linear-gradient(rgba(12,19,22,.80),rgba(12,19,22,0));
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s,box-shadow .35s}
.v4-head.scrolled{background:rgba(13,20,23,.95);border-color:rgba(0,0,0,.2);
  box-shadow:0 14px 42px rgba(18,26,38,.20)}
/* Rendu « verre » quand le navigateur sait flouter ; sinon le fond opaque
   ci-dessus garantit la lisibilité au-dessus de la photo comme du clair. */
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .v4-head{-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}
  .v4-head.scrolled{background:rgba(13,20,23,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 42px rgba(18,26,38,.14);
    -webkit-backdrop-filter:blur(32px) saturate(180%) brightness(.66);backdrop-filter:blur(32px) saturate(180%) brightness(.66)}
}

/* Une fois le premier écran passé, le contenu derrière le bandeau est clair :
   le verre devient clair lui aussi. C'est ce que fait iOS — le matériau prend
   la teinte de ce qu'il recouvre au lieu de poser un voile sombre dessus.
   Tant qu'on est sur la photo, le bandeau reste nocturne. */
body.past-hero .v4-head{
  color:var(--text);background:rgba(247,250,253,.95);border-color:rgba(20,32,48,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 32px rgba(18,26,38,.10)}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  body.past-hero .v4-head{background:rgba(250,252,255,.22);
    -webkit-backdrop-filter:blur(38px) saturate(200%) brightness(1.24);backdrop-filter:blur(38px) saturate(200%) brightness(1.24)}
}
/* …et il redevient nocturne dès qu'un bloc sombre repasse dessous (bloc
   contact, pied de page). Sans ça, le verre clair posé sur du noir vire au
   gris et les liens deviennent illisibles. Classe posée par v5.js. */
body.past-hero.on-dark .v4-head{
  color:#F6F3FF;background:rgba(13,20,23,.95);border-color:rgba(0,0,0,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 42px rgba(18,26,38,.14)}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  body.past-hero.on-dark .v4-head{background:rgba(13,20,23,.28);
    -webkit-backdrop-filter:blur(32px) saturate(180%) brightness(.66);backdrop-filter:blur(32px) saturate(180%) brightness(.66)}
  body.past-hero.on-dark .v4-head .nav-panel{background:rgba(17,28,31,.56);
    -webkit-backdrop-filter:blur(30px) saturate(185%) brightness(.76);backdrop-filter:blur(30px) saturate(185%) brightness(.76)}
}
body.past-hero.on-dark .v4-head .v4-nav a{color:#D3CFDE}
body.past-hero.on-dark .v4-head .v4-nav a:hover{color:#fff}
body.past-hero.on-dark .v4-head .nav-anchors a{color:#A8A3B8}
body.past-hero.on-dark .v4-head .nav-anchors a::after{background:linear-gradient(90deg,var(--n-cyan),var(--n-vio))}
body.past-hero.on-dark .v4-head .nav-sep{background:rgba(202,184,255,.28)}
body.past-hero.on-dark .v4-head .nav-drop>summary{color:#D3CFDE}
body.past-hero.on-dark .v4-head .nav-drop>summary:hover,
body.past-hero.on-dark .v4-head .nav-drop[open]>summary{color:#fff}
body.past-hero.on-dark .v4-head .nav-panel{color:#F6F3FF;border-color:var(--nline2);
  background:rgba(17,28,31,.96);box-shadow:0 24px 54px rgba(4,9,11,.5)}
body.past-hero.on-dark .v4-head .nav-panel a{color:#D3CFDE}
body.past-hero.on-dark .v4-head .nav-panel a::before{background:var(--n-vio)}
body.past-hero.on-dark .v4-head .nav-panel a+a{border-color:var(--nline)}
body.past-hero.on-dark .v4-head .nav-panel a:hover,
body.past-hero.on-dark .v4-head .nav-panel a:focus-visible{color:#fff;background:rgba(139,92,246,.16)}
body.past-hero.on-dark .v4-head .nav-panel a[aria-current="page"],
body.past-hero.on-dark .v4-head .menu nav a[aria-current="page"]{color:#fff}
body.past-hero.on-dark .v4-head .menu>summary{color:#D3CFDE}
body.past-hero.on-dark .v4-head .menu-lines{border-color:#D4C5EB}
body.past-hero.on-dark .v4-head .menu[open] .menu-lines{border-color:var(--n-cyan)}
body.past-hero.on-dark .v4-head .menu nav{background:rgba(17,28,31,.97);color:#F6F3FF;
  border-color:var(--nline2);box-shadow:0 26px 60px rgba(4,9,11,.55)}
body.past-hero.on-dark .v4-head .menu nav a+a{border-color:var(--nline)}
body.past-hero.on-dark .v4-head .menu-lab{color:#8F8AA3}
body.past-hero.on-dark .v4-head .menu-anchors{border-color:var(--nline2)}
body.past-hero.on-dark .v4-head .menu-anchors a{color:var(--nmuted)}

body.past-hero .v4-head .v4-nav a{color:var(--muted)}
body.past-hero .v4-head .v4-nav a:hover{color:var(--text)}
body.past-hero .v4-head .nav-anchors a{color:#8A93A6}
body.past-hero .v4-head .nav-anchors a::after{background:linear-gradient(90deg,var(--cyan),var(--vio))}
body.past-hero .v4-head .nav-sep{background:var(--line2)}
body.past-hero .v4-head .menu>summary{color:var(--muted)}
body.past-hero .v4-head .menu-lines{border-color:#7D8798}
body.past-hero .v4-head .menu[open] .menu-lines{border-color:var(--vio)}
body.past-hero .v4-head .menu nav{
  background:rgba(247,250,253,.97);color:var(--text);border-color:var(--line2);
  box-shadow:0 26px 60px rgba(18,26,38,.18)}
body.past-hero .v4-head .menu nav a+a{border-color:var(--line)}
body.past-hero .v4-head .menu-lab{color:#8A93A6}
body.past-hero .v4-head .menu-anchors{border-color:var(--line2)}
body.past-hero .v4-head .menu-anchors a{color:var(--muted)}
.head-in{display:flex;align-items:center;gap:26px;min-height:var(--head)}
.v4-brand{display:flex;align-items:center;gap:12px;flex:none;
  font:600 1.02rem/1.2 var(--grot);letter-spacing:-.015em;white-space:nowrap}
.v4-brand img{height:52px;width:auto}
.v4-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav-group{display:flex;align-items:center;gap:26px}
.nav-sep{width:1px;height:20px;background:rgba(202,184,255,.28);transition:background .35s var(--ease)}
.v4-nav a{position:relative;padding-block:11px;font:500 .84rem var(--sans);
  color:#D3CFDE;letter-spacing:.02em;white-space:nowrap;transition:color .25s}
.nav-anchors a::after{content:"";position:absolute;left:0;bottom:3px;width:100%;height:1.5px;
  background:linear-gradient(90deg,var(--n-cyan),var(--n-vio));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.v4-nav a:hover{color:#fff}
.nav-anchors a:hover::after,.nav-anchors a[aria-current]::after{transform:scaleX(1)}
/* les ancres restent sur la page courante : la flèche les distingue des pages */
/* « Climatisation » regroupe les trois pages dédiées. Contrôle natif
   <details> : fonctionne au clavier et sans JavaScript. */
.nav-drop{position:relative}
.nav-drop>summary{display:inline-flex;align-items:center;gap:8px;padding-block:11px;
  font:500 .84rem var(--sans);color:#D3CFDE;letter-spacing:.02em;white-space:nowrap;
  transition:color .25s}
.nav-drop>summary:hover{color:#fff}
.nav-drop[open]>summary{color:#fff}
.nav-drop .caret{width:6px;height:6px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.nav-drop[open] .caret{transform:translateY(1px) rotate(-135deg)}
.nav-panel{position:absolute;top:calc(100% + 16px);left:-18px;min-width:228px;display:grid;
  padding:6px 18px;border:1px solid var(--nline2);border-radius:2px;
  background:rgba(17,28,31,.96);box-shadow:0 24px 54px rgba(4,9,11,.5)}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .nav-panel{background:rgba(17,28,31,.56);
    -webkit-backdrop-filter:blur(30px) saturate(185%) brightness(.76);backdrop-filter:blur(30px) saturate(185%) brightness(.76)}
}
/* Survol : filet violet qui se déploie, ligne teintée, texte qui avance et
   flèche qui entre. Le pointeur doit sentir qu'il accroche quelque chose. */
.nav-panel a{position:relative;display:flex;align-items:center;min-height:46px;
  margin-inline:-18px;padding:13px 18px 13px 20px;font-size:.88rem;
  transition:color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.nav-panel a+a{border-top:1px solid var(--nline)}
.nav-panel a::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;
  background:var(--n-vio);transform:scaleY(0);transition:transform .28s var(--ease)}
.nav-panel a::after{content:"\002192";margin-left:auto;padding-left:14px;font-size:.92em;
  opacity:0;transform:translateX(-7px);
  transition:opacity .25s var(--ease),transform .28s var(--ease)}
.nav-panel a:hover,.nav-panel a:focus-visible{color:#fff;background:rgba(139,92,246,.16);transform:translateX(3px)}
.nav-panel a:hover::before,.nav-panel a:focus-visible::before{transform:scaleY(1)}
.nav-panel a:hover::after,.nav-panel a:focus-visible::after{opacity:1;transform:none}
@keyframes navdrop{from{opacity:0;transform:translateY(-9px)}}
.nav-drop[open] .nav-panel{animation:navdrop .26s var(--ease) both}
body.past-hero .v4-head .nav-drop>summary{color:var(--muted)}
body.past-hero .v4-head .nav-drop>summary:hover,
body.past-hero .v4-head .nav-drop[open]>summary{color:var(--text)}
body.past-hero .v4-head .nav-panel{color:var(--text);border-color:var(--line2);
  background:rgba(250,252,255,.97);box-shadow:0 24px 54px rgba(18,26,38,.18)}
body.past-hero .v4-head .nav-panel a{color:var(--muted)}
body.past-hero .v4-head .nav-panel a::before{background:var(--vio)}
body.past-hero .v4-head .nav-panel a:hover,
body.past-hero .v4-head .nav-panel a:focus-visible{color:var(--text);background:rgba(123,47,247,.10)}
body.past-hero .v4-head .nav-panel a+a{border-color:var(--line)}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  body.past-hero .v4-head .nav-panel{background:rgba(250,252,255,.60);
    -webkit-backdrop-filter:blur(30px) saturate(195%) brightness(1.2);backdrop-filter:blur(30px) saturate(195%) brightness(1.2)}
}
.nav-anchors a{font-size:.79rem;color:#A8A3B8}
.nav-anchors a::before{content:"\002193";margin-right:6px;font-size:.92em;opacity:.75}
/* lien vers une vraie page (pas un ancrage de la page courante) : pas de flèche vers le bas */
.nav-anchors a.is-page::before,.menu-anchors a.is-page::before{content:none;margin-right:0}
.v4-tel{display:inline-flex;align-items:center;gap:9px;padding:12px 21px;border-radius:2px;
  font:600 .85rem var(--grot);letter-spacing:.02em;color:#fff;flex:none;
  background:linear-gradient(100deg,var(--n-vio),var(--vio2));box-shadow:0 8px 26px rgba(99,32,216,.4);
  transition:transform .2s var(--ease),box-shadow .25s}
.v4-tel:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(99,32,216,.55)}
.tel-short{display:none}
.menu{display:none;position:relative}
.menu>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;
  font:600 .78rem var(--grot);letter-spacing:.08em;text-transform:uppercase;color:#D3CFDE}
.menu-lines{width:20px;height:10px;border-block:1.5px solid #D4C5EB;transition:border-color .35s var(--ease)}
.menu[open] .menu-lines{border-color:var(--n-cyan)}
.menu nav{position:absolute;top:calc(100% + 14px);right:0;min-width:248px;display:grid;
  padding:6px 20px 12px;border:1px solid var(--nline2);border-radius:2px;color:#F6F3FF;
  background:rgba(17,28,31,.97);box-shadow:0 26px 60px rgba(4,9,11,.55)}
/* le bandeau parent porte déjà un backdrop-filter : celui du panneau ne peut
   pas flouter à travers, le fond reste donc volontairement dense. */
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .menu nav{background:rgba(17,28,31,.94);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
}
.menu-lab{display:block;padding:14px 0 6px;font:600 .58rem var(--grot);
  letter-spacing:.22em;text-transform:uppercase;color:#8F8AA3}
.menu nav a{padding:12px 0;font-size:.92rem;min-height:44px;display:flex;align-items:center}
.menu nav a+a{border-top:1px solid var(--nline)}
.menu-anchors{display:grid;border-top:1px solid var(--nline2)}
.menu-anchors a{color:var(--nmuted)}
.menu-anchors a::before{content:"\002193";margin-right:9px;opacity:.7}

/* =====================================================================
   HERO — bloc nocturne, la photo garde toute sa profondeur
   ===================================================================== */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;
  min-height:min(100svh,940px);padding:calc(var(--head) + 64px) 0 130px;
  background:var(--night);color:#F6F3FF;--photo-shift:0px}
.hero-image{position:absolute;inset:-46px 0;z-index:-3;
  background:url("hero-clim-golden.jpg") 56% 32%/cover no-repeat;
  transform:translate3d(0,var(--photo-shift),0) scale(1.03);filter:saturate(.82)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(100deg,rgba(11,21,25,.94) 0%,rgba(11,21,25,.70) 40%,rgba(11,21,25,.14) 78%),
    linear-gradient(0deg,rgba(15,23,26,.72) 0%,rgba(15,23,26,.12) 40%,rgba(15,23,26,.3) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(58% 66% at 10% 92%,rgba(139,92,246,.26),transparent 70%)}
.air-lines{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  opacity:.2;stroke:#B79AE8;stroke-width:1;fill:none;
  stroke-dasharray:1800;stroke-dashoffset:1800;animation:airflow 3.2s .35s ease-out forwards}
@keyframes airflow{to{stroke-dashoffset:0}}

.hero-grid{position:relative;z-index:2;width:100%;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(150px,.52fr);
  gap:clamp(26px,4.5vw,60px);align-items:center}
.hero-copy{min-width:0}
.v4-eyebrow{display:inline-flex;align-items:center;gap:13px;font:600 .68rem var(--grot);
  letter-spacing:.22em;text-transform:uppercase;color:#D6D2E2;margin-bottom:28px}
.v4-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--n-vio);
  box-shadow:0 0 0 5px rgba(139,92,246,.18)}
.hero h1{font:700 clamp(3.2rem,7.1vw,6.9rem)/1.01 var(--grot);letter-spacing:-.05em;max-width:13ch}
.hero h1 em{font-size:1.06em;background:var(--grad-n);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.hero h1 .l{display:block;overflow:hidden}
.v4-lead{max-width:48ch;color:#D2CEDC;font-size:clamp(.98rem,1.3vw,1.12rem);line-height:1.8;
  margin:28px 0 34px}
.v4-lead strong{color:#fff}
.v4-actions{display:flex;gap:13px;flex-wrap:wrap}
.v4-btn{display:inline-flex;justify-content:center;align-items:center;gap:16px;
  min-height:56px;padding:16px 26px;border:1px solid transparent;border-radius:2px;
  font:600 .89rem/1.4 var(--grot);letter-spacing:.01em;cursor:pointer;
  transition:transform .22s var(--ease),box-shadow .3s,border-color .25s,background .25s,color .25s}
.v4-btn-main{background:linear-gradient(100deg,var(--vio),var(--vio2));color:#fff;
  box-shadow:0 14px 34px rgba(99,32,216,.28)}
.v4-btn-main:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(99,32,216,.42)}
.v4-btn-ghost{background:transparent;color:var(--text);border-color:var(--line2)}
.v4-btn-ghost:hover{border-color:var(--vio);background:rgba(123,47,247,.07);transform:translateY(-3px)}
/* variantes sur fond nocturne */
.hero .v4-btn-ghost,.v4-foot .v4-btn-ghost{color:#F6F3FF;border-color:var(--nline2);background:rgba(15,23,26,.24)}
.hero .v4-btn-ghost:hover{border-color:var(--n-vio);background:rgba(139,92,246,.12)}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .hero .v4-btn-ghost{-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
}
.v4-btn .ar{font-size:1.15em;transition:transform .25s var(--ease)}
.v4-btn:hover .ar{transform:translate(3px,-3px)}
.v4-trust{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  color:#C9C5D6;font-size:.76rem;margin-top:32px}
.v4-trust a{border-bottom:1px solid rgba(202,184,255,.35);padding-bottom:2px;transition:color .25s,border-color .25s}
.v4-trust a:hover{color:#fff;border-color:var(--n-cyan)}
.v4-trust span{padding-left:16px;border-left:1px solid var(--nline2)}

.v4-hlogo{display:flex;justify-content:center;align-self:center}
.v4-hlogo img{width:min(100%,280px);height:auto;filter:drop-shadow(0 18px 46px rgba(123,47,247,.4))}

/* centré pour ne croiser ni le badge « Entreprise française » ni la bulle d'aide */
.hero-bottom{position:absolute;left:0;right:0;bottom:34px;z-index:2;
  display:flex;justify-content:center;pointer-events:none}
.hero-discover{pointer-events:auto;display:inline-flex;align-items:center;gap:16px;
  font:500 .72rem/1.5 var(--grot);letter-spacing:.06em;color:#C9C8D4}
.hero-discover .circle{width:42px;height:42px;flex:none;border-radius:2px;
  border:1px solid rgba(203,189,230,.34);display:grid;place-items:center;font-size:1.05rem;
  transition:transform .3s var(--ease),border-color .3s}
.hero-discover:hover .circle{transform:translateY(5px);border-color:var(--n-cyan)}

/* entrées progressives — « backwards » garde le contenu visible sans JS */
@keyframes v4up{from{transform:translateY(118%)}}
@keyframes v4fade{from{opacity:0;transform:translateY(22px)}}
.hero h1 .l>span{display:inline-block;animation:v4up 1.05s var(--ease) backwards .18s}
.hero h1 .l:nth-child(2)>span{animation-delay:.32s}
.v4-eyebrow{animation:v4fade .9s var(--ease) backwards .06s}
.v4-lead{animation:v4fade .9s var(--ease) backwards .5s}
.hero .v4-actions{animation:v4fade .9s var(--ease) backwards .64s}
.hero .v4-trust{animation:v4fade .9s var(--ease) backwards .78s}
.v4-hlogo img{animation:v4fade 1.2s var(--ease) backwards .55s}
.hero-bottom{animation:v4fade 1s var(--ease) backwards .95s}

/* =====================================================================
   BANDEAU PREUVE — avis rapprochés du premier écran
   ===================================================================== */
.avis-note{display:flex;align-items:center;gap:24px;flex:none}
.avis-note p{margin:0;max-width:30ch;color:var(--muted);font-size:.86rem;line-height:1.7}
.avis-note .text-link{margin-top:12px}

/* =====================================================================
   SECTIONS COMMUNES
   ===================================================================== */
section{position:relative}
.v4-sec{padding:clamp(72px,8.4vw,128px) 0;z-index:0}
/* lavis de fond très doux, propre à chaque section (scrolle avec la page,
   contrairement à .v4-bgglow qui est fixe et ne couvre donc que le premier
   écran) — comble le blanc des longues pages intérieures sans concurrencer
   le texte. Alterné par position dans le DOM pour éviter la répétition,
   exclu des sections sombres (.v4-cta) qui ont déjà leur propre halo. */
.v4-sec:not(.v4-cta)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(640px 440px at 96% 4%,rgba(123,47,247,.06),transparent 66%),
    radial-gradient(560px 460px at -8% 98%,rgba(11,143,212,.05),transparent 64%)}
.v4-sec:nth-of-type(even):not(.v4-cta)::before{
  background:
    radial-gradient(640px 440px at -8% 4%,rgba(190,42,169,.045),transparent 66%),
    radial-gradient(560px 460px at 96% 98%,rgba(123,47,247,.055),transparent 64%)}
.v4-kicker{display:flex;align-items:center;gap:20px;margin-bottom:24px;
  font:600 .66rem var(--grot);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.v4-kicker::before{content:"";width:26px;height:1px;flex:none;background:var(--vio)}
.v4-h2{font:700 clamp(2.4rem,4.9vw,4.4rem)/1.05 var(--grot);letter-spacing:-.05em;max-width:18ch}
.v4-h2 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.05em}
.sec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:50px;
  margin-bottom:clamp(34px,4.4vw,54px)}
/* le paragraphe compagnon ne doit jamais flotter seul à côté du titre :
   filet en dégradé, même langage que .v4-kicker::before, pour le rattacher
   visuellement au bloc plutôt que de le laisser en texte perdu */
.sec-head>p{position:relative;padding-left:22px;color:var(--muted);max-width:34ch;font-size:.9rem;line-height:1.75}
.sec-head>p::before{content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:2px;
  border-radius:2px;background:var(--grad)}
.text-link{display:inline-flex;align-items:center;gap:18px;color:var(--vio2);
  font:600 .82rem var(--grot);padding-bottom:8px;border-bottom:1.5px solid var(--vio);
  transition:color .25s,border-color .25s}
.text-link span[aria-hidden]{transition:transform .25s var(--ease)}
.text-link:hover{color:var(--cyan);border-color:var(--cyan)}
.text-link:hover span[aria-hidden]{transform:translate(3px,-3px)}

/* reveals — visibles par défaut, masqués seulement si le JS prend la main */
.v4-r{opacity:1;transform:none}
.motion-ready .v4-r{opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.motion-ready .v4-r.in{opacity:1;transform:none}

/* =====================================================================
   MÉTIERS — grandes lignes dépliables + photo qui suit
   ===================================================================== */
.expertise{background:var(--bg)}
.exp-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6.4vw,104px);align-items:start}
.svc-list{border-top:1px solid var(--line2)}
.svc{border-bottom:1px solid var(--line2);scroll-margin-top:calc(var(--head) + 24px)}
.svc>summary{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:18px;
  padding:24px 0;color:#7A869B;transition:color .25s}
.svc>summary:hover,.svc[open]>summary{color:var(--text)}
.svc h3{font:700 clamp(1.9rem,3.2vw,3.1rem)/1.05 var(--grot);letter-spacing:-.045em}
.svc .idx{align-self:start;padding-top:10px;font:600 .62rem var(--grot);letter-spacing:.1em;color:var(--vio)}
.svc .tog{width:35px;height:35px;border:1px solid var(--line2);border-radius:2px;
  display:grid;place-items:center;font-size:1.05rem;
  transition:background .3s,transform .3s var(--ease),border-color .3s,color .3s}
.svc[open]>summary .tog{transform:rotate(90deg);background:var(--vio2);border-color:var(--vio2);color:#fff}
.svc-body{padding:0 0 30px 58px;max-width:52ch}
.svc-body>p{font-size:.88rem;line-height:1.85;color:var(--muted)}
.svc-body .note{margin-top:16px;font-size:.74rem;line-height:2;color:var(--ink)}
.svc-body .note strong{letter-spacing:.02em}
.svc-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:24px}
.svc-links .alt{font-size:.78rem;color:var(--muted);border-bottom:1px solid var(--line2);
  padding-bottom:3px;transition:color .25s,border-color .25s}
.svc-links .alt:hover{color:var(--text);border-color:var(--cyan)}

.svc-visual{position:sticky;top:calc(var(--head) + 30px);height:470px;overflow:hidden;
  border-radius:2px;background:var(--bg2);border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(18,26,38,.10)}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;
  opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform 1.1s var(--ease)}
.scene.on{opacity:1;transform:scale(1)}
/* Photo verticale (téléphone) dans un cadre large : recentrer vers le haut pour
   garder l'appareil et l'ouverture de la bâche visibles, plutôt qu'un centrage
   qui coupe le haut et le bas et ne laisse voir que le milieu du bidon. */
.scene[data-scene="entretien"]{object-position:center 12%}
.scene[data-scene="depannage"]{object-position:center 6%}
.svc-visual::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,21,25,.88),transparent 52%)}
.v-lab{position:absolute;left:32px;right:24px;bottom:30px;z-index:1;color:#F6F3FF}
.v-lab>span{font:600 .56rem var(--grot);letter-spacing:.2em;text-transform:uppercase;color:#D1C1E5}
.v-lab p{margin-top:8px;font:600 1.45rem/1.2 var(--grot);letter-spacing:-.035em;max-width:24ch}
.v-mark{position:absolute;top:22px;right:24px;z-index:1;color:#fff;
  font:600 .63rem var(--grot);letter-spacing:.16em;padding:8px 12px;
  border:1px solid rgba(255,255,255,.34);background:rgba(20,40,43,.42)}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .v-mark{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}

/* =====================================================================
   RÉALISATIONS — galerie asymétrique + visionneuse
   ===================================================================== */
.projects{background:var(--bg);border-block:1px solid var(--line2)}
.pgrid{display:grid;gap:24px 28px}
.featured{grid-template-columns:1.34fr 1fr;grid-template-rows:268px 268px}
.featured figure{position:relative;min-width:0;margin:0}
.featured figure:first-child{grid-row:1/3}
.shot{display:block;position:relative;overflow:hidden;border-radius:2px;
  background:#DCE5EE;height:268px;box-shadow:0 18px 40px rgba(18,26,38,.12)}
.featured figure:first-child .shot{height:100%}
.shot img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.65,.25,1),filter .5s}
.shot:hover img,.shot:focus-visible img{transform:scale(1.055)}
.shot .zoom{position:absolute;top:18px;right:18px;width:39px;height:39px;color:#fff;
  display:grid;place-items:center;border-radius:2px;font-size:1.05rem;
  border:1px solid rgba(255,255,255,.62);background:rgba(20,37,41,.42);
  opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s var(--ease)}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .shot .zoom{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
.shot:hover .zoom,.shot:focus-visible .zoom,.shot:focus-within .zoom{opacity:1;transform:none}
@media(hover:none){.shot .zoom{opacity:1;transform:none}}
.featured figcaption{position:absolute;left:0;right:0;bottom:0;pointer-events:none;color:#F6F3FF;
  padding:62px 26px 24px;background:linear-gradient(transparent,rgba(6,21,23,.92))}
.featured .typ{font:600 .58rem var(--grot);letter-spacing:.2em;text-transform:uppercase;color:#E1CDF7}
.featured h3{margin-top:7px;font:600 1.32rem/1.2 var(--grot);letter-spacing:-.03em;max-width:24ch}
.featured figure:first-child h3{font-size:1.95rem}
.more{margin-top:28px;text-align:center}
.more>summary{display:inline-flex;align-items:center;gap:16px;min-height:50px;padding:13px 24px;
  border:1px solid var(--line2);border-radius:2px;font:600 .8rem var(--grot);background:var(--bg);
  transition:border-color .25s,background .25s,box-shadow .25s}
.more>summary:hover{border-color:var(--vio);box-shadow:0 10px 26px rgba(99,32,216,.12)}
.more[open]>summary .plus{transform:rotate(45deg)}
.more .plus{font-size:1.25rem;line-height:1;color:var(--vio);transition:transform .3s var(--ease)}
.more[open] .closed,.more:not([open]) .opened{display:none}
.extra{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:26px}
.extra figure{position:relative;margin:0}
.extra .shot{height:236px}
.extra figcaption{position:absolute;left:0;right:0;bottom:0;pointer-events:none;color:#F6F3FF;
  padding:52px 20px 18px;background:linear-gradient(transparent,rgba(6,21,23,.9))}
.extra h3{margin-top:6px;font:600 1.05rem/1.25 var(--grot);letter-spacing:-.025em}

/* onglets de la galerie (Installation / Entretien / Dépannage) */
.gtabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(26px,3.2vw,36px)}
.gtab{padding:11px 22px;border-radius:2px;border:1px solid var(--line2);background:var(--bg);
  font:600 .8rem var(--grot);color:var(--muted);cursor:pointer;transition:border-color .25s,color .25s,background .25s,box-shadow .25s}
.gtab:hover{border-color:var(--vio2);color:var(--text)}
.gtab.is-active{background:var(--grad-n);color:#fff;border-color:transparent;box-shadow:0 10px 26px rgba(99,32,216,.18)}
.gpanel[hidden]{display:none}

/* mosaïque (colonnes façon Pinterest, tailles de photo naturelles) */
.mosaic{display:block;column-count:1;column-gap:26px;margin-top:26px}
.mosaic figure{break-inside:avoid;margin:0 0 26px}
.mosaic .shot{height:auto}
.mosaic .shot img{height:auto;object-fit:unset;display:block}
@media(min-width:680px){.mosaic{column-count:2}}
@media(min-width:1080px){.mosaic{column-count:3}}

/* petites séries (peu de photos) : grandes vignettes plutôt qu'une grille clairsemée */
.pgrid.extra.duo{grid-template-columns:repeat(2,1fr)}
.pgrid.extra.trio{grid-template-columns:repeat(3,1fr)}
.pgrid.extra.duo .shot,.pgrid.extra.trio .shot{height:360px}
@media(max-width:680px){
  .pgrid.extra.duo,.pgrid.extra.trio{grid-template-columns:1fr}
  .pgrid.extra.duo .shot,.pgrid.extra.trio .shot{height:280px}
}

/* =====================================================================
   QUI SOMMES-NOUS
   ===================================================================== */
.team{background:var(--bg)}
.team-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,7vw,120px);align-items:center}
.team-names{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px;
  font:600 .92rem var(--grot);color:var(--text)}
.team-amp{font:italic 400 2.1rem var(--serif);color:var(--vio)}
.team-copy .stmt{font:500 clamp(1.25rem,2vw,1.5rem)/1.4 var(--grot);letter-spacing:-.02em;
  color:var(--text);margin-bottom:18px}
.team-copy>p{font-size:.88rem;line-height:1.8;color:var(--muted);max-width:54ch}
.team-copy>p+p{margin-top:14px}
.journey{list-style:none;position:relative;margin-top:28px}
.journey::before{content:"";position:absolute;left:14px;top:20px;bottom:20px;width:1px;background:var(--line2)}
.journey li{position:relative;display:flex;align-items:center;gap:18px;padding:9px 0;font-size:.82rem}
.journey span{flex:none;display:grid;place-items:center;width:29px;height:29px;border-radius:2px;
  border:1px solid rgba(123,47,247,.35);background:var(--bg2);font:600 .56rem var(--grot);color:var(--vio2)}
.team-local{margin-top:26px;font-size:.74rem;color:var(--muted)}

/* =====================================================================
   AVIS — sélection de témoignages (complément du bandeau de preuve)
   ===================================================================== */
.v4-avis{background:var(--bg2);border-top:1px solid var(--line)}
/* Avis : traitement éditorial, pas de cartes — filets fins et typographie,
   comme les listes Métiers et FAQ. Les photos suivent la même règle que
   les portraits de chantier : cadrage net, ombre légère, aucun encadré. */
.avis-lead{display:grid;grid-template-columns:minmax(150px,.6fr) 1.4fr;
  gap:clamp(26px,4vw,50px);align-items:center;margin:0 0 clamp(36px,4.6vw,58px)}
.avis-lead .lead-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;
  box-shadow:0 26px 56px rgba(18,26,38,.16)}
.avis-lead blockquote p{font:italic 400 clamp(1.45rem,2.9vw,2.5rem)/1.32 var(--serif);color:var(--ink);max-width:19em}
.avis-lead blockquote p::before{content:"\0000AB "}
.avis-lead blockquote p::after{content:" \0000BB"}
.avis-lead figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-top:22px;
  font:600 .82rem var(--grot);color:var(--text)}
.avis-lead .typ{font:600 .58rem var(--grot);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stars{color:#E8A317;font-size:.82rem;letter-spacing:2px}
.avis-list{columns:3;column-gap:clamp(28px,3.8vw,58px)}
.avis-list figure{break-inside:avoid;margin:0 0 24px;padding-top:18px;border-top:1px solid var(--line2)}
.avis-list .avis-photo{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:2px;margin-bottom:14px;box-shadow:0 14px 30px rgba(18,26,38,.11)}
.avis-list .stars{display:block;margin-bottom:12px;color:#E8A317;font-size:.82rem;letter-spacing:2px}
.avis-list p{font:400 .86rem/1.75 var(--sans);color:var(--muted)}
.avis-list p strong{color:var(--text)}
.avis-list .who{margin-top:14px;font:600 .8rem var(--grot);color:var(--text)}
.avis-list .who span:not(:first-child){margin-top:4px}
.avis-list .who:empty{display:none}
.avis-more{margin-top:26px;text-align:left}
.avis-list .who span{display:block;margin-top:0;font:600 .56rem var(--grot);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* =====================================================================
   FAQ
   ===================================================================== */
.v4-faq{background:var(--bg);border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(34px,5.6vw,72px);align-items:start}
.v4-faqlist details{border-bottom:1px solid var(--line2)}
.v4-faqlist details:first-child{border-top:1px solid var(--line2)}
.v4-faqlist summary{display:flex;justify-content:space-between;align-items:center;gap:22px;
  padding:21px 0;font:600 .98rem/1.5 var(--grot);transition:color .25s}
.v4-faqlist summary:hover{color:var(--vio2)}
.v4-faqlist summary .plus{flex:none;font:300 1.6rem/1 var(--sans);color:var(--vio);
  transition:transform .3s var(--ease)}
.v4-faqlist details[open] summary .plus{transform:rotate(45deg)}
.v4-faq-a{padding-bottom:24px;color:var(--muted);font-size:.88rem;line-height:1.8;max-width:64ch}
.v4-faq-a a{color:var(--vio2);text-decoration:underline;text-underline-offset:4px}
.v4-faq-a+.v4-faq-a{margin-top:-8px;padding-bottom:24px}

/* =====================================================================
   CONTACT — même bloc nocturne que le pied de page : la page s'ouvre et
   se referme sur du sombre, le clair occupe tout le milieu.
   ===================================================================== */
.v4-cta{text-align:center;color:#F6F3FF;
  background:radial-gradient(ellipse 820px 480px at 50% 112%,rgba(139,92,246,.28),transparent 68%),var(--night)}
.v4-cta .v4-kicker{justify-content:center;color:#9B95AE}
.v4-cta .v4-kicker::before{background:var(--n-vio)}
.v4-cta .v4-h2{margin:0 auto 16px;max-width:15ch}
.v4-cta .v4-h2 em{background:var(--grad-n);-webkit-background-clip:text;background-clip:text;color:transparent}
.v4-cta .sub{color:var(--nmuted);max-width:60ch;margin:0 auto;font-size:.92rem}
.v4-phone{display:inline-block;margin:26px 0;
  font:700 clamp(2rem,5.2vw,4.4rem) var(--grot);letter-spacing:-.03em;
  background:var(--grad-n);-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:transform .3s var(--ease)}
.v4-phone:hover{transform:scale(1.025)}
.v4-cta .v4-actions{justify-content:center}
.v4-cta .v4-btn-ghost{color:#F6F3FF;border-color:var(--nline2)}
.v4-cta .v4-btn-ghost:hover{border-color:var(--n-vio);background:rgba(139,92,246,.12)}
.pay-note{margin-top:26px;font-size:.78rem;color:#DCD6EA;
  display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:2px;
  border:1px solid var(--nline2);background:rgba(139,92,246,.12)}
.contact-local{margin-top:14px;font-size:.74rem;color:#9B95AE}

/* =====================================================================
   FOOTER — bloc nocturne qui referme la page
   ===================================================================== */
.v4-foot{background:var(--night);color:#F6F3FF}
.v4-wordmark{font:700 clamp(2.4rem,10.4vw,8.4rem)/1 var(--grot);letter-spacing:.01em;text-align:center;
  color:transparent;-webkit-text-stroke:1px rgba(139,92,246,.26);user-select:none;pointer-events:none;
  white-space:nowrap;overflow:hidden;margin:10px 0 40px}
.v4-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding:10px 0 36px;
  border-top:1px solid var(--nline)}
.v4-cols h4,.v4-cols .v4-ft{margin:26px 0 14px;font:600 .68rem var(--grot);letter-spacing:.24em;
  text-transform:uppercase;color:#9B95AE}
.v4-cols a{display:block;color:var(--nmuted);font-size:.9rem;padding:3.5px 0;transition:color .25s}
.v4-cols a:hover{color:var(--n-cyan)}
.v4-cols .bl{color:var(--nmuted);font-size:.9rem;max-width:34ch}
.v4-cols .bl b{color:#fff;font-family:var(--grot)}
.v4-cols .creds{margin-top:14px;font-size:.78rem;line-height:1.7;color:#9B95AE}
.v4-legal{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--nline);padding:20px 0 26px;color:#847D9B;font-size:.78rem}

/* ---- badge Entreprise française ---------------------------------------- */
/* Sans rectangle (19/10/2026) : la couleur du texte suit le fond situé derrière (classe .sur-clair posée par v5.js). */
.v4-fr{position:fixed;left:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;gap:10px;
  background:none;border:0;box-shadow:none;padding:0;color:#F6F3FF;font:600 .78rem var(--grot);letter-spacing:.04em;
  text-shadow:0 0 10px rgba(22,15,38,.65),0 1px 2px rgba(22,15,38,.55);transition:color .3s,text-shadow .3s}
.v4-fr svg{width:24px;height:16px;border-radius:2px;display:block;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 1px 5px rgba(22,15,38,.4)}
.v4-fr.sur-clair{color:#231A3A;text-shadow:0 0 10px rgba(255,255,255,.85),0 0 2px rgba(255,255,255,.6)}
.v4-fr.sur-clair svg{box-shadow:0 0 0 1px rgba(35,26,58,.3),0 1px 4px rgba(35,26,58,.2)}
/* masqué tant que le contenu n'est pas assez éloigné du bord gauche */
@media(max-width:1200px){.v4-fr{display:none}}

/* =====================================================================
   AIDE RAPIDE (bulle) + VISIONNEUSE — panneaux nocturnes
   ===================================================================== */
.help-open{position:fixed;right:24px;bottom:24px;z-index:60;width:56px;height:56px;
  display:grid;place-items:center;border-radius:2px;color:#fff;
  border:1px solid rgba(255,255,255,.2);background:linear-gradient(140deg,var(--vio),var(--vio2));
  box-shadow:0 12px 34px rgba(18,26,38,.3);transition:transform .22s var(--ease),box-shadow .25s}
.help-open:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(99,32,216,.4)}
.help-open svg{width:25px;height:25px}
.help{position:fixed;inset:auto 24px 92px auto;z-index:65;
  width:390px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 120px);
  padding:0;border:1px solid var(--nline2);border-radius:2px;
  background:var(--night2);color:#F6F3FF;box-shadow:0 24px 80px rgba(18,26,38,.45)}
.help[open]{display:flex;flex-direction:column;animation:v4fade .25s var(--ease) both}
.help::backdrop{background:transparent}
.help-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding:18px 18px 15px;border-bottom:1px solid var(--nline)}
.help-head h2{font:700 1.04rem var(--grot);letter-spacing:-.02em}
.help-head p{margin-top:5px;font-size:.72rem;color:var(--nmuted)}
.close{flex:none;width:36px;height:36px;border:1px solid var(--nline2);border-radius:2px;
  font-size:1.5rem;line-height:1;transition:background .25s}
.close:hover{background:rgba(202,184,255,.1)}
.help-log{flex:1;overflow-y:auto;padding:16px 18px;min-height:96px;max-height:230px;
  font-size:.82rem;line-height:1.7}
.help-log p{padding:12px 14px;border-radius:2px;background:#1D3538;color:#DCD8E8}
.help-opts{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px}
.help-opts button{flex:1 1 44%;min-height:44px;padding:8px 13px;text-align:left;
  border:1px solid #8560AB;border-radius:2px;font:500 .75rem var(--grot);
  transition:background .25s,border-color .25s}
.help-opts button:hover{background:#322A49}
.help-opts button[aria-pressed="true"]{background:#7133C5;border-color:#9970D8;color:#fff}
.help-contact{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:14px 18px 0;border-top:1px solid var(--nline);font-size:.72rem}
.help-contact a{text-decoration:underline;text-underline-offset:3px}
.help-note{padding:12px 18px 16px;font-size:.64rem;line-height:1.6;color:var(--nmuted)}

.lightbox{margin:auto;padding:14px;border:1px solid var(--nline2);border-radius:2px;
  background:var(--night);color:#F6F3FF;width:min(1100px,94vw);max-width:94vw;max-height:94dvh}
.lightbox::backdrop{background:rgba(8,14,20,.9)}
.lightbox .close{position:absolute;top:22px;right:22px;z-index:2;background:rgba(15,23,26,.9)}
.lightbox img{margin:auto;width:auto;max-width:100%;max-height:74dvh;object-fit:contain}
.lb-bot{display:flex;align-items:center;gap:18px;padding:14px 4px 2px}
.lb-bot p{flex:1;min-width:0;font-size:.76rem;line-height:1.5;color:var(--nmuted)}
.lb-bot button{flex:none;width:42px;height:42px;border:1px solid var(--nline2);border-radius:2px;
  background:#182C2E;font-size:1.1rem;transition:background .25s}
.lb-bot button:hover{background:#22393C}
#lb-count{flex:none;font-size:.72rem;color:var(--nmuted);white-space:nowrap}
body:has(.lightbox[open]){overflow:hidden}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1180px){
  .v4-nav,.nav-group{gap:19px}
  .v4-nav a{font-size:.78rem}
  .nav-anchors a{font-size:.74rem}
  .head-in{gap:16px}
  .hero h1{font-size:clamp(3.2rem,7.4vw,5.4rem)}
  .svc-visual{height:420px}
  .featured{grid-template-rows:238px 238px}
  .featured .shot,.extra .shot{height:238px}
}
@media(max-width:1000px){
  :root{--head:76px}
  .v4-nav{display:none}
  .menu{display:block}
  .v4-tel{margin-left:auto}
  .hero-grid{grid-template-columns:1fr .34fr;gap:20px}
  /* le logo passe sur une zone claire de la photo : on renforce le voile */
  .hero::before{background:
    linear-gradient(100deg,rgba(11,21,25,.94) 0%,rgba(11,21,25,.78) 46%,rgba(11,21,25,.5) 100%),
    linear-gradient(0deg,rgba(15,23,26,.66) 0%,rgba(15,23,26,.1) 44%)}
  .v4-hlogo img{width:min(100%,175px)}
  .exp-grid{grid-template-columns:1.06fr .94fr;gap:38px}
  .svc-visual{height:400px}
  .featured h3{font-size:1.14rem}
  .featured figure:first-child h3{font-size:1.55rem}
  .team-grid{grid-template-columns:1fr;gap:34px}
  .extra{grid-template-columns:repeat(2,minmax(0,1fr))}
  .avis-list{columns:2}
}
@media(max-width:760px){
  :root{--pad:22px}
  .hero{min-height:max(720px,100svh);padding:calc(var(--head) + 48px) 0 118px}
  .hero-image{inset:-24px -80px;background-position:50% 34%}
  .hero::before{background:
    linear-gradient(100deg,rgba(11,21,25,.9),rgba(11,21,25,.42)),
    linear-gradient(0deg,rgba(15,23,26,.8) 3%,rgba(15,23,26,.45) 44%,rgba(15,23,26,.1))}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero h1{font-size:clamp(2.7rem,10vw,4rem);line-height:1.04;max-width:12ch}
  .v4-eyebrow{font-size:.58rem;letter-spacing:.16em;margin-bottom:24px}
  .v4-lead{font-size:.92rem;max-width:40ch;margin:24px 0 28px}
  .v4-btn{font-size:.8rem;padding:15px 19px;min-height:52px;gap:12px}
  .v4-trust{font-size:.68rem;gap:10px;margin-top:26px}
  .v4-trust span{padding-left:0;border-left:0}
  .v4-hlogo{justify-content:flex-start}
  .v4-hlogo img{width:min(42vw,170px)}
  .hero-bottom{bottom:24px}
  .hero-discover{font-size:.66rem;gap:11px}
  .hero-discover .circle{width:34px;height:34px;font-size:.92rem}
  .air-lines{opacity:.13}
  .v4-sec{padding:60px 0}
  .v4-h2{font-size:clamp(2.2rem,8.4vw,3.2rem)}
  .sec-head{display:block;margin-bottom:30px}
  .avis-note{flex-direction:column;align-items:flex-start;gap:16px;margin-top:22px}
  .sec-head>p{margin-top:20px;max-width:52ch}
  .v4-kicker{font-size:.56rem;letter-spacing:.16em;gap:13px;margin-bottom:18px}
  .exp-grid{grid-template-columns:1fr;gap:26px}
  .svc-visual{position:relative;top:auto;height:280px;order:-1}
  .scene{object-position:center 40%}
  .v-lab{left:22px;right:20px;bottom:22px}
  .v-lab p{font-size:1.25rem}
  .svc>summary{grid-template-columns:26px 1fr 34px;gap:13px;padding:20px 0}
  .svc h3{font-size:1.95rem}
  .svc .idx{padding-top:7px;font-size:.55rem}
  .svc .tog{width:33px;height:33px}
  .svc-body{padding:0 0 24px 39px}
  .svc-body>p{font-size:.84rem}
  .featured{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px}
  .featured figure:first-child{grid-row:auto;grid-column:1/-1}
  .featured figure:first-child .shot{height:340px}
  .featured .shot{height:210px}
  .featured figcaption{padding:44px 14px 16px}
  .featured figure:first-child figcaption{padding:62px 22px 22px}
  .featured h3{font-size:.98rem;line-height:1.18}
  .featured figure:first-child h3{font-size:1.6rem}
  .featured .typ{font-size:.48rem;letter-spacing:.12em}
  .shot .zoom{width:30px;height:30px;top:11px;right:11px;font-size:.88rem}
  .extra{grid-template-columns:1fr;gap:18px}
  .extra .shot{height:230px}
  .team-names{margin-top:20px;font-size:.84rem;gap:12px}
  .journey{margin-top:22px}
  .faq-grid{grid-template-columns:1fr;gap:26px}
  .v4-faqlist summary{font-size:.88rem;gap:16px;padding:18px 0}
  .v4-faq-a{font-size:.83rem}
  .avis-lead{grid-template-columns:1fr;gap:22px}
  .avis-lead .lead-photo{aspect-ratio:16/10;max-width:340px}
  .avis-list{columns:1}
  .avis-list .avis-photo{aspect-ratio:16/10;max-width:340px}
  .v4-cta .v4-actions{flex-direction:column;align-items:stretch}
  .v4-cols{grid-template-columns:1fr}
  .v4-foot{padding-bottom:78px}
  .help{inset:auto 14px 82px auto;max-height:calc(100dvh - 104px)}
  .help-open{right:17px;bottom:17px;width:52px;height:52px}
  .lb-bot{gap:9px;flex-wrap:wrap}
  .lb-bot p{flex-basis:100%;order:-2}
  .lb-bot button:last-child{margin-left:auto}
}
@media(max-width:420px){
  :root{--pad:18px}
  .v4-brand{font-size:.82rem;gap:9px}
  .v4-brand img{height:42px}
  .head-in{gap:11px}
  .phone-full{display:none}
  .tel-short{display:inline}
  .v4-tel{padding:11px 15px;font-size:.78rem}
  .menu>summary span:first-child{display:none}
  .hero h1{font-size:2.55rem}
  .hero .v4-actions{flex-direction:column;align-items:stretch}
  .v4-trust{display:block}
  .v4-trust span{display:block;margin-top:5px}
  .featured .shot{height:180px}
  .featured figure:first-child .shot{height:300px}
  .featured h3{font-size:.86rem}
  .featured figcaption{padding-inline:12px}
  .help-opts button{flex:1 1 100%}
}

/* =====================================================================
   MOUVEMENT RÉDUIT
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .v4-grain{animation:none}
  .hero h1 .l>span,.v4-eyebrow,.v4-lead,.hero .v4-actions,.hero .v4-trust,
  .v4-hlogo img,.hero-bottom,.help[open]{animation:none;opacity:1;transform:none}
  .hero-image{transform:none !important}
  .air-lines{stroke-dashoffset:0;animation:none}
  .motion-ready .v4-r{opacity:1 !important;transform:none !important;transition:none}
  .scene{transition:none}
  .v4-btn:hover,.shot:hover img,.v4-phone:hover,.nav-panel a:hover{transform:none}
  .nav-drop[open] .nav-panel{animation:none}
  .v4-dot,.v4-ring{display:none !important}
}

/* =====================================================================
   PAGES ANNEXES — mentions légales, zones d'intervention
   Même grammaire que l'accueil : filets fins, typographie, pas de cartes
   décoratives. Le corps de texte reste lisible et large.
   ===================================================================== */
.page-bc{padding-top:calc(var(--head) + 26px);font:600 .6rem var(--grot);
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.page-bc a{border-bottom:1px solid var(--line2);padding-bottom:2px;transition:color .25s,border-color .25s}
.page-bc a:hover{color:var(--text);border-color:var(--vio)}
.page-hero{padding:clamp(26px,3.4vw,44px) 0 clamp(30px,4vw,46px);border-bottom:1px solid var(--line)}
.page-hero h1{font:700 clamp(2.2rem,4.6vw,3.9rem)/1.06 var(--grot);letter-spacing:-.05em;max-width:19ch}
.page-hero h1 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.05em}
.page-hero .lead{margin-top:20px;max-width:64ch;color:var(--muted);font-size:.98rem;line-height:1.8}
.page-body{padding:clamp(40px,5.4vw,72px) 0 clamp(56px,7vw,100px)}
.page-body h2{margin:clamp(32px,4vw,50px) 0 14px;font:700 clamp(1.2rem,1.9vw,1.55rem) var(--grot);letter-spacing:-.03em}
.page-body>.wrap>h2:first-child{margin-top:0}
.page-body p{max-width:76ch;color:var(--muted);font-size:.92rem;line-height:1.85}
.page-body p+p{margin-top:12px}
.page-body p a{color:var(--vio2);text-decoration:underline;text-underline-offset:3px}
.info-card{margin:4px 0;padding:clamp(22px,2.6vw,32px);background:var(--bg2);
  border:1px solid var(--line);border-radius:2px}
.info-card p{max-width:none;font-size:.9rem}
.info-card p+p{margin-top:11px}
.info-card strong{color:var(--text)}
.page-back{margin-top:clamp(40px,5vw,64px)}
/* Communes : simple liste jalonnée, pas de vignettes ni d'icônes décoratives.
   Chaque entrée est un lien vers sa page commune (v5.css : ex-.zgrid span). */
.zgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:9px 18px;margin-top:6px}
.zgrid a{display:flex;align-items:center;gap:11px;padding:12px 16px;border:1px solid var(--line);
  border-radius:2px;background:var(--bg2);font:500 .87rem var(--sans);color:var(--text);
  text-decoration:none;transition:border-color .25s,color .25s,background .25s}
.zgrid a::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--vio)}
.zgrid a:hover{border-color:var(--vio);color:var(--vio2);background:var(--lav)}
@media(max-width:760px){
  .page-hero h1{font-size:clamp(2rem,8vw,2.8rem)}
  .zgrid{grid-template-columns:1fr 1fr;gap:8px 10px}
  .zgrid a{padding:11px 12px;font-size:.8rem;gap:8px}
}
@media(max-width:420px){.zgrid{grid-template-columns:1fr}}

/* =====================================================================
   PAGES MÉTIER — installation, entretien, dépannage
   Même grammaire que l'accueil : filets fins, grande typographie, photos
   de chantier réelles. Aucune carte décorative.
   ===================================================================== */
.m-hero{padding:clamp(24px,3vw,40px) 0 clamp(44px,5vw,72px);border-bottom:1px solid var(--line)}
.m-hero-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(32px,5vw,74px);align-items:center}
.m-hero h1{font:700 clamp(2.3rem,4.8vw,4.2rem)/1.05 var(--grot);letter-spacing:-.05em;max-width:14ch}
.m-hero h1 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.05em}
.m-hero .lead{margin-top:22px;max-width:52ch;color:var(--muted);font-size:.98rem;line-height:1.8}
.m-hero .lead strong{color:var(--text)}
.m-hero .v4-actions{margin-top:30px}
.m-shot{position:relative;border-radius:2px;overflow:hidden;background:var(--bg2);
  box-shadow:0 28px 64px rgba(18,26,38,.14)}
.m-shot img{width:100%;height:clamp(300px,38vw,470px);object-fit:cover}
.m-shot figcaption{position:absolute;left:0;right:0;bottom:0;pointer-events:none;color:#F6F3FF;
  padding:58px 24px 20px;background:linear-gradient(transparent,rgba(6,21,23,.9));
  font:600 .8rem/1.45 var(--grot);letter-spacing:-.01em}

/* repères factuels sous l'en-tête : une ligne, pas des pastilles */
.marks{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--line2);font-size:.78rem;color:var(--muted)}
.marks b{color:var(--text);font-family:var(--grot);font-weight:600}

/* sommaire de page */
.sommaire{display:flex;flex-wrap:wrap;gap:10px 26px;padding:18px 0 0}
.sommaire a{font:500 .78rem var(--sans);color:var(--muted);padding-bottom:4px;
  border-bottom:1px solid var(--line2);transition:color .25s,border-color .25s}
.sommaire a::before{content:"\002193";margin-right:7px;opacity:.7}
.sommaire a:hover{color:var(--text);border-color:var(--vio)}

/* la méthode : suite numérotée, filet vertical comme le parcours d'accueil */
.steps{list-style:none;counter-reset:s;border-top:1px solid var(--line2)}
.steps li{display:grid;grid-template-columns:64px 1fr;gap:6px 24px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--line2)}
.steps .n{grid-row:1/3;font:600 .68rem var(--grot);letter-spacing:.14em;color:var(--vio2);
  padding-top:7px}
.steps h3{font:700 clamp(1.15rem,1.8vw,1.5rem) var(--grot);letter-spacing:-.03em}
.steps p{color:var(--muted);font-size:.88rem;line-height:1.8;max-width:60ch}
.method-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(34px,5vw,72px);align-items:start}
.method-photo{position:sticky;top:calc(var(--head) + 30px);border-radius:2px;overflow:hidden;
  background:var(--bg2);box-shadow:0 26px 60px rgba(18,26,38,.12)}
.method-photo img{width:100%;height:clamp(330px,42vw,560px);object-fit:cover;object-position:center 28%}
.method-photo video{display:block;width:100%;height:clamp(330px,42vw,560px);object-fit:cover;background:#000}
.method-photo figcaption{padding:16px 20px 20px;font-size:.78rem;line-height:1.65;color:var(--muted);
  background:var(--bg2)}
.method-photo figcaption b{color:var(--text);font-family:var(--grot)}

/* les trois solutions : lignes alternées photo / texte */
.sol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,64px);align-items:center;
  padding:clamp(34px,4.4vw,54px) 0;border-top:1px solid var(--line2)}
.sol:last-of-type{border-bottom:1px solid var(--line2)}
.sol:nth-child(even) .sol-media{order:2}
.sol-media{border-radius:2px;overflow:hidden;background:var(--bg2);box-shadow:0 22px 50px rgba(18,26,38,.12)}
.sol-media img{width:100%;height:clamp(200px,20vw,272px);object-fit:cover}
/* Photo verticale qui raconte l'intérieur ET l'extérieur d'un même chantier :
   cadre plus haut et recentré vers le bas, sinon le groupe extérieur saute. */
.sol-media.pair img{height:clamp(230px,25vw,330px);object-position:center 78%}
.sol .typ{font:600 .58rem var(--grot);letter-spacing:.2em;text-transform:uppercase;color:var(--vio2)}
.sol h3{margin:12px 0 14px;font:700 clamp(1.5rem,2.6vw,2.2rem) var(--grot);letter-spacing:-.04em}
.sol p{color:var(--muted);font-size:.89rem;line-height:1.8;max-width:50ch}
.sol .who-for{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.79rem;line-height:1.8;color:var(--ink)}
.sol .who-for b{font-family:var(--grot);letter-spacing:.01em}

/* avant / après */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
.ba figure{margin:0;position:relative;border-radius:2px;overflow:hidden;background:var(--bg2);
  box-shadow:0 20px 46px rgba(18,26,38,.12)}
.ba img{width:100%;height:clamp(210px,23vw,320px);object-fit:cover}
.ba figcaption{position:absolute;left:0;right:0;bottom:0;pointer-events:none;color:#F6F3FF;
  padding:52px 22px 18px;background:linear-gradient(transparent,rgba(6,21,23,.9))}
.ba .typ{font:600 .58rem var(--grot);letter-spacing:.2em;text-transform:uppercase;color:#E1CDF7}
.ba figcaption p{margin-top:6px;font:600 1.02rem/1.3 var(--grot);letter-spacing:-.025em}

/* matériel : deux colonnes de texte, pas de logos géants */
.brands{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,58px);
  border-top:1px solid var(--line2);padding-top:clamp(28px,3.4vw,44px)}
.brand h3{font:700 clamp(1.3rem,2.2vw,1.8rem) var(--grot);letter-spacing:-.035em}
.brand .typ{display:block;margin-bottom:8px;font:600 .58rem var(--grot);letter-spacing:.2em;
  text-transform:uppercase;color:var(--vio2)}
.brand p{margin-top:12px;color:var(--muted);font-size:.88rem;line-height:1.8;max-width:46ch}

/* budget : ce qui fait varier le prix */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,62px);align-items:start}
.why{list-style:none;border-top:1px solid var(--line2)}
.why li{padding:16px 0;border-bottom:1px solid var(--line2);font-size:.86rem;line-height:1.75;color:var(--muted)}
.why li b{display:block;font:600 .92rem var(--grot);letter-spacing:-.015em;color:var(--text);margin-bottom:3px}

/* page courante dans le menu déroulant */
.nav-panel a[aria-current="page"],.menu nav a[aria-current="page"]{color:var(--text);font-weight:600}
.nav-panel a[aria-current="page"]::before{transform:scaleY(1)}

@media(max-width:1000px){
  /* le titre passe avant la photo : sur un écran étroit, on doit savoir où
     l'on est avant de regarder. */
  .m-hero-grid{grid-template-columns:1fr;gap:30px}
  .method-grid{grid-template-columns:1fr;gap:30px}
  .method-photo{position:relative;top:auto;order:-1}
  .method-photo img{height:300px}
}
@media(max-width:760px){
  .m-hero h1{font-size:clamp(2rem,8.4vw,2.9rem)}
  .m-hero .v4-actions{flex-direction:column;align-items:stretch}
  .marks{gap:8px 20px;font-size:.72rem}
  .steps li{grid-template-columns:40px 1fr;gap:4px 14px;padding:22px 0}
  .steps .n{font-size:.58rem;padding-top:5px}
  .sol{grid-template-columns:1fr;gap:20px;padding:30px 0}
  .sol:nth-child(even) .sol-media{order:-1}
  .sol-media{order:-1}
  .sol-media img{height:230px}
  .ba{grid-template-columns:1fr}
  .ba img{height:230px}
  .brands,.why-grid{grid-template-columns:1fr;gap:26px}
}


/* ---- relance commerciale en milieu de page métier -------------------- */
.cta-band-sec{padding:clamp(18px,3vw,34px) 0}
.cta-band{display:grid;grid-template-columns:1.35fr auto;gap:clamp(24px,4vw,52px);align-items:center;
  padding:clamp(26px,3.4vw,40px) clamp(24px,3.4vw,44px);border-radius:2px;
  background:linear-gradient(115deg,var(--lav),#EAF2FB 62%,#F6F1FF);
  border:1px solid rgba(123,47,247,.18);box-shadow:0 22px 50px -34px rgba(36,25,56,.45)}
.cta-band h2{margin-top:6px;font:700 clamp(1.5rem,2.5vw,2.05rem)/1.12 var(--grot);letter-spacing:-.03em;color:var(--text)}
.cta-band .v4-kicker{color:var(--vio2)}
.cta-band p:last-child{margin-top:12px;color:var(--muted);font-size:.92rem;line-height:1.7;max-width:52ch}
.cta-band .v4-actions{margin:0;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:860px){
  .cta-band{grid-template-columns:1fr;gap:22px}
  .cta-band .v4-actions{justify-content:flex-start}
}


/* ---- pages métier : rythme resserré ---------------------------------- */
#methode,#solutions,#detail,#materiel,#budget,#faq{padding:clamp(54px,6vw,88px) 0}
#methode .steps li{padding-top:clamp(20px,2.4vw,30px);padding-bottom:clamp(20px,2.4vw,30px)}
#solutions .sol{padding:clamp(28px,3.4vw,46px) 0}

.ba-more,.why-more{margin-top:clamp(28px,3.4vw,42px);text-align:left}
.ba-more .ba,.why-more ul{margin-top:22px}
.why-more{margin-top:0}


/* ---- solutions : comparaison en trois cartes -------------------------
   Trois grandes lignes empilées font lire une brochure. Trois cartes
   côte à côte font comparer, et comparer mène à appeler.            */
@media (min-width:900px){
  #solutions .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(20px,2.4vw,32px);align-items:stretch}
  #solutions .sec-head{grid-column:1/-1}
  #solutions .sol{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;
    border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#fff;
    box-shadow:0 18px 44px -32px rgba(18,26,38,.5)}
  #solutions .sol:last-of-type{border-bottom:1px solid var(--line)}
  #solutions .sol-media{order:-1;border-radius:0;box-shadow:none}
  #solutions .sol:nth-child(even) .sol-media{order:-1}
  #solutions .sol-media img,#solutions .sol-media.pair img{height:186px;object-position:center 62%}
  #solutions .sol>div{padding:clamp(20px,1.8vw,26px);display:flex;flex-direction:column;flex:1}
  #solutions .sol h3{margin:10px 0 12px;font-size:clamp(1.15rem,1.5vw,1.4rem)}
  #solutions .sol p{font-size:.85rem;line-height:1.7;max-width:none}
  #solutions .sol .who-for{margin-top:auto;padding-top:14px}
}


/* ---- FAQ : regroupée par thème, sur deux colonnes ---------------------
   Une liste de treize lignes identiques ne se lit pas. Regroupées et
   réparties sur deux colonnes, les questions se balaient — et la place
   libérée sert à relancer.                                            */
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.2vw,72px);align-items:start}
.faq-col>.faq-group+.faq-group{margin-top:clamp(32px,3.4vw,46px)}
.faq-group-t{margin-bottom:12px;font:600 .62rem var(--grot);letter-spacing:.2em;
  text-transform:uppercase;color:var(--vio2)}
.faq-cols .v4-faqlist summary{font-size:.92rem;padding:16px 0}
.faq-cols .v4-faq-a{font-size:.85rem;padding-bottom:20px;max-width:none}

.faq-ask{margin-top:clamp(32px,3.4vw,46px);padding:clamp(22px,2.4vw,30px);
  border-radius:2px;border:1px solid rgba(123,47,247,.18);
  background:linear-gradient(120deg,var(--lav),#EAF2FB 70%);
  box-shadow:0 18px 44px -34px rgba(36,25,56,.5)}
.faq-ask-t{font:700 1.08rem var(--grot);letter-spacing:-.025em;color:var(--text)}
.faq-ask p+p{margin-top:8px;color:var(--muted);font-size:.88rem;line-height:1.7}
.faq-ask .v4-actions{margin-top:18px;flex-wrap:wrap}

@media (max-width:900px){
  .faq-cols{grid-template-columns:1fr;gap:34px}
  .faq-col>.faq-group+.faq-group{margin-top:30px}
}


/* ---- avis visibles : une grille régulière ----------------------------
   En colonnes façon mosaïque, une photo au milieu d'une colonne décale
   tout ce qui suit et la section part de travers. Les avis visibles sont
   donc des cartes de même largeur, photo cadrée à l'identique, nom calé
   en bas. Les avis repliés, eux, sont du texte seul : la mosaïque leur va. */
.avis-list:not(.avis-more){columns:auto;display:grid;gap:clamp(20px,2.4vw,32px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
.avis-list:not(.avis-more) figure{display:flex;flex-direction:column;margin:0;
  padding-top:0;border-top:0}
.avis-list:not(.avis-more) .avis-photo{width:100%;height:auto;aspect-ratio:16/11;
  object-fit:cover;border-radius:2px;margin-bottom:16px}
.avis-list:not(.avis-more) .stars{margin-bottom:10px}
.avis-list:not(.avis-more) .who{margin-top:auto;padding-top:16px}

@media (max-width:1100px){
  .avis-list:not(.avis-more){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .avis-list:not(.avis-more){grid-template-columns:1fr}
}


/* ---- présence de la couleur -----------------------------------------
   La palette de marque n'existait que dans les grands titres. Elle
   descend maintenant sur les repères de lecture : le filet qui ouvre
   chaque section, les numéros d'étape, les intitulés de groupe. Toujours
   à petite échelle — la couleur rythme, elle ne crie pas.           */

/* le filet du chapô devient un dégradé, et s'allonge */
.v4-kicker::before{width:44px;height:2px;border-radius:2px;background:var(--grad)}
.v4-cta .v4-kicker::before,.hero .v4-kicker::before{background:var(--grad-n)}

/* numéros d'étape et intitulés de colonne : en dégradé de marque */
.steps .n,.sol .typ,.brand .typ,.faq-group-t,.featured .typ{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ba .typ,.pgrid .typ{background:var(--grad-n);-webkit-background-clip:text;
  background-clip:text;color:transparent}

/* un intitulé de groupe FAQ posé sur un filet coloré */
.faq-group-t{position:relative;padding-top:14px}
.faq-group-t::before{content:"";position:absolute;top:0;left:0;width:32px;height:2px;
  border-radius:2px;background:var(--grad)}

/* les cartes prennent la couleur au survol, pas avant */
#solutions .sol{position:relative;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
#solutions .sol::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad);opacity:0;transition:opacity .3s var(--ease)}
#solutions .sol:hover{transform:translateY(-3px);box-shadow:0 26px 54px -30px rgba(18,26,38,.55)}
#solutions .sol:hover::after{opacity:1}

.avis-list:not(.avis-more) figure{position:relative}
.avis-list:not(.avis-more) .avis-photo{transition:filter .4s var(--ease)}
.avis-list:not(.avis-more) figure:hover .avis-photo{filter:saturate(1.12)}
.avis-list:not(.avis-more) .who{border-top:2px solid transparent;
  border-image:var(--grad) 1;border-left:0;border-right:0;border-bottom:0}

/* =====================================================================
   TRANSITION ENTRE PAGES — API native, aucun JS
   Fondu automatique au changement de page sur les navigateurs qui la
   supportent (Chrome/Edge, Safari en cours de deploiement) ; navigation
   normale et instantanee partout ailleurs, sans rien casser.
   ===================================================================== */
@view-transition {
  navigation: auto;
}

/* photo emblematique isolee (ex: monument local sur une page commune) */
.landmark-shot{margin:0 auto;position:relative;border-radius:2px;overflow:hidden;
  background:var(--bg2);box-shadow:0 26px 60px rgba(18,26,38,.12);max-width:720px}
.landmark-shot img{width:100%;height:clamp(260px,32vw,380px);object-fit:cover;display:block}
.landmark-shot figcaption{position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  color:#F6F3FF;padding:44px 20px 16px;background:linear-gradient(transparent,rgba(6,21,23,.88));
  font:600 .78rem/1.4 var(--grot);letter-spacing:-.01em}

/* trois prestations cote a cote (pages commune) : variante 3 colonnes de .brands */
.services-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,40px);
  border-top:1px solid var(--line2);padding-top:clamp(28px,3.4vw,44px)}
@media(max-width:820px){.services-3{grid-template-columns:1fr;gap:26px}}

/* paragraphe de contenu unique, prose fluide (pages commune) */
.sec-text{max-width:72ch;font-size:.92rem;line-height:1.9;color:var(--muted)}
.sec-text strong{color:var(--text);font-family:var(--grot);font-weight:600}
.sec-text a{color:var(--vio2);border-bottom:1px solid var(--vio);transition:color .25s,border-color .25s}
.sec-text a:hover{color:var(--cyan);border-color:var(--cyan)}

/* texte + photo emblématique côte à côte (pages commune) — même logique que
   .m-hero-grid : évite un paragraphe pleine largeur suivi d'une photo isolée
   dans sa propre section, les deux ne se répondaient pas visuellement */
.sec-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,4.6vw,64px);align-items:center}
.sec-split .sec-text{max-width:none}
.sec-split .landmark-shot{margin:0;max-width:none}
@media(max-width:900px){.sec-split{grid-template-columns:1fr;gap:26px}}