:root{
  --bg:#08090c; --bg-soft:#0d0f14; --text:#f6f7f9; --text-muted:#969ba6; --text-faint:#5e636d;
  --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.14);
  --electric:#1f8fff; --electric-bright:#4dabff; --electric-deep:#0a5fcc; --glow:rgba(31,143,255,0.45);
  --chrome:#c8d2e0;
  }
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:hidden;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(31,143,255,0.12),transparent 70%);pointer-events:none;}
/* spotlight global qui suit la souris */
#cursor-glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(500px circle at var(--mx,50%) var(--my,20%),rgba(31,143,255,0.06),transparent 60%);}
a{color:inherit;text-decoration:none;}
.container{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:0 32px;}
section{position:relative;padding:100px 0;}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:600;font-size:15px;padding:13px 24px;border-radius:11px;cursor:pointer;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap;}
.btn-primary{background:linear-gradient(135deg,var(--electric-bright),var(--electric-deep));color:#fff;box-shadow:0 4px 20px var(--glow);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px var(--glow);}
.btn-ghost{background:rgba(255,255,255,0.04);border-color:var(--line-strong);color:var(--text);}
.btn-ghost:hover{background:rgba(255,255,255,0.08);transform:translateY(-2px);}
/* --- Player démo vocale (#demo) --- */
.vplayer{position:relative;max-width:560px;margin:0 auto 52px;padding:26px 28px 24px;border-radius:20px;border:1px solid var(--line-strong);background:linear-gradient(180deg,rgba(31,143,255,0.09),rgba(255,255,255,0.02));box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(31,143,255,.08);overflow:hidden;text-align:center;}
.vplayer-glow{position:absolute;top:-45%;left:50%;transform:translateX(-50%);width:520px;height:300px;background:radial-gradient(circle,var(--glow),transparent 65%);opacity:.45;pointer-events:none;}
.vplayer-top{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.vplayer-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--electric-bright);text-transform:uppercase;letter-spacing:.12em;}
.vplayer-dot{width:8px;height:8px;border-radius:50%;background:var(--electric-bright);box-shadow:0 0 10px var(--electric-bright);animation:vp-blink 1.2s infinite;}
@keyframes vp-blink{50%{opacity:.35;}}
.vplayer-name{font-family:var(--font-display);font-size:14px;color:var(--text-muted);}
.vplayer-eq{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:3px;height:88px;margin-bottom:22px;}
/* ⚠️ ANIMÉ EN `transform:scaleY`, JAMAIS EN `height` (mesuré le 03/08) : c'était
   la dernière animation du site qui refaisait la MISE EN PAGE à chaque image —
   celle de la barre ET de sa rangée. La hauteur est désormais fixe à 60 px et
   c'est l'échelle qui varie, appuyée sur le bas : rendu identique, zéro reflow. */
.vplayer-eq span{width:4px;height:60px;border-radius:4px;transform-origin:bottom;transform:scaleY(.2);background:linear-gradient(180deg,var(--electric-bright),var(--electric-deep));animation:vp-eq 1.2s ease-in-out infinite;}
@keyframes vp-eq{0%,100%{transform:scaleY(.167);opacity:.45;}50%{transform:scaleY(1);opacity:1;}}
.vplayer-eq span:nth-child(2n){animation-duration:.9s;}
.vplayer-eq span:nth-child(3n){animation-duration:1.5s;animation-delay:-.3s;}
.vplayer-eq span:nth-child(3n+1){animation-delay:-.7s;}
.vplayer-eq span:nth-child(4n){animation-duration:1.1s;animation-delay:-.5s;}
.vplayer-eq span:nth-child(5n){animation-duration:1.7s;animation-delay:-.9s;}
.vplayer-eq span:nth-child(7n){animation-delay:-1.15s;animation-duration:1.3s;}
.vplayer-cta{position:relative;font-size:16px;padding:15px 30px;}
.vplayer-note{position:relative;margin-top:13px;font-size:12.5px;color:var(--text-muted);}
.vplayer-frame{position:relative;display:block;width:100%;height:620px;border:none;border-radius:12px;background:#08090c;box-shadow:inset 0 0 0 1px var(--line);}
@media(max-width:560px){.vplayer-frame{height:660px;}}
.sub-steps-label{text-align:center;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0 auto 24px;opacity:.9;}
@media(max-width:560px){.vplayer{padding:22px 14px;}.vplayer-eq{gap:2px;}.vplayer-eq span{width:3px;}.vplayer-name{display:none;}}
@media(prefers-reduced-motion:reduce){.vplayer-eq span{animation:none;height:28px;opacity:.8;}.vplayer-dot{animation:none;}}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(16px);background:rgba(8,9,12,0.7);border-bottom:1px solid transparent;transition:border-color .3s,background .3s;}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(8,9,12,0.9);}
.nav-inner{max-width:1280px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;font-size:19px;}
.brand img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 12px var(--glow));}
.brand .labs{color:var(--text-muted);font-weight:300;letter-spacing:.08em;}
.nav-links{display:flex;align-items:center;gap:32px;font-size:15px;color:var(--text-muted);}
.nav-menu{display:none;gap:32px;}
@media(min-width:820px){.nav-menu{display:flex;}}
.nav-links a:hover{color:var(--text);}
.nav-cta{display:none;}
@media(min-width:560px){.nav-cta{display:inline-flex;}}

/* ===== HERO (Linear typo géante) ===== */
.hero{position:relative;overflow:hidden;padding:180px 0 120px;text-align:center;}
#hero-canvas,#final-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 45% at 50% 32%,rgba(31,143,255,0.13),rgba(169,139,255,0.06) 45%,transparent 72%);}
.hero-logo{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 0 50px var(--glow));animation:float 6s ease-in-out infinite;margin-bottom:34px;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:100px;background:rgba(31,143,255,0.08);border:1px solid rgba(31,143,255,0.22);font-size:13px;font-weight:500;color:var(--electric-bright);margin-bottom:28px;}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--electric-bright);box-shadow:0 0 10px var(--electric-bright);animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(46px,8vw,92px);line-height:1.02;letter-spacing:-0.04em;margin-bottom:26px;background:linear-gradient(180deg,#fff 35%,#9aa0ab);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero h1 .blue{background:linear-gradient(180deg,var(--electric-bright),var(--electric-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-sub{font-size:clamp(17px,2vw,21px);color:var(--text-muted);max-width:56ch;margin:0 auto 40px;line-height:1.55;}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.hero-trust{margin-top:48px;display:flex;gap:28px;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--text-faint);}
.hero-trust span{display:inline-flex;align-items:center;gap:7px;}
.hero-trust .c{color:var(--electric-bright);}

/* ===== SECTION TITLE ===== */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--electric-bright);margin-bottom:18px;}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--electric),transparent);}
.section-title{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.5vw,46px);line-height:1.1;letter-spacing:-0.02em;margin-bottom:16px;}
.section-sub{font-size:18px;color:var(--text-muted);max-width:54ch;margin-bottom:56px;}

/* ===== SERVICES (Linear numbered) ===== */
.numbered{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center;margin-bottom:90px;}
.numbered:last-child{margin-bottom:0;}
.numbered.rev .txt{order:2;}
@media(max-width:820px){.numbered{grid-template-columns:1fr;gap:32px;}.numbered.rev .txt{order:0;}}
.numbered .num{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--electric-bright);letter-spacing:.12em;margin-bottom:16px;}
.numbered h3{font-family:var(--font-display);font-size:28px;letter-spacing:-0.02em;margin-bottom:14px;}
.numbered p{color:var(--text-muted);line-height:1.65;font-size:16px;margin-bottom:18px;}
.numbered ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.numbered li{display:flex;gap:10px;font-size:15px;color:var(--text-muted);}
.numbered li .c{color:var(--electric-bright);flex-shrink:0;}
/* mockup window */
.mock{position:relative;border-radius:16px;border:1px solid var(--line);overflow:hidden;background:linear-gradient(160deg,rgba(28,30,40,0.7),rgba(14,16,22,0.5));box-shadow:0 24px 60px rgba(0,0,0,0.4);}
.mock .bar{height:36px;background:rgba(255,255,255,0.04);display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--line);}
.mock .d{width:11px;height:11px;border-radius:50%;}
.mock .body{padding:22px;font-size:13.5px;color:var(--text-muted);line-height:1.9;font-family:var(--font-body);}
.mock .body .ai{color:var(--electric-bright);display:block;}
.mock .body .usr{color:var(--text);display:block;}
.mock .body .ai b,.mock .body .usr b{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-right:8px;vertical-align:middle;}
.mock .body .ai b{background:rgba(31,143,255,0.16);color:var(--electric-bright);}
.mock .body .usr b{background:rgba(255,255,255,0.08);color:var(--text-muted);}
.mock .body .tag-call{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--text-faint);margin-bottom:6px;}
.mock .body .tag-call::first-letter{color:#46d39a;}
.mock .body .ok{color:#46d39a;display:block;margin-top:4px;}
/* grain premium subtil sur tout le site */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.025;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 type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ===== BENTO (pourquoi) ===== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:140px;gap:16px;}
.cell{position:relative;border-radius:20px;border:1px solid var(--line);overflow:hidden;padding:26px;background:linear-gradient(160deg,rgba(26,28,40,0.55),rgba(14,15,22,0.4));transition:border-color .3s,transform .3s;}
.cell::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;background:radial-gradient(300px circle at var(--cx,50%) var(--cy,50%),rgba(31,143,255,0.14),transparent 50%);pointer-events:none;}
.cell:hover{border-color:rgba(31,143,255,0.4);transform:translateY(-3px);}
.cell:hover::after{opacity:1;}
.cell h3{font-family:var(--font-display);font-size:18px;margin-bottom:8px;position:relative;}
.cell p{font-size:14px;color:var(--text-muted);line-height:1.5;position:relative;}
.cell .ic{width:44px;height:44px;border-radius:11px;background:rgba(31,143,255,0.1);border:1px solid rgba(31,143,255,0.2);display:grid;place-items:center;color:var(--electric-bright);margin-bottom:14px;}
.cell .ic svg{width:22px;height:22px;}
.c-big{grid-column:span 2;grid-row:span 2;background:radial-gradient(circle at 70% 25%,rgba(31,143,255,0.22),rgba(14,15,22,0.5));}
.c-big .ic{width:54px;height:54px;}
.c-big .ic svg{width:27px;height:27px;}
.c-wide{grid-column:span 2;}
@media(max-width:760px){.bento{grid-template-columns:repeat(2,1fr);}.c-big{grid-column:span 2;}}

/* ===== FAQ ===== */
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);overflow:hidden;transition:border-color .25s;}
.faq-item[open]{border-color:rgba(31,143,255,0.35);}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--font-display);font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item .p{flex-shrink:0;width:22px;height:22px;position:relative;}
.faq-item .p::before,.faq-item .p::after{content:"";position:absolute;background:var(--electric-bright);border-radius:2px;}
.faq-item .p::before{top:50%;left:0;right:0;height:2px;transform:translateY(-50%);}
.faq-item .p::after{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);transition:opacity .25s;}
.faq-item[open] .p::after{opacity:0;}
.faq-body{padding:0 24px 22px;color:var(--text-muted);font-size:15.5px;}

/* ===== CTA (Raycast gradient mesh) ===== */
.cta-band{position:relative;border-radius:28px;overflow:hidden;padding:80px 40px;text-align:center;border:1px solid rgba(31,143,255,0.22);}
.cta-band .mesh{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 50% 60% at 30% 40%,rgba(120,70,255,0.3),transparent 60%),radial-gradient(ellipse 50% 55% at 75% 55%,rgba(31,143,255,0.4),transparent 60%);filter:blur(12px);animation:mesh 13s ease-in-out infinite;}
@keyframes mesh{0%,100%{transform:scale(1);}50%{transform:scale(1.18) translateX(-2%);}}
.cta-band>*{position:relative;z-index:1;}
.cta-band h2{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,4.5vw,48px);letter-spacing:-0.02em;margin-bottom:16px;}
.rotator{display:inline-block;position:relative;vertical-align:bottom;text-align:left;}
.rot-word{display:inline-block;background:linear-gradient(120deg,var(--electric-bright),#a98bff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;will-change:transform,opacity;}
.rot-word.out{animation:rotOut .4s cubic-bezier(.7,0,.84,0) forwards;}
.rot-word.in{animation:rotIn .5s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes rotOut{to{opacity:0;transform:translateY(-18px);filter:blur(4px);}}
@keyframes rotIn{from{opacity:0;transform:translateY(18px);filter:blur(4px);}to{opacity:1;transform:none;filter:none;}}
.cta-band p{color:rgba(255,255,255,0.85);font-size:18px;max-width:46ch;margin:0 auto 32px;}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line);padding:56px 0 40px;}
.footer-grid{display:flex;flex-direction:column;gap:28px;justify-content:space-between;}
@media(min-width:680px){.footer-grid{flex-direction:row;align-items:center;}}
.footer-tag{color:var(--text-faint);font-size:14px;margin-top:12px;max-width:32ch;}
.footer-meta{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--text-faint);}
.footer-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:var(--text-faint);}
.footer-links{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;}
.footer-cookie-link{appearance:none;border:0;background:transparent;color:inherit;font:inherit;padding:0;cursor:pointer;}
.footer-cookie-link:hover,.footer-cookie-link:focus-visible{color:var(--text);}
.legal-cookie-button{margin-top:14px;}

/* ===== COOKIE CONSENT ===== */
.cookie-banner,.cookie-modal{color:var(--text);background:linear-gradient(160deg,rgba(13,15,20,.94),rgba(8,9,12,.92));border:1px solid rgba(31,143,255,.24);box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.04),0 0 42px rgba(31,143,255,.14);backdrop-filter:blur(18px);}
.cookie-banner{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:10000;width:min(100% - 32px,980px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;padding:22px;border-radius:18px;transform:translateX(-50%);}
.cookie-banner-copy h2,.cookie-modal h2{font-family:var(--font-display);font-size:20px;line-height:1.2;letter-spacing:-.02em;margin-bottom:8px;}
.cookie-banner-copy p,.cookie-modal p{color:var(--text-muted);font-size:14px;line-height:1.55;}
.cookie-banner-copy a{display:inline-flex;margin-top:10px;color:var(--electric-bright);font-size:13.5px;font-weight:600;}
.cookie-banner-copy a:hover{color:var(--text);}
.cookie-kicker{margin-bottom:7px;color:var(--electric-bright)!important;font-size:11px!important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.cookie-banner-actions,.cookie-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.cookie-banner .btn,.cookie-modal .btn{min-height:44px;}
.cookie-modal-backdrop{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:22px;background:rgba(3,4,8,.68);backdrop-filter:blur(10px);}
.cookie-modal{position:relative;width:min(100%,620px);max-height:min(760px,calc(100vh - 44px));overflow:auto;padding:28px;border-radius:20px;}
.cookie-close{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-strong);background:rgba(255,255,255,.04);color:var(--text);font-size:26px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s;}
.cookie-close:hover{background:rgba(255,255,255,.08);border-color:rgba(31,143,255,.34);}
.cookie-category-list{display:flex;flex-direction:column;gap:12px;margin:22px 0;}
.cookie-category{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);cursor:pointer;}
.cookie-category.is-locked{cursor:default;opacity:.82;}
.cookie-category strong{display:block;font-family:var(--font-display);font-size:15px;margin-bottom:4px;}
.cookie-category small{display:block;color:var(--text-muted);font-size:13px;line-height:1.45;}
.cookie-category input{width:22px;height:22px;accent-color:var(--electric);}
.cookie-category input:disabled{cursor:not-allowed;}

@media(max-width:760px){
  #cursor-glow{display:none;}
  .vplayer-glow{left:0;right:0;width:auto;transform:none;}
  .cta-band .mesh{animation:none;transform:none!important;}
  .cookie-banner{left:16px;right:16px;width:auto;transform:none;grid-template-columns:1fr;align-items:start;bottom:calc(12px + env(safe-area-inset-bottom));padding:16px;gap:14px;}
  .cookie-banner-actions,.cookie-actions{width:100%;justify-content:stretch;}
  /* Les trois choix tenaient sur trois lignes pleine largeur : le bandeau
     avalait 45 % de l'écran d'accueil et masquait le titre (02/08). Ils sont
     courts — ils tiennent sur UNE ligne, et gardent leurs 44 px de hauteur de
     cible tactile. Le texte, lui, ne change pas d'un mot. */
  .cookie-banner .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;padding-left:8px;padding-right:8px;font-size:14px;}
  .cookie-modal .btn{flex:1 1 100%;justify-content:center;white-space:normal;}
  .cookie-banner-copy h2{font-size:18px;margin-bottom:6px;}
  .cookie-banner-copy p{font-size:13px;line-height:1.45;}
  .cookie-banner-copy a{margin-top:8px;}
  .cookie-modal{padding:24px 18px;}
}

/* ===== SITES WEB (showcase style Resend « Everything in your control ») ===== */
.sites-showcase{display:block;}
.sites-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px;}
@media(max-width:720px){.sites-tabs{grid-template-columns:1fr;}}
.site-tab{position:relative;display:block;width:100%;text-align:left;background:transparent;border:1px solid var(--line);border-radius:16px;padding:18px 20px;cursor:pointer;color:inherit;font-family:var(--font-body);transition:border-color .3s,background .3s;overflow:hidden;}
.site-tab:hover{border-color:var(--line-strong);background:rgba(255,255,255,0.025);}
.site-tab.active{border-color:rgba(31,143,255,0.4);background:rgba(31,143,255,0.05);}
.site-tab .t-head{display:flex;align-items:center;gap:12px;margin-bottom:7px;}
.site-tab .t-ic{width:34px;height:34px;border-radius:9px;background:rgba(31,143,255,0.1);border:1px solid rgba(31,143,255,0.2);display:grid;place-items:center;color:var(--electric-bright);flex-shrink:0;transition:transform .3s;}
.site-tab.active .t-ic{transform:scale(1.06);}
.site-tab .t-ic svg{width:17px;height:17px;}
.site-tab h3{font-family:var(--font-display);font-weight:600;font-size:16.5px;}
.site-tab p{font-size:13.5px;color:var(--text-muted);line-height:1.5;margin:0;}
.site-tab .prog{position:absolute;left:0;bottom:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--electric-bright),var(--electric-deep));}
.site-tab.active .prog{animation:progFill 5.5s linear forwards;}
@keyframes progFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.sites-showcase.paused .site-tab.active .prog{animation-play-state:paused;}
.sites-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;justify-content:center;}
.sites-chips span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-faint);border:1px solid var(--line);border-radius:100px;padding:5px 12px;}
.sites-chips .c{color:var(--electric-bright);}
/* fenêtre navigateur */
.browser{border-radius:14px;border:1px solid var(--line);overflow:hidden;background:#0d0f14;box-shadow:0 30px 70px rgba(0,0,0,0.5);}
.browser-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 13px;background:rgba(255,255,255,0.04);border-bottom:1px solid var(--line);}
.browser-bar .d{width:10px;height:10px;border-radius:50%;}
.browser-url{flex:1;margin-left:9px;height:23px;border-radius:7px;background:rgba(255,255,255,0.05);display:flex;align-items:center;padding:0 11px;font-size:11.5px;color:var(--text-faint);gap:7px;}
.browser-url svg{width:11px;height:11px;color:#46d39a;flex-shrink:0;}
.browser-stage{position:relative;width:100%;overflow:hidden;background:#fff;}
.scaler{position:absolute;top:0;left:0;width:1080px;height:660px;transform-origin:top left;}
.site-screen{position:absolute;inset:0;width:1080px;height:660px;opacity:0;transition:opacity .55s ease;pointer-events:none;display:flex;flex-direction:column;overflow:hidden;}
.site-screen.active{opacity:1;pointer-events:auto;}
/* --- maquette GARAGE (industriel) --- */
.scr-garage{background:#f3f4f6;font-family:'Inter',sans-serif;color:#1a1d22;}
.scr-garage .g-nav{flex:none;display:flex;align-items:center;justify-content:space-between;padding:22px 52px;background:#14171c;color:#fff;}
.scr-garage .g-logo{font-weight:800;font-size:26px;letter-spacing:.02em;}
.scr-garage .g-logo b{color:#ff5a2c;}
.scr-garage .g-links{display:flex;gap:30px;font-size:16px;color:#aeb4bd;}
.scr-garage .g-btn{background:#ff5a2c;color:#fff;font-weight:700;font-size:16px;padding:13px 24px;border-radius:9px;}
.scr-garage .g-hero{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;justify-content:center;padding:40px 52px;background:linear-gradient(120deg,#1a1d22,#23272e 55%,#2d333c);color:#fff;overflow:hidden;}
.scr-garage .g-hero::after{content:"";position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:560px;height:440px;background:radial-gradient(circle at 50% 50%,rgba(255,90,44,0.4),transparent 60%);filter:blur(10px);}
.scr-garage .g-tag{display:inline-block;font-size:16px;color:#ff8a63;margin-bottom:16px;font-weight:600;position:relative;}
.scr-garage .g-hero h2{font-size:58px;line-height:1.03;font-weight:800;letter-spacing:-0.025em;margin-bottom:18px;position:relative;}
.scr-garage .g-hero p{font-size:20px;color:#c4cad3;max-width:540px;margin-bottom:28px;position:relative;}
.scr-garage .g-cta{align-self:flex-start;background:#ff5a2c;color:#fff;font-weight:700;font-size:18px;padding:16px 32px;border-radius:11px;position:relative;}
.scr-garage .g-cards{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:30px 52px;}
.scr-garage .g-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px;box-shadow:0 6px 20px rgba(0,0,0,0.05);}
.scr-garage .g-ci{width:50px;height:50px;border-radius:13px;background:rgba(255,90,44,0.12);margin-bottom:14px;display:grid;place-items:center;color:#ff5a2c;}
.scr-garage .g-ci svg{width:25px;height:25px;}
.scr-garage .g-card b{font-size:21px;}
.scr-garage .g-card span{font-size:16px;color:#6b7280;display:block;margin-top:3px;}
.scr-garage .g-strip{flex:none;display:flex;align-items:center;justify-content:center;gap:44px;padding:20px;background:#fff;border-top:1px solid #e5e7eb;color:#4b5563;font-size:16px;font-weight:600;}
.scr-garage .g-strip .st{color:#f5a623;letter-spacing:2px;}
/* --- maquette RESTAURANT (chaleureux, éditorial) --- */
.scr-resto{background:#fbf6ee;font-family:Georgia,'Times New Roman',serif;color:#2a2118;}
.scr-resto .r-nav{flex:none;display:flex;align-items:center;justify-content:space-between;padding:26px 54px;border-bottom:1px solid #e7ddcd;}
.scr-resto .r-logo{font-size:31px;font-weight:700;letter-spacing:.02em;color:#7c2f1e;}
.scr-resto .r-links{display:flex;gap:32px;font-size:16px;color:#8a7a64;font-family:'Inter',sans-serif;letter-spacing:.05em;}
.scr-resto .r-btn{background:#7c2f1e;color:#fdf4e7;font-family:'Inter',sans-serif;font-weight:600;font-size:16px;padding:13px 26px;border-radius:5px;}
.scr-resto .r-hero{flex:1;min-height:0;display:grid;grid-template-columns:1.05fr 0.95fr;gap:44px;padding:48px 54px;align-items:center;}
.scr-resto .r-hero h2{font-size:60px;line-height:1.03;margin-bottom:20px;}
.scr-resto .r-hero .it{font-style:italic;color:#7c2f1e;}
.scr-resto .r-hero p{font-size:19px;color:#6b5f4e;font-family:'Inter',sans-serif;line-height:1.6;margin-bottom:28px;max-width:430px;}
.scr-resto .r-cta{display:inline-block;background:#2f5135;color:#fdf4e7;font-family:'Inter',sans-serif;font-weight:600;font-size:18px;padding:16px 34px;border-radius:5px;}
.scr-resto .r-photos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:330px;}
.scr-resto .r-ph{border-radius:12px;}
.scr-resto .r-ph:nth-child(1){background:linear-gradient(135deg,#c8794e,#9c4a25);}
.scr-resto .r-ph:nth-child(2){background:linear-gradient(135deg,#7a8c4e,#4d5e2c);}
.scr-resto .r-ph:nth-child(3){background:linear-gradient(135deg,#d8a24e,#a86d22);}
.scr-resto .r-ph:nth-child(4){background:linear-gradient(135deg,#9c5a3c,#5e3322);}
.scr-resto .r-strip{flex:none;display:flex;justify-content:center;gap:54px;padding:20px 54px;background:#7c2f1e;color:#fdf4e7;font-family:'Inter',sans-serif;font-size:16px;}
/* --- maquette IMMOBILIER (premium épuré) --- */
.scr-immo{background:#f6f8fb;font-family:'Inter',sans-serif;color:#16284f;}
.scr-immo .i-nav{flex:none;display:flex;align-items:center;justify-content:space-between;padding:22px 54px;background:#fff;border-bottom:1px solid #e6ebf2;}
.scr-immo .i-logo{font-weight:700;font-size:25px;letter-spacing:.04em;}
.scr-immo .i-logo b{color:#c8a04e;font-weight:800;}
.scr-immo .i-links{display:flex;gap:30px;font-size:16px;color:#5b6b86;}
.scr-immo .i-btn{background:#16284f;color:#fff;font-weight:600;font-size:16px;padding:13px 24px;border-radius:8px;}
.scr-immo .i-main{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:32px;padding:40px 54px;}
.scr-immo .i-hero h2{font-size:50px;line-height:1.06;font-weight:700;letter-spacing:-0.015em;margin-bottom:12px;}
.scr-immo .i-hero h2 .g{color:#c8a04e;}
.scr-immo .i-hero p{font-size:18px;color:#5b6b86;margin-bottom:22px;}
.scr-immo .i-search{display:flex;gap:10px;background:#fff;border:1px solid #e0e6ef;border-radius:13px;padding:11px;max-width:620px;box-shadow:0 8px 24px rgba(22,40,79,0.07);align-items:center;}
.scr-immo .i-search .f{flex:1;font-size:17px;color:#8493ab;padding:12px 16px;}
.scr-immo .i-search .b{background:#16284f;color:#fff;font-size:16px;font-weight:600;padding:13px 26px;border-radius:9px;white-space:nowrap;}
.scr-immo .i-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.scr-immo .i-card{background:#fff;border:1px solid #e6ebf2;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(22,40,79,0.06);}
.scr-immo .i-img{height:130px;position:relative;}
.scr-immo .i-card:nth-child(1) .i-img{background:linear-gradient(135deg,#7d93b8,#3f5680);}
.scr-immo .i-card:nth-child(2) .i-img{background:linear-gradient(135deg,#b8a37d,#806a3f);}
.scr-immo .i-card:nth-child(3) .i-img{background:linear-gradient(135deg,#8fb89e,#3f8063);}
.scr-immo .i-meta{padding:16px 18px;}
.scr-immo .i-price{font-weight:800;font-size:24px;}
.scr-immo .i-desc{font-size:15px;color:#5b6b86;margin-top:4px;}
.scr-immo .i-loc{display:inline-block;font-size:13px;color:#c8a04e;font-weight:700;margin-top:9px;letter-spacing:.04em;}

/* ===== PORTFOLIO FAYED-STYLE ===== */
.portfolio-projects{display:flex;flex-direction:column;}
.portfolio-project{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start;padding:80px 0;border-top:1px solid var(--line);}
.portfolio-project:last-child{padding-bottom:0;}
@media(max-width:820px){.portfolio-project{grid-template-columns:1fr;gap:28px;}}
.proj-info{position:sticky;top:110px;}
/* mobile : pas de sticky (1 colonne) sinon l'aperçu chevauche le texte — placé APRÈS la règle sticky pour gagner la cascade */
@media(max-width:820px){.proj-info{position:static;top:auto;}.proj-desc{max-width:none;}}
.proj-num{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--text-faint);margin-bottom:8px;text-transform:uppercase;}
.proj-cat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--electric-bright);margin-bottom:20px;}
.proj-name{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px;}
.proj-desc{font-size:14px;color:var(--text-muted);line-height:1.65;margin-bottom:22px;max-width:26ch;}
.proj-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--electric-bright);letter-spacing:.04em;transition:gap .2s;text-decoration:none;cursor:pointer;}
.proj-link:hover{gap:10px;}
.proj-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.proj-chips span{font-size:11.5px;color:var(--text-faint);border:1px solid var(--line);border-radius:100px;padding:4px 11px;}
.blive{border-radius:12px;border:1px solid var(--line);overflow:hidden;box-shadow:0 32px 90px rgba(0,0,0,.65);}
.blive-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 13px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--line);}
.blive-bar .d{width:10px;height:10px;border-radius:50%;}
.blive-url{flex:1;margin-left:9px;height:23px;border-radius:7px;background:rgba(255,255,255,.05);display:flex;align-items:center;padding:0 11px;font-size:11px;color:var(--text-faint);gap:7px;}
.blive-url svg{width:11px;height:11px;color:#46d39a;flex-shrink:0;}
.blive-stage{width:100%;height:800px;position:relative;overflow:hidden;clip-path:inset(0);background:#0d0f14;}
/* iframes live : rendu à 1440px desktop puis scalé pour montrer le vrai design */
.blive-stage iframe{position:absolute;top:0;left:0;width:1440px;height:1000px;border:none;display:block;transform-origin:top left;}
/* maquettes inline scalées à 1080px */
.blive-stage .bscaler{position:absolute;top:0;left:0;width:1080px;height:800px;transform-origin:top left;}
.blive-stage .bscreen{position:absolute;inset:0;width:1080px;height:800px;display:flex;flex-direction:column;overflow:hidden;}
/* TÉLÉPHONE — l'aperçu en image remplace l'iframe (posé par voltyr-site.js :
   4 pages web vivantes coûtaient la moitié des images par seconde, et le doigt
   posé dessus faisait défiler la vignette au lieu de la page). */
.blive-apercu{position:relative;display:block;width:100%;height:auto;}
/* TÉLÉPHONE — la démo vocale ne se télécharge qu'à la demande. C'est un OUTIL,
   pas une vitrine : on ne la fige pas en image, on la lance sur un geste. */
.vplayer-invite{
  display:flex;align-items:center;gap:14px;width:100%;min-height:66px;
  padding:16px 18px;cursor:pointer;text-align:left;font:inherit;color:var(--text);
  border:1px solid rgba(31,143,255,.30);border-radius:12px;
  background:linear-gradient(160deg,rgba(31,143,255,.14),rgba(13,15,20,.92));
}
.vplayer-invite strong{display:block;font-size:15px;font-weight:700;}
.vplayer-invite em{display:block;margin-top:2px;font-style:normal;font-size:13px;color:var(--text-muted);}
.vplayer-invite-play{
  flex:0 0 38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--electric);color:#fff;font-size:12px;
}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}.reveal{opacity:1;transform:none;}}

/* ===== FOCUS-VISIBLE (accessibilité — repris de l'ai-tech v4) ===== */
:focus-visible{outline:2px solid var(--electric);outline-offset:2px;border-radius:4px;}

/* =========================================================================
   MASCOTTAGE — wrapper décoratif agnostique (composants/effets/mascottage.md)
   Images .webp 3D · transform/opacity only · pointer-events:none · aria-hidden · z-index:0.
   ========================================================================= */
.mascot{
  --mascot-size:120px;--mascot-glow:var(--glow);
  --mascot-float-dur:8s;--mascot-float-delay:0s;
  --mascot-parallax-x:0px;--mascot-parallax-y:0px;
  position:absolute;width:var(--mascot-size);height:var(--mascot-size);
  z-index:0;pointer-events:none;
  transform:translate3d(var(--mascot-parallax-x),var(--mascot-parallax-y),0);will-change:transform;
}
.mascot-figure::before{content:"";position:absolute;inset:-40%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,var(--mascot-glow) 0%,color-mix(in srgb,var(--mascot-glow) 35%,transparent) 35%,transparent 70%);
  filter:blur(14px);opacity:.9;}
.mascot-figure::after{content:"";position:absolute;left:50%;bottom:-14%;width:62%;height:14%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0.55),transparent 72%);filter:blur(6px);
  animation:mascot-shadow var(--mascot-float-dur) ease-in-out var(--mascot-float-delay) infinite;}
.mascot-figure{position:relative;width:100%;height:100%;color:var(--electric-bright);
  filter:drop-shadow(0 0 16px var(--mascot-glow));
  animation:mascot-float var(--mascot-float-dur) ease-in-out var(--mascot-float-delay) infinite;will-change:transform;}
.mascot-figure>svg,.mascot-figure>img{display:block;width:100%;height:100%;object-fit:contain;}
.mascot-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--electric-bright);
  box-shadow:0 0 6px var(--mascot-glow);opacity:0;
  animation:mascot-spark var(--spark-dur,3s) ease-in-out var(--spark-delay,0s) infinite;}
@keyframes mascot-float{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-12px) rotate(2deg);}}
@keyframes mascot-shadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.55;}50%{transform:translateX(-50%) scale(.82);opacity:.32;}}
@keyframes mascot-spark{0%,100%{opacity:0;transform:scale(.6);}50%{opacity:.85;transform:scale(1);}}
@media(prefers-reduced-motion:reduce){
  .mascot{transform:none!important;}
  .mascot-figure,.mascot-figure::after,.mascot-spark{animation:none!important;}
  .mascot-spark{opacity:0;}
}
/* ===== MOBILE (≤768px) — desktop intact, on ne touche qu'ici ===== */
@media(max-width:768px){
  /* mascottes : visibles, plus petites, ancrées dans le padding haut des sections (espace vide, derrière le contenu) */
  .mascot{--mascot-size:80px !important;}
  .mascot,.mascot-figure{overflow:hidden;}
  .mascot[data-mobile="hide"]{display:block;}
  header.hero .mascot{display:none !important;} /* éclair flottant remplacé par les éclairs du bandeau-titre */
  #services .mascot{top:78px !important;right:12px !important;left:auto !important;}
  #demo .mascot{top:78px !important;left:12px !important;right:auto !important;}
  #pourquoi .mascot{top:78px !important;right:12px !important;left:auto !important;}
  #contact .mascot{top:78px !important;left:12px !important;right:auto !important;}
  /* logo dragon : voir la règle MOBILE dédiée sous .dragon-stage, plus bas.
     Celle qui vivait ici (172px) n'a jamais rien fait — même spécificité que
     la règle générale mais déclarée AVANT elle, donc écrasée (vu le 02/08). */
  /* nav du haut masquée (brand déjà présent dans le bandeau-titre) + espace haut resserré */
  .nav{display:none;}
  .hero{padding-top:88px;}
  /* bande CTA finale : padding réduit + bouton pleine largeur (sinon il déborde) */
  .cta-band{padding:52px 20px;}
  .cta-band .btn{width:100%;justify-content:center;white-space:normal;}
}

/* ===== DRAGON PARTICULES (logo hero animé — repris de voltyr-site-logo-v1) ===== */
.dragon-stage{position:relative;display:flex;align-items:center;justify-content:center;width:clamp(210px,28vw,290px);height:clamp(210px,28vw,290px);margin:0 auto 28px;}
.dragon-stage::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,rgba(31,143,255,0.20),transparent 70%);pointer-events:none;}
#dragon-canvas{display:none;position:absolute;inset:0;width:100%;height:100%;}
.dragon-fallback{width:62%;object-fit:contain;filter:drop-shadow(0 0 46px var(--glow));animation:float 6s ease-in-out infinite;}
/* MOBILE — le dragon prend le cadre (02/08, demande Julien : le téléphone doit
   se rapprocher du PC). Il tenait 210 px sur 390, soit 54 % de la largeur, là
   où le PC lui donne la vedette. Le cadrage 3D suit tout seul : cadrer() se
   règle sur la boîte de .dragon-stage, jamais sur des pixels en dur. */
@media (max-width:820px){
  .dragon-stage{width:min(80vw,320px);height:min(80vw,320px);margin-bottom:18px;}
}

/* === Éclair unique à gauche du « L » de L'IA — DESKTOP === */
.hero h1 .t1{position:relative;background:linear-gradient(180deg,#fff 35%,#9aa0ab);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-bolt{position:absolute;right:100%;top:0.06em;width:clamp(44px,5.5vw,68px);height:auto;margin-right:14px;filter:drop-shadow(0 0 14px var(--glow));animation:float 6s ease-in-out infinite;pointer-events:none;}

/* === Bandeau-titre "⚡ Voltyr LABS ⚡" — MOBILE uniquement === */
.hero-titlemark{display:none;align-items:center;justify-content:center;gap:12px;margin:0 auto 22px;}
.hero-titlemark .tm-bolt{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 12px var(--glow));flex:none;}
.hero-titlemark .tm-mirror{transform:scaleX(-1);}
.hero-titlemark .tm-word{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,7.5vw,42px);letter-spacing:-.01em;color:var(--text);white-space:nowrap;}
.hero-titlemark .tm-word .labs{font-weight:700;letter-spacing:.08em;background:linear-gradient(180deg,var(--electric-bright),var(--electric-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 9px rgba(31,143,255,0.5));}
/* mobile : éclair-titre caché (bandeau prend le relais), bandeau affiché — placé APRÈS la base pour gagner la cascade */
@media(max-width:768px){.hero-bolt{display:none;}.hero-titlemark{display:flex;}}