/* ==========================================================================
   Self-Shao - menu plein écran commun à toutes les pages (2026-11-05)
   Fichier : public_html/assets/ss-menu.css
   - le menu tient toujours dans l'écran : la taille du texte suit la hauteur
     ET la largeur de la fenêtre ; s'il manque de place (téléphone à
     l'horizontale), le menu défile au lieu d'être coupé
   - même typographie que le reste du site : DM Sans gras, capitales espacées
   Sélecteurs préfixés par "html body" pour passer devant les styles des pages.
   ========================================================================== */

html body .menu-ov,
html body .nav-ov,
html body .hdr-menu-ov{
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;          /* centrage assuré par les marges automatiques ci-dessous */
  gap:0;
  overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:clamp(3.6rem,9vh,5.5rem) 1.25rem clamp(1.4rem,5vh,3rem);
  padding-top:max(clamp(3.6rem,9vh,5.5rem),env(safe-area-inset-top));
  padding-bottom:max(clamp(1.4rem,5vh,3rem),env(safe-area-inset-bottom));
  box-sizing:border-box;
}
/* centré verticalement quand tout tient, défilable sinon (rien n'est coupé en haut) */
html body .menu-ov > a:first-of-type,
html body .nav-ov > a:first-of-type,
html body .hdr-menu-ov > a:first-of-type{margin-top:auto}
html body .menu-ov > :last-child,
html body .nav-ov > :last-child,
html body .hdr-menu-ov > :last-child{margin-bottom:auto}

/* liens */
html body .menu-ov a,
html body .nav-ov a,
html body .hdr-menu-ov a{
  flex-shrink:0;max-width:100%;box-sizing:border-box;
  font-family:'DM Sans',system-ui,sans-serif;font-weight:700;font-style:normal;
  font-size:clamp(.92rem,min(2.75vh,4.4vw),1.55rem);
  line-height:1.2;letter-spacing:.14em;text-transform:uppercase;text-align:center;
  color:#CFC9BE;text-decoration:none;
  padding:clamp(.24rem,.85vh,.55rem) 1rem;
  border:0;border-radius:0;margin:0;background:none;
  transition:color .2s;
}
html body .menu-ov a:hover,html body .nav-ov a:hover,html body .hdr-menu-ov a:hover,
html body .menu-ov a.current,html body .nav-ov a.current,html body .hdr-menu-ov a.current{color:#D9B876}
html body .menu-ov a.mn-cc,html body .nav-ov a.mn-cc,html body .hdr-menu-ov a.mn-cc{color:#E8394F}
html body .menu-ov a.mn-sc,html body .nav-ov a.mn-sc,html body .hdr-menu-ov a.mn-sc{color:#C9A84C}
html body .menu-ov a.mn-cc:hover,html body .nav-ov a.mn-cc:hover,html body .hdr-menu-ov a.mn-cc:hover{color:#FF5A6E}

/* bouton « Mon espace élève » */
html body .menu-ov a.gold,
html body .nav-ov a.gold,
html body .hdr-menu-ov a.gold{
  margin-top:clamp(.6rem,2vh,1.3rem);
  font-size:clamp(.78rem,min(1.9vh,3.4vw),.95rem);letter-spacing:.16em;
  color:#D9B876;border:1px solid rgba(201,168,76,.45);border-radius:4px;
  padding:clamp(.5rem,1.2vh,.7rem) 1.5rem;
}
html body .menu-ov a.gold:hover,
html body .nav-ov a.gold:hover,
html body .hdr-menu-ov a.gold:hover{background:#C9A84C;color:#000}

/* liseré tricolore */
html body .mn-tri{display:flex;flex-shrink:0;width:120px;height:3px;margin-top:clamp(.8rem,2.4vh,1.5rem)}
html body .mn-tri i{flex:1}
html body .mn-tri i:nth-child(1){background:#2450A6}
html body .mn-tri i:nth-child(2){background:#F4F0E6}
html body .mn-tri i:nth-child(3){background:#D21F26}

/* bouton de fermeture : reste visible même quand le menu défile */
html body .menu-ov .close,
html body .nav-ov .close,
html body .hdr-menu-ov .close-stages{
  position:fixed;z-index:2;top:max(clamp(.7rem,2.2vh,1.5rem),env(safe-area-inset-top));right:clamp(.9rem,3vw,2rem);
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  font-size:2.3rem;line-height:1;color:#D9B876;background:rgba(0,0,0,.55);border:0;border-radius:50%;cursor:pointer;padding:0;
}
html body .menu-ov .close:focus-visible,
html body .nav-ov .close:focus-visible,
html body .hdr-menu-ov .close-stages:focus-visible,
html body .menu-ov a:focus-visible,
html body .nav-ov a:focus-visible,
html body .hdr-menu-ov a:focus-visible{outline:2px solid #D9B876;outline-offset:2px}

/* écran large mais peu haut (téléphone à l'horizontale, petite fenêtre) : 2 colonnes */
@media (max-height:600px) and (min-width:560px){
  html body .menu-ov,html body .nav-ov,html body .hdr-menu-ov{
    display:grid;grid-template-columns:repeat(2,minmax(0,max-content));column-gap:clamp(1.5rem,6vw,4rem);
    justify-content:center;align-content:safe center;justify-items:center;
    padding-top:max(3.2rem,env(safe-area-inset-top));padding-bottom:max(1.2rem,env(safe-area-inset-bottom));
  }
  html body .menu-ov > a,html body .nav-ov > a,html body .hdr-menu-ov > a{margin-top:0;margin-bottom:0;font-size:clamp(.82rem,3.4vh,1.1rem);padding:.32rem .6rem}
  html body .menu-ov > a.gold,html body .nav-ov > a.gold,html body .hdr-menu-ov > a.gold{grid-column:1/-1;margin-top:.7rem;font-size:.8rem}
  html body .mn-tri{grid-column:1/-1;margin:.8rem auto 0}
}