/**
 * RH-17 / RH-18 — cadrage des images de contenu.
 *
 * CSS pur, aucune dépendance, aucune chaîne de build.
 *
 * POURQUOI CE FICHIER EXISTE
 * --------------------------
 * Les visuels fournis par la cliente n'ont pas le format des cadres du thème de démo. Le cadre
 * des blocs remplacés était en **portrait 3/4** (héritage nvision) alors que les photos sont en
 * paysage, voire en panoramique 2:1 pour la Val Sainte-Croix.
 *
 * `object-fit: cover` — demandé par Etienne — évite toute déformation : l'image remplit le cadre
 * en gardant ses proportions. Mais **il recadre ce qui dépasse** : une panoramique 2:1 dans un
 * cadre 3:4 perdrait ~76 % de sa largeur, et n'aurait plus rien de panoramique.
 *
 * D'où les deux mécanismes ensemble :
 *   1. `object-fit: cover` → jamais d'image écrasée, quel que soit le fichier déposé ensuite ;
 *   2. un **cadre au format de la photo** (`aspect-ratio`) → `cover` n'a presque rien à rogner.
 *
 * Le format est porté par une classe sur le bloc, donc **dans le contenu**, mais le comportement
 * (le `cover`, les bornes, le responsive) vit **ici**, en code versionné qui part avec la CI.
 * Changer un cadre = changer une classe ; changer la façon de cadrer = changer ce fichier.
 */

.rh-media {
  /* Les blocs image de WordPress portent des marges par défaut variables selon le thème. */
  margin: 0;
  width: 100%;
}

/*
 * Le conteneur porte le format, l'image le remplit. `display: block` évite l'espace fantôme
 * sous une image inline. `height: 100%` est indispensable : sans lui, `object-fit` n'a pas de
 * boîte à remplir et ne fait rien.
 */
.rh-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centre le recadrage. À surcharger ponctuellement si un sujet est décentré. */
  object-position: center;
}

/* ---------------------------------------------------------------------------
 * Formats de cadre
 *
 * Un modificateur par format, choisi au plus près de la photo pour que `cover` ne rogne
 * quasiment rien. Les valeurs ci-dessous correspondent aux visuels livrés en juillet 2026 :
 *   mobilites-douces.webp    990 × 623  = 1,589  → 16/10
 *   place-de-l-etoile.webp  1090 × 614  = 1,775  → 16/9
 *   val-sainte-croix.webp   2400 × 1159 = 2,071  → 2/1
 *   forteresse-luxembourg-demantelement-1869.webp  1600 × 1225 = 1,306  → 4/3 (ST-TRA-017, 30/09)
 *   route-arlon-photo-archive.webp  1316 × 870 = 1,513  → 4/3, même cadre (ST-TRA-050, 01/10)
 * ------------------------------------------------------------------------ */

.rh-media--16-10 {
  aspect-ratio: 16 / 10;
}

.rh-media--16-9 {
  aspect-ratio: 16 / 9;
}

/* Photo d'archive de « L'histoire du lieu » (tirage 1869, carton retiré). */
.rh-media--4-3 {
  aspect-ratio: 4 / 3;
}

/* Panoramique. Utilisé pour la Val Sainte-Croix, dont le recadrage est l'intérêt même. */
.rh-media--pano {
  aspect-ratio: 2 / 1;
}

/*
 * Sous 576 px, on redresse légèrement les formats les plus larges.
 *
 * Une panoramique 2:1 sur 320 px de large ne fait plus que 160 px de haut : le sujet devient
 * une bande illisible. On rogne un peu plus (4/3) pour conserver de la matière verticale —
 * c'est exactement le rôle de `cover`, qui absorbe ce changement sans déformer.
 */
@media (max-width: 575.98px) {
  .rh-media--pano {
    aspect-ratio: 4 / 3;
  }

  .rh-media--16-9,
  .rh-media--16-10 {
    aspect-ratio: 3 / 2;
  }
}

/* ---------------------------------------------------------------------------
 * Photo seule dans sa colonne, face à un texte plus haut (ST-TRA-017, 30/09/2026)
 *
 * Relevé par Etienne sur « Mobilités douces » : la colonne photo est étirée par la colonne
 * texte voisine (724 px à 1440 px de large), mais la photo garde son cadre 16/10 (469 px) et
 * laisse une bande vide de 255 px dessous. Demande : la photo remplit sa colonne, en `cover`.
 *
 * `height: 100%` suffit : quand la colonne a une hauteur définie (étirée par la rangée, colonnes
 * côte à côte), largeur et hauteur sont fixées et `aspect-ratio` s'efface — `cover` recadre.
 * Quand les colonnes s'empilent (mobile), la hauteur de la colonne n'est plus définie : le
 * 100 % retombe sur `auto` et le cadre au format de la photo reprend la main. Le cadre sert
 * aussi de hauteur minimale : si le texte est plus court, c'est la photo qui fixe la rangée.
 *
 * Formats photo seulement : `--auto` (photo au cadrage client) et les logos gardent leurs
 * propres règles, ci-dessous.
 * ------------------------------------------------------------------------ */

[class*="gspb_row__col"] > .rh-media:is(.rh-media--16-10, .rh-media--16-9, .rh-media--4-3, .rh-media--pano):only-child {
  height: 100%;
}

/*
 * ⚠️ Un bloc image en « pleine largeur » ou « large » reçoit de WordPress
 * `.wp-block-image.alignfull img { height: auto }`, plus spécifique que `.rh-media img` : l'image
 * reprend sa forme de fichier et ignore son cadre. C'était le cas de « Place de l'Étoile »
 * (fichier carré 614 × 614, cadre 16/9 jamais appliqué : le cadre grandissait pour suivre
 * l'image). Relevé le 30/09 en posant la règle ci-dessus, qui faisait alors déborder l'image
 * de son cadre. Borné aux formats photo : `--auto` et les logos gardent `height: auto`.
 */
.wp-block-image.rh-media:is(.rh-media--16-10, .rh-media--16-9, .rh-media--4-3, .rh-media--pano) img {
  height: 100%;
}

/*
 * La colonne TEXTE face à ces photos (ST-TRA-017, 30/09/2026). Relevé par Etienne sur
 * « Mobilités douces » : le titre touchait le bloc du dessus. Rangées et colonnes sont à 0 de
 * marge intérieure (Greenshift) : quand le texte est plus haut que la photo, c'est lui qui fait
 * la hauteur, et son titre est collé au bord (mesuré à 1440 px : 0 px pour « Mobilités douces »
 * et « L'histoire du lieu », 20 px pour « Place de l'Étoile », dont le titre porte sa propre
 * marge). En bas, le dernier paragraphe garde déjà ~40 px de marge : on aligne le haut dessus,
 * et on neutralise la marge propre du 1er élément pour que les trois titres tombent au même
 * endroit — y compris quand un conteneur vide précède le titre (« Place de l'Étoile » : reste
 * de conteneur Greenshift de 0 px, d'où `h2:first-of-type` en plus de `:first-child`).
 * `!important` : Greenshift pose marges et `padding: 0` par id de bloc.
 * Parent `.gspb_row` OU `.gspb_row__content` : selon les rangées, Greenshift pose les colonnes
 * directement dans la rangée (c'est le cas des trois sections de « Le quartier »).
 * Colonnes côte à côte seulement (≥ 1000 px) : empilées, la photo sépare déjà les blocs.
 */
@media (min-width: 1000px) {
  :is(.gspb_row, .gspb_row__content):has(> [class*="gspb_row__col"] > .rh-media:is(.rh-media--16-10, .rh-media--16-9, .rh-media--4-3, .rh-media--pano):only-child)
    > [class*="gspb_row__col"]:not(:has(> .rh-media)) {
    padding-top: 40px !important;
  }
  :is(.gspb_row, .gspb_row__content):has(> [class*="gspb_row__col"] > .rh-media:is(.rh-media--16-10, .rh-media--16-9, .rh-media--4-3, .rh-media--pano):only-child)
    > [class*="gspb_row__col"]:not(:has(> .rh-media)) > :is(:first-child, h2:first-of-type, h3:first-of-type) {
    margin-top: 0 !important;
  }
}

/*
 * Photo ancienne de la route d'Arlon (ST-TRA-050, 01/10/2026). Au bureau, la colonne étirée par
 * le texte donne un cadre vertical (734 × 913 à 1440 px) : `cover` n'en garde que ~45 % de la
 * largeur. Centré, il coupait le combi et la voiture de droite ; décalé à droite, il garde la rue,
 * les trois voitures et la grande maison. Ciblée par son nom de fichier, identique sur chaque
 * environnement (l'id du média, lui, change).
 */
.rh-media img[src*="route-arlon-photo-archive"] {
  object-position: 70% 50%;
}

/*
 * Photo des bureaux Tralux en haut de la page Contact (ST-TRA-025, 05/10/2026). Le bloc
 * Greenshift de la démo impose un cadre 2:1 (`aspect-ratio: 4 / 2` sur l'image) à une photo 3:2,
 * sans `object-fit` : la photo était écrasée. `cover` la recadre (haut et bas) sans la déformer ;
 * le logo Tralux du mur végétal, au tiers supérieur, reste dans le cadre. Ciblée par son nom de
 * fichier, identique sur chaque environnement.
 */
.gspb_image img[src*="tralux-immobilier-bureaux-escalier"] {
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Photo au format naturel (RH-18)
 *
 * Pour une photo dont on ne maîtrise pas le cadrage — ici la photo Tralux, 889 × 770 — on
 * n'impose AUCUN format : elle s'affiche telle quelle, en pleine largeur de sa colonne.
 * `cover` recadrerait, `aspect-ratio` imposerait un format arbitraire ; ni l'un ni l'autre n'a
 * de sens quand la photo vient du client et que son cadrage est déjà un choix.
 * ------------------------------------------------------------------------ */

.rh-media--auto {
  aspect-ratio: auto;
}

.rh-media--auto img {
  height: auto;
  object-fit: contain;
}

/*
 * … sauf face à un texte plus haut, colonnes côte à côte (ST-TRA-018, 05/10/2026). Relevé par
 * Etienne sur la photo Tralux : « cette image devrait occuper toute la hauteur du bloc ». À
 * 1440 px, la colonne étirée par le texte fait 871 px, la photo 636 px : 235 px vides dessous.
 * Même réponse que pour les photos de ST-TRA-017 ci-dessus : la photo seule dans sa colonne la
 * remplit, en `cover` (recadrée sur les côtés, jamais déformée). Empilée (< 1000 px), la colonne
 * n'a plus de hauteur imposée : la photo garde son format naturel.
 */
@media (min-width: 1000px) {
  [class*="gspb_row__col"] > .rh-media--auto:only-child {
    height: 100%;
  }

  [class*="gspb_row__col"] > .rh-media--auto:only-child img {
    height: 100%;
    object-fit: cover;
  }
}

/* ---------------------------------------------------------------------------
 * Logo de partenaire, sous un titre (RH-18)
 *
 * Placement demandé par Etienne : le logo vient **sous le titre de la section**, pas à la place
 * de la photo. C'est donc un logo « en ligne » dans une colonne de texte, et non un panneau.
 *
 * Trois règles pour un logo, et elles vont à l'inverse d'une photo :
 *   - `object-fit: CONTAIN` — un mot-symbole ne se rogne pas ;
 *   - `aspect-ratio: auto` — le logo garde SES proportions (168 × 48 ici), on ne lui en impose pas ;
 *   - une largeur BORNÉE et modeste — sous un titre, un logo doit se lire comme une signature,
 *     pas concurrencer le titre.
 * ------------------------------------------------------------------------ */

.rh-media--logo {
  aspect-ratio: auto;
  display: block;
  width: auto;
  max-width: 190px;
  /* Respire sous le titre, et se détache du paragraphe qui suit. */
  margin: 4px 0 26px;
  padding: 0;
  background: none;
}

.rh-media--logo img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .rh-media--logo {
    max-width: 150px;
    margin-bottom: 20px;
  }
}

/* ---------------------------------------------------------------------------
 * Logo de partenaire occupant une COLONNE VISUELLE (RH-18)
 *
 * Cas distinct du logo « en ligne » sous un titre (`--logo`). Ici le logo prend la place qu'une
 * photo ou une vidéo occupait : une demi-rangée. Trois précautions :
 *
 *   - `object-fit: contain` et une largeur bornée — un logo étiré sur 1000 px de large est
 *     grotesque, et rogné il devient illisible ;
 *   - un FOND clair et une emprise conservée (`aspect-ratio`) — sans eux, un petit logo centré
 *     dans une demi-rangée vide donne l'impression d'une image cassée, et la rangée s'effondre ;
 *   - un padding généreux, pour que le logo respire comme sur une plaque.
 *
 * ⚠️ Depuis ST-TRA-065 (19/10/2026), « Nous connaître » n'utilise plus ni `--logo` ni
 * `--logo-panneau` : les logos sont dans les titres (`.rh-titre-logo`) et les panneaux sont unis
 * (`.rh-media--panneau`), plus bas. Règles gardées pour un retour arrière (révision de la page).
 *
 * Tralux fait exception et n'utilise PAS cette classe : sa colonne visuelle reçoit une photo de
 * réalisation, et son logo va sous le titre (décision d'Etienne).
 * ------------------------------------------------------------------------ */

.rh-media--logo-panneau {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10%;
  background: var(--theme-palette-color-6, #FFF4EF);
  box-sizing: border-box;
}

.rh-media--logo-panneau img {
  width: 100%;
  height: auto;
  max-width: 340px;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .rh-media--logo-panneau {
    /* La colonne est déjà étroite : un cadre moins haut évite une grande zone vide. */
    aspect-ratio: 16 / 10;
    padding: 12%;
  }

  .rh-media--logo-panneau img {
    max-width: 240px;
  }
}

/* ---------------------------------------------------------------------------
 * Logo-titre d'entreprise (ST-TRA-065, 19/10/2026)
 *
 * Demande de Tralux : sur « Nous connaître », chaque entreprise est annoncée par son LOGO, plus
 * par son nom en texte. Le titre reste un <h2> (bloc Titre WordPress) qui ne contient que le
 * logo, avec le nom de l'entreprise en texte alternatif : nom accessible du titre = nom de
 * l'entreprise, hiérarchie des titres inchangée. Contenu posé par bin/rh-65-logos-titres.php.
 *
 * HAUTEUR OPTIQUE — les quatre logos n'ont pas la même forme : une hauteur commune les ferait
 * paraître inégaux. Base = hauteur d'un logo-mot plein (INOWAI, capitales sur toute la hauteur),
 * proche de la capitale de l'ancien titre texte (60 px au bureau) ; puis un coefficient par logo :
 *   - Sunset Immo × 1,35 : « SUNSET IMMO » n'occupe que le haut du fichier (« LUXEMBOURG »
 *     dessous) et son trait est fin ;
 *   - CBRE × 0,9 : lettres très grasses, plus lourdes à hauteur égale ;
 *   - Tralux Immobilier : hauteur FIXE de 112 px, au bureau comme sur mobile. « IMMOBILIER » ne
 *     fait que ~9 % de la hauteur du logo : à 112 px il garde ~10 px de capitale, le minimum
 *     lisible (c'est la taille choisie par Laurent le 07/10 : 289 px de large). Le mot « TRALUX »
 *     y a alors la hauteur optique des autres logos.
 * Bureau (≥ 1 412 px) : Inowai 48 px, Sunset Immo 65 px, CBRE 43 px, Tralux 112 px — les
 * `width`/`height` du HTML (bin/rh-65-logos-titres.php) valent ces tailles : à garder d'accord.
 * La base descend à 40 px sur tablette et mobile (3,4vw) ; `max-width: 100%` + `contain` : un
 * logo trop large pour sa colonne rétrécit sans se déformer.
 *
 * MARGES reprises des anciens titres Greenshift (`_gspb_post_css`, qui ciblait leurs identifiants
 * et ne s'applique plus) : 30 px en bas pour tous ; en haut, 0 pour Sunset Immo, 20 px pour
 * Inowai et CBRE, 0 pour Tralux (son ancien titre, vidé par Laurent, n'avait pas de marge
 * propre). `display: block` sur l'image : pas d'interligne fantôme du <h2> sous le logo.
 *
 * `width: auto !important` : l'éditeur ajoute d'office `style="width: …px"` (≤ 150 px) à toute
 * image en ligne insérée (format-library.js de WordPress 7.0, `onSelect`). Sans `!important`, ce
 * style en ligne fixerait la largeur et rétrécirait le logo dans sa boîte : la hauteur réglée
 * ici ne tiendrait plus.
 * ------------------------------------------------------------------------ */

h2.rh-titre-logo {
  --rh-titre-logo-base: clamp(40px, 3.4vw, 48px);
  /* Pas de `--rh-titre-logo-k` ici : posé sur `h2.rh-titre-logo` (0,1,1), il écraserait celui des
     modificateurs (0,1,0). Valeur par défaut = repli du `var()` ci-dessous. */
  margin: 0 0 30px;
  line-height: 0;
}

h2.rh-titre-logo--inowai,
h2.rh-titre-logo--cbre {
  margin-top: 20px;
}

.rh-titre-logo img {
  display: block;
  width: auto !important;
  height: calc(var(--rh-titre-logo-base) * var(--rh-titre-logo-k, 1));
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.rh-titre-logo--sunset {
  --rh-titre-logo-k: 1.35;
}

.rh-titre-logo--cbre {
  --rh-titre-logo-k: 0.9;
}

.rh-titre-logo--tralux img {
  height: 112px;
}

/* ---------------------------------------------------------------------------
 * Panneau coloré uni (ST-TRA-065, 19/10/2026)
 *
 * Les panneaux de logo d'Inowai, Sunset Immo et CBRE (`--logo-panneau` ci-dessus) ont perdu leur
 * logo, passé dans le titre. Décision d'Etienne (16/10) : ils RESTENT, unis — Laurent y placera
 * les visuels fournis par Tralux. Bloc Groupe vide, couleur de la charte portée par le bloc
 * (`palette-color-6`, visible aussi dans l'éditeur) ; ici, le cadre : même format que l'ancien
 * panneau (4/3, 16/10 sous 576 px), donc même place dans la rangée — sans ce format, un groupe
 * vide ferait 0 px de haut.
 *
 * Quand Laurent ajoute une image DANS le groupe : elle remplit le panneau, recadrée au centre si
 * son format diffère (`cover`, jamais déformée). `padding: 0` annule celui que BLOCKSY donne à
 * tout groupe coloré : `:root :where(p.has-background, .wp-block-group.has-background)
 * { padding: var(--theme-content-spacing) }` (24 px), dans bundle/main.min.css. Même spécificité
 * qu'une classe seule (0,1,0) et feuille chargée APRÈS celle-ci : d'où le sélecteur à deux classes
 * (0,2,0). Avec `.rh-media--panneau` seul, le visuel garderait un liseré coloré de 24 px.
 * ------------------------------------------------------------------------ */

.wp-block-group.rh-media--panneau {
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
}

.rh-media--panneau > .wp-block-image {
  margin: 0;
  width: 100%;
  height: 100%;
}

.rh-media--panneau > .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 575.98px) {
  .wp-block-group.rh-media--panneau {
    aspect-ratio: 16 / 10;
  }
}

/* ---------------------------------------------------------------------------
 * Encarts d'archive — texte + photo après la façade (ST-TRA-068, 21/10/2026)
 *
 * Les 4 encarts de Tralux sur la page Appartements. Contenu : une page WordPress cachée (FR / EN),
 * en blocs Colonnes du cœur (`.rh-encart` › `.rh-encart__texte` + `.rh-encart__photo`), rendue
 * par le thème après la façade (inc/rh-encarts.php). On ne peut pas reprendre le CSS des sections
 * de « Le quartier » : Greenshift le génère par id de bloc, dans la méta de chaque page. On en
 * reprend donc les MESURES (relevées le 21/10 à 1440 et 375 px) :
 *   - alternance : une bande blanche dans la grille du site (texte à gauche, photo à droite),
 *     puis une bande rose pâle bord à bord (palette-color-5, photo à gauche, texte à droite) ;
 *   - colonnes 541 / 670 px dans un conteneur de 1290 px (texte ≈ 42 %, photo ≈ 52 %) ;
 *   - 120 px entre les sections (80 px sous 1000 px) ;
 *   - titre h2 : 60 px, graisse 800, interligne 1,5, 30 px dessous (30 px sur mobile) ;
 *   - texte : 18 px, interligne 1,65.
 * Sous 1000 px : empilé, texte puis photo (ordre du contenu, aussi celui de lecture).
 * Encart sans titre (l'encart 1, Tralux n'en a pas donné) : le texte est centré verticalement face
 * à la photo, ce qui tient la mise en page sans titre.
 * Encart à photo en portrait (`--portrait`, encart 4 : 800 × 1066) : même grille, photo bornée à
 * 470 px (480 px empilée, centrée), sinon elle ferait ~900 px de haut ; la colonne de texte reste
 * celle des autres encarts.
 *
 * Le format du cadre va sur l'IMAGE (et non sur la figure, comme ailleurs dans ce fichier) : la
 * figure peut porter une légende (« Illustration non contractuelle », encart 3), qu'un cadre fixe
 * ferait déborder.
 * ------------------------------------------------------------------------ */

.rh-media--3-4 {
  aspect-ratio: 3 / 4;
}

.rh-encarts .wp-block-columns.rh-encart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "texte" "photo";
  row-gap: 40px;
  box-sizing: border-box;
  width: var(--theme-container-width, 88vw);
  max-width: var(--theme-normal-container-max-width, 1290px);
  margin: 80px auto;
  padding: 0;
}

/* Premier encart : la façade au-dessus apporte déjà ~90 px (padding du conteneur + marge de la
   section) ; sans ceci, 210 px de blanc à 1440 px contre 120 entre deux encarts (revue du 21/10). */
.rh-encarts > .rh-encart:first-child {
  margin-top: 0;
}

/* Tout autre bloc ajouté dans l'éditeur entre deux encarts (paragraphe, séparateur…) reste dans la
   grille du site au lieu de s'étaler bord à bord. Mode d'emploi : dupliquer un bloc Colonnes. */
.rh-encarts > :not(.rh-encart) {
  box-sizing: border-box;
  width: var(--theme-container-width, 88vw);
  max-width: var(--theme-normal-container-max-width, 1290px);
  margin-inline: auto;
}

.rh-encarts .rh-encart > .rh-encart__texte {
  grid-area: texte;
  align-self: center;
}

.rh-encarts .rh-encart > .rh-encart__photo {
  grid-area: photo;
  min-width: 0;
}

/* Une bande sur deux : rose pâle, bord à bord (l'ombre étend le fond, `clip-path` le borne en
   hauteur ; ni l'un ni l'autre ne crée de défilement horizontal). */
.rh-encarts .wp-block-columns.rh-encart:nth-child(even) {
  margin-block: 0;
  padding-block: 80px;
  background: var(--theme-palette-color-5, #FFF5F6);
  box-shadow: 0 0 0 100vmax var(--theme-palette-color-5, #FFF5F6);
  clip-path: inset(0 -100vmax);
}

.rh-encarts .rh-encart h2 {
  margin: 0 0 30px;
  color: var(--theme-headings-color, #011412);
  font-size: clamp(30px, 4.2vw, 60px);
  font-weight: 800;
  line-height: 1.5;
}

.rh-encarts .rh-encart__texte p {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.65;
}

.rh-encarts .rh-encart__texte > :last-child {
  margin-bottom: 0;
}

/* Lien vers la source (LinkedIn, article) : cible d'au moins 24 px de haut. 19 px en gras = « grand
   texte » au sens WCAG (≥ 18,67 px gras) : la couleur de lien de la charte y atteint le 3:1 exigé. */
.rh-encarts .rh-encart__texte p.rh-encart__lien {
  font-size: 19px;
}

.rh-encarts .rh-encart__lien a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

/* Cadre sur l'image (voir l'en-tête de la section). */
.rh-encarts .rh-media {
  aspect-ratio: auto;
  height: auto;
}

.rh-encarts .rh-media img {
  height: auto;
  aspect-ratio: 4 / 3;
}

.rh-encarts .rh-media--16-10 img {
  aspect-ratio: 16 / 10;
}

.rh-encarts .rh-media--16-9 img {
  aspect-ratio: 16 / 9;
}

.rh-encarts .rh-media--3-4 img {
  aspect-ratio: 3 / 4;
}

.rh-encarts .rh-media figcaption {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* Empilé, la photo en portrait garde une largeur raisonnable : pleine largeur à 887 px, elle
   ferait plus de 1000 px de haut, agrandie au-delà de son fichier (800 px). */
@media (max-width: 999.98px) {
  .rh-encarts .rh-encart--portrait > .rh-encart__photo {
    width: min(100%, 480px);
    margin-inline: auto;
  }
}

@media (max-width: 575.98px) {
  .rh-encarts .rh-media--16-9 img,
  .rh-encarts .rh-media--16-10 img {
    aspect-ratio: 3 / 2;
  }
}

/* --- Colonnes côte à côte (≥ 1000 px, comme « Le quartier ») --- */
@media (min-width: 1000px) {
  .rh-encarts .wp-block-columns.rh-encart {
    grid-template-columns: minmax(0, 541fr) minmax(0, 670fr);
    grid-template-areas: "texte photo";
    column-gap: clamp(40px, 6vw, 79px);
    margin-block: 120px;
  }

  .rh-encarts > .rh-encart:first-child {
    margin-top: 28px;
  }

  .rh-encarts .wp-block-columns.rh-encart:nth-child(even) {
    grid-template-columns: minmax(0, 670fr) minmax(0, 541fr);
    grid-template-areas: "photo texte";
    margin-block: 0;
    padding-block: 120px;
  }

  /* Portrait : même grille que les autres encarts (colonne de texte identique, à toutes les
     largeurs, ~65 caractères par ligne) ; seule la photo est bornée à 470 px dans sa colonne, calée
     sur le bord extérieur, l'air en plus allant entre photo et texte. */
  .rh-encarts .rh-encart--portrait > .rh-encart__photo {
    width: 100%;
    max-width: 470px;
    justify-self: end;
  }

  .rh-encarts .rh-encart--portrait:nth-child(even) > .rh-encart__photo {
    justify-self: start;
  }
}