/* ===== menu.css — menu commun à TOUS les mondes =====
 *
 * Barre flottante arrondie en haut de l'écran (façon « Upster ») :
 * « Lino Sanchez » à gauche, burger à droite, panneau déroulant dessous.
 * Contenu : Langues · Récupérer mes vidéos · Contact · Retour au hub.
 *
 * Volontairement AUTONOME : chaque monde a sa propre palette (hero.css pour
 * le sport, immo.css pour l'immobilier, et les mondes à venir auront la
 * leur). Le menu n'emprunte donc aucune variable — verre sombre et texte
 * blanc, lisibles sur n'importe quel fond, clair comme sombre.
 * Seule dépendance : Poppins, la police de marque (@import ci-dessous ;
 * le navigateur mutualise la requête avec celle de hero.css).
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');

.site-menu {
  position: fixed;
  z-index: 90;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 10px;
  right: 10px;
}
/* Barre en VERRE semi-transparent (31/07/2026) : elle était quasi opaque
   (noir à 82 %), on voyait mal ce qui passait dessous. Le fond est maintenant
   très léger et c'est le flou qui fait le travail — la saturation évite le
   rendu grisâtre habituel du backdrop-filter, et le liseré clair en haut
   imite l'arête d'une vitre. Lisible sur fond clair comme sur fond sombre. */
.menu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(22, 24, 27, 0.34);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  padding: 9px 9px 9px 16px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.menu-brand {
  color: #fff;
  text-decoration: none;
  font-family: "Poppins", "Geist", -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.92rem;
}
/* « Sanchez » dans le jaune de marque, comme sur l'accueil et le hub (Lino,
   02/08/2026) : le wordmark est le même objet partout, il ne doit pas se lire
   d'une façon sur l'accueil et d'une autre dans les mondes.
   Valeur en dur et non `var(--brand-yellow)` : menu.css est volontairement
   autonome, sans dépendance à la palette d'un monde (cf. l'en-tête). Si le
   jaune change dans hero.css, le changer ICI AUSSI. */
.menu-brand span { color: #eab308; }
/* ⚠️⚠️ REMISE À ZÉRO DE L'APPARENCE NATIVE — SIGNALÉE PAR LINO LE 23/08/2026,
 * depuis son iPhone. « Autres domaines » s'y affichait en PASTILLE BLANCHE
 * pleine largeur, avec son texte crème dessus, donc illisible.
 *
 * ⚠️ ET CE N'ÉTAIT PAS VISIBLE AILLEURS : dans un navigateur de bureau, le
 * style calculé était parfaitement correct — fond transparent, texte crème.
 * C'est Safari iOS qui peint la décoration native du <button> malgré
 * `background: none`, parce que `appearance` n'avait jamais été remise à zéro.
 * Le panneau porte un `backdrop-filter`, ce qui déclenche le cas.
 *
 * ⚠️ POSÉE SUR LES TROIS BOUTONS DU MENU, pas seulement sur le coupable : le
 * burger et les drapeaux ont la même faille, ils y échappent aujourd'hui par
 * chance (bordure explicite, contenu court). Un bouton ajouté demain
 * hériterait du défaut. */
.site-menu button {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(20, 21, 23, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
}
.menu-panel[hidden] { display: none; }

.menu-langs {
  display: flex;
  gap: 4px;
  padding: 0.3rem 0.4rem 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 4px;
}
.menu-langs .lang-btn {
  background: none;
  border: 0;
  font-size: 1.15rem;
  cursor: pointer;
  opacity: 0.5;
  padding: 0.25rem 0.35rem;
  transition: opacity 0.2s, transform 0.2s;
}
.menu-langs .lang-btn:hover { opacity: 1; transform: translateY(-1px); }
.menu-langs .lang-btn.is-active { opacity: 1; }

.menu-item {
  color: #ece7db;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.72rem 0.8rem;
  border-radius: 10px;
}
.menu-item:hover { background: rgba(255, 255, 255, 0.08); }
/* Entrée mise en avant (02/08/2026) : « Récupérer mes vidéos » sur /sport.
   Le corail du site (--coral-deep de hero.css) est repris ici en dur — le
   menu reste volontairement sans dépendance de palette, chaque monde ayant
   la sienne. */
.menu-item.is-accent { color: #ef8f6e; }
.menu-item.is-accent:hover { background: rgba(239, 143, 110, 0.14); }

/* ===== « AUTRES DOMAINES » ET SON DÉPLIANT (Lino, 21/08/2026) =============
 * ⚠️ L'ENTRÉE EST UN <button>, PAS UN <a>, et les deux règles ci-dessous sont
 * là pour ça : elle n'emmène nulle part, elle déplie une liste. `menu.js`
 * referme le panneau au clic sur un <a> — en faire un lien fermerait le menu
 * juste avant d'afficher la liste. Un bouton hérite par ailleurs de la police
 * du navigateur et se centre tout seul : il faut le remettre au gabarit des
 * autres entrées. */
button.menu-item {
  font: inherit; font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: none; border: 0; width: 100%;
  text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
/* Le chevron dit que ça s'ouvre, et il tourne quand c'est ouvert. Dessiné en
   caractère plutôt qu'en image : rien à charger, net à toute taille. */
button.menu-item[data-menu-domaines]::after {
  content: "\203A"; font-size: 1.1rem; line-height: 1;
  transform: rotate(90deg); transition: transform 0.25s;
}
button.menu-item[aria-expanded="true"]::after { transform: rotate(-90deg); }

.menu-sous { display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 2px 10px; padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.14); }
.menu-sous[hidden] { display: none; }
/* ⚠️ LES SOUS-ENTRÉES NE SONT PAS EN CAPITALES et sont un cran plus petites :
   ce sont des libellés de métier écrits en phrase (« Restauration /
   Hôtellerie », « Commerce / E-commerce »), pas des rubriques. En capitales
   espacées, sur trois lignes, la liste devenait illisible.
   ⚠️ L'exemple cité ici était « Matériel de sport / Je donne des cours »
   jusqu'au 25/08/2026. La ligne a raccourci, la règle n'a pas bougé : elle
   tient aux libellés à barre oblique, pas à celui-là en particulier. */
.menu-sous-item { font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.01em; text-transform: none;
  padding: 0.55rem 0.6rem; color: #cfc9bd; }

@media (prefers-reduced-motion: reduce) {
  button.menu-item[data-menu-domaines]::after { transition: none; }
}

@media (min-width: 700px) {
  /* desktop : même barre, panneau ancré à droite (pas pleine largeur) */
  .site-menu { top: 14px; left: 14px; right: 14px; }
  .menu-panel { left: auto; min-width: 280px; }
}