/* ═══════════════════════════════════════════════════════════════════════
   CLIMÉVIA — site.css · Design system « Ligne de crête » · v3 (2026-07)
   Un seul fichier pour les 21 pages : remplace les blocs <style> empilés
   (charte + brand2026 + premium v1-v4 + struct + brandcards).
   Nuit alpine (rampe navy 5 valeurs) · crème · 4 signatures (bleu, teal,
   doré, cuivre) · action terracotta AA · display Space Grotesk.
   Body classes : .home (accueil) · .sub (pages intérieures).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────── */
:root{
  /* Rampe de nuit (du plus profond au plus clair) */
  --n0:#02070E;
  --n1:#050F1A;
  --n2:#081726;
  --n3:#0C2032;
  --n4:#122B41;
  /* Compat historique (inline styles + blocs spécifiques conservés) */
  --ink:var(--n1); --ink2:#0C1B2B; --ink3:#14283A;
  /* Lumière */
  --creme:#F4F0E8; --white:#F4F0E8; --text:#F4F0E8;
  --paper:#F2EFE8;   /* fond de page de l'ere creme (hors scope .light) */
  --muted:#A9B8C5; --muted-hi:#C6D3DF; --grey:#8CA1B2; --grey2:#9CADBC; --faint:#33444F;
  /* 4 signatures */
  --bleu:#5B9BD5;   --bleu2:#8FC3E9;
  --teal:#2E9BA0;   --teal2:#5FC0C5;
  --or:#C0964F;     --or2:#D9B87A;
  --cuivre:#D9663F; --cuivre2:#E68A63;
  /* Compat couleurs historiques */
  --green:#5B9BD5; --green2:var(--bleu2); --green3:#1E7DB6;
  --blue:#5B9BD5; --blue2:#8FC3E9; --cold:#5B9BD5; --cold2:#6FC3E8;
  --warm:#D9663F; --warm2:#E07A50; --amber:#5B9BD5; --gold:#C0964F;
  /* Action (terracotta — blanc dessus = AA) */
  --cta:#BC5430; --cta2:#C2562F;
  --err:#E07070; --ok:#3FB48C; --warn:#D4936A; --warn2:#E4C090;
  /* Signature courante (surchargée par section / par page) */
  --sig:var(--bleu); --sig2:var(--bleu2);
  /* Matière */
  --line:rgba(244,240,232,.07);
  --line-sig:rgba(91,155,213,.16);
  --r:20px;
  --container:1140px; --container-narrow:920px;
  /* Echelle typographique (7 crans + displays en clamp) */
  --t-caption:12px; --t-small:13.5px; --t-body:15.5px; --t-lead:17px; --t-title:19px; --t-h3:22px; --t-num:31px; --t-lead-fluid:clamp(16px,1.7vw,19.5px);
  --t-h2-fluid:clamp(24px,3.1vw,34px); --t-h1:clamp(34px,5.2vw,58px); --t-display:clamp(30px,4.4vw,54px); --t-display-xl:clamp(46px,7.4vw,106px);
  --lh-tight:1.05; --lh-snug:1.35; --lh-body:1.6;
  /* Echelle d'espacement (grille de 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:28px; --s8:32px; --s9:40px; --s10:48px; --s11:56px; --s12:64px;

  --surface:linear-gradient(168deg,rgba(18,43,65,.5),rgba(8,23,38,.32));
  --surface-hi:linear-gradient(168deg,rgba(24,53,79,.62),rgba(10,27,44,.4));
  --lift:inset 0 1px 0 rgba(244,240,232,.06), inset 0 -1px 0 rgba(0,0,0,.28), 0 2px 4px rgba(2,7,14,.4), 0 18px 38px -24px rgba(2,7,14,.55);
  --lift-hover:inset 0 1px 0 rgba(244,240,232,.09), 0 2px 4px rgba(2,7,14,.5), 0 20px 34px -12px rgba(2,7,14,.5), 0 46px 88px -38px rgba(2,7,14,.62);
  /* Typo */
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --display:'Space Grotesk',var(--font);
}

/* ── 2 · BASE + ACCESSIBILITÉ ───────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;font-size:var(--t-body);color-scheme:dark}
html{overflow-x:clip}
body{background:var(--ink);color:var(--text);font-family:var(--font);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-feature-settings:'kern' 1,'liga' 1,'calt' 1;font-kerning:normal}
::selection{background:rgba(217,102,63,.85);color:#fff}
.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}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--bleu2);outline-offset:3px}
.skip-link{position:absolute;left:-999px;top:0;z-index:300;background:var(--cta);color:#fff;padding:var(--s3) var(--s5);border-radius:0 0 10px 0;text-decoration:none;font-size:var(--t-small);font-weight:600}
.skip-link:focus{left:0}
.stat-n,.spec-n,.conv-num,.svc-num,.num,.kpi-n{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1,'lnum' 1}
h1,h2,h3,.sh,.conv-q{text-wrap:balance}
img,video,canvas,svg{max-width:100%}
canvas{max-width:none}

/* ── 3 · MATIÈRE GLOBALE : grain + barre de lecture ─────────────────── */
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.06;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:230;background:var(--cta);box-shadow:0 0 10px rgba(188,84,48,.4);
  /* scaleX et non width : cette barre est repeinte a CHAQUE image de
     defilement. width force un recalcul de mise en page a chaque fois ;
     transform reste sur le compositeur. Le pilote JS suit (prog.style.transform). */
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  transition:transform .12s linear}

/* ── 4 · NAVIGATION ─────────────────────────────────────────────────── */
body>nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s9);background:rgba(4,10,18,.78);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  transition:background .4s ease,box-shadow .4s ease,padding .35s ease}
body>nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 4%,rgba(91,155,213,.3),transparent 96%);opacity:.6}
body>nav.nav-scrolled{background:rgba(3,8,15,.88);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);box-shadow:0 10px 44px rgba(0,0,0,.45);padding-top:var(--s3);padding-bottom:var(--s3)}
.nav-links{display:flex;gap:var(--s7)}
.nav-links a{position:relative;color:rgba(244,240,232,.72);font-size:var(--t-small);letter-spacing:-.005em;font-weight:500;text-decoration:none;transition:color .25s ease}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-5px;width:100%;height:1.5px;border-radius:2px;background:var(--bleu);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover{color:var(--creme)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}}
/* variante sous-pages */
.nav-logo{display:flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--text)}
.nav-r{display:flex;align-items:center;gap:var(--s5)}
.nav-tel{color:var(--bleu2);text-decoration:none;font-size:var(--t-small);font-weight:600;letter-spacing:.01em}
.nav-tel:hover{color:var(--creme)}
.nav-cta{display:inline-block;padding:var(--s2) var(--s5);background:var(--cta);color:#fff;border:none;font-size:var(--t-small);letter-spacing:-.005em;font-weight:600;cursor:pointer;font-family:var(--font);border-radius:980px;white-space:nowrap;text-decoration:none;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,background .25s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 12px rgba(188,84,48,.35)}
@media (hover:hover) and (pointer:fine){.nav-cta:hover{background:var(--cta2);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 22px rgba(188,84,48,.5);transform:translateY(-2px)}}
@media(max-width:640px){body>nav{padding:var(--s3) var(--s5)}}
/* LE NUMERO NE PARAIT QUE QUAND LA NAVIGATION ENTIERE EST LA. Il etait
   masque sous 640 px seulement ; or les liens de navigation disparaissent
   des 1040 px. Entre les deux, mesure du jury a 820 px : la barre ne
   portait plus que le logo, LE NUMERO, le bouton et le menu — le numero
   devenait l'un des trois seuls contenus, donc la vedette. Doctrine du
   client, verbatim : « le numero doit etre present mais sans le mettre en
   avant ». */
@media(max-width:1040px){.nav-tel{display:none}}

/* Burger + menu mobile (accueil) */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:var(--s1);width:44px;height:44px;background:none;border:none;cursor:pointer;padding:var(--s3);z-index:120}
.nav-burger span{display:block;width:22px;height:2px;background:var(--text);border-radius:12px;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s ease,background-color .5s ease}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;top:0;right:0;width:min(78vw,320px);height:100vh;background:linear-gradient(190deg,var(--n3),var(--n1));z-index:110;display:flex;flex-direction:column;justify-content:center;gap:var(--s2);padding:80px var(--s8) var(--s8);transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);
  /* L'OMBRE N'EXISTE QUE MENU OUVERT. Le tiroir est pose hors cadre par une
     translation, mais son ombre part vers la GAUCHE (-12px) : elle rentre
     donc dans la page, et body{overflow-x:hidden} coupe le tiroir mais PAS
     son ombre. Mesure du jury dans la bande pale du premier ecran : bord
     gauche 207, bord droit 147 en 1440 ; apres suppression de l'ombre,
     207 / 206. L'asymetrie salissait le bord droit de TOUTES les pages,
     tout le temps, menu ferme. */
  box-shadow:none}
.mobile-menu.open{transform:translateX(0);box-shadow:-12px 0 40px rgba(0,0,0,.5)}
.mobile-menu a{color:var(--text);text-decoration:none;font-size:var(--t-title);font-weight:500;letter-spacing:-.015em;padding:var(--s3) 0;border-bottom:1px solid var(--line);transition:color .2s}
.mobile-menu a:active,.mobile-menu a:hover{color:var(--bleu2)}
.mobile-menu-cta{margin-top:var(--s4);background:var(--cta);color:#fff!important;text-align:center;border-radius:16px;border-bottom:none!important;padding:16px!important;font-weight:600}
.menu-backdrop{position:fixed;inset:0;background:rgba(2,7,14,.6);z-index:105;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;backdrop-filter:blur(2px)}
.menu-backdrop.open{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}

/* ── 5 · BOUTONS ────────────────────────────────────────────────────── */
.btn-p{display:inline-block;padding:var(--s4) var(--s9);background:linear-gradient(180deg,var(--cta),#A94A28);color:#fff;border:none;font-size:var(--t-body);letter-spacing:-.015em;font-weight:600;cursor:pointer;font-family:var(--font);border-radius:980px;white-space:nowrap;text-decoration:none;text-align:center;
  position:relative;overflow:hidden;will-change:transform;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 6px rgba(2,7,14,.4),0 10px 24px -8px rgba(150,55,30,.5);
  transform:translate(var(--mx-pull,0px),var(--my-pull,0px));
  transition:transform 0s linear,box-shadow .3s ease,background .25s ease}
.btn-p:hover,.btn-p:active{background:linear-gradient(180deg,var(--cta2),#AE4D2A);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 10px rgba(2,7,14,.45),0 14px 32px -8px rgba(150,55,30,.6)}
.btn-p::after{content:"";position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.2),transparent);
  /* translateX et non left : le reflet balaie le bouton PRINCIPAL pendant
     0,75 s a chaque survol. En pourcentage, la translation se rapporte a la
     largeur de l'element (55 % du bouton) : -140/55 = -254,5 %. */
  transform:translateX(-254.5%) skewX(-18deg);
  transition:transform .75s cubic-bezier(.16,1,.3,1);pointer-events:none}
.btn-p:hover::after{transform:translateX(272.7%) skewX(-18deg)}
.btn-s{display:inline-block;padding:var(--s4) var(--s9);background:rgba(91,155,213,.08);color:var(--text);border:1px solid rgba(244,240,232,.22);font-size:var(--t-body);letter-spacing:-.015em;font-weight:500;cursor:pointer;font-family:var(--font);border-radius:980px;white-space:nowrap;text-decoration:none;text-align:center;backdrop-filter:blur(8px);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease,color .22s ease,opacity .22s ease}
.btn-s:hover,.btn-s:active{border-color:var(--sig2);color:var(--sig2);background:rgba(91,155,213,.14)}
.btn-devis{display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:var(--s4) var(--s9)}
.btn-devis-main{font-size:var(--t-body);letter-spacing:-.015em;font-weight:600;color:#fff}

/* ── 6 · EN-TÊTES DE SECTION (jalons de la voie) ────────────────────── */
.ey{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-caption);line-height:var(--lh-tight);letter-spacing:.22em;text-transform:uppercase;color:var(--sig);font-weight:700;margin-bottom:var(--s6)}
.ey::before{content:"";order:-2;width:7px;height:7px;border-radius:50%;background:var(--sig);box-shadow:0 0 12px var(--sig);flex-shrink:0}
.home main .ey::after{content:counter(sec,decimal-leading-zero);order:-1;font-family:var(--display);font-size:var(--t-caption);font-weight:600;letter-spacing:.1em;color:rgba(244,240,232,.42)}
.why-line{display:none}
.sh{font-family:var(--display);font-size:var(--t-display);font-weight:600;color:var(--creme);margin-bottom:var(--s5);letter-spacing:-.03em;line-height:var(--lh-tight)}
.sp{font-size:var(--t-lead-fluid);font-weight:400;color:var(--muted);line-height:var(--lh-body);max-width:620px;letter-spacing:-.005em}
/* En-tête éditorial : titre à gauche, intro calée en bas à droite */
.shead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);gap:var(--s5) 72px;align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.shead .ey{grid-column:1/-1}
.shead .sh{margin-bottom:0}
.shead .sp{margin:0 0 var(--s2);justify-self:end}
@media(max-width:880px){.shead{grid-template-columns:1fr}.shead .sp{justify-self:start;margin:0}}
.shead-c{display:block;text-align:center;max-width:680px;margin:0 auto clamp(34px,4.6vw,54px)}
.shead-c .ey{justify-content:center}
.shead-c .sp{margin:0 auto}

/* ── 7 · ACCUEIL : rythme des plans de nuit ─────────────────────────── */
.home main{counter-reset:sec}
.home main>section{counter-increment:sec}
.home main>section.statement{counter-increment:none}
.home section{position:relative;padding:clamp(100px,12vh,158px) 40px;background:var(--ink);border-top:1px solid rgba(244,240,232,.045)}
.home section::before{content:"";position:absolute;left:0;right:0;top:0;height:min(46vh,420px);pointer-events:none;
  background:radial-gradient(58% 100% at 16% 0%,color-mix(in srgb,var(--sig) 7%,transparent),transparent 72%)}
.home .inner{position:relative;z-index:1;max-width:var(--container);margin:0 auto}
#services{--sig:var(--bleu);--sig2:var(--bleu2);background:linear-gradient(180deg,var(--n2),var(--ink))}
#clients{--sig:var(--teal);--sig2:var(--teal2)}
#about{--sig:var(--or);--sig2:var(--or2);background:linear-gradient(180deg,var(--n0),var(--ink))}
#conviction{--sig:var(--or);--sig2:var(--or2);overflow:hidden}
#pourquoi{--sig:var(--cuivre);--sig2:var(--cuivre2);background:linear-gradient(180deg,var(--n2),var(--ink))}
#tech{--sig:var(--bleu);--sig2:var(--bleu2);background:linear-gradient(180deg,var(--n0),var(--n2))}
#marques{--sig:var(--or);--sig2:var(--or2)}
#zones{--sig:var(--teal);--sig2:var(--teal2);background:linear-gradient(180deg,var(--n2),var(--ink))}
#contact{--sig:var(--cuivre);--sig2:var(--cuivre2);background:linear-gradient(180deg,var(--ink),var(--n0))}
#conviction .ey,#contact .ey{justify-content:center}
/* Filigrane « Le Sommet » */
#about::after,#pourquoi::after{content:"";position:absolute;right:-46px;top:36px;width:560px;height:560px;max-width:64vw;opacity:.05;pointer-events:none;z-index:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M16 74 L50 36 L84 74' stroke='%23F4F0E8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M34 74 L50 55 L66 74' stroke='%23F4F0E8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='25' r='2.4' fill='%23F4F0E8'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── 8 · HERO (accueil) ─────────────────────────────────────────────── */
.hero-cta{display:flex;gap:var(--s3);justify-content:center;align-items:center;flex-wrap:wrap;margin-top:var(--s9)}
@media(min-width:769px){
  .hero-cta .btn-devis{padding:var(--s3) var(--s8)}
  .hero-cta .btn-devis-main{font-size:var(--t-body)}
  .hero-cta .btn-s{padding:var(--s3) var(--s7);font-size:var(--t-small)}
}

/* ── 9 · CARTES (recette de matière commune) ────────────────────────── */
.svc,.client-card,.brand-card,.why-box,.conv-body,a.zone-card,.card,.zcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift);position:relative;isolation:isolate}
.svc::before,.client-card::before,.brand-card::before,a.zone-card::before,.conv-body::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .45s ease;pointer-events:none;z-index:-1;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(91,155,213,.12),transparent 62%)}
.svc:hover::before,.client-card:hover::before,.brand-card:hover::before,a.zone-card:hover::before,.conv-card:hover .conv-body::before{opacity:1}
.svc,.client-card,.brand-card,a.zone-card{transition:background .25s ease,transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s ease,border-color .25s ease}
@media (hover:hover) and (pointer:fine){
@media (hover:hover) and (pointer:fine){.svc:hover,.client-card:hover,.brand-card:hover,a.zone-card:hover{transform:translateY(-4px);background:var(--surface-hi);box-shadow:var(--lift-hover)}}
}

/* ── 10 · ACCUEIL : services ────────────────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(14px,1.6vw,20px);margin-top:var(--s2)}
.svc{padding:var(--s9) var(--s7)}
.svc:hover{border-color:rgba(91,155,213,.32)}
.svc-icon{margin-bottom:var(--s5);display:block;color:var(--bleu)}
.svc-icon svg{display:block;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.svc-h{font-family:var(--display);font-size:var(--t-title);font-weight:600;color:var(--creme);margin-bottom:var(--s3);letter-spacing:-.015em}
.svc-h a{color:inherit;text-decoration:none}
.svc-p{font-size:var(--t-body);color:var(--muted);line-height:var(--lh-body);font-weight:400}
.svc-num{position:absolute;top:26px;right:26px;font-family:var(--display);font-size:var(--t-num);font-weight:700;color:rgba(91,155,213,.14);line-height:var(--lh-tight)}
.svc:hover .svc-icon{color:var(--bleu2)}
.svc-grid .svc:nth-child(2) .svc-icon,.svc-grid .svc:nth-child(3) .svc-icon{color:var(--cold)}
.svc-grid .svc:nth-child(2):hover .svc-icon,.svc-grid .svc:nth-child(3):hover .svc-icon{color:var(--cold2)}
.svc-grid .svc:nth-child(1) .svc-icon,.svc-grid .svc:nth-child(1) .svc-h{color:var(--warm)}
.svc-grid .svc:nth-child(2) .svc-h,.svc-grid .svc:nth-child(3) .svc-h{color:var(--cold)}
.svc-grid .svc:nth-child(1) .svc-num{color:rgba(217,102,63,.16)}
.svc-grid .svc:nth-child(3) .svc-num{color:rgba(46,155,160,.2)}
.svc-grid .svc:nth-child(4) .svc-num{color:rgba(192,150,79,.2)}
.svc-grid .svc:nth-child(1):hover{border-color:rgba(217,102,63,.34)}
.svc-grid .svc:nth-child(3):hover{border-color:rgba(46,155,160,.36)}
.svc-grid .svc:nth-child(4):hover{border-color:rgba(192,150,79,.36)}

/* ── 11 · ACCUEIL : interventions (clients) ─────────────────────────── */
.clients-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(12px,1.4vw,18px)}
.client-card{padding:var(--s7) var(--s6)}
.client-card:hover{border-color:rgba(46,155,160,.4)}
.client-icon{margin-bottom:var(--s3);display:block;color:var(--teal2)}
.client-icon svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.client-h{font-family:var(--display);font-size:var(--t-lead);font-weight:600;color:var(--creme);margin-bottom:var(--s2);letter-spacing:-.015em}
.client-p{font-size:var(--t-body);color:var(--muted);line-height:var(--lh-body);font-weight:400}

/* ── 12 · ACCUEIL : à propos + stats ────────────────────────────────── */
.about-inner{display:block;max-width:760px}
.about-video{position:relative;width:100%;margin-top:var(--s10);border-radius:var(--r);display:block;overflow:hidden;box-shadow:var(--lift);aspect-ratio:16/9;background:#0B1622;border:1px solid var(--line)}
.about-video video{width:100%;height:100%;object-fit:cover;display:block}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7) var(--s6);margin-top:var(--s9)}
.stat{border-top:1px solid var(--line);padding-top:var(--s4);position:relative}
.stat::after{content:"";position:absolute;top:-1px;left:0;width:44px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--sig),transparent)}
.stat-n{font-family:var(--display);font-size:var(--t-num);font-weight:700;color:var(--creme);letter-spacing:-.015em;line-height:var(--lh-tight);white-space:nowrap}
.stat-l{font-size:var(--t-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:var(--s2)}

/* ── 13 · ACCUEIL : conviction (la voie) ────────────────────────────── */
#conviction .conv-mark{width:52px;height:52px;margin:0 auto 24px}
#conviction h2{font-family:var(--display);font-weight:600;font-size:var(--t-display);line-height:var(--lh-tight);letter-spacing:-.03em;color:var(--text);margin:0 auto;max-width:820px}
#conviction .conv-lead{font-size:var(--t-lead-fluid);line-height:var(--lh-body);color:var(--muted-hi);max-width:680px;margin:28px auto 0}
#conviction .conv-lead strong{color:var(--text);font-weight:600}
.conv-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);max-width:var(--container);margin:56px auto 0;z-index:1}
.conv-grid::before{content:"";position:absolute;top:6px;left:11.5%;right:11.5%;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--bleu) 0%,var(--cuivre) 33%,var(--teal) 67%,var(--or) 100%);opacity:.5;z-index:0}
.conv-card{position:relative;display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.conv-pt{width:14px;height:14px;border-radius:50%;background:var(--c);margin:0 auto 24px;box-shadow:0 0 0 5px var(--ink),0 0 16px var(--c);position:relative;z-index:1;transition:box-shadow .42s ease}
.conv-card:hover .conv-pt{box-shadow:0 0 0 5px var(--ink),0 0 24px var(--c)}
.conv-body{flex:1;padding:var(--s7) var(--s7) var(--s8);transition:transform .42s cubic-bezier(.16,1,.3,1),border-color .42s ease,background .42s ease,box-shadow .3s ease}
@media (hover:hover) and (pointer:fine){.conv-card:hover .conv-body{transform:translateY(-6px);border-color:rgba(244,240,232,.14);background:var(--surface-hi);box-shadow:var(--lift-hover)}}
.conv-num{font-family:var(--display);font-size:var(--t-caption);font-weight:700;letter-spacing:.16em;color:var(--c);opacity:.6;margin-bottom:var(--s2)}
.conv-k{font-size:var(--t-caption);letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--c);margin-bottom:var(--s4)}
.conv-q{font-family:var(--display);font-size:var(--t-h3);font-weight:600;line-height:var(--lh-snug);color:var(--text);margin:0 0 var(--s4);letter-spacing:-.015em}
.conv-d{font-size:var(--t-small);line-height:var(--lh-body);color:var(--muted);margin:0}

/* ── 14 · ACCUEIL : pourquoi ────────────────────────────────────────── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px);margin-top:var(--s2)}
.why-box{padding:var(--s9) var(--s8);transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.why-box:hover{background:var(--surface-hi);border-color:rgba(217,102,63,.3)}
.why-h{font-family:var(--display);font-size:var(--t-title);font-weight:600;color:var(--creme);margin-bottom:var(--s3);letter-spacing:-.015em}
.why-h::before{content:"";display:block;width:34px;height:2.5px;border-radius:3px;background:linear-gradient(90deg,var(--cuivre),transparent);margin-bottom:var(--s5)}
.why-p{font-size:var(--t-body);color:var(--muted);line-height:var(--lh-body);font-weight:400}

/* ── 15 · ACCUEIL : technologie / VRV 3D ────────────────────────────── */
.vrv-caption{text-align:center;margin-top:var(--s9);margin-bottom:-8px;font-size:var(--t-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.vrv-outer{margin-top:var(--s5);border-radius:var(--r);overflow:hidden;background:linear-gradient(160deg,var(--n3) 0%,var(--n1) 100%);position:relative;border:1px solid var(--line);box-shadow:var(--lift)}
.vrv-logo{position:absolute;top:16px;left:18px;z-index:6;pointer-events:none;display:flex;flex-direction:column;gap:2px}
.vrv-logo svg{display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.vrv-logo-sub{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.32em;text-transform:uppercase;color:rgba(143,195,233,.7);padding-left:44px;margin-top:-2px}
.vrv-cap{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.cap-label{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-100%);will-change:left,top,opacity;transition:opacity .35s ease}
.cap-txt{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.03em;color:var(--creme);background:rgba(8,17,29,.76);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(91,155,213,.28);padding:var(--s1) var(--s3);border-radius:980px;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.cap-vline{width:1px;height:18px;background:linear-gradient(180deg,rgba(91,155,213,.55),rgba(91,155,213,.95))}
.cap-dot{width:7px;height:7px;border-radius:50%;background:var(--bleu);margin-top:-3.5px;box-shadow:0 0 0 4px rgba(91,155,213,.16),0 0 10px rgba(91,155,213,.7)}
@media(max-width:600px){.cap-txt{font-size:var(--t-caption);padding:var(--s1) var(--s2)}.cap-vline{height:12px}.vrv-logo{top:12px;left:12px}.vrv-logo svg{width:94px}.vrv-logo-sub{font-size:8px;padding-left:var(--s9)}}
.vrv-loader{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);background:radial-gradient(circle at 50% 44%,#172A40,#070E18);transition:opacity .6s ease}
.vrv-loader.hide{opacity:0;pointer-events:none}
.vl-spin{width:34px;height:34px;border-radius:50%;border:2px solid rgba(91,155,213,.18);border-top-color:var(--bleu);animation:vlspin .9s linear infinite}
@keyframes vlspin{to{transform:rotate(360deg)}}
.vl-txt{font-family:var(--display);font-size:var(--t-caption);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
#cvc3d{width:100%;height:520px;display:block;cursor:grab;touch-action:none}
#cvc3d:active{cursor:grabbing}
.ctrl-row{display:flex;gap:var(--s2);margin-top:var(--s5);flex-wrap:wrap}
.cb{padding:var(--s2) var(--s4);background:rgba(18,43,65,.6);color:var(--grey2);border:1px solid rgba(91,155,213,.18);font-size:var(--t-caption);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:var(--font);border-radius:14px;transition:transform .2s,box-shadow .2s,border-color .2s,background-color .2s,color .2s,opacity .2s}
.cb:hover,.cb.on{border-color:var(--bleu);color:var(--bleu2);background:rgba(91,155,213,.1)}
.cb-primary{background:var(--cta);color:#fff;border-color:var(--cta);box-shadow:0 2px 12px rgba(188,84,48,.35)}
.cb-primary:hover,.cb-primary.on{background:var(--cta2);color:#fff;border-color:var(--cta2)}
.vrv-info{position:absolute;bottom:16px;left:16px;max-width:300px;background:rgba(12,32,50,.92);backdrop-filter:blur(10px);border:1px solid rgba(91,155,213,.3);border-left:3px solid var(--bleu);border-radius:16px;padding:var(--s4) var(--s4);opacity:0;transform:translateY(8px);transition:transform .3s,box-shadow .3s,border-color .3s,background-color .3s,color .3s,opacity .3s;pointer-events:none;z-index:5}
.vrv-info.show{opacity:1;transform:translateY(0)}
.vi-name{font-size:var(--t-small);font-weight:700;color:var(--creme);letter-spacing:.02em;margin-bottom:var(--s1)}
.vi-desc{font-size:var(--t-caption);color:var(--bleu2);line-height:var(--lh-body);font-weight:400}
.vi-hint{font-size:var(--t-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:var(--s2)}
.vrv-info:not(.show) .vi-name,.vrv-info:not(.show) .vi-desc{display:none}
.vrv-info:not(.show){opacity:1;transform:none;background:rgba(12,32,50,.7);border-left-color:var(--grey)}
.vrv-info:not(.show) .vi-hint{margin-top:0}
.specs-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px);margin-top:var(--s7)}
.spec{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s5) var(--s6);box-shadow:var(--lift)}
.spec-n{font-family:var(--display);font-size:var(--t-h3);font-weight:700;color:var(--bleu2);letter-spacing:-.015em}
.spec-l{font-size:var(--t-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-top:var(--s1)}

/* ── 16 · ACCUEIL : marques ─────────────────────────────────────────── */
.brands-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(12px,1.4vw,18px)}
.brand-card{padding:var(--s7) var(--s6);cursor:pointer;overflow:hidden}
.brand-card::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(192,150,79,.13),transparent 60%)}
.brand-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--or),#E2C27E);transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;z-index:3}
.brand-card:hover{border-color:rgba(192,150,79,.42)}
@media (hover:hover) and (pointer:fine){.brand-card:hover::after{transform:scaleX(1)}}
.brand-card:hover .brand-logo-text{color:var(--or2)}
.brand-card:active{transform:translateY(-2px) scale(.992)}
.brand-card:active::after,.brand-card:focus-visible::after{transform:scaleX(1);height:4px;box-shadow:0 0 20px rgba(192,150,79,.75)}
.brand-featured{background:linear-gradient(168deg,rgba(91,155,213,.16),rgba(91,155,213,.05));border-color:rgba(91,155,213,.34)}
.brand-featured::after{transform:scaleX(1);background:linear-gradient(90deg,var(--bleu),var(--bleu2))}
.brand-featured:hover{border-color:rgba(91,155,213,.5)}
.brand-badge{font-size:var(--t-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--bleu2);margin-bottom:var(--s3);font-weight:700}
.brand-logo-text{font-family:var(--display);font-size:var(--t-title);font-weight:600;color:var(--text);letter-spacing:.01em;margin-bottom:var(--s2);line-height:var(--lh-snug);transition:color .25s ease}
.brand-sub{font-size:var(--t-caption);color:var(--muted);font-weight:400;line-height:var(--lh-body)}

/* ── 17 · ACCUEIL : zones ───────────────────────────────────────────── */
.zones-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(12px,1.4vw,18px)}
a.zone-card{display:block;padding:var(--s6) var(--s6);text-decoration:none;cursor:pointer}
a.zone-card:hover{border-color:rgba(46,155,160,.44)}
.zone-main{border-color:rgba(46,155,160,.4);background:linear-gradient(168deg,rgba(46,155,160,.14),rgba(46,155,160,.04))}
.zone-icon{margin-bottom:var(--s3);display:block;color:var(--teal2)}
.zone-icon svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.zone-name{font-family:var(--display);font-size:var(--t-body);font-weight:600;color:var(--creme);margin-bottom:var(--s1);letter-spacing:-.005em}
.zone-sub{font-size:var(--t-caption);color:var(--muted);line-height:var(--lh-body);font-weight:400}
.zones-note{margin-top:var(--s9);padding:var(--s6) var(--s7);border:1px solid rgba(46,155,160,.3);border-radius:16px;background:linear-gradient(168deg,rgba(46,155,160,.1),rgba(46,155,160,.03));display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s4)}
.zones-note-t{font-size:var(--t-small);color:var(--teal2);font-weight:600;margin-bottom:var(--s1)}
.zones-note-p{font-size:var(--t-small);color:var(--muted);font-weight:400}

/* ── 18 · ACCUEIL : contact ─────────────────────────────────────────── */
.ct-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(14px,1.6vw,20px);max-width:var(--container-narrow);margin:0 auto}
.ct-form{background:var(--surface-hi);border:1px solid rgba(217,102,63,.28);border-radius:var(--r);box-shadow:var(--lift);padding:44px var(--s9);display:flex;flex-direction:column;gap:var(--s5);align-items:flex-start;position:relative;overflow:hidden}
.ct-form::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 120px at 20% 0%,rgba(217,102,63,.1),transparent 70%)}
.ct-kick{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--cuivre2);font-weight:700}
.ct-kick svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ct-h{font-family:var(--display);font-size:var(--t-h3);font-weight:600;color:var(--creme);letter-spacing:-.015em}
.ct-p{font-size:var(--t-body);color:var(--muted);font-weight:400;line-height:var(--lh-body)}
.ct-list{list-style:none;display:flex;flex-direction:column;gap:var(--s2);margin-top:2px}
.ct-list li{font-size:var(--t-small);color:var(--muted);font-weight:400;display:flex;align-items:center;gap:var(--s2)}
.ct-list li::before{content:"✓";color:var(--cuivre2);font-weight:700}
.ct-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--lift);padding:var(--s9) var(--s8);display:flex;flex-direction:column;gap:var(--s6)}
.ct-lab{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:var(--s2);font-weight:600}
.ct-lab svg{display:inline-block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ct-tel{font-family:var(--display);font-size:var(--t-h3);font-weight:700;letter-spacing:-.015em}
.ct-tel a{color:var(--creme);text-decoration:none}
.ct-tel a:hover{color:var(--bleu2)}
.ct-mail a{font-size:var(--t-body);color:var(--bleu2);font-weight:500;text-decoration:none}
.ct-mail a:hover{text-decoration:underline}
.ct-hours{font-size:var(--t-body);color:var(--text);font-weight:400;line-height:var(--lh-body)}
.ct-urg{padding:var(--s4) var(--s4);border:1px solid rgba(224,112,112,.26);border-radius:14px;background:rgba(224,112,112,.06);margin-top:auto}
.ct-urg .ct-lab{color:var(--err);margin-bottom:var(--s1)}
.ct-urg .ct-lab svg{stroke:var(--err)}
.ct-urg-p{font-size:var(--t-small);color:var(--muted);font-weight:400;line-height:var(--lh-body)}

/* ── 19 · FOOTER ÉDITORIAL (toutes pages) ───────────────────────────── */
.ft{display:block;background:linear-gradient(180deg,var(--n0),#010409);border-top:1px solid var(--line);position:relative;overflow:hidden;padding:0;text-align:left}
.ft::before{content:"";position:absolute;right:-60px;bottom:-120px;width:520px;height:520px;max-width:70vw;opacity:.04;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M16 74 L50 36 L84 74' stroke='%23F4F0E8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M34 74 L50 55 L66 74' stroke='%23F4F0E8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='25' r='2.4' fill='%23F4F0E8'/%3E%3C/svg%3E") center/contain no-repeat}
.ft-in{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:clamp(56px,7vw,84px) 40px 40px;display:grid;grid-template-columns:minmax(240px,1.1fr) 2fr;gap:44px 72px}
.ft-brand svg{display:block}
/* Symbole de marque : exposant qui n'agrandit PAS la boite de ligne
   (jamais <sup> : ses styles navigateur decalent le pied de page). */
.rm{font-size:.62em;vertical-align:.42em;line-height:0;letter-spacing:0;margin-left:.06em}
.ft-base{margin-top:var(--s4);font-size:var(--t-small);color:var(--muted);letter-spacing:.01em}
.ft-sign{margin-top:var(--s6);font-family:var(--display);font-size:var(--t-h2-fluid);font-weight:600;letter-spacing:-.015em;color:var(--creme)}
.ft-sign .ft-dot{color:var(--cuivre)}
.ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7) var(--s8)}
.ft-col{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.ft-t{font-size:var(--t-caption);letter-spacing:.22em;text-transform:uppercase;color:var(--grey);font-weight:700;margin-bottom:var(--s1)}
.ft-col a{font-size:var(--t-small);color:var(--muted-hi);text-decoration:none;letter-spacing:.01em;transition:color .2s}
.ft-col a:hover{color:var(--bleu2)}
.ft-low{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:var(--s5) var(--s9) var(--s7);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s2) var(--s6);border-top:1px solid rgba(244,240,232,.05)}
.ft-low span{font-size:var(--t-caption);color:rgba(244,240,232,.58);letter-spacing:.02em}
.ft-low a{color:inherit;text-decoration:none}
@media(max-width:880px){.ft-in{grid-template-columns:1fr;gap:var(--s9)}.ft-cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}

/* ── 20 · BANDEAU COOKIES ───────────────────────────────────────────── */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:var(--s4) var(--s6);flex-wrap:wrap;padding:var(--s4) var(--s7);background:rgba(3,8,15,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(91,155,213,.18);transform:translateY(115%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cookie-banner.show{transform:none}
.cookie-banner p{font-size:var(--t-small);color:rgba(244,240,232,.78);line-height:var(--lh-body);max-width:680px;font-weight:400;margin:0}
.cookie-banner a{color:var(--bleu2);text-decoration:underline}
.cb-actions{display:flex;gap:var(--s3);flex-shrink:0}
.cookie-btn{padding:var(--s2) var(--s6);border-radius:980px;font-size:var(--t-small);font-weight:600;cursor:pointer;font-family:var(--font);border:1px solid rgba(244,240,232,.24);background:transparent;color:var(--text);transition:transform .2s,box-shadow .2s,border-color .2s,background-color .2s,color .2s,opacity .2s;white-space:nowrap}
.cookie-btn.accept{background:var(--cta);border-color:var(--cta);color:#fff}
.cookie-btn.accept:hover{background:var(--cta2)}
.cookie-btn:not(.accept):hover{border-color:var(--bleu2);color:var(--bleu2)}

/* ── 21 · SOUS-PAGES : structure éditoriale ─────────────────────────── */
.sub{line-height:var(--lh-body)}
.wrap{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--s7)}
.sub .hd{position:relative;padding:clamp(150px,20vh,196px) 0 clamp(56px,7vw,76px);overflow:hidden;
  background:linear-gradient(198deg,color-mix(in srgb,var(--sig) 6%,transparent),transparent 46%),
             linear-gradient(180deg,var(--n0) 0%,var(--ink) 100%)}
/* Ligne de crete — filigrane « Le Sommet » teinte par la couleur signature de la page (remplace l'ancien halo) */
.sub .hd::before{content:"";position:absolute;inset:0;pointer-events:none}
@supports ((-webkit-mask-repeat:no-repeat) or (mask-repeat:no-repeat)){
  .sub .hd::before{background:color-mix(in srgb,var(--sig) 72%,var(--creme));opacity:.15;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' fill='none'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='.62' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.7'/%3E%3C/linearGradient%3E%3Cpath d='M-30 260 150 170 300 232 470 120 640 226 810 84 980 214 1150 150 1300 216 1470 130' stroke='url(%23g)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M755 173 810 129 865 173' stroke='%23fff' stroke-width='2' stroke-opacity='.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-30 300 150 214 300 272 470 168 640 268 810 132 980 258 1150 196 1300 258 1470 176' stroke='url(%23g)' stroke-width='1.5' stroke-opacity='.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='810' cy='46' r='5.5' fill='%23fff'/%3E%3C/svg%3E") right -40px top 26px/min(76%,1100px) auto no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' fill='none'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='.62' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.7'/%3E%3C/linearGradient%3E%3Cpath d='M-30 260 150 170 300 232 470 120 640 226 810 84 980 214 1150 150 1300 216 1470 130' stroke='url(%23g)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M755 173 810 129 865 173' stroke='%23fff' stroke-width='2' stroke-opacity='.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-30 300 150 214 300 272 470 168 640 268 810 132 980 258 1150 196 1300 258 1470 176' stroke='url(%23g)' stroke-width='1.5' stroke-opacity='.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='810' cy='46' r='5.5' fill='%23fff'/%3E%3C/svg%3E") right -40px top 26px/min(76%,1100px) auto no-repeat;
    animation:hdCrest 1.6s cubic-bezier(.16,1,.3,1) .15s both}
}
@keyframes hdCrest{from{opacity:0;transform:translateY(12px)}to{opacity:.15;transform:none}}
@media (prefers-reduced-motion:reduce){.sub .hd::before{animation:none}}
@media (max-width:760px){.sub .hd::before{-webkit-mask-position:right -12px top 40px;mask-position:right -12px top 40px;-webkit-mask-size:118% auto;mask-size:118% auto}}
.sub .hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent 4%,color-mix(in srgb,var(--sig) 34%,transparent),transparent 96%)}
.sub .hd .wrap{position:relative;z-index:1}
.bc{font-size:var(--t-caption);color:var(--grey);margin-bottom:var(--s6);letter-spacing:.01em}
.bc a{color:var(--grey);text-decoration:none;transition:color .2s}
.bc a:hover{color:var(--bleu2)}
.sub .hd .ey{margin-bottom:var(--s5)}
.sub h1{font-family:var(--display);font-size:var(--t-h1);font-weight:700;letter-spacing:-.03em;line-height:var(--lh-tight);margin-bottom:var(--s5);color:var(--creme)}
h1 .c{color:var(--sig)}
.lead{font-size:var(--t-lead-fluid);color:var(--muted-hi);font-weight:400;line-height:var(--lh-body);max-width:700px;margin-bottom:var(--s8)}
.cta-row{display:flex;gap:var(--s3);flex-wrap:wrap}
.cta-row .btn-p,.cta-row .btn-s{padding:var(--s4) var(--s7);font-size:var(--t-body)}
.sub section{padding:clamp(52px,7vw,72px) 0;border-top:1px solid var(--line);position:relative}
.sub section p,.sub section ul,.sub section ol{max-width:70ch}
.sub section:first-of-type{border-top:none}
.sub h2{font-family:var(--display);font-size:var(--t-h2-fluid);font-weight:600;letter-spacing:-.03em;line-height:var(--lh-tight);margin-bottom:var(--s5);color:var(--creme)}
.sub section>.wrap>h2::before{content:"";display:block;width:36px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--sig),transparent);margin-bottom:var(--s5)}
.sub h3{font-family:var(--display);font-size:var(--t-lead);font-weight:600;margin-bottom:var(--s2);color:var(--creme);letter-spacing:-.015em}
.sub p{color:var(--muted-hi);font-weight:400;margin-bottom:var(--s4)}
.sub p strong,.sub li strong{color:var(--text);font-weight:600}
.sub ul{color:var(--muted-hi);font-weight:400;margin:0 0 var(--s4) var(--s5)}
.sub ul li{margin-bottom:var(--s2)}
.sub main p a,.sub main li a{color:var(--sig2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--sig2) 45%,transparent);transition:color .2s}
.sub main p a:hover,.sub main li a:hover{color:var(--creme)}

/* Grilles + cartes sous-pages */
.sub .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(12px,1.4vw,16px);margin-top:var(--s6);background:none}
.card{padding:var(--s7) var(--s6);transition:border-color .25s ease,box-shadow .3s ease,transform .22s cubic-bezier(.22,.61,.36,1),background .25s ease}
.card p{font-size:var(--t-small);margin:0;color:var(--muted)}
.card h3::after{content:"";display:block;width:26px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--sig) 55%,transparent);margin-top:var(--s2)}
a.card{text-decoration:none;display:block;cursor:pointer}
@media (hover:hover) and (pointer:fine){a.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--sig) 40%,transparent);background:var(--surface-hi);box-shadow:var(--lift-hover)}}
.card .more{color:var(--sig2);font-size:var(--t-small);font-weight:600;margin-top:var(--s3);display:inline-block}

/* Étapes — la voie verticale */
.steps{counter-reset:s;margin-top:var(--s7);position:relative}
.steps .st{position:relative;padding:0 0 var(--s7) 52px;counter-increment:s}
.steps .st::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--n3);border:1px solid color-mix(in srgb,var(--sig) 55%,transparent);color:var(--sig2);font-family:var(--display);font-weight:700;font-size:var(--t-small);display:flex;align-items:center;justify-content:center;z-index:1;box-shadow:0 0 0 4px var(--ink)}
.steps .st::after{content:"";position:absolute;left:17px;top:34px;bottom:2px;width:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--sig) 34%,transparent),transparent)}
.steps .st:last-child{padding-bottom:0}
.steps .st:last-child::after{display:none}
.steps .st h3{margin-bottom:var(--s1)}
.steps .st p{font-size:var(--t-small);margin:0;color:var(--muted)}

/* FAQ */
.faq{margin-top:var(--s6);display:flex;flex-direction:column}
.faq .q{font-family:var(--display);font-weight:600;color:var(--creme);margin-bottom:var(--s2);font-size:var(--t-body);letter-spacing:-.015em;padding-top:var(--s5);border-top:1px solid var(--line)}
.faq .q:first-child{border-top:none;padding-top:0}
.faq .a{margin-bottom:var(--s5);color:var(--muted);font-size:var(--t-body)}

/* Bande CTA */
.ctaband{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--n4),var(--n1) 70%);border:1px solid color-mix(in srgb,var(--sig) 26%,transparent);border-radius:var(--r);padding:clamp(36px,5vw,52px) 32px;text-align:center;margin:var(--s3) 0;box-shadow:var(--lift)}
.ctaband::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 130px at 50% 0%,color-mix(in srgb,var(--sig) 12%,transparent),transparent 75%)}
.ctaband::after{content:"";position:absolute;right:-36px;bottom:-64px;width:290px;height:290px;opacity:.05;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M16 74 L50 36 L84 74' stroke='%23F4F0E8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M34 74 L50 55 L66 74' stroke='%23F4F0E8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='25' r='2.4' fill='%23F4F0E8'/%3E%3C/svg%3E") center/contain no-repeat}
.ctaband h2{margin-bottom:var(--s2);position:relative;z-index:1}
.ctaband p{margin-bottom:var(--s6);position:relative;z-index:1;color:var(--muted)}
.ctaband .btn-p{position:relative;z-index:1}

/* Hub services : liste des expertises */
.svc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(12px,1.4vw,16px);margin-top:var(--s2)}
.svc-list a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--lift);padding:var(--s7) var(--s6);text-decoration:none;transition:background .25s ease,transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s ease,border-color .25s ease}
@media (hover:hover) and (pointer:fine){.svc-list a:hover{transform:translateY(-4px);background:var(--surface-hi);border-color:color-mix(in srgb,var(--sig) 40%,transparent);box-shadow:var(--lift-hover)}}
.svc-list h3{font-family:var(--display);font-size:var(--t-title);font-weight:600;color:var(--text);margin-bottom:var(--s2);letter-spacing:-.015em}
.svc-list p{font-size:var(--t-small);color:var(--muted);margin:0}
.svc-list .more{display:inline-block;margin-top:var(--s3);font-size:var(--t-small);color:var(--sig2);font-weight:600}

/* Communes desservies (pages zones) */
.communes{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.communes span{font-size:var(--t-small);color:var(--muted);background:var(--surface);border:1px solid var(--line);padding:var(--s2) var(--s4);border-radius:980px}

/* Maillage zones / chips */
.zones-other{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.zones-other a{font-size:var(--t-small);color:var(--text);text-decoration:none;background:var(--surface);border:1px solid var(--line);padding:var(--s2) var(--s5);border-radius:980px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease,color .22s ease,opacity .22s ease;font-weight:500}
@media (hover:hover) and (pointer:fine){.zones-other a:hover{border-color:color-mix(in srgb,var(--sig) 44%,transparent);color:var(--sig2);transform:translateY(-2px)}}
.zgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4);margin-top:var(--s3)}
.zcard{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s6);text-decoration:none;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease,color .22s ease,opacity .22s ease}
@media (hover:hover) and (pointer:fine){.zcard:hover{border-color:color-mix(in srgb,var(--sig) 44%,transparent);transform:translateY(-3px);background:var(--surface-hi);box-shadow:var(--lift-hover)}}
.zn{font-family:var(--display);font-size:var(--t-lead);font-weight:600;color:var(--text);letter-spacing:-.015em}
.zr{font-size:var(--t-small);color:var(--muted)}

/* ── 22 · RÉVEILS AU SCROLL ─────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);filter:blur(6px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1);will-change:opacity,transform,filter}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal-d1{transition-delay:.09s}
.reveal-d2{transition-delay:.18s}
.reveal-d3{transition-delay:.27s}
.reveal-d4{transition-delay:.36s}
.reveal-scale{opacity:0;transform:scale(.965);filter:blur(8px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1);will-change:opacity,transform,filter}
.reveal-scale.in{opacity:1;transform:none;filter:blur(0)}
.reveal-left{opacity:0;transform:translateX(-22px);filter:blur(5px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .85s cubic-bezier(.16,1,.3,1)}
.reveal-left.in{opacity:1;transform:none;filter:blur(0)}
.mtn .reveal,.mtn .reveal-scale,.mtn .reveal-left{transition:none}

/* ── 23 · RESPONSIVE ────────────────────────────────────────────────── */
@media(max-width:960px){
  .nav-links{gap:var(--s5)}
  .nav-links a{font-size:var(--t-small)}
  .home section{padding:80px var(--s8)}
}
/* la nav exige 1037px pour tenir sur une ligne : en dessous, le menu passe au burger */
@media(max-width:1040px){.nav-links{display:none}.nav-burger{display:flex}}
body>nav>a:first-child,body>nav>svg,body>nav>.nav-logo{flex-shrink:0}
.nav-links a,.nav-tel,.nav-cta{white-space:nowrap}
@media(max-width:768px){
  body>nav{padding:var(--s4) var(--s5)}
  .nav-links,body>nav>.nav-cta{display:none}
  .nav-r .nav-cta{display:inline-block}
  .nav-burger{display:flex}
    .home section{padding:60px var(--s5)}
  .sh{letter-spacing:-.015em}
  .sp{font-size:var(--t-body)}
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc{padding:var(--s6) var(--s5)}
  .svc-icon svg{width:24px;height:24px}
  .svc-icon{margin-bottom:var(--s3)}
  .svc-h{font-size:var(--t-body)}
  .svc-p{font-size:var(--t-body)}
  .clients-grid{grid-template-columns:1fr 1fr}
  #cvc3d{height:360px}
    .specs-row{grid-template-columns:1fr 1fr}
  .spec{padding:var(--s4) var(--s4)}
  .spec-n{font-size:var(--t-title)}
  .stats{grid-template-columns:1fr 1fr}
  
  .ctrl-row{gap:var(--s2)}
  .cb{font-size:var(--t-caption);padding:var(--s3) var(--s4);min-height:42px;display:inline-flex;align-items:center;justify-content:center}
  .ct-grid{grid-template-columns:1fr}
  .ct-form{padding:var(--s8) var(--s6)}
  .why-grid{grid-template-columns:1fr}
  .brands-grid{grid-template-columns:1fr 1fr}
  .zones-grid{grid-template-columns:1fr 1fr}
  .brand-logo-text{font-size:var(--t-body)}
    .sub .hd{padding-top:120px}
  .ft-in{padding:var(--s10) var(--s6) var(--s8)}
  .ft-low{padding:var(--s5) var(--s6) var(--s6);flex-direction:column;align-items:flex-start}
}
@media(max-width:900px){.conv-grid{grid-template-columns:1fr 1fr;gap:var(--s5)}.conv-grid::before{display:none}.conv-pt{margin-bottom:var(--s5)}}
@media(max-width:560px){.conv-grid{grid-template-columns:1fr}.conv-q br{display:none}}
@media(max-width:400px){
  .svc-grid,.clients-grid,.brands-grid,.zones-grid{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:center}
  .hero-cta .btn-p,.hero-cta .btn-s{width:100%;max-width:280px}
}

/* ── 24 · MOUVEMENT RÉDUIT ──────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain{display:none}
  .btn-p::after{display:none}
  .reveal,.reveal-scale,.reveal-left{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .hero-summit *,.hero-sub2,.hero-cta,.scroll-hint,  .mobile-menu,.nav-burger span{transition:none}
  *{animation-duration:.001s!important;animation-iteration-count:1!important}
}

/* ── HERO 3D « Cap Mont-Blanc » (accueil) ── */
.hero3{position:relative;height:100dvh;min-height:640px;overflow:hidden;color:var(--creme);
  background:linear-gradient(180deg,#061426 0%,#16293E 70%,#33404E 100%)}
/* LE CADRE VISIBLE DU HERO commence SOUS la barre de navigation, qui est
   fixe et haute de 67 a 76 px selon la largeur. Sans cela le moteur compose
   pour 667 px alors que 67 sont masques : mesure faite sur la vraie page, le
   POINT ORANGE DU LOGO tombait a y 53 pour une barre qui descend a 67. Il
   etait voile a 22 % sous un flou de 18 px, c'est-a-dire perdu — alors que
   trois jures sur quatre l'ont designe comme la signature de la marque.
   --nav-h est mesuree en javascript au demarrage (voir hero-som.js) : la
   barre n'a pas de hauteur fixe, elle depend de son contenu.
   LE TEXTE SUIT LE MEME CADRE, et ce n'est pas cosmetique : le moteur
   protege une zone donnee en FRACTIONS DE SON CANEVAS (x .30-.70, y
   .15-.72). Si le canevas descendait seul, le titre remonterait a 0,053 du
   canevas, c'est-a-dire AU-DESSUS de la zone protegee et en plein sur le
   point orange. Les deux doivent bouger ensemble pour rester en registre. */
/* ATTENTION : height:auto est un PIEGE sur un canevas. Un canevas est un
   element REMPLACE : il possede un rapport intrinseque, donne par ses
   attributs width et height. Avec height:auto le navigateur calcule la
   hauteur depuis ce rapport et IGNORE bottom — la contrainte est levee.
   Et comme le moteur dimensionne ces attributs d'apres la boite CSS, qui
   depend elle-meme des attributs, on obtient une boucle : mesure faite le
   26/08 sur telephone, canevas 486x243 dans un hero de 667. La hauteur doit
   donc etre CALCULEE explicitement. */
.hero3 canvas{position:absolute;left:0;right:0;top:var(--nav-h,68px);
  width:100%;height:calc(100% - var(--nav-h,68px));display:block}
/* PAS DE FOND SUR LE CANEVAS. Il en portait un (--n0, soit rgb(2,7,14)),
   ce qui rendait FAUX le repli annonce dans hero-som.js : si le moteur
   tombait, on ne voyait pas le degrade de .hero3 mais un aplat noir. Le
   moteur dessine en opaque (contexte alpha:false), ce fond n'etait donc
   jamais visible en fonctionnement normal — il ne servait qu'a mentir sur
   le cas d'echec. Le repli est desormais reellement le degrade de .hero3. */
.hero3::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:26vh;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(242,239,232,0) 0%,rgba(242,239,232,.05) 40%,rgba(242,239,232,.28) 66%,rgba(242,239,232,.72) 86%,#F2EFE8 100%)}
.h3-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(62% 40% at 50% 54%,rgba(3,9,17,.12),rgba(3,9,17,0) 78%),radial-gradient(126% 96% at 50% 110%,rgba(2,7,14,.66),rgba(2,7,14,0) 58%)}
.h3-core{position:absolute;left:0;right:0;top:var(--nav-h,68px);bottom:0;z-index:3;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--s6) 6vh}
.h3-word{font-family:var(--display);font-weight:700;font-size:clamp(42px,7vw,92px);line-height:.98;letter-spacing:-.03em;color:var(--creme)}
.h3-word .v{color:var(--bleu2)}
.h3-tag{max-width:540px;margin:var(--s6) auto 0;text-wrap:balance;font-size:var(--t-lead-fluid);line-height:var(--lh-body);color:rgba(244,240,232,.82)}
.hero3 .hero-cta{margin-top:var(--s9)}
/* Entree etagee : une seule courbe, 90 ms d'ecart, 600 ms chacun. */
.h3-word,.h3-tag,.hero3 .hero-cta,.hero3 .cta-note{opacity:0;animation:heroRise .6s cubic-bezier(.16,1,.3,1) both}
.h3-word{animation-delay:.10s}
.h3-tag{animation-delay:.19s}
.hero3 .hero-cta{animation-delay:.28s}
.hero3 .cta-note{animation-delay:.37s}
@keyframes heroRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .h3-word,.h3-tag,.hero3 .hero-cta,.hero3 .cta-note{animation:none;opacity:1}}

section[id]{scroll-margin-top:72px}

/* Lien retour des pages satellites (devis, legales) */
.nav-back{display:flex;align-items:center;gap:var(--s2);color:rgba(244,240,232,0.55);font-size:var(--t-caption);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:color .2s}
.nav-back:hover{color:var(--bleu2)}

/* ── Ascenseur aux couleurs du site ── */
html{scrollbar-color:var(--n3) var(--n0)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--n0)}
::-webkit-scrollbar-thumb{background:var(--n3);border-radius:6px;border:3px solid var(--n0)}
::-webkit-scrollbar-thumb:hover{background:var(--n4)}

/* ── Bande de faits (pages services) ── */
.sub section.facts{padding:clamp(26px,4vh,42px) 0 0;border-top:0}
.svc-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,18px)}
.fact{background:linear-gradient(180deg,var(--n2),var(--ink));border:1px solid var(--line);border-radius:14px;padding:var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.fact svg{width:42px;height:42px;stroke:var(--sig);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.fact b{font-family:var(--display);font-weight:600;font-size:var(--t-body);letter-spacing:-.015em;color:var(--creme)}
.fact span{font-size:var(--t-small);line-height:var(--lh-body);color:var(--muted)}
@media (max-width:760px){.svc-facts{grid-template-columns:1fr}}

/* ── Rythme editorial : sections claires « papier creme » (lecture) entre les blocs sombres (drame) ── */
.light{
  --ink:#F2EFE8; --ink2:#F6F3EC; --ink3:#FAF8F3; --n0:#ECE7DB; --n1:#F2EFE8; --n2:#FAF8F3; --n3:#E7E1D3; --n4:#DBD3C1;
  --creme:#101D28; --text:#101D28; --white:#101D28;
  --muted:#46586A; --muted-hi:#3A4C5C;
  --line:rgba(16,29,40,.12);
  --lift:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(16,29,40,.05), 0 14px 30px -18px rgba(16,29,40,.16);
  --lift-hover:0 4px 10px rgba(16,29,40,.08), 0 24px 44px -20px rgba(16,29,40,.24);
  --surface:linear-gradient(168deg,rgba(255,255,255,.92),rgba(250,247,240,.55));
  --surface-hi:linear-gradient(168deg,#FFFFFF,rgba(255,253,248,.92));
  --bleu:#27689A; --bleu2:#3F7DB5; --teal:#1E6F74; --teal2:#2E8A90;
  --or:#8A652A; --or2:#A3782F; --cuivre:#A04926; --cuivre2:#BC5430;
  --warm:#A04926; --cold:#27689A; --blue:#27689A;
  --grey:#4E6072; --grey2:#54687A; --faint:#B9AF9C;
  --err:#B23A2E; --ok:#2F7A4D; --warn:#9A5F2B; --warn2:#7E5B24; --or-deep:#6E4F1E;
  border-top:1px solid rgba(16,29,40,.08);
}
.home section.light,.sub section.light{background:var(--n1);color:var(--text);border-top:1px solid rgba(16,29,40,.08)}
/* ...SAUF sous le hero. Ce filet a un sens ENTRE deux sections creme : il
   les separe. Pose juste sous le hero, il annule tout le travail du fondu —
   on passe six tours a faire fondre la brume dans le papier et on tire un
   trait a l'endroit exact ou le fondu doit finir. Mesure du jury : une ligne
   d'un pixel a rgb(224,222,216) sur toute la largeur, exactement a la
   jonction, a toutes les positions de defilement. Elle dit « ici l'image
   s'arrete ». */
.hero3 + section.light{border-top:0}
/* signatures foncees lisibles sur creme (derivees AA de tes 4 couleurs) */
#services.light{--sig:#27689A;--sig2:#3F7DB5}
#zones.light{--sig:#1E6F74;--sig2:#2E8A90}
#about.light,#marques.light{--sig:#7E5B24;--sig2:#8A652A}
#clients.light{--sig:#1E6F74;--sig2:#2E8A90}
#conviction.light{--sig:#7E5B24;--sig2:#8A652A}
#contact.light{--sig:#A04926;--sig2:#BC5430}
.light .brand-badge{color:var(--or-deep);background:rgba(138,101,42,.09)}
.light .zones-note-t{color:var(--sig)}
.light .ey::before{box-shadow:none}
section.light p a,section.light li a,.sub main section.light p a,.sub main section.light li a{color:var(--sig)}
/* boutons secondaires sur clair */
.light .btn-s{background:rgba(39,104,154,.07);border-color:rgba(16,29,40,.28);color:var(--text)}
.light .btn-s:hover{border-color:rgba(16,29,40,.45)}
/* liens et petites finitions */
.light a{color:inherit}
.light .zones-note-p a,.light .svc-p a{color:var(--sig)}

/* ── Declaration — la these, en tres grand ── */
.home section.statement{--sig:#A04926;--sig2:#BC5430;padding:clamp(110px,16vh,190px) 40px;text-align:left}
.statement .inner{max-width:var(--container);margin:0 auto}
.st-line{font-family:var(--display);font-weight:600;font-size:var(--t-display-xl);line-height:var(--lh-tight);letter-spacing:-.03em;color:var(--text);margin:0;text-wrap:balance}
.st-line .acc{color:var(--sig)}
.st-sub{margin-top:var(--s7);font-size:var(--t-lead-fluid);line-height:var(--lh-body);color:var(--muted);max-width:600px}
@media (max-width:760px){.home section.statement{padding-left:var(--s6);padding-right:var(--s6)}}

/* note de reassurance sous les CTA (sortie du bouton) */
.cta-note{margin-top:var(--s4);font-size:var(--t-caption);letter-spacing:.01em;color:var(--muted)}

/* ── Impression : encre sur papier, chrome masque ── */
@media print{
  :root{--ink:#fff;--n0:#fff;--n1:#fff;--n2:#fff;--n3:#eee;--n4:#ddd;--creme:#111;--text:#111;--muted:#333;--grey:#444;
    --line:#ccc;--surface:#fff;--surface-hi:#fff;--sig:#111;--sig2:#333}
  body{background:#fff !important;color:#111 !important}
  nav,.grain,.scroll-prog,.mobile-menu,.cookie-banner,.hero3,.ft-cols,.cta-row,.btn-p,.btn-s,.call-bar{display:none !important}
  a{color:#111 !important;text-decoration:underline}
  .sub .hd{padding:var(--s5) 0 !important;background:#fff !important}
  .sub .hd::before,.sub .hd::after{display:none !important}
}

/* ── Penetration du systeme : bandes claires + jalons sur les pages interieures ── */
.sub section.light{--sig:#27689A;--sig2:#3F7DB5}
.sub main{counter-reset:subsec}
.sub section.light>.wrap>h2:first-child::before{counter-increment:subsec;content:counter(subsec,decimal-leading-zero);display:block;width:auto;height:auto;background:none;border-radius:0;position:static;font-family:var(--display);font-size:var(--t-caption);font-weight:600;letter-spacing:.22em;color:var(--sig);margin-bottom:var(--s3)}

/* ── Variante « creme majoritaire » : peaux claires de la nav et des en-tetes ── */
nav.light{background:rgba(242,239,232,.82);border-bottom:1px solid rgba(16,29,40,.08)}
nav.light.nav-scrolled{background:rgba(242,239,232,.94);box-shadow:0 10px 34px rgba(16,29,40,.12)}
nav.light::after{background:linear-gradient(90deg,transparent 4%,rgba(39,104,154,.35),transparent 96%)}
nav.light .nav-links a{color:rgba(16,29,40,.72)}
nav.light .nav-links a:hover{color:var(--text)}
nav.light .nav-burger span{background:var(--text)}
nav.light path[stroke="#F4F0E8"]{stroke:#101D28}
nav.light .wm path[fill="#F4F0E8"]{fill:#101D28}
nav.light path[stroke="#5B9BD5"]{stroke:#27689A}
nav.light .wm path[fill="#5B9BD5"]{fill:#27689A}
.sub .hd.light{background:linear-gradient(180deg,var(--n2) 0%,var(--n1) 100%);color:var(--text)}
.sub .hd.light::before{opacity:.8}
.ft .wm path{/* le footer reste nocturne : logo intact */}
/* creme majoritaire : le header clair herite des tokens .light (crete gravee encre via color-mix) */
.sub .hd.light .bc a{color:var(--grey)}
.sub .hd.light .lead{color:var(--muted)}
.facts.light{border-top:0}

/* ── Accueil integral creme : l'explorateur 3D = ecran nocturne encadre dans le papier ── */
.night,#tech.light .vrv-outer{
  --ink:#050F1A; --n0:#02070E; --n1:#050F1A; --n2:#081726; --n3:#0C2032; --n4:#122B41;
  --creme:#F4F0E8; --text:#F4F0E8; --white:#F4F0E8;
  --muted:#A9B8C5; --muted-hi:#C6D3DF; --grey:#8CA1B2; --grey2:#9CADBC; --faint:#33444F;
  --line:rgba(244,240,232,.07);
  --lift:inset 0 1px 0 rgba(244,240,232,.06), inset 0 -1px 0 rgba(0,0,0,.28), 0 2px 4px rgba(2,7,14,.4), 0 18px 38px -24px rgba(2,7,14,.55);
  --lift-hover:inset 0 1px 0 rgba(244,240,232,.09), 0 2px 4px rgba(2,7,14,.5), 0 20px 34px -12px rgba(2,7,14,.5), 0 46px 88px -38px rgba(2,7,14,.62);
  --surface:linear-gradient(168deg,rgba(18,43,65,.5),rgba(8,23,38,.32));
  --surface-hi:linear-gradient(168deg,rgba(24,53,79,.62),rgba(10,27,44,.4));
  --bleu:#5B9BD5; --bleu2:#8FC3E9; --teal:#2E9BA0; --teal2:#5FC0C5;
  --or:#C0964F; --or2:#D9B87A; --cuivre:#D9663F; --cuivre2:#E68A63;
  --blue:#5B9BD5; --cold:#5B9BD5; --warm:#D9663F;
  --err:#E07070; --ok:#3FB48C; --warn:#D4936A; --warn2:#E4C090;
}
#tech.light .vrv-outer{border:1px solid rgba(16,29,40,.16);
  box-shadow:0 1px 2px rgba(16,29,40,.08),0 14px 30px -14px rgba(16,29,40,.24),0 44px 110px -30px rgba(16,29,40,.42)}
/* le telephone reste present mais discret sur nav claire (doctrine formulaire d'abord) */
nav.light .nav-tel{color:#46586A}
nav.light .nav-tel:hover{color:#101D28}
/* la fonte de couleur du logo pendant la descente */
body>nav svg path{transition:stroke .5s ease,fill .5s ease}
/* numeros fantomes perceptibles sur papier */
.light .svc-num{color:color-mix(in srgb,var(--sig) 30%,transparent)}
.light .svc-grid .svc:nth-child(1) .svc-num{color:color-mix(in srgb,var(--sig) 30%,transparent)}
.light .svc-grid .svc:nth-child(3) .svc-num{color:color-mix(in srgb,var(--sig) 30%,transparent)}
.light .svc-grid .svc:nth-child(4) .svc-num{color:color-mix(in srgb,var(--sig) 30%,transparent)}
/* ── Chevrons « ligne de crete » en filigrane sur l'accueil ── */
.home .statement{position:relative;overflow:hidden}
.home .statement::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:color-mix(in srgb,var(--sig) 72%,var(--creme));opacity:.12;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' fill='none'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='.62' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.7'/%3E%3C/linearGradient%3E%3Cpath d='M-30 260 150 170 300 232 470 120 640 226 810 84 980 214 1150 150 1300 216 1470 130' stroke='url(%23g)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M755 173 810 129 865 173' stroke='%23fff' stroke-width='2' stroke-opacity='.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-30 300 150 214 300 272 470 168 640 268 810 132 980 258 1150 196 1300 258 1470 176' stroke='url(%23g)' stroke-width='1.5' stroke-opacity='.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='810' cy='46' r='5.5' fill='%23fff'/%3E%3C/svg%3E") right -40px top 26px/min(76%,1100px) auto no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' fill='none'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='.62' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.7'/%3E%3C/linearGradient%3E%3Cpath d='M-30 260 150 170 300 232 470 120 640 226 810 84 980 214 1150 150 1300 216 1470 130' stroke='url(%23g)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M755 173 810 129 865 173' stroke='%23fff' stroke-width='2' stroke-opacity='.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-30 300 150 214 300 272 470 168 640 268 810 132 980 258 1150 196 1300 258 1470 176' stroke='url(%23g)' stroke-width='1.5' stroke-opacity='.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='810' cy='46' r='5.5' fill='%23fff'/%3E%3C/svg%3E") right -40px top 26px/min(76%,1100px) auto no-repeat}
.home #contact{position:relative;overflow:hidden}
.home #contact::before{content:"";position:absolute;inset:0;pointer-events:none;transform:scaleX(-1);
  background:color-mix(in srgb,var(--sig) 72%,var(--creme));opacity:.1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' fill='none'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='.62' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.7'/%3E%3C/linearGradient%3E%3Cpath d='M-30 260 150 170 300 232 470 120 640 226 810 84 980 214 1150 150 1300 216 1470 130' stroke='url(%23g)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M755 173 810 129 865 173' stroke='%23fff' stroke-width='2' stroke-opacity='.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-30 300 150 214 300 272 470 168 640 268 810 132 980 258 1150 196 1300 258 1470 176' stroke='url(%23g)' stroke-width='1.5' stroke-opacity='.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='810' cy='46' r='5.5' fill='%23fff'/%3E%3C/svg%3E") right -40px top 26px/min(76%,1100px) auto no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' fill='none'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='.62' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.7'/%3E%3C/linearGradient%3E%3Cpath d='M-30 260 150 170 300 232 470 120 640 226 810 84 980 214 1150 150 1300 216 1470 130' stroke='url(%23g)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M755 173 810 129 865 173' stroke='%23fff' stroke-width='2' stroke-opacity='.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-30 300 150 214 300 272 470 168 640 268 810 132 980 258 1150 196 1300 258 1470 176' stroke='url(%23g)' stroke-width='1.5' stroke-opacity='.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='810' cy='46' r='5.5' fill='%23fff'/%3E%3C/svg%3E") right -40px top 26px/min(76%,1100px) auto no-repeat}

/* les commandes de l'ecran nocturne restent nocturnes (solides sur papier) */
#tech.light .cb{background:#0C2032;color:#8CA1B2;border-color:rgba(143,195,233,.22)}
#tech.light .cb:hover{border-color:#5B9BD5;color:#8FC3E9}
#tech.light .cb.on{background:#122B41;color:#8FC3E9;border-color:#5B9BD5}
#tech.light .cb-primary{background:var(--cta);color:#fff;border-color:var(--cta)}
#tech.light .cb-primary.on{background:var(--cta2);color:#fff;border-color:var(--cta2)}
/* le header clair resout sa signature en derivee AA (sinon :root nuit) */
.sub .hd.light{--sig:#27689A;--sig2:#3F7DB5}
.home section.light .ey::after{color:color-mix(in srgb,var(--text) 45%,transparent)}
#pourquoi.light::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M16 74 L50 36 L84 74' stroke='%23101D28' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M34 74 L50 55 L66 74' stroke='%23101D28' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='25' r='2.4' fill='%23101D28'/%3E%3C/svg%3E")}
.light .ctaband::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M16 74 L50 36 L84 74' stroke='%23101D28' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M34 74 L50 55 L66 74' stroke='%23101D28' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='50' cy='25' r='2.4' fill='%23101D28'/%3E%3C/svg%3E")}
/* pages creme : widgets UA et ascenseur assortis au papier */
html:has(body.home),html:has(body.sub),html:has(body.light){color-scheme:light;scrollbar-color:#C9C2B4 #F2EFE8}
html:has(body.home) ::-webkit-scrollbar-track,html:has(body.sub) ::-webkit-scrollbar-track,html:has(body.light) ::-webkit-scrollbar-track{background:#F2EFE8}
html:has(body.home) ::-webkit-scrollbar-thumb,html:has(body.sub) ::-webkit-scrollbar-thumb,html:has(body.light) ::-webkit-scrollbar-thumb{background:#C9C2B4;border-color:#F2EFE8}
html:has(body.home) ::-webkit-scrollbar-thumb:hover,html:has(body.sub) ::-webkit-scrollbar-thumb:hover,html:has(body.light) ::-webkit-scrollbar-thumb:hover{background:#B3A98F}
nav.light .nav-back{color:rgba(16,29,40,.6)}
nav.light .nav-back:hover{color:#27689A}
nav.light .nav-links a::after{background:#27689A}
/* footer nocturne sur page papier : il porte son propre fond */
.ft.night{background:var(--n1)}
nav.light rect[fill="#5B9BD5"]{fill:#27689A}
/* Ere creme : le fond de page suit ce qu'on voit en haut (en-tete clair) — l'accueil
   garde sa nuit sous le hero, le devis l'obtient par le remap .light. */
body.sub{background:var(--paper)}
/* Les boutons d'action ne suivent JAMAIS le theme : texte blanc sur terracotta
   (4,72:1 = AA). Sans cela, .light a{color:inherit} leur donnait l'encre des
   pages claires -> texte sombre sur orange, different de l'accueil. */
.btn-p,.nav-cta,.mobile-menu-cta,
.light .btn-p,.light .nav-cta,.light .mobile-menu-cta,
nav.light .nav-cta,.hd.light .btn-p{color:#FFFFFF}
/* Commande de lecture video (WCAG 2.2.2 : toute animation de plus de 5 s doit pouvoir etre arretee) */
.vid-toggle{position:absolute;right:var(--s4);bottom:var(--s4);z-index:2;
  padding:var(--s2) var(--s4);border:1px solid rgba(244,240,232,.28);border-radius:99px;
  background:rgba(5,15,26,.72);backdrop-filter:blur(8px);color:#F4F0E8;
  font-family:var(--font);font-size:var(--t-caption);font-weight:600;letter-spacing:.02em;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease}
.vid-toggle:hover{background:rgba(5,15,26,.92);border-color:rgba(244,240,232,.5)}
.vid-toggle:focus-visible{outline:2px solid var(--bleu2);outline-offset:3px}
/* Fil d'Ariane : liste ordonnee (structure lue par les lecteurs d'ecran), rendu inchange */
.bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.bc li+li::before{content:"›";margin:0 .45em;color:var(--faint)}
.bc li[aria-current]{color:var(--muted)}
/* Hero en retenue : une seule action visuelle. Le second choix devient un lien
   sobre, present pour qui le cherche, muet pour qui ne le cherche pas. */
.hero-lien{display:inline-block;margin-left:var(--s3);color:rgba(244,240,232,.72);
  font-size:var(--t-small);font-weight:500;letter-spacing:.01em;text-decoration:none;
  border-bottom:1px solid rgba(244,240,232,.28);padding-bottom:2px;
  transition:color .25s ease,border-color .25s ease}
@media (hover:hover){.hero-lien:hover{color:var(--creme);border-color:var(--creme)}}
.hero-lien:focus-visible{outline:2px solid var(--bleu2);outline-offset:4px}
@media(max-width:560px){.hero-lien{display:block;margin:var(--s5) 0 0}}


/* ═══ ACCUEIL-OUTIL + PAGE /technologie/ (2026-09-01) ═══ */
/* Bande d'actions sous le hero — l'accueil est un outil avant d'etre une vitrine */
.qa{padding:clamp(26px,4vw,46px) 0}
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.qa-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:var(--s5);background:#FCFAF5;border:1px solid rgba(16,29,40,.14);border-radius:14px;box-shadow:0 10px 28px rgba(16,29,40,.07);text-decoration:none;transition:transform .2s,border-color .2s,background-color .2s}
.qa-card:hover{transform:translateY(-2px);border-color:rgba(39,104,154,.4);background:#FFFFFF}
.qa-ic{color:#27689A}
.qa-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qa-t{font-family:var(--display);font-weight:700;color:#101D28;font-size:var(--t-body)}
.qa-d{font-size:var(--t-small);color:#4E6072;line-height:1.5}
.qa-go{position:absolute;top:14px;right:16px;color:#27689A;font-weight:700;transition:transform .2s}
.qa-card:hover .qa-go{transform:translateX(3px)}
.qa-main{background:#101D28;border-color:#101D28}
.qa-main .qa-t{color:#F4F0E8}
.qa-main .qa-d{color:#C6D3DF}
.qa-main .qa-ic,.qa-main .qa-go{color:#E68A63}
.qa-main:hover{background:#0C2032;border-color:#0C2032}
@media(max-width:900px){.qa-grid{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.qa-grid{gap:var(--s2)}.qa-card{padding:var(--s4)}}

/* Carte-teaser vers /technologie/ (remplace l'explorateur embarque) */
.tz-card{position:relative;display:block;margin-top:var(--s6);border-radius:var(--r);overflow:hidden;border:1px solid rgba(16,29,40,.16);box-shadow:0 18px 44px rgba(16,29,40,.14);text-decoration:none}
.tz-card img{display:block;width:100%;height:auto}
.tz-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,15,0) 55%,rgba(4,8,15,.5))}
.tz-chip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;background:rgba(12,32,50,.86);color:#F4F0E8;border:1px solid rgba(143,195,233,.45);backdrop-filter:blur(6px);padding:12px 22px;border-radius:999px;font-weight:700;letter-spacing:.04em;white-space:nowrap;transition:transform .2s,background-color .2s}
.tz-card:hover .tz-chip{transform:translate(-50%,-50%) scale(1.05);background:rgba(12,32,50,.97)}
.tz-note{position:absolute;left:18px;bottom:13px;z-index:2;color:#C6D3DF;font-size:var(--t-caption);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:600px){.tz-note{display:none}}

/* Affiche cliquable de la video (l'accueil ne charge plus 2,27 Mo) */
.about-video-lien img{display:block;width:100%;height:100%;object-fit:cover}

/* Page /technologie/ : scene plein ecran + barre de commandes */
.xp3d{display:flex;flex-direction:column;height:calc(100dvh - var(--nav-h,68px));min-height:520px;margin-top:var(--nav-h,68px);background:#0F1B2D}
.xp-stage{flex:1;min-height:0;position:relative}
.xp3d .vrv-outer{position:absolute;inset:0;margin-top:0;border:0;border-radius:0;box-shadow:none;background:#0F1B2D url(/media/teaser-vrv-3d.webp) center/cover no-repeat}
.xp3d #cvc3d{height:100%}
/* Barre de commandes EN SURIMPRESSION : la scene occupe tout l'ecran, bord a bord.
   Pas de backdrop-filter ici — il re-flouterait le canvas anime a chaque frame. */
.xp-bar{position:absolute;left:0;right:0;bottom:0;z-index:7;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:34px clamp(14px,3vw,28px) 13px;background:linear-gradient(180deg,rgba(4,8,15,0),rgba(4,8,15,.62) 42%,rgba(4,8,15,.8));pointer-events:none}
.xp-bar .ctrl-row,.xp-bar .xp-cta-mini{pointer-events:auto}
.xp-bar .ctrl-row{margin-top:0}
.xp-cta-mini{margin-left:auto;background:#BC5430;color:#F4F0E8;padding:9px 18px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:background-color .2s,transform .2s}
.xp-cta-mini:hover{background:#A04926;transform:translateY(-1px)}
@media(max-width:760px){.xp-cta-mini{display:none}}
/* la bulle d'info remonte en haut a droite pour ne pas croiser la barre */
.xp3d .vrv-info{bottom:auto;top:16px;right:16px;left:auto;max-width:280px}
.xp-cta{text-align:center}
.xp-cta .sp{margin-left:auto;margin-right:auto}
.xp-video{margin-top:var(--s6)}
@media(max-width:600px){.xp3d{min-height:430px}}

/* Accueil : rendu paresseux des sections lourdes sous le pli (le navigateur ne
   met en page marques et zones qu'a l'approche du scroll) */
#marques,#zones{content-visibility:auto;contain-intrinsic-size:auto 900px}