/* Menu telephone (nouveau design 2026-11) : grille de blocs a 50 %, ouverte par le bouton hamburger.
   Retour arriere : retirer l'element menu-mobile du layout et la ligne menu-mobile.css. */
#menu-mobile { display: none; }

@media (max-width: 792px) {
  /* l'ancien menu (accordeons) et les 4 boutons du compte sont remplaces par #menu-mobile */
  #nav-line2, #menu-user { display: none !important; }
  /* le formulaire Identifiant / Mot de passe (déplacé dans le pied de page par redimensionnementMenu.js) est remplacé par « Connexion » et « Créer un compte » du menu */
  #connexion { display: none !important; }

  /* le menu se pose PAR-DESSUS la page : un fond plein sur toute la largeur et toute la hauteur sous l'en-tete */
  /* en-tête (logo, langues, bouton menu) fixe en haut de l'écran quand on fait défiler la page ; il reste au-dessus du menu ouvert */
  #top_nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1100;
    background: #fff;
    box-shadow: 0 2px 10px rgba(45, 71, 112, .12);
  }
  body.mm-ouvert { overflow: hidden; }
  #menu-mobile.ouvert {
    display: block;
    position: fixed;
    top: var(--mm-top, 90px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px 14px 18px;
    background: #fff;
    border-top: 1px solid #e3e9f1;
  }
  #menu-mobile .mm-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 30px;
  }
  #menu-mobile .mm-vedettes { margin-bottom: 30px; }
  #menu-mobile .mm-titre {
    margin: 8px 0 10px;
    color: #2d4770;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* logiciels mis en avant (choisis dans l'admin : Menu mobile) */
  #menu-mobile .mm-vedettes-1 { grid-template-columns: 1fr; }
  #menu-mobile .mm-tuile {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(45, 71, 112, .1);
    text-decoration: none;
    color: #2d4770;
  }
  /* 2 logiciels : carres, image puis titre dessous */
  #menu-mobile .mm-vedettes-2 .mm-tuile { aspect-ratio: 1 / 1; flex-direction: column; padding: 10px; }
  #menu-mobile .mm-vedettes-2 .mm-tuile img { flex: 1 1 0; min-height: 0; max-width: 100%; object-fit: contain; }
  #menu-mobile .mm-vedettes-2 .mm-tuile-titre { margin-top: 6px; font-size: 15px; font-weight: 700; text-align: center; }
  /* 1 logiciel : pleine largeur, image a gauche et titre */
  #menu-mobile .mm-vedettes-1 .mm-tuile { flex-direction: row; gap: 16px; padding: 12px 16px; }
  #menu-mobile .mm-vedettes-1 .mm-tuile img { height: 110px; width: auto; max-width: 45%; object-fit: contain; }
  #menu-mobile .mm-vedettes-1 .mm-tuile-titre { font-size: 18px; font-weight: 700; }

  /* blocs de liens a 50 % */
  #menu-mobile .mm-bloc {
    --c: #4478b4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e3e9f1;
    border-top: 4px solid var(--c);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(45, 71, 112, .08);
  }
  #menu-mobile .mm-bloc.mm-seul { text-align: center; }
  /* une seule boite, deux listes cote a cote */
  #menu-mobile .mm-double { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-bottom: 30px; }
  #menu-mobile .mm-double .mm-col + .mm-col { border-left: 1px solid #eef2f7; padding-left: 14px; }
  #menu-mobile .mm-double .mm-col { display: flex; flex-direction: column; justify-content: center; }
  #menu-mobile .mm-bleu { --c: #7da4cf; }
  #menu-mobile .mm-violet { --c: #70217c; }
  #menu-mobile .mm-rouge { --c: #e9002d; }
  #menu-mobile .mm-orange { --c: #f2a912; }
  #menu-mobile .mm-vert { --c: #a4c639; }
  #menu-mobile .mm-gris { --c: #2d4770; }
  #menu-mobile .mm-bloc a {
    display: block;
    padding: 9px 0;
    color: #2d4770;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
  }
  #menu-mobile .mm-bloc a + a { border-top: 1px solid #eef2f7; }
  #menu-mobile .mm-bloc strong {
    padding: 6px 0 2px;
    color: #2d4770;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* pied de page dans le menu */
  #menu-mobile .mm-footer { margin-top: 26px; padding-top: 18px; border-top: 1px solid #e3e9f1; text-align: center; font-size: 12px; }
  #menu-mobile .mm-credit { margin: 0; font-size: 11px; font-weight: 400; text-align: center; }
  #menu-mobile .mm-liens { margin: 0 0 8px; line-height: 1.7; }
  #menu-mobile .mm-copyright { margin: 0 0 8px; }
  #menu-mobile .mm-footer a { text-decoration: none; }
}