/* entete-libra.css : ce que LIBRA ajoute à l'en-tête du socle (entete.css, copie
   figée de ~/Model/web, jamais modifiée). Aucune valeur en dur : tout vient de
   tokens.css de LIBRA.

   • Le logo de LIBRA est bleu sur fond transparent : posé tel quel sur le
     bandeau bleu, il disparaîtrait. Il est donc porté par une pastille claire.
   • à droite, l'icône du compte (buste) : « Se connecter » pour un visiteur, le
     menu du compte une fois connecté (mission « LIBRA public 06 »). */

.libra-entete-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--espace-1) / 2);
  border-radius: var(--rayon);
  background: var(--fond-bloc);
  flex: none;
}

.libra-entete .iav-entete-societe {
  font-size: var(--taille-intertitre);
  letter-spacing: 0.04em;
}

/* L'icône du compte (mission « LIBRA public 06 ») : un buste, en contour pour un
   visiteur, plein avec un repère pour un compte connecté. La cible fait 44 px de côté
   (--pilule-hauteur), l'icône 24 px. Le survol est celui de la roue du socle. */
.libra-entete .libra-entete-compte {
  position: relative;
  width: var(--pilule-hauteur);
  height: var(--pilule-hauteur);
  border-radius: var(--rayon-rond);
  color: var(--texte-sur-marque);
  text-decoration: none;
}
.libra-entete-compte:focus-visible {
  outline: var(--trait-focus) solid var(--fond-bloc);
  outline-offset: calc(var(--trait-epais) * -1);
}
.libra-buste { width: var(--entete-icone); height: var(--entete-icone); display: block; }
.libra-buste path[fill="none"] { stroke-width: var(--trait-epais); }
/* Le repère « connecté » : une petite pastille claire, en bas à droite du buste. */
.libra-entete-repere {
  position: absolute;
  right: calc(var(--espace-1) + var(--trait));
  bottom: calc(var(--espace-1) + var(--trait));
  width: var(--espace-1);
  height: var(--espace-1);
  border: var(--trait-epais) solid var(--bleu-marque);
  border-radius: var(--rayon-rond);
  background: var(--succes-bordure);
}

/* Les infobulles de l'en-tête : la classe `infobulle` des tuiles (même style), seule
   leur place change. Sous la barre, collées à un bord, jamais plus larges que
   l'écran moins ses marges : elles ne débordent pas. */
.libra-entete .libra-bulle {
  /* Deux classes : la règle de place de `infobulle.css` (chargée après) ne l'emporte pas. */
  top: calc(100% + var(--espace-1));
  width: max-content;
  max-width: min(calc(var(--tuile-largeur-min) * 1.5), calc(100vw - 2 * var(--espace-2)));
  font-weight: var(--graisse-normale);
  text-align: left;
  white-space: normal;
}
.libra-entete .libra-bulle-gauche { left: var(--espace-2); right: auto; }
.libra-entete .libra-bulle-droite { right: var(--espace-2); left: auto; }

/* Le socle masque la zone « raison sociale » sous 640 px, parce qu'il compte sur
   le nom du module au centre. Chez LIBRA, c'est cette zone qui porte « LIBRA » :
   elle reste donc affichée au téléphone (défaut de la mission 02, corrigé ici,
   sans toucher le socle). */
@media (max-width: 40rem) {
  .libra-entete .iav-entete-textes { display: flex; }
}

/* --- En-tête collé qui se réduit au défilement (mission « LIBRA public 05 ») ---
   • La barre reste collée en haut ; sa hauteur est FIXÉE par jeton, pour que la
     version réduite se calcule sans mesure.
   • SANS SAUT DU CONTENU : réduite, la barre perd de la hauteur mais gagne la
     même marge basse. Sa place dans la page ne change donc jamais.
   • La bascule est posée par js/entete-reduit.js (IntersectionObserver, aucun
     calcul au défilement).
   • Le bouton de droite s'efface en fondu, puis `visibility: hidden` le retire
     des clics et du clavier (et `inert`, posé par le script, le redit). */
html { scroll-padding-top: var(--entete-hauteur); }

.libra-entete {
  position: sticky;
  top: 0;
  z-index: var(--plan-entete);
  box-sizing: border-box;
  height: var(--entete-hauteur);
  padding-block: 0;
  transition: height var(--duree-entete) var(--courbe), margin-bottom var(--duree-entete) var(--courbe);
}
.libra-entete .iav-entete-logo { transition: height var(--duree-entete) var(--courbe); }
.libra-entete .libra-entete-pastille { transition: padding var(--duree-entete) var(--courbe); }
.libra-entete .iav-entete-droite {
  transition: opacity var(--duree-entete) var(--courbe), visibility 0s linear 0s;
}

.libra-entete.libra-reduit {
  height: var(--entete-hauteur-reduite);
  margin-bottom: calc(var(--entete-hauteur) - var(--entete-hauteur-reduite));
}
.libra-reduit .iav-entete-logo { height: var(--entete-logo-reduit); }
.libra-reduit .libra-entete-pastille { padding: calc(var(--espace-1) / 4); }
.libra-reduit .iav-entete-droite {
  opacity: 0;
  visibility: hidden;
  /* La visibilité ne tombe qu'à la FIN du fondu, sinon le fondu ne se verrait pas. */
  transition: opacity var(--duree-entete) var(--courbe), visibility 0s linear var(--duree-entete);
}

/* Le témoin du défilement : invisible, de la hauteur de l'en-tête, en haut de page. */
.libra-entete-sentinelle {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--trait);
  height: var(--entete-hauteur);
  pointer-events: none;
}