/* Bande éditoriale « Lire l'histoire » de la page d'accueil.
   Maquette : .superpowers/brainstorm/14359-1785256295/content/skeleton-casablanca.html
   (bloc `.cb-ed` : photo plein cadre, voile crème, calligraphie puis bouton). */

:root {
  /* La maquette voile la photo à 72 % de crème ; le client a ramené le voile à
     20 % le 2026-08-02, la photo du zellige devant rester lisible en pleine
     largeur, puis a demandé du texte blanc — l'encre se perdait sur l'ensemble
     bleu du sujet, que le bouton frôle selon la largeur d'écran.

     Le voile a donc changé de teinte, pas d'intensité : il assombrit maintenant
     la photo au lieu de la délaver, ce qui est la condition pour que du crème
     tienne sur la pierre claire du zellige.

     Ramené de 42 % à 24 % le 2026-08-02 : le client veut voir la photo. Le
     contraste du titre sur la zone la plus claire descend alors sous le seuil
     AA du grand texte si on ne compte que le voile (2,1:1 contre 3,3:1 à 42 %) :
     la lisibilité repose désormais sur l'ombre portée du titre, doublée en
     conséquence. Baisser encore le voile sans renforcer cette ombre rendrait le
     titre franchement pâle sur la pierre. */
  --ub-histoire-voile: rgb(var(--ub-encre-rgb) / 24%);

  /* Hauteur de la bande. La maquette la donne en pixels pour un cadre réduit ;
     à l'échelle de la page, une part de la largeur de fenêtre garde la même
     proportion, bornée pour ne jamais avaler l'écran ni s'écraser en bandeau.
     Relevée le 2026-08-02 à la demande du client : sous un voile léger, la
     photo devient le sujet de la bande et réclame de la hauteur. */
  --ub-histoire-hauteur: clamp(26rem, 52vw, 44rem);
}

/* Plein cadre fenêtre, contrairement à la bande soins qui garde la gouttière de
   la page : le client veut la photo bord à bord (demande du 2026-08-02).
   Kadence borne le contenu à `--global-content-width` (1290px) même pour un
   `.alignfull`, il faut donc déborder explicitement — même motif que le héros
   (`.ub-heros`, header.css), la seule technique déjà éprouvée ici pour atteindre
   les bords de la fenêtre. `100vw` compte la barre de défilement sur les
   plateformes où elle occupe de la place ; `overflow-x: clip` sur la bande
   absorbe ce dépassement au lieu de le laisser devenir un défilement
   horizontal. */
.ub-histoire-hote {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  max-inline-size: 100vw;
  overflow-x: clip;
}

.ub-histoire {
  block-size: var(--ub-histoire-hauteur);
  margin-block: 0;
  overflow: hidden;
  position: relative;
}

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

/* `!important` sur la marge : Kadence pose une marge basse sur toute
   `figure.wp-block-image` du contenu, qui décollerait la photo du bas de la
   bande et laisserait apparaître le fond de page. */
.ub-histoire__fond {
  inset: 0;
  margin: 0 !important;
  position: absolute;
}

.ub-histoire__fond img {
  block-size: 100% !important;
  display: block;
  inline-size: 100%;
  object-fit: cover;
  /* Cadrage sur le zellige et l'homme assis : centré, la coupe perdrait la
     rosace de gauche, qui est le sujet de la photo autant que la silhouette. */
  object-position: 50% 42%;
}

.ub-histoire__voile {
  align-items: center;
  background: var(--ub-histoire-voile);
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  position: absolute;
  text-align: center;
}

.ub-histoire__voile > .wp-block-group__inner-container {
  display: contents;
}

/* Le voile allégé à 24 % ne détache plus le texte : ces ombres portées s'en
   chargent, même procédé que le nom de la marque sur le héros (`.ub-heros__mot`,
   home.css) et que les icônes de la barre flottante.

   Deux ombres et non une : la première, courte et dense, tient le bord des
   lettres sur les motifs contrastés du zellige ; la seconde, large et diffuse,
   assombrit la photo autour du mot sans dessiner de contour. Une seule ombre
   large laissait les fines sérifs de Georgia se dissoudre dans la pierre. */
.ub-histoire__voile h2,
.ub-histoire__bouton .wp-block-button__link {
  text-shadow:
    0 1px 2px rgb(var(--ub-encre-rgb) / 85%),
    0 2px 24px rgb(var(--ub-encre-rgb) / 70%);
}

/* Titre serif en capitales espacées : la police des titres du site (héros,
   sections éditoriales, bande soins), et celle de la référence du client du
   2026-08-02. Il ne porte plus la classe `.ub-section-titre` — ce petit
   libellé de rubrique en sans-serif était l'écart relevé par le client.

   Crème comme sur la référence : c'est la demande du client du 2026-08-02, une
   fois l'encre jugée illisible sur le bleu du sujet. Le crème ne tient que grâce
   au voile assombri et à l'ombre portée ci-dessus — les trois vont ensemble, on
   n'en retire pas un sans revoir les autres. */
.ub-histoire__titre {
  color: var(--ub-creme);
  font-family: var(--ub-serif);
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: var(--ub-titre-espace);
  margin-block: 0 1.6rem;
  max-inline-size: 22ch;
  text-transform: uppercase;
}

/* Bouton en gélule, identique à celui de la bande soins (`.ub-soins__bouton`,
   editorial.css) : c'est la forme d'appel à l'action du site.

   Sélecteur allongé sur le modèle de `kadence-integration.css` et de la bande
   soins : Kadence pose un rayon de 3px et un fond transparent sur tout bouton
   du contenu, avec une spécificité supérieure à une simple classe, depuis une
   feuille enfilée après celle-ci (`UBAYD_STYLESHEETS`, inc/assets.php) —
   l'ordre ne nous sauverait pas. Le cadre et la couleur du texte viennent, eux,
   de la règle `.is-style-outline` de `kadence-integration.css` que ce bouton
   porte : les redéclarer ici ferait un second endroit à corriger le jour où la
   charte bouge.

   Le fond crème translucide, lui, est propre à cette bande : le voile à 20 %
   laisse le cadre encre se poser à même le zellige, où le libellé devient
   illisible sur les motifs. */
.entry-content .ub-histoire__bouton .wp-block-button__link.wp-element-button {
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  padding: 0.85rem 2.6rem;
  text-transform: uppercase;
}

/* Fond, cadre et couleur du texte demandent un sélecteur plus long encore que la
   règle ci-dessus : ce sont les trois propriétés que `kadence-integration.css`
   dispute explicitement (`background-color: transparent`, `border` et `color`
   encre sur `.is-style-outline`, cinq classes, depuis une feuille enfilée après
   celle-ci). Mesuré : à cinq classes, le fond retombait à `transparent` sans que
   rien d'autre ne bouge.

   Cadre et libellé crème, sans aucun fond : le client a retiré le fond encre le
   2026-08-02 pour ne rien poser sur la photo. Le libellé ne tient donc que par
   son ombre portée (règle plus haut, partagée avec le titre) — la retirer
   rendrait le mot illisible sur les motifs du zellige.

   `transparent` est écrit ici à dessein, alors que `kadence-integration.css` pose
   déjà la même valeur : cette règle est celle qui gagne l'arbitrage, et un
   lecteur qui n'y trouverait pas le fond croirait à un oubli. */
.entry-content .wp-block-button.ub-histoire__bouton.is-style-outline .wp-block-button__link.wp-element-button {
  background-color: transparent;
  border-color: var(--ub-creme);
  color: var(--ub-creme);
  transition: background-color 200ms ease, color 200ms ease;
}

/* Le survol inverse le bouton — fond crème plein, libellé encre — comme demandé
   par le client le 2026-08-02. Sans cette règle il n'aurait aucun état du tout :
   celle ci-dessus écrase les couleurs que Kadence changeait pour nous.
   L'ombre portée disparaît avec le fond plein : sur du crème opaque, elle ne
   servirait plus qu'à salir le libellé. */
.entry-content .wp-block-button.ub-histoire__bouton.is-style-outline .wp-block-button__link.wp-element-button:hover,
.entry-content .wp-block-button.ub-histoire__bouton.is-style-outline .wp-block-button__link.wp-element-button:focus {
  background-color: var(--ub-creme);
  color: var(--ub-encre);
  text-shadow: none;
}

/* Le fondu du survol ne s'impose pas à qui a demandé moins d'animation. */
@media (prefers-reduced-motion: reduce) {
  .entry-content .wp-block-button.ub-histoire__bouton.is-style-outline .wp-block-button__link.wp-element-button {
    transition: none;
  }
}

@media (max-width: 767px) {
  :root {
    --ub-histoire-hauteur: clamp(22rem, 80vw, 32rem);
  }
}