/* ==========================================================================
   Jolihuit, fiche produit : les photos en situation, par imprimé
   --------------------------------------------------------------------------
   Créé le 25 septembre 2026 pour tapis-magique/. Feuille à part parce que
   refonte.css dépasse de loin les 800 lignes de la règle maison : même
   exception que tunnel.css, chargée après refonte.css, aucun jeton neuf.

   Dix photos de l'imprimé choisi, en grille, sous la galerie principale.
   Le bloc est généré par outils/galerie-imprimes.py ; produit.js n'affiche
   que la grille de l'imprimé pressé dans le nuancier et ouvre la photo
   cliquée dans l'agrandissement plein écran de la galerie.

   Place : troisième enfant de .r-pdp__grid, après la colonne d'achat.
   En mobile, il suit donc le nuancier. Au-dessus de 60 rem, il remonte
   sous la galerie, et la colonne d'achat couvre les deux rangées pour
   rester collante tout du long.
   ========================================================================== */

/* ==========================================================================
   Titres convertis en paragraphes (20/10/2026)
   --------------------------------------------------------------------------
   La fiche Tapis magique ne conserve que les trois titres h2 de l'ancien
   site, pour le référencement. Tous les autres anciens h2 et h3 sont des
   <p> : ces règles reproduisent à l'identique ce que refonte.css appliquait
   aux balises (règle « h1, h2, h3, h4 » et sélecteurs de conteneur), pour
   que le rendu ne bouge pas. Placé avant .r-situation__titre : ce dernier
   garde ainsi sa taille et sa marge basse propres.
   ========================================================================== */
.r-titre {
  margin: 0;
  color: var(--r-ink);
  font-family: var(--rf-display);
  font-weight: var(--rf-weight);
  font-variation-settings: var(--rf-settings);
  letter-spacing: var(--rf-track);
  line-height: var(--rf-leading);
  text-transform: none;
}
.r-titre--h2 { font-size: var(--fs-h2); }
.r-titre--h3 { font-size: var(--fs-h3); }

/* Feutre sur l'emphase, repris de « h1 em, h2 em, h3 em » de refonte.css. */
.r-titre em {
  font-style: normal;
  font-synthesis: none;
  text-decoration: none;
  background: linear-gradient(transparent var(--feutre-stop), var(--feutre) var(--feutre-stop));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.js-anim .reveal .r-titre em {
  background-size: 0% 100%;
  transition: background-size .7s cubic-bezier(.25, .8, .35, 1) 220ms;
}
.js-anim .reveal.is-visible .r-titre em { background-size: 100% 100%; }

/* Reprises des sélecteurs de conteneur qui ciblaient h2 / h3. La couleur est
   rappelée là où une règle « .r-keypoints p » ou « .r-pillar p » plus
   spécifique passerait le titre en gris. */
.r-offset .r-titre--h2 { margin-bottom: 1rem; }
.r-keypoints .r-titre { font-size: 1.15rem; margin-bottom: .35rem; color: var(--r-ink); }
.r-pillar .r-titre { font-size: 1.25rem; margin-bottom: .6rem; color: var(--r-ink); }
/* .r-card__name garde sa règle de refonte.css ; on rétablit seulement ce que
   la balise h3 apportait : marge nulle et interlettrage de titre. */
.r-card__name { margin: 0; letter-spacing: var(--rf-track); }
/* Titres de colonnes du pied de page, repris de « .r-footer h3 ». */
.r-footer nav > p {
  font-size: var(--fs-micro);
  font-family: var(--r-body);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Introduction éditoriale : les trois h2 de l'ancien site et leur texte. */
.r-tm-intro { max-width: 60rem; }
.r-tm-intro > h2 { margin-bottom: 1rem; }
.r-tm-intro > h2:not(:first-child) { margin-top: 2.5rem; }
.r-tm-liste { list-style: disc; padding-left: 1.25em; margin: 0 0 1.15em; }
.r-tm-liste li { margin-bottom: .5rem; color: var(--r-ink-soft); }

@media (min-width: 60rem) {
  .r-pdp__grid:has(> .r-situation) > .r-pdp__gallery { grid-column: 1; grid-row: 1; }
  .r-pdp__grid:has(> .r-situation) > .r-pdp__buy { grid-column: 2; grid-row: 1 / span 2; }
  .r-pdp__grid > .r-situation { grid-column: 1; grid-row: 2; }
}

.r-situation[hidden] { display: none; }

.r-situation__titre {
  font-size: var(--fs-h3);
  margin-bottom: 1rem;
}

.r-situation__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.r-situation__grille[hidden] { display: none; }
/* Dix photos : deux colonnes sur téléphone, cinq dès qu'il y a la place,
   jamais de rangée bancale. */
@media (min-width: 36rem) {
  .r-situation__grille { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Grand format (sac tissé, 26/09/2026) : fiche à un seul modèle, huit
   photos en usage au lieu de dix, donc quatre colonnes et des vignettes
   plus grandes. Deux rangées pleines. */
@media (min-width: 36rem) {
  .r-situation--grand .r-situation__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
  /* Six photos (lingettes, 26/09/2026) : trois colonnes, deux rangées pleines. */
  .r-situation--grand .r-situation__grille:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.r-situation__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--lavis-2);
  cursor: zoom-in;
}
.r-situation__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
@media (hover: hover) {
  .r-situation__photo:hover img { transform: scale(1.04); }
}