/* ===========================================================================
   EN-TÊTE — le bandeau de marque
   ===========================================================================

   Trois zones, dans cet ordre : le logo et le nom de l'exploitant à gauche, le
   nom du module au centre, une zone libre à droite (compte, déconnexion,
   bascule de thème, ce que le module veut).

   Fond `--iav-bleu-marque`. Le blanc y donne 7,92:1, la ligne de slogan
   `--iav-texte-sur-marque` 5,60:1 — tous deux au-dessus du seuil AA.

   LE LOGO N'EST PAS CARRÉ. `assets/logo-document.png` fait 400 × 196, et son
   dessin n'occupe qu'une bande centrale de son canevas. La règle qui suit fixe
   la HAUTEUR et laisse la largeur suivre ; poser une largeur, ou supposer un
   carré, déforme l'image. Le piège est documenté, il a déjà servi.

   Voir `entete.html` pour le balisage exact.
   =========================================================================== */

.iav-entete {
  display: flex;
  align-items: center;
  gap: var(--iav-espace-grand, 16px);
  padding: var(--iav-entete-marge, 12px) var(--iav-espace-grand, 16px);
  background: var(--iav-bleu-marque, #215387);
  color: var(--iav-texte-inverse, #FFFFFF);
  /* Le bandeau ne se comprime pas quand la page est une colonne flex : sans
     cette ligne, il se tasse sur une page longue et le logo s'écrase. */
  flex: 0 0 auto;
}

/* --- Zone 1 : la marque ---------------------------------------------------- */

.iav-entete-marque {
  display: flex;
  align-items: center;
  gap: var(--iav-espace-petit, 8px);
  /* Le lien du logo ne se souligne pas : ce n'est pas du texte à lire. */
  text-decoration: none;
  color: inherit;
}
.iav-entete-marque:hover, .iav-entete-marque:focus { text-decoration: none; }

.iav-entete-logo {
  /* HAUTEUR fixée, largeur libre. Voir l'avertissement en tête de fichier. */
  height: var(--iav-entete-logo-hauteur, 32px);
  width: auto;
  display: block;
}

/* Les deux textes de marque, empilés. Chacun dans son propre span : c'est ce
   qui permet de retirer la signature sans emporter la raison sociale. */
.iav-entete-textes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.iav-entete-societe {
  font-family: var(--iav-police-titre, Inter, -apple-system, sans-serif);
  font-size: var(--iav-entete-taille-societe, 16px);
  font-weight: var(--iav-graisse-forte, 700);
  line-height: var(--iav-interligne-serre, 1.3);
  color: var(--iav-texte-inverse, #FFFFFF);
  white-space: nowrap;
}

.iav-entete-slogan {
  font-size: var(--iav-entete-taille-slogan, 12px);
  font-weight: var(--iav-graisse-normale, 400);
  line-height: var(--iav-interligne-serre, 1.3);
  color: var(--iav-texte-sur-marque, #C7DBF2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Zone 2 : le nom du module --------------------------------------------- */

.iav-entete-module {
  /* Il prend la place restante : c'est ce qui pousse la zone de droite à droite
     sans avoir à la positionner. */
  flex: 1 1 auto;
  font-size: var(--iav-entete-taille-module, 19px);
  font-weight: var(--iav-graisse-semi, 600);
  color: var(--iav-texte-inverse, #FFFFFF);
  /* Un nom de module trop long coupe proprement au lieu de pousser la zone de
     droite hors de l'écran. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- DROITE : deux éléments, et rien d'autre -------------------------------
   Règle du 24/08/2026. La barre affichait « David », « Se déconnecter »,
   « Mode sombre » à la suite, en texte libre — une file de mots qui grossit à
   chaque besoin, et que chaque page finit par réinventer.

   Il n'y a plus que la pastille de thème et la roue dentée. Tout le reste vit
   dans le menu. Rien ne s'ajoute jamais ici.
   --------------------------------------------------------------------------- */

.iav-entete-droite {
  display: flex;
  align-items: center;
  gap: var(--iav-espace-petit, 8px);
  flex: 0 0 auto;
}

/* --- La pastille soleil / lune ---------------------------------------------
   Un interrupteur, pas un bouton-texte : deux icônes fixes et un curseur qui
   glisse de l'une à l'autre. C'est la forme que tout le monde reconnaît.

   Dimensions sur jetons — même règle que le reste du bandeau depuis SOCLE 02.
   --------------------------------------------------------------------------- */

.iav-entete-theme {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: var(--iav-entete-bascule-largeur, 52px);
  height: var(--iav-entete-bascule-hauteur, 26px);
  padding: 0 var(--iav-entete-bascule-retrait, 6px);
  border: var(--iav-trait, 1px) solid var(--iav-voile-bordure, rgba(255, 255, 255, 0.35));
  border-radius: var(--iav-rayon-rond, 999px);
  background: var(--iav-voile-survol, rgba(255, 255, 255, 0.14));
  color: var(--iav-texte-inverse, #FFFFFF);
  font-size: var(--iav-entete-bascule-icone, 12px);
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.iav-entete-theme:hover { background: var(--iav-voile-appuye, rgba(255, 255, 255, 0.24)); }

/* Le curseur glisse ; les deux icônes restent en place. Un curseur qui
   apparaît et disparaît ne dit pas dans quel sens on va. */
.iav-theme-curseur {
  position: absolute;
  top: 50%;
  left: 3px;
  width: var(--iav-entete-bascule-curseur, 18px);
  height: var(--iav-entete-bascule-curseur, 18px);
  /* La moitié de sa hauteur, calculée : un `-9px` écrit à la main ne suit
     pas le jeton, et le curseur se décentre dès qu'on change sa taille. */
  margin-top: calc(var(--iav-entete-bascule-curseur, 18px) / -2);
  border-radius: var(--iav-rayon-rond, 999px);
  background: var(--iav-texte-inverse, #FFFFFF);
  transition: transform 0.16s ease;
}
.iav-entete-theme[aria-pressed="true"] .iav-theme-curseur {
  transform: translateX(calc(var(--iav-entete-bascule-largeur, 52px)
                             - var(--iav-entete-bascule-curseur, 18px) - 6px));
}

/* L'icône que le curseur recouvre s'efface : sinon elle transparaît au
   travers, et les deux se lisent en même temps. */
.iav-theme-soleil, .iav-theme-lune { position: relative; z-index: 1; opacity: 0.55; }
.iav-entete-theme[aria-pressed="false"] .iav-theme-soleil { opacity: 0; }
.iav-entete-theme[aria-pressed="true"]  .iav-theme-lune   { opacity: 0; }

/* --- La roue dentée et son menu -------------------------------------------- */

.iav-entete-menu { position: relative; flex: 0 0 auto; }

.iav-entete-roue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 36 px : une cible qu'on atteint au doigt. En dessous de 32 on la rate. */
  width: var(--iav-entete-roue-bouton, 36px);
  height: var(--iav-entete-roue-bouton, 36px);
  border: var(--iav-trait, 1px) solid transparent;
  border-radius: var(--iav-rayon, 8px);
  background: transparent;
  color: var(--iav-texte-inverse, #FFFFFF);
  font-size: var(--iav-entete-roue-icone, 17px);
  line-height: 1;
  cursor: pointer;
}
.iav-entete-roue:hover,
.iav-entete-roue[aria-expanded="true"] {
  background: var(--iav-voile-survol, rgba(255, 255, 255, 0.14));
}

.iav-menu-liste {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 200px;
  padding: var(--iav-espace-minuscule, 4px);
  background: var(--iav-fond-page, #FFFFFF);
  border: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
  border-radius: var(--iav-rayon, 8px);
  box-shadow: var(--iav-ombre-flottante, 0 4px 12px rgba(27, 39, 51, 0.12));
}
/* `hidden` fait le masquage : il retire l'élément du rendu ET de la lecture
   d'écran. Une règle `display` seule laisserait le menu navigable au clavier
   alors qu'il est fermé. */
.iav-menu-liste[hidden] { display: none; }

.iav-menu-utilisateur {
  margin: 0;
  padding: var(--iav-espace-petit, 8px) var(--iav-espace-moyen, 12px);
  border-bottom: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
  font-size: var(--iav-taille-secondaire, 12px);
  color: var(--iav-texte-secondaire, #5A6B7F);
}
.iav-menu-utilisateur-nom {
  display: block;
  font-weight: var(--iav-graisse-semi, 600);
  color: var(--iav-texte-principal, #1B2733);
  font-size: var(--iav-taille-texte, 14px);
}

.iav-menu-entree {
  display: block;
  padding: var(--iav-espace-petit, 8px) var(--iav-espace-moyen, 12px);
  border-radius: var(--iav-rayon-petit, 4px);
  color: var(--iav-texte-principal, #1B2733);
  font-size: var(--iav-taille-texte, 14px);
  text-decoration: none;
}
.iav-menu-entree:hover, .iav-menu-entree:focus {
  background: var(--iav-fond-survol, #EDF3FA);
  text-decoration: none;
}

/* --- Étroit ----------------------------------------------------------------
   À 360 px — le plus petit téléphone courant — LA BARRE TIENT SUR UNE LIGNE.
   C'est la contrainte, et elle se mesure.

   Ce qui cède, dans cet ordre : la signature d'abord (elle est déjà masquée par
   défaut), puis la raison sociale, puis le nom du module qui se tronque. Le
   logo, la bascule et la roue ne cèdent jamais : ce sont les seuls éléments
   qu'on vient chercher.

   Plus de `flex-wrap` : c'est lui qui faisait passer la barre en deux lignes.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .iav-entete {
    gap: var(--iav-espace-petit, 8px);
    padding-left: var(--iav-espace-moyen, 12px);
    padding-right: var(--iav-espace-moyen, 12px);
  }
  /* La raison sociale sort : le logo la porte déjà. */
  .iav-entete-textes { display: none; }
  .iav-entete-module {
    font-size: var(--iav-taille-texte, 14px);
    /* Il se tronque plutôt que de pousser la droite hors de l'écran. */
    min-width: 0;
  }
}

@media (max-width: 380px) {
  /* Sur les plus étroits, le module cède aussi sa place — mais reste lisible
     sur quelques caractères plutôt que de disparaître : c'est la seule chose
     qui dit à l'utilisateur où il est. */
  .iav-entete-module { font-size: var(--iav-taille-secondaire, 12px); }
}