/* ============================================================
   Nav partagée — pleine largeur : marque à GAUCHE, liens (TEXTE NU) + toggle + CTA à DROITE.
   Animation clip au survol. Texte clair au-dessus d'un hero sombre, couleur du thème sinon.
   Branche : <link href="nav.css"> + <nav class="sitenav" id="nav"> + <script src="nav.js" defer>
   ============================================================ */
:root{
  --nv-ink:#0B0B0B; --nv-ink2:#5A5653; --nv-surface:#FFFFFF;
  --nv-line:rgba(11,11,11,.13); --nv-o:#FF4D00;
  --nv-disp:'Space Grotesk',system-ui,sans-serif;
}
[data-theme="dark"]{
  --nv-ink:#F2F1EE; --nv-ink2:#A8A4A0; --nv-surface:#1A1A1D;
  --nv-line:rgba(242,241,238,.14);
}

nav.sitenav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;justify-content:center;padding:16px 18px;pointer-events:none}
nav.sitenav .bar{pointer-events:auto;width:100%;max-width:none;display:flex;align-items:center;gap:22px;padding:6px 30px;min-height:0}

/* marque — collée à gauche */
nav.sitenav .brand{display:flex;align-items:center;gap:9px;font-family:var(--nv-disp);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--nv-ink);text-decoration:none;position:static;height:auto;width:auto;max-width:none;min-height:0;padding:0;margin:0;grid-template-columns:none;transition:color .4s}
nav.sitenav .brand::after,nav.sitenav .brand::before{content:none;display:none}
nav.sitenav .brand .dot{width:7px;height:7px;border-radius:50%;background:var(--nv-o);margin-bottom:-9px;box-shadow:0 0 14px rgba(255,77,0,.85)}
/* logo mark (SVG) — hérite de la couleur du texte de nav via currentColor */
nav.sitenav .brand .brand-mark{height:24px;width:auto;display:block;fill:currentColor;transition:fill .4s}
nav.sitenav .brand:hover .brand-mark{fill:var(--nv-o)}

/* liens — TEXTE NU (pas de pill conteneur), poussés à droite, animation clip au survol */
nav.sitenav .navlinks{display:flex;align-items:center;gap:2px;margin-left:auto;border:1px solid transparent;border-radius:32px;padding:0 4px;transition:background .35s,border-color .35s,box-shadow .35s,padding .35s}
/* sur le hero : texte nu (pas de contour). Une fois scrollé (.solid) : la pill revient. */
nav.sitenav.solid .navlinks{background:color-mix(in srgb,var(--nv-surface) 90%,transparent);border-color:var(--nv-line);padding:4px 6px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);-webkit-backdrop-filter:saturate(160%) blur(9px);backdrop-filter:saturate(160%) blur(9px)}
nav.sitenav .navlinks .lk{padding:9px 14px;border-radius:30px;font-family:var(--nv-disp);font-weight:500;font-size:14.5px;color:var(--nv-ink2);text-decoration:none;transition:color .3s,background .3s}
nav.sitenav .navlinks .lk .clip{display:block;overflow:hidden;height:20px}
nav.sitenav .navlinks .lk .clip span{display:block;height:20px;line-height:20px;transition:transform .45s cubic-bezier(.16,1,.3,1)}
nav.sitenav .navlinks .lk:hover .clip span{transform:translateY(-20px)}
nav.sitenav .navlinks .lk:hover{color:var(--nv-ink)}
nav.sitenav .navlinks .lk[aria-current="page"]{color:var(--nv-ink);background:color-mix(in srgb,var(--nv-ink) 9%,transparent)}

/* groupe droite : toggle + CTA */
nav.sitenav .navright{display:flex;align-items:center;gap:8px}
nav.sitenav .themebtn{pointer-events:auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--nv-line);background:transparent;color:var(--nv-ink);cursor:pointer;transition:.25s}
nav.sitenav .themebtn:hover{background:color-mix(in srgb,var(--nv-ink) 8%,transparent);transform:translateY(-1px)}
nav.sitenav .themebtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav.sitenav .themebtn .i-sun{display:none}
html[data-theme="light"] nav.sitenav .themebtn .i-sun{display:block}
html[data-theme="light"] nav.sitenav .themebtn .i-moon{display:none}

nav.sitenav .navcta{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--nv-disp);font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:30px;border:1.5px solid var(--nv-ink);color:var(--nv-ink);text-decoration:none;transition:.25s}
nav.sitenav .navcta:hover{background:var(--nv-o);border-color:var(--nv-o);color:#fff}
nav.sitenav .navcta em{font-style:normal;transition:transform .3s}
nav.sitenav .navcta:hover em{transform:translate(3px,-3px)}

/* ===== ÉTAT « au-dessus d'un hero SOMBRE » → texte CLAIR =====
   S'applique quand : dark mode (tous les heros sont sombres) & pas encore scrollé,
   OU page à hero toujours sombre (body.nav-dark-hero) & pas scrollé,
   OU page 100% sombre (body.nav-always-dark) en permanence.
   Après scroll (.solid) on retombe sur la couleur du thème → lisible sur le contenu. */
:is([data-theme="dark"] nav.sitenav:not(.solid), body.nav-dark-hero nav.sitenav:not(.solid), body.nav-always-dark nav.sitenav) .brand{color:#fff}
:is([data-theme="dark"] nav.sitenav:not(.solid), body.nav-dark-hero nav.sitenav:not(.solid), body.nav-always-dark nav.sitenav) .navlinks .lk{color:rgba(255,255,255,.78)}
:is([data-theme="dark"] nav.sitenav:not(.solid), body.nav-dark-hero nav.sitenav:not(.solid), body.nav-always-dark nav.sitenav) .navlinks .lk:hover{color:#fff}
:is([data-theme="dark"] nav.sitenav:not(.solid), body.nav-dark-hero nav.sitenav:not(.solid), body.nav-always-dark nav.sitenav) .navlinks .lk[aria-current="page"]{color:#fff;background:rgba(255,255,255,.15)}
:is([data-theme="dark"] nav.sitenav:not(.solid), body.nav-dark-hero nav.sitenav:not(.solid), body.nav-always-dark nav.sitenav) .themebtn{color:#fff;border-color:rgba(255,255,255,.5)}
:is([data-theme="dark"] nav.sitenav:not(.solid), body.nav-dark-hero nav.sitenav:not(.solid), body.nav-always-dark nav.sitenav) .themebtn:hover{background:rgba(255,255,255,.15)}
:is([data-theme="dark"] nav.sitenav:not(.solid), body.nav-dark-hero nav.sitenav:not(.solid), body.nav-always-dark nav.sitenav) .navcta{color:#fff;border-color:rgba(255,255,255,.6)}
:is([data-theme="dark"] nav.sitenav:not(.solid), body.nav-dark-hero nav.sitenav:not(.solid), body.nav-always-dark nav.sitenav) .navcta:hover{background:#fff;color:var(--nv-ink);border-color:#fff}

/* burger mobile */
nav.sitenav .navburger{pointer-events:auto;display:none;width:42px;height:40px;border:1px solid var(--nv-line);border-radius:11px;background:transparent;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px}
nav.sitenav .navburger span{display:block;width:18px;height:2px;background:var(--nv-ink);border-radius:2px;transition:transform .3s,opacity .2s}
:is([data-theme="dark"] nav.sitenav:not(.solid), body.nav-dark-hero nav.sitenav:not(.solid), body.nav-always-dark nav.sitenav) .navburger{border-color:rgba(255,255,255,.5)}
:is([data-theme="dark"] nav.sitenav:not(.solid), body.nav-dark-hero nav.sitenav:not(.solid), body.nav-always-dark nav.sitenav) .navburger span{background:#fff}
body.mobnav-open nav.sitenav .navburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.mobnav-open nav.sitenav .navburger span:nth-child(2){opacity:0}
body.mobnav-open nav.sitenav .navburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:860px){
  nav.sitenav .navlinks,nav.sitenav .navright{display:none}
  nav.sitenav .navburger{display:flex;margin-left:auto}
  /* mobile : sur mobile les liens (qui portaient la pill .solid) sont cachés,
     donc on donne le fond lisible à la BARRE elle-même une fois scrollé */
  nav.sitenav .bar{padding:8px 18px;border:1px solid transparent;border-radius:16px;
    transition:background .35s,border-color .35s,box-shadow .35s,backdrop-filter .35s}
  nav.sitenav.solid .bar{background:color-mix(in srgb,var(--nv-surface) 92%,transparent);
    border-color:var(--nv-line);box-shadow:0 12px 30px rgba(0,0,0,.16);
    -webkit-backdrop-filter:saturate(160%) blur(11px);backdrop-filter:saturate(160%) blur(11px)}
}

/* Panneau mobile (hors <nav>) */
.mobnav{position:fixed;top:0;left:0;right:0;z-index:89;pointer-events:none;display:flex;flex-direction:column;gap:2px;
  padding:80px 16px 18px;background:var(--nv-surface);border-bottom:1px solid var(--nv-line);
  box-shadow:0 26px 44px rgba(0,0,0,.3);transform:translateY(-118%);transition:transform .42s cubic-bezier(.16,1,.3,1)}
body.mobnav-open .mobnav{transform:none;pointer-events:auto}
.mobnav a{font-family:var(--nv-disp);font-weight:600;font-size:18px;color:var(--nv-ink);text-decoration:none;padding:14px 12px;border-radius:12px}
.mobnav a:hover{background:color-mix(in srgb,var(--nv-ink) 6%,transparent)}
.mobnav .mobnav-cta{margin-top:8px;background:var(--nv-o);color:#0B0B0B;display:flex;justify-content:center;align-items:center;gap:8px}
.mobnav .mobnav-cta em{font-style:normal}