/* Barre de navigation de PromptHQ Learn, partagée par /learn/, /prompts/ et /landing/.
   Le balisage est écrit en dur dans chaque page (même bloc partout) ; ce fichier porte tout son style.
   Il s'appuie sur les tokens de la page (--ink, --line, --grad...), avec des valeurs de repli.
   Le sélecteur Learn / Studio sous la marque vit à part, dans site-switch.css. */

header{position:fixed;top:18px;left:0;right:0;z-index:1000;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.nav{position:relative;pointer-events:auto;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--line,rgba(23,21,26,.08));border-radius:100px;padding:8px 8px 8px 18px;box-shadow:0 8px 30px -12px rgba(23,21,26,.16),0 2px 6px -2px rgba(23,21,26,.06)}
.nav-logo{height:20px;width:auto;margin-right:6px}
.nav-brand{display:inline-flex;align-items:center;gap:8px}
.nav-learn{font:600 11px/1 'StackSansText',ui-monospace,Menlo,monospace;letter-spacing:.3em;color:#FF4A14;transform:translateY(1px)}
.nav-learn.studio{color:var(--scarlet,#F82F02)}
.ss-opt{align-items:center;gap:8px;color:var(--ink,#17151A)}

/* ---- liens ---- */
.nav-links{display:flex;gap:4px;align-items:center;margin-left:8px}
.nav-links > a,.nav-res-btn{display:inline-flex;align-items:center;gap:6px;font:500 14px/1 var(--sans,'Plus Jakarta Sans',system-ui,sans-serif);color:var(--ink-soft,#37332f);
  padding:10px 14px;border-radius:100px;transition:background .25s,color .25s}
.nav-links > a:hover,.nav-res-btn:hover,.nav-res.open .nav-res-btn{background:rgba(23,21,26,.05);color:var(--ink,#17151A)}
.nav-links > a[aria-current],.nav-res-btn.is-current{color:var(--ink,#17151A);background:rgba(23,21,26,.05)}
.nav-res-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:transform .25s ease}
.nav-res.open .nav-res-btn svg{transform:rotate(180deg)}

/* ---- panneau Ressources : deux tuiles vidéo ---- */
.nav-panel{position:absolute;top:calc(100% + 10px);left:50%;width:min(580px,calc(100vw - 32px));padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px;
  background:rgba(255,255,255,.97);border:1px solid var(--line,rgba(23,21,26,.08));border-radius:22px;box-shadow:0 24px 60px -18px rgba(23,21,26,.3),0 4px 12px -4px rgba(23,21,26,.08);
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .22s ease,transform .3s var(--ease,cubic-bezier(.21,.7,.25,1)),visibility 0s .3s}
/* bande invisible entre le bouton et le panneau : le survol ne se perd pas en descendant */
.nav-panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px}
.nav-res.open .nav-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s ease,transform .3s var(--ease,cubic-bezier(.21,.7,.25,1)),visibility 0s}
.nav-tile{display:flex;flex-direction:column;gap:12px;padding:6px 6px 12px;border-radius:16px;color:var(--ink,#17151A);transition:background .25s}
.nav-tile:hover,.nav-tile:focus-visible,.nav-tile[aria-current]{background:var(--bg-warm,#F5F2EE)}
.nav-tile-media{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#17151A}
.nav-tile-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease,cubic-bezier(.21,.7,.25,1))}
.nav-tile:hover .nav-tile-media video{transform:scale(1.04)}
.nav-tile-txt{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:0 6px}
.nav-tile-txt b{display:block;font:700 15px/1.25 var(--sans,'Plus Jakarta Sans',system-ui,sans-serif);letter-spacing:-.01em}
.nav-tile-txt small{display:block;margin-top:4px;font:400 12px/1.3 var(--tech,ui-monospace,Menlo,monospace);color:var(--muted,#79736e)}
.nav-tile-txt .arr{flex:none;font-weight:600;transition:transform .4s var(--ease,cubic-bezier(.21,.7,.25,1))}
.nav-tile:hover .arr{transform:translateX(4px)}

/* ---- bouton du Club + burger ---- */
.nav-cta{margin-left:6px}
.nav-cta .btn{padding:9px 18px;font-size:13.5px}
.nav-burger{display:none;width:40px;height:40px;border-radius:100px;align-items:center;justify-content:center;flex-direction:column;gap:5px;transition:background .25s}
.nav-burger:hover{background:rgba(23,21,26,.05)}
.nav-burger span{display:block;width:16px;height:1.6px;border-radius:2px;background:var(--ink,#17151A);transition:transform .3s var(--ease,cubic-bezier(.21,.7,.25,1))}
.nav.menu-open .nav-burger span:first-child{transform:translateY(3.3px) rotate(45deg)}
.nav.menu-open .nav-burger span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* ---- mobile : les liens et les tuiles passent dans une feuille sous la barre ---- */
@media (max-width:760px){
  header{top:12px}
  .nav{width:100%;gap:4px;padding:6px 6px 6px 16px}
  .nav-burger{display:inline-flex}
  .nav-cta{margin-left:auto}
  .nav-cta .btn{padding:9px 14px}
  .nav-cta .long{display:none}
  .nav-links{position:absolute;top:calc(100% + 10px);left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:10px;
    max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain;
    background:#fff;border:1px solid var(--line,rgba(23,21,26,.08));border-radius:22px;box-shadow:0 24px 60px -18px rgba(23,21,26,.3);
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s ease,transform .3s var(--ease,cubic-bezier(.21,.7,.25,1)),visibility 0s .3s}
  .nav.menu-open .nav-links{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .3s var(--ease,cubic-bezier(.21,.7,.25,1)),visibility 0s}
  .nav-links > a{font-size:17px;font-weight:600;padding:14px 12px;border-radius:14px}
  .nav-res-btn{display:none}
  .nav-panel,.nav-res.open .nav-panel{position:static;width:auto;margin-top:8px;padding:0;border:0;box-shadow:none;background:none;transform:none;opacity:1;visibility:visible;transition:none}
  .nav-panel::before{display:none}
  .nav-tile{padding:6px 6px 10px}
}
@media (max-width:420px){
  .nav-panel{grid-template-columns:1fr}
  .nav-tile{flex-direction:row;align-items:center;gap:12px;padding:6px}
  .nav-tile-media{width:112px;flex:none}
  .nav-tile-txt{flex:1;align-items:center;padding:0}
}
@media (prefers-reduced-motion:reduce){
  .nav-panel,.nav-links,.nav-tile-media video,.nav-burger span{transition:none!important}
}