/* Ouverture des pages éditoriales : titre centré, photo à coins arrondis, récit
   centré dessous. Structure demandée le 2026-08-09 sur le modèle de la page
   « À propos » de Casablanca Paris.

   Première version : titre POSÉ SUR la photo, façon héros d'accueil. Le client
   l'a écartée — sur une page qui se lit, le titre appartient au document, pas à
   l'image. La photo redevient une illustration cadrée, et le titre reprend
   l'encre et la mise en page du reste de la page. */

:root {
  /* Bande, pas plein écran : le titre au-dessus et le premier paragraphe en
     dessous doivent tenir dans la même vue. */
  --ub-banniere-hauteur: clamp(15rem, 40vw, 34rem);

  /* Coins arrondis de la photo. Assez francs pour se voir, assez sobres pour
     ne pas transformer la bande en vignette. */
  --ub-banniere-rayon: clamp(0.6rem, 1vw, 1.1rem);

  /* Largeur du récit. Une ligne centrée devient pénible à lire au-delà d'une
     soixantaine de signes : l'œil perd le début de la ligne suivante, et le
     défaut est plus marqué au centre qu'au fer à gauche. */
  --ub-recit-largeur: 58ch;
}

/* Le bandeau de titre du parent s'efface : la page porte son titre dans son
   contenu. La classe est posée par `inc/banniere.php` — le bandeau est rendu
   hors de l'arbre du contenu, aucun sélecteur partant d'ici ne l'atteindrait. */
.ub-page-banniere .entry-hero {
  display: none;
}

/* Kadence aère le haut du contenu — marge du conteneur et 32 px de retrait
   interne. Le titre doit ouvrir la page sans cette bande blanche héritée d'un
   bandeau qui n'existe plus. Un espace propre est repris ci-dessous sur
   `.ub-page-tete`, que le thème maîtrise.

   Mêmes deux leviers que la page d'accueil sous son héros
   (`.ub-page-flottante`, header.css). */
.ub-page-banniere .content-area {
  margin-block-start: 0;
}

.ub-page-banniere .entry-content-wrap {
  padding-block-start: 0;
}

/* --- titre de la page, au-dessus de la photo ----------------------------- */

.ub-page-tete {
  padding-block: clamp(2.4rem, 5vw, 4rem) clamp(1.6rem, 3vw, 2.6rem);
  text-align: center;
}

.ub-page-tete__titre {
  color: var(--ub-encre);
  font-family: var(--ub-serif);
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.15;
  margin: 0;
  text-transform: uppercase;
}

/* --- photo ---------------------------------------------------------------- */

/* Pleine largeur MOINS une gouttière, contrairement au héros d'accueil qui va
   bord à bord : la référence détache la photo des bords de la fenêtre, et
   c'est cette respiration qui rend les coins arrondis lisibles — collés au
   bord, ils ne se verraient que d'un côté.

   Kadence borne le contenu à `--global-content-width` même pour un
   `.alignfull` : il faut déborder explicitement, comme `.ub-histoire-hote`
   (histoire.css). `overflow-x: clip` absorbe le dépassement de `100vw` là où la
   barre de défilement occupe de la place, au lieu de le laisser devenir un
   défilement horizontal. */
.ub-banniere-hote {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  max-inline-size: 100vw;
  overflow-x: clip;
}

/* La gouttière est portée par la bande elle-même, pas par un retrait de l'hôte :
   WordPress et Kadence remettent à plat l'espacement interne des blocs
   `alignfull`, et un `padding-inline` posé sur l'hôte était bien calculé mais
   sans effet — la photo touchait les deux bords, coins arrondis compris, donc
   invisibles. Une largeur explicite, elle, ne dépend d'aucune règle du parent. */
.ub-banniere {
  background: var(--ub-encre);
  block-size: var(--ub-banniere-hauteur);
  border-radius: var(--ub-banniere-rayon);
  inline-size: calc(100% - 2 * var(--ub-gouttiere-page));
  margin-block: 0;
  margin-inline: auto;
  overflow: hidden;
  position: relative;
}

/* `wp:group` intercale un `.wp-block-group__inner-container` entre le groupe et
   ses enfants : `display: contents` l'efface de la mise en forme, sinon la
   photo en position absolue se calerait sur lui plutôt que sur la bande. Même
   correctif que `.ub-histoire` et `.ub-soins`. */
.ub-banniere > .wp-block-group__inner-container {
  display: contents;
}

/* `!important` sur la marge, comme `.ub-heros__fond` : Kadence pose
   `.single-content figure.wp-block-image { margin-bottom: var(--global-md-spacing) }`
   à une spécificité (0,2,1) qui l'emporte sur une classe seule, et les pixels
   résiduels laisseraient voir le fond sombre sous la photo. */
.ub-banniere__fond {
  inset: 0;
  margin: 0 !important;
  position: absolute;
}

.ub-banniere__fond img {
  block-size: 100% !important;
  display: block;
  inline-size: 100%;
  object-fit: cover;
  /* Cadrage haut : le sujet est assis sous la structure, au tiers supérieur.
     Un cadrage centré lui coupait la tête sur les fenêtres larges, où la bande
     est proportionnellement moins haute que l'image. */
  object-position: 50% 38%;
}

/* Aucun voile ici, à la différence du héros d'accueil : plus rien n'est écrit
   par-dessus, et assombrir une photo que personne ne doit lire à travers ne
   ferait que la ternir. */

/* --- récit, centré sous la photo ----------------------------------------- */

.ub-recit {
  margin-inline: auto;
  max-inline-size: var(--ub-recit-largeur);
  padding-block: clamp(2.6rem, 6vw, 4.5rem);
  text-align: center;
}

.ub-recit p {
  color: var(--ub-gris);
  line-height: 1.9;
  margin-block: 0 1.4rem;
}

/* Le carrousel de clôture était d'abord redessiné ici — titre centré, en serif,
   agrandi — sous le préfixe `.ub-page-banniere`, pour ne pas toucher l'accueil.
   Le client a demandé le même dessin partout le 2026-08-09 : ces règles ont
   rejoint `carrousel.css`, où elles valent pour toutes les instances. Rien à
   ajouter ici. */