/* ==========================================================================
   Navigation — barre d'onglets, feuilles modales, barre latérale.

   Séparée de coquille.css, qui garde la pile de vues et les en-têtes : les
   deux fichiers dépassaient ensemble la limite de 400 lignes du §14, et la
   coupure la plus lisible passe entre « ce qui porte l'écran » et « ce qui
   mène d'un écran à l'autre ».

   Aucune couleur écrite ici : uniquement des variables de tokens.css.
   ========================================================================== */


/* ==========================================================================
   Barre d'onglets — quatre bulles flottantes
   ========================================================================== */

.barre-onglets {
  position: absolute;
  left: calc(var(--pas) * 3);
  right: calc(var(--pas) * 3);
  bottom: calc(var(--pas) * 2.5 + var(--retrait-bas));
  z-index: 100;
  height: var(--hauteur-onglets);
  border-radius: 26px;
  background: color-mix(in srgb, var(--carte) 72%, transparent);
  backdrop-filter: saturate(190%) blur(26px);
  -webkit-backdrop-filter: saturate(190%) blur(26px);
  box-shadow: var(--ombre-onglets),
              inset 0 0 0 1px color-mix(in srgb, var(--carte) 70%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 calc(var(--pas) * 1.5);
}

/* Masquée pendant le geste de retour : elle flotte au-dessus de la pile et
   gênerait la lecture du glissement. */
.barre-onglets--masquee {
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.34s var(--sortie), opacity 0.24s ease;
}

/* Nommé « barre-onglets__bouton » et non « onglet » : filles.css emploie déjà
   « .onglet » pour le contenu d'un onglet de dossier, et deux règles de même
   nom pour deux choses différentes finissent par se marcher dessus. */
.barre-onglets__bouton {
  flex: 1;
  height: 54px;
  min-height: var(--cible-tactile);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--encre-55);
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.22s var(--sortie);
}
.barre-onglets__bouton:hover { text-decoration: none; }

.barre-onglets__bulle {
  position: absolute;
  inset: 4px 6px;
  border-radius: 18px;
  background: var(--primaire);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.26s var(--sortie), transform 0.38s var(--ressort);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primaire-profond) 34%, transparent);
}
.barre-onglets__icone {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  transition: transform 0.2s var(--ressort);
}
.barre-onglets__icone svg { width: 1.45rem; height: 1.45rem; }
.barre-onglets__bouton:active .barre-onglets__icone { transform: scale(0.86); }

.barre-onglets__bouton.actif { color: var(--sur-primaire); }
.barre-onglets__bouton.actif .barre-onglets__bulle { opacity: 1; transform: scale(1); }

/* ==========================================================================
   Feuilles modales
   ========================================================================== */

.voile {
  position: absolute;
  inset: 0;
  z-index: 130;
  background: color-mix(in srgb, var(--encre) 34%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s var(--sortie);
}
.voile.actif { opacity: 1; }

.feuille {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 140;
  background: var(--carte);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -10px 44px color-mix(in srgb, var(--encre) 20%, transparent);
  padding: calc(var(--pas) * 2.5) calc(var(--pas) * 4)
           calc(var(--pas) * 5 + var(--retrait-bas));
  transform: translateY(105%);
  transition: transform 0.42s var(--ressort);
  max-height: 82%;
  overflow-y: auto;
}
.feuille.actif { transform: translateY(0); }

.feuille__poignee {
  width: 38px; height: 5px;
  border-radius: 3px;
  background: var(--encre-12);
  margin: 0 auto calc(var(--pas) * 3);
}
/* Le titre, et à sa droite une destination unique. La cloche y met la
   messagerie de l'équipe : on ouvre la cloche parce qu'on nous a écrit, et
   c'est là qu'il fallait la mettre plutôt que dans le menu de la vie de
   l'internat. */
.feuille__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--pas) * 3);
}
.feuille__titre {
  font-family: var(--police-titre);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  padding: 0 var(--pas) 3px;
}
.feuille__raccourci {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  flex: 0 0 auto;
  min-height: var(--cible-tactile);
  padding: 0 calc(var(--pas) * 3);
  border-radius: var(--r-pill);
  background: var(--fond);
  color: var(--primaire-profond);
  font-size: 0.84rem;
  font-weight: 600;
}
.feuille__raccourci:hover { background: var(--survol); text-decoration: none; }

/* Le nombre de messages non lus. Absent à zéro : un « 0 » n'est pas une
   nouvelle, et une pastille toujours allumée cesse d'être regardée. */
.feuille__badge {
  min-width: 1.35rem;
  padding: 0 calc(var(--pas) * 1.5);
  border-radius: var(--r-pill);
  background: var(--danger);
  color: var(--sur-primaire);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
}
.feuille__sous-titre {
  font-size: 0.81rem;
  color: var(--encre-55);
  padding: 0 var(--pas) calc(var(--pas) * 3.5);
}

.feuille__entree {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 3.5);
  padding: calc(var(--pas) * 3) calc(var(--pas) * 3);
  border-radius: var(--r-md);
  width: 100%;
  text-align: left;
  min-height: var(--cible-tactile);
  color: var(--texte);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background var(--duree-anim) ease, transform var(--duree-anim) var(--ressort);
}
.feuille__entree:hover { background: var(--survol); text-decoration: none; }
.feuille__entree:active { background: var(--fond); transform: scale(0.985); }

.feuille__icone {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--fond);
  color: var(--primaire-profond);
}
.feuille__texte { flex: 1; min-width: 0; }
.feuille__texte b {
  display: block;
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.feuille__texte span {
  display: block;
  font-size: 0.78rem;
  color: var(--encre-55);
  margin-top: 1px;
}
.feuille__chevron { margin-left: auto; color: var(--encre-40); display: flex; }

/* ==========================================================================
   Barre latérale — ordinateur uniquement
   ========================================================================== */

.barre-laterale { display: none; }

@media (min-width: 1024px) {
  .appli { grid-template-columns: var(--largeur-barre-laterale) 1fr; }

  .barre-laterale {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pas) * 2);
    background: var(--barre-laterale);
    color: var(--sur-barre-laterale);
    padding: calc(var(--pas) * 6) calc(var(--pas) * 3);
    height: 100dvh;
    overflow-y: auto;
  }

  .barre-laterale__logo {
    display: block;
    width: 100%;
    max-width: 9.5rem;
    margin: 0 auto calc(var(--pas) * 5);
    color: var(--sur-barre-laterale);
  }

  /* « display » posé par une classe l'emporte sur la règle « [hidden] » du
     navigateur : sans cette seconde ligne, replier un groupe ne le cacherait
     pas. */
  .barre-laterale__liens { display: flex; flex-direction: column; }
  .barre-laterale__liens[hidden] { display: none; }

  /* Les groupes reprennent les feuilles du téléphone : « Étudiantes et
     Tsevet » et « Vie de l'internat » s'y ouvrent en place au lieu de couvrir
     l'écran. Même carte mentale d'un appareil à l'autre. */
  .barre-laterale__groupe { margin-top: calc(var(--pas) * 0.5); }

  .barre-laterale__groupe-tete {
    display: flex;
    align-items: center;
    gap: calc(var(--pas) * 3);
    width: 100%;
    min-height: var(--cible-tactile);
    padding: 0 calc(var(--pas) * 3);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: inherit;
    font-family: var(--police-corps);
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--duree-anim) ease;
  }
  .barre-laterale__groupe-tete:hover { background: var(--sur-barre-laterale-survol); }
  .barre-laterale__groupe-nom { flex: 1; min-width: 0; }

  /* Le chevron pointe à droite quand le groupe est replié, vers le bas quand
     il est ouvert : la rotation dit dans quel sens le tiroir va bouger. */
  .barre-laterale__chevron {
    width: 1rem; height: 1rem;
    color: var(--sur-barre-laterale-doux);
    transition: transform var(--duree-anim) var(--sortie);
  }
  .barre-laterale__groupe-tete[aria-expanded='true'] .barre-laterale__chevron {
    transform: rotate(90deg);
  }

  /* Décalés sous leur en-tête : le retrait dit l'appartenance sans qu'il
     faille un filet ni un fond. */
  .barre-laterale__groupe .barre-laterale__lien {
    padding-left: calc(var(--pas) * 8);
    font-size: 0.88rem;
  }

  .barre-laterale__lien {
    display: flex;
    align-items: center;
    gap: calc(var(--pas) * 3);
    min-height: var(--cible-tactile);
    padding: 0 calc(var(--pas) * 3);
    border-radius: var(--r-md);
    color: inherit;
    font-weight: 500;
    font-size: 0.92rem;
    transition: background var(--duree-anim) ease;
  }
  .barre-laterale__lien:hover { background: var(--sur-barre-laterale-survol); text-decoration: none; }
  .barre-laterale__lien svg { width: 1.2rem; height: 1.2rem; flex: none; }

  /* État actif en CSS statique, jamais par bascule d'utilitaire au runtime. */
  .barre-laterale__lien.actif { background: var(--primaire); color: var(--sur-primaire); }

  .barre-laterale__pied {
    margin-top: auto;
    padding-top: calc(var(--pas) * 4);
    border-top: 1px solid var(--sur-barre-laterale-bordure);
    font-size: 0.85rem;
    color: var(--sur-barre-laterale-doux);
  }

  .barre-onglets { display: none; }
  .zone-retour { display: none; }

  /* Le contenu respire et se borne : au-delà, une ligne de liste devient
     illisible d'un bout à l'autre. */
  .vue__defilement { padding: 0 calc(var(--pas) * 6) calc(var(--pas) * 10); }
  .vue__defilement > .vue__large { max-width: 76rem; }
  .entete { padding: calc(var(--pas) * 4) calc(var(--pas) * 6) calc(var(--pas) * 2); }
}