:root {
  --ub-barre-h: 5.5rem;
  --ub-logo-h: 52px;
  /* Sous le voile (900) et les panneaux (1000) : les panneaux se collent sous la
     bande d'annonce et recouvrent la barre de navigation, comme la maquette de
     référence. La barre porte alors sa propre croix et son champ de recherche,
     elle n'a plus besoin de rester visible. */
  --ub-z-entete: 800;
  /* La bande d'annonce, elle, passe au-dessus de tout : c'est le seul repère qui
     reste à l'écran quand un panneau est ouvert, et le voile ne doit pas
     l'assombrir. */
  --ub-z-annonce: 1100;
}

/* Sous 640px, la barre reprend la hauteur d'origine : 5,5rem y mangeraient une
   part trop visible de la fenêtre, où le héros doit rester le sujet. */
@media (max-width: 639px) {
  :root {
    --ub-barre-h: 4rem;
    --ub-logo-h: 38px;
  }
}

/* `display: contents` : l'en-tête regroupe l'annonce et la barre pour le
   balisage, mais ne doit pas former de bloc. Un vrai conteneur bornerait le
   `position: sticky` de la barre à sa propre hauteur — elle se décollerait dès
   que l'annonce sort de l'écran, au lieu de rester en haut de la fenêtre. */
.ub-entete { display: contents; }

.ub-annonce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: var(--ub-z-annonce);
  background: var(--ub-encre);
  color: var(--ub-creme);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  padding: 0.42rem 2.4rem;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}

/* `display: flex` ci-dessus l'emporterait sur le `display: none` que les
   navigateurs attachent à `[hidden]` : sans cette règle, la croix de fermeture
   poserait l'attribut sans que la barre disparaisse. */
.ub-annonce[hidden] { display: none; }

.ub-annonce__texte { margin: 0; }

.ub-annonce__fermer {
  position: absolute;
  inset-inline-end: 0.7rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  padding: 0.2rem;
}

.ub-barre {
  align-items: center;
  background: var(--ub-panneau-fond);
  border-block-end: 1px solid var(--ub-ligne);
  color: var(--ub-encre);
  display: grid;
  /* Les deux colonnes latérales partagent la place restante à égalité : le
     logo de la colonne centrale tombe donc au milieu exact de la fenêtre,
     sans dépendre de la largeur des icônes de gauche ou de droite. */
  grid-template-columns: 1fr auto 1fr;
  min-block-size: var(--ub-barre-h);
  padding-inline: 1.2rem;
  position: sticky;
  inset-block-start: 0;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  z-index: var(--ub-z-entete);
}

.ub-barre__zone {
  align-items: center;
  display: flex;
  gap: 1.1rem;
  /* Sans cette remise à zéro, une zone au contenu large repousse la colonne
     centrale et décentre le logo sur les petites largeurs. */
  min-inline-size: 0;
}

.ub-barre__zone--centre { justify-content: center; }
.ub-barre__zone--droite { justify-content: flex-end; }

.ub-barre__action {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  gap: 0.55rem;
  padding: 0.25rem 0;
  position: relative;
  text-decoration: none;
}

.ub-barre__mot {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Sous 640px, seules les icônes subsistent : les libellés « Menu » et
   « Rechercher » élargissent la zone gauche au point de décentrer le logo. */
@media (max-width: 639px) {
  .ub-barre__mot { display: none; }
  .ub-barre { padding-inline: 0.9rem; }
}

.ub-panier-compteur {
  font-size: 0.58rem;
  inset-block-start: 55%;
  inset-inline-start: 50%;
  line-height: 1;
  position: absolute;
  transform: translate(-50%, -50%);
}

.ub-logo {
  display: inline-flex;
  align-items: center;
}

/* Spécificité renforcée à dessein : les pages WooCommerce portent la classe
   `woocommerce` sur le corps du document, ce qui active `.woocommerce img
   { height: auto }` — même spécificité que `.ub-logo img`, mais chargée après,
   donc gagnante. Sans ce renforcement, le logo s'affiche en 195×255 sur toutes
   les pages boutique, recouvre le contenu et intercepte les clics. */
.ub-barre .ub-logo img {
  display: block;
  block-size: var(--ub-logo-h);
  inline-size: auto;
}

/* Relais avec le nom posé sur le héros : tant que « Ubayd » est lisible sur
   l'image, le logo de la barre reste effacé — un seul nom de marque à la fois.
   Il paraît une fois les mots partis (progression 0,55 → 0,8), pas avant.
   La classe sur la racine vient du script : sans JavaScript, le logo reste
   visible, ce qui est le comportement sûr. */
.ub-nom-anime .ub-page-flottante .ub-barre .ub-logo {
  opacity: clamp(0, calc((var(--ub-progression, 0) - 0.55) * 4), 1);
  transition: opacity 0.2s ease;
}

/* --- barre flottante au-dessus d'un héros ---
   Seules les pages qui ouvrent sur un héros portent cette variante
   (`ubayd_entete_flottante()`). La marge négative retire la barre du flux :
   le héros remonte sous elle et la photo occupe le haut de la fenêtre, tandis
   que le `position: sticky` continue de la coller au défilement.

   Le fond ne bascule pas d'un état à l'autre : son canal alpha suit la
   progression du défilement, écrite par `assets/js/header-scroll.js`. Le blanc
   monte donc au fur et à mesure — et redescend quand on remonte la page. La
   transition sur `background-color` est retirée ici : elle traînerait derrière
   le doigt, puisque la valeur est déjà recalculée à chaque image. */
.ub-entete--flottante .ub-barre {
  background-color: rgb(255 255 255 / calc(var(--ub-barre-fondu, 0) * 100%));
  border-block-end-color: rgb(var(--ub-encre-rgb) / calc(var(--ub-barre-fondu, 0) * 10%));
  color: var(--ub-creme);
  margin-block-end: calc(-1 * var(--ub-barre-h));
  transition: color 0.25s ease;
}

/* Kadence pose 80px de marge sur `.content-area` et 32px de retrait sur
   `.entry-content-wrap` : la marge négative de la barre ne suffisait pas, le
   héros démarrait 112px plus bas et laissait une bande blanche sous la barre
   transparente. Les deux règles ne s'appliquent qu'aux pages concernées, le
   reste du site garde ses respirations. */
.ub-page-flottante .content-area { margin-block-start: 0; }
.ub-page-flottante .entry-content-wrap { padding-block-start: 0; }

/* Le héros doit occuper toute la largeur, sinon la barre transparente flotte
   en partie sur les bandes blanches laissées par le conteneur Kadence
   (1290px maximum) et ses icônes blanches y deviennent invisibles.
   `overflow-x: clip` — et non `hidden`, qui créerait un conteneur de
   défilement et décollerait la barre `sticky` — absorbe le débordement des
   marges négatives sur les systèmes à barre de défilement occupante. */
.ub-page-flottante .content-area { overflow-x: clip; }

.ub-page-flottante .ub-heros {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  max-inline-size: 100vw;
}

/* Le blanc du logo et des icônes se perdrait sur un héros clair : cette ombre
   portée les détache sans assombrir la photo comme le ferait un dégradé. */
.ub-entete--flottante .ub-barre:not(.ub-barre--posee) .ub-icone {
  filter: drop-shadow(0 1px 2px rgb(var(--ub-encre-rgb) / 45%));
}

/* À mi-fondu, le fond est assez opaque pour porter l'encre : seule la couleur
   des traits bascule ici, le fond continue de suivre la progression. */
.ub-entete--flottante .ub-barre--posee {
  color: var(--ub-encre);
}

/* --- recherche, en tête du panneau de navigation --- */

.ub-recherche {
  flex: 1;
  margin: 0;
  min-inline-size: 0;
}

/* Champ en gélule, comme la maquette de référence : la loupe est posée dans la
   boîte, à gauche du texte saisi. */
.ub-recherche__boite {
  align-items: center;
  background: var(--ub-creme);
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--ub-gris);
  display: flex;
  gap: 0.6rem;
  /* Largeur imposée : un `input` porte une largeur par défaut d'une vingtaine de
     caractères, qui débordait du panneau et faisait trancher le bord arrondi. */
  inline-size: 100%;
  padding-inline: 0.9rem;
}

.ub-recherche__champ {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ub-encre);
  flex: 1;
  font-size: 0.82rem;
  /* Complément indispensable du `flex: 1` : sans lui, la largeur intrinsèque du
     champ sert de plancher et la gélule s'élargit quand même. */
  inline-size: 100%;
  min-inline-size: 0;
  padding-block: 0.62rem;
}

/* --- panneau de navigation --- */

/* La croix passe à gauche du champ : c'est l'ordre de la maquette, et le
   premier élément atteignable au clavier reste le moyen de refermer. */
.ub-panneau__tete {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-block-end: 1px solid var(--ub-ligne);
}

.ub-panneau__corps { flex: 1; padding: 1rem 1.1rem; }
.ub-panneau__liste { list-style: none; margin: 0; padding: 0; }
.ub-panneau__liste > li { position: relative; }

.ub-panneau__liste a {
  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-decoration: none;
  text-transform: uppercase;
}

.ub-panneau__chevron {
  position: absolute;
  inset-block-start: 0.6rem;
  inset-inline-end: 0;
  background: none;
  border: 0;
  color: var(--ub-gris);
  cursor: pointer;
  font-size: 0.85rem;
}

.ub-panneau__fermer {
  background: none;
  border: 0;
  color: var(--ub-gris);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.9rem;
}

.ub-panneau__pied {
  padding: 0.9rem 1.1rem;
  border-block-start: 1px solid var(--ub-ligne);
  background: var(--ub-creme);
  text-align: center;
}

.ub-panneau__devise {
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ub-gris);
  margin: 0.6rem 0 0;
}