/* Ouverture des menus sans JavaScript.
   Dans la version Next, les menus n'existaient dans le DOM que dépliés : leur
   affichage était piloté par l'état React. Ici ils sont toujours présents, et
   c'est ce fichier — le seul ajout au CSS extrait — qui les plie et les déplie.
   Aucune règle du CSS d'origine n'est modifiée. */

/* --- menus déroulants du header (desktop) --- */

.search-dropdown-container .search-dropdown,
.lang-selector .lang-dropdown {
  display: none;
}

.search-dropdown-container:hover .search-dropdown,
.search-dropdown-container:focus-within .search-dropdown,
.lang-selector:hover .lang-dropdown,
.lang-selector:focus-within .lang-dropdown {
  display: block;
}

/* Les items étaient des <button> ; devenus des <a>, ils reprennent le décor
   que le CSS d'origine posait sur les boutons. */
.search-dropdown-item,
.lang-option {
  text-decoration: none;
}

.user-type-button,
.login-button,
.signup-button,
.mobile-choice-btn,
.mobile-nav-link,
.mobile-btn {
  text-decoration: none;
}

.logo-container img {
  max-width: none;
}

/* --- menu mobile, ouvert par la case à cocher du burger --- */

.menu-mobile-etat {
  display: none;
}

/* Reprend à l'identique ce que faisait .mobile-menu.active.

   **IL Y MANQUAIT LE `transform`, ET LE MENU SE REFERMAIT TOUT SEUL.**
   Corrigé le 26/10/2026, après que le titulaire l'a constaté sur un vrai
   téléphone : le menu s'ouvrait, puis disparaissait en une demi-seconde.

   La cause tient en trois règles qui ne se connaissent pas :

     globals.css:2324, sous `@media (max-width: 1290px)` — donc sur tout
         téléphone — pose `.mobile-menu { transform: translateX(100%);
         transition: transform 0.3s }`. Le menu est rangé hors écran, à
         droite.
     globals.css:2339 le ramène avec `.mobile-menu.active { transform:
         translateX(0) }`. **`.active` était posée par React** ; la
         conversion en PHP l'a remplacée par cette case à cocher, et n'a
         repris que le `display`.
     header.css:265 ajoute `animation: luxuryFadeIn 0.5s`, dont les clés
         animent `transform: translateY(-10px) → translateY(0)`.

   **C'EST L'ANIMATION QUI MONTRAIT LE MENU.** Pendant une demi-seconde, ses
   clés prennent la main sur le `transform` et effacent le `translateX(100%)`
   — le menu est à l'écran. L'animation finie, la propriété retombe sur la
   règle de base, et le menu glisse à droite en 0,3 s. Ouvert, puis refermé,
   sans que personne y touche.

   **CE N'EST PAS UNE RÉGRESSION DU 25-26/10.** `globals.css` n'a pas bougé
   depuis le 24/08, `header-menus.css` depuis le 23/08, et le balisage du
   burger n'a pas changé aujourd'hui. Le défaut date de la conversion.

   Une règle dans ce fichier-ci, et non dans `globals.css` : l'en-tête de ce
   fichier dit qu'aucune règle du CSS d'origine n'est modifiée. Sa
   spécificité (0,3,0) l'emporte sur `.mobile-menu` (0,1,0). */
.menu-mobile-etat:checked ~ .mobile-menu {
  display: block;
  transform: translateX(0);
  animation: luxuryFadeIn 0.5s ease-out;
}

/* Le burger est un <label> : il doit se comporter comme le <button> d'origine. */
.menu-toggle {
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 1290px) {
  .menu-toggle {
    display: flex;
  }
}

/* --- menu utilisateur (session ouverte) --- */

.user-menu .user-menu-dropdown {
  display: none;
}

.user-menu:hover .user-menu-dropdown,
.user-menu:focus-within .user-menu-dropdown {
  display: block;
}

.user-menu-item:hover {
  background: rgba(249, 249, 246, 0.5);
}

/* --- franchir l'espace entre le bouton et son menu ---

   `.lang-dropdown` s'ouvre à `top: calc(100% + 0.5rem)` : entre le bouton et le
   panneau, il y a un demi-rem où le pointeur n'est plus sur `.lang-selector` ni
   sur le menu. Le menu se refermait donc en cours de route, avant d'avoir pu
   atteindre la langue voulue. Un pont invisible, rattaché au panneau lui-même,
   couvre cet écart : le survol du panneau vaut survol du sélecteur, puisque
   c'est son descendant. Les autres menus reçoivent le même pont — leur écart
   est nul aujourd'hui, mais rien ne garantit qu'il le reste. */

/* Le pont est porté par le **conteneur**, pas par le panneau : celui-ci a
   `max-height: 300px; overflow-y: auto`, et un pseudo-élément posé hors de sa
   boîte y serait rogné — le pont ne couvrait alors rien du tout. */
.lang-selector::after,
.search-dropdown-container::after,
.user-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  height: 0.75rem;
}

/* Le pont doit être aussi large que le panneau qu'il rejoint, et du même côté :
   le bouton de langue fait une cinquantaine de pixels, son menu cent soixante,
   aligné à droite. Un pont limité à la largeur du bouton laissait passer à côté
   tout trajet un peu oblique — c'est-à-dire le trajet naturel. */
.lang-selector::after {
  right: 0;
  width: 180px;
}

.search-dropdown-container::after,
.user-menu::after {
  left: 0;
  right: 0;
  min-width: 200px;
}

/* Le menu reste ouvert tant que le pointeur est sur le bouton, sur le pont ou
   sur le panneau ; et il s'ouvre aussi au clavier, ce qui était déjà le cas. */
.lang-selector:hover .lang-dropdown,
.lang-selector .lang-dropdown:hover {
  display: block;
}

/* La croix de fermeture du menu mobile — 26/10/2026.
   Posée dans ce fichier comme le reste de l'ouverture sans JavaScript.
   **QUARANTE-QUATRE PIXELS**, la plus petite cible tactile admise. */
.mobile-menu-fermer {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  /* Le cadre reste discret : c'est la cible qui fait 44 px, pas le dessin. */
  border-radius: 50%;
}

.mobile-menu-fermer:hover,
.mobile-menu-fermer:focus-visible {
  background: rgba(0, 0, 0, 0.05);
}

/* L'en-tête du menu doit porter le repère de position de la croix. */
.mobile-menu .mobile-menu-header {
  position: relative;
}