/* =====================================================================
   POPS — feuille commune (index.html, lab.html, cgu.html, confidentialite.html)
   Tokens, base, boutons, pilules, nav, sélecteur de langue, logo, thème nuit.
   Le CSS propre à chaque page reste dans la page. Source de vérité : index.html (v2).
   ===================================================================== */

/* ---------- Tokens ---------- */
@font-face{font-family:"Edo SZ";src:url("edosz.woff") format("woff");font-display:swap;font-weight:100 900}
:root{
  --indigo:#17103F; --indigo-2:#231A5C; --yellow:#E1FF2A; --lavande:#CFC9FF; --violet:#7C4DFF; --paper:#FFFFFF; --paper-2:#F3F1F8;
  --ink:#17103F; --ink-soft:rgba(23,16,63,.68); --on-indigo-soft:rgba(255,255,255,.72);
  --bw:3px; --shadow:6px 6px 0 var(--indigo); --shadow-y:6px 6px 0 var(--yellow);
  --fd:"Edo SZ","Poppins",sans-serif; --fb:"Poppins",system-ui,sans-serif;
  --s1:5px;--s2:8px;--s3:13px;--s4:21px;--s5:34px;--s6:55px;--s7:89px;--s8:144px;
  --maxw:1160px; --nav-h:64px;
  --fs-xs:.8125rem;--fs-s:.9375rem;--fs-m:1.0625rem;--fs-l:1.3125rem;--fs-xl:clamp(1.75rem,2.6vw,2.375rem);
  --fs-h1:clamp(2.5rem,7vw,6rem);--fs-h2:clamp(2.25rem,5.2vw,4.25rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + var(--s3))}
[id]{scroll-margin-top:calc(var(--nav-h) + var(--s3))}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:var(--bw) solid var(--yellow);outline-offset:3px}
.on-indigo :focus-visible,.indigo :focus-visible{outline-color:var(--yellow)}
.wrap{width:min(var(--maxw),100% - 2*var(--s4));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ph{background:var(--yellow);padding:0 .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------- Buttons & pills ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s2);border:var(--bw) solid var(--indigo);border-radius:999px;padding:.8em 1.5em;font-weight:700;text-decoration:none;background:var(--paper);color:var(--indigo);box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--indigo)}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--indigo)}
.btn-y{background:var(--yellow)}
.btn-i{background:var(--indigo);color:var(--paper)}
.indigo .btn{border-color:var(--yellow);box-shadow:var(--shadow-y)}
.indigo .btn:hover{box-shadow:8px 8px 0 var(--yellow)}
.indigo .btn:active{box-shadow:2px 2px 0 var(--yellow)}
.indigo .btn-i{background:var(--indigo);color:var(--paper)}
.pill{display:inline-block;color:var(--indigo);border:var(--bw) solid var(--indigo);border-radius:999px;padding:.35em .9em;font-weight:700;font-size:var(--fs-s);background:var(--paper);line-height:1.2}
.pill-y{background:var(--yellow)}
.pill-i{background:var(--indigo);color:var(--paper)}
.pill-l{background:var(--lavande);color:var(--indigo)}
.hero .pill{border-color:var(--paper)}
.hero .pill-i{border-color:var(--yellow)}
.hero .pill-l,.hero .pill-y{border-color:var(--paper)}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:var(--s3) 0 auto;z-index:50;display:flex;justify-content:center;pointer-events:none}
.nav-pill{pointer-events:auto;width:min(var(--maxw),100% - 2*var(--s4));display:flex;align-items:center;justify-content:space-between;gap:var(--s4);background:var(--paper);border:var(--bw) solid var(--indigo);border-radius:999px;padding:var(--s2) calc(var(--s2) + 6px) var(--s2) var(--s5);box-shadow:var(--shadow);height:var(--nav-h)}
.nav-right{display:flex;align-items:center;gap:var(--s3)}
.brand{text-decoration:none;line-height:1;display:inline-flex;align-items:center;gap:.6em;font-size:1.5rem}
.nav-links{display:flex;gap:var(--s4);list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-weight:600;font-size:var(--fs-s)}
.nav-links a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px;text-decoration-color:var(--yellow)}
.lang{display:flex;border:var(--bw) solid var(--indigo);border-radius:999px;overflow:hidden}
.lang button{border:0;background:var(--paper);padding:.35em .75em;font-weight:700;font-size:var(--fs-xs)}
.lang button[aria-pressed=true]{background:var(--indigo);color:var(--paper)}
.nav .btn{padding:.6em 1.2em;font-size:var(--fs-s);box-shadow:3px 3px 0 var(--indigo)}
.nav .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--indigo)}
.nav .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--indigo)}
.nav .short{display:none}

/* ---------- Responsive (nav) ---------- */
@media (max-width:900px){
  .nav-links{display:none}
  .nav-pill{gap:var(--s3);padding-left:var(--s4)}
}
@media (max-width:400px){
  .nav .btn{padding:.6em .9em}
  .nav .long{display:none}.nav .short{display:inline}
  .nav-pill{gap:var(--s2);padding-left:var(--s3)}
  .nav-right{gap:var(--s2)}
  .lang button{padding:.35em .55em}
}

/* =====================================================================
   THÈME NUIT — alignement sur l'interface de l'app POPS FLOW
   Fond indigo dominant, surfaces translucides, coins arrondis, dégradé
   cyan → vert → jaune. Edo SZ + Poppins + jaune fluo + bandeau conservés.
   ===================================================================== */
:root{
  --bg:#17103F; --bg-2:#1D1650; --bg-3:#120C33;
  --glass:rgba(255,255,255,.06); --glass-2:rgba(255,255,255,.1); --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.26);
  --txt:#FFFFFF; --txt-2:rgba(255,255,255,.72); --txt-3:rgba(255,255,255,.5);
  --cyan:#3DE8FF; --green:#7CFF6B;
  --r:20px; --r-s:12px; --r-xs:8px;
  --grad:linear-gradient(90deg,var(--cyan),var(--green) 55%,var(--yellow));
}

:focus-visible{outline-color:var(--yellow)}
.ph{color:var(--indigo)}

/* Boutons & pilules */
.btn,.indigo .btn,.pillar.lavande .btn,.nav .btn{border:1px solid var(--line-2);background:var(--glass-2);color:var(--txt);box-shadow:none;border-radius:999px;font-weight:700}
.btn:hover,.indigo .btn:hover,.nav .btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.35);background:rgba(255,255,255,.16)}
.btn:active,.indigo .btn:active,.nav .btn:active{transform:none;box-shadow:none}
.btn-y,.indigo .btn-y{background:var(--yellow);color:var(--indigo);border-color:var(--yellow)}
.btn-y:hover,.indigo .btn-y:hover{background:#EAFF5C;box-shadow:0 8px 28px rgba(225,255,42,.35)}
.btn-i,.indigo .btn-i{background:var(--glass);color:var(--txt);border-color:var(--line-2)}
.pill,.hero .pill,.hero .pill-y,.hero .pill-l{border:1px solid var(--line-2);background:var(--glass-2);color:var(--txt);border-radius:999px}
.pill-y,.hero .pill-y{background:var(--yellow);color:var(--indigo);border-color:var(--yellow)}
.pill-i{background:var(--glass);color:var(--txt);border-color:var(--line)}
.pill-l,.hero .pill-l{background:rgba(61,232,255,.16);color:var(--cyan);border-color:rgba(61,232,255,.5)}

/* Nav */
.nav-pill{background:rgba(23,16,63,.72);border:1px solid var(--line-2);box-shadow:0 10px 40px rgba(0,0,0,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--txt)}
.nav-links a{color:var(--txt)}
.nav-links a:hover{text-decoration-color:var(--yellow)}
/* le CTA de la nav garde sa couleur : sans cette règle, `.nav .btn` (thème nuit) écrase `.btn-y` */
.nav .btn-y{background:var(--yellow);color:var(--indigo);border-color:var(--yellow)}
.nav .btn-y:hover{background:#EAFF5C;box-shadow:0 8px 28px rgba(225,255,42,.35)}
.lang{border:1px solid var(--line-2);background:var(--glass)}
.lang button{background:transparent;color:var(--txt)}
.lang button[aria-pressed=true]{background:var(--yellow);color:var(--indigo)}
/* Logo POPS FLOW (plaque seule dans la nav, plaque + tagline lavande dans le footer) */
.brand-logo{height:40px;width:auto;display:block;flex:none}
.nav-pill .brand{flex:none}
.foot-logo img{height:80px;width:auto;display:block}
.foot-logo{margin-bottom:var(--s3)}
@media (max-width:640px){.brand-logo{height:32px}.foot-logo img{height:68px}}