/* ============================================================
   SCÈNE PRODUIT — Fiche 1 ÉCRAN, achat instinctif
   Direction Cyril : tout tient sur 1 écran. Photo à gauche, bloc
   d'achat à droite. Plaque laiton titre, 4 étiquettes tailles,
   prix dynamique en gros, sceau EMPORTER. Fiche technique en
   modale optionnelle pour ne pas alourdir.

   Architecture :
     00 · Reset local + page-enter (settle in)
     01 · Variables matières
     02 · Background subtil marbre Carabottino
     03 · Plaque laiton template universel
     04 · Onglets navigation inter-couettes
     05 · Container fiche (grid 2 cols)
     06 · Photo produit + cadre
     07 · Plaque titre fiche
     08 · 4 étiquettes laiton tailles
     09 · Prix dynamique (animation au changement)
     10 · Sceau EMPORTER
     11 · Info ligne + lien fiche technique
     12 · Modale "Bientôt disponible"
     13 · Modale "Fiche technique" (papier beige)
     14 · Breakpoints
     15 · Reduced-motion

   Le header sticky .maison-nav vient de scene-maison.css.
   Le scene-produit.js cible : .produit-achat / .produit-cta /
   .produit-price-display__amount / input[name="size"] /
   [data-open-specs] / #modal-specs.
   ============================================================ */


/* ============================================================
   00 · RESET LOCAL + PAGE-ENTER
   Le contenu principal "se pose" au load (translate + fade léger).
   ============================================================ */

.page--produit {
  background: var(--creme);
  color: var(--noir);
  font-family: var(--font-body);
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  /* Pas d'animation sur le body — évite la création d'un containing
     block qui décale les éléments en position: fixed (notamment le
     bouton retour MAGASIN). Le rendu est instantané, ce qui est en
     phase avec la direction "1 écran achat instinctif". */
}


/* ============================================================
   01 · VARIABLES LOCALES MATIÈRES
   ============================================================ */

.page--produit {
  --brass-light:  #DCB988;
  --brass-mid:    #C9A875;
  --brass-deep:   #8A6E40;

  --brass-gradient:
    linear-gradient(180deg,
      rgba(255, 250, 230, 0.22) 0%,
      transparent 30%,
      transparent 70%,
      rgba(0, 0, 0, 0.10) 100%
    ),
    linear-gradient(135deg,
      var(--brass-mid) 0%,
      var(--brass-light) 50%,
      var(--brass-mid) 100%
    );

  --brass-stries:
    repeating-linear-gradient(180deg,
      rgba(255, 245, 215, 0.06) 0,
      rgba(255, 245, 215, 0.06) 1px,
      transparent 1px,
      transparent 2px
    );

  --paper-beige-1: #F0E5C8;
  --paper-beige-2: #E8DBB8;
}


/* ============================================================
   02 · BACKGROUND SUBTIL MARBRE CARABOTTINO
   Très ténu — juste un voile derrière le crème pour rappeler
   qu'on est dans le magasin. Ne crée pas de bruit visuel fort.
   ============================================================ */

.page--produit::before {
  content: '';
  position: fixed;
  inset: 0;
  /* z-index: -1 → derrière TOUT le contenu naturel sans avoir besoin
     d'override sur les enfants (qui casserait le position: fixed du
     bouton retour MAGASIN). */
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 140px,
      rgba(184, 172, 154, 0.04) 141px,
      rgba(184, 172, 154, 0.06) 142px,
      rgba(184, 172, 154, 0.04) 143px,
      transparent 144px,
      transparent 280px
    ),
    radial-gradient(ellipse at 70% 30%,
      rgba(255, 220, 160, 0.06) 0%,
      transparent 60%
    );
}


/* ============================================================
   03 · PLAQUE LAITON TEMPLATE UNIVERSEL
   ============================================================ */

.brass-plate {
  position: relative;
  background: var(--brass-stries), var(--brass-gradient);
  border-top:    0.5px solid rgba(255, 250, 230, 0.55);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.28);
  border-left:   0.5px solid rgba(255, 250, 230, 0.30);
  border-right:  0.5px solid rgba(0, 0, 0, 0.18);
  border-radius: 1.5px;
  box-shadow:
    inset  1px  1px 0 rgba(255, 250, 230, 0.45),
    inset -1px -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 8px rgba(58, 48, 36, 0.22),
    0 1px 2px rgba(58, 48, 36, 0.14);
}

.brass-plate__screw {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    #8B6F47 0%,
    #6B5234 60%,
    #3A2E1A 100%
  );
  box-shadow:
    inset  1px  1px 1px rgba(255, 245, 215, 0.30),
    inset -1px -1px 1px rgba(0, 0, 0, 0.40),
    0 0.5px 0.5px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.brass-plate__screw--tl { top: 7px;    left: 7px; }
.brass-plate__screw--tr { top: 7px;    right: 7px; }
.brass-plate__screw--bl { bottom: 7px; left: 7px; }
.brass-plate__screw--br { bottom: 7px; right: 7px; }


/* ============================================================
   04 · ONGLETS NAVIGATION INTER-COUETTES
   Été · Mi-saison · Hiver · 4 saisons. Item actif souligné en
   ocre. Sous le header sticky, padding généreux.
   ============================================================ */

.fiche-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(var(--space-4), 3vw, var(--space-6));
  /* Padding-block réduit : on veut une fiche dense, "magasin où tout
     est à portée de main". Total margin-top + padding-block = ~84 px
     desktop / ~70 px mobile sous le header. */
  padding: clamp(8px, 1.2vh, 14px) clamp(var(--space-4), 3vw, var(--space-6));
  /* clear du chrome haut fixe : slogan-banner 50 + réassurance 40 +
     header sticky 72 = 162 px, + 28 px de respiration (Vague 2.0). */
  margin-top: 190px;
  flex-wrap: wrap;
}

.fiche-tabs__item {
  position: relative;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gris);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  transition: color 200ms var(--ease-out-soft);
}

.fiche-tabs__item:hover,
.fiche-tabs__item:focus-visible {
  color: var(--noir);
  outline: none;
}

.fiche-tabs__item.is-active {
  color: var(--noir);
  font-weight: 600;
}

.fiche-tabs__item.is-active::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 0;
  height: 2px;
  background: var(--ocre);
}


/* ============================================================
   05 · CONTAINER FICHE — grid 2 colonnes desktop / 1 mobile
   ============================================================ */

.fiche-card {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(var(--space-3), 2vh, var(--space-5))
           clamp(var(--space-5), 5vw, var(--space-7))
           clamp(var(--space-4), 3vh, var(--space-6));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-5), 4vw, var(--space-7));
  align-items: center;
}

/* Variante "fiche solo" — produit unique sans nav inter-modèles
   (ex : traversin). Le padding-top compense l'absence de
   .fiche-tabs et laisse de la place au bouton retour MAGASIN. */
.fiche--solo .fiche-card {
  padding-top: clamp(120px, 16vh, 144px);
}

@media (max-width: 900px) {
  .fiche--solo .fiche-card {
    padding-top: clamp(110px, 14vh, 128px);
  }
}


/* ============================================================
   06 · PHOTO PRODUIT + CADRE
   Aspect-ratio 4:5 portrait. Cadre bois subtil. Coins légèrement
   arrondis. Ombre douce. Placeholder marbre+halo si image manque.
   ============================================================ */

.fiche-card__photo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiche-card__photo-frame {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%,
      rgba(255, 220, 160, 0.20) 0%,
      transparent 70%
    ),
    linear-gradient(180deg, var(--creme) 0%, var(--sable) 100%);
  box-shadow:
    0 24px 48px rgba(58, 48, 36, 0.10),
    0 8px 16px rgba(58, 48, 36, 0.06),
    inset 0 0 0 1px rgba(154, 139, 121, 0.15);
}

.fiche-card__photo-frame::after {
  /* fin filet doré inset (cadre laiton patiné) */
  content: '';
  position: absolute;
  inset: 8px;
  border: 0.5px solid rgba(200, 153, 104, 0.4);
  border-radius: 2px;
  pointer-events: none;
}

.fiche-card__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* ============================================================
   07 · PLAQUE TITRE FICHE — laiton horizontal large
   ============================================================ */

.fiche-card__buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-4), 2.5vh, var(--space-5));
  text-align: center;
}

.brass-plate--fiche {
  width: 100%;
  max-width: 380px;
  padding: clamp(18px, 2vh, 26px) clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fiche-title__diamond {
  font-family: var(--font-section-title);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: var(--tracking-tight);
  color: var(--bleu);
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.40);
  margin: 0;
  line-height: 1.1;
}

.fiche-title__sub {
  font-family: var(--font-italic-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.2vw, 15px);
  letter-spacing: var(--tracking-tight);
  color: var(--rouge);
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.30);
  margin: 0;
  line-height: 1.2;
}


/* ============================================================
   08 · 4 ÉTIQUETTES LAITON TAILLES
   ============================================================ */

.fiche-sizes {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.2vw, 14px);
  border: none;
  padding: 0;
  margin: 0;
}

.tag-suspendue {
  position: relative;
  display: block;
  cursor: pointer;
}

.tag-suspendue input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tag-suspendue__cord {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg,
    rgba(58, 48, 36, 0.10) 0%,
    rgba(58, 48, 36, 0.55) 100%
  );
}

.tag-suspendue__plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 6px 8px;
  margin-top: 14px;
  background: var(--brass-stries), var(--brass-gradient);
  border-top:    0.5px solid rgba(255, 250, 230, 0.55);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.28);
  border-left:   0.5px solid rgba(255, 250, 230, 0.30);
  border-right:  0.5px solid rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  min-height: 56px;
  transition:
    transform 240ms var(--ease-out-soft),
    box-shadow 240ms var(--ease-out-soft);
  box-shadow:
    inset  1px  1px 0 rgba(255, 250, 230, 0.45),
    inset -1px -1px 0 rgba(0, 0, 0, 0.18),
    0 3px 6px rgba(58, 48, 36, 0.18),
    0 1px 2px rgba(58, 48, 36, 0.10);
}

.tag-suspendue__hole {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(58, 48, 36, 0.85) 70%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

.tag-suspendue__dim {
  font-family: var(--font-italic-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: var(--tracking-tight);
  color: var(--bleu);
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.40);
  line-height: 1;
  white-space: nowrap;
}

.tag-suspendue__price {
  font-family: var(--font-section-title);
  font-weight: 600;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: var(--tracking-tight);
  color: var(--bleu);
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.40);
  line-height: 1;
  margin-top: 1px;
}

.tag-suspendue:hover .tag-suspendue__plate {
  transform: translateY(-2px);
  box-shadow:
    inset  1px  1px 0 rgba(255, 250, 230, 0.55),
    inset -1px -1px 0 rgba(0, 0, 0, 0.20),
    0 6px 12px rgba(58, 48, 36, 0.22),
    0 2px 4px rgba(58, 48, 36, 0.12);
}

/* État sélectionné — halo doré + relief plus marqué */
.tag-suspendue input:checked ~ .tag-suspendue__plate {
  transform: translateY(-3px);
  box-shadow:
    inset  1px  1px 0 rgba(255, 250, 230, 0.70),
    inset -1px -1px 0 rgba(0, 0, 0, 0.18),
    0 0 0 2px rgba(220, 175, 110, 0.45),
    0 8px 16px rgba(58, 48, 36, 0.26),
    0 0 24px rgba(212, 175, 122, 0.35);
}

.tag-suspendue input:focus-visible ~ .tag-suspendue__plate {
  outline: var(--focus-ring);
  outline-offset: 4px;
}


/* ============================================================
   09 · PRIX DYNAMIQUE — typo très grande, animation au changement
   ============================================================ */

.fiche-price {
  font-family: var(--font-section-title);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-tightest);
  color: var(--bleu);
  margin: clamp(var(--space-2), 1vh, var(--space-3)) 0 0;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.produit-price-display__amount {
  display: inline-block;
  transition: transform 180ms var(--ease-out-soft),
              opacity 180ms var(--ease-out-soft);
}

.produit-price-display__amount.is-changing {
  transform: translateY(-10px);
  opacity: 0;
}

.produit-price-display__currency {
  font-size: 0.55em;
  vertical-align: text-top;
  font-weight: 500;
  color: var(--gris);
  margin-left: 0.15em;
}


/* ============================================================
   10 · SCEAU EMPORTER — oval laiton patiné, ~280 px de large
   ============================================================ */

.sceau-emporter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  border: none;
  cursor: pointer;
  padding: 0;
  background: transparent;
  margin: clamp(var(--space-2), 1vh, var(--space-3)) 0 0;
  transition:
    transform 220ms var(--ease-out-soft),
    filter 220ms var(--ease-out-soft);
}

.sceau-emporter__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px clamp(28px, 4vw, 48px);
  background: var(--brass-stries), var(--brass-gradient);
  border-top:    1px solid rgba(255, 250, 230, 0.6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.32);
  border-left:   1px solid rgba(255, 250, 230, 0.3);
  border-right:  1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 250, 230, 0.55),
    inset -1px -1px 0 rgba(0, 0, 0, 0.20),
    0 6px 14px rgba(58, 48, 36, 0.30),
    0 2px 4px rgba(58, 48, 36, 0.16);
}

.sceau-emporter__label {
  font-family: var(--font-section-title);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bleu);
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.5);
}

.sceau-emporter__arrow {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 500;
  color: var(--bleu);
  transition: transform 220ms var(--ease-out-soft);
}

.sceau-emporter:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 4px 10px rgba(212, 175, 122, 0.45));
}

.sceau-emporter:hover .sceau-emporter__arrow {
  transform: translateX(4px);
}

.sceau-emporter:active {
  transform: translateY(1px);
  filter: brightness(0.95);
}

.sceau-emporter:focus-visible .sceau-emporter__inner {
  outline: var(--focus-ring);
  outline-offset: 4px;
}


/* ============================================================
   11 · INFO LIGNE + LIEN FICHE TECHNIQUE
   ============================================================ */

.fiche-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-3), 1.5vw, var(--space-4));
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--gris);
  margin: 0;
  line-height: 1.4;
}

.fiche-info__sep {
  font-size: 8px;
  color: var(--ocre);
  opacity: 0.7;
  line-height: 1;
}

.fiche-specs-link {
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--gris);
  cursor: pointer;
  /* Touch target ≥ 44 px (audit mobile 2026-04-30). */
  min-height: 44px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
  text-decoration-color: rgba(107, 101, 88, 0.4);
  text-underline-offset: 4px;
  transition: color 200ms var(--ease-out-soft);
}

.fiche-specs-link:hover,
.fiche-specs-link:focus-visible {
  color: var(--bleu);
  text-decoration-color: var(--ocre);
  outline: none;
}

.fiche-specs-link span {
  transition: transform 200ms var(--ease-out-soft);
}

.fiche-specs-link:hover span {
  transform: translateX(3px);
}


/* ============================================================
   12 · MODALE "Fiche technique" — papier beige texturé,
   plein écran sur petit, large boîte sur desktop
   ============================================================ */

.modal-specs {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 640px;
  width: calc(100% - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
}

.modal-specs::backdrop {
  background: rgba(26, 23, 20, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-specs[open] {
  animation: modal-slide-up 380ms var(--ease-out-quart);
}

.modal-specs__paper {
  position: relative;
  background:
    radial-gradient(circle at 20% 20%,
      rgba(154, 139, 121, 0.04) 0%,
      transparent 40%
    ),
    radial-gradient(circle at 80% 70%,
      rgba(154, 139, 121, 0.05) 0%,
      transparent 40%
    ),
    linear-gradient(180deg,
      var(--paper-beige-1) 0%,
      var(--paper-beige-2) 100%
    );
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  border-radius: 2px;
  box-shadow:
    0 24px 48px rgba(58, 48, 36, 0.20),
    inset 0 0 0 1px rgba(154, 139, 121, 0.35);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.modal-specs__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: rgba(255, 252, 247, 0.6);
  border: 1px solid rgba(154, 139, 121, 0.25);
  border-radius: var(--radius-pill);
  font-family: var(--font-section-title);
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--gris);
  cursor: pointer;
  transition:
    background 200ms var(--ease-out-soft),
    color 200ms var(--ease-out-soft);
  z-index: 1;
}

.modal-specs__close:hover,
.modal-specs__close:focus-visible {
  background: var(--blanc);
  color: var(--noir);
  outline: none;
}

.modal-specs__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ocre-fc);
  margin: 0 0 var(--space-3);
  text-align: center;
}

.modal-specs__title {
  font-family: var(--font-section-title);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--noir);
  margin: 0 0 4px;
  text-align: center;
}

.modal-specs__sub {
  font-family: var(--font-italic-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.3;
  color: var(--rouge);
  margin: 0 0 var(--space-4);
  text-align: center;
}

.modal-specs__rule {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--ocre);
  opacity: 0.6;
  margin: 0 auto var(--space-5);
}

.modal-specs__list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px dashed rgba(154, 139, 121, 0.4);
  border-bottom: 1px dashed rgba(154, 139, 121, 0.4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.modal-specs__list li {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-4);
  align-items: baseline;
}

.modal-specs__list li > span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gris);
}

.modal-specs__list li > em {
  font-family: var(--font-italic-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.3;
  color: var(--noir);
}

.modal-specs__certifs {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ocre-fc);
  text-align: center;
  margin: 0 0 var(--space-4);
  line-height: 1.5;
}

.modal-specs__delai {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--gris);
  text-align: center;
  margin: 0 0 var(--space-5);
}

.modal-specs__delai em {
  font-family: var(--font-italic-editorial);
  font-style: italic;
}

.modal-specs__guarantees {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px dashed rgba(154, 139, 121, 0.4);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--noir);
}

.modal-specs__guarantees li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.modal-specs__guarantees li::before {
  content: '◆';
  font-size: 8px;
  color: var(--ocre);
  flex-shrink: 0;
}


/* ============================================================
   14 · BREAKPOINTS
   ============================================================ */

@media (max-width: 900px) {
  .fiche-tabs {
    /* Mobile : slogan-banner 40 + bandeau réassurance 40 + header 60
       = 140 px à clear, + 24 px de respiration = 164 px (Vague 2.0 —
       le calcul d'avril oubliait le slogan-banner ajouté depuis). */
    margin-top: 164px;
    gap: var(--space-3);
    padding: clamp(20px, 3vh, 32px) var(--space-3) var(--space-3);
  }

  .fiche-tabs__item {
    font-size: var(--fs-xs);
    padding: var(--space-2);
  }

  .fiche-card {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5) var(--space-7);
  }

  .fiche-card__photo-frame {
    max-width: 360px;
    aspect-ratio: 1 / 1;     /* mobile : carré pour éviter trop de hauteur */
  }

  .fiche-card__buy {
    gap: var(--space-4);
  }

  .fiche-sizes {
    gap: 8px;
  }

  .modal-specs__list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .modal-specs__guarantees {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .fiche-card__photo-frame {
    max-width: 280px;
  }

  .fiche-price {
    font-size: 3rem;
  }

  .sceau-emporter {
    max-width: 280px;
  }
}


/* ============================================================
   15 · REDUCED-MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .page--produit .fiche {
    animation: none;
  }

  .modal-specs[open] {
    animation: none;
  }

  .tag-suspendue__plate,
  .sceau-emporter,
  .sceau-emporter__arrow,
  .produit-price-display__amount,
  .fiche-specs-link span {
    transition: none;
  }
}