/* page d'accueil */
.scrollbar{position:fixed;left:0;top:0;height:2px;z-index:60;width:0;background:linear-gradient(90deg,#ff4655,#ff8a70,#3ee6d0);box-shadow:0 0 12px #ff4655}
.spot{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(500px 500px at var(--mx,50%) var(--my,50%),#ff46550c,transparent 70%);transition:background .1s}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.035;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 baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
section,.marquee,footer,.nav{position:relative;z-index:3}
.nav{z-index:50}
/* héros */
.hero-3d{position:absolute;inset:0}
.hero::before{background:radial-gradient(900px 640px at 12% 45%,#06080cf5 0%,#06080cc8 40%,transparent 78%),linear-gradient(180deg,#06080c99,transparent 20%,transparent 70%,var(--bg))}
.hero-tag{position:absolute;right:28px;bottom:30px;z-index:3;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:#0b0f17d9;border:1px solid #ffffff1a;font:600 12.5px var(--font);color:#d6dae5;animation:fadeUp 1s 1s both}
.live{width:8px;height:8px;border-radius:50%;background:#ff4655;box-shadow:0 0 0 0 #ff4655;animation:live 1.6s infinite}
@keyframes live{70%{box-shadow:0 0 0 10px #ff465500}100%{box-shadow:0 0 0 0 #ff465500}}
.btn.glassy{background:#ffffff0d;backdrop-filter:blur(8px);border-color:#ffffff26}
.pulse{width:9px;height:9px;border-radius:50%;background:#3ee6d0;box-shadow:0 0 12px #3ee6d0;animation:live 1.6s infinite}
/* démo */
.demo-frame{border-radius:22px;overflow:hidden;border:1px solid #ffffff1c;background:#0b0e14;box-shadow:0 60px 120px -50px #000,0 0 0 1px #000,0 40px 120px -60px #ff4655}
.demo-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 16px;background:linear-gradient(180deg,#161b27,#10141d);border-bottom:1px solid #ffffff10;font:600 12.5px var(--font);color:var(--muted)}
.demo-bar .dots{display:flex;gap:6px} .demo-bar .dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57} .demo-bar .dots i:nth-child(2){background:#febc2e} .demo-bar .dots i:nth-child(3){background:#28c840}
.demo-bar .grow{flex:1}
.demo-3d{position:relative;height:min(74vh,720px);min-height:460px}
.demo-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted)}
.demo-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.demo-points div{padding:18px 20px;border-radius:16px;background:var(--glass);border:1px solid #ffffff0f}
.demo-points b{display:block;font:700 16px var(--disp);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px} .demo-points span{font-size:14px;color:var(--muted)}
/* coach */
.coach-sec{background:radial-gradient(700px 400px at 80% 50%,#ff8a3d14,transparent 70%)}
.coach-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:60px;align-items:center}
h2.big{font-size:clamp(32px,4vw,52px);text-transform:uppercase;margin:14px 0 16px}
.lead2{font-size:17px;margin:0 0 24px}
.coach-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.coach-kinds span{padding:7px 12px;border-radius:10px;font:600 13px var(--font);background:#ffffff08;border:1px solid var(--line2);transition:all .3s}
.coach-kinds span.on{background:#ff8a3d22;border-color:#ff8a3d88;color:#fff;transform:translateY(-2px)}
.grade-row{display:flex;align-items:center;gap:16px} .grade-row b{display:block} .grade-row span{font-size:13.5px}
.grade{width:74px;height:74px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,#6ea8ff55,#0b0f16 70%);box-shadow:0 0 0 2px #6ea8ffaa,0 14px 40px -12px #6ea8ff}
.grade b{font:700 36px var(--disp);color:#6ea8ff;line-height:1} .grade span{font-size:10.5px!important;color:var(--muted)}
.coach-card{display:grid;grid-template-columns:240px 1fr;gap:18px;padding:16px;border-radius:20px;background:var(--glass);border:1px solid #ffffff12;border-left:3px solid #ff8a3d;box-shadow:var(--shadow),0 40px 100px -50px #ff8a3d}
.coach-card canvas{width:240px;height:240px;border-radius:14px;background:#06080d;box-shadow:inset 0 0 0 1px #ffffff14}
.cc-body{display:flex;flex-direction:column;min-width:0}
.cc-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cc-h .ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-weight:900;background:#ff8a3d;color:#120700}
.cc-h b{font:700 19px var(--disp);text-transform:uppercase;letter-spacing:.5px} .cc-at{margin-left:auto;font-size:11.5px;color:var(--faint)}
.cc-body p{margin:10px 0 0;font-size:14px;color:#d9dce6;min-height:66px}
.cc-fix{margin-top:12px;padding:10px 12px;border-radius:11px;background:#3ee6d00f;border:1px solid #3ee6d02e;font-size:13px;color:#c9fff7}
.cc-fix span{display:block;font:800 10px var(--font);letter-spacing:1px;text-transform:uppercase;color:var(--cyan);margin-bottom:3px} .cc-fix em{font-style:normal}
.cc-voice{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;font-size:12px;color:var(--muted)}
.eq{display:flex;gap:3px;align-items:flex-end;height:16px} .eq i{width:3px;background:var(--cyan);border-radius:2px;animation:eq 1s ease-in-out infinite} .eq i:nth-child(2){animation-delay:-.3s} .eq i:nth-child(3){animation-delay:-.6s} .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}
/* onglets de présentation */
.tabs-show{border-radius:24px;padding:22px;background:var(--glass);border:1px solid #ffffff10;box-shadow:var(--shadow)}
.ts-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.ts-tabs button{position:relative;overflow:hidden;height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:#0b0f16;color:var(--muted);font:700 13.5px var(--font);cursor:pointer;transition:color .2s,border-color .2s}
.ts-tabs button.on{color:#fff;border-color:#ff465566;background:#ff465514}
.ts-tabs button i{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#ff4655,#ff8a70)}
.ts-tabs button.on i{animation:tsBar 6s linear both}
@keyframes tsBar{to{width:100%}}
.ts-stage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:34px;align-items:center}
.ts-stage .frame{--ry:-6deg}
.ts-stage img{transition:opacity .35s}
.ts-txt h3{font-size:30px;text-transform:uppercase;margin-bottom:12px} .ts-txt p{color:var(--muted);margin:0 0 16px}
.ts-txt ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.ts-txt li{display:flex;gap:10px;color:#cfd3dd;font-size:14.5px} .ts-txt li::before{content:"◆";color:var(--accent);font-size:10px;margin-top:5px}
.ts-txt.swap{animation:fadeUp .45s both}
/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:260px;gap:16px}
.bx{position:relative;overflow:hidden;border-radius:22px;background:var(--glass);border:1px solid #ffffff10;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;transition:transform .35s,box-shadow .35s}
.bx:hover{transform:translateY(-4px);box-shadow:0 40px 80px -40px #000,0 0 0 1px #ff465544}
.bx>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .6s,opacity .3s;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 95%)}
.bx:hover>img{transform:scale(1.05);opacity:.7}
.bx>div:last-child{position:relative} .bx h4{font-size:22px;text-transform:uppercase;margin:8px 0 6px} .bx p{margin:0;color:var(--muted);font-size:14px}
.b1{grid-column:span 2;grid-row:span 2} .b1>img{object-fit:contain;object-position:top;opacity:.85;padding:10px 20px 0}
.b2{grid-column:span 4} .b3{grid-column:span 2} .b4{grid-column:span 2} .b5{grid-column:span 3} .b6{grid-column:span 3}
.themes{position:absolute;top:24px;left:22px;right:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.themes i{height:38px;border-radius:12px;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 45%,#000));box-shadow:0 10px 24px -10px var(--c);animation:float 4s ease-in-out infinite}
.themes i:nth-child(2n){animation-delay:-1s} .themes i:nth-child(3n){animation-delay:-2s}
.annot{position:absolute;top:10px;left:0;right:0;height:150px;display:grid;place-items:center} .annot svg{width:70%;height:100%}
.draw{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 3s ease-in-out infinite}
@keyframes draw{40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}
.upd{position:absolute;top:44px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:16px;font:700 34px var(--disp)}
.upd .v{padding:8px 18px;border-radius:14px;background:#ffffff0a;border:1px solid var(--line2)} .upd .new{color:#3ddc97;border-color:#3ddc9766;box-shadow:0 0 30px -6px #3ddc97}
.upd .arr{color:var(--accent);animation:arr 1.6s ease-in-out infinite} @keyframes arr{50%{transform:translateX(8px)}}
/* agents */
.agents{overflow:hidden;padding:10px 0 20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.agents .tr{display:flex;gap:14px;width:max-content;animation:mq 70s linear infinite}
.agents:hover .tr{animation-play-state:paused}
.ag{position:relative;width:170px;height:240px;border-radius:18px;overflow:hidden;flex:none;border:1px solid #ffffff12;background:linear-gradient(160deg,color-mix(in srgb,var(--g1) 55%,#0b0f16),#0b0f16 80%);transition:transform .35s,box-shadow .35s}
.ag:hover{transform:translateY(-8px);box-shadow:0 30px 60px -24px var(--g1)}
.ag img{position:absolute;left:50%;bottom:-10px;height:115%;transform:translateX(-50%);transition:transform .4s}
.ag:hover img{transform:translateX(-50%) scale(1.06)}
.ag div{position:absolute;left:12px;bottom:10px;right:12px} .ag b{display:block;font:700 18px var(--disp);text-transform:uppercase;text-shadow:0 2px 8px #000} .ag span{font-size:11.5px;color:#d6dae5;text-shadow:0 1px 4px #000}
/* comparatif */
.cmp{margin-top:34px;border-radius:20px;overflow:hidden;background:var(--glass);border:1px solid #ffffff10}
.cmp table{width:100%;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:13px 18px;border-bottom:1px solid #ffffff08;text-align:center} .cmp th:first-child,.cmp td:first-child{text-align:left;color:#cfd3dd}
.cmp th{font:700 13px var(--disp);letter-spacing:1px;text-transform:uppercase;background:#ffffff05}
.cmp th.pro{color:#ff6b77} .cmp .y{color:var(--ally);font-weight:900} .cmp .n{color:var(--faint)}
.cmp tr:hover td{background:#ffffff04}
/* journal */
.road{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.road::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:linear-gradient(90deg,#ff4655,#ffffff14 30%)}
.rd{position:relative;padding:44px 18px 20px;border-radius:18px;background:var(--glass);border:1px solid #ffffff0f}
.rd::before{content:"";position:absolute;left:18px;top:15px;width:14px;height:14px;border-radius:50%;background:#1a2030;border:2px solid var(--line2)}
.rd.done::before{background:#ff4655;border-color:#ff8a94;box-shadow:0 0 14px #ff4655}
.rd .when{font:800 11px var(--font);letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)} .rd.done .when{color:var(--accent)}
.rd b{display:block;font:700 19px var(--disp);text-transform:uppercase;margin:6px 0} .rd p{margin:0;color:var(--muted);font-size:14px}
/* appel final */
.final .box{min-height:420px;display:grid;place-items:center}
.final-in{position:relative;z-index:2}
.final-rings{position:absolute;left:50%;top:50%;width:620px;height:620px;transform:translate(-50%,-50%);opacity:.5;pointer-events:none}
.final-rings i{position:absolute;inset:0;border-radius:50%;border:1px solid #ff465544;animation:ring 6s linear infinite}
.final-rings i:nth-child(2){animation-delay:-2s} .final-rings i:nth-child(3){animation-delay:-4s}
@keyframes ring{from{transform:scale(.3);opacity:1}to{transform:scale(1.1);opacity:0}}
.final-rings img{position:absolute;left:50%;top:50%;width:120px;transform:translate(-50%,-50%);opacity:.18;filter:blur(1px)}
@media (max-width:960px){
  .coach-grid,.ts-stage{grid-template-columns:1fr} .coach-card{grid-template-columns:1fr} .coach-card canvas{width:100%;height:auto;aspect-ratio:1}
  .demo-points,.road{grid-template-columns:1fr} .road::before{display:none}
  .bento{grid-template-columns:1fr;grid-auto-rows:240px} .bx{grid-column:auto!important;grid-row:auto!important}
}

/* héros : galerie 3D des pages de l'appli */
.hero-gal{position:absolute;inset:-10% -12% -10% 30%;perspective:1800px;pointer-events:none;--px:0;--py:0}
.hg-in{position:absolute;inset:0;display:flex;gap:26px;justify-content:center;transform-style:preserve-3d;
  transform:rotateX(calc(26deg + var(--py) * -6deg)) rotateY(calc(-24deg + var(--px) * 8deg)) rotateZ(9deg) translateZ(-120px);transition:transform .1s}
.hg-col{display:flex;flex-direction:column;gap:28px;width:540px;flex:none;will-change:transform}
.hg-col.up{animation:hgUp var(--sp) linear infinite} .hg-col.dn{animation:hgDn var(--sp) linear infinite}
@keyframes hgUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes hgDn{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.hg-card{border-radius:16px;overflow:hidden;border:1px solid #ffffff22;background:#0b0e14;box-shadow:0 40px 80px -30px #000,0 0 0 1px #000,0 20px 60px -30px #ff4655;transform:translateZ(0)}
.hg-card img{width:100%;display:block;filter:saturate(1.05)}
.hg-card:nth-child(3n){box-shadow:0 40px 80px -30px #000,0 0 0 1px #000,0 20px 60px -30px #3ee6d0}
.hero-gal::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,#06080ccc 18%,transparent 45%),linear-gradient(180deg,var(--bg),transparent 18%,transparent 78%,var(--bg))}
.hg-chip{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:16px;background:#0d1119ee;border:1px solid #ffffff22;box-shadow:0 24px 50px -18px #000;backdrop-filter:blur(8px);
  font-size:12.5px;color:#d6dae5;animation:float 6s ease-in-out infinite;transform:translate(calc(var(--px) * -30px),calc(var(--py) * -20px))}
.hg-chip b{font:700 20px var(--disp)} .hg-chip span{display:flex;flex-direction:column} .hg-chip span b{font:700 14px var(--font)}
.hg-chip i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-weight:900;background:#ff8a3d;color:#120700}
.hg-chip.c1{left:34%;top:26%} .hg-chip.c2{left:62%;top:58%;animation-delay:-2s} .hg-chip.c3{left:40%;top:72%;animation-delay:-4s} .hg-chip.c4{left:58%;top:14%;animation-delay:-1s}
.hero::before{background:radial-gradient(900px 640px at 12% 45%,#06080cf5 0%,#06080cd0 40%,transparent 75%)}
@media (max-width:960px){ .hero-gal{inset:-10% -40% -10% 10%;opacity:.45} .hg-chip{display:none} }
@media (prefers-reduced-motion:reduce){ .hg-col{animation:none!important} }

/* ---------- mise en page en deux colonnes ---------- */
.duo{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:stretch;width:min(1500px,100% - 48px);margin:0 auto;padding:30px 0}
.duo>.dsec{padding:34px;border-radius:26px;background:linear-gradient(180deg,#10141df0,#0a0d14f0);border:1px solid #ffffff10;box-shadow:0 40px 80px -50px #000,inset 0 1px 0 #ffffff0c;overflow:hidden;min-width:0}
.duo .dsec .wrap{width:100%}
.duo .sec-h{text-align:left;margin:0 0 26px;max-width:none}
.duo .sec-h h2,.duo h2.big{font-size:clamp(28px,2.6vw,40px)}
.duo .sec-h p,.duo .lead2{font-size:15px}
/* présentation : image puis texte */
.duo .tabs-show{padding:0;background:none;border:0;box-shadow:none}
.duo .ts-stage{grid-template-columns:1fr;gap:20px}
.duo .ts-tabs button{height:36px;padding:0 12px;font-size:12.5px}
.duo .ts-txt h3{font-size:24px}
/* coach : texte puis carte */
.duo .coach-grid{grid-template-columns:1fr;gap:26px;width:100%}
.duo .coach-card{grid-template-columns:200px 1fr}
.duo .coach-card canvas{width:200px;height:200px}
.duo .coach-sec{background:none}
/* bento en 2 colonnes */
.duo .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:210px;gap:12px}
.duo .bx{grid-column:auto!important;grid-row:auto!important;padding:18px}
.duo .bx.b1{grid-row:span 2!important}
.duo .bx h4{font-size:18px}
/* agents + chiffres */
.duo .agents-sec .agents{margin:0 -34px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.duo .ag{width:150px;height:210px}
.duo-stats{margin-top:22px;grid-template-columns:repeat(2,1fr)!important;gap:12px}
.duo-stats .stat{padding:20px}
.duo-stats .stat b{font-size:34px}
/* étapes et journal en colonne */
.duo .steps{grid-template-columns:1fr;gap:12px}
.duo .step{display:grid;grid-template-columns:52px 1fr;gap:4px 16px;align-items:start;padding:20px 22px}
.duo .step .ic{grid-row:span 2;margin:0}
.duo .road{grid-template-columns:1fr;gap:12px}
.duo .road::before{left:26px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:linear-gradient(180deg,#ff4655,#ffffff14 30%)}
.duo .rd{padding:18px 20px 18px 56px}
.duo .rd::before{left:20px;top:22px}
/* FAQ + appel final */
.duo-end .final{padding:0} .duo-end .final .box{height:100%;min-height:0;padding:50px 30px}
.duo-end .final-rings{width:440px;height:440px}
.duo-end .faq{max-width:none}
@media (max-width:1100px){ .duo{grid-template-columns:1fr} .duo .coach-card{grid-template-columns:1fr} .duo .coach-card canvas{width:100%;height:auto} }
/* héros : la galerie couvre toute la largeur, voile sombre seulement derrière le texte */
.hero-gal{inset:-18% -6% -18% -6%}
.hero-gal::after{background:radial-gradient(760px 560px at 22% 52%,#06080cf2 0%,#06080cc4 42%,#06080c55 68%,transparent 85%),linear-gradient(180deg,var(--bg),transparent 16%,transparent 80%,var(--bg))}
.hg-in{transform:rotateX(calc(24deg + var(--py) * -6deg)) rotateY(calc(-18deg + var(--px) * 8deg)) rotateZ(7deg) translateZ(-60px)}
.hg-chip.c1{left:46%} .hg-chip.c3{left:52%}

/* ---------- héros v3 : carte en verre + mur d'écrans plein cadre ---------- */
.hero{min-height:100vh}
.hero::before{background:none}
.hero-gal{inset:-22% -14% -22% -10%}
.hg-glow{position:absolute;inset:0;background:radial-gradient(600px 400px at 30% 40%,#ff465540,transparent 70%),radial-gradient(700px 500px at 75% 65%,#3ee6d030,transparent 70%),radial-gradient(500px 400px at 60% 15%,#9b7bff30,transparent 70%);filter:blur(20px)}
.hg-in{gap:18px;transform:rotateX(calc(20deg + var(--py) * -5deg)) rotateY(calc(-14deg + var(--px) * 7deg)) rotateZ(6deg) scale(1.18)}
.hg-col{gap:18px;width:470px}
.hg-card{border-radius:14px;border-color:#ffffff2a;box-shadow:0 30px 60px -28px #000,0 0 0 1px #00000080,0 0 50px -20px #ff465588}
.hg-card img{filter:saturate(1.1) brightness(1.04)}
.hero-gal::after{background:linear-gradient(90deg,#06080ce0 0%,#06080c99 30%,#06080c33 55%,#06080c22 100%),linear-gradient(180deg,#06080caa 0%,transparent 18%,transparent 78%,var(--bg) 100%)}
.hero-card{position:relative;max-width:700px;padding:42px 44px 36px;border-radius:28px;background:linear-gradient(160deg,#0d1119cc,#07090ecc);border:1px solid #ffffff1c;
  box-shadow:0 50px 120px -40px #000,inset 0 1px 0 #ffffff14;backdrop-filter:blur(14px) saturate(1.2);animation:fadeUp .9s both}
.hero-card::before{content:"";position:absolute;inset:-1px;border-radius:28px;padding:1px;background:linear-gradient(150deg,#ff465599,transparent 35%,transparent 65%,#3ee6d066);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hero-pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;background:#ff465514;border:1px solid #ff465544;font:800 11.5px var(--font);letter-spacing:1.8px;text-transform:uppercase;color:#ff8a94}
.hero-card h1{font-size:clamp(46px,6vw,88px);margin-top:20px}
.grad.anim{background:linear-gradient(90deg,#ff4655,#ff8a70,#ffb36b,#ff4655);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:lineUp 1s cubic-bezier(.2,.8,.2,1) both,gradMove 6s linear infinite}
@keyframes gradMove{to{background-position:300% 0}}
.hero-card .lead{margin:22px 0 28px;font-size:18px;color:#cfd4df}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-size:13px;color:#aab1c2}
.hero-trust span{display:inline-flex;align-items:center}
.hero-card .meta{margin-top:28px;padding-top:22px;border-top:1px solid #ffffff12;gap:34px}
.hg-chip{z-index:3}
.hg-chip.c1{left:52%;top:20%} .hg-chip.c2{left:74%;top:62%} .hg-chip.c3{left:56%;top:78%} .hg-chip.c4{left:76%;top:16%}
.nav-links a{white-space:nowrap}
@media (max-width:960px){ .hero-card{padding:28px 24px} }

/* ======================================================================
   Sobriété : héros flottant (sans panneau) et cartes plates
   ====================================================================== */
.hero-card{max-width:760px;padding:0;border-radius:0;background:none;border:0;box-shadow:none;backdrop-filter:none}
.hero-card::before{display:none}
.hero-pill{background:none;border:0;padding:0;color:var(--accent);letter-spacing:2.6px}
.hero-pill .live{margin-right:2px}
.hero-card h1{font-size:clamp(52px,7vw,104px);letter-spacing:-.5px;margin-top:18px;text-shadow:0 10px 40px #000}
.hero-card .lead{max-width:560px;font-size:18.5px;color:#d3d8e2;text-shadow:0 2px 12px #000}
.hero-trust{gap:0;margin-top:22px}
.hero-trust span{padding:0 14px;border-left:1px solid #ffffff26;color:#b9c0cf} .hero-trust span:first-child{padding-left:0;border-left:0}
.hero-card .meta{border-top:0;padding-top:0;margin-top:34px;gap:0}
.hero-card .meta>div{padding:0 26px;border-left:1px solid #ffffff1c} .hero-card .meta>div:first-child{padding-left:0;border-left:0}
.hero-gal::after{background:linear-gradient(90deg,#06080cf5 0%,#06080cd9 26%,#06080c88 46%,#06080c22 70%,#06080c11 100%),linear-gradient(180deg,#06080ccc 0%,transparent 16%,transparent 80%,var(--bg) 100%)}
.hg-card{box-shadow:0 24px 50px -28px #000;border-color:#ffffff1f}
.hg-glow{opacity:.55}
.hg-chip{background:#0c1017f0;border-color:#ffffff1a;box-shadow:0 18px 40px -20px #000;backdrop-filter:none}
/* cartes : surfaces plates, bordure fine, pas de lueur */
.duo>.dsec{background:#0a0d13;border:1px solid #ffffff0d;box-shadow:none;border-radius:20px}
.stat,.step,.rd,.bx,.faq details,.demo-points div,.cmp,.tabs-show,.coach-card,.plan{background:#0d1017;border:1px solid #ffffff0f;box-shadow:none}
.stat b{background:none;-webkit-text-fill-color:currentColor;color:#fff}
.coach-card{border-left:1px solid #ffffff0f}
.coach-card::before{content:"";position:absolute}
.plan:hover,.bx:hover{transform:translateY(-2px);box-shadow:none;border-color:#ffffff24}
.plan.best{background:#0f1118;border-color:#ff465566;box-shadow:none}
.shot .frame{box-shadow:0 30px 60px -36px #000;border-color:#ffffff14}
.demo-frame{box-shadow:0 40px 80px -50px #000;border-color:#ffffff14}
.step .ic{background:#ffffff08;box-shadow:inset 0 0 0 1px #ffffff12}
.grade{box-shadow:inset 0 0 0 1px #6ea8ff66;background:#0d1320}
.final .box{background:#0b0e14;border-color:#ffffff10}
.ts-tabs button.on{background:#ffffff0d;border-color:#ffffff2a}
.coach-kinds span.on{background:#ff8a3d1a;border-color:#ff8a3d66;transform:none}
.rd.done::before{box-shadow:none}
.themes i{box-shadow:none}

.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px!important}.tagrow span{padding:3px 9px;border-radius:8px;background:#ffffff0a;border:1px solid #ffffff14;font-size:12px;color:#d6dae5}

.hero-card h1 .grad{text-shadow:none}
.duo .annot{top:4px;height:96px} .duo .annot svg{width:52%}

/* ===== accueil : la démo en premier ===== */
.hero.hero-live{min-height:0;display:block;padding:10px 0 36px}
.hero-live .hero-gal{opacity:.28}
.wrap.live-wrap{width:min(1800px,100% - 40px)}
.live-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:12px}
.live-h .hero-pill{display:inline-flex;align-items:center;gap:9px;font:800 11.5px var(--font);letter-spacing:2.4px;text-transform:uppercase;color:#3ee6d0}
.live-h h1{font-size:clamp(32px,3.4vw,54px);line-height:1;margin-top:6px;max-width:none;text-shadow:none}
.live-h h1 .l{display:inline-block;margin-right:.28em}
.live-h .cta{display:flex;gap:10px;flex-wrap:wrap;animation:fadeUp .9s .3s both}
.live-h .btn.lg{height:48px;padding:0 22px}
.live-demo{position:relative;height:clamp(520px,calc(125vh - 196px),1120px);animation:fadeUp 1s .2s both}
#awi.aw.inline{position:relative;left:auto;top:auto;z-index:1;width:100%;height:100%;min-width:0;min-height:0;transform:none;opacity:1;resize:none;border-radius:14px;
  box-shadow:0 50px 120px -40px #000,0 0 0 1px #000}
#awi .aw-bar{cursor:default}
.aw-shield{position:absolute;inset:40px 0 0;z-index:2;cursor:pointer;display:flex;align-items:flex-start;justify-content:flex-end;padding:14px}
.aw-shield.off{display:none}
.aw-shield span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:10px;background:#0b0f16f2;border:1px solid #ffffff26;color:#fff;font:700 12.5px var(--font);
  opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
.aw-shield:hover span{opacity:1;transform:none}
.live-f{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:22px}
.live-f .lead{margin:0;max-width:600px;font-size:16px;color:#b9c0cf;animation:none}
.live-f .meta{display:flex;margin:0;gap:0;animation:none}
.live-f .meta>div{padding:0 24px;border-left:1px solid #ffffff1c} .live-f .meta>div:first-child{border-left:0}
.live-f .meta b{display:block;font:700 26px var(--disp)} .live-f .meta span{font-size:12.5px;color:var(--muted)}
@media (max-width:960px){ .live-h,.live-f{flex-direction:column;align-items:flex-start} .live-demo{height:72vh} .live-f .meta>div:first-child{padding-left:0} }

/* ===== bas de page v4 : tout flotte, même grammaire que le haut (pas de panneaux) ===== */
#demo .wrap,#pricing .wrap{width:min(1600px,100% - 80px)}
#demo{padding:110px 0 50px} #pricing{padding:100px 0 80px}
.duo{width:min(1600px,100% - 80px);gap:96px;padding:80px 0;align-items:start}
.duo>.dsec,.duo>.dsec:hover{padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
/* titres : œil cyan + titre en capitales, comme en haut */
section .eyebrow{gap:9px;color:#3ee6d0;font-weight:800;font-size:11.5px;letter-spacing:2.4px}
section .eyebrow::before{width:7px;height:7px;border-radius:50%;background:#3ee6d0}
.sec-h{margin-bottom:30px}
.sec-h h2,.duo .sec-h h2,.duo h2.big{font-size:clamp(30px,2.8vw,46px);line-height:1.02;margin:10px 0 12px}
.sec-h p,.duo .sec-h p,.duo .lead2{color:#aab1c2;font-size:15.5px}
.sec-h.center{text-align:left;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:60px;align-items:end}
.sec-h.center .eyebrow,.sec-h.center h2{grid-column:1} .sec-h.center h2{margin-bottom:0}
.sec-h.center p{grid-column:2;grid-row:1 / span 2;margin:0;padding-bottom:4px}
/* écrans : un seul cadre pour toutes les captures et vues */
.demo-frame,.coach-card,.ts-stage .frame{border-radius:14px;border:1px solid #ffffff14;background:#0a0d13;box-shadow:0 50px 110px -45px #000,0 0 0 1px #000}
/* points sous la démo : texte flottant séparé par un filet */
.demo-points{gap:0;margin-top:30px}
.demo-points div,.demo-points div:hover{padding:2px 26px;background:none;border:0;border-left:1px solid #ffffff1c;border-radius:0}
.demo-points div:first-child{padding-left:0;border-left:0}
/* onglets de l'appli : soulignés au lieu de boutons */
.ts-tabs{gap:2px 18px;margin-bottom:22px}
.ts-tabs button,.duo .ts-tabs button,.ts-tabs button.on{height:32px;padding:0 1px;border:0;border-radius:0;background:none;font-size:13px}
.ts-tabs button.on{color:#fff} .ts-tabs button i{height:2px;background:#ff4655}
/* bento : plus de cartes, les visuels flottent */
.duo .bento{gap:34px 28px;grid-auto-rows:220px}
.bx,.bx:hover{padding:0 0 2px;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;transform:none}
.bx>img{border-radius:12px;opacity:.6} .bx:hover>img{transform:none;opacity:.75}
.duo .bx{padding:0}
/* agents + stats */
.duo .agents-sec .agents{margin:0}
.duo-stats{gap:26px 0;margin-top:34px}
.stat,.duo-stats .stat{padding:0 0 0 22px;background:none;border:0;border-left:1px solid #ffffff1c;border-radius:0;box-shadow:none}
.duo-stats .stat b{font-size:36px}
/* étapes et journal : lignes, pas de boîtes */
.duo .steps{gap:0}
.step,.duo .step{padding:22px 0;background:none;border:0;border-top:1px solid #ffffff10;border-radius:0;overflow:visible}
.step::before{top:14px;right:0}
.step .ic{background:none;box-shadow:inset 0 0 0 1px #ffffff1c}
.duo .road{gap:0}
.rd,.duo .rd{padding:14px 0 22px 48px;background:none;border:0;border-radius:0}
.duo .rd::before{left:19px;top:18px}
/* FAQ : séparateurs simples */
.faq{gap:0}
.faq details,.faq details[open]{padding:0;background:none;border:0;border-bottom:1px solid #ffffff12;border-radius:0}
.faq details:first-of-type{border-top:1px solid #ffffff12}
.faq summary{padding:19px 0}
/* appel final : flottant, sans encadré */
.final .box,.duo-end .final .box{background:none;border:0;box-shadow:none;padding:30px 0}
.duo-end .final{align-self:center}
/* offres : cartes allégées (seul endroit où un cadre est utile) */
.plan{background:linear-gradient(180deg,#ffffff07,#ffffff02);border:1px solid #ffffff12}
.plan.best{background:linear-gradient(180deg,#ff46550d,#ffffff02);border-color:#ff465566}
.cmp{background:none;border:0;border-radius:0;margin-top:46px}
.cmp th{background:none;border-bottom:1px solid #ffffff1c}
@media (max-width:1100px){ .duo{gap:70px} .sec-h.center{grid-template-columns:1fr} .sec-h.center p{grid-column:1;grid-row:auto;margin-top:10px} .demo-points div{border-left:0;padding:10px 0} }
/* bento flottant : visuel au-dessus du texte, jamais derrière */
.duo .bento{grid-auto-rows:auto;align-items:start}
.duo .bx.b1{grid-row:auto!important}
.bx{justify-content:flex-start}
.bx>img{position:relative;inset:auto;display:block;width:100%;height:150px;flex:none;margin-bottom:16px;object-fit:cover;object-position:top;opacity:.92;
  -webkit-mask-image:none;mask-image:none;border:1px solid #ffffff14;box-shadow:0 24px 50px -28px #000}
.bx:hover>img{opacity:1}
.bx .themes,.bx .annot,.bx .upd{position:relative;inset:auto;height:150px;margin-bottom:16px}
.bx .tagrow{margin-top:10px}
footer .wrap{width:min(1600px,100% - 80px)}
/* flèche « fais défiler » en bas à droite */
.scroll-cue{position:fixed;right:28px;bottom:28px;z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none;color:#cfd4df;cursor:pointer;
  font:700 10px var(--font);letter-spacing:2px;text-transform:uppercase;transition:opacity .35s,transform .35s}
.scroll-cue .c{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid #ffffff2b;background:#ffffff05;backdrop-filter:blur(6px);transition:border-color .2s,background .2s}
.scroll-cue:hover .c{border-color:#ffffff55;background:#ffffff10}
.scroll-cue svg{animation:cueDown 1.6s cubic-bezier(.45,0,.2,1) infinite}
@keyframes cueDown{0%{transform:translateY(-5px);opacity:0}35%{opacity:1}70%{transform:translateY(5px);opacity:1}100%{transform:translateY(9px);opacity:0}}
.scroll-cue.off{opacity:0;transform:translateY(10px);pointer-events:none}
@media (max-width:760px){ .scroll-cue{right:16px;bottom:16px} }