/* ============================================================
   SCÈNE RAYON — Pages catégorie (couettes/oreillers/traversins
   index.html). On parcourt le rayon comme dans le magasin :
   vignettes alignées, chacune un cadre photo + plaque laiton
   nom + étiquette laiton prix.

   Architecture :
     00 · Conteneur rayon
     01 · Header de rayon (titre + sous-titre)
     02 · Grille de vignettes (4 / 3 / 1 colonnes)
     03 · Vignette individuelle
     04 · Cadre photo de la vignette
     05 · Plaque laiton nom (réutilise .brass-plate)
     06 · Étiquette laiton prix (suspendue)
     07 · Breakpoints
     08 · Reduced-motion

   Charge en complément de scene-maison.css (header sticky) et
   scene-produit.css (palette + variables matières + .brass-plate).
   ============================================================ */


/* ============================================================
   00 · CONTENEUR RAYON
   Padding-top large pour passer sous le header sticky (72 px) +
   bouton retour MAGASIN (~40 px de haut + marges).
   ============================================================ */

.rayon {
  max-width: 1200px;
  margin: 0 auto;
  /* Padding-top calé sur le chrome haut fixe : slogan-banner 50 +
     réassurance 40 + header sticky 72 = 162 px, + 28 px de
     respiration = 190 px. Évite que le titre/sous-titre de rayon
     passe sous le header (Vague 2.0). */
  padding: 190px
           clamp(var(--space-5), 5vw, var(--space-8))
           clamp(var(--space-8), 6vh, var(--space-10));
}


/* ============================================================
   01 · HEADER DE RAYON
   Titre Fraunces + sous-titre Cormorant italic, centrés. Filet
   ocre fin sous le titre pour matérialiser le seuil du rayon.
   ============================================================ */

.rayon__header {
  text-align: center;
  margin-bottom: clamp(var(--space-6), 5vh, var(--space-9));
}

.rayon__title {
  font-family: var(--font-section-title);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--bleu);
  margin: 0 0 var(--space-3);
}

.rayon__subtitle {
  font-family: var(--font-italic-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.3;
  color: var(--rouge);
  margin: 0 0 var(--space-4);
}

.rayon__rule {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--ocre);
  opacity: 0.7;
  margin: 0 auto;
}


/* ============================================================
   02 · GRILLE DE VIGNETTES
   ============================================================ */

.rayon__grid {
  display: grid;
  gap: clamp(var(--space-5), 3vw, var(--space-7));
  align-items: start;
}

.rayon__grid--4 { grid-template-columns: repeat(4, 1fr); }
.rayon__grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Une seule vignette : centrée avec largeur cohérente vs grille
   à plusieurs colonnes (pas écrasée, pas démesurée). */
.rayon__grid--1 {
  grid-template-columns: minmax(0, 280px);
  justify-content: center;
}


/* ============================================================
   03 · VIGNETTE — toute la carte est un lien
   ============================================================ */

.vignette {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  /* iOS : coupe le délai 300 ms du double-tap zoom et empêche le
     "sticky hover" qui maintenait l'état :hover collé pendant la
     navigation (perçu comme un délai par l'utilisateur). */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 0 0 36px;     /* place pour l'étiquette prix suspendue */
  transition:
    transform 280ms var(--ease-out-soft),
    filter 280ms var(--ease-out-soft);
}

/* Hover : uniquement sur les périphériques avec un vrai pointeur (souris,
   trackpad). Sur écran tactile, le tap déclencherait un :hover persistant
   qui reste collé pendant la navigation et crée une impression de lag. */
@media (hover: hover) {
  .vignette:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 8px 16px rgba(58, 48, 36, 0.10));
  }
}

.vignette:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 6px;
  border-radius: 4px;
}

/* Feedback tactile immédiat — le tap doit "répondre" en moins de 100 ms,
   sinon l'utilisateur croit avoir raté son clic (audit iPhone 2026-04-30
   bug critique 1). Scale sensible + légère opacité qui se posent en 80 ms
   pour rester perceptibles avant la navigation. */
.vignette:active {
  transform: scale(0.97);
  opacity: 0.85;
  transition:
    transform 80ms var(--ease-out-soft),
    opacity   80ms var(--ease-out-soft);
}


/* ============================================================
   04 · CADRE PHOTO de la vignette
   Reproduit le cadre de la fiche produit (subtle border ocre +
   ombre douce + fond crème en fallback).
   ============================================================ */

.vignette__photo-frame {
  position: relative;
  width: 100%;
  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 16px 32px rgba(58, 48, 36, 0.10),
    0 4px 8px rgba(58, 48, 36, 0.06),
    inset 0 0 0 1px rgba(154, 139, 121, 0.15);
}

.vignette__photo-frame::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 0.5px solid rgba(200, 153, 104, 0.4);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}

.vignette__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 600ms var(--ease-out-soft);
}

@media (hover: hover) {
  .vignette:hover .vignette__photo {
    transform: scale(1.03);
  }
}


/* ============================================================
   05 · PLAQUE LAITON NOM
   Sous le cadre photo. Format horizontal large (~220 × 50).
   ============================================================ */

.vignette__plate {
  margin-top: 18px;
  width: 100%;
  max-width: 240px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vignette__plate .brass-plate__screw {
  width: 6px;
  height: 6px;
}

.vignette__plate .brass-plate__screw--tl,
.vignette__plate .brass-plate__screw--tr {
  top: 6px;
}

.vignette__plate .brass-plate__screw--bl,
.vignette__plate .brass-plate__screw--br {
  bottom: 6px;
}

.vignette__name {
  font-family: var(--font-section-title);
  font-weight: 600;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: var(--tracking-tight);
  color: var(--bleu);
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.40);
  white-space: nowrap;
  user-select: none;
}


/* ============================================================
   05bis · MINI-DESCRIPTION sous la plaque nom
   Italique noble, taille moyenne, ton subtil.
   ============================================================ */

.vignette__tagline {
  margin: 10px 0 0;
  max-width: 240px;
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.3;
  color: rgba(11, 37, 69, 0.65);
  letter-spacing: 0.01em;
  user-select: none;
}

@media (max-width: 768px) {
  .vignette__tagline { font-size: 13px; max-width: 200px; }
}


/* ============================================================
   06 · ÉTIQUETTE LAITON PRIX SUSPENDUE
   Sous la plaque nom (et sous la tagline si présente), plus petite,
   suspendue par un cordon fin.
   ============================================================ */

.vignette__price-tag {
  position: relative;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vignette__price-cord {
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg,
    rgba(58, 48, 36, 0.10) 0%,
    rgba(58, 48, 36, 0.55) 100%
  );
}

.vignette__price-plate {
  position: relative;
  padding: 8px 16px;
  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;
  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);
  transition:
    transform 240ms var(--ease-out-soft),
    box-shadow 240ms var(--ease-out-soft);
}

.vignette__price-plate::before {
  /* trou d'attache */
  content: '';
  position: absolute;
  top: -3px;
  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%
  );
}

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

@media (hover: hover) {
  .vignette:hover .vignette__price-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 0 0 2px rgba(220, 175, 110, 0.4),
      0 6px 12px rgba(58, 48, 36, 0.24),
      0 0 18px rgba(212, 175, 122, 0.30);
  }
}


/* ============================================================
   07 · BREAKPOINTS
   Pyramide responsive :
     ≥ 1024 px (desktop)        : 4 / 3 / 1 colonnes (par défaut)
     480 – 1023 px (tablette)   : 2 colonnes pour --4 et --3
     ≤ 480 px (mobile)          : 1 colonne, vignettes empilées,
                                  densité augmentée pour permettre
                                  d'apercevoir au moins la suivante.
   ============================================================ */

/* Tablette — 2 colonnes pour Couettes (4 vignettes) et Oreillers (3) */
@media (max-width: 1023px) {
  .rayon__grid--4,
  .rayon__grid--3 {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(var(--space-5), 4vw, var(--space-7));
  }
}

/* Mobile — 1 colonne, plus dense pour révéler la 2ᵉ vignette dans le fold */
@media (max-width: 480px) {
  .rayon__grid--4,
  .rayon__grid--3 {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin: 0 auto;
    gap: var(--space-6);
  }

  .vignette__photo-frame {
    aspect-ratio: 1 / 1;
  }

  .vignette {
    padding-bottom: 24px;
  }
}

/* Mobile très étroit (≤380 px, iPhone SE/mini) — photo plus aplatie pour
   gagner ~80 px en hauteur, le haut de la 2ᵉ vignette devient visible. */
@media (max-width: 380px) {
  .vignette__photo-frame {
    aspect-ratio: 4 / 3;
  }
}

/* Mobile : slogan-banner 40 + bandeau réassurance 40 + header
   sticky 60 = 140 px à clear, + 24 px de respiration = 164 px.
   Valeur fixe alignée sur les fiches produits (Vague 2.0.1bis). */
@media (max-width: 900px) {
  .rayon {
    padding-top: 164px;
  }
}


/* ============================================================
   07b · BADGE FERMETÉ — vignettes traversins (audit 2026-04-30)
   Les 3 traversins partagent traversin-hero.jpg → différenciation
   visuelle par un badge fermeté laiton posé en haut-droite de la
   vignette. Cohérent avec la palette laiton de la maison Duvéa.
   ============================================================ */

.vignette__firmness-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  padding: 6px 12px;
  border-radius: 3px;
  border: none;
  box-shadow:
    0 1px 3px rgba(58, 48, 36, 0.20),
    0 0 0 0.5px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* MOELLEUX / ÉTÉ — laiton chaud, doré clair (DOUCEUR / AURORE). */
.vignette__firmness-badge--moelleux,
.vignette__firmness-badge--ete {
  background: linear-gradient(135deg, #DCB988 0%, #C89968 60%, #B68855 100%);
}

/* MI-FERME / MI-SAISON — laiton neutre, ton intermédiaire (EQUILIBRE / BRUME). */
.vignette__firmness-badge--mi-ferme,
.vignette__firmness-badge--mi-saison {
  background: linear-gradient(135deg, #C89968 0%, #A8853E 60%, #8E6F35 100%);
}

/* FERME / HIVER — laiton foncé, presque bronze (REPOS / GIVRE). */
.vignette__firmness-badge--ferme,
.vignette__firmness-badge--hiver {
  background: linear-gradient(135deg, #8A6E40 0%, #6B5430 60%, #4F3E22 100%);
}

@media (max-width: 480px) {
  .vignette__firmness-badge {
    top: 10px;
    right: 10px;
    font-size: 10px;
    padding: 5px 10px;
    letter-spacing: 0.10em;
  }
}


/* ============================================================
   08 · REDUCED-MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .vignette,
  .vignette__photo,
  .vignette__price-plate {
    transition: none;
  }

  .vignette:hover .vignette__photo {
    transform: none;
  }
}


/* ============================================================
   FIX MOBILE — boutons flottants en collision avec le contenu
   (Vague 2.x — pages rayons uniquement)
   • .maison-back (top-left, « ← Boutique ») chevauche le titre H1
     centré (même y=164 px sur mobile).
   • .duvea-back-fab (bottom-left, « ← Retour à l'accueil ») chevauche
     la première vignette.
   Sur mobile, le burger menu contient déjà un lien « Boutique » et le
   footer affiche déjà « ← Retour à duvea.fr » → on peut masquer les
   deux FAB sans perte fonctionnelle. Scopé .page--rayon uniquement :
   showroom (.page--maison), fiches (.page--produit), panier et vitrine
   restent intacts. !important pour battre les règles existantes.
   ============================================================ */
@media (max-width: 767px) {
  .page--rayon .maison-back,
  .page--rayon .duvea-back-fab {
    display: none !important;
  }
}