/* --- héros --- */

.ub-heros {
  --ub-heros-pied: 3.6rem;

  align-items: center;
  background: var(--ub-encre);
  display: flex;
  justify-content: center;
  /* Plein écran : le nom de la marque est posé aux deux extrémités de l'image,
     il faut donc que celle-ci occupe toute la fenêtre pour que « Clothing »
     tombe en bas de l'écran et non au milieu de la page. `svh` plutôt que
     `vh` — sur mobile, `vh` compte la barre d'adresse et pousse le mot du bas
     hors de vue. */
  min-block-size: calc(100svh - var(--ub-annonce-h, 0px));
  overflow: hidden;
  position: relative;
}

/* `!important` sur la marge : Kadence pose
   `.single-content figure.wp-block-image { margin-bottom: var(--global-md-spacing) }`
   avec une spécificité (0,2,1) qui l'emporte sur `.ub-heros__fond` seul
   (0,1,0). Sans ce correctif, les 32px de marge résiduelle sous l'image
   laissaient voir le fond sombre du conteneur — la bande noire parasite
   repérée à la vérification visuelle. */
.ub-heros__fond {
  inset: 0;
  margin: 0 !important;
  position: absolute;
}

.ub-heros__fond img {
  block-size: 100% !important;
  display: block;
  inline-size: 100%;
  object-fit: cover;
  /* Cadrage sur le dos du t-shirt « La terrasse », comme la maquette
     validée : le mockup montre le recto et le verso côte à côte, et seul ce
     recadrage à l'affichage isole l'illustration qui raconte le lieu. */
  object-position: 74% 40%;
}

/* Voile sombre : sans lui, le titre en blanc se perd sur une photo claire,
   comme le t-shirt « La terrasse » choisi pour le fond. */
.ub-heros::after {
  background: var(--ub-voile-fond);
  content: '';
  inset: 0;
  position: absolute;
}

/* --- nom de la marque éclaté sur le héros ---
   « Ubayd » en haut, à l'emplacement du logo, « Clothing » au pied de l'image.
   Les deux mots forment un seul `h1`, étiré sur toute la hauteur du héros :
   d'où le `justify-content: space-between` qui les repousse aux extrémités.
   `pointer-events: none` — le titre couvre l'image, il ne doit pas intercepter
   les clics de ce qui se trouve dessous. */
.ub-heros__nom {
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: space-between;
  margin: 0;
  padding-block: 0.2rem var(--ub-heros-pied);
  pointer-events: none;
  position: absolute;
  text-align: center;
  z-index: 1;
}

/* `!important` : Kadence pose sa propre couleur de titre
   (`--global-palette3`, un gris presque noir) à une spécificité qui l'emporte
   sur nos classes — le nom restait illisible sur la photo sans ce correctif. */
.ub-heros__mot {
  color: var(--ub-creme) !important;
  display: block;
  font-family: var(--ub-serif);
  font-size: clamp(2.4rem, 8vw, 7rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Les origines de transformation sont opposées : chaque mot rapetisse vers son
   propre bord, sans jamais dériver vers le centre de l'image. */
.ub-heros__mot--haut { transform-origin: 50% 0; }
.ub-heros__mot--bas { transform-origin: 50% 100%; }

.ub-heros__mention {
  color: var(--ub-creme) !important;
  font-size: 0.62rem;
  inset-block-end: 1.7rem;
  inset-inline: 0;
  letter-spacing: 0.22em;
  margin: 0;
  position: absolute;
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
  text-underline-offset: 0.4em;
  z-index: 1;
}

/* Le rétrécissement puis l'effacement sont pilotés par la progression du
   défilement, écrite par `assets/js/header-scroll.js`. La classe sur la racine
   conditionne tout l'effet : sans JavaScript, le nom reste simplement lisible
   à pleine taille. */
.ub-nom-anime .ub-heros__mot {
  opacity: clamp(0, calc(1 - var(--ub-progression, 0) * 1.35), 1);
  scale: calc(1 - 0.55 * var(--ub-progression, 0));
}

/* Mouvement réduit : le nom disparaît sans rapetisser, l'échange avec le logo
   reste perceptible mais sans animation de taille. */
@media (prefers-reduced-motion: reduce) {
  .ub-nom-anime .ub-heros__mot { scale: 1; }
}

/* Visuel des sections éditoriales, une fois affecté par
   tools/seed-media.php : même hauteur que l'emplacement d'attente
   (.ub-attente-visuel, editorial.css) et même cadrage que le héros, sur le
   dos du t-shirt. */
.ub-piece__image {
  margin: 0 !important;
  min-block-size: 16rem;
  overflow: hidden;
}

.ub-piece__image img {
  block-size: 100% !important;
  display: block;
  inline-size: 100%;
  object-fit: cover;
  object-position: 74% 40%;
}

/* Badge « Nouveau » (inc/loop-badges.php), posé sur la vignette. */
.ub-badge {
  background: var(--ub-panneau-fond);
  color: var(--ub-encre);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  padding: 0.28rem 0.55rem;
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  text-transform: uppercase;
  z-index: 1;
}

/* « Bientôt » ne se lit pas comme « Nouveau » : l'un annonce une attente,
   l'autre une arrivée en rayon. Le camel de la marque sur fond plein le
   distingue au premier coup d'œil dans une rangée où les autres pièces sont
   achetables. */
.ub-badge--bientot {
  background: var(--ub-camel);
  color: #fff;
}

/* --- club ubayd ---
   Demande du client du 2026-08-05 : le bloc reprend le rayon et la largeur de la
   bande soins. Même montage que `.ub-soins` (editorial.css) : un hôte plein
   cadre (`.ub-club-hote`, `alignfull`, posé par le seed d'accueil) porte le
   bloc, qui se retire ensuite de la gouttière de la page. Sans cet hôte, le
   shortcode reste dans le contenu contraint de Kadence et le bloc est plus
   étroit que la bande — 150 px d'écart mesurés sur un écran de bureau.

   Le retrait est une marge du bloc et non une marge intérieure de l'hôte :
   Kadence remet à zéro les marges intérieures de tout `.alignfull` du contenu et
   l'emporterait en spécificité.

   `overflow: hidden` rogne le fond crème sur le rayon, comme sur la bande. */

.ub-club {
  background: var(--ub-creme);
  border-radius: var(--ub-rayon-bande);
  margin-block: 2.6rem;
  margin-inline: var(--ub-gouttiere-page);
  overflow: hidden;
  padding-block: 2.6rem;
  text-align: center;
}

.ub-club__kicker {
  color: var(--ub-camel);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  margin-block-end: 0.4rem;
  text-transform: uppercase;
}

.ub-club__titre {
  font-family: var(--ub-serif);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  margin-block: 0.2rem 0.6rem;
}

.ub-club__texte {
  color: var(--ub-gris);
  font-size: 0.9rem;
  margin-inline: auto;
  max-inline-size: 40ch;
}

.ub-club__message {
  color: var(--ub-terra);
  font-size: 0.82rem;
  margin-block: 1rem 0;
}

.ub-club__formulaire {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-block-start: 1.4rem;
}

.ub-club__etiquette {
  clip: rect(0 0 0 0);
  position: absolute;
}

.ub-club__champ {
  background: var(--ub-panneau-fond);
  border: 1px solid var(--ub-ligne);
  font-size: 0.85rem;
  inline-size: 18rem;
  max-inline-size: 90vw;
  padding: 0.65rem 0.9rem;
}

.ub-club__envoi {
  background: var(--ub-encre);
  border: 1px solid var(--ub-encre);
  color: var(--ub-creme);
  cursor: pointer;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 0.65rem 1.4rem;
  text-transform: uppercase;
  transition: opacity 200ms ease;
}

/* Le bouton garde son encre dans tous les états : sans cette redéclaration, le
   style de bouton de Kadence le faisait passer du noir au bleu de sa palette au
   survol — le défaut le plus voyant des trois, puisque la couleur changeait au
   lieu d'apparaître (signalé par le client le 2026-08-06).

   L'atténuation reprend celle de l'ajout au panier (assets/css/product.css) :
   c'est une même action, elle réagit de la même façon d'un écran à l'autre. */
.ub-club__envoi:hover,
.ub-club__envoi:focus,
.ub-club__envoi:active {
  background: var(--ub-encre);
  color: var(--ub-creme);
  opacity: 0.88;
}

/* --- pied de page --- */

.ub-pied {
  background: var(--ub-creme);
  border-block-start: 1px solid var(--ub-ligne);
  margin-block-start: 2rem;
}

.ub-pied__colonnes {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(4, 1fr);
  padding: 2.2rem 1.2rem 1.2rem;
}

/* La bascule est un vrai `<button>` pour l'accordéon mobile. Sur grand écran
   elle doit se lire comme le titre de colonne de la maquette : ni fond, ni
   bordure, ni curseur de clic, et le signe masqué. `inherit` sur la police évite
   qu'elle hérite de la pile du navigateur pour les contrôles de formulaire. */
.ub-pied__bascule {
  background: none;
  border: 0;
  color: inherit;
  cursor: default;
  display: block;
  font: inherit;
  inline-size: 100%;
  padding: 0;
  text-align: start;
}

.ub-pied__signe {
  display: none;
}

.ub-pied__titre {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  margin-block-end: 0.7rem;
  text-transform: uppercase;
}

.ub-pied__liens a {
  color: var(--ub-gris);
  display: block;
  font-size: 0.7rem;
  line-height: 2;
  text-decoration: none;
}

.ub-pied-barre {
  align-items: center;
  border-block-start: 1px solid var(--ub-ligne);
  color: var(--ub-gris);
  display: flex;
  font-size: 0.62rem;
  gap: 0.8rem;
  justify-content: space-between;
  letter-spacing: 0.1em;
  padding: 0.9rem 1.2rem;
  text-transform: uppercase;
}

.ub-pied-barre__moyens {
  display: flex;
  gap: 0.4rem;
}

.ub-pied-barre__moyen {
  border: 1px solid var(--ub-ligne);
  display: inline-block;
  font-size: 0.55rem;
  font-style: normal;
  padding: 0.3rem 0.45rem;
}

@media (max-width: 767px) {
  .ub-heros { min-block-size: 24rem; }

/* --- pied en accordéon (maquette `.mob .cb-acc`) ---
     Une colonne, chaque rubrique devenant une ligne repliable séparée par un
     filet. La grille perd sa gouttière et ses marges intérieures latérales : les
     filets doivent courir d'un bord à l'autre, comme sur la maquette, et une
     gouttière les aurait interrompus entre deux lignes. */
  .ub-pied__colonnes {
    gap: 0;
    grid-template-columns: 1fr;
    padding-block: 0;
    padding-inline: 0;
  }

  .ub-pied__colonne {
    border-block-end: 1px solid var(--ub-ligne);
  }

  /* Le titre et le signe aux deux bouts de la ligne. La zone de contact couvre
     toute la ligne, pas seulement le texte : c'est un accordéon au doigt. */
  .ub-pied__bascule {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 0.95rem var(--ub-gouttiere-page);
  }

  /* La marge basse servait à détacher le titre de ses liens en colonne ; sur une
     ligne repliée elle décentrerait le texte par rapport au signe. */
  .ub-pied__titre {
    margin-block-end: 0;
  }

  .ub-pied__signe {
    color: var(--ub-gris);
    display: block;
    font-size: 0.85rem;
    line-height: 1;
  }

/* Glissement à l'ouverture et à la fermeture.

     La rangée de grille passe de `0fr` à `1fr` : c'est ce qui permet d'animer
     jusqu'à la hauteur réelle du contenu, qu'aucune valeur de `max-height` ne
     connaît d'avance — les rubriques n'ont pas le même nombre de liens. La piste
     intérieure (`.ub-pied__liste`) est l'enfant unique que la rangée rogne
     pendant le trajet.

     L'état replié est porté par `[data-ub-replie]`, posé par le script, et non
     l'inverse : sans JavaScript le pied reste donc déplié et tous ses liens
     atteignables.

     `visibility` sort les liens repliés du parcours clavier — une rangée de
     hauteur nulle laisse ses liens focusables. Elle est transitionnée avec la
     rangée pour ne basculer qu'en fin de trajet, sinon le contenu disparaîtrait
     d'un coup avant même de commencer à glisser.

     La règle globale `prefers-reduced-motion` de `base.css` ramène la durée à
     0,01 ms : rien à répéter ici. */
  .ub-pied__liens {
    display: grid;
    grid-template-rows: 1fr;

    /* Retrait latéral porté par le conteneur : sur l'axe horizontal il n'entre
       pas dans le calcul de la hauteur de rangée, contrairement au retrait bas
       (voir `.ub-pied__liste`). */
    padding: 0 var(--ub-gouttiere-page);
    visibility: visible;
  }

  /* Les transitions n'entrent en jeu qu'une fois le premier état posé, marqué par
     le script. Sans ce garde-fou, le pied — rendu déplié par le serveur — se
     serait replié en glissant au chargement, sous les yeux du visiteur. */
  .ub-pied--anime .ub-pied__liens {
    transition: grid-template-rows 260ms ease, visibility 260ms;
  }

  .ub-pied__colonne[data-ub-replie] .ub-pied__liens {
    grid-template-rows: 0fr;
    visibility: hidden;
  }

  /* Les marges intérieures vivent sur la piste et non sur le conteneur : posées
     sur ce dernier, elles resteraient visibles une fois la rangée à zéro et
     laisseraient un ruban de crème sous chaque rubrique repliée. */
/* La piste ne porte aucune marge intérieure, et ce n'est pas un oubli : une
     marge intérieure s'ajoute toujours à la contribution minimale d'un élément de
     grille — seul le contenu est rognable par `overflow: hidden`. Un
     `padding-block-end: 0.9rem` ici bloquait la rangée repliée à 14 px au lieu de
     zéro, laissant un ruban de liens tronqués sous chaque rubrique fermée.
     `min-block-size: 0` et `overflow: hidden` sont les deux conditions du
     glissement : sans eux la rangée ne descend pas sous la hauteur du contenu. */
  .ub-pied__liste {
    min-block-size: 0;
    overflow: hidden;
  }

  /* L'espace sous le dernier lien est donc posé comme du contenu, qui se rogne
     avec le reste. */
  .ub-pied__liste::after {
    block-size: 0.9rem;
    content: '';
    display: block;
  }

  .ub-club__champ { inline-size: 100%; }

  .ub-club__formulaire { flex-direction: column; }

  .ub-pied-barre {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}