/* Portail Vitrio — styles de menu. Un style ne regle que la disposition de la
   marque, de la recherche et de la navigation dans l'en-tete : il se choisit
   dans l'administration (Apparence) et se lit sur <html data-menu="...">.
   Aucune couleur en dur : elles viennent de palettes.css.

   Ajouter un style : un bloc [data-menu="nom"] ci-dessous, une entree dans
   MENUS de services/appearance.py. Le gabarit _menu.html rend la meme liste de
   liens pour tous les styles.

   Regle commune : sur telephone, aucun libelle n'est coupe. Un libelle qui ne
   tient pas passe a la ligne dans sa case, il ne sort jamais de l'ecran. */
@media (max-width:699px){
  .top-in .search{flex-basis:100%;max-width:none}
  .menu a{font-size:13.5px}
}

/* --- Capsule (defaut) : la marque, et le menu dans une capsule arrondie
   centree ; l'entree courante est une pastille pleine. ---------------------- */
[data-menu="capsule"] .top-in{display:grid;grid-template-columns:1fr auto 1fr;gap:8px 16px;align-items:center}
[data-menu="capsule"] .brand{justify-self:start}
[data-menu="capsule"] .menu{grid-column:2;grid-row:1;max-width:100%}
[data-menu="capsule"] .top-in .search{grid-column:1 / -1;grid-row:2;justify-self:center;width:100%;max-width:620px}
[data-menu="capsule"] .menu-in{gap:4px;padding:4px;border-radius:26px;background:var(--card);
  border:1px solid var(--rule);backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou)}
[data-menu="capsule"] .menu a{padding:0 15px;border-radius:999px;color:var(--muted)}
[data-menu="capsule"] .menu a:hover{color:var(--ink);background:var(--card-fort)}
[data-menu="capsule"] .menu a[aria-current="page"]{color:var(--paper);background:var(--ink)}
@media (max-width:699px){
  /* Telephone : le logo en haut, centre ; la capsule dessous ; puis la recherche. */
  [data-menu="capsule"] .top-in{grid-template-columns:minmax(0,1fr);justify-items:center;gap:6px}
  [data-menu="capsule"] .brand{justify-self:center}
  [data-menu="capsule"] .menu{grid-column:1;grid-row:2}
  [data-menu="capsule"] .top-in .search{grid-row:3}
  [data-menu="capsule"] .menu a{padding:0 11px}
}
@media (max-width:440px){
  /* Quatre libelles ne tiennent pas sur une ligne : la capsule passe sur deux. */
  [data-menu="capsule"] .menu-in{display:grid;grid-template-columns:auto auto}
}

/* --- Ligne : la marque a gauche, la recherche, les liens en ligne a droite. - */
[data-menu="ligne"] .menu,[data-menu="barre-basse"] .menu{margin-left:auto}
@media (min-width:860px){
  /* La recherche suit le visiteur sur grand ecran ; sur telephone, un en-tete
     collant mangerait trop de hauteur. */
  [data-menu="ligne"] .top,[data-menu="barre-basse"] .top{position:sticky;top:0}
}
@media (max-width:699px){
  /* Telephone : marque et liens sur une ligne, recherche dessous. L'entree
     « Rechercher » s'efface (la marque mene a l'accueil, le champ est dessous) ;
     un libelle qui ne tient pas passe sur deux lignes, jamais hors de l'ecran. */
  [data-menu="ligne"] .top-in .search{order:3}
  [data-menu="ligne"] .menu{flex:1 1 0}
  [data-menu="ligne"] .menu-in{gap:0;justify-content:flex-end}
  [data-menu="ligne"] .menu a[href="/"]{display:none}
  [data-menu="ligne"] .menu a{flex:0 1 auto;padding:2px 6px;font-size:13px;line-height:1.15;white-space:normal;text-align:center}
}

/* --- Onglets : liens soulignes sous l'en-tete, sur toute la largeur. -------- */
[data-menu="onglets"] .top-in{padding-bottom:0}
[data-menu="onglets"] .menu{order:9;flex:1 1 100%;overflow-x:auto;scrollbar-width:thin}
[data-menu="onglets"] .menu-in{gap:0}
[data-menu="onglets"] .menu a{min-height:46px;padding:0 18px;border-radius:0;border-bottom:3px solid transparent}
[data-menu="onglets"] .menu a:hover{background:none;border-bottom-color:var(--rule-clair)}
[data-menu="onglets"] .menu a[aria-current="page"]{background:none;border-bottom-color:currentColor}
@media (max-width:699px){
  [data-menu="onglets"] .menu a{flex:1 1 0;padding:2px 4px;font-size:13px;line-height:1.15;white-space:normal;text-align:center}
}

/* --- Barre basse : sur telephone, barre fixe en bas de l'ecran, un pictogramme
   au trait au-dessus de chaque libelle ; en ligne sur grand ecran. ---------- */
@media (max-width:699px){
  /* Un flou d'arriere-plan sur l'en-tete enfermerait la barre fixe dans celui-ci. */
  [data-menu="barre-basse"] .top{backdrop-filter:none;-webkit-backdrop-filter:none}
  [data-menu="barre-basse"] body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  [data-menu="barre-basse"] .menu{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;
    padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--rule);
    background-color:var(--paper);background-image:linear-gradient(var(--entete),var(--entete))}
  [data-menu="barre-basse"] .menu-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
    max-width:560px;margin:0 auto}
  [data-menu="barre-basse"] .menu a{flex-direction:column;gap:3px;min-height:60px;padding:6px 2px;border-radius:0;
    border-top:3px solid transparent;font-size:11.5px;line-height:1.1;white-space:normal;text-align:center}
  [data-menu="barre-basse"] .menu a:hover{background:none}
  [data-menu="barre-basse"] .menu a[aria-current="page"]{background:none;border-top-color:currentColor}
  [data-menu="barre-basse"] .menu-picto{display:block;flex:none;width:22px;height:22px;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
}