/* =========================================================================
   En-tête du site — version ordinateur
   -------------------------------------------------------------------------
   Chargée par layouts/main.php, après style.css : elle redessine l'en-tête du
   thème sans le modifier, en s'appuyant sur son balisage existant. Tous les
   liens, la fenêtre « Ma réservation » et son formulaire restent en place.

   Sous 768px, css/mobile-skin.css masque « .header-area » : les téléphones
   reçoivent la barre d'application, cette feuille ne les concerne donc pas.

   Palette du logo : bleu marine du bus, bleu vif d'accent, rouge du lettrage.
   ========================================================================= */

:root {
  --en-navy:  var(--yb-navy, #0d233e);
  --en-blue:  var(--yb-blue, #0d65c9);
  --en-cyan:  var(--yb-cyan, #29abe2);
  --en-ink:   #16213a;
  --en-body:  #5b6b85;
  --en-line:  #e8edf5;
}

/* L'en-tête suit le défilement : la navigation reste à portée sur les longues
   pages de liste, sans occuper d'espace supplémentaire. */
.header-area {
  position: sticky; top: 0; z-index: 1030;
  background: transparent;
}

/* ---------- Bandeau de contact ------------------------------------------- */

.header-area .header-top-bar {
  background: linear-gradient(135deg, var(--yb-navy, #0d233e) 0%, var(--yb-blue-dark, #0a52a4) 100%) !important;
  padding: 0 !important;
  font-size: 13px;
  transition: max-height .25s ease, opacity .25s ease;
  max-height: 46px; overflow: hidden;
}
.header-area .header-top-bar .container-fluid { max-width: 1360px; }
.header-area .header-top-bar .list-items { margin: 0; padding: 9px 0; display: flex; gap: 22px; }
.header-area .header-top-bar .list-items li { margin: 0 !important; padding: 0 !important; }
.header-area .header-top-bar .list-items li::before { display: none !important; }
.header-area .header-top-bar a {
  color: rgba(255,255,255,.88) !important;
  font-weight: 500; transition: color .15s ease;
}
.header-area .header-top-bar a:hover { color: #fff !important; }
.header-area .header-top-bar i { color: var(--en-cyan) !important; }

/* Réseaux sociaux : des pastilles, pas des pictogrammes flottants. */
.header-area .header-right-action { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.header-area .header-right-action a {
  width: 30px; height: 30px; margin: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.12);
  transition: background .18s ease, transform .18s ease;
}
.header-area .header-right-action a:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
.header-area .header-right-action i { font-size: 13px; }

/* ---------- Barre de navigation ------------------------------------------ */

.header-area .header-menu-wrapper {
  background: rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--en-line);
  padding: 0 !important;
  transition: box-shadow .25s ease, background .25s ease;
}
.header-area .header-menu-wrapper .container-fluid { max-width: 1360px; }
.header-area .menu-wrapper { display: flex; align-items: center; gap: 26px; min-height: 76px; transition: min-height .25s ease; }

.header-area .logo { flex: 0 0 auto; }
.header-area .logo img { width: auto !important; height: 46px; transition: height .25s ease; }

/* La navigation prend la place disponible et se centre. */
.header-area .main-menu-content { flex: 1 1 auto; min-width: 0; }
.header-area .main-menu-content nav > ul {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap;
}
.header-area .main-menu-content ul li { margin: 0 !important; padding: 0 !important; }
.header-area .main-menu-content ul li > a {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px !important; border-radius: 10px;
  color: var(--en-body) !important;
  font-size: 14.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
.header-area .main-menu-content ul li > a i { font-size: 15px; opacity: .75; transition: opacity .16s ease; }
.header-area .main-menu-content ul li > a:hover { color: var(--en-blue) !important; background: #f2f6fd; }
.header-area .main-menu-content ul li > a:hover i { opacity: 1; }

/* L'onglet courant : pastille bleue pleine. Le thème ne colorait que le texte,
   ce qui se repérait mal au milieu de sept entrées. */
.header-area .main-menu-content ul li.activenav > a {
  color: #fff !important;
  background: linear-gradient(135deg, var(--yb-navy, #0d233e) 0%, var(--yb-blue-dark, #0a52a4) 100%);
  box-shadow: 0 6px 16px rgba(37,99,235,.28);
}
.header-area .main-menu-content ul li.activenav > a i { opacity: 1; }

/* ---------- Appel à l'action --------------------------------------------- */

.header-area .nav-btn { flex: 0 0 auto; }
.header-area .nav-btn .theme-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px !important;
  border: 0 !important; border-radius: 999px !important;
  background: linear-gradient(135deg, var(--yb-navy, #0d233e) 0%, var(--yb-blue-dark, #0a52a4) 100%) !important;
  color: #fff !important; font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(13,35,62,.22);
  transition: transform .16s ease, filter .16s ease;
}
.header-area .nav-btn .theme-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
/* Pas de pictogramme ajouté par la feuille : la police d'icônes ne garantit pas
   le glyphe, et un carré vide vaut moins qu'un bouton net. Il est posé dans le
   balisage, où l'on voit ce que l'on met. */

/* ---------- État compact au défilement ----------------------------------- */

/* Passé quelques dizaines de pixels, le bandeau de contact s'efface et la barre
   se resserre : la navigation reste présente sans manger l'écran. */
.header-area.is-compact .header-top-bar { max-height: 0; opacity: 0; }
.header-area.is-compact .header-menu-wrapper {
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 6px 24px rgba(13,35,62,.10);
}
.header-area.is-compact .menu-wrapper { min-height: 64px; }
.header-area.is-compact .logo img { height: 38px; }

/* ---------- Largeurs intermédiaires -------------------------------------- */

@media (max-width: 1199.98px) {
  .header-area .main-menu-content ul li > a { padding: 8px 10px !important; font-size: 13.5px; }
  .header-area .main-menu-content ul li > a i { display: none; }
  .header-area .menu-wrapper { gap: 16px; }
}
@media (max-width: 991.98px) {
  /* Le thème bascule ici sur son menu déroulant : on lui rend la main plutôt
     que de réinventer un comportement qu'il gère déjà. */
  .header-area { position: static; }
  .header-area .menu-wrapper { min-height: 68px; }
  .header-area .main-menu-content nav > ul { justify-content: flex-start; }
}