/*
Theme Name:  B2TUNE
Theme URI:   https://b2tune.com
Author:      DVL Automotive SRL
Description: Thème vitrine B2TUNE — file service professionnel. Anthracite, rouge profond, typographie Space Grotesk/Inter. Compatible WooCommerce.
Version:     1.4.0
Requires PHP: 8.0
License:     Propriétaire — usage interne DVL Automotive
Text Domain: b2tune
*/
/* ============================================================
   B2TUNE — Vitrine
   Anthracite profond + rouge motorsport. Tout est dans ce
   fichier : à intégrer ensuite comme template WordPress.
   ============================================================ */
:root{
  --bg0:#0a0b0d;
  --bg1:#0f1114;
  --bg2:#15181c;
  --bg3:#1c2025;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.13);
  --txt:#f4f5f6;
  --muted:#a2a9b1;
  --dim:#6b7178;
  --accent:#d81a2c;          /* rouge profond */
  --accent-hi:#ff3b4f;       /* rouge lisible sur fond sombre */
  --accent-deep:#7d0f1d;
  --glow:rgba(216,26,44,.35);
  --radius:18px;
  --font-d:'Space Grotesk',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
  --pad:clamp(20px,5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  background:var(--bg0);color:var(--txt);
  font-family:var(--font-b);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,.display{font-family:var(--font-d);font-weight:600;letter-spacing:-.02em;line-height:1.05}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-d);font-weight:600;font-size:16px;letter-spacing:.01em;
  padding:16px 30px;border-radius:100px;cursor:pointer;border:0;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,background .35s,border-color .35s;
  will-change:transform;position:relative;overflow:hidden;white-space:nowrap;
}
.btn-red{
  background:linear-gradient(135deg,var(--accent-hi) 0%,var(--accent) 45%,var(--accent-deep) 100%);
  color:#fff;box-shadow:0 8px 34px -8px var(--glow);
}
.btn-red::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s ease;
}
.btn-red:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 50px -8px var(--glow)}
.btn-red:hover::after{transform:translateX(120%)}
.btn-ghost{
  background:rgba(255,255,255,.04);color:var(--txt);
  border:1px solid var(--line-2);backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25);transform:translateY(-2px)}
.btn .arr{transition:transform .35s}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- header ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:background .4s,backdrop-filter .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,11,13,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:12px var(--pad);border-color:var(--line);
}
.logo{font-family:var(--font-d);font-weight:700;font-size:22px;letter-spacing:.04em;display:flex;align-items:center;gap:10px}
.logo b{color:var(--accent-hi)}
.logo .mark{width:30px;height:30px;flex:0 0 auto}
.nav-links{display:flex;gap:34px;font-size:15px;color:var(--muted)}
.nav-links a{transition:color .25s;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent-hi);transition:width .3s}
.nav-links a:hover{color:var(--txt)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-login{font-size:15px;color:var(--muted);transition:color .25s}
.nav-login:hover{color:var(--txt)}
.nav .btn{padding:11px 22px;font-size:14.5px}
.burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;position:relative;z-index:110}
.burger span{position:absolute;left:8px;right:8px;height:2px;background:var(--txt);transition:.35s}
.burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:25px}
.burger.open span:nth-child(1){top:19px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:19px;transform:rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:105;background:rgba(10,11,13,.96);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;
  opacity:0;pointer-events:none;transition:opacity .4s;
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--font-d);font-size:30px;font-weight:600}
@media(max-width:1200px){.nav-links{gap:22px;font-size:14.5px}}
@media(max-width:960px){
  .nav-links,.nav-login{display:none}
  .burger{display:block}
  .nav .btn{padding:10px 18px;font-size:13.5px}
}
@media(max-width:640px){
  .nav-cta{display:none} /* le CTA reste dans le menu mobile */
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s}
.hero-media video.ready{opacity:.55}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%}
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 90% at 70% 10%,transparent 0%,rgba(10,11,13,.55) 60%,var(--bg0) 100%),
    linear-gradient(180deg,rgba(10,11,13,.35) 0%,rgba(10,11,13,.15) 45%,var(--bg0) 100%);
}
.hero-grid{
  position:absolute;inset:0;z-index:1;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(80% 60% at 50% 40%,rgba(0,0,0,.8),transparent 75%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 40%,rgba(0,0,0,.8),transparent 75%);
}
.hero-inner{position:relative;z-index:2;padding:130px var(--pad) 100px;max-width:1160px}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;font-size:13.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);border-radius:100px;padding:9px 18px;
  background:rgba(255,255,255,.03);backdrop-filter:blur(6px);
}
.hero-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 12px var(--accent-hi)}
.hero h1{
  font-size:clamp(40px,6.6vw,86px);margin:26px 0 22px;font-weight:700;
}
.hero h1 .l2{
  display:block;
  background:linear-gradient(92deg,#fff 10%,var(--accent-hi) 55%,var(--accent) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{max-width:640px;font-size:clamp(17px,1.6vw,21px);color:var(--muted)}
.hero-btns{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
.hero-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--dim);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
}
.hero-scroll .line{width:1px;height:44px;background:linear-gradient(var(--accent-hi),transparent);animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- sections communes ---------- */
section{position:relative}
.wrap{max-width:1280px;margin:0 auto;padding:clamp(80px,11vw,150px) var(--pad)}
.kicker{
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-hi);
  font-weight:600;display:flex;align-items:center;gap:14px;margin-bottom:22px;font-family:var(--font-d);
}
.kicker::before{content:"";width:34px;height:1px;background:var(--accent)}
.h2{font-size:clamp(34px,4.6vw,64px);margin-bottom:24px}
.lead{color:var(--muted);font-size:clamp(17px,1.4vw,19.5px);max-width:660px}

/* ---------- section partenaire ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center}
.split .lead p+p{margin-top:16px}
.split-points{margin-top:34px;display:grid;gap:16px}
.split-points li{display:flex;gap:14px;align-items:flex-start;color:var(--txt);font-size:16.5px}
.split-points .tick{
  flex:0 0 auto;width:22px;height:22px;margin-top:2px;border-radius:50%;
  background:rgba(216,26,44,.12);display:grid;place-items:center;
}
.split-points .tick svg{width:11px;height:11px;stroke:var(--accent-hi);stroke-width:3;fill:none}
.visual{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-2);background:var(--bg2);
  aspect-ratio:4/4.6;box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
}
.visual .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visual-note{
  position:absolute;left:18px;bottom:18px;right:18px;z-index:3;
  background:rgba(12,13,16,.65);backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-radius:14px;padding:14px 18px;
  display:flex;align-items:center;gap:14px;font-size:14px;color:var(--muted);
}
.visual-note .dot{width:8px;height:8px;border-radius:50%;background:#2ecc71;box-shadow:0 0 10px #2ecc71;flex:0 0 auto;animation:pulse 2s infinite}
/* cartographie animée du bloc partenaire — même contenu que l'étape 9 du tutoriel */
.cartoV{position:absolute;inset:0;overflow:hidden;background:#0b0d10}
.cv-hex{position:absolute;left:14px;top:-40px;right:0;margin:0;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:10.5px;line-height:1.9;color:rgba(255,255,255,.05);letter-spacing:.06em;
  white-space:pre;pointer-events:none;animation:cvhex 60s linear infinite}
@keyframes cvhex{to{transform:translateY(-50%)}}
.cv-panel{position:absolute;left:50%;top:44%;width:372px;height:238px;
  transform:translate(-50%,-50%) scale(var(--cvs,1));
  background:rgba(15,19,23,.94);border:1px solid #2b3238;border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:7px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.cv-head{display:flex;justify-content:space-between;align-items:center;height:17px}
.cv-t{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:8.5px;letter-spacing:.1em;color:#6b7178}
.cv-badge{font-family:var(--font-d);font-size:8.5px;font-weight:600;letter-spacing:.08em;
  border:1px solid #2e3743;border-radius:100px;padding:2px 9px;color:#96a0af;
  background:rgba(255,255,255,.03);transition:color .5s,border-color .5s,background .5s}
.cv-badge.mod{color:var(--accent-hi);border-color:rgba(216,26,44,.5);background:rgba(216,26,44,.1)}
.cv-stack{position:relative;flex:1}
.cv-2d{position:absolute;inset:0;transition:opacity .7s}
.cv-3d{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s}
.cv-grid{position:relative;display:grid;grid-template-columns:26px repeat(10,29px);
  grid-template-rows:11px repeat(7,22px);gap:1px;margin:0 auto;width:326px}
.cv-grid .ax{font-family:ui-monospace,Menlo,monospace;font-size:6.5px;color:#5d6774;display:grid;place-items:center}
.cv-grid .ay{font-family:ui-monospace,Menlo,monospace;font-size:6.5px;color:#5d6774;display:grid;place-items:center end;padding-right:3px}
.cv-cell{display:grid;place-items:center;font-family:ui-monospace,Menlo,monospace;font-size:8px;border-radius:2px;
  color:rgba(255,255,255,.93);text-shadow:0 1px 1px rgba(0,0,0,.5);transition:background .5s,box-shadow .4s}
.cv-cell.chg{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.cv-sel{position:absolute;border:1.2px dashed var(--accent-hi);border-radius:3px;opacity:0;transition:opacity .4s}
@keyframes pulse{50%{opacity:.4}}
@media(max-width:960px){.split{grid-template-columns:1fr}.visual{aspect-ratio:16/11}}

/* ---------- solutions ---------- */
.sol-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:14px;margin-top:56px;
}
.sol{
  position:relative;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,var(--bg2),var(--bg1));
  padding:26px 22px;overflow:hidden;cursor:default;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s;
}
.sol::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;pointer-events:none;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),rgba(216,26,44,.16),transparent 70%);
}
.sol:hover{transform:translateY(-5px);border-color:rgba(216,26,44,.45)}
.sol:hover::before{opacity:1}
.sol .ic{
  width:46px;height:46px;border-radius:12px;margin-bottom:18px;
  background:rgba(216,26,44,.1);border:1px solid rgba(216,26,44,.22);
  display:grid;place-items:center;transition:background .4s,box-shadow .4s;
}
.sol:hover .ic{background:rgba(216,26,44,.2);box-shadow:0 0 24px -4px var(--glow)}
.sol .ic svg{width:22px;height:22px;stroke:var(--accent-hi);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sol h3{font-size:17.5px;margin-bottom:6px;font-weight:600}
.sol p{font-size:13.8px;color:var(--dim);line-height:1.5}
.sol-more{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(135deg,rgba(216,26,44,.14),rgba(216,26,44,.04));
  border-color:rgba(216,26,44,.35);
}
.sol-more .in h3{font-size:18px}
.sol-more .in a{color:var(--accent-hi);font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:6px;margin-top:10px}

/* ---------- process (built for professionals) ---------- */
.band{
  position:relative;overflow:hidden;
  background:var(--bg1);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:64px;counter-reset:step}
.step{
  position:relative;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.02);padding:28px 24px 26px;
}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--accent-hi);
  display:block;margin-bottom:14px;letter-spacing:.08em;
}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--muted)}
.step .t{
  position:absolute;top:28px;right:22px;font-size:12px;color:var(--dim);
  border:1px solid var(--line);border-radius:100px;padding:4px 10px;letter-spacing:.06em;
}
@media(max-width:1080px){.process{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.process{grid-template-columns:1fr}}

/* ---------- chiffres ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:60px}
.stat{
  border:1px solid var(--line);border-radius:var(--radius);padding:38px 30px;
  background:linear-gradient(180deg,var(--bg2),transparent);position:relative;overflow:hidden;
}
.stat::after{content:"";position:absolute;left:30px;right:30px;top:0;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.stat .n{font-family:var(--font-d);font-weight:700;font-size:clamp(40px,4vw,58px);letter-spacing:-.03em;line-height:1}
.stat .n small{font-size:.55em;color:var(--accent-hi);vertical-align:.28em;margin-left:2px}
.stat .l{margin-top:12px;color:var(--muted);font-size:15px}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px}
.badge{
  display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--txt);
  border:1px solid var(--line-2);border-radius:100px;padding:11px 20px;background:rgba(255,255,255,.03);
  transition:border-color .3s,background .3s;
}
.badge:hover{border-color:rgba(216,26,44,.5);background:rgba(216,26,44,.07)}
.badge svg{width:15px;height:15px;stroke:var(--accent-hi);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1080px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.stats{grid-template-columns:1fr}}

/* ---------- immersive ---------- */
.immersive{
  position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;background:var(--bg0);
}
.immersive .bgfx{position:absolute;inset:-12% 0;z-index:0;will-change:transform}
#pcbCanvas{width:100%;height:100%}
.immersive .veil{position:absolute;inset:0;z-index:1;background:radial-gradient(85% 70% at 50% 50%,rgba(10,11,13,.25),var(--bg0) 92%)}
.immersive .inner{position:relative;z-index:2;padding:0 var(--pad);max-width:1000px}
.immersive .line-txt{
  font-family:var(--font-d);font-weight:700;font-size:clamp(30px,5vw,68px);letter-spacing:-.02em;line-height:1.18;
  display:block;
}
.immersive .line-txt em{font-style:normal;color:var(--accent-hi)}

/* ---------- marques ---------- */
.brands{--cols:6}
.brand-grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:12px;margin-top:56px}
.brand{
  border:1px solid var(--line);border-radius:14px;background:var(--bg1);
  display:grid;place-items:center;height:88px;
  font-family:var(--font-d);font-weight:600;font-size:15.5px;letter-spacing:.06em;color:var(--dim);
  transition:color .35s,border-color .35s,background .35s,transform .35s;text-transform:uppercase;
  text-align:center;padding:0 8px;
}
.brand:hover{color:#fff;border-color:rgba(216,26,44,.5);background:var(--bg2);transform:translateY(-3px)}
.brand-cat{
  margin:44px 0 0;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:16px;
}
.brand-cat::after{content:"";flex:1;height:1px;background:var(--line)}
.brand-grid+.brand-cat{margin-top:52px}
@media(max-width:1150px){.brands{--cols:4}}
@media(max-width:720px){.brands{--cols:3}.brand{height:70px;font-size:13px}}
@media(max-width:460px){.brands{--cols:2}}

/* ---------- power band ---------- */
.power{
  position:relative;min-height:92vh;overflow:hidden;display:flex;align-items:center;justify-content:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg1);
}
#dynoCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.8}
.power .veil{position:absolute;inset:0;background:radial-gradient(70% 65% at 50% 50%,transparent,rgba(15,17,20,.92) 90%)}
.power .words{position:relative;z-index:2;text-align:center;padding:0 var(--pad)}
.power .w{
  font-family:var(--font-d);font-weight:700;font-size:clamp(52px,9vw,140px);line-height:1.02;letter-spacing:-.03em;
  opacity:.14;transition:opacity .6s,text-shadow .6s;display:block;
}
.power .w.lit{opacity:1}
.power .w.lit:nth-child(2){color:var(--accent-hi);text-shadow:0 0 60px var(--glow)}

/* ---------- FAQ ---------- */
.faq-list{margin-top:54px;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq button{
  width:100%;background:none;border:0;color:var(--txt);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  font-family:var(--font-d);font-size:clamp(18px,2vw,23px);font-weight:600;text-align:left;
  padding:30px 6px;transition:color .3s;
}
.faq button:hover{color:var(--accent-hi)}
.faq .plus{flex:0 0 auto;width:34px;height:34px;border:1px solid var(--line-2);border-radius:50%;position:relative;transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s}
.faq .plus::before,.faq .plus::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:1.6px;background:currentColor;transform:translate(-50%,-50%)}
.faq .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq.open .plus{transform:rotate(135deg);border-color:var(--accent);background:rgba(216,26,44,.12)}
.faq .ans{max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.16,1,.3,1)}
.faq .ans-in{padding:0 6px 32px;color:var(--muted);max-width:760px;font-size:16.5px}
.faq .ans-in a{color:var(--accent-hi)}

/* ---------- CTA final ---------- */
.final{
  position:relative;min-height:96vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
}
.final .glow{
  position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);z-index:0;
  width:min(1100px,120vw);aspect-ratio:1.6;border-radius:50%;
  background:radial-gradient(closest-side,rgba(216,26,44,.22),transparent 72%);
  filter:blur(10px);animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{50%{opacity:.65;transform:translate(-50%,-50%) scale(1.06)}}
.final .inner{position:relative;z-index:2;padding:0 var(--pad);max-width:1100px}
.final h2{font-size:clamp(42px,7vw,100px);font-weight:700;margin-bottom:30px}
.final h2 em{font-style:normal;color:var(--accent-hi)}
.final p{color:var(--muted);font-size:clamp(16px,1.6vw,20px);max-width:620px;margin:0 auto 48px}
.final .inner{min-width:0;max-width:min(1100px,100%)}
.final .btn-red{font-size:19px;padding:22px 46px}
.final .sub{margin-top:22px;font-size:14px;color:var(--dim)}
@media(max-width:480px){
  .final .btn-red{font-size:15.5px;padding:17px 26px}
  .btn{white-space:normal;text-align:center}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg1)}
.foot{max-width:1280px;margin:0 auto;padding:70px var(--pad) 40px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px}
.foot h4{font-family:var(--font-d);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:20px}
.foot ul{display:grid;gap:12px;font-size:15px;color:var(--muted)}
.foot ul a:hover{color:var(--txt)}
.foot-brand p{color:var(--dim);font-size:14.5px;max-width:300px;margin-top:16px}
.socials{display:flex;gap:12px;margin-top:24px}
.socials a{
  width:40px;height:40px;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;transition:border-color .3s,background .3s,transform .3s;
}
.socials a:hover{border-color:var(--accent);background:rgba(216,26,44,.1);transform:translateY(-2px)}
.socials svg{width:17px;height:17px;fill:var(--muted)}
.socials a:hover svg{fill:var(--txt)}
.foot-bot{
  margin-top:60px;padding-top:28px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13.5px;color:var(--dim);
}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}

/* ---------- divers ---------- */
.media-slot{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-2)}
.media-slot video{width:100%;height:100%;object-fit:cover}
.noise::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ============================================================
   Pages intérieures (CGV, mentions, contenus)
   ============================================================ */
body.admin-bar .nav{top:32px}
@media(max-width:782px){body.admin-bar .nav{top:46px}}
.page-hero{
  padding:170px var(--pad) 70px;border-bottom:1px solid var(--line);
  background:
    radial-gradient(70% 120% at 80% -20%,rgba(216,26,44,.12),transparent 60%),
    var(--bg1);
}
.page-hero .in{max-width:1100px;margin:0 auto}
.page-hero h1{font-size:clamp(34px,5vw,62px);font-weight:700;letter-spacing:-.02em}
.page-hero .crumb{font-size:13.5px;color:var(--dim);margin-bottom:18px;display:block}
.page-hero .crumb a{color:var(--muted)}
.page-hero .crumb a:hover{color:var(--accent-hi)}
.prose-wrap{max-width:820px;margin:0 auto;padding:64px var(--pad) 110px}
.prose{color:#d4d8dc;font-size:16.5px}
.prose h2{font-size:clamp(24px,2.6vw,32px);margin:52px 0 18px;color:var(--txt)}
.prose h3{font-size:clamp(19px,2vw,23px);margin:36px 0 14px;color:var(--txt)}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li{margin-bottom:8px}
.prose a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--txt)}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.prose th,.prose td{border:1px solid var(--line-2);padding:10px 14px;text-align:left}
.prose th{background:var(--bg2);color:var(--txt)}
.prose blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 20px;margin:24px 0;color:var(--muted)}
.prose hr{border:0;height:1px;background:var(--line);margin:44px 0}
@media print{
  body{background:#fff;color:#111}
  .nav,.mobile-menu,footer,.page-hero{display:none!important}
  .prose,.prose h2,.prose h3,.prose strong{color:#111}
  .prose a{color:#111}
  .prose-wrap{padding:0;max-width:none}
}

/* ============================================================
   WooCommerce — boutique, produit, panier
   ============================================================ */
.shop-wrap{max-width:1280px;margin:0 auto;padding:56px var(--pad) 110px}
.woocommerce .woocommerce-breadcrumb{color:var(--dim);font-size:13.5px;margin-bottom:30px}
.woocommerce .woocommerce-breadcrumb a{color:var(--muted)}
.woocommerce .woocommerce-result-count{color:var(--dim)}
.woocommerce .woocommerce-ordering select{
  background:var(--bg2);color:var(--txt);border:1px solid var(--line-2);
  border-radius:10px;padding:9px 14px;font-family:var(--font-b);
}
.woocommerce ul.products{
  display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:18px;margin:34px 0 0!important;padding:0!important;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{
  width:auto!important;float:none!important;margin:0!important;padding:0!important;
  background:linear-gradient(180deg,var(--bg2),var(--bg1));
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-5px);border-color:rgba(216,26,44,.45);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.9);
}
.woocommerce ul.products li.product a img{margin:0;border-radius:0;aspect-ratio:1/1;object-fit:cover;width:100%}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-d);font-size:17px;color:var(--txt);padding:18px 18px 4px;
}
.woocommerce ul.products li.product .price{
  color:var(--accent-hi)!important;font-family:var(--font-d);font-weight:600;font-size:17px;padding:0 18px 6px;display:block;
}
.woocommerce ul.products li.product .price del{color:var(--dim)!important;margin-right:8px}
.woocommerce ul.products li.product .button{margin:8px 18px 20px}
.woocommerce span.onsale{
  background:var(--accent);color:#fff;font-family:var(--font-d);
  border-radius:100px;padding:4px 14px;line-height:1.7;min-width:0;min-height:0;
}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #respond input#submit,
.wc-block-components-button{
  background:linear-gradient(135deg,var(--accent-hi),var(--accent) 55%,var(--accent-deep))!important;
  color:#fff!important;font-family:var(--font-d)!important;font-weight:600!important;
  border:0!important;border-radius:100px!important;padding:12px 24px!important;
  transition:transform .3s,box-shadow .3s!important;
}
.woocommerce .button:hover,.wc-block-components-button:hover{
  transform:translateY(-1px);box-shadow:0 10px 30px -8px var(--glow)!important;
}
.woocommerce nav.woocommerce-pagination ul{border:0}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0 4px}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  background:var(--bg2);color:var(--muted);border:1px solid var(--line-2);border-radius:10px;padding:10px 16px;
}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--accent);color:#fff;border-color:var(--accent)}
/* fiche produit */
.woocommerce div.product .product_title{font-family:var(--font-d);font-size:clamp(26px,3vw,38px);color:var(--txt)}
.woocommerce div.product p.price{color:var(--accent-hi);font-family:var(--font-d);font-size:26px}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--bg2);border-color:var(--line-2)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--bg3)}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--muted)}
.woocommerce div.product .woocommerce-tabs .panel{color:var(--muted)}
.woocommerce div.product div.images img{border-radius:16px}
.woocommerce .quantity .qty{
  background:var(--bg2);color:var(--txt);border:1px solid var(--line-2);border-radius:10px;padding:11px 8px;
}
/* messages */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--bg2)!important;color:var(--txt)!important;
  border-top-color:var(--accent)!important;border-radius:12px;
}
.woocommerce-message::before{color:#2ecc71}
.woocommerce-info::before{color:var(--accent-hi)}
/* blocs boutique (WooCommerce blocks) */
.wc-block-grid__product{
  background:linear-gradient(180deg,var(--bg2),var(--bg1));
  border:1px solid var(--line)!important;border-radius:16px;overflow:hidden;
}
.wc-block-grid__product-title{font-family:var(--font-d);color:var(--txt)}
.wc-block-grid__product-price{color:var(--accent-hi)!important}
/* panier / checkout : on reste sobre, les blocs gèrent leur layout */
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{color:#222}
.cart-count{
  display:inline-grid;place-items:center;min-width:19px;height:19px;border-radius:100px;
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:0 5px;margin-left:6px;
}

/* contenu générique WordPress */
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto}
.alignfull{width:100%}
img.aligncenter{margin:0 auto}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* logo téléversé (Apparence → Personnaliser → Identité du site) */
.logo .logo-img{height:38px;width:auto;max-width:220px;object-fit:contain}
footer .logo .logo-img{height:34px}
@media(max-width:640px){.logo .logo-img{height:32px}}

/* ------------------------------------------------------------
   Panier & validation de commande — les blocs WooCommerce sont
   dessinés pour fond clair : on les pose sur une carte blanche,
   nette et lisible, au lieu de forcer un mode sombre bancal.
   ------------------------------------------------------------ */
body.woocommerce-cart .prose-wrap,
body.woocommerce-checkout .prose-wrap{max-width:1160px}
.prose .wp-block-woocommerce-cart,
.prose .wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout{
  background:#fff;color:#1f2226;
  border-radius:var(--radius);
  padding:clamp(18px,3.4vw,44px);
  box-shadow:0 34px 90px -34px rgba(0,0,0,.85);
}
.prose .wp-block-woocommerce-cart a,
.prose .wp-block-woocommerce-checkout a,
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a{color:#b3121f;text-decoration:none}
.wp-block-woocommerce-cart a:hover,
.wp-block-woocommerce-checkout a:hover{text-decoration:underline}
/* montants et intitulés : le bloc hérite parfois de la couleur du thème */
.wp-block-woocommerce-cart .wc-block-components-product-name,
.wp-block-woocommerce-cart .wc-block-components-product-price,
.wp-block-woocommerce-cart .wc-block-components-totals-item,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item{color:#1f2226}
.wp-block-woocommerce-cart .wc-block-components-product-metadata__description,
.wp-block-woocommerce-cart .wc-block-components-product-details{color:#5a6068}

/* ============================================================
   Page « Comment ça marche » — bandeau vidéo
   ============================================================ */
.cm-hero{padding:150px var(--pad) 0;max-width:1180px;margin:0 auto}
.cm-hero .crumb{font-size:13.5px;color:var(--dim);margin-bottom:16px}
.cm-hero .crumb a{color:var(--muted)}
.cm-hero .crumb a:hover{color:var(--accent-hi)}
.cm-hero h1{font-size:clamp(30px,4.6vw,58px);font-weight:700;margin:0 0 18px}
.cm-hero h1 em{font-style:normal;background:linear-gradient(92deg,#fff,var(--accent-hi));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cm-hero p.lead{color:var(--muted);max-width:660px;font-size:clamp(16px,1.4vw,19px)}

.cm-video{max-width:1180px;margin:38px auto 0;padding:0 var(--pad)}
.vplayer{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);
  background:#000;aspect-ratio:864/496;box-shadow:0 50px 110px -50px #000}
.vplayer img.poster{width:100%;height:100%;object-fit:cover;display:block;transition:transform 6s ease,filter .5s}
.vplayer:hover img.poster{transform:scale(1.03);filter:brightness(1.06)}
.vplayer video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.vplayer .veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,11,.2) 0%,rgba(8,9,11,.05) 38%,rgba(8,9,11,.62) 78%,rgba(8,9,11,.86) 100%)}
.vplayer .go{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;border:0;background:none;padding:0}
.vplayer .go .disc{width:clamp(64px,7vw,92px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-hi),var(--accent) 55%,var(--accent-deep));
  display:grid;place-items:center;box-shadow:0 14px 50px -8px var(--glow);
  transition:transform .4s cubic-bezier(.34,1.4,.64,1),box-shadow .4s}
.vplayer .go:hover .disc{transform:scale(1.09);box-shadow:0 20px 66px -8px var(--glow)}
.vplayer .go .disc::after{content:"";border-left:clamp(19px,2vw,26px) solid #fff;
  border-top:clamp(12px,1.3vw,16px) solid transparent;border-bottom:clamp(12px,1.3vw,16px) solid transparent;
  margin-left:clamp(5px,.6vw,7px)}
.vplayer .go .lab{position:absolute;left:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,28px);text-align:left;
  padding:11px 18px 12px;border-radius:13px;border:1px solid rgba(255,255,255,.11);
  background:rgba(9,10,13,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .35s,border-color .35s}
.vplayer .go:hover .lab{background:rgba(9,10,13,.78);border-color:rgba(216,26,44,.5)}
.vplayer .go .lab b{display:block;font-family:var(--font-d);font-weight:600;font-size:clamp(15px,1.8vw,22px)}
.vplayer .go .lab span{color:#cfd4db;font-size:clamp(12px,1.1vw,14px)}
.vplayer .dur{position:absolute;right:clamp(16px,3vw,26px);top:clamp(16px,3vw,26px);
  font-family:var(--font-d);font-size:12.5px;letter-spacing:.1em;padding:6px 13px;border-radius:20px;
  background:rgba(8,9,11,.72);border:1px solid var(--line-2);backdrop-filter:blur(6px)}
.vplayer.playing .go,.vplayer.playing .veil,.vplayer.playing .dur{display:none}

.cm-under{max-width:1180px;margin:18px auto 0;padding:0 var(--pad);
  display:flex;gap:22px;flex-wrap:wrap;color:var(--dim);font-size:13.5px}
.cm-under span{display:flex;align-items:center;gap:8px}
.cm-under svg{width:14px;height:14px;stroke:var(--accent-hi);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* accroche sur l'accueil */
.teaser{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg1)}
.teaser .in{max-width:1280px;margin:0 auto;padding:clamp(56px,8vw,96px) var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.teaser .card{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);
  aspect-ratio:16/9;display:block;box-shadow:0 40px 90px -46px #000}
.teaser .card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.teaser .card:hover img{transform:scale(1.05)}
.teaser .card .v{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,11,.1),rgba(8,9,11,.6))}
.teaser .card .d{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:rgba(216,26,44,.94);display:grid;place-items:center;
  box-shadow:0 12px 40px -6px var(--glow);transition:transform .4s cubic-bezier(.34,1.4,.64,1)}
.teaser .card:hover .d{transform:translate(-50%,-50%) scale(1.1)}
.teaser .card .d::after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;
  border-bottom:11px solid transparent;margin-left:5px}
.teaser h2{font-size:clamp(28px,3.4vw,46px);line-height:1.05}
.teaser .lead{font-size:clamp(15px,1.35vw,17.5px);margin-bottom:30px}
.teaser .kicker{margin-bottom:16px}
@media(max-width:880px){.teaser .in{grid-template-columns:1fr;gap:26px}
  .teaser>.in>div:last-child{order:2}}

/* bandeau d'appel final de la page */
.cm-cta{position:relative;text-align:center;padding:clamp(60px,9vw,110px) var(--pad);overflow:hidden}
.cm-cta .glow{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);z-index:0;
  width:min(900px,120vw);aspect-ratio:1.7;border-radius:50%;
  background:radial-gradient(closest-side,rgba(216,26,44,.2),transparent 72%);filter:blur(8px)}
.cm-cta .in{position:relative;z-index:2;max-width:760px;margin:0 auto}
.cm-cta h2{font-size:clamp(28px,4.4vw,54px);font-weight:700;margin-bottom:18px}
.cm-cta h2 em{font-style:normal;color:var(--accent-hi)}
.cm-cta p{color:var(--muted);font-size:clamp(15px,1.4vw,18px);margin-bottom:34px}
.cm-cta .sub{margin-top:20px;font-size:13.5px;color:var(--dim)}

/* ============================================================
   Tutoriel « Comment ça marche »
   Lecteur 13 étapes. Les couleurs du portail reprennent
   assets/portal.css du plugin B2TUNE : les écrans montrés sont
   exactement ceux que le garage verra dans son espace.
   Tout est cloisonné sous .tuto, et les noms que le thème utilise
   déjà (.step, .n, .t, .count) sont renommés ici.
   ============================================================ */
.tuto{--p-bg:#161a21;--p-surface:#1e232c;--p-surface2:#262c37;
  --p-line:#3c4553;--p-line-soft:#2f3742;
  --p-text:#f5f7fa;--p-text2:#c3cbd8;--p-text3:#939db0;
  --p-accent:#a81e3b;--p-ink:#e0637c;--p-soft:rgba(224,99,124,.15);--p-accentline:rgba(224,99,124,.42);
  --p-ok:#2fbf5f;--p-warn:#f0a020;
  --p-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ok:#2ecc71;--warn:#f0a500}
.tuto text{font-family:'Space Grotesk',system-ui,sans-serif}
.tuto .player{margin-top:44px;border:1px solid var(--line-2);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,var(--bg2),var(--bg1));box-shadow:0 50px 110px -50px #000}
.tuto .screen{position:relative}
.tuto .stage{position:relative;aspect-ratio:16/9;background:#0a0b0d;overflow:hidden}
.tuto .scene{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .4s ease}
.tuto .scene.on{opacity:1;pointer-events:auto}
.tuto .scene>svg{width:100%;height:100%;display:block}
/* conteneur pour les écrans reconstitués (HTML mis à l'échelle) */
.tuto .uiwrap{position:absolute;inset:0;overflow:hidden}
.tuto .ui{width:1000px;height:563px;transform-origin:top left;transform:scale(var(--s,1));
  background:var(--p-bg);font-family:var(--sans,'Inter',sans-serif);color:var(--p-text);
  display:flex;font-size:13px;line-height:1.5}
.tuto .caption{position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:clamp(16px,3vw,30px) clamp(18px,4vw,40px);
  background:linear-gradient(transparent,rgba(6,7,9,.72) 30%,rgba(6,7,9,.97) 60%)}
.tuto .caption .num{font-family:var(--font-d);font-size:12px;letter-spacing:.18em;color:var(--accent-hi);font-weight:600}
.tuto .caption h3{font-size:clamp(18px,2.3vw,29px);font-weight:600;margin:6px 0 4px}
.tuto .caption p{color:var(--muted);font-size:clamp(13px,1.2vw,15.5px);max-width:680px}
.tuto .bar{display:flex;align-items:center;gap:14px;padding:14px clamp(16px,3vw,26px);
  border-top:1px solid var(--line);background:rgba(10,11,13,.6)}
.tuto .ctrl{width:42px;height:42px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);color:var(--txt);cursor:pointer;display:grid;place-items:center;
  transition:background .3s,border-color .3s,transform .3s}
.tuto .ctrl:hover{background:rgba(216,26,44,.15);border-color:var(--accent);transform:translateY(-1px)}
.tuto .ctrl svg{width:16px;height:16px;fill:currentColor}
.tuto .rail{flex:1;display:flex;gap:3px}
.tuto .tick{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1);cursor:pointer;position:relative;overflow:hidden}
.tuto .tick::after{content:"";position:absolute;inset:0;width:0;background:var(--accent-hi);border-radius:4px}
.tuto .tick.done::after{width:100%}
.tuto .tick.now::after{width:100%;animation:tu-fill var(--dur,7s) linear forwards}

@keyframes tu-fill{from{width:0}to{width:100%}}
.tuto .cnt{font-family:var(--font-d);font-size:13px;color:var(--dim);flex:0 0 auto;min-width:46px;text-align:right}
.tuto .steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;margin-top:40px}
.tuto .tstep{border:1px solid var(--line);border-radius:13px;padding:15px 16px;background:rgba(255,255,255,.02);
  cursor:pointer;transition:.3s;text-align:left;color:inherit;font:inherit;display:block;position:static}
.tuto .tstep::before{content:none}
.tuto .tstep:hover{border-color:rgba(216,26,44,.45);background:rgba(216,26,44,.06);transform:translateY(-2px)}
.tuto .tstep.active{border-color:var(--accent);background:rgba(216,26,44,.1)}
.tuto .tstep .tnum{display:block;font-family:var(--font-d);font-weight:700;font-size:11.5px;color:var(--accent-hi);letter-spacing:.08em}
.tuto .tstep .tlab{font-family:var(--font-d);font-weight:600;font-size:14.5px;margin-top:5px;line-height:1.25;
  background:none;border:0;padding:0;color:var(--txt);display:block;letter-spacing:0}
.tuto .note{margin-top:40px;border:1px solid var(--line-2);border-left:3px solid var(--accent);
  border-radius:12px;padding:22px 26px;background:rgba(255,255,255,.02);color:var(--muted);font-size:15px}
.tuto .note b{color:var(--txt)}
.tuto .note+.note{margin-top:14px;border-left-color:var(--warn)}
.tuto .note a{color:var(--accent-hi);text-decoration:none;border-bottom:1px solid rgba(216,26,44,.4)}
.tuto .note a:hover{border-bottom-color:var(--accent-hi)}
/* ---------- animations ---------- */
.tuto .scene.on .f1{animation:tu-fade .6s both}
.tuto .scene.on .f2{animation:tu-fade .6s .3s both}
.tuto .scene.on .f3{animation:tu-fade .6s .7s both}
.tuto .scene.on .f4{animation:tu-fade .6s 1.1s both}
.tuto .scene.on .f5{animation:tu-fade .6s 1.6s both}
.tuto .scene.on .f6{animation:tu-fade .6s 2.2s both}

@keyframes tu-fade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.tuto .scene.on .drive{animation:tu-drive 1.5s cubic-bezier(.22,1,.36,1) both}

@keyframes tu-drive{from{transform:translateX(-340px);opacity:0}to{transform:none;opacity:1}}
.tuto .scene.on .leave{animation:tu-leave 1.8s 1.4s cubic-bezier(.55,0,.9,1) both}

@keyframes tu-leave{to{transform:translateX(400px);opacity:0}}
.tuto .scene.on .grow{animation:tu-grow 3s .6s cubic-bezier(.35,0,.15,1) both}

@keyframes tu-grow{from{width:0}to{width:var(--w)}}
.tuto .scene.on .pop{animation:tu-pop .55s .4s cubic-bezier(.34,1.56,.64,1) both}

@keyframes tu-pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
.tuto .scene.on .draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);animation:tu-draw 1.5s .4s ease forwards}

@keyframes tu-draw{to{stroke-dashoffset:0}}
.tuto .scene.on .flow{stroke-dasharray:9 13;animation:tu-flow 1s linear infinite}

@keyframes tu-flow{to{stroke-dashoffset:-44}}
.tuto .scene.on .drop{animation:tu-drop .9s .6s cubic-bezier(.34,1.4,.64,1) both}

@keyframes tu-drop{from{opacity:0;transform:translateY(-64px)}to{opacity:1;transform:none}}
.tuto .scene.on .arm{animation:tu-arm 1.1s .5s cubic-bezier(.4,0,.2,1) both;transform-box:fill-box;transform-origin:top right}

@keyframes tu-arm{from{transform:rotate(-16deg)}to{transform:rotate(0)}}
.tuto .blink{animation:tu-blink 1.2s infinite}
@keyframes tu-blink{50%{opacity:.25}}
.tuto .pulse{animation:tu-pulse 1.8s infinite}
@keyframes tu-pulse{50%{opacity:.45}}
.tuto .spin{animation:tu-spin 2.6s linear infinite;transform-box:fill-box;transform-origin:center}

@keyframes tu-spin{to{transform:rotate(360deg)}}
.tuto .scene.on .type{overflow:hidden;white-space:nowrap;animation:tu-type 1.1s steps(24) both}

@keyframes tu-type{from{max-width:0}to{max-width:100%}}/* curseur factice sur les écrans du portail */
.tuto .cursor{position:absolute;width:19px;height:19px;z-index:9;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.tuto .cursor svg{width:100%;height:100%}
.tuto .scene.on .cur-a{animation:tu-curA 5.5s cubic-bezier(.5,0,.3,1) both}

@keyframes tu-curA{0%{left:22%;top:86%}38%{left:76.5%;top:70%}46%{transform:scale(.8)}52%{transform:scale(1)}100%{left:76.5%;top:70%}}
.tuto .scene.on .cur-b{animation:tu-curB 8s cubic-bezier(.5,0,.3,1) both}

@keyframes tu-curB{0%{left:12%;top:88%}14%{left:26%;top:26%}28%{left:26%;top:47%}
  46%{left:34%;top:72%}62%{left:34%;top:72%}80%{left:80%;top:84%}88%{transform:scale(.82)}94%{transform:scale(1)}100%{left:80%;top:84%}}
.tuto .scene.on .cur-c{animation:tu-curC 5s cubic-bezier(.5,0,.3,1) both}

@keyframes tu-curC{0%{left:18%;top:85%}55%{left:70%;top:53%}66%{transform:scale(.82)}72%{transform:scale(1)}100%{left:70%;top:53%}}
.tuto .ripple{position:absolute;width:34px;height:34px;border-radius:50%;border:2px solid var(--p-ink);
  z-index:8;pointer-events:none;opacity:0}
.tuto .scene.on .rip-a{left:calc(76.5% - 7px);top:calc(70% - 7px);animation:tu-rip .8s 2.9s both}
.tuto .scene.on .rip-b{left:calc(80% - 7px);top:calc(84% - 7px);animation:tu-rip .8s 7s both}
.tuto .scene.on .rip-c{left:calc(70% - 7px);top:calc(53% - 7px);animation:tu-rip .8s 3.4s both}

@keyframes tu-rip{0%{opacity:.9;transform:scale(.25)}100%{opacity:0;transform:scale(1.15)}}/* ---------- portail reconstitué ---------- */
.tuto .ui *{box-sizing:border-box}
.tuto .p-side{width:246px;flex-shrink:0;background:var(--p-surface);border-right:1px solid var(--p-line);display:flex;flex-direction:column}
.tuto .p-brand{padding:18px 20px 14px;border-bottom:1px solid var(--p-line-soft)}
.tuto .p-brand-mark{display:flex;align-items:center;gap:9px;font-family:var(--font-d);font-weight:700;font-size:16px;letter-spacing:.03em}
.tuto .p-brand-sub{font-family:var(--p-mono);font-size:9.5px;color:var(--p-text3);letter-spacing:.1em;margin-top:5px}
.tuto .p-nav{flex:1;padding:12px 12px}
.tuto .p-lbl{font-family:var(--p-mono);font-size:9.5px;letter-spacing:.13em;color:var(--p-text3);padding:12px 8px 6px}
.tuto .p-item{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;border-radius:8px;
  color:var(--p-text2);font-size:12.5px;margin-bottom:2px}
.tuto .p-item.on{background:var(--p-soft);color:var(--p-ink);font-weight:600}
.tuto .p-badge{background:var(--p-accent);color:#fff;font-family:var(--p-mono);font-size:9.5px;border-radius:20px;padding:1px 6px}
.tuto .p-foot{padding:12px 20px;border-top:1px solid var(--p-line-soft);font-family:var(--p-mono);font-size:9.5px;color:var(--p-text3);line-height:1.5}
.tuto .p-main{flex:1;display:flex;flex-direction:column;min-width:0}
.tuto .p-top{height:56px;flex:0 0 56px;border-bottom:1px solid var(--p-line);background:var(--p-surface);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.tuto .p-shop{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--p-text2)}
.tuto .p-dot{width:7px;height:7px;border-radius:50%;background:var(--p-ok);box-shadow:0 0 8px var(--p-ok)}
.tuto .p-right{display:flex;align-items:center;gap:13px}
.tuto .p-bal{display:flex;align-items:center;gap:10px;background:var(--p-surface2);border:1px solid var(--p-line);border-radius:11px;padding:6px 13px}
.tuto .p-bal-l{font-family:var(--p-mono);font-size:9px;color:var(--p-text3);letter-spacing:.12em}
.tuto .p-bal-v{font-family:var(--p-mono);font-size:16px;font-weight:600;color:var(--p-ink)}
.tuto .p-bal-h{font-family:var(--p-mono);font-size:9.5px;color:var(--p-warn);border-left:1px solid var(--p-line);padding-left:9px}
.tuto .p-user{display:flex;align-items:center;gap:9px}
.tuto .p-av{width:29px;height:29px;border-radius:50%;background:var(--p-accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:11px}
.tuto .p-un{font-size:12px;font-weight:600}
.tuto .p-ur{font-size:10px;color:var(--p-text3)}
.tuto .p-content{flex:1;padding:22px 26px;overflow:hidden}
.tuto .p-scroll{transition:none}
.tuto .scene.on .scroll-a{animation:tu-scrollA 7.5s cubic-bezier(.5,0,.4,1) both}

@keyframes tu-scrollA{0%,42%{transform:translateY(0)}100%{transform:translateY(-92px)}}
.tuto .scene.on .scroll-b{animation:tu-scrollB 10.5s cubic-bezier(.45,0,.4,1) both}

@keyframes tu-scrollB{0%,18%{transform:translateY(0)}52%,60%{transform:translateY(-186px)}100%{transform:translateY(-238px)}}
.tuto .p-eyebrow{font-family:var(--p-mono);font-size:10px;letter-spacing:.14em;color:var(--p-ink);text-transform:uppercase}
.tuto .p-h1{font-size:23px;font-weight:700;margin:5px 0 14px;letter-spacing:-.02em;font-family:var(--font-d)}
.tuto .p-note{border:1px solid var(--p-line);border-left:3px solid var(--p-accent);border-radius:10px;
  padding:11px 14px;background:var(--p-surface);margin-bottom:16px}
.tuto .p-note strong{display:block;font-size:12.5px;margin-bottom:2px}
.tuto .p-note span{font-size:11.5px;color:var(--p-text2)}
.tuto .p-packs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.tuto .p-pack{background:var(--p-surface);border:1px solid var(--p-line);border-radius:13px;padding:15px 14px}
.tuto .p-pack.hot{border-color:var(--p-accentline);box-shadow:0 0 0 1px var(--p-accentline)}
.tuto .p-pack-t{font-size:13px;font-weight:600}
.tuto .p-pack-ref{font-family:var(--p-mono);font-size:10.5px;white-space:nowrap;color:var(--p-text3);text-decoration:line-through;margin-top:6px}
.tuto .p-pack-p{font-family:var(--p-mono);font-size:18px;white-space:nowrap;font-weight:600;color:var(--p-ink);margin-top:2px}
.tuto .p-pack-u{font-size:10.5px;color:var(--p-text3);margin-top:3px}
.tuto .p-btn{background:var(--p-accent);color:#fff;border:0;border-radius:9px;padding:8px 12px;
  font-size:12px;font-weight:600;width:100%;margin-top:11px;text-align:center}
.tuto .p-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.tuto .p-card{background:var(--p-surface);border:1px solid var(--p-line);border-radius:12px;padding:14px 16px}
.tuto .p-card-t{font-family:var(--p-mono);font-size:10px;letter-spacing:.12em;color:var(--p-text3);text-transform:uppercase;margin-bottom:9px}
.tuto .p-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--p-line-soft);font-size:12px}
.tuto .p-row:last-child{border:0}
.tuto .p-row code{font-family:var(--p-mono);font-size:11px;color:var(--p-text2)}
/* formulaire dossier */
.tuto .p-form{display:grid;grid-template-columns:1fr 288px;gap:16px}
.tuto .p-stepbox{background:var(--p-surface);border:1px solid var(--p-line);border-radius:12px;padding:14px 16px;margin-bottom:11px}
.tuto .p-stephead{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.tuto .p-stepnum{width:21px;height:21px;border-radius:50%;background:var(--p-soft);color:var(--p-ink);
  display:grid;place-items:center;font-family:var(--p-mono);font-size:11px;font-weight:700}
.tuto .p-stephead h2{font-size:13.5px;font-weight:600;font-family:var(--font-d)}
.tuto .p-file{border:1.5px dashed var(--p-line);border-radius:9px;padding:12px;display:flex;align-items:center;gap:11px;font-size:12px;color:var(--p-text3)}
.tuto .p-file.filled{border-style:solid;border-color:var(--p-accentline);background:var(--p-soft);color:var(--p-text)}
.tuto .p-segrow{display:flex;gap:7px;margin-bottom:11px}
.tuto .p-seg{padding:6px 13px;border-radius:9px;border:1px solid var(--p-line);background:var(--p-surface2);
  font-size:11.5px;font-weight:600;color:var(--p-text2)}
.tuto .p-seg.on{background:var(--p-soft);border-color:var(--p-accentline);color:var(--p-ink)}
.tuto .p-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.tuto .p-fields.two{grid-template-columns:1fr 1fr}
.tuto .p-fields label{display:block}
.tuto .p-fields span{display:block;font-size:10.5px;color:var(--p-text3);margin-bottom:4px}
.tuto .p-fields span b{color:var(--p-ink)}
.tuto .p-in{height:30px;white-space:nowrap;overflow:hidden;border:1px solid var(--p-line);border-radius:8px;background:var(--p-surface2);
  display:flex;align-items:center;padding:0 9px;font-size:12px;color:var(--p-text)}
.tuto .p-in.ph{color:var(--p-text3)}
.tuto .p-in.sel::after{content:"⌄";margin-left:auto;color:var(--p-text3);font-size:14px;line-height:0}
.tuto .p-opts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tuto .p-opt{display:flex;align-items:center;gap:8px;border:1px solid var(--p-line);border-radius:9px;
  padding:8px 10px;font-size:11.5px;background:var(--p-surface2)}
.tuto .p-opt.on{border-color:var(--p-accentline);background:var(--p-soft)}
.tuto .p-box{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--p-line);flex:0 0 auto;position:relative}
.tuto .p-opt.on .p-box{background:var(--p-accent);border-color:var(--p-accent)}
.tuto .p-opt.on .p-box::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.tuto .p-opt .c{margin-left:auto;font-family:var(--p-mono);font-size:11px;color:var(--p-ink)}
.tuto .p-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;margin-top:9px;border-top:1px solid var(--p-line)}
.tuto .p-total strong{font-family:var(--p-mono);font-size:22px;color:var(--p-ink)}
.tuto .p-cgv{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:11px;color:var(--p-text2)}
.tuto .p-hint{font-size:10.5px;color:var(--p-text3);line-height:1.5;margin-top:9px}
.tuto .p-flash{border-radius:10px;padding:11px 14px;font-size:12.5px;margin-bottom:14px;
  background:rgba(47,191,95,.14);border:1px solid rgba(47,191,95,.4);color:#a8f0c4}
.tuto .p-dl{display:flex;align-items:center;gap:12px;background:var(--p-surface);border:1px solid var(--p-line);
  border-radius:12px;padding:14px 16px;margin-top:11px}
.tuto .p-chip{font-family:var(--p-mono);font-size:10px;padding:3px 9px;border-radius:20px;
  background:rgba(47,191,95,.16);color:#5fe08c;border:1px solid rgba(47,191,95,.35)}


@media(max-width:760px){.tuto .stage{aspect-ratio:4/3}
.tuto .caption{position:static;background:var(--bg2);border-top:1px solid var(--line);padding:16px 18px 18px}
.tuto .caption h3{font-size:18px}
.tuto .steps{grid-template-columns:1fr 1fr;gap:8px;margin-top:26px}
.tuto .tstep{padding:12px 13px;border-radius:11px}
.tuto .tstep .tlab{font-size:13px;margin-top:3px}
.tuto .note{padding:18px 20px;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.tuto *,
.tuto *::before,
.tuto *::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
.tuto .tick.now::after{width:100%}

}
.tuto text{font-family:'Space Grotesk',system-ui,sans-serif}

/* ============================================================
   Page « Formations »
   Réutilise la grammaire du site (kicker, h2, sol, badges) ;
   seuls les ajustements propres à la page vivent sous .fmt.
   ============================================================ */
.fmt .fmt-points{grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,64px);max-width:1080px}
@media(max-width:880px){.fmt .fmt-points{grid-template-columns:1fr}}
.fmt .fmt-suite{margin-top:52px;max-width:760px}
.fmt .fmt-lien{margin-top:44px;color:var(--muted);font-size:16px;max-width:680px;
  border-left:3px solid var(--accent);padding:14px 0 14px 22px}
.fmt .fmt-lien a{color:var(--accent-hi);text-decoration:none;border-bottom:1px solid rgba(216,26,44,.4)}
.fmt .fmt-lien a:hover{border-bottom-color:var(--accent-hi)}
.fmt .cm-hero{padding-bottom:0}
.fmt section:first-of-type .wrap{padding-top:clamp(56px,7vw,90px)}

/* ---------- scène 9 : cartographie animée (table 2D puis surface 3D) ---------- */
.tuto .carto800{position:absolute;left:50%;top:var(--cy,0);width:800px;height:450px;
  margin-left:-400px;transform-origin:top center;transform:scale(var(--cs,1));pointer-events:none}
.tuto .carto800{opacity:0}
.tuto .scene.on .carto800{animation:tu-cartofade .6s .35s both}
@keyframes tu-cartofade{from{opacity:0}to{opacity:1}}
.tuto .c9{position:absolute;left:62px;top:104px;width:340px;height:198px;
  display:flex;flex-direction:column;gap:5px}
.tuto .c9-head{display:flex;justify-content:space-between;align-items:center;height:16px}
.tuto .c9-ax{font-family:var(--p-mono);font-size:8px;letter-spacing:.08em;color:#5d6774}
.tuto .c9-badge{font-family:var(--font-d);font-size:8.5px;font-weight:600;letter-spacing:.08em;
  border:1px solid #2e3743;border-radius:100px;padding:2px 9px;color:#96a0af;
  background:rgba(255,255,255,.03);transition:color .5s,border-color .5s,background .5s}
.tuto .c9-badge.mod{color:var(--accent-hi);border-color:rgba(216,26,44,.5);background:rgba(216,26,44,.1)}
.tuto .c9-stack{position:relative;flex:1}
.tuto .c9-2d{position:absolute;inset:0;transition:opacity .7s}
.tuto .c9-3d{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s}
.tuto .c9-grid{position:relative;display:grid;grid-template-columns:26px repeat(10,29px);
  grid-template-rows:11px repeat(7,22px);gap:1px}
.tuto .c9-grid .ax{font-family:var(--p-mono);font-size:6.5px;color:#5d6774;display:grid;place-items:center}
.tuto .c9-grid .ay{font-family:var(--p-mono);font-size:6.5px;color:#5d6774;display:grid;place-items:center end;padding-right:3px}
.tuto .c9-cell{display:grid;place-items:center;font-family:var(--p-mono);font-size:8px;border-radius:2px;
  color:rgba(255,255,255,.93);text-shadow:0 1px 1px rgba(0,0,0,.5);transition:background .5s,box-shadow .4s}
.tuto .c9-cell.chg{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.tuto .c9-sel{position:absolute;border:1.2px dashed var(--accent-hi);border-radius:3px;opacity:0;transition:opacity .4s}

/* ---------- Formations : scrollytelling des fondamentaux ---------- */
.fmt .fmt-scrolly{position:relative}
@media(min-width:821px) and (prefers-reduced-motion:no-preference){
  .fmt .fmt-scrolly{height:260vh}
  .fmt .fs-stick{position:sticky;top:0;min-height:100vh;display:flex;align-items:center}
  .fmt .fs-stick .wrap{padding-top:60px;padding-bottom:60px}
  .fmt .fmt-points li{opacity:.18;transform:translateX(-8px);
    transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
  .fmt .fmt-points li .tick{transition:border-color .5s,background .5s,box-shadow .5s}
  .fmt .fmt-points li.lit{opacity:1;transform:none}
  .fmt .fmt-points li.lit .tick{border-color:var(--accent);background:rgba(216,26,44,.14);
    box-shadow:0 0 18px rgba(216,26,44,.35)}
}

/* ---------- accueil : configurateur ---------- */
.confsec{background:var(--bg1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.conf-wrap{margin-top:52px;border-radius:18px;overflow:hidden;
  box-shadow:0 44px 90px -44px #000}
.conf-wrap #vp-configurator{display:block}

/* ---------- accueil : configurateur (offre API) ---------- */
.conf-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:46px}
.cp{border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:var(--bg2)}
.cp b{display:block;font-family:var(--font-d);font-size:15.5px;font-weight:600;margin-bottom:7px}
.cp span{color:var(--muted);font-size:13.5px;line-height:1.6}
.conf-note{margin-top:44px;color:var(--dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.conf-wrap{margin-top:14px}
.conf-atelier{margin-top:60px;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(28px,4vw,46px);background:linear-gradient(135deg,var(--bg2),var(--bg1) 60%);text-align:center}
.conf-atelier h3{font-family:var(--font-d);font-size:clamp(20px,2.2vw,26px);margin-bottom:12px}
.conf-atelier p{color:var(--muted);max-width:640px;margin:0 auto 24px;line-height:1.65}
.conf-atelier .conf-closing{margin:26px auto 0;color:var(--dim);font-size:14px}
@media(max-width:820px){.conf-points{grid-template-columns:1fr}}

/* ---------- page : atelier cle en main ---------- */
.akm .cm-hero p.lead{max-width:700px}
.akm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:52px}
.akm-card{border:1px solid var(--line);border-radius:16px;padding:26px 28px;background:var(--bg2)}
.akm-card .num{font-family:var(--font-d);font-size:13px;color:var(--accent-hi);letter-spacing:.12em;margin-bottom:10px;display:block}
.akm-card h3{font-family:var(--font-d);font-size:18px;margin-bottom:10px}
.akm-card p{color:var(--muted);font-size:14px;line-height:1.65}
.akm-cta{margin:70px 0 90px;text-align:center}
.akm-cta p{color:var(--muted);max-width:620px;margin:0 auto 26px;line-height:1.65}
@media(max-width:820px){.akm-grid{grid-template-columns:1fr}}