/* ==========================================================================
   04 · Bandeau bêta, en-tête, navigation, pied de page
   ========================================================================== */

/* ---------- Bandeau bêta ---------- */
.bandeau-beta {
  position: relative;
  background: var(--sang-fond);
  border-bottom: 1px solid var(--sang);
  padding: 8px 44px;
  text-align: center;
}
.bandeau-beta p {
  margin: 0 auto; max-width: none;
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sang-clair);
}
.bandeau-beta a { color: inherit; }
.bandeau-beta .court { display: none; }
.bandeau-beta__fermer {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--sang-clair); font: 400 20px/1 var(--corps);
}
@media (max-width: 720px) {
  .bandeau-beta .long { display: none; }
  .bandeau-beta .court { display: inline; }
}

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 8, 15, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.entete__barre {
  display: flex; align-items: center; gap: 22px;
  min-height: var(--entete);
  padding-block: 14px;
  padding-inline: 28px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.entete .logo { margin-right: auto; }
.logo img { width: 30px; height: 30px; border-radius: 50%; }
.logo b { display: block; font: 700 15px/1 var(--corps); letter-spacing: .14em; color: var(--texte); }
.logo small { display: block; font: 500 9px/1 var(--mono); letter-spacing: .3em; color: var(--texte-2); margin-top: 3px; }

/* ---------- Menu principal ---------- */
.menu { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu > li > a {
  display: inline-block;
  font: 400 13px/1 var(--corps);
  color: var(--texte-2);
  text-decoration: none;
  padding: 8px 0 6px;
  border-bottom: 2px solid transparent;
  transition: color .15s;
}
.menu > li > a:hover { color: var(--texte); }
.menu > li > a[aria-current="page"] { color: var(--texte); font-weight: 500; border-bottom-color: var(--sang); }
.fleche {
  display: inline-block; width: 6px; height: 6px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); margin-left: 7px; vertical-align: 3px;
}

/* ---------- Sous-menu ---------- */
.menu__sous {
  position: absolute; top: calc(100% + 16px); left: -18px;
  min-width: 250px;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-top: 2px solid var(--sang);
  padding: 8px 0; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.menu__sous::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.menu__parent:hover .menu__sous,
.menu__parent:focus-within .menu__sous,
.menu__parent.is-ouvert .menu__sous { opacity: 1; visibility: visible; transform: none; }
.menu__groupe {
  font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-3); padding: 10px 18px 6px;
}
.menu__sous a {
  display: flex; align-items: center; gap: 10px;
  font: 400 13.5px/1.4 var(--corps);
  color: var(--texte-2); text-decoration: none;
  padding: 9px 18px;
}
.menu__sous a:hover { background: var(--surface-2); color: var(--texte); }
.menu__sous a i { width: 8px; height: 8px; background: var(--c, var(--sang)); flex: none; }

/* ---------- Bouton menu mobile ---------- */
.burger {
  display: none;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid var(--ligne); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--texte); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Menu mobile ---------- */
.menu-mobile {
  background: var(--nuit);
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  padding: 8px 0 24px;
  max-height: calc(100vh - var(--entete));
  max-height: calc(100dvh - var(--entete));
  overflow-y: auto;
}
.menu-mobile__lien {
  display: block;
  font: 600 24px/1.2 var(--display);
  color: var(--texte); text-decoration: none;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ligne);
}
.menu-mobile__lien[aria-current="page"] { color: var(--sang-clair); border-left: 2px solid var(--sang); padding-left: 18px; }
.menu-mobile__sous { border-bottom: 1px solid var(--ligne); padding-block: 6px; }
.menu-mobile__sous a {
  display: block;
  font: 400 14px/1.4 var(--corps);
  color: var(--texte-2); text-decoration: none;
  padding: 9px 20px 9px 36px;
}
.menu-mobile .btn { display: block; margin: 22px 20px 0; }

@media (max-width: 960px) { .menu { gap: 16px; } }
@media (max-width: 880px) {
  .nav-principale, .entete__app { display: none; }
  .burger { display: flex; }
}
@media (max-width: 720px) { .entete__barre { padding: 10px 20px; } }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--ligne); }
.pied__nav {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px;
  padding-block: 48px 32px;
}
.pied__marque p { font-size: 13px; color: var(--texte-2); margin: 14px 0 16px; max-width: 34ch; }
.pied__titre { font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--texte-3); margin: 0 0 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied ul a { font: 400 13px/1.9 var(--corps); color: var(--texte-2); text-decoration: none; }
.pied ul a:hover { color: var(--texte); }
.pied__bas { border-top: 1px solid var(--ligne); }
.pied__bas .conteneur { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-block: 24px; font-size: 12px; color: var(--texte-3); }
.pied__bas p { margin: 0; max-width: none; }
@media (max-width: 720px) {
  .pied__nav { grid-template-columns: 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
}