/* =====================================================================
   Bandeau haut commun des applications : carte claire flottante posée
   sur le fond de page (recette Finexo réécrite maison — coins arrondis
   en bas, ombre douce, hauteur --hauteur-entete alignée sur la tête de
   la barre latérale) et, à droite, le menu utilisateur en <details>
   (ligne d'identité, liens, sélecteur de thème, déconnexion) — aucun
   JavaScript nécessaire. Les classes .entete-marque / .entete-picto /
   .entete-titre servent aux entêtes « marque seule » hors session.
   Le placement du bandeau dans la grille .corps vit dans laterale.css
   (propriétaire de l'enveloppe), les deux fichiers évoluent ensemble.

   EXEMPLAIRE UNIQUE dans lib/public/, servi sous /commun/ par les cinq
   modules (lot 6 du socle POST, menu-commun.md §7) : toute évolution
   s'accompagne d'un bump du ?v= dans les cinq layouts et de VERSION
   dans projet/public/sw.js (cohérence contrôlée par
   outils/coherence/verifier.php, section « versions »).

   Contrat : ce fichier ne définit aucune couleur de palette ; il
   consomme les jetons suivants, que le style.css de chaque module
   déclare (thème clair + les deux blocs sombres) :
     --papier, --surface, --trait, --encre, --encre-douce, --blanc,
     --bleu, --bleu-texte, --bleu-pale, --bleu-pale-survol,
     --rouge, --rouge-pale, --focus,
     --rayon, --rayon-carte, --ombre, --hauteur-entete
   Seules les huit teintes de pastille (décorative, aria-hidden) et son
   texte blanc restent littéraux : hors champ du critère de contraste.
   ===================================================================== */

/* le bandeau : bande opaque couleur de page (le contenu défile
   dessous), la carte flottante à l'intérieur ne touche pas les bords */
.entete {
  min-height: var(--hauteur-entete);
  background: var(--papier);
  display: flex;
  align-items: stretch;
  padding: 0 1.5rem;
}
/* collant : le placement en grille (laterale.css) donne au bandeau une
   zone haute de toute la colonne, l'ancrage se fait ici */
@media (min-width: 901px) {
  .entete {
    position: sticky;
    top: 0;
    z-index: 50;
  }
}

/* la carte : coins arrondis EN BAS seulement (elle « pend » du haut de
   l'écran), ombre douce, même hauteur que la tête de la latérale */
.entete-carte {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: var(--hauteur-entete);
  padding: 0 .8rem;
  background: var(--surface);
  border-radius: 0 0 var(--rayon-carte) var(--rayon-carte);
  box-shadow: var(--ombre);
}
/* zone gauche vide (réservée aux futures icônes à compteur) : le menu
   utilisateur, seul enfant, se range à droite */
.entete-carte > .entete-nav:only-child { margin-left: auto; }

/* marque « Gouverneis - <module> » : plus dans le bandeau connecté (la
   marque vit dans la barre latérale), mais servie par les entêtes
   « marque seule » des écrans hors session */
.entete-marque {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
}
.entete-picto {
  display: block;
  color: var(--bleu-texte);
  flex: none;
}
.entete-titre {
  color: var(--bleu-texte);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
}
.entete-titre:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.entete-nav {
  display: flex;
  align-items: center;
}

/* menu déroulant : <details>, fonctionne sans JavaScript. Marges et
   graisse neutralisées : les modules stylent details/summary pour leur
   contenu (zones repliables), le menu doit y être insensible */
.menu-deroulant { position: relative; margin: 0; }
.menu-deroulant summary {
  list-style: none;
  cursor: pointer;
  margin: 0;
  font-weight: 400;
  color: var(--encre);
  padding: .3rem .75rem;
  border-radius: 999px;
  transition: color .12s ease, background-color .12s ease;
}
.menu-deroulant summary::-webkit-details-marker { display: none; }
.menu-deroulant summary::after { content: " ▾"; font-size: .8em; }
.menu-deroulant summary:hover,
.menu-deroulant summary:focus-visible,
.menu-deroulant[open] summary,
.menu-deroulant summary.menu-actif {
  color: var(--bleu-texte);
  background: var(--bleu-pale);
}
/* la carte est claire : l'anneau de focus du module suffit partout
   (l'anneau blanc du bandeau sombre n'a plus lieu d'être) */
.menu-deroulant summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.menu-liste {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 16rem;
  max-width: min(21rem, 92vw);
  display: flex;
  flex-direction: column;
  padding: .35rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  z-index: 60;
}
.entete-nav .menu-liste a {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--encre);
  text-decoration: none;
  padding: .4rem .6rem;
  border-radius: 4px;
}
/* pictogramme de l'entrée (macro entree de _pictos.html.twig),
   décoratif, il suit la couleur du texte */
.entete-nav .menu-liste a svg,
.menu-liste .lien-bouton svg { width: .95rem; height: .95rem; flex: none; }
.entete-nav .menu-liste a:hover,
.entete-nav .menu-liste a:focus-visible {
  color: var(--bleu-texte);
  background: var(--bleu-pale);
}
.entete-nav .menu-liste a[aria-current="page"] {
  color: var(--bleu-texte);
  background: var(--bleu-pale);
  font-weight: 600;
}

/* déclencheur du menu utilisateur : pastille d'initiales + nom */
.entete-nav .chip-utilisateur {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .25rem .75rem .25rem .3rem;
  font-size: .92rem;
}
.chip-initiales {
  /* 1,55 rem = hauteur d'une ligne de texte (1 rem × 1.55) */
  width: 1.55rem; height: 1.55rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: .62rem;
  font-weight: 600;
  flex: none;
  /* fin anneau : détache la teinte personnelle de la carte claire */
  box-shadow: 0 0 0 1.5px var(--trait);
}
/* teinte stable par personne, dérivée du nom (voir entete_contexte()
   dans le module) : tons soutenus mais doux, texte blanc lisible sur
   les deux thèmes ; pastille décorative (aria-hidden, nom à côté) */
.chip-initiales.teinte-1 { background: #3f6bab; }  /* bleu       */
.chip-initiales.teinte-2 { background: #3e7d5c; }  /* vert       */
.chip-initiales.teinte-3 { background: #7a4f8f; }  /* violet     */
.chip-initiales.teinte-4 { background: #b0544c; }  /* brique     */
.chip-initiales.teinte-5 { background: #a1712c; }  /* ocre       */
.chip-initiales.teinte-6 { background: #2f7d83; }  /* sarcelle   */
.chip-initiales.teinte-7 { background: #a94f74; }  /* framboise  */
.chip-initiales.teinte-8 { background: #5b5fa8; }  /* indigo     */

/* ligne d'identité en tête du déroulé : grande pastille, nom, courriel */
.menu-liste .menu-identite {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem .55rem;
  border-bottom: 1px solid var(--trait);
  margin-bottom: .35rem;
}
.chip-initiales.chip-grande {
  width: 2.1rem; height: 2.1rem;
  font-size: .8rem;
}
.menu-identite-texte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.menu-identite-texte strong { color: var(--encre); }
.menu-courriel {
  color: var(--encre-douce);
  font-size: .82rem;
  overflow-wrap: anywhere;
}

/* « Mes groupes » : information non cliquable au-dessus de la
   déconnexion (repère pendant les tests, démonstrations et formations,
   décision Yves du 24/08/2026) — noms techniques des groupes tels que
   diffusés par le SSO, un par ligne ; mêmes couples de couleurs que la
   ligne d'identité (--encre et --encre-douce sur la carte) */
.menu-liste .menu-groupes {
  margin: .35rem 0 0;
  padding: .35rem .6rem .1rem;
  border-top: 1px solid var(--trait);
}
.menu-groupes-titre {
  display: block;
  color: var(--encre);
  font-weight: 600;
}
.menu-groupes-liste {
  list-style: none;
  margin: .15rem 0 .25rem;
  padding: 0;
}
.menu-groupes-liste li,
.menu-groupes-vide {
  color: var(--encre-douce);
  font-size: .82rem;
  overflow-wrap: anywhere;
}
.menu-groupes-vide { display: block; margin: .15rem 0 .25rem; }

/* « Se déconnecter » : entrée du menu utilisateur, séparée et en rouge */
.menu-liste .menu-deconnexion {
  margin: .35rem 0 0;
  padding-top: .35rem;
  border-top: 1px solid var(--trait);
}
.lien-bouton {
  background: none; border: none; cursor: pointer;
  font: inherit;
}
.menu-liste .lien-bouton {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  text-align: left;
  color: var(--rouge);
  padding: .4rem .6rem;
  border-radius: 4px;
}
.menu-liste .lien-bouton:hover,
.menu-liste .lien-bouton:focus-visible { background: var(--rouge-pale); }

/* écran étroit : la carte prend toute la largeur en gardant ses coins
   arrondis en bas (retour Yves du 08/08/2026), le nom du déclencheur
   passe en masquage accessible (technique clip : le summary garde son
   nom pour les lecteurs d'écran), pastille seule */
@media (max-width: 575px) {
  .entete { padding: 0; }
  .chip-nom {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .entete-nav .chip-utilisateur { padding: .25rem .5rem .25rem .3rem; }
}