@font-face{font-family:'Sora';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/sora.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Odeus : système visuel du site, repris du jingle et du pitch (fond clair, noir, un seul accent orange, traits fins).
   Thème clair verrouillé, une bande sombre au plus par page. Angles vifs partout (rayon 0, sauf les cadres d'appareil). */
:root{
  --bg:#ECEAE6; --bg-2:#F4F3F0; --bg-3:#E2DFDA; --ink:#121318; --ink-2:#464951; --ink-3:#6F727A; --rule:#D3D0CA;
  --accent:#C9532E; --accent-ink:#A8401F;
  --dark:#0F1013; --on-dark:#ECEAE6; --on-dark-2:#A3A5AC; --rule-dark:#2A2C31;
  --display:'Sora',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --w:1240px; --gut:clamp(20px,4vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.w{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.028em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(40px,5.2vw,74px)}
h2{font-size:clamp(32px,3.7vw,54px)}
h3{font-size:clamp(22px,2vw,28px);line-height:1.15}
p{text-wrap:pretty}
.lead{font-size:clamp(18px,1.5vw,21px);color:var(--ink-2);max-width:38ch}
.body{color:var(--ink-2);max-width:62ch}
.acc{color:var(--accent)}
.kicker{display:block;font:600 12px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:22px}
.dark .kicker{color:var(--on-dark-2)}
section{padding:clamp(88px,11vw,150px) 0}
.tight{padding:clamp(56px,7vw,96px) 0}
.dark{background:var(--dark);color:var(--on-dark)}
.dark .lead,.dark .body{color:var(--on-dark-2)}
.surface{background:var(--bg-2)}

/* boutons : une seule étiquette pour la démo sur tout le site */
.btn{display:inline-flex;align-items:center;gap:12px;font:600 15px/1 var(--body);padding:17px 24px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);transition:background .25s,border-color .25s,transform .15s;white-space:nowrap}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:active{transform:translateY(1px)}
.btn .ar{transition:transform .25s}.btn:hover .ar{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.dark .btn{background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}
.dark .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.dark .btn.ghost{background:transparent;color:var(--on-dark);border-color:#55575E}
.link{display:inline-flex;gap:10px;align-items:center;font-weight:600;font-size:15.5px;border-bottom:1px solid currentColor;padding-bottom:4px}
.link:hover{color:var(--accent)}
.ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:40px}

/* en-tête */
.hd{position:sticky;top:0;z-index:40;background:rgba(236,234,230,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.hd.s{border-color:var(--rule)}
.hd .in{height:72px;display:flex;align-items:center;gap:40px}
.logo{display:block;flex:none}.logo svg{height:19px;width:auto;display:block}
.mn{display:flex;gap:30px;align-items:center;list-style:none;font-size:14.5px;color:var(--ink-2);margin-right:auto}
.mn a:hover,.mn button:hover{color:var(--ink)}
.mn .on{color:var(--ink)}
.dd{position:relative}
.dd>button{display:flex;gap:6px;align-items:center;font-size:14.5px;color:var(--ink-2)}
.dd>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.menu{position:absolute;top:calc(100% + 22px);left:-28px;width:560px;background:var(--bg-2);border:1px solid var(--rule);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:28px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s;box-shadow:0 30px 60px -30px rgba(18,19,24,.35)}
.dd.open .menu{opacity:1;visibility:visible;transform:none}
.menu b{display:block;font:600 11.5px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.menu a{display:block;padding:9px 0;border-top:1px solid var(--rule)}
.menu a span{display:block;font-weight:600;color:var(--ink);font-size:15px}
.menu a small{display:block;color:var(--ink-3);font-size:13px;line-height:1.4;margin-top:2px}
.menu a:hover span{color:var(--accent)}
.hd .btn{padding:12px 18px;font-size:14px}
.burger{display:none;width:44px;height:44px;margin-left:auto;position:relative}
.burger i{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);transition:transform .25s,opacity .25s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:28px}
.nav-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}.nav-open .burger i:nth-child(2){opacity:0}.nav-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mob{display:none}

/* ouverture d'accueil */
.hero{padding:clamp(48px,6vw,88px) 0 clamp(64px,7vw,104px)}
.hero .g{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(40px,6vw,96px);align-items:center}
.hero h1{margin-bottom:28px;font-size:clamp(36px,4.1vw,60px)}
.hero h1 span{display:block}
.hero .visual{position:relative;justify-self:center}
.proofbar{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.proofbar .in{display:grid;grid-template-columns:repeat(4,1fr)}
.proofbar div{padding:30px 28px 30px 0;border-right:1px solid var(--rule)}
.proofbar div+div{padding-left:28px}
.proofbar div:last-child{border-right:0}
.proofbar b{display:block;font:700 clamp(28px,2.6vw,38px)/1 var(--display);letter-spacing:-.03em}
.proofbar span{display:block;margin-top:10px;font-size:14px;color:var(--ink-3);line-height:1.45}

/* appareils (vraies captures) */
.phone{width:min(330px,78vw);aspect-ratio:390/844;border-radius:46px;background:#16171B;padding:11px;box-shadow:0 50px 80px -40px rgba(18,19,24,.55),0 0 0 1px rgba(18,19,24,.08)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:36px}
.browser{background:#fff;border:1px solid var(--rule);box-shadow:0 40px 80px -50px rgba(18,19,24,.45)}
.browser .bar{height:34px;border-bottom:1px solid var(--rule);display:flex;align-items:center;padding:0 14px;font-size:12px;color:var(--ink-3);background:var(--bg-2)}
.browser img{width:100%}
.cap{margin-top:14px;font-size:13px;color:var(--ink-3)}
.dark .cap{color:var(--on-dark-2)}

/* manifeste */
.manifesto{text-align:center}
.manifesto h2{font-size:clamp(34px,4.6vw,66px);max-width:20ch;margin:0 auto}
.manifesto h2 span{display:block;color:var(--ink-3)}
.crowd{display:grid;grid-template-columns:repeat(13,1fr);gap:26px 0;justify-items:center;max-width:820px;margin:72px auto 0}
.crowd svg{width:18px;height:auto;color:var(--ink);opacity:.55;transition:color .8s,opacity .8s}
.crowd svg.on{color:var(--accent);opacity:1}
.manifesto .after{margin:40px auto 0;max-width:46ch;color:var(--ink-2);font-size:18px}

/* méthode à défilement collant */
.method{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:start}
.method .stick{position:sticky;top:120px}
.method .stick h2{margin-bottom:24px}
.mstep{padding-bottom:clamp(64px,8vw,120px)}
.mstep:last-child{padding-bottom:0}
.mstep .n{font:600 13px var(--display);color:var(--accent);letter-spacing:.06em}
.mstep h3{margin:12px 0 14px;font-size:clamp(26px,2.4vw,34px)}
.mstep p{color:var(--ink-2);max-width:52ch;margin-bottom:28px}

/* bande ODE */
.odeband .g{display:grid;grid-template-columns:1fr auto;gap:clamp(48px,7vw,120px);align-items:center}
.principles{margin-top:44px;display:grid;gap:0;border-top:1px solid var(--rule-dark)}
.principles div{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--rule-dark)}
.principles b{font:600 17px var(--display);letter-spacing:-.01em}
.principles span{color:var(--on-dark-2);font-size:15.5px}

/* obligations */
.duo{display:grid;grid-template-columns:1.2fr .8fr;gap:0;border:1px solid var(--ink)}
.duo a{display:flex;flex-direction:column;padding:clamp(28px,3.4vw,48px);min-height:380px;transition:background .3s}
.duo a+a{border-left:1px solid var(--ink)}
.duo a:hover{background:var(--bg-2)}
.duo .tag{font:600 12px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.duo h3{font-size:clamp(28px,2.8vw,40px);margin:14px 0 auto}
.duo .big{font:700 clamp(64px,7vw,108px)/.9 var(--display);letter-spacing:-.05em;margin-top:40px}
.duo .big small{font-size:.38em;color:var(--ink-3);letter-spacing:-.02em}
.duo p{color:var(--ink-2);margin-top:14px;max-width:40ch}
.duo .go{margin-top:28px;font-weight:600;font-size:15px;display:flex;gap:10px}
.soon{margin-top:22px;font-size:14.5px;color:var(--ink-3)}

/* rôles */
.roles{border-top:1px solid var(--ink)}
.roles a{display:grid;grid-template-columns:minmax(200px,.6fr) 1fr 40px;gap:32px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--rule);transition:padding .3s}
.roles a:hover{padding-left:14px}
.roles a b{font:700 clamp(24px,2.4vw,34px)/1.1 var(--display);letter-spacing:-.025em}
.roles a span{color:var(--ink-2)}
.roles a i{font-style:normal;font-size:22px;transition:transform .3s,color .3s;justify-self:end}
.roles a:hover i{transform:translateX(6px);color:var(--accent)}

/* fondateur (accueil) */
.founder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:end}
.founder blockquote{font:700 clamp(30px,3.4vw,48px)/1.12 var(--display);letter-spacing:-.025em}
.founder .who{margin-top:28px;color:var(--ink-2);font-size:16px}
.founder .who b{color:var(--ink)}
.nums{display:flex;gap:56px;flex-wrap:wrap}
.nums b{display:block;font:700 clamp(46px,5vw,72px)/1 var(--display);letter-spacing:-.04em}
.nums span{font-size:14px;color:var(--ink-3)}

/* appel final */
.final{text-align:left}
.final .g{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,6vw,100px);align-items:end}
.final h2{font-size:clamp(40px,5.4vw,80px)}
.final ul{list-style:none;border-top:1px solid var(--rule-dark)}
.final li{padding:16px 0;border-bottom:1px solid var(--rule-dark);display:grid;grid-template-columns:120px 1fr;gap:16px;font-size:15.5px;color:var(--on-dark-2)}
.final li b{color:var(--on-dark);font-weight:600}

/* pages intérieures */
.phero{padding:clamp(56px,7vw,110px) 0 clamp(56px,6vw,90px)}
.phero .g{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,96px);align-items:center}
.phero.solo .g{grid-template-columns:1fr}
.phero h1{font-size:clamp(34px,3.7vw,54px);margin-bottom:26px;max-width:20ch}
.crumbs{font-size:13px;color:var(--ink-3);margin-bottom:28px}
.crumbs a:hover{color:var(--ink)}
.feat{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,100px);align-items:center}
.feat.rev{grid-template-columns:1.1fr .9fr}
.feat.rev .media{order:-1}
.feat h2{margin-bottom:22px;font-size:clamp(30px,3.2vw,46px)}
.feat .body{margin-bottom:8px}
.ticks{list-style:none;margin-top:28px;border-top:1px solid var(--rule)}
.ticks li{padding:14px 0 14px 30px;border-bottom:1px solid var(--rule);position:relative;font-size:16px}
.ticks li::before{content:"";position:absolute;left:0;top:26px;width:16px;height:1.5px;background:var(--accent)}
.dark .ticks{border-color:var(--rule-dark)}.dark .ticks li{border-color:var(--rule-dark)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.cols3>div{padding:28px 28px 8px 0}
.cols3>div+div{padding-left:28px;border-left:1px solid var(--rule)}
.cols3 .n{font:600 13px var(--display);color:var(--accent)}
.cols3 h3{margin:14px 0 12px;font-size:22px}
.cols3 p{color:var(--ink-2);font-size:16px}
.big-stat{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:end;border-top:1px solid var(--ink);padding-top:36px}
.big-stat b{font:700 clamp(90px,12vw,190px)/.82 var(--display);letter-spacing:-.06em}
.big-stat b small{font-size:.32em;color:var(--ink-3);letter-spacing:-.02em}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.grid4 div{padding:26px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.grid4 b{display:block;font:700 44px/1 var(--display);letter-spacing:-.04em}
.grid4 span{display:block;margin-top:10px;font-size:14.5px;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chips span{border:1px solid var(--rule);padding:9px 14px;font-size:14px;background:var(--bg-2)}
.note{font-size:13.5px;color:var(--ink-3);margin-top:22px;max-width:70ch}
.dark .note{color:var(--on-dark-2)}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink)}
.timeline div{padding:22px 20px 0 0}
.timeline b{display:block;font:700 15px var(--display);color:var(--accent);margin-bottom:10px}
.timeline h4{font-size:19px;margin-bottom:8px}
.timeline p{font-size:14.5px;color:var(--ink-2)}
.quote{font:700 clamp(28px,3vw,42px)/1.15 var(--display);letter-spacing:-.025em;max-width:24ch}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px)}

/* questions */
.faq{max-width:900px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:26px 0;font:600 clamp(18px,1.6vw,21px)/1.3 var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 26px/1 var(--body);color:var(--ink-3);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 26px;color:var(--ink-2);max-width:68ch}

/* ressources */
.res{display:grid;grid-template-columns:1.3fr .7fr;gap:0;border:1px solid var(--ink)}
.res .main{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.res .main img{width:100%;height:100%;object-fit:cover}
.res .main div{padding:36px;display:flex;flex-direction:column}
.res .side{border-left:1px solid var(--ink)}
.res .side a,.res .side div{display:block;padding:24px 28px;border-bottom:1px solid var(--rule)}
.res .side div:last-child{border-bottom:0}
.res small{font:600 11.5px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.res h3{font-size:21px;margin-top:8px}
.res .soon{color:var(--ink-3);font-size:14px;margin-top:6px}
.article{max-width:740px}
.article p{margin-bottom:22px;color:var(--ink-2);font-size:18px}
.article h2{font-size:30px;margin:48px 0 18px}
.article ol{margin:0 0 22px 22px;color:var(--ink-2);font-size:18px}
.article li{margin-bottom:8px}
.video{position:relative;background:#000;max-width:520px}
.video video{width:100%}

/* formulaire */
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.form label{display:flex;flex-direction:column;gap:8px;font:600 13px var(--body);color:var(--ink-2)}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font:400 16.5px var(--body);color:var(--ink);background:var(--bg-2);border:1px solid var(--rule);padding:14px 14px;border-radius:0}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ink)}
.form textarea{min-height:110px;resize:vertical}
.form .err{font-size:13px;color:var(--accent-ink);min-height:0}
.form small{grid-column:1/-1;font-size:13px;color:var(--ink-3);line-height:1.55}
.form small a{text-decoration:underline}
.form .ok{grid-column:1/-1;padding:16px;border:1px solid var(--ink);display:none}
.agenda{list-style:none;border-top:1px solid var(--ink);margin-top:36px}
.agenda li{display:grid;grid-template-columns:90px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--rule)}
.agenda b{font:700 15px var(--display);color:var(--accent)}
.agenda span{color:var(--ink-2);font-size:15.5px}
.agenda span strong{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}

/* pied de page */
.ft{background:var(--dark);color:var(--on-dark-2);padding:88px 0 40px;font-size:14.5px}
.ft .top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px;padding-bottom:64px;border-bottom:1px solid var(--rule-dark)}
.ft .logo svg{height:20px;color:var(--on-dark)}
.ft p.t{margin-top:22px;max-width:30ch;line-height:1.55}
.ft b{display:block;font:600 11.5px var(--body);letter-spacing:.18em;text-transform:uppercase;color:#6E7077;margin-bottom:16px}
.ft ul{list-style:none;display:grid;gap:10px}
.ft a:hover{color:var(--on-dark)}
.ft .bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:28px;font-size:13px}
.ft .tagline{font:600 11px var(--body);letter-spacing:.32em;text-transform:uppercase}
.ft .tagline i{font-style:normal;color:var(--accent)}

/* vidéo en fenêtre */
dialog.vd{border:0;padding:0;background:transparent;max-width:min(540px,92vw);overflow:visible}
dialog.vd::backdrop{background:rgba(15,16,19,.88)}
dialog.vd video{width:100%}
dialog.vd button{position:absolute;top:-42px;right:0;color:#fff;font-size:14px}

/* apparitions : motivées par la lecture, coupées si l'utilisateur réduit les animations */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}.crowd svg{transition:none}}

@media (max-width:1020px){
  .mn,.hd .btn.d{display:none}
  .burger{display:block}
  .mob{display:block;position:fixed;inset:72px 0 0 0;background:var(--bg);z-index:39;padding:20px var(--gut) 40px;overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .nav-open .mob{opacity:1;visibility:visible;transform:none}
  .mob a{display:block;padding:16px 0;border-bottom:1px solid var(--rule);font:600 20px var(--display)}
  .mob small{display:block;font:600 11.5px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:28px 0 4px}
  .mob .btn{margin-top:28px;width:100%;justify-content:center}
  .hero .g,.phero .g,.method,.odeband .g,.founder,.final .g,.feat,.feat.rev,.split2,.res,.res .main{grid-template-columns:1fr}
  .feat.rev .media{order:0}
  .method .stick{position:static}
  .proofbar .in,.grid4{grid-template-columns:1fr 1fr}
  .proofbar div{border-right:0;border-bottom:1px solid var(--rule);padding:22px 0!important}
  .duo{grid-template-columns:1fr}.duo a+a{border-left:0;border-top:1px solid var(--ink)}.duo a{min-height:0}
  .roles a{grid-template-columns:1fr 30px}.roles a span{grid-column:1}
  .principles div{grid-template-columns:1fr;gap:6px}
  .cols3{grid-template-columns:1fr}.cols3>div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .timeline{grid-template-columns:1fr}.timeline div{padding:18px 0;border-bottom:1px solid var(--rule)}
  .crowd{grid-template-columns:repeat(7,1fr)}
  .crowd svg:nth-child(n+36){display:none}
  .res .side{border-left:0;border-top:1px solid var(--ink)}
  .big-stat{grid-template-columns:1fr}
  .ft .top{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
}

/* cinq rôles d'ODE */
.five{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink)}
.five>div{padding:28px 24px 8px 0;display:flex;flex-direction:column;gap:12px}
.five>div+div{padding-left:24px;border-left:1px solid var(--rule)}
.five b{font:700 24px var(--display);letter-spacing:-.02em}
.five b::before{content:"";display:block;width:22px;height:2px;background:var(--accent);margin-bottom:16px}
.five p{color:var(--ink-2);font-size:15.5px}
.five span{margin-top:auto;font-size:13px;color:var(--ink-3)}
.mstep .phone{width:min(300px,70vw)}
@media (max-width:1020px){.five{grid-template-columns:1fr}.five>div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}

.odeband h2{font-size:clamp(30px,3.2vw,46px)}

/* ===================== DA v4 : l'odyssée ===================== */
h2{font-weight:600;letter-spacing:-.032em}
/* ouverture */
.hero2{min-height:calc(100dvh - 72px);display:flex;align-items:center;padding:32px 0 56px;overflow:hidden}
.hero2 .g{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(32px,5vw,80px);align-items:center;width:100%}
.hero2 h1{font-size:clamp(40px,5.3vw,80px);line-height:1;letter-spacing:-.04em;margin-bottom:30px}
.hero2 h1 span{display:block}
.hero2 .l1{font-weight:300}
.hero2 .l2{font-weight:700;color:var(--accent)}
.hero2 .lead{max-width:40ch}
.h-txt>*{animation:rise 1s cubic-bezier(.16,1,.3,1) both}
.h-txt>*:nth-child(2){animation-delay:.12s}.h-txt>*:nth-child(3){animation-delay:.22s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.h-vis{position:relative;justify-self:center}
.h-vis .phone{position:relative;z-index:1}
.h-route{position:absolute;left:-60%;top:-8%;width:150%;height:116%;z-index:0}
.h-route path{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s .4s cubic-bezier(.65,0,.35,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
/* bandeau des rôles (unique sur la page) */
.marquee{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);overflow:hidden;padding:22px 0}
.m-in{display:flex;align-items:center;gap:44px;width:max-content;animation:slide 48s linear infinite}
.m-in span{font:300 clamp(36px,5vw,72px)/1 var(--display);letter-spacing:-.04em;white-space:nowrap}
.m-in i{width:56px;height:1px;background:var(--accent);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
/* le mythe */
.myth .g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.m-word{font:700 clamp(96px,17vw,280px)/.8 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--ink);user-select:none}
.myth h2{font-size:clamp(32px,3.6vw,52px);max-width:15ch}
/* l'odyssée horizontale */
.journey{position:relative;background:var(--bg-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.j-stick{position:sticky;top:72px;height:calc(100vh - 72px);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vh,48px)}
.j-top{display:flex;align-items:center;gap:28px;width:100%}
.j-bar{flex:1;height:1px;background:var(--rule)}
.j-bar i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.j-count{font:600 14px var(--display);letter-spacing:.08em;min-width:56px;text-align:right}
.j-track{display:flex;will-change:transform;padding-left:max(var(--gut),calc((100vw - var(--w))/2 + var(--gut)))}
.chant{flex:0 0 min(80vw,1080px);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,4vw,64px);align-items:center;padding-right:clamp(48px,8vw,140px)}
.c-n{display:block;font:300 clamp(80px,9vw,140px)/.8 var(--display);letter-spacing:-.04em;color:var(--accent);margin-bottom:22px}
.c-name{display:block;font:700 15px var(--body);letter-spacing:.16em;text-transform:uppercase}
.c-role{display:block;font-size:14px;color:var(--ink-3);margin-top:4px}
.chant h3{font-size:clamp(28px,2.8vw,42px);font-weight:600;letter-spacing:-.03em;margin:20px 0 16px}
.chant p{color:var(--ink-2);max-width:42ch}
.c-media{display:flex;justify-content:center}
.c-media .browser{width:100%}
.c-media .browser img{max-height:52vh;object-fit:cover;object-position:top left}
.c-media .phone{width:min(250px,30vh)}
.j-route{position:absolute;left:0;right:0;bottom:3vh;width:100%;height:40px;pointer-events:none}
.j-route path{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.journey.static .j-stick{position:static;height:auto;padding:88px 0}
.journey.static .j-track{flex-direction:column;gap:72px;padding:0 var(--gut);max-width:var(--w);margin:0 auto}
.journey.static .chant{flex:none;grid-template-columns:1fr;padding:0}
.journey.static .j-route,.journey.static .j-bar,.journey.static .j-count{display:none}
/* chiffres en ligne */
.proofline{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.proofline div{padding:28px 24px 0 0}
.proofline div+div{padding-left:24px;border-left:1px solid var(--rule)}
.proofline b{display:block;font:300 clamp(54px,6vw,96px)/.9 var(--display);letter-spacing:-.05em}
.proofline b small{font-size:.32em;letter-spacing:-.01em;color:var(--ink-3);margin-left:4px}
.proofline span{display:block;margin-top:14px;font-size:14.5px;color:var(--ink-2);max-width:26ch}
/* équipage */
.crew{text-align:center}
.crew h2{font-size:clamp(32px,4.2vw,62px);max-width:22ch;margin:0 auto}
.crew h2 span{color:var(--on-dark-2);font-weight:300}
.crew .crowd svg{color:var(--on-dark);opacity:.4}
.crew .crowd svg.on{color:var(--accent);opacity:1}
.crew .after{margin:40px auto 0;max-width:44ch;color:var(--on-dark-2);font-size:18px}
/* escales (page L'odyssée) */
.escale .e-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.escale .e-g.rev .e-media{order:-1}
.e-n{display:block;font:300 clamp(110px,13vw,200px)/.78 var(--display);letter-spacing:-.05em;color:var(--accent);margin-bottom:26px}
.escale h2{font-size:clamp(30px,3.2vw,46px);margin-top:18px;max-width:16ch}
.e-media{display:flex;justify-content:center}
.e-media .browser{width:100%}
.dark .c-role{color:var(--on-dark-2)}
.dark .ticks li{color:var(--on-dark)}
@media (prefers-reduced-motion:reduce){.h-txt>*{animation:none}.h-route path{animation:none;stroke-dashoffset:0}.m-in{animation:none}}
@media (max-width:1020px){
  .hero2{min-height:0;padding:40px 0 64px}
  .hero2 .g,.myth .g,.escale .e-g{grid-template-columns:1fr}
  .escale .e-g.rev .e-media{order:0}
  .h-route{left:-30%;width:160%}
  .proofline{grid-template-columns:1fr 1fr}.proofline div:nth-child(3){padding-left:0;border-left:0}
  .proofline div{padding-bottom:24px}
}

/* bande des escales (pages lois et fonctions) */
.esc-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.esc-head h2{font-size:clamp(28px,3vw,42px);max-width:18ch}
.esc{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink);counter-reset:none}
.esc li{padding:24px 20px 6px 0;position:relative}
.esc li+li{padding-left:20px;border-left:1px solid var(--rule)}
.esc .en{display:block;font:300 44px/1 var(--display);letter-spacing:-.03em;color:var(--ink-3)}
.esc b{display:block;font:700 13px var(--body);letter-spacing:.14em;text-transform:uppercase;margin:14px 0 8px}
.esc p{font-size:15px;color:var(--ink-2)}
.esc li.f::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--accent)}
.esc li.f .en,.esc li.f b{color:var(--accent)}
@media (max-width:1020px){.esc{grid-template-columns:1fr}.esc li+li{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}

/* ===== Logo vivant : le personnage ODE devient ODEUS ===== */
.lg{overflow:visible;display:block}
.lg .p{transform-box:fill-box;transform-origin:center;transition:transform .95s cubic-bezier(.75,0,.2,1),opacity .55s ease}
.lg .o{transition-delay:.05s}.lg .d{transition-delay:.12s}.lg .e{transition-delay:0s}
.lg .us{transition:transform .7s cubic-bezier(.2,.8,.2,1) .55s,opacity .5s ease .55s}
/* état « personnage » : O en tête, U en bras, III en jambes, centrés dans la largeur du logo */
.lg.mark .o{transform:translate(299px,-133px)}
.lg.mark .d{transform:translate(136.5px,8px) rotate(90deg)}
.lg.mark .e{transform:translate(-14.5px,153px) rotate(90deg)}
.lg.mark .us{opacity:0;transform:translateX(-46px);transition-delay:0s}
.logo .lg{height:19px;width:auto;color:var(--ink)}
.logo{padding:14px 0}
.hd .in{overflow:visible}
/* ouverture plein écran */
.intro{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;cursor:pointer;transition:opacity .7s ease,transform .8s cubic-bezier(.7,0,.2,1)}
.intro.out{opacity:0;transform:translateY(-3%);pointer-events:none}
.intro .in-box{display:flex;flex-direction:column;align-items:center;gap:56px}
.intro .lg{width:min(520px,72vw);height:auto;color:var(--ink)}
.intro .lg .o,.intro .lg .d,.intro .lg .e{stroke-dasharray:1;stroke-dashoffset:1}
.intro .lg.draw .o{stroke-dashoffset:0;transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1) .05s,transform .95s cubic-bezier(.75,0,.2,1) .05s}
.intro .lg.draw .d{stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.65,0,.35,1) .35s,transform .95s cubic-bezier(.75,0,.2,1) .12s}
.intro .lg.draw .e{stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.65,0,.35,1) .6s,transform .95s cubic-bezier(.75,0,.2,1) 0s}
.intro .lg.draw:not(.mark) .o,.intro .lg.draw:not(.mark) .d,.intro .lg.draw:not(.mark) .e{transition-delay:0s,.0s}
.in-tag{font:600 12px var(--body);letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3);opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
.in-tag i{font-style:normal;color:var(--accent)}
.intro.tag .in-tag{opacity:1;transform:none}
body.intro-on .h-txt>*{animation-play-state:paused}
body.intro-on .h-route path{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.lg .p{transition:none}.intro{display:none}}

/* ===== v5 : sobre. Le grand logo vivant remplace le mot en contour ===== */
.brandline .g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.bl-logo{display:flex;justify-content:center;padding:40px 0}
.bl-logo .lg{width:min(480px,80%);height:auto;color:var(--ink);overflow:visible}
.bl-logo .lg .o,.bl-logo .lg .d,.bl-logo .lg .e{stroke-dasharray:1;stroke-dashoffset:1}
.bl-logo .lg.draw .o{stroke-dashoffset:0;transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1),transform .95s cubic-bezier(.75,0,.2,1) .05s}
.bl-logo .lg.draw .d{stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.65,0,.35,1) .3s,transform .95s cubic-bezier(.75,0,.2,1) .12s}
.bl-logo .lg.draw .e{stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.65,0,.35,1) .55s,transform .95s cubic-bezier(.75,0,.2,1) 0s}
.brandline h2{font-size:clamp(30px,3.4vw,50px);max-width:17ch}
/* noms des rôles en grand, fins */
.c-n{font-size:clamp(46px,5vw,78px);letter-spacing:-.045em;margin-bottom:14px}
.e-n{font-size:clamp(56px,7vw,110px);letter-spacing:-.05em;margin-bottom:16px}
.esc .en{font-size:15px;font-weight:600;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.bl-logo .lg .o,.bl-logo .lg .d,.bl-logo .lg .e{stroke-dashoffset:0}}
@media (max-width:1020px){.brandline .g{grid-template-columns:1fr}}

/* pages lois : détail réel des plans */
.big-stat>div{align-self:end}
.srcs{display:flex;gap:0;margin-top:36px;border-top:1px solid var(--rule)}
.srcs div{flex:1;padding:18px 20px 0 0}
.srcs div+div{padding-left:20px;border-left:1px solid var(--rule)}
.srcs span{display:block;font-size:13.5px;color:var(--ink-3)}
.srcs b{display:block;font:300 34px/1.1 var(--display);letter-spacing:-.03em;margin-top:6px}
.srcs b small{font-size:.5em;color:var(--ink-3)}
.paths{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));border-top:1px solid var(--ink)}
.paths div{padding:22px 22px 22px 0;border-bottom:1px solid var(--rule)}
.paths b{display:block;font:600 19px var(--display);letter-spacing:-.015em}
.paths span{display:block;margin-top:6px;font-size:15px;color:var(--ink-2)}
.proclist{list-style:none;columns:3;column-gap:40px;border-top:1px solid var(--ink);padding-top:10px}
.proclist li{break-inside:avoid;padding:10px 0;font-size:15.5px;border-bottom:1px solid var(--rule)}
.drills{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule-dark)}
.drills p{padding:24px 24px 24px 0;font:500 clamp(18px,1.6vw,22px)/1.35 var(--display);letter-spacing:-.015em;border-bottom:1px solid var(--rule-dark)}
.drills p:nth-child(4n+2),.drills p:nth-child(4n+3),.drills p:nth-child(4n+4){padding-left:24px;border-left:1px solid var(--rule-dark)}
@media (max-width:1020px){.srcs{flex-direction:column}.srcs div+div{padding-left:0;border-left:0}.proclist{columns:1}.drills{grid-template-columns:1fr}.drills p{padding-left:0!important;border-left:0!important}}

/* guides et glossaire */
.guide{max-width:780px}
.guide h1{font-size:clamp(34px,4vw,54px);margin-bottom:18px;max-width:22ch}
.g-meta{font-size:14px;color:var(--ink-3);margin-bottom:34px}.g-meta a{text-decoration:underline}
.short{border-left:3px solid var(--accent);background:var(--bg-2);padding:22px 26px;margin-bottom:34px}
.short b{display:block;font:700 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.short p{font-size:18px;line-height:1.6}
.toc{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);padding:18px 0;margin-bottom:20px}
.toc b{font:700 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.toc ol{margin:10px 0 0 20px;columns:2;column-gap:30px}.toc li{padding:3px 0;font-size:15.5px}.toc a:hover{color:var(--accent)}
.article a{text-decoration:underline;text-underline-offset:3px}
.article h2{scroll-margin-top:96px}
.tbl{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:15.5px}
.tbl th{text-align:left;font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px 10px 0;border-bottom:1px solid var(--ink)}
.tbl td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
.srcl{margin-left:20px;color:var(--ink-2)}.srcl li{margin-bottom:8px}
.related{margin-top:48px;border-top:1px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.related b{font:700 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.related a{font:600 18px var(--display)}.related a:hover{color:var(--accent)}
.guides{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink)}
.guides a{padding:28px;display:flex;flex-direction:column;gap:10px;transition:background .3s}
.guides a+a{border-left:1px solid var(--ink)}.guides a:hover{background:var(--bg-2)}
.guides small{font:600 11.5px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.guides b{font:600 21px/1.25 var(--display);letter-spacing:-.015em}
.guides span{font-size:15px;color:var(--ink-2)}
.gloss{margin-top:40px;border-top:1px solid var(--ink)}
.gloss>div{padding:22px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:240px 1fr;gap:24px;scroll-margin-top:96px}
.gloss dt{font:600 19px var(--display);letter-spacing:-.015em}
.gloss dd{color:var(--ink-2)}.gloss dd a{display:inline-block;margin-top:6px;font-size:14px;font-weight:600;color:var(--ink)}
@media (max-width:1020px){.guides{grid-template-columns:1fr}.guides a+a{border-left:0;border-top:1px solid var(--ink)}.gloss>div{grid-template-columns:1fr;gap:6px}.toc ol{columns:1}}

/* correctif : les captures gardent leurs proportions (les attributs width/height ne doivent jamais les déformer) */
img{height:auto}
.phone img{height:100%}
.duo{grid-template-columns:1.1fr 1fr 1fr}
@media (max-width:1020px){.duo{grid-template-columns:1fr}}

/* les cinq rôles : un panneau plein écran à la fois, transition nette */
.j-track{padding-left:0;transition:transform .85s cubic-bezier(.7,0,.2,1)}
.chant{flex:0 0 100vw;padding:0 max(var(--gut),calc((100vw - var(--w))/2 + var(--gut)))}
.j-bar i{transition:transform .6s cubic-bezier(.7,0,.2,1)}
@media (prefers-reduced-motion:reduce){.j-track{transition:none}}

/* ===================== ODE vivant ===================== */
.fig{display:block;overflow:visible;width:100%;height:auto}
.fig .f-body{transform:translateY(var(--bob,0px));transition:transform .08s linear}
.fig .f-h{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(var(--tilt,0deg))}
.fig .f-a{transform-box:fill-box;transform-origin:50% 100%}
.fig .f-l{transform-box:fill-box;transform-origin:50% 0}
.fig .f-l1{transform:rotate(var(--l1,0deg))}.fig .f-l3{transform:rotate(var(--l3,0deg))}.fig .f-l2{transform:rotate(var(--l2,0deg))}
.browser,.phone{position:relative}
.buddy{position:absolute;z-index:3;width:clamp(34px,3.6vw,52px);color:var(--ink);pointer-events:none;--p:0;transition:none}
.buddy.acc{color:var(--accent)}
.dark .buddy{color:var(--on-dark)}.dark .buddy.acc{color:var(--accent)}
/* assis sur le bord haut, jambes qui pendent devant la capture, glisse le long du bord */
.b-sit{top:0;right:12%;transform:translate(calc(var(--p) * -60px),-62%)}
.b-sit-l{top:0;left:10%;transform:translate(calc(var(--p) * 60px),-62%)}
.b-sit .f-legs,.b-sit-l .f-legs{transform:translateY(-6px)}
/* adossé au bord droit ou gauche, le corps penché contre la capture */
.b-lean-r{bottom:-2px;right:-4px;transform-origin:50% 100%;transform:translate(78%,calc(var(--p) * -30px)) rotate(calc(-11deg + var(--p) * 6deg))}
.b-lean-l{bottom:-2px;left:-4px;transform-origin:50% 100%;transform:translate(-78%,calc(var(--p) * -30px)) rotate(calc(11deg - var(--p) * 6deg))}
/* suspendu au bord bas, les bras (le U) agrippés */
.b-hang{bottom:0;left:18%;transform:translate(calc(var(--p) * 40px),40%) rotate(calc(var(--p) * 8deg));transform-origin:50% 0}
.b-hang .f-h{transform:translateY(0) rotate(var(--tilt,0deg))}
/* qui passe la tête derrière la capture */
.b-peek-l{top:22%;left:0;z-index:-1;transform:translate(calc(-55% + var(--p) * -14px),calc(var(--p) * -40px)) rotate(-18deg)}
.b-peek-r{top:18%;right:0;z-index:-1;transform:translate(calc(55% + var(--p) * 14px),calc(var(--p) * -40px)) rotate(18deg)}
/* debout à côté, les bras tendus vers la capture */
.b-point-l{bottom:0;left:0;transform:translate(-120%,calc(var(--p) * -24px))}
.b-point-l .f-a{transform:rotate(90deg)}
.b-point-r{bottom:0;right:0;transform:translate(120%,calc(var(--p) * -24px))}
.b-point-r .f-a{transform:rotate(-90deg)}
/* assis sur le bord de la bande sombre de fin */
.final{position:relative}
.b-edge{top:0;right:14%;width:clamp(40px,4vw,58px);color:var(--ink);transform:translate(calc(var(--p) * -50px),-64%)}
.dark .b-edge{color:var(--ink)}
/* le compagnon qui marche en bas de l'écran au rythme du défilement */
.walker{position:fixed;left:calc(18px + var(--x,0) * (100vw - 92px));bottom:14px;z-index:35;width:30px;color:var(--ink);transform:scaleX(var(--face,1));transition:transform .25s}
.walker .fig .f-body{transform:translateY(var(--bob,0px))}
.walker .w-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) scaleX(var(--face,1));white-space:nowrap;font:600 12.5px var(--body);background:var(--ink);color:var(--bg);padding:7px 11px;opacity:0;pointer-events:none;transition:opacity .2s}
.walker:hover .w-tip,.walker:focus-visible .w-tip{opacity:1}
.walker:hover{color:var(--accent)}
body.intro-on .walker{opacity:0}
@media (max-width:1020px){.buddy{width:30px}.b-point-l,.b-point-r,.b-peek-l,.b-peek-r{display:none}.walker{width:24px;bottom:10px}}
@media (prefers-reduced-motion:reduce){.walker{left:auto;right:16px}}

/* ===== ODE vivant : réglages des poses (prioritaires) ===== */
.buddy{width:clamp(44px,4.2vw,66px)}
.b-lean-r{right:0;bottom:0;transform-origin:0 100%;transform:translate(128%,calc(var(--p) * -24px)) rotate(calc(-8deg + var(--p) * 4deg))}
.b-lean-l{left:0;bottom:0;transform-origin:100% 100%;transform:translate(-128%,calc(var(--p) * -24px)) rotate(calc(8deg - var(--p) * 4deg))}
/* debout sur le bord haut, il marche le long de la capture pendant le défilement */
.b-top{top:0;left:50%;transform:translate(calc(-50% + var(--p) * -160px),-100%)}
.b-hang{display:none}
.b-peek-l{transform:translate(calc(-58% + var(--p) * -14px),calc(var(--p) * -40px)) rotate(-12deg)}
.b-peek-r{transform:translate(calc(58% + var(--p) * 14px),calc(var(--p) * -40px)) rotate(12deg)}
.b-point-l{transform:translate(-125%,calc(var(--p) * -24px))}
.b-point-r{transform:translate(125%,calc(var(--p) * -24px))}
.walker{width:34px}
@media (max-width:1020px){.buddy{width:34px}.b-lean-r,.b-lean-l{display:none}.walker{width:26px}}
.b-lean-r{transform:translate(108%,calc(var(--p) * -24px)) rotate(calc(-8deg + var(--p) * 4deg))}
.b-lean-l{transform:translate(-108%,calc(var(--p) * -24px)) rotate(calc(8deg - var(--p) * 4deg))}
.walker{color:var(--accent)}.walker:hover{color:var(--ink)}
@media (max-width:1020px){.walker{display:none}}

/* ===================== v7 : un seul grand ODE piloté par le défilement ===================== */
.sc{position:relative;height:640vh}
.sc-stage{position:sticky;top:72px;height:calc(100vh - 72px);overflow:hidden}
.sc-ode{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);overflow:visible;pointer-events:none;z-index:1}
.sc-panel{position:absolute;left:max(var(--gut),calc((100vw - var(--w))/2 + var(--gut)));top:50%;translate:0 -50%;width:min(560px,44vw);z-index:2;will-change:opacity,transform}
.sc-hero h1{font-size:clamp(40px,4.6vw,70px);line-height:1;letter-spacing:-.04em;margin-bottom:26px}
.sc-hero h1 span{display:block}.sc-hero .l1{font-weight:300}.sc-hero .l2{font-weight:700;color:var(--accent)}
.sc-hint{margin-top:44px;font-size:13px;color:var(--ink-3);letter-spacing:.04em}
.sc-role{width:min(420px,30vw)}
.sc-n{display:block;font:600 13px var(--display);color:var(--ink-3);letter-spacing:.08em;margin-bottom:10px}
.sc-k{font:300 clamp(56px,6vw,96px)/.9 var(--display);letter-spacing:-.05em;color:var(--accent);margin-bottom:12px}
.sc-s{display:block;font:700 13px var(--body);letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
.sc-role h2{font-size:clamp(28px,2.6vw,40px);margin-bottom:16px}
.sc-end{left:0;right:0;width:auto;text-align:center;top:auto;bottom:12vh;translate:none}
.sc-end h2{font-size:clamp(34px,4vw,60px)}.sc-end .ctas{justify-content:center}
.sc-card{position:absolute;z-index:2;top:50%;left:calc(max(var(--gut),(100vw - var(--w))/2 + var(--gut)) + min(440px,32vw));translate:0 -50%;width:min(420px,28vw)}
.sc-card .browser img{max-height:56vh;object-fit:cover;object-position:top left}
.sc-card.sc-phone{width:min(250px,17vw)}
.sc-card .phone{width:100%}
.sc-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rule);z-index:3}
.sc-progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.sc.static{height:auto}.sc.static .sc-stage{position:static;height:auto;overflow:visible}
.sc.static .sc-ode{display:none}.sc.static .sc-panel,.sc.static .sc-card{position:static;translate:none;width:auto;margin:48px var(--gut);opacity:1!important;visibility:visible!important}
@media (max-width:1020px){
  .sc{height:560vh}
  .sc-panel,.sc-role{left:var(--gut);right:var(--gut);width:auto;top:auto;bottom:7vh;translate:none}
  .sc-hero{bottom:6vh}.sc-hero h1{font-size:clamp(32px,8.6vw,46px)}
  .sc-k{font-size:44px}.sc-role h2{font-size:24px}.sc-role .body{font-size:15px}
  .sc-card{left:var(--gut);top:15vh;translate:none;width:62vw}.sc-card.sc-phone{width:38vw}
  .sc-card .browser img{max-height:30vh}
  .sc-hint{display:none}
}
.sc-hero h1{font-size:clamp(38px,3.9vw,60px)}.sc-hero{width:min(600px,46vw)}
@media (max-width:1020px){.sc-hero{width:auto;bottom:4vh}.sc-hero h1{font-size:clamp(30px,8vw,40px);margin-bottom:16px}.sc-hero .lead{font-size:16px}.sc-hero .ctas{margin-top:22px}}

/* ===================== v8 : ODE expressif partout ===================== */
:root{--ode-fill:#F4F3F0}
.sc-ode,.ode-rig{color:var(--ink)}
.sc-hero .kicker{margin-bottom:18px}
.mini{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.mini li{font-size:14px;color:var(--ink-2);padding-left:16px;position:relative}.mini li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:1.5px;background:var(--accent)}
/* héros des pages : ODE grand, à droite, à côté de la capture */
.phero.has-ode{position:relative;overflow:hidden}
.ph-ode{position:absolute;right:max(10px,calc((100vw - var(--w))/2 - 30px));bottom:0;height:min(78%,560px);aspect-ratio:246/450;z-index:2;pointer-events:none}
.ph-ode .ode-rig{width:100%;height:100%;overflow:visible}
.phero.has-ode:not(.ode-solo) .g>:last-child{margin-right:clamp(120px,15vw,250px)}
.phero.ode-solo .ph-ode{height:min(86%,600px);right:max(24px,calc((100vw - var(--w))/2 + 40px))}
/* appel final : ODE salue */
.final{position:relative;overflow:hidden}
.fin-ode{position:absolute;right:max(16px,calc((100vw - var(--w))/2 - 20px));bottom:0;height:min(70%,380px);aspect-ratio:246/450;pointer-events:none;opacity:.95}
.fin-ode .ode-rig{width:100%;height:100%;overflow:visible;color:var(--on-dark);--ode-fill:var(--dark)}
.final .g{position:relative;z-index:1}
.final ul{margin-right:clamp(0px,10vw,170px)}
@media (max-width:1020px){
  .ph-ode{height:200px;right:8px;bottom:auto;top:16px}
  .phero.has-ode:not(.ode-solo) .g>:last-child{margin-right:0}
  .phero.has-ode .g>:first-child{padding-right:90px}
  .fin-ode{height:150px;right:8px}
  .final ul{margin-right:0}
}
.ph-ode{height:min(66%,470px)}
.phero.has-ode:not(.ode-solo) .g>:last-child{margin-right:clamp(170px,19vw,280px)}
.fin-ode{height:min(64%,340px)}
.final ul{margin-right:clamp(0px,15vw,230px)}
@media (max-width:1020px){.ph-ode{height:170px}.phero.has-ode:not(.ode-solo) .g>:last-child{margin-right:0}.final ul{margin-right:0}}
.final .g{grid-template-columns:1fr 1fr}
.final ul{margin-right:clamp(0px,11vw,170px)}
.fin-ode{right:max(8px,calc((100vw - var(--w))/2 - 60px));height:min(56%,300px)}
@media (max-width:1020px){.final .g{grid-template-columns:1fr}.final ul{margin-right:0}}

/* ===== v10 : contenus distincts par page ===== */
.lanes{border-top:1px solid var(--ink)}
.lanes .lh,.lanes .lr{display:grid;grid-template-columns:200px 1fr 1fr 1fr;gap:28px;padding:18px 0;border-bottom:1px solid var(--rule)}
.lanes .lh b{font:700 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.lanes .lr span{font:600 17px var(--display);letter-spacing:-.01em}.lanes .lr span i{display:block;font:600 13px var(--display);font-style:normal;color:var(--accent);margin-bottom:4px}
.lanes .lr p{font-size:15px;color:var(--ink-2)}.lanes .lr p.ob{color:var(--ink);font-weight:500}
.week{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);margin-bottom:56px}
.week>div{padding:22px 22px 0 0}.week>div+div{padding-left:22px;border-left:1px solid var(--rule)}
.week i{display:block;font:600 13px var(--display);font-style:normal;color:var(--accent);margin-bottom:8px}
.week b{display:block;font:600 19px var(--display);letter-spacing:-.015em;margin-bottom:8px}.week p{font-size:15px;color:var(--ink-2)}
.trio{display:flex;gap:clamp(24px,4vw,64px);justify-content:center;flex-wrap:wrap}
.trio .phone{width:min(260px,70vw)}
.trio.t2 figure{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:300px}
.trio figcaption{font-size:15px;color:var(--ink-2);text-align:center}.trio figcaption b{display:block;font:600 18px var(--display);color:var(--ink);margin-bottom:4px}
.asks2{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.asks2>div{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:22px 24px 22px 0;border-bottom:1px solid var(--rule)}
.asks2>div:nth-child(even){padding-left:24px;border-left:1px solid var(--rule)}
.asks2 .q{font:600 18px/1.35 var(--display);letter-spacing:-.01em}
.asks2 .a{font-size:14.5px;color:var(--ink-2)}.asks2 .a span{display:block;font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.cases{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.cases>div{padding:24px 24px 0 0}.cases>div+div{padding-left:24px;border-left:1px solid var(--rule)}
.cases b{display:block;font:600 21px var(--display);letter-spacing:-.015em;margin-bottom:10px}.cases p{color:var(--ink-2);font-size:15.5px}
@media (max-width:1020px){.lanes .lh{display:none}.lanes .lr{grid-template-columns:1fr;gap:6px}.week,.asks2,.asks2>div,.cases{grid-template-columns:1fr}.week>div+div,.cases>div+div,.asks2>div:nth-child(even){padding-left:0;border-left:0}.week>div,.cases>div{padding-bottom:16px;border-bottom:1px solid var(--rule)}}

/* photo du fondateur */
.f-row{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:start}
.founder-ph{margin:0}
.founder-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.05);transition:filter .4s}
.founder-ph:hover img{filter:none}
.founder-ph figcaption{margin-top:8px;font-size:12.5px;color:var(--ink-3)}
.founder-ph.lg{width:220px;margin-bottom:28px}
.founder .nums{gap:40px}
@media (max-width:1020px){.f-row{grid-template-columns:110px 1fr;gap:18px}.founder-ph.lg{width:170px}}
.split2 .nums{gap:28px;flex-wrap:nowrap}.split2 .nums b{font-size:clamp(36px,3.6vw,54px)}

/* ===================== v11 : schémas nets de l'interface (remplacent les captures floues) ===================== */
.browser,.phone{container-type:inline-size}
.sk{--g:#2F7D6B;--y:#D9A24A;font-family:var(--body);color:var(--ink);background:#FBFAF8;padding:5.5cqw 6cqw;font-size:clamp(10px,2.55cqw,14px);line-height:1.4;display:flex;flex-direction:column;gap:.9em;text-align:left}
.sk p,.sk li{max-width:none}
.sk-t{font:700 1.45em/1.15 var(--display);letter-spacing:-.02em;display:flex;align-items:center;justify-content:space-between;gap:1em;flex-wrap:wrap}
.sk-t.lg{font-size:1.8em}
.sk-k{font-size:.78em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sk-l{font-size:.82em;font-weight:600;color:var(--ink-2);margin-top:.3em}
.sk-demo{font:500 .58em var(--body);font-style:normal;letter-spacing:.02em;color:var(--ink-3);border:1px solid var(--rule);padding:.25em .7em;white-space:nowrap}
.sk-steps{display:flex;gap:.4em;flex-wrap:wrap}.sk-steps span{font-size:.78em;padding:.35em .8em;border:1px solid var(--rule);color:var(--ink-3)}
.sk-steps .on,.sk-opts .on{border-color:var(--ink);color:var(--ink);background:#fff;font-weight:600}
.sk-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}.sk-opts span{font-size:.8em;padding:.7em;border:1px solid var(--rule);color:var(--ink-2);line-height:1.25}
.sk-opts .on{box-shadow:inset 3px 0 0 var(--accent)}
.sk-list,.sk-rows,.sk-rules{list-style:none;display:flex;flex-direction:column;gap:.45em}
.sk-list li{display:flex;align-items:center;gap:.7em;padding:.6em .8em;background:#fff;border:1px solid var(--rule);font-size:.88em}
.sk-list em,.sk-rows em{margin-left:auto;font-style:normal;font-size:.78em;color:var(--ink-3)}
.ok::before{content:"";flex:none;width:.85em;height:.5em;border-left:2px solid var(--g);border-bottom:2px solid var(--g);transform:rotate(-45deg) translateY(-.15em);margin-right:.2em}
.sk-btn{align-self:flex-end;background:var(--ink);color:#fff;font-size:.82em;font-weight:600;padding:.6em 1.2em}
.sk-btn.full{align-self:stretch;text-align:center;background:var(--accent)}
.sk-cal{display:flex;flex-direction:column;gap:.35em}
.sk-cal>div{display:grid;grid-template-columns:30% 1fr;align-items:center;gap:.6em}
.sk-cal span{font-size:.76em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-cal p{position:relative;height:1.25em;background:var(--bg-2);border:1px solid #ECEAE6}
.sk-cal p b{position:absolute;top:15%;bottom:15%}
.sk-cal .hd i{font-style:normal;font-size:.7em;color:var(--ink-3)}.sk-cal .hd{grid-template-columns:30% repeat(4,1fr)}
.n1{background:var(--g)}.n2{background:var(--y)}.n3{background:var(--accent)}.sk .m{background:var(--ink-2)}
.sk-cal u,.sk-leg u{position:absolute;top:50%;width:.55em;height:.55em;background:var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.sk-leg{display:flex;flex-wrap:wrap;gap:.4em 1em;font-size:.72em;color:var(--ink-3)}
.sk-leg span{display:flex;align-items:center;gap:.4em;position:relative}.sk-leg b{display:inline-block;width:1.4em;height:.6em}
.sk-leg u{position:relative;display:inline-block;transform:rotate(45deg);top:0}
.sk-nums,.sk-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em}
.sk-kpi.k3{grid-template-columns:repeat(3,1fr)}
.sk-nums div,.sk-kpi div{background:#fff;border:1px solid var(--rule);padding:.7em;font-size:.74em;color:var(--ink-3);display:flex;flex-direction:column;gap:.2em;line-height:1.25}
.sk-nums b,.sk-kpi b{font:300 2.1em/1 var(--display);color:var(--ink);letter-spacing:-.03em}
.sk-checks{display:flex;flex-direction:column;gap:.35em}.sk-checks span{display:flex;align-items:center;gap:.5em;font-size:.82em;color:var(--ink-2)}
.sk-bar{display:block;height:.42em;background:var(--bg-3);flex:1;min-width:3em}.sk-bar b{display:block;height:100%;background:var(--g)}.sk-bar.warn b{background:var(--accent)}
.sk-kpi .sk-bar{margin-top:.4em;flex:none}
.sk-rows li{display:grid;grid-template-columns:38% 1fr 3.4em;align-items:center;gap:.7em;font-size:.84em;padding:.35em 0;border-bottom:1px solid #ECEAE6}
.sk-rows li em{text-align:right}
.sk-rows.tb li{grid-template-columns:42% 1fr 1fr}.sk-rows.tb li.h{font-size:.7em;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.sk-rows.tb li em{text-align:left;margin:0}
.sk-ph{height:100%;border-radius:36px;padding:16cqw 8cqw 9cqw;font-size:clamp(10px,4.2cqw,15px);gap:1.1em}
.sk-rules li{font-size:.9em;color:var(--ink-2);padding:.7em .8em;background:#fff;border-left:2px solid var(--accent)}
.sk-chk{display:flex;gap:.6em;font-size:.82em;color:var(--ink-2);margin-top:auto}.sk-chk::before{content:"";flex:none;width:1.1em;height:1.1em;border:1.5px solid var(--ink);margin-top:.1em}
.phone .sk-ph{width:100%}
.sc-card .browser .sk,.c-media .browser .sk{max-height:none}
@container (max-width:420px){.sk-opts{grid-template-columns:1fr}.sk-nums,.sk-kpi{grid-template-columns:repeat(2,1fr)}.sk-kpi.k3{grid-template-columns:repeat(3,1fr)}.sk-rows li{grid-template-columns:44% 1fr 2.8em}}
/* v11 mobile : la séquence ODE garde une zone image en haut et une zone texte en bas, sans chevauchement */
@media (max-width:1020px){
  .sc-card{top:calc(64px + 2vh);width:min(64vw,420px);max-height:min(38vh,360px);overflow:hidden;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
  .sc-card.sc-phone{width:min(48vw,240px)}
  .sc-card .browser,.sc-card .phone{box-shadow:none}
  .sc-card .phone{aspect-ratio:auto;height:auto;border-radius:30px 30px 0 0;padding:8px 8px 0}
  .sc-card .phone img{height:auto;border-radius:24px 24px 0 0}
  .sc-card .phone .sk-ph{border-radius:24px 24px 0 0;padding-top:9cqw}
  .sc-role{bottom:max(4vh,18px)}
  .sc-k{font-size:clamp(34px,10vw,44px);margin-bottom:6px}.sc-s{margin-bottom:12px;font-size:11px}
  .sc-role h2{font-size:clamp(20px,5.6vw,24px);margin-bottom:10px}.sc-role .body{font-size:14.5px;line-height:1.5}
}
@media (max-width:1020px) and (max-height:700px){.sc-card{max-height:30vh}.sc-role .body{font-size:13.5px}}
@media (max-width:600px){
  .grid4{grid-template-columns:1fr}.grid4 b{overflow-wrap:anywhere}
  .tbl{display:block;overflow-x:auto;font-size:14.5px;-webkit-overflow-scrolling:touch}.tbl th,.tbl td{min-width:110px}
}
@media (max-width:760px){
  .trio{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gut));padding:4px var(--gut) 28px;gap:18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .trio::-webkit-scrollbar{display:none}
  .trio>.phone,.trio>figure{flex:none;scroll-snap-align:center}
  .trio .phone{width:66vw;border-radius:38px;padding:9px}.trio .phone img,.trio .phone .sk-ph{border-radius:30px}
  .trio.t2 figure{max-width:none;width:70vw}
  .split2 .nums{gap:20px}.split2 .nums b{font-size:clamp(28px,8.5vw,40px);white-space:nowrap}.split2 .nums span{font-size:12.5px}
  .nums b{white-space:nowrap}
}
@media (max-width:600px){section{padding:68px 0}.tight{padding:48px 0}.sc{padding:0}h2{font-size:clamp(28px,8vw,36px)}}
/* v12 */
dialog.vd{margin:auto;inset:0;position:fixed;width:min(540px,92vw)}
dialog.vd[open]{display:block}
.sc-end h2.sig{font-weight:300;letter-spacing:-.04em}
.sectors{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.sectors>div{padding:28px 28px 30px 0;display:flex;flex-direction:column;gap:14px}
.sectors>div+div{padding-left:28px;border-left:1px solid var(--rule)}
.sectors .tag{font:600 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.sectors .scene{font:600 clamp(19px,1.6vw,23px)/1.3 var(--display);letter-spacing:-.015em;color:var(--ink)}
.sectors .words{font-size:14px;color:var(--ink-3)}
.sectors .have{font-size:15px;color:var(--ink-2);margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)}
@media (max-width:1020px){.sectors{grid-template-columns:1fr}.sectors>div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}
/* v13 : indicateurs mis en avant */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.kpis>div{padding:26px 22px 26px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.kpis>div:not(:nth-child(4n+1)){padding-left:22px;border-left:1px solid var(--rule)}
.kpis b{font:300 clamp(40px,4.2vw,64px)/1 var(--display);letter-spacing:-.045em;color:var(--ink)}
.kpis span{font-size:14.5px;color:var(--ink-2);max-width:24ch}
.kpi-shot{margin-top:56px}
@media (max-width:1020px){.kpis{grid-template-columns:1fr 1fr}.kpis>div:not(:nth-child(4n+1)){padding-left:0;border-left:0}.kpis>div:nth-child(even){padding-left:18px;border-left:1px solid var(--rule)}}
@media (min-width:1021px){.phero .g:has(>.browser){grid-template-columns:.95fr 1.05fr;gap:clamp(40px,5vw,72px)}.feat{grid-template-columns:.8fr 1.2fr}}
/* v14 : plan loi 43-05 */
.badge{display:inline-block;font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:7px 10px;margin-bottom:18px}
.lvls{list-style:none;border-top:1px solid var(--ink)}
.lvls li{display:grid;grid-template-columns:92px 1fr;gap:4px 18px;padding:22px 0;border-bottom:1px solid var(--rule)}
.lvls i{font:600 12px var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);grid-row:span 2;padding-top:5px}
.lvls b{font:600 clamp(19px,1.6vw,23px)/1.25 var(--display);letter-spacing:-.015em}
.lvls span{font-size:15px;color:var(--ink-2)}
.duo.q4{grid-template-columns:1fr 1fr;gap:1px;background:var(--ink)}
.duo.q4 a{background:var(--bg);border:0!important;min-height:340px}
.duo.q4 a:hover{background:var(--bg-2)}
@media (max-width:1020px){.duo.q4{grid-template-columns:1fr}.duo.q4 a{min-height:0}}
@media (max-width:600px){.lvls li{grid-template-columns:1fr}.lvls i{grid-row:auto;padding:0}}
@media (min-width:1021px){.cases:has(>div:nth-child(4)){grid-template-columns:repeat(4,1fr)}}
/* v16 : retours de revue du 08/10 */
.sc{height:470vh}
abbr[title]{text-decoration:none;border-bottom:1px dotted currentColor;cursor:help}
.refline{margin-top:48px;padding-top:28px;border-top:1px solid var(--rule)}
.refline .kicker{margin-bottom:12px}
.refline .names{font:500 clamp(16px,1.35vw,19px)/1.7 var(--display);color:var(--ink);letter-spacing:-.01em;max-width:none}
.refline .note{margin-top:10px}
.mob-cta{position:sticky;top:-20px;z-index:2;background:var(--bg);padding:4px 0 14px;margin-top:-4px}
.mob-cta .btn{width:100%;justify-content:center;margin:0}
@media (max-width:1020px){
  .sc{height:420vh}
  /* héros : la promesse juste sous le logo, sans trou */
  .sc-hero{top:calc(9vh + 64px);bottom:auto}
  /* étapes : image de hauteur fixe en haut, texte juste dessous */
  .sc-card{height:min(36vh,340px);max-height:none}
  .sc-card .browser,.sc-card .phone{height:100%;overflow:hidden}
  .sc-card .browser img{height:calc(100% - 34px);max-height:none;object-fit:cover;object-position:top left}
  .sc-card .phone img{height:100%;object-fit:cover;object-position:top}
  .sc-role{top:calc(64px + 2vh + min(36vh,340px) + 22px);bottom:auto}
}
@media (max-width:1020px) and (max-height:700px){.sc-card{height:30vh}.sc-role{top:calc(64px + 2vh + 30vh + 16px)}}
@media (max-width:1020px){.sc-end{top:calc(20vh + 56px);bottom:auto}}
.founder .refline{grid-column:1/-1}
.mob-cta .btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 20px;font:600 16px var(--body);border:0}