/* =========================================================================
   L'EN-TÊTE DE TRAINER — le style, un seul fichier pour tout le site.
   Va avec components/entete.js (qui, lui, ne contient plus une ligne de style).
   Pour changer l'allure de la barre : c'est ICI, et nulle part ailleurs.

   Pourquoi « .tbar.at » partout ?
   Chaque page avait autrefois son propre style de barre, écrit chez elle.
   Deux classes valent plus qu'une : ce fichier l'emporte donc sur les restes
   de style des pages, sans avoir besoin de « !important ».
   ========================================================================= */

/* ---- réglages d'ensemble : change une valeur ici, tout suit --------------- */
:root{
  --at-haut:     60px;   /* hauteur de la barre */
  --at-rond:     38px;   /* flèche, bouton de langue, bouton du compte */
  --at-seuil:   760px;   /* au-dessus : menu en haut ; en dessous : menu en bas */
  --at-bord:  #E7E2F2;
  --at-violet:#4A3392;
  --at-encre: #3A3450;
  --at-gris:  #6E6884;
  --at-gris2: #928CA6;
  --at-doux:  #F3EEFB;
}

/* La place de la barre de défilement est toujours réservée : sans ça, une page
   longue et une page courte n'ont pas la même largeur utile, et toute la barre
   se décale de quelques pixels quand on change de page. */
html{ scrollbar-gutter:stable }

/* ---- la barre ------------------------------------------------------------ */
.tbar.at{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; min-height:var(--at-haut);
}
.tbar.at .grow{ flex:1 }

/* ---- la flèche « revenir » ----------------------------------------------- */
.tbar.at .back{
  width:var(--at-rond); height:var(--at-rond);
  min-width:var(--at-rond); min-height:var(--at-rond);
  flex:0 0 auto; padding:0;
  border:1px solid var(--at-bord); border-radius:50%;
  background:#fff; color:var(--at-violet);
  font-size:19px; line-height:1; text-decoration:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.tbar.at .back:active{ background:var(--at-doux) }

/* ---- le logo et le nom de la page ---------------------------------------- */
.tbar.at .logo{
  display:flex; align-items:center; gap:8px;
  font-weight:900; font-size:16px;
  /* c'est le logo qui se serre quand la fenêtre rétrécit, jamais le menu */
  flex:1 1 auto; min-width:0;
}
.tbar.at .logo .m{
  width:30px; height:30px; flex:0 0 auto; border-radius:8px;
  background:linear-gradient(135deg,#4A3392,#7C5FCF);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.tbar.at .logo .tt{ display:flex; flex-direction:column; min-width:0; line-height:1.15 }
.tbar.at .logo .txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tbar.at .logo small{
  display:block; font-size:10.5px; font-weight:600;
  color:var(--at-gris); letter-spacing:.02em;
}

/* ---- le bouton du compte -------------------------------------------------- */
.tbar.at .ava{
  width:var(--at-rond); height:var(--at-rond);
  min-width:var(--at-rond); min-height:var(--at-rond);
  flex:0 0 auto; border:0; border-radius:50%;
  background:linear-gradient(135deg,#7C5FCF,#DB2777); color:#fff;
  font-weight:800; font-size:14px; text-decoration:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.tbar.at .ava:active{ filter:brightness(.95) }

/* ---- le choix de la langue ------------------------------------------------ */
.tbar.at .lang{ position:relative; flex:0 0 auto }
.tbar.at .lang .btn{
  height:var(--at-rond); min-height:var(--at-rond);
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--at-bord); border-radius:99px;
  background:#fff; color:var(--at-violet);
  padding:7px 11px; font-weight:800; font-size:13px; cursor:pointer;
}
.tbar.at .lang .btn:active{ background:var(--at-doux) }
.tbar.at .lang .btn .globe{ font-size:15px }
.tbar.at .lang .btn .car{ font-size:10px; color:var(--at-gris2); transition:transform .18s }
.tbar.at .lang.open .btn{ background:var(--at-doux) }
.tbar.at .lang.open .btn .car{ transform:rotate(180deg) }

.tbar.at .lang .menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:40;
  display:none; min-width:190px; padding:6px;
  background:#fff; border:1px solid var(--at-bord); border-radius:14px;
  box-shadow:0 14px 34px rgba(60,40,120,.16);
}
.tbar.at .lang.open .menu{ display:block }
.tbar.at .lang .menu .lhd{
  padding:6px 10px 4px; font-size:10px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--at-gris2);
}
.tbar.at .lang .menu button{
  display:flex; align-items:center; gap:10px; width:100%;
  height:auto; min-height:44px; padding:10px;
  border:0; border-radius:10px; background:none;
  font-weight:700; font-size:14px; color:var(--at-encre);
  text-align:left; cursor:pointer;
}
.tbar.at .lang .menu button:active{ background:var(--at-doux) }
.tbar.at .lang .menu button.on{ background:var(--at-doux); color:var(--at-violet); font-weight:800 }
.tbar.at .lang .menu button .flag{ width:22px; font-size:18px; text-align:center }
.tbar.at .lang .menu button .chk{ margin-left:auto; color:#7C5FCF; font-weight:900; opacity:0 }
.tbar.at .lang .menu button.on .chk{ opacity:1 }

/* ---- le menu de navigation ------------------------------------------------ */
#atnav{ display:flex; align-items:center; gap:4px; font-family:inherit }
#atnav a{
  display:flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:10px;
  font-size:13px; font-weight:800; color:#3A3348;
  text-decoration:none; white-space:nowrap;
}
#atnav a.on{ background:#EDE7FB; color:var(--at-violet) }
#atnav a .e{ font-size:15px; line-height:1 }

/* ORDINATEUR — le menu est dans la barre, à droite, sans les émojis.
   Les quatre entrées font la MÊME largeur : une grille de 4 colonnes égales.
   L'entrée au nom le plus long donne la largeur, les trois autres s'alignent
   dessus — rien à recalculer si un nom change. Si la fenêtre rétrécit, les quatre
   rétrécissent ensemble — elles restent égales, sans chiffre écrit en dur. */
@media (min-width:760px){
  #atnav{
    display:grid; grid-template-columns:repeat(4,minmax(min-content,1fr));
    flex:0 0 auto; background:transparent; padding:0;
  }
  #atnav a{ justify-content:center }
  #atnav a .e{ display:none }
}

/* FENÊTRE ÉTROITE SUR ORDINATEUR (760 → 939 px) — tout se resserre d'un cran
   pour que rien ne déborde : les quatre entrées restent égales, simplement
   plus compactes, et le bouton de langue se réduit au globe. */
@media (min-width:760px) and (max-width:939px){
  #atnav a{ padding:7px 8px; font-size:12px }
  .tbar.at .lang .btn .lt{ display:none }
  .tbar.at .lang .btn{ padding:7px 10px; font-size:15px }
  .tbar.at{ gap:8px }
}

/* TÉLÉPHONE — le menu descend en bas, sous le pouce */
@media (max-width:759px){
  #atnav{
    position:fixed; left:0; right:0; bottom:0; z-index:500; gap:0;
    background:#FCFBFE; border-top:1px solid #EDE9F6;
    padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -2px 14px rgba(80,50,160,.07);
  }
  #atnav a{
    flex:1; flex-direction:column; gap:2px; justify-content:center;
    text-align:center; font-size:10px; padding:5px 1px;
    min-height:48px; overflow:hidden;
    /* sur un petit téléphone, un nom long passe à la ligne au lieu d'être coupé */
    white-space:normal; line-height:1.1;
  }
  /* la page ne doit pas se cacher derrière le menu */
  body.at-bas{ padding-bottom:64px }
  /* la place manque : le sous-titre et le mot de la langue s'effacent */
  .tbar.at{ gap:8px; padding:10px 12px }
  .tbar.at .logo small{ display:none }
  .tbar.at .lang .btn .lt{ display:none }
  .tbar.at .lang .btn{ padding:7px 10px; font-size:15px }
}