/* ==========================================================================
   MENU MOBILE des pages compte — burger + panneau plein écran, repris du header
   de la version téléphone du site (parité). Ne s'affiche QUE sous 768 px ; en
   desktop c'est la nav classique du header qui reste. Injecté par menu-mobile.js.
   ========================================================================== */

/* Bouton burger : caché en desktop, visible en mobile (voir media query). */
.burger {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--white); cursor: pointer;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.burger:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.menuic .b1, .menuic .b2, .menuic .sm {
  transition: transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 140ms ease-out;
}
.menuic .b1 { transform-origin: 12px 12px; }
.menuic .b2 { transform-origin: 12px 12px; }
.menuic .sm { transform-origin: 12px 16.8px; filter: drop-shadow(0 0 5px rgba(79, 200, 245, 0.6)); }
.menuic.open .b1 { transform: translateY(5.5px) rotate(45deg); }
.menuic.open .b2 { transform: scaleX(0); opacity: 0; }
.menuic.open .sm { transform: translateY(-4.8px) rotate(-45deg); }

/* Panneau plein écran, entre par la gauche (comme le site mobile). */
.menu-panel {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(80px + env(safe-area-inset-top)) 28px calc(30px + env(safe-area-inset-bottom));
  /* Ambiance : halo BLEU marque dominant (haut) + soupçon de violet (bas) —
     allégé côté violet. */
  background:
    radial-gradient(96% 62% at 50% 8%, rgba(87, 179, 242, 0.17), transparent 60%),
    radial-gradient(120% 72% at 16% 100%, rgba(93, 72, 133, 0.10), transparent 62%),
    var(--nuit);
  transform: translateX(-100%); visibility: hidden;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 380ms;
}
.menu-panel.is-open {
  transform: translateX(0); visibility: visible;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-panel:focus { outline: none; }

.menu-panel__inner {
  flex: 1 1 auto; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(22px, 4svh, 38px);
}
.menu-panel__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.6svh, 24px);
}
.menu-panel__link {
  display: inline-block; color: var(--white); text-decoration: none;
  font-size: clamp(30px, 9vw, 44px); font-weight: 600; letter-spacing: -1px; line-height: 1.08;
  padding: 4px 6px; transition: color var(--duree-hover);
}
.menu-panel__link.is-active { color: var(--blue); }
.menu-panel__link:active { color: var(--cyan); }
.menu-panel__link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }

.menu-panel__compte {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--white); text-decoration: none; font-size: clamp(16px, 4.4vw, 19px); font-weight: 500;
  padding: 12px 22px; border: 1px solid color-mix(in srgb, var(--white) 18%, transparent); border-radius: 999px;
  transition: color var(--duree-hover), border-color var(--duree-hover);
}
.menu-panel__compte svg { width: 20px; height: 20px; }
.menu-panel__compte:active { color: var(--white); border-color: color-mix(in srgb, var(--white) 42%, transparent); }
.menu-panel__compte:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Connecté : prénom en clair + pastille avatar (initiale). */
.menu-panel__compte--connecte { color: var(--white); gap: 11px; padding: 6px 20px 6px 6px; }
.menu-panel__compte .menu-panel__nom { font-weight: 600; }
.menu-panel__avatar {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: var(--nuit); font-size: 13px; font-weight: 700; line-height: 1;
}

.menu-panel__socials {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-top: clamp(24px, 4svh, 40px);
}
.menu-panel__socials-row { display: flex; gap: 16px; }
.menu-panel__social {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--white) 30%, transparent); color: var(--white);
  transition: color var(--duree-hover), border-color var(--duree-hover), transform var(--duree-appui);
}
.menu-panel__social svg { width: 21px; height: 21px; }
.menu-panel__social:active { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 65%, transparent); transform: translateY(-2px); }
.menu-panel__social:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.menu-panel__handle { color: var(--white); font-size: clamp(13.5px, 3.7vw, 15px); font-weight: 400; }

/* « Se déconnecter » tout en bas du menu — présent uniquement si connecté. */
.menu-panel__deco {
  flex: 0 0 auto; align-self: center; margin-top: clamp(18px, 3.4svh, 30px);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--white); font-size: clamp(14px, 3.9vw, 16px); font-weight: 500;
  padding: 11px 20px; border-radius: 999px;
  transition: color var(--duree-hover), background var(--duree-hover);
}
.menu-panel__deco svg { width: 19px; height: 19px; }
.menu-panel__deco:active { color: var(--signal); background: color-mix(in srgb, var(--signal) 12%, transparent); }
.menu-panel__deco:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.menu-panel__deco[disabled] { opacity: 0.6; cursor: default; }

/* Révélation en cascade à l'ouverture. */
.menu-panel__list li, .menu-panel__compte, .menu-panel__socials, .menu-panel__deco {
  opacity: 0; translate: 0 16px;
  transition: opacity 360ms ease, translate 440ms cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-panel.is-open .menu-panel__list li,
.menu-panel.is-open .menu-panel__compte,
.menu-panel.is-open .menu-panel__socials,
.menu-panel.is-open .menu-panel__deco {
  opacity: 1; translate: 0 0; transition-delay: calc(120ms + var(--i, 0) * 66ms);
}
body.menu-ouvert { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-panel.is-open { transition-duration: 0s; }
  /* Pas de révélation échelonnée : tout est visible d'emblée (délai neutralisé). */
  .menu-panel__list li, .menu-panel__compte, .menu-panel__socials, .menu-panel__deco {
    transition: none; opacity: 1; translate: none;
  }
}

/* Bascule mobile : le burger remplace « Mon compte » du header, la nav se cache. */
@media (max-width: 767.98px) {
  .burger { display: inline-flex; }
  .header .account { display: none; }
}