/* ==========================================================================
   styles-entete.css : l'en-tête commun à toutes les pages.

   Ce fichier n'invente aucune couleur. Tout vient de design-tokens.css,
   lui-même écrit à partir de CHARTE.md. Si tu vois un #RRGGBB ici, c'est
   un bug, pas un choix.

   Le balisage est construit par entete.js. Les deux fichiers vont ensemble.
   ========================================================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* La barre elle-même. Hauteur fixe : l'en-tête ne doit jamais changer de
   taille d'une page à l'autre, sinon le contenu « saute » à la navigation. */
.entete-barre {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--esp-3);
  height: 68px;
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

/* --------------------------------------------------------------------------
   1. Le logo

   68 px de haut pour la barre parce que la charte impose 140 px de large
   minimum au logo à l'écran (CHARTE.md § 3). 150 px de large donnent 41 px
   de haut : en dessous de cette barre, il faudrait passer au pictogramme.
   -------------------------------------------------------------------------- */
.entete-logo {
  display: flex;
  align-items: center;
  flex: none;
  border-radius: var(--r-champ);
  transition: opacity var(--dur-court) var(--ease-sortie);
}

.entete-logo img {
  display: block;
  width: 150px;
  height: auto;
}

.entete-logo:hover { opacity: 0.72; }

/* --------------------------------------------------------------------------
   2. Les liens de navigation

   Un seul niveau, jamais de sous-menu déroulant. Les liens listés dans
   entete.js sont uniquement ceux dont la page existe réellement.
   -------------------------------------------------------------------------- */
.entete-liens {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  flex: 1;
  min-width: 0;
}

.entete-lien {
  --entete-taille-lien: 0.9375rem; /* 15 px, registre « interface » de la charte */
  font-size: var(--entete-taille-lien);
  font-weight: var(--graisse-moyen);
  color: var(--muted);
  text-decoration: none;
  padding: var(--esp-1) 12px;
  border-radius: var(--r-champ);
  white-space: nowrap;
  transition:
    color var(--dur-court) var(--ease-sortie),
    background-color var(--dur-court) var(--ease-sortie);
}

.entete-lien:hover {
  color: var(--ink);
  background: var(--surface-survol);
}

/* La page où l'on se trouve. Repérée par le texte et non par la couleur
   seule : un daltonien doit pouvoir la situer aussi. */
.entete-lien[aria-current="page"] {
  color: var(--ink);
  font-weight: var(--graisse-moyen);
  background: var(--fond-neutre);
}

/* --------------------------------------------------------------------------
   3. La zone de droite : se connecter, ou le nom du compte
   -------------------------------------------------------------------------- */
.entete-droite {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  flex: none;
  margin-left: auto;
}

.entete-connexion {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: var(--graisse-moyen);
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--r-bouton);
  padding: 9px 20px;
  cursor: pointer;
  transition:
    background-color var(--dur-court) var(--ease-sortie),
    transform var(--dur-court) var(--ease-sortie);
}

.entete-connexion:hover { background: var(--surface-survol); }
.entete-connexion:active { transform: translateY(1px); }

.entete-compte {
  position: relative;
}

/* Le bouton qui porte le nom du compte. */
/* Le nom porte l'orange de la marque, décidé par Valentin. C'est
   --orange-texte (#B8460F) et non --orange (#FF6B35) : l'orange vif tombe à
   2,6:1 sur le papier crème, illisible. La charte prévoit exactement cette
   déclinaison pour l'orange écrit. */
.entete-compte-bouton {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: var(--graisse-moyen);
  color: var(--orange-texte);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-bouton);
  padding: 5px 12px 5px 5px;
  cursor: pointer;
  transition:
    background-color var(--dur-court) var(--ease-sortie),
    border-color var(--dur-court) var(--ease-sortie);
}

.entete-compte-bouton:hover {
  background: var(--surface-survol);
  border-color: var(--line);
}

.entete-compte-bouton[aria-expanded="true"] {
  background: var(--surface-survol);
  border-color: var(--line);
}

/* La pastille avec l'initiale. Bleu de marque sur lavande : c'est le
   couple « information neutre » de la charte, jamais l'orange. */
.entete-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--fond-neutre);
  color: var(--blue-dark);
  font-size: var(--t-interface);
  font-weight: var(--graisse-titre);
}

/* --------------------------------------------------------------------------
   4. Le panneau flottant, façon menu Apple

   Ancré sous le nom, aligné à droite, coins arrondis, ombre de fenêtre.
   Il s'ouvre en 140 ms : perceptible, jamais spectaculaire. La transformation
   part du coin haut-droit, donc du bouton lui-même : le panneau a l'air de
   sortir du nom, pas d'apparaître au hasard.
   -------------------------------------------------------------------------- */
.entete-menu {
  position: absolute;
  top: calc(100% + var(--esp-1));
  right: 0;
  min-width: 232px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-fenetre);
  transform-origin: top right;

  /* État fermé. `visibility` en plus de l'opacité : un panneau invisible ne
     doit pas être atteignable au clavier. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition:
    opacity var(--dur-court) var(--ease-sortie),
    transform var(--dur-court) var(--ease-sortie),
    visibility 0s linear var(--dur-court);
}

.entete-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity var(--dur) var(--ease-sortie),
    transform var(--dur) var(--ease-sortie),
    visibility 0s;
}

.entete-menu-titre {
  padding: var(--esp-1) 12px var(--esp-0-5);
  font-size: var(--t-interface);
  color: var(--muted-doux);
}

.entete-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: var(--graisse-corps);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--r-champ);
  padding: 9px 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-court) var(--ease-sortie);
}

.entete-menu-item:hover { background: var(--surface-survol); }

.entete-menu-separateur {
  height: 1px;
  margin: 6px 8px;
  background: var(--line);
}

/* La réponse au clic sur « Paramètres ». La page n'existe pas : on le dit,
   on ne simule rien. Ce bloc disparaît quand la vraie page arrivera. */
.entete-menu-aconfigurer {
  padding: 9px 12px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.entete-menu[data-etat="aconfigurer"] .entete-menu-normal { display: none; }
.entete-menu:not([data-etat="aconfigurer"]) .entete-menu-aconfigurer { display: none; }

/* --------------------------------------------------------------------------
   5. Connecté ou non

   auth-partagee.js pose la classe `connecte` sur <body>. L'en-tête s'y
   accroche : aucune logique d'authentification n'est réécrite ici.
   -------------------------------------------------------------------------- */
body:not(.connecte) [data-entete-quand="connecte"] { display: none !important; }
body.connecte [data-entete-quand="deconnecte"] { display: none !important; }

/* --------------------------------------------------------------------------
   6. Mobile

   Sous 720 px, les liens de navigation quittent la barre et rejoignent le
   panneau du compte. La barre garde exactement les mêmes composants : logo
   à gauche, compte à droite.
   -------------------------------------------------------------------------- */
.entete-menu-nav { display: none; }

@media (max-width: 720px) {
  .entete-barre { gap: var(--esp-2); padding: 0 var(--esp-2); }
  .entete-liens { display: none; }
  .entete-logo img { width: 140px; }
  .entete-menu-nav { display: block; }
}

/* Clavier : l'anneau de focus de la charte, sur tous les éléments de l'en-tête. */
.entete a:focus-visible,
.entete button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  box-shadow: var(--focus-anneau);
}