/* =====================================================
   SIMPLESL / SPLX MENU FUSION - VERSION REFACTO
   Objectifs: Cohérence, accessibilité, responsive propre
   ===================================================== */

:root {
  --mn-gap: .5rem;
  --mn-radius: 8px;
  --mn-bg-hover: #2a2a31;
  --mn-accent: #6aa0ff;
  --mn-fg: #b8b8c3;
  --mn-popup-bg: rgba(20,22,30,0.97);
  --mn-shadow: 0 4px 16px #0008;
  --mn-transition: 0.18s cubic-bezier(.4,.2,.2,1);
  --logo-size-desktop: 38px;
  --logo-size-mobile: 32px;
  --logo-glow: 0 0 8px rgba(106,160,255,0.55);
}

/* RESET FOCALISATION ACCESSIBLE */
:focus-visible { outline:2px solid var(--mn-accent); outline-offset:2px; }
:focus { outline:none; }

/* LOGO (unifié + variables) */
.logo { position:relative; display:flex; align-items:center; gap:.55em; text-decoration:none; }
.logo-icon { width:var(--logo-size-desktop); height:var(--logo-size-desktop); display:flex; align-items:center; justify-content:center; flex:0 0 var(--logo-size-desktop); transition:transform var(--mn-transition); }
.logo-text { font-size:1.35em; font-weight:700; color:var(--mn-accent); text-decoration:none; letter-spacing:.02em; position:static; line-height:1; transition:color var(--mn-transition), text-shadow var(--mn-transition); left:auto !important; bottom:auto !important; margin:0; }
.logo:hover .logo-text, .logo:focus-visible .logo-text { color:#fff; text-shadow:var(--logo-glow); }
.logo:hover .logo-icon svg { filter:drop-shadow(var(--logo-glow)); }
.logo:active .logo-icon { transform:scale(.94); }
.logo-text { left:auto !important; bottom:auto !important; margin:0; }
@media (max-width:900px){
  .logo-icon { width:var(--logo-size-mobile); height:var(--logo-size-mobile); flex:0 0 var(--logo-size-mobile); }
  .logo-text { font-size:1.1em; }
}

/* CONTENEURS */
.hd-content { display:flex; align-items:center; justify-content:space-between; gap:1.2em; width:100%; box-sizing:border-box; }
.menu-container { display:flex; align-items:center; gap:1em; flex:1; justify-content:flex-end; }

/* MENU DESKTOP */
.mn { width:100%; display:flex; align-items:center; justify-content:flex-end; }
#main-menu-list { display:flex; flex-direction:row; align-items:center; gap:var(--mn-gap); list-style:none; margin:0; padding:0; }

.mn-btn { display:inline-block; padding:.7em 1.4em; color:var(--mn-fg); background:none; border:none; border-radius:var(--mn-radius); font-weight:700; font-size:1.05em; text-decoration:none; cursor:pointer; transition:background var(--mn-transition), color var(--mn-transition); }
.mn-btn:hover, .mn-btn:focus-visible { background:var(--mn-bg-hover); color:var(--mn-accent); }
.mn-btn:active { background:var(--mn-accent); color:#fff; }

/* BOUTON TEXTE (TRIGGER) */
.menu-text-btn { display:none; align-items:center; justify-content:center; background:#23243a; color:var(--mn-accent); font-weight:700; font-size:1.05em; border-radius:10px; padding:.55em 1.1em; margin-left:1em; cursor:pointer; border:1px solid #2e3144; box-shadow:0 2px 6px #0004; transition:background var(--mn-transition), color var(--mn-transition), border-color var(--mn-transition); user-select:none; }
.menu-text-btn:hover, .menu-text-btn:focus-visible { background:#2a2d3f; color:#fff; border-color:var(--mn-accent); }
.menu-text-btn[aria-expanded="true"] { background:var(--mn-accent); color:#fff; }

/* ETATS VISIBILITE */
.mobile-menu-btn { display:none; }
#main-menu-list { display:flex; }
.mobile-menu-popup { display:none; }

/* Fallback: si JS non monté (pas de classe js-mounted sur body), forcer affichage liste en mobile */
@media (max-width:900px){
  body:not(.js-mounted) #main-menu-list { display:flex !important; }
  body:not(.js-mounted) .menu-text-btn { display:none !important; }
}

/* POPUP MOBILE (EN DESSOUS) */
@media (max-width:900px){
  #main-menu-list { display:none; }
  .menu-text-btn { display:flex; margin-left:0; min-width:80px; }
  .mobile-menu-popup { position:absolute; top:100%; right:20px; max-width:180px; min-width:150px; background:var(--mn-popup-bg); border-radius:0 0 12px 12px; box-shadow:var(--mn-shadow); display:flex; padding:.6em .4em .7em .4em; gap:.25em; z-index:3000; max-height:calc(100vh - 64px); overflow-y:auto; animation:fadeInMenu .18s ease-out; }
  .mobile-menu-popup ul { display:flex; flex-direction:column; list-style:none; margin:0; padding:0; gap:.2em; }
  .mobile-menu-popup li { width:100%; }
  .mobile-menu-popup .mn-btn { width:100%; text-align:right; padding:.55em 1.1em .55em .5em; font-size:1em; border-radius:7px; }
  .mobile-menu-popup .mn-btn:focus-visible { background:var(--mn-accent); color:#fff; }
}

/* PREFERENCES UTILISATEUR */
@media (prefers-reduced-motion:reduce){
  * { animation:none !important; transition:none !important; }
}

/* UTILITAIRES */
.hidden { display:none !important; }
@keyframes fadeInMenu { from { opacity:0; transform:translateY(-20px);} to { opacity:1; transform:translateY(0);} }

/* (supprimé bloc duplicatif logo mobile) */

/* =============================================
   LAYOUT HEADER : LOGO GAUCHE / MENU DROITE
   ============================================= */
.hd {    width: 90%;
    margin: 0 auto;}
.hd-content { justify-content:space-between; position:relative; }
.menu-container { justify-content:flex-end; }
/* Neutralisation déjà gérée dans bloc logo unifié */

/* Bouton mobile en haut à droite */
@media (max-width:900px){
  .menu-text-btn { position:absolute; top:0.55rem; right:1rem; z-index:3500; }
  .logo { margin-right:0; }
  .hd-content { padding-right:5.2rem; }
}

@media (min-width:901px){
  .logo { margin-right:auto; }
  .menu-container { flex:1; }
}