/* Site fictif de la Savonnerie des Remparts, servi par Blummy pour les
 * démonstrations « vue client » (`templates/landing_page/demo_site/`).
 *
 * Feuille de style AUTONOME : ce n'est pas un écran Blummy, c'est le site
 * d'un client. Elle n'importe ni Tailwind ni le design system de l'app, et
 * AssetMapper la sert telle quelle. La charte est celle des captures que la
 * scène montre déjà dans le fil du livrable « Site vitrine »
 * (`public/demo/capture-site-*.webp`) : papier crème, bleu ardoise `#33566B`,
 * titres en serif. Le visiteur qui ouvre le site depuis son espace client
 * doit reconnaître, en vrai, ce qu'il vient de voir en capture.
 *
 * Aucune police externe (CSP de l'app, et un site d'artisan n'en a pas
 * besoin) : Georgia pour les titres, la pile système pour le texte.
 */

:root {
  --sr-paper: #f4efe6;
  --sr-paper-deep: #ebe4d6;
  --sr-mist: #dce4ea;
  --sr-ink: #1f2a33;
  --sr-ink-soft: #55616b;
  --sr-slate: #33566b;
  --sr-slate-deep: #24404f;
  --sr-line: rgba(31, 42, 51, 0.12);
  --sr-white: #fffdf9;
  --sr-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sr-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sr-max: 72rem;

  /* ÉCHELLE D'ESPACEMENT (une seule, partagée par les trois pages).
   *
   * Le site avait des marges semées à la main, section par section : le
   * rythme changeait d'une page à l'autre et le premier écran se remplissait
   * de vide. Ici chaque pas est BORNÉ par un `clamp()` : un plancher qui
   * garde la page lisible sur un téléphone, une pente qui la fait respirer
   * quand l'écran s'élargit, un plafond qui l'empêche de se vider.
   *
   * Règle d'emploi : on ne pose plus de `rem` vertical dans les blocs, on
   * prend le jeton du bon rang.
   */
  --sr-space-2xs: 0.6rem;
  --sr-space-xs: clamp(0.75rem, 1.4vw, 1rem);
  --sr-space-sm: clamp(1rem, 2vw, 1.5rem);
  --sr-space-md: clamp(1.5rem, 3vw, 2.25rem);
  --sr-space-lg: clamp(2rem, 4vw, 3rem);

  /* Pas vertical d'une section de contenu, et sa variante resserrée pour
   * deux sections qui se suivent et parlent du même sujet. */
  --sr-section-y: clamp(2.5rem, 4.5vw, 3.5rem);
  --sr-section-y-tight: clamp(1.75rem, 3vw, 2.5rem);

  /* HAUTEURS BORNÉES DES GRANDS VISUELS.
   *
   * Aucune image ne dicte plus la hauteur de son bloc : la photo du hero est
   * un portrait 1333x2000, elle étirait le hero à 1155 px sur un écran de
   * 900 et il fallait défiler pour lire le titre. Les blocs se donnent
   * désormais une hauteur, et l'image la remplit en `object-fit: cover`. */
  --sr-hero-h: clamp(19rem, 36vw, 27rem);
  --sr-visual-h: clamp(15rem, 26vw, 21rem);
  --sr-shop-hero-h: clamp(11rem, 22vw, 18rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sr-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sr-ink);
  background-color: var(--sr-paper);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--sr-serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p { margin: 0; }

.sr-container {
  width: min(100% - 3rem, var(--sr-max));
  margin-inline: auto;
}

/* ---------------------------------------------------------------------- *
 * Bandeau de démonstration (le seul élément qui appartient à Blummy).
 * Il dit où l'on est et ramène à l'espace client. Statique (il défile avec
 * la page) pour ne jamais gêner le widget, qui vit en bas à droite.
 * ---------------------------------------------------------------------- */
.sr-demo-bar {
  background-color: var(--sr-ink);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.82rem;
}

.sr-demo-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  padding: 0.55rem 0;
}

.sr-demo-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sr-demo-bar__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: #f4b860;
  flex: 0 0 auto;
}

.sr-demo-bar__text--short { display: none; }

@media (max-width: 640px) {
  .sr-demo-bar__text--long { display: none; }
  .sr-demo-bar__text--short { display: inline; }
}

.sr-demo-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 0.05rem;
}

.sr-demo-bar__back:hover { border-bottom-color: #fff; }

.sr-demo-bar__back svg { width: 0.9rem; height: 0.9rem; }

/* ---------------------------------------------------------------------- *
 * En-tête du site.
 * ---------------------------------------------------------------------- */
.sr-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgba(244, 239, 230, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--sr-line);
}

.sr-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.sr-wordmark {
  font-family: var(--sr-serif);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sr-slate);
  text-decoration: none;
  white-space: nowrap;
}

.sr-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.92rem;
}

.sr-nav a {
  color: var(--sr-ink-soft);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.sr-nav a:hover { color: var(--sr-ink); }

.sr-nav a[aria-current="page"] {
  color: var(--sr-slate);
  font-weight: 600;
  border-bottom-color: var(--sr-slate);
}

.sr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--sr-slate);
  color: var(--sr-slate);
  background-color: transparent;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.sr-btn:hover { transform: translateY(-1px); }

.sr-btn--solid {
  background-color: var(--sr-slate);
  color: #fff;
}

.sr-btn--solid:hover { background-color: var(--sr-slate-deep); }

.sr-btn--ghost {
  border-color: var(--sr-line);
  color: var(--sr-ink);
  background-color: var(--sr-white);
}

/* Le bouton de la navigation : `.sr-nav a` (0,1,1) battait `.sr-btn--solid`
   (0,1,0) et peignait le libellé en encre douce sur fond ardoise. */
.sr-nav a.sr-btn--solid {
  color: #fff;
  border-bottom: 1px solid var(--sr-slate);
  padding: 0.55rem 1.1rem;
}

/* Sous 720 px, l'en-tête s'empile : la marque sur sa ligne, les entrées en
   dessous. Sur une seule ligne, marque + trois entrées débordaient du
   viewport (page à 559 px de large sur un écran de 390). */
@media (max-width: 720px) {
  .sr-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.75rem 0;
    min-height: 0;
  }

  .sr-wordmark { font-size: 0.9rem; letter-spacing: 0.18em; }

  .sr-nav { gap: 1.1rem; font-size: 0.88rem; flex-wrap: wrap; }
  .sr-nav .sr-btn { display: none; }
}

/* ---------------------------------------------------------------------- *
 * Hero (accueil) : texte à gauche, photographie pleine hauteur à droite.
 * ---------------------------------------------------------------------- */
.sr-hero {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  /* Hauteur bornée. Avant, elle était dictée par la photo (un portrait
     1333x2000 affiché sur 54 % de la page) : 1155 px sur un écran de 900, il
     fallait défiler pour lire le titre. */
  min-height: var(--sr-hero-h);
}

.sr-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sr-space-lg);
  padding-right: var(--sr-space-md);
  /* Le titre du hero s'aligne sur les titres de section. La colonne vaut
     46 % de la page : sa gouttière gauche, (page - 72rem) / 2, se mesure donc
     depuis la colonne par `(100% / 0.46 - 72rem) / 2`. Le `max()` reprend la
     gouttière mobile dès que la page devient plus étroite que 72rem, ce qui
     remplace l'ancienne requête de média à 1200 px. L'ancien `100vw` comptait
     la barre de défilement et décalait le titre de 8 px vers la droite. */
  padding-left: max(1.5rem, calc((100% / 0.46 - var(--sr-max)) / 2));
}

.sr-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sr-ink-soft);
}

.sr-hero__title {
  margin-top: var(--sr-space-sm);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--sr-ink);
}

.sr-hero__text {
  margin-top: var(--sr-space-sm);
  max-width: 26rem;
  color: var(--sr-ink-soft);
}

.sr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--sr-space-md);
}

.sr-hero__visual {
  position: relative;
  overflow: hidden;
  background-color: var(--sr-paper-deep);
}

/* La photo est SORTIE DU FLUX : elle remplit la colonne, elle ne la mesure
   plus. Tant qu'elle restait dans le flux, son `height: 100%` retombait sur
   sa hauteur intrinsèque et c'est le format de l'image qui décidait de la
   hauteur du hero. */
.sr-hero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

@media (max-width: 860px) {
  .sr-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* Colonne unique : la gouttière calculée plus haut n'a plus de sens, la
     forme courte de `padding` la remet à la gouttière du site. */
  .sr-hero__copy { padding: var(--sr-space-lg) 1.5rem; }
  .sr-hero__visual { aspect-ratio: 4 / 3; }
}

/* Sur un téléphone, la photo d'ouverture reste GRANDE : c'est ce que la
   cliente avait demandé dans la scène (« sur mon téléphone on la voit à
   peine ») et le site doit le montrer. Carrée, elle occupe la moitié de
   l'écran sans jamais repousser le titre ni les boutons, qui la précèdent. */
@media (max-width: 560px) {
  .sr-hero__visual { aspect-ratio: 1 / 1; }
}

/* ---------------------------------------------------------------------- *
 * Bande de valeurs (bleu ardoise).
 * ---------------------------------------------------------------------- */
.sr-band {
  background-color: var(--sr-slate);
  color: #fff;
}

.sr-band__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sr-space-md);
  padding: var(--sr-space-md) 0;
}

.sr-band h3 { font-size: 1.15rem; }

.sr-band p {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 720px) {
  .sr-band__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sr-space-sm); }
}

/* ---------------------------------------------------------------------- *
 * Sections et grilles de produits.
 * ---------------------------------------------------------------------- */
.sr-section { padding: var(--sr-section-y) 0; }

/* Variante resserrée : deux sections qui se suivent et parlent du même sujet
   ne prennent pas deux fois le pas complet. */
.sr-section--tight { padding: var(--sr-section-y-tight) 0; }

.sr-section__title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  color: var(--sr-ink);
}

.sr-section__lead {
  margin-top: var(--sr-space-xs);
  max-width: 34rem;
  color: var(--sr-ink-soft);
}

/* Intro éditoriale : le titre tient la colonne de gauche, le texte celle de
   droite. Empilés, ils laissaient la moitié droite de la page vide et
   étiraient la section pour trois lignes de texte. */
.sr-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--sr-space-md) var(--sr-space-lg);
  align-items: start;
}

.sr-intro .sr-section__lead {
  margin-top: 0;
  max-width: 40rem;
}

@media (max-width: 860px) {
  .sr-intro { grid-template-columns: minmax(0, 1fr); gap: var(--sr-space-xs); }
}

.sr-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sr-space-sm);
  margin-top: var(--sr-space-md);
}

@media (max-width: 860px) {
  .sr-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .sr-products { grid-template-columns: minmax(0, 1fr); }
}

.sr-product {
  display: flex;
  flex-direction: column;
  background-color: var(--sr-white);
  border: 1px solid var(--sr-line);
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.sr-product:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -24px rgba(31, 42, 51, 0.45);
}

.sr-product__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--sr-paper-deep);
}

.sr-product__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sr-product__body { padding: 1.1rem 1.1rem 1.25rem; }

.sr-product__name { font-size: 1.15rem; }

.sr-product__meta {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--sr-ink-soft);
}

.sr-product__price {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--sr-ink);
}

.sr-product__desc {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--sr-ink-soft);
}

.sr-product__badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sr-slate);
  background-color: rgba(51, 86, 107, 0.1);
}

/* ---------------------------------------------------------------------- *
 * Section « atelier » (photo + texte) et ses variantes.
 * ---------------------------------------------------------------------- */
.sr-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background-color: var(--sr-paper-deep);
}

/* Même correction que le hero : la photo remplit la colonne sans la mesurer.
   En restant dans le flux, une image 2000x1335 sur une demi-page poussait le
   bloc à 476 px là où 336 suffisent. */
.sr-split__visual {
  position: relative;
  min-height: var(--sr-visual-h);
  overflow: hidden;
}

.sr-split__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sr-split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sr-space-lg);
}

.sr-split__copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

.sr-split__copy p {
  margin-top: var(--sr-space-xs);
  max-width: 28rem;
  color: var(--sr-ink-soft);
}

.sr-split--reverse .sr-split__visual { order: 2; }

@media (max-width: 860px) {
  .sr-split { grid-template-columns: minmax(0, 1fr); }
  .sr-split--reverse .sr-split__visual { order: 0; }
  .sr-split__visual { min-height: 0; aspect-ratio: 4 / 3; }
  .sr-split__copy { padding: var(--sr-space-lg) 1.5rem; }
}

/* ---------------------------------------------------------------------- *
 * Témoignages.
 * ---------------------------------------------------------------------- */
.sr-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sr-space-sm);
}

@media (max-width: 860px) {
  .sr-quotes { grid-template-columns: minmax(0, 1fr); }
}

.sr-quote {
  padding: 1.5rem;
  background-color: var(--sr-white);
  border: 1px solid var(--sr-line);
}

.sr-quote p {
  font-family: var(--sr-serif);
  font-size: 1.05rem;
  line-height: 1.5;
}

.sr-quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sr-ink-soft);
}

/* ---------------------------------------------------------------------- *
 * Bandeau lettre d'information.
 * ---------------------------------------------------------------------- */
.sr-newsletter {
  background-color: var(--sr-paper-deep);
}

.sr-newsletter__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sr-space-md);
  padding: var(--sr-space-lg) 0;
}

.sr-newsletter__title {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.sr-newsletter__form {
  display: flex;
  gap: 0.75rem;
}

.sr-newsletter__form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--sr-line);
  background-color: var(--sr-white);
  font: inherit;
  color: var(--sr-ink);
}

@media (max-width: 860px) {
  .sr-newsletter__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sr-space-sm); }
}

/* ---------------------------------------------------------------------- *
 * Page « La boutique » : bloc pratique + plan stylisé.
 * ---------------------------------------------------------------------- */
.sr-practical {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--sr-space-lg);
  align-items: start;
  margin-top: var(--sr-space-md);
}

@media (max-width: 860px) {
  .sr-practical { grid-template-columns: minmax(0, 1fr); gap: var(--sr-space-md); }
}

.sr-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sr-space-sm) var(--sr-space-md);
}

/* Sur un téléphone, deux colonnes laissaient 159 px par information :
   l'adresse tenait sur trois lignes et l'adresse électronique sur quatre.
   Les renseignements pratiques sont ce que l'on vient chercher sur la page
   d'une boutique, ils passent sur une colonne pleine. */
@media (max-width: 560px) {
  .sr-facts { grid-template-columns: minmax(0, 1fr); }
}

.sr-facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sr-ink-soft);
}

.sr-facts dd {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.sr-facts dd strong { font-weight: 600; }

.sr-map {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(rgba(51, 86, 107, 0.08) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, rgba(51, 86, 107, 0.08) 1px, transparent 1px) 0 0 / 3rem 3rem,
    var(--sr-paper-deep);
  border: 1px solid var(--sr-line);
}

.sr-map__river {
  position: absolute;
  inset: 55% -10% -30% 40%;
  border-radius: 45% 55% 40% 60%;
  background-color: rgba(51, 86, 107, 0.16);
  transform: rotate(-18deg);
}

.sr-map__street {
  position: absolute;
  height: 0.35rem;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 9999px;
}

.sr-map__pin {
  position: absolute;
  top: 38%;
  left: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  transform: translate(-50%, -100%);
}

.sr-map__pin-dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px 9999px 9999px 0.15rem;
  background-color: var(--sr-slate);
  transform: rotate(45deg);
  box-shadow: 0 8px 14px -6px rgba(36, 64, 79, 0.6);
}

.sr-map__pin-label {
  padding: 0.3rem 0.65rem;
  border-radius: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sr-slate);
  background-color: var(--sr-white);
  border: 1px solid var(--sr-line);
  white-space: nowrap;
}

.sr-callout {
  margin-top: var(--sr-space-lg);
  padding: var(--sr-space-sm) var(--sr-space-md);
  background-color: var(--sr-mist);
  border-left: 4px solid var(--sr-slate);
  border-top: 1px solid var(--sr-line);
  border-right: 1px solid var(--sr-line);
  border-bottom: 1px solid var(--sr-line);
}

.sr-callout h3 { font-size: 1.3rem; }

.sr-callout p {
  margin-top: 0.6rem;
  color: var(--sr-ink-soft);
}

/* ---------------------------------------------------------------------- *
 * Pied de page : une ligne, trois liens.
 * ---------------------------------------------------------------------- */
.sr-footer {
  background-color: var(--sr-slate-deep);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

.sr-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: var(--sr-space-sm) 0;
}

.sr-footer__nav {
  display: flex;
  gap: 1.25rem;
}

.sr-footer a { color: inherit; text-decoration: none; }

.sr-footer a:hover { color: #fff; }

/* ---------------------------------------------------------------------- *
 * Divers : lien texte, pied de grille, photo d'ouverture de la boutique.
 * ---------------------------------------------------------------------- */
.sr-section__more { margin-top: var(--sr-space-sm); }

/* Titre de page posé juste sous un sur-titre : le pas vient de l'échelle, il
   n'est plus écrit à la main dans un `style=` du gabarit. */
.sr-section__title--after-eyebrow { margin-top: var(--sr-space-2xs); }

/* Bouton qui clôt un bloc de texte en deux colonnes. Le sélecteur porte le
   parent parce que `.sr-split__copy p` l'emporterait sinon. */
.sr-split__copy .sr-split__cta { margin-top: var(--sr-space-sm); }

.sr-link {
  color: var(--sr-slate);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sr-section__foot {
  margin-top: var(--sr-space-sm);
  font-size: 0.9rem;
  color: var(--sr-ink-soft);
}

/* Photo d'ouverture de « La boutique ». Sa hauteur est bornée par un jeton
   plutôt que figée à 24rem : le titre de la page reste alors dans le premier
   écran, y compris sur un portable de 720 px de haut. La requête de média à
   720 px n'a plus lieu d'être, le plancher du `clamp()` la remplace. */
.sr-shop-hero {
  height: var(--sr-shop-hero-h);
  overflow: hidden;
  background-color: var(--sr-paper-deep);
}

.sr-shop-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}