/* ============================================ 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
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(42,21,32,.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(42,21,32,.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 (« Parfums ») + 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:#6E4A58; margin-bottom:1.5rem; max-width:42ch; } .gv-rayon-texte .gv-details{ font-size:.95rem; color:#8A6474; margin-bottom:2.1rem; max-width:46ch; } /* Textures — sensation subliminale, jamais un décor chargé */ .gv-tx-poudre::before{ display:none !important; } .gv-tx-poudre-DISABLED::before{ content:'';position:absolute;inset:0;opacity:.5;pointer-events:none; background-image:radial-gradient(circle at 25% 35%, rgba(255,255,255,.35) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.25) 0 1px, transparent 1.5px); background-size:9px 9px, 13px 13px; } .gv-tx-satin::before{ display:none !important; } .gv-tx-metal::before{ display:none !important; } .gv-tx-dentelle::before{ display:none !important; } .gv-tx-laque::before{ display:none !important; } .gv-tx-feutre::before{ display:none !important; } @media(max-width:760px){ .gv-rayon{ grid-template-columns:1fr; min-height:auto; margin:0 4vw 3rem; } /* PAS de zigzag sur mobile : tous les rayons empilent PAREIL (téléphone puis texte) → rythme RÉGULIER téléphone/texte/téléphone/texte, plus jamais deux téléphones collés à une jonction. On écrase la règle nth-of-type du desktop (spécificité montée + !important). */ .gv-rayons section.gv-rayon .gv-rayon-visuel{ order:0 !important;min-height:30vh; } .gv-rayons section.gv-rayon .gv-rayon-texte{ order:1 !important;padding:2.6rem 7vw; } } /* ============================================ TEXTURES RÉELLES — URLs WordPress confirmées Placées selon apparence + dégradé de température ============================================ */ .gv-v-parfums{ background:linear-gradient(150deg, #F9E3E9, #EBB3C3); } .gv-v-bijoux{ background:linear-gradient(150deg, #EBB3C3, #E0A9B8); } .gv-v-massage{ background:linear-gradient(150deg, #E0A9B8, #D97A96); } .gv-v-lingerie{ background:linear-gradient(150deg, #D97A96, #B04A6C); } .gv-v-jeux-feutre{ background:linear-gradient(150deg, #B04A6C, #8F3168); } .gv-v-intime{ background:linear-gradient(150deg, #8F3168, #4A1230); } /* ————— 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{ 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,#181017 0%,#2a1220 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; } .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 :
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(-14px); } /* tic */ 37%{ transform:translateY(0); } 47%{ transform:translateY(-14px); } /* 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){ .gv-mockup-wrap{ height:108%;max-height:none; } }