/* =========================================================================
   YadeBus — les deux barres de l'« application mobile »
   -------------------------------------------------------------------------
   Barre d'application (haut) et barre d'onglets (bas), plus la palette
   commune. Chargée par les DEUX mises en page :

     - layouts/mobile.php  (vues écrites pour le téléphone) : le shell y est
       toujours visible, le gabarit n'est servi qu'aux téléphones ;
     - layouts/main.php    (pages au balisage desktop)      : le shell n'y
       existe que sous 768px, d'où le garde-fou en bas de fichier.

   C'est le seul endroit où ces barres sont décrites : elles avaient d'abord
   été écrites deux fois, et la navigation changeait d'apparence dès qu'on
   quittait l'accueil.
   ========================================================================= */

:root {
   /* Les couleurs viennent de palette.css, chargée avant celle-ci. */
  --yb-ink:        #1f2937;   /* gray-800 */
  --yb-body:       #4b5563;   /* gray-600 */
  --yb-muted:      #9ca3af;   /* gray-400 */
  --yb-line:       #e5e7eb;   /* gray-200 */
  --yb-bg:         #f5f6f8;
  --yb-field:      #f7f8fa;
  --yb-radius:     16px;
  --yb-radius-sm:  12px;
  --yb-shadow:     0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --yb-shadow-lg:  0 12px 28px rgba(16,24,40,.14);
  --yb-appbar-h:   60px;
  --yb-tabbar-h:   64px;
}

/* ---------- Barre d'application (haut) ----------------------------------- */

.yb-appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1040;
  height: var(--yb-appbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid var(--yb-line, #e7eaf0);
}
.yb-appbar__back {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-left: -4px;
  background: var(--yb-blue-50, #ebf2fa); color: var(--yb-blue, #0d65c9); font-size: 18px;
}
.yb-appbar__logo { flex: 0 0 auto; display: flex; align-items: center; }
/* Sélecteur volontairement plus précis que la règle générale « .yb-app img {
   height: auto } » de mobile-app.css : à spécificité égale, la seconde
   l'emportait et le logo s'affichait à sa taille naturelle, débordant de la
   barre et chassant les coordonnées. */
.yb-appbar .yb-appbar__logo img {
  height: 38px; width: auto; max-width: none; display: block;
}

/* Les deux contacts tiennent sur une ligne, séparés par un filet. */
.yb-appbar__contacts {
  min-width: 0; display: flex; align-items: center; gap: 10px;
  flex-wrap: nowrap; line-height: 1.2;
}
.yb-appbar__info {
  font-size: 12.5px; font-weight: 500; color: var(--yb-ink, #101828) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.yb-appbar__info + .yb-appbar__info { padding-left: 10px; border-left: 1px solid var(--yb-line, #e7eaf0); }
.yb-appbar__info i { color: var(--yb-blue, #0d65c9); margin-right: 5px; }

/* ---------- Barre d'onglets (bas) ---------------------------------------- */

/* Fond bleu nuit : sur le gris clair du corps de page, une barre blanche se
   confondait avec le contenu ; en bleu vif, elle se lisait comme un bouton.
   Le #0d233e est la couleur de texte foncée du thème (style.css) — même
   univers, rôle distinct. La barre du haut, elle, reste blanche : le logo y
   est posé sur un fond clair. */
.yb-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  display: flex;
  /* background: #0d233e; */
  background: linear-gradient(135deg, var(--yb-navy, #0d233e), var(--yb-blue-dark, #0a52a4));
  box-shadow: 0 -6px 18px rgba(13,35,62,.22);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.yb-tabbar__item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 2px 7px;
  color: rgba(255,255,255,.72) !important;
  font-size: 10px; font-weight: 500;
}
.yb-tabbar__ico {
  width: 34px; height: 26px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; transition: background .15s, color .15s;
}
.yb-tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* À six onglets sur un écran étroit, chaque case tombe sous 55px et le plus
   long libellé se tronquait en « Logemen… ». On resserre plutôt que d'abréger
   le mot : à 9px, il tient en entier. */
@media (max-width: 369.98px) {
  .yb-tabbar__item { font-size: 9px; padding-left: 0; padding-right: 0; gap: 2px; }
  .yb-tabbar__ico { width: 30px; height: 24px; font-size: 16px; }
}
/* L'onglet courant : pastille blanche, comme dans les applications natives. */
.yb-tabbar__item.is-active { color: #fff !important; font-weight: 600; }
.yb-tabbar__item.is-active .yb-tabbar__ico { background: #fff; color: var(--yb-navy, #0d233e); }

/* ---------- Indicateur de chargement ------------------------------------- */

/* Voile clair et carte centrée portant le logo : pendant qu'une page se charge,
   l'écran précédent reste visible dessous, atténué. Piloté par
   js/yb-chargement.js, qui n'ajoute .is-on qu'une fois la navigation certaine.
   « visibility » plutôt que « display » : la transition d'opacité évite un
   clignotement sur les chargements très courts. */
/* Pas de « display » ici : il est posé en ligne (none) par la mise en page, puis
   basculé par le script. Une règle d'affichage à cet endroit reprendrait le
   dessus et ferait réapparaître le voile. */
.yb-loader {
  position: fixed; inset: 0; z-index: 2000;
  align-items: center; justify-content: center;
  background: rgba(245,246,248,.82);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.yb-loader.is-on {
  opacity: 1; visibility: visible;
  transition: opacity .18s ease, visibility 0s;
}
.yb-loader__boite {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 26px;
  background: #fff; border-radius: 18px;
  box-shadow: 0 12px 34px rgba(13,35,62,.18);
}
.yb-loader__boite img {
  width: 104px; height: auto; display: block;
  animation: yb-loader-pouls 1.4s ease-in-out infinite;
}
/* Ruban indéterminé : la durée d'un chargement n'est pas connue, une barre de
   progression chiffrée mentirait. */
.yb-loader__ruban {
  position: relative; overflow: hidden;
  width: 128px; height: 3px; border-radius: 3px;
  background: var(--yb-line, #e7eaf0);
}
.yb-loader__ruban::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--yb-blue, #0d65c9), var(--yb-navy, #0d233e));
  animation: yb-loader-glisse 1.1s ease-in-out infinite;
}
@keyframes yb-loader-pouls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@keyframes yb-loader-glisse {
  0%   { left: -45%; }
  100% { left: 100%; }
}
/* Réglage système « réduire les animations » : le voile et le logo suffisent. */
@media (prefers-reduced-motion: reduce) {
  .yb-loader__boite img,
  .yb-loader__ruban::after { animation: none; }
  .yb-loader__ruban::after { left: 0; width: 100%; opacity: .5; }
}

/* Au-dessus de 768px, les pages au balisage desktop reprennent l'en-tête et le
   pied de page du thème : le shell n'a plus lieu d'être. Les vues servies par
   layouts/mobile.php (body.yb-app) le gardent en toutes circonstances — un
   téléphone en paysage dépasse 768px sans cesser d'être un téléphone. */
@media (min-width: 768px) {
  body:not(.yb-app) .yb-appbar,
  body:not(.yb-app) .yb-tabbar,
  body:not(.yb-app) .yb-loader { display: none; }
}