/* --- ouverture et fermeture : glissement et fondu ---
   L'attribut `hidden` reste la seule source de vérité : le script ne fait que
   le poser ou l'ôter, toute l'animation est décrite ici.
   Le masquage passe par `visibility`, pas par `display: none`. Une première
   version s'appuyait sur `transition-behavior: allow-discrete` et
   `@starting-style` pour animer malgré `display: none` : c'est plus élégant,
   mais tout navigateur qui ignore l'un des deux escamote l'animation — et rien
   ne le signale. Avec `visibility`, l'élément garde sa boîte (il est en
   `position: fixed`, il ne décale donc rien), le glissement et le fondu sont
   des transitions ordinaires qui fonctionnent partout, et le panneau caché
   reste hors du parcours de tabulation comme de l'arbre d'accessibilité. */
:root {
  --ub-glissement: 0.34s;
  /* Décélération franche : rapide au départ, posée à l'arrivée — le panneau
     semble tiré, pas lancé. */
  --ub-glissement-courbe: cubic-bezier(0.32, 0.72, 0, 1);
  --ub-fondu: 0.26s;

  /* Sortie : accélération plutôt que décélération, et surtout un fondu retardé.
     Un fondu qui part en même temps que le glissement vide le panneau de sa
     couleur avant qu'il ait quitté l'écran — on croit alors à une disparition
     sur place, pas à un glissement. Il reste donc pleinement opaque le temps de
     parcourir la première moitié du chemin. */
  --ub-sortie: 0.32s;
  --ub-sortie-courbe: cubic-bezier(0.5, 0, 0.85, 0.4);
  --ub-sortie-fondu: 0.16s;
  --ub-sortie-attente: 0.16s;
}

.ub-voile {
  position: fixed;
  inset: 0;
  background: var(--ub-voile-fond);
  z-index: var(--ub-z-voile);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--ub-fondu) ease;
}

/* `display: block` neutralise le `display: none` que les navigateurs attachent
   à `[hidden]` : sans lui, le voile disparaîtrait d'un coup au lieu de fondre. */
.ub-voile[hidden] {
  display: block;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--ub-fondu) ease,
    visibility 0s linear var(--ub-fondu);
}

.ub-panneau {
  position: fixed;
  /* Les panneaux se collent sous la bande d'annonce et recouvrent la barre de
     navigation, comme la maquette de référence. La position du bas de l'annonce
     est mesurée au défilement (`assets/js/header-scroll.js`) : elle tombe à zéro
     dès que la bande a défilé hors de l'écran ou qu'on l'a refermée. */
  inset-block: var(--ub-annonce-bas, 0px) 0;
  /* Élargi de 290 à 380px : le champ de recherche vit maintenant dans la tête du
     panneau, et une gélule de 290px de large ne laissait plus lire le texte
     saisi. */
  inline-size: min(380px, 86vw);
  background: var(--ub-panneau-fond);
  z-index: var(--ub-z-panneau);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 14px 0 40px var(--ub-panneau-ombre);
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  /* `visibility` est absente de cette liste à dessein : la déclarer, même sur
     0s, en repousse l'effet d'une image, et le script donne le focus à la croix
     dans le même tick — un `focus()` sur un élément encore invisible est
     ignoré, et le clavier restait bloqué sur le burger. Seule la *sortie* a
     besoin d'un délai sur la visibilité, il est déclaré sous `[hidden]`. */
  transition:
    translate var(--ub-glissement) var(--ub-glissement-courbe),
    opacity var(--ub-fondu) ease;
}

/* Le panneau caché garde son `display: flex` — c'est `visibility` qui le retire
   de la vue, du parcours de tabulation et de l'arbre d'accessibilité, tout en
   laissant le glissement se dérouler. Le délai sur `visibility` est ce qui
   retient le panneau jusqu'au bout de sa sortie.
   La transition déclarée ici est celle de la *sortie* : c'est toujours l'état
   d'arrivée qui fournit les durées. */
.ub-panneau[hidden] {
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition:
    translate var(--ub-sortie) var(--ub-sortie-courbe),
    opacity var(--ub-sortie-fondu) ease-in var(--ub-sortie-attente),
    visibility 0s linear var(--ub-sortie);
}

/* Chaque panneau part et repart par le bord dont il vient. */
.ub-panneau--gauche { inset-inline-start: 0; }
.ub-panneau--gauche[hidden] { translate: -100% 0; }

.ub-panneau--droite {
  inset-inline-start: auto;
  inset-inline-end: 0;
  box-shadow: -14px 0 40px var(--ub-panneau-ombre);
}

.ub-panneau--droite[hidden] { translate: 100% 0; }

/* Mouvement réduit : les panneaux paraissent et disparaissent sans glisser ni
   fondre. Les durées tombent à zéro plutôt que de retirer les transitions, si
   bien que `display` bascule immédiatement lui aussi. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ub-glissement: 0s;
    --ub-fondu: 0s;
  }

  .ub-panneau[hidden],
  .ub-panneau--gauche[hidden],
  .ub-panneau--droite[hidden] {
    translate: 0 0;
  }
}

/* Le défilement de la page est gelé tant qu'un panneau est ouvert. */
html[data-ub-drawer='open'] body { overflow: hidden; }

.ub-panneau__lien {
  display: block;
  padding: 0.7rem 0;
  border-block-end: 1px solid var(--ub-ligne);
  color: var(--ub-encre);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.ub-panneau__lien--actif { color: var(--ub-terra); }

.ub-panneau__sous { padding-inline-start: 0.9rem; }

.ub-panneau__sous a {
  display: block;
  padding: 0.3rem 0;
  color: var(--ub-gris);
  font-size: 0.72rem;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
}

/* Le bouton hérite désormais de `.ub-barre__action` : sa couleur suit celle de
   la barre, qui change au défilement, et son alignement vient de la zone
   droite de la grille — plus de `margin-inline-start: auto` ni de gris fixe,
   qui restaient invisibles sur un héros sombre. */
.ub-panier-bouton { line-height: 0; }

/* Le contenu du panneau panier — tête, lignes, suggestions, pied — vit dans
   assets/css/panier.css : cette feuille ne garde que ce qui relève du panneau
   glissant lui-même, commun à la navigation et au panier. */