/**
 * @file
 * La barre du haut de TC Horizon sur toute la largeur de l’écran.
 *
 * Le composant header (tc_components) centre son contenu dans la largeur
 * de page (1280 px). Ici, comme sur les grands sites de voyage, le logo et
 * le menu partent du bord gauche et les services (téléphone, compte,
 * langues) finissent au bord droit, avec une marge qui suit l’écran.
 */
/* Précédé de .tc-header : la feuille du composant se charge après celle-ci. */
.tc-header .tc-header__inner {
  max-width: none;
  padding-inline: clamp(16px, 2vw, 32px);
}

/* Les éléments de la barre, tous du même style (comme sur Evaneos) : même
 * taille, même graisse, blanc atténué au repos et blanc plein au survol,
 * sans pastille de fond. Sur grand écran seulement : le tiroir du téléphone
 * garde sa mise en page. */
@media (min-width: 901px) {
  .tc-header .tc-header__nav-list {
    gap: 8px;
  }

  .tc-header .tc-header__services {
    gap: 8px;
  }

  .tc-header .tc-header__services-list {
    gap: 8px;
  }

  .tc-header .tc-header__nav-list a,
  .tc-header .tc-header__phone,
  .tc-header .tc-header__services-list a,
  .tc-header .tc-header__account,
  .tc-header .tc-header__languages a {
    padding: 4px 8px;
    border-radius: 0;
    background: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: rgb(255 255 255 / 70%);
    opacity: 1;
    text-decoration: none;
    transition: color 160ms ease;
  }

  .tc-header .tc-header__nav-list a:hover,
  .tc-header .tc-header__nav-list a:focus-visible,
  .tc-header .tc-header__nav-list a[aria-current],
  .tc-header .tc-header__phone:hover,
  .tc-header .tc-header__phone:focus-visible,
  .tc-header .tc-header__services-list a:hover,
  .tc-header .tc-header__services-list a:focus-visible,
  .tc-header .tc-header__account:hover,
  .tc-header .tc-header__account:focus-visible,
  .tc-header .tc-header__account[aria-expanded="true"],
  .tc-header .tc-header__languages a:hover,
  .tc-header .tc-header__languages a.is-active {
    background: none;
    color: #FFFFFF;
    text-decoration: none;
  }

  /* Les langues gardent leurs capitales, à la même taille que le reste. */
  .tc-header .tc-header__languages a {
    letter-spacing: .04em;
  }
}

/* L'en-tête comme sur Evaneos.
 *
 * En haut de page, sur le visuel d'ouverture : aucun fond, le voile de la
 * photo suffit à la lisibilité ; un filet blanc à 10 % sépare la barre du
 * visuel. Ailleurs, la barre garde son fond plein.
 *
 * Une fois la barre sortie de l'écran (js/header.js) : elle se cache quand on
 * descend et revient, collée en haut avec un fond plein, dès qu'on remonte. */
.tc-header.tc-header {
  transition: transform 250ms ease, background-color 250ms ease;
}

.tc-header.tc-header--transparent {
  position: absolute;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.tc-header.tc-header--transparent::before {
  content: none;
}

/* Fixe plutôt que collante : la zone qui la contient n'est pas plus haute
 * qu'elle. Le script réserve sa place quand elle n'était pas superposée. */
.tc-header.is-scrolled {
  position: fixed;
  inset: var(--drupal-displace-offset-top, 0px) 0 auto;
  background: var(--tc-night, #141311);
}

.tc-header.is-hidden {
  transform: translateY(-100%);
}

/* Le passage en barre collante ne s'anime pas : il se fait hors de l'écran. */
.tc-header.is-instant {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .tc-header.tc-header {
    transition: none;
  }
}

/* Le logo est un mot-symbole (« tripcomposer » sur une ligne) : à la hauteur
 * d'un emblème (46 px, jeton du composant), il écraserait la barre. Doublé
 * pour passer devant la règle du composant, qui se charge après. */
.tc-header.tc-header {
  --tc-logo-height: 24px;
}

@media (max-width: 900px) {
  .tc-header.tc-header {
    --tc-logo-height: 21px;
  }
}