/* ============================================
   GRAVANO — RAYONS
   Double étage (étiquette claire + signature),
   textures subtiles par catégorie.
   ============================================ */

.gv-rayon{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  min-height:60vh;
  max-width:1280px;
  margin:0 auto clamp(7rem, 16vh, 12rem);   /* assez d'espace pour ne jamais chevaucher le rayon suivant */
  border-radius:1.4rem;
  position:relative;
  overflow:visible;               /* le mockup peut déborder du rayon */
}
/* Bascule de colonne (visuel à droite au lieu de gauche) — listé
   explicitement par rayon (II, IV, VI) plutôt que nth-child(even) :
   le <div class="gv-rayons-intro"> avant le rayon I décale de 1 le
   comptage nth-child, ce qui inversait à tort les rayons I, II, III. */
.gv-rayons section.gv-rayon:nth-of-type(2) .gv-rayon-visuel,
.gv-rayons section.gv-rayon:nth-of-type(5) .gv-rayon-visuel,
.gv-rayons section.gv-rayon:nth-of-type(7) .gv-rayon-visuel{
  order:2;
}

/* Le cadre de catégorie devient un vrai support : coins arrondis
   partout, liseré doré renforcé, ombre resserrée pour ne pas
   déborder dans l'intervalle (le dégradé de la page doit y rester visible). */
.gv-rayon-visuel{
  position:relative;
  overflow:visible;               /* laisse le mockup déborder (fond dégradé déjà clippé par border-radius) */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem 2rem;
  min-height:70vh;
  border-radius:1.4rem;
  border:1px solid rgba(201,162,39,.55);
  /* spread proche du flou : l'ombre gagne en présence/profondeur
     verticale sans déborder latéralement dans l'intervalle (2px max). */
  box-shadow:
    0 1px 2px rgba(0,0,0,.3),
    0 22px 24px -22px rgba(21,32,42,.65);
}
.gv-rayon-visuel .gv-chiffre{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(4.5rem,9vw,8rem);
  line-height:1;
  font-weight:400;
  font-style:italic;
  position:absolute;
  left:2rem;bottom:2rem;
  z-index:25;                     /* toujours au-dessus du téléphone (z-index:20) : garantit sa visibilité */
  opacity:.55;
  pointer-events:none;
}
/* Le côté réel du téléphone par rayon est fixé par les règles
   d'irrégularité ci-dessous (nth-of-type, prioritaires sur le simple
   odd/even à cause de la section .gv-bascule intercalée) : rayons II,
   IV, VI ont leur téléphone à GAUCHE → le chiffre bascule à droite. */
.gv-rayons section.gv-rayon:nth-of-type(2) .gv-rayon-visuel .gv-chiffre,
.gv-rayons section.gv-rayon:nth-of-type(5) .gv-rayon-visuel .gv-chiffre,
.gv-rayons section.gv-rayon:nth-of-type(7) .gv-rayon-visuel .gv-chiffre{
  left:auto;right:2rem;
}
/* Rayon III : chiffre resserré dans le coin, cumulé au décalage du
   téléphone (poussé à fond contre le bord droit) pour maximiser l'écart. */
.gv-rayons section.gv-rayon:nth-of-type(3) .gv-rayon-visuel .gv-chiffre{
  left:1rem;bottom:1rem;
}

.gv-rayon-texte{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4rem 5vw;
  background:var(--gv-blanc);
  border-radius:1.4rem;
  box-shadow:
    0 1px 2px rgba(0,0,0,.12),
    0 20px 22px -20px rgba(21,32,42,.4);
}
.gv-rayon-texte .gv-etiquette{ color:var(--gv-terracotta-fonce); margin-bottom:.9rem; display:block; }
.gv-zone-intense .gv-rayon-texte .gv-etiquette{ color:var(--gv-grenat); }

/* Signatures de rayon (« Le Péché véniel », « L'Attention »…) : RETIRÉES pour le
   moment (demande propriétaire) — élégantes mais elles brouillaient la
   compréhension (on ne saisit pas tout de suite de quelle catégorie il s'agit).
   L'étiquette claire (« La maille ») + le pitch suffisent. À restaurer/affiner
   plus tard. */
.gv-rayon-texte .gv-signature{
  display:none !important;
  font-size:clamp(1.9rem,3.6vw,2.7rem);
  margin-bottom:1.1rem;
}
.gv-rayon-texte .gv-pitch{
  font-size:1.25rem;
  color:#4A5B6E;
  margin-bottom:1.5rem;
  max-width:42ch;
}
.gv-rayon-texte .gv-details{
  font-size:.95rem;
  color:#64778A;
  margin-bottom:2.1rem;
  max-width:46ch;
}

/* Textures de L'ATELIER — sensation subliminale, jamais un décor chargé.
   ⚠️ Neutralisées au lancement, comme sur la mère : les crochets restent en
   place pour recevoir plus tard trame de toile, laine peignée, chevron, grain
   de cuir, papier de patron. RÈGLE PAYÉE PAR LA MÈRE : quand on les activera,
   les images devront être en format PAYSAGE — des portraits recadrés se
   retrouvent trop zoomés et ça se voit. */
.gv-tx-toile::before{ display:none !important; }
.gv-tx-laine::before{ display:none !important; }
.gv-tx-chevron::before{ display:none !important; }
.gv-tx-cuir::before{ display:none !important; }
.gv-tx-encre::before{ display:none !important; }

@media(max-width:760px){
  .gv-rayon{ grid-template-columns:1fr; min-height:auto; margin:0 4vw 8rem; gap:0; }
  /* PAS de zigzag sur mobile : tous les rayons empilent PAREIL. ⭐ La CARTE DE
     VISITE (texte : étiquette + pitch) passe AVANT le téléphone → on sait CE QU'ON
     REGARDE avant de voir les produits (sinon « on ne sait pas ce qu'on voit »,
     Florient). Rythme régulier carte/téléphone/carte/téléphone. On écrase la règle
     nth-of-type du desktop (spécificité montée + !important). */
  .gv-rayons section.gv-rayon .gv-rayon-texte{ order:0 !important;padding:2.4rem 7vw 1.2rem;position:relative;z-index:1;transform:none !important; }
  /* ⭐ TÉLÉPHONE EN FLUX NORMAL sur mobile (Florient 22/07). En desktop il est en
     position:absolute + height:126% (il flotte/déborde, effet « posé sur le tapis »).
     Ces réglages PERSISTAIENT en mobile → le téléphone débordait de 26 % et
     chevauchait la catégorie suivante (« les uns sur les autres »), la marge ne
     séparait rien. On le remet en bloc CENTRÉ et CONTENU → la marge de 6,5rem
     sépare enfin franchement. Petit écart carte→téléphone (.6rem) < écart entre
     catégories (6,5rem) → le duo se groupe, les catégories se distinguent. */
  .gv-rayons section.gv-rayon .gv-rayon-visuel{ order:1 !important;min-height:auto !important;padding:.4rem 0 !important;margin-top:.6rem;position:relative;z-index:2;display:flex !important;justify-content:center !important;align-items:flex-start !important; }
  .gv-rayons section.gv-rayon .gv-mockup-wrap{
    position:relative !important;
    inset:auto !important;
    height:auto !important;
    width:min(72%, 288px) !important;
    aspect-ratio:100 / 205 !important;
    transform:none !important;
    margin:0 auto !important;
  }
  /* le grand chiffre romain de fond ne pousse pas le téléphone hors centre */
  .gv-rayons section.gv-rayon .gv-rayon-visuel .gv-chiffre{ position:absolute !important; }
}

/* ============================================
   FONDS DE RAYON — « le jour qui s'habille »
   Du blanc de chemise du matin à l'encre du soir.
   Chaque rayon reprend là où le précédent s'arrête :
   le fil est CONTINU, on ne voit pas les coutures.
   ============================================ */
.gv-v-fond{   background:linear-gradient(150deg, #E3EDF9, #B3CCEB); }
.gv-v-maille{ background:linear-gradient(150deg, #B3CCEB, #7AA4D9); }
.gv-v-veste{  background:linear-gradient(150deg, #7AA4D9, #4A79B0); }
/* ⭐ LE CUIR — le seul rayon qui réchauffe : un voile de fauve (--gvs-cuir)
   posé sur le bleu. C'est exactement à ça que sert cet accent : sans lui,
   bleu froid + châssis métal donnerait un site glacial. */
.gv-v-cuir{   background:linear-gradient(150deg, #4A79B0 0%, #3E6488 55%, #6B5238 100%); }
.gv-v-soir{   background:linear-gradient(150deg, #31668F, #12304A); }



/* ————— Vignettes produits = FEED PLEIN ÉCRAN (façon réseau social) —————
   Chaque vignette occupe TOUT l'écran du mockup ; le scroll aimante (snap) une
   vignette à la fois — on ne fait pas défiler des images en enfilade, chaque
   à-coup cale le produit suivant. Image en haut, fond + courte description sous
   elle. Tailles en cqw = relatives à la LARGEUR DE L'ÉCRAN du mockup (voir
   container-type sur .gv-mockup-ecran), donc justes quelle que soit sa taille. */
.gv-prod-vignette{
  position:relative;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  flex:0 0 100%;
  height:100%;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  background:linear-gradient(180deg,#101518 0%,#121F2A 100%);
}
.gv-prod-media{
  flex:0 0 61%;
  display:block;
  overflow:hidden;
  background:#0d0d0f;
}
.gv-prod-media img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.gv-prod-info{
  flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:center;gap:1cqw;
  padding:5cqw 7cqw;
}
/* ⛔ Le « rayon discret » (floutage +18) de la mère est retiré : Gravano Style
   ne vend aucun produit pour adultes. Rien à masquer, donc rien à coder. */
.gv-prod-nom{
  display:block;
  font-family:'Cormorant Garamond',serif;font-weight:600;
  color:#fff;font-size:8cqw;line-height:1.08;
}
.gv-prod-desc{
  display:block;
  font-family:'Figtree',sans-serif;
  color:rgba(255,255,255,.72);font-size:4.2cqw;line-height:1.3;
}
.gv-prod-prix{
  display:block;
  font-family:'Figtree',sans-serif;
  color:var(--gv-or);font-weight:600;font-size:5.4cqw;margin-top:1cqw;
}
.gv-prod-vide{
  flex:0 0 100%;height:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}
/* ============================================
   MOCKUP TÉLÉPHONE — cadre aluminium clair (CSS pur,
   plus d'image), échelle 1:1, dépasse le cadre de catégorie.
   Le cadre est DERRIÈRE l'écran, qui vient se caler par-dessus.
   ============================================ */
.gv-mockup-wrap{
  position:absolute;
  z-index:20;                     /* flotte au-dessus de tout */
  top:50%;
  height:125%;                    /* dépasse vraiment en haut et en bas */
  aspect-ratio:721 / 1445;
  transform:translateY(-50%);
  /* Ombre resserrée : le téléphone penche vers le bord de l'intervalle,
     un flou trop large y débordait (anomalie en bas de l'intervalle). */
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.4)) drop-shadow(0 6px 8px rgba(0,0,0,.3));
}
/* Position horizontale : plus de règle générique odd/even ici (elle
   était de toute façon toujours écrasée par les réglages par rayon
   ci-dessous, MAIS elle posait left ET right en même temps sur le même
   élément à cause du décalage nth-child expliqué plus haut — conflit
   qui neutralisait silencieusement le réglage voulu). Chaque rayon
   fixe désormais uniquement le côté (right OU left) dont il a besoin. */

/* Légère irrégularité par rayon (position, taille, rotation) — chaque
   téléphone semble posé un peu différemment, pour casser la répétition. */
/* Attention : <section class="gv-bascule"> s'intercale entre les rayons III et IV,
   donc les index nth-of-type des rayons IV/V/VI sont décalés de +1 (5, 6, 7). */
.gv-rayons section.gv-rayon:nth-of-type(1) .gv-mockup-wrap{ top:48%;height:126%;right:11%;transform:translateY(-50%) rotate(-1.5deg); }
.gv-rayons section.gv-rayon:nth-of-type(2) .gv-mockup-wrap{ top:53%;height:122%;left:13%;transform:translateY(-50%) rotate(1deg); }
.gv-rayons section.gv-rayon:nth-of-type(3) .gv-mockup-wrap{ top:51%;height:120%;right:-7%;transform:translateY(-50%) rotate(0deg); }
.gv-rayons section.gv-rayon:nth-of-type(5) .gv-mockup-wrap{ top:47%;height:124%;left:10%;transform:translateY(-50%) rotate(1.5deg); }
.gv-rayons section.gv-rayon:nth-of-type(6) .gv-mockup-wrap{ top:50%;height:121%;right:12%;transform:translateY(-50%) rotate(-1deg); }
.gv-rayons section.gv-rayon:nth-of-type(7) .gv-mockup-wrap{ top:54%;height:128%;left:11%;transform:translateY(-50%) rotate(2deg); }

/* Le cadre aluminium : dessiné en CSS, DERRIÈRE l'écran */
.gv-mockup-frame{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  z-index:1;                      /* sous l'écran */
  border-radius:14% / 7%;
  pointer-events:none;
  background:
    linear-gradient(115deg,
      transparent 22%, rgba(255,255,255,.14) 38%,
      rgba(255,255,255,.22) 46%, rgba(255,255,255,.12) 54%,
      transparent 70%),
    repeating-linear-gradient(102deg,
      rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px,
      transparent 1px, transparent 3px),
    linear-gradient(160deg, #d7dade 0%, #b7bcc3 32%, #8b9096 68%, #5f6469 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 4px rgba(0,0,0,.3),
    inset 0 0 0 1px rgba(0,0,0,.2);
}
/* Boutons latéraux (volume, power) */
.gv-mockup-btn{
  position:absolute;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, #5f6469, #d7dade 45%, #d7dade 55%, #5f6469);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.gv-mockup-btn--vol1{ left:-1.1%;top:21%;width:1.4%;height:6.5%;border-radius:2px 0 0 2px; }
.gv-mockup-btn--vol2{ left:-1.1%;top:29.5%;width:1.4%;height:6.5%;border-radius:2px 0 0 2px; }
.gv-mockup-btn--power{ right:-1.1%;top:19%;width:1.4%;height:9%;border-radius:0 2px 2px 0; }

/* L'écran : PAR-DESSUS le cadre, calé à son emplacement */
.gv-mockup-ecran{
  position:absolute;
  left:1.8%;top:1%;
  width:96.4%;height:98%;         /* contour affiné de moitié — quasi bord à bord */
  overflow:hidden;
  border-radius:11%;
  background:#0d0d0f;
  z-index:2;                      /* au-dessus du cadre */
  container-type:inline-size;     /* → les cqw des vignettes se calent sur l'écran */
}
/* Feed scrollable qui AIMANTE (snap) une vignette PLEIN ÉCRAN à la fois. */
.gv-mockup-scroll{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.gv-mockup-scroll::-webkit-scrollbar{ display:none; }
/* Auto-scroll SUPPRIMÉ (la lente ondulation). À la place, un « tic tic » BREF
   quand le mockup entre dans le champ : deux petits sursauts puis STOP, fixe —
   juste le signal « c'est scrollable ». Déclenché par .gv-tic (IntersectionObserver,
   voir template-accueil.php). */
.gv-mockup-scroll.gv-tic{ animation:gv-tic-tic 1.9s ease-out both; }
@keyframes gv-tic-tic{
  0%,16%{ transform:translateY(0); }
  26%{ transform:translateY(-36px); }   /* tic (amplitude augmentée, toujours sec) */
  37%{ transform:translateY(0); }
  47%{ transform:translateY(-36px); }   /* tic */
  58%,100%{ transform:translateY(0); }  /* … puis basta, fixe */
}
@media(prefers-reduced-motion:reduce){
  .gv-mockup-scroll.gv-tic{ animation:none; }
}
@media(max-width:760px){
  /* Mockup peu débordant sur mobile → n'empiète pas sur la catégorie suivante
     (l'espace de 6.5rem entre rayons sépare clairement, Florient 22/07). */
  .gv-mockup-wrap{ height:102%;max-height:none; }
}