/* Isolation Facile — fond 3D complet (V2, 2026-11-13). Un canvas fixé derrière toutes les pages ; le contenu reste
 * au-dessus avec des voiles sombres pour garder le contraste AA. Trois modes posés sur <html> par scene.js :
 *   (rien)      → dégradé statique immédiat (premier rendu), le canvas arrive en fondu une fois prêt (html.bg-3d)
 *   .bg-lite    → appareil faible / sans WebGL : dégradé + neige CSS légère (transform seulement)
 *   .bg-fixe    → prefers-reduced-motion : dégradé fixe, rien ne bouge */

/* ---------- le fond ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(120% 70% at 85% 12%,rgba(214,58,115,.14),transparent 60%),
  radial-gradient(90% 60% at 10% 100%,rgba(255,179,107,.06),transparent 60%),
  linear-gradient(180deg,#08080b 0%,#0b0b0e 45%,#13161f 100%)}
.bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s ease}
html.bg-3d .bg canvas{opacity:1}
.bg .neige{display:none}
body{background:transparent;background-image:none}
main,.foot{position:relative;z-index:1}
.hd{z-index:40}.sticky{z-index:30}.temoins{z-index:50}
/* la grille fine de l'ancien fond, maintenant sur un voile très léger pour ne pas cacher la 3D */
main{background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:64px 64px}

/* fond CSS léger (appareils faibles) : deux nappes de flocons qui descendent, transform uniquement */
html.bg-lite .bg .neige{display:block;position:absolute;inset:0}
html.bg-lite .bg .neige:before,html.bg-lite .bg .neige:after{content:"";position:absolute;left:0;right:0;top:0;height:200%;
  background-image:radial-gradient(circle,rgba(255,255,255,.55) 1px,transparent 1.8px);background-size:110px 110px;animation:neigeCss 26s linear infinite;opacity:.6}
html.bg-lite .bg .neige:after{background-size:170px 170px;background-position:40px 60px;animation-duration:40s;opacity:.35}
html.bg-lite .bg:after{content:"";position:absolute;left:55%;bottom:-20%;width:70vw;height:60vh;border-radius:50%;background:radial-gradient(closest-side,rgba(214,58,115,.22),transparent);animation:lueurCss 7s ease-in-out infinite alternate}
@keyframes neigeCss{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
@keyframes lueurCss{from{opacity:.5;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
html.bg-fixe .bg .neige,html.bg-fixe .bg:after{display:none;animation:none}
html.bg-fixe .bg canvas{display:none}

/* ---------- lisibilité : voiles derrière le texte (pas de backdrop-filter : trop coûteux sur un canvas) ---------- */
.hero .wrap>div:first-child{position:relative;padding:28px 0}
.hero .wrap>div:first-child:before{content:"";position:absolute;inset:-24px -40px -24px -60px;border-radius:40px;z-index:-1;
  background:radial-gradient(70% 90% at 35% 50%,rgba(11,11,14,.9),rgba(11,11,14,.65) 55%,transparent 100%)}
.hero:before{display:none}
.hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);padding:64px 0 48px}
.hdr{position:relative;padding:20px 24px;margin-left:-24px;margin-right:-24px;border-radius:20px;background:linear-gradient(90deg,rgba(11,11,14,.86),rgba(11,11,14,.6) 70%,rgba(11,11,14,.25))}
.s{border-top-color:rgba(255,255,255,.07)}
.step{background:rgba(11,11,14,.82);border:1px solid var(--ln);border-radius:18px;padding:28px 26px!important}
.steps:before{top:52px}
.step .n{background:#121216}
.split>div:first-child{background:rgba(11,11,14,.82);border:1px solid var(--ln);border-radius:22px;padding:32px}
.fsec .side{background:rgba(11,11,14,.82);border:1px solid var(--ln);border-radius:22px;padding:32px}
.fsec:before{display:none}
.cta .wrap{background:rgba(11,11,14,.84);border:1px solid var(--ln);border-radius:24px;padding:40px}
.cta:before{display:none}
.doc .wrap{background:rgba(11,11,14,.86);border:1px solid var(--ln);border-radius:24px;padding:40px 44px}
.p404 .wrap>div{background:rgba(11,11,14,.86);border:1px solid var(--ln);border-radius:24px;padding:48px 40px}
.foot{background:rgba(9,9,11,.92)}
.hd{background:rgba(11,11,14,.84)}
details.faq{background:rgba(18,18,22,.94)}
.g{background:rgba(18,18,22,.96)}
.card .in{background:rgba(18,18,22,.96)}
.form{background:linear-gradient(170deg,rgba(26,26,32,.98),rgba(14,14,18,.98))}
.calc .in{background:linear-gradient(170deg,rgba(26,26,32,.98),rgba(14,14,18,.98))}
.sticky{background:rgba(11,11,14,.94)}

/* ---------- héros V2 : une colonne de texte, UN bouton principal, la maison 3D occupe la droite ---------- */
.hero{min-height:calc(100svh - var(--hd));display:flex;align-items:center}
.hero .wrap{width:min(1200px,100% - 48px)}
.hero .lien{display:inline-flex;align-items:center;gap:8px;padding:15px 6px;color:var(--mut2);font-weight:500;font-size:15px;border-bottom:1px solid transparent}
.hero .lien:hover{color:#fff;border-color:var(--pk)}
.hero .lien svg{width:16px;height:16px;color:var(--pk)}
.hero .indice{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);pointer-events:none}
.hero .indice i{width:1px;height:34px;background:linear-gradient(180deg,var(--pk),transparent);display:block}
html.js-motion .hero .indice i{animation:indice 2.2s ease-in-out infinite}
@keyframes indice{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* bande de réassurance sous le héros (remplace l'ancien panneau) */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln);border:1px solid var(--ln);border-radius:18px;overflow:hidden;margin-top:0}
.strip li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:18px 22px;background:rgba(11,11,14,.86)}
.strip li svg{width:26px;height:26px;color:var(--pk)}
.strip li b{display:block;font-family:'Space Grotesk',sans-serif;font-size:16px}
.strip li span{font-size:13px;color:var(--mut)}
.bande{padding:0 0 36px}

/* ---------- section épinglée « Où la chaleur s'échappe » : 3 moments, la 3D fait le reste ---------- */
.flux .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;min-height:calc(100svh - var(--hd))}
.flux .moments3{position:relative;background:rgba(11,11,14,.84);border:1px solid var(--ln);border-radius:22px;padding:34px}
.flux .moments3 .m{display:none;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.flux .moments3 .m.on{display:grid}
.flux .m .no{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;background:#121216;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset;color:#fff;position:relative}
.flux .m .no:after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid var(--pk);opacity:.7}
.flux .m h3{font-size:26px;margin-bottom:8px}
.flux .m p{color:var(--mut2);font-size:16px;max-width:44ch}
.flux .jalons{display:flex;gap:8px;margin-top:26px}
.flux .jalons i{flex:1;height:3px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;position:relative}
.flux .jalons i:before{content:"";position:absolute;inset:0;background:var(--pk);box-shadow:0 0 10px var(--pk);transform:scaleX(var(--p,0));transform-origin:left}
.flux .legende{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-top:10px}
.flux .legende b{color:var(--pk);font-weight:600}

/* ---------- héros en CSS pur (html.js-hero posé par le script inline de <head>) : lettres qui montent, puis le reste en cascade.
   Rien ne dépend de GSAP ni de la 3D : le titre est peint dès le premier rendu (LCP) et se construit tout de suite. ---------- */
html.js-hero .hero .mots.css .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
html.js-hero .hero .mots.css .c{display:inline-block;opacity:0;transform:translateY(110%) rotate(6deg);will-change:transform,opacity;animation:lettre .8s cubic-bezier(.19,1,.22,1) forwards} /* will-change : l'animation tourne sur le compositeur, pas sur le fil principal */
html.js-hero .hero .mots.css .w.neon>span>.c{color:var(--pk);text-shadow:0 0 18px rgba(214,58,115,.35)}
html.js-hero .hero .mots.css .w.chrome>span>.c{background:var(--ch);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes lettre{to{opacity:1;transform:none}}
html.js-hero .hero .mots.css{--fin:2.2s}
html.js-hero .hero .mots.css .w{animation:devoile 1ms linear var(--fin) forwards} /* une fois les lettres arrivées, plus de masque (jambages intacts) */
@keyframes devoile{to{overflow:visible}}
html.js-hero .hero .eyebrow{opacity:0;animation:monte .6s ease-out .05s forwards}
html.js-hero .hero .lead li,html.js-hero .hero .sub0{opacity:0;will-change:transform,opacity;animation:monte .6s ease-out forwards}
html.js-hero .hero .lead li:nth-child(1){animation-delay:.95s}html.js-hero .hero .lead li:nth-child(2){animation-delay:1.05s}html.js-hero .hero .lead li:nth-child(3){animation-delay:1.15s}
html.js-hero .hero .ctas>*{opacity:0;animation:monte .5s ease-out 1.25s forwards}
html.js-hero .hero .ctas>*+*{animation-delay:1.33s}
/* le bouton principal garde sa respiration (motion.css) APRÈS son entrée : les deux animations sont déclarées ensemble */
html.js-hero .hero .ctas .btn:first-child{animation:monte .5s ease-out 1.25s forwards,ctaBreathe 3.2s ease-in-out 1.9s infinite}
html.js-hero .hero .pills li{opacity:0;animation:monte .4s ease-out 1.45s forwards}
html.js-hero .hero .pills li:nth-child(2){animation-delay:1.5s}html.js-hero .hero .pills li:nth-child(3){animation-delay:1.55s}
html.js-hero .hero .sub,html.js-hero .hero .indice,html.js-hero .hero .lien{opacity:0;animation:fondu .6s ease-out 1.6s forwards}
html.js-hero .hero .ctas .lien{animation:monte .5s ease-out 1.33s forwards}
@keyframes monte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fondu{to{opacity:1}}

/* ---------- V2.1 : teinte du fond, orbes en parallaxe, barre de progression, curseur, textes qui glissent ---------- */
html,body{overflow-x:clip}
.bg .teinte{position:absolute;inset:0;background:rgba(26,32,54,.34);mix-blend-mode:screen;pointer-events:none}
html.bg-fixe .bg .teinte{display:none}
.s,.bande,.cta,.doc,.hero{position:relative}
.orb{position:absolute;z-index:-1;width:42vw;height:42vw;max-width:620px;max-height:620px;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(closest-side,rgba(214,58,115,.16),rgba(214,58,115,.04) 55%,transparent 72%)}
.orb.d{background:radial-gradient(closest-side,rgba(143,163,216,.11),rgba(143,163,216,.03) 55%,transparent 72%)}
.orb-a{top:-10%;right:-12%}.orb-b{bottom:-14%;left:-10%;width:30vw;height:30vw}
html.bg-lite .orb{display:none}
.progres{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;background:linear-gradient(90deg,var(--pk),#ff8fb8);box-shadow:0 0 12px var(--pk);transform:scaleX(0);transform-origin:left;pointer-events:none}
.curseur{position:fixed;left:0;top:0;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;pointer-events:none;z-index:2;opacity:0;transition:opacity .6s;
  background:radial-gradient(closest-side,rgba(214,58,115,.13),transparent 70%);mix-blend-mode:screen}
.curseur.on{opacity:1}
html.js-motion .tx{opacity:0;transform:translateY(22px)}
html.js-motion .mots .c{display:inline-block;will-change:transform,opacity}
html.js-motion .mots.fait .c{will-change:auto}
.steps:before{transform:scaleX(var(--trait,1));transform-origin:left}
.eyebrow:before{transform:scaleX(var(--trait,1));transform-origin:left}
.hd{transition:box-shadow .4s}

/* ---------- motion graphics (motion.js v2) : masques de mots, tracés SVG, entrées 3D ---------- */
html.js-motion .mots .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
html.js-motion .mots .w>span{display:inline-block;will-change:transform}
html.js-motion .mots.fait .w{overflow:visible}
html.js-motion .mots.fait .w>span{will-change:auto}
html.js-motion .mots .w.chrome>span{background:var(--ch);-webkit-background-clip:text;background-clip:text;color:transparent}
html.js-motion .mots .w.neon>span{color:var(--pk);text-shadow:0 0 18px rgba(214,58,115,.35)}
html.js-motion .trace path,html.js-motion .trace line,html.js-motion .trace polygon,html.js-motion .trace polyline,html.js-motion .trace rect,html.js-motion .trace circle{will-change:stroke-dashoffset}
html.js-motion .rv3{transform-style:preserve-3d;backface-visibility:hidden}
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
html.lenis.lenis-stopped{overflow:hidden}

/* ---------- témoins : une seule ligne en bas, ne couvre aucun bouton ---------- */
.temoins{left:0;right:0;bottom:0;max-width:none;margin:0;border-radius:0;border:0;border-top:1px solid var(--ln2);padding:9px 16px calc(9px + env(safe-area-inset-bottom));background:rgba(20,20,24,.97);gap:12px;font-size:13px;box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.temoins p{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.temoins .bt button{padding:8px 14px}
.temoins .x{width:32px;height:32px}
body.temoins-visible .sticky{bottom:52px}
body.temoins-visible .sticky{bottom:calc(52px + env(safe-area-inset-bottom))}

/* ---------- adaptatif ---------- */
@media(max-width:1000px){
  .hero .wrap{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .flux .wrap{grid-template-columns:1fr;align-content:start;padding-top:24px}
  .hdr{margin-left:0;margin-right:0}
}
@media(max-width:760px){
  /* premier écran iPhone : titre + 2 puces + UN bouton, la maison 3D visible dans le bas de l'écran */
  .hero{min-height:calc(100svh - var(--hd));align-items:flex-start}
  .hero .wrap{padding:22px 0 150px}
  .hero .wrap>div:first-child{padding:14px 0 6px}
  .hero .wrap>div:first-child:before{inset:-12px -20px -16px -20px;border-radius:24px;background:radial-gradient(90% 90% at 50% 40%,rgba(11,11,14,.9),rgba(11,11,14,.7) 60%,transparent 100%)}
  .hero h1{font-size:clamp(31px,8.6vw,40px);margin:14px 0 16px}
  .hero .eyebrow{letter-spacing:.12em;font-size:11px}
  .lead{gap:9px;margin-bottom:20px;font-size:15px}
  .lead li:nth-child(3){display:none}
  .hero .ctas{gap:4px;flex-direction:column;align-items:stretch}
  .hero .lien{justify-content:center;padding:10px}
  .pills{display:none}
  .sub{margin-top:10px;font-size:13px}
  .hero .indice{display:none}
  .hd .btn{display:none}
  .s{padding:56px 0}
  .hdr{padding:16px 18px;border-radius:16px}
  .step{padding:22px 20px!important}
  .split>div:first-child,.fsec .side,.cta .wrap,.flux .moments3{padding:22px 20px}
  .doc .wrap{padding:26px 20px}
  .flux .m h3{font-size:22px}
  .flux .wrap{min-height:0}
  .temoins{flex-direction:row;align-items:center;left:0;right:0;bottom:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .temoins p{font-size:12px}
  .temoins p a{display:none}
  .temoins .bt button{padding:8px 11px;font-size:13px}
  .temoins .x{display:none}
}
@media(prefers-reduced-motion:reduce){
  .bg canvas{transition:none}
  .hero .indice i{animation:none}
  html.js-motion .mots .w>span{transform:none!important;opacity:1!important}
  html.js-motion .tx{opacity:1;transform:none}
  .orb,.curseur,.progres{display:none}
}