/* Pages Leviers — chrome partagé. L'accent du levier se pilote via --lev / --levfg (Recrutement = corail). */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--ink);color:var(--cream);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;--lev:var(--acc);--levfg:var(--accfg)}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
img{display:block}
::selection{background:var(--lev);color:var(--levfg)}
.disp{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.004em}
.ey{font-family:var(--sans);font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600}
#hero .ey{display:inline-flex;align-items:center;gap:11px;opacity:1;margin-bottom:26px;padding:10px 20px 10px 18px;border:1px solid currentColor;border-radius:999px;font-size:14px}
#hero .ey::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pbar{position:fixed;top:0;left:0;height:3px;width:calc(var(--pg,0)*100%);background:var(--lev);z-index:90}
.grain{position:fixed;inset:0;z-index:85;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cur{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--cream);mix-blend-mode:difference;pointer-events:none;z-index:95;transform:translate(-50%,-50%);transition:width .25s,height .25s}
.cur.big{width:52px;height:52px}
@media(hover:none){.cur{display:none}}
.brand{position:fixed;top:22px;left:var(--mx);z-index:80;display:flex;align-items:center;gap:10px;mix-blend-mode:difference}
.brand img{height:22px;filter:brightness(0) invert(1)}
.brand b{font-family:var(--disp);font-weight:400;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.topnav{position:fixed;top:24px;right:var(--mx);z-index:80;display:flex;align-items:center;gap:24px;mix-blend-mode:difference;color:#fff}
.topnav a{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.8;transition:opacity .3s}
.topnav a:hover{opacity:1}
.topnav .rdv{border:1.5px solid #fff;border-radius:999px;padding:10px 20px;opacity:1}
.stage{position:relative}
.pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:0 var(--mx)}
.f-lev{background:var(--lev);color:var(--levfg)}
.f-ink{background:var(--ink);color:var(--cream)}
.f-cream{background:var(--cream);color:var(--ink)}
.f-cobalt{background:var(--cobalt);color:var(--cream)}
.f-navy{background:var(--navy);color:var(--cream)}
.mask{display:block;overflow:hidden;padding-top:.03em}
.mask .l{display:inline-block;transform:translateY(115%);animation:up 1.05s var(--e) forwards}
.mask:nth-child(2) .l{animation-delay:.18s}.mask:nth-child(3) .l{animation-delay:.32s}.mask:nth-child(4) .l{animation-delay:.44s}
@keyframes up{to{transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.cue{position:absolute;left:var(--mx);bottom:46px;display:flex;align-items:center;gap:13px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.75;z-index:4}
.cue .bar{width:38px;height:1px;background:currentColor;position:relative;overflow:hidden;opacity:.7}
.cue .bar::after{content:"";position:absolute;inset:0;background:currentColor;transform:translateX(-100%);animation:sweep 2.1s var(--e) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@media(max-height:660px){.cue{display:none}}
.reveal .rv2{opacity:0;transform:translateY(54px);transition:opacity .95s var(--e),transform .95s var(--e)}
.reveal.in .rv2{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.15s}.d3{transition-delay:.24s}.d4{transition-delay:.34s}.d5{transition-delay:.44s}
.par{will-change:transform}
.lab{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.lab .dot{width:9px;height:9px;border-radius:50%;background:var(--lev);flex:none}
.h-big{font-family:var(--disp);text-transform:uppercase;font-size:clamp(46px,8vw,144px);line-height:1}
.sec{position:relative;overflow:hidden;padding:140px var(--mx) 124px}
.marq{display:flex;align-items:center;overflow:hidden;height:76px}
.marq .track{display:flex;white-space:nowrap;font-family:var(--disp);font-size:34px;text-transform:uppercase;will-change:transform}
.marq .track span{display:flex;align-items:center;gap:24px;padding:0 24px}
.marq .track span::after{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.8}
.btn{display:inline-flex;align-items:center;gap:14px;border:1px solid currentColor;border-radius:999px;padding:15px 28px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;transition:.35s var(--e)}
.btn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn.fill{background:var(--lev);color:var(--levfg);border-color:var(--lev)}
.btn.fill:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid currentColor;border-radius:999px;padding:11px 20px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;opacity:.9}
.kick{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.kick .ix{font-family:var(--disp);font-size:19px;color:var(--lev)}
.hl{position:relative;white-space:nowrap}
.hl b{position:relative;z-index:2;font-weight:400;padding:0 .06em;color:var(--levfg)}
.hl::before{content:"";position:absolute;inset:0 -.02em;background:var(--lev);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e) .35s}
.reveal.in .hl::before{transform:scaleX(1)}
.rows{border-top:1px solid var(--line,rgba(233,253,252,.16))}
.rowi{display:grid;grid-template-columns:110px 1fr .9fr;gap:34px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line,rgba(233,253,252,.16))}
.rowi .ix{font-family:var(--disp);font-size:20px;color:var(--lev)}
.rowi h4{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(28px,3.6vw,56px);line-height:.92}
.rowi p{font-size:15.5px;opacity:.78;max-width:46ch}
.stat b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(44px,5.4vw,92px);line-height:.85;text-transform:uppercase}
.stat b .u{font-size:.5em;vertical-align:.16em;color:var(--lev)}
.stat p{margin-top:10px;font-size:14.5px;opacity:.75;max-width:22ch}
/* FAQ — accordéon partagé par toutes les pages qui en ont un.
   L'ouverture/fermeture est animée par levier.js : un <details> natif saute d'un
   coup, et interpolate-size/::details-content ne sont pas encore supportés
   partout (Safari, Firefox). Sans JS, l'accordéon reste utilisable, sans
   transition — c'est le seul écart. */
.faq .faqs{margin-top:52px;border-top:1px solid var(--line)}
.faqi{border-bottom:1px solid var(--line)}
.faqi summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:20px;padding:22px 0}
.faqi summary::-webkit-details-marker{display:none}
.faqi .qn{font-family:var(--disp);font-size:clamp(14px,1.1vw,16px);color:var(--lev)}
.faqi .qt{font-weight:600;font-size:clamp(16.5px,1.45vw,21px);line-height:1.34;text-wrap:balance;transition:color .35s var(--e)}
.faqi:hover .qt,.faqi[open]:not(.closing) .qt{color:var(--lev)}
.faqi .qi{position:relative;width:clamp(32px,2.5vw,38px);height:clamp(32px,2.5vw,38px);border-radius:50%;border:1.5px solid color-mix(in srgb,currentColor 26%,transparent);flex:none;transition:border-color .35s var(--e),background-color .35s var(--e),transform .45s var(--e)}
.faqi .qi::before,.faqi .qi::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .45s var(--e),background-color .35s var(--e)}
.faqi .qi::after{transform:translate(-50%,-50%) rotate(90deg)}
.faqi:hover .qi{border-color:var(--lev)}
.faqi[open]:not(.closing) .qi{background:var(--lev);border-color:var(--lev);transform:rotate(180deg)}
.faqi[open]:not(.closing) .qi::before,.faqi[open]:not(.closing) .qi::after{background:var(--levfg)}
.faqi[open]:not(.closing) .qi::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}
/* Filet vertical dans la gouttière : rattache la réponse à sa question. */
.faqi .qa{--qpb:26px;position:relative;padding:0 0 var(--qpb) 76px}
.faqi .qa::before{content:"";position:absolute;left:56px;top:4px;bottom:calc(var(--qpb) + 3px);width:2px;border-radius:2px;background:var(--lev);opacity:.45}
.faqi .qa p{font-size:clamp(15px,1.15vw,17px);line-height:1.62;opacity:.78;max-width:66ch}
.faqi .qa p a{color:var(--lev);border-bottom:1px solid color-mix(in srgb,var(--lev) 40%,transparent)}
.cta{min-height:92vh;min-height:92dvh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--mx) 90px;position:relative;overflow:hidden}
.cta>*{position:relative;z-index:2}
.cta .ey{color:rgba(233,253,252,.7);margin-bottom:24px}
.cta h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(46px,8vw,144px);line-height:.94}
.cta .sub{margin-top:26px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.3vw,30px);color:rgba(233,253,252,.85);max-width:36ch}
.tel{margin-top:40px;display:inline-flex;align-items:center;gap:22px;font-family:var(--disp);font-size:clamp(26px,4.6vw,62px);text-transform:uppercase}
.tel .ring{width:clamp(52px,6vw,84px);height:clamp(52px,6vw,84px);border-radius:50%;background:var(--lev);color:var(--levfg);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .35s var(--e)}
.tel:hover .ring{transform:scale(1.09) rotate(-8deg)}
.tel .ring svg{width:42%;height:42%}
.cta .meta{margin-top:52px;display:flex;gap:40px;flex-wrap:wrap;font-size:14px;opacity:.85}
.megamark{position:absolute;right:-16vw;bottom:-34vh;height:150vh;z-index:0;pointer-events:none}
.megamark img{height:100%;opacity:.15;transform-origin:50% 50%;animation:spin 100s linear infinite}
.legal{background:var(--ink);color:rgba(233,253,252,.5);padding:30px var(--mx);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;letter-spacing:.03em;border-top:2px solid var(--lev)}
.dirs{position:fixed;right:16px;bottom:16px;z-index:92;display:flex;align-items:center;gap:4px;background:rgba(42,53,66,.8);backdrop-filter:blur(8px);border:1px solid rgba(233,253,252,.18);border-radius:999px;padding:7px 9px 7px 16px;color:var(--cream)}
.dirs .t{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:rgba(233,253,252,.55);margin-right:8px}
.dirs a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;opacity:.6;transition:.25s}
.dirs a:hover{opacity:1;background:rgba(233,253,252,.14)}
.dirs a.on{background:var(--lev);color:var(--levfg);opacity:1}

/* fenêtres basses (paysage mobile, petites fenêtres) — l'id #hero/#fun l'emporte sur les styles de page */
@media(max-height:620px){
#hero .hero-in{padding-bottom:64px}
#hero .hero-in h1{font-size:min(9vw,20vh)}
#hero .hero-in .sub{margin-top:16px;font-size:clamp(15px,2.8vh,22px)}
#fun .fun{grid-template-columns:.95fr 1.05fr;gap:36px;align-items:center}
#fun .fcap{padding:8px 0}
#fun .fcap .ey{margin-bottom:3px;font-size:10px}
#fun .fcap p{font-size:13px;max-width:44ch}
#fun .fnum{font-size:clamp(36px,min(22vh,5.4vw),110px)}
#fun .flab{margin-top:8px;font-size:10.5px}
#fun .fdots{margin-top:14px;gap:5px;max-width:400px}
#fun .fdots i{width:5px;height:5px}
#fun .fbar{margin-top:18px;max-width:340px}
.cta h2{font-size:min(8vw,18vh)}
.cta .sub{font-size:clamp(15px,2.8vh,22px)}
}
@media(max-width:760px){
.topnav .lk{display:none}
section#hero{height:150vh}
section#fun{height:420vh}
.topnav{right:var(--mx)}
.h-big{font-size:clamp(38px,11vw,80px)}
.sec{padding:100px var(--mx) 88px}
.marq{height:58px}.marq .track{font-size:23px}
.rowi{grid-template-columns:52px minmax(0,1fr);gap:14px;padding:26px 0}
.sec.exp .rowi{grid-template-columns:minmax(0,1fr)}
.rowi p{grid-column:2}
.faq .faqs{margin-top:40px}
.faqi summary{grid-template-columns:40px 1fr auto;gap:14px;padding:18px 0}
.faqi .qt{font-size:16.5px}
.faqi .qa{--qpb:22px;padding-left:54px}
.faqi .qa::before{left:40px}
.cta h2{font-size:clamp(38px,11vw,80px)}
.tel{font-size:clamp(22px,6.6vw,40px);gap:14px}.tel .ring{width:50px;height:50px}
.cta .meta{gap:18px 26px}
.legal{flex-direction:column;gap:6px}
.dirs{right:10px;bottom:10px;padding:6px 8px 6px 12px}.dirs a{width:27px;height:27px}
}
@media(max-width:400px){
.chips{gap:8px}
.chip{padding:9px 14px;font-size:11.5px;letter-spacing:.05em}
}