/* ============================================================
   FocusLab — feuille de style commune
   Design system : anthracite / crème / orange · Bricolage + Syne + Outfit
   ============================================================ */
:root,[data-theme="dark"]{
  --bg:#0d0c0a;--bg2:#100f0c;--surface:#141310;--surface2:#16140f;
  --line:#302b24;--title:#f1ece1;--text:#c0b8ac;--muted:#8a7d6d;--muted2:#675e50;
  --o:#ec742c;--o2:#b8541a;--grain:.045;
}
[data-theme="light"]{
  --bg:#fbf9f1;--bg2:#f5f0e4;--surface:#f3eee1;--surface2:#efe8d9;
  --line:#e4ddcc;--title:#191510;--text:#3c352b;--muted:#7c715f;--muted2:#a99d89;
  --o:#ec742c;--o2:#b8541a;--grain:.022;
}
:root{--display:'Bricolage Grotesque',sans-serif;--label:'Syne',sans-serif;--body:'Outfit',sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:90;opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:170px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.lbl{font-family:var(--label);font-weight:500;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--o);display:inline-flex;align-items:center;gap:10px}
.lbl.mut{color:var(--muted)}
.lbl .dot{width:6px;height:6px;border-radius:50%;background:var(--o);flex:0 0 auto}
.h2{font-family:var(--display);font-weight:600;letter-spacing:-0.02em;line-height:1.1;color:var(--title);font-size:clamp(1.9rem,4.6vw,3.2rem);max-width:20ch}
.h2 .ac{color:var(--o)}
.lead{margin-top:18px;max-width:54ch;font-size:1.02rem;color:var(--text)}
.btn{font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;background:var(--o);color:#0d0c0a;padding:15px 28px;border:1px solid var(--o);display:inline-block;transition:transform .2s,background .25s,color .25s}
.btn:hover{background:var(--title);border-color:var(--title);color:var(--bg);transform:translateY(-1px)}
.btn.ln{background:none;color:var(--title);border-color:var(--line)}
.btn.ln:hover{border-color:var(--o);color:var(--o);background:none}
.ghost{font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text);display:inline-flex;align-items:center;gap:10px}
.ghost .tri{width:0;height:0;border:5px solid transparent;border-left:8px solid var(--o);border-right:0;transition:transform .2s}
.ghost:hover{color:var(--title)}.ghost:hover .tri{transform:translateX(3px)}
.vf span{position:absolute;width:30px;height:30px;border-color:var(--muted2);border-style:solid;border-width:0;opacity:.8}
.vf .tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.vf .tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px;border-color:var(--o)}
.vf .bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.vf .br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:16px 40px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.nav-logo{display:block;width:28px;height:28px;background:url(focuslablogoWEBsubmarkpositif.png) center/contain no-repeat}
[data-theme="dark"] .nav-logo{background-image:url(focuslablogoWEBsubmarkwhite.png)}
.nav-r{display:flex;align-items:center;gap:26px}
.nav-r a.l{font-family:var(--label);font-weight:500;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.nav-r a.l:hover{color:var(--title)}
.nav-r a.l.on{color:var(--title)}
.theme-btn{font-family:var(--label);font-weight:500;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--line);padding:7px 11px;cursor:pointer;transition:color .2s,border-color .2s;display:inline-flex;align-items:center;gap:7px}
.theme-btn:hover{color:var(--title);border-color:var(--muted)}
.theme-btn .d{width:7px;height:7px;border-radius:50%;background:var(--o)}
.nav-cta{font-family:var(--label);font-weight:600;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#0d0c0a;background:var(--o);padding:9px 15px;transition:background .25s}
.nav-cta:hover{background:var(--title);color:var(--bg)}
@media(max-width:820px){.nav-r a.l{display:none}.nav-r{gap:12px}}
/* ── Menu mobile : burger + panneau déroulant (injectés par focuslab.js) ── */
.nav-burger{display:none;background:none;border:1px solid var(--line);color:var(--text);width:38px;height:34px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0;transition:border-color .25s,color .25s}
.nav-burger:hover{border-color:var(--o);color:var(--o)}
.nav-burger span{display:block;width:15px;height:1.5px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
.nav-burger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav-panel{display:none}
@media(max-width:820px){
.nav-burger{display:inline-flex}
.nav-panel{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;z-index:79;background:var(--bg);border-bottom:1px solid var(--line);padding:80px 22px 18px;gap:0;transform:translateY(-110%);transition:transform .3s ease;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.nav-panel.open{transform:none}
.nav-panel a{font-family:var(--label);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text);text-decoration:none;padding:14px 4px;border-bottom:1px solid var(--line)}
.nav-panel a:hover{color:var(--title)}
.nav-panel a.on{color:var(--o)}
.nav-panel a.pnl-cta{margin-top:14px;border:1px solid var(--o);color:var(--o);text-align:center;padding:13px}
body.has-banner .nav-panel{padding-top:118px}
body.has-disclaimer .nav-panel{padding-top:113px}
body.has-banner.has-disclaimer .nav-panel{padding-top:151px}
}
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:130px 40px 80px;overflow:hidden}
.hero .vf{position:absolute;inset:24px;pointer-events:none;z-index:2}
.hero-reel{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(135deg,#141310,#0a0908)}
.hero-reel iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100vw,177.78vh);height:max(56.25vw,100vh);border:0;pointer-events:none}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 94%,transparent),color-mix(in srgb,var(--bg) 72%,transparent) 46%,color-mix(in srgb,var(--bg) 30%,transparent)),linear-gradient(0deg,var(--bg),transparent 32%)}
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 80% at 74% 36%,color-mix(in srgb,var(--o) 10%,transparent),transparent 60%)}
.hero-top{position:absolute;top:90px;left:0;right:0;z-index:3}
.hero-top .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.hero-in{position:relative;z-index:3;width:100%}
.hero-id{margin-bottom:32px;opacity:0;animation:rise .9s ease forwards .15s}
.hero-logo{display:block;width:min(440px,76vw);aspect-ratio:4.627;background:url(focuslablogoWEBmainlogopositif.png) left center/contain no-repeat}
[data-theme="dark"] .hero-logo{background-image:url(focuslablogoWEBmainlogowhite.png)}
.hero-tag{margin-top:14px;font-family:var(--label);font-weight:600;font-size:.78rem;letter-spacing:.02em;color:var(--muted)}
.hero-caption{font-family:var(--label);font-weight:500;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:9px}
.hero-play{display:inline-flex;align-items:center;gap:10px;margin-left:18px;background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--o);color:var(--o);font-family:var(--label);font-weight:600;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;padding:9px 16px;cursor:pointer;transition:background .25s,color .25s;backdrop-filter:blur(2px)}
.hero-play::before{content:'▸';font-size:.85rem;line-height:1}
.hero-play:hover{background:var(--o);color:#0d0c0a}
.reel-modal{position:fixed;inset:0;z-index:200;background:rgba(5,4,3,.93);display:none;align-items:center;justify-content:center;padding:4vmin}
.reel-modal.open{display:flex}
.reel-modal .rm-box{position:relative;width:min(1200px,92vw);aspect-ratio:16/9;background:#000}
.reel-modal iframe{width:100%;height:100%;border:0;display:block}
.reel-modal .rm-close{position:absolute;top:-46px;right:0;background:none;border:1px solid var(--line);color:var(--text);font-family:var(--label);font-weight:500;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;padding:8px 14px;cursor:pointer;transition:border-color .25s,color .25s}
.reel-modal .rm-close:hover{border-color:var(--o);color:var(--o)}
@media(max-width:760px){.reel-modal{padding:2vmin}.reel-modal .rm-box{width:96vw}.hero-play{margin-left:0;margin-top:10px}}
.hero-caption::before{content:'';width:7px;height:7px;border:1.5px solid var(--o);border-radius:50%;flex:0 0 auto}
.hero-h1{font-family:var(--display);font-weight:600;letter-spacing:-0.025em;line-height:1.05;color:var(--title);font-size:clamp(2.6rem,7vw,5.6rem);max-width:15ch;opacity:0;animation:rise 1s ease forwards .3s}
.hero-h1 .ac{color:var(--o)}
.hero-sub{margin-top:24px;max-width:46ch;font-size:1.05rem;color:var(--text);opacity:0;animation:rise 1s ease forwards .5s}
.cta-row{margin-top:36px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;opacity:0;animation:rise 1s ease forwards .65s}
.proof{margin-top:38px;opacity:0;animation:rise 1s ease forwards .8s}
.proof-l{font-family:var(--label);font-weight:500;font-size:.62rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.proof-l b{color:var(--text);font-weight:500}
.assure{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.assure span{font-size:.82rem;color:var(--text);border:1px solid var(--line);padding:8px 13px;display:inline-flex;align-items:center;gap:9px;background:color-mix(in srgb,var(--bg) 55%,transparent)}
.assure span::before{content:'';width:9px;height:9px;border:1.5px solid var(--o);flex:0 0 auto}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.phead{position:relative;padding:150px 40px 60px;border-bottom:1px solid var(--line);overflow:hidden}
.phead::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 90% at 78% 20%,color-mix(in srgb,var(--o) 8%,transparent),transparent 60%)}
.phead .wrap{position:relative;z-index:2}
.phead h1{font-family:var(--display);font-weight:600;letter-spacing:-0.025em;line-height:1.04;color:var(--title);font-size:clamp(2.4rem,6vw,4.4rem);max-width:16ch;margin-top:16px}
.phead h1 .ac{color:var(--o)}
.phead .lead{max-width:60ch}
.sec{padding:100px 0;position:relative}
.sec.alt{background:var(--bg2)}
.sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:48px}
.mani{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.mani-quote{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.3;color:var(--title);letter-spacing:-0.01em}
.mani-quote .ac{color:var(--o)}
.mani-quote cite{display:block;margin-top:18px;font-family:var(--label);font-style:normal;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media(max-width:820px){.mani{grid-template-columns:1fr;gap:32px}}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:border-color .3s,transform .3s}
.card:hover{border-color:var(--o2);transform:translateY(-2px)}
.frame{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--surface2),var(--bg));overflow:hidden}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .ph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--label);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);text-align:center;line-height:1.6}
.frame .tag{position:absolute;top:13px;left:13px;font-family:var(--label);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);z-index:2}
.frame .c{position:absolute;width:20px;height:20px;border-color:var(--title);border-style:solid;border-width:0;opacity:.5;z-index:2}
.frame .ctl{top:11px;left:11px;border-top-width:1.5px;border-left-width:1.5px}
.frame .ctr{top:11px;right:11px;border-top-width:1.5px;border-right-width:1.5px;border-color:var(--o)}
.frame .cbl{bottom:11px;left:11px;border-bottom-width:1.5px;border-left-width:1.5px}
.frame .cbr{bottom:11px;right:11px;border-bottom-width:1.5px;border-right-width:1.5px}
.card:hover .frame .c{opacity:.9}
.card-b{padding:22px 22px 28px}
.card-tag{display:inline-block;font-family:var(--label);font-weight:600;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--o);border:1px solid var(--o2);padding:4px 10px 3px;background:color-mix(in srgb,var(--o) 7%,transparent)}
.card-h{font-family:var(--display);font-weight:600;font-size:1.4rem;color:var(--title);line-height:1.18;margin:9px 0 11px;letter-spacing:-0.01em}
.card-t{font-size:.9rem;color:var(--text);line-height:1.65}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.serv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tier{position:relative;background:var(--surface);border:1px solid var(--line);padding:32px 26px 30px;transition:border-color .3s,transform .3s;overflow:hidden}
.tier:hover{border-color:var(--o2);transform:translateY(-2px)}
.tier-n{font-family:var(--label);font-weight:600;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--o)}
.tier-h{font-family:var(--display);font-weight:600;font-size:1.45rem;color:var(--title);line-height:1.2;margin:12px 0 6px;letter-spacing:-0.01em}
.tier-sub{font-family:var(--label);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.tier-t{font-size:.92rem;color:var(--text);line-height:1.65}
.tier .cor{position:absolute;bottom:14px;right:14px;width:16px;height:16px;border-right:1.5px solid var(--muted2);border-bottom:1.5px solid var(--muted2);opacity:.4;transition:opacity .3s,border-color .3s}
.tier:hover .cor{opacity:1;border-color:var(--o)}
@media(max-width:820px){.serv{grid-template-columns:1fr}}
.h2 em{font-style:italic;color:var(--o)}
.offers{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
.offer{position:relative;background:var(--surface);border:1px solid var(--line);padding:28px 26px;overflow:hidden;transition:border-color .3s,transform .3s}
.offer:hover{border-color:var(--o2);transform:translateY(-2px)}
.offer.pri{border-top:2px solid var(--o)}
.offer.full{grid-column:1/-1}
.offer-nm{font-family:var(--display);font-weight:600;font-size:1.22rem;color:var(--title);line-height:1.22;letter-spacing:-0.01em}
.offer-ty{display:inline-block;margin-top:9px;font-family:var(--label);font-weight:500;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--o);border:1px solid var(--line);padding:4px 9px}
.offer-note{font-size:.82rem;color:var(--muted);font-style:italic;margin-top:13px;line-height:1.55}
.offer-lbl{font-family:var(--label);font-weight:600;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:16px;margin-bottom:2px}
.offer-list{margin:13px 0 0;padding:0;list-style:none}
.offer-list li{position:relative;padding-left:18px;font-size:.89rem;color:var(--text);line-height:1.55;margin-bottom:7px}
.offer-list li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:1.5px;background:var(--o)}
.offer-list li strong{color:var(--title);font-weight:600}
.offer-buy{margin-top:15px;font-size:.89rem;color:var(--text);line-height:1.6}
.offer-buy em{font-style:normal;color:var(--title)}
.offer-warn{margin-top:13px;font-size:.79rem;color:var(--muted);border-left:2px solid var(--muted2);padding-left:12px;line-height:1.5}
.offer-cta{margin-top:18px}
.offer-cta a{font-family:var(--label);font-weight:600;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--o);transition:color .2s}
.offer-cta a:hover{color:var(--title)}
.net{margin-top:40px;border:1px solid var(--line);background:var(--bg2);padding:28px 26px}
.net-t{font-family:var(--label);font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--title);margin-bottom:10px}
.net-d{font-size:.9rem;color:var(--text);line-height:1.65;max-width:60ch;margin-bottom:16px}
.net-tags{display:flex;flex-wrap:wrap;gap:9px}
.ntag{font-family:var(--label);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:7px 12px}
.zones{display:flex;gap:40px;flex-wrap:wrap;margin-top:28px}
.zone-l{font-family:var(--label);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.zone-v{font-size:.92rem;color:var(--title)}
.trust{margin-top:30px;padding:15px 20px;border:1px solid var(--line);background:var(--bg);font-family:var(--label);font-weight:500;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.7}
.trust b{color:var(--o);font-weight:500}
.pfilters{display:flex;flex-wrap:wrap;gap:9px;margin:34px 0 26px}
.fi{font-family:var(--label);font-weight:500;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--line);padding:8px 14px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.fi:hover{color:var(--title);border-color:var(--muted)}
.fi.active{color:#0d0c0a;background:var(--o);border-color:var(--o)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
.pcard:hover{border-color:var(--o2);transform:translateY(-2px)}
.pcard-fr{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--surface2),var(--bg));overflow:hidden}
.pcard-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard-ph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;opacity:.22}
.pcard-ph svg{width:100%;height:100%;fill:var(--o)}
.pcard-st{position:absolute;top:12px;right:12px;font-family:var(--label);font-weight:500;font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--title);background:color-mix(in srgb,var(--bg) 72%,transparent);border:1px solid var(--line);padding:4px 8px}
.pcard-b{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1}
.pcard-yr{font-family:var(--label);font-weight:500;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pcard-h{font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--title);line-height:1.18;margin:8px 0 9px;letter-spacing:-0.01em}
.pcard-d{font-size:.88rem;color:var(--text);line-height:1.6;margin-bottom:14px}
.pchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.pcct{font-family:var(--label);font-weight:500;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:#0d0c0a;background:var(--o);padding:4px 8px}
.pctg{font-family:var(--label);font-weight:500;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:4px 8px}
.pcard-lnk{margin-top:auto;font-family:var(--label);font-weight:600;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--o);display:inline-flex;align-items:center;gap:6px}
.pcard:hover .pcard-lnk{color:var(--title)}
.pempty{grid-column:1/-1;padding:50px 20px;text-align:center;color:var(--muted);font-family:var(--label);font-weight:500;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;border:1px dashed var(--line)}
.pempty a{color:var(--o)}
@media(max-width:900px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}}
.ctwrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:start}
.ct-h1{font-family:var(--display);font-weight:600;letter-spacing:-0.025em;line-height:1.04;color:var(--title);font-size:clamp(2.2rem,5vw,3.6rem);margin:14px 0 16px}
.ct-h1 .ac{color:var(--o)}
.inf-list{display:flex;flex-direction:column;gap:20px;margin:30px 0}
.inf{display:flex;gap:14px;align-items:flex-start}
.inf-ic{width:34px;height:34px;flex:0 0 auto;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--o)}
.inf-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.inf-l{font-family:var(--label);font-weight:500;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.inf-v{font-size:.95rem;color:var(--title)}
.inf-v a{color:var(--title)}
.inf-v a:hover{color:var(--o)}
.ct-form{background:var(--surface);border:1px solid var(--line);padding:32px 30px}
.ct-form h2{font-family:var(--display);font-weight:600;font-size:1.5rem;color:var(--title);letter-spacing:-0.01em;margin-bottom:20px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.privacy{font-size:.78rem;color:var(--muted);margin:2px 0 0;line-height:1.5}
.okmsg{display:none;text-align:center;padding:36px 20px}
.okmsg h3{font-family:var(--display);font-weight:600;font-size:1.6rem;color:var(--title);letter-spacing:-0.01em;margin-bottom:8px}
.okmsg p{color:var(--text)}
@media(max-width:860px){.ctwrap{grid-template-columns:1fr;gap:40px}}
@media(max-width:520px){.fg2{grid-template-columns:1fr}}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.grid3{grid-template-columns:1fr}}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.val{background:var(--bg);padding:28px 24px}
.val.alt2{background:var(--surface)}
.val-star{font-family:var(--label);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--o);margin-bottom:10px;display:block;min-height:.8rem}
.val-h{font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--title);margin-bottom:8px;letter-spacing:-0.01em}
.val-t{font-size:.88rem;color:var(--text);line-height:1.6}
.val-t .o{color:var(--title);font-weight:500}
@media(max-width:760px){.vals{grid-template-columns:1fr}}
.about{display:grid;grid-template-columns:0.85fr 1.15fr;gap:50px;align-items:center}
.about .pf{position:relative;aspect-ratio:4/5;background:linear-gradient(135deg,var(--surface2),var(--bg));border:1px solid var(--line);overflow:hidden}
.pf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.about-t{font-size:1.02rem;color:var(--text);line-height:1.8;margin-top:18px}
@media(max-width:820px){.about{grid-template-columns:1fr;gap:30px}.about .pf{max-width:320px}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{border-top:1.5px solid var(--line);padding-top:20px;position:relative}
.step::before{content:'';position:absolute;top:-1.5px;left:0;width:34px;height:1.5px;background:var(--o)}
.step-n{font-family:var(--display);font-weight:400;font-size:1.9rem;color:var(--o);line-height:1}
.step-h{font-family:var(--label);font-weight:600;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--title);margin:12px 0 8px}
.step-t{font-size:.88rem;color:var(--text);line-height:1.6}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.prose{max-width:74ch;font-size:1rem;color:var(--text);line-height:1.85}
.prose h2{font-family:var(--display);font-weight:600;font-size:1.5rem;color:var(--title);letter-spacing:-0.01em;margin:40px 0 12px}
.prose h3{font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--o);margin:28px 0 8px}
.prose p{margin-bottom:14px}
.prose a{color:var(--o)}.prose a:hover{text-decoration:underline}
.prose strong{color:var(--title);font-weight:500}
.pmain{padding-top:140px;padding-bottom:90px}
body.has-banner .pmain{padding-top:178px}
body.has-disclaimer .pmain{padding-top:173px}
body.has-banner.has-disclaimer .pmain{padding-top:210px}
.legal{max-width:74ch;font-size:1rem;color:var(--text);line-height:1.85}
.legal .back{display:inline-block;margin-bottom:26px;font-family:var(--label);font-weight:500;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.legal .back:hover{color:var(--o)}
.legal h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-0.025em;color:var(--title);margin-bottom:10px}
.legal h1 em{font-style:italic;color:var(--o)}
.legal .sub{font-family:var(--label);font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.legal .notice{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--o);padding:14px 18px;font-size:.92rem;color:var(--text);margin-bottom:26px}
.legal .notice a{color:var(--o)}
.legal h2{font-family:var(--display);font-weight:600;font-size:1.4rem;color:var(--title);letter-spacing:-0.01em;margin:34px 0 10px}
.legal h3{font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--o);margin:24px 0 8px}
.legal p{margin-bottom:13px}
.legal a{color:var(--o)}
.legal a:hover{text-decoration:underline}
.legal strong{color:var(--title);font-weight:500}
.legal ul{margin:0 0 13px 20px}
.legal li{margin-bottom:6px}
.legal .divider{border:0;border-top:1px solid var(--line);margin:30px 0}
.legal .update{font-family:var(--label);font-weight:500;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)}
.ck a{color:var(--o)}
.ck a:hover{text-decoration:underline}
.ck-txt{display:block}
.form{display:grid;gap:18px;max-width:560px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--label);font-weight:500;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{width:100%;min-width:0;font-family:var(--body);font-size:.95rem;color:var(--title);background:var(--surface);border:1px solid var(--line);padding:13px 15px;transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--o)}
.field textarea{resize:vertical;min-height:130px}
.form-note{font-size:.82rem;color:var(--muted)}
.contact{position:relative;text-align:center;border:1px solid var(--line);padding:64px 40px;background:var(--surface);overflow:hidden}
.contact .vf{position:absolute;inset:18px;pointer-events:none}
.contact .h2{margin:0 auto}
.contact .lead{margin:18px auto 30px}
@media(max-width:600px){.contact{padding:48px 24px}}
.foot{padding:54px 0 40px;border-top:1px solid var(--line)}
.foot .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.foot-logo{display:block;width:150px;aspect-ratio:6.553;background:url(focuslablogoWEBwordmarkpositif.png) left center/contain no-repeat;margin-bottom:12px}
[data-theme="dark"] .foot-logo{background-image:url(focuslablogoWEBwordmarkwhite.png)}
.foot-tag{font-family:var(--display);font-weight:400;font-size:1.1rem;color:var(--muted);letter-spacing:-0.01em}
.foot-nav{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
.foot-nav a{font-family:var(--label);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.foot-nav a:hover{color:var(--title)}
.foot-soc{display:flex;gap:18px;margin-top:8px}
.foot-soc a{font-family:var(--label);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.foot-soc a:hover{color:var(--o)}
.foot-leg{font-family:var(--label);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);text-align:right;line-height:2}
.foot-leg a:hover{color:var(--text)}
.foot-admin{display:inline-flex;margin-top:10px;color:var(--muted2);opacity:.55;transition:color .2s,opacity .2s}
.foot-admin:hover{color:var(--o);opacity:1}
.ck{position:fixed;left:20px;bottom:20px;z-index:96;max-width:340px;background:var(--surface);border:1px solid var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 14px 44px rgba(0,0,0,.42)}
.ck.show{opacity:1;transform:none;pointer-events:auto}
.ck p{font-size:.82rem;color:var(--text);line-height:1.55}
.ck button{align-self:flex-start;font-family:var(--label);font-weight:600;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;background:var(--o);color:#0d0c0a;border:0;padding:9px 15px;cursor:pointer}
#construction-bar{position:fixed;top:0;left:0;right:0;z-index:99;background:var(--surface);border-bottom:1px solid var(--line);padding:9px 20px 9px 40px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--label);font-weight:500;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:transform .3s ease}
#construction-bar.hidden{transform:translateY(-100%)}
#construction-bar .cb-dot{width:6px;height:6px;background:var(--o);border-radius:50%;flex-shrink:0}
#construction-bar .cb-txt{flex:1}
#construction-bar .cb-txt a{color:var(--o)}
#construction-bar .cb-txt a:hover{text-decoration:underline}
#construction-bar .cb-close{background:none;border:1px solid var(--line);color:var(--muted);padding:3px 10px;font-family:var(--label);font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s;flex-shrink:0}
#construction-bar .cb-close:hover{border-color:var(--o);color:var(--o)}
#construction-bar .cb-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#disclaimer-bar .db-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:640px){#construction-bar{padding:9px 14px;gap:8px}#disclaimer-bar{padding:8px 14px}}
#disclaimer-bar{position:fixed;left:0;right:0;top:0;z-index:98;display:none;align-items:center;gap:10px;padding:8px 40px;font-family:var(--label);font-weight:500;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;background:var(--surface2);border-bottom:1px solid var(--line);color:var(--text)}
#disclaimer-bar.show{display:flex}
#disclaimer-bar .db-dot{width:6px;height:6px;border-radius:50%;background:var(--o);flex-shrink:0}
#disclaimer-bar.t-warning .db-dot{background:#e0a53c}
#disclaimer-bar.t-success .db-dot{background:#5aa06e}
body.has-banner #disclaimer-bar{top:38px}
body.has-banner .nav{top:38px}
body.has-disclaimer .nav{top:33px}
body.has-banner.has-disclaimer .nav{top:71px}
/* Poussée du site quand une bannière est affichée : tout descend, tout remonte à la fermeture */
.nav,.hero,.phead,.pmain,.hero-top,.hero .vf{transition:top .3s ease,padding-top .3s ease}
body.has-banner .hero{padding-top:168px}
body.has-banner .phead{padding-top:188px}
body.has-disclaimer .hero{padding-top:163px}
body.has-disclaimer .phead{padding-top:183px}
body.has-banner.has-disclaimer .hero{padding-top:200px}
body.has-banner.has-disclaimer .phead{padding-top:220px}
body.has-banner .hero-top{top:128px}
body.has-disclaimer .hero-top{top:123px}
body.has-banner.has-disclaimer .hero-top{top:161px}
body.has-banner .hero .vf{top:62px}
body.has-disclaimer .hero .vf{top:57px}
body.has-banner.has-disclaimer .hero .vf{top:95px}
@media(max-width:760px){
body.has-banner .hero-top{top:110px}
body.has-disclaimer .hero-top{top:105px}
body.has-banner.has-disclaimer .hero-top{top:143px}
body.has-banner .hero .vf{top:51px}
body.has-disclaimer .hero .vf{top:46px}
body.has-banner.has-disclaimer .hero .vf{top:84px}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--o);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.hero-id,.hero-h1,.hero-sub,.cta-row,.proof{opacity:1!important}}
/* ===== ALIAS DE COMPATIBILITÉ (anciens noms de tokens utilisés par le moteur de rendu projet) ===== */
:root{--mu:var(--muted);--so:var(--text);--tx:var(--title);--sf:var(--surface);--sf2:var(--surface2);--bd:var(--line);--serif:var(--display);--sans:var(--body)}
/* ===== ACCUEIL : cartes réalisations cliquables + images réelles ===== */
a.card{display:block;color:inherit;text-decoration:none}
.frame img.frame-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.frame{position:relative;overflow:hidden}
/* ===== ACCUEIL : bande partenaires (pilotée par admin/partners.php) ===== */
.prt-band{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.prt-band .sec-head{margin-bottom:34px}
.prt-marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%)}
.prt-track{display:flex;gap:14px;width:max-content;align-items:stretch;animation:prtScroll var(--prt-dur,30s) linear infinite}
.prt-marquee:hover .prt-track{animation-play-state:paused}
@keyframes prtScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.prt-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:190px;height:86px;padding:16px 22px;background:var(--surface);border:1px solid var(--line);transition:border-color .25s}
.prt-logo:hover{border-color:var(--o2)}
a.prt-logo{text-decoration:none;color:inherit}
.prt-logo img{width:100%;height:100%;object-fit:contain;display:block;filter:grayscale(1);opacity:.78;transition:filter .3s,opacity .3s}
.prt-logo:hover img{filter:none;opacity:1}
.prt-name{font-family:var(--label);font-weight:500;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.prt-quote{max-width:680px;margin:38px auto 0;text-align:center}
.prt-quote-txt{font-family:var(--display);font-weight:400;font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.4;color:var(--title)}
.prt-quote-who{font-family:var(--label);font-weight:500;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:14px}
@media(prefers-reduced-motion:reduce){.prt-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.prt-track{animation:none;width:auto}}
@media(max-width:760px){.prt-band{padding:44px 0}.prt-logo{width:150px;height:70px;padding:12px 16px}}
/* ===== PAGE PROJET (détail, rendu par blocs) ===== */
.r{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.r.on{opacity:1;transform:none}
.proj-loading,.proj-error{padding:200px 40px 120px;text-align:center;color:var(--muted);font-family:var(--label);font-weight:500;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}
.proj-error a{color:var(--o)}
.proj-hero{position:relative;min-height:74vh;display:flex;align-items:flex-end;padding:150px 40px 56px;overflow:hidden;border-bottom:1px solid var(--line)}
.proj-hero.no-image{min-height:auto;padding:150px 40px 44px;background:var(--surface)}
body.has-banner .proj-hero{padding-top:180px}
.proj-hero-bg{position:absolute;inset:0;background:var(--surface2);background-size:cover;background-position:center;z-index:0}
.proj-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 32%,transparent) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 55%,var(--bg) 100%)}
.proj-hero-inner{position:relative;z-index:1;max-width:960px;width:100%;margin:0 auto}
.proj-meta{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-bottom:22px;font-family:var(--label);font-weight:500;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.proj-meta .ym{color:var(--o)}
.proj-meta .pill{border:1px solid var(--o);color:var(--o);padding:5px 11px}
.proj-meta .tag{border:1px solid var(--line);padding:5px 11px;color:var(--text)}
.proj-meta .tag.cat{border-color:var(--o2);color:var(--o)}
.proj-hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,6.5vw,4.8rem);line-height:1.03;letter-spacing:-0.025em;color:var(--title);margin-bottom:18px;text-wrap:balance}
.proj-hero h1 em{font-style:italic;color:var(--o)}
.proj-lede{font-family:var(--body);font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--text);max-width:680px;line-height:1.6}
.proj-body{padding:80px 0 40px}
.block{padding:0 40px;margin:0 auto 60px;width:100%}
.b-narrow{max-width:760px}
.b-wide{max-width:1180px}
.b-full{max-width:100%;padding:0}
.b-heading h2{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3.5vw,2.6rem);line-height:1.12;letter-spacing:-0.02em;color:var(--title);margin-bottom:6px;text-wrap:balance}
.b-heading h2 em{font-style:italic;color:var(--o)}
.b-heading .sub{font-family:var(--label);font-weight:500;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--o);margin-bottom:14px;display:flex;align-items:center;gap:14px}
.b-heading .sub::after{content:'';flex:0 0 44px;height:1px;background:var(--o2)}
.b-paragraph p{font-size:1rem;color:var(--text);line-height:1.85;text-wrap:pretty}
.b-paragraph p + p{margin-top:1.1em}
.b-paragraph p strong{color:var(--title);font-weight:500}
.b-paragraph p em{color:var(--title);font-style:italic}
.b-paragraph p a{color:var(--o);text-decoration:none;border-bottom:1px solid var(--o2)}
.b-paragraph p a:hover{border-color:var(--o)}
.b-image figure,.b-image-caption figure{margin:0}
.b-image img,.b-image-caption img,.b-gif img{display:block;width:100%;height:auto}
.b-image figcaption,.b-image-caption figcaption{font-family:var(--label);font-weight:500;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:12px;padding:0 2px}
.b-gallery{position:relative;overflow:hidden;padding:4px 0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
.b-gallery-track{display:flex;gap:16px;width:max-content;animation:bgScroll var(--gal-dur,40s) linear infinite}
.b-gallery:hover .b-gallery-track,.b-gallery:focus-within .b-gallery-track{animation-play-state:paused}
.b-gallery figure{flex:0 0 auto;margin:0;width:clamp(260px,32vw,420px);aspect-ratio:3/2;position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:border-color .25s}
.b-gallery figure:hover{border-color:var(--o2)}
.b-gallery figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.b-gallery figure:hover img{transform:scale(1.035)}
.b-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.35) 60%,transparent);color:#fff;font-family:var(--label);font-weight:500;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;margin:0}
.b-gallery figure:hover figcaption{opacity:1;transform:none}
@keyframes bgScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.b-video-embed .ratio{position:relative;width:100%;padding-top:56.25%;background:var(--surface2);overflow:hidden}
.b-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.b-video-local video{display:block;width:100%;background:#000;max-height:80vh;object-fit:contain}
.b-audio{background:var(--surface);border:1px solid var(--line);padding:24px 28px;display:flex;flex-direction:column;gap:14px}
.b-audio .a-lbl{font-family:var(--label);font-weight:500;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--o);display:flex;align-items:center;gap:12px}
.b-audio .a-lbl::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--o)}
.b-audio audio{width:100%;height:40px}
.b-quote blockquote{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.6vw,2.05rem);font-style:italic;line-height:1.32;color:var(--title);padding:16px 0 16px 30px;border-left:2px solid var(--o);text-wrap:balance}
.b-quote blockquote em{font-style:normal;color:var(--o)}
.b-quote .who{font-family:var(--label);font-weight:500;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:18px;padding-left:30px;display:flex;align-items:center;gap:12px}
.b-quote .who::before{content:'';width:24px;height:1px;background:var(--o2)}
.b-credits .c-h{font-family:var(--label);font-weight:600;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--o);margin-bottom:24px;display:flex;align-items:center;gap:14px}
.b-credits .c-h::after{content:'';flex:1;height:1px;background:var(--line)}
.b-credits ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px 36px}
.b-credits li{display:grid;grid-template-columns:42% 58%;gap:14px;padding:10px 0;border-bottom:1px dotted var(--line);align-items:baseline}
.b-credits .role{font-family:var(--label);font-weight:500;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.b-credits .name{font-family:var(--display);font-weight:500;font-size:1.05rem;color:var(--title)}
.b-cta{text-align:center;padding-top:32px;padding-bottom:32px}
.b-cta a{font-family:var(--label);font-weight:600;display:inline-block;padding:14px 40px;border:1px solid var(--o);color:var(--o);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s}
.b-cta a:hover{background:var(--o);color:#0d0c0a}
.b-spacer{height:48px}
.b-spacer-lg{height:96px}
.b-html{font-size:.95rem;color:var(--text);line-height:1.85}
.b-columns .col-grid{display:grid;gap:32px;align-items:center}
.b-columns[data-valign="top"] .col-grid{align-items:start}
.b-columns[data-valign="bottom"] .col-grid{align-items:end}
.b-columns[data-gap="sm"] .col-grid{gap:16px}
.b-columns[data-gap="md"] .col-grid{gap:32px}
.b-columns[data-gap="lg"] .col-grid{gap:64px}
.b-columns[data-ratio="1-1"] .col-grid{grid-template-columns:1fr 1fr}
.b-columns[data-ratio="1-2"] .col-grid{grid-template-columns:1fr 2fr}
.b-columns[data-ratio="2-1"] .col-grid{grid-template-columns:2fr 1fr}
.b-columns[data-ratio="1-3"] .col-grid{grid-template-columns:1fr 3fr}
.b-columns[data-ratio="3-1"] .col-grid{grid-template-columns:3fr 1fr}
.b-columns .col{min-width:0}
.b-columns .col-empty{min-height:1px}
.b-columns .col img{display:block;width:100%;height:auto}
.b-columns .col figure{margin:0}
.b-columns .col figcaption{font-family:var(--label);font-weight:500;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.b-columns .col h3{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15;letter-spacing:-0.01em;color:var(--title);margin-bottom:10px}
.b-columns .col h3 em{font-style:italic;color:var(--o)}
.b-columns .col .sub{font-family:var(--label);font-weight:500;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--o);margin-bottom:10px;display:block}
.b-columns .col .col-txt p{font-size:.95rem;color:var(--text);line-height:1.8}
.b-columns .col .col-txt p + p{margin-top:1em}
.b-columns .col .col-txt strong{color:var(--title);font-weight:500}
.b-columns .col .col-txt em{color:var(--title);font-style:italic}
.b-columns .col .col-txt a{color:var(--o);text-decoration:none;border-bottom:1px solid var(--o2)}
.b-columns .col blockquote{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1.8vw,1.5rem);font-style:italic;line-height:1.35;color:var(--title);padding:10px 0 10px 20px;border-left:2px solid var(--o)}
.b-columns .col blockquote em{font-style:normal;color:var(--o)}
.b-columns .col .who{font-family:var(--label);font-weight:500;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:10px;padding-left:20px}
.b-columns .col .ratio{position:relative;width:100%;padding-top:56.25%;background:var(--surface2);overflow:hidden}
.b-columns .col iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.proj-foot{padding:60px 40px 90px;border-top:1px solid var(--line);background:var(--bg2)}
.proj-foot-back{text-align:center;margin-bottom:44px}
.proj-foot-back a{font-family:var(--label);font-weight:500;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:color .3s}
.proj-foot-back a:hover{color:var(--o)}
.proj-foot-back a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
.proj-foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:2px;max-width:1180px;margin:0 auto}
.pfn{padding:30px 26px;border:1px solid var(--line);text-decoration:none;color:inherit;transition:border-color .3s;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.pfn:hover{border-color:var(--o2)}
.pfn .lbl{font-family:var(--label);font-weight:600;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--o);display:flex;align-items:center;gap:10px}
.pfn.next .lbl{justify-content:flex-end}
.pfn .ttl{font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.2;color:var(--title);letter-spacing:-0.01em}
.pfn.next{text-align:right}
.pfn.disabled{opacity:.35;pointer-events:none}
@media(prefers-reduced-motion:reduce){.b-gallery{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.b-gallery-track{animation:none;width:auto}.b-gallery figcaption{position:static;background:transparent;color:var(--muted);opacity:1;transform:none;padding:8px 2px 0}}
@media(max-width:820px){.proj-hero{padding:120px 22px 40px;min-height:60vh}.block{padding:0 22px;margin-bottom:48px}.proj-body{padding:56px 0 24px}.proj-foot{padding:48px 22px 70px}.b-gallery figure{width:clamp(240px,60vw,360px)}.b-columns[data-gap="lg"] .col-grid{gap:32px}.b-columns[data-gap="md"] .col-grid{gap:24px}}
@media(max-width:560px){.b-gallery figure{width:78vw;aspect-ratio:4/3}.b-credits ul{grid-template-columns:1fr}.b-credits li{grid-template-columns:1fr;gap:2px}.proj-foot-nav{grid-template-columns:1fr}.pfn.next{text-align:left}.pfn.next .lbl{justify-content:flex-start}.b-columns .col-grid{grid-template-columns:1fr!important;gap:24px!important}.b-columns .col-empty{display:none}.proj-hero{padding:100px 22px 36px}.proj-hero h1{font-size:clamp(2rem,9vw,3rem)}}
@media(max-width:760px){.wrap{padding:0 22px}.nav{padding:13px 22px}.hero{padding:120px 22px 80px}.hero .vf{inset:13px}.hero-top{top:72px}.phead{padding:120px 22px 48px}.sec{padding:74px 0}.ck{left:14px;right:14px;bottom:14px;max-width:none}#construction-bar{padding-left:20px;font-size:.54rem}#disclaimer-bar{padding:8px 20px}.foot .wrap{gap:24px}.foot-leg{text-align:left}}


/* ===== HERO MOBILE : flux vertical simple, zéro chevauchement ===== */
@media(max-width:760px){
.hero{justify-content:flex-start;padding-top:104px}
body.has-banner .hero{padding-top:142px}
body.has-disclaimer .hero{padding-top:137px}
body.has-banner.has-disclaimer .hero{padding-top:174px}
.hero-top{position:relative;top:auto;z-index:3;margin-bottom:26px}
body.has-banner .hero-top,body.has-disclaimer .hero-top,body.has-banner.has-disclaimer .hero-top{top:auto}
.hero-top .wrap{flex-direction:column;align-items:flex-start;gap:12px;padding:0}
.hero-caption{display:none}
.hero-play{margin-left:0;margin-top:0}
.hero-logo{width:min(300px,80vw)}
.hero-id{margin-bottom:24px}
}

/* ============================================================
   MOTION PASS — 2026-07 (additif, override par ordre de source)
   Discret & précis · transform/opacity uniquement · 150–600ms
   Courbes maison : --e-out (entrées), --e-io (états).
   Toute nouvelle animation est neutralisée en fin de bloc
   sous @media(prefers-reduced-motion:reduce).
   ============================================================ */
:root{--e-out:cubic-bezier(.16,.84,.44,1);--e-io:cubic-bezier(.65,.05,.36,1)}

/* ── HERO : cascade d'entrée réorchestrée (label → logo → titre → sous-titre → CTA → preuve) ── */
@keyframes flRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-top .lbl{opacity:0;animation:flRise .6s var(--e-out) forwards .05s}
.hero-id{opacity:0;animation:flRise .7s var(--e-out) forwards .16s}
.hero-h1{opacity:0;animation:flRise .72s var(--e-out) forwards .30s}
.hero-sub{opacity:0;animation:flRise .72s var(--e-out) forwards .44s}
.cta-row{opacity:0;animation:flRise .72s var(--e-out) forwards .56s}
.proof{opacity:0;animation:flRise .72s var(--e-out) forwards .68s}
.hero-caption{opacity:0;animation:flRise .6s var(--e-out) forwards .72s}
.hero-play{opacity:0;animation:flRise .6s var(--e-out) forwards .82s}

/* ── RÉVÉLATION AU DÉFILEMENT (.r existant + .fl-rv additif) ── */
.r{transform:translateY(20px);transition:opacity .55s var(--e-out),transform .55s var(--e-out)}
.fl-rv{opacity:0;transform:translateY(16px);transition:opacity .55s var(--e-out),transform .55s var(--e-out);transition-delay:calc(var(--i,0) * 70ms);will-change:opacity,transform}
.fl-in > .fl-rv{opacity:1;transform:none}
/* mosaïque .vals bordée : fondu seul pour ne pas révéler les lignes du gap */
.vals > .fl-rv{transform:none}
/* Entrée douce des blocs de contenu (titres, intros, sections) — standardisée sur toutes les pages */
.fl-r{opacity:0;transform:translateY(18px);transition:opacity .55s var(--e-out),transform .55s var(--e-out);will-change:opacity,transform}
.fl-r.fl-on{opacity:1;transform:none}

/* ── MICRO-INTERACTIONS : cartes, cadres, boutons, liens ── */
.card,.pcard,.tier,.offer{transition:border-color .25s var(--e-out),transform .25s var(--e-out)}
.card:hover,.pcard:hover,.tier:hover,.offer:hover{transform:translateY(-3px)}
.frame img,.frame .frame-img,.pcard-fr img{transition:transform .5s var(--e-out)}
.card:hover .frame img,.card:hover .frame .frame-img,.pcard:hover .pcard-fr img{transform:scale(1.045)}
.frame .c{transition:opacity .3s var(--e-out),border-color .3s var(--e-out)}
.btn{transition:transform .2s var(--e-out),background .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.nav-cta{transition:background .25s,transform .2s var(--e-out)}
.nav-cta:hover{transform:translateY(-1px)}
.hero-play{transition:background .25s,color .25s,transform .2s var(--e-out)}
.nav-r a.l,.foot-nav a,.foot-soc a,.pcard-lnk,.offer-cta a{transition:color .2s var(--e-out)}
.ghost .tri{transition:transform .2s var(--e-out)}
.step::before{transition:transform .3s var(--e-out);transform-origin:left}
.step:hover::before{transform:scaleX(1.4)}
.card-tag,.pcct,.ntag{transition:border-color .2s var(--e-out),color .2s var(--e-out)}

/* ── MARQUEES : lissage GPU (fluidité, pause au survol déjà en place) ── */
.prt-track,.b-gallery-track{will-change:transform;backface-visibility:hidden}

/* ── SHOWREEL : entrée/sortie en fondu + léger scale (remplace l'apparition sèche) ── */
.reel-modal{display:flex;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--e-out),visibility 0s linear .3s}
.reel-modal.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s var(--e-out),visibility 0s}
.reel-modal .rm-box{transform:scale(.965);transition:transform .34s var(--e-out)}
.reel-modal.open .rm-box{transform:none}

/* ── TRANSITION DE THÈME : adoucit fond/bordures/texte des surfaces le temps du switch ── */
.fl-theme-anim,.fl-theme-anim *{transition-property:background-color,border-color,color,fill,stroke;transition-duration:.45s;transition-timing-function:var(--e-io)}

/* ── MENU MOBILE : courbe affinée + cascade des liens ── */
@media(max-width:820px){
  .nav-panel{transition:transform .34s var(--e-out)}
  .nav-panel a{opacity:0;transform:translateY(-8px);transition:opacity .3s var(--e-out),transform .3s var(--e-out),color .25s}
  .nav-panel.open a{opacity:1;transform:none}
  .nav-panel.open a:nth-child(1){transition-delay:.06s}
  .nav-panel.open a:nth-child(2){transition-delay:.11s}
  .nav-panel.open a:nth-child(3){transition-delay:.16s}
  .nav-panel.open a:nth-child(4){transition-delay:.21s}
  .nav-panel.open a:nth-child(5){transition-delay:.26s}
}

/* ── NEUTRALISATION accessibilité : couvre chaque animation ajoutée ci-dessus ── */
@media(prefers-reduced-motion:reduce){
  .hero-top .lbl,.hero-caption,.hero-play,.fl-rv,.fl-r,.r{opacity:1!important;transform:none!important;animation:none!important}
  .fl-in > .fl-rv{opacity:1!important;transform:none!important}
  .reel-modal{transition:none!important}
  .reel-modal .rm-box{transform:none!important}
  .nav-panel a{opacity:1!important;transform:none!important}
}

/* ============================================================
   AJUSTEMENTS (commentaires Jérémy) — 2026-07
   ============================================================ */

/* ── 1. Images sans bordure : on retire le trait qui encadre les images ──
   (cartes, portfolio, portrait, logos partenaires, galeries projet).
   Les coins viseur (.c / .vf) — signature FocusLab — sont conservés. ── */
.card,
.pcard,
.prt-logo,
.about .pf,
.b-gallery figure{border:0}

/* ── 2. Réseaux sociaux : pictogrammes au lieu du nom en toutes lettres ──
   Ciblés par URL → couvre les liens statiques ET ceux injectés depuis
   admin/social.php, sans toucher au JavaScript. Le libellé texte reste
   dans le DOM (accessibilité lecteurs d'écran), simplement masqué visuellement.
   La couleur suit le thème (muted → orange au survol). ── */
.foot-soc{align-items:center}
.foot-soc a[href*="linkedin"],
.foot-soc a[href*="instagram"],
.foot-soc a[href*="tiktok"],
.foot-soc a[href*="youtu"],
.foot-soc a[href*="facebook"]{
  font-size:0;line-height:0;width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;
}
.foot-soc a[href*="linkedin"]::before,
.foot-soc a[href*="instagram"]::before,
.foot-soc a[href*="tiktok"]::before,
.foot-soc a[href*="youtu"]::before,
.foot-soc a[href*="facebook"]::before{
  content:"";width:20px;height:20px;background-color:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:background-color .2s var(--e-out),transform .2s var(--e-out);
}
.foot-soc a[href*="linkedin"]:hover::before,
.foot-soc a[href*="instagram"]:hover::before,
.foot-soc a[href*="tiktok"]:hover::before,
.foot-soc a[href*="youtu"]:hover::before,
.foot-soc a[href*="facebook"]:hover::before{transform:translateY(-2px)}
.foot-soc a[href*="linkedin"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.25 8h4.5v13H.25V8zM8 8h4.32v1.78h.06c.6-1.14 2.07-2.34 4.26-2.34 4.56 0 5.4 3 5.4 6.9V21h-4.5v-6.1c0-1.46-.03-3.34-2.03-3.34-2.03 0-2.34 1.59-2.34 3.23V21H8V8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.25 8h4.5v13H.25V8zM8 8h4.32v1.78h.06c.6-1.14 2.07-2.34 4.26-2.34 4.56 0 5.4 3 5.4 6.9V21h-4.5v-6.1c0-1.46-.03-3.34-2.03-3.34-2.03 0-2.34 1.59-2.34 3.23V21H8V8z'/%3E%3C/svg%3E")}
.foot-soc a[href*="instagram"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 3.68A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4zm6.4-10.44a1.44 1.44 0 1 1-1.44-1.44 1.44 1.44 0 0 1 1.44 1.44z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 3.68A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4zm6.4-10.44a1.44 1.44 0 1 1-1.44-1.44 1.44 1.44 0 0 1 1.44 1.44z'/%3E%3C/svg%3E")}
.foot-soc a[href*="tiktok"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 5.82a4.28 4.28 0 0 1-1.06-2.82h-3.2v12.86a2.6 2.6 0 1 1-2.6-2.6c.27 0 .53.04.78.12V9.9a5.94 5.94 0 0 0-.78-.05 5.86 5.86 0 1 0 5.86 5.86V9.01a7.5 7.5 0 0 0 4.34 1.39V7.2a4.28 4.28 0 0 1-3.34-1.38z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 5.82a4.28 4.28 0 0 1-1.06-2.82h-3.2v12.86a2.6 2.6 0 1 1-2.6-2.6c.27 0 .53.04.78.12V9.9a5.94 5.94 0 0 0-.78-.05 5.86 5.86 0 1 0 5.86 5.86V9.01a7.5 7.5 0 0 0 4.34 1.39V7.2a4.28 4.28 0 0 1-3.34-1.38z'/%3E%3C/svg%3E")}
.foot-soc a[href*="youtu"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.51A3.02 3.02 0 0 0 .5 6.2 31.5 31.5 0 0 0 0 12a31.5 31.5 0 0 0 .5 5.8 3.02 3.02 0 0 0 2.12 2.14c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3.02 3.02 0 0 0 2.12-2.14A31.5 31.5 0 0 0 24 12a31.5 31.5 0 0 0-.5-5.8zM9.55 15.57V8.43L15.82 12z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.51A3.02 3.02 0 0 0 .5 6.2 31.5 31.5 0 0 0 0 12a31.5 31.5 0 0 0 .5 5.8 3.02 3.02 0 0 0 2.12 2.14c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3.02 3.02 0 0 0 2.12-2.14A31.5 31.5 0 0 0 24 12a31.5 31.5 0 0 0-.5-5.8zM9.55 15.57V8.43L15.82 12z'/%3E%3C/svg%3E")}
.foot-soc a[href*="facebook"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12a12 12 0 1 0-13.88 11.85v-8.38H7.08V12h3.04V9.36c0-3 1.79-4.67 4.53-4.67 1.31 0 2.68.24 2.68.24v2.95h-1.51c-1.49 0-1.95.92-1.95 1.87V12h3.32l-.53 3.47h-2.79v8.38A12 12 0 0 0 24 12z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12a12 12 0 1 0-13.88 11.85v-8.38H7.08V12h3.04V9.36c0-3 1.79-4.67 4.53-4.67 1.31 0 2.68.24 2.68.24v2.95h-1.51c-1.49 0-1.95.92-1.95 1.87V12h3.32l-.53 3.47h-2.79v8.38A12 12 0 0 0 24 12z'/%3E%3C/svg%3E")}

/* ============================================================
   MOTION PASS 2 — 2026-07 · touches complémentaires + carrousels auto
   transform/opacity uniquement · entrées neutralisées en reduced-motion
   ============================================================ */

/* Entrée douce de la barre de navigation au chargement (toutes pages) */
@keyframes flNavIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nav{animation:flNavIn .5s var(--e-out) both}

/* Coins viseur du hero : apparition en cascade après le contenu (signature caméra) */
@keyframes flCornIn{from{opacity:0;transform:scale(.6)}to{opacity:.8;transform:none}}
.hero .vf span{opacity:0;transform-origin:center;animation:flCornIn .55s var(--e-out) forwards}
.hero .vf .tl{animation-delay:.38s}
.hero .vf .tr{animation-delay:.48s}
.hero .vf .bl{animation-delay:.58s}
.hero .vf .br{animation-delay:.68s}

/* Liens de navigation : soulignement animé (survol + page active) */
.nav-r a.l{position:relative}
.nav-r a.l::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--o);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--e-out)}
.nav-r a.l:hover::after,.nav-r a.l.on::after{transform:scaleX(1)}

/* Coins viseur des cartes : léger écartement au survol (le cadre « s'ouvre ») */
.card .frame .c{transition:opacity .3s var(--e-out),border-color .3s var(--e-out),transform .3s var(--e-out)}
.card:hover .frame .c.ctl{transform:translate(-2px,-2px)}
.card:hover .frame .c.ctr{transform:translate(2px,-2px)}
.card:hover .frame .c.cbl{transform:translate(-2px,2px)}
.card:hover .frame .c.cbr{transform:translate(2px,2px)}

/* Retour tactile à l'appui des boutons */
.btn:active,.nav-cta:active,.hero-play:active,.b-cta a:active{transform:translateY(0) scale(.98)}

/* ── CARROUSELS : défilement automatique continu sur PC ──
   Demandé explicitement : les bandes photos / logos partenaires / galeries
   défilent seules, sans action de l'utilisateur — y compris si l'OS est réglé
   sur « réduire les animations » (mouvement lent et linéaire, non intrusif).
   La pause au survol reste active. ── */
@media(prefers-reduced-motion:reduce){
  .prt-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%)}
  .prt-track{animation:prtScroll var(--prt-dur,30s) linear infinite!important;width:max-content}
  .b-gallery{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
  .b-gallery-track{animation:bgScroll var(--gal-dur,40s) linear infinite!important;width:max-content}
}

/* Neutralisation a11y des NOUVELLES animations d'entrée (les carrousels ci-dessus restent actifs) */
@media(prefers-reduced-motion:reduce){
  .nav{animation:none!important}
  .hero .vf span{animation:none!important;opacity:.8!important;transform:none!important}
}

/* ============================================================
   AJUSTEMENTS 3 (commentaires Jérémy) — 2026-07
   ============================================================ */

/* ── Carrousels : ne plus s'arrêter au survol (défilement vraiment continu) ── */
.prt-marquee:hover .prt-track,
.b-gallery:hover .b-gallery-track,
.b-gallery:focus-within .b-gallery-track{animation-play-state:running}

/* ── Logos partenaires : tuiles uniformes (mur de logos homogène) ──
   Chaque logo est centré et contenu dans une tuile identique sur fond clair,
   ce qui neutralise les fonds hétérogènes et donne l'impression d'un format unique.
   Astuce : idéalement, uploader des PNG détourés ; un logo très clair peut
   nécessiter une variante foncée pour rester lisible sur la tuile claire. ── */
.prt-logo{width:176px;height:92px;padding:16px 20px;background:#f4efe3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.prt-logo img{width:100%;height:100%;object-fit:contain;filter:grayscale(1);opacity:.82;transition:filter .3s var(--e-out),opacity .3s var(--e-out),transform .35s var(--e-out)}
.prt-logo:hover img{filter:grayscale(0);opacity:1;transform:scale(1.06)}
@media(max-width:760px){.prt-logo{width:150px;height:78px;padding:12px 16px}}

/* ── VALEURS : animation au survol de chaque catégorie ── */
.vals .val{position:relative;transition:background .3s var(--e-out)}
.vals .val::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--o);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e-out)}
.vals .val:hover{background:color-mix(in srgb,var(--o) 8%,var(--surface))}
.vals .val:hover::after{transform:scaleX(1)}
.vals .val .val-h{transition:color .25s var(--e-out)}
.vals .val:hover .val-h{color:var(--o)}
.vals .val .val-star{transition:transform .25s var(--e-out)}
.vals .val:hover .val-star{transform:translateX(3px)}

/* ── VALEURS : « Le filtre T.A.F. » (dernière cellule) mis davantage en évidence ── */
.vals .val:last-child:hover{background:color-mix(in srgb,var(--o) 15%,var(--surface))}
.vals .val:last-child .val-t .o{display:inline-block;transition:color .25s var(--e-out),transform .25s var(--e-out)}
.vals .val:last-child:hover .val-t .o{color:var(--o);transform:translateY(-2px) scale(1.18)}

/* ============================================================
   LISIBILITÉ & TITRES SERVICES — 2026-07
   ============================================================ */

/* ── 1. SERVICES : la seconde phrase des titres passe à la ligne ──
   Tous les « .h2 em » sont sur la page Services (« Valoriser chaque /
   prise de parole. », « Donner une vie longue / à l'événement. »…).
   Le retour à la ligne rend les titres responsive et exploite mieux
   la hauteur en 16:9 comme en 9:16. ── */
.h2 em{display:block;margin-top:.06em}
/* Le titre respire un peu plus largement sur cette page */
#conf .h2,#events .h2,#rh .h2,#tv .h2,#creators .h2,#st .h2{max-width:24ch;text-wrap:balance}
@media(max-width:560px){.h2 em{margin-top:.02em}}

/* ── 2. THÈME CLAIR : contrastes renforcés (lecture confortable,
   utile aussi en cas de basse vision / dyslexie).
   --muted et --muted2 d'origine étaient trop pâles sur le fond crème
   pour du petit texte (labels, notes, avertissements). ── */
[data-theme="light"]{
  --muted:#6a6153;   /* ~5:1 sur --bg (avant : #7c715f ≈ 4:1) */
  --muted2:#8a7c67;  /* nettement plus lisible qu'#a99d89 */
}

/* ── 3. FICHE PROJET : en-tête lisible sur toute photo (clair comme sombre) ──
   Le problème : les tags de l'en-tête se placent haut dans le hero, là où
   le voile est presque transparent ; sur une photo claire (thème clair),
   l'orange et le texte se noyaient. On renforce le voile dans la zone du
   contenu et on pose chaque tag sur une puce translucide lisible. ── */
.proj-hero-bg::after{background:linear-gradient(to bottom,
  color-mix(in srgb,var(--bg) 45%,transparent) 0%,
  color-mix(in srgb,var(--bg) 68%,transparent) 48%,
  var(--bg) 92%)}
.proj-meta .ym,.proj-meta .pill,.proj-meta .tag{
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  padding:5px 11px;line-height:1;border-radius:1px;
}
.proj-meta .ym{border:1px solid color-mix(in srgb,var(--o) 45%,transparent)}
/* Le lede du hero gagne un léger halo de fond pour rester net sur photo claire */
.proj-hero .proj-lede{text-wrap:pretty}

/* ── 4. FOCUS CLAVIER : contour visible pour la navigation au clavier ──
   (basse vision, accessibilité) — n'apparaît qu'au focus clavier. ── */
a:focus-visible,button:focus-visible,.btn:focus-visible,
.nav-cta:focus-visible,.offer-cta a:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--o);outline-offset:3px;border-radius:1px;
}

/* ── 5. Micro-lisibilité : notes en italique un peu plus contrastées ── */
.offer-note{color:var(--text);opacity:.86}

/* ===== PAGES .pmain (contact, mentions, confidentialite) : agencement mobile aligne sur les autres pages ===== */
@media(max-width:760px){
.pmain{padding-top:116px;padding-bottom:60px}
body.has-banner .pmain{padding-top:154px}
body.has-disclaimer .pmain{padding-top:149px}
body.has-banner.has-disclaimer .pmain{padding-top:186px}
.ctwrap{gap:36px}
.ct-form{padding:22px 16px}
.ct-form h2{font-size:1.32rem}
}

/* ===== Coins de cadre retires des images (demande Jeremy 2026-07-06) :
   cadres Pour qui, cartes realisations (statiques et dynamiques), portrait A propos.
   Les viseurs de blocs non-image (hero, blocs contact) sont conserves en attente de decision. ===== */
.frame .c{display:none}
.about .pf .vf{display:none}

/* ===== Intro animee du site (fl-intro.js, 2026-07-07) : emplacement du lockup dans le hero.
   .hero-logo conserve pour le repli noscript. ===== */
.hero-logo-slot{width:min(440px,76vw);aspect-ratio:743.6/200.5}
@media(max-width:640px){.hero-logo-slot{width:min(300px,80vw)}}

/* ===== Coins viseur retires de tout le site (demande Jeremy 2026-07-07) :
   hero, blocs contact (services, projets, accueil). Reversible en supprimant cette regle. ===== */
.vf{display:none!important}

/* ===== Noms de partenaires en blanc casse + gras dans la phrase du hero (mise en valeur sobre, 2026-07-08) ===== */
.proof-l .pn-n{color:var(--title);font-weight:600}