/* ============================================================
   05 — Navigation & portail d'accès
   Barre fine transparente sur le hero puis sombre au défilement,
   et la page de connexion (portail mot de passe) aux couleurs du site.
   ============================================================ */

/* --- barre de navigation --- */
.brrb-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 28px;background:transparent;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.brrb-nav.scrolled,
.brrb-nav.solid{background:rgba(20,16,31,.92);box-shadow:0 6px 24px rgba(0,0,0,.25);padding:10px 28px;backdrop-filter:blur(8px)}
.brrb-nav .wordmark{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;text-decoration:none;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.brrb-nav .wordmark img{height:30px;width:auto;display:block}
.brrb-nav .wordmark .x{color:var(--yellow)}
.brrb-nav .links{display:flex;align-items:center;gap:26px}
.brrb-nav .links a{font-family:var(--font-text);font-weight:500;font-size:14.5px;color:rgba(255,255,255,.82);text-decoration:none;transition:color .2s}
.brrb-nav .links a:hover{color:#fff}
.brrb-nav .links a.cta{color:var(--purple-deep);background:var(--yellow);padding:8px 16px;border-radius:999px;font-weight:600}
.brrb-nav .links a.cta:hover{filter:brightness(1.06)}
.brrb-nav .burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.brrb-nav .burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:.25s}

@media (max-width:820px){
  .brrb-nav .links{
    position:absolute;top:100%;right:14px;left:14px;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(20,16,31,.97);border-radius:14px;padding:10px;margin-top:8px;
    box-shadow:0 12px 30px rgba(0,0,0,.35);display:none;
  }
  .brrb-nav.open .links{display:flex}
  .brrb-nav .links a{padding:12px 14px;border-radius:8px}
  .brrb-nav .links a.cta{text-align:center;margin-top:4px}
  .brrb-nav .burger{display:block}
  .brrb-nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .brrb-nav.open .burger span:nth-child(2){opacity:0}
  .brrb-nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* --- portail d'accès (page de connexion) --- */
.brrb-portal{
  min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;padding:24px;
  font-family:var(--font-text);color:#fff;
  background:
    radial-gradient(120% 120% at 75% 15%, rgba(21,101,171,.55), transparent 55%),
    radial-gradient(90% 90% at 12% 90%, rgba(244,184,58,.18), transparent 50%),
    linear-gradient(160deg,#3a2068 0%,#241247 55%,#101a3a 100%);
}
.brrb-portal .box{
  width:100%;max-width:420px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:22px;padding:40px 34px;backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center;
}
.brrb-portal .eyebrow{font-family:var(--font-text);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:14px}
.brrb-portal h1{font-family:var(--font-display);font-weight:700;font-size:26px;margin:0 0 8px;line-height:1.15}
.brrb-portal p{font-size:14.5px;color:rgba(255,255,255,.78);margin:0 0 26px}
.brrb-portal .eq-mini{display:flex;justify-content:center;align-items:flex-end;gap:4px;height:30px;margin-bottom:24px}
.brrb-portal .eq-mini span{width:5px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--yellow),rgba(21,101,171,.7));animation:brrb-eq 1.2s ease-in-out infinite;transform-origin:bottom}
.brrb-portal .eq-mini span:nth-child(1){height:40%;animation-delay:0s}
.brrb-portal .eq-mini span:nth-child(2){height:80%;animation-delay:-.4s}
.brrb-portal .eq-mini span:nth-child(3){height:60%;animation-delay:-.2s}
.brrb-portal .eq-mini span:nth-child(4){height:95%;animation-delay:-.7s}
.brrb-portal .eq-mini span:nth-child(5){height:55%;animation-delay:-.5s}
.brrb-portal label{display:block;text-align:left;font-size:13px;color:rgba(255,255,255,.8);margin-bottom:8px;font-weight:500}
.brrb-portal input[type=password]{
  width:100%;padding:13px 16px;border-radius:11px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);color:#fff;font-size:16px;font-family:var(--font-text);
}
.brrb-portal input[type=password]:focus{outline:2px solid var(--yellow);border-color:transparent}
.brrb-portal button{
  width:100%;margin-top:18px;padding:14px;border:0;border-radius:11px;cursor:pointer;
  background:var(--yellow);color:var(--purple-deep);font-family:var(--font-display);font-weight:700;font-size:16px;transition:.18s;
}
.brrb-portal button:hover{filter:brightness(1.06)}
.brrb-portal .err{background:rgba(255,77,77,.16);border:1px solid rgba(255,77,77,.4);color:#ffd5d5;border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:18px}
.brrb-portal .foot{margin-top:24px;font-size:12px;color:rgba(255,255,255,.5)}

@media (prefers-reduced-motion: reduce){
  .brrb-portal .eq-mini span{animation:none;transform:scaleY(.7)}
}