/* =============================================================================
   site.css — socle commun aux pages HTML de nightoff.fr
   Utilise par : landing.html, espace-pro.html, espace-pro/etablissement.html

   Contient ce que les trois pages partagent : tokens, base typographique,
   barre de nav, boutons, cartes, neon, apparitions mot par mot, defile de
   logos, pied de page, et les reglages responsive / prefers-reduced-motion.

   Les valeurs sont celles de la landing. Les deux pages pro, qui utilisent
   quelques valeurs plus serrees (rayon de carte, taille des titres...),
   les redefinissent dans leur propre feuille.

   Ce qui est propre a UNE page reste dans son <style>.
   ============================================================================= */

:root{--mg:#B42BB4;--gd:#E8C35A;--bg:#07060B;--line:rgba(255,255,255,.09);--tx:#F4EEF8;--mu:#ADA3B9;--neon:color-mix(in srgb,var(--mg) 58%,#fff);--free:#7BE3B5;--resa:#F2B84B;--occ:#6FA8FF;color-scheme:dark}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--tx);font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gd);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:48px;box-sizing:border-box;position:relative}
.disp{font-family:'Unbounded',system-ui,sans-serif}
.it{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icf{fill:currentColor}
h1,h2,h3{text-wrap:balance}
/* nav */
.nav{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 32px));box-sizing:border-box;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 18px;border-radius:999px;background:rgba(12,9,18,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.navlinks{display:flex;gap:28px;font-size:15px;color:var(--mu)}
.navlinks a{text-decoration:none;transition:color .2s}
.navlinks a:hover{color:var(--tx)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:999px;font:600 15px 'DM Sans',sans-serif;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s,color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-gold{border-color:var(--gd);color:var(--gd);background:transparent}
.btn-gold:hover{color:#0B0911;background:var(--gd)}
.btn-mg{background:var(--mg);color:#fff;box-shadow:0 10px 40px color-mix(in srgb,var(--mg) 45%,transparent)}
.btn-mg:hover{box-shadow:0 14px 60px color-mix(in srgb,var(--mg) 70%,transparent)}
.btn-ghost{border-color:rgba(255,255,255,.2);color:var(--tx);background:rgba(255,255,255,.04)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
/* hero */
.hero{position:relative;padding-block:150px 70px;overflow:hidden}
.beams{position:absolute;inset:0;pointer-events:none;filter:blur(38px)}
.beam{position:absolute;top:-160px;width:560px;height:1300px;transform-origin:50% 0;clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);animation:sweep 10s ease-in-out infinite alternate}
.b1{left:8%;background:linear-gradient(180deg,color-mix(in srgb,var(--mg) 75%,transparent),transparent 72%)}
.b2{right:6%;background:linear-gradient(180deg,color-mix(in srgb,var(--gd) 45%,transparent),transparent 70%);animation-duration:13s;animation-delay:-4s}
@keyframes sweep{0%{transform:rotate(-22deg)}100%{transform:rotate(22deg)}}
.floor{position:absolute;left:0;right:0;bottom:0;height:320px;background:radial-gradient(60% 100% at 50% 100%,color-mix(in srgb,var(--mg) 30%,transparent),transparent 70%);pointer-events:none}
.eyebrow{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:13px;color:var(--mu)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,77,109,.7)}100%{box-shadow:0 0 0 12px rgba(255,77,109,0)}}
.h1{font-family:'Unbounded',sans-serif;font-weight:800;font-size:clamp(48px,7.2vw,112px);line-height:.92;letter-spacing:-.045em;margin:26px 0 0}
.h1 .solid{display:block;animation:inrise 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes inrise{from{opacity:0;transform:translateY(40px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.nl{display:inline-block;color:#FFE6FD;text-shadow:0 0 3px #fff,0 0 10px var(--mg),0 0 22px var(--mg),0 0 48px var(--mg),0 0 110px color-mix(in srgb,var(--mg) 70%,transparent)}
.nl.off{color:#4A2A4C;text-shadow:0 0 1px rgba(0,0,0,.4)}
.nl.dim{color:#C9A2C8;text-shadow:0 0 6px color-mix(in srgb,var(--mg) 60%,transparent)}
.nl.sp{width:.28em}
.nw{display:inline-block;white-space:nowrap}
.lead{font-size:19px;line-height:1.6;color:var(--mu);margin:0;max-width:34em}
.mq-track{display:flex;align-items:center;width:max-content;animation:mq 40s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.kicker{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gd);margin-bottom:14px}
.kicker::before{content:'';width:28px;height:1px;background:var(--gd)}
.h2{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(30px,4.4vw,62px);line-height:1.04;letter-spacing:-.035em;margin:0}
.h2 .it{font-size:1.14em;color:var(--neon)}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;align-items:center}
.card{background:linear-gradient(180deg,#15111F,#0D0A14);border:1px solid var(--line);border-radius:30px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.chip{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--tx);font:500 15px 'DM Sans',sans-serif;cursor:pointer;transition:all .2s ease;white-space:nowrap}
.chip:hover{border-color:rgba(255,255,255,.4)}
.chip.on{background:var(--mg);border-color:var(--mg);color:#fff;box-shadow:0 0 28px color-mix(in srgb,var(--mg) 55%,transparent)}
.ring{position:absolute;width:46px;height:46px;border-radius:50%;border:2px solid var(--mg);top:0;left:50%;margin-left:-23px;animation:ring 2.2s ease-out infinite;pointer-events:none}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.small{font-size:13px;color:var(--mu)}
@keyframes dash{to{background-position:32px 0}}
.shown .w{opacity:1;filter:none;transform:none}
.av{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.foot a{text-decoration:none;color:#E6D3DD}
.foot a:hover{text-decoration:underline;color:#fff}
.soc{width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22)}
main{position:relative;z-index:1;overflow-x:clip}
@supports (animation-timeline: view()){
.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
.par{animation:drift linear both;animation-timeline:view();animation-range:cover}
.tl{animation:tilt linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
}
.js-io .rv:not(.in){opacity:.15;transform:translateY(50px)}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
}
@media (max-width:980px){
.navlinks{display:none}
.rail{display:none}
}
@media (max-width:900px){
.wrap{padding-inline:20px}
.split{grid-template-columns:minmax(0,1fr);gap:48px}
.hero{padding-block:120px 40px}
.toast{display:none}
.feat{grid-template-columns:minmax(0,1fr)}
.logos{grid-template-columns:repeat(2,minmax(0,1fr))}
.chap{padding-block:100px 70px}
.pro{padding-block:100px 90px}
.mq-item{font-size:30px}
.flow{flex-direction:column}
.arrow-flow{display:none}
.map{height:460px}
.dawn{padding-top:130px}
.foot{flex-direction:column;align-items:flex-start;margin-top:90px}
}
@media (max-width:560px){
.nav .btn-gold{display:none}
.clock{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:10px 14px 10px 10px;gap:10px}
.clock-t{font-size:20px}
.moon{width:28px;height:28px}
.lead{font-size:17px}
.store{height:56px;padding:0 18px 0 16px}
.resa{padding:22px}
.logo-tile{height:88px;font-size:13px}
.tile b{font-size:22px}
}

/* --- variante doree du neon (pages pro) --- */
.neon.gold .nl{color:#FFF4D6;text-shadow:0 0 3px #fff,0 0 10px var(--gd),0 0 22px var(--gd),0 0 48px color-mix(in srgb,var(--gd) 80%,transparent),0 0 110px color-mix(in srgb,var(--gd) 55%,transparent)}
.neon.gold .nl.off{color:#4A3F24;text-shadow:none}
.neon.gold .nl.dim{color:#CDB98A;text-shadow:0 0 6px color-mix(in srgb,var(--gd) 60%,transparent)}