/* ============================================================
   POLICES : hebergees ici (aucun aller-retour tiers, aucun changement de forme en cours d'animation)
   ============================================================ */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/jakarta.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-300.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/cormorant-300i.woff2) format('woff2')}

/* ===== Navigation fixe ===== */
header.nav-fixe{position:fixed!important;top:0;left:0;right:0;z-index:100!important;transition:transform .38s cubic-bezier(.2,.8,.3,1),background .3s ease,border-color .3s ease;background:transparent;border-bottom:1px solid transparent}
header.nav-fixe.nav-fond{background:rgba(5,5,6,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
/* ===== Menu Services deroulant ===== */
.dd{position:relative}
.dd::after{content:'';position:absolute;top:100%;left:-20px;right:-20px;height:26px}
.dd-panel{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%) translateY(10px);min-width:320px;background:rgba(13,13,16,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:10px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.3,1);box-shadow:0 28px 70px rgba(0,0,0,.6)}
.dd:hover .dd-panel,.dd.ouvert .dd-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dd-panel a{display:flex;flex-direction:column;gap:3px;padding:12px 15px;border-radius:10px;color:#fff!important;font-size:14.5px;font-weight:600;transition:background .15s}
.dd-panel a:hover{background:rgba(255,255,255,.06)}
.dd-panel a em{font-style:normal;font-size:12px;font-weight:400;color:#8a8e9c}
.dd-panel a.tous{flex-direction:row;justify-content:space-between;color:#aeb4c6!important;font-weight:500;border-top:1px solid rgba(255,255,255,.07);border-radius:0 0 10px 10px;margin-top:6px;padding-top:13px}
/* ===== Revelations ===== */
[data-rv]:not(.rv-in){opacity:0;transform:translateY(16px)}
.rv-in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.76,0,.24,1),transform .9s cubic-bezier(.76,0,.24,1)}
/* ===== Canvas d'ambiance ===== */
.aurore{position:absolute;inset:0;pointer-events:none;z-index:0}
/* ===== Defilement des logos ===== */
.marquee{overflow:hidden;margin-top:26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);max-width:820px}

@keyframes mq{to{transform:translateX(-50%)}}
/* ===== Divers ===== */
.scrolly{cursor:pointer}
.ok-envoi{text-align:center;padding:40px 10px}

@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none}}

/* ===================== SECTIONS CLAIRES ===================== */
section.sec-claire{background:#F3F4F6!important;position:relative;transition:background .4s}
.sec-claire [style*="color:#fff"]{color:#0B0C0F!important}
.sec-claire [style*="color:#a6aab9"]{color:#585E6A!important}
.sec-claire [style*="color:#9a9eae"],.sec-claire [style*="color:#c9ccd6"]{color:#5F6572!important}
.sec-claire [style*="color:#7d8194"],.sec-claire [style*="color:#8b8b93"],.sec-claire [style*="color:#77777f"],.sec-claire [style*="color:#6f6f78"],.sec-claire [style*="color:#6f7383"]{color:#787E8C!important}
.sec-claire [style*="color:#8b95b8"]{color:#5B6BAE!important}
.sec-claire .card{background:#FFFFFF!important;border-color:rgba(12,14,18,.09)!important;box-shadow:0 2px 10px rgba(12,14,18,.04)}
.sec-claire .card::before{background:linear-gradient(90deg,transparent,rgba(90,105,160,.22),transparent)}
.sec-claire .card:hover{border-color:rgba(12,14,18,.18)!important;box-shadow:0 18px 40px rgba(12,14,18,.10)}
.sec-claire [style*="border:1px solid rgba(255,255,255"]{border-color:rgba(12,14,18,.13)!important}
.sec-claire [style*="border-top:1px solid rgba(255,255,255"]{border-top-color:rgba(12,14,18,.10)!important}
.sec-claire [style*="border-bottom:1px solid rgba(255,255,255"]{border-bottom-color:rgba(12,14,18,.10)!important}

.sec-claire svg[stroke="#e6e6ea"],.sec-claire svg[stroke="#eaeaf0"]{stroke:#22252c!important}
.sec-claire svg[stroke="#77777f"]{stroke:#787E8C!important}
.sec-claire .btnw{background:#0B0C0F!important;color:#fff!important}
.sec-claire .btnw:hover{background:#22252c!important;box-shadow:0 12px 32px rgba(12,14,18,.22)}
.sec-claire .btno{border-color:rgba(12,14,18,.22)!important;color:#0B0C0F!important}
.sec-claire .btno:hover{background:rgba(12,14,18,.05)!important;border-color:rgba(12,14,18,.4)!important}
.sec-claire [style*="background:rgba(255,255,255,.02)"]{background:rgba(12,14,18,.03)!important}

/* ===================== ROULEMENT DE TEXTE AU SURVOL ===================== */
.rl{position:relative;overflow:hidden;display:inline-block;vertical-align:top}
.rl-a,.rl-b{display:block;transition:transform .45s cubic-bezier(.76,0,.24,1)}
.rl-b{position:absolute;inset:0;transform:translateY(115%)}
.btnw:hover .rl-a,.btno:hover .rl-a,nav a:hover .rl-a,footer a:hover .rl-a{transform:translateY(-115%)}
.btnw:hover .rl-b,.btno:hover .rl-b,nav a:hover .rl-b,footer a:hover .rl-b{transform:translateY(0)}
/* le soulignement de nav reste */
nav > a, nav .dd > a{position:relative}

/* ===================== VIE DES SECTIONS ===================== */
.eyebrow::before{transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.16,1,.3,1) .15s}
.rv-in .eyebrow::before, .eyebrow.rv-in::before, section.sec-vue .eyebrow::before{transform:scaleX(1)}

/* ===================== NAV FLOTTANTE (se décale au scroll) ===================== */
header.nav-fixe{padding:0;transition:padding .5s cubic-bezier(.2,.9,.25,1),transform .38s cubic-bezier(.2,.8,.3,1),background .3s ease,border-color .3s ease}
header.nav-fixe > div{transition:max-width .5s cubic-bezier(.2,.9,.25,1),border-radius .5s cubic-bezier(.2,.9,.25,1),background .4s ease,border-color .4s ease,box-shadow .5s ease,height .4s ease;border:1px solid transparent;border-radius:0}
header.nav-fixe.nav-fond{background:transparent!important;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid transparent!important;padding:14px 0}
header.nav-fixe.nav-fond > div{max-width:1120px;height:74px;border-radius:20px;background:rgba(9,9,12,.90);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(150%);border-color:rgba(255,255,255,.10);box-shadow:0 18px 50px rgba(0,0,0,.45)}
header.nav-fixe.nav-fond .dd-panel{top:calc(100% + 14px)}

/* ===================== RYTHME VERTICAL NORMALISÉ ===================== */
section > div[style*="max-width"]{padding-top:104px!important;padding-bottom:104px!important}
section:first-of-type > div[style*="max-width"]{padding-top:88px!important}

/* ===================== GALERIE INTERACTIVE ===================== */
.gal{border-top:1px solid rgba(255,255,255,.09)}
.sec-claire .gal{border-top-color:rgba(12,14,18,.10)}
.gal-l{display:grid;grid-template-columns:52px 1.35fr 1.5fr 46px;gap:26px;align-items:center;padding:30px 8px;border-bottom:1px solid rgba(255,255,255,.09);color:inherit;text-decoration:none;position:relative;transition:padding-left .45s cubic-bezier(.2,.9,.25,1)}
.sec-claire .gal-l{border-bottom-color:rgba(12,14,18,.10)}
.gal-l::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:linear-gradient(90deg,#fff,transparent);transition:width .6s cubic-bezier(.2,.9,.25,1)}
.sec-claire .gal-l::after{background:linear-gradient(90deg,#0B0C0F,transparent)}
.gal-l:hover::after{width:100%}
.gal-l:hover{padding-left:22px}

/* apercu qui suit le curseur */

@media (max-width:1000px){.gal-vue{display:none}.gal-l{grid-template-columns:40px 1fr 40px;gap:16px}}

/* ===== Sections claires : couleurs portées par des CLASSES (et non inline) ===== */
.sec-claire .h2{color:#0B0C0F!important}
.sec-claire h1{background:none!important;-webkit-text-fill-color:#0B0C0F!important;color:#0B0C0F!important}
.sec-claire h2,.sec-claire h3{color:#0B0C0F}
.sec-claire .lede{color:#585E6A!important}
.sec-claire .eyebrow{color:#787E8C!important}
.sec-claire .eyebrow::before{background:linear-gradient(90deg,rgba(60,70,110,.55),transparent)}

.sec-claire .card svg{color:#22252c}

/* ===================== FOOTER COLLANT (fin de page toujours en bas) ===================== */
html,body{min-height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
body > div{flex:1 0 auto;display:flex;flex-direction:column}
body > div > footer{margin-top:auto!important}
/* la derniere section s'etire et centre son contenu : plus de vide mort */
body > div > section:last-of-type{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}

/* ===================== COUCHE SIGNATURE ===================== */
::selection{background:#c9d3f2;color:#0b0c0f}
section{position:relative}

/* barre de progression de lecture */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#fff 0%,rgba(165,180,225,.85) 100%);z-index:220;pointer-events:none}

/* grain cinema sur les sections sombres */
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

/* revelation des titres de hero, ligne par ligne */
.l-mask{display:block;overflow:hidden}
.l-in{display:block;transform:translateY(112%);animation:lrise .72s cubic-bezier(.76,0,.24,1) forwards}
.l-mask:nth-child(2) .l-in{animation-delay:.13s}
.l-mask:nth-child(3) .l-in{animation-delay:.26s}
@keyframes lrise{to{transform:none}}

/* inclinaison 3D des vignettes projets */
.tilt{transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .3s;will-change:transform}
.tilt:hover{box-shadow:0 30px 70px rgba(0,0,0,.55)}

/* wordmark geant du footer */
.foot-marque{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(110px,15vw,240px);line-height:.82;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);user-select:none;pointer-events:none;margin:-10px 0 44px;white-space:nowrap;overflow:hidden}
footer:hover .foot-marque{-webkit-text-stroke-color:rgba(255,255,255,.16);transition:-webkit-text-stroke-color .6s}

/* heure locale du studio */
.foot-heure{margin-top:16px;font-size:12px;color:#6f7383;display:flex;align-items:center;gap:8px}
.foot-heure::before{content:'';width:6px;height:6px;border-radius:50%;background:#7fd4a3;animation:pulse 2.2s infinite}
@media (prefers-reduced-motion:reduce){.l-in{animation:none;transform:none}.prog{display:none}}

/* ============================================================
   MODE CINEMA
   ============================================================ */

/* ---- Ouverture (premiere visite de la session) ---- */
.ouverture{position:fixed;inset:0;z-index:400;background:#050505;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px}

/* ---- Revelation mot a mot ---- */
.mot{display:inline-block;overflow:hidden;vertical-align:top}
.mot > i{display:inline-block;font-style:inherit;transform:translateY(112%);transition:transform .58s cubic-bezier(.76,0,.24,1)}
.vu .mot > i{transform:none}

/* ---- Images qui se devoilent ---- */
.devoile{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.16,1,.3,1)}
.devoile.vu{clip-path:inset(0 0 0 0)}

/* ---- Process : sequence pilotee au scroll ---- */
.proc-scene{position:relative}

.proc-etape{transition:opacity .55s ease,filter .55s ease}
.proc-etape:not(.actif){opacity:.58;filter:blur(.5px)}

.proc-fil{position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(255,255,255,.10);border-radius:2px;overflow:hidden}
.sec-claire .proc-fil{background:rgba(12,14,18,.10)}
.proc-fil i{display:block;width:100%;height:100%;background:linear-gradient(180deg,#fff,rgba(160,175,220,.5));transform-origin:top;transform:scaleY(0)}
.sec-claire .proc-fil i{background:linear-gradient(180deg,#0B0C0F,rgba(60,70,110,.5))}

@media (prefers-reduced-motion:reduce){
  .ouverture{display:none!important}
  .mot > i{transform:none}.devoile{clip-path:none}
  .proc-etape:not(.actif){opacity:1;filter:none}
}

/* ============================================================
   MOTION v2 — ouverture et transition batis sur le logo
   ============================================================ */

/* ---------- OUVERTURE ---------- */
.ouverture{position:fixed;inset:0;z-index:400;background:#050505;display:block;overflow:hidden}

@keyframes ouv-mot{to{transform:none}}

/* ---------- APERCU DE GALERIE : cadre navigateur sous le curseur ---------- */
.gal-vue{position:fixed;top:0;left:0;width:432px;height:auto;border-radius:14px;overflow:hidden;
  pointer-events:none;opacity:0;z-index:60;background:#101216;
  transform:translate(-50%,-50%) scale(.94);
  transition:opacity .28s ease,transform .42s cubic-bezier(.16,1,.3,1);
  box-shadow:0 40px 90px rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.16)}
.gal-vue.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.gal-vue .barre{height:26px;display:flex;align-items:center;gap:5px;padding:0 11px;
  background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08)}
.gal-vue .barre i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22)}
.gal-vue img{width:100%;aspect-ratio:16/10.4;height:auto;object-fit:cover;object-position:50% 0;display:block;background:#0d0f13}

/* la bande transparente de l'en-tete ne doit rien intercepter : seule la pastille est cliquable */
header.nav-fixe{pointer-events:none}
header.nav-fixe > div{pointer-events:auto}

/* ============================================================
   MOTION v3 — intro studio + transition peinture-reflet
   ============================================================ */

/* ---------- INTRO : lumiere volumetrique, matiere, profondeur ---------- */
.ouverture{background:#040405;perspective:1400px}

@keyframes halo-lever{0%{opacity:0;transform:translateY(150px) scale(.6)}55%{opacity:1}100%{opacity:.9;transform:none}}

@keyframes scene-approche{0%{transform:translate(-50%,-50%) rotateX(9deg) scale(.86)}100%{transform:translate(-50%,-50%) rotateX(0) scale(1)}}

/* carreaux : matiere + reflet specualire qui balaie */

@keyframes reflet{to{transform:translateX(160%)}}

/* mot : reflet qui passe dessus */

/* ============================================================
   ILLUSTRATIONS DE SERVICE
   ============================================================ */
.illu{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));padding:44px}
.sec-claire .illu{border-color:rgba(12,14,18,.10);background:#fff;box-shadow:0 18px 50px rgba(12,14,18,.07)}
.illu::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 20% 0%,rgba(120,130,170,.10),transparent 62%)}
.sec-claire .illu::before{background:radial-gradient(90% 70% at 20% 0%,rgba(90,105,160,.07),transparent 62%)}

/* ---------- 1. CHAINE DE TRAVAIL ---------- */
.ch{display:flex;align-items:stretch;gap:0;position:relative}

@keyframes bille{0%{left:12%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:88%;opacity:0}}

/* ---------- 2. TABLEAU DE BORD ---------- */

/* ---------- 3. ENTONNOIR ---------- */

/* ---------- 4. PLANCHE D'IDENTITE ---------- */
.pl{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:96px;gap:12px}
.pl > div{border-radius:12px;border:1px solid rgba(255,255,255,.09);overflow:hidden;position:relative;
  opacity:0;transform:translateY(14px) scale(.97);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.sec-claire .pl > div{border-color:rgba(12,14,18,.10)}
.illu.vu .pl > div{opacity:1;transform:none}
.illu.vu .pl > div:nth-child(2){transition-delay:.07s}.illu.vu .pl > div:nth-child(3){transition-delay:.14s}
.illu.vu .pl > div:nth-child(4){transition-delay:.21s}.illu.vu .pl > div:nth-child(5){transition-delay:.28s}
.illu.vu .pl > div:nth-child(6){transition-delay:.35s}.illu.vu .pl > div:nth-child(7){transition-delay:.42s}
.illu.vu .pl > div:nth-child(8){transition-delay:.49s}

@media (max-width:1000px){.ch{flex-wrap:wrap;gap:22px}.pl{grid-template-columns:repeat(2,1fr)}}

/* les illustrations heritent de la couleur de leur section, jamais du blanc global */
.illu{color:#fff}
.sec-claire .illu{color:#0B0C0F}

/* le voile d'arrivee s'efface en douceur une fois la nappe en place */
.pt-voile{transition:opacity .18s linear}
/* Aucune couche entrante ne doit jamais intercepter un clic :
   seule la nappe SORTANTE (.entre) capture, le temps de couvrir l'ecran. */
.pt-voile{pointer-events:none!important}

/* ============================================================
   MOTION v4 — une direction, une signature, un relais
   ============================================================ */

/* le voile statique d'arrivee = le meme plan, deja pose */
.pt-voile{background:#050505}
.pt-voile::before{content:'';position:absolute;inset:0;
  background:radial-gradient(70% 46% at 50% 0%,rgba(120,130,170,.10),transparent 70%)}

/* ---------- INTRO v4 : une seule matiere, une seule sortie ---------- */
.ouverture{background:#050505;perspective:none}

@keyframes ouv-pose-v4{
  0%{opacity:0;transform:translateY(16px) scale(.9)}
  100%{opacity:1;transform:none}
}

/* ---------- L'ARRIVEE DOUCE : le hero attend son signal ---------- */
.h-attente .l-in{animation-play-state:paused!important}
.h-go .l-in{animation-play-state:running!important}
.h-cache{opacity:0!important;transform:translateY(16px)!important}
.h-entre{opacity:1!important;transform:none!important;
  transition:opacity .6s cubic-bezier(.76,0,.24,1),transform .6s cubic-bezier(.76,0,.24,1)}

@media (prefers-reduced-motion:reduce){
  .pt-voile{display:none!important}
  .h-cache{opacity:1!important;transform:none!important}
}

/* ============================================================
   MOTION v5 — le champ de carreaux (Molnár / LeWitt)
   ============================================================ */
/* pendant l'intro, le logo de l'en-tete attend que le sien vienne se ranger */
html.intro-en-cours header > div > a:first-child{opacity:0}
header > div > a:first-child{transition:opacity .45s ease}

/* ============================================================
   MOTION v10 — profondeur camera (une seule famille, definitive)
   ============================================================ */
/* la racine devient un plan que la camera peut approcher ou eloigner */
body > div[style*="background:#050505"]{transform-origin:50% 42%}
html.cam body > div[style*="background:#050505"],
html.cam-entre body > div[style*="background:#050505"],
html.cam-entre-inv body > div[style*="background:#050505"]{
  will-change:transform,opacity,filter;backface-visibility:hidden}
html.cam body > div[style*="background:#050505"]{transition:
  transform .40s cubic-bezier(.55,0,.85,.35),
  opacity .40s cubic-bezier(.7,0,.9,.4),
  filter .40s cubic-bezier(.55,0,.85,.35)}
/* depart : le plan s'eloigne (aller) ou s'approche trop pres (retour) */
html.cam-loin body > div[style*="background:#050505"]{transform:scale(.885) translateZ(0);opacity:0;filter:blur(10px) brightness(.55)}
html.cam-pres body > div[style*="background:#050505"]{transform:scale(1.115) translateZ(0);opacity:0;filter:blur(10px) brightness(.55)}
/* arrivee : le plan monte des profondeurs (aller) ou revient de devant (retour) */
html.cam-entre body > div[style*="background:#050505"]{
  animation:cam-entre .66s cubic-bezier(.16,1,.3,1) both}
html.cam-entre-inv body > div[style*="background:#050505"]{
  animation:cam-entre-inv .66s cubic-bezier(.16,1,.3,1) both}
@keyframes cam-entre{from{transform:scale(.91) translateY(14px);opacity:0;filter:blur(10px) brightness(.6)}55%{opacity:1}to{transform:none;opacity:1;filter:none}}
@keyframes cam-entre-inv{from{transform:scale(1.09) translateY(-14px);opacity:0;filter:blur(10px) brightness(.6)}55%{opacity:1}to{transform:none;opacity:1;filter:none}}

/* le vide : une profondeur propre — degrade radial + grain film, rien d'autre */
.profond{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 75% 60% at 50% 42%,#0c0c0e 0%,#060607 55%,#030304 100%);
  transition:opacity .3s ease}
.profond::after{content:'';position:absolute;inset:0;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.profond.on{opacity:1;pointer-events:auto}
/* le titre de destination : discret, en bas a gauche, comme un repere de tournage */
.profond-flux{position:absolute;inset:0;width:100%;height:100%;display:block;
  filter:blur(.4px)}
.profond-titre{position:absolute;left:44px;bottom:40px;display:flex;align-items:center;gap:14px;
  font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#d8d8dc;
  opacity:0;transform:translateY(10px);
  transition:opacity .24s ease .12s,transform .44s cubic-bezier(.16,1,.3,1) .12s}
.profond.on .profond-titre{opacity:1;transform:none}
.profond-titre::before{content:'';width:26px;height:1px;background:#8a8a90}
.profond-titre .rlm{display:block;overflow:hidden}
.profond-titre b{display:block;font-weight:600;color:#fff;transform:translateY(115%);
  transition:transform .45s cubic-bezier(.76,0,.24,1) .12s}
.profond.on .profond-titre b{transform:none}
/* le fil continu : la barre de progression devient trait d'attente */
.prog.attente{transform-origin:left;
  background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.12));
  animation:fil-attente 1.1s cubic-bezier(.5,0,.5,1) infinite}
@keyframes fil-attente{0%{transform:scaleX(0);transform-origin:left}
  50%{transform:scaleX(1);transform-origin:left}
  51%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}}
@media (prefers-reduced-motion:reduce){
  .profond{display:none!important}
  html.cam body > div[style*="background:#050505"]{transition:none}
  html.cam-loin body > div,html.cam-pres body > div{opacity:1;transform:none;filter:none}
}

/* le premier ecran passe sous le header flottant : son fond couvre tout le haut */
body > div > section:first-of-type{padding-top:108px!important}

/* sorties en fondu, jamais en coupe */

/* palette unifiee : toute section sans fond declare recoit le noir canon #060607
   (les fonds inline gardent la priorite naturellement) */
body > div > section{background:#060607}

/* ---------- SERVICES : lignes editoriales numerotees ---------- */

/* index technique : petit chiffre casse, filet de mesure dessous */

/* filet lumineux qui se trace en tete de ligne au survol */

/* chips de specification */

/* ---------- TARIFS : cartes facteurs sur fond clair ---------- */
.trf-c{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .3s ease}
.trf-c:hover{transform:translateY(-4px);border-color:rgba(12,18,40,.13);
  box-shadow:0 26px 60px rgba(12,18,40,.10)}

/* ============================================================
   VIE AMBIANTE — le site respire en permanence
   ============================================================ */

/* 1. les halos des heros et CTA derivent lentement (poses par JS) */
.aurore{animation:aurore 17s ease-in-out infinite alternate}
@keyframes aurore{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(28px,-20px,0) scale(1.055)}}

/* 2. le motif fantome respire : chaque carreau s'eclaire a son tour */

/* 3. cartes projecteur : une lumiere suit le curseur (vars posees par JS) */
.card{--mx:50%;--my:50%}
.card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(300px circle at var(--mx) var(--my),rgba(120,130,170,.10),transparent 65%);
  transition:opacity .35s ease}
.card:hover::after{opacity:1}
.trf-c{--mx:50%;--my:50%}
.trf-c::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(280px circle at var(--mx) var(--my),rgba(120,130,170,.10),transparent 65%);
  transition:opacity .35s ease}
.trf-c:hover::after{opacity:1}

/* 4. grain de film vivant */
.grain::after{animation:grain-vie 2.4s steps(1) infinite}
@keyframes grain-vie{
  0%{background-position:0 0}12%{background-position:-34px 26px}25%{background-position:22px -38px}
  38%{background-position:-28px -14px}50%{background-position:38px 20px}62%{background-position:-12px 34px}
  75%{background-position:30px -8px}88%{background-position:-40px -30px}}

/* 5. footer vivant : lueur d'horizon + wordmark balaye par la lumiere */
body > div > footer{position:relative;overflow:hidden}
body > div > footer::before{content:'';position:absolute;left:50%;top:0;translate:-50% 0;
  width:1100px;height:340px;pointer-events:none;
  background:radial-gradient(55% 100% at 50% 0%,rgba(120,130,170,.09),transparent 70%)}
.foot-marque{-webkit-text-stroke:1px rgba(255,255,255,.13);position:relative;
  background:linear-gradient(105deg,transparent 42%,rgba(190,200,235,.16) 50%,transparent 58%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;
  animation:marque-balaye 7.5s ease-in-out infinite}
@keyframes marque-balaye{0%,55%{background-position:120% 0}95%,100%{background-position:-60% 0}}

@media (prefers-reduced-motion:reduce){
  .aurore,.motif-fantome div,.grain::after,.foot-marque{animation:none}}

/* arrivee par la camera : les textes sont deja en place, aucun second mouvement */
html.sans-cascade .l-in{animation:none!important;transform:none!important}
html.sans-cascade .h-cache{opacity:1!important;transform:none!important}

/* intro : filet de mesure qui se trace sous la scene */

@keyframes filet-trace{to{transform:scaleX(1)}}
/* repere bas-gauche : meme langage que les titres de traversee */

@keyframes repere-lever{to{opacity:.85}}

/* ---------- VISUELS DE CAMPAGNE : l'objet sculpte dans le hero ---------- */

/* ---------- lisibilite sur fond clair ---------- */

/* galerie : l'image existe pour le tactile et les robots, l'apercu au survol reste le bonus */

[id]{scroll-margin-top:110px}

/* reduced-motion : tout le contenu est visible sans animation */
@media (prefers-reduced-motion:reduce){
  .pl > div{opacity:1;transform:none}
  .proc-etape:not(.actif){opacity:1;filter:none}
  .illu *{animation:none!important;transition:none!important}
  .aurore,.motif-fantome div,.grain::after,.foot-marque,.hero-obj{animation:none}}
/* deroulant Services au clavier */
.dd:focus-within .dd-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}

/* ============================================================
   GABARIT ÉDITORIAL — grande typographie, lignes, pas de boîtes
   ============================================================ */

/* ============================================================
   LANGAGE TYPOGRAPHIQUE — le wordmark du footer et le roulement
   de la nav deviennent la grammaire de toutes les pages
   ============================================================ */

.typo-tete{max-width:760px}
.typo-h2{font-size:52px;line-height:1.05;letter-spacing:-.04em;font-weight:800;color:#fff;margin:22px 0 0;text-wrap:balance}
.typo-n{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#8b95b8;font-variant-numeric:tabular-nums}
.typo-note{font-size:13px;letter-spacing:.06em;color:#7d8194;margin:18px 0 0}
.typo-lien{font-size:15px;font-weight:600;color:#c9ccd6;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:3px;transition:border-color .3s}
.typo-lien:hover{color:#fff;border-color:#fff}
/* lignes numerotees */
.typo-lignes{margin-top:56px;border-top:1px solid rgba(255,255,255,.09)}
.typo-l{display:grid;grid-template-columns:120px 1fr;gap:32px;padding:38px 0;border-bottom:1px solid rgba(255,255,255,.09);position:relative}
.typo-l .typo-n{padding-top:10px}
.typo-l h3{margin:0;font-size:30px;font-weight:700;letter-spacing:-.03em;color:#fff;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.typo-l p{margin:12px 0 0;font-size:16px;line-height:1.65;color:#a6aab9;max-width:60ch}
.typo-l::after{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,#a7b0d6 0%,rgba(167,176,214,.35) 55%,rgba(167,176,214,0) 100%);
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.typo-l:hover::after{transform:scaleX(1)}
/* ecran reel */
.typo-ecran{margin:60px 0 0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 60px 140px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);background:#0a0b0e}
.typo-ecran img{display:block;width:100%;height:auto}
.typo-legende{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.09)}
.typo-legende b{display:block;font-size:17px;font-weight:700;color:#fff;margin-top:12px}
.typo-legende p{margin:6px 0 0;font-size:14px;line-height:1.55;color:#a6aab9}
/* etapes a grands numeros */
.typo-etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px;padding-top:36px;border-top:1px solid rgba(255,255,255,.09)}
.typo-grand{font-size:12px;font-weight:600;letter-spacing:.24em;color:#8b95b8;font-variant-numeric:tabular-nums;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.09);transition:border-color .4s}
.typo-etapes > div:hover .typo-grand{border-color:rgba(167,176,214,.6)}
.typo-etapes b{display:block;font-size:24px;font-weight:700;color:#fff;margin-top:22px;letter-spacing:-.025em}
.typo-etapes p{margin:10px 0 0;font-size:15px;line-height:1.6;color:#a6aab9}
/* prix en deux mots */
.typo-prix{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:56px;padding-top:36px;border-top:1px solid rgba(255,255,255,.09)}
.typo-mot{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#8b95b8;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.09)}
.typo-prix b{display:block;font-size:28px;font-weight:700;color:#fff;margin-top:22px;letter-spacing:-.03em}
.typo-prix p{margin:10px 0 0;font-size:15px;line-height:1.65;color:#a6aab9;max-width:44ch}
/* chronologie */
.typo-chrono{margin-top:48px;border-top:1px solid rgba(255,255,255,.09)}
.typo-chrono > div{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.typo-chrono p{margin:0;font-size:17px;line-height:1.6;color:#e6e6ea;max-width:60ch}
.typo-chrono .typo-n{padding-top:6px}

/* ---------- registre typographique sur fond clair ---------- */
.typo-claire .typo-h2{color:#0B0C0F}
.typo-claire .typo-l{border-color:rgba(12,14,18,.12)}
.typo-claire .typo-lignes{border-top-color:rgba(12,14,18,.12)}
.typo-claire .typo-l h3,.typo-claire .typo-etapes b,.typo-claire .typo-prix b{color:#14161d}
.typo-claire .typo-l p,.typo-claire .typo-etapes p,.typo-claire .typo-prix p{color:#585E6A}
.typo-claire .typo-n,.typo-claire .typo-grand,.typo-claire .typo-mot{color:#6B7490}
.typo-claire .typo-grand,.typo-claire .typo-mot{border-bottom-color:rgba(12,14,18,.14)}
.typo-claire .typo-etapes,.typo-claire .typo-prix,.typo-claire .typo-chrono,.typo-claire .typo-chrono > div{border-color:rgba(12,14,18,.12)}
.typo-claire .typo-chrono p{color:#22252c}
.typo-claire .typo-note{color:#7A8090}
.typo-claire .typo-l::after{background:linear-gradient(90deg,#4E5A8C 0%,rgba(78,90,140,.35) 55%,rgba(78,90,140,0) 100%)}
.typo-claire .typo-lien{color:#22252c;border-color:rgba(12,14,18,.3)}
/* le mouvement : cascade posee par GSAP sur [data-rv], parallaxe et devoilement sur l'ecran */
.typo-ecran.devoile{clip-path:inset(0 0 100% 0 round 16px)}
.typo-ecran.devoile.vu{clip-path:inset(0 0 0 0 round 16px);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1)}

/* ============================================================
   LE MESSAGE PASSE PAR LE VISUEL — scenes vivantes de la page SaaS
   ============================================================ */
/* hero : la dalle produit (objet sculpte) */
.dalle{position:absolute;right:57px;top:70px;width:600px;height:470px;z-index:1;perspective:1800px;pointer-events:none}

.typo-hero{overflow:hidden}
/* lignes avec scene : 3 colonnes */
.typo-l{grid-template-columns:120px 1fr 260px;align-items:center}
.scene{position:relative;height:120px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.typo-claire .scene{background:#fff;border-color:rgba(12,14,18,.1)}
.scene{height:132px;color:#0B0C0F}
/* 01 : le meme devis, retape */

.tape{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;animation:tape 7s steps(18) infinite}
@keyframes tape{0%{max-width:0}30%,78%{max-width:100%}88%,100%{max-width:0}}
.curseur{display:inline-block;width:1.5px;height:13px;background:#4E5A8C;margin-left:2px;animation:clignote 1s steps(1) infinite}
@keyframes clignote{50%{opacity:0}}

/* 02 : les jours passent, personne ne relance */
.sc-relance .rel-l{position:absolute;left:22px;right:22px;top:38px;display:flex;align-items:center;justify-content:space-between}
.pill{white-space:nowrap;font-size:10.5px;font-weight:600;padding:5px 10px;border-radius:999px;border:1px solid rgba(12,14,18,.14);background:#fff;color:#22252c}
.pill.fin{color:#7A8090;opacity:0;animation:fin 8s ease-in-out infinite}
@keyframes fin{0%,72%{opacity:0}80%,96%{opacity:1}100%{opacity:0}}
.rel-j{position:relative;width:60px;height:16px;font-size:12px;font-weight:700;letter-spacing:.04em;color:#0B0C0F;font-variant-numeric:tabular-nums}
.rel-j em{position:absolute;inset:0;font-style:normal;text-align:center;opacity:0;animation:jours 8s ease-in-out infinite}
.rel-j em:nth-child(1){animation-delay:0s}.rel-j em:nth-child(2){animation-delay:2s}.rel-j em:nth-child(3){animation-delay:4s}.rel-j em:nth-child(4){animation-delay:6s}
@keyframes jours{0%{opacity:0;transform:translateY(6px)}5%,22%{opacity:1;transform:none}27%,100%{opacity:0;transform:translateY(-6px)}}
.rel-barre{position:absolute;left:22px;right:22px;top:84px;height:2px;background:rgba(12,14,18,.1);border-radius:2px}
.rel-barre i{position:absolute;left:0;top:0;height:100%;width:100%;background:linear-gradient(90deg,#4E5A8C,rgba(78,90,140,.25));transform:scaleX(0);transform-origin:left;animation:barre 8s cubic-bezier(.76,0,.24,1) infinite}
@keyframes barre{0%{transform:scaleX(0)}75%,96%{transform:scaleX(1)}100%{transform:scaleX(0)}}
/* 03 : on cherche, on ne trouve pas */
.sc-epars .cherche{position:absolute;left:22px;right:22px;top:20px;height:34px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:9px;background:#fff;border:1px solid rgba(12,14,18,.14);font-size:12.5px;font-weight:600;color:#7A8090}
.tape2{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;color:#0B0C0F;animation:tape 8s steps(16) infinite}
.sources{position:absolute;left:22px;top:66px;display:flex;gap:6px}
.sources span{font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;border:1px solid rgba(12,14,18,.12);color:#7A8090;background:#fff}
.zero{position:absolute;right:22px;top:68px;font-size:11px;font-weight:600;color:#7A8090;opacity:0;animation:fin 8s ease-in-out infinite}
/* etapes : ligne qui se trace */
.etapes-fil{position:relative;height:1px;margin-top:56px;background:rgba(255,255,255,.09)}
.typo-claire .etapes-fil{background:rgba(12,14,18,.12)}
.etapes-fil i{position:absolute;left:0;top:0;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#4E5A8C,#a7b0d6);transition:transform 1.6s cubic-bezier(.76,0,.24,1)}
.etapes-fil.vu i{transform:scaleX(1)}
.etapes-fil span{position:absolute;top:-4px;width:9px;height:9px;border-radius:50%;background:#4E5A8C;translate:-50% 0;opacity:0;transition:opacity .4s}
.etapes-fil span:nth-of-type(1){left:0}.etapes-fil span:nth-of-type(2){left:50%}.etapes-fil span:nth-of-type(3){left:100%}
.etapes-fil.vu span{opacity:1}.etapes-fil.vu span:nth-of-type(2){transition-delay:.8s}.etapes-fil.vu span:nth-of-type(3){transition-delay:1.5s}
.typo-etapes{margin-top:34px;border-top:0}
/* cout : une fois / chaque mois */
.cout{display:flex;align-items:flex-end;gap:6px;height:84px;margin-top:22px}
.cout i{display:block;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#a7b0d6,rgba(167,176,214,.35));transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.76,0,.24,1)}

.cout-abo i{width:20px;height:22px}
.cout.vu i{transform:scaleY(1)}
.cout-abo.vu i:nth-child(n){transition-delay:calc(var(--i,0) * .06s)}
/* exemple : fil vertical */
.chrono-fil{position:relative;padding-left:26px}
.chrono-fil::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(12,14,18,.14)}
.chrono-fil::after{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,#4E5A8C,#a7b0d6);transform:scaleY(0);transform-origin:top;transition:transform 1.8s cubic-bezier(.76,0,.24,1)}
.chrono-fil.vu::after{transform:scaleY(1)}
.chrono-fil > div{position:relative}
.chrono-fil > div::before{content:'';position:absolute;left:-30px;top:32px;width:9px;height:9px;border-radius:50%;background:#4E5A8C;box-shadow:0 0 0 4px #F3F4F6;opacity:0;transition:opacity .4s}
.chrono-fil.vu > div::before{opacity:1}
.chrono-fil.vu > div:nth-child(2)::before{transition-delay:.5s}.chrono-fil.vu > div:nth-child(3)::before{transition-delay:1s}.chrono-fil.vu > div:nth-child(4)::before{transition-delay:1.5s}
@media (prefers-reduced-motion:reduce){.scene *{animation:none!important}.etapes-fil i,.cout i,.chrono-fil::after{transform:none}.etapes-fil span,.chrono-fil > div::before{opacity:1}}

.typo-hero p{max-width:560px}

/* le bouton blanc garde son encre au survol, quel que soit le a:hover de la page */
a.btnw:hover{color:#050505}
.sec-claire a.btnw:hover{color:#fff}

/* section finale distincte du pied de page ; le wordmark retrouve sa grandeur */
.typo-fin{border-top:1px solid rgba(255,255,255,.07)}
.typo-fin::before{content:'';position:absolute;left:50%;top:-40%;translate:-50% 0;width:1200px;height:600px;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(120,130,170,.16),transparent 70%)}
body > div > footer{margin-top:0!important;background:#030304!important;border-top:1px solid rgba(255,255,255,.12)!important}
.foot-marque{font-size:clamp(140px,19.5vw,310px);margin:-14px 0 40px;-webkit-text-stroke:1.5px rgba(255,255,255,.26);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 70%),linear-gradient(105deg,transparent 42%,rgba(190,200,235,.22) 50%,transparent 58%);
  background-size:100% 100%,240% 100%;-webkit-background-clip:text;background-clip:text}
footer:hover .foot-marque{-webkit-text-stroke-color:rgba(255,255,255,.4)}
@keyframes marque-balaye{0%,55%{background-position:0 0,120% 0}95%,100%{background-position:0 0,-60% 0}}
/* hero SaaS : l'objet fond dans le noir, sous la nav */

.foot-marque{-webkit-text-stroke:1.6px rgba(255,255,255,.4)}
footer:hover .foot-marque{-webkit-text-stroke-color:rgba(255,255,255,.55)}
/* ============================================================
   PLUS DE FLASH BLANC : reflets balayants retires partout
   (bouton, ouverture, wordmark du pied de page, mot fil)
   ============================================================ */
.btnw::after,.btno::after{display:none!important;animation:none!important}

.foot-marque,.typo-fil{animation:none!important;background:none!important;-webkit-background-clip:initial;background-clip:initial}
.foot-marque{color:transparent}
/* les objets des heros fondent dans le noir, sans halo de flash en haut a gauche */

/* ============================================================
   BAS DE PAGE : un seul noir, un pied de page reglé au detail
   ============================================================ */
.typo-fin{border-top:0}
.typo-fin::before{display:none}
body > div > footer{background:#050505!important;border-top:1px solid rgba(255,255,255,.08)!important}
body > div > footer::before{display:none}
.foot-marque{font-size:clamp(120px,16.5vw,250px);margin:-8px 0 48px;-webkit-text-stroke:1px rgba(255,255,255,.2);color:transparent;line-height:.82}
footer:hover .foot-marque{-webkit-text-stroke-color:rgba(255,255,255,.28)}
body > div > footer > div{padding:64px 57px 40px!important}
body > div > footer a{transition:color .25s}
body > div > footer a:hover{color:#fff!important}
body > div > footer [style*="letter-spacing:1.7px"]{color:#6b6b74!important;font-size:11px;letter-spacing:.18em}
body > div > footer [style*="color:#9a9aa4"]{color:#a3a3ad!important;gap:13px!important}
body > div > footer [style*="margin-top:52px"]{margin-top:56px!important;padding-top:24px!important;border-top-color:rgba(255,255,255,.08)!important;display:flex;justify-content:space-between;align-items:center;color:#6b6b74!important}

/* hero SaaS : le produit lui-meme, sur le bureau et dans la poche */
.hero-duo{position:absolute;right:57px;top:64px;width:640px;height:560px;z-index:1;pointer-events:none}

.hero-duo{width:590px;right:57px}

/* 01 : la meme information, trois fois */
.sc-saisie{padding:14px 22px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.champ{display:flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;background:#fff;border:1px solid rgba(12,14,18,.12);font-size:11.5px}
.champ span{width:58px;flex:none;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7A8090}
.champ b{font-weight:600;color:#0B0C0F;white-space:nowrap;overflow:hidden;max-width:0;animation:tape3 9s steps(15) infinite}
.champ .t2{animation-delay:2.4s}.champ .t3{animation-delay:4.8s}
@keyframes tape3{0%{max-width:0}22%,80%{max-width:100%}88%,100%{max-width:0}}
.sc-saisie .curseur{height:12px;animation:clignote 1s steps(1) infinite}

/* hero SaaS : la scene photographique, l'application sur l'ecran, fondue dans le noir */
.typo-hero{min-height:760px}
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:66%;z-index:1;pointer-events:none;overflow:hidden}
.hero-photo img{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;object-fit:cover;object-position:52% 50%;transform:translateX(0);opacity:0;transition:opacity 1.4s cubic-bezier(.76,0,.24,1) .15s}
.hero-photo.vu img{opacity:1}
.hero-photo::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#080809 0%,rgba(8,8,9,.96) 18%,rgba(8,8,9,.55) 40%,rgba(8,8,9,0) 62%)}
.hero-photo::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,9,.55) 0%,rgba(8,8,9,0) 30%,rgba(8,8,9,0) 70%,#080809 100%)}
.typo-hero > div{z-index:2}
@media (max-width:1240px){.hero-photo{width:80%;opacity:.55}}
.hero-photo{left:0;width:auto}
.hero-photo img{right:-220px}
.hero-photo::before{background:linear-gradient(90deg,#080809 0%,#080809 26%,rgba(8,8,9,.86) 40%,rgba(8,8,9,.35) 54%,rgba(8,8,9,0) 66%)}

/* arrivee par navigation : le titre reste en place, pas de seconde montee */

/* scene Kling : le telephone a droite, la fenetre claire du fond cachee par le fondu */
.hero-photo img{right:-200px;object-position:50% 50%}

.hero-photo img{top:64px;height:calc(100% - 64px)}

/* ============================================================
   PAGE SITES WEB : scenes des trois situations + galerie
   ============================================================ */
/* 01 : on cherche le metier dans la ville, vous n'y etes pas */

@keyframes res{0%,28%{width:0}38%,88%{width:72%}96%,100%{width:0}}

/* 02 : le vieux site */

/* 03 : la mise a jour qui s'eloigne */

/* galerie de sites livres */
.typo-galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px;padding-top:44px;border-top:1px solid rgba(255,255,255,.09)}
.typo-galerie a{display:block;color:#c9ccd6;text-decoration:none}
.typo-galerie img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid rgba(255,255,255,.10);transition:transform .6s cubic-bezier(.76,0,.24,1),border-color .3s}
.typo-galerie a:hover img{transform:translateY(-4px);border-color:rgba(255,255,255,.28)}
.typo-galerie span{display:block;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8b95b8}
.typo-note .typo-lien{margin-left:6px}
/* hero sites : le portable prend plus de place, cadre plus bas */

/* ============================================================
   PAGE SITES WEB : recit propre (livres, inclus, quatre temps)
   ============================================================ */
.typo-lignes-2 .typo-l{grid-template-columns:120px 1fr;max-width:900px}
/* les sites livres : une grande, quatre moyennes */

.livre{position:relative;display:block;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:#0a0b0e;color:#fff;text-decoration:none;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.livre.grand{grid-column:1 / -1}
.livre img{display:block;width:100%;height:auto;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.livre.grand img{aspect-ratio:16/8.4;object-fit:cover;object-position:top}
.livre:not(.grand) img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.livre:hover img{transform:scale(1.025)}
.livre span{position:absolute;left:0;right:0;bottom:0;padding:26px 28px 24px;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline;
  background:linear-gradient(180deg,rgba(6,6,7,0) 0%,rgba(6,6,7,.86) 55%,rgba(6,6,7,.96) 100%)}
.livre b{font-size:20px;font-weight:700;letter-spacing:-.02em}
.livre i{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8b95b8}
.livre em{grid-column:1 / -1;font-style:normal;font-size:14px;line-height:1.5;color:#b9bcc8;max-width:60ch}
.livre.grand span{padding:34px 36px 32px}
.livre.grand b{font-size:26px}
/* ce qui est compris : six lignes en deux colonnes */
.inclus{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:56px;border-top:1px solid rgba(12,14,18,.12)}
.inclus > div{display:grid;grid-template-columns:44px 1fr;gap:6px 18px;padding:30px 0;border-bottom:1px solid rgba(12,14,18,.12)}
.inclus .typo-n{grid-row:1 / span 2;padding-top:6px}
.inclus b{font-size:21px;font-weight:700;letter-spacing:-.02em;color:#0B0C0F}
.inclus p{margin:0;font-size:15px;line-height:1.6;color:#4d515e}
/* quatre temps */
.etapes-fil.quatre span:nth-of-type(2){left:33.33%}.etapes-fil.quatre span:nth-of-type(3){left:66.66%}.etapes-fil.quatre span:nth-of-type(4){left:100%}
.etapes-fil.quatre.vu span:nth-of-type(2){transition-delay:.5s}.etapes-fil.quatre.vu span:nth-of-type(3){transition-delay:1s}.etapes-fil.quatre.vu span:nth-of-type(4){transition-delay:1.5s}
.typo-etapes.quatre{grid-template-columns:repeat(4,1fr);gap:32px}
.typo-etapes.quatre .typo-grand{letter-spacing:.14em}
/* livres : la legende sous l'image, jamais dessus */
.livre{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
.livre img{border-radius:14px;border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.livre span,.livre.grand span{position:static;padding:18px 2px 0;background:none;grid-template-columns:auto 1fr;gap:6px 16px}
.livre em{color:#9a9ea9}

/* page automatisation : outils relies */
.outils{display:flex;flex-wrap:wrap;gap:12px;margin-top:48px;max-width:980px}
.outils span{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid rgba(12,14,18,.16);background:#fff;font-size:15px;font-weight:600;color:#0B0C0F;transition:border-color .3s,transform .5s cubic-bezier(.76,0,.24,1)}
.outils span:hover{border-color:rgba(12,14,18,.5);transform:translateY(-2px)}
.hero-photo-auto img{right:-260px;top:40px;height:calc(100% - 40px)}

/* page strategie : les quatre marches, lignes sur fond sombre */
.marches{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid rgba(12,14,18,.12)}
.marches > div{padding:32px 28px 28px 0;border-right:1px solid rgba(12,14,18,.12);margin-right:28px;position:relative}
.marches > div:last-child{border-right:0;margin-right:0}
.marches > div::before{content:'';position:absolute;left:0;top:0;height:2px;width:0;background:#4E5A8C;transition:width 1.2s cubic-bezier(.76,0,.24,1)}
.marches > div.rv-in::before{width:56px}
.marches > div:nth-child(1).rv-in::before{transition-delay:.1s}.marches > div:nth-child(2).rv-in::before{transition-delay:.4s}.marches > div:nth-child(3).rv-in::before{transition-delay:.7s}.marches > div:nth-child(4).rv-in::before{transition-delay:1s}
.marches b{display:block;font-size:24px;font-weight:700;letter-spacing:-.025em;color:#0B0C0F;margin-top:16px}
.marches p{margin:12px 0 0;font-size:15px;line-height:1.6;color:#4d515e}
.typo-lignes.sombre .typo-l h3{color:#fff}.typo-lignes.sombre .typo-l p{color:#a6aab9}
.hero-photo-strat img{right:-160px;top:20px;height:calc(100% - 20px)}

/* page branding : galerie sur fond clair */
.typo-galerie.claire{border-top-color:rgba(12,14,18,.12)}
.typo-galerie.claire img{border-color:rgba(12,14,18,.12)}
.typo-galerie.claire span{color:#4d515e}
.typo-galerie.claire a:hover img{border-color:rgba(12,14,18,.4)}
.hero-photo-brand img{right:-120px;top:0;height:100%}

/* ============================================================
   PAGE SERVICES : cinq blocs texte + photo, en alternance
   ============================================================ */
.typo-hero-texte{min-height:0}

/* chrono sur fond sombre */
.chrono-fil.sombre::before{background:rgba(255,255,255,.12)}
.chrono-fil.sombre > div{border-bottom-color:rgba(255,255,255,.09)}
.chrono-fil.sombre > div::before{box-shadow:0 0 0 4px #060607}
.chrono-fil.sombre p{color:#c9ccd6}

/* marches sur fond sombre */
.marches.sombre{border-top-color:rgba(255,255,255,.09)}
.marches.sombre > div{border-right-color:rgba(255,255,255,.09)}
.marches.sombre b{color:#fff}.marches.sombre p{color:#a6aab9}
.marches.sombre > div::before{background:#a7b0d6}

/* ============================================================
   PAGE CONTACT
   ============================================================ */
.contact-grille{display:grid;grid-template-columns:1fr 540px;gap:80px;align-items:start}
.contact-infos{margin-top:56px;border-top:1px solid rgba(255,255,255,.09);max-width:480px}
.contact-infos > div{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.contact-infos b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;color:#fff;margin-top:8px}
.contact-infos p{margin:6px 0 0;font-size:14px;line-height:1.6;color:#8b95b8}
.contact-carte{padding:40px 36px 30px;border-radius:20px;background:rgba(14,15,19,.9);border:1px solid rgba(255,255,255,.10);box-shadow:0 60px 140px rgba(0,0,0,.6)}
.contact-titre{font-size:22px;font-weight:700;letter-spacing:-.02em;color:#fff}
.contact-carte form{margin-top:28px!important}
.contact-carte input:focus,.contact-carte textarea:focus{outline:0;border-color:rgba(255,255,255,.4)!important}
.contact-note{margin-top:16px;font-size:12px;line-height:1.5;color:#6b6b74;text-align:center}
@media (max-width:1240px){.contact-grille{grid-template-columns:1fr}}

/* ============================================================
   ACCUEIL : cinq metiers en vignettes, le studio
   ============================================================ */
.metiers{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:56px}
.metiers a{display:block;color:inherit;text-decoration:none;padding:0 0 8px;border-top:1px solid rgba(12,14,18,.12)}
.metiers figure{margin:22px 0 18px;aspect-ratio:4/3;position:relative;overflow:hidden;border-radius:10px;border:1px solid rgba(12,14,18,.12);background:#08090c;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.metiers figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.metiers a:hover figure{transform:translateY(-4px)}
.metiers b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;color:#0B0C0F;margin-top:10px}
.metiers p{margin:8px 0 0;font-size:14px;line-height:1.55;color:#4d515e}
.studio{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start}

/* ============================================================
   RÉALISATIONS : une ligne par site, vignette large
   ============================================================ */

/* ============================================================
   FLUX VIVANT : la chaîne d'automatisation qui travaille, en HTML
   ============================================================ */
.flux-vivant{aspect-ratio:16/10;background:#0a0b0e;position:relative}
.fv{position:absolute;inset:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#E6E9F1;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px}
.fv-top{display:flex;justify-content:space-between;align-items:center;padding:2% 2.4%;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(10,11,14,.8)}
.fv-top b{display:block;font-size:1.05em;font-weight:700;color:#fff}
.fv-top small{display:block;font-size:.72em;color:#666B7C;margin-top:2px}
.fv-etat{display:flex;align-items:center;gap:7px;font-size:.78em;font-weight:600;color:#8CE1AE;border:1px solid rgba(140,225,174,.3);background:rgba(140,225,174,.09);padding:.45em 1em;border-radius:8px}
.fv-etat i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2.2s infinite}
.fv-canvas{position:absolute;left:2.4%;right:2.4%;top:15%;height:56%}
.fv-fils{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fv-fils path{fill:none;stroke:rgba(170,182,225,.45);stroke-width:1.6;vector-effect:non-scaling-stroke}
.fv-fils path.fv-pointille{stroke-dasharray:5 5;stroke:rgba(170,182,225,.25)}
.fv-jeton{fill:#dfe4f0;filter:drop-shadow(0 0 6px rgba(200,212,245,.9))}
.fv-nd{position:absolute;width:22%;border-radius:12px;padding:1.1em 1.1em .9em;background:linear-gradient(160deg,rgba(24,26,33,.98),rgba(13,14,18,.99));border:1px solid rgba(255,255,255,.10);
  box-shadow:0 20px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07);display:grid;grid-template-columns:auto 1fr;gap:.2em .7em;align-items:center;font-size:clamp(9px,.9vw,13px)}
.fv-ic{width:2.2em;height:2.2em;border-radius:.6em;display:grid;place-items:center;font-size:1em;color:#C8CFE4;background:linear-gradient(150deg,rgba(150,165,215,.26),rgba(90,100,140,.14));box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}
.fv-nd b{display:block;font-size:1em;font-weight:700;color:#fff;line-height:1.2}
.fv-nd small{display:block;font-size:.78em;color:#6E7385;margin-top:2px}
.fv-st{grid-column:1 / -1;margin-top:.6em;padding-top:.6em;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;font-size:.8em;color:#7A8093}
.fv-st em{font-style:normal;color:#C6CBD8;font-weight:600;font-variant-numeric:tabular-nums}
.fv-nd.fv-actif{border-color:rgba(190,202,240,.34);animation:fv-halo 9s ease-in-out infinite}
@keyframes fv-halo{0%,30%{box-shadow:0 20px 40px rgba(0,0,0,.6)}44%,56%{box-shadow:0 20px 40px rgba(0,0,0,.6),0 0 40px rgba(150,165,215,.45)}70%,100%{box-shadow:0 20px 40px rgba(0,0,0,.6)}}
.fv-cond{position:absolute;padding:.35em .8em;border-radius:7px;font-size:clamp(8px,.75vw,11px);font-weight:600;background:rgba(14,15,20,.95);border:1px solid rgba(255,255,255,.11);color:#9AA1B4}
.fv-journal{position:absolute;right:2.4%;bottom:3%;width:30%;border-radius:12px;padding:1em 1.1em;background:linear-gradient(165deg,rgba(20,22,28,.96),rgba(11,12,16,.97));border:1px solid rgba(255,255,255,.09);box-shadow:0 20px 40px rgba(0,0,0,.6);font-size:clamp(8px,.8vw,12px)}
.fv-jt{font-size:.8em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5C6172;margin-bottom:.6em}
.fv-jl{display:flex;gap:.7em;align-items:flex-start;padding:.5em 0;border-top:1px solid rgba(255,255,255,.045);color:#B6BCCB;line-height:1.35}
.fv-jl:first-of-type{border-top:0}
.fv-jl i{width:6px;height:6px;border-radius:50%;background:#8CE1AE;margin-top:.45em;flex:none;box-shadow:0 0 7px rgba(140,225,174,.7)}
.fv-jl.g i{background:rgba(255,255,255,.24);box-shadow:none}
.fv-jl b{color:#fff;font-weight:600}
.fv-jl em{margin-left:auto;font-style:normal;color:#5C6172;font-size:.85em;flex:none;font-variant-numeric:tabular-nums}
.fv-jl:first-of-type{animation:fv-nouveau 9s cubic-bezier(.76,0,.24,1) infinite}
@keyframes fv-nouveau{0%,52%{opacity:0;transform:translateY(-8px)}58%,100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fv-jeton,.fv-jl:first-of-type,.fv-nd.fv-actif,.fv-etat i{animation:none!important}}

/* ============================================================
   PAGES STUDIO : un dispositif par page (dans site.css pour la traversee SPA)
   ============================================================ */

/* accueil : showreel des cinq métiers dans le hero */
.showreel{position:absolute;inset:0;z-index:1;pointer-events:none}
.sr-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s cubic-bezier(.76,0,.24,1)}
.sr-slide.on{opacity:1}
.sr-slide img{position:absolute;top:40px;right:-200px;height:calc(100% - 40px);width:auto;max-width:none;object-fit:cover;object-position:var(--pos);transform:scale(1.04);transition:transform 6s linear}
.sr-slide.on img{transform:scale(1)}
.showreel::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,#080809 0%,#080809 30%,rgba(8,8,9,.9) 44%,rgba(8,8,9,.4) 58%,rgba(8,8,9,0) 70%)}
.showreel::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(8,8,9,.55) 0%,rgba(8,8,9,0) 30%,rgba(8,8,9,0) 70%,#080809 100%)}
.sr-slide span{position:absolute;right:57px;bottom:64px;z-index:3;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#c9ccd6;display:flex;gap:14px;align-items:baseline;opacity:0;transform:translateY(8px);transition:opacity .8s .4s,transform .8s .4s cubic-bezier(.76,0,.24,1)}
.sr-slide.on span{opacity:1;transform:none}
.sr-slide span i{font-style:normal;color:#8b95b8}
.sr-barres{position:absolute;right:57px;bottom:44px;z-index:4;display:flex;gap:6px;pointer-events:auto}
.sr-barres button{width:44px;height:2px;border:0;padding:0;background:rgba(255,255,255,.18);position:relative;overflow:hidden;cursor:pointer}
.sr-barres button::after{content:'';position:absolute;left:0;top:0;bottom:0;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.sr-barres button.on::after{animation:sr-prog 5s linear forwards}
@keyframes sr-prog{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.sr-slide{transition:none}.sr-barres button.on::after{animation:none;transform:scaleX(1)}}

/* services : index au survol, la photo change a droite */
.ix{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;margin-top:56px;align-items:start}

.ix-item{display:grid;grid-template-columns:56px 1fr;gap:4px 20px;padding:28px 0 26px;border-bottom:1px solid rgba(12,14,18,.12);color:inherit;text-decoration:none;position:relative;transition:padding-left .5s cubic-bezier(.76,0,.24,1)}
.ix-item .typo-n{grid-row:1 / span 3;padding-top:8px}
.ix-item b{font-size:32px;font-weight:700;letter-spacing:-.03em;color:#0B0C0F;line-height:1.1;transition:color .3s}
.ix-item p{margin:8px 0 0;font-size:15px;line-height:1.6;color:#4d515e;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s cubic-bezier(.76,0,.24,1),opacity .4s}
.ix-item em{font-style:normal;font-size:14px;font-weight:600;color:#0B0C0F;margin-top:10px;opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s}
.ix-item.on{padding-left:12px}
.ix-item.on p{max-height:120px;opacity:1}
.ix-item.on em{opacity:1;transform:none}
.ix-item:not(.on) b{color:#7A8090}
.ix-item::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:0;background:#0B0C0F;transition:width .8s cubic-bezier(.76,0,.24,1)}
.ix-item.on::before{width:100%}

.ix-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1s cubic-bezier(.76,0,.24,1),transform 1.6s cubic-bezier(.16,1,.3,1)}
.ix-img.on{opacity:1;transform:scale(1)}
.ix-num{position:absolute;right:22px;bottom:16px;height:64px;overflow:hidden;font-size:56px;font-weight:800;letter-spacing:-.04em;color:rgba(255,255,255,.9);line-height:64px;font-variant-numeric:tabular-nums;text-shadow:0 10px 30px rgba(0,0,0,.5)}
.ix-num span{display:block;transition:transform .7s cubic-bezier(.76,0,.24,1)}
@media (max-width:1240px){.ix{grid-template-columns:1fr}}

/* process : defilement narratif, panneau collant a droite */

.sc-etape{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;border-top:1px solid rgba(12,14,18,.12);opacity:.35;transition:opacity .6s}
.sc-etape.on{opacity:1}
.sc-etape b{display:block;font-size:44px;font-weight:700;letter-spacing:-.035em;color:#0B0C0F;margin-top:14px;line-height:1.05}
.sc-etape p{margin:18px 0 0;font-size:17px;line-height:1.65;color:#4d515e;max-width:44ch}

.sc-carte{position:absolute;inset:0;padding:34px;opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.76,0,.24,1),transform .7s cubic-bezier(.76,0,.24,1);display:flex;flex-direction:column;gap:22px}
.sc-carte.on{opacity:1;transform:none}

.sc-duree{margin-left:auto;font-style:normal;font-variant-numeric:tabular-nums;color:#8CE1AE;font-weight:600}

@media (max-width:1240px){.sc-etape{min-height:0}}

/* tarifs : quatre curseurs qui reecrivent un devis */
.curseurs{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:56px;align-items:start}

.cu{display:grid;grid-template-columns:1fr;gap:14px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.09);cursor:pointer}

.cu input{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:rgba(255,255,255,.14);outline:0;margin:6px 0}
.cu input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px rgba(255,255,255,.08);cursor:pointer;transition:box-shadow .3s}
.cu input:hover::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(255,255,255,.12)}
.cu input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:0}
.cu em{font-style:normal;font-size:14px;color:#a6aab9}
.devis{position:sticky;top:120px;border-radius:16px;background:#F3F4F6;color:#0B0C0F;padding:32px 34px;box-shadow:0 40px 90px rgba(0,0,0,.5);font-family:'Plus Jakarta Sans',system-ui,sans-serif}

@media (max-width:1240px){.curseurs{grid-template-columns:1fr}.devis{position:static}}

/* realisations : mosaique editoriale, tailles variees, legende au survol */

/* la racine coupe en clip, pas en hidden : sinon position:sticky ne colle jamais */
body > div[style*="background:#050505"]{overflow:clip!important}

/* page strategie : les quatre marches, lignes sur fond sombre */
.marches{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid rgba(12,14,18,.12)}
.marches > div{padding:32px 28px 28px 0;border-right:1px solid rgba(12,14,18,.12);margin-right:28px;position:relative}
.marches > div:last-child{border-right:0;margin-right:0}
.marches > div::before{content:'';position:absolute;left:0;top:0;height:2px;width:0;background:#4E5A8C;transition:width 1.2s cubic-bezier(.76,0,.24,1)}
.marches > div.rv-in::before{width:56px}
.marches > div:nth-child(1).rv-in::before{transition-delay:.1s}.marches > div:nth-child(2).rv-in::before{transition-delay:.4s}.marches > div:nth-child(3).rv-in::before{transition-delay:.7s}.marches > div:nth-child(4).rv-in::before{transition-delay:1s}
.marches b{display:block;font-size:24px;font-weight:700;letter-spacing:-.025em;color:#0B0C0F;margin-top:16px}
.marches p{margin:12px 0 0;font-size:15px;line-height:1.6;color:#4d515e}
.typo-lignes.sombre .typo-l h3{color:#fff}.typo-lignes.sombre .typo-l p{color:#a6aab9}
.hero-photo-strat img{right:-160px;top:20px;height:calc(100% - 20px)}

/* page branding : galerie sur fond clair */
.typo-galerie.claire{border-top-color:rgba(12,14,18,.12)}
.typo-galerie.claire img{border-color:rgba(12,14,18,.12)}
.typo-galerie.claire span{color:#4d515e}
.typo-galerie.claire a:hover img{border-color:rgba(12,14,18,.4)}
.hero-photo-brand img{right:-120px;top:0;height:100%}

/* ============================================================
   PAGE SERVICES : cinq blocs texte + photo, en alternance
   ============================================================ */
.typo-hero-texte{min-height:0}

/* chrono sur fond sombre */
.chrono-fil.sombre::before{background:rgba(255,255,255,.12)}
.chrono-fil.sombre > div{border-bottom-color:rgba(255,255,255,.09)}
.chrono-fil.sombre > div::before{box-shadow:0 0 0 4px #060607}
.chrono-fil.sombre p{color:#c9ccd6}

/* marches sur fond sombre */
.marches.sombre{border-top-color:rgba(255,255,255,.09)}
.marches.sombre > div{border-right-color:rgba(255,255,255,.09)}
.marches.sombre b{color:#fff}.marches.sombre p{color:#a6aab9}
.marches.sombre > div::before{background:#a7b0d6}

/* ============================================================
   RÉALISATIONS : une ligne par site, vignette large
   ============================================================ */

/* ============================================================
   ACCUEIL : cinq metiers en vignettes, le studio
   ============================================================ */
.metiers{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:56px}
.metiers a{display:block;color:inherit;text-decoration:none;padding:0 0 8px;border-top:1px solid rgba(12,14,18,.12)}
.metiers figure{margin:22px 0 18px;aspect-ratio:4/3;position:relative;overflow:hidden;border-radius:10px;border:1px solid rgba(12,14,18,.12);background:#08090c;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.metiers figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.metiers a:hover figure{transform:translateY(-4px)}
.metiers b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;color:#0B0C0F;margin-top:10px}
.metiers p{margin:8px 0 0;font-size:14px;line-height:1.55;color:#4d515e}
.studio{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start}

/* ============================================================
   SERVICES : sommaire editorial, l'image suit le curseur
   ============================================================ */
.sommaire{position:relative;margin-top:64px;border-top:1px solid rgba(12,14,18,.14)}
.som-l{display:grid;grid-template-columns:72px 1fr 1fr 48px;gap:24px;align-items:baseline;padding:40px 0;border-bottom:1px solid rgba(12,14,18,.14);color:inherit;text-decoration:none;position:relative;transition:padding .5s cubic-bezier(.76,0,.24,1)}

.som-l::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:#0B0C0F;transition:width .8s cubic-bezier(.76,0,.24,1)}
.som-l:hover{padding-left:16px}
.som-l:hover::after{width:100%}

.som-img{position:absolute;left:0;top:0;width:360px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.92) rotate(-2deg);z-index:5;box-shadow:0 40px 90px rgba(12,14,18,.35);border:1px solid rgba(12,14,18,.12);background:#08090c;transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1)}
.som-img.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
.som-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:none){.som-img{display:none}.som-l{grid-template-columns:72px 1fr 1fr}}

.hero-photo-brand img{right:-120px;top:0;height:100%}

/* ============================================================
   SERVICES : cartes empilees au defilement (chaque metier recouvre le precedent)
   ============================================================ */
.pile{display:flex;flex-direction:column;gap:0}
.pile-c{position:sticky;top:110px;margin-bottom:24px;will-change:transform}
.pile-c:last-child{margin-bottom:0}
.pile-l{display:grid;grid-template-columns:1fr 1.1fr;min-height:520px;border-radius:22px;overflow:hidden;background:#0B0C10;border:1px solid rgba(255,255,255,.10);box-shadow:0 -20px 60px rgba(0,0,0,.45),0 40px 100px rgba(0,0,0,.6);color:inherit;text-decoration:none;transform-origin:50% 0;transition:box-shadow .4s}
.pile-txt{padding:52px 56px;display:flex;flex-direction:column;justify-content:center;gap:0}

.pile-txt h3{margin:18px 0 0;font-size:44px;font-weight:700;letter-spacing:-.035em;line-height:1.05;color:#fff}
.pile-txt p{margin:18px 0 0;font-size:16px;line-height:1.65;color:#a6aab9;max-width:44ch}

.pile-txt em{font-style:normal;margin-top:30px;font-size:15px;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.3);align-self:flex-start;padding-bottom:3px;transition:border-color .3s}
.pile-l:hover em{border-color:#fff}

/* la carte du dessous s'eloigne quand la suivante arrive (pilote par GSAP, repli CSS) */

@media (max-width:1240px){.pile-l{grid-template-columns:1fr}.pile-c{position:static}}
@media (prefers-reduced-motion:reduce){.pile-c{position:static}}

.hero-photo-brand img{right:-60px;top:0;height:100%}
.hero-photo-brand::before{background:linear-gradient(90deg,#080809 0%,#080809 26%,rgba(8,8,9,.85) 40%,rgba(8,8,9,.3) 54%,rgba(8,8,9,0) 64%)}

/* ============================================================
   SERVICES : cinq metiers en lettres geantes en contour (DA du pied de page) ;
   celui qui est actif se remplit de sa photo a travers les lettres
   ============================================================ */
.geant{margin-top:56px;border-top:1px solid rgba(255,255,255,.09)}
.geant-l{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09);color:inherit;text-decoration:none;position:relative}
.geant-mot{position:relative;display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(64px,7.6vw,112px);line-height:1;letter-spacing:-.045em;white-space:nowrap;padding:6px 0 10px}
.geant-t,.geant-f{display:block}
.geant-t{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.26);transition:-webkit-text-stroke-color .6s cubic-bezier(.76,0,.24,1),transform .9s cubic-bezier(.76,0,.24,1)}
.geant-f{position:absolute;inset:6px 0 10px;color:transparent;background-image:var(--img);background-size:130% auto;background-position:var(--pos,50% 50%);-webkit-background-clip:text;background-clip:text;opacity:0;transform:translateX(0);transition:opacity .8s cubic-bezier(.76,0,.24,1),transform .9s cubic-bezier(.76,0,.24,1)}
.geant-l.on .geant-t{-webkit-text-stroke-color:rgba(255,255,255,0);transform:translateX(10px)}
.geant-l.on .geant-f{opacity:1;transform:translateX(10px);animation:geant-pan 14s linear infinite alternate}
@keyframes geant-pan{from{background-position:calc(var(--pos-x,60%) - 6%) 50%}to{background-position:calc(var(--pos-x,60%) + 6%) 50%}}
.geant-i{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;opacity:.35;transition:opacity .6s}
.geant-l.on .geant-i{opacity:1}
.geant-n{font-size:12px;font-weight:600;letter-spacing:.24em;color:#8b95b8;font-variant-numeric:tabular-nums}
.geant-d{display:block;overflow:hidden;font-size:14.5px;line-height:1.5;color:#c9ccd6}
.geant-d > span{display:block;transform:translateY(110%);transition:transform .7s cubic-bezier(.76,0,.24,1)}
.geant-l.on .geant-d > span{transform:none}
.geant-fl{font-size:22px;color:#fff;opacity:0;transform:translateX(-10px);transition:opacity .5s,transform .6s cubic-bezier(.76,0,.24,1)}
.geant-l.on .geant-fl{opacity:1;transform:none}
.geant-l::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));transition:width 1s cubic-bezier(.76,0,.24,1)}
.geant-l.on::after{width:100%}
@media (max-width:1240px){.geant-l{grid-template-columns:1fr}.geant-i{opacity:1}.geant-d > span{transform:none}}
@media (prefers-reduced-motion:reduce){.geant-f{animation:none!important}}

.hero-photo-brand img{right:-40px;top:0;height:100%}
.hero-photo-brand::before{background:linear-gradient(90deg,#080809 0%,#080809 34%,rgba(8,8,9,.9) 46%,rgba(8,8,9,.35) 58%,rgba(8,8,9,0) 68%)}
/* lettres geantes : la photo doit se lire a travers les lettres */
.geant-f{filter:brightness(1.75) contrast(1.05) saturate(1.1);background-size:170% auto}
.geant-l.on .geant-t{-webkit-text-stroke-color:rgba(255,255,255,.5)}
/* branding : la facade entre dans le fondu, pas de bord franc */
.hero-photo-brand img{right:-190px}
.hero-photo-brand::before{background:linear-gradient(90deg,#080809 0%,#080809 42%,rgba(8,8,9,.92) 50%,rgba(8,8,9,.4) 60%,rgba(8,8,9,0) 70%)}

.hero-photo-brand::before{background:linear-gradient(90deg,#080809 0%,#080809 56%,rgba(8,8,9,.86) 62%,rgba(8,8,9,.3) 70%,rgba(8,8,9,0) 78%)}
/* lettres geantes : la ligne active passe en blanc plein, pas de photo dans les lettres */
.geant-f{display:none}
.geant-t{color:transparent;transition:color .7s cubic-bezier(.76,0,.24,1),-webkit-text-stroke-color .7s cubic-bezier(.76,0,.24,1),transform .9s cubic-bezier(.76,0,.24,1)}
.geant-l.on .geant-t{color:#fff;-webkit-text-stroke-color:rgba(255,255,255,0);transform:translateX(10px)}

/* ============================================================
   BRANDING : la devanture + les pieces du systeme de marque posees dessus
   ============================================================ */
.hero-photo-brand{pointer-events:none}
.marque-piece{position:absolute;z-index:3;font-family:'Plus Jakarta Sans',system-ui,sans-serif;opacity:0;transform:translateY(18px);transition:opacity 1s cubic-bezier(.76,0,.24,1),transform 1.1s cubic-bezier(.76,0,.24,1)}
.hero-photo-brand.vu .marque-piece{opacity:1;transform:none}
.hero-photo-brand.vu .marque-post{transition-delay:.5s}.hero-photo-brand.vu .marque-carte{transition-delay:.8s}.hero-photo-brand.vu .marque-palette{transition-delay:1.05s}
/* post instagram */
.marque-post{right:clamp(40px,6vw,120px);bottom:70px;width:250px;border-radius:14px;background:#fff;color:#111;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.08);overflow:hidden}
.mp-tete{display:flex;align-items:center;gap:9px;padding:10px 12px}
.mp-av{width:28px;height:28px;border-radius:50%;background:#2B1B14;position:relative;flex:none}
.mp-av::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;border:2px solid #F3E9DC;border-radius:50%;translate:-50% -50%}
.mp-tete b{display:block;font-size:11.5px;font-weight:700}.mp-tete small{display:block;font-size:10px;color:#777}
.mp-tete > span{margin-left:auto;font-size:12px;color:#777;letter-spacing:1px}
.mp-img{aspect-ratio:1/1;background:#eee;overflow:hidden}.mp-img img{display:block;width:100%;height:100%;object-fit:cover}
.mp-actions{display:flex;gap:12px;padding:10px 12px 6px}
.mp-actions svg{width:19px;height:19px;fill:none;stroke:#111;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mp-actions svg:first-child{fill:#e0245e;stroke:#e0245e}
.mp-likes{padding:0 12px;font-size:11.5px;font-weight:700}
.mp-txt{padding:4px 12px 12px;font-size:11px;line-height:1.4;color:#222}.mp-txt b{font-weight:700}
/* carte de visite */
.marque-carte{left:clamp(38%,46vw,52%);bottom:96px;width:230px;aspect-ratio:85/55;border-radius:8px;background:#F3E9DC;color:#2B1B14;padding:18px 20px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 0 0 1px rgba(43,27,20,.08);transform-origin:left bottom;rotate:-4deg}
.mp-marque{position:absolute;right:18px;top:16px;width:26px;height:26px;border:2.5px solid #2B1B14;border-radius:50%}
.mp-marque::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#2B1B14;translate:-50% -50%}
.marque-carte b{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;letter-spacing:.06em}
.marque-carte small{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#7a5a4a;margin-top:4px;font-weight:600}
/* palette */
.marque-palette{right:clamp(40px,6vw,120px);top:120px;display:flex;gap:6px;align-items:center;padding:8px;border-radius:10px;background:rgba(10,10,12,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12)}
.marque-palette span{width:26px;height:26px;border-radius:6px;display:block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.marque-palette small{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#c9ccd6;padding:0 6px 0 4px;font-weight:600}
@media (max-width:1240px){.marque-carte,.marque-palette{display:none}.marque-post{width:200px}}
@media (prefers-reduced-motion:reduce){.marque-piece{opacity:1;transform:none}}
/* branding : la devanture patisserie, cadrage et fondu */
.hero-photo-brand img{right:-40px;top:0;height:100%}
.hero-photo-brand::before{background:linear-gradient(90deg,#080809 0%,#080809 30%,rgba(8,8,9,.92) 40%,rgba(8,8,9,.45) 52%,rgba(8,8,9,0) 64%)}
/* les pieces de marque ne doivent PAS heriter du cadrage de l'image de fond */
.hero-photo-brand > img{right:-40px;top:0;height:100%;width:auto}
.marque-piece img{position:static!important;right:auto!important;top:auto!important;width:100%!important;height:100%!important;object-fit:cover}
/* composition : post en haut a droite, carte au centre, palette sous le post */
.marque-post{right:clamp(40px,5vw,96px);top:118px;bottom:auto;width:264px}
.marque-carte{right:clamp(360px,27vw,420px);bottom:110px;left:auto;width:246px}
.marque-palette{right:clamp(40px,5vw,96px);top:auto;bottom:110px}
.marque-carte{width:212px;bottom:132px;right:clamp(370px,28vw,432px);rotate:-5deg}
.marque-carte b{font-size:20px}
/* ============================================================
   BRANDING : les pieces en une seule colonne alignee a droite,
   meme largeur, meme ombre, meme rythme : un "kit" et non trois taches
   ============================================================ */
.marque-piece{right:clamp(40px,5.5vw,104px);left:auto;rotate:0deg!important;transform-origin:center}
.marque-post{top:120px;width:268px;border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.marque-carte{top:566px;bottom:auto;width:268px;aspect-ratio:auto;height:106px;padding:14px 18px;border-radius:12px;
  display:grid;grid-template-columns:1fr auto;align-items:end;box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 0 0 1px rgba(43,27,20,.10)}
.marque-carte b{font-size:19px;line-height:1.1}
.marque-carte small{margin-top:3px}
.mp-marque{position:static;grid-row:1 / span 2;align-self:center;width:30px;height:30px;border-width:2.5px}
.marque-palette{top:700px;bottom:auto;width:268px;box-sizing:border-box;justify-content:flex-start;
  border-radius:12px;padding:10px 12px;background:rgba(12,12,14,.62);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.marque-palette span{width:28px;height:28px;border-radius:7px}
.marque-palette small{margin-left:auto;padding:0}
/* une legende discrete qui nomme le cas */
.marque-legende{position:absolute;right:clamp(40px,5.5vw,104px);top:88px;z-index:3;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a9adba;opacity:0;transition:opacity .9s .3s}
.hero-photo-brand.vu .marque-legende{opacity:1}
@media (max-width:1400px){.marque-carte{top:548px}.marque-palette{top:678px}}
@media (max-width:1240px){.marque-carte,.marque-palette,.marque-legende{display:none}}
.marque-carte > span{display:block}
.marque-carte b,.marque-carte small{display:block}
.marque-carte{align-items:center;gap:14px;height:98px}
/* devanture patisserie : cadrage sur la vitrine, fondu plus court a gauche */
.hero-photo-brand > img{right:-120px;top:0;height:100%;width:auto;object-position:60% 50%}
.hero-photo-brand::before{background:linear-gradient(90deg,#080809 0%,rgba(8,8,9,.97) 18%,rgba(8,8,9,.88) 28%,rgba(8,8,9,.45) 40%,rgba(8,8,9,.12) 52%,rgba(8,8,9,0) 62%)}
.hero-photo-brand::after{background:linear-gradient(180deg,rgba(8,8,9,.5) 0%,rgba(8,8,9,0) 26%,rgba(8,8,9,0) 68%,#080809 100%)}
/* le signe des pieces reprend celui de l'enseigne : un anneau epais avec une tige */
.mp-marque{border-width:3px}
.mp-marque::after{width:3px;height:13px;border-radius:2px;top:44%;background:#2B1B14}
.mp-av::after{width:11px;height:11px;border:2px solid #F3E9DC;border-radius:50%}
.mp-av::before{content:'';position:absolute;left:50%;top:52%;width:2px;height:8px;background:#F3E9DC;translate:-50% 0;z-index:1}
/* carte de visite : texte a gauche, signe a droite, alignement propre */
.marque-carte{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left}
.marque-carte > span{flex:1}
.marque-carte b{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:500;letter-spacing:.05em;line-height:1.05}
.marque-carte small{font-size:8.5px;letter-spacing:.2em}
.mp-marque{grid-row:auto;flex:none;width:32px;height:32px;position:relative}
/* cadrage : l'enseigne ne doit pas passer derriere le titre */
.hero-photo-brand > img{right:-60px;object-position:70% 50%}
.marque-carte{flex-direction:row!important;justify-content:space-between!important;align-items:center!important;text-align:left}
.marque-carte > span{text-align:left}

/* ============================================================
   HEROS : le kit de pieces (colonne a droite) generalise a toutes les pages
   ============================================================ */
.hero-photo .kit{position:absolute;right:clamp(40px,5.5vw,104px);top:88px;bottom:64px;z-index:3;width:268px;
  display:flex;flex-direction:column;justify-content:center;gap:14px;pointer-events:none}
.kit-lbl{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a9adba;margin-bottom:2px;opacity:0;transition:opacity .9s .25s}
.hero-photo.vu .kit-lbl{opacity:1}
.kp{border-radius:14px;opacity:0;transform:translateY(18px);transition:opacity 1s cubic-bezier(.76,0,.24,1),transform 1.1s cubic-bezier(.76,0,.24,1);
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07);overflow:hidden;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.hero-photo.vu .kp{opacity:1;transform:none}
.hero-photo.vu .kp:nth-of-type(1){transition-delay:.45s}.hero-photo.vu .kp:nth-of-type(2){transition-delay:.7s}.hero-photo.vu .kp:nth-of-type(3){transition-delay:.95s}
/* piece sombre : verre */
.kp-nuit{background:rgba(12,13,17,.72);backdrop-filter:blur(14px);color:#E8E9EE;padding:14px 16px}
.kp-nuit .kt{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8b95b8}
.kp-nuit b{display:block;font-size:15px;font-weight:600;margin-top:6px;line-height:1.3}
.kp-nuit p{margin:5px 0 0;font-size:12.5px;line-height:1.45;color:#a6aab9}
.kp-nuit .kv{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.kp-nuit .kv em{font-style:normal;font-size:26px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kp-nuit .kv span{font-size:12px;font-weight:600;color:#8CE1AE}
/* piece claire : papier */
.kp-jour{background:#F3F4F6;color:#0B0C0F;padding:14px 16px}
.kp-jour .kt{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7A8090}
.kp-jour b{display:block;font-size:15px;font-weight:700;margin-top:6px}
.kp-jour p{margin:5px 0 0;font-size:12.5px;line-height:1.45;color:#4d515e}
/* barre de progression / mini graphe */
.kp-barres{display:flex;align-items:flex-end;gap:4px;height:34px;margin-top:10px}
.kp-barres i{flex:1;border-radius:2px 2px 0 0;background:rgba(185,194,230,.35)}
.kp-barres i.on{background:#DFE3F2}
.kp-fil{margin-top:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.kp-fil i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#B9C2E6,#E4E8F4);width:0;transition:width 1.6s cubic-bezier(.76,0,.24,1) 1.1s}
.hero-photo.vu .kp-fil i{width:var(--w,64%)}
/* pastille etat */
.kp-etat{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:#8CE1AE;border:1px solid rgba(140,225,174,.3);background:rgba(140,225,174,.1);padding:3px 9px;border-radius:999px;margin-top:9px}
.kp-etat i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pulse 2.2s infinite}
@media (max-width:1400px){.hero-photo .kit{width:238px}}
@media (max-width:1240px){.hero-photo .kit{display:none}}
@media (prefers-reduced-motion:reduce){.kp,.kit-lbl{opacity:1;transform:none}}

/* cadrages par page : chaque scene est cadree sur son ecran */

.hero-photo-saas > img,.typo-hero .hero-photo > img{width:auto}
.hero-photo-auto > img{right:-30px;top:0;height:100%;width:auto;object-position:74% 46%}
.hero-photo-auto::before{background:linear-gradient(90deg,#080809 0%,#080809 30%,rgba(8,8,9,.9) 42%,rgba(8,8,9,.35) 55%,rgba(8,8,9,0) 66%)}
.hero-photo-strat > img{right:-30px;top:0;height:100%;width:auto;object-position:56% 50%}
.hero-photo-strat::before{background:linear-gradient(90deg,#080809 0%,#080809 28%,rgba(8,8,9,.86) 40%,rgba(8,8,9,.3) 54%,rgba(8,8,9,0) 66%)}
.hero-photo-saas > img{right:-30px;top:0;height:100%;object-position:64% 50%}
.hero-photo-saas::before{background:linear-gradient(90deg,#080809 0%,#080809 30%,rgba(8,8,9,.9) 42%,rgba(8,8,9,.35) 55%,rgba(8,8,9,0) 66%)}
/* les appareils restent a gauche du kit */

.hero-photo-auto > img{object-position:56% 46%}

.hero-photo-strat > img{object-position:38% 44%}
.hero-photo-saas > img{object-position:56% 50%}
/* decalage reel : l'image n'est pas recadree (width:auto), on joue sur right */

.hero-photo-auto > img{right:-400px}

.hero-photo-strat > img{right:-60px}
.hero-photo-saas > img{right:-40px}
/* la zone image s'arrete avant le kit, avec un fondu, quand le sujet est au bord droit */
.hero-photo-accueil,.hero-photo-auto,.hero-photo-site{right:300px;
  -webkit-mask-image:linear-gradient(90deg,#000 0 74%,transparent 100%);mask-image:linear-gradient(90deg,#000 0 74%,transparent 100%)}

.hero-photo-auto > img{right:-30px}

/* le masque et le decalage portent sur l'image, jamais sur le conteneur (le kit y vit) */
.hero-photo-accueil,.hero-photo-auto,.hero-photo-site{right:0;-webkit-mask-image:none;mask-image:none}

.hero-photo-auto > img{right:300px;
  -webkit-mask-image:linear-gradient(90deg,#000 0 93%,transparent 100%);mask-image:linear-gradient(90deg,#000 0 93%,transparent 100%)}
/* plus de filet decoratif devant l'eyebrow des heros */
.typo-hero .eyebrow::before,section:first-of-type .eyebrow::before{display:none!important}

/* ============================================================
   AUDIT 11/09 — corrections
   ============================================================ */
/* 1. plus de filet decoratif devant les libelles : il doublait le tiret du texte (« — 01 — ») */
.eyebrow::before{display:none!important}
/* 2. les titres de hero sont d'un blanc uniforme : plus de degrade qui grise la derniere ligne */
section:first-of-type h1,.typo-hero h1{background:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important}
/* 3. l'ecran en parallaxe ne remonte plus dans le titre */
.typo-ecran{margin-top:88px}
/* 4. la regle du haut a la meme largeur que les lignes */
.typo-lignes-2{max-width:900px}
.typo-lignes-2 .typo-l{max-width:none}
/* 5. flux : les deux noeuds du haut ne se touchent plus */
.fv-nd.n4{width:18.5%!important}
.fv-nd.n5{left:87.6%!important;width:12%!important}
/* 6. contrastes : horodatages du journal et libelles des scenes */
.fv-jl em{color:#8A8F9E}
.fv-top small{color:#8A8F9E}
.champ span{color:#5f6474;font-size:10px}
.marque-carte small{color:#6b4d3e}
.marque-palette small{color:#d8dbe4}
/* 7. scene « vous oubliez de relancer » : les jours passent, visibles */
.sc-relance .rel-barre::before{content:'J+1';position:absolute;left:0;top:10px;font-size:9.5px;font-weight:600;letter-spacing:.1em;color:#7A8090}
.sc-relance .rel-barre::after{content:'J+21';position:absolute;right:0;top:10px;font-size:9.5px;font-weight:600;letter-spacing:.1em;color:#7A8090}
.sc-relance .rel-l{top:30px}
.sc-relance .rel-barre{top:78px}
/* 8. a 1920, le telephone ne passe pas sous le kit */
@media (min-width:1700px){.hero-photo-saas > img{right:60px}}

/* ============================================================
   OUVERTURE v5 — quatre temps, changements de rythme
   ============================================================ */

/* scene : grille + mot, centres */
.ov-scene{position:absolute;top:50%;left:50%;translate:-50% -50%;display:flex;align-items:center;gap:28px;z-index:5;transition:transform .68s cubic-bezier(.6,0,.22,1)}
.ov-grille{position:relative;width:104px;height:104px;flex:none}
.ov-grille b{position:absolute;width:28px;height:28px;border-radius:8px;background:#3c3c3c;opacity:0;
  transform:translate(var(--dx),var(--dy)) scale(2.4);will-change:transform,opacity;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .6s ease;box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10)}
.ov-grille b.clair{background:#fff}

/* mot : chaque lettre roule depuis le bas, comme la nav */
.ov-mot{display:flex;font-family:'Poppins',sans-serif;font-size:56px;font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1;height:60px;align-items:center}
.ov-l{display:block;overflow:hidden;height:64px;line-height:64px}
.ov-i{display:block;transform:translateY(110%);transition:transform .62s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--i) * 55ms)}

/* filet : se trace vite, se retire vite */

/* repere : la respiration */

/* ouverture v5 : l'arrivee du hero ne bouge pas l'en-tete (la grille s'y pose) */
html.ov-entre body > div[style*="background:#050505"] > header{animation:none!important;transform:none!important;filter:none!important}
html.ov-entre body > div[style*="background:#050505"]{animation:cam-entre .7s cubic-bezier(.16,1,.3,1) both;transform-origin:50% 30%}
html.ov-entre header{position:relative;z-index:50}
/* le zoom d'arrivee porte sur les sections, jamais sur la racine (l'en-tete doit rester fixe) */
html.ov-entre body > div[style*="background:#050505"]{animation:none!important;transform:none!important;filter:none!important}
html.ov-entre body > div[style*="background:#050505"] > *:not(header){animation:cam-entre .7s cubic-bezier(.16,1,.3,1) both;transform-origin:50% 20%}

/* ============================================================
   OUVERTURE v6 — le plan technique : grille, reticule, construction, ouverture
   ============================================================ */
.ouverture.v6{background:transparent;perspective:none;display:block;overflow:hidden;pointer-events:none}

/* deux panneaux qui portent la grille fine, et qui s'ecarteront le long du filet */
.ov6-panneau{position:absolute;left:0;right:0;height:50%;background:#050505;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,200px 200px,200px 200px;background-position:center center;
  transition:transform .78s cubic-bezier(.76,0,.24,1)}
.ov6-panneau::before{content:'';position:absolute;inset:0;background:#050505;opacity:1;transition:opacity 1.2s ease}
.ouverture.v6.t1 .ov6-panneau::before{opacity:0}
.ov6-panneau.haut{top:0;background-position:center bottom}
.ov6-panneau.bas{bottom:0;background-position:center top}
.ouverture.v6.ouvre .ov6-panneau.haut{transform:translateY(-100%)}
.ouverture.v6.ouvre .ov6-panneau.bas{transform:translateY(100%)}
/* reticule : deux cheveux qui se tracent depuis le centre */
.ov6-reticule i{position:absolute;background:rgba(255,255,255,.16);transition:transform .9s cubic-bezier(.76,0,.24,1)}
.ov6-reticule .h{left:0;right:0;top:50%;height:1px;transform:scaleX(0)}
.ov6-reticule .v{top:0;bottom:0;left:50%;width:1px;transform:scaleY(0)}
.ouverture.v6.t1 .ov6-reticule .h{transform:scaleX(1)}
.ouverture.v6.t1 .ov6-reticule .v{transform:scaleY(1)}
.ouverture.v6.sortie .ov6-reticule .h{transform:scaleX(0);transition-duration:.5s}
.ouverture.v6.sortie .ov6-reticule .v{transform:scaleY(0);transition-duration:.5s}
/* reperes de coin */
.ov6-coins i{position:absolute;width:18px;height:18px;border:1px solid rgba(255,255,255,.28);opacity:0;transition:opacity .6s ease .5s}
.ov6-coins i:nth-child(1){left:32px;top:32px;border-right:0;border-bottom:0}
.ov6-coins i:nth-child(2){right:32px;top:32px;border-left:0;border-bottom:0}
.ov6-coins i:nth-child(3){left:32px;bottom:32px;border-right:0;border-top:0}
.ov6-coins i:nth-child(4){right:32px;bottom:32px;border-left:0;border-top:0}
.ouverture.v6.t1 .ov6-coins i{opacity:1}
.ouverture.v6.sortie .ov6-coins i{opacity:0;transition:opacity .3s ease}
/* scene : grille + mot */
.ov-scene{position:absolute;top:50%;left:50%;translate:-50% -50%;display:flex;align-items:center;gap:28px;z-index:5;transition:transform .72s cubic-bezier(.6,0,.22,1)}
.ouverture.v6 .ov-grille{position:relative;width:104px;height:104px;flex:none}
/* lignes de construction autour des cellules : 2 verticales, 2 horizontales, qui se tracent puis se retirent */
.ov-grille i{position:absolute;background:rgba(255,255,255,.22);transition:transform .7s cubic-bezier(.76,0,.24,1)}
.ov-grille .c1{left:33px;top:-60px;bottom:-60px;width:1px;transform:scaleY(0)}
.ov-grille .c2{left:71px;top:-60px;bottom:-60px;width:1px;transform:scaleY(0);transition-delay:.06s}
.ov-grille .c3{top:33px;left:-60px;right:-60px;height:1px;transform:scaleX(0);transition-delay:.12s}
.ov-grille .c4{top:71px;left:-60px;right:-60px;height:1px;transform:scaleX(0);transition-delay:.18s}
.ouverture.v6.t2 .ov-grille i{transform:none}
.ouverture.v6.t3 .ov-grille i{opacity:0;transition:opacity .5s ease .2s}
/* les carreaux se posent en place, sans voyager */
.ouverture.v6 .ov-grille b{position:absolute;width:28px;height:28px;border-radius:7px;background:#3c3c3c;opacity:0;transform:scale(.2);
  transition:transform .55s cubic-bezier(.16,1,.3,1) calc(.32s + var(--d,0s)),opacity .3s ease calc(.32s + var(--d,0s));box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.ouverture.v6 .ov-grille b.clair{background:#fff}
.ouverture.v6.t2 .ov-grille b{opacity:1;transform:none}
/* mot */
.ouverture.v6 .ov-mot{display:flex;font-family:'Poppins',sans-serif;font-size:56px;font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1;height:60px;align-items:center}
.ouverture.v6 .ov-l{display:block;overflow:hidden;height:64px;line-height:64px}
.ouverture.v6 .ov-i{display:block;transform:translateY(110%);transition:transform .62s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--i) * 55ms)}
.ouverture.v6.t3 .ov-i{transform:none}
.ouverture.v6.sortie .ov-i{transform:translateY(-112%);transition:transform .42s cubic-bezier(.76,0,.24,1);transition-delay:calc((5 - var(--i)) * 32ms)}
/* filet : sur la ligne d'ouverture */
.ov6-filet{position:absolute;left:50%;top:50%;translate:-50% -50%;width:320px;height:1px;background:#fff;opacity:.9;
  transform:scaleX(0);transition:transform .7s cubic-bezier(.76,0,.24,1) .15s;z-index:6}
.ouverture.v6.t1 .ov6-filet{transform:scaleX(1)}
.ouverture.v6.t2 .ov6-filet{transform:scaleX(1) translateY(74px);transition:transform .7s cubic-bezier(.76,0,.24,1)}
.ouverture.v6.sortie .ov6-filet{transform:scaleX(1) translateY(0);transition:transform .5s cubic-bezier(.76,0,.24,1)}
.ouverture.v6.ouvre .ov6-filet{opacity:0;transition:opacity .25s ease .2s}
/* releves : lieu a gauche, coordonnees a droite */
.ov6-releve{position:absolute;bottom:40px;display:flex;align-items:center;gap:12px;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#8b95b8;font-variant-numeric:tabular-nums;opacity:0;transform:translateY(6px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.ov6-releve.g{left:44px}.ov6-releve.d{right:44px}
.ov6-releve i{width:22px;height:1px;background:rgba(139,149,184,.55)}
.ouverture.v6.t4 .ov6-releve{opacity:1;transform:none}
.ouverture.v6.t4 .ov6-releve.d{transition-delay:.12s}
.ouverture.v6.sortie .ov6-releve{opacity:0;transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){.ouverture.v6{display:none!important}}

/* ---- v6, precision : le filet est la ligne d'ouverture, du debut a la fin ---- */
.ouverture.v6 .ov-scene{top:calc(50% - 66px);transition:transform .78s cubic-bezier(.76,0,.24,1)}
.ouverture.v6 .ov6-filet{top:50%;translate:-50% -50%;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.76,0,.24,1) .15s}
.ouverture.v6.t2 .ov6-filet,.ouverture.v6.sortie .ov6-filet{transform:scaleX(1);transition:transform .7s cubic-bezier(.76,0,.24,1)}
.ouverture.v6.ouvre .ov6-filet{opacity:0;transition:opacity .34s ease .12s}
.ouverture.v6 .ov6-panneau{transition:transform .78s cubic-bezier(.76,0,.24,1)}
.ouverture.v6.pose .ov-scene{opacity:0;transition:opacity .12s ease}
/* les lignes de construction se retractent comme elles se sont tracees */
.ouverture.v6 .ov-grille .c1,.ouverture.v6 .ov-grille .c2{top:-80px;bottom:-80px;transform-origin:50% 50%}
.ouverture.v6 .ov-grille .c3,.ouverture.v6 .ov-grille .c4{left:-80px;right:-80px;transform-origin:50% 50%}
.ouverture.v6.t3 .ov-grille i{opacity:1;transition:transform .6s cubic-bezier(.76,0,.24,1)}
.ouverture.v6.t3 .ov-grille .c1,.ouverture.v6.t3 .ov-grille .c2{transform:scaleY(0)}
.ouverture.v6.t3 .ov-grille .c3,.ouverture.v6.t3 .ov-grille .c4{transform:scaleX(0)}
.ouverture.v6.t3 .ov-grille .c2{transition-delay:.05s}.ouverture.v6.t3 .ov-grille .c3{transition-delay:.1s}.ouverture.v6.t3 .ov-grille .c4{transition-delay:.15s}
/* le reticule se retracte vers le centre sur la meme courbe que tout le reste */
.ouverture.v6.sortie .ov6-reticule .h,.ouverture.v6.sortie .ov6-reticule .v{transition:transform .55s cubic-bezier(.76,0,.24,1)}

/* ---- v6 : barre de progression, entre les reperes de coin ---- */
.ov6-prog{position:absolute;left:50px;right:50px;bottom:40px;height:1px;background:rgba(255,255,255,.10);z-index:6;opacity:0;transition:opacity .5s ease .3s}
.ouverture.v6.t1 .ov6-prog{opacity:1}
.ov6-prog i{position:absolute;left:0;top:0;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;will-change:transform}
.ov6-compte{position:absolute;left:50%;bottom:52px;translate:-50% 0;font-size:11.5px;font-weight:600;letter-spacing:.24em;color:#8b95b8;font-variant-numeric:tabular-nums;z-index:6;opacity:0;transition:opacity .5s ease .3s}
.ouverture.v6.t1 .ov6-compte{opacity:1}
.ouverture.v6.sortie .ov6-prog,.ouverture.v6.sortie .ov6-compte{opacity:0;transition:opacity .3s ease .15s}
/* les releves montent au-dessus de la barre */
.ouverture.v6 .ov6-releve{bottom:58px}
/* ---- v6 : sortie camera = travelling arriere qui se pose ---- */
html.ov-entre body > div[style*="background:#050505"] > *:not(header){animation:ov-dolly 1.15s cubic-bezier(.22,1,.36,1) both;transform-origin:50% 38%}
@keyframes ov-dolly{from{transform:scale(1.085) translateY(22px);filter:brightness(.45)}45%{filter:brightness(1)}to{transform:none;filter:none}}
/* les panneaux s'ecartent avec une legere fuite en perspective */
.ouverture.v6{perspective:1600px}
.ouverture.v6 .ov6-panneau{transform-style:preserve-3d;backface-visibility:hidden}
.ouverture.v6 .ov6-panneau.haut{transform-origin:50% 0}
.ouverture.v6 .ov6-panneau.bas{transform-origin:50% 100%}
.ouverture.v6.ouvre .ov6-panneau.haut{transform:translateY(-100%) rotateX(6deg)}
.ouverture.v6.ouvre .ov6-panneau.bas{transform:translateY(100%) rotateX(-6deg)}
.ouverture.v6 .ov6-panneau{transition:transform .86s cubic-bezier(.76,0,.24,1)}

/* ============================================================
   OUVERTURE v6.2 — espace, couleur, apparitions, mise au point
   ============================================================ */
/* couleur : la grille et le halo prennent la teinte du site */
.ouverture.v6 .ov6-panneau{background-image:
  linear-gradient(rgba(158,168,206,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(158,168,206,.05) 1px,transparent 1px),
  linear-gradient(rgba(158,168,206,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(158,168,206,.11) 1px,transparent 1px)}
.ouverture.v6 .ov6-panneau::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 100%,rgba(120,130,170,.10),transparent 70%);opacity:0;transition:opacity 1.4s ease .3s}
.ouverture.v6 .ov6-panneau.bas::after{background:radial-gradient(60% 70% at 50% 0%,rgba(120,130,170,.10),transparent 70%)}
.ouverture.v6.t2 .ov6-panneau::after{opacity:1}
.ouverture.v6.sortie .ov6-panneau::after{opacity:0;transition:opacity .4s ease}
/* espace : releves en haut, compteur en bas a gauche, barre au bord inferieur */
.ouverture.v6 .ov6-releve{bottom:auto;top:40px}
.ouverture.v6 .ov6-releve.g{left:44px}
.ouverture.v6 .ov6-releve.d{right:44px}
.ouverture.v6 .ov6-coins i{width:14px;height:14px;border-color:rgba(158,168,206,.35)}
.ouverture.v6 .ov6-coins i:nth-child(1),.ouverture.v6 .ov6-coins i:nth-child(2){top:72px}
.ouverture.v6 .ov6-prog{left:0;right:0;bottom:0;height:2px;background:rgba(158,168,206,.10)}
.ouverture.v6 .ov6-prog i{background:linear-gradient(90deg,#fff,#c9d0ea)}
.ouverture.v6 .ov6-compte{left:44px;bottom:28px;translate:0 0;color:#c9d0ea}
.ouverture.v6 .ov6-compte::after{content:' / 100';color:#5f6785}
/* la ligne verticale du reticule se retire quand le mot arrive : la ligne mediane reste seule */
.ouverture.v6.t3 .ov6-reticule .v{transform:scaleY(0);transition:transform .6s cubic-bezier(.76,0,.24,1)}
/* apparitions : les cellules se dessinent en contour, puis se remplissent */
.ouverture.v6.t2 .ov-grille b{opacity:1;transform:none;background:transparent;box-shadow:inset 0 0 0 1px rgba(158,168,206,.55);
  transition:transform .5s cubic-bezier(.16,1,.3,1) calc(.3s + var(--d,0s)),opacity .3s ease calc(.3s + var(--d,0s)),background .45s cubic-bezier(.76,0,.24,1),box-shadow .45s cubic-bezier(.76,0,.24,1)}
.ouverture.v6.t2b .ov-grille b{background:#3c3c3c;box-shadow:inset 0 0 0 1px rgba(255,255,255,0),inset 0 1px 0 rgba(255,255,255,.10)}
.ouverture.v6.t2b .ov-grille b.clair{background:#fff}
.ouverture.v6.t2b .ov-grille b:nth-child(5){transition-delay:0s}
.ouverture.v6.t2b .ov-grille b:nth-child(6),.ouverture.v6.t2b .ov-grille b:nth-child(8){transition-delay:.06s}
.ouverture.v6.t2b .ov-grille b:nth-child(7),.ouverture.v6.t2b .ov-grille b:nth-child(9){transition-delay:.12s}
.ouverture.v6.t2b .ov-grille b:nth-child(10),.ouverture.v6.t2b .ov-grille b:nth-child(12){transition-delay:.18s}
.ouverture.v6.t2b .ov-grille b:nth-child(11),.ouverture.v6.t2b .ov-grille b:nth-child(13){transition-delay:.24s}
/* mise au point : les panneaux partent flous, le hero devient net */
.ouverture.v6 .ov6-panneau{transition:transform .86s cubic-bezier(.76,0,.24,1),filter .6s ease}
.ouverture.v6.ouvre .ov6-panneau{filter:blur(7px)}
html.ov-entre body > div[style*="background:#050505"] > *:not(header){animation:ov-focus 1.25s cubic-bezier(.22,1,.36,1) both;transform-origin:50% 38%}
@keyframes ov-focus{from{transform:scale(1.085) translateY(22px);filter:blur(16px) brightness(.45)}55%{filter:blur(2px) brightness(1)}to{transform:none;filter:blur(0) brightness(1)}}

/* ============================================================
   FIN D'OUVERTURE : la mise au point se fait d'abord, progressivement
   ============================================================ */
html.ov-entre body > div[style*="background:#050505"] > *:not(header){animation:ov-cadre 1.2s cubic-bezier(.22,1,.36,1) both,ov-point 1.25s cubic-bezier(.33,0,.2,1) both;transform-origin:50% 38%}
@keyframes ov-cadre{from{transform:scale(1.07) translateY(18px)}to{transform:none}}
@keyframes ov-point{from{filter:blur(14px) brightness(.5)}60%{filter:blur(4px) brightness(.92)}to{filter:blur(0) brightness(1)}}

/* ============================================================
   L'OBTURATEUR — traversee entre pages, registre du plan
   ============================================================ */
.trav{position:fixed;inset:0;z-index:200;pointer-events:none}
.trav.on{pointer-events:auto}
.trav-p{position:absolute;left:0;right:0;height:50%;background-color:#050505;
  background-image:linear-gradient(rgba(158,168,206,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(158,168,206,.05) 1px,transparent 1px),
    linear-gradient(rgba(158,168,206,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(158,168,206,.11) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,200px 200px,200px 200px;
  transition:transform .62s cubic-bezier(.76,0,.24,1),filter .5s ease;will-change:transform}
.trav-p.haut{top:0;transform:translateY(-100%);background-position:center bottom}
.trav-p.bas{bottom:0;transform:translateY(100%);background-position:center top}
.trav.ferme .trav-p{transform:none}
.trav.ouvre .trav-p{filter:blur(6px);transition:transform .74s cubic-bezier(.76,0,.24,1),filter .5s ease}
.trav.ouvre .trav-p.haut{transform:translateY(-100%)}
.trav.ouvre .trav-p.bas{transform:translateY(100%)}
/* la ligne mediane : se trace quand l'obturateur est ferme, s'efface quand il s'ouvre */
.trav-filet{position:absolute;left:0;right:0;top:50%;height:1px;background:#fff;opacity:.9;transform:scaleX(0);transform-origin:50% 50%;transition:transform .55s cubic-bezier(.76,0,.24,1) .2s,opacity .25s ease}
.trav.ferme .trav-filet{transform:scaleX(1)}
.trav.ouvre .trav-filet{opacity:0;transition:opacity .28s ease .1s}
/* le titre de destination : les lettres roulent au-dessus de la ligne */
.trav-titre{position:absolute;left:50%;top:50%;translate:-50% calc(-100% - 22px);display:flex;font-family:'Poppins',sans-serif;font-size:44px;font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1;white-space:nowrap}
.trav-titre .tl{display:block;overflow:hidden;height:52px;line-height:52px}
.trav-titre .ti{display:block;transform:translateY(110%);transition:transform .52s cubic-bezier(.76,0,.24,1);transition-delay:calc(.22s + var(--i) * 28ms)}
.trav.ferme .trav-titre .ti{transform:none}
.trav.ouvre .trav-titre .ti{transform:translateY(-112%);transition:transform .38s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--i) * 16ms)}
/* releve en haut a gauche : numero de page, compteur et barre en bas */
.trav-releve{position:absolute;left:44px;top:40px;display:flex;align-items:center;gap:12px;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#8b95b8;font-variant-numeric:tabular-nums;opacity:0;transform:translateY(6px);transition:opacity .5s ease .3s,transform .5s cubic-bezier(.16,1,.3,1) .3s}
.trav-releve i{width:22px;height:1px;background:rgba(139,149,184,.55)}
.trav.ferme .trav-releve{opacity:1;transform:none}
.trav.ouvre .trav-releve{opacity:0;transition:opacity .2s ease}
.trav-compte{position:absolute;left:44px;bottom:28px;font-size:11.5px;font-weight:600;letter-spacing:.24em;color:#c9d0ea;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .4s ease .3s}
.trav-compte::after{content:' / 100';color:#5f6785}
.trav.ferme .trav-compte{opacity:1}
.trav.ouvre .trav-compte{opacity:0;transition:opacity .2s ease}
.trav-prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(158,168,206,.10);opacity:0;transition:opacity .4s ease .3s}
.trav-prog i{position:absolute;left:0;top:0;height:100%;width:100%;background:linear-gradient(90deg,#fff,#c9d0ea);transform:scaleX(0);transform-origin:left}
.trav.ferme .trav-prog{opacity:1}
.trav.ouvre .trav-prog{opacity:0;transition:opacity .2s ease}
/* la page : recule et sort du point a l'aller, avance au retour ; la nouvelle fait le point */
html.tv-sort body > div[style*="background:#050505"],html.tv-sort-inv body > div[style*="background:#050505"]{transition:transform .64s cubic-bezier(.76,0,.24,1),filter .64s cubic-bezier(.76,0,.24,1);transform-origin:50% 40%;will-change:transform,filter}
html.tv-sort body > div[style*="background:#050505"]{transform:scale(.965);filter:blur(9px) brightness(.5)}
html.tv-sort-inv body > div[style*="background:#050505"]{transform:scale(1.035);filter:blur(9px) brightness(.5)}
html.tv-entre body > div[style*="background:#050505"]{animation:tv-cadre 1.05s cubic-bezier(.22,1,.36,1) both,tv-point 1.1s cubic-bezier(.33,0,.2,1) both;transform-origin:50% 40%}
html.tv-entre-inv body > div[style*="background:#050505"]{animation:tv-cadre-inv 1.05s cubic-bezier(.22,1,.36,1) both,tv-point 1.1s cubic-bezier(.33,0,.2,1) both;transform-origin:50% 40%}
@keyframes tv-cadre{from{transform:scale(1.06)}to{transform:none}}
@keyframes tv-cadre-inv{from{transform:scale(.95)}to{transform:none}}
@keyframes tv-point{from{filter:blur(14px) brightness(.45)}60%{filter:blur(4px) brightness(.92)}to{filter:blur(0) brightness(1)}}
/* l'ancien overlay de traversee ne s'affiche plus */
.profond{display:none!important}
@media (prefers-reduced-motion:reduce){.trav{display:none!important}html.tv-sort body > div,html.tv-sort-inv body > div{transform:none;filter:none;transition:none}html.tv-entre body > div,html.tv-entre-inv body > div{animation:none}}

/* traversee : le titre sort d'abord (roule vers le haut + flou), puis l'obturateur s'ouvre ; la page attend, floue */
.trav.sort .trav-titre .ti{transform:translateY(-112%);transition:transform .34s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--i) * 14ms)}
.trav.sort .trav-titre{filter:blur(2px);transition:filter .3s ease .1s}
.trav.sort .trav-releve,.trav.sort .trav-compte,.trav.sort .trav-prog{opacity:0;transition:opacity .2s ease}
.trav.sort .trav-filet{opacity:1}
.trav.ouvre .trav-filet{opacity:0;transition:opacity .3s ease .12s}
.trav-titre{z-index:3}
.trav-p{z-index:1}
.trav-filet{z-index:2}
html.tv-attente body > div[style*="background:#050505"]{transform:scale(1.06);filter:blur(14px) brightness(.45);transform-origin:50% 40%}

/* ============================================================
   FLUIDITÉ : les fins se tuilent, le texte monte long et doux
   ============================================================ */
.h-cache{opacity:0!important;transform:translateY(22px)!important;filter:blur(6px)}
.h-entre{opacity:1!important;transform:none!important;filter:blur(0);
  transition:opacity 1.05s cubic-bezier(.22,1,.36,1),transform 1.15s cubic-bezier(.22,1,.36,1),filter .9s cubic-bezier(.22,1,.36,1)}
.l-in{animation-duration:1.05s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.l-mask:nth-child(2) .l-in{animation-delay:.11s}.l-mask:nth-child(3) .l-in{animation-delay:.22s}
/* ouverture : point plus long, decroissance douce, sans palier */
html.ov-entre body > div[style*="background:#050505"] > *:not(header){animation:ov-cadre 1.6s cubic-bezier(.16,1,.3,1) both,ov-point 1.7s cubic-bezier(.4,0,.2,1) both;transform-origin:50% 38%}
@keyframes ov-cadre{from{transform:scale(1.06) translateY(16px)}to{transform:none}}
@keyframes ov-point{from{filter:blur(14px) brightness(.5)}40%{filter:blur(5px) brightness(.85)}75%{filter:blur(1.2px) brightness(1)}to{filter:blur(0) brightness(1)}}
/* traversee : point plus long lui aussi, panneaux qui s'ecartent sur la meme duree */
html.tv-entre body > div[style*="background:#050505"]{animation:tv-cadre 1.5s cubic-bezier(.16,1,.3,1) both,tv-point 1.6s cubic-bezier(.4,0,.2,1) both;transform-origin:50% 40%}
html.tv-entre-inv body > div[style*="background:#050505"]{animation:tv-cadre-inv 1.5s cubic-bezier(.16,1,.3,1) both,tv-point 1.6s cubic-bezier(.4,0,.2,1) both;transform-origin:50% 40%}
@keyframes tv-point{from{filter:blur(14px) brightness(.45)}40%{filter:blur(5px) brightness(.85)}75%{filter:blur(1.2px) brightness(1)}to{filter:blur(0) brightness(1)}}
.trav.ouvre .trav-p{transition:transform .92s cubic-bezier(.76,0,.24,1),filter .6s ease}
html.sans-cascade .h-cache{opacity:0!important;transform:translateY(22px)!important}

/* ============================================================
   MICRO-BUGS (screencast image par image) — quatre causes, quatre corrections
   ============================================================ */
/* (c) au premier plan, l'overlay porte le meme halo que le voile d'attente : aucun flash a la releve */
.ouverture.v6 .ov6-panneau::before{background:#050505 radial-gradient(70% 46% at 50% 0%,rgba(120,130,170,.10),transparent 70%) center top / 100vw 100vh no-repeat}
.ouverture.v6 .ov6-panneau.bas::before{background-position:center bottom}
/* (a) cadre et point durent exactement le meme temps : aucune demotion de calque en cours de route */
html.ov-entre body > div[style*="background:#050505"] > *:not(header){animation:ov-cadre 1.7s cubic-bezier(.16,1,.3,1) both,ov-point 1.7s cubic-bezier(.4,0,.2,1) both;transform-origin:50% 38%}
html.tv-entre body > div[style*="background:#050505"]{animation:tv-cadre 1.6s cubic-bezier(.16,1,.3,1) both,tv-point 1.6s cubic-bezier(.4,0,.2,1) both;transform-origin:50% 40%}
html.tv-entre-inv body > div[style*="background:#050505"]{animation:tv-cadre-inv 1.6s cubic-bezier(.16,1,.3,1) both,tv-point 1.6s cubic-bezier(.4,0,.2,1) both;transform-origin:50% 40%}
/* (b) la classe reste posee : les calques ne sont jamais demontes apres coup (plus de re-rasterisation du texte) */
html.ov-entre header{position:fixed}

/* ============================================================
   CALQUES : le hero reste compose en permanence ; la traversee anime les sections, jamais la racine
   (la fin d'une animation ne demonte plus aucun calque : plus de re-rasterisation du texte)
   ============================================================ */
body > div[style*="background:#050505"] > section:first-of-type{will-change:transform;transform:translateZ(0)}
html.tv-sort body > div[style*="background:#050505"],html.tv-sort-inv body > div[style*="background:#050505"],html.tv-attente body > div[style*="background:#050505"],
html.tv-entre body > div[style*="background:#050505"],html.tv-entre-inv body > div[style*="background:#050505"]{transform:none!important;filter:none!important;animation:none!important;transition:none!important;will-change:auto}
html.tv-sort body > div[style*="background:#050505"] > *:not(header),html.tv-sort-inv body > div[style*="background:#050505"] > *:not(header){transition:transform .64s cubic-bezier(.76,0,.24,1),filter .64s cubic-bezier(.76,0,.24,1);transform-origin:50% 40%}
html.tv-sort body > div[style*="background:#050505"] > *:not(header){transform:scale(.965);filter:blur(9px) brightness(.5)}
html.tv-sort-inv body > div[style*="background:#050505"] > *:not(header){transform:scale(1.035);filter:blur(9px) brightness(.5)}
html.tv-attente body > div[style*="background:#050505"] > *:not(header){transform:scale(1.06);filter:blur(14px) brightness(.45);transform-origin:50% 40%}
html.tv-entre body > div[style*="background:#050505"] > *:not(header){animation:tv-cadre 1.6s cubic-bezier(.16,1,.3,1) both,tv-point 1.6s cubic-bezier(.4,0,.2,1) both;transform-origin:50% 40%}
html.tv-entre-inv body > div[style*="background:#050505"] > *:not(header){animation:tv-cadre-inv 1.6s cubic-bezier(.16,1,.3,1) both,tv-point 1.6s cubic-bezier(.4,0,.2,1) both;transform-origin:50% 40%}
/* l'en-tete, fixe, a sa propre respiration : il s'efface au depart et revient avec le point */
html.tv-sort header,html.tv-sort-inv header{opacity:0;transition:opacity .5s cubic-bezier(.76,0,.24,1)}
html.tv-attente header{opacity:0}
html.tv-entre header,html.tv-entre-inv header{animation:tv-tete 1.1s cubic-bezier(.4,0,.2,1) both}
@keyframes tv-tete{from{opacity:0}45%{opacity:0}to{opacity:1}}
/* les animations finissent sur un calque compose (translateZ), jamais sur « none » */
@keyframes ov-cadre{from{transform:scale(1.06) translateY(16px) translateZ(0)}to{transform:translateZ(0)}}
@keyframes tv-cadre{from{transform:scale(1.06) translateZ(0)}to{transform:translateZ(0)}}
@keyframes tv-cadre-inv{from{transform:scale(.95) translateZ(0)}to{transform:translateZ(0)}}

/* ============================================================
   CAMÉRA GPU (13/09) — Eudes, Safari + Firefox : « après le mouv de caméra le texte arrive
   d'un coup avec de la latence ». Mesuré : `filter: blur()` animé sur les sections (et sur
   chaque texte de la cascade) est rendu en logiciel hors Chrome ; en Retina 1728×1117 le thread
   principal tombe à 5-15 images/s, les transitions du texte sont calculées en retard et sautent.
   Le flou est désormais porté par UN voile fixe en backdrop-filter (composé sur GPU dans les
   trois moteurs) ; les sections ne portent plus que le zoom (transform), le texte que
   opacité + translation. Même chorégraphie, même durées, même courbes.
   ============================================================ */
html.tv-sort body > div[style*="background:#050505"] > *:not(header),html.tv-sort-inv body > div[style*="background:#050505"] > *:not(header),
html.tv-attente body > div[style*="background:#050505"] > *:not(header){filter:none}
html.tv-entre body > div[style*="background:#050505"] > *:not(header){animation:tv-cadre 1.6s cubic-bezier(.16,1,.3,1) both}
html.tv-entre-inv body > div[style*="background:#050505"] > *:not(header){animation:tv-cadre-inv 1.6s cubic-bezier(.16,1,.3,1) both}
html.ov-entre body > div[style*="background:#050505"] > *:not(header){animation:ov-cadre 1.7s cubic-bezier(.16,1,.3,1) both}
.h-cache{filter:none}
.h-entre{filter:none;transition:opacity 1.05s cubic-bezier(.22,1,.36,1),transform 1.15s cubic-bezier(.22,1,.36,1)}
.cam-voile{position:fixed;inset:0;z-index:99;pointer-events:none;display:none}
html.tv-sort .cam-voile,html.tv-sort-inv .cam-voile{display:block;animation:cam-sort .64s cubic-bezier(.76,0,.24,1) both}
html.tv-attente .cam-voile{display:block;-webkit-backdrop-filter:blur(14px) brightness(.45);backdrop-filter:blur(14px) brightness(.45)}
html.tv-entre .cam-voile,html.tv-entre-inv .cam-voile{display:block;animation:cam-point 1.6s cubic-bezier(.4,0,.2,1) both}
html.ov-entre .cam-voile{display:block;animation:cam-point 1.7s cubic-bezier(.4,0,.2,1) both}
@keyframes cam-sort{from{-webkit-backdrop-filter:blur(0) brightness(1);backdrop-filter:blur(0) brightness(1)}to{-webkit-backdrop-filter:blur(9px) brightness(.5);backdrop-filter:blur(9px) brightness(.5)}}
@keyframes cam-point{from{-webkit-backdrop-filter:blur(14px) brightness(.45);backdrop-filter:blur(14px) brightness(.45)}
  40%{-webkit-backdrop-filter:blur(5px) brightness(.85);backdrop-filter:blur(5px) brightness(.85)}
  75%{-webkit-backdrop-filter:blur(1.2px) brightness(1);backdrop-filter:blur(1.2px) brightness(1)}
  to{-webkit-backdrop-filter:blur(0) brightness(1);backdrop-filter:blur(0) brightness(1)}}
@media (prefers-reduced-motion:reduce){.cam-voile{display:none!important}}
/* obturateur : les panneaux s'ecartent sans flou (filtre logiciel hors Chrome, deux demi-ecrans en Retina) */
.trav.ouvre .trav-p{filter:none;transition:transform .92s cubic-bezier(.76,0,.24,1)}
.trav.sort .trav-titre{filter:none}
/* rayon plafonne a 10 px : meme lecture de la mise au point, cout du voile reduit (Firefox WebRender) */
html.tv-attente .cam-voile{-webkit-backdrop-filter:blur(10px) brightness(.45);backdrop-filter:blur(10px) brightness(.45)}
@keyframes cam-point{from{-webkit-backdrop-filter:blur(10px) brightness(.45);backdrop-filter:blur(10px) brightness(.45)}
  40%{-webkit-backdrop-filter:blur(4px) brightness(.85);backdrop-filter:blur(4px) brightness(.85)}
  75%{-webkit-backdrop-filter:blur(1px) brightness(1);backdrop-filter:blur(1px) brightness(1)}
  to{-webkit-backdrop-filter:blur(0) brightness(1);backdrop-filter:blur(0) brightness(1)}}
@keyframes cam-sort{from{-webkit-backdrop-filter:blur(0) brightness(1);backdrop-filter:blur(0) brightness(1)}to{-webkit-backdrop-filter:blur(7px) brightness(.5);backdrop-filter:blur(7px) brightness(.5)}}

/* ============================================================
   MENU « SERVICES » (13/09) — cascade des lignes, numeros, filet, fleche
   ============================================================ */
.dd-panel a{position:relative;flex-direction:row;align-items:center;gap:14px;padding:11px 14px 12px 12px;opacity:0;transform:translateY(6px)}
.dd:hover .dd-panel a,.dd.ouvert .dd-panel a,.dd:focus-within .dd-panel a{animation:dd-in .38s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 40ms + 50ms)}
@keyframes dd-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dd-panel a:hover{background:rgba(255,255,255,.035)}
.dd-n{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.2em;color:#6d7387;font-variant-numeric:tabular-nums;width:22px;flex:none}
.dd-t{display:flex;flex-direction:column;gap:3px;flex:1;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.dd-panel a:hover .dd-t{transform:translateX(4px)}
.dd-fl{opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1);color:#fff;font-weight:500;flex:none}
.dd-panel a:hover .dd-fl{opacity:1;transform:none}
.dd-panel a:not(.tous)::after{content:'';position:absolute;left:14px;right:14px;bottom:3px;height:1px;background:rgba(255,255,255,.34);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.dd-panel a:not(.tous):hover::after{transform:scaleX(1)}
.dd-panel a.tous{border-top:0;margin-top:8px;padding-top:14px}
.dd-panel a.tous::before{content:'';position:absolute;left:12px;right:12px;top:0;height:1px;background:rgba(255,255,255,.14);transform:scaleX(0);transform-origin:left}
.dd:hover .dd-panel a.tous::before,.dd.ouvert .dd-panel a.tous::before,.dd:focus-within .dd-panel a.tous::before{animation:dd-trait .55s cubic-bezier(.22,1,.36,1) .28s both}
@keyframes dd-trait{to{transform:scaleX(1)}}
.dd-panel a.tous:hover .dd-fl{transform:translateX(3px)}

/* ============================================================
   BOUTONS PLEINS (13/09) — le reticule : a 40 px du curseur (.vise, pose par JS) quatre reperes de coin
   se dessinent ; au survol un filet se trace sous le libelle ; a l'appui les reperes s'ecartent de 2 px.
   Le bouton ne se deplace jamais. Courbes : depart mecanique (.76,0,.24,1), arrivee posee (.16,1,.3,1).
   ============================================================ */
.btnw{transition:background .2s}
.btnw:hover{transform:none;box-shadow:none}
.btnw .bc{position:absolute;width:9px;height:9px;border:0 solid currentColor;opacity:0;pointer-events:none;transition:opacity .28s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.btnw .bc.c1{left:7px;top:7px;border-left-width:1px;border-top-width:1px;transform:translate(4px,4px)}
.btnw .bc.c2{right:7px;top:7px;border-right-width:1px;border-top-width:1px;transform:translate(-4px,4px)}
.btnw .bc.c3{left:7px;bottom:7px;border-left-width:1px;border-bottom-width:1px;transform:translate(4px,-4px)}
.btnw .bc.c4{right:7px;bottom:7px;border-right-width:1px;border-bottom-width:1px;transform:translate(-4px,-4px)}
.btnw.vise .bc{opacity:.55;transform:none}
.btnw:hover .bc,.btnw:focus-visible .bc{opacity:.9;transform:none}
.btnw:active .bc{transition-duration:.12s,.12s}
.btnw:active .bc.c1{transform:translate(-2px,-2px)}.btnw:active .bc.c2{transform:translate(2px,-2px)}.btnw:active .bc.c3{transform:translate(-2px,2px)}.btnw:active .bc.c4{transform:translate(2px,2px)}
.btnw .bf{position:absolute;left:26px;right:56px;bottom:13px;height:1px;background:currentColor;opacity:.7;transform:scaleX(0);transform-origin:left;pointer-events:none;transition:transform .5s cubic-bezier(.76,0,.24,1)}
.btnw:hover .bf,.btnw:focus-visible .bf{transform:scaleX(1)}
.btnw:active .bf{right:20px;transition:transform .5s cubic-bezier(.76,0,.24,1),right .18s cubic-bezier(.76,0,.24,1)}

/* ============================================================
   RÉALISATIONS — LE MUR D'ÉCRANS (13/09) : les sites reels, vivants, en tuiles immobiles.
   Au survol : le voile se leve, les reperes se dessinent, le numero roule, un filet se trace.
   ============================================================ */
.mur{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
.mur .ecran[data-rv]{transition-delay:calc(var(--j,0) * 70ms)}
.ecran{position:relative;cursor:pointer;outline:none;color:inherit}
.ecran-cadre{--k:.27;position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#0a0b0e;border:1px solid rgba(12,14,18,.14);transition:border-color .4s}
.mur-sombre .ecran-cadre{border-color:rgba(255,255,255,.10)}
.ecran:hover .ecran-cadre,.ecran:focus-visible .ecran-cadre{border-color:rgba(12,14,18,.4)}
.mur-sombre .ecran:hover .ecran-cadre,.mur-sombre .ecran:focus-visible .ecran-cadre{border-color:rgba(255,255,255,.3)}
.ecran-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:opacity .9s ease}
.ecran-live{position:absolute;inset:0;pointer-events:none}
.ecran-live iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform:scale(var(--k));transform-origin:0 0;pointer-events:none;opacity:0;background:#0a0b0e;transition:opacity .9s ease}
.ecran.vivant .ecran-live iframe{opacity:1}
.ecran.vivant .ecran-img{opacity:0}
.ecran-voile{position:absolute;inset:0;background:rgba(5,5,5,.34);pointer-events:none;transition:opacity .7s cubic-bezier(.16,1,.3,1)}
.ecran:hover .ecran-voile,.ecran:focus-visible .ecran-voile{opacity:0}
.ecran-eteint .ecran-voile{background:rgba(5,5,5,.5)}
.ecran-eteint:hover .ecran-voile{opacity:1}
.ecran-coin{position:absolute;width:14px;height:14px;border:1px solid rgba(255,255,255,.85);opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.ecran-coin.c1{left:10px;top:10px;border-right:0;border-bottom:0;transform:translate(8px,8px)}
.ecran-coin.c2{right:10px;top:10px;border-left:0;border-bottom:0;transform:translate(-8px,8px)}
.ecran-coin.c3{left:10px;bottom:10px;border-right:0;border-top:0;transform:translate(8px,-8px)}
.ecran-coin.c4{right:10px;bottom:10px;border-left:0;border-top:0;transform:translate(-8px,-8px)}
.ecran:hover .ecran-coin,.ecran:focus-visible .ecran-coin{opacity:1;transform:none;animation:none}
/* mise sous tension : une ligne balaye l'ecran, les reperes s'allument une fois */
.ecran-balaye{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transform:translateY(-100%);background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.10) 46%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.10) 54%,transparent 100%)}
.ecran.vivant .ecran-balaye{animation:ecran-balaye 1.15s cubic-bezier(.4,0,.2,1) .1s both}
@keyframes ecran-balaye{0%{transform:translateY(-100%);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(100%);opacity:0}}
.ecran.vivant .ecran-coin{animation:coin-eclair 1.2s cubic-bezier(.4,0,.2,1) .15s}
@keyframes coin-eclair{0%{opacity:0;transform:none}25%{opacity:1}100%{opacity:0}}
.ecran-filet{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.75);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.76,0,.24,1)}
.ecran:hover .ecran-filet,.ecran:focus-visible .ecran-filet{transform:scaleX(1)}
.ecran-etat{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(5,5,5,.72);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 13px;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
.ecran:hover .ecran-etat,.ecran:focus-visible .ecran-etat{opacity:1}
.ecran-ui{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;margin-top:14px;padding:0 2px}
.ecran-ui .typo-n{position:relative;display:inline-block;overflow:hidden;height:1.2em;line-height:1.2em}
.ecran-ui .typo-n .rl-a,.ecran-ui .typo-n .rl-b{transition:transform .45s cubic-bezier(.76,0,.24,1)}
.ecran:hover .typo-n .rl-a{transform:translateY(-115%)}.ecran:hover .typo-n .rl-b{transform:translateY(0)}
.ecran-ui b{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:700;letter-spacing:-.02em;color:#0B0C0F;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.mur-sombre .ecran-ui b{color:#fff}
.ecran-ui b::after{content:'→';font-weight:500;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .5s cubic-bezier(.16,1,.3,1)}
.ecran:hover .ecran-ui b{transform:translateX(4px)}
.ecran:hover .ecran-ui b::after{opacity:1;transform:none}
.ecran-eteint:hover .ecran-ui b::after{opacity:0}
.ecran-ui i{grid-column:2;font-style:normal;font-size:12px;font-weight:500;color:#6f7484;letter-spacing:.02em}
.mur-sombre .ecran-ui i{color:#a6aab9}
.ecran-direct{grid-column:2;display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#6f7484;opacity:0;transition:opacity .5s .5s}
.mur-sombre .ecran-direct{color:#a6aab9}
.ecran-direct i{width:4px;height:4px;background:#7fd4a3}
.ecran.vivant .ecran-direct{opacity:1}
@media (max-width:1100px){.mur{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.mur{grid-template-columns:1fr;gap:28px}}

/* ============================================================
   LE LECTEUR — s'ouvre comme la traversee : filet median, deux panneaux a grille qui s'ecartent,
   mise au point ; la fiche se trace (separateurs), le titre et le compteur roulent.
   Changer de site (.bascule) : les panneaux se referment, le contenu change derriere, ils se rouvrent.
   ============================================================ */
.lecteur{position:fixed;inset:0;z-index:300;display:grid;grid-template-columns:400px 1fr;background:#050505;color:#fff;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.76,0,.24,1)}
.lecteur.ouvert{opacity:1;pointer-events:auto}
.lecteur.ferme-vers{transition-delay:.42s}
.lecteur-fiche{position:relative;padding:34px 36px 30px;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.08);overflow:auto}
.lecteur-fiche::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(158,168,206,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(158,168,206,.06) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 70%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 70%)}
.lecteur-haut{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:38px;position:relative}
/* commandes : releves en petites capitales, texte qui roule, filet trace */
.lecteur-cmd{appearance:none;background:transparent;border:0;outline:none;padding:8px 0 10px;color:#fff;font:inherit;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:10px;min-height:34px}
.lecteur-cmd .rl{position:relative;display:block;overflow:hidden}
.lecteur-cmd .rl-a,.lecteur-cmd .rl-b{transition:transform .45s cubic-bezier(.76,0,.24,1)}
.lecteur-cmd:hover .rl-a,.lecteur-cmd:focus-visible .rl-a{transform:translateY(-115%)}
.lecteur-cmd:hover .rl-b,.lecteur-cmd:focus-visible .rl-b{transform:translateY(0)}
.lecteur-cmd .fl{color:#8b95b8;letter-spacing:0;font-weight:500;transition:color .3s}
.lecteur-cmd:hover .fl{color:#fff}
.lecteur-cmd::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:1px;background:rgba(255,255,255,.55);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.76,0,.24,1)}
.lecteur-cmd:hover::after,.lecteur-cmd:focus-visible::after{transform:scaleX(1)}
.lecteur-cmd:disabled{opacity:.28;cursor:default;pointer-events:none}
.lecteur-nav{display:flex;gap:28px;margin-top:auto;padding-top:26px}
.lecteur-fiche .typo-n{color:#8b95b8;display:inline-flex;overflow:hidden;height:1.4em;line-height:1.4em}
.lecteur-fiche .typo-n .ch{display:block;transform:translateY(110%);transition:transform .45s cubic-bezier(.76,0,.24,1);transition-delay:calc(.3s + var(--i) * 30ms)}
.lecteur-fiche h3{display:flex;flex-wrap:wrap;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin:10px 0 6px}
.lecteur-fiche h3 .tl{display:block;overflow:hidden;height:1.05em;line-height:1.05em}
.lecteur-fiche h3 .ti{display:block;transform:translateY(110%);transition:transform .5s cubic-bezier(.76,0,.24,1);transition-delay:calc(.35s + var(--i) * 22ms)}
.lecteur-fiche > i{font-style:normal;font-size:13px;color:#a6aab9;margin-bottom:30px}
.lecteur-fiche h4{position:relative;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8b95b8;margin:18px 0 8px;padding-top:16px}
.lecteur-fiche h4::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.14);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.76,0,.24,1)}
.lecteur-fiche p{margin:0;font-size:15.5px;line-height:1.6;color:#d3d6df}
.lecteur-fiche .btnw{margin-top:28px;width:100%;box-sizing:border-box}
.lecteur-fiche h4,.lecteur-fiche p,.lecteur-fiche > i,.lecteur-fiche .btnw,.lecteur-nav{opacity:0;transition:opacity .3s ease}
.lecteur.ouvert:not(.bascule) .lecteur-fiche .typo-n .ch,.lecteur.ouvert:not(.bascule) .lecteur-fiche h3 .ti{transform:none}
.lecteur.ouvert:not(.bascule) .lecteur-fiche h4::before{transform:scaleX(1);transition-delay:calc(var(--l,0) * 70ms + .45s)}
.lecteur.ouvert:not(.bascule) .lecteur-fiche h4,.lecteur.ouvert:not(.bascule) .lecteur-fiche p,.lecteur.ouvert:not(.bascule) .lecteur-fiche > i,.lecteur.ouvert:not(.bascule) .lecteur-fiche .btnw,.lecteur.ouvert:not(.bascule) .lecteur-nav{opacity:1;transition-delay:calc(var(--l,0) * 70ms + .6s)}
/* apres un changement de site : entree plus courte */
.lecteur.rejoue .lecteur-fiche .typo-n .ch{transition-delay:calc(.1s + var(--i) * 25ms)}
.lecteur.rejoue .lecteur-fiche h3 .ti{transition-delay:calc(.12s + var(--i) * 18ms)}
.lecteur.rejoue .lecteur-fiche h4::before{transition-delay:calc(var(--l,0) * 55ms + .2s)}
.lecteur.rejoue .lecteur-fiche h4,.lecteur.rejoue .lecteur-fiche p,.lecteur.rejoue .lecteur-fiche > i,.lecteur.rejoue .lecteur-fiche .btnw,.lecteur.rejoue .lecteur-nav{transition-delay:calc(var(--l,0) * 55ms + .32s)}
/* pendant la bascule : tout sort, vite, par le haut */
.lecteur.bascule .lecteur-fiche .typo-n .ch{transform:translateY(-110%);transition:transform .32s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--i) * 12ms)}
.lecteur.bascule .lecteur-fiche h3 .ti{transform:translateY(-110%);transition:transform .34s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--i) * 10ms)}
.lecteur.bascule .lecteur-fiche h4::before{transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.76,0,.24,1)}
.lecteur.bascule .lecteur-fiche h4,.lecteur.bascule .lecteur-fiche p,.lecteur.bascule .lecteur-fiche > i,.lecteur.bascule .lecteur-fiche .btnw,.lecteur.bascule .lecteur-nav{opacity:0;transition:opacity .22s ease}
/* l'ecran */
.lecteur-ecran{position:relative;background:#0a0b0e;overflow:hidden}
.lecteur-rendu{position:absolute;inset:0}
.lecteur-rendu iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;opacity:0;transition:opacity .5s ease}
.lecteur-rendu.pret iframe{opacity:1}
.lecteur-rendu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.lecteur-chargement{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8b95b8;transition:opacity .3s}
.lecteur.pret .lecteur-chargement{opacity:0}
.lecteur-voile{position:absolute;inset:0;z-index:2;pointer-events:none;-webkit-backdrop-filter:blur(10px) brightness(.5);backdrop-filter:blur(10px) brightness(.5)}
.lecteur.ouvert:not(.bascule) .lecteur-voile{animation:cam-point 1.4s cubic-bezier(.4,0,.2,1) .4s both}
.lecteur.ouvert.rejoue:not(.bascule) .lecteur-voile{animation-duration:1.1s;animation-delay:.5s}
.lecteur.pose .lecteur-voile{display:none}
.lecteur-p{position:absolute;left:0;right:0;height:50%;z-index:3;background-color:#050505;
  background-image:linear-gradient(rgba(158,168,206,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(158,168,206,.05) 1px,transparent 1px),linear-gradient(rgba(158,168,206,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(158,168,206,.11) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,200px 200px,200px 200px;will-change:transform;transition:transform .74s cubic-bezier(.76,0,.24,1)}
.lecteur-p.haut{top:0;background-position:center bottom}
.lecteur-p.bas{bottom:0;background-position:center top}
.lecteur.ouvert:not(.bascule) .lecteur-p.haut{transform:translateY(-100%)}
.lecteur.ouvert:not(.bascule) .lecteur-p.bas{transform:translateY(100%)}
.lecteur.bascule .lecteur-p{transition-duration:.45s}
.lecteur.rejoue:not(.bascule) .lecteur-p{transition-duration:.6s}
.lecteur.ferme-vers .lecteur-p{transition-duration:.5s}
.lecteur-filet{position:absolute;left:0;right:0;top:50%;height:1px;z-index:4;background:rgba(255,255,255,.85);transform:scaleX(0);transform-origin:center;transition:transform .5s cubic-bezier(.76,0,.24,1)}
.lecteur.ouvert .lecteur-filet{transform:scaleX(1);opacity:0;transition:transform .5s cubic-bezier(.76,0,.24,1),opacity .3s ease .6s}
.lecteur.bascule .lecteur-filet{opacity:1;transition:opacity .15s ease .3s}
.lecteur-ecran .ecran-coin{opacity:0;z-index:4;width:16px;height:16px;border-color:rgba(255,255,255,.5)}
.lecteur.ouvert:not(.bascule) .lecteur-ecran .ecran-coin{opacity:1;transform:none;transition:opacity .3s .55s,transform .6s cubic-bezier(.16,1,.3,1) .55s}
@media (max-width:900px){.lecteur{grid-template-columns:1fr;grid-template-rows:auto 1fr}.lecteur-fiche{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);max-height:46vh;padding:22px 22px 18px}.lecteur-fiche h3{font-size:26px}.lecteur-nav{padding-top:14px}.lecteur-cmd{min-height:44px}}
@media (prefers-reduced-motion:reduce){.dd-panel a{animation:none!important;opacity:1;transform:none}.lecteur-p,.lecteur-voile,.lecteur-filet{display:none}.lecteur-fiche .ti,.lecteur-fiche .ch{transform:none!important}.lecteur-fiche h4::before{transform:none!important}.ecran-balaye,.ecran.vivant .ecran-coin{animation:none!important}}

/* ============================================================
   HERO ACCUEIL — SCÈNE PLEINE (14/09) : Eudes « c'est du noir avec du texte blanc ».
   L'image occupe tout le hero (cover), le voile ne fait qu'asseoir le texte, le kit descend
   en bas à droite pour laisser l'écran composé entièrement visible. Variante sur l'accueil seul.
   ============================================================ */

/* le kit passe en rangee au pied de l'image : l'ecran compose reste entierement degage */

/* ============================================================
   HERO ACCUEIL — LE LOGO FAIT DE NOS LIVRABLES (14/09). Titre centré ; dessous la grille 3×3 de la marque :
   cinq carreaux clairs = cinq métiers (vrai travail, monochrome, couleur au survol), quatre carreaux de verre.
   (bloc conservé : fond et titre centré du hero) Titre centré, beaucoup d'air ; dessous, un plan
   technique se trace (navigateur, téléphone, chaîne, feuille de route, carte), puis les vraies pièces
   s'y posent avec la mise au point. Tout est piloté par html.h-go (après la cascade du texte).
   Courbes : départ mécanique (.76,0,.24,1), arrivée posée (.16,1,.3,1).
   ============================================================ */
.hero-plan{min-height:0;padding:0 0 64px}
.hero-plan-fond{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 0%,rgba(120,130,170,.16) 0%,rgba(30,32,45,.22) 36%,rgba(6,6,8,.96) 74%,#050506 100%)}
.hero-plan-fond::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(158,168,206,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(158,168,206,.05) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 100%)}
.hero-plan-int{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:64px 57px 0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-plan-int h1{text-wrap:balance}
.hero-plan-int p{text-align:center}
.hero-plan-actions{display:flex;gap:22px;margin-top:40px;align-items:center;justify-content:center}
/* la grille : le logo fait de nos livrables */
.grille9{--t:150px;--g:12px;position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,var(--t));grid-auto-rows:var(--t);gap:var(--g);margin:36px auto 0;width:max-content;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.g9{position:relative;display:block;border-radius:18px;overflow:hidden;opacity:0;transform:scale(.94);filter:blur(6px);text-decoration:none;color:#d3d6df}
html.h-go .g9{animation:g9-pose 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 90ms + .15s)}
@keyframes g9-pose{from{opacity:0;transform:scale(.94);filter:blur(6px)}70%{filter:blur(.8px)}to{opacity:1;transform:none;filter:blur(0)}}
html.h-go .grille9.posee .g9{animation:none;opacity:1;transform:none;filter:none}
.g9-verre{background:rgba(255,255,255,.028);box-shadow:inset 0 0 0 1px rgba(158,168,206,.13)}
.g9-verre::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(158,168,206,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(158,168,206,.06) 1px,transparent 1px);background-size:40px 40px;background-position:center}
.g9-clair{background:#0d0e13;box-shadow:inset 0 0 0 1px rgba(158,168,206,.22)}
.g9-int{position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit}
.g9-int img{position:absolute;inset:0;width:100%;height:100%;display:block}

/* pièces dessinées (chaîne, feuille de route, marque) : monochromes, en teinte de grille */

html.h-go .grille9.posee .g9-pt{animation:g9-pt 3.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes g9-pt{0%{cx:82;cy:69;opacity:0}8%{opacity:1}30%{cx:118;cy:69}38%{opacity:1}44%{opacity:0}100%{cx:118;cy:69;opacity:0}}

@keyframes g9-bar{to{width:var(--w)}}

/* survol : repères de coin + étiquette qui se trace (grammaire du site, aucun déplacement) */
.g9-clair::before{content:attr(data-n) ' · ' attr(data-nom);position:absolute;left:14px;bottom:13px;z-index:3;font-size:9.5px;white-space:nowrap;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.g9-clair:hover::before,.g9-clair:focus-visible::before{opacity:1;transform:none}
.g9-clair::after{content:'';position:absolute;left:14px;right:14px;bottom:8px;height:1px;z-index:3;background:rgba(255,255,255,.7);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.76,0,.24,1)}
.g9-clair:hover::after,.g9-clair:focus-visible::after{transform:scaleX(1)}
.g9-clair:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.g9-coin{position:absolute;width:14px;height:14px;border:1px solid rgba(255,255,255,.55);opacity:0;transition:opacity .4s 1.3s}
.g9-coin.c1{left:-22px;top:-22px;border-right:0;border-bottom:0}.g9-coin.c2{right:-22px;top:-22px;border-left:0;border-bottom:0}.g9-coin.c3{left:-22px;bottom:-22px;border-right:0;border-top:0}.g9-coin.c4{right:-22px;bottom:-22px;border-left:0;border-top:0}
html.h-go .g9-coin{opacity:1}
.g9-releve{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#6d7387;opacity:0;transition:opacity .8s 1.6s}
.g9-releve i{width:22px;height:1px;background:rgba(139,149,184,.5)}
html.h-go .g9-releve{opacity:1}
.hero-grille{padding-bottom:68px}
.hero-grille h1{font-size:64px!important}
.hero-grille p{margin-top:20px!important;font-size:17px!important}
.hero-grille .hero-plan-actions{margin-top:32px}
@media (max-width:900px){.grille9{--t:calc((100vw - 40px - 2*10px)/3);--g:10px;margin-top:40px}.g9{border-radius:14px}.g9-chaine .g9-lbl,.g9-route em,.g9-releve,.g9-coin{display:none}.g9-clair::before{font-size:8px;left:10px;bottom:8px}}
@media (prefers-reduced-motion:reduce){.g9{opacity:1;transform:none;filter:none;animation:none!important}.g9-pt{animation:none!important}}

/* ============================================================
   HERO ACCUEIL EN 3D (14/09) — Eudes : « pas bien cadré, mauvaise présentation ; images, animations, 3D ».
   Deux colonnes : le titre à gauche, à droite la grille de la marque devient un objet en volume :
   neuf carreaux dans l'espace (CSS 3D, transformations seules → GPU partout), les cinq clairs plus proches,
   arrivée depuis la profondeur avec la mise au point, flottement lent, la scène pivote avec le curseur,
   un carreau survolé s'avance et reprend sa couleur. Mobile : grille à plat sous le texte.
   ============================================================ */
.hero-3d{padding-bottom:0}
.hero-3d .hero-plan-int{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;padding:80px 57px 72px;min-height:calc(100vh - 0px);text-align:left}
.hero-3d .hero-3d-texte{display:flex;flex-direction:column;align-items:flex-start;text-align:left;max-width:560px}
.hero-3d .hero-3d-texte h1{font-size:66px!important;max-width:11ch;text-wrap:balance}
.hero-3d .hero-3d-texte p{text-align:left;margin-top:26px!important;font-size:18px!important}
.hero-3d .hero-plan-actions{justify-content:flex-start;margin-top:40px}
.scene3d{--rx:10deg;--ry:-16deg;position:relative;perspective:1500px;perspective-origin:50% 45%;display:flex;justify-content:center;align-items:center;min-height:620px}
.hero-3d .grille9{--t:176px;--g:16px;margin:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform 1.1s cubic-bezier(.16,1,.3,1);will-change:transform}
.hero-3d .g9{--z:0px;transform-style:preserve-3d;transform:translate3d(0,0,var(--z));border-radius:20px;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.hero-3d .g9-clair{--z:44px;box-shadow:inset 0 0 0 1px rgba(158,168,206,.28),0 30px 60px -20px rgba(0,0,0,.8)}
.hero-3d .g9-verre{--z:0px;background:rgba(158,168,206,.05);box-shadow:inset 0 0 0 1px rgba(158,168,206,.16),0 20px 50px -24px rgba(0,0,0,.7)}
/* reflet qui glisse sur le verre */
.hero-3d .g9-verre::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 45%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.07) 55%,transparent 70%);transform:translateX(-120%);animation:g9-reflet 7s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--i) * .6s)}
@keyframes g9-reflet{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
/* arrivee depuis la profondeur, puis flottement */
html.h-go .hero-3d .g9{animation:g9-vol 1.4s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 90ms + .15s)}
@keyframes g9-vol{from{opacity:0;transform:translate3d(0,40px,-520px);filter:blur(8px)}70%{filter:blur(.6px)}to{opacity:1;transform:translate3d(0,0,var(--z));filter:blur(0)}}
html.h-go .hero-3d .grille9.posee .g9{animation:g9-flotte 6s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s);filter:none;opacity:1}
@keyframes g9-flotte{0%,100%{transform:translate3d(0,0,var(--z))}50%{transform:translate3d(0,-6px,calc(var(--z) + 18px))}}
html.h-go .hero-3d .grille9.posee .g9-clair:hover,html.h-go .hero-3d .grille9.posee .g9-clair:focus-visible{animation:none;transform:translate3d(0,-4px,calc(var(--z) + 70px));box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 40px 80px -20px rgba(0,0,0,.9)}
.hero-3d .g9-coin{display:none}
.hero-3d .g9-releve{bottom:-56px;transform:translateX(-50%) translateZ(0)}
@media (max-width:1100px){.hero-3d .hero-plan-int{grid-template-columns:1fr;text-align:center;min-height:0;padding:80px 40px 60px}.hero-3d .hero-3d-texte{align-items:center;text-align:center;max-width:none;margin:0 auto}.hero-3d .hero-3d-texte p{text-align:center}.hero-3d .hero-plan-actions{justify-content:center}.scene3d{--rx:0deg;--ry:0deg;min-height:0;margin-top:36px;perspective:none}.hero-3d .grille9{--t:150px;--g:12px;transform:none}}
@media (max-width:900px){.hero-3d .grille9{--t:calc((100vw - 80px - 2*10px)/3);--g:10px}.hero-3d .g9{border-radius:14px}.hero-3d .g9-verre::before{display:none}}
@media (prefers-reduced-motion:reduce){.hero-3d .g9,.hero-3d .g9-verre::before{animation:none!important}.hero-3d .grille9{transform:none!important}}
/* 3D, seconde passe : couleur d'emblée (la cohérence vient de l'objet, pas du gris), carreaux plus grands,
   volume plus franc, halo derrière la grille, ombres plus légères */

.hero-3d .grille9{--t:196px;--g:16px}
.scene3d{--rx:12deg;--ry:-22deg;perspective:1300px;min-height:680px}
.scene3d::before{content:'';position:absolute;left:50%;top:50%;width:70%;height:70%;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(120,130,170,.22),transparent 70%);pointer-events:none}
.hero-3d .g9-clair{--z:56px;box-shadow:inset 0 0 0 1px rgba(158,168,206,.32),0 24px 48px -22px rgba(0,0,0,.75)}
.hero-3d .g9-verre{background:rgba(158,168,206,.06);box-shadow:inset 0 0 0 1px rgba(158,168,206,.2),inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px -24px rgba(0,0,0,.6)}
@media (max-width:1100px){.hero-3d .grille9{--t:150px;--g:12px}.scene3d::before{display:none}}

/* ============================================================
   LES CINQ ICÔNES DES MÉTIERS (14/09, audit) — une seule écriture : trait fin bleu-gris 1,4 px sur carreau
   sombre, un seul accent menthe par icône, étiquette numérotée toujours visible. Le trait passe au blanc au survol.
   Recadrage du hero : objet centré dans sa colonne, angle plus doux, rien ne touche les bords.
   ============================================================ */
.g9-ico{color:#aab3d6;padding:0}
.g9-ico svg{position:absolute;inset:0;width:100%;height:100%;transition:color .5s cubic-bezier(.16,1,.3,1)}
.g9-clair:hover .g9-ico,.g9-clair:focus-visible .g9-ico{color:#fff}
.g9-nom{position:absolute;left:0;right:0;bottom:16px;z-index:3;display:flex;justify-content:center;align-items:baseline;gap:8px;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8b95b8;white-space:nowrap;transition:color .4s}
.g9-nom i{font-style:normal;color:#5d6478;font-variant-numeric:tabular-nums}
.g9-clair:hover .g9-nom{color:#fff}
.g9-clair::before,.g9-clair::after{display:none}
/* vie discrète une fois posé */
html.h-go .grille9.posee .curseur{animation:g9-clignote 2.4s ease-in-out infinite}
@keyframes g9-clignote{0%,100%{opacity:1}50%{opacity:.25}}
html.h-go .grille9.posee .pill{animation:g9-pill 3s ease-in-out infinite}
@keyframes g9-pill{0%,100%{opacity:.55}50%{opacity:.9}}
.route{stroke-dasharray:1;stroke-dashoffset:1}
html.h-go .grille9.posee .route{animation:plan-trace 1.4s cubic-bezier(.76,0,.24,1) .2s both}
@keyframes plan-trace{to{stroke-dashoffset:0}}
html.h-go .grille9.posee .jalon{animation:g9-jalon 1s cubic-bezier(.16,1,.3,1) 1.4s both}
@keyframes g9-jalon{from{opacity:0;r:2}to{opacity:1;r:5}}
/* recadrage */
.hero-3d .hero-plan-int{gap:24px;padding:72px 57px 64px;align-items:center}
.scene3d{--rx:10deg;--ry:-18deg;perspective:1400px;perspective-origin:50% 50%;min-height:640px;justify-content:center;padding-right:24px}
.hero-3d .grille9{--t:184px;--g:16px}
.hero-3d .g9-releve{bottom:-52px;left:50%}

/* icônes v2 : zone de dessin et zone d'étiquette séparées ; l'étiquette ne recouvre plus jamais le dessin */
.g9-ico svg{inset:0;height:auto;top:50%;transform:translateY(-50%);margin-top:-6px}
.g9-nom{bottom:18px;font-size:9px;letter-spacing:.2em;gap:9px}
.g9-nom i{font-size:8.5px;opacity:.8}
/* recadrage du hero : colonnes équilibrées, titre plus grand, objet centré et respirant */
.hero-3d .hero-plan-int{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:32px;padding:64px 64px 56px}
.hero-3d .hero-3d-texte{max-width:600px}
.hero-3d .hero-3d-texte h1{font-size:clamp(50px,4.6vw,78px)!important;max-width:12ch;line-height:1.02}
.hero-3d .hero-3d-texte p{max-width:44ch;font-size:17.5px!important;margin-top:24px!important}
.hero-3d .grille9{--t:clamp(150px,11.6vw,206px);--g:clamp(12px,1.05vw,18px)}
.scene3d{--ry:-17deg;--rx:9deg;min-height:0;padding:0}
/* recadrage v3 : le hero tient dans l'écran, l'objet est optiquement centré dans sa colonne */
.hero-3d .hero-plan-int{min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(24px,3vw,56px);padding:clamp(40px,5.2vh,72px) clamp(40px,4vw,76px)}
.hero-3d .hero-3d-texte h1{font-size:clamp(46px,4.2vw,72px)!important;max-width:11ch}
.hero-3d .hero-3d-texte p{font-size:17px!important;margin-top:22px!important;max-width:42ch}
.hero-3d .hero-plan-actions{margin-top:clamp(26px,3.4vh,42px)}
.hero-3d .grille9{--t:clamp(132px,10.2vw,188px);--g:clamp(11px,.95vw,16px)}
.hero-3d .g9-releve{bottom:clamp(-46px,-3.4vh,-34px)}
@media (max-height:860px){.hero-3d .grille9{--t:clamp(120px,15.5vh,168px)}.hero-3d .hero-3d-texte h1{font-size:clamp(42px,3.6vw,60px)!important}}
/* recadrage v4 : rien ne déborde, le hero occupe l'écran sans le dépasser */
.hero-3d .hero-plan-int{min-height:clamp(560px,84vh,880px);align-content:center;padding-top:clamp(32px,4vh,60px);padding-bottom:clamp(32px,4vh,60px)}
.scene3d{overflow:visible;display:grid;place-items:center}
.hero-3d .grille9{transform:translateX(-8px) rotateX(var(--rx)) rotateY(var(--ry))}

/* ============================================================
   HERO 3D — FINITION (14/09) : fluidité et matière.
   1. L'arrivée et le flottement ne se disputent plus la même propriété : l'arrivée anime `transform`
      (profondeur), le flottement anime `translate` (propriété indépendante, composée par le navigateur).
      Plus de rupture entre les deux, plus de recalage à la fin de la cascade.
   2. Lumière dirigée : la source est en haut à droite, comme dans l'ouverture. Les carreaux hauts sont
      plus clairs, les bas plus sourds ; chaque carreau a une arête supérieure éclairée.
   3. Tons : verre lavande froid (#9EA8CE) sur nuit bleutée, un seul accent menthe.
   ============================================================ */
.hero-3d .g9{--z:0px;--lum:1;transform:translate3d(0,0,var(--z));transition:none}
html.h-go .hero-3d .g9{animation:g9-entree 1.5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 85ms + .12s)}
@keyframes g9-entree{
  from{opacity:0;transform:translate3d(0,52px,-560px) rotateX(-8deg);filter:blur(9px)}
  55%{filter:blur(1.4px)}
  to{opacity:1;transform:translate3d(0,0,var(--z)) rotateX(0deg);filter:blur(0)}}
/* le flottement vit sur `translate` : il peut démarrer avant la fin de l'entrée, sans rupture */
html.h-go .hero-3d .g9{animation-composition:replace}
html.h-go .hero-3d .grille9.posee .g9{animation:g9-entree 1.5s cubic-bezier(.16,1,.3,1) both,g9-respire 7.5s cubic-bezier(.37,0,.63,1) infinite;animation-delay:calc(var(--i) * 85ms + .12s),calc(var(--i) * -.85s)}
@keyframes g9-respire{0%,100%{translate:0 0}50%{translate:0 -7px}}
/* survol : le carreau s'avance, sans couper le flottement (il agit sur transform, pas sur translate) */
html.h-go .hero-3d .grille9.posee .g9-clair{transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s cubic-bezier(.16,1,.3,1)}
html.h-go .hero-3d .grille9.posee .g9-clair:hover,html.h-go .hero-3d .grille9.posee .g9-clair:focus-visible{animation-play-state:paused,running;transform:translate3d(0,0,calc(var(--z) + 66px))}

/* --- matière et lumière --- */
.scene3d::before{width:86%;height:86%;background:radial-gradient(46% 46% at 62% 34%,rgba(150,163,214,.28),transparent 72%),radial-gradient(70% 70% at 45% 60%,rgba(88,98,140,.14),transparent 78%);filter:blur(6px)}
.hero-3d .g9-clair{
  background:linear-gradient(168deg,rgba(31,35,50,.96) 0%,rgba(17,19,28,.98) 58%,rgba(12,13,19,1) 100%);
  box-shadow:inset 0 1px 0 rgba(190,200,235,.22),inset 0 0 0 1px rgba(158,168,206,.24),0 26px 46px -26px rgba(4,6,14,.9);}
.hero-3d .g9-verre{
  background:linear-gradient(168deg,rgba(158,168,206,.10) 0%,rgba(158,168,206,.045) 55%,rgba(158,168,206,.02) 100%);
  box-shadow:inset 0 1px 0 rgba(190,200,235,.16),inset 0 0 0 1px rgba(158,168,206,.16),0 18px 38px -28px rgba(4,6,14,.8);}
.hero-3d .g9-verre::after{background-image:linear-gradient(rgba(158,168,206,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(158,168,206,.07) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(76% 70% at 50% 42%,#000 30%,transparent 100%);mask-image:radial-gradient(76% 70% at 50% 42%,#000 30%,transparent 100%)}
/* la lumière vient d'en haut à droite : la rangée haute capte plus, la basse moins */
.hero-3d .g9[style*="--i:0"],.hero-3d .g9[style*="--i:1"],.hero-3d .g9[style*="--i:2"]{--lum:1.1}
.hero-3d .g9[style*="--i:6"],.hero-3d .g9[style*="--i:7"],.hero-3d .g9[style*="--i:8"]{--lum:.9}
.hero-3d .g9-int{filter:brightness(var(--lum))}
/* reflet : plus lent, plus fin, jamais deux carreaux en même temps */
.hero-3d .g9-verre::before{background:linear-gradient(118deg,transparent 34%,rgba(206,216,255,.05) 46%,rgba(206,216,255,.11) 50%,rgba(206,216,255,.05) 54%,transparent 66%);animation-duration:11s;animation-delay:calc(var(--i) * 1.15s)}
/* traits des icônes : lavande clair, accent menthe adouci */
.hero-3d .g9-ico{color:#b3bce0}
.hero-3d .g9-clair:hover .g9-ico{color:#f2f4ff}
.hero-3d .g9-nom{color:#98a1c2}
.hero-3d .g9-nom i{color:#646c85}
.hero-3d .g9-clair:hover .g9-nom{color:#fff}
.hero-3d .g9-releve{color:#767d94}
/* fond du hero : lueur haute à droite cohérente avec l'objet, vignette basse */
.hero-3d .hero-plan-fond{background:radial-gradient(58% 52% at 68% 12%,rgba(126,139,190,.20) 0%,rgba(38,42,60,.20) 42%,rgba(8,8,11,.96) 78%,#07070a 100%)}
.hero-3d .hero-plan-fond::after{-webkit-mask-image:radial-gradient(74% 64% at 62% 34%,#000 22%,transparent 100%);mask-image:radial-gradient(74% 64% at 62% 34%,#000 22%,transparent 100%);opacity:.75}
@media (prefers-reduced-motion:reduce){html.h-go .hero-3d .grille9.posee .g9{animation:none!important;translate:none!important}}

/* la scene est pilotee image par image : aucune transition sur la rotation */
.hero-3d .grille9{transform:translateX(-8px) rotateX(var(--rx)) rotateY(var(--ry));transition:none}
/* une fois l'entrée terminée, seul le flottement reste (sur `translate`) : `transform` redevient libre
   pour le survol, et la profondeur --z de chaque carreau est rétablie */
.hero-3d .g9-clair{--z:56px}
.hero-3d .g9-verre{--z:0px}
html.h-go .hero-3d .grille9.posee .g9{animation:g9-respire 7.5s cubic-bezier(.37,0,.63,1) infinite;animation-delay:calc(var(--i) * -.85s);opacity:1;filter:none}
html.h-go .hero-3d .grille9.posee .g9-clair:hover,html.h-go .hero-3d .grille9.posee .g9-clair:focus-visible{animation-play-state:running;transform:translate3d(0,0,calc(var(--z) + 66px))}
/* la règle de la grille à plat (transform:none) ne doit pas écraser la profondeur de la scène 3D */
html.h-go .hero-3d .grille9.posee .g9{transform:translate3d(0,0,var(--z))}

/* ============================================================
   HERO 3D — MOBILE ET TABLETTE (doit rester en DERNIER : les blocs de recadrage ci-dessus
   redéfinissent la grille à deux colonnes et écraseraient une règle mobile placée plus haut)
   ============================================================ */
@media (max-width:1100px){
  .hero-3d .hero-plan-int{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:0;gap:0;padding:clamp(56px,9vh,88px) 32px clamp(40px,6vh,64px)}
  .hero-3d .hero-3d-texte{align-items:center;text-align:center;max-width:34ch;margin:0 auto}
  .hero-3d .hero-3d-texte h1{font-size:clamp(38px,8.4vw,54px)!important;max-width:14ch}
  .hero-3d .hero-3d-texte p{text-align:center;font-size:16px!important;max-width:38ch}
  .hero-3d .hero-plan-actions{justify-content:center;flex-direction:column;gap:14px}
  .scene3d{--rx:0deg;--ry:0deg;perspective:none;min-height:0;width:100%;margin-top:clamp(36px,6vh,56px)}
  .hero-3d .grille9{--t:clamp(92px,27vw,132px);--g:clamp(9px,2.2vw,13px);transform:none!important;transform-style:flat}
  .hero-3d .g9{--z:0px!important;transform:none!important}
  html.h-go .hero-3d .grille9.posee .g9{transform:none!important}
  .hero-3d .g9-verre::before{display:none}
  .hero-3d .g9-releve{position:static;transform:none;margin-top:26px;justify-content:center}
  .hero-3d .g9-nom{bottom:10px;font-size:7.5px;letter-spacing:.14em;gap:5px}
  .hero-3d .g9-ico svg{margin-top:-4px}
}
@media (max-width:640px){
  .hero-3d .hero-plan-actions .btnw{width:100%!important;max-width:320px}
  .hero-3d .g9-releve{font-size:9px;letter-spacing:.14em}
}

/* ==========================================================================
   NAVIGATION MOBILE
   Jusqu'ici le site n'en avait pas : la barre de bureau (695 px) sortait
   simplement de l'ecran. Bouton a 44 px, panneau plein ecran, meme langage
   que le reste : fond nuit, trame de plan, entree en cascade.
   ========================================================================== */
.brg{display:none;flex:none;width:46px;height:46px;margin-left:auto;padding:0;border:0;background:none;
  cursor:pointer;place-items:center;position:relative;z-index:1002;-webkit-tap-highlight-color:transparent}
.brg i{position:absolute;left:12px;width:22px;height:1.5px;border-radius:2px;background:#e8e9ee;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.brg i:nth-child(1){transform:translateY(-4px)}
.brg i:nth-child(2){transform:translateY(4px)}
html.mm-ouvert .brg i:nth-child(1){transform:rotate(45deg)}
html.mm-ouvert .brg i:nth-child(2){transform:rotate(-45deg)}

.mmob{position:fixed;inset:0;z-index:1001;background:#08080a;opacity:0;pointer-events:none;
  transition:opacity .38s cubic-bezier(.4,0,.2,1)}
.mmob::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 72% 0%,rgba(120,130,170,.18) 0%,rgba(28,30,42,.2) 38%,rgba(6,6,8,.96) 76%,#050506 100%)}
.mmob::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(158,168,206,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(158,168,206,.05) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(78% 62% at 50% 34%,#000 28%,transparent 100%);mask-image:radial-gradient(78% 62% at 50% 34%,#000 28%,transparent 100%)}
.mmob.ouvert{opacity:1;pointer-events:auto}
.mmob-int{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  padding:88px 26px calc(16px + env(safe-area-inset-bottom));box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mmob-nav{display:flex;flex-direction:column}
.mmob-nav a{display:grid;grid-template-columns:34px 1fr;align-items:baseline;gap:0 14px;
  padding:13px 4px;border-bottom:1px solid rgba(158,168,206,.12);color:#fff;text-decoration:none;
  opacity:0;transform:translateY(14px)}
.mmob.ouvert .mmob-nav a{opacity:1;transform:none;
  transition:opacity .5s ease calc(var(--k) * 42ms + 90ms),transform .6s cubic-bezier(.16,1,.3,1) calc(var(--k) * 42ms + 90ms)}
.mmob-nav a i{font-style:normal;font-size:11px;letter-spacing:.12em;color:#6e7692;font-variant-numeric:tabular-nums;font-weight:700}
.mmob-nav a b{font-size:23px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.mmob-nav a em{grid-column:2;font-style:normal;font-size:13px;color:#8990a8;margin-top:4px;line-height:1.35}
.mmob-sec{margin-top:14px;padding-bottom:4px}
.mmob-sec a{grid-template-columns:1fr;padding:11px 4px}
.mmob-sec a b{font-size:19px;font-weight:600;letter-spacing:-.02em;color:#c9cee0}
/* le bouton reste visible meme quand la liste depasse l'ecran */
.mmob-pied{position:sticky;bottom:0;margin-top:auto;padding:18px 0 4px;display:flex;flex-direction:column;align-items:stretch;gap:8px;
  background:linear-gradient(to top,#08080a 58%,rgba(8,8,10,0));opacity:0;transform:translateY(14px)}
.mmob.ouvert .mmob-pied{opacity:1;transform:none;transition:opacity .5s ease .43s,transform .6s cubic-bezier(.16,1,.3,1) .43s}
.mmob-pied .btnw{width:100%!important;justify-content:space-between}
.mmob-tel{text-align:center;font-size:15px;letter-spacing:.04em;color:#a6aab9;padding:14px;text-decoration:none}
html.mm-ouvert,html.mm-ouvert body{overflow:hidden}

@media (max-width:900px){
  /* :first-of-type — sinon la regle atteint aussi le panneau, qui est le 2e div du header */
  header > div:first-of-type{height:78px!important;padding:0 20px!important}
  header > div:first-of-type > nav{display:none!important}
  header > div:first-of-type > a[href="contact.html"]{display:none!important}
  header > div:first-of-type > a:first-child span{font-size:27px!important}
  .brg{display:grid}
  /* la cascade « Services » du bureau n'a plus lieu d'etre : le panneau la remplace */
  .dd-panel{display:none!important}
}
@media (min-width:901px){ .mmob{display:none} }
@media (prefers-reduced-motion:reduce){
  .mmob,.mmob-nav a,.mmob-pied,.brg i{transition-duration:.01ms!important}
}

/* ==========================================================================
   ETAPE 4 — EXPERIENCE MOBILE
   Plusieurs grilles gardaient leur mise en page de bureau sur telephone :
   quatre colonnes dans 390 px, du texte a trois mots par ligne, et des blocs
   coupes par le bord de l'ecran. Ce bloc les remet d'aplomb.
   Il doit rester a la fin du fichier.
   ========================================================================== */
@media (max-width:820px){
  /* --- les listes numerotees : le numero passe au-dessus, le texte respire --- */
  .typo-l,.typo-lignes-2 .typo-l{grid-template-columns:1fr!important;gap:10px;padding:28px 0}
  .typo-l .typo-n{padding-top:0}
  .typo-l h3{font-size:23px;letter-spacing:-.025em}
  .typo-l p{font-size:15.5px;max-width:none}
  .typo-l .scene{margin-top:14px}

  /* --- les grilles a plusieurs colonnes passent sur une seule --- */
  .inclus{grid-template-columns:1fr;gap:0}
  .typo-prix{grid-template-columns:1fr;gap:26px}
  
  .marches{grid-template-columns:1fr}
  .marches > div{padding:26px 0 24px;margin-right:0;border-right:0;border-bottom:1px solid rgba(12,14,18,.12)}
  .marches > div:last-child{border-bottom:0}
  .marches b{font-size:21px;margin-top:12px}
  .marches p{font-size:15px}

  /* --- le mot geant du bas de page ne doit pas sortir du cadre --- */
  .geant-mot{font-size:clamp(34px,10.5vw,60px);white-space:normal}
  .foot-marque{font-size:clamp(64px,17vw,120px)!important;margin:-6px 0 32px}

  /* --- la nappe decorative depassait de quelques pixels --- */
  .aurore{max-width:100%;overflow:hidden}

  /* --- cibles tactiles : rien en dessous de 44 px de haut --- */
  .typo-lien,.mmob-tel,footer a,.foot-liens a{display:inline-flex;align-items:center;min-height:44px}
  .typo-note a{min-height:44px;display:inline-flex;align-items:center}

  /* --- plus rien sous 12 px pour du texte courant --- */
  .typo-note,.typo-prix p,.marches p,.typo-l p{font-size:15px}
  .champ{font-size:12.5px;height:34px}
  .pill{font-size:11.5px}
  
}
  /* --- les gouttieres de 57 px laissaient 276 px de texte utile sur 390 --- */
  section > div[style*="57px"]{padding-left:24px!important;padding-right:24px!important}
  .typo-fin > div[style*="57px"]{padding-top:84px!important;padding-bottom:92px!important}
  .typo-fin .typo-h2{max-width:none!important}
  .typo-h2 .mot{white-space:normal}

  /* --- le pied de page : gouttiere et colonnes --- */
  footer > div[style*="57px"]{padding-left:24px!important;padding-right:24px!important}
  footer > div > div[style*="1.5fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;gap:30px 24px!important}

  /* --- deux grilles oubliees --- */
  .typo-legende{grid-template-columns:1fr;gap:0}
  .typo-legende > div{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.09)}
  .typo-legende > div:last-child{border-bottom:0}
  .studio{grid-template-columns:1fr!important;gap:40px!important}
  .metiers{grid-template-columns:1fr!important}
  .typo-etapes{grid-template-columns:1fr!important;gap:26px}
}
@media (max-width:520px){
  .typo-l h3{font-size:21px}
  .geant-mot{font-size:clamp(30px,9.5vw,48px)}
}

/* --- ECHELLE TYPOGRAPHIQUE MOBILE ---------------------------------------
   Les titres etaient figes : 68 px pour un h1, 52 px pour un h2, quelle que
   soit la largeur. Sur 390 px cela faisait cinq caracteres par ligne.
   Les selecteurs reprennent ceux des heros : meme specificite, place plus
   loin dans le fichier, donc ils l'emportent.
   ------------------------------------------------------------------------ */
@media (max-width:820px){
  section h1,
  .hero-3d .hero-3d-texte h1,
  .hero-mat .hero-3d-texte h1{font-size:min(68px,10.4vw)!important;line-height:1.08!important;letter-spacing:-.035em!important}
  .typo-h2{font-size:min(52px,8.6vw);line-height:1.08}
  .typo-h2 .mot{white-space:normal}
  .typo-hero .fx1,.hero-3d .hero-3d-texte p{font-size:16px!important;line-height:1.6!important}
  .eyebrow{font-size:11px!important;letter-spacing:.16em!important}
}

/* --- DIAGRAMMES LARGES SUR TELEPHONE -------------------------------------
   La chaine d'automatisation est concue en largeur : ramenee a 342 px, ses
   etiquettes tombaient a 6-9 px. On la laisse a sa taille et on la fait
   glisser du doigt, plutot que de la rendre illisible.
   ------------------------------------------------------------------------ */
@media (max-width:820px){
  .typo-ecran{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .flux-vivant{min-width:640px}
  /* les tailles du schema sont en vw : elargir le cadre ne suffit pas,
     il faut redonner une base lisible aux trois blocs concernes */
  .fv-nd{font-size:12px!important}
  .fv-cond{font-size:11px!important}
  .fv-journal{font-size:11px!important}
  .fv-top{font-size:12px!important}
  .eyebrow{font-size:11.5px!important}
  
  /* le numero de telephone est un lien : il doit se toucher */
  a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}
}

/* ==========================================================================
   ACCUEIL RESTRUCTURE (etape 1 du plan du 15/09)
   Les cinq metiers : une ligne par metier, l'icone dessinee de la grille 3D
   comme seul objet. Aucune photo. Meme matiere de carreau que le hero.
   ========================================================================== */
.metiers-l{margin-top:48px;border-top:1px solid rgba(12,14,18,.12)}
.ml{display:grid;grid-template-columns:96px 64px 1fr 40px;align-items:center;gap:0 28px;padding:26px 0;
  border-bottom:1px solid rgba(12,14,18,.12);color:inherit;text-decoration:none;position:relative}
.ml::after{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#4E5A8C 0%,rgba(78,90,140,.35) 55%,rgba(78,90,140,0) 100%);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.ml:hover::after{transform:scaleX(1)}
.ml-ico{display:block;width:96px;height:96px;border-radius:18px;color:#3d4460;
  background:linear-gradient(168deg,rgba(31,35,50,.96) 0%,rgba(17,19,28,.98) 58%,rgba(12,13,19,1) 100%);
  box-shadow:inset 0 1px 0 rgba(190,200,235,.22),inset 0 0 0 1px rgba(158,168,206,.24),0 18px 32px -20px rgba(4,6,14,.6);
  transition:transform .6s cubic-bezier(.16,1,.3,1),color .4s ease}
.ml-ico svg{width:100%;height:100%;display:block;color:#b3bce0;transform:translateY(7%) scale(1.18)}  /* le dessin occupe le haut du viewBox 200 : on le recentre */
.ml:hover .ml-ico{transform:translateY(-3px)}
.ml:hover .ml-ico svg{color:#f2f4ff}
.ml .typo-n{padding-top:0}
.ml-txt b{display:block;font-size:28px;font-weight:700;letter-spacing:-.03em;color:#14161d;line-height:1.1;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.ml-txt p{margin:8px 0 0;font-size:16px;line-height:1.55;color:#585E6A;max-width:58ch}
.ml:hover .ml-txt b{transform:translateX(6px)}
.ml-fl{color:#8b95b8;opacity:0;transform:translateX(-8px);transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.ml:hover .ml-fl{opacity:1;transform:none}

/* les etapes, sur fond sombre */
.marches.sombre{border-top-color:rgba(255,255,255,.09)}
.marches.sombre > div{border-right-color:rgba(255,255,255,.09)}
.marches.sombre b{color:#fff}
.marches.sombre p{color:#a6aab9}
.marches.sombre > div::before{background:#8b95b8}

/* le prix, en bande sous les etapes */
.prix-l{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin-top:56px;padding-top:40px;border-top:1px solid rgba(255,255,255,.09)}
.prix-l b{display:block;font-size:24px;font-weight:700;color:#fff;margin-top:18px;letter-spacing:-.025em}
.prix-l p{margin:10px 0 0;font-size:15px;line-height:1.65;color:#a6aab9;max-width:40ch}
.prix-l-liens{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:14px}

@media (max-width:820px){
  .ml{grid-template-columns:64px 1fr 32px;gap:0 18px;padding:20px 0}
  .ml .typo-n{display:none}
  .ml-ico{width:64px;height:64px;border-radius:14px}
  .ml-txt b{font-size:22px}
  .ml-txt p{font-size:15px}
  .marches.sombre > div{border-bottom-color:rgba(255,255,255,.09)}
  .prix-l{grid-template-columns:1fr;gap:28px;margin-top:40px;padding-top:32px}
  .prix-l-liens{flex-direction:row;flex-wrap:wrap;gap:8px 28px}
}

/* ==========================================================================
   HERO 3D — v2 (16/09) : de l'objet, pas des cartes.
   Epaisseur (chaque carreau est une dalle : on voit sa tranche quand la
   scene pivote), lumiere mobile, verre, ombre au sol, parallaxe.
   REGLE DE COUT : la lumiere est un ELEMENT deplace par transform, jamais un
   degrade dont on change l'origine (ca repeint). Aucun backdrop-filter : le
   fond bouge, Firefox devrait re-flouter a chaque image.
   ========================================================================== */
.scene3d{--lx:62%;--ly:30%;--px:0px;--py:0px;--sp:1}

/* lumiere-cle : un disque compose, qui suit le curseur un peu moins vite que la grille */
.scene-lum{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1/1;height:auto;margin:-75% 0 0 -75%;pointer-events:none;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(168,180,232,.28) 0%,rgba(130,142,196,.11) 42%,transparent 72%);
  transform:translate3d(calc((var(--lx) - 50%) * .667 + var(--px) * .45),calc((var(--ly) - 50%) * .667 + var(--py) * .45),0);will-change:transform}
.hero-3d .scene3d::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 56% at 50% 58%,rgba(96,106,150,.10),transparent 74%)}
/* ombre au sol */
.hero-3d .scene3d::after{content:'';position:absolute;left:14%;right:14%;top:58%;height:46%;pointer-events:none;border-radius:50%;
  transform:translate3d(calc(var(--px) * -.6),calc(var(--py) * -.35),0);
  background:radial-gradient(50% 50% at 50% 50%,rgba(3,4,10,.85) 0%,rgba(3,4,10,.45) 40%,transparent 72%);opacity:0;transition:opacity 1.6s ease 1.9s}
html.h-go .hero-3d .scene3d::after{opacity:1}
@media (min-width:1101px){
  .hero-3d .grille9{transform:translate3d(calc(-8px + var(--px)),var(--py),0) rotateX(var(--rx)) rotateY(var(--ry))}
}

/* --- la dalle --- */
.hero-3d .g9{transform-style:preserve-3d;overflow:visible}
.hero-3d .g9-clair{
  background:linear-gradient(160deg,#242838 0%,#171a25 46%,#0f1017 100%);
  box-shadow:inset 0 1px 0 rgba(200,210,245,.26),inset 1px 0 0 rgba(200,210,245,.07),inset 0 -1px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(158,168,206,.22),0 30px 50px -28px rgba(3,4,10,.95)}
.hero-3d .g9-clair::before{content:'';display:block;position:absolute;inset:0;border-radius:inherit;z-index:0;
  transform:translateZ(-12px);background:linear-gradient(160deg,#0c0d13,#06070b);
  box-shadow:inset 0 0 0 1px rgba(158,168,206,.16),0 0 0 1px rgba(0,0,0,.6)}
.hero-3d .g9-clair::after{content:'';display:block;position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;transform:translateZ(1px);
  background:linear-gradient(180deg,rgba(255,255,255,.035) 0%,transparent 28%)}
.hero-3d .g9-int{z-index:1;filter:none;isolation:isolate}
.hero-3d .g9-ico svg{z-index:1}
/* la tache de lumiere du carreau : placee dans le repere du carreau a partir de la lumiere de la grille.
   Les % de translate sont ceux de la tache (2x le carreau), d'ou la division par 2. */
.g9-lum{position:absolute;left:-50%;top:-50%;width:200%;height:200%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(255,255,255,calc(.13 * var(--sp))) 0%,rgba(255,255,255,calc(.045 * var(--sp))) 38%,transparent 70%);
  transform:translate3d(calc(((var(--lx) - var(--c) * 33.333%) * 3 - 50%) / 2),calc(((var(--ly) - var(--r) * 33.333%) * 3 - 50%) / 2),0);will-change:transform}
.hero-3d .g9-ico{color:#bcc4e6}
.hero-3d .g9-nom{color:#a2aac9;z-index:3}
.hero-3d .g9-nom i{color:#6b7391}

/* --- le verre (sans backdrop-filter : un verre depoli compose en degrades) --- */
.hero-3d .g9-verre{
  background:
    radial-gradient(70% 60% at 50% 40%,rgba(200,208,240,.09),transparent 70%),
    linear-gradient(160deg,rgba(176,186,228,.13) 0%,rgba(120,130,175,.06) 55%,rgba(90,98,140,.04) 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(170,180,220,.24),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 40px rgba(180,190,230,.05),0 22px 44px -28px rgba(3,4,10,.7)}
.hero-3d .g9-verre::before{content:'';position:absolute;inset:0;border-radius:inherit;transform:translateZ(-8px);animation:none;
  background:rgba(120,130,175,.05);box-shadow:inset 0 0 0 1px rgba(170,180,220,.14)}
.hero-3d .g9-verre::after{z-index:2;
  background-image:linear-gradient(rgba(176,186,228,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(176,186,228,.09) 1px,transparent 1px);
  background-size:34px 34px;background-position:center;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(80% 80% at 50% 50%,#000 40%,transparent 100%)}
.hero-3d .g9-verre .g9-lum{background:radial-gradient(closest-side,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 40%,transparent 70%)}

/* --- balayage de lumiere, une fois, quand tout est pose --- */
.hero-3d .grille9::after{content:'';position:absolute;inset:-6% -30%;pointer-events:none;z-index:5;
  background:linear-gradient(108deg,transparent 42%,rgba(220,228,255,.10) 49%,rgba(220,228,255,.16) 50%,rgba(220,228,255,.10) 51%,transparent 58%);
  transform:translate3d(-70%,0,80px);opacity:0}
html.h-go .hero-3d .grille9::after{animation:g9-balaye 1.9s cubic-bezier(.4,0,.2,1) 2.35s both}
@keyframes g9-balaye{0%{transform:translate3d(-70%,0,80px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate3d(70%,0,80px);opacity:0}}

/* --- survol : la dalle monte vers la lumiere, la tache s'allume --- */
html.h-go .hero-3d .grille9.posee .g9-clair:hover{--sp:1.9;
  box-shadow:inset 0 1px 0 rgba(220,228,255,.5),inset 1px 0 0 rgba(220,228,255,.12),inset 0 -1px 0 rgba(0,0,0,.6),inset 0 0 0 1px rgba(190,200,240,.42),0 48px 70px -30px rgba(3,4,10,1)}
@media (prefers-reduced-motion:reduce){.hero-3d .grille9::after{animation:none!important}}

/* --- PAGE METIER : la grille entiere, et le carreau de la page qui s'avance dans la lumiere ---
   Meme objet que l'accueil. Une fois posee, le carreau « ici » monte vers la lumiere et y reste
   eclaire ; les quatre autres metiers se posent en retrait (plus sombres), et reviennent au survol. */
.hero-mtr1 .g9-ici{cursor:default}
html.h-go .hero-mtr1 .grille9.posee .g9-ici{transition:transform 1.4s cubic-bezier(.19,1,.22,1)}
html.h-go .hero-mtr1 .grille9.avance .g9-ici{transform:translate3d(0,-6px,calc(var(--z) + 46px))}
html.h-go .hero-mtr1 .grille9.posee .g9-ici .g9-eclat,html.h-go .hero-mtr1 .grille9.posee .g9-ici .g9-lum{opacity:1}
html.h-go .hero-mtr1 .grille9.posee .g9-ici .g9-ico svg{color:#f2f4ff}
html.h-go .hero-mtr1 .grille9.posee .g9-ici .g9-nom{color:#fff}
html.h-go .hero-mtr1 .grille9.posee .g9-clair:not(.g9-ici){--lum:.72}
html.h-go .hero-mtr1 .grille9.posee .g9-clair:not(.g9-ici) .g9-ico svg{color:#7d86a8}
html.h-go .hero-mtr1 .grille9.posee .g9-clair:not(.g9-ici) .g9-nom{color:#6b7391}
html.h-go .hero-mtr1 .grille9.posee .g9-clair:not(.g9-ici):hover .g9-ico svg{color:#f2f4ff}
html.h-go .hero-mtr1 .grille9.posee .g9-clair:not(.g9-ici):hover .g9-nom{color:#fff}
.hero-mtr1 .g9-releve{font-size:10.5px}

/* --- AURORE : une seule couche, peinte une fois, deplacee par le transform deja en place (17 s).
   Trois lueurs animees separement = trois textures de la taille du hero : trop pour le GPU. --- */
.aurore{overflow:hidden;
  background:
    radial-gradient(38% 60% at 74% 32%,rgba(120,130,170,.14),rgba(120,130,170,0) 70%),
    radial-gradient(44% 70% at 22% 12%,rgba(120,130,170,.09),rgba(120,130,170,0) 70%),
    radial-gradient(40% 64% at 52% 88%,rgba(120,130,170,.07),rgba(120,130,170,0) 70%)}
.aurore i{display:none}

/* --- lumieres des carreaux : moins de texture GPU (160 % au lieu de 200 %, et pas sur le verre) --- */
.g9-lum{left:-30%;top:-30%;width:160%;height:160%}
.hero-3d .g9-verre .g9-lum{display:none}
.scene-lum{width:120%;max-width:900px;margin:-60% 0 0 -60%}

/* --- lumiere des carreaux : au repos, AUCUNE couche par carreau (seule la lumiere-cle bouge) ;
   la tache d'un carreau ne s'allume qu'au survol, et ne suit la souris que quand elle bouge --- */
.g9-lum{will-change:auto;opacity:0;transition:opacity .45s ease;
  transform:translate3d(calc(((var(--tlx,50%) - var(--c) * 33.333%) * 3 - 50%) / 2),calc(((var(--tly,45%) - var(--r) * 33.333%) * 3 - 50%) / 2),0)}

.hero-3d .g9-clair:hover .g9-lum,.hero-3d .g9-clair:focus-visible .g9-lum{opacity:1}

/* sur telephone la scene est a plat : pas de lumiere-cle (elle depassait de 32 px, clippee mais inutile) */
@media (max-width:1100px){.scene-lum,.hero-3d .scene3d::after{display:none}}

/* ==========================================================================
   HERO 3D — v2.1 : plus doux, plus reel, sans saccade.
   - entree : plus de flou anime (transform + opacite seulement), cadence plus lente
   - respiration : la grille respire comme UN objet (tres legere inclinaison), les
     carreaux ne bougent plus chacun de leur cote
   - survol : plus aucune box-shadow animee (repeinte a chaque image) ; l'etat
     eclaire est un calque pre-dessine dont on fondu l'opacite
   - avant la pose, les carreaux ne repondent pas a la souris (aucun saut possible)
   ========================================================================== */
@keyframes g9-entree{
  from{opacity:0;transform:translate3d(0,44px,-520px) rotateX(-7deg)}
  to{opacity:1;transform:translate3d(0,0,var(--z)) rotateX(0deg)}}
html.h-go .hero-3d .g9{animation:g9-entree 1.7s cubic-bezier(.19,1,.22,1) both;animation-delay:calc(var(--i) * 95ms + .15s);pointer-events:none}
html.h-go .hero-3d .grille9.posee .g9{pointer-events:auto;animation:none;translate:0 0}
@keyframes g9-respire{0%,100%{translate:0 0}50%{translate:0 -2px}}
html.h-go .hero-3d .grille9.posee .g9{animation:g9-respire 9s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i) * -.35s)}
/* la scene entiere respire, une fois posee : une inclinaison de 0,7 degre sur 11 s */
@keyframes g9-souffle{0%,100%{rotate:x 0deg}50%{rotate:x .7deg}}
html.h-go .hero-3d .grille9.posee{animation:g9-souffle 11s ease-in-out infinite}

/* survol : levee douce, calque eclaire en fondu, aucune ombre animee */
html.h-go .hero-3d .grille9.posee .g9-clair{transition:transform 1.1s cubic-bezier(.19,1,.22,1),box-shadow 0s}
html.h-go .hero-3d .grille9.posee .g9-clair:hover{transform:translate3d(0,-4px,calc(var(--z) + 54px));box-shadow:inset 0 1px 0 rgba(200,210,245,.26),inset 1px 0 0 rgba(200,210,245,.07),inset 0 -1px 0 rgba(0,0,0,.55),inset 0 0 0 1px rgba(158,168,206,.22),0 30px 50px -28px rgba(3,4,10,.95)}
.hero-3d .g9-clair .g9-eclat{position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;opacity:0;transform:translateZ(1px);
  box-shadow:inset 0 1px 0 rgba(220,228,255,.5),inset 1px 0 0 rgba(220,228,255,.12),inset 0 0 0 1px rgba(190,200,240,.42);transition:opacity .7s ease}
.hero-3d .g9-clair:hover .g9-eclat{opacity:1}
.hero-3d .g9-lum{transition:opacity .7s ease}
.hero-3d .g9-ico svg{transition:color .7s ease}
@media (prefers-reduced-motion:reduce){html.h-go .hero-3d .grille9.posee,html.h-go .hero-3d .grille9.posee .g9{animation:none!important}}

@media (max-width:1100px){html.h-go .hero-3d .grille9.posee{animation:none}}   /* scene a plat : pas de souffle */

/* --- GRAIN COMPOSE : le bruit ne se repeint plus, il se deplace ---------------------------------
   `grain-vie` animait background-position par paliers : un repeint pleine section d'une texture
   feTurbulence toutes les 300 ms, sur quatre sections (trames a 60-80 ms sur Firefox).
   Meme rendu, mais le calque deborde de 48 px et c'est lui qui bouge, par transform. */
.grain::after{inset:0;background-position:0 0!important;will-change:transform;animation:grain-vie-t 2.4s steps(1) infinite}   /* scale(1.12) : le calque couvre toujours la section malgre le decalage, sans rien rogner */
@keyframes grain-vie-t{
  0%{transform:translate3d(0,0,0) scale(1.12)}12%{transform:translate3d(-34px,26px,0) scale(1.12)}25%{transform:translate3d(22px,-38px,0) scale(1.12)}
  38%{transform:translate3d(-28px,-14px,0) scale(1.12)}50%{transform:translate3d(38px,20px,0) scale(1.12)}62%{transform:translate3d(-12px,34px,0) scale(1.12)}
  75%{transform:translate3d(30px,-8px,0) scale(1.12)}88%{transform:translate3d(-40px,-30px,0) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.grain::after{animation:none}}

/* ==========================================================================
   MOBILE — REPRISE (16/09). Eudes : « pas assez fluide, pas assez rapide, cadrage insupportable ».
   Mesure avant : contenu visible a 6 s (CSS bloquant 2,5 s + ouverture + voile), hero de 1045 px
   avec 157 px de vide sous l'en-tete, en-tete en pastille flottante de 155 px, sites vivants
   charges sur telephone, grain et aurore animes en permanence. Ce bloc, avec html.tactile
   (pose des le HTML) et le JS, corrige tout cela. Il doit rester a la fin du fichier.
   ========================================================================== */
@media (max-width:900px){
  /* A. EN-TETE : une barre fine collee en haut, sous la safe-area. Plus de pastille flottante. */
  header.nav-fixe,header.nav-fixe.nav-fond{padding:0!important}
  header > div:first-of-type{height:calc(60px + env(safe-area-inset-top))!important;padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))!important;max-width:none!important;border-radius:0!important;box-shadow:none!important;border:0!important;transition:background .3s ease,box-shadow .3s ease!important}
  header.nav-fixe.nav-fond > div:first-of-type{background:rgba(6,6,8,.88)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.07)!important}
  header > div:first-of-type > a:first-child{gap:9px!important}
  header > div:first-of-type > a:first-child > div{grid-template-columns:repeat(3,7.4px)!important;grid-template-rows:repeat(3,7.4px)!important;gap:2.8px!important}
  header > div:first-of-type > a:first-child span{font-size:24px!important;letter-spacing:-.6px!important}
  header > div:first-of-type > a:first-child{min-height:44px}
  .brg{width:48px;height:48px;margin-right:-10px}
  .brg i{left:13px}
  .mmob-int{padding-top:calc(76px + env(safe-area-inset-top));overscroll-behavior:contain}

  /* la compensation de l'en-tete (108 px sur bureau) : ici l'en-tete fait 60 px et le hero porte sa propre marge */
  body > div > section:first-of-type{padding-top:0!important}
  .btnw,.btno{box-sizing:border-box}
  /* B. HERO ACCUEIL / SITES WEB : texte a gauche comme sur toutes les autres pages ; plus de vide ;
        la premiere rangee de carreaux affleure en bas du premier ecran : le geste de defiler est evident */
  .hero-3d .hero-plan-int{align-items:flex-start;text-align:left;padding:calc(88px + env(safe-area-inset-top)) 24px 28px;gap:0;min-height:0}
  .hero-3d .hero-3d-texte{align-items:flex-start;text-align:left;max-width:none;margin:0}
  .hero-3d .hero-3d-texte h1{margin-top:16px!important;font-size:clamp(34px,9.9vw,46px)!important;line-height:1.04!important;letter-spacing:-.035em!important;max-width:12ch}
  .hero-3d .hero-3d-texte p{text-align:left;font-size:16px!important;line-height:1.55!important;max-width:36ch;margin-top:18px!important}
  .hero-3d .hero-plan-actions{align-items:stretch;justify-content:flex-start;margin-top:24px;gap:4px;width:100%}
  .hero-3d .hero-plan-actions .btnw{width:100%!important;max-width:none;height:54px}
  .hero-3d .hero-plan-actions .typo-lien,.typo-hero .fx2 .typo-lien{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;padding-bottom:0;border-bottom:0;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.3)}
  .scene3d{margin-top:22px;width:100%;display:block}
  .hero-3d .grille9{--t:min(calc((100vw - 48px - 2*8px)/3),150px);--g:8px;margin:0}   /* min : sur tablette les carreaux ne depassent pas 150 px */
  .hero-3d .hero-plan-actions .btnw,.typo-hero .fx2 .btnw{font-size:15px;padding:0 18px 0 20px}      /* 375 px : le libelle tient sur une ligne */
  .hero-3d .g9{border-radius:14px}
  .hero-3d .g9-nom{bottom:9px;font-size:8px;letter-spacing:.14em;gap:5px}
  .hero-3d .g9-releve{margin-top:16px;justify-content:flex-start;font-size:9.5px}
  html.h-go .hero-3d .g9{animation-duration:.9s;animation-delay:calc(var(--i) * 45ms + .05s)}   /* entree plus courte : le texte est deja la */

  /* C. HEROS DES AUTRES PAGES (typographiques) : meme cadrage, meme rythme */
  .typo-hero{min-height:0}
  .typo-hero > div[style*="57px"]{padding-top:calc(88px + env(safe-area-inset-top))!important;padding-bottom:56px!important}
  .typo-hero h1{margin-top:16px!important;font-size:clamp(34px,9.9vw,46px)!important;line-height:1.04!important;letter-spacing:-.035em!important}
  .typo-hero .fx1{margin-top:18px!important;max-width:36ch!important}
  .typo-hero .fx2{flex-direction:column;align-items:stretch!important;gap:4px!important;margin-top:24px!important}
  .typo-hero .fx2 .btnw{width:100%!important;height:54px}
  .typo-hero .fx2 .btno{align-self:stretch;height:52px}
  .hero-photo{display:none!important}           /* les photos generees : pas sur telephone (elles quittent le site a l'etape 4) */

  /* D. SECTIONS : 104 a 120 px de marge verticale sur 390 px, c'est un ecran de vide entre deux idees */
  section:not(.typo-hero) > div[style*="57px"]{padding-top:64px!important;padding-bottom:72px!important}
  .typo-fin > div[style*="57px"]{padding-top:72px!important;padding-bottom:80px!important}

  .typo-chrono > div{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .typo-chrono p{font-size:16px}
  /* E. MUR : la capture suffit (aucun site vivant sur telephone) et le titre se lit */
  .mur{margin-top:32px;gap:26px}
  .ecran-live{display:none}
  .ecran-ui{margin-top:12px}
  .ecran-ui b{font-size:16px}

  /* F. MATIERE : rien ne tourne en fond sur telephone */
  .aurore,.grain::after,.foot-marque,.motif-fantome div{animation:none!important}
  .grain::after{will-change:auto}
  .btnw::after{animation:none}                                 /* le reflet periodique du bouton : une couche de moins */
  html.h-go .hero-3d .grille9.posee .g9{animation:none}        /* la respiration des carreaux */

  /* G. TRAVERSEE : un volet rapide et un fondu, aucun flou ni changement d'echelle */
  .trav-p{transition-duration:.28s;background-image:none}
  .trav.ouvre .trav-p{filter:none;transition:transform .34s cubic-bezier(.76,0,.24,1)}
  html.tv-sort body > div[style*="background:#050505"] > *:not(header),html.tv-sort-inv body > div[style*="background:#050505"] > *:not(header){transform:none;filter:none;opacity:.5;transition:opacity .3s ease}
  html.tv-attente body > div[style*="background:#050505"] > *:not(header){transform:none;filter:none;opacity:0}
  html.tv-entre body > div[style*="background:#050505"] > *:not(header),html.tv-entre-inv body > div[style*="background:#050505"] > *:not(header){animation:tv-fondu .42s ease both}
  html.tv-entre header,html.tv-entre-inv header{animation:tv-tete .5s ease both}
}
@keyframes tv-fondu{from{opacity:0}to{opacity:1}}
/* H. TACTILE, quelle que soit la largeur : le doigt repond tout de suite, aucun etat de survol qui reste colle */
a,button,[role=button],.g9,.ecran{touch-action:manipulation}
html.tactile .btnw:hover,html.tactile .card:hover,html.tactile .ml:hover .ml-ico{transform:none}