/* Menu latéral (v32) : barre fine en haut + menu vertical à gauche, comme Anki.
   Affichage seulement. Les boutons d'onglets ne sont pas recréés, ils sont DÉPLACÉS :
   leurs identifiants et leurs écouteurs restent les mêmes (voir js/menu.js).
   Toutes les règles sont sous « body.has-menu » : si le script ne s'exécute pas,
   la page garde son ancienne barre d'onglets et reste utilisable. */

/* Anti-clignotement : au chargement, la page attend que le menu et les réglages
   soient en place avant de s'afficher (sinon on voit une fraction de seconde
   l'ancienne disposition : onglets en haut, réglages dépliés…).
   La règle elle-même est écrite dans l'en-tête de grec.html et hebreu.html :
   placée ici, dans une feuille externe, elle arriverait trop tard. */
:root{--side-w:250px}

/* ---------- Barre fine du haut ---------- */
body.has-menu .appbar{position:sticky;top:0;z-index:35;display:flex;align-items:center;gap:10px;
  min-height:52px;padding:6px 12px;padding-top:calc(6px + env(safe-area-inset-top));
  background:#eef3f6f2;backdrop-filter:blur(10px);border-bottom:1px solid var(--line,#d4e0e5)}
body.has-menu .appbar-burger{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:1px solid var(--line,#d4e0e5);border-radius:12px;
  background:#fff;color:#2b3b49;font-size:1.15rem;line-height:1;cursor:pointer}
body.has-menu .appbar-burger:hover{background:#e9f1f5}
body.has-menu .appbar-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 1rem/1.3 system-ui,sans-serif;color:var(--ink,#182531)}

/* Le bouton « Focus » déménage dans cette barre */
body.has-menu .appbar .focus-enter{flex:0 0 auto;min-height:44px;padding:8px 13px;font-size:.92rem}

/* ---------- Menu de gauche ---------- */
body.has-menu .sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--side-w);z-index:60;
  display:flex;flex-direction:column;gap:2px;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 12px calc(14px + env(safe-area-inset-bottom));
  background:#fff;border-right:1px solid var(--line,#d4e0e5);
  transform:translateX(-101%);transition:transform .22s ease;will-change:transform}
body.has-menu.menu-open .sidebar{transform:none}
body.has-menu .menu-veil{position:fixed;inset:0;z-index:55;background:#0b1b2a66;
  opacity:0;pointer-events:none;transition:opacity .22s}
body.has-menu.menu-open .menu-veil{opacity:1;pointer-events:auto}

body.has-menu .sidebar-home{display:inline-block;margin:0 0 10px 2px;padding:4px;
  color:#52616d;text-decoration:none;font-size:.88rem;font-weight:600}
body.has-menu .sidebar-home:hover{color:var(--accent,#24526d)}
body.has-menu .sidebar-brand{margin:0 2px 12px;font:700 1.05rem/1.3 system-ui,sans-serif;color:var(--accent,#24526d)}
body.has-menu .sidebar-lang{display:flex;gap:6px;margin:0 0 6px}
body.has-menu .sidebar-lang a{flex:1 1 0;min-width:0;padding:9px 6px;border-radius:10px;text-align:center;
  background:#eef3f6;color:#33434f;text-decoration:none;font:700 .9rem/1.2 system-ui,sans-serif}
body.has-menu .sidebar-lang a:hover{background:#dde8ee}
body.has-menu .sidebar-lang a.current{background:var(--accent,#24526d);color:#fff}

body.has-menu .m-group{margin:16px 8px 6px;font:700 .7rem/1.2 system-ui,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;color:#7b8a96}
body.has-menu .m-group:first-of-type{margin-top:8px}

/* La barre d'onglets d'origine, devenue une liste verticale */
body.has-menu .sidebar-nav #nav,body.has-menu .sidebar-nav .tabs{
  display:flex!important;flex-direction:column;align-items:stretch;gap:2px;
  position:static!important;top:auto!important;overflow:visible!important;
  margin:0!important;padding:0!important;background:none!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}
body.has-menu .sidebar-nav button{display:flex;align-items:center;gap:9px;width:100%;flex:0 0 auto;
  min-height:44px;padding:9px 11px;border:0!important;border-radius:10px;background:transparent;
  font:600 .95rem/1.25 system-ui,sans-serif;color:#33434f;text-align:left;white-space:normal;min-width:0;
  cursor:pointer;box-shadow:none;-webkit-tap-highlight-color:transparent}
body.has-menu .sidebar-nav button:hover{background:#e9f1f5}
body.has-menu .sidebar-nav button.active{background:var(--accent,#24526d);color:#fff}
body.has-menu .sidebar-nav button:focus-visible{outline:3px solid #8bb8cc;outline-offset:2px}
body.has-menu .m-ico{flex:0 0 1.35em;font-size:1.02em;line-height:1;text-align:center}
body.has-menu .m-txt{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}

/* Compte et Installer, rangés en bas du menu */
body.has-menu .sidebar-foot{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--line,#d4e0e5)}
body.has-menu .sidebar-foot:empty{display:none}
/* Numéro de version, discret, tout en bas du menu (js/version.js) */
body.has-menu .sidebar .app-version{margin:10px 0 0;font-size:12px;color:var(--muted,#5b6b74);text-align:center}
body.has-menu .sidebar .app-version:empty{display:none}
/* Tant qu'ils ne sont pas rangés dans le menu, on ne les montre pas :
   ils sont créés après l'affichage de la page et sauteraient en bas à gauche. */
body.has-menu .acc-btn,body.has-menu .pwa-btn{display:none}
body.has-menu .sidebar-foot .acc-btn,body.has-menu .sidebar-foot .pwa-btn{
  display:block;position:static!important;left:auto!important;bottom:auto!important;width:100%;
  box-shadow:none;text-align:center}

/* Ce que le menu a vidé */
body.has-menu main > .lang-nav,body.has-menu main > .app-header,body.has-menu main > .top{display:none}

/* ---------- PC : le menu reste ouvert ---------- */
@media (min-width:1000px){
  body.has-menu{padding-left:var(--side-w)}
  body.has-menu .sidebar{transform:none;box-shadow:none}
  body.has-menu .menu-veil{display:none}
  body.has-menu .appbar-burger{display:none}
}

/* ---------- Téléphone ---------- */
@media (max-width:999px){
  body.has-menu .sidebar{width:min(276px,86vw);box-shadow:0 0 40px #0b1b2a33;
    visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  body.has-menu.menu-open .sidebar{visibility:visible;transition:transform .22s ease,visibility 0s}
  body.has-menu .appbar .focus-enter{padding:8px 11px}
  body.has-menu .appbar .focus-enter .focus-word{display:none}
}

/* ---------- Mode Focus : plus rien d'autre que la carte ---------- */
body.has-menu.focus .appbar,body.has-menu.focus .sidebar,body.has-menu.focus .menu-veil{display:none!important}
@media (min-width:1000px){body.has-menu.focus{padding-left:0}}

/* ---------- Lien « Aller au contenu » (visible seulement au clavier) ---------- */
.skip-link{position:fixed;left:10px;top:-80px;z-index:200;padding:10px 16px;border-radius:10px;
  background:#24526d;color:#fff;font:600 .95rem system-ui,sans-serif;text-decoration:none}
.skip-link:focus{top:10px;outline:3px solid #8bb8cc;outline-offset:2px}
main:focus{outline:none}