@font-face{font-family:'Konnect';src:url(assets/fonts/konnect-400.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Konnect';src:url(assets/fonts/konnect-500.woff) format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Konnect';src:url(assets/fonts/konnect-600.woff) format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Konnect';src:url(assets/fonts/konnect-700.woff) format('woff');font-weight:700;font-style:normal;font-display:swap}
/* Mise en page : hero blanc (texte + portrait avec icônes de services en orbite) → chiffres → services dépliables → catalogues → processus en 5 étapes → à propos + arsenal → formation → FAQ → contact.
   Couleurs 60/30/10 : 60 % blanc / gris clair, 30 % noir, 10 % violet #643FA7 (actions et accents). */
:root{
  --bg:#FFFFFF;
  --soft:#F3F2F6;          /* #E6E6E6 adouci, légèrement teinté violet */
  --line:#E6E6E6;
  --ink:#000000;
  --ink-2:#2B2733;
  --muted:#69548E;         /* violet secondaire de la charte */
  --text-2:#5E5A66;
  --violet:#643FA7;
  --violet-2:#7C59C2;
  --violet-soft:#EFE9FA;
  --on-violet:#FFFFFF;
  --card:#FFFFFF;
  --shadow:0 20px 50px -24px rgba(56,30,110,.28);

  --f-title:"Sora", "Segoe UI", system-ui, sans-serif;
  --f-text:"Konnect", "Outfit", "Segoe UI", system-ui, sans-serif;

  --r-lg:24px; --r-md:16px;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C0A11; --soft:#16131E; --line:#2A2533; --ink:#FFFFFF; --ink-2:#E9E5F2; --muted:#B4A3D6; --text-2:#A9A3B5;
    --violet:#8B66D6; --violet-2:#A383E6; --violet-soft:#221A33; --card:#13101B; --shadow:0 20px 50px -24px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0C0A11; --soft:#16131E; --line:#2A2533; --ink:#FFFFFF; --ink-2:#E9E5F2; --muted:#B4A3D6; --text-2:#A9A3B5;
  --violet:#8B66D6; --violet-2:#A383E6; --violet-soft:#221A33; --card:#13101B; --shadow:0 20px 50px -24px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--ink-2);font-family:var(--f-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-title);color:var(--ink);margin:0;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
section{padding-block:clamp(72px,9vw,120px)}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-title);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.tag::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px}
.head{max-width:720px;margin-bottom:48px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head h2{font-size:clamp(2rem,4.2vw,3rem);font-weight:700;margin-top:14px}
.head p{margin-top:16px;color:var(--text-2);max-width:56ch}
.head.center p{margin-left:auto;margin-right:auto}
.hl{color:var(--violet)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:8px}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-title);font-weight:600;font-size:15px;text-decoration:none;border-radius:999px;padding:14px 24px;min-height:50px;border:1.5px solid transparent;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s,color .3s}
.btn:hover{transform:translateY(-2px)}
.btn i{font-size:15px;transition:transform .3s}
.btn:hover i.fa-arrow-right{transform:translateX(4px)}
.btn-primary{background:var(--violet);color:var(--on-violet);box-shadow:0 12px 28px -10px rgba(100,63,167,.65)}
.btn-primary:hover{background:var(--violet-2)}
.btn-outline{border-color:var(--line);color:var(--ink);background:var(--card)}
.btn-outline:hover{border-color:var(--violet);color:var(--violet)}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-sm{min-height:42px;padding:10px 18px;font-size:14px}

/* ---------- NAV ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-title);font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--violet);color:#fff;display:grid;place-items:center;font-size:15px}
.brand small{display:block;font-weight:400;font-size:11px;letter-spacing:.08em;color:var(--text-2);text-transform:uppercase}
.links{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.links a{text-decoration:none;font-size:15px;color:var(--text-2);transition:color .2s}
.links a:hover,.links a.active{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:8px}
.icon-btn{height:42px;min-width:42px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-family:var(--f-title);font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.icon-btn:hover{border-color:var(--violet);color:var(--violet)}
.menu-btn{display:none}
.mobile-menu{display:none}

/* Indicateur en ligne (clignotant) */
.live{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink);background:var(--soft);border:1px solid var(--line);padding:7px 14px 7px 10px;border-radius:999px}
.live .dot{position:relative;width:10px;height:10px;border-radius:50%;background:#22C55E}
.live .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22C55E;animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2.6);opacity:0}}

/* ---------- HERO ---------- */
.hero{padding-block:clamp(40px,6vw,72px) clamp(64px,8vw,96px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:720px;height:720px;right:-200px;top:-180px;border-radius:50%;background:radial-gradient(closest-side,var(--violet-soft),transparent);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative}
.hero-name{font-family:var(--f-title);font-weight:700;font-size:14px;letter-spacing:.32em;color:var(--violet);margin:26px 0 14px}
.hero h1{font-size:clamp(2.3rem,5.2vw,4.1rem);font-weight:800;letter-spacing:-.045em;line-height:1.04}
.hero h1 .hl{position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.14em;background:var(--violet);opacity:.18;border-radius:4px;transform-origin:left;animation:underline 1s 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes underline{from{transform:scaleX(0)}}
.hero-sub{margin-top:22px;font-size:clamp(1rem,1.5vw,1.15rem);color:var(--text-2);max-width:54ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.proof{display:flex;flex-wrap:wrap;gap:28px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.proof div{display:flex;flex-direction:column}
.proof b{font-family:var(--f-title);font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.proof span{font-size:14px;color:var(--text-2)}

.portrait{position:relative;justify-self:center;width:min(100%,430px);aspect-ratio:4/5}
.portrait-frame{position:absolute;inset:0;border-radius:200px 200px 32px 32px;overflow:hidden;background:linear-gradient(165deg,#7B55C4 0%,#643FA7 45%,#3A2366 100%);box-shadow:var(--shadow)}
.portrait-frame::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.28),transparent 45%),repeating-radial-gradient(circle at 50% 120%,rgba(255,255,255,.07) 0 2px,transparent 2px 28px)}
.portrait-mono{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff}
.portrait-mono b{display:block;font-family:var(--f-title);font-size:110px;font-weight:800;letter-spacing:-.06em;line-height:1;opacity:.95}
.portrait-mono span{font-size:13px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.portrait-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.orbit{position:absolute;display:flex;align-items:center;gap:10px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:10px 14px 10px 10px;box-shadow:var(--shadow);font-family:var(--f-title);font-size:13px;font-weight:600;white-space:nowrap;animation:float 6s ease-in-out infinite}
.orbit i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);font-size:14px}
.orbit.o1{left:-14%;top:16%}
.orbit.o2{right:-10%;top:8%;animation-delay:-1.5s}
.orbit.o3{left:-8%;bottom:14%;animation-delay:-3s}
.orbit.o4{right:-12%;bottom:24%;animation-delay:-4.5s}
.orbit.o2 i{background:var(--violet);color:#fff}
@keyframes float{50%{transform:translateY(-12px)}}
.orbit i{animation:wiggle 4s ease-in-out infinite}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}

/* Bandeau défilant */
.ribbon-wrap{overflow:hidden;padding-block:14px}
.ribbon{background:var(--ink);color:var(--bg);overflow:hidden;padding-block:18px;transform:rotate(-1.2deg);margin:0 -20px;position:relative;z-index:2}
.ribbon-track{display:flex;gap:40px;width:max-content;animation:marquee 32s linear infinite}
.ribbon span{font-family:var(--f-title);font-size:20px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:40px;white-space:nowrap}
.ribbon span::after{content:"✦";color:var(--violet-2)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- STATS ---------- */
.stats{padding-block:clamp(56px,7vw,88px)}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.stat{background:var(--soft);border-radius:var(--r-md);padding:26px 22px;min-width:0}
.stat b{display:block;font-family:var(--f-title);font-size:clamp(2.2rem,3.6vw,3rem);font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.stat b em{font-style:normal;color:var(--violet)}
.stat > span{display:block;margin-top:10px;font-size:15px;color:var(--text-2)}
.stat:first-child{background:var(--violet);}
.stat:first-child b,.stat:first-child b em,.stat:first-child > span{color:#fff}

/* ---------- SERVICES ---------- */
#services{background:var(--soft)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;display:flex;flex-direction:column;gap:14px;min-width:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.svc .ico{width:52px;height:52px;border-radius:14px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;font-size:20px;transition:transform .4s,background .3s,color .3s}
.svc:hover .ico{background:var(--violet);color:#fff;transform:rotate(-8deg)}
.svc h3{font-size:21px;font-weight:700}
.svc p{font-size:15.5px;color:var(--text-2)}
.svc .more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;background:none;border:0;padding:0;font-family:var(--f-title);font-weight:600;font-size:14px;color:var(--violet);cursor:pointer;align-self:flex-start}
.svc .more i{transition:transform .3s}
.svc.open .more i{transform:rotate(180deg)}
.subs{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.svc.open .subs{grid-template-rows:1fr}
.subs > div{overflow:hidden}
.subs ul{list-style:none;padding:14px 0 4px;margin:0;display:grid;gap:12px;border-top:1px dashed var(--line)}
.subs li{font-size:14.5px;line-height:1.45;color:var(--text-2);display:grid;grid-template-columns:18px 1fr;gap:8px}
.subs li i{color:var(--violet);font-size:12px;margin-top:5px}
.subs li b{color:var(--ink);font-weight:600}
.subs .btn{margin-top:14px;width:100%}

/* ---------- CATALOGUES ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:999px;padding:9px 16px;font-family:var(--f-title);font-size:13.5px;font-weight:600;cursor:pointer;transition:all .25s}
.chip:hover{border-color:var(--violet);color:var(--violet)}
.chip.on{background:var(--violet);color:#fff;border-color:var(--violet)}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--soft);text-decoration:none;color:inherit;display:flex;flex-direction:column;min-width:0;transition:opacity .35s,transform .35s}
.cat.hide{display:none}
.cover{position:relative;aspect-ratio:4/5;overflow:hidden;color:#fff}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.art{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cat:hover .art,.cat:hover .cover img{transform:scale(1.06)}
.art .word{position:absolute;left:18px;bottom:16px;right:18px;font-family:var(--f-title);font-weight:800;font-size:30px;letter-spacing:-.04em;line-height:.95}
.art .n{position:absolute;top:16px;left:18px;font-family:var(--f-title);font-size:12px;letter-spacing:.14em;opacity:.8}
.a1{background:#643FA7}
.a1::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;border:22px solid rgba(255,255,255,.18);right:-12%;top:8%}
.a2{background:#111}
.a2::before{content:"";position:absolute;width:46%;aspect-ratio:1;background:#643FA7;border-radius:30% 70% 70% 30%/30% 30% 70% 70%;left:27%;top:20%;animation:blob 9s ease-in-out infinite}
@keyframes blob{50%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;rotate:30deg}}
.a3{background:linear-gradient(160deg,#8B66D6,#3A2366)}
.a3::before{content:"";position:absolute;left:18px;right:18px;top:48px;height:46%;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
.a4{background:#69548E}
.a4::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 14px,transparent 14px 28px)}
.a5{background:#E6E6E6;color:#000}
.a5::before{content:"";position:absolute;left:18px;top:48px;width:40%;height:8px;background:#643FA7;border-radius:4px;box-shadow:0 18px 0 #000,0 36px 0 rgba(0,0,0,.3)}
.a6{background:#000}
.a6::before{content:"";position:absolute;width:64%;aspect-ratio:1;left:18%;top:12%;border-radius:50%;background:repeating-radial-gradient(circle,#1d1d1d 0 3px,#0a0a0a 3px 6px);box-shadow:0 0 0 2px #643FA7;animation:spin 12s linear infinite}
.a6::after{content:"";position:absolute;width:18%;aspect-ratio:1;left:41%;top:calc(12% + 23%);border-radius:50%;background:#643FA7}
@keyframes spin{to{rotate:360deg}}
.a7{background:linear-gradient(200deg,#643FA7,#000)}
.a7::before{content:"\f51c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:18px;top:18px;font-size:64px;opacity:.25}
.a8{background:#F3F2F6;color:#643FA7}
.a8::before{content:"";position:absolute;inset:22% 22% 34%;border:2px dashed #643FA7;border-radius:16px;opacity:.5}
.cat-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.cat-body h3{font-size:17px;font-weight:700}
.cat-body p{font-size:14px;color:var(--text-2);line-height:1.5}
.cat-body .go{margin-top:auto;padding-top:8px;font-family:var(--f-title);font-size:13px;font-weight:600;color:var(--violet);display:inline-flex;gap:8px;align-items:center}
.cat:hover .go i{transform:translateX(4px)}
.cat .go i{transition:transform .3s}

/* ---------- PROCESSUS ---------- */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
.process::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:2px;background:linear-gradient(90deg,var(--violet),var(--line));z-index:0}
.p-step{position:relative;z-index:1;text-align:center;padding:0 6px;min-width:0}
.p-step .ico{width:68px;height:68px;margin:0 auto 18px;border-radius:50%;background:var(--card);border:2px solid var(--violet);color:var(--violet);display:grid;place-items:center;font-size:22px;transition:background .3s,color .3s,transform .4s}
.p-step:hover .ico{background:var(--violet);color:#fff;transform:scale(1.08)}
.p-step:last-child .ico{background:var(--violet);color:#fff}
.p-step small{font-family:var(--f-title);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--muted)}
.p-step h3{font-size:19px;font-weight:700;margin:6px 0 8px}
.p-step p{font-size:15px;color:var(--text-2)}

/* ---------- À PROPOS ---------- */
#apropos{background:var(--soft)}
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.about-card{background:var(--ink);color:var(--bg);border-radius:var(--r-lg);padding:32px;position:sticky;top:96px}
.about-card .ph{aspect-ratio:1;border-radius:18px;overflow:hidden;position:relative;background:linear-gradient(165deg,#7B55C4,#3A2366);margin-bottom:22px}
.about-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-card .ph b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-title);font-weight:800;font-size:72px;color:#fff;letter-spacing:-.05em}
.about-card h3{color:var(--bg);font-size:22px}
.about-card p{opacity:.75;font-size:15px;margin-top:4px}
.about-card .socials{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.socials a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(127,127,127,.18);text-decoration:none;font-size:15px;transition:background .25s,transform .25s}
.socials a:hover{background:var(--violet);color:#fff;transform:translateY(-3px)}
.about-text h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:700;margin:14px 0 20px}
.about-text > p{color:var(--text-2);margin-bottom:16px;max-width:62ch}
.about-text > p strong{color:var(--ink)}
.subhead{font-family:var(--f-title);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:34px 0 14px}
.atouts{display:flex;flex-wrap:wrap;gap:8px}
.atouts > span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:14.5px;font-weight:500;color:var(--ink)}
.atouts i{color:var(--violet);font-size:13px}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.tool{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 8px;text-align:center;font-size:12.5px;font-weight:500;color:var(--text-2);transition:transform .3s,border-color .3s}
.tool:hover{transform:translateY(-4px);border-color:var(--violet)}
.tool .lg{width:40px;height:40px;margin:0 auto 8px;border-radius:10px;display:grid;place-items:center;font-family:var(--f-title);font-weight:700;font-size:16px}
.also{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}

/* ---------- FORMATION ---------- */
.train{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;background:var(--violet);color:#fff;border-radius:32px;padding:clamp(32px,5vw,60px);position:relative;overflow:hidden}
.train::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;border:40px solid rgba(255,255,255,.07);right:-140px;bottom:-200px}
.train .tag{color:#fff;opacity:.85}
.train h2{color:#fff;font-size:clamp(1.9rem,3.8vw,2.8rem);margin:14px 0 16px}
.train p{opacity:.9;max-width:48ch}
.train .btn{margin-top:28px;background:#fff;color:#643FA7}
.train ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative}
.train li{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 16px;font-weight:500;transition:background .3s,transform .3s}
.train li:hover{background:rgba(255,255,255,.18);transform:translateX(6px)}
.train li i{width:36px;height:36px;border-radius:10px;background:#fff;color:#643FA7;display:grid;place-items:center;flex:none;font-size:14px}
.train li span{display:block;font-size:13.5px;opacity:.75;font-weight:400}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.faq .head{margin-bottom:0}
.faq .head .btn{margin-top:26px}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;padding:22px 0;cursor:pointer;text-align:left;font-family:var(--f-title);font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.qa button:hover{color:var(--violet)}
.qa .pm{flex:none;width:32px;height:32px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:12px;transition:transform .35s,background .3s,color .3s}
.qa.open .pm{transform:rotate(45deg);background:var(--violet);color:#fff}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans > div{overflow:hidden}
.qa .ans p{padding:0 48px 22px 0;color:var(--text-2)}

/* ---------- CONTACT ---------- */
.contact{background:var(--ink);color:var(--bg);border-radius:32px;padding:clamp(36px,6vw,72px);display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(100,63,167,.55),transparent);left:-160px;top:-220px;pointer-events:none}
.contact > *{position:relative}
.contact h2{color:var(--bg);font-size:clamp(2rem,4.4vw,3.3rem);font-weight:800}
.contact h2 .hl{color:var(--violet-2)}
.contact p{opacity:.75;margin-top:18px;max-width:46ch}
.contact .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.contact .btn-outline{background:transparent;color:var(--bg);border-color:rgba(127,127,127,.4)}
.contact .btn-outline:hover{border-color:var(--violet-2);color:var(--violet-2)}
.c-list{display:grid;gap:10px}
.c-item{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:rgba(127,127,127,.12);text-decoration:none;transition:background .25s}
.c-item:hover{background:rgba(127,127,127,.22)}
.c-item i{width:42px;height:42px;border-radius:12px;background:var(--violet);color:#fff;display:grid;place-items:center;flex:none}
.c-item small{display:block;font-size:12.5px;opacity:.6}
.c-item b{font-weight:500;font-size:15px;word-break:break-all}
.c-list .socials{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}

footer{padding-block:36px 40px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--text-2)}

/* WhatsApp flottant */
.fab{position:fixed;z-index:45;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;font-size:28px;text-decoration:none;box-shadow:0 12px 30px rgba(10,60,30,.35);animation:fabIn .7s 1.6s cubic-bezier(.2,1.4,.4,1) both}
.fab::before{content:"";position:absolute;inset:0;border-radius:50%;animation:ring 2.4s 2.4s ease-out infinite}
@keyframes fabIn{from{opacity:0;scale:.3}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}100%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}
.fab .tip{position:absolute;right:70px;background:var(--ink);color:var(--bg);font-size:13px;font-weight:500;padding:8px 12px;border-radius:10px;white-space:nowrap;opacity:0;translate:8px 0;transition:all .3s;pointer-events:none}
.fab:hover .tip{opacity:1;translate:0 0}

/* ---------- ANIMATIONS D'ENTRÉE ---------- */
.js .in-hero{animation:rise .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--dl,0s)}
@keyframes rise{from{opacity:0;translate:0 28px;filter:blur(6px)}}
.js .portrait{animation:pop 1.1s .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes pop{from{opacity:0;scale:.92;translate:0 30px}}
.js .rv{opacity:0;translate:0 36px;transition:opacity .8s cubic-bezier(.2,.8,.2,1),translate .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--ri,0) * .08s)}
.js .rv.in{opacity:1;translate:0 0}


/* ---------- AVIS CLIENTS : carrousel en verre ---------- */
#avis{position:relative;overflow:hidden;color:#fff;background:linear-gradient(160deg,#2B1856 0%,#1A0F33 55%,#0E0820 100%)}
#avis .wrap{position:relative;z-index:1}
#avis .tag{color:#C9B6FF}
#avis .head p{color:rgba(255,255,255,.75)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;animation:blobmove 16s ease-in-out infinite alternate}
.bl1{width:420px;height:420px;background:#643FA7;left:-120px;top:-80px;opacity:.9}
.bl2{width:360px;height:360px;background:#9C6BFF;right:-80px;top:30%;opacity:.55;animation-delay:-5s}
.bl3{width:300px;height:300px;background:#3B6BFF;left:35%;bottom:-140px;opacity:.35;animation-delay:-9s}
@keyframes blobmove{to{transform:translate(60px,-40px) scale(1.15)}}
.shiny{color:rgba(255,255,255,.62);background:linear-gradient(110deg,rgba(255,255,255,.62) 35%,#fff 48%,#E3D6FF 52%,rgba(255,255,255,.62) 65%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shinytext 3.2s linear infinite}
.shiny .hl{-webkit-text-fill-color:transparent;color:transparent}
@keyframes shinytext{from{background-position:120% 0}to{background-position:-120% 0}}
.tm-track{position:relative;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:8px 2px 12px;outline:none}
.tm-track::-webkit-scrollbar{display:none}
.tm{flex:0 0 calc((100% - 32px) / 3);scroll-snap-align:start;margin:0;border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 40px -24px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s}
.tm:hover{transform:translateY(-4px);background:rgba(255,255,255,.11)}
.stars{color:#FFD54A;font-size:13px;display:flex;gap:3px}
.tm blockquote{margin:0;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.9);flex:1}
.tm figcaption{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15)}
.tm .av{width:44px;height:44px;border-radius:50%;flex:none;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;font-family:var(--f-title);font-weight:700;font-size:14px;border:1px solid rgba(255,255,255,.25)}
.tm figcaption b{display:block;font-family:var(--f-title);font-size:15px;color:#fff;font-weight:600}
.tm figcaption small{display:block;font-size:13px;color:rgba(255,255,255,.7);line-height:1.35}
.tm.feat{background:rgba(255,255,255,.95);border-color:#fff}
.tm.feat blockquote{color:#2B2733}
.tm.feat figcaption{border-color:#E6E6E6}
.tm.feat .av{background:#643FA7;color:#fff;border:0}
.tm.feat figcaption b{color:#000}
.tm.feat figcaption small{color:#69548E}
.tm-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
.tm-btn{width:46px;height:46px;border-radius:50%;cursor:pointer;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .25s,transform .25s}
.tm-btn:hover{background:#643FA7;transform:scale(1.06)}
.tm-dots{display:flex;gap:8px}
.tm-dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:width .35s,background .35s}
.tm-dots button.on{width:26px;background:#C9B6FF}
.tm-cta{text-align:center;margin-top:30px}
@media (max-width:1060px){.tm{flex-basis:calc((100% - 16px) / 2)}}
@media (max-width:640px){.tm{flex-basis:88%}}
.trust{margin-top:18px;font-size:14px;color:var(--text-2)}
.trust b{color:var(--ink);font-weight:600}


/* ======== EFFETS ======== */
/* Mots qui tournent (KINETIK v2) */
.fx-tourne { display: inline-grid; vertical-align: bottom; overflow: hidden; justify-items: start; padding-bottom:.1em; margin-bottom:-.1em; transition: width .5s cubic-bezier(.2,.8,.2,1) }
.fx-tourne > span { white-space: nowrap }
.fx-tourne > span { grid-area: 1 / 1; transform: translateY(100%); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.fx-tourne > span.fx-on { transform: none; opacity: 1; }
.fx-tourne > span.fx-off { transform: translateY(-100%); opacity: 0; }

/* Glassmorphisme : hero */
.hero-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:blobmove 18s ease-in-out infinite alternate}
.hero-blob.b1{width:380px;height:380px;background:#8B66D6;opacity:.35;right:8%;top:6%}
.hero-blob.b2{width:300px;height:300px;background:#C9B6FF;opacity:.45;right:30%;bottom:-60px;animation-delay:-7s}
.orbit{background:color-mix(in srgb,var(--card) 58%,transparent);backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);border:1px solid color-mix(in srgb,#fff 55%,transparent)}
.live{background:color-mix(in srgb,var(--card) 60%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mobile-menu{background:color-mix(in srgb,var(--bg) 80%,transparent)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.c-item{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08)}
.train li{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Lettres qui montent (SplitText) */
[data-fx-split] .sw{display:inline-block;white-space:nowrap}
.js [data-fx-split] .ch{display:inline-block;opacity:0;transform:translateY(70%) rotate(6deg);filter:blur(4px);transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s ease,filter .6s ease;transition-delay:calc(var(--ci) * 26ms)}
.js [data-fx-split].go .ch{opacity:1;transform:none;filter:none}

/* Frise qui se dessine */
.process::before{transform:scaleX(0);transform-origin:left center;transition:transform 2.2s cubic-bezier(.65,0,.35,1)}
.process.in::before{transform:scaleX(1)}
.js .process .p-step.rv{transition-delay:calc(var(--ri,0) * .42s)}
.js .process .p-step .ico{transform:scale(.3);opacity:0;transition:transform .7s cubic-bezier(.3,1.6,.5,1),opacity .4s,background .3s,color .3s;transition-delay:calc(var(--ri,0) * .42s + .2s)}
.js .process .p-step.in .ico{transform:none;opacity:1}
.js .process .p-step.in:hover .ico{transform:scale(1.08);transition-delay:0s}
@media (max-width:1060px){.process::before{transform:scaleY(0);transform-origin:center top}.process.in::before{transform:scaleY(1)}}

/* Bordure lumineuse qui tourne (StarBorder) */
@property --sb{syntax:'<angle>';inherits:false;initial-value:0deg}
.star-border{position:relative;border-radius:35px;padding:3px;isolation:isolate;
  background:conic-gradient(from var(--sb),transparent 0deg 220deg,#8B66D6 270deg,#fff 320deg,#C9B6FF 340deg,transparent 360deg),#643FA7;animation:sb-spin 4.5s linear infinite}
.star-border::after{content:"";position:absolute;inset:-4px;border-radius:38px;z-index:-1;filter:blur(18px);opacity:.7;
  background:conic-gradient(from var(--sb),transparent 0deg 220deg,#8B66D6 270deg,#fff 320deg,#C9B6FF 340deg,transparent 360deg);animation:sb-spin 4.5s linear infinite}
.star-border .train{border-radius:32px}
@keyframes sb-spin{to{--sb:360deg}}

/* Compteur à rouleaux (Counter) */
.stat b{display:flex;align-items:center}
.roller{display:inline-flex;line-height:1}
.roller .dg{display:inline-block;height:1em;overflow:hidden}
.roller .strip{display:flex;flex-direction:column;transition-property:transform;transition-timing-function:cubic-bezier(.16,1,.3,1)}
.roller .strip span{height:1em;line-height:1;text-align:center}


/* Reflet qui traverse le bouton */
.fx-shine{position:relative;overflow:hidden;isolation:isolate}
.fx-shine::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:45%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.65) 50%,transparent 100%);transform:skewX(-22deg);animation:btnshine 3.6s ease-in-out infinite}
.fx-shine:hover::after{animation-duration:1.2s}
@keyframes btnshine{0%,55%{left:-60%}100%{left:135%}}

/* Bouton qui pulse */
.fx-pulse{position:relative;animation:btnbeat 2.2s ease-in-out infinite}
.fx-pulse::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:btnring 2.2s ease-out infinite}
.fx-pulse:hover{animation-play-state:paused}
@keyframes btnbeat{0%,100%{scale:1}12%{scale:1.05}24%{scale:1}}
@keyframes btnring{0%{box-shadow:0 0 0 0 rgba(139,102,214,.65)}70%,100%{box-shadow:0 0 0 16px rgba(139,102,214,0)}}

/* Comparateur avant / après (KINETIK v2) */
.fx-compare { position: relative; display: grid; overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.fx-compare > .fx-c-face { grid-area: 1 / 1; }
.fx-compare > .fx-c-face:nth-child(2) { clip-path: inset(0 0 0 var(--fx-pos, 50%)); }
.fx-c-ligne { position: absolute; top: 0; bottom: 0; left: var(--fx-pos, 50%); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; z-index: 2; }
.fx-c-ligne::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23643FA7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l-6 6 6 6M15 6l6 6-6 6'/></svg>") center / 18px no-repeat; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.fx-c-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.fx-c-range:focus-visible + .fx-c-ligne, .fx-compare:focus-within .fx-c-ligne{box-shadow:0 0 0 3px rgba(201,182,255,.6)}
.fx-c-etiq { position: absolute; top: 12px; z-index: 1; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 600 12px/1.4 var(--f-title); pointer-events: none; backdrop-filter: blur(6px); }
.fx-c-etiq.e2{background:#643FA7}

.compare-wrap{min-width:0}
.contact .c-list{margin-top:24px}
.ba{border-radius:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.12)}
.ba-face{padding:52px 22px 22px;display:flex;flex-direction:column;gap:16px;min-height:100%}
.ba-before{background:#CFCFCF;color:#444;filter:saturate(.4)}
.ba-after{background:linear-gradient(160deg,#7C59C2,#643FA7 45%,#2B1856);color:#fff}
.ba-head{display:flex;align-items:center;gap:12px}
.ba-head b{display:block;font-family:var(--f-title);font-size:16px}
.ba-head small{display:block;font-size:12.5px;opacity:.8}
.ba-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;flex:none}
.ba-before .ba-av{background:#B5B5B5;color:#777;font-size:20px}
.ba-after .ba-av{background:#fff;color:#643FA7;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ba-grid span{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;overflow:hidden;position:relative}
.ba-before .t1{background:#E8E36B;color:#C0392B;font-family:"Comic Sans MS","Chalkboard SE",cursive;font-weight:700;font-size:13px;transform:rotate(-4deg)}
.ba-before .t2{background:linear-gradient(45deg,#9AA0A6,#C4B6A6)}
.ba-before .t3{background:#5DADE2;color:#F4D03F;font-family:"Times New Roman",serif;font-size:13px}
.ba-before .t4{background:#A9A9A9}
.ba-before .t5{background:#E74C3C;color:#2ECC71;font-family:Impact,sans-serif;font-size:18px}
.ba-before .t6{background:#BDB76B}
.ba-after .ba-grid span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.ba-after .p1{background:#fff!important;color:#643FA7}
.ba-after .p1 em,.ba-after .p5 em{font-style:normal;font-family:var(--f-title);font-weight:800;font-size:15px;letter-spacing:-.02em}
.ba-after .p2{background:radial-gradient(circle at 30% 30%,#C9B6FF,#643FA7)!important}
.ba-after .p3{background:#000!important;color:#fff;font-size:16px}
.ba-after .p4::before{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;border:6px solid rgba(255,255,255,.5)}
.ba-after .p5{background:#E6E6E6!important;color:#000}
.ba-after .p6{background:linear-gradient(135deg,#643FA7 50%,#fff 50%)!important}
.ba-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.ba-list li{display:flex;gap:10px;align-items:center}
.ba-list i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;flex:none}
.ba-before .ba-list i{background:#999;color:#eee}
.ba-after .ba-list i{background:#fff;color:#643FA7}
.ba-hint{margin-top:12px;font-size:13px;opacity:.6;text-align:center}


/* ======== VERSION 6 ======== */
.tag::before{display:none}
.tag{gap:0}
/* Icônes Flaticon */
i.fi{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-style:normal}
i.fi::before{line-height:1;display:block}
/* Photos libres, sans cadre */
.portrait::before{content:"";position:absolute;inset:14% 4% 2%;border-radius:50%;background:radial-gradient(closest-side,rgba(139,102,214,.42),rgba(201,182,255,.18) 60%,transparent);filter:blur(6px);animation:blobmove 14s ease-in-out infinite alternate}
.portrait-frame{background:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
.portrait-frame::before{display:none!important}
.portrait-frame img.cutout{height:100%;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 99%);mask-image:linear-gradient(180deg,#000 80%,transparent 99%);filter:drop-shadow(0 24px 40px rgba(60,30,120,.25))}
.about-card{background:none!important;color:var(--ink)!important;padding:0!important;box-shadow:none}
.about-card .ph{background:none!important;overflow:visible!important;aspect-ratio:4/5;border-radius:0!important;position:relative}
.about-card .ph::before{content:"";position:absolute;inset:10% 0 0;border-radius:50%;background:radial-gradient(closest-side,rgba(139,102,214,.35),transparent);filter:blur(8px)}
.about-card .ph img.cutout{height:100%;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 99%);mask-image:linear-gradient(180deg,#000 80%,transparent 99%)}
.about-card h3{color:var(--ink)!important}
.about-card p{color:var(--text-2);opacity:1!important}
.about-card .socials a{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
/* Partenaires en bas des avis */
#avis .partners{padding:64px 0 0;position:relative;z-index:1}
#avis .partners-title{color:rgba(255,255,255,.72)}
#avis .pl-tile{background:rgba(255,255,255,.94);border-color:transparent}
#avis .pl-tile.dark{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#avis .pl-tile.dark img{filter:none;opacity:.85}
/* Vidéos */
.vhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.vnav{display:flex;gap:10px}
.v-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-size:18px;transition:background .25s,color .25s,border-color .25s}
.v-btn:hover{background:var(--violet);color:#fff;border-color:var(--violet)}
.vfilters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.vchip{border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:999px;padding:9px 16px;font-family:var(--f-title);font-size:13.5px;font-weight:600;cursor:pointer;transition:all .25s}
.vchip:hover{border-color:var(--violet);color:var(--violet)}
.vchip.on{background:var(--violet);color:#fff;border-color:var(--violet)}
.vtrack-wrap{padding-left:max(16px,env(safe-area-inset-left,0px),calc((100% - 1180px) / 2 + 16px))}
.vtrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:8px max(16px,env(safe-area-inset-right,0px)) 18px 2px}
.vtrack::-webkit-scrollbar{display:none}
.vcard{flex:0 0 clamp(190px,21vw,240px);scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}
.vcard.hide{display:none}
.vmedia{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#1A1326;cursor:pointer;box-shadow:0 22px 40px -22px rgba(40,20,90,.55);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.vcard:hover .vmedia{transform:translateY(-6px)}
.vmedia img,.vmedia video,.vmedia iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.vmedia video{opacity:0;transition:opacity .4s}
.vcard.hovering .vmedia video{opacity:1}
.vmedia::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 30%,transparent 60%,rgba(0,0,0,.55));pointer-events:none;z-index:1}
.vcard.playing .vmedia::after{display:none}
.vplay{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:20px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:scale .35s,background .35s}
.vcard:hover .vplay{scale:1.12;background:#643FA7;border-color:#643FA7}
.vtag{position:absolute;left:12px;bottom:12px;z-index:2;font-size:12px;font-weight:600;color:#fff;padding:6px 11px;border-radius:999px;background:rgba(20,10,40,.4);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vopen{font-size:13px;color:var(--text-2);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.vopen:hover{color:var(--violet)}
.vart{position:absolute;inset:0;overflow:hidden;color:#fff}
.vart::before{content:"";position:absolute;width:140%;aspect-ratio:1;left:-20%;top:18%;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.09) 0 2px,transparent 2px 22px)}
.vart .vnum{position:absolute;top:16px;left:16px;font-family:var(--f-title);font-size:13px;letter-spacing:.14em;opacity:.8}
.vart .vword{position:absolute;left:14px;right:14px;bottom:52px;font-family:var(--f-title);font-weight:800;font-size:34px;letter-spacing:-.04em;line-height:.9;opacity:.95}
.va-pub{background:linear-gradient(165deg,#8B66D6,#643FA7 50%,#2B1856)}
.va-corp{background:linear-gradient(165deg,#3A3450,#1A1326 60%,#000)}
.va-event{background:linear-gradient(165deg,#643FA7,#1A0F33)}
.va-media{background:linear-gradient(165deg,#69548E,#2B2140 70%)}
.va-autre{background:linear-gradient(165deg,#C9B6FF,#7C59C2 60%,#3A2366)}
.vcta{text-align:center;margin-top:12px}


/* ======== VERSION 7 ======== */
.cat-wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:center;background:linear-gradient(135deg,#643FA7,#2B1856);color:#fff;border-radius:var(--r-lg);padding:clamp(24px,4vw,40px);overflow:hidden;position:relative}
.cat-wide::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;top:-160px;background:radial-gradient(closest-side,rgba(201,182,255,.35),transparent)}
.cw-text{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.cw-kicker{font-family:var(--f-title);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#C9B6FF}
.cat-wide h3{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem)}
.cat-wide p{color:rgba(255,255,255,.82);font-size:15.5px;max-width:46ch}
.cw-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px;font-size:14.5px}
.cw-list li{display:flex;gap:10px;align-items:center}
.cw-list i{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.16);display:inline-grid;place-items:center;font-size:11px}
.cat-wide .go{color:#fff;margin-top:6px;font-family:var(--f-title);font-weight:600;font-size:14px;display:inline-flex;gap:8px;align-items:center}
.cw-shots{position:relative;display:flex;justify-content:center;gap:16px;min-width:0}
.cw-shots img{width:min(46%,230px);aspect-ratio:9/17;object-fit:cover;object-position:top;border-radius:18px;border:4px solid rgba(255,255,255,.9);box-shadow:0 26px 50px -20px rgba(0,0,0,.55);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cw-shots img:first-child{transform:rotate(-4deg) translateY(10px)}
.cw-shots img:last-child{transform:rotate(4deg)}
.cat-wide:hover .cw-shots img:first-child{transform:rotate(-6deg) translateY(4px) scale(1.03)}
.cat-wide:hover .cw-shots img:last-child{transform:rotate(6deg) translateY(-6px) scale(1.03)}
.soon{display:inline-block;vertical-align:middle;margin-left:6px;font-family:var(--f-title);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);background:var(--violet-soft);padding:4px 9px;border-radius:999px}
.soon-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#FFD54A;margin-right:8px;box-shadow:0 0 0 0 rgba(255,213,74,.6);animation:soonpulse 1.8s ease-out infinite}
@keyframes soonpulse{to{box-shadow:0 0 0 10px rgba(255,213,74,0)}}
@media (max-width:860px){.cat-wide{grid-template-columns:1fr}.cw-shots{margin-top:8px}}


/* ======== VERSION 8 ======== */
/* Photos : aucune transparence en bas, la coupe est posée sur une ligne nette */
.portrait-frame img.cutout,.about-card .ph img.cutout{-webkit-mask-image:none!important;mask-image:none!important}
.hero{padding-bottom:0!important}
.hero .wrap{align-items:end}
.hero .wrap > div:first-child{padding-bottom:clamp(56px,7vw,88px)}
.portrait{align-self:end;margin-bottom:0;width:min(100%,500px)!important;aspect-ratio:auto!important;height:clamp(440px,48vw,640px)}
.orbit.o1{top:22%}.orbit.o2{top:12%}.orbit.o3{bottom:22%}.orbit.o4{bottom:34%}
.portrait-frame img.cutout{height:100%;inset:auto 0 0 0;object-position:center bottom}
.ribbon-wrap{margin-top:-28px;position:relative;z-index:3}
.about-card .ph{aspect-ratio:auto;height:460px;display:flex;align-items:flex-end;justify-content:center;border-bottom:3px solid var(--violet)!important}
.about-card .ph::before{inset:auto 6% 0;height:80%;border-radius:50% 50% 0 0}
.about-card .ph img.cutout{position:relative!important;height:100%;width:auto;max-width:100%;object-fit:contain}
.about-card > div:last-child{padding-top:18px}

/* Stats du hero animées */
.pstat{position:relative;padding-bottom:10px}
.proof .roller,.proof .roller span{font-size:inherit!important;color:inherit!important}
.pstat .pbar{position:absolute;left:0;bottom:0;height:3px;border-radius:3px;width:var(--w);background:linear-gradient(90deg,var(--violet),#C9B6FF);transform-origin:left;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.pstat.go .pbar{transform:scaleX(1)}
.pstat b{display:flex;align-items:center}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tn{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font-weight:600;font-size:13.5px;line-height:1.2}
.tn-mtn{background:#FFCB05;color:#000}
.tn-ldk{background:#643FA7;color:#fff}
.tn-naya{background:#E6F4E1;color:#2F8A1E}
.tn-bbq{background:#FFE8DA;color:#C2410C}

/* Statistiques : icônes */
.st-ic{display:block;width:44px;height:44px;margin-bottom:14px}
.st-ic img{width:100%;height:100%;object-fit:contain}
.st-ic img{filter:brightness(0) saturate(100%) invert(27%) sepia(60%) saturate(2200%) hue-rotate(248deg) brightness(.9)}
.stat:first-child .st-ic img{filter:brightness(0) invert(1)}

/* Services : cartes uniformes en verre */
#services{position:relative;overflow:hidden}
#services::before,#services::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.55}
#services::before{width:420px;height:420px;background:#8B66D6;left:-120px;top:20%}
#services::after{width:380px;height:380px;background:#C9B6FF;right:-100px;bottom:5%}
#services .wrap{position:relative;z-index:1}
.svc-grid{align-items:stretch!important}
.svc{position:relative;overflow:hidden;height:100%;min-height:380px;background:color-mix(in srgb,var(--card) 55%,transparent)!important;border:1px solid color-mix(in srgb,#fff 55%,transparent)!important;backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 20px 50px -30px rgba(60,30,120,.35),inset 0 1px 0 rgba(255,255,255,.5)}
.svc .more{margin-top:auto}
.svc .subs{position:absolute;inset:0;display:block!important;padding:22px;background:linear-gradient(160deg,#7C59C2,#3A2366);color:#fff;transform:translateY(102%);transition:transform .55s cubic-bezier(.2,.8,.2,1);overflow:auto;z-index:3}
.svc.open .subs{transform:none}
.svc.open > :not(.subs){visibility:hidden}
.svc .subs ul{gap:9px!important}.svc .subs li{font-size:13.5px!important}
.svc .subs > div{overflow:visible!important}
.svc .subs ul{border-top:0!important;padding-top:34px!important}
.svc .subs li{color:rgba(255,255,255,.88)!important}
.svc .subs li b{color:#fff!important}
.svc .subs li i{color:#C9B6FF!important}
.svc .subs .btn{background:#fff;color:#643FA7}
.subs-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;cursor:pointer}

/* Réalisations : onglets */
.rtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.rtab{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:all .3s;font:inherit}
.rtab b{display:block;font-family:var(--f-title);font-size:16px}
.rtab small{display:block;color:var(--text-2);font-size:13px}
.rt-ic{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);font-size:18px;transition:all .3s}
.rtab:hover{border-color:var(--violet)}
.rtab.on{background:linear-gradient(135deg,#7C59C2,#643FA7);border-color:transparent;color:#fff;box-shadow:0 18px 36px -18px rgba(100,63,167,.8)}
.rtab.on small{color:rgba(255,255,255,.8)}
.rtab.on .rt-ic{background:rgba(255,255,255,.18);color:#fff}
.rpanel[hidden]{display:none}
.rpanel.on{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}

/* Vidéos : cartes superposées 4 x 2 */
.sv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 26px;padding:14px 8px 8px}
.sv{position:relative;min-width:0}
.sv.hide{display:none}
.sv::before,.sv::after{content:"";position:absolute;inset:0;border-radius:22px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sv::before{background:#C9B6FF;transform:rotate(calc(var(--r) * -2)) translate(-6px,6px)}
.sv::after{background:#643FA7;opacity:.85;transform:rotate(var(--r)) translate(4px,4px)}
.sv:hover::before{transform:rotate(calc(var(--r) * -3.5)) translate(-14px,10px)}
.sv:hover::after{transform:rotate(calc(var(--r) * 2)) translate(10px,8px)}
.sv-card{position:relative;z-index:1;display:block;aspect-ratio:9/14;border-radius:22px;overflow:hidden;background:#1A1326;cursor:pointer;box-shadow:0 22px 40px -22px rgba(40,20,90,.6);transition:transform .5s cubic-bezier(.2,.8,.2,1);text-decoration:none}
.sv:hover .sv-card{transform:translateY(-8px) rotate(calc(var(--r) * -.4))}
.sv-card img,.sv-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-card video{opacity:0;transition:opacity .4s}
.sv.hovering .sv-card video{opacity:1}
.sv-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.6));pointer-events:none}
.sv-extra .sv-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;color:#fff}
.sv-extra .sv-card::after{display:none}
.sv-yt{background:linear-gradient(160deg,#1A1326,#000)!important}
.sv-cta{background:linear-gradient(160deg,#8B66D6,#643FA7 55%,#2B1856)!important}
.sv-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
.sv-yt .sv-ico{color:#FF3B3B}
.sv-extra b{font-family:var(--f-title);font-size:18px;line-height:1.2}
.sv-extra small{opacity:.75;font-size:13px}

/* Lecteur vidéo */
.vm{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:16px}
.vm[hidden]{display:none}
.vm-backdrop{position:absolute;inset:0;background:rgba(12,8,22,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.vm-box{position:relative;height:min(86vh,820px);aspect-ratio:9/16;max-width:100%;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);animation:lbIn .45s cubic-bezier(.2,.8,.2,1) both}
.vm-media,.vm-media video,.vm-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vm-x{position:absolute!important;top:12px;right:12px;z-index:2}

/* Avis : plus court, plus vivant */
.tm{padding:22px!important;gap:12px!important;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,background .3s!important;opacity:.55;transform:scale(.95)}
.tm.active{opacity:1;transform:scale(1)}
.tm figcaption{order:-1;border-top:0!important;border-bottom:1px solid rgba(255,255,255,.15);padding:0 0 14px!important}
.tm.feat figcaption{border-bottom-color:#E6E6E6}
.tm .av{width:54px!important;height:54px!important;box-shadow:0 0 0 3px rgba(201,182,255,.45)}
.tm blockquote{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:15px!important}
.tm.expanded blockquote{-webkit-line-clamp:unset;display:block}
.tm-more{align-self:flex-start;background:none;border:0;padding:0;color:#C9B6FF;font-family:var(--f-title);font-weight:600;font-size:13.5px;cursor:pointer}
.tm.feat .tm-more{color:#643FA7}
.tm::before{content:"\201C";position:absolute;right:18px;top:6px;font-family:Georgia,serif;font-size:72px;line-height:1;color:rgba(201,182,255,.25)}
.tm{position:relative}

/* Logos partenaires : deux lignes */
.pl-marquee + .pl-marquee{margin-top:14px}
.pl-track.rev{animation-direction:reverse}

/* Bouton CV */
.btn-cv{position:relative;overflow:hidden;border:1.5px solid var(--violet);background:transparent;color:var(--violet);padding:6px 20px 6px 6px;isolation:isolate}
.btn-cv::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#7C59C2,#643FA7);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.btn-cv:hover{color:#fff}
.btn-cv:hover::before{transform:scaleX(1)}
.cv-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--violet);color:#fff;transition:transform .45s}
.btn-cv:hover .cv-ic{transform:rotate(-12deg) scale(1.08);background:#fff;color:#643FA7}
.cv-lock{font-size:12px;opacity:.7}
.cv-box{position:relative;width:min(460px,100%);max-height:92vh;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:24px;background:var(--card);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.6);animation:lbIn .45s cubic-bezier(.2,.8,.2,1) both}
.cv-box h3{font-size:22px;margin-top:6px}
.cv-box p{font-size:14.5px;color:var(--text-2)}
.cv-box label{font-size:13px;font-weight:600;margin-top:8px}
.cv-box input,.cv-box select{font:inherit;font-size:15px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--soft);color:var(--ink)}
.cv-box input:focus,.cv-box select:focus{outline:2px solid var(--violet);outline-offset:1px}
.cv-box .btn{margin-top:14px}
.cv-badge{align-self:flex-start;font-size:12px;font-weight:600;color:var(--violet);background:var(--violet-soft);padding:5px 10px;border-radius:999px}
.cv-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--ink);cursor:pointer}
.cv-err{color:#C0392B!important}
.cv-ok{color:#2F8A1E!important;font-weight:600}

/* Contact simple */
.contact2{text-align:center;padding:clamp(40px,6vw,72px) clamp(20px,5vw,64px);border-radius:32px;background:linear-gradient(160deg,#7C59C2,#643FA7 45%,#2B1856);color:#fff;position:relative;overflow:hidden}
.contact2::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;left:50%;top:-320px;translate:-50% 0;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent)}
.contact2 > *{position:relative}
.contact2 .tag{color:#E3D6FF;justify-content:center}
.contact2 h2{color:#fff;font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800;margin:14px auto 0;max-width:18ch}
.contact2 h2 .hl{color:#E3D6FF}
.contact2 p{max-width:52ch;margin:16px auto 0;color:rgba(255,255,255,.85)}
.contact2 .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.contact2 .btn-primary{background:#fff;color:#643FA7}
.contact2 .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.contact2 .btn-outline:hover{border-color:#fff;color:#fff}
.c2-info{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:26px;font-size:15px;color:rgba(255,255,255,.9)}
.c2-info span{display:inline-flex;align-items:center;gap:8px;word-break:break-all}
.c2-soc{justify-content:center;margin-top:20px;display:flex;gap:8px}
.c2-soc a{background:rgba(255,255,255,.14);color:#fff}

@media (max-width:1060px){.sv-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.rtabs{grid-template-columns:1fr}.hero .wrap > div:first-child{padding-bottom:0}.portrait{margin-top:8px;height:440px!important}}
@media (max-width:640px){.sv-grid{gap:28px 18px}.about-card .ph{height:380px}}


/* ======== FOND ANIMÉ : atelier de design ======== */
.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;color:var(--violet);--o:.09}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .bg-fx{--o:.14}}
:root[data-theme="dark"] .bg-fx{--o:.14}
.bg-grid{position:absolute;inset:-60px;opacity:calc(var(--o) * .9);
  background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px),linear-gradient(color-mix(in srgb,currentColor 45%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,currentColor 45%,transparent) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 75% 65% at 50% 40%,#000 20%,transparent 75%);
  animation:gridpan 40s linear infinite}
@keyframes gridpan{to{transform:translate(120px,120px)}}
.bg-curve{position:absolute;inset:0;width:100%;height:100%;opacity:calc(var(--o) * 1.6)}
.bg-curve path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:1600;stroke-dashoffset:1600;animation:curvedraw 14s ease-in-out infinite alternate;vector-effect:non-scaling-stroke}
@keyframes curvedraw{to{stroke-dashoffset:0}}
.bg-el{position:absolute;opacity:var(--o);animation:elfloat 18s ease-in-out infinite alternate;translate:0 calc(var(--sy,0) * -1px)}
@keyframes elfloat{0%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(-26px) rotate(8deg)}}
.e1{width:150px;left:4%;top:14%}
.e2{width:110px;right:6%;top:12%;animation-delay:-3s}
.e3{width:84px;left:46%;top:6%;animation-delay:-6s}
.e4{width:96px;right:12%;top:46%;animation-delay:-9s}
.e5{width:160px;left:8%;bottom:14%;animation-delay:-2s}
.e6{width:46px;left:30%;top:62%;animation-delay:-11s}
.e7{width:130px;right:4%;bottom:10%;animation-delay:-5s}
.e8{width:100px;left:62%;bottom:22%;animation-delay:-13s}
.e9{width:90px;left:2%;top:46%;animation-delay:-7s}
.e10{width:56px;right:30%;top:24%;animation-delay:-15s}
.e11{width:44px;left:22%;top:30%;animation-delay:-4s}
.e12{width:86px;right:22%;bottom:40%;animation-delay:-10s;animation-name:elspin;animation-duration:40s;animation-timing-function:linear}
@keyframes elspin{to{transform:rotate(360deg)}}
@media (max-width:720px){.bg-el{transform:scale(.7)}.e3,.e6,.e8,.e10,.e11{display:none}.bg-fx{--o:.07}}
@media (prefers-reduced-motion:reduce){.bg-grid,.bg-el,.bg-curve path{animation:none!important}.bg-curve path{stroke-dashoffset:0}}
/* La photo À propos garde sa base nette */
.about-card .ph img.cutout{height:100%}

.lg-mono{width:40px;height:40px;margin:0 auto 8px;border-radius:10px;display:grid;place-items:center;font-family:var(--f-title);font-weight:700;font-size:14px;letter-spacing:-.02em;color:#fff;background:linear-gradient(135deg,#8B66D6,#643FA7)}

/* Arsenal compact */
.tools{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))!important;gap:8px!important}
.tool{padding:10px 4px!important;font-size:11px!important;border-radius:12px!important;line-height:1.25}
.tool .lg-img,.lg-mono{width:30px!important;height:30px!important;margin:0 auto 6px!important;border-radius:8px}
.lg-mono{font-size:11px}
.tool.extra{display:none}
.tools.open .tool.extra{display:block;animation:toolIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--ti,0) * 45ms)}
@keyframes toolIn{from{opacity:0;transform:translateY(14px) scale(.85)}}
.tools-more{margin-top:12px;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--violet);font-family:var(--f-title);font-weight:600;font-size:13.5px;cursor:pointer;transition:all .3s}
.tools-more:hover{border-color:var(--violet);background:var(--violet-soft)}
.tools-more i{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.tools-more[aria-expanded="true"] i{transform:rotate(180deg)}
.tools-more[hidden]{display:none}
.tm-count{font-size:12px;color:var(--text-2)}
/* Machine à écrire */
.arsenal-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px}
.tt{color:var(--violet);text-transform:none;letter-spacing:0;font-weight:600}
.tt-cursor{color:var(--violet);animation:ttblink 1s steps(1) infinite;font-weight:400}
@keyframes ttblink{50%{opacity:0}}

/* ======== VERSION 12 ======== */
.hero .wrap{grid-template-columns:1.05fr .95fr;row-gap:0}
.hero-top{grid-column:1/-1;position:relative;z-index:2}
.hero h1{font-size:clamp(2.2rem,4.5vw,4.2rem)!important;line-height:1.06;max-width:none}
.hero h1 .hbr{display:block}
.hero .wrap > div.hero-top{padding-bottom:22px!important}
.hero .wrap > div:nth-child(2){padding-top:6px;padding-bottom:clamp(56px,7vw,88px)}
.portrait{height:clamp(420px,42vw,560px)!important;margin-top:-40px}
@media (max-width:860px){.hero h1 .hbr{display:none}.hero .wrap{row-gap:0!important;gap:0!important}.portrait{margin-top:40px!important}}

/* Statistiques : cartes plus compactes avec effet */
.stats-grid{gap:12px!important}
.stat{padding:18px 16px!important;border-radius:16px;position:relative;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background .3s;cursor:default}
.stat b{font-size:clamp(1.7rem,2.6vw,2.3rem)!important}
.stat > span{font-size:13.5px!important;margin-top:6px!important}
.st-ic{width:32px!important;height:32px!important;margin-bottom:10px!important;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.stat::after{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(139,102,214,.22),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none}
.stat:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(100,63,167,.6)}
.stat:hover::after{opacity:1}
.stat:hover .st-ic{transform:scale(1.18) rotate(-8deg)}
.stat:first-child::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.25),transparent 60%)}

/* Signature finale + soulignement qui se dessine */
.signoff{padding-block:clamp(28px,4vw,44px) 24px;text-align:center}
#contact{padding-bottom:0!important}
.so-text{font-family:var(--f-title);font-weight:800;letter-spacing:-.04em;line-height:1.1;font-size:clamp(2rem,5.6vw,4.6rem);color:var(--ink);margin:0}
.so-u{position:relative;display:inline-block;color:var(--violet);white-space:nowrap}
.so-u svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.38em;overflow:visible}
.so-u path{fill:none;stroke:var(--violet);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1) .35s}
.so-text.in .so-u path{stroke-dashoffset:0}
.so-u:hover path{animation:redraw 1.2s cubic-bezier(.65,0,.35,1)}
@keyframes redraw{0%{stroke-dashoffset:420}100%{stroke-dashoffset:0}}
.so-cta{margin-top:30px}
@media (prefers-reduced-motion:reduce){.so-u path{stroke-dashoffset:0!important;transition:none}}


/* Avis : défilement continu de droite à gauche + couleur au survol */
.tm-track.marq{overflow:hidden!important;display:block!important;scroll-snap-type:none!important;padding:10px 0 16px!important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tm-rail{display:flex;align-items:flex-start;gap:16px;width:max-content;animation:tmscroll var(--dur,70s) linear infinite}
.tm-track.marq:hover .tm-rail,.tm-track.marq:focus-within .tm-rail{animation-play-state:paused}
@keyframes tmscroll{to{transform:translateX(-50%)}}
.tm-rail .tm{flex:0 0 360px!important;width:360px;opacity:1!important;transform:none!important;cursor:default}
.tm-rail .tm:hover{background:linear-gradient(160deg,#8B66D6,#643FA7 60%,#4B2C87)!important;border-color:rgba(255,255,255,.35)!important;transform:translateY(-6px)!important;box-shadow:0 26px 50px -22px rgba(139,102,214,.8)!important}
.tm-rail .tm.feat:hover blockquote,.tm-rail .tm.feat:hover figcaption b{color:#fff!important}
.tm-rail .tm.feat:hover figcaption small{color:rgba(255,255,255,.8)!important}
.tm-rail .tm.feat:hover figcaption{border-bottom-color:rgba(255,255,255,.2)!important}
.tm-rail .tm:hover .tm-more{color:#fff!important}
.tm-rail .tm:hover .av{box-shadow:0 0 0 3px #fff!important}
.tm-carousel .tm-nav{display:none!important}
@media (max-width:640px){.tm-rail .tm{flex-basis:290px!important;width:290px}}
@media (prefers-reduced-motion:reduce){.tm-rail{animation:none}.tm-track.marq{overflow-x:auto!important}}

/* FAQ : menus déroulants */
.qa{border:1px solid var(--line)!important;border-radius:16px;background:var(--card);margin-bottom:10px;padding:0 20px;transition:border-color .3s,box-shadow .3s}
.qa:hover{border-color:color-mix(in srgb,var(--violet) 45%,var(--line))!important}
.qa.open{border-color:var(--violet)!important;box-shadow:0 16px 36px -24px rgba(100,63,167,.6)}
.qa button{padding:18px 0!important;font-size:16.5px!important}
.qa .pm{background:var(--violet-soft)!important;color:var(--violet)!important}
.qa .pm > i{display:none}
.qa .pm::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.qa.open .pm{transform:rotate(180deg)!important;background:var(--violet)!important;color:#fff!important}
.qa .ans p{padding:0 8px 18px 0!important}

/* Sélecteur de langue à drapeaux */
.lang-switch{position:relative;display:inline-flex;align-items:center;gap:2px;height:42px;padding:4px;border-radius:999px;border:1px solid var(--line);background:var(--card);cursor:pointer}
.lang-switch:hover{border-color:var(--violet)}
.lang-switch::before{content:"";position:absolute;top:4px;left:4px;width:32px;height:32px;border-radius:50%;background:var(--violet-soft);box-shadow:0 0 0 2px var(--violet);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lang-switch[data-lang="en"]::before{transform:translateX(34px)}
.lf{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;transition:opacity .3s,filter .3s}
.lf .flag{width:22px;height:22px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.lf svg.flag{width:22px;height:15px;border-radius:3px}
.lang-switch[data-lang="fr"] .lf-en,.lang-switch[data-lang="en"] .lf-fr{opacity:.45;filter:grayscale(.6)}
.lang-switch:hover .lf{opacity:1;filter:none}
@media (max-width:400px){.lang-switch{height:38px;padding:3px}.lf{width:30px;height:30px}.lang-switch::before{width:30px;height:30px;top:3px;left:3px}.lang-switch[data-lang="en"]::before{transform:translateX(32px)}}

/* ======== RESSOURCES RÉELLES ======== */
.brand img{height:54px;width:auto;display:block}
.brand .logo-d{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand .logo-l{display:none}:root:not([data-theme="light"]) .brand .logo-d{display:block}}
:root[data-theme="dark"] .brand .logo-l{display:none}
:root[data-theme="dark"] .brand .logo-d{display:block}
.portrait-frame img.cutout{inset:auto 0 0 0;height:94%;width:100%;object-fit:contain;object-position:center bottom}
.about-card .ph img.cutout{inset:auto 0 0 0;height:96%;object-fit:contain;object-position:center bottom}
.tm .av{overflow:hidden}
.tm .av img{width:100%;height:100%;object-fit:cover}
.tool .lg-img{width:40px;height:40px;margin:0 auto 8px;display:block;object-fit:contain;border-radius:10px}
.cover img{object-position:center top}
.cover::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.35));pointer-events:none}
.count-badge{position:absolute;top:12px;right:12px;z-index:2;font-size:12px;font-weight:600;color:#fff;padding:5px 10px;border-radius:999px;background:rgba(20,10,40,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25)}
.cat{cursor:zoom-in}

/* Logos partenaires */
.partners{padding-block:8px 64px}
.partners-title{text-align:center;font-family:var(--f-title);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.pl-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pl-track{display:flex;gap:14px;width:max-content;animation:marquee 38s linear infinite}
.pl-marquee:hover .pl-track{animation-play-state:paused}
.pl-tile{width:150px;height:86px;flex:none;border-radius:16px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:12px 18px}
.pl-tile.dark{background:#1A1326;border-color:#1A1326}
.pl-tile img{max-width:114px;max-height:60px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .35s,opacity .35s,transform .35s}
.pl-tile:hover img{filter:none;opacity:1;transform:scale(1.06)}

/* Galerie plein écran */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb-backdrop{position:absolute;inset:0;background:rgba(12,8,22,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:fade .3s both}
.lb-panel{position:relative;width:min(980px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;animation:lbIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes fade{from{opacity:0}}
@keyframes lbIn{from{opacity:0;transform:translateY(24px) scale(.97)}}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lb-top b{font-family:var(--f-title);font-size:18px;display:block}
.lb-top small{opacity:.7;font-size:13px}
.lb-x,.lb-nav{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;flex:none;transition:background .25s}
.lb-x:hover,.lb-nav:hover{background:#643FA7}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:0;flex:1}
.lb-stage img{max-width:100%;max-height:min(68vh,760px);object-fit:contain;border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);animation:fade .35s both;min-width:0}
.lb-thumbs{display:flex;gap:8px;justify-content:center;overflow-x:auto}
.lb-thumbs button{width:58px;height:58px;flex:none;border-radius:10px;overflow:hidden;padding:0;border:2px solid transparent;opacity:.55;cursor:pointer;background:none;transition:opacity .25s,border-color .25s}
.lb-thumbs button.on{opacity:1;border-color:#C9B6FF}
.lb-thumbs img{width:100%;height:100%;object-fit:cover}
.lb-cta{align-self:center}
@media (max-width:640px){.lb-nav{position:absolute;top:50%;translate:0 -50%;z-index:2}.lb-nav.prev{left:4px}.lb-nav.next{right:4px}.lb-panel{padding:14px}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1060px){
  .links{display:none}
  .menu-btn{display:inline-flex}
  .mobile-menu{display:block;position:fixed;inset:72px 0 auto 0;top:calc(72px + env(safe-area-inset-top,0px));z-index:49;background:var(--bg);border-bottom:1px solid var(--line);padding:12px var(--gr) 20px var(--gl);translate:0 -110%;transition:translate .4s cubic-bezier(.2,.8,.2,1);visibility:hidden}
  .mobile-menu.open{translate:0 0;visibility:visible}
  .mobile-menu a{display:block;padding:12px 0;text-decoration:none;font-family:var(--f-title);font-weight:600;font-size:18px;border-bottom:1px solid var(--line)}
  .svc-grid{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .process{grid-template-columns:1fr;gap:22px}
  .process::before{left:33px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:linear-gradient(180deg,var(--violet),var(--line))}
  .p-step{text-align:left;display:grid;grid-template-columns:68px 1fr;gap:4px 20px;padding:0}
  .p-step .ico{margin:0;grid-row:span 3}
  .about{grid-template-columns:1fr}
  .about-card{position:static;display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:center}
  .about-card .ph{margin:0}
}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:64px}
  .portrait{width:min(78%,360px)}
  .train,.faq,.contact{grid-template-columns:1fr}
  .faq{gap:24px}
}
@media (max-width:640px){
  .nav .live .txt,.nav .btn-primary .txt{display:none}
  .nav .btn-primary{padding:10px 14px}
  .svc-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr 1fr;gap:12px}
  .art .word{font-size:22px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat:first-child{grid-column:span 2}
  .portrait{width:min(82%,320px)}
  .orbit{font-size:11.5px;padding:7px 10px 7px 7px}
  .orbit i{width:28px;height:28px;font-size:12px}
  .orbit.o1{left:-12%}.orbit.o2{right:-10%}.orbit.o3{left:-10%}.orbit.o4{right:-12%}
  .about-card{grid-template-columns:1fr}
  .hero-ctas .btn{flex:1 1 100%}
  .proof{gap:18px 26px}
  .qa .ans p{padding-right:0}
}
@media (max-width:400px){
  .cat-body p{display:none}
  .brand small{display:none}
  .brand{font-size:13px;white-space:nowrap}
  .brand-mark{width:32px;height:32px}
  .nav-right{gap:6px}
  .icon-btn{min-width:38px;height:38px;padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;translate:none}
  .process::before{transform:none!important}
  .js .process .p-step .ico,.js [data-fx-split] .ch{opacity:1!important;transform:none!important;filter:none!important}
  .shiny{-webkit-text-fill-color:#fff;color:#fff}
  .fx-shine::after,.fx-pulse::before{display:none}
  .pstat .pbar{transform:none!important}.tm{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}