/* =====================================================================
   Le menu du site — styles partagés

   Chaque page charge ce fichier et « menu.js ». Les couleurs viennent
   des variables de la page, pour que le mode sombre suive.
   ===================================================================== */

/* Le retour, SUR la page et non dans la barre : perdu entre les
   boutons du haut, personne ne le voyait.
   Sans texte, et aligne sur les marges de la page : le mot
   « Retour » n'apprend rien que la fleche ne dise deja. */
/* Le bouton suit le MEME cadre que le contenu : sur un grand ecran,
   le contenu est centre dans 1200 px et le bouton restait colle au
   bord gauche de la fenetre. */
.retour-zone{max-width:1200px;margin:0 auto;padding:14px 20px 0;}

.retour{display:grid;place-items:center;width:38px;height:38px;
  border-radius:12px;background:var(--card);
  border:1px solid var(--line);color:var(--ink);cursor:pointer;
  padding:0;}
.retour svg{width:17px;height:17px;display:block;}

.burger{width:38px;height:38px;border-radius:12px;background:var(--card);
  border:none;display:grid;place-items:center;gap:4px;flex-shrink:0;
  padding:11px 9px;cursor:pointer;}
.burger i{display:block;height:2px;background:var(--ink);border-radius:2px;
  width:100%;}
.burger i:nth-child(2){width:72%;}

.voileMenu{position:fixed;inset:0;background:rgba(11,26,21,.5);z-index:40;
  transition:opacity .2s;}
.voileMenu.sort{opacity:0;}

.menu{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:85vw;
  background:var(--bg);z-index:41;overflow-y:auto;
  box-shadow:4px 0 24px rgba(0,0,0,.2);
  animation:venirMenu .22s cubic-bezier(.2,.8,.3,1);}
@keyframes venirMenu{from{transform:translateX(-100%)} to{transform:none}}

/* Il repart vers la gauche au lieu de disparaître d'un coup. */
.menu.sort{animation:partirMenu .2s cubic-bezier(.4,0,.8,.4) forwards;}
@keyframes partirMenu{from{transform:none} to{transform:translateX(-100%)}}

.menu-h{background:var(--nuit);color:#fff;position:relative;
  padding:calc(20px + env(safe-area-inset-top,0px)) 18px 20px;}
.menu-h b{font-size:17px;font-weight:800;display:block;}
.menu-h span{font-size:12px;color:#A8C4B4;display:block;margin-top:3px;}

.menu-x{position:absolute;right:12px;
  top:calc(14px + env(safe-area-inset-top,0px));
  width:32px;height:32px;border-radius:10px;border:none;
  background:rgba(255,255,255,.12);color:#fff;font-size:15px;
  cursor:pointer;display:grid;place-items:center;}

.menu-co{display:flex;align-items:center;gap:11px;margin-top:14px;
  background:rgba(255,255,255,.1);border-radius:12px;padding:11px 13px;
  cursor:pointer;}
.menu-co .av{width:34px;height:34px;border-radius:11px;
  background:var(--jaune);color:#3A2A00;display:grid;place-items:center;
  font-size:15px;font-weight:800;flex-shrink:0;}
.menu-co b{font-size:13px;font-weight:800;display:block;}
.menu-co span{font-size:11px;color:#A8C4B4;}

.menu-gr{padding:12px 0 4px;}
.menu-gt{font-size:10px;font-weight:800;letter-spacing:1px;
  color:var(--mute);padding:6px 18px 4px;}
.menu .mi{display:flex;align-items:center;gap:12px;padding:11px 18px;
  font-size:14px;color:var(--ink);text-decoration:none;cursor:pointer;}
.menu .mi:hover{background:var(--card);}
.menu .mi .e{font-size:16px;width:22px;text-align:center;flex-shrink:0;}
.menu .mi.sortir{color:var(--corail);}
.menu-sep{height:1px;background:var(--line);margin:6px 18px;}
.menu-p{padding:12px 18px calc(22px + env(safe-area-inset-bottom,0px));
  font-size:11px;color:var(--mute);line-height:1.9;}
.menu-p a{color:var(--mute);text-decoration:none;display:block;}
.menu-p span{display:block;margin-top:8px;}