/* =====================================================================
   Études de cas — composants (s'ajoute à site.css)
   ===================================================================== */
:root{ --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; --fio:#5b53ff; --card-shadow:0 2px 6px rgba(0,0,0,.04),0 12px 32px -12px rgba(0,0,0,.12); }

/* ---------- Navigation locale (où suis-je, où aller) ---------- */
.localnav{position:sticky;top:52px;z-index:90;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08);}
.localnav .wrap{display:flex;align-items:center;gap:22px;height:48px;}
.localnav .ln-title{font-weight:600;font-size:1.05rem;letter-spacing:-0.02em;white-space:nowrap;}
.localnav nav{display:flex;gap:20px;margin-left:auto;font-size:.8rem;overflow-x:auto;scrollbar-width:none;}
.localnav nav::-webkit-scrollbar{display:none;}
.localnav nav a{color:var(--ink-2);white-space:nowrap;transition:color 150ms ease;}
.localnav nav a.on{color:var(--ink);}
@media (hover:hover) and (pointer:fine){ .localnav nav a:hover{color:var(--ink);} }
@media (max-width:700px){ .localnav .ln-title{display:none;} .localnav nav{margin-left:0;} }

/* ---------- En-tête d'étude ---------- */
.c-hero{padding:clamp(56px,8vw,96px) 0 clamp(48px,6vw,72px);}
.back{display:inline-flex;align-items:center;gap:4px;font-size:.9rem;color:var(--accent-ink);margin-bottom:28px;}
.back::before{content:"‹";font-size:1.3em;line-height:1;transform:translateY(-1px);}
.c-client{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.c-client img{width:44px;height:44px;}
.c-client b{display:block;font-size:1rem;font-weight:600;letter-spacing:-0.015em;}
.c-client span{font-size:.85rem;color:var(--ink-2);}
.c-hero-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:56px;align-items:center;}
.c-hero .t-lead{margin-top:22px;max-width:46ch;}
.c-hero .wa{box-shadow:var(--card-shadow);}

.figures{display:grid;grid-template-columns:repeat(var(--n,3),1fr);margin-top:clamp(48px,7vw,80px);border-top:1px solid var(--line);}
.figure{padding:26px 22px 0 0;}
.figure + .figure{padding-left:22px;border-left:1px solid var(--line);}
.figure b{display:block;font-size:clamp(2.2rem,4.4vw,3.2rem);font-weight:700;letter-spacing:-0.045em;line-height:1;}
.figure span{display:block;margin-top:10px;font-size:.95rem;color:var(--ink-2);line-height:1.4;}

/* ---------- Chapitres ---------- */
.chap{padding-block:clamp(72px,9vw,112px);border-top:1px solid #e8e8ed;scroll-margin-top:100px;}
.chap-head{max-width:720px;margin-bottom:clamp(36px,5vw,52px);}
.chap-n{font-size:.95rem;font-weight:600;color:var(--ink-3);display:block;margin-bottom:10px;font-variant-numeric:tabular-nums;}
.chap-head .t-lead{margin-top:14px;}
.chap-head .t-lead strong{color:var(--ink);font-weight:600;}
.sub{margin:clamp(56px,7vw,80px) 0 10px;font-size:1.35rem;font-weight:700;letter-spacing:-0.022em;}
.sub:first-child{margin-top:0;}
.sub-lede{color:var(--ink-2);max-width:62ch;margin-bottom:26px;}
.sub-lede strong{color:var(--ink);font-weight:600;}
.note{margin-top:28px;font-size:1.15rem;line-height:1.45;letter-spacing:-0.017em;max-width:46ch;color:var(--ink-2);font-weight:500;}
.note strong{color:var(--ink);font-weight:600;}
.label{display:block;font-size:.85rem;font-weight:600;color:var(--ink-2);margin-bottom:12px;}

/* avant → après */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;}
.ba-card{border-radius:var(--radius);padding:26px;background:var(--bg-alt);}
.ba-card ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:10px;}
.ba-card.after{background:var(--ink);color:#f5f5f7;}
.ba-card.after .label{color:#a1a1a6;}
.ba-arrow{display:flex;align-items:center;color:var(--ink-3);}
.ba-arrow svg{width:28px;height:28px;}

/* pastille Frame.io */
.fio-pill{display:inline-flex;align-items:center;gap:5px;background:var(--fio);color:#fff;font-weight:600;font-size:.86em;border-radius:6px;padding:1px 7px;white-space:nowrap;}

/* ---------- Workflow en boucle ---------- */
.loop{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.loop-step{position:relative;text-align:left;border:0;cursor:pointer;background:var(--bg-alt);border-radius:18px;padding:18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;}
.loop-step:active{transform:scale(0.97);}
.loop-step[aria-pressed="true"]{background:#fff;box-shadow:0 0 0 2px var(--ink), var(--card-shadow);}
.loop-step.is-fio{background:var(--fio);color:#fff;}
.loop-step.is-fio[aria-pressed="true"]{box-shadow:0 0 0 2px var(--fio), 0 0 0 5px rgba(91,83,255,.25);}
.loop-step .ic{width:36px;height:36px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.loop-step .ic svg{width:20px;height:20px;}
.loop-step.is-fio .ic{background:rgba(255,255,255,.2);}
.loop-step .n{font-size:.75rem;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.loop-step.is-fio .n{color:rgba(255,255,255,.7);}
.loop-step b{font-size:.95rem;font-weight:600;letter-spacing:-0.015em;line-height:1.25;}
.who{margin-top:8px;font-size:.72rem;font-weight:600;border-radius:6px;padding:2px 7px;}
.who.me{background:#e8f1fd;color:var(--accent-ink);}
.who.him{background:#fff1e0;color:#9a4b00;}
.is-fio .who.him{background:#fff;}
.loop-back{grid-column:1/-1;text-align:center;font-size:.85rem;color:var(--ink-3);padding-top:6px;}
.loop-detail{margin-top:18px;background:var(--ink);color:#f5f5f7;border-radius:18px;padding:22px 24px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;min-height:92px;}
.loop-detail b{display:block;font-weight:600;letter-spacing:-0.015em;margin-bottom:4px;}
.loop-detail p{color:#a1a1a6;font-size:.95rem;}
.loop-detail .time{font-size:1.6rem;font-weight:700;letter-spacing:-0.03em;text-align:right;white-space:nowrap;}
.loop-detail .time small{display:block;font-size:.75rem;font-weight:500;color:#a1a1a6;letter-spacing:0;}

/* ---------- Frame.io ---------- */
.fio{display:grid;grid-template-columns:1.5fr 1fr;background:#14151a;border-radius:var(--radius);overflow:hidden;color:#e6e7eb;}
.fio-player{padding:16px;display:flex;flex-direction:column;gap:12px;}
.fio-top{display:flex;justify-content:space-between;font:500 .75rem var(--mono);color:#8b8e98;}
.fio-top b{color:#e6e7eb;font-weight:600;}
.fio-video{aspect-ratio:16/9;border-radius:12px;background:linear-gradient(150deg,#22324f,#0b1220 60%,#2a1e42);position:relative;overflow:hidden;}
.fio-video .tc{position:absolute;left:10px;bottom:10px;font:600 .75rem var(--mono);background:rgba(0,0,0,.6);padding:3px 7px;border-radius:5px;}
.fio-note{position:absolute;right:12px;top:12px;max-width:62%;font-size:.82rem;background:var(--fio);color:#fff;border-radius:12px 12px 3px 12px;padding:8px 11px;opacity:0;transform:translateY(-4px) scale(.98);transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out);}
.fio-note.show{opacity:1;transform:none;}
.fio-bar{position:relative;height:6px;border-radius:100px;background:#2a2c35;}
.fio-bar .prog{position:absolute;left:0;top:0;bottom:0;border-radius:100px;background:var(--fio);transition:width 400ms var(--ease-in-out);}
.fio-bar .mk{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:100px;background:#f9cb98;border:2px solid #14151a;cursor:pointer;padding:0;}
.fio-list{border-left:1px solid #262830;padding:14px;display:flex;flex-direction:column;gap:6px;}
.fio-list .label{color:#8b8e98;margin:2px 4px 8px;}
.fio-c{text-align:left;border:1px solid transparent;background:#1c1d24;border-radius:12px;padding:10px 12px;cursor:pointer;font-size:.86rem;line-height:1.4;color:#e6e7eb;transition:border-color 150ms ease, transform 160ms var(--ease-out);}
.fio-c:active{transform:scale(0.98);}
.fio-c.on{border-color:var(--fio);background:#20203a;}
.fio-c .t{font:600 .72rem var(--mono);color:#9c97ff;margin-right:6px;}
.fio-c .done{float:right;font-size:.7rem;color:#8fe0b7;}

/* ---------- Rétention ---------- */
.shot-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:start;}
.shot{display:block;width:100%;padding:0;border:0;border-radius:18px;overflow:hidden;background:#0f0f0f;cursor:zoom-in;}
.shot img{width:100%;}
.shot-cap{font-size:.85rem;color:var(--ink-2);margin-top:10px;}
.reads{display:flex;flex-direction:column;}
.read{padding:20px 0;border-bottom:1px solid #e8e8ed;}
.read:first-child{padding-top:0;}
.read b{display:block;font-size:2.4rem;font-weight:700;letter-spacing:-0.045em;line-height:1;margin-bottom:8px;}
.read span{color:var(--ink-2);}
.read span strong{color:var(--ink);font-weight:600;}

/* ---------- Support PEA (fidèle au vrai fichier de Dimitri) ---------- */
.deck{--st-bg:#1c1309;--st-ink:#fff7e8;--st-cream:#ebd3a0;--st-muted:#b9a582;--st-gold:#f2b544;--st-pos:#43d17a;--st-neg:#ff6f61;--st-line:rgba(255,236,200,.14);--st-acc:var(--st-gold);background:#120d07;border-radius:var(--radius);padding:14px;}
.slide{aspect-ratio:16/9;border-radius:12px;background:var(--st-bg);color:var(--st-ink);overflow:hidden;position:relative;container-type:inline-size;}
.sl-bg{position:absolute;inset:0;pointer-events:none;}
.sl-bg::before,.sl-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(2cqw);}
.sl-bg::before{width:68cqw;height:52cqw;right:-22cqw;top:-24cqw;background:radial-gradient(closest-side,rgba(242,170,56,.55),rgba(232,140,40,.18) 55%,transparent);}
.sl-bg::after{width:62cqw;height:52cqw;left:-27cqw;bottom:-29cqw;background:radial-gradient(closest-side,rgba(38,122,142,.55),rgba(38,122,142,.15) 55%,transparent);}
.scene{position:absolute;inset:0;opacity:0;transition:opacity 500ms ease;}
.scene.on{opacity:1;}
.sm-panel{position:absolute;left:3.1cqw;top:3.1cqw;bottom:3.1cqw;width:36cqw;border-radius:2.5cqw;overflow:hidden;background:radial-gradient(120% 90% at 30% 70%,#f6d27a 0%,#efae3c 30%,rgba(214,130,30,.6) 55%,rgba(28,19,9,0) 85%),radial-gradient(90% 70% at 0% 0%,#1f6f86 0%,rgba(31,111,134,0) 60%),#2a1c0d;}
.sm-panel .tt{position:absolute;left:2.7cqw;bottom:2.7cqw;right:2.7cqw;}
.sm-panel .eb{font-weight:700;font-size:1.46cqw;color:#2a1c0d;opacity:.7;}
.sm-panel h5{margin:.4cqw 0 0;font-weight:900;font-size:5.4cqw;line-height:.95;letter-spacing:-.035em;color:#fff;}
.sm-list{position:absolute;left:44cqw;right:5cqw;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:2.4cqw;}
.sm-it{display:flex;align-items:center;gap:2.9cqw;font-size:3.1cqw;transition:opacity 500ms ease;}
.sm-it .no{font-weight:900;color:var(--st-cream);width:1.1ch;text-align:right;}
.sm-it .tx{position:relative;isolation:isolate;font-weight:900;color:var(--st-cream);text-transform:uppercase;letter-spacing:-.015em;white-space:nowrap;padding:.06em .22em;margin-left:-.22em;transition:color 350ms ease 100ms;}
.sm-it .tx::before{content:"";position:absolute;inset:0;background:linear-gradient(95deg,#f7cc5e,#f0a93a);border-radius:.12em;transform:scaleX(0);transform-origin:left center;transition:transform 550ms var(--ease-in-out);z-index:-1;}
.sm-list.focus .sm-it{opacity:.38;}
.sm-list.focus .sm-it.on{opacity:1;}
.sm-it.on .tx{color:#24170a;}
.sm-it.on .tx::before{transform:scaleX(1);}
.sm-it.on .no{color:var(--st-gold);}
.s-head{position:absolute;left:5cqw;top:4cqw;right:5cqw;display:flex;justify-content:space-between;align-items:flex-start;}
.s-head .eb{font-weight:700;font-size:1.46cqw;color:var(--st-gold);}
.s-head .ttl{font-weight:900;font-size:5cqw;line-height:1;letter-spacing:-.035em;margin-top:.9cqw;}
.s-head .sig{font-weight:700;font-size:1.35cqw;color:var(--st-muted);}
.cr{position:absolute;left:5cqw;right:5cqw;top:16.5cqw;}
.cr-h,.cr-r{display:grid;grid-template-columns:3.6cqw minmax(0,2fr) minmax(3cqw,.8fr) 13cqw;align-items:center;column-gap:1.5cqw;}
.cr-h{font-weight:700;font-size:1.3cqw;color:var(--st-muted);padding-bottom:.9cqw;border-bottom:.1cqw solid var(--st-line);}
.cr-h div:last-child{text-align:right;}
.cr-r{border-bottom:.1cqw solid var(--st-line);position:relative;padding:1.05cqw 0;}
.cr-r .rk{font-weight:700;font-size:1.5cqw;color:var(--st-muted);}
.cr-r .nm{font-weight:700;font-size:2.2cqw;letter-spacing:-.015em;white-space:nowrap;transition:filter 600ms ease,opacity 600ms ease,color 400ms ease;}
.cr-r .tr{height:.94cqw;border-radius:.47cqw;background:rgba(255,236,200,.07);position:relative;overflow:hidden;}
.cr-r .bar{position:absolute;left:0;top:0;bottom:0;border-radius:.47cqw;width:0;transition:width 1s var(--ease-out);}
.cr-r .vl{font-weight:900;font-size:2.6cqw;text-align:right;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:filter 600ms ease,opacity 600ms ease;}
.cr-r.hid .vl{filter:blur(.8cqw);opacity:.5;color:var(--st-muted)!important;}
.cr-r.hid .nm{filter:blur(.6cqw);opacity:.45;}
.cr-r.pos .vl{color:var(--st-pos);} .cr-r.pos .bar{background:linear-gradient(90deg,rgba(67,209,122,.35),var(--st-pos));}
.cr-r.neg .vl{color:var(--st-neg);} .cr-r.neg .bar{background:linear-gradient(90deg,rgba(255,111,97,.35),var(--st-neg));}
.cr-r.win .nm{color:var(--st-gold);}
.cr-r .crown{position:absolute;left:-.75cqw;top:50%;width:.3cqw;height:60%;transform:translateY(-50%) scaleY(0);background:var(--st-gold);border-radius:.15cqw;transition:transform 500ms ease 300ms;}
.cr-r.win .crown{transform:translateY(-50%) scaleY(1);}
.bil{position:absolute;left:5cqw;top:17cqw;padding:1.4cqw 2.1cqw 1.5cqw;border-radius:1.9cqw;background:linear-gradient(135deg,rgba(255,236,200,.08),rgba(255,236,200,.02));border:.1cqw solid rgba(242,181,68,.28);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out);}
.bil.hid{opacity:0;transform:translateY(1.25cqw);}
.bil .tot{display:flex;align-items:baseline;gap:1.6cqw;white-space:nowrap;}
.bil .tot .k{font-weight:700;font-size:1.8cqw;color:var(--st-gold);}
.bil .tot .v{font-weight:900;font-size:5.4cqw;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;}
.bil .pv{display:flex;align-items:baseline;gap:1.5cqw;margin-top:.8cqw;white-space:nowrap;}
.bil .pct{font-weight:900;font-size:4.4cqw;line-height:1;letter-spacing:-.035em;color:var(--st-pos);}
.bil .pve{font-weight:800;font-size:2.2cqw;color:var(--st-pos);}
.bil q{display:block;margin-top:.5cqw;font-size:1.35cqw;color:var(--st-muted);font-style:italic;font-weight:500;}
.slide-tag{position:absolute;right:10px;bottom:8px;font:600 .6rem var(--mono);color:var(--st-muted);background:rgba(255,236,200,.08);border-radius:5px;padding:2px 6px;}
.deck-ctrl{display:flex;gap:14px;align-items:center;margin-top:14px;}
.prog{flex:1;display:flex;gap:4px;}
.prog i{flex:1;height:4px;border-radius:4px;background:rgba(255,236,200,.15);overflow:hidden;position:relative;cursor:pointer;}
.prog i.done{background:var(--st-acc);}
.prog i.cur::after{content:"";position:absolute;inset:0;background:var(--st-acc);transform-origin:left;animation:fillbar var(--dur,1.6s) linear forwards;}
.prog.paused i.cur::after{animation-play-state:paused;}
@keyframes fillbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.deck .btn{background:#f2b544;color:#1c1309;}

/* ---------- Qui fait quoi + démo « ce qu'il dit → ce que j'affiche » ---------- */
.roles{display:grid;grid-template-columns:1fr 1.3fr;gap:18px;margin-bottom:24px;}
.role{border-radius:var(--radius);padding:26px;background:var(--bg-alt);}
.role ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:9px;}
.role.me{background:var(--ink);color:#f5f5f7;}
.role.me .label{color:#a1a1a6;}
.role.me strong{color:#fff;font-weight:600;}
.img-demo{display:grid;grid-template-columns:270px 1fr;gap:40px;align-items:center;background:var(--dark);border-radius:var(--radius);padding:32px;color:#f5f5f7;}
.mini-phone{background:#1c1c1e;border-radius:34px;padding:8px;}
.mini-screen{position:relative;aspect-ratio:9/16;border-radius:27px;overflow:hidden;background:#111;}
.mini-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mini-screen img.swap{animation:swap 350ms var(--ease-out);}
@keyframes swap{from{opacity:.25;transform:scale(1.04);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.mini-fx{position:absolute;z-index:2;top:12px;left:12px;right:12px;font-size:.72rem;font-weight:600;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:8px;padding:5px 9px;width:fit-content;}
.mini-screen .prog{position:absolute;z-index:2;left:12px;right:12px;bottom:12px;}
.mini-screen .prog i{height:3px;background:rgba(255,255,255,.3);}
.mini-screen .prog i.done,.mini-screen .prog i.cur::after{background:#fff;}
.script{display:flex;flex-direction:column;gap:6px;}
.script .label{color:#a1a1a6;}
.sline{text-align:left;border:0;cursor:pointer;background:transparent;color:#86868b;border-radius:12px;padding:12px 14px;font-size:1.05rem;letter-spacing:-0.015em;transition:background-color 200ms ease,color 200ms ease, transform 160ms var(--ease-out);}
.sline:active{transform:scale(0.985);}
.sline[aria-pressed="true"]{background:rgba(255,255,255,.1);color:#fff;}
.sline q{quotes:"« " " »";}
.script .link{margin-top:10px;padding-left:14px;}

/* ---------- Frise (Jonathan) ---------- */
.rush{position:relative;display:flex;flex-direction:column;gap:22px;padding-left:30px;max-width:680px;}
.rush::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:#e8e8ed;border-radius:2px;}
.rush-i{position:relative;}
.rush-i::before{content:"";position:absolute;left:-30px;top:5px;width:14px;height:14px;border-radius:100px;background:#fff;border:2px solid var(--ink-3);}
.rush-i.final::before{background:var(--accent);border-color:var(--accent);}
.rush-when{font-size:.85rem;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.rush-i b{display:block;font-size:1.1rem;font-weight:600;letter-spacing:-0.015em;margin:2px 0;}
.rush-i p{color:var(--ink-2);}
.bub{display:inline-block;margin-top:8px;background:#fff;border-radius:3px 14px 14px 14px;padding:10px 14px;box-shadow:0 1px .5px rgba(11,20,26,.13), 0 0 0 1px #e8e8ed;max-width:58ch;}
.bub.out{background:var(--wa-out);border-radius:14px 3px 14px 14px;box-shadow:0 1px .5px rgba(11,20,26,.13);}

/* ---------- Kiavik : volume, Drive, tunnel ---------- */
.vol{display:grid;grid-template-columns:1fr 260px;gap:18px;}
.cal{background:var(--bg-alt);border-radius:var(--radius);padding:22px;min-width:0;}
@media (max-width:560px){ .cal{padding:14px;} .cal-legend{flex-wrap:wrap;gap:8px 12px;} .cal-grid{gap:4px;} .day{padding:4px;border-radius:8px;} }
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:.85rem;font-weight:600;color:var(--ink-2);flex-wrap:wrap;gap:8px;}
.cal-legend{display:flex;gap:14px;font-weight:500;}
.cal-legend span{display:inline-flex;align-items:center;gap:6px;}
.pf{width:9px;height:9px;border-radius:3px;display:inline-block;}
.pf.tt{background:#111;} .pf.ig{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);} .pf.fb{background:#1877f2;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.day{aspect-ratio:1;border-radius:10px;background:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:6px;}
.day .d{font-size:.65rem;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.day .dots{display:flex;gap:2px;}
.day .pf{opacity:0;transform:scale(.6);transition:opacity 250ms var(--ease-out), transform 250ms var(--ease-out);}
.day.on .pf{opacity:1;transform:none;}
.vol-count{background:var(--ink);color:#fff;border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;justify-content:center;gap:22px;}
.vol-count b{display:block;font-size:3rem;font-weight:700;letter-spacing:-0.045em;line-height:1;font-variant-numeric:tabular-nums;}
.vol-count span{font-size:.9rem;color:#a1a1a6;}

.drive{position:relative;margin-top:18px;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 0 0 1px #e8e8ed;font-family:"Google Sans",Roboto,"Segoe UI",Arial,sans-serif;color:#1f1f1f;letter-spacing:0;}
.dr-top{display:flex;align-items:center;gap:18px;padding:12px 18px;border-bottom:1px solid #e3e3e3;background:#f8fafd;}
.dr-logo{display:inline-flex;align-items:center;gap:8px;font-size:1.05rem;color:#444746;}
.dr-logo svg{width:24px;height:24px;}
.dr-path{font-size:1rem;color:#444746;}
.dr-path b{font-weight:500;color:#1f1f1f;}
.dr-head{display:grid;grid-template-columns:1fr 90px;padding:10px 22px;font-size:.78rem;font-weight:500;color:#444746;border-bottom:1px solid #e3e3e3;}
.dr-list{height:340px;overflow:hidden;position:relative;}
.dr-track{will-change:transform;}
.dr-row{display:grid;grid-template-columns:1fr 90px;align-items:center;padding:0 22px;height:40px;border-bottom:1px solid #f0f0f0;font-size:.85rem;}
.dr-row span{display:flex;align-items:center;gap:12px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dr-row i{width:18px;height:14px;border-radius:2px;background:#ea4335;flex:none;position:relative;}
.dr-row i::after{content:"";position:absolute;left:7px;top:3.5px;border-left:5px solid #fff;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;}
.dr-row i.fold{background:#5f6368;}
.dr-row i.fold::after{display:none;}
.dr-row em{font-style:normal;color:#444746;font-size:.8rem;}
.drive::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(transparent,#fff 75%);pointer-events:none;}
.drive-cap{position:absolute;left:22px;right:22px;bottom:16px;z-index:1;font-size:.9rem;color:var(--ink-2);}
.drive-cap strong{color:var(--ink);font-weight:600;}

.funnel{display:flex;flex-direction:column;align-items:center;gap:6px;}
.fn{border:0;cursor:pointer;color:#fff;padding:18px 24px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;text-align:left;border-radius:16px;transition:transform 160ms var(--ease-out), opacity 200ms ease;}
.fn:active{transform:scale(0.985);}
.fn:nth-child(1){width:100%;background:#1d1d1f;}
.fn:nth-child(2){width:86%;background:#3a3a3c;}
.fn:nth-child(3){width:72%;background:#636366;}
.fn .n{font-size:.8rem;font-weight:600;opacity:.6;font-variant-numeric:tabular-nums;}
.fn b{display:block;font-size:1.15rem;font-weight:600;letter-spacing:-0.02em;}
.fn small{font-size:.85rem;opacity:.75;}
.fn .plats{font-size:.78rem;opacity:.7;text-align:right;}
.fn[aria-pressed="false"]{opacity:.45;}
.fn[aria-pressed="true"]{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--accent);}
.fn-detail{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.fn-detail .box{background:var(--bg-alt);border-radius:var(--radius);padding:24px;}
.fn-detail .box.me{background:var(--ink);color:#f5f5f7;}
.fn-detail .box.me .label{color:#a1a1a6;}

/* Lazzeko : sa propre identité (orange) */
.lz{border-radius:28px;overflow:hidden;background:#fff7f1;}
.lz-head{display:flex;align-items:center;gap:22px;padding:32px;}
.lz-logo{width:92px;height:92px;border-radius:22px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;box-shadow:0 0 0 1px #f6d3be;}
.lz-logo img{width:100%;height:100%;object-fit:contain;padding:10px;}
.lz-kicker{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:#c2410c;}
.lz-kicker svg{width:15px;height:15px;}
.lz-head h3{font-size:2rem;letter-spacing:-0.03em;margin:4px 0 6px;}
.lz-head p{color:#7a5440;max-width:52ch;}
.lz-body{padding:0 32px 32px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
.lz-step{font-size:.85rem;font-weight:600;color:#c2410c;margin-bottom:8px;}
.lz-txt{color:#5c3d2c;margin-bottom:16px;}
.lz-txt strong{color:#1f1f1f;font-weight:600;}

/* ---------- WhatsApp : extras ---------- */
.wa.solo{max-width:560px;}
.wa-day{align-self:center;font-size:.7rem;font-weight:500;background:#fff;color:#54656f;border-radius:7px;padding:4px 10px;margin:2px 0 4px;box-shadow:0 1px .5px rgba(11,20,26,.13);}
.msg .file{display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.05);border-radius:6px;padding:9px 10px;margin-bottom:4px;min-width:220px;}
.msg .file i{width:30px;height:36px;border-radius:4px;background:#e9edef;display:flex;align-items:center;justify-content:center;font:700 .55rem var(--mono);font-style:normal;color:#54656f;}
.msg .file b{display:block;font-size:.84rem;font-weight:600;}
.msg .file small{font-size:.7rem;color:#667781;}
.msg .rq{display:flex;gap:10px;align-items:center;justify-content:space-between;background:rgba(0,0,0,.05);border-left:3px solid #e8763b;border-radius:6px;padding:5px 8px;margin-bottom:5px;font-size:.75rem;color:#54656f;}
.msg .rq b{display:block;color:#e8763b;font-size:.74rem;font-weight:600;}
.msg .rq i{width:38px;height:38px;border-radius:5px;background:linear-gradient(135deg,#3a3f4a,#151a22);flex:none;}
.blurred{filter:blur(3.5px);user-select:none;}
/* animation d'écriture (une seule fois, à l'arrivée) */
.msg.anim{opacity:0;transform:translateY(6px) scale(.98);transition:opacity 300ms var(--ease-out), transform 300ms var(--ease-out);}
.msg.anim.in-view{opacity:1;transform:none;}
.typing{align-self:flex-start;background:#fff;border-radius:9px;padding:9px 12px;display:none;gap:4px;box-shadow:0 1px .5px rgba(11,20,26,.13);}
.typing.on{display:flex;}
.typing i{width:6px;height:6px;border-radius:100px;background:#9aa3ae;animation:tp 1s infinite;}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.chats{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}

/* vidéos dans les études */
.vids{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px;}
.vids.three{grid-template-columns:repeat(3,1fr);max-width:860px;}
.vids.one{grid-template-columns:1fr;max-width:820px;}

/* ---------- Étude suivante ---------- */
.next{display:flex;align-items:center;gap:22px;background:var(--bg-alt);border-radius:28px;padding:34px;transition:transform 200ms var(--ease-out);}
.next:active{transform:scale(0.99);}
.next img{width:64px;height:64px;}
.next .t-small{display:block;margin-bottom:4px;}
.next h3{font-size:1.5rem;letter-spacing:-0.025em;line-height:1.2;}
.next .arrow{margin-left:auto;width:44px;height:44px;border-radius:100px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;transition:transform 200ms var(--ease-out);}
.next .arrow svg{width:18px;height:18px;}
@media (hover:hover) and (pointer:fine){ .next:hover .arrow{transform:translateX(4px);} }

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;opacity:0;pointer-events:none;transition:opacity 200ms ease;}
.lb.on{opacity:1;pointer-events:auto;}
.lb img{max-width:100%;max-height:100%;border-radius:12px;transform:scale(.97);transition:transform 250ms var(--ease-out);}
.lb.on img{transform:none;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .loop{grid-template-columns:repeat(3,1fr);}
  .fio{grid-template-columns:1fr;}
  .fio-list{border-left:0;border-top:1px solid #262830;}
  .img-demo{grid-template-columns:220px 1fr;gap:28px;padding:24px;}
}
@media (max-width:760px){
  .c-hero-grid,.shot-grid,.roles,.vol,.fn-detail,.lz-body,.chats,.vids{grid-template-columns:1fr;}
  .c-hero-grid{gap:36px;}
  .figures{grid-template-columns:1fr 1fr;}
  .figure:nth-child(3){padding-left:0;border-left:0;}
  .figure{padding-bottom:4px;}
  .ba{grid-template-columns:1fr;}
  .ba-arrow{justify-content:center;transform:rotate(90deg);}
  .img-demo{grid-template-columns:1fr;}
  .mini-phone{max-width:250px;margin:0 auto;}
  .fn{width:100% !important;}
  .lz-head{flex-direction:column;align-items:flex-start;padding:24px;}
  .lz-body{padding:0 24px 24px;}
  .vids.three{grid-template-columns:1fr 1fr;}
  .next{padding:24px;}
}
@media (max-width:560px){
  .loop{grid-template-columns:1fr 1fr;}
  .loop-detail{grid-template-columns:1fr;}
  .loop-detail .time{text-align:left;}
}