/**
 * 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
 * ------------------------------------------------------------------------ */

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

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

/* 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 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;
}

/* ---------------------------------------------------------------------------
 * 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.
 *
 * 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;
  }
}