@font-face{font-family:Geist;src:url(/strategie-geo/assets/geist.woff2);font-weight:100 900;font-display:swap}
html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#fff}
.organikk-page{--font-sans:Geist;display:block;min-width:0}
@font-face{font-family:"Geist Mono";src:url(/strategie-geo/assets/hero-consultant/geist-mono.woff2)}
.organikk-native-hero{display:block;isolation:isolate;text-align:left}
@scope (.organikk-page){
/* Source: public/da/styles.css */
:scope{
  --ink:#111114; --ink-2:#5a5866; --line:#e6e3ee; --paper:#fff;
  --lilac:#cdb4f7; --lilac-deep:#8f6fe0; --rose:#f2c4ec; --wash:#f7f4fc;
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:40px;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --grad:linear-gradient(160deg,#dccbfa 0%,#e9c9f1 45%,#f5dcf0 100%);
}
*{box-sizing:border-box}
:scope{scroll-behavior:smooth}
:scope{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.dmono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.ico{width:18px;height:18px;flex:none}

/* nav */
.nav-bar{position:sticky;top:0;z-index:20;transition:background .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
.nav-bar.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:18px}
.logo .mark{width:18px;height:18px;transition:transform .3s ease}
.logo:hover .mark{transform:translateX(-3px)}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--ink-2)}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--ink);transition:right .25s ease}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.on::after{right:0}
.nav-links a.on{color:var(--ink)}

/* buttons */
.dbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-sm);font-size:14px;font-weight:500;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:transform .15s ease,background .15s ease,color .15s ease}
.dbtn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#2a2830}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--wash)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:#f3eefc}
.dbtn .ico{transition:transform .2s ease}
.dbtn:hover .ico{transform:translateX(3px)}

/* hero */
.native-hero{position:relative;margin:8px 16px 0;height:calc(100vh - 88px);min-height:600px;max-height:940px;border-radius:var(--r-lg);overflow:hidden;background:var(--grad);isolation:isolate}
.native-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-topline{position:absolute;top:24px;left:40px;right:40px;display:flex;justify-content:space-between;color:#3d3750}
.hero-copy{position:absolute;left:0;top:50%;transform:translateY(-50%);padding:0 40px;max-width:600px;pointer-events:none}
.hero-note{position:absolute;left:40px;top:52px;text-align:left}
.hero-note .dmono{display:block;margin-top:4px}
.hero-copy > *{pointer-events:auto}
.native-hero h1{font-size:clamp(34px,4.6vw,40px);line-height:1.08;color:var(--ink);max-width:520px}
.native-hero h1 .w{display:inline-block;opacity:0;transform:translateY(24px);animation:up .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero-sub{margin-top:16px;font-size:18px;line-height:1.45;color:#2d2938;max-width:520px;opacity:0;animation:up .7s .35s cubic-bezier(.2,.7,.2,1) forwards}
.dhero-cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:up .7s .5s cubic-bezier(.2,.7,.2,1) forwards}
.hero-note{color:#3d3750;opacity:0;animation:up .7s .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero-note .dmono{display:block;margin-top:4px;color:#5c5470}
@keyframes up{to{opacity:1;transform:none}}

/* libellés projetés du hero 3D */
.hero-labels{position:absolute;inset:0;pointer-events:none;z-index:1}
.hl{position:absolute;left:0;top:0;white-space:nowrap;color:#2d2938;font-size:12px;line-height:1.3;transition:opacity .4s}
.hl.dmono{font-family:var(--mono);letter-spacing:.02em;color:#5c5470}
.hl.pub{background:#fff;border-radius:6px;padding:5px 10px;font-size:12px;color:var(--ink);box-shadow:0 8px 24px rgba(70,40,120,.12)}
.hl.pub .dmono{color:var(--lilac-deep);font-size:11px;margin-right:6px}
.hl.tip{background:var(--ink);color:#fff;border-radius:8px;padding:8px 10px;min-width:96px}
.hl.tip .dmono{color:#cbc3e0;font-size:11px}
.hl.tip .bar{margin-top:6px;height:4px;border-radius:2px;background:#3a3744;overflow:hidden}
.hl.tip .bar i{display:block;height:100%;background:var(--lilac);border-radius:2px;transition:width .2s linear}
.hl.lead{background:#fff;color:var(--ink);border-radius:8px;padding:8px 10px;min-width:96px;box-shadow:0 12px 32px rgba(70,40,120,.15)}
.hl.lead .dmono{color:var(--lilac-deep);font-size:11px}
.hl.lead b{display:block;font-size:26px;line-height:1.1;margin-top:2px;letter-spacing:-.02em}
.hl.lead small{display:block;font-size:11px;color:var(--ink-2);margin-top:2px}
.hero-legend{position:absolute;right:40px;top:52px;display:grid;gap:6px;font-size:12px;color:#2d2938;z-index:1}
.hero-legend span{display:flex;align-items:center;gap:8px}
.hero-legend i{width:18px;height:3px;border-radius:2px;background:var(--ink)}
.hero-legend i.l{width:8px;height:12px;border-radius:2px;background:var(--lilac-deep);margin:0 5px}
.hero-copy{z-index:2}

/* page hero (secondary pages) */
.page-hero{margin:8px 16px 0;border-radius:var(--r-lg);background:var(--grad);padding:96px 40px 64px;position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(32px,4.2vw,40px);line-height:1.1;max-width:720px}
.page-hero p{margin-top:16px;font-size:18px;color:#2d2938;max-width:560px}
.page-hero .arrow-bg{position:absolute;right:-40px;top:-40px;width:360px;opacity:.9;transform:rotate(-30deg)}

/* ticker */
.ticker{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:12px 0;position:relative}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,#fff,transparent)}
.ticker-track{display:inline-flex;gap:40px;animation:tick 48s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{font-size:14px;color:var(--ink-2)}
.ticker-track span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:3px;background:var(--lilac-deep);margin-right:12px;vertical-align:middle}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
section{padding:112px 0}
.lead{max-width:640px}
.lead h2{font-size:28px;line-height:1.2;color:var(--lilac-deep)}
.lead p{margin-top:16px;font-size:18px;color:var(--ink-2)}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}

/* manifesto */
.manifesto{font-size:clamp(28px,3.6vw,40px);line-height:1.2;font-weight:600;letter-spacing:-.02em;max-width:1000px}
.manifesto .w{display:inline-block;color:#d9d4e6;transition:color .35s ease}
.manifesto .w.on{color:var(--ink)}
.manifesto .w.acc.on{color:var(--lilac-deep)}

/* method */
.method{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:56px;align-items:start}
.method-visual{position:sticky;top:96px;border-radius:var(--r-lg);background:var(--grad);aspect-ratio:1/1;overflow:hidden}
.scene{position:absolute;inset:0;opacity:0;transform:scale(.96);transition:opacity .5s ease,transform .5s ease;display:grid;place-items:center}
.scene.on{opacity:1;transform:none}
.method-steps{display:grid;gap:0}
.mstep{padding:40px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:48px 1fr;gap:24px;transition:opacity .3s ease}
.mstep .num{font-family:var(--mono);font-size:12px;color:var(--lilac-deep);padding-top:6px}
.mstep h3{font-size:22px;line-height:1.2}
.mstep p{margin-top:12px;color:var(--ink-2)}
.mstep ul{margin-top:16px;display:grid;gap:8px;font-size:14px}
.mstep li{display:flex;gap:10px;align-items:flex-start}
.mstep li .ico{margin-top:3px;color:var(--lilac-deep)}
.method-steps.tracking .mstep{opacity:.35}
.method-steps.tracking .mstep.on{opacity:1}

/* scene 1: phone with queries */
.ph{width:200px;height:400px;border-radius:32px;background:#fff;box-shadow:0 20px 50px rgba(70,40,120,.18);padding:20px 16px;display:grid;align-content:start;gap:10px;position:relative}
.ph .q{height:36px;border-radius:8px;background:var(--wash);border:1px solid var(--line);display:flex;align-items:center;padding:0 10px;font-size:11px;color:var(--ink-2);gap:8px;transform:translateX(30px);opacity:0}
.scene.on .ph .q{animation:slideq .5s cubic-bezier(.2,.7,.2,1) forwards}
.ph .q:nth-child(2){animation-delay:.15s}.ph .q:nth-child(3){animation-delay:.3s}.ph .q:nth-child(4){animation-delay:.45s}.ph .q:nth-child(5){animation-delay:.6s}.ph .q:nth-child(6){animation-delay:.75s}
.ph .q.hot{background:var(--ink);color:#fff;border-color:var(--ink)}
.ph .q .dot{width:6px;height:6px;border-radius:3px;background:var(--lilac-deep)}
.ph .q.hot .dot{background:#fff}
@keyframes slideq{to{transform:none;opacity:1}}
/* scene 2: page skeleton building */
.pg{width:260px;height:340px;border-radius:16px;background:#fff;box-shadow:0 20px 50px rgba(70,40,120,.18);padding:20px;display:grid;align-content:start;gap:10px}
.pg .b{height:10px;border-radius:5px;background:#ece7f6;transform-origin:left;transform:scaleX(0)}
.scene.on .pg .b{animation:grow .6s cubic-bezier(.2,.7,.2,1) forwards}
.pg .b.t{height:18px;width:70%;background:var(--ink)}
.pg .b.w60{width:60%}.pg .b.w85{width:85%}.pg .b.w40{width:40%}
.pg .b.cta{height:32px;width:50%;background:var(--lilac-deep);margin-top:8px}
.pg .b:nth-child(1){animation-delay:.05s}.pg .b:nth-child(2){animation-delay:.15s}.pg .b:nth-child(3){animation-delay:.25s}.pg .b:nth-child(4){animation-delay:.35s}.pg .b:nth-child(5){animation-delay:.45s}.pg .b:nth-child(6){animation-delay:.55s}.pg .b:nth-child(7){animation-delay:.65s}.pg .b:nth-child(8){animation-delay:.75s}
@keyframes grow{to{transform:scaleX(1)}}
/* scene 3: pages reliées (feuilles blanches + flèches fines) */
.mesh{position:relative;width:340px;height:340px;scale:1.28}
@keyframes draw{to{stroke-dashoffset:0}}
.mesh .links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mesh .links path{fill:none;stroke:#111114;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mesh .links .ln{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.scene.on .mesh .links .ln{animation:draw .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d)}
.mesh .links .hd{opacity:0}
.scene.on .mesh .links .hd{animation:fadein .25s forwards;animation-delay:calc(var(--d) + .6s)}
.pgm{position:absolute;width:64px;height:48px;transform:translate(-50%,-50%);background:#fff;border-radius:8px;box-shadow:0 10px 26px rgba(70,40,120,.16);padding:8px;display:grid;gap:4px;align-content:start;opacity:0;scale:.9}
.scene.on .pgm{animation:pop .45s cubic-bezier(.2,.7,.2,1) forwards}
.scene.on .pgm:nth-of-type(2){animation-delay:.15s}.scene.on .pgm:nth-of-type(3){animation-delay:.25s}.scene.on .pgm:nth-of-type(4){animation-delay:.35s}.scene.on .pgm:nth-of-type(5){animation-delay:.45s}.scene.on .pgm:nth-of-type(6){animation-delay:.55s}.scene.on .pgm:nth-of-type(7){animation-delay:.65s}
.pgm .l{display:block;height:4px;border-radius:2px;background:#ece7f6}
.pgm .l.a{width:60%;background:var(--lilac-deep)}
.pgm .l.s{width:45%}
.pgm.hub{width:100px;height:72px;padding:10px;gap:6px;box-shadow:0 16px 40px rgba(70,40,120,.22)}
.pgm.hub .l{height:5px}
.pgm.hub .b{display:block;height:12px;width:55%;border-radius:4px;background:var(--ink);margin-top:2px}
.pgm.orphan{outline:1.5px dashed var(--lilac-deep);outline-offset:4px}
.pgm.orphan .l{opacity:.5}
.pgm.orphan .tag{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);font-family:var(--mono);font-size:10px;color:var(--lilac-deep);white-space:nowrap}
.scene.on .pgm.orphan{animation:pop .45s .65s cubic-bezier(.2,.7,.2,1) forwards, adopt .4s 2.5s forwards}
@keyframes pop{to{opacity:1;scale:1}}
@keyframes adopt{to{outline-color:transparent}}
.scene.on .pgm.orphan .l{animation:fadein .4s 2.5s forwards}
.scene.on .pgm.orphan .tag{animation:fadeout .3s 2.5s forwards}
@keyframes fadeout{to{opacity:0}}
/* scene 4: demandes qui arrivent */
.inbox{width:300px;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(70,40,120,.18);padding:16px;display:grid;gap:8px}
.inbox .head{display:flex;justify-content:space-between;align-items:baseline;padding:4px 4px 10px;border-bottom:1px solid var(--line)}
.inbox .head .dmono{color:var(--lilac-deep)}
.inbox .head b{font-size:26px;letter-spacing:-.02em;line-height:1}
.inbox .msg{display:grid;grid-template-columns:8px 1fr auto;gap:10px;align-items:center;padding:10px 8px;border-radius:8px;background:var(--wash);opacity:0;transform:translateY(-14px) scale(.98)}
.scene.on .inbox .msg{animation:drop .5s cubic-bezier(.2,.7,.2,1) forwards}
.inbox .msg:nth-child(2){animation-delay:.2s}.inbox .msg:nth-child(3){animation-delay:.6s}.inbox .msg:nth-child(4){animation-delay:1.0s}.inbox .msg:nth-child(5){animation-delay:1.4s}.inbox .msg:nth-child(6){animation-delay:1.8s}
.inbox .msg .dot{width:8px;height:8px;border-radius:4px;background:var(--lilac-deep)}
.inbox .msg .t{font-size:12px;color:var(--ink);line-height:1.3}
.inbox .msg .t small{display:block;color:var(--ink-2);font-size:11px}
.inbox .msg .dmono{color:var(--ink-2);font-size:11px}
@keyframes drop{to{opacity:1;transform:none}}
@keyframes fadein{to{opacity:1}}

/* SERP demo */
.serp-wrap{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.serp{border:1px solid var(--line);border-radius:var(--r-md);padding:24px;background:#fff;position:relative}
.serp .bar{height:44px;border-radius:22px;border:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 16px;font-size:14px;color:var(--ink);margin-bottom:20px}
.serp .bar .ico{color:var(--ink-2)}
.serp .list{position:relative;height:calc(8*64px)}
.res{position:absolute;left:0;right:0;height:56px;border-radius:var(--r-sm);padding:10px 12px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;transition:transform 1.1s cubic-bezier(.65,0,.15,1),background .3s;background:var(--wash)}
.res .l{display:grid;gap:6px}
.res .l i{display:block;height:8px;border-radius:4px;background:#ddd7ea}
.res .l i:first-child{width:60%;background:#cfc7e2}
.res .l i:last-child{width:85%}
.res .pos{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.res.you{background:var(--ink);color:#fff;z-index:2;box-shadow:0 12px 30px rgba(20,10,40,.25)}
.res.you .l i{background:#3a3744}
.res.you .l i:first-child{background:#fff;width:55%}
.res.you .pos{color:#fff}
.res.you .tag{position:absolute;right:12px;top:-10px;background:var(--lilac-deep);color:#fff;font-size:11px;padding:2px 8px;border-radius:6px;font-family:var(--mono)}
.serp-copy h3{font-size:22px;margin-top:24px}
.serp-copy p{color:var(--ink-2);margin-top:12px}
.serp-copy .row{display:flex;gap:12px;margin-top:24px;align-items:center}
.serp-copy .state{font-family:var(--mono);font-size:12px;color:var(--lilac-deep)}

/* GEO chat */
.geo{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.chat{border-radius:var(--r-lg);background:var(--grad);padding:40px;min-height:420px;display:grid;align-content:end;gap:16px}
.bub{max-width:90%;padding:14px 16px;border-radius:16px;font-size:15px;line-height:1.45}
.bub.u{background:var(--ink);color:#fff;justify-self:end;border-bottom-right-radius:6px}
.bub.a{background:#fff;color:var(--ink);border-bottom-left-radius:6px;box-shadow:0 12px 32px rgba(70,40,120,.15);min-height:44px}
.bub.a .cur{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
.bub.a .cite{display:inline-flex;align-items:center;gap:6px;background:var(--wash);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:12px;font-family:var(--mono);color:var(--lilac-deep);margin-left:4px;vertical-align:1px;opacity:0;transform:translateY(4px);transition:all .4s}
.bub.a .cite.on{opacity:1;transform:none}
@keyframes blink{50%{opacity:0}}
.geo-copy h3{font-size:22px}
.geo-copy p{color:var(--ink-2);margin-top:12px}
.geo-copy ul{margin-top:20px;display:grid;gap:10px;font-size:15px}
.geo-copy li{display:flex;gap:10px}.geo-copy li .ico{margin-top:3px;color:var(--lilac-deep)}

/* offers */
.offers{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.offer{border:1px solid var(--line);border-radius:var(--r-md);padding:32px;position:relative;overflow:hidden;background:#fff;transition:transform .3s ease,box-shadow .3s ease}
.offer:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(70,40,120,.12)}
.offer::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(205,180,247,.35),transparent 60%);opacity:0;transition:opacity .3s}
.offer:hover::before{opacity:1}
.offer > *{position:relative}
.offer .dmono{color:var(--lilac-deep)}
.offer h3{font-size:22px;margin-top:8px}
.offer p{color:var(--ink-2);margin-top:12px}
.offer ul{margin-top:24px;display:grid;gap:10px;font-size:15px;border-top:1px solid var(--line);padding-top:24px}
.offer li{display:flex;gap:10px}.offer li .ico{margin-top:3px;color:var(--ink)}
.offer .dbtn,.offer .btn-hero{margin-top:28px}
.offer.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.offer.dark p{color:#b9b4c7}.offer.dark .dmono{color:var(--lilac)}.offer.dark ul{border-color:#2f2c38}.offer.dark li .ico{color:var(--lilac)}
.offer.dark::before{background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(143,111,224,.45),transparent 60%)}

/* deliverables */
.features{margin-top:56px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;border-top:1px solid var(--line)}
.feat{display:grid;grid-template-columns:18px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.feat .ico{margin-top:4px;color:var(--lilac-deep)}
.feat h3{font-size:16px}
.feat p{margin-top:4px;color:var(--ink-2);font-size:14px}

/* livrables : feuilles blanches sur panneau rose */
.deliver{margin:56px 16px 0;border-radius:var(--r-lg);background:linear-gradient(135deg,#e6d8fb 0%,#f1d3ef 55%,#f8e6f3 100%);padding:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.doc{background:#fff;border-radius:var(--r-md);padding:24px;box-shadow:0 16px 40px rgba(70,40,120,.12);display:grid;gap:16px;align-content:start;opacity:0;transform:translateY(24px) scale(.98);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.deliver.in .doc{animation:docin .7s cubic-bezier(.2,.7,.2,1) forwards}
.deliver.in .doc:nth-child(2){animation-delay:.08s}.deliver.in .doc:nth-child(3){animation-delay:.16s}.deliver.in .doc:nth-child(4){animation-delay:.24s}.deliver.in .doc:nth-child(5){animation-delay:.32s}.deliver.in .doc:nth-child(6){animation-delay:.4s}
@keyframes docin{to{opacity:1;transform:none}}
.doc:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(70,40,120,.2)}
.doc-head{display:grid;gap:6px}
.doc-head .dmono{color:var(--lilac-deep)}
.doc h3{font-size:18px;line-height:1.25}
.doc p{color:var(--ink-2);font-size:14px}
.pv{height:112px;border-radius:var(--r-sm);background:var(--wash);border:1px solid var(--line);padding:14px;position:relative;overflow:hidden;display:grid;align-content:start;gap:8px}
.pv i{display:block}
.pv .l{height:6px;border-radius:3px;background:#ddd6ec;flex:1}
.pv .l.s{flex:0 0 40%}.pv .l.m{flex:0 0 65%}
.pv .row{display:flex;align-items:center;gap:8px}
/* aperçus animés à l'arrivée */
.pv .row,.pv-page i,.pv-proof .sheet,.pv-report .bars i{transform-origin:left center;opacity:0}
.deliver.in .pv .row,.deliver.in .pv-page i,.deliver.in .pv-proof .sheet{animation:pvin .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.5s + var(--i,0)*.1s)}
.pv .row:nth-child(1){--i:0}.pv .row:nth-child(2){--i:1}.pv .row:nth-child(3){--i:2}.pv .row:nth-child(4){--i:3}
@keyframes pvin{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.pv-list .tag{font-family:var(--mono);font-size:10px;color:var(--lilac-deep);background:#efe8fb;border-radius:4px;padding:2px 6px;line-height:1.3;white-space:nowrap}
.pv-page{gap:6px}
.pv-page .t{height:10px;width:60%;border-radius:4px;background:var(--ink);--i:0}
.pv-page .l{--i:1;flex:none;width:90%}.pv-page .l.m{--i:2;width:65%}
.pv-page .img{height:30px;border-radius:6px;background:var(--grad);--i:3}
.pv-page .cta{height:14px;width:40%;border-radius:4px;background:var(--lilac-deep);--i:4}
.pv-mesh{padding:0}
.pv-mesh svg{position:absolute;inset:0;width:100%;height:100%}
.pv-mesh .ln{stroke-dasharray:80;stroke-dashoffset:80}
.deliver.in .pv-mesh .ln{animation:draw .6s .7s cubic-bezier(.2,.7,.2,1) forwards}
.pv-mesh .hd{opacity:0}.deliver.in .pv-mesh .hd{animation:fadein .3s 1.25s forwards}
.pv-mesh .pg{position:absolute;width:26px;height:18px;border-radius:4px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 10px rgba(70,40,120,.12)}
.pv-mesh .pg::before{content:"";position:absolute;left:5px;top:5px;width:12px;height:3px;border-radius:2px;background:var(--lilac-deep)}
.pv-mesh .pg.hub{width:38px;height:26px;left:calc(50% - 19px);top:calc(50% - 13px)}
.pv-mesh .pg.hub::after{content:"";position:absolute;left:5px;bottom:5px;width:18px;height:5px;border-radius:2px;background:var(--ink)}
.pv-mesh .pg.a{left:8%;top:6%}.pv-mesh .pg.b{right:8%;top:6%}.pv-mesh .pg.c{left:6%;bottom:6%}.pv-mesh .pg.d{right:6%;bottom:6%}
.pv-report .bars{display:flex;align-items:flex-end;gap:5px;height:44px}
.pv-report .bars i{flex:1;height:var(--h);border-radius:2px;background:var(--lilac-deep);transform-origin:bottom;transform:scaleY(0);opacity:1}
.deliver.in .pv-report .bars i{animation:barup .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.6s + var(--k,0)*.06s)}
.pv-report .bars i:nth-child(1){--k:0}.pv-report .bars i:nth-child(2){--k:1}.pv-report .bars i:nth-child(3){--k:2}.pv-report .bars i:nth-child(4){--k:3}.pv-report .bars i:nth-child(5){--k:4}.pv-report .bars i:nth-child(6){--k:5}.pv-report .bars i:nth-child(7){--k:6}.pv-report .bars i:nth-child(8){--k:7}
@keyframes barup{to{transform:scaleY(1)}}
.pv-report .row b{font-family:var(--mono);font-size:11px;color:var(--ink);font-weight:400}
.pv-proof{padding:0}
.pv-proof .sheet{position:absolute;left:14px;right:14px;height:70px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px;display:grid;gap:6px;align-content:start}
.pv-proof .s3{top:8px;transform:scale(.92);--i:0;opacity:.6}.pv-proof .s2{top:18px;transform:scale(.96);--i:1;opacity:.8}.pv-proof .s1{top:28px;--i:2}
.pv-proof .sheet .dmono{font-size:10px;color:var(--lilac-deep);font-weight:400}
.pv-proof .sheet .l{display:block;height:5px;border-radius:3px;background:#ddd6ec;width:80%}.pv-proof .sheet .l.m{width:55%}
.deliver.in .pv-proof .sheet{animation-name:sheetin}
@keyframes sheetin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pv-routine .box{width:12px;height:12px;border-radius:3px;border:1.5px solid var(--ink);flex:none;position:relative}
.pv-routine .done .box{background:var(--lilac-deep);border-color:var(--lilac-deep)}
.pv-routine .done .box::after{content:"";position:absolute;left:3px;top:1px;width:3px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.pv-routine .done .l{background:#cfc6e4}

/* band */
.band{margin:0 16px;border-radius:var(--r-lg);padding:64px 40px;background:linear-gradient(120deg,#e6d8fb 0%,#f1d3ef 60%,#f8e6f3 100%);display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.band h2{font-size:28px;line-height:1.2}
.band p{margin-top:16px;color:#3d3750;font-size:18px}
.band ul{margin-top:24px;display:grid;gap:12px;color:#2d2938}
.band li{display:flex;gap:12px;align-items:flex-start}
.band li .ico{margin-top:3px}
.band .arrow-bg{position:absolute;right:-60px;bottom:-80px;width:420px;opacity:.12;transform:rotate(20deg)}

/* closing */
.close{border:1px solid var(--line);border-radius:var(--r-md);padding:40px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.close h2{font-size:22px}
.close p{margin-top:8px;color:var(--ink-2)}
.form{display:flex;gap:8px}
.form input,.form textarea,.form select{height:40px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px;font:inherit;font-size:14px;outline:none;background:#fff;width:100%}
.form input{width:260px}
.form input:focus,.form textarea:focus{border-color:var(--lilac-deep)}

footer{padding:40px 0 48px;border-top:1px solid var(--line);color:var(--ink-2);font-size:14px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .links{display:flex;gap:24px}
/* les quatre reseaux, a droite de la ligne de pied de page (Tim, 23/09) */
footer .socials{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0}
footer .socials li{margin:0}
footer .socials a{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;color:var(--ink-2);background:#fff;transition-property:color,border-color,transform,box-shadow;transition-duration:.22s;transition-timing-function:cubic-bezier(.2,0,0,1)}
footer .socials a::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,var(--c-top) 0%,#4f78ff 55%,var(--c-bottom) 100%);opacity:0;transition:opacity .22s cubic-bezier(.2,0,0,1)}
footer .socials a:hover,footer .socials a:focus-visible{color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(var(--shadow-rgb),.55)}
footer .socials a:hover::before,footer .socials a:focus-visible::before{opacity:1}
footer .socials a:focus-visible{outline:2px solid var(--c-top);outline-offset:3px}
footer .socials a:active{transform:translateY(-2px) scale(.96)}
footer .socials svg{display:block}

/* prose (secondary pages) */
.prose{max-width:720px}
.prose h2{font-size:28px;color:var(--lilac-deep);margin-top:64px;line-height:1.2}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:22px;margin-top:40px}
.prose p{margin-top:16px;color:var(--ink);font-size:17px}
.prose ul{margin-top:16px;display:grid;gap:8px}
.prose li{display:flex;gap:10px}.prose li .ico{margin-top:4px;color:var(--lilac-deep)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.dcard{border:1px solid var(--line);border-radius:var(--r-md);padding:32px}
.dcard h3{font-size:18px}
.dcard p{color:var(--ink-2);margin-top:8px;font-size:15px}
.cform{display:grid;gap:12px}
.cform label{font-size:14px;color:var(--ink-2);display:grid;gap:6px}
.cform textarea{height:120px;padding:12px;resize:vertical}

@media (max-width:900px){
  .deliver{grid-template-columns:1fr;margin:40px 8px 0;padding:16px;gap:16px}
  .nav-links{display:none}
  .native-hero{margin:8px 8px 0;height:auto;min-height:680px}
  .hero-copy{top:auto;bottom:0;transform:none;padding:24px 24px 88px;max-width:none}
  .hero-note{right:auto;left:24px;bottom:24px;text-align:left}
  .hero-topline{left:24px;right:24px}
  .hero-topline span:last-child{display:none}
  .hero-legend{display:none}
  .page-hero{padding:64px 24px 48px}
  .page-hero .arrow-bg{width:220px;opacity:.5}
  .method,.serp-wrap,.geo,.offers,.features,.band,.close,.two{grid-template-columns:1fr}
  .method-visual{position:relative;top:0;aspect-ratio:4/5}
  .mesh{scale:.95}
  .band{margin:0 8px;padding:40px 24px}
  .form{flex-direction:column}
  .form input{width:100%}
  section{padding:72px 0}
  .serp .list{height:calc(8*60px)}
}
@media (prefers-reduced-motion:reduce){
  .native-hero canvas{display:none}
  .ticker-track{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .native-hero h1 .w,.hero-sub,.dhero-cta,.hero-note{animation:none;opacity:1;transform:none}
}

/* Source: public/da/theme-monaco.css */
/* Thème « Outremer » : bleu électrique #2f4fe0 plein en haut, bleu ciel #7fa0ff en bas, grain, texte blanc sur les panneaux.
   Choix de Tim le 2026-09-07 après-midi (le rouge #E10700 jugé agressif). Se charge APRÈS styles.css et ne touche qu'aux couleurs.
   Toute la couleur découle de --c-top et --c-bottom ; ?c=nom dans l'adresse permet d'essayer les autres palettes de palettes.js. */
:scope{
  --ink:#2b2b30; --ink-2:#6f6f78; --line:#e8e6e6; --paper:#fff;
  --c-top:#2f4fe0; --c-bottom:#7fa0ff; --accent-rgb:47,79,224; --shadow-rgb:33,55,157; --tint:#e8eeff; --tint-2:#e3eaff; --tint-3:#ccd9ff;
  --lilac:var(--c-bottom); --lilac-deep:var(--c-top); --rose:var(--c-bottom); --wash:#f7f9ff;
  --grad:linear-gradient(160deg,var(--c-top) 0%,var(--c-top) 45%,var(--c-bottom) 100%);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* grain sur tous les panneaux rouges */
.chat,.deliver{position:relative}
.native-hero,.page-hero,.method-visual,.chat,.deliver,.band{isolation:isolate}
.native-hero::after,.page-hero::after,.method-visual::after,.chat::after,.deliver::after,.band::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px}
.native-hero::after{z-index:0}
.hero-labels{z-index:1}
.hero-copy{z-index:2}
/* les cartes blanches restent nettes au-dessus du grain */
.doc,.bub,.pg,.inbox{position:relative}
.doc,.bub,.ph,.pg,.pgm,.inbox{z-index:1}

/* texte blanc sur les panneaux */
.native-hero h1,.hero-sub,.hero-topline,.hero-note,.hero-note .dmono,.hero-legend,.page-hero h1,.page-hero p,.band h2,.band p,.band ul,.band li{color:#fff}
.hero-sub,.hero-note,.hero-note .dmono,.hero-topline,.hero-legend,.band p{color:rgba(255,255,255,.86)}
.hero-legend i{background:#fff}
.hero-legend i.l{background:#fff;opacity:.9}
.hl{color:#fff}.hl.dmono{color:rgba(255,255,255,.8)}
.hl.pub .dmono,.hl.lead .dmono{color:var(--lilac-deep)}
.hl.tip{background:#2b2b30}.hl.tip .dmono{color:var(--lilac)}.hl.tip .bar i{background:var(--lilac)}
.native-hero .btn-ink{background:#fff;color:var(--ink)}.native-hero .btn-ink:hover{background:#ffe3e5}
.native-hero .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}.native-hero .btn-ghost:hover{background:rgba(255,255,255,.12)}
.band .btn-ink{background:#fff;color:var(--ink)}.band .btn-ink:hover{background:#ffe3e5}

/* panneaux secondaires en dégradé Monaco */
.deliver{background:var(--grad)}
.band{background:var(--grad)}
.pv-page .img{background:var(--grad)}

/* ombres : plus de violet */
.ph,.pg,.inbox,.doc{box-shadow:0 20px 50px rgba(var(--shadow-rgb),.18)}
.doc:hover{box-shadow:0 28px 60px rgba(var(--shadow-rgb),.24)}
.pgm{box-shadow:0 10px 26px rgba(var(--shadow-rgb),.16)}
.pgm.hub{box-shadow:0 16px 40px rgba(var(--shadow-rgb),.22)}
.bub.a{box-shadow:0 12px 32px rgba(var(--shadow-rgb),.15)}
.offer:hover{box-shadow:0 24px 60px rgba(var(--shadow-rgb),.12)}
.hl.pub{box-shadow:0 8px 24px rgba(var(--shadow-rgb),.12)}
.hl.lead{box-shadow:0 12px 32px rgba(var(--shadow-rgb),.15)}
.pv-mesh .pg{box-shadow:0 4px 10px rgba(var(--shadow-rgb),.12)}
.res.you{box-shadow:0 12px 30px rgba(43,43,48,.25)}

/* teintes lilas restantes */
.pg .b,.pgm .l,.pv .l,.pv-proof .sheet .l,.res .l i{background:var(--tint-2)}
.pv-list .tag{background:var(--tint)}
.btn-white:hover{background:#ffe3e5}
.offer::before{background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb),.16),transparent 60%)}
.offer.dark::before{background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(239,107,114,.45),transparent 60%)}
.offer.dark p{color:#c9c6cc}.offer.dark .dmono,.offer.dark li .ico{color:var(--lilac)}
.ticker::before{background:linear-gradient(90deg,#fff,transparent)}

/* dernières teintes lilas des schémas */
.manifesto .w{color:#d9d4d5}
.res .l i:first-child{background:var(--tint-3)}
.pv-routine .done .l{background:var(--tint-3)}
.res.you .l i{background:#4a4a52}
.hl.tip .dmono{color:var(--lilac)}

/* Titres H2 sur fond blanc : outremer plein dans les lettres, avec le même grain que les panneaux (Tim, 2026-09-08 : « faire plein, on retire le dégradé mais on laisse grainy et noisy »).
   Une seule image SVG (aplat + bruit fractal fusionnés) découpée par le texte : aucun mode de fusion CSS requis, même rendu Chrome / Safari / Firefox.
   Couleur figée sur l'outremer (une image ne lit pas les tokens). Les H2 posés sur un panneau bleu (.band, .final, .bc-final) restent blancs. */
:scope{--grad-text:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='240' preserveAspectRatio='none'><defs><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' result='t'/><feColorMatrix in='t' type='saturate' values='0' result='m'/><feComponentTransfer in='m' result='a'><feFuncA type='linear' slope='.7'/></feComponentTransfer><feComposite in='a' in2='SourceGraphic' operator='in' result='c'/><feBlend in='SourceGraphic' in2='c' mode='overlay'/></filter></defs><rect width='100%' height='100%' fill='%232f4fe0' filter='url(%23n)'/></svg>")}
.lead h2,.bc-faq-head h2,.about-copy h2,.prose h2,.final .close h3{color:transparent;-webkit-text-fill-color:transparent;background-image:var(--grad-text);background-size:100% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;width:fit-content;max-width:100%}

/* Source: public/da/home-monaco.css */
/* Home repensée dans la DA rouge Monaco (2026-09-07). Se charge après styles.css et theme-monaco.css.
   Règle : tout fond coloré est un dégradé avec grain. Le blanc reste le fond de page. */

/* échelle typo plus grande */
.native-hero h1{font-size:clamp(44px,6vw,76px);line-height:1.02;letter-spacing:-.03em;max-width:720px}
.hero-copy{max-width:760px}
.hero-sub{font-size:20px;max-width:560px;margin-top:20px}
.dhero-cta{margin-top:28px}
.manifesto{font-size:clamp(32px,4.4vw,56px);line-height:1.12}
.lead h2,.band h2{font-size:36px;letter-spacing:-.025em}
.lead p{font-size:19px;margin-top:28px}
/* règle d'espacement de Tim (2026-09-19), valable sur toutes les pages : de l'air entre un titre et son texte, entre un titre et le bloc qui suit */
.method,.offers{margin-top:80px}
@media (max-width:900px){.lead p{margin-top:20px}.method,.offers{margin-top:56px}}

/* grain commun aux nouveaux panneaux */
.ticker,.proof,.offer.red,.final{position:relative;isolation:isolate}
.ticker::after,.proof::after,.offer.red::after,.final::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px}
.ticker>*,.proof>*,.offer.red>*,.final>*{position:relative;z-index:1}

/* bandeau de requêtes : ruban rouge sous le hero */
.ticker{margin:8px 16px 0;border:0;border-radius:var(--r-md);background:var(--grad);padding:16px 0;overflow:hidden}
.ticker::before{display:none}
.ticker-track span{color:#fff;font-size:14px}
.ticker-track span::before{background:#fff;opacity:.8}

/* preuves : deux panneaux rouges, chacun porte son schéma sur une feuille blanche */
.proofs{margin:80px 16px 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.proof{border-radius:var(--r-lg);background:var(--grad);padding:40px;display:grid;gap:28px;align-content:start;color:#fff;overflow:hidden}
.proof-head{display:grid;gap:10px}
.proof-head .dmono{color:rgba(255,255,255,.8)}
.proof-head h3{font-size:24px;line-height:1.2;letter-spacing:-.02em;max-width:22ch}
.proof .serp{border:0;box-shadow:0 20px 50px rgba(var(--shadow-rgb),.25);max-width:520px}
.proof .chat{background:none;padding:0;min-height:0;border-radius:0;max-width:520px;align-self:end}
.proof .bub.u{background:#2b2b30}
.proof-cap p{color:rgba(255,255,255,.86);font-size:16px;max-width:52ch}
.proof-cap .row{display:flex;gap:12px;margin-top:16px;align-items:center}
.proof-cap .state{font-family:var(--mono);font-size:12px;color:#fff}
.proof-cap ul{margin-top:16px;display:grid;gap:10px;font-size:15px}
.proof-cap li{display:flex;gap:10px}.proof-cap li .ico{margin-top:3px;color:#fff}
.proof .res.you .tag{background:#fff;color:var(--lilac-deep)}

/* offre formation : panneau rouge au lieu de la carte encre */
.offer.red{background:var(--grad);color:#fff;border-color:transparent}
.offer.red p{color:rgba(255,255,255,.86)}
.offer.red .dmono{color:rgba(255,255,255,.8)}
.offer.red ul{border-color:rgba(255,255,255,.3)}
.offer.red li .ico{color:#fff}
.offer.red::before{background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 60%)}
.offer.red:hover{box-shadow:0 24px 60px rgba(var(--shadow-rgb),.25)}

/* panneau final, « les cartes de verre » (choix Tim 2026-09-07) : quatre refus en cartes de verre, la feuille blanche du formulaire à droite */
.final{margin:0 16px;border-radius:var(--r-lg);background:var(--grad);padding:96px 48px 96px 180px;display:grid;grid-template-columns:minmax(0,460px);justify-content:start;align-items:center;color:#fff;overflow:hidden}
.final h2{font-size:clamp(32px,3.6vw,44px);line-height:1.05;letter-spacing:-.03em;max-width:12ch}
.final-copy>p{margin-top:14px;color:rgba(255,255,255,.86);font-size:18px;max-width:44ch}
.final .cards{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.final .dcard{border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:18px;display:grid;gap:10px;min-height:128px;align-content:start;transition:background .3s,transform .3s,opacity .6s cubic-bezier(.2,.7,.2,1),filter .6s}
.final .dcard:hover{background:rgba(255,255,255,.2);transform:translateY(-3px)}
.final .dcard .dmono{color:rgba(255,255,255,.75)}
.final .dcard b{font-size:17px;line-height:1.35;font-weight:500;letter-spacing:-.01em}
.final.in .dcard{transition-delay:calc(.25s + var(--i)*.16s)}
.final.in .dcard,.final.in .pass{opacity:1;transform:none;filter:none}
.final .form{flex-direction:column}
.final .form input{width:100%}
.final .form .dbtn{justify-content:center}
.sample{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:10px}
.sample .dmono{color:var(--ink-2)}
.sample ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sample li{display:flex;align-items:center;gap:10px;font-size:14px;min-height:22px;opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s}
.sample li.on{opacity:1;transform:none}
.sample .tag{font-family:var(--mono);font-size:11px;color:var(--lilac-deep);background:var(--tint);border-radius:4px;padding:2px 6px;line-height:1.3;font-style:normal}
.sample span[data-text]::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--ink);vertical-align:-2px;margin-left:2px;opacity:0}
.sample li.typing span[data-text]::after{opacity:1;animation:blink 1s steps(1) infinite}
@media (max-width:900px){
  .native-hero h1{font-size:clamp(34px,9vw,44px)}
  .hero-sub{font-size:17px}
  .manifesto{font-size:clamp(26px,7vw,34px)}
  .lead h2,.band h2,.final h2{font-size:28px}
  .proofs{grid-template-columns:1fr;margin:40px 12px 0}
  .proof{padding:24px}
  .ticker{margin:8px 12px 0}
  .final{grid-template-columns:1fr;padding:36px 22px;margin:0 12px;gap:28px}
  .final .cards{grid-template-columns:1fr}
}

/* le schéma occupe la hauteur du panneau : la feuille en haut, le chat en bas */
.proof{grid-template-rows:auto 1fr auto}
.proof .serp{align-self:start}
.proof .chat{align-self:end}
.proof .chat::after{display:none}

.offer.red{box-shadow:0 24px 60px rgba(var(--shadow-rgb),.18)}


/* panneau final : le formulaire en feuille blanche reçoit la même ombre que la citation GEO */

/* logos clients sous le hero : emplacements à remplacer par les vrais logos (fichiers à fournir) */
.logos{margin:24px 16px 0;padding:8px 40px;display:grid;grid-template-columns:repeat(6,1fr);gap:24px;align-items:center}
.logo-slot{display:flex;justify-content:center;color:var(--ink-2);opacity:.45;transition:opacity .3s}
.logo-slot:hover{opacity:.9}
.logo-slot svg{width:100%;max-width:120px;height:auto}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr);padding:8px 12px;margin:16px 12px 0}}

/* mobile : rien ne déborde des panneaux de preuve */
.proof>*,.engine,.engine .glass{min-width:0}
.eng-src i{max-width:100%;overflow-wrap:anywhere;white-space:normal}
@media (max-width:900px){.eng-bar{font-size:15px;min-height:52px}.eng-ans{font-size:16px}}
.proof,.engine{grid-template-columns:minmax(0,1fr)}
/* panneau final : une seule colonne depuis le retrait du bloc « Avant de commencer » */

.final>*{min-width:0}

.final .cards{align-self:stretch;grid-template-rows:1fr 1fr}
.final .dcard{min-height:0;align-content:space-between}
@media (max-width:900px){.final{grid-template-columns:1fr}.final-copy{grid-template-rows:auto}.final .cards{grid-template-rows:auto}.final .dcard{min-height:0}}

/* méthode, étape 03 : l'exemple de chaîne de pages */
.chain{margin:14px 0 4px;display:grid;gap:0;padding:0;list-style:none;font-size:15px;font-weight:500;color:var(--ink)}
.chain li{position:relative;padding:6px 0 6px 26px}
.chain li::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1.5px;background:var(--line)}
.chain li::after{content:"";position:absolute;left:4px;top:calc(50% - 5px);width:8px;height:8px;border-radius:50%;background:var(--lilac-deep)}
.chain li:first-child::before{top:50%}.chain li:last-child::before{bottom:50%}

/* logo « le verre » dans la barre (choix Tim 2026-09-07) */
.logo .mark{width:26px;height:26px;transition:transform .3s ease}
.logo:hover .mark{transform:translateY(-1px) rotate(-4deg)}
.logo{gap:9px}

/* manifeste épinglé : l'écran reste en place, les mots se peignent au fil du défilement, la page repart quand la phrase est entière */
.manifesto-pin{height:260vh;padding:0}
.manifesto-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.manifesto{max-width:1100px}
.manifesto .w{transition:color .25s ease}
@media (max-width:900px){.manifesto-pin{height:200vh}}
@media (prefers-reduced-motion:reduce){.manifesto-pin{height:auto;padding:72px 0}.manifesto-stick{position:static;height:auto}.manifesto .w{color:var(--ink)}.manifesto .w.acc{color:var(--lilac-deep)}}

/* repère sous les boutons du hero */
.hero-who{margin-top:22px;color:rgba(255,255,255,.75);opacity:0;animation:up .7s .6s cubic-bezier(.2,.7,.2,1) forwards}

/* à propos : le portrait sur panneau bleu grainé, le texte et les chiffres en liste à filets */
.about{margin:80px 16px 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.about-photo{margin:0;padding:24px;display:grid;gap:14px;justify-items:start;border-radius:var(--r-lg);background:var(--grad);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.about-photo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px}
.about-photo>*{position:relative;z-index:1}
.about-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-md);box-shadow:0 24px 60px rgba(var(--shadow-rgb),.3)}
.about-photo .dmono{color:rgba(255,255,255,.8)}
.about-copy{display:grid;gap:16px;max-width:620px}
.about-copy h2{font-size:clamp(32px,3.6vw,44px);line-height:1.05;letter-spacing:-.03em;color:var(--lilac-deep)}
.about-who{color:var(--ink-2)}
.about-copy>p:not(.dmono){font-size:18px;line-height:1.5;color:var(--ink-2)}
.about-num,.about-aud{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:8px 0 0;border-top:1px solid var(--line)}
.about-num div,.about-aud div{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.about-num dt,.about-aud dt{color:var(--ink-2)}
.about-num dd{margin:0;font-size:32px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.about-aud dd{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.about-aud{margin-top:0;border-top:0}
@media (max-width:900px){.about{grid-template-columns:1fr;gap:28px;margin:40px 12px 0}.about-num,.about-aud{grid-template-columns:1fr 1fr 1fr}.about-num dd{font-size:26px}}

/* de l'air entre les deux phases, la roadmap et « Avant de commencer » (Tim, 2026-09-19 : trop chargé) */
#livrables{padding-top:80px;padding-bottom:64px}
#contact{padding-top:96px}
@media (max-width:900px){#livrables{padding-top:48px;padding-bottom:32px}#contact{padding-top:56px}}

/* ═══ La méthode épinglée (2026-09-19 soir) : pendant le défilement la page ne bouge pas, l'étape change
   (01 → 04, le visuel suit), puis après « Traquer la data » la page repart vers la section suivante.
   Même mécanique que le manifeste : un conteneur haut, un contenu collant de 100vh. ═══ */
.method-pin{height:360vh;padding-bottom:0}
.method-stick{position:sticky;top:0;height:100vh;padding-top:72px;box-sizing:border-box;display:grid;align-content:center;gap:0} /* la barre de navigation flotte en haut : on garde sa hauteur libre */
.method-pin .lead{margin-top:-8px}
.method-pin .method{margin-top:48px;align-items:center}
.method-pin .method-visual{position:relative;top:auto;max-height:calc(100vh - 360px)}
.method-pin .method-steps{display:grid;gap:0}
/* sans numéro, et plus gros, pour faire le poids face au visuel */
.method-pin .mstep .num{display:none}
.method-pin .mstep{grid-template-columns:1fr;gap:0}
.method-pin .mstep h3{font-size:clamp(28px,2.6vw,36px);line-height:1.1;letter-spacing:-.025em}
.method-pin .mstep p{margin-top:18px;font-size:19px;line-height:1.5}
.method-pin .mstep ul{margin-top:22px;gap:12px;font-size:17px;line-height:1.45}
.method-pin .mstep li .ico{width:20px;height:20px;margin-top:4px}
.method-pin .mstep .chain{font-size:16px}
.method-pin .mstep{grid-area:1/1;border-top:0;padding:0;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s cubic-bezier(.2,0,0,1),transform .45s cubic-bezier(.2,0,0,1)}
.method-pin .method-steps.tracking .mstep{opacity:0}
.method-pin .method-steps.tracking .mstep.on,.method-pin .mstep.on{opacity:1;transform:none;pointer-events:auto}
/* l'avancement : quatre traits sous le texte, celui de l'étape en cours en outremer */
.method-pin .method-steps::after{content:"";grid-area:2/1;height:0}
.method-dots{display:flex;gap:8px;margin-top:28px}
.method-dots i{display:block;width:34px;height:3px;border-radius:2px;background:var(--tint-3);transition:background .3s cubic-bezier(.2,0,0,1)}
.method-dots i.on{background:var(--lilac-deep)}
@media (max-height:760px){.method-pin .method{margin-top:28px}.method-pin .lead p{display:none}}
@media (max-width:900px){
  /* sur téléphone, pas d'épinglage : la liste des étapes défile normalement */
  .method-pin{height:auto}
  .method-stick{position:static;height:auto;display:block}
  .method-pin .method{margin-top:40px}
  .method-pin .method-visual{max-height:none}
  .method-pin .mstep{grid-area:auto;border-top:1px solid var(--line);padding:32px 0;opacity:1;transform:none;pointer-events:auto;grid-template-columns:48px 1fr;gap:24px}
  .method-pin .mstep .num{display:block}
  .method-pin .mstep h3{font-size:22px}.method-pin .mstep p{font-size:16px}.method-pin .mstep ul{font-size:14px}
  .method-pin .method-steps.tracking .mstep{opacity:.35}.method-pin .method-steps.tracking .mstep.on{opacity:1}
  .method-dots{display:none}
}

/* ═══ La roadmap (2026-09-19 soir, refaite) : un Gantt dont les barres sont les cases douces elles-mêmes.
   Trois colonnes de mois, filets fins ; chaque livrable est une case blanc cassé posée à sa place dans le temps,
   large comme sa durée, avec son pictogramme au trait, son titre et sa ligne grise. 01, 02, 03 s'enchaînent sur
   la première rangée, 04 dessous, et trois pastilles « Rapport mensuel » à chaque fin de mois. Les cases arrivent
   une à une, de gauche à droite, à l'entrée dans l'écran (.rv → .in). ═══ */
.rmp-head{margin-top:8px}
.rmp-head h2{margin:0;font-size:clamp(34px,4.3vw,60px);line-height:1.02;letter-spacing:-.035em;color:var(--ink);max-width:12ch}
.rmc-wrap{margin-top:56px;--card:172px;--gap:12px}
.rmc-months{display:grid;grid-template-columns:repeat(3,1fr);height:34px;border-bottom:1px solid var(--line)}
.rmc-months span{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-2);padding-left:2px}
.rmc-board{position:relative;height:calc(2*var(--card) + 3*var(--gap) + 44px + 16px);
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(100%/3 - 1px),var(--line) calc(100%/3 - 1px) calc(100%/3));border-right:1px solid var(--line)}
.rmc{position:absolute;top:calc(var(--gap) + var(--r)*(var(--card) + var(--gap)));left:calc(var(--s)*100%/3 + 6px);width:calc(var(--d)*100%/3 - 12px);height:var(--card);
  border-radius:22px;background:#fafafa;border:1px solid #ececec;padding:22px 22px 20px;display:grid;align-content:end;gap:6px;overflow:hidden;
  transition:border-color .3s cubic-bezier(.2,0,0,1)}
.rmc:hover{border-color:#dcdcdc}
.rmc svg{position:absolute;left:20px;top:18px;width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rmc b{font-size:17px;line-height:1.2;letter-spacing:-.015em;font-weight:600;color:var(--ink)}
.rmc>span{font-size:14px;line-height:1.35;color:var(--ink-2)}
.rmc-chip{position:absolute;top:calc(3*var(--gap) + 2*var(--card) + 4px);left:calc(var(--k)*100%/3 - 168px);width:162px;height:44px;border-radius:14px;background:#fafafa;border:1px solid #ececec;
  display:flex;align-items:center;gap:10px;padding:0 14px;font-size:14px;color:var(--ink);white-space:nowrap}
.rmc-chip svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (max-width:1100px){.rmc-wrap{--card:186px}.rmc{padding:18px 16px 16px}.rmc b{font-size:15px}.rmc>span{font-size:13px}.rmc svg{width:26px;height:26px;left:16px;top:16px}.rmc-chip{width:150px;left:calc(var(--k)*100%/3 - 156px);font-size:13px}}
@media (max-width:900px){
  /* téléphone : l'ordre suffit, les cases s'empilent, les rapports en fin de liste */
  .rmc-wrap{margin-top:40px}
  .rmc-months{display:none}
  .rmc-board{height:auto;background-image:none;border-right:0;display:grid;gap:12px}
  .rmc{position:static;width:auto;height:auto;min-height:0;padding:22px 20px 20px 66px}
  .rmc svg{left:20px;top:22px}
  .rmc-chip{position:static;width:auto;height:44px}
  .rmp-head h2{font-size:clamp(30px,8.6vw,38px)}
}
/* la séquence au défilement est pilotée par GSAP (script) ; sans script, tout est visible */

/* ===== entrée du site, moins d'une seconde : voile bleu grainé, le logo se compose, le voile remonte ===== */
.intro{position:fixed;inset:0;z-index:100;background:var(--grad);display:grid;place-items:center;isolation:isolate;overflow:hidden;border-bottom-left-radius:0;border-bottom-right-radius:0;animation:intro-out .5s .42s cubic-bezier(.7,0,.2,1) forwards;pointer-events:none}
.intro::after{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px}
.intro-mark{width:96px;height:96px;position:relative;z-index:1}
/* l'approche (choix Tim 2026-09-08) : le logo arrive plus grand et flou, se resserre et se fixe net */
.intro-mark{animation:approche .62s .02s cubic-bezier(.16,.8,.24,1) both}
@keyframes approche{from{opacity:0;transform:scale(1.42) rotate(-5deg);filter:blur(9px)}55%{opacity:1}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes intro-out{to{transform:translateY(-100%);border-bottom-left-radius:40px;border-bottom-right-radius:40px}}
/* le hero attend la fin du voile */
body.intro-on .native-hero h1 .w,body.intro-on .hero-sub,body.intro-on .dhero-cta,body.intro-on .hero-who,body.intro-on .bc-repere,body:has(.intro:not(.done)) .native-hero h1 .w,body:has(.intro:not(.done)) .hero-sub,body:has(.intro:not(.done)) .dhero-cta,body:has(.intro:not(.done)) .bc-repere{animation-play-state:paused}
body.intro-done .intro,.intro.done{display:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* clients sous le hero : les mêmes noms que le bandeau d'organikk.co, en défilement lent */
.logos{display:block;margin:24px 16px 0;padding:10px 0;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.logos-track{display:flex;width:max-content;gap:56px;animation:logos-defile 42s linear infinite}
.logos:hover .logos-track{animation-play-state:paused}
@keyframes logos-defile{to{transform:translate3d(-50%,0,0)}}
.logos-seq{display:flex;flex:none;gap:56px;align-items:center}
.logo-slot{display:inline-flex;align-items:center;white-space:nowrap;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink-2);opacity:.55;text-decoration:none;transition:opacity .3s,color .3s}
.logo-slot:hover{opacity:1;color:var(--ink)}
a.logo-slot:hover{color:var(--lilac-deep)}
@media (prefers-reduced-motion:reduce){.logos-track{animation:none;flex-wrap:wrap}}
@media (max-width:900px){.logos{margin:16px 12px 0}.logos-seq,.logos-track{gap:32px}.logo-slot{font-size:16px}}

/* verre sans flou de fond : le flou étalait le grain et faisait apparaître une jointure verticale dans les cartes */
.final .dcard,.proof .serp,.proof .serp .bar,.proof .res,.engine .glass,.eng-bar,.proof .bub.u{backdrop-filter:none;-webkit-backdrop-filter:none}

/* feuille de contact : le call, ses conditions, l'email */

/* le nom en grand, en bas de page : lettres blanches, contour en dégradé bleu grainé */
.wordmark{max-width:1200px;margin:8px auto 40px;padding:0 24px}
.wordmark svg{display:block;width:100%;height:auto;aspect-ratio:1200/230;overflow:visible}
.wordmark text{font-family:var(--sans);font-weight:600;font-size:260px;letter-spacing:-.04em}
footer{border-bottom:0}
@media (max-width:900px){.wordmark{padding:0 12px;margin-bottom:24px}}
/* le nom s'efface vers le bas, les traits vont du bleu profond au bleu ciel */
.wordmark svg{-webkit-mask-image:linear-gradient(180deg,#000 18%,rgba(0,0,0,.55) 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 18%,rgba(0,0,0,.55) 60%,transparent 100%)}

/* clients sous le hero : au survol, le nom prend le dégradé bleu grainé */
.logo-slot{transition:opacity .3s}
.logo-slot:hover,a.logo-slot:hover{opacity:1;color:transparent;background-image:var(--grain),var(--grad);background-size:140px 140px,100% 100%;background-blend-mode:overlay,normal;-webkit-background-clip:text;background-clip:text}

/* ═══ Deux objectifs, un seul système (2026-09-19) ═══
   Les deux canaux ne sont plus présentés comme deux cartes isolées. Ils partagent
   une matière propriétaire et convergent vers le même résultat commercial. */

.objective-system{
  margin:80px 16px 0;border:1px solid var(--line);border-radius:32px;
  background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);
  box-shadow:0 30px 90px rgba(var(--shadow-rgb),.10);overflow:hidden;
}
.objective-lane{
  display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);
  gap:clamp(34px,5vw,72px);align-items:center;padding:40px clamp(32px,5vw,72px);
  min-width:0;
}
.objective-ai{grid-template-columns:minmax(0,1.22fr) minmax(280px,.78fr)}
.objective-copy{display:grid;gap:18px;max-width:470px}
.objective-channel{display:flex;align-items:center;gap:11px;color:var(--lilac-deep)}
.objective-channel .dmono{font-size:13px;font-weight:500}
.objective-icon{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  color:var(--lilac-deep);background:var(--tint);border:1px solid var(--tint-3);
}
.objective-icon svg{width:19px;height:19px}
.brand-logo{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--tint);border:1px solid var(--tint-3)}
.brand-google svg{width:25px;height:25px}
.brand-stack{display:flex;align-items:center;gap:7px}
.brand-stack .brand-logo{width:32px;height:32px;border-radius:10px}
.brand-stack .brand-logo svg{width:18px;height:18px;fill:currentColor;display:block}
.brand-chatgpt{color:#000}.brand-claude{color:#D97757}.brand-perplexity{color:#20B8CD}
.objective-ai .objective-icon{display:none}

/* Le cluster reste lisible par ses pages, sans flèches décoratives. */
.scene[data-i="2"] .mesh .links{display:none}
.objective-copy h3{
  font-size:clamp(28px,3vw,42px);line-height:1.06;letter-spacing:-.035em;max-width:14ch;
}
.objective-copy>p{color:var(--ink-2);font-size:17px;line-height:1.55;max-width:45ch}
.objective-signal{
  display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:18px;
  border-top:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink);
}
.objective-signal i{
  width:8px;height:8px;border-radius:50%;background:var(--lilac-deep);
  box-shadow:0 0 0 5px var(--tint);
}
.objective-demo{
  width:100%;min-width:0;border-radius:22px;padding:26px;background:var(--grad);
  position:relative;isolation:isolate;overflow:hidden;
  box-shadow:0 22px 52px rgba(var(--shadow-rgb),.22);
}
.objective-demo::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px;
}
.objective-demo>*{position:relative;z-index:1}
.objective-serp{max-width:none;justify-self:stretch}
.objective-system .serp{border:0;padding:20px;background:rgba(255,255,255,.97);box-shadow:0 18px 40px rgba(var(--shadow-rgb),.24)}
.objective-system .serp .bar{height:46px;border-radius:12px;margin-bottom:16px;background:#fff}
.objective-system .serp .list{height:calc(4*56px)}
.objective-system .res{height:54px}
.objective-system .res.you{background:var(--ink)}
.objective-system .res.you .tag{background:var(--lilac-deep);color:#fff}
.objective-system .engine{max-width:none;min-height:316px;align-content:center}
.objective-system .eng-bar,.objective-system .engine .glass{background:rgba(255,255,255,.14)}
.objective-system .eng-src i.you.hit{color:var(--lilac-deep)}
/* ═══ Étape 04 (2026-09-19) : la boîte de réception Gmail, reproduite à l'échelle.
   La carte fait 520 px de large dans les cotes de Gmail ; --u vaut un de ces pixels, ramené à 92 % du panneau. */
.scene[data-i="3"]{container-type:inline-size}
.gm{
  --u:calc(92cqw / 520);width:calc(520*var(--u));position:relative;z-index:1;text-align:left;
  font-family:Roboto,"Helvetica Neue",Arial,sans-serif;font-size:calc(14*var(--u));line-height:1.3;color:#1f1f1f;-webkit-font-smoothing:antialiased;
  background:#f6f8fc;border-radius:calc(16*var(--u));padding:0 calc(12*var(--u)) calc(12*var(--u));
  box-shadow:0 20px 50px rgba(var(--shadow-rgb),.18);
}
.gm-top{display:flex;align-items:center;gap:calc(10*var(--u));height:calc(64*var(--u));padding:0 calc(4*var(--u))}
.gm-ico{width:calc(24*var(--u));height:calc(24*var(--u));fill:none;stroke:#444746;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gm-ico.s{width:calc(20*var(--u));height:calc(20*var(--u))}
.gm-logo{display:inline-flex;align-items:center;gap:calc(6*var(--u));margin:0 calc(6*var(--u)) 0 calc(2*var(--u));font-size:calc(22*var(--u));font-weight:500;color:#5f6368;letter-spacing:-.01em}
.gm-logo svg{width:calc(32*var(--u));height:calc(24*var(--u));display:block}
.gm-search{flex:1;min-width:0;display:flex;align-items:center;gap:calc(10*var(--u));height:calc(46*var(--u));padding:0 calc(14*var(--u));border-radius:999px;background:#e9eef6;color:#444746;font-size:calc(15*var(--u));white-space:nowrap;overflow:hidden}
.gm-search svg{width:calc(22*var(--u));height:calc(22*var(--u));fill:none;stroke:#444746;stroke-width:2;stroke-linecap:round;flex:none}
.gm-avatar{width:calc(32*var(--u));height:calc(32*var(--u));border-radius:50%;background:var(--lilac-deep);color:#fff;display:grid;place-items:center;font-size:calc(15*var(--u));font-weight:500;flex:none}
.gm-list{background:#fff;border-radius:calc(16*var(--u));overflow:hidden;padding-bottom:calc(6*var(--u))}
.gm-bar{display:flex;align-items:center;gap:calc(14*var(--u));height:calc(48*var(--u));padding:0 calc(16*var(--u))}
.gm-bar .gm-chk+.gm-ico{margin-left:calc(-10*var(--u))}
.gm-range{margin-left:auto;font-size:calc(12*var(--u));color:#444746}
.gm-range b{font-weight:400}
.gm-chk{width:calc(18*var(--u));height:calc(18*var(--u));border:2px solid #5f6368;border-radius:calc(2*var(--u));flex:none;opacity:.75}
.gm-tabs{display:flex}
.gm-tabs span{flex:1;position:relative;display:flex;align-items:center;gap:calc(12*var(--u));height:calc(48*var(--u));padding:0 calc(16*var(--u));font-size:calc(14*var(--u));color:#444746;white-space:nowrap;overflow:hidden}
.gm-tabs span svg{width:calc(20*var(--u));height:calc(20*var(--u));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gm-tabs span.on{color:#0b57d0;font-weight:500}
.gm-tabs span.on::after{content:"";position:absolute;left:calc(8*var(--u));right:calc(8*var(--u));bottom:0;height:calc(3*var(--u));border-radius:calc(3*var(--u)) calc(3*var(--u)) 0 0;background:#0b57d0}
.gm-row{
  display:flex;align-items:center;gap:calc(12*var(--u));height:calc(40*var(--u));padding:0 calc(16*var(--u));
  font-size:calc(14*var(--u));color:#444746;background:#f2f6fc;box-shadow:inset 0 -1px 0 #e6e9ef;
}
.gm-row.unread{background:#fff;color:#1f1f1f}
.gm-star{width:calc(20*var(--u));height:calc(20*var(--u));fill:none;stroke:#5f6368;stroke-width:1.8;stroke-linejoin:round;flex:none;opacity:.8}
.gm-from{flex:none;width:calc(120*var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-subj{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-subj b{font-weight:400}
.gm-snip{color:#5f6368}
.gm-row.unread .gm-from,.gm-row.unread .gm-subj b,.gm-row.unread .gm-when{font-weight:700}
.gm-label{display:inline-block;vertical-align:middle;margin-right:calc(8*var(--u));padding:0 calc(6*var(--u));height:calc(18*var(--u));line-height:calc(18*var(--u));border-radius:calc(4*var(--u));font-style:normal;font-size:calc(11*var(--u));font-weight:500;background:var(--tint);color:var(--lilac-deep);white-space:nowrap;max-width:calc(150*var(--u));overflow:hidden;text-overflow:ellipsis}
.gm-when{flex:none;margin-left:auto;font-size:calc(12*var(--u));color:#444746}
.gm-row.unread .gm-when{color:#1f1f1f}
/* les demandes arrivent une à une, de la plus récente en haut ; les messages déjà lus sont là depuis le début */
.gm-row.unread{opacity:0;transform:translateY(-14px)}
.scene.on .gm-row.unread{animation:drop .5s cubic-bezier(.2,.7,.2,1) forwards}
.scene.on .gm-row.unread:nth-child(4){animation-delay:.25s}.scene.on .gm-row.unread:nth-child(5){animation-delay:.5s}
.scene.on .gm-row.unread:nth-child(6){animation-delay:.75s}.scene.on .gm-row.unread:nth-child(7){animation-delay:1s}

/* ═══ Le téléphone (2026-09-19) : une conversation ChatGPT sur iPhone, mode clair, reproduite à l'échelle.
   L'écran fait 393 pt de large comme un iPhone 15 ; --pt vaut un point de cet écran, toutes les cotes
   de l'interface (barre d'état, îlot, en-tête, bulles, compositeur) sont exprimées dans cette unité. */
.objective-phone{
  width:min(100%,290px);aspect-ratio:393 / 852;justify-self:center;padding:7px;
  border:9px solid #111114;border-radius:60px;background:#111114;container-type:inline-size;
  box-shadow:0 28px 70px rgba(20,28,92,.28),inset 0 0 0 1px rgba(255,255,255,.16);
}
.objective-phone .engine.cg{
  --pt:calc(100cqw / 393);--ink:#0d0d0d;--sub:#8f8f8f;--hair:#e5e5e5;
  position:relative;height:100%;min-height:0;max-width:none;align-self:auto;
  display:flex;flex-direction:column;gap:0;padding:0;
  background:#fff;border-radius:44px;color:var(--ink);overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:calc(17*var(--pt));line-height:1.4;-webkit-font-smoothing:antialiased;
}
.cg-island{position:absolute;z-index:3;top:calc(11*var(--pt));left:50%;width:calc(126*var(--pt));height:calc(37*var(--pt));border-radius:calc(20*var(--pt));background:#111114;transform:translateX(-50%)}
.cg-status{display:flex;align-items:center;justify-content:space-between;height:calc(59*var(--pt));padding:0 calc(28*var(--pt)) 0 calc(44*var(--pt));font-size:calc(17*var(--pt));font-weight:600;letter-spacing:-.02em}
.cg-sys{display:flex;align-items:center;gap:calc(6*var(--pt))}
.cg-sys svg{display:block;fill:currentColor}
.cg-cell{width:calc(19*var(--pt));height:calc(12*var(--pt))}
.cg-wifi{width:calc(17*var(--pt));height:calc(12*var(--pt));fill:none}
.cg-batt{width:calc(28*var(--pt));height:calc(13*var(--pt))}
.cg-head{display:grid;grid-template-columns:calc(44*var(--pt)) 1fr calc(44*var(--pt));align-items:center;height:calc(44*var(--pt));padding:0 calc(6*var(--pt))}
.cg-ico{width:calc(24*var(--pt));height:calc(24*var(--pt));justify-self:center;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cg-title{justify-self:center;display:inline-flex;align-items:center;gap:calc(1*var(--pt));font-size:calc(17*var(--pt));font-weight:600;letter-spacing:-.01em}
.cg-title svg{width:calc(17*var(--pt));height:calc(17*var(--pt));fill:none;stroke:var(--sub);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cg-thread{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(18*var(--pt));padding:calc(10*var(--pt)) calc(16*var(--pt)) calc(8*var(--pt));overflow:hidden}
.cg-thread>*{flex:none}
.cg-user{
  align-self:flex-end;max-width:82%;padding:calc(10*var(--pt)) calc(16*var(--pt));border-radius:calc(20*var(--pt));
  background:#f4f4f4;font-size:calc(17*var(--pt));line-height:1.35;
  opacity:0;transform:translateY(8px);transition:opacity .3s cubic-bezier(.2,0,0,1),transform .3s cubic-bezier(.2,0,0,1);
}
.cg-user.on{opacity:1;transform:none}
.cg-turn{display:grid;gap:calc(12*var(--pt));align-content:start}
.cg-search{display:flex;align-items:center;gap:calc(8*var(--pt));color:var(--sub);font-size:calc(15*var(--pt));opacity:0;transition:opacity .25s cubic-bezier(.2,0,0,1)}
.cg-search.on{opacity:1}
.cg-search svg{width:calc(17*var(--pt));height:calc(17*var(--pt));fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cg-search span{
  color:transparent;background:linear-gradient(90deg,#8f8f8f 35%,#d9d9d9 50%,#8f8f8f 65%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;animation:cg-shimmer 1.6s linear infinite;
}
.cg-search.done span{animation:none;background:none;color:var(--sub)}
@keyframes cg-shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
.cg-src{display:flex;flex-wrap:wrap;gap:calc(6*var(--pt))}
.cg-src>i{
  display:inline-flex;align-items:center;gap:calc(6*var(--pt));font-style:normal;font-size:calc(13*var(--pt));line-height:1;color:#5d5d5d;
  padding:calc(6*var(--pt)) calc(10*var(--pt)) calc(6*var(--pt)) calc(6*var(--pt));border-radius:999px;background:#fff;border:1px solid var(--hair);
  opacity:0;transform:translateY(6px);filter:blur(4px);
  transition:opacity .3s cubic-bezier(.2,0,0,1),transform .3s cubic-bezier(.2,0,0,1),filter .3s cubic-bezier(.2,0,0,1),color .3s,border-color .3s;
}
.cg-src>i.on{opacity:1;transform:none;filter:none}
.cg-src>i.you.hit{color:var(--lilac-deep);border-color:var(--tint-3)}
.cg .fav{width:calc(16*var(--pt));height:calc(16*var(--pt));border-radius:50%;background:#ececec;display:grid;place-items:center;flex:none;font-style:normal}
.cg .fav svg{width:calc(10*var(--pt));height:calc(10*var(--pt));fill:none;stroke:var(--sub);stroke-width:1.8}
.cg-src>i.you.hit .fav{background:var(--tint)}.cg-src>i.you.hit .fav svg{stroke:var(--lilac-deep)}
.cg-ans{display:none;margin:0;font-size:calc(17*var(--pt));line-height:1.42;color:var(--ink);letter-spacing:-.005em;overflow-wrap:anywhere}
.cg-ans.on{display:block}
.cg-ans .cur{display:inline-block;width:calc(10*var(--pt));height:calc(10*var(--pt));border-radius:50%;background:var(--ink);vertical-align:-1px;margin-left:calc(4*var(--pt))}
.cg-cite{
  position:relative;display:inline-flex;align-items:center;gap:calc(5*var(--pt));vertical-align:calc(-3*var(--pt));margin-left:calc(2*var(--pt));
  padding:calc(2*var(--pt)) calc(8*var(--pt)) calc(2*var(--pt)) calc(3*var(--pt));border-radius:999px;background:#f4f4f4;
  font-size:calc(12*var(--pt));line-height:1.2;color:#5d5d5d;white-space:nowrap;
}
.cg-cite .fav{width:calc(14*var(--pt));height:calc(14*var(--pt));background:var(--tint)}.cg-cite .fav svg{stroke:var(--lilac-deep)}
.cg-cite .tag{margin-left:calc(3*var(--pt));font-family:var(--mono);font-size:calc(10*var(--pt));line-height:1;font-weight:400;color:#fff;background:var(--lilac-deep);padding:calc(3*var(--pt)) calc(6*var(--pt));border-radius:999px;white-space:nowrap}
.cg-foot{display:grid;justify-items:start;gap:calc(10*var(--pt));opacity:0;transform:translateY(6px);transition:opacity .3s cubic-bezier(.2,0,0,1),transform .3s cubic-bezier(.2,0,0,1)}
.cg-foot.on{opacity:1;transform:none}
.cg-sources{display:inline-flex;align-items:center;padding:calc(5*var(--pt)) calc(10*var(--pt)) calc(5*var(--pt)) calc(6*var(--pt));border-radius:999px;border:1px solid var(--hair);font-size:calc(13*var(--pt));line-height:1;font-weight:500;color:var(--ink)}
.cg-sources i{width:calc(16*var(--pt));height:calc(16*var(--pt));border-radius:50%;background:#dcdcdc;border:1.5px solid #fff;margin-right:calc(-5*var(--pt));flex:none}
.cg-sources i:nth-child(2){background:#c9c9c9}
.cg-sources i:nth-child(3){background:#b5b5b5;margin-right:calc(8*var(--pt))}
.cg-actions{display:flex;align-items:center;gap:calc(14*var(--pt));color:var(--sub)}
.cg-actions svg{width:calc(17*var(--pt));height:calc(17*var(--pt));fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cg-composer{
  display:flex;align-items:flex-end;gap:calc(4*var(--pt));margin:0 calc(12*var(--pt));min-height:calc(52*var(--pt));
  padding:calc(7*var(--pt)) calc(7*var(--pt)) calc(7*var(--pt)) calc(6*var(--pt));border:1px solid #e0e0e0;border-radius:calc(26*var(--pt));
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05);font-size:calc(17*var(--pt));
}
.cg-plus,.cg-mic,.cg-voice,.cg-send{flex:none;display:grid;place-items:center;width:calc(36*var(--pt));height:calc(36*var(--pt));border-radius:50%}
.cg-plus svg,.cg-mic svg{width:calc(22*var(--pt));height:calc(22*var(--pt));fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cg-field{flex:1;min-width:0;position:relative;display:flex;align-items:center;min-height:calc(36*var(--pt));padding:calc(6*var(--pt)) calc(4*var(--pt))}
.cg-ph{position:absolute;left:calc(4*var(--pt));top:50%;transform:translateY(-50%);color:var(--sub);white-space:nowrap;transition:opacity .15s}
.cg-composer.typing .cg-ph{opacity:0}
.cg-typed{line-height:1.35;overflow-wrap:anywhere}
.cg-typed .cur{display:inline-block;width:2px;height:1.05em;background:var(--ink);vertical-align:-3px;margin-left:1px;animation:blink 1s steps(1) infinite}
.cg-voice,.cg-send{background:var(--ink);color:#fff}
.cg-voice svg{width:calc(20*var(--pt));height:calc(20*var(--pt));fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.cg-send{display:none}
.cg-send svg{width:calc(20*var(--pt));height:calc(20*var(--pt));fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cg-composer.typing .cg-voice{display:none}.cg-composer.typing .cg-send{display:grid}
.cg-home{display:block;width:calc(134*var(--pt));height:calc(5*var(--pt));border-radius:999px;background:var(--ink);margin:calc(14*var(--pt)) auto calc(8*var(--pt))}
.objective-bridge{display:block;padding:0 clamp(32px,5vw,72px)}
.objective-bridge span{display:block;height:1px;background:var(--line)}

@media (max-width:900px){
  .objective-system{margin:40px 12px 0;border-radius:24px}
  .objective-lane,.objective-ai{grid-template-columns:1fr;gap:28px;padding:34px 24px}
  .objective-ai .objective-demo{order:2}.objective-ai .objective-copy{order:1}
  .objective-copy{max-width:620px}.objective-copy h3{font-size:30px;max-width:18ch}
  .objective-copy>p{font-size:16px}
  .objective-demo{padding:18px;border-radius:18px}
  .objective-system .serp{padding:16px}
  .objective-system .serp .list{height:calc(4*52px)}
  .objective-system .engine{min-height:300px}
  .objective-phone{width:min(100%,260px);padding:7px;border-radius:60px}
  .objective-bridge{padding:0 24px}
}
@media (min-width:901px) and (max-width:1200px){
  .objective-lane,.objective-ai{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;padding-left:32px;padding-right:32px}
  .objective-copy{max-width:100%}
  .objective-copy h3{font-size:32px}
}
@media (max-width:520px){
  .objective-lane,.objective-ai{padding:30px 18px}
  .objective-demo{padding:12px}
  .objective-system .serp{padding:12px}
  .objective-system .serp .bar{font-size:13px;padding:0 12px}
  .objective-system .eng-bar{font-size:14px;padding:10px 14px}
  .objective-system .eng-ph{left:44px}
  .objective-system .engine .glass{padding:14px}
  .objective-phone{padding:7px}
}

/* ===== mobile (2026-09-07 soir) : une vraie mise en page téléphone ===== */
/* Le mélange luminosité de l'image doit trouver le bleu dans ce contexte
   d'empilement dès le premier rendu, avant l'arrivée du canvas animé. */
.hero-stage{position:absolute;inset:0;z-index:0;background:var(--grad)}
.hero-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-stage .hero-labels{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero-copy{z-index:2}
@media (max-width:900px){
  /* la barre : les deux onglets restent visibles */
  .nav{height:56px}
  .nav-links{display:flex;gap:14px;font-size:13px}
  .logo{font-size:16px;gap:7px}.logo .mark{width:22px;height:22px}
  .nav .btn-ghost{height:34px;padding:0 10px;font-size:13px}
  /* le hero : le texte d'abord, le graphe en dessous dans sa propre zone */
  /* le hero garde la composition du desktop : texte en haut, graphe derrière, en bas du panneau */
  .wrap{padding-left:32px;padding-right:32px}
  .native-hero{display:block;height:auto;min-height:0;max-height:none;margin:8px 12px 0;padding:0}
  .hero-stage{position:absolute;inset:0;height:auto}
  .hero-copy{position:relative;top:auto;transform:none;padding:30px 20px 330px;max-width:none;z-index:2}
  .native-hero h1{font-size:clamp(34px,9vw,42px);max-width:none}
  .hero-sub{font-size:16px;max-width:none;margin-top:14px}
  .dhero-cta{margin-top:20px;gap:8px}
  /* le manifeste reste épinglé, la phrase se peint au défilement, calée sur la marge du hero */
  .manifesto-pin{height:200vh;padding:0}
  .manifesto-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center}
  .manifesto{font-size:clamp(26px,7.2vw,32px);line-height:1.15}
  /* les panneaux de preuve : pas de rangée qui s'étire */
  .proof{grid-template-rows:auto;gap:20px;padding:22px}
  .proof .serp,.proof .engine,.proof .chat{align-self:start}
  .proof-head h3{font-size:21px}
  .proofs{gap:12px}
  /* sections plus serrées */
  section{padding:56px 0}
  .lead h2{font-size:26px}.lead p{font-size:16px}
  .final{padding:32px 20px}.final h2{font-size:28px}
  .wordmark{margin:0 auto 24px}
}
@media (max-width:420px){
  .nav-links{gap:10px;font-size:12px}
  .nav .btn-ghost{padding:0 8px;font-size:12px}
}

/* barre sur petit écran : la marque seule, le bouton sur une ligne */
@media (max-width:520px){
  .logo{font-size:0;gap:0}.logo .mark{width:26px;height:26px}
  .nav .btn-ghost{white-space:nowrap}
  .nav-links{gap:12px}
}

/* ═══ L'image du hero (2026-09-19 soir) : la scène des cubes IA, intégrée comme sur /skills. Posée en bas à droite
   du panneau sur le champ vivant, fondue sur ses bords, en luminosité (elle prend le bleu du champ), avec une
   dérive lente, un halo qui respire, et une onde lumineuse qui traverse la scène et allume chaque cube au passage.
   Le titre et les boutons ne changent pas. ═══ */
.hero-art{position:absolute;top:auto;bottom:0;right:0;left:auto;width:72%;height:82%;z-index:0;display:block;pointer-events:none;overflow:hidden;
  opacity:.96;mix-blend-mode:luminosity;
  -webkit-mask-image:radial-gradient(ellipse 78% 96% at 64% 100%,#000 30%,rgba(0,0,0,.75) 52%,rgba(0,0,0,.25) 76%,transparent 94%),linear-gradient(to right,transparent 0%,transparent 12%,rgba(0,0,0,.4) 30%,#000 52%);
  -webkit-mask-composite:source-in;
          mask-image:radial-gradient(ellipse 78% 96% at 64% 100%,#000 30%,rgba(0,0,0,.75) 52%,rgba(0,0,0,.25) 76%,transparent 94%),linear-gradient(to right,transparent 0%,transparent 12%,rgba(0,0,0,.4) 30%,#000 52%); /* en ellipse : aucun bord droit visible (la barre que Tim voyait était le haut du rectangle de l'image) */
          mask-composite:intersect}
.ha-move{position:absolute;inset:0;transform-origin:55% 60%;animation:hero-derive 30s cubic-bezier(.4,0,.4,1) infinite alternate}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:100% 100%;display:block;filter:saturate(.92) contrast(1.06) brightness(1.02)}
/* les cubes de l'image : la couche est calée au pixel sur l'image recadrée (script), ce qui permet d'en allumer un précisément */
.ha-fit{position:absolute;left:0;top:0;pointer-events:none}
.cube{position:absolute;border-radius:6px;opacity:0;transition:opacity .22s ease-out}
.cube.on{opacity:1}
.cube .glow{position:absolute;inset:-22%;border-radius:12px;background:radial-gradient(closest-side,rgba(212,230,255,.65),transparent 78%);mix-blend-mode:overlay}
.cube .fill{position:absolute;inset:0;border-radius:6px;background:rgba(226,240,255,.3);mix-blend-mode:overlay}
.cube .edge{position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(240,248,255,.45)}
/* l'onde : sa position est écrite par le script, pour rester solidaire des cubes qu'elle allume */
.ha-sweep{position:absolute;top:0;bottom:0;width:26%;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(to right,transparent,rgba(214,232,255,.16) 42%,rgba(232,242,255,.34) 52%,rgba(214,232,255,.14) 62%,transparent)}
.ha-floor{position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;mix-blend-mode:overlay;background:linear-gradient(to top,rgba(220,236,255,.22),transparent);animation:ha-floor 6.5s ease-in-out infinite}
@keyframes ha-floor{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes hero-derive{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.055) translate3d(-1.1%,-.9%,0)}}
/* le halo derrière la silhouette, celui de l'image, repris et mis à respirer */
.hero-glow{position:absolute;top:auto;bottom:0;right:0;left:auto;width:72%;height:82%;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(28% 40% at 50% 56%,rgba(190,214,255,.32),rgba(190,214,255,.1) 48%,transparent 74%);animation:hero-souffle 11s ease-in-out infinite alternate}
@keyframes hero-souffle{from{opacity:.5}to{opacity:1}}
@media (max-width:900px){
  .hero-art{width:100%;height:340px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 22%,#000 45%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 22%,#000 45%)}
  .hero-art img{object-position:50% 60%}
  .hero-glow{width:100%;height:340px}
}
@media (prefers-reduced-motion:reduce){.ha-move,.hero-glow,.ha-floor{animation:none}}

/* ═══ Le bouton du hero (2026-09-09) ═══
   Le même verre que l'île de navigation (fond blanc à 10 %, liseré clair,
   flou d'arrière-plan). Au survol, le verre se remplit du dégradé outremer
   avec son grain : jamais d'aplat nu. */
.btn-hero{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:14px;
  height:54px;padding:0 8px 0 22px;border-radius:14px;
  color:#fff;font-family:inherit;font-size:15px;font-weight:500;text-decoration:none;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(var(--shadow-rgb),.18),inset 0 1px 0 rgba(255,255,255,.35);
  transition:border-color .35s ease,box-shadow .35s ease,transform .15s ease;
}
.btn-hero::before{content:"";position:absolute;inset:0;z-index:0;background:var(--grad);opacity:0;transition:opacity .4s ease}
.btn-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px;transition:opacity .4s ease}
.btn-hero .lab{position:relative;z-index:2}
.btn-hero .pil{
  position:relative;z-index:2;width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  transition:background .3s ease,border-color .3s ease;
}
.btn-hero .ico{width:18px;height:18px;transition:transform .35s ease}
.btn-hero:hover{border-color:rgba(255,255,255,.52);box-shadow:0 18px 44px rgba(var(--shadow-rgb),.3)}
.btn-hero:hover::before{opacity:1}
.btn-hero:hover::after{opacity:.55}
.btn-hero:hover .pil{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.48)}
.btn-hero:hover .ico{transform:translateX(3px)}
.btn-hero:active{transform:translateY(1px)}

/* variante secondaire du bouton de hero : le verre reste, sans pastille ;
   au survol il se densifie au lieu de se remplir de couleur (hiérarchie) */
.btn-hero.ghost{padding:0 22px;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.28);box-shadow:none}
.btn-hero.ghost::before{background:rgba(255,255,255,.18)}
.btn-hero.ghost:hover{border-color:rgba(255,255,255,.46);box-shadow:0 10px 26px rgba(var(--shadow-rgb),.18)}
.btn-hero.ghost:hover::after{opacity:.3}

/* la même mécanique sur fond blanc : le bouton porte le dégradé grainé au
   repos et bascule sur l'encre au survol ; le secondaire reste blanc */
.btn-hero.clair{color:#fff;background:var(--grad);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 14px 34px rgba(var(--shadow-rgb),.26)}
.btn-hero.clair::before{background:var(--ink)}
.btn-hero.clair::after{opacity:.5}
.btn-hero.clair .pil{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.34)}
.btn-hero.clair:hover{border-color:transparent;box-shadow:0 20px 46px rgba(var(--shadow-rgb),.3)}
.btn-hero.clair:hover::after{opacity:.35}
.btn-hero.clair:hover .pil{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}
.btn-hero.clair.ghost{color:var(--ink);background:#fff;border-color:var(--line);box-shadow:none}
.btn-hero.clair.ghost::before{background:var(--wash)}
.btn-hero.clair.ghost::after{opacity:0}
.btn-hero.clair.ghost:hover{color:var(--ink);border-color:#cdd7f7;box-shadow:none}
/* pleine largeur, pour les boutons posés dans une carte */
.btn-hero.plein{display:flex;width:100%;justify-content:space-between}

/* ═══ La feuille de rendez-vous (2026-09-09) ═══
   Carte blanche posée sur le panneau bleu : titre en outremer grainé,
   bouton pleine largeur en dégradé grainé dont la pastille blanche s'ouvre
   au survol (l'écho inversé du bouton du hero). */

/* ═══ Le panneau de contact : la carte en 3D sur le tableau de bord (2026-09-25) ═══
   Le fond est le tableau de bord (/da/contact-fond.webp) fondu dans le dégradé
   à droite. La carte est le passeport, plus
   petite que dans la maquette, qui flotte et s'incline sous la souris
   (/da/carte-3d.js). La carte est en HTML (police, SVG, photo) pour rester
   nette à toute résolution : la capture de 688 px était floue en retina
   (« pas de flou interdit », Tim, 25/09). Fumée rose de nav-fond.js. */
.final{padding:72px 48px 72px 120px;display:grid;grid-template-columns:minmax(0,340px);justify-content:start;align-items:center;color:var(--ink);min-height:560px}
.final-fond{position:absolute;top:0;bottom:0;right:0;width:74%;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 22%,#000 45%);
          mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 22%,#000 45%)}
/* deux mouvements superposés, indépendants de la souris (demande de Tim) :
   la dérive de l'image (zoom + glissement, 14 s) et un balayage de lumière
   en diagonale (9 s). */
.final-fond img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;object-position:left center;display:block}
.final-fond .derive{position:absolute;inset:0;transform-origin:55% 50%;animation:fond-derive 14s ease-in-out infinite alternate;will-change:transform}
@keyframes fond-derive{0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}100%{transform:translate3d(-2.5%,1.6%,0) scale(1.08) rotate(-.6deg)}}
.final-fond::after{content:"";position:absolute;inset:-20%;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  animation:fond-balayage 9s cubic-bezier(.4,0,.2,1) infinite;will-change:transform}
@keyframes fond-balayage{0%{transform:translateX(-70%)}55%,100%{transform:translateX(70%)}}
.carte-3d{position:relative;z-index:2;width:100%;perspective:1200px;animation:carte-flotte 7s ease-in-out infinite}
.carte{--rx:0deg;--ry:0deg;position:relative;border-radius:28px;overflow:hidden;container-type:inline-size;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform .18s ease-out;will-change:transform;
  box-shadow:0 2px 6px rgba(var(--shadow-rgb),.1),0 24px 50px rgba(var(--shadow-rgb),.24),0 56px 110px rgba(var(--shadow-rgb),.32)}
.carte.libre{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@keyframes carte-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.pass{position:relative;width:100%;border-radius:28px;overflow:hidden;color:var(--ink);
  /* dégradé vertical façon carte de profil : presque blanc en haut, bleu
     Organikk doux en bas, avec deux halos pour que la couleur ne soit pas plate */
  background:
    radial-gradient(90% 60% at 100% 100%,rgba(127,160,255,.55),transparent 70%),
    radial-gradient(70% 50% at 0% 85%,rgba(168,192,255,.5),transparent 70%),
    linear-gradient(180deg,#f5f7fd 0%,#e9eeff 38%,#d3ddff 70%,#bfceff 100%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.35)}
.pass-tete{position:relative;z-index:0;height:83px;background:rgba(255,255,255,.26);border-bottom:1px solid rgba(255,255,255,.7);
  display:flex;align-items:flex-start;justify-content:flex-end;padding:16px 19px}
.pass-tete::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:192.4px 192.4px;mix-blend-mode:overlay;opacity:.22}
.pass-logo{position:relative;z-index:1;width:21px;height:21px;opacity:.85}
.pass-corps{position:relative;z-index:1;padding:0 22px 22px;margin-top:-40px}
.pass-photo{position:relative;z-index:2;display:block;width:77px;height:77px;border-radius:19px;object-fit:cover;background:#fff;
  border:3px solid rgba(255,255,255,.85);box-shadow:0 9px 22px rgba(var(--shadow-rgb),.26)}
.pass-corps h3{margin:15px 0 0;font-size:21.5px;letter-spacing:-.04em;line-height:1.05}
.pass-role{margin:5px 0 0;color:#4a4a58;font-size:12px}
.pass-sep{height:1px;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(160,180,230,.5),rgba(255,255,255,.2));margin:18px 0}

/* les quatre moteurs */
.pass .ias{display:flex;align-items:center;gap:6px}
.pass .ia{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(10.4px);backdrop-filter:blur(10.4px);
  box-shadow:0 1.5px 4.4px rgba(var(--shadow-rgb),.12),inset 0 1px 0 rgba(255,255,255,.85);
  transition-property:scale,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}
.pass .ia:hover{scale:1.08;box-shadow:0 4.4px 10.4px rgba(var(--shadow-rgb),.18)}
.pass .ia svg{width:14px;height:14px;fill:var(--ink)}
.pass .ia-gemini svg{fill:none}

.pass-stats{display:flex;flex-wrap:wrap;gap:7.4px;margin:16px 0 0;padding:0;list-style:none}
.pass-stats li{display:flex;align-items:baseline;gap:6px;padding:7.4px 12px;border-radius:739px;
  background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(10.4px);backdrop-filter:blur(10.4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.pass-stats b{font-size:14px;font-weight:500;letter-spacing:-.03em;color:var(--c-top)}
.pass-stats span{font-size:10.4px;color:#4a4a58}

/* le bouton : le dégradé sert de repli, la fumée rose se monte par-dessus */
.pass-bas{display:flex;align-items:center;gap:9px;margin-top:19px}
.pass-btn{flex:1;position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:9px;
  height:43px;padding:0 6px 0 18px;border-radius:13.3px;
  background:var(--grad);color:#1e2eba;text-decoration:none;font-size:12px;font-weight:500;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 7.4px 22px rgba(var(--shadow-rgb),.22),inset 0 1px 0 rgba(255,255,255,.5);
  transition:border-color .35s ease,box-shadow .35s ease,transform .15s ease}
.pass-btn::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(170deg,rgba(255,255,255,.72),rgba(255,255,255,.58) 55%,rgba(255,255,255,.7));
  transition:background .4s ease}
.pass-btn::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);background-size:192.4px 192.4px;mix-blend-mode:overlay;opacity:.5;
  transition:opacity .4s ease}
.pass-btn .lab,.pass-btn .pil{position:relative;z-index:2}
.pass-btn .lab{color:#1e2eba;font-weight:600;letter-spacing:-.01em}
.pass-btn .pil{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;
  color:#1e2eba;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);
  transition:background .3s ease,border-color .3s ease}
.pass-btn .ico{width:13.3px;height:13.3px;transition:transform .35s ease}
.pass-btn:hover{border-color:rgba(255,255,255,.55);box-shadow:0 13.3px 32.6px rgba(var(--shadow-rgb),.34)}
.pass-btn:hover::after{opacity:.7}
.pass-btn:hover::before{background:linear-gradient(170deg,rgba(255,255,255,.62),rgba(255,255,255,.48) 55%,rgba(255,255,255,.6))}
.pass-btn:hover .pil{background:rgba(255,255,255,.75);border-color:#fff}
.pass-btn:hover .ico{transform:translateX(2px)}
.pass-btn:active{transform:translateY(1px)}
.pass-ln{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13.3px;
  background:rgba(255,255,255,.5);color:var(--c-top);border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition-property:background-color,scale;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}
.pass-ln:hover{background:rgba(255,255,255,.8)}
.pass-ln:active{scale:.96}


@media (prefers-reduced-motion:reduce){.carte-3d{animation:none}.carte{transform:none !important}.final-fond .derive,.final-fond::after{animation:none}}
@media (max-width:1100px){.final{padding-left:64px}.final-fond{width:70%}}
@media (max-width:900px){
  .final{padding:48px 24px;grid-template-columns:minmax(0,320px);justify-content:center;min-height:0}
  .final-fond{width:100%;opacity:.35;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 40%);mask-image:linear-gradient(to bottom,transparent 0%,#000 40%)}
}
@media (max-width:900px){
}

/* ═══ La méthode, les quatre visuels retravaillés dans la DA « écran de verre » (07/10) : même contenu,
   fond lavande clair à halo outremer, surfaces en verre laiteux, bleu pervenche à la place du noir. ═══ */
.method-visual{background:linear-gradient(160deg,#f6f8ff 0%,#e3e9ff 55%,#cfdaff 100%)}
.method-visual::after{display:none}
.method-visual::before{content:"";position:absolute;width:72%;height:72%;left:50%;top:56%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(47,79,224,.5),rgba(127,160,255,.24) 60%,transparent);filter:blur(34px);z-index:0;pointer-events:none}
.method-visual .scene{z-index:1}
/* 1 : le téléphone des requêtes */
.method-visual .ph{background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.85);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 30px 60px -24px rgba(33,55,157,.45),inset 0 1px 0 rgba(255,255,255,.95);border-radius:36px}
.method-visual .ph .q{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.95);color:#5b6aa8;border-radius:12px}
.method-visual .ph .q .dot{background:rgba(47,79,224,.5)}
.method-visual .ph .q.hot{background:rgba(47,79,224,.6);border-color:rgba(255,255,255,.4);color:#fff;box-shadow:0 10px 22px -14px rgba(33,55,157,.7)}
.method-visual .ph .q.hot .dot{background:#fff}
/* 2 : la page qui se construit */
.method-visual .pg{background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.85);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 30px 60px -24px rgba(33,55,157,.45),inset 0 1px 0 rgba(255,255,255,.95);border-radius:22px}
.method-visual .pg .b{background:rgba(255,255,255,.75)}
.method-visual .pg .b.t{background:rgba(47,79,224,.62)}
.method-visual .pg .b.cta{background:rgba(47,79,224,.62);border-radius:10px;box-shadow:0 10px 22px -12px rgba(33,55,157,.7)}
/* 3 : les pages reliées */
.method-visual .pgm{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:0 14px 30px -16px rgba(33,55,157,.5)}
.method-visual .pgm .l{background:rgba(255,255,255,.85)}
.method-visual .pgm .l.a{background:rgba(47,79,224,.6)}
.method-visual .pgm.hub{background:rgba(47,79,224,.55);border-color:rgba(255,255,255,.45);box-shadow:0 20px 40px -18px rgba(33,55,157,.7)}
.method-visual .pgm.hub .l,.method-visual .pgm.hub .l.a{background:rgba(255,255,255,.75)}
.method-visual .pgm.hub .b{background:#fff;opacity:.9}
.method-visual .pgm.orphan{outline-color:rgba(47,79,224,.6)}
.method-visual .pgm.orphan .tag{color:#2f4fe0}
/* 4 : la boîte de réception, posée sur un cadre de verre */
.method-visual .gm{border-radius:calc(22*var(--u));background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 30px 60px -24px rgba(33,55,157,.45),inset 0 1px 0 rgba(255,255,255,.95)}
.method-visual .gm-list{background:rgba(255,255,255,.8)}
.method-visual .gm-label{background:rgba(47,79,224,.12);color:#2f4fe0}
.method-visual .gm-avatar{background:rgba(47,79,224,.62)}
/* passe 2 : plus de matière et plus d'air */
.method-visual .scene{padding:0}
/* 1 : téléphone plus large, une barre en tête, les requêtes sur une ligne */
.method-visual .ph{width:268px;height:auto;min-height:420px;padding:16px 14px 22px;gap:9px;border-radius:40px}
.ph-top{display:flex;gap:6px;padding:4px 6px 10px;border-bottom:1px solid rgba(255,255,255,.7);margin-bottom:4px}
.ph-top i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.95)}
.method-visual .ph .q{height:auto;min-height:40px;padding:9px 12px;font-size:12.5px;line-height:1.3;letter-spacing:-.005em}
.method-visual .ph .q.hot{font-weight:500}
/* 2 : la page en verre, détaillée */
.method-visual .pg2{width:300px;height:auto;padding:0 0 18px;gap:12px;overflow:hidden}
.pg-top{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.25)}
.pg-top i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.95)}
.pg-hero{display:grid;gap:8px;margin:0 14px;padding:16px;border-radius:14px;background:rgba(47,79,224,.55);border:1px solid rgba(255,255,255,.4)}
.method-visual .pg-hero .b{background:rgba(255,255,255,.8)}
.method-visual .pg-hero .b.t{height:14px;width:75%;background:#fff}
.pg-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 14px}
.pg-card{display:grid;gap:7px;padding:12px;border-radius:12px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.95)}
.method-visual .pg-card .b{height:7px;background:rgba(47,79,224,.28)}
.method-visual .pg2 .b.cta{margin:2px 14px 0;height:34px;width:46%;border-radius:999px}
/* 3 : les liens visibles, en blanc, et des cartes plus grandes */
.method-visual .scene[data-i="2"] .mesh .links{display:block}
.method-visual .mesh .links path{stroke:rgba(255,255,255,.95);stroke-width:1.6}
.method-visual .mesh{scale:1}
.method-visual .pgm{width:72px;height:54px;padding:9px}
.method-visual .pgm.hub{width:108px;height:78px}
/* 4 : Gmail plus petit, avec de l'air autour */
.method-visual .gm{--u:calc(84cqw / 520)}
/* centrage forcé : un visuel plus haut que le panneau resterait calé en haut */
.method-visual .ph,.method-visual .pg,.method-visual .mesh{position:absolute;left:50%;top:50%;translate:-50% -50%}

/* ═══ « Gagner les requêtes » et « Faire citer votre entreprise » : même DA que la méthode (07/10) ═══ */
.objective-demo{background:linear-gradient(160deg,#f6f8ff 0%,#e3e9ff 55%,#cfdaff 100%);box-shadow:none}
.objective-demo::after{display:none}
.objective-demo::before{content:"";position:absolute;width:72%;height:72%;left:50%;top:56%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(47,79,224,.5),rgba(127,160,255,.24) 60%,transparent);filter:blur(34px);z-index:0;pointer-events:none}
/* l'écran des résultats Google : fenêtre de verre */
.objective-system .serp{background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.85);border-radius:22px;-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 30px 60px -24px rgba(33,55,157,.45),inset 0 1px 0 rgba(255,255,255,.95)}
.objective-system .serp .bar{background:rgba(255,255,255,.8);border:1px solid #fff;border-radius:14px;color:#2b3570;box-shadow:0 8px 20px -12px rgba(33,55,157,.4)}
.objective-system .serp .bar .ico,.objective-system .serp .bar svg{color:#2f4fe0;stroke:#2f4fe0}
.objective-system .res{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.95);border-radius:14px}
.objective-system .res .l i{background:rgba(47,79,224,.16)}
.objective-system .res .l i:first-child{background:rgba(47,79,224,.3)}
.objective-system .res .pos{color:#5b6aa8}
.objective-system .res.you{background:rgba(47,79,224,.62);border-color:rgba(255,255,255,.45);box-shadow:0 14px 30px -14px rgba(33,55,157,.75)}
.objective-system .res.you .l i{background:rgba(255,255,255,.55)}
.objective-system .res.you .l i:first-child{background:#fff}
.objective-system .res.you .pos{color:#fff}
.objective-system .res.you .tag{background:#fff;color:#2f4fe0;box-shadow:0 6px 14px -8px rgba(33,55,157,.6)}
/* le téléphone : coque de verre blanche au lieu du noir, écran clair, la source citée en outremer */
.objective-demo.objective-phone{border:9px solid rgba(255,255,255,.85);background:linear-gradient(160deg,#eef2ff,#d8e1ff);
  box-shadow:0 40px 80px -30px rgba(33,55,157,.5),0 0 0 1px rgba(47,79,224,.12),inset 0 1px 0 #fff}
.objective-demo.objective-phone::before{display:none}
.objective-phone .engine.cg{background:linear-gradient(180deg,#fbfcff 0%,#f2f5ff 100%)}
.objective-phone .cg-island{background:#c9d3f5}
.objective-phone .cg-user{background:rgba(47,79,224,.1);color:#1b2140}
.objective-phone .cg-src>i.you.hit{color:#fff;background:rgba(47,79,224,.62);border-color:rgba(255,255,255,.45)}
.objective-phone .cg-src>i.you.hit .fav{background:rgba(255,255,255,.3)}.objective-phone .cg-src>i.you.hit .fav svg{stroke:#fff}
.objective-phone .cg-cite .tag{background:rgba(47,79,224,.7)}
.objective-phone .cg-cite{background:rgba(47,79,224,.1)}

/* indicateur de progression des quatre étapes retiré (demande Tim 07/10) */
.method-dots{display:none !important}

/* l'écran Google moins large (demande Tim 07/10) */
.objective-demo.objective-serp{max-width:560px;justify-self:center;width:100%}

/* Source: public/da/lyon.css */
/* /consultant-seo-geo-lyon : cartes, fumée et apparitions, sur les blocs de la home */

/* la fumée montée par nav-fond.js sur un panneau ou une carte : la toile passe dessous, le contenu dessus */
[data-fond]{position:relative;isolation:isolate}
[data-fond] > .nav-fond{position:absolute;inset:0;z-index:0;border-radius:inherit}
[data-fond] > :not(.nav-fond){position:relative;z-index:2}
.offer.lyo-smoke::before,.offer.lyo-smoke::after{z-index:1}

/* la présentation : un panneau outremer, la carte de verre à gauche, la phrase à droite */
.lyo-pres{margin:0 16px;border-radius:var(--r-lg);background:var(--grad);color:#fff;overflow:hidden;
  padding:clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center}
.lyo-pres::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px}
.lyo-pres-card{border-radius:30px;padding:30px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);
  box-shadow:0 30px 80px rgba(var(--shadow-rgb),.22),inset 0 1px 0 rgba(255,255,255,.65)}
.lyo-pres-card img{width:88px;height:88px;border-radius:24px;object-fit:cover;display:block;background:#fff;border:1px solid rgba(255,255,255,.55);box-shadow:0 12px 30px rgba(var(--shadow-rgb),.2)}
.lyo-pres-card h3{margin-top:20px;font-size:26px;letter-spacing:-.035em;line-height:1.05;color:#fff}
.lyo-pres-card > .dmono{margin-top:8px;color:rgba(255,255,255,.72)}
.lyo-chips{list-style:none;margin:24px 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.2);display:flex;flex-wrap:wrap;gap:8px}
.lyo-chips li{display:flex;align-items:baseline;gap:7px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.lyo-chips b{font-size:17px;font-weight:500;letter-spacing:-.03em;color:#fff}
.lyo-chips span{font-size:13px;color:rgba(255,255,255,.72)}
.lyo-pres-grand{font-size:clamp(24px,2.6vw,36px);line-height:1.18;letter-spacing:-.03em;font-weight:500;color:#fff;max-width:22ch}
.lyo-pres-sous{margin-top:22px;font-size:18px;line-height:1.5;color:rgba(255,255,255,.82);max-width:48ch}

/* la cible : quatre cartes, le halo suit la souris (da.js) */
.lyo-cards4{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.lyo-card{padding:26px 26px 28px;display:grid;gap:14px;align-content:start}
.lyo-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--grad);color:#fff;box-shadow:0 10px 24px rgba(var(--shadow-rgb),.18)}
.lyo-ico svg{width:22px;height:22px}
.lyo-card .dmono{margin-top:6px}
.lyo-card h3{font-size:19px;line-height:1.25;letter-spacing:-.02em;margin-top:0}

/* la méthode : cinq cartes, trois puis deux, le numéro fantôme derrière */
.lyo-etapes{margin-top:48px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.lyo-etape{grid-column:span 2;padding:30px 28px 30px;display:grid;gap:10px;align-content:start;overflow:hidden}
.lyo-etape:nth-child(4),.lyo-etape:nth-child(5){grid-column:span 3}
.lyo-ghost{position:absolute!important;right:14px;top:-18px;font-size:120px;line-height:1;font-weight:600;letter-spacing:-.06em;color:var(--lilac-deep);opacity:.07;pointer-events:none;user-select:none}
.lyo-etape h3{font-size:21px;line-height:1.2;letter-spacing:-.025em;margin-top:4px}
.lyo-etape p{color:var(--ink-2);font-size:16px;line-height:1.5;margin:0}
.lyo-etape ul{margin-top:12px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:8px;font-size:14.5px}
.lyo-etape li{display:flex;gap:10px}.lyo-etape li .ico{margin-top:3px;color:var(--ink)}

/* la roadmap : une phrase sous le tableau */
.lyo-rmp-note{margin-top:40px;max-width:640px}
.lyo-rmp-note p{font-size:18px;line-height:1.5;color:var(--ink-2)}
.lyo-rmp-note p+p{margin-top:10px}

/* l'offre */
.offer .lyo-reste{margin-top:20px}
.offer.red .lyo-reste{color:#fff}
.offer .btn-hero{margin-top:28px}
.offer a[href^="mailto:"]{color:inherit;text-decoration:underline;text-underline-offset:3px}

@media (max-width:1100px){.lyo-cards4{grid-template-columns:repeat(2,minmax(0,1fr))}.lyo-etape,.lyo-etape:nth-child(4),.lyo-etape:nth-child(5){grid-column:span 3}}
@media (max-width:900px){
  .lyo-pres{margin:0 12px;grid-template-columns:1fr;gap:28px;padding:28px 22px}
  .lyo-cards4{grid-template-columns:1fr}
  .lyo-etapes{grid-template-columns:1fr}.lyo-etape,.lyo-etape:nth-child(4),.lyo-etape:nth-child(5){grid-column:auto}
}

/* la fin de page : une barre, la fumée du bouton de la home en fond, le titre et le bouton */
.lyo-barre{position:relative;isolation:isolate;overflow:hidden;margin:0 16px;border-radius:var(--r-lg);background:var(--grad);color:#fff;
  min-height:172px;padding:40px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.lyo-barre::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px}
.lyo-barre > .nav-fond{z-index:0}
.lyo-barre h2,.lyo-barre .pass-btn{position:relative;z-index:2}
.lyo-barre h2{font-size:clamp(26px,3vw,40px);line-height:1.05;letter-spacing:-.03em;color:#fff;max-width:18ch;text-shadow:0 1px 18px rgba(20,36,140,.35)}
.lyo-barre-btn{flex:none;min-width:280px;height:60px;border-radius:18px}
.lyo-barre-btn .lab{font-size:16px}
/* le hero : l'image des écrans, cadrée un peu plus haut que celle de la home */
.lyo .hero-art{width:78%;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 26%,#000 52%,#000 100%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 22%,#000 45%,#000 100%);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 26%,#000 52%,#000 100%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 22%,#000 45%,#000 100%);mask-composite:intersect}
.lyo .hero-art img{object-fit:cover;object-position:50% 100%;mix-blend-mode:screen;filter:saturate(1) contrast(1.04)}
.lyo .ha-fit{display:none}
@media (max-width:900px){.lyo .hero-art{width:100%;height:70%}.lyo .hero-art img{object-position:50% 100%}}
@media (max-width:900px){.lyo-barre{margin:0 12px;padding:28px 22px}.lyo-barre-btn{width:100%;min-width:0}}

/* /consultant-seo-geo-lyon, version consultant SEO B2B : blocs de texte, listes, tuiles de chiffres, questions */
.lyo-txt{max-width:680px;margin-top:28px}
.lyo-txt p{font-size:18px;line-height:1.55;color:var(--ink-2)}
.lyo-txt p+p{margin-top:12px}
.lead + .lyo-txt{margin-top:24px}
.lyo-txt + *{margin-top:32px}
.lyo-txt + .lyo-txt{margin-top:28px}
.lead + .offers,.lyo-txt + .offers{margin-top:40px}
.lyo-lede{font-size:19px;line-height:1.4;letter-spacing:-.015em;color:var(--ink)}
.offer .lyo-lede{margin-top:0}
.offer.red .lyo-lede{color:#fff}
.offer .lyo-lede + p,.offer .lyo-lede + ul{margin-top:16px}
.offer ul + p{margin-top:20px}
.offer h2{font-size:24px;line-height:1.2;letter-spacing:-.025em}
.offer.red h2{color:#fff}
.lyo-wide{margin-top:32px}
.lyo-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px;margin-top:0;padding-top:0;border-top:0}
.lyo-wide .lyo-lede + .lyo-cols{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.lyo-wide > .lyo-cols:first-child{margin-top:0}
.lyo-prix{margin-top:14px;font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:-.04em;font-weight:500}
.offer.red .lyo-prix{color:#fff}
.lyo-pres-card .lyo-prix{color:#fff;font-size:clamp(28px,3vw,38px)}
.lyo-pres-card .btn-hero{margin-top:26px}
.lyo-mail{margin-top:24px;font-size:18px}
.lyo-mail a{text-decoration:underline;text-underline-offset:3px}
.offer .btn-hero{margin-top:28px}
.offer .btn-hero + .lyo-mail{margin-top:24px}

/* trois critères, trois phases */
.lyo-tri{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lyo-tri .lyo-etape,.lyo-tri .lyo-etape:nth-child(n){grid-column:auto}
.lyo-tri .lyo-etape{min-height:180px;padding-top:44px}
.lyo-tri-ph .lyo-etape{min-height:0}
.lyo-tri-ph .lyo-etape h3{margin-top:18px}
.lyo-tri-ph .lyo-etape p{margin-top:0}
.lyo-tri-ph .lyo-etape.red p,.lyo-tri-ph .lyo-etape.red h3{color:#fff}
.lyo-tri-ph .lyo-etape.red .lyo-ghost{color:#fff;opacity:.14}
.lyo-tri-ph .lyo-etape.red ul{border-color:rgba(255,255,255,.3)}
.lyo-tri-ph .lyo-etape.red li .ico{color:#fff}

/* un mot-clé puis ses questions, deux volumes de pages */
.lyo-flow{margin-top:32px;display:grid;grid-template-columns:minmax(0,.8fr) auto minmax(0,1.4fr);gap:20px;align-items:stretch}
.lyo-flow2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lyo-tile{padding:36px 32px;display:grid;gap:12px;align-content:center}
.lyo-tile b{font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.035em;font-weight:500}
.lyo-flow2 .lyo-tile b{font-size:clamp(44px,6vw,84px);line-height:1;letter-spacing:-.05em}
.lyo-tile span{font-size:17px;line-height:1.4;color:var(--ink-2)}
.offer.red.lyo-tile b,.offer.red.lyo-tile span{color:#fff}
.lyo-puis{align-self:center;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--ink-2)}

/* les sept points de l'audit, les types de pages */
.lyo-grid4{margin-top:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.lyo-mini{padding:22px 22px 24px;gap:10px}
.lyo-mini h3{font-size:18px}
.lyo-pills{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.lyo-pills li{padding:11px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:16px;line-height:1.2;color:var(--ink);box-shadow:0 6px 18px rgba(var(--shadow-rgb),.06)}
.lyo-pills-w{margin-top:8px}
.lyo-pills-w li{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.28);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.lyo-pres .lyo-pres-sous + .lyo-pills,.lyo-pres .lyo-pills + .lyo-pres-sous{margin-top:20px}
.lyo-pres-txt .lyo-pres-sous{max-width:56ch}
.lyo-pres-txt .lyo-pres-grand{max-width:26ch}
.lyo-pres-card h3 + .lyo-chips{margin-top:22px}

/* la phrase à retenir */
.lyo-cit{margin-top:32px;font-size:clamp(34px,5vw,64px);line-height:1.04;letter-spacing:-.04em;font-weight:500;max-width:18ch;
  color:transparent;-webkit-text-fill-color:transparent;background-image:var(--grad);background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}
.lyo-cit b{font-weight:inherit}

/* chiffres des cas clients */
.lyo-stats{margin-top:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.lyo-stats3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lyo-stat{padding:26px 24px 28px;font-size:16px;line-height:1.4;color:var(--ink-2);display:grid;align-content:start;gap:8px}
.lyo-stat b{display:block;font-size:clamp(22px,2.2vw,30px);line-height:1.12;letter-spacing:-.03em;font-weight:500;color:var(--ink)}
.offer.red.lyo-stat,.offer.red.lyo-stat b{color:#fff}
.lyo-rangs .lyo-stat{font-size:18px;color:var(--ink)}
.lyo-txt + .lyo-stats{margin-top:20px}
.lyo-stats + .lyo-txt{margin-top:36px}

/* questions */
.lyo-qrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.lyo-qr{padding:32px}
.lyo-qr h2{margin-bottom:16px}
.lyo-qr p{margin-top:10px;font-size:17px;line-height:1.5}
.lyo-qr ul{margin-top:16px;padding-top:16px;grid-template-columns:1fr}
.lyo-qr ul + p{margin-top:16px}
.lyo-qr:last-child:nth-child(odd){grid-column:1/-1}

@media (max-width:1100px){.lyo-grid4,.lyo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.lyo-stats3{grid-template-columns:repeat(3,minmax(0,1fr))}.lyo-tri{grid-template-columns:1fr}}
@media (max-width:900px){
  .lyo-cols{grid-template-columns:1fr}
  .lyo-flow,.lyo-flow2{grid-template-columns:1fr}.lyo-puis{justify-self:start}
  .lyo-grid4,.lyo-stats,.lyo-stats3{grid-template-columns:1fr}
  .lyo-qrs{grid-template-columns:1fr}.lyo-qr{padding:26px 22px}
  .lyo-txt p{font-size:17px}
}
.lyo-pres-fin{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.lyo-portrait{display:grid;place-items:center;padding:24px;justify-self:start}
@media (max-width:900px){.lyo-pres-fin{grid-template-columns:1fr}}
.lyo-ghost::before{content:attr(data-n)}

/* la page éditoriale : le titre à gauche, collant, le corps à droite */
.lyo-sec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;row-gap:48px;align-items:start}
.lyo-sec > .lead{grid-column:1;position:sticky;top:104px;align-self:start;max-width:none;padding-right:24px}
.lyo-sec > .lead h2{font-size:clamp(28px,2.6vw,34px);line-height:1.12;max-width:14ch}
.lyo-sec > .lead p{max-width:34ch}
.lyo-body{grid-column:2;min-width:0}
.lyo-full{grid-column:1/-1;min-width:0}
.lyo-body > :first-child{margin-top:0 !important}
.lyo-body .lyo-txt{max-width:none}
.lyo-body .lyo-txt p{max-width:62ch}
.lyo-body .offers{margin-top:32px;gap:16px}
.lyo-body .lyo-txt + .offers,.lyo-body .lyo-txt + .lyo-wide{margin-top:28px}
.lyo-body .lyo-cards4{grid-template-columns:repeat(2,minmax(0,1fr))}
.lyo-body .lyo-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
.lyo-body .lyo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.lyo-body .lyo-stats3 .lyo-stat:first-child{grid-column:1/-1}
.lyo-body .lyo-cit{font-size:clamp(30px,3.6vw,50px);max-width:none}
.lyo-body .lyo-flow{grid-template-columns:minmax(0,.9fr) auto minmax(0,1.5fr)}
.lyo-tri-ph .lyo-etape{padding-top:40px}
.lyo-full .lyo-tri{margin-top:0}

/* tuiles de chiffres : la phrase entière, la valeur en grand, la ponctuation sur la même ligne */
.lyo-stat{display:block;padding:24px 24px 26px;font-size:15px;line-height:1.5}
.lyo-stat b{display:inline;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.03em;font-weight:500;color:var(--ink);margin-right:2px}
.lyo-stat b + *{vertical-align:baseline}
.lyo-rangs .lyo-stat{font-size:17px;line-height:1.4}

@media (max-width:1100px){.lyo-sec{grid-template-columns:1fr;row-gap:28px}.lyo-sec > .lead{position:static;grid-column:auto}.lyo-body{grid-column:auto}}
@media (max-width:900px){.lyo-body .lyo-cards4,.lyo-body .lyo-grid4,.lyo-body .lyo-stats{grid-template-columns:1fr}}
.lyo-stat .lyo-lab{display:block;font-size:14px;line-height:1.4;color:var(--ink-2);margin-bottom:8px}
.offer.red.lyo-stat .lyo-lab{color:rgba(255,255,255,.82)}
.lyo-body .lyo-flow{grid-template-columns:1fr;gap:14px}
.lyo-body .lyo-tile{padding:30px 32px}
.lyo-body .lyo-tile b{font-size:clamp(24px,2.6vw,34px)}
.lyo-body .lyo-tri{grid-template-columns:1fr;gap:12px}
.lyo-body .lyo-tri .lyo-etape{min-height:0;padding:26px 140px 26px 28px}
.lyo-body .lyo-tri .lyo-etape h3{font-size:19px}
.lyo-body .lyo-tri .lyo-ghost{top:-14px;right:18px;font-size:96px}
.lyo-body .lyo-prix{font-size:clamp(28px,2.8vw,38px)}

/* la présentation : la phrase en grand, le logo Organikk en volume et trois cartes (repris du bloc agents de la page Système) */
#qui .lead h2{max-width:22ch;font-size:clamp(34px,3.8vw,52px);line-height:1.08}
.lyo-agent{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:center;margin-top:40px}
.lyo-agent .sse-agent-gem{display:grid;place-items:center;position:relative;min-height:220px}
.lyo-agent .sse-agent-gem::before{content:"";position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(127,160,255,.45),transparent);z-index:0}
.lyo-gem{position:relative;z-index:1;width:190px;height:auto;filter:drop-shadow(0 24px 30px rgba(31,52,160,.35));animation:lyo-flotte 6s ease-in-out infinite}
@keyframes lyo-flotte{50%{transform:translateY(-8px)}}
.lyo-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-width:0}
.lyo-mod{position:relative;isolation:isolate;overflow:hidden;min-width:0;min-height:160px;padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);transition:color .3s,box-shadow .3s}
.lyo-mod::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--grad);opacity:0;transition:opacity .3s}
.lyo-mod::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px;transition:opacity .3s}
.lyo-mod:hover{color:#fff;box-shadow:0 20px 44px -20px rgba(31,52,160,.45)}
.lyo-mod:hover::before{opacity:1}.lyo-mod:hover::after{opacity:.5}
.lyo-mod p{margin:0;font-size:15.5px;line-height:1.55;color:inherit}
@media (prefers-reduced-motion:reduce){.lyo-gem{animation:none}}
@media (max-width:1000px){.lyo-agent{grid-template-columns:1fr;gap:16px}.lyo-gem{width:140px}.lyo-mods{grid-template-columns:1fr}}
/* le titre de présentation : mots en noir, chacun passe en dégradé outremer au défilement (lyon.js) */
#qui h2.lyo-mots{background:none !important;color:var(--ink) !important;-webkit-text-fill-color:currentColor !important;width:auto}
.lyo-mots span{color:var(--ink);-webkit-text-fill-color:currentColor;transition:color .35s,-webkit-text-fill-color .35s}
.lyo-mots span.on{color:transparent;-webkit-text-fill-color:transparent;background-image:var(--grad-text);background-size:100% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}
.lyo-gem{width:220px}

/* la prestation : titre et intro côte à côte, dix lignes à numéros fantômes, aucun filet ; lyon.js fait apparaître les lignes et allume celle du milieu de l'écran */
.lyo-ed-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end}
.lyo-ed-h2{font-size:clamp(34px,4vw,56px);line-height:1.05;letter-spacing:-.03em;max-width:16ch;margin:0;background:none !important;color:var(--ink) !important;-webkit-text-fill-color:currentColor !important}
.lyo-ed-p{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2);max-width:40ch}
.lyo-ed-fin{margin-top:72px;max-width:56ch}
.lyo-ed-fin p{font-size:18px;line-height:1.5;color:var(--ink-2);margin:0}
.lyo-ed-fin p+p{margin-top:10px}
.lyo-marge{list-style:none;margin:80px 0 0;padding:0;counter-reset:mg;max-width:860px;position:relative}
.lyo-marge li{counter-increment:mg;position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;min-height:92px;padding:8px 0;
  opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 70ms)}
.lyo-marge li.in{opacity:1;transform:none}
.lyo-marge li::before{content:counter(mg,decimal-leading-zero);grid-column:1;font-size:88px;line-height:1;letter-spacing:-.06em;font-weight:500;
  color:transparent;-webkit-text-fill-color:transparent;background-image:var(--grad-text);background-size:100% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;
  opacity:.1;transform:translateX(-6px) scale(.96);transform-origin:left center;transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.lyo-marge li span{grid-column:2;font-size:clamp(22px,2.2vw,28px);line-height:1.25;letter-spacing:-.022em;font-weight:500;color:var(--ink);transition:transform .6s cubic-bezier(.2,.7,.2,1),color .4s}
.lyo-marge li.now::before,.lyo-marge li:hover::before{opacity:1;transform:none}
.lyo-marge li:hover span{transform:translateX(10px)}
.lyo-marge li.now span{color:transparent;-webkit-text-fill-color:transparent;background-image:var(--grad-text);background-size:100% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}
@media (max-width:900px){.lyo-ed-head{grid-template-columns:1fr;gap:20px}.lyo-marge{margin-top:48px}.lyo-marge li{grid-template-columns:80px minmax(0,1fr);min-height:72px}.lyo-marge li::before{font-size:52px}}
@media (prefers-reduced-motion:reduce){.lyo-marge li{opacity:1;transform:none;transition:none}}

/* les secteurs : titre noir, sous-titre en grand, quatre lignes avec un trait outremer qui se déploie (lyon.js) */
.lyo-h3 h2{margin:0;max-width:18ch;font-size:clamp(34px,3.8vw,52px);line-height:1.06;letter-spacing:-.03em;color:var(--ink) !important;-webkit-text-fill-color:currentColor !important;background:none !important}
.lyo-h3 p{margin:32px 0 0;font-size:clamp(22px,2.3vw,30px);line-height:1.3;letter-spacing:-.02em;font-weight:500;color:var(--ink);max-width:30ch}
.lyo-crit{list-style:none;margin:64px 0 0;padding:0;max-width:900px}
.lyo-crit li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:28px;align-items:center;padding:22px 0;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*120ms)}
.js .lyo-crit li:not(.in){opacity:0;transform:translateY(24px)}
.lyo-crit li span{font-size:clamp(24px,2.6vw,34px);line-height:1.2;letter-spacing:-.025em;font-weight:500;color:var(--ink);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.lyo-tiret{display:block;height:2px;width:48px;border-radius:2px;background:var(--grad);transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*120ms + .25s)}
.js .lyo-crit li:not(.in) .lyo-tiret{transform:scaleX(0)}
.lyo-crit li:hover .lyo-tiret{transform:scaleX(1.3)}
.lyo-crit li:hover span{transform:translateX(8px)}
@media (max-width:900px){.lyo-crit li{grid-template-columns:36px minmax(0,1fr);gap:16px;padding:16px 0}.lyo-tiret{width:28px}}
@media (prefers-reduced-motion:reduce){.js .lyo-crit li:not(.in){opacity:1;transform:none}.js .lyo-crit li:not(.in) .lyo-tiret{transform:none}}

/* ═══ L'écran en verre : élément de la DA de la page (barre à trois points, trois compteurs, courbe). Posé sur une tuile claire à halo outremer. ═══ */
.lyo-scr{position:relative;width:100%;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:0 30px 60px -24px rgba(33,55,157,.45),inset 0 1px 0 rgba(255,255,255,.9);color:#fff;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.lyo-scr-bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.18)}
.lyo-scr-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.7)}
.lyo-scr-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 14px 6px}
.lyo-scr-kpis>div{padding:10px 12px;border-radius:12px;background:rgba(47,79,224,.55);border:1px solid rgba(255,255,255,.35)}
.lyo-scr-kpis .dmono{display:block;font-size:10px;color:rgba(255,255,255,.8)}
.lyo-scr-kpis b{display:block;margin-top:4px;font-size:20px;line-height:1;letter-spacing:-.03em;font-weight:500;color:#fff}
.lyo-scr-chart{padding:8px 14px 14px}
.lyo-scr-chart svg{display:block;width:100%;height:110px}

/* les mots-clés : sous-titre gris, damier de tuiles (questions en outremer grainé, écrans en verre), tableau en perspective */
.lyo-gris{margin-top:28px;max-width:56ch}.lyo-gris p{margin:0;font-size:18px;line-height:1.5;color:var(--ink-2)}.lyo-gris p+p{margin-top:10px}
.lyo-ed-fin{margin-top:64px}
.lyo-tiles{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lyo-tile{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1/1;border-radius:6px;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*90ms)}
.js .lyo-tile:not(.in){opacity:0;transform:translateY(18px)}
.lyo-tile.bleu{background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:34px}
.lyo-tile.bleu::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px}
.lyo-tile.bleu::before{content:"";position:absolute;left:-20%;top:-30%;width:70%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.3),transparent);filter:blur(24px)}
.lyo-tile.bleu p{position:relative;z-index:1;margin:0;font-size:clamp(22px,2.1vw,28px);line-height:1.18;letter-spacing:-.025em;font-weight:500;color:#fff;max-width:16ch;text-align:center !important}
.lyo-tile.ecr{background:linear-gradient(160deg,#f6f8ff 0%,#e3e9ff 55%,#cfdaff 100%);display:grid;place-items:center;padding:28px}
.lyo-tile.ecr::before{content:"";position:absolute;width:70%;height:70%;left:50%;top:55%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(47,79,224,.55),rgba(127,160,255,.25) 60%,transparent);filter:blur(28px)}
.lyo-tile.ecr:hover .lyo-scr{transform:translateY(-4px)}
.lyo-persp-sec{position:relative;isolation:isolate;margin-top:40px;padding:40px 0 80px}
.lyo-persp{perspective:2200px;perspective-origin:50% 40%}
.lyo-persp-obj{--rx:10deg;--ry:-14deg;--rz:2deg;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));transition:transform .9s cubic-bezier(.2,.7,.2,1);will-change:transform}
.lyo-persp .lyo-tbl-wrap{position:relative;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 2px 4px rgba(20,28,60,.06),0 30px 60px -20px rgba(33,55,157,.28),0 90px 140px -50px rgba(20,28,60,.35),inset 0 1px 0 #fff}
.lyo-persp .lyo-tbl-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(47,79,224,.06) 100%)}
.lyo-tbl{width:100%;border-collapse:collapse;font-size:16px;line-height:1.3;color:var(--ink)}
.lyo-tbl thead th{text-align:left;font-family:var(--mono);font-weight:400;font-size:13px;color:var(--c-top);background:#eef2ff;padding:22px 18px;white-space:nowrap}
.lyo-tbl thead th:first-child,.lyo-tbl tbody th{padding-left:32px}
.lyo-tbl tbody th{text-align:left;font-weight:400;padding:22px 18px;white-space:nowrap;border-top:1px solid var(--line)}
.lyo-tbl tbody td{padding:22px 18px;white-space:nowrap;border-top:1px solid var(--line)}
.lyo-tbl tbody tr:hover{background:#fafbff}
.lyo-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;font-weight:500}
.lyo-pill i{font-style:normal;font-size:11px}
.lyo-pill.up{background:#e8f5ee;color:#1f7a4d}.lyo-pill.down{background:#fbe9e9;color:#b02a2a}
.lyo-persp-sec::before,.lyo-persp-sec::after{content:"";position:absolute;z-index:-1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9fb3f7,#2f4fe0 70%);opacity:.9}
.lyo-persp-sec::before{width:120px;height:120px;right:-10px;top:10px}
.lyo-persp-sec::after{width:70px;height:70px;left:40px;bottom:40px}
@media (max-width:1000px){.lyo-persp{perspective:none}.lyo-persp-obj{transform:none}.lyo-persp .lyo-tbl-wrap{overflow:auto}.lyo-persp-sec::before,.lyo-persp-sec::after{display:none}}
@media (max-width:900px){.lyo-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.lyo-tile.bleu{padding:22px}.lyo-tile.ecr{padding:16px}.lyo-scr-kpis b{font-size:16px}}
@media (prefers-reduced-motion:reduce){.js .lyo-tile:not(.in){opacity:1;transform:none}}

/* mots-clés, version validée : titre et blocs de texte en grand dont les mots passent en outremer au défilement (lyon.js), damier, puis texte + écran-tableau */
.lyo-h4 h2{margin:0;max-width:20ch;font-size:clamp(38px,4.6vw,64px);line-height:1.02;letter-spacing:-.035em;color:var(--ink) !important;-webkit-text-fill-color:currentColor !important;background:none !important}
.lyo-big{margin-top:72px;max-width:none}
/* espacement entre sections (08/10) */
#prestation,#entreprises,#mots-cles,#faq,#avis-consultants,#methode,#resultats,#qui-est-tim,#questions,#contact{padding-top:160px}
@media (max-width:700px){#prestation,#entreprises,#mots-cles,#faq,#avis-consultants,#methode,#resultats,#qui-est-tim,#questions,#contact{padding-top:96px}}
.lyo-h4-long,.lyo-soustitre{grid-column:1/-1}
.lyo-h4-long h2{max-width:28ch}
.lyo-soustitre{margin-top:24px}
.lyo-soustitre p{margin:0;max-width:52ch;font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--ink-2)}
.lyo-soustitre + *{margin-top:56px}
.lyo-big p{margin:0;font-size:clamp(26px,3vw,42px);line-height:1.14;letter-spacing:-.03em;font-weight:500;color:var(--ink)}
.lyo-big p+p{margin-top:22px}
.lyo-big-intro{margin-top:40px}
.lyo-big-intro + .lyo-tiles{margin-top:48px}
.lyo-duo{margin-top:120px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:80px;align-items:center}
.lyo-duo .lyo-big{margin:0}
.lyo-duo .lyo-big p{font-size:clamp(16px,calc(2.5vw - .5rem),26px);line-height:1.45;font-weight:400;color:var(--ink-2,var(--ink))}
.lyo-duo .lyo-big p:first-child{font-weight:500;color:var(--ink)}
.lyo-duo .lyo-big p+p{margin-top:28px}
.lyo-tile.bleu{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),background .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.lyo-tile.bleu::after,.lyo-tile.bleu::before{transition:opacity .45s}
.lyo-tile.bleu:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -30px rgba(33,55,157,.3)}
.lyo-tile.bleu:hover::after,.lyo-tile.bleu:hover::before{opacity:0}
.lyo-tile.bleu p{transition:color .45s,-webkit-text-fill-color .45s}
.lyo-tile.bleu:hover p{color:transparent;-webkit-text-fill-color:transparent;background-image:var(--grad-text);background-size:100% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}
.lyo-kw-tile{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;padding:40px 32px;background:linear-gradient(160deg,#f6f8ff 0%,#e3e9ff 55%,#cfdaff 100%)}
.lyo-kw-tile::before{content:"";position:absolute;width:75%;height:75%;left:50%;top:55%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(47,79,224,.55),rgba(127,160,255,.25) 60%,transparent);filter:blur(28px);z-index:0}
.lyo-kw-tile .lyo-scr{position:relative;z-index:1}
.lyo-kw{padding:16px 16px 18px;display:grid;gap:8px}
.lyo-kw-head,.lyo-kw-row{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,.9fr));gap:8px;align-items:center}
.lyo-kw-head{padding:2px 12px 6px}
.lyo-kw-head span{font-size:11px;color:var(--c-top);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyo-kw-row{padding:11px 12px;border-radius:12px;background:rgba(47,79,224,.55);border:1px solid rgba(255,255,255,.35);color:#fff;transition:background .3s,transform .3s}
.lyo-kw-row:hover{background:rgba(47,79,224,.68);transform:translateX(3px)}
.lyo-kw-row .lyo-kw-k{font-size:12.5px;line-height:1.25;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lyo-kw-row>b{font-size:17px;line-height:1;letter-spacing:-.03em;font-weight:500;color:#fff;white-space:nowrap}
.lyo-kw-row .lyo-pill{display:inline-flex;align-items:center;gap:5px;justify-self:start;padding:5px 8px;border-radius:8px;font-size:14px;letter-spacing:-.02em;white-space:nowrap;font-weight:500}
.lyo-kw-row .lyo-pill i{font-style:normal;font-size:10px}
.lyo-kw-row .lyo-pill.up{background:rgba(120,235,180,.28);color:#eafff4}.lyo-kw-row .lyo-pill.down{background:rgba(255,140,140,.28);color:#ffe6e6}
/* les mots qui s'allument : noir, puis dégradé outremer (lyon.js) */
.lyo-mots span{color:var(--ink);-webkit-text-fill-color:currentColor;transition:color .35s,-webkit-text-fill-color .35s}
.lyo-mots span.on{color:transparent;-webkit-text-fill-color:transparent;background-image:var(--grad-text);background-size:100% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}
@media (max-width:1000px){.lyo-duo{grid-template-columns:1fr;gap:32px}}
@media (max-width:900px){.lyo-kw-tile{padding:16px}.lyo-kw{overflow:auto}}
/* la présentation : le titre centré sous le hero */
#qui .lead{max-width:none;text-align:center}
#qui .lead h2{max-width:24ch;margin:0 auto;text-align:center !important}
#qui h2.lyo-mots span{text-align:center}

/* les secteurs : une tuile claire à halo, les secteurs en onglets, un écran en verre par secteur (lyon.js) */
.lyo-sectab{position:relative;isolation:isolate;overflow:hidden;margin-top:48px;padding:28px 40px 40px;border-radius:28px;background:linear-gradient(160deg,#f6f8ff 0%,#e3e9ff 55%,#cfdaff 100%)}
.lyo-sectab::before{content:"";position:absolute;width:60%;height:70%;left:50%;top:60%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(47,79,224,.55),rgba(127,160,255,.25) 60%,transparent);filter:blur(34px);z-index:0}
.lyo-sectab-tabs{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
.lyo-sectab-t{height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.6);color:var(--ink);font-size:15px;font-weight:500;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.lyo-sectab-t.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 12px 28px -12px rgba(33,55,157,.5)}
.lyo-sectab-scrs{position:relative;z-index:1;max-width:640px;margin:0 auto;display:grid}
.lyo-sectab-s{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.lyo-sectab-s.on{opacity:1;transform:none;pointer-events:auto}
.lyo-sectab-s .lyo-scr-kpis b{font-size:24px}.lyo-sectab-s .lyo-scr-chart svg{height:140px}
#entreprises .lyo-h3 h2{max-width:18ch}
@media (max-width:900px){.lyo-sectab{padding:18px}}
/* les chiffres fantômes des phases restent cachés ; la liste de la prestation garde ses chiffres animés (demande Tim) */
.lyo-ghost{display:none !important}

/* FAQ : accordéon à filets fins, « + » fin qui tourne, réponses en paragraphes aérés, mots en avant en dégradé outremer */
.lyo-faq{max-width:860px}
.lyo-faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0}
.lyo-fq-body p{margin:0 0 12px;font-size:17px;line-height:1.55;color:var(--ink-2)}
.lyo-fq-body p b{color:var(--ink);font-weight:500}
.lyo-fq-body ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.lyo-fq-body li{position:relative;padding-left:22px;font-size:16px;line-height:1.45;color:var(--ink)}
.lyo-fq-body li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:2px;border-radius:2px;background:var(--grad)}
summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}
.lyo-faq summary h3{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.25;letter-spacing:-.022em;font-weight:500;color:var(--ink);transition:color .3s}
.lyo-faq details[open] summary h3,.lyo-faq summary:hover h3{color:var(--c-top)}
.lyo-faq .lyo-fq{border-top:1px solid var(--line)}
.lyo-faq .lyo-fq:last-child{border-bottom:1px solid var(--line)}
.lyo-fq-plus{position:relative;flex:none;width:16px;height:16px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.lyo-fq-plus::before,.lyo-fq-plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.lyo-fq-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] .lyo-fq-plus{transform:rotate(45deg)}details[open] .lyo-fq-plus::before,details[open] .lyo-fq-plus::after{background:var(--c-top)}
.lyo-faq .lyo-fq-body{padding:0 0 28px;max-width:62ch}
/* réponses : texte seul, aéré, un saut de ligne par phrase, les listes ligne à ligne */
.lyo-faq .lyo-fq-body{display:block;max-width:62ch;padding:4px 0 40px}
.lyo-fq-body p{margin:0 0 18px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.lyo-fq-body p:last-child{margin-bottom:0}
.lyo-fq-body p b{color:var(--ink);font-weight:500}
.lyo-fq-body p b{font-weight:500;color:transparent;-webkit-text-fill-color:transparent;background-image:var(--grad-text);background-size:100% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}


/* Qui est Timothée : une carte de profil blanche centrée, en volume, qui suit la souris (lyon.js) */
.lyo-tim{text-align:center}
.lyo-tim h2{margin:0 auto;max-width:20ch;font-size:clamp(30px,3.4vw,46px);line-height:1.08;letter-spacing:-.03em;color:var(--ink) !important;-webkit-text-fill-color:currentColor !important;background:none !important;text-align:center !important}
.lyo-tim-sc{margin:56px auto 0;max-width:500px;perspective:1400px;animation:lyo-tflotte 7s ease-in-out infinite}
@keyframes lyo-tflotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.lyo-tim-card{--rx:0deg;--ry:0deg;border-radius:40px;padding:12px;background:#fff;border:1px solid rgba(255,255,255,.95);transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform;
  box-shadow:0 2px 4px rgba(20,28,60,.05),0 24px 50px -16px rgba(33,55,157,.25),0 70px 120px -40px rgba(20,28,60,.28),inset 0 1px 0 #fff}
.lyo-tim-card.libre{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.lyo-tim-ph{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%;border-radius:30px;background:#eef2ff}
.lyo-tim-txt{padding:28px 22px 22px;text-align:left}
.lyo-tim-txt p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink-2);text-align:left !important}
.lyo-tim-txt p+p{margin-top:14px}
@media (prefers-reduced-motion:reduce){.lyo-tim-sc{animation:none}}

/* résultats : deux colonnes, un écran Search Console en verre par client (quatre compteurs, avant / après) */
.lyo-cas2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start}
.lyo-cas h2{margin:0;font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.03em;color:var(--ink) !important;-webkit-text-fill-color:currentColor !important;background:none !important;max-width:16ch}
.lyo-cas-scr{position:relative;isolation:isolate;overflow:hidden;margin-top:28px;padding:32px 28px;border-radius:22px;background:linear-gradient(160deg,#f6f8ff 0%,#e3e9ff 55%,#cfdaff 100%)}
.lyo-cas-scr::before{content:"";position:absolute;width:75%;height:75%;left:50%;top:55%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(47,79,224,.55),rgba(127,160,255,.25) 60%,transparent);filter:blur(28px);z-index:0}
.lyo-cas-scr .lyo-scr{position:relative;z-index:1}
.lyo-scr4 .lyo-scr-bar{align-items:center}
.lyo-scr4 .lyo-scr-bar .dmono{margin-left:auto;font-size:10px;color:rgba(255,255,255,.9)}
.lyo-scr4 .lyo-scr-kpis{grid-template-columns:repeat(2,1fr)}
.lyo-scr4 .lyo-scr-kpis small{display:block;margin-top:6px;font-size:11px;color:rgba(255,255,255,.75)}
.lyo-scr4 .lyo-scr-kpis b{font-size:24px}
.lyo-cas-txt{margin-top:28px}
.lyo-cas-txt p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.lyo-cas-txt p+p{margin-top:14px}
.lyo-cas-txt p b{font-weight:500;color:transparent;-webkit-text-fill-color:transparent;background-image:var(--grad-text);background-size:100% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text}
@media (max-width:1000px){.lyo-cas2{grid-template-columns:1fr}}

/* le texte des résultats : un rectangle façon Apple (gris très clair, grands coins), trois premières phrases, le reste s'ouvre au « + » */
.lyo-cas-txt{margin-top:20px}
.lyo-cas-box{position:relative;padding:26px 28px 24px;border-radius:24px;background:#f5f6f8;border:1px solid rgba(10,15,30,.04)}
.lyo-cas-box p{margin:0;font-size:16px;line-height:1.6;color:#4a4f5c}
.lyo-cas-box p+p,.lyo-cas-box details p{margin-top:12px}
.lyo-cas-box p b{font-weight:500}
.lyo-cas-more summary{list-style:none;cursor:pointer;display:flex;justify-content:flex-end;margin-top:14px}
.lyo-cas-more summary::-webkit-details-marker{display:none}
.lyo-cas-more[open] summary{order:2}
.lyo-cas-more{display:flex;flex-direction:column}
.lyo-cas-plus{position:relative;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid rgba(10,15,30,.08);box-shadow:0 4px 12px -6px rgba(20,28,60,.25);transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s}
.lyo-cas-plus::before,.lyo-cas-plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.6px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%)}
.lyo-cas-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.lyo-cas-more summary:hover .lyo-cas-plus{background:var(--grad);border-color:transparent}
.lyo-cas-more summary:hover .lyo-cas-plus::before,.lyo-cas-more summary:hover .lyo-cas-plus::after{background:#fff}
.lyo-cas-more[open] .lyo-cas-plus{transform:rotate(45deg)}

/* Qui est Timothée : la carte de profil du pied de la home (pass), agrandie, avec le texte dans le corps ; elle flotte et s'incline sous la souris (lyon.js) */
.lyo-tim-sc{max-width:440px;margin:56px auto 0;animation:none}
.lyo-tim-sc .carte-3d{animation:carte-flotte 7s ease-in-out infinite}
.lyo-pass-c .pass-tete{height:96px}
.lyo-pass-c .pass-corps{margin-top:-48px;padding:0 28px 28px;text-align:left}
.lyo-pass-c .pass-photo{width:96px;height:96px;border-radius:24px}
.lyo-pass-id h3{margin:16px 0 0;font-size:26px;letter-spacing:-.04em;line-height:1.05;color:var(--ink);text-align:left}
.lyo-pass-id .pass-role{margin:6px 0 0;font-size:13px;color:#4a4a58;text-align:left !important}
.lyo-pass-c .pass-stats b{font-size:15px}.lyo-pass-c .pass-stats span{font-size:11.5px}
.lyo-pass-c .lyo-tim-txt{padding:0}
.lyo-pass-c .lyo-tim-txt p{font-size:14.5px;line-height:1.6;color:#3d4152}
.lyo-pass-c .lyo-tim-txt p+p{margin-top:10px}
@keyframes carte-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Qui est Timothée : panneau outremer grainé, texte blanc à gauche, portrait noir et blanc à droite fondu dans le bleu */
.lyo-me{position:relative;isolation:isolate;overflow:hidden;margin:0 16px;border-radius:var(--r-lg);background:var(--grad);color:#fff;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:stretch;min-height:560px}
.lyo-me::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px}
.lyo-me-txt{position:relative;z-index:3;padding:clamp(40px,6vw,88px);align-self:center}
.lyo-me-txt h2{margin:0 0 32px;max-width:14ch;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.04em;color:#fff !important;-webkit-text-fill-color:#fff !important;background:none !important}
.lyo-me-txt p{margin:0;max-width:46ch;font-size:17px;line-height:1.6;color:rgba(255,255,255,.88)}
.lyo-me-txt p+p{margin-top:14px}
.lyo-me-ph{position:relative;z-index:1}
.lyo-me-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(1) contrast(1.1);mix-blend-mode:luminosity;opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 35%);mask-image:linear-gradient(90deg,transparent 0%,#000 35%)}
@media (max-width:900px){.lyo-me{grid-template-columns:1fr;margin:0 12px}.lyo-me-ph{height:360px;order:-1}.lyo-me-ph img{-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}}
/* rééquilibrage : panneau à la largeur du contenu (1200 px), deux moitiés égales, portrait cadré sur le visage et collé en bas */
.lyo-me{max-width:1200px;margin:0 auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0;aspect-ratio:2/1}
.lyo-me-txt{padding:clamp(36px,4.5vw,64px) 0 clamp(36px,4.5vw,64px) clamp(36px,4.5vw,64px)}
.lyo-me-txt h2{font-size:clamp(36px,4vw,56px);margin-bottom:28px}
.lyo-me-txt p{font-size:clamp(15px,1.2vw,17px);max-width:44ch}
.lyo-me-ph img{object-fit:cover;object-position:50% 18%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%);mask-image:linear-gradient(90deg,transparent 0%,#000 28%)}
@media (max-width:1240px){.lyo-me{margin:0 16px}}
@media (max-width:900px){.lyo-me{aspect-ratio:auto;margin:0 12px}.lyo-me-txt{padding:28px 22px 32px}}
/* les trois cartes du début : un titre, puis le texte */
.lyo-mod h3{margin:0 0 10px;font-size:18px;line-height:1.25;letter-spacing:-.02em;font-weight:500;color:inherit}
.lyo-mod p{opacity:.85}

/* Qui suis-je : la souris peint en blanc sur le panneau bleu, le texte passe en encre sous la peinture (même pinceau que /consultants-seo, couleurs inversées) ; curseur pinceau */
.lyo-me-blanc,.lyo-me-encre{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,transparent);mask-image:linear-gradient(transparent,transparent)}
.lyo-me-blanc{z-index:2;background:#fff}
.lyo-me-encre{z-index:4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lyo-me-encre .lyo-me-txt h2{color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important}
.lyo-me-encre .lyo-me-txt p{color:var(--ink-2)}
@media (max-width:900px){.lyo-me-encre{grid-template-columns:1fr}}

/* ═══ Version mobile (≤ 700 px), posée en dernier pour l'emporter sur les règles de bureau ═══ */
@media (max-width:700px){
  /* pied de page : les liens passent à la ligne, plus de défilement horizontal */
  footer .links{flex-wrap:wrap;gap:10px 20px}
  main.lyo{overflow-x:clip}
  /* titres de section */
  .lyo-h3 h2,.lyo-h4 h2,.lyo-ed-h2{font-size:32px;line-height:1.08}
  .lyo-big p,.lyo-big-intro p{font-size:22px;line-height:1.22}
  .lyo-duo .lyo-big p{font-size:16px}
  /* prestation : chiffres plus petits */
  .lyo-marge li{grid-template-columns:56px minmax(0,1fr);min-height:60px;padding:6px 0}
  .lyo-marge li::before{font-size:44px}
  .lyo-marge li span{font-size:18px}
  /* secteurs : onglets serrés, compteurs lisibles */
  .lyo-sectab{padding:16px 12px 18px;border-radius:20px}
  .lyo-sectab-tabs{gap:6px;margin-bottom:16px}
  .lyo-sectab-t{height:38px;padding:0 14px;font-size:13.5px}
  .lyo-sectab-s .lyo-scr-kpis b{font-size:17px;white-space:nowrap}
  .lyo-sectab-s .lyo-scr-chart svg{height:90px}
  /* écran en verre : compteurs sur une ligne sans retour */
  .lyo-scr-kpis{gap:6px;padding:10px 10px 4px}
  .lyo-scr-kpis>div{padding:8px 8px;min-width:0}
  .lyo-scr-kpis .dmono{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lyo-scr-kpis b{font-size:16px;white-space:nowrap}
  .lyo-scr-chart{padding:6px 10px 10px}.lyo-scr-chart svg{height:80px}
  /* damier des mots-clés : une colonne, la question en entier, puis son écran */
  .lyo-tiles{grid-template-columns:1fr;gap:8px}
  .lyo-tile{aspect-ratio:auto}
  .lyo-tile.bleu{padding:34px 24px;min-height:0}
  .lyo-tile.bleu p{font-size:22px;max-width:none}
  .lyo-tile.ecr{padding:18px}
  /* écran-tableau des mots-clés : trois colonnes seulement, mot-clé sur deux lignes */
  .lyo-kw-tile{padding:14px}
  .lyo-kw{padding:10px;gap:6px;overflow:visible}
  .lyo-kw-head,.lyo-kw-row{grid-template-columns:minmax(0,1.6fr) .7fr .9fr;gap:6px}
  .lyo-kw-head span:nth-child(4),.lyo-kw-head span:nth-child(5),.lyo-kw-row>*:nth-child(4),.lyo-kw-row>*:nth-child(5){display:none}
  .lyo-kw-row{padding:9px 10px}
  .lyo-kw-row .lyo-kw-k{white-space:normal;font-size:12px}
  .lyo-kw-row>b{font-size:15px}
  .lyo-kw-row .lyo-pill{font-size:12.5px;padding:4px 6px}
  /* FAQ */
  .lyo-faq summary{padding:20px 0;gap:16px}
  .lyo-faq summary h3{font-size:18px}
  .lyo-fq-body p{font-size:16px}
  /* résultats */
  .lyo-cas2{gap:56px}
  .lyo-cas h2{font-size:26px}
  .lyo-cas-scr{padding:16px;border-radius:18px}
  .lyo-scr4 .lyo-scr-kpis{grid-template-columns:repeat(2,1fr)}
  .lyo-scr4 .lyo-scr-kpis b{font-size:20px}
  .lyo-cas-box{padding:20px 20px 18px;border-radius:20px}
  .lyo-cas-box p{font-size:15px}
  /* Qui suis-je : photo en haut, texte dessous sur toute la largeur */
  .lyo-me{grid-template-columns:1fr;aspect-ratio:auto;margin:0 12px;border-radius:22px}
  .lyo-me-ph{order:-1;height:340px}
  .lyo-me-ph img{object-position:50% 20%;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
  .lyo-me-txt{padding:4px 22px 32px}
  .lyo-me-txt h2{font-size:40px;margin-bottom:20px}
  .lyo-me-txt p{font-size:16px;max-width:none}
  .lyo-me-encre,.lyo-me-blanc{display:none}
  /* barre de contact */
  .lyo-barre{padding:28px 20px}
  .lyo-barre h2{font-size:26px}
  /* présentation : cartes un peu plus serrées */
  #qui .lead h2{font-size:30px}
  .lyo-mod{min-height:0;padding:20px}
}

/* résultats : une ligne par client ; Victoria Garden, texte à gauche et écran à droite ; Golfiller, écran à gauche et texte à droite */
.lyo-cas2{grid-template-columns:1fr;gap:96px}
.lyo-cas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"titre ecran" "texte ecran";column-gap:56px;row-gap:24px;align-items:start}
.lyo-cas > h2{grid-area:titre;align-self:end}
.lyo-cas > .lyo-cas-scr{grid-area:ecran;margin-top:0;align-self:center}
.lyo-cas > .lyo-cas-txt{grid-area:texte;margin-top:0}
.lyo-cas:nth-child(2){grid-template-areas:"ecran titre" "ecran texte"}
@media (max-width:900px){.lyo-cas,.lyo-cas:nth-child(2){grid-template-columns:1fr;grid-template-areas:"titre" "ecran" "texte";row-gap:20px}.lyo-cas2{gap:64px}}
.lyo-me-txt p.lyo-me-lead{font-size:clamp(19px,1.7vw,23px);line-height:1.35;letter-spacing:-.015em;font-weight:500;color:#fff;margin-bottom:22px}
/* Pourquoi travailler avec Organikk : les réseaux (mêmes liens que le pied de page), en pastilles de verre blanches */
.lyo-me-soc{list-style:none;margin:28px 0 0;padding:0;display:flex;gap:10px}
.lyo-me-soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:background .3s,color .3s,transform .3s}
.lyo-me-soc a:hover{background:#fff;color:#2f4fe0;transform:translateY(-2px)}
.lyo-me-soc svg{width:18px;height:18px;fill:currentColor}
.lyo-me{aspect-ratio:auto;min-height:600px}
@media (max-width:700px){.lyo-me{min-height:0}}

/* avis consultants, repris de bootcamp.css (08/10) */
#avis-consultants .dbp{margin:56px 16px 0;border-radius:var(--r-lg);background:var(--grad);padding:48px 40px;color:#fff;position:relative;isolation:isolate;overflow:hidden}
#avis-consultants .dbp::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;mix-blend-mode:overlay;background-image:var(--grain);background-size:260px 260px}
#avis-consultants .dbp>*{position:relative;z-index:1}
#avis-consultants .bc-avis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px);gap:56px;align-items:center;padding:0 max(40px,calc((100% - 1180px) / 2));min-height:560px}
#avis-consultants .av-head h2{margin:0;color:#fff;-webkit-text-fill-color:#fff;background:none;font-size:clamp(34px,3.8vw,54px);line-height:1.04;font-weight:500;letter-spacing:-.045em;max-width:11ch}
#avis-consultants .av-live{margin-top:40px;min-height:200px}
#avis-consultants .av-live p{margin:0;font-size:clamp(22px,2.2vw,30px);line-height:1.25;letter-spacing:-.02em;font-weight:500;color:#fff;transition-property:opacity,filter;transition-duration:.35s;transition-timing-function:cubic-bezier(.2,0,0,1)}
#avis-consultants .av-live p::before{content:"\201C";display:block;font-size:64px;line-height:.8;height:34px;color:rgba(255,255,255,.55)}
#avis-consultants .av-live small{display:block;margin-top:18px;font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.8);transition-property:opacity,filter;transition-duration:.35s;transition-timing-function:cubic-bezier(.2,0,0,1)}
#avis-consultants .av-live.out p,#avis-consultants .av-live.out small{opacity:0;filter:blur(4px)}
#avis-consultants .av-pool{position:relative;height:560px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
#avis-consultants .av-pool.js{display:block;overflow:hidden}
#avis-consultants .av-pool.js .avis{position:absolute;top:0;left:0;will-change:transform}
#avis-consultants .avis{margin:0;background:#fff;color:var(--ink);border-radius:var(--r-md);padding:22px;box-shadow:0 1px 2px rgba(var(--shadow-rgb),.12),0 16px 40px rgba(var(--shadow-rgb),.2);transition-property:opacity;transition-duration:.4s;transition-timing-function:cubic-bezier(.2,0,0,1)}
#avis-consultants .av-pool.js .avis:not(.on){opacity:.5}
#avis-consultants .avis blockquote{margin:0;font-size:14.5px;line-height:1.6;text-wrap:pretty}
#avis-consultants .avis figcaption{display:flex;align-items:center;gap:10px;margin-top:16px}
#avis-consultants .avis .ini{width:32px;height:32px;border-radius:50%;background:var(--tint);color:var(--lilac-deep);display:grid;place-items:center;font-family:var(--mono);font-size:12px;flex:none}
#avis-consultants .avis b{display:block;font-size:13.5px;font-weight:600}
#avis-consultants .avis small{display:block;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
@media (max-width:900px){
  #avis-consultants .dbp{margin:40px 12px 0;padding:24px}
  #avis-consultants .bc-avis{grid-template-columns:1fr;gap:28px;padding:40px 16px 0;min-height:0}
  #avis-consultants .av-head{padding:0 8px}
  #avis-consultants .av-head h2{font-size:clamp(30px,8vw,38px)}
  #avis-consultants .av-live{margin-top:24px;min-height:0}
  #avis-consultants .av-live p{font-size:21px}
}

/* FAQ « sommaire et panneau » (08/10) : sommaire à gauche, réponse dans un panneau léger à droite,
   la question sur un bandeau outremer grainé. Le script construit le sommaire depuis les <details>,
   qui restent dans le HTML. Sous 861 px : accordéon, la question ouverte prend le même bandeau. */
.lyo-faq .lyo-fq-body p,.lyo-faq .lyo-fq-body li{color:#2b3150}
.lyo-faq .lyo-fq-body ul{margin:4px 0 18px;gap:10px}
.lyo-faq .lyo-fq-body li{font-size:17px;line-height:1.55;padding-left:24px}
.lyo-faq summary:focus{outline:none}
.lyo-faq summary:focus-visible{outline:2px solid var(--c-top);outline-offset:4px;border-radius:12px}
.lyo-pan-bandeau{position:relative;isolation:isolate;overflow:hidden;background:var(--grad);color:#fff}
.lyo-pan-bandeau::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:260px 260px;mix-blend-mode:overlay;opacity:.6}
@media (min-width:861px){
  .lyo-faq.pan{max-width:none;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
  .lyo-faq.pan > details{display:none}
  .lyo-pan-som{display:grid;gap:2px;margin:0;padding:0;list-style:none}
  .lyo-pan-som button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:30px 1fr;gap:10px;padding:14px 16px;border-radius:12px;font-size:16px;line-height:1.4;color:var(--ink);transition-property:background-color,color;transition-duration:.25s}
  .lyo-pan-som button .n{font-family:var(--mono);font-size:12px;line-height:1.9;color:var(--ink-3,#8a90a8)}
  .lyo-pan-som button:hover{background:#f4f6ff}
  .lyo-pan-som button[aria-selected="true"]{background:#eef1ff;color:var(--c-top)}
  .lyo-pan-som button[aria-selected="true"] .n{color:var(--c-top)}
  .lyo-pan-som button:focus-visible{outline:2px solid var(--c-top);outline-offset:2px}
  .lyo-pan{position:sticky;top:110px;border:1px solid #e6e9f4;border-radius:20px;overflow:hidden;background:#fff}
  .lyo-pan .lyo-pan-bandeau{padding:22px 28px}
  .lyo-pan .lyo-pan-bandeau small{display:block;font-family:var(--mono);font-size:12px;line-height:1.4;opacity:.85}
  .lyo-pan .lyo-pan-bandeau h3{margin:0;font-size:clamp(20px,1.8vw,24px);line-height:1.25;letter-spacing:-.02em;font-weight:500;color:#fff;-webkit-text-fill-color:#fff;background:none}
  .lyo-pan .lyo-fq-body{max-width:none;padding:26px 28px 30px}
  .lyo-pan .lyo-fq-body.fade{animation:lyoPanIn .3s cubic-bezier(.2,0,0,1)}
}
@keyframes lyoPanIn{from{opacity:0}to{opacity:1}}
@media (max-width:860px){
  .lyo-pan-som,.lyo-pan{display:none}
  .lyo-faq details[open]{border-radius:16px;overflow:hidden;border:1px solid #e6e9f4;margin:8px 0}
  .lyo-faq details[open] + details{border-top:0}
  .lyo-faq details[open] summary{position:relative;isolation:isolate;padding:18px 18px;background:var(--grad)}
  .lyo-faq details[open] summary::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:260px 260px;mix-blend-mode:overlay;opacity:.6}
  .lyo-faq details[open] summary h3{color:#fff !important;-webkit-text-fill-color:#fff}
  .lyo-faq details[open] .lyo-fq-plus::before,.lyo-faq details[open] .lyo-fq-plus::after{background:#fff}
  .lyo-faq details[open] .lyo-fq-body{padding:20px 18px 24px}
}
@media (prefers-reduced-motion:reduce){.lyo-pan .lyo-fq-body.fade{animation:none}}

/* FAQ : fumée rose derrière le titre du panneau (08/10), toile nav-fond.js. Sans WebGL, le dégradé grainé reste en dessous. */
.lyo-pan-bandeau .lyo-pan-fond{position:absolute !important;inset:0;z-index:0 !important;border-radius:0;transition:opacity .45s cubic-bezier(.2,0,0,1)}
.lyo-pan-bandeau .lyo-pan-fond > .nav-fond{position:absolute;inset:0;width:100%;height:100%}
.lyo-pan-bandeau::after{z-index:1}
.lyo-pan-bandeau h3{position:relative;z-index:2;text-shadow:0 1px 14px rgba(20,32,110,.45)}
.lyo-faq details[open] summary h3{text-shadow:0 1px 14px rgba(20,32,110,.4)}
/* mobile : pas de toile WebGL par question, une fumée rose fixe en dégradés */
@media (max-width:860px){
  .lyo-faq details[open] summary{background:radial-gradient(60% 120% at 85% 20%,rgba(247,179,230,.7),transparent 60%),radial-gradient(50% 90% at 20% 110%,rgba(247,179,230,.45),transparent 70%),var(--grad)}
}

/* Introduction B2B : composition et visuels de la page Consultant SEO Lyon. */
#pourquoi-consultant-seo-b2b-lyon{display:block;padding:80px 0;border:0}
#pourquoi-consultant-seo-b2b-lyon .lyo-city-pin{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"heading visual" "copy visual";gap:24px 64px;align-items:start}
#pourquoi-consultant-seo-b2b-lyon.is-pinned .lyo-city-pin{position:sticky;top:96px}
#pourquoi-consultant-seo-b2b-lyon .lyo-section-head{grid-area:heading;position:static;padding:0;background:none}
#pourquoi-consultant-seo-b2b-lyon .lyo-section-head h2{margin:0;max-width:19ch;font-size:clamp(34px,3.8vw,52px);line-height:1.08;letter-spacing:-.035em;font-weight:500;background:none;color:var(--ink);-webkit-text-fill-color:currentColor;text-align:left}
#pourquoi-consultant-seo-b2b-lyon .lyo-copy-body{grid-area:copy;min-width:0;margin:0}
#pourquoi-consultant-seo-b2b-lyon .lyo-copy-body p{font-size:20px;line-height:1.6;letter-spacing:-.012em;margin:0;max-width:48ch;color:var(--ink-2);text-align:left}
#pourquoi-consultant-seo-b2b-lyon .lyo-city-track{grid-area:visual;align-self:center;min-width:0}
#pourquoi-consultant-seo-b2b-lyon .lyo-city-visual{position:relative;align-self:center}
#pourquoi-consultant-seo-b2b-lyon .lyo-tarif-photo{position:relative;isolation:isolate;margin:0;width:100%;height:auto;aspect-ratio:412 / 280;overflow:hidden;border-radius:20px;background:#2f4fe0}
#pourquoi-consultant-seo-b2b-lyon .lyo-tarif-photo img{display:block;position:absolute;inset:0 15%;width:70%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:luminosity;opacity:0;filter:contrast(.94);transition:opacity .55s ease}
#pourquoi-consultant-seo-b2b-lyon .lyo-tarif-photo img.is-active{opacity:.78}
#pourquoi-consultant-seo-b2b-lyon .lyo-tarif-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(127,160,255,.12) 0%,rgba(47,79,224,.06) 42%,rgba(27,52,161,.82) 100%)}
#pourquoi-consultant-seo-b2b-lyon .lyo-tarif-photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--grain);background-size:110px 110px;background-repeat:repeat;filter:contrast(240%);mix-blend-mode:overlay;opacity:.95}
#pourquoi-consultant-seo-b2b-lyon .lyo-tarif-city{position:absolute;left:26px;bottom:22px;z-index:3;color:#fff;font-size:clamp(52px,5.2vw,76px);line-height:.9;letter-spacing:-.06em;font-weight:500}
#pourquoi-consultant-seo-b2b-lyon .lyo-city-photo-controls{display:none}
@media(max-width:1050px){#pourquoi-consultant-seo-b2b-lyon .lyo-tarif-city{font-size:54px;left:22px;bottom:16px}}
@media(max-width:800px){
 #pourquoi-consultant-seo-b2b-lyon{width:calc(100% - 40px);max-width:640px;margin-left:auto;margin-right:auto;padding:56px 0 24px;scroll-margin-top:80px}
 #pourquoi-consultant-seo-b2b-lyon .lyo-city-pin{grid-template-columns:1fr;grid-template-areas:"heading" "copy" "visual";gap:22px}
 #pourquoi-consultant-seo-b2b-lyon .lyo-section-head h2{font-size:clamp(29px,7.5vw,38px);max-width:24ch;line-height:1.1;overflow-wrap:break-word}
 #pourquoi-consultant-seo-b2b-lyon .lyo-copy-body p{font-size:16px;line-height:1.55}
 #pourquoi-consultant-seo-b2b-lyon .lyo-tarif-photo{height:clamp(176px,52vw,240px);aspect-ratio:auto;border-radius:18px}
 #pourquoi-consultant-seo-b2b-lyon .lyo-city-photo-controls{display:flex;gap:8px;margin-top:10px}
 #pourquoi-consultant-seo-b2b-lyon .lyo-city-photo-controls button{flex:1;min-height:44px;padding:0;border:1px solid #e1e7f7;border-radius:10px;background:#f4f6ff;color:#555e7e;font:inherit;font-size:13px;cursor:pointer}
 #pourquoi-consultant-seo-b2b-lyon .lyo-city-photo-controls button[aria-pressed="true"]{background:var(--c-top);border-color:var(--c-top);color:white}
 #pourquoi-consultant-seo-b2b-lyon.is-mobile-pinned .lyo-city-pin{position:static}
 #pourquoi-consultant-seo-b2b-lyon.is-mobile-pinned .lyo-city-track{position:relative;align-self:start}
 #pourquoi-consultant-seo-b2b-lyon.is-mobile-pinned .lyo-city-visual{position:sticky;top:80px}
 #pourquoi-consultant-seo-b2b-lyon.is-mobile-pinned .lyo-city-photo-controls{display:none}
 #pourquoi-consultant-seo-b2b-lyon.is-mobile-pinned img[data-tarif-image]{transition:none}
}
@media(prefers-reduced-motion:reduce){#pourquoi-consultant-seo-b2b-lyon .lyo-tarif-photo img{transition:none}}

/* Portrait encadré, identique au hero de /a-propos/ (Tim, 2026-10-12) :
   cadre arrondi à liseré blanc et ombre, au lieu de la photo fondue en luminosité. */
.lyo-me .lyo-me-ph.lyo-me-cadre{display:flex;align-items:center;justify-content:center;height:auto;padding:clamp(28px,4vw,56px)}
.lyo-me .lyo-me-ph.lyo-me-cadre img{position:relative;inset:auto;width:100%;max-width:380px;height:auto;aspect-ratio:640/790;object-fit:cover;object-position:center 25%;border-radius:22px;border:1px solid rgba(255,255,255,.55);box-shadow:0 28px 70px rgba(17,37,137,.32);filter:none;mix-blend-mode:normal;opacity:1;-webkit-mask-image:none;mask-image:none}
@media (max-width:900px){
  .lyo-me .lyo-me-ph.lyo-me-cadre{order:-1;height:auto;padding:28px 22px 0}
  .lyo-me .lyo-me-ph.lyo-me-cadre img{max-width:300px;aspect-ratio:1;object-position:center 18%}
}

/* Source: public/da/consultant-geo.css */
.lyo .saas-mois-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lyo .v-sec{padding-top:56px}
.lyo .v-sec h3{margin:0 0 16px;font-size:clamp(22px,1.9vw,27px);line-height:1.22;letter-spacing:-.03em;font-weight:500}
.lyo .v-sec p{margin:0;font-size:17px;line-height:1.6}
.lyo .v-sec p+p{margin-top:12px}
.lyo .v-n{display:block;margin-bottom:14px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
/* A */
.lyo .va-list{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lyo .va-card{position:relative;overflow:hidden;padding:34px 30px 36px;border-radius:22px;background-color:#4B6FEB;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0.25  0 0 0 1.4 -0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E"),var(--grain);background-size:140px 140px,180px 180px;background-blend-mode:normal,overlay;color:#fff}
.lyo .va-card h3{color:#fff} .lyo .va-card p{color:rgba(255,255,255,.92)} .lyo .va-card strong{color:#fff} .lyo .va-card .v-n{color:rgba(255,255,255,.8)}
.lyo .va-card .kpi{padding:12px 0;border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3)}
.lyo .va-ghost{position:absolute;right:14px;top:-10px;font-style:normal;font-size:140px;line-height:1;font-weight:600;letter-spacing:-.06em;color:rgba(255,255,255,.14)}
@media (max-width:900px){.lyo .va-list{grid-template-columns:1fr;gap:14px}}

/* Gantt « Nous avons une roadmap à respecter », repris de consultant-seo-saas.css */
.lyo #livrables{padding-top:96px;padding-bottom:24px}
.lyo .saas-rm-panel{position:relative}
.lyo .saas-rm-panel .rmp-head h2{max-width:16ch}
.lyo .saas-rm-panel .rmc,.lyo .saas-rm-panel .rmc-chip{isolation:isolate;border:0;color:#fff;background:#4B6FEB;box-shadow:none;transition:transform .35s cubic-bezier(.2,0,0,1)}
.lyo .saas-rm-panel .rmc::after,.lyo .saas-rm-panel .rmc-chip::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:var(--grain);background-size:180px 180px;mix-blend-mode:overlay;opacity:.7;pointer-events:none}
.lyo .saas-rm-panel .rmc-chip{position:absolute;overflow:hidden}
.lyo .saas-rm-panel .rmc::before,.lyo .saas-rm-panel .rmc-chip::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0.25  0 0 0 1.4 -0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");background-size:140px 140px;opacity:.55;pointer-events:none}
.lyo .saas-rm-panel .rmc:hover{transform:translateY(-3px)}
.lyo .saas-rm-panel .rmc svg,.lyo .saas-rm-panel .rmc-chip svg{stroke:#fff}
.lyo .saas-rm-panel .rmc b{color:#fff}
.lyo .saas-rm-panel .rmc>span{color:rgba(255,255,255,.8)}
@media (max-width:900px){.lyo .saas-rm-panel .rmc-chip{position:static}.lyo #livrables{padding-top:64px}}

/* Bloc objectifs Google + ChatGPT, repris de consultant-seo-saas.css */
.lyo #preuves .objective-system{max-width:1240px;margin-left:auto !important;margin-right:auto !important}
.lyo #preuves .objective-lane{gap:clamp(32px,4vw,72px) !important;justify-content:center}

/* Section « Quelle différence entre le SEO et le GEO ? » : variante 2 du 14/10, logos en volume */
.dsg-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.dsg-card{position:relative;overflow:hidden;border-radius:26px;padding:44px 40px 40px;isolation:isolate;display:flex;flex-direction:column;min-height:560px}
.dsg-light{background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(12,26,70,.25)}
.dsg-bleu{background:#4B6FEB;color:#fff}
.dsg-bleu::after{content:"";position:absolute;inset:0;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0.25  0 0 0 1.4 -0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");background-size:140px 140px;opacity:.55;mix-blend-mode:overlay;pointer-events:none}
.dsg-kick{font-family:var(--mono),'Geist Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 20px;color:var(--ink-2)}
.dsg-bleu .dsg-kick{color:rgba(255,255,255,.72)}
.dsg-card h3{font-family:inherit;font-weight:500;font-size:clamp(24px,2.3vw,32px);line-height:1.18;letter-spacing:-.03em;margin:0;max-width:22ch;color:var(--ink)}
.dsg-card h3 em{font-style:normal;color:#8590a8}.dsg-bleu h3{color:#fff}.dsg-bleu h3 em{color:rgba(255,255,255,.62)}
.dsg-list{list-style:none;margin:32px 0 0;padding:0}
.dsg-list li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.dsg-bleu .dsg-list li{border-color:rgba(255,255,255,.22)}
.dsg-list b{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.035em;font-weight:500;color:#2f4fe0;white-space:nowrap}.dsg-bleu .dsg-list b{color:#fff}
.dsg-list span{font-size:15px;line-height:1.45;color:var(--ink-2)}.dsg-bleu .dsg-list span{color:rgba(255,255,255,.85)}
.dsg-logos{margin-top:auto;padding:40px 4px 0 0;display:flex;justify-content:flex-end;align-items:center;gap:36px}
@media (max-width:900px){.dsg-cards{grid-template-columns:1fr}.dsg-card{min-height:0;padding:32px 24px 28px}.dsg-logos{justify-content:center;padding-top:28px}}
.dsg-p{margin:20px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2);max-width:40ch}.dsg-bleu .dsg-p{color:rgba(255,255,255,.88)}
/* Section leads IA : variante 1 du 14/10, damier de tuiles */
.ldt-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
.ldt-tile{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;padding:32px 28px 30px;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);background:#fff}
.ldt-tile.b{background:#4B6FEB;color:#fff;border:0}
.ldt-tile.b::after{content:"";position:absolute;inset:0;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0.25  0 0 0 1.4 -0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");background-size:140px 140px;opacity:.55;mix-blend-mode:overlay;pointer-events:none}
.ldt-tile.wide{grid-column:span 2}
.ldt-tile b{display:block;font-size:clamp(44px,4.6vw,64px);line-height:.95;letter-spacing:-.05em;font-weight:500;color:#2f4fe0}.ldt-tile.b b{color:#fff}
.ldt-tile p{margin:18px 0 0;font-size:15px;line-height:1.45;color:var(--ink-2)}.ldt-tile.b p{color:rgba(255,255,255,.88)}
.ldt .lyo-gris{margin-top:48px;max-width:none}.ldt .lyo-gris p{max-width:none}
@media (max-width:900px){.ldt-tiles{grid-template-columns:1fr}.ldt-tile.wide{grid-column:auto}.ldt-tile{min-height:0}}
.dsg-flat{width:72px !important;height:72px !important;display:block;flex:none}
.dsg-flat.dsg-white{fill:#fff}.dsg-flat.dsg-ppx{fill:#20B8CD}
@media (max-width:900px){.dsg-flat{width:56px !important;height:56px !important}.dsg-logos{gap:28px}}

/* Section rédaction : une illustration au trait outremer par règle, sans carte ni numéro */
.rdg-list{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 28px}
.rdg-list li{display:flex;flex-direction:column;min-width:0}
.rdg-ill{width:96px;height:96px;margin:0 0 22px -6px}
.rdg-ill svg{width:100% !important;height:100% !important;display:block}
.rdg-list h3{margin:0 0 10px;font-size:clamp(18px,1.5vw,21px);line-height:1.2;letter-spacing:-.025em;font-weight:500;color:var(--ink)}
.rdg-list p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.rdg .lyo-gris{margin-top:56px}
@media (max-width:1100px){.rdg-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.rdg-list{grid-template-columns:1fr 1fr;gap:32px 20px}.rdg-ill{width:72px;height:72px}}

/* Hero : collage incliné de conversations IA (ChatGPT, Gemini, Perplexity, Google AI Mode, Claude) */
.cgh-stage{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cgh-plane{position:absolute;right:-6%;top:2%;width:62%;display:grid;grid-template-columns:repeat(3,300px);gap:22px;justify-content:end;transform:perspective(1800px) rotateX(12deg) rotateY(-14deg) rotateZ(-7deg);transform-origin:70% 30%}
.cgh-col{display:grid;gap:22px;align-content:start;animation:cgh-drift 14s ease-in-out infinite alternate;animation-delay:calc(var(--c)*-4s)}
.cgh-col:nth-child(2){margin-top:120px}.cgh-col:nth-child(3){margin-top:40px}
@keyframes cgh-drift{from{transform:translateY(0)}to{transform:translateY(-34px)}}
.cgh-card{background:#fff;border-radius:22px;padding:18px 18px 16px;box-shadow:0 30px 60px -30px rgba(12,26,70,.45),0 1px 0 rgba(255,255,255,.6) inset;font-size:13px;line-height:1.45;color:#1b2439;letter-spacing:-.005em;display:grid;gap:12px}
.cgh-card header{display:flex;align-items:center;gap:10px;font-size:13px}
.cgh-card header b{font-weight:600;color:#0A0F1E}
.cgh-ava{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid rgba(10,15,30,.1)}
.cgh-ava svg{width:17px;height:17px;display:block}
.cgh-chatgpt .cgh-ava{background:#000;border-color:#000}.cgh-chatgpt .cgh-ava svg{fill:#fff}
.cgh-perplexity .cgh-ava{background:#20B8CD;border-color:#20B8CD}.cgh-perplexity .cgh-ava svg{fill:#fff}
.cgh-claude .cgh-ava{background:#D97757;border-color:#D97757}.cgh-claude .cgh-ava svg{fill:#fff}
.cgh-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#22c55e}
.cgh-user{display:flex;justify-content:flex-end}
.cgh-user p{margin:0;max-width:86%;background:#eef2ff;border-radius:16px 16px 4px 16px;padding:9px 12px;color:#0A0F1E}
.cgh-gemini .cgh-user p{background:#f0f4f9}.cgh-perplexity .cgh-user p{background:#e6f7f9}.cgh-google .cgh-user p{background:#f1f3f4;border-radius:999px;padding:9px 14px}.cgh-claude .cgh-user p{background:#f5efe9}
.cgh-ans p{margin:0;color:#1b2439}
.cgh-srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
.cgh-lab{font-family:var(--mono),'Geist Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8590a8;margin-right:2px}
.cgh-src{font-size:11px;padding:4px 9px;border-radius:999px;background:#f3f4f8;color:#5a6681;border:1px solid rgba(10,15,30,.06)}
.cgh-src.you{background:#2f4fe0;color:#fff;border-color:#2f4fe0;position:relative}
.cgh-src.you::after{content:"votre page";position:absolute;right:-6px;top:-13px;font-family:var(--mono),'Geist Mono',monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;background:#fff;color:#2f4fe0;border:1px solid #2f4fe0;border-radius:6px;padding:1px 5px}
.cgh-comp{display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(10,15,30,.1);border-radius:999px;padding:8px 8px 8px 14px;color:#8590a8;font-size:12px}
.cgh-comp i{width:22px;height:22px;border-radius:50%;background:#0A0F1E;display:block}
.cgh-gemini .cgh-comp i{background:linear-gradient(135deg,#439DDF,#9476C5)}.cgh-perplexity .cgh-comp i{background:#20B8CD}.cgh-google .cgh-comp i{background:#4285F4}.cgh-claude .cgh-comp i{background:#D97757}
/* la conversation se joue : question, puis réponse, puis sources */
.cgh-user,.cgh-ans p,.cgh-srcs{opacity:0;transform:translateY(6px);animation:cgh-in .6s cubic-bezier(.2,.7,.2,1) forwards}
.cgh-user{animation-delay:calc(var(--d) + .3s)}.cgh-ans p{animation-delay:calc(var(--d) + 1.3s)}.cgh-srcs{animation-delay:calc(var(--d) + 2.4s)}
@keyframes cgh-in{to{opacity:1;transform:none}}
.lyo .hero-copy{position:relative;z-index:2}
@media (max-width:1100px){.cgh-plane{width:80%;grid-template-columns:repeat(2,280px)}.cgh-col:nth-child(3){display:none}}
@media (max-width:900px){.cgh-stage{display:none}}
@media (prefers-reduced-motion:reduce){.cgh-col{animation:none}.cgh-user,.cgh-ans p,.cgh-srcs{animation:none;opacity:1;transform:none}}

/* FAQ : écart entre le titre et la première question, comme sur Lyon et SaaS (56 px, 28 px en mobile) */
#questions .lyo-faq{margin-top:56px}
@media (max-width:700px){#questions .lyo-faq{margin-top:28px}}

/* Source: public/da/questionnaire.css */
/* Questionnaire de pré-audit, commun à /strategie-seo-b2b/, /consultant-seo-lyon/ et /consultant-seo-geo-lyon/.
   Questionnaire minimal : fond outremer pleine largeur, bouton smoke rose animé. */
.strategy-questionnaire{width:100%;max-width:none;margin:72px 0;padding:64px 28px;box-sizing:border-box;scroll-margin-top:112px;color:#fff;background:radial-gradient(ellipse at 95% 110%,#aec5ff 0%,transparent 62%),linear-gradient(145deg,#2f4fe0 20%,#567af1 70%,#7fa0ff);border:0;border-radius:0;position:relative;isolation:isolate}
.strategy-questionnaire::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.5;mix-blend-mode:overlay;pointer-events:none}
.sq-layout{display:block;max-width:640px;margin:auto}
.sq-heading{margin-bottom:36px}
.sq-heading h2{font-size:34px;line-height:1.15;font-weight:500;letter-spacing:-.04em;color:#2f4fe0;margin:0 0 12px;background:linear-gradient(110deg,#fff 0%,#e1ebff 48%,#bdd3ff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;width:fit-content}
.sq-heading p{font-size:16px;line-height:1.6;color:#ffffffdc;margin:0}
.sq-form{min-width:0;padding:0;background:transparent;font-family:var(--sans)}
.sq-form [hidden]{display:none!important}
.sq-progress{position:relative;display:grid;gap:12px;margin-bottom:30px}
.sq-progress .dmono{font-family:var(--sans);font-size:12px;line-height:1.4;color:#ffffffd9;white-space:nowrap;font-variant-numeric:tabular-nums}
.sq-progress progress{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sq-progress-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.sq-progress-track span{display:block;height:5px;border-radius:999px;background:#ffffff40}
.sq-progress-track span[data-state="done"]{background:#c2d6ff}
.sq-progress-track span[data-state="current"]{background:linear-gradient(100deg,#fff,#d9e6ff)}
.sq-step{border:0;padding:0;margin:0 0 24px;min-width:0}
.sq-step legend{font-size:22px;line-height:1.35;font-weight:500;letter-spacing:-.025em;padding:0;margin:0 0 18px;width:100%;color:#fff}
.sq-step>input,.sq-step textarea{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:52px;padding:14px 16px;border:1px solid #e1e5ef;background:#fff;border-radius:10px;font-family:inherit;font-size:16px;line-height:1.5;color:#29314a;box-shadow:none}
.sq-step input::placeholder,.sq-step textarea::placeholder{color:#9197a5}
.sq-step textarea{resize:vertical;min-height:140px}
.sq-step :is(input:not([type="radio"],[type="checkbox"]),textarea):focus{border-color:#7c9be8;box-shadow:0 0 0 3px #eef3ff;outline:none}
.sq-form :is(button,a):focus-visible{outline:2px solid #2f4fe0;outline-offset:4px}
.sq-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sq-form .sq-help,.sq-form .sq-privacy{font-size:12px;line-height:1.6;color:#ffffffe0;margin:12px 0 0}
.sq-privacy a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* cartes de choix : verre clair sur l'outremer, la carte choisie passe en blanc plein ; même hauteur pour toutes les cartes d'une étape */
.sq-options{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px}
.sq-options label{position:relative;display:flex;gap:12px;align-items:center;min-height:64px;box-sizing:border-box;padding:14px 16px;border:1px solid #ffffff4d;border-radius:12px;cursor:pointer;background:#ffffff1a;color:#fff;font-size:15px;line-height:1.4;font-weight:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.sq-options label:hover{background:#ffffff2e;border-color:#ffffff80}
.sq-options label:has(:checked){background:#fff;border-color:#fff;color:#1f2a55;box-shadow:0 8px 24px #1a2a8a33}
.sq-options input{appearance:none;flex:none;width:18px;height:18px;border:1.5px solid #ffffffb3;border-radius:50%;margin:0;cursor:pointer;background:transparent;transition:background-color .15s,border-color .15s}
.sq-options input:checked{border-color:#2f4fe0;background:#fff;box-shadow:inset 0 0 0 4px #2f4fe0}
.sq-options input[type="checkbox"]{border-radius:5px}
.sq-options input[type="checkbox"]:checked{border-color:#2f4fe0;background:#2f4fe0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:none}
.sq-options input:focus-visible{outline:none}
.sq-options label:has(input:focus-visible){outline:2px solid #fff;outline-offset:3px}
.sq-actions{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-top:8px}
.sq-actions button{font-family:inherit;cursor:pointer}.sq-actions button:disabled{opacity:.55;cursor:wait}
.sq-back{border:0;padding:12px 4px;background:transparent;color:#ffffffe0;font-size:14px;line-height:1.5;margin-right:auto}
.sq-submit{display:inline-flex;position:relative;isolation:isolate;overflow:hidden;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:9px 10px 9px 18px;border-radius:10px;font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.4;color:#321128;border:1px solid #ead5e3;background:radial-gradient(ellipse at 25% 65%,#e397be,transparent 65%),radial-gradient(ellipse at 75% 10%,#ffedf8,transparent 58%),#efb1d1;box-shadow:0 5px 14px #9b487215,inset 0 1px 0 #ffffffdd;text-decoration:none}
.sq-submit .lab,.sq-submit .pil{position:relative;z-index:3}
.sq-submit .pil{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:#ffffff45;border:1px solid #ffffff88}
.sq-submit .ico{width:16px;height:16px}
.sq-submit>.nav-fond{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none}
.sq-error{color:#fff;padding:12px 16px;background:#6e183a66;border-radius:8px;font-size:14px;line-height:1.5;margin:0 0 20px}
.sq-success h3{font-size:26px;line-height:1.25;font-weight:500;margin:0 0 16px;color:#fff}
.sq-success p{font-size:16px;line-height:1.6;color:#ffffffe0;margin:0 0 24px}
.sq-form .sq-privacy{margin-top:22px;padding-top:20px;border-top:1px solid #ffffff30}
@media(max-width:600px){.strategy-questionnaire{margin:48px 0;padding:40px 24px}.sq-heading{margin-bottom:28px}.sq-heading h2{font-size:30px}.sq-step legend{font-size:21px}.sq-options{grid-template-columns:1fr}.sq-actions{gap:14px}.sq-submit{font-size:14px}.sq-progress{gap:12px}.sq-progress-track{gap:6px}}


/* Source: public/da/nav-island.css */
/* Barre « île flottante » (choix de Tim, 2026-09-07 soir, parmi nav-variantes.html),
   éclatée en trois îlots séparés (test de Tim, 2026-09-15) : le logo, les onglets,
   le bouton. Même verre teinté au-dessus du hero, mêmes îles blanches une fois
   sortie du hero (classe .glass posée par da.js sur .nav-bar). Se charge en dernier. */
.nav-bar{position:sticky;top:0;z-index:20;padding:14px 16px 0;margin-bottom:-62px;pointer-events:none;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-bar.glass{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-bar .wrap{max-width:980px;padding:0}

/* le conteneur ne porte plus de verre : trois îlots, la grille centre le deuxième
   quel que soit le poids des deux autres */
.nav{pointer-events:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;height:auto;padding:0;border-radius:0;color:#fff;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transition:color .3s ease}
.nav-bar.glass .nav{background:transparent;border:0;box-shadow:none;color:var(--ink)}

/* recette de verre commune aux trois îlots ; rayon 19 = rayon interne + retrait
   (pastille du logo 9 + 10 de marge, pastille du bouton 8 + 11 de marge) */
.logo,.nav-links,.nav .btn-ghost{pointer-events:auto;height:48px;border-radius:19px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(var(--shadow-rgb),.18),inset 0 1px 0 rgba(255,255,255,.35)}
.nav-bar.glass .logo,.nav-bar.glass .nav-links{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.9);box-shadow:0 12px 34px rgba(var(--shadow-rgb),.14)}

.logo{justify-self:start;color:inherit;font-size:17px;padding:0 16px 0 10px;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,color .3s ease}
/* le symbole est pose dans une pastille : point d'appui stable pour une forme asymetrique */
.logo{gap:8px}
.logo .chip{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;flex:none;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  transition:background .3s ease,border-color .3s ease,transform .3s ease}
.nav-bar.glass .logo .chip{background:#eef2ff;border-color:#dfe6ff}
.logo:hover .chip{transform:translateY(-1px)}
.logo .mark{width:17px;height:17px}
/* sur l'ile blanche le symbole garde ses degrades, sur le hero il passe en blanc plein */
.logo .mark .pa{fill:url(#orgA)}
.logo .mark .pb{fill:url(#orgB)}
.nav-bar:not(.glass) .logo .mark .pa,.nav-bar:not(.glass) .logo .mark .pb{fill:#fff}

.nav-links{justify-self:center;position:relative;display:flex;align-items:center;gap:2px;padding:0 6px;color:inherit;
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,color .3s ease}
.nav-links a{position:relative;z-index:1;padding:8px 16px;border-radius:999px;opacity:.72;color:inherit;
  transition:opacity .15s ease,scale .15s cubic-bezier(.2,0,0,1)}
.nav-links a:active{scale:.96}
.nav-links a:hover,.nav-links a.on{opacity:1;color:inherit}
.nav-links a::after{display:none}
/* La pastille de verre glisse sous l'onglet survolé, puis revient se poser sur
   l'onglet actif quand la souris quitte l'îlot (position posée par da.js). */
.nav-links .puck{position:absolute;top:6px;height:36px;border-radius:999px;z-index:0;opacity:0;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  transition:left .35s cubic-bezier(.2,0,0,1),width .35s cubic-bezier(.2,0,0,1),opacity .2s ease,
             background .3s ease,border-color .3s ease}
.nav-bar.glass .nav-links .puck{background:#eef2ff;border-color:#dfe6ff}
/* une lumière très légère suit le curseur dans l'îlot */
.nav-links::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:radial-gradient(120px circle at var(--lx,50%) var(--ly,50%),rgba(255,255,255,.18),transparent 65%);
  opacity:0;transition:opacity .3s ease}
.nav-links:hover::after{opacity:1}
.nav-bar.glass .nav-links::after{background:radial-gradient(120px circle at var(--lx,50%) var(--ly,50%),rgba(70,133,240,.10),transparent 65%)}
@media (prefers-reduced-motion:reduce){.nav-links .puck,.nav-links::after{transition:none}}

/* Le bouton reprend le verre du bouton du hero (choix de Tim, 2026-09-10) : fond blanc
   à 10 %, liseré clair, flou d'arrière-plan, pastille de verre. Au survol la couleur
   ne bouge pas : une lumière traverse le verre et le grain se lève. */
.nav .btn-ghost{justify-self:end;position:relative;overflow:hidden;isolation:isolate;gap:10px;padding:0 11px 0 18px;
  color:#fff;
  transition:border-color .35s ease,box-shadow .35s ease,scale .15s cubic-bezier(.2,0,0,1)}
.nav .btn-ghost:active{scale:.96}
.nav .btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.52);
  box-shadow:0 16px 40px rgba(var(--shadow-rgb),.28),inset 0 1px 0 rgba(255,255,255,.35)}
.nav .btn-ghost .lab{position:relative;z-index:3;white-space:nowrap}
.nav .btn-ghost .pil{position:relative;z-index:3;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;
  transition:background .3s ease,border-color .3s ease}
.nav .btn-ghost .pil .ico{width:15px;height:15px}
.nav .btn-ghost:hover .pil{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.48)}
.nav .btn-ghost:hover .ico{transform:none}   /* la flèche ne bouge pas : un seul effet */
/* la lumière qui passe */
.nav .btn-ghost::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:55%;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:skewX(-14deg);transition:left .62s cubic-bezier(.3,.6,.2,1)}
.nav .btn-ghost:hover::before{left:120%}
/* le grain se lève le temps du survol */
.nav .btn-ghost::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--grain);background-size:260px 260px;mix-blend-mode:overlay;opacity:0;transition:opacity .4s ease}
.nav .btn-ghost:hover::after{opacity:.45}
/* île blanche : le verre n'aurait plus de fond à teinter, la pilule prend le dégradé grainé */
.nav-bar.glass .btn-ghost{background:var(--grad);color:#fff;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 22px rgba(var(--shadow-rgb),.22)}
.nav-bar.glass .btn-ghost:hover{background:var(--grad);border-color:transparent;box-shadow:0 12px 30px rgba(var(--shadow-rgb),.3)}
.nav-bar.glass .btn-ghost::before{background:linear-gradient(100deg,transparent 0%,rgba(159,179,247,.95) 45%,rgba(201,213,249,.8) 62%,transparent 100%)}
.nav-bar.glass .btn-ghost::after,.nav-bar.glass .btn-ghost:hover::after{opacity:.5}
.nav-bar.glass .btn-ghost .pil{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.nav-bar.glass .btn-ghost:hover .pil{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.5)}
/* le hero laisse la place à la barre qui le recouvre */
.bc-hero{padding-top:112px}
@media (max-width:900px){
  .nav-bar{padding:10px 12px 0;margin-bottom:-52px}
  .nav{gap:10px}
  .logo,.nav-links,.nav .btn-ghost{height:42px;border-radius:17px}
  /* comme sur la barre d'origine, les onglets restent visibles en mobile
     (home-monaco les repose en flex resserré) */
  .nav-links{padding:0 5px;gap:0;font-size:13px}
  .nav-links a{padding:6px 12px}
  .nav-links .puck{top:5px;height:32px}
  .nav .btn-ghost{padding:0 9px 0 14px;font-size:13px;gap:8px}
  .nav .btn-ghost .pil{width:23px;height:23px;border-radius:7px}
  .hero-copy{padding-top:96px}
  .bc-hero{padding-top:100px}
}

/* ═══════════ le bouton de droite garde le fond animé du hero ═══════════
   Partout et tout le temps : sur le hero comme une fois la barre passée en
   îles blanches. La toile est posée par /da/nav-fond.js, le dégradé reste
   dessous en repli (WebGL absent, mouvement réduit). */
.nav .btn-ghost,.nav .dbtn{background:var(--grad);color:#fff;border-color:rgba(255,255,255,.34);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 10px 30px rgba(var(--shadow-rgb),.24),inset 0 1px 0 rgba(255,255,255,.3)}
.nav .btn-ghost:hover,.nav .dbtn:hover{background:var(--grad);border-color:rgba(255,255,255,.5);
  box-shadow:0 16px 40px rgba(var(--shadow-rgb),.32),inset 0 1px 0 rgba(255,255,255,.35)}
.nav-bar.glass .btn-ghost,.nav-bar.glass .btn-ghost:hover,
.nav-bar.glass .dbtn,.nav-bar.glass .dbtn:hover{background:var(--grad);color:#fff;
  border-color:rgba(255,255,255,.34);
  box-shadow:0 10px 30px rgba(var(--shadow-rgb),.26),inset 0 1px 0 rgba(255,255,255,.3)}
.nav-fond{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .7s ease;border-radius:inherit}
.nav-fond.on{opacity:1}
.nav .btn-ghost .pil,.nav-bar.glass .btn-ghost .pil,
.nav .dbtn .pil,.nav-bar.glass .dbtn .pil{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.38)}
.nav .btn-ghost:hover .pil,.nav-bar.glass .btn-ghost:hover .pil,
.nav .dbtn:hover .pil,.nav-bar.glass .dbtn:hover .pil{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.5)}

/* ═══ Mobile : une seule barre (demande de Tim, 2026-10-03) ═══
   Les trois îlots ne tiennent plus côte à côte et la deuxième rangée faisait
   deux barres. Sous 520px, l'île porte tout : le symbole, les onglets, le
   bouton réduit à sa flèche (le libellé reste lu par les lecteurs d'écran). */
@media (max-width:520px){
  .nav-bar{margin-bottom:-58px}
  .nav-bar .nav,.nav-bar.glass .nav{pointer-events:auto;display:flex;align-items:center;gap:2px;height:48px;padding:3px;border-radius:19px;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.34);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 10px 30px rgba(var(--shadow-rgb),.18),inset 0 1px 0 rgba(255,255,255,.35)}
  .nav-bar.glass .nav{background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.9);box-shadow:0 12px 34px rgba(var(--shadow-rgb),.14)}
  .nav-bar .nav .logo,.nav-bar .nav .nav-links{height:40px;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-bar .nav .logo{flex:none;font-size:0;gap:0;padding:0;width:40px;justify-content:center;border-radius:16px}
  .logo .chip{width:32px;height:32px}.logo .mark{width:19px;height:19px}
  .nav-bar .nav .nav-links{flex:1 1 auto;min-width:0;justify-content:center;gap:0;padding:0;font-size:12.5px}
  .nav-links a{padding:6px 8px;white-space:nowrap}
  .nav-links .puck{top:4px;height:32px}
  .nav-bar .nav .btn-ghost{flex:none;width:40px;height:40px;padding:0;gap:0;justify-content:center;border-radius:16px}
  .nav .btn-ghost .lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav .btn-ghost .pil,.nav-bar.glass .btn-ghost .pil{background:none;border:0}
  .hero-copy{padding-top:96px}
  .bc-hero{padding-top:100px}
}
@media (max-width:350px){
  .nav-links a{padding:6px 5px}
  .nav-bar .nav .nav-links{font-size:12px}
}

}

/* Footer approuvé : marque + deux colonnes, wordmark conservé par chaque coquille. */
footer.org-footer-shell{display:block;max-width:none;width:100%;padding:0;margin:0;border:0;border-top:1px solid #e8ebf0;background:#fff}
.org-footer-nav{box-sizing:border-box;max-width:1320px;margin:0 auto;padding:52px 58px 24px;background:#fff;color:#151b29;font-family:var(--font-sans),Geist,Arial,sans-serif;letter-spacing:normal;text-align:left}
.org-footer-nav.org-footer-nav *{box-sizing:border-box}
.org-footer-nav.org-footer-nav a{color:inherit;text-decoration:none;letter-spacing:normal;transition:color 140ms ease}
.org-footer-nav.org-footer-nav a:focus-visible{outline:2px solid #2f4fe0;outline-offset:4px;border-radius:3px}
.org-footer-nav.org-footer-nav .of-footer-content{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start}
.org-footer-nav.org-footer-nav .of-brand{display:inline-flex;gap:9px;align-items:center;font-size:23px!important;line-height:1.3!important;font-weight:650;letter-spacing:-.8px}
.org-footer-nav.org-footer-nav .of-brand svg{width:25px;height:25px;color:#2f4fe0}
.org-footer-nav.org-footer-nav .of-identity p{font-size:14px!important;line-height:1.5!important;font-weight:400;color:#647084;margin:16px 0 12px;max-width:31ch}
.org-footer-nav.org-footer-nav .of-socials{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0 0 0 -8px}
.org-footer-nav.org-footer-nav li{padding:0;margin:0;list-style:none}
.org-footer-nav.org-footer-nav .of-socials a{display:flex;align-items:center;justify-content:center;width:38px;height:40px;color:#64748b;border:0;background:none;box-shadow:none}
.org-footer-nav.org-footer-nav .of-socials a:hover{color:#2f4fe0}
.org-footer-nav.org-footer-nav .of-socials svg{width:18px;height:18px;display:block}
.org-footer-nav.org-footer-nav .of-duo-columns{display:grid;grid-template-columns:1fr 1fr;gap:82px}
.org-footer-nav.org-footer-nav .of-link-group{display:block;position:static;padding:0;margin:0;border:0;background:none;box-shadow:none}
.org-footer-nav.org-footer-nav .of-link-group h2{font-family:inherit;font-size:14px!important;line-height:1.5!important;font-weight:500;letter-spacing:0;margin:2px 0 9px;color:#151b29}
.org-footer-nav.org-footer-nav .of-link-group ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
.org-footer-nav.org-footer-nav .of-link-group a{display:inline-block;font-size:14px!important;line-height:1.65!important;font-weight:400;min-height:31px;padding:4px 0;color:#647084}
.org-footer-nav.org-footer-nav .of-link-group a:hover,.org-footer-nav.org-footer-nav .of-legal-bar a:hover{color:#151b29;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.org-footer-nav.org-footer-nav .of-link-group+.of-link-group{margin-top:30px}
.org-footer-nav.org-footer-nav .of-duo-columns a[href*="lyon"]{max-width:25ch}
.org-footer-nav.org-footer-nav .of-legal-bar{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-top:18px;margin-top:34px;border-top:1px solid #e8ebf0;color:#647084}
.org-footer-nav.org-footer-nav .of-legal-bar,.org-footer-nav.org-footer-nav .of-legal-bar *{font-size:12px!important;line-height:1.5!important;font-weight:400}
.org-footer-nav.org-footer-nav .of-legal-bar nav{display:flex;position:static;gap:24px;align-items:center;flex-wrap:wrap;margin:0;padding:0;background:none;border:0;box-shadow:none}
.org-footer-nav.org-footer-nav .of-legal-bar a{display:flex;align-items:center;min-height:32px}
@media(max-width:1000px){.org-footer-nav{padding:42px 32px 24px}.org-footer-nav.org-footer-nav .of-footer-content{gap:55px}.org-footer-nav.org-footer-nav .of-duo-columns{gap:45px}}
@media(max-width:740px){.org-footer-nav.org-footer-nav .of-footer-content{grid-template-columns:1fr;gap:36px}.org-footer-nav.org-footer-nav .of-identity{display:grid;grid-template-columns:1fr auto}.org-footer-nav.org-footer-nav .of-identity p{grid-column:1}.org-footer-nav.org-footer-nav .of-identity .of-socials{grid-column:2;grid-row:1/3;align-self:center}.org-footer-nav.org-footer-nav .of-legal-bar{align-items:flex-start}.org-footer-nav.org-footer-nav .of-legal-bar nav{column-gap:16px}}
@media(max-width:460px){.org-footer-nav{padding:30px 24px 24px}.org-footer-nav.org-footer-nav .of-identity{display:block}.org-footer-nav.org-footer-nav .of-brand{font-size:22px!important}.org-footer-nav.org-footer-nav .of-identity p{font-size:13px!important;margin:14px 0 11px}.org-footer-nav.org-footer-nav .of-socials a{width:40px;height:44px}.org-footer-nav.org-footer-nav .of-footer-content{gap:30px}.org-footer-nav.org-footer-nav .of-duo-columns{gap:25px}.org-footer-nav.org-footer-nav .of-link-group h2{font-size:13px!important;margin-bottom:8px}.org-footer-nav.org-footer-nav .of-link-group a{font-size:13px!important;line-height:1.6!important;min-height:39px;padding:7px 0}.org-footer-nav.org-footer-nav .of-link-group+.of-link-group{margin-top:26px}.org-footer-nav.org-footer-nav .of-legal-bar{display:block;margin-top:28px;padding-top:20px}.org-footer-nav.org-footer-nav .of-legal-bar,.org-footer-nav.org-footer-nav .of-legal-bar *{font-size:11px!important}.org-footer-nav.org-footer-nav .of-legal-bar nav{display:grid;gap:1px;margin-top:12px}.org-footer-nav.org-footer-nav .of-legal-bar a{min-height:36px}}
@media(prefers-reduced-motion:reduce){.org-footer-nav.org-footer-nav a{transition:none}}

.org-footer-nav.org-footer-nav li::before,.org-footer-nav.org-footer-nav li::after{content:none!important;display:none!important}


/* Référence Tim, 10 octobre : mot plein sur fond blanc et pied de page sans vide en bas. */
footer.org-footer-shell.org-footer-shell{position:relative;display:block;isolation:isolate;overflow:hidden;padding:0;margin:0;background:#fff}
.org-footer-shell.org-footer-shell .org-footer-nav{position:relative;width:100%;max-width:1200px;padding:42px 36px 0;background:transparent;z-index:1}
.org-footer-shell.org-footer-shell .of-legal-bar{margin-top:24px;padding-top:14px;border-color:#bac9ea80}
.org-footer-shell.org-footer-shell > [class*="wordmark"]{position:relative;z-index:0;max-width:1200px;width:100%;height:clamp(70px,15vw,185px);margin:0 auto!important;padding:0 24px;overflow:hidden}
.org-footer-shell.org-footer-shell > [class*="wordmark"] svg{display:block;width:100%;height:auto;aspect-ratio:1200/230;overflow:visible;transform:translateY(3%);mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 100%)}
.org-footer-shell.org-footer-shell > [class*="wordmark"] text:not([mask]){fill:#dce1e9;fill-opacity:.8;stroke:none;filter:none;font-weight:600}
@media(max-width:740px){.org-footer-shell.org-footer-shell .org-footer-nav{padding:32px 24px 0}.org-footer-shell.org-footer-shell > [class*="wordmark"]{padding:0 12px;height:17vw;min-height:60px}.org-footer-shell.org-footer-shell .of-legal-bar{margin-top:22px}.org-footer-shell.org-footer-shell .of-legal-bar nav{margin-top:8px}}