/* ═══════════════════════════════════════════════════════════ B&F ESSENCE — Design System v1 · Juillet 2026 Prune #6E3D4F · Rose poudré #D9A498 · Ivoire #FAF8F6 Charbon #2E2E2E · Rose voilé #F2E7E2 · Prune profonde #542E3C Cuivre rosé #C08A7C ═══════════════════════════════════════════════════════════ */ :root { --prune: #6E3D4F; --prune-deep: #542E3C; --prune-nuit: #3d212d; --rose: #D9A498; --ivoire: #FAF8F6; --charbon: #2E2E2E; --blanc: #FFFFFF; --rose-voile: #F2E7E2; --cuivre: #C08A7C; --rose-pale: rgba(232, 213, 204, .75); --ease: cubic-bezier(.22, .61, .36, 1); --serif: 'Playfair Display', Georgia, serif; --sans: 'Montserrat', system-ui, sans-serif; --gutter: clamp(20px, 4vw, 48px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Pas d'overflow ici : le « overflow-x: hidden » du doit remonter jusqu'à la fenêtre. Un overflow sur l'en empêche, le devient alors un conteneur de défilement et plus aucun position: sticky ne colle (hero, galerie 3D). */ } body { margin: 0; background: var(--ivoire); color: var(--charbon); font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.is-locked { overflow: hidden; } /* Un élément masqué reste masqué, même si un composant lui donne un display */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; } button { font: inherit; border: 0; background: none; cursor: pointer; } ::selection { background: var(--rose); color: var(--prune-deep); } /* ─────────────────────────────── Préchargeur */ .preloader { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--prune-deep); transition: transform 1s var(--ease) .1s, visibility 0s 1.2s; } .preloader__curtain { position: absolute; inset: auto 0 -12vh 0; height: 12vh; background: var(--prune-deep); border-radius: 0 0 50% 50% / 0 0 100% 100%; } body.is-loaded .preloader { transform: translateY(-112vh); visibility: hidden; } .preloader__mark { text-align: center; color: var(--ivoire); display: flex; flex-direction: column; align-items: center; } .preloader__logo { width: clamp(88px, 13vw, 124px); height: auto; animation: preIn 1s var(--ease) both; } .preloader__word { font: 600 11px var(--sans); letter-spacing: .58em; text-indent: .58em; color: var(--rose-pale); margin-top: 18px; animation: preIn 1s var(--ease) .18s both; } .preloader__line { width: 148px; height: 1px; margin: 22px auto 0; background: rgba(217, 164, 152, .25); overflow: hidden; animation: preIn .8s var(--ease) .3s both; } .preloader__line span { display: block; width: 100%; height: 100%; background: var(--rose); transform-origin: left; animation: preLine 1.1s var(--ease) .35s both; } @keyframes preIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes preLine { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ─────────────────────────────── En-tête */ .header { position: fixed; inset: 0 0 auto 0; z-index: 50; isolation: isolate; display: grid; /* minmax(0, 1fr) et non 1fr : sinon la colonne la plus chargée (droite) s'élargit et pousse le logo hors du centre de la page */ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 24px var(--gutter); color: var(--rose-pale); transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); } /* voile discret : garantit la lisibilité du logo et des liens quand la vidéo du hero est claire derrière eux, avant le fond opaque du scroll */ .header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 190%; background: linear-gradient(180deg, rgba(29, 15, 20, .55) 0%, rgba(29, 15, 20, .22) 55%, transparent 100%); pointer-events: none; transition: opacity .5s var(--ease); z-index: -1; } .header.is-scrolled::before { opacity: 0; } .header.is-scrolled { background: rgba(61, 33, 45, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 14px var(--gutter); box-shadow: 0 10px 40px -18px rgba(36, 19, 24, .6); } .header.is-hidden { transform: translateY(-110%); } .header__nav { display: flex; gap: clamp(14px, 1.5vw, 24px); align-items: center; } .header__nav--right { justify-content: flex-end; } /* Onglets en blanc plein, comme le crédit « Élixir Distingué » du hero ; l'ombre douce les garde lisibles sur les passages clairs de la vidéo. */ .header__link { position: relative; white-space: nowrap; font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF; text-shadow: 0 1px 10px rgba(29, 15, 20, .55); padding: 4px 0; transition: color .3s; } .header__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--rose); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); } .header__link:hover { color: var(--rose); } .header__link:hover::after { transform: scaleX(1); transform-origin: left; } /* Logo centré dans la barre — le lockup complet, en version claire */ .header__brand { display: block; padding: 0 clamp(12px, 3vw, 36px); transition: opacity .3s; } /* Le logo se pose sur une vidéo claire et agitée : le halo sombre le détache sans l'assombrir lui-même. Retiré une fois le fond opaque installé. */ .header__brand img { width: auto; height: clamp(40px, 3.8vw, 54px); filter: drop-shadow(0 1px 3px rgba(29, 15, 20, .85)) drop-shadow(0 4px 16px rgba(29, 15, 20, .6)); transition: height .5s var(--ease), filter .5s var(--ease); } .header.is-scrolled .header__brand img { height: clamp(34px, 3vw, 42px); filter: none; } .header__brand:hover { opacity: .82; } /* Bouton d'action demandé au brief — visible dès le premier écran */ .header__cta { font: 600 10px var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--prune-deep); background: var(--rose); padding: 11px 16px; white-space: nowrap; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .header__cta:hover { background: #FAF8F6; transform: translateY(-1px); } /* Écrans portables : le libellé court garde le logo dégagé au centre */ @media (max-width: 1480px) { .header__cta-long { display: none; } } .header__lang { display: flex; align-items: center; gap: 3px; font: 600 11px var(--sans); color: rgba(255, 255, 255, .72); letter-spacing: .06em; text-shadow: 0 1px 10px rgba(29, 15, 20, .55); } .header__lang .is-active { color: #FFFFFF; } .header__lang button { font: inherit; letter-spacing: inherit; color: inherit; padding: 6px 2px; transition: color .3s; } .header__lang button:hover { color: var(--rose); } /* Panier */ .header__panier { position: relative; display: grid; place-items: center; width: 42px; height: 42px; margin: 0 -6px 0 -4px; border-radius: 50%; color: #FAF8F6; transition: background .3s var(--ease); } .header__panier:hover { background: rgba(250, 248, 246, .1); } .header__panier svg { width: 22px; height: 22px; } .header__panier-nombre { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rose); color: var(--prune-deep); font: 700 10px/18px var(--sans); text-align: center; } .header__panier-nombre.is-pulse { animation: pastille .55s var(--ease); } @keyframes pastille { 40% { transform: scale(1.45); } 100% { transform: none; } } /* Pages intérieures : pas de hero sombre derrière l'en-tête, il est plein d'emblée */ .header--plein { background: rgba(61, 33, 45, .97); padding-top: 14px; padding-bottom: 14px; box-shadow: 0 10px 40px -24px rgba(36, 19, 24, .6); } .header--plein::before { display: none; } .header--plein .header__brand img { height: clamp(34px, 3vw, 42px); filter: none; } .header__burger { display: none; flex-direction: column; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; /* zone tactile d'au moins 44 px */ padding: 8px 9px; margin-left: -9px; /* les traits restent alignés sur la gouttière */ } .header__burger span { display: block; width: 26px; height: 1.5px; background: var(--ivoire); transition: transform .4s var(--ease), opacity .3s; } .header__burger.is-open span:first-child { transform: translateY(3.75px) rotate(45deg); } .header__burger.is-open span:last-child { transform: translateY(-3.75px) rotate(-45deg); } /* ─────────────────────────────── Menu mobile */ .menu { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); background: linear-gradient(165deg, var(--prune-nuit), var(--prune-deep)); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; } .menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; } .menu__nav { display: flex; flex-direction: column; gap: 6px; } .menu__link { display: flex; align-items: baseline; gap: 18px; font: 500 clamp(28px, 7.4vw, 40px) var(--serif); color: var(--ivoire); padding: 5px 0; opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s; } .menu__link em { font: 400 11px ui-monospace, monospace; font-style: normal; color: var(--rose); } .menu__link:hover { color: var(--rose); } .menu.is-open .menu__link { opacity: 1; transform: none; } .menu.is-open .menu__link:nth-child(1) { transition-delay: .1s; } .menu.is-open .menu__link:nth-child(2) { transition-delay: .16s; } .menu.is-open .menu__link:nth-child(3) { transition-delay: .22s; } .menu.is-open .menu__link:nth-child(4) { transition-delay: .28s; } .menu.is-open .menu__link:nth-child(5) { transition-delay: .34s; } .menu.is-open .menu__link:nth-child(6) { transition-delay: .40s; } .menu.is-open .menu__link:nth-child(7) { transition-delay: .46s; } .menu__cta { align-self: flex-start; margin-top: 34px; background: var(--rose); color: var(--prune-deep); font: 600 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 16px 28px; opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease) .52s, transform .6s var(--ease) .52s; } .menu.is-open .menu__cta { opacity: 1; transform: none; } .menu__foot { position: absolute; bottom: 28px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 600 10px var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--cuivre); } /* ─────────────────────────────── Boutons & liens */ .btn { display: inline-block; font: 600 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: 19px 38px; transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); will-change: transform; } .btn--rose { background: var(--rose); color: var(--prune-deep); } .btn--rose:hover { background: #FAF8F6; transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(36, 19, 24, .55); } .btn--prune { background: var(--prune); color: var(--ivoire); } .btn--prune:hover { background: var(--prune-deep); transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(110, 61, 79, .55); } .btn--outline { border: 1px solid var(--prune); color: var(--prune); padding: 14px 26px; font-size: 11.5px; letter-spacing: .16em; } .btn--outline:hover { background: var(--prune); color: var(--ivoire); } .link-underline { display: inline-block; color: var(--prune); font: 600 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid var(--cuivre); padding-bottom: 4px; transition: color .3s; } .link-underline:hover { color: var(--cuivre); } .surtitre { font: 600 11px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--rose); margin: 0 0 14px; } .surtitre--cuivre { color: var(--cuivre); letter-spacing: .34em; margin-bottom: 20px; } .section-title { font: 500 clamp(32px, 3.5vw, 44px) var(--serif); color: var(--charbon); margin: 0; } .section-title em { color: var(--prune); } /* ─────────────────────────────── Hero cinématique La vidéo est la bannière : plein écran, épinglée pendant le défilement. La caméra pousse dans l'image (scale), le titre s'échappe ligne par ligne, un voile assombrit la scène avant la coupe vers le défilé. */ .hero { position: relative; height: 170vh; /* courte piste épinglée : fuite du titre + voile */ background: #1d0f14; color: var(--ivoire); } .hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; /* ambiance chaude assortie au film — sert de fond quand la vidéo d'ambiance floutée n'est pas affichée (mobile, mouvement réduit) */ background: radial-gradient(90% 120% at 76% 45%, rgba(140, 74, 32, .38) 0%, transparent 60%), radial-gradient(70% 90% at 20% 80%, rgba(110, 61, 79, .5) 0%, transparent 65%), linear-gradient(160deg, #241318 0%, #1d0f14 55%, #2a151c 100%); } .hero__media { position: absolute; inset: 0; z-index: 0; opacity: 0; will-change: transform; } body.is-loaded .hero__media { opacity: 1; animation: heroMediaIn 1.9s var(--ease) .15s backwards; } @keyframes heroMediaIn { from { opacity: 0; } to { opacity: 1; } } /* La vidéo source est carrée (1:1) et son action est centrée : au lieu d'un cover qui cloue le flacon au centre sous le texte, on COMPOSE la scène — ambiance floutée du même film sur toute la largeur, film net entier ancré à droite, bords fondus dans l'ambiance (aucun cadre). */ .hero__ambience { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: blur(44px) brightness(.5) saturate(1.15); transform: scale(1.12); } .hero__film { position: absolute; top: 0; bottom: 0; left: 66%; transform: translateX(-50%); height: 100%; aspect-ratio: 1 / 1; /* les bords se dissolvent dans l'ambiance — le film flotte, sans cadre */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 86%, transparent 100%); } .hero__video { width: 100%; height: 100%; object-fit: cover; /* respiration lente façon Ken Burns — la bannière est vivante */ animation: kenBurns 26s ease-in-out infinite alternate; will-change: transform; } @keyframes kenBurns { from { transform: scale(1.03); } to { transform: scale(1.12) translate3d(1.2%, -1.2%, 0); } } .hero__tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(29, 15, 20, .92) 0%, rgba(45, 24, 33, .6) 30%, rgba(45, 24, 33, .18) 52%, transparent 68%, rgba(29, 15, 20, .18) 100%), linear-gradient(180deg, rgba(29, 15, 20, .5) 0%, transparent 24%, transparent 60%, rgba(29, 15, 20, .74) 100%); } .hero__veil { position: absolute; inset: 0; z-index: 2; background: #1d0f14; opacity: 0; pointer-events: none; } .hero__grain { position: absolute; inset: -50%; z-index: 3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); opacity: .05; pointer-events: none; animation: grainShift 9s steps(8) infinite; } @keyframes grainShift { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2%, 3%); } 50% { transform: translate(3%, -2%); } 75% { transform: translate(-3%, -3%); } } .hero__inner { position: relative; z-index: 4; flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 1440px; margin: 0 auto; padding: clamp(96px, 14vh, 150px) var(--gutter) 64px; } .hero__content { max-width: 820px; will-change: transform, opacity; } /* Sur écran large, le texte reste dans la moitié gauche — jamais sur le cœur net du film (dont le bord gauche fondu commence vers 66% - 50vh) */ @media (min-width: 1061px) { .hero__content { max-width: min(720px, 46vw); } .hero__title { font-size: clamp(52px, 6.8vw, 104px); } } .hero__surtitre { font: 600 11px var(--sans); letter-spacing: .4em; text-transform: uppercase; color: var(--rose); margin: 0 0 clamp(16px, 2.6vh, 26px); } .hero__title { margin: 0 0 clamp(26px, 4.5vh, 44px); font: 500 clamp(52px, 7.6vw, 108px)/1.04 var(--serif); color: #FAF8F6; } .hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; } .hero__title .line__inner { display: inline-block; transform: translateY(112%); transition: transform 1.1s var(--ease); } .line__inner--accent { font-style: italic; font-weight: 600; font-size: 1.08em; color: var(--rose); } body.is-loaded .hero__title .line:nth-child(1) .line__inner { transform: none; transition-delay: .55s; } body.is-loaded .hero__title .line:nth-child(2) .line__inner { transform: none; transition-delay: .68s; } body.is-loaded .hero__title .line:nth-child(3) .line__inner { transform: none; transition-delay: .81s; } .anim-fade { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); } body.is-loaded .anim-fade { opacity: 1; transform: none; } body.is-loaded .hero__surtitre.anim-fade { transition-delay: .45s; } body.is-loaded .hero__actions.anim-fade { transition-delay: 1.05s; } /* Crédit & repère : entrée en animation one-shot (pas de transition persistante — leur opacité est ensuite pilotée par le défilement) */ .hero__credit, .hero__cue { opacity: 0; } body.is-loaded .hero__credit { opacity: 1; animation: fadeUp 1s var(--ease) 1.35s backwards; } body.is-loaded .hero__cue { opacity: 1; animation: fadeUp 1s var(--ease) 1.6s backwards; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .hero__actions { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 28px); flex-wrap: wrap; } .hero__tagline { font: 400 13px/1.6 var(--sans); color: var(--rose-pale); max-width: 280px; margin: 0; } /* — Générique de film : crédit produit + repère de défilement — */ .hero__credit { position: absolute; right: var(--gutter); bottom: 20px; display: flex; flex-direction: column; gap: 3px; text-align: right; } a.hero__credit { transition: opacity .3s; } a.hero__credit:hover .hero__credit-name { color: var(--rose); } .hero__credit-name { font: 600 17px var(--serif); font-style: italic; color: #FAF8F6; letter-spacing: .04em; } .hero__credit-sub { font: 500 9.5px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--rose); } .hero__credit-notes { font: 500 9.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(232, 213, 204, .5); margin-top: 4px; } .hero__cue { position: absolute; left: var(--gutter); bottom: 26px; display: flex; align-items: center; gap: 12px; font: 600 10px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(232, 213, 204, .6); } .hero__cue span { position: relative; display: block; width: 44px; height: 1px; background: rgba(217, 164, 152, .25); overflow: hidden; } .hero__cue span::after { content: ""; position: absolute; inset: 0; background: var(--rose); transform: translateX(-101%); animation: cueSweep 2.6s var(--ease) infinite; } @keyframes cueSweep { 45% { transform: translateX(0); } 100% { transform: translateX(102%); } } /* — Marquee — */ .marquee { position: relative; z-index: 5; border-top: 1px solid rgba(217, 164, 152, .3); overflow: hidden; padding: 18px 0; } .marquee__track { display: flex; width: max-content; animation: marqueeSlide 26s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__group { display: flex; align-items: baseline; gap: 56px; padding-right: 56px; font: 500 13px var(--serif); font-style: italic; color: rgba(232, 213, 204, .65); white-space: nowrap; } .marquee__group i { color: var(--rose); font-style: normal; } @keyframes marqueeSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─────────────────────────────── Décor parallaxe Images détourées (générées) qui dérivent au défilement, chacune à sa vitesse (data-drift) avec une légère rotation (data-rot). L'image intérieure flotte en continu — le conteneur reçoit la parallaxe. */ .decor { position: absolute; z-index: 3; pointer-events: none; user-select: none; will-change: transform; } .decor img { width: 100%; height: auto; filter: drop-shadow(0 26px 44px rgba(84, 46, 60, .28)); animation: decorFloat 8s ease-in-out infinite; } @keyframes decorFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(2deg); } } .decor--slice { width: clamp(110px, 13vw, 190px); top: -26px; right: 4%; } /* la gousse flotte dans le blanc entre le titre et le chapeau de section */ .decor--vanille { width: clamp(120px, 14vw, 200px); top: -46px; left: 43%; } .decor--vanille img { animation-delay: -3s; animation-duration: 9s; } .decor--fleur { width: clamp(85px, 9vw, 140px); top: 34px; left: 7%; } .decor--fleur img { animation-delay: -1.5s; } .decor--orange { width: clamp(130px, 15vw, 220px); right: 4%; bottom: 24px; } .decor--orange img { animation-delay: -5s; animation-duration: 10s; } @media (max-width: 900px) { .decor--vanille { left: auto; right: -3%; top: -40px; } .decor--orange { display: none; } } @media (max-width: 560px) { .decor--slice { right: -4%; top: -20px; } .decor--fleur { left: 3%; top: 16px; } } /* ─────────────────────────────── Révélation au défilement */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); } [data-reveal].is-in { opacity: 1; transform: none; } /* ─────────────────────────────── Sections produits (parfums · soins) */ .section { position: relative; background: var(--ivoire); padding: clamp(72px, 10vh, 110px) 0 clamp(60px, 8vh, 90px); overflow: hidden; } .section--soins { background: var(--blanc); } .section__head { display: grid; grid-template-columns: 1fr minmax(0, 42ch); align-items: end; gap: clamp(20px, 5vw, 64px); padding: 0 var(--gutter); margin-bottom: clamp(32px, 5vh, 52px); } .section__intro { font: 400 15px/1.75 var(--sans); color: #6b6b6b; margin: 0; } .section__pied { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; padding: clamp(30px, 4.5vh, 46px) var(--gutter) 0; } .section__note { font: 400 13px/1.7 var(--sans); color: #8d8d8d; margin: 0; max-width: 62ch; } .defile__track { display: flex; gap: 28px; padding: 0 var(--gutter) 24px; overflow-x: auto; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; } .defile__track::-webkit-scrollbar { display: none; } /* Au doigt, chaque glissement s'arrête net sur une carte */ @media (hover: none) { .defile__track { scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); } .defile__track > * { scroll-snap-align: start; } } /* Flèches et points sous une rangée qui déborde (créés par js/main.js) */ .defile__nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px var(--gutter) 0; } .defile__nav[hidden] { display: none; } .defile__fleche { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(110, 61, 79, .3); border-radius: 50%; background: transparent; color: var(--prune); transition: background .3s, color .3s, border-color .3s, opacity .3s; } .defile__fleche svg { width: 18px; height: 18px; } .defile__fleche:not(:disabled):hover { background: var(--prune); border-color: var(--prune); color: var(--ivoire); } .defile__fleche:disabled { opacity: .3; cursor: default; } .defile__points { display: flex; } .defile__point { display: grid; place-items: center; width: 24px; height: 44px; padding: 0; background: none; } .defile__point::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: rgba(110, 61, 79, .28); transition: width .35s var(--ease), background .35s; } .defile__point[aria-current="true"]::before { width: 20px; background: var(--prune); } /* Coffret : 5e carte du défilé sur cellulaire seulement (voir bloc_parfums_accueil) */ .parfum--mobile { display: none; } .defile__track.is-dragging { cursor: grabbing; scroll-behavior: auto; } .defile__track.is-dragging * { pointer-events: none; } /* ─────────────────────────────── Cartes olfactives (parfums) Même construction que les soins (décision du 28 sept. 2026) : la photo en haut, puis un bloc de couleur qui porte l'écriture. Chaque famille olfactive a son dégradé ; sans photo, l'emblème tient la place. */ .parfum { position: relative; flex: none; width: clamp(252px, 25vw, 316px); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } /* Décalage en W : une carte sur deux descend, parfums comme soins. Les 4 cartes se partagent la largeur (3 espaces de 28 px) : elles tiennent pile sur un écran d'ordinateur, défilent au doigt en dessous de 252 px. */ .defile__track > :nth-child(even) { margin-top: 46px; } .defile__track > .parfum, .defile__track > .soin { flex: none; width: clamp(252px, calc((100% - 84px) / 4), 340px); } /* Sur très grand écran, la rangée plafonnée se centre ; « safe » la remet à gauche dès qu'elle déborde, pour que le défilement parte du début. */ .defile__track { justify-content: safe center; } .parfum:hover { transform: translateY(-10px); box-shadow: 0 30px 60px -30px rgba(84, 46, 60, .55); } .parfum__inner { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; color: var(--ivoire); isolation: isolate; } /* Le dégradé habille le bloc texte (parfums, coffret) ; la même variable sert aux soins plus bas, pour que les deux rangées se répondent. */ .parfum__corps { flex: 1; display: flex; flex-direction: column; padding: 26px 26px 22px; background: var(--degrade); } .parfum--sensuelle { --degrade: linear-gradient(158deg, #E8A98F 0%, #C9736A 52%, #7E3B44 100%); } .parfum--lueur { --degrade: linear-gradient(158deg, #E0B387 0%, #B5705C 48%, #5E2F3B 100%); } .parfum--seductrice { --degrade: linear-gradient(158deg, #D99A9F 0%, #A85566 50%, #4E2233 100%); } .parfum--distingue { --degrade: linear-gradient(158deg, #D98A5F 0%, #8E3B32 48%, #3A1820 100%); } .parfum--coffret { --degrade: linear-gradient(150deg, #E8A98F 0%, #D08A7A 22%, #A85566 50%, #6E2F3D 76%, #3A1820 100%); } .parfum__produit { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--rose-voile); } .parfum__produit > img:not(.parfum__embleme) { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .parfum:hover .parfum__produit > img:not(.parfum__embleme) { transform: scale(1.05); } .parfum__produit--vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg, rgba(29, 15, 20, .06), rgba(29, 15, 20, .34)), var(--degrade); } .parfum__produit--vide::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(250, 248, 246, .2); pointer-events: none; } .parfum__produit .parfum__embleme { width: 26%; height: auto; object-fit: contain; opacity: .85; } .parfum__bientot { font: 600 9px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(250, 248, 246, .7); } .parfum__badge { position: absolute; top: 14px; left: 14px; background: var(--prune); color: var(--ivoire); font: 600 9.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 6px 11px; } .parfum__famille { font: 600 9.5px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(250, 248, 246, .8); } .parfum__nom { font: 500 clamp(26px, 2.6vw, 32px)/1.15 var(--serif); font-style: italic; margin: 10px 0 14px; } .parfum__desc { font: 400 13px/1.7 var(--sans); color: rgba(250, 248, 246, .88); margin: 0 0 18px; } .parfum__notes { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; margin: 0 0 auto; padding: 0; } .parfum__notes li, .soin__actifs li { font: 500 9.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(250, 248, 246, .84); border: 1px solid rgba(250, 248, 246, .3); padding: 5px 9px; } .parfum__pied { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 42px; margin-top: 20px; padding: 14px 54px 0 0; border-top: 1px solid rgba(250, 248, 246, .22); } .parfum__prix b { font: 600 17px var(--sans); } .parfum__prix s { font: 400 12px var(--sans); color: rgba(250, 248, 246, .5); margin-left: 7px; } .parfum__format { font: 500 10px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(250, 248, 246, .6); } /* Coffret découverte : à l'horizontale sous les quatre parfums, sur la largeur exacte de la rangée (4 cartes de 340 px au plus + 3 espaces de 28 px). */ .coffret-rang { padding: clamp(28px, 4vh, 40px) var(--gutter) 0; } .rayon .coffret-rang { padding: clamp(26px, 2.8vw, 40px) 0 0; } .coffret-carte { display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; max-width: calc(4 * 340px + 84px); margin: 0 auto; overflow: hidden; color: var(--ivoire); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .coffret-carte:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(84, 46, 60, .55); } .coffret-carte__media { position: relative; display: block; min-height: 260px; overflow: hidden; background: var(--rose-voile); } .coffret-carte__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transition: transform .9s var(--ease); } .coffret-carte:hover .coffret-carte__media img { transform: scale(1.05); } .coffret-carte__corps { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px clamp(28px, 4vw, 56px); align-items: center; padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px); background: var(--degrade); } .coffret-carte__nom { font: italic 500 clamp(28px, 2.8vw, 36px)/1.15 var(--serif); color: #FAF8F6; margin: 10px 0 12px; } .coffret-carte__desc { font: 400 13.5px/1.75 var(--sans); color: rgba(250, 248, 246, .88); margin: 0; max-width: 46ch; } .coffret-carte .parfum__notes { margin: 0 0 18px; } .coffret-carte__pied { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding-top: 16px; border-top: 1px solid rgba(250, 248, 246, .22); } .coffret-carte__pied > [data-prix] { margin-right: auto; } @media (max-width: 900px) { .coffret-carte__corps { grid-template-columns: 1fr; } } @media (max-width: 640px) { .defile__track > .parfum--mobile { display: block; } .section--parfums .coffret-rang { display: none; } .coffret-carte { grid-template-columns: 1fr; } .coffret-carte__media { min-height: 0; aspect-ratio: 4 / 3; } } /* ─────────────────────────────── Cartes soins (grille) */ .grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); padding: 0 var(--gutter); } .soin { display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .soin:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(84, 46, 60, .55); } /* Un dégradé par soin, tiré de la couleur de sa texture (guide des clientes du 28 sept.) et ramené dans la palette de la marque : même lumière que les dégradés des parfums, pour que les deux rangées se répondent. */ .soin { --degrade: linear-gradient(158deg, #C99AA0 0%, #8E5467 50%, #3F1F2C 100%); } .soin--nacre { --degrade: linear-gradient(158deg, #DCBDA8 0%, #AE887C 50%, #5B3D46 100%); } .soin--solaire { --degrade: linear-gradient(158deg, #E6B07C 0%, #C57A55 50%, #6E3534 100%); } .soin--brume { --degrade: linear-gradient(158deg, #B7A6BD 0%, #85708F 50%, #3F2B45 100%); } .soin--perle { --degrade: linear-gradient(158deg, #E3A39C 0%, #B85C62 50%, #5C2331 100%); } .soin--nuage { --degrade: linear-gradient(158deg, #E5B8B0 0%, #BF8288 50%, #6B3B4E 100%); } .soin--nocturne { --degrade: linear-gradient(158deg, #B98DB0 0%, #80517A 50%, #3A1C33 100%); } .soin--minuit { --degrade: linear-gradient(158deg, #E09AAE 0%, #A9506F 50%, #4A1F38 100%); } .soin--ambre { --degrade: linear-gradient(158deg, #E2B676 0%, #AE7440 50%, #4F2B22 100%); } .soin__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--rose-voile); } .soin__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .soin:hover .soin__media > img { transform: scale(1.05); } .soin__badge { position: absolute; top: 14px; left: 14px; background: var(--prune); color: var(--ivoire); font: 600 9.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 6px 11px; } .soin__info { flex: 1; display: flex; flex-direction: column; padding: 24px 24px 20px; background: var(--degrade); color: var(--ivoire); } .soin__type { font: 600 9.5px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(250, 248, 246, .8); margin: 0 0 8px; } .soin__nom { font: 500 clamp(22px, 2vw, 26px)/1.2 var(--serif); color: #FAF8F6; margin: 0 0 12px; } .soin__desc { font: 400 13.5px/1.7 var(--sans); color: rgba(250, 248, 246, .88); margin: 0 0 16px; } .soin__actifs { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; margin: 0 0 14px; padding: 0; } .soin__prix { font: 500 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #a79b97; margin: 0; } /* ─────────────────────────────── Bande vidéo parallaxe */ .band { position: relative; height: clamp(380px, 64vh, 560px); overflow: hidden; } .band__clip { position: absolute; inset: 0; overflow: hidden; } .band__media { position: absolute; left: 0; top: 50%; width: 100%; height: 150%; object-fit: cover; transform: translateY(-50%); will-change: transform; } .band__overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 32px var(--gutter); background: linear-gradient(180deg, rgba(46, 19, 26, .12) 0%, transparent 30%, transparent 55%, rgba(46, 19, 26, .58) 100%); pointer-events: none; } .band__caption { font: 500 clamp(18px, 2vw, 24px) var(--serif); font-style: italic; color: #FAF8F6; } .band__note { font: 400 10.5px ui-monospace, monospace; color: rgba(250, 248, 246, .8); } /* ─────────────────────────────── Notre histoire */ .histoire { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--blanc); } .histoire__media { position: relative; min-height: clamp(340px, 46vw, 560px); overflow: hidden; background: var(--rose-voile); } .histoire__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; } .histoire__content { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 72px); } .histoire__title { font: 500 clamp(26px, 2.7vw, 34px)/1.25 var(--serif); color: var(--charbon); margin: 0 0 18px; } .histoire__title em { color: var(--prune); } .histoire__text { font: 400 15px/1.8 var(--sans); color: #5a5a5a; margin: 0 0 16px; max-width: 50ch; } .histoire__signature { font: italic 500 20px var(--serif); color: var(--prune); margin: 14px 0 0; } /* ─────────────────────────────── Citation */ .citation { position: relative; overflow: hidden; background: var(--rose-voile); padding: clamp(64px, 10vh, 88px) var(--gutter); text-align: center; } .citation__embleme { width: clamp(58px, 6vw, 78px); height: auto; margin: 0 auto 26px; opacity: .9; } .citation__quote { font: 500 clamp(24px, 2.8vw, 34px)/1.5 var(--serif); color: var(--prune); max-width: 820px; margin: 0 auto 22px; } .citation__quote em { color: var(--cuivre); } .citation__source { font: 400 13.5px/1.8 var(--sans); color: #7c6a6d; max-width: 56ch; margin: 0 auto; } /* ─────────────────────────────── Infolettre */ .infolettre { background: var(--ivoire); border-top: 1px solid #EDE3DE; padding: clamp(56px, 8vh, 80px) var(--gutter); } .infolettre__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1180px; margin: 0 auto; } .infolettre__title { font: 500 clamp(26px, 2.7vw, 34px) var(--serif); color: var(--charbon); margin: 0 0 12px; } .infolettre__title em { color: var(--prune); } .infolettre__text { font: 400 14px/1.7 var(--sans); color: #8a8a8a; margin: 0; max-width: 46ch; } .infolettre__label { display: block; font: 600 10.5px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--prune); margin-bottom: 8px; } .infolettre__row { display: flex; gap: 12px; flex-wrap: wrap; } .infolettre__input { flex: 1; min-width: 200px; background: var(--blanc); border: 1px solid #E2D3CC; padding: 15px 16px; font: 400 14px var(--sans); color: var(--charbon); outline: none; transition: border-color .3s, background .3s; } .infolettre__input:focus { border-color: var(--rose); background: #fff; } .infolettre__ok { font: 400 13px var(--sans); color: var(--cuivre); margin: 12px 0 0; } /* ─────────────────────────────── Le rituel (matin / soir) */ .rituel { background: linear-gradient(180deg, #1c0e14 0%, var(--prune-deep) 34%); color: var(--ivoire); padding: clamp(64px, 9vh, 100px) var(--gutter); } /* Décors latéraux : images générées sur fond noir, fusionnées au mauve par « screen » (le noir disparaît, seule la lumière reste) et fondues vers le centre et vers le haut et le bas de la section. */ .rituel { position: relative; overflow: hidden; isolation: isolate; } .rituel__head, .rituel__grid { position: relative; z-index: 1; } .rituel__decor { position: absolute; top: 0; bottom: 0; z-index: 0; width: min(36vw, 560px); mix-blend-mode: screen; opacity: .92; pointer-events: none; -webkit-mask-composite: source-in; mask-composite: intersect; } .rituel__decor img { width: 100%; height: 100%; object-fit: cover; } .rituel__decor--gauche { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent 96%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, #000 25%, transparent 96%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); } .rituel__decor--gauche img { object-position: 20% 60%; } .rituel__decor--droite { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 25%, transparent 96%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(270deg, #000 25%, transparent 96%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); } .rituel__decor--droite img { object-position: 30% 40%; } /* écrans moyens : les colonnes occupent presque toute la largeur, le décor s'efface */ @media (max-width: 1100px) { .rituel__decor { width: 26vw; opacity: .42; } } @media (max-width: 760px) { .rituel__decor { display: none; } } .rituel__head { text-align: center; max-width: 700px; margin: 0 auto clamp(38px, 5vh, 58px); } .rituel__title { font: 500 clamp(27px, 3.2vw, 40px)/1.25 var(--serif); color: #FAF8F6; margin: 0 0 16px; } .rituel__title em { font-style: italic; color: var(--rose); } .rituel__intro { font: 400 14.5px/1.75 var(--sans); color: rgba(232, 213, 204, .72); margin: 0; } .rituel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); max-width: 980px; margin: 0 auto; } .rituel__col { border-top: 1px solid rgba(217, 164, 152, .3); padding-top: 26px; } .rituel__moment { display: flex; align-items: center; gap: 12px; font: italic 500 24px var(--serif); color: var(--rose); margin: 0 0 22px; } .rituel__moment svg { width: 26px; height: 26px; } /* Rail vertical qui relie les étapes ; il se remplit au défilement (--avance, 0 → 1, posé par js/main.js) et chaque étape atteinte s'allume. --noeud : diamètre des pastilles produit ; le rail part du centre de la première et s'arrête au centre de la dernière (15px = padding vertical d'une étape). */ .rituel__ligne { position: relative; list-style: none; margin: 0; padding: 0; --avance: 0; --noeud: 68px; } .rituel__ligne::before, .rituel__ligne::after { content: ""; position: absolute; left: calc(var(--noeud) / 2); top: calc(15px + var(--noeud) / 2); width: 1px; pointer-events: none; } .rituel__ligne::before { bottom: calc(15px + var(--noeud) / 2); background: rgba(217, 164, 152, .22); } .rituel__ligne::after { height: calc((100% - 30px - var(--noeud)) * var(--avance)); background: linear-gradient(180deg, var(--rose), var(--cuivre)); box-shadow: 0 0 12px rgba(217, 164, 152, .7); transition: height 1s var(--ease); } .rituel__etape { position: relative; display: grid; grid-template-columns: var(--noeud) 1fr; gap: 22px; align-items: center; padding: 15px 0; } .rituel__noeud { position: relative; z-index: 1; display: block; width: var(--noeud); height: var(--noeud); border-radius: 50%; overflow: hidden; background: var(--rose-voile); box-shadow: 0 0 0 1px rgba(217, 164, 152, .35), 0 0 0 6px var(--prune-deep); transition: box-shadow .8s var(--ease), transform .6s var(--ease); } .rituel__noeud img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.7) brightness(.72); transition: filter 1s var(--ease); } .rituel__noeud .rituel__embleme { object-fit: contain; padding: 12px; background: radial-gradient(circle, #FFFFFF 0%, var(--rose-voile) 80%); } .rituel__etape.is-atteint .rituel__noeud { box-shadow: 0 0 0 1.5px var(--rose), 0 0 0 6px var(--prune-deep), 0 0 28px 6px rgba(217, 164, 152, .35); } .rituel__etape.is-atteint .rituel__noeud img { filter: none; } .rituel__etape:hover .rituel__noeud { transform: scale(1.08); } .rituel__texte { display: grid; grid-template-columns: 30px 1fr; row-gap: 3px; align-items: baseline; } .rituel__num { grid-row: span 2; font: 400 11px ui-monospace, Consolas, monospace; color: rgba(217, 164, 152, .6); transition: color .8s; } .rituel__etape.is-atteint .rituel__num { color: var(--rose); } .rituel__texte b { font: 600 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #FAF8F6; } .rituel__texte > span:last-child { font: 400 14px/1.6 var(--sans); color: rgba(232, 213, 204, .74); } .rituel__texte a { color: rgba(250, 248, 246, .92); border-bottom: 1px solid rgba(217, 164, 152, .35); transition: color .3s, border-color .3s; } .rituel__texte a:hover { color: var(--rose); border-color: var(--rose); } /* ─────────────────────────────── Conseils beauté */ .conseils { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--ivoire) 0%, #F5ECE8 100%); padding: clamp(72px, 10vh, 112px) var(--gutter); } /* Trois lueurs floues qui dérivent lentement : c'est elles que le verre dépoli des cartes laisse deviner. Sans elles, l'effet « glass » serait invisible sur un fond uni. */ .conseils__aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .conseils__aura i { position: absolute; border-radius: 50%; filter: blur(60px); animation: aura 26s ease-in-out infinite alternate; } .conseils__aura i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: 6%; background: radial-gradient(circle, rgba(217, 164, 152, .85) 0%, rgba(217, 164, 152, 0) 68%); } .conseils__aura i:nth-child(2) { width: 40vw; height: 40vw; right: -10vw; top: -10%; background: radial-gradient(circle, rgba(110, 61, 79, .42) 0%, rgba(110, 61, 79, 0) 68%); animation-duration: 32s; animation-delay: -9s; } .conseils__aura i:nth-child(3) { width: 38vw; height: 38vw; left: 36%; bottom: -20%; background: radial-gradient(circle, rgba(192, 138, 124, .6) 0%, rgba(192, 138, 124, 0) 68%); animation-duration: 28s; animation-delay: -15s; } @keyframes aura { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vw, -3vw) scale(1.08); } 100% { transform: translate(-3vw, 3vw) scale(.94); } } .conseils__head { margin-bottom: clamp(34px, 5vh, 54px); } .conseils .section-title, .faq .section-title { color: var(--prune-deep); } .conseils__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 34px); } .conseil { position: relative; overflow: hidden; padding: 34px 30px 36px; border-radius: 22px; background: rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255, 255, 255, .78); box-shadow: 0 26px 60px -38px rgba(84, 46, 60, .5), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(217, 164, 152, .25); transition: opacity .9s var(--ease) var(--d, 0s), transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); } /* reflet fixe en diagonale, comme sur une plaque de verre */ .conseil::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 40%); pointer-events: none; } /* reflet qui suit la souris (--mx / --my posés par js/main.js) */ .conseil::after { content: ""; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .6), transparent 62%); opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; } .conseil:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .52); box-shadow: 0 36px 70px -36px rgba(84, 46, 60, .55), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(217, 164, 152, .35); } .conseil:hover::after { opacity: 1; } .conseil > :not(.conseil__num) { position: relative; z-index: 1; } /* grand chiffre en filigrane, en haut à droite */ .conseil__num { position: absolute; top: 14px; right: 22px; font: italic 500 56px/1 var(--serif); color: rgba(192, 138, 124, .3); pointer-events: none; } .conseil h3 { font: 500 21px/1.35 var(--serif); color: var(--prune-deep); margin: 0 0 14px; padding-right: 66px; /* le titre ne passe jamais sous le grand chiffre */ } .conseil h3::after { content: ""; display: block; width: 30px; height: 1px; margin-top: 14px; background: linear-gradient(90deg, var(--cuivre), transparent); } .conseil h3 em { font-style: italic; color: var(--prune); } .conseil p { font: 400 14px/1.75 var(--sans); color: rgba(84, 46, 60, .8); margin: 0; } /* ─────────────────────────────── FAQ */ .faq { background: var(--rose-voile); padding: clamp(64px, 9vh, 100px) var(--gutter); display: grid; grid-template-columns: minmax(0, 34ch) 1fr; gap: clamp(30px, 5vw, 80px); align-items: start; } .faq__intro { position: sticky; top: 120px; } .faq__aide { font: 400 14px/1.7 var(--sans); color: rgba(84, 46, 60, .8); margin: 18px 0 0; } .faq__aide a { color: var(--prune); border-bottom: 1px solid var(--cuivre); } .faq__aide a:hover { color: var(--cuivre); } .qr { border-bottom: 1px solid rgba(110, 61, 79, .16); } .qr summary { position: relative; list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font: 500 clamp(16px, 1.5vw, 19px)/1.45 var(--serif); color: var(--prune-deep); transition: color .3s; } .qr summary::-webkit-details-marker { display: none; } .qr summary:hover { color: var(--cuivre); } .qr summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border-right: 1.5px solid var(--cuivre); border-bottom: 1.5px solid var(--cuivre); transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--ease); } .qr[open] summary { color: var(--prune-deep); } .qr[open] summary::after { transform: translateY(-25%) rotate(225deg); } .qr p { font: 400 14.5px/1.8 var(--sans); color: rgba(84, 46, 60, .82); margin: 0 0 24px; max-width: 70ch; animation: qrIn .45s var(--ease); } .qr p em { font-style: italic; color: var(--prune); } @keyframes qrIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ─────────────────────────────── Pied de page */ .footer { background: var(--prune-deep); color: rgba(232, 213, 204, .62); font: 400 13px/1.9 var(--sans); } .footer__top { display: grid; /* Quatre blocs à leur largeur naturelle, répartis à intervalles égaux sur toute la largeur : la dernière colonne s'aligne sur le bord droit (comme les liens légaux en dessous) et il ne reste plus de vide à droite. */ grid-template-columns: repeat(4, auto); justify-content: space-between; gap: clamp(28px, 4vw, 64px); padding: clamp(56px, 8vh, 84px) var(--gutter) clamp(40px, 5.5vh, 60px); } /* Colonne de marque plus compacte (logo réduit, texte sur 2-3 lignes) et liens plus aérés : les quatre colonnes finissent à peu près à la même hauteur, sans grand vide sous les liens (demande du 29 sept.). */ .footer__logo { width: clamp(150px, 11vw, 176px); height: auto; } .footer__marque { min-width: 250px; } .footer__col a { white-space: nowrap; } .footer__baseline { font: italic 400 16px var(--serif); color: var(--rose); margin: 14px 0 0; } .footer__col h2 { font: 600 12px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #FAF8F6; margin: 0 0 22px; } .footer__col a, .footer__col span { display: block; font-size: 16px; line-height: 2.45; color: rgba(232, 213, 204, .78); transition: color .3s; } .footer__adresse { font: 400 14px/1.7 var(--sans); color: rgba(232, 213, 204, .6); max-width: 44ch; margin: 10px 0 0; } .footer__reseaux, .menu__reseaux { display: flex; gap: 12px; margin-top: 18px; } .menu__reseaux { margin-top: 0; } .footer .footer__reseaux__lien, .menu .menu__reseaux__lien { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(250, 248, 246, .28); border-radius: 50%; color: #FFFFFF; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s, transform .3s var(--ease); } .footer .footer__reseaux__lien:hover, .menu .menu__reseaux__lien:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--prune-deep); transform: translateY(-2px); } .footer__reseaux__lien svg, .menu__reseaux__lien svg { width: 20px; height: 20px; } .footer__col a:hover { color: var(--rose); } .footer__social { display: flex; gap: 16px; margin-top: 14px; } .footer__social a { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; } .footer__bas { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding: 24px var(--gutter); border-top: 1px solid rgba(217, 164, 152, .18); font-size: 12.5px; } .footer__bas nav { display: flex; gap: 22px; flex-wrap: wrap; } .footer__bas a { color: rgba(232, 213, 204, .72); transition: color .3s; } .footer__bas a:hover { color: var(--rose); } /* ═══════════════════════════════════════════════════════════ BOUTIQUE, PAGES INTÉRIEURES, GALERIE ═══════════════════════════════════════════════════════════ */ /* ─────────────────────────────── Accessibilité & finitions */ .evitement { position: fixed; left: 16px; top: -64px; z-index: 200; background: var(--prune); color: var(--ivoire); font: 600 12px var(--sans); letter-spacing: .08em; padding: 12px 18px; transition: top .3s var(--ease); } .evitement:focus { top: 16px; } :focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; } button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; } .progression { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 2px; background: linear-gradient(90deg, var(--cuivre), var(--rose)); transform: scaleX(0); transform-origin: left; pointer-events: none; } /* Reflet qui balaie le bouton principal du hero, de temps en temps */ .btn { position: relative; overflow: hidden; } .btn--eclat::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: eclat 6s var(--ease) 3s infinite; pointer-events: none; } @keyframes eclat { 0% { left: -60%; } 26%, 100% { left: 130%; } } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } /* Titres : chaque mot monte de derrière un masque */ .mot { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .07em .1em 0; margin: 0 -.07em -.1em 0; } .mot > span { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease) calc(var(--d, 0s) + var(--m, 0) * 65ms); } [data-mots][data-reveal] { opacity: 1; transform: none; } [data-mots].is-in .mot > span { transform: none; } /* Photos : rideau qui se lève à l'entrée */ .soin[data-reveal] .soin__media > img, .soin[data-reveal] .soin__media > .visuel, .parfum[data-reveal] .parfum__produit > img:not(.parfum__embleme), .coffret-carte[data-reveal] .coffret-carte__media > img { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease) calc(var(--d, 0s) + .08s), transform .9s var(--ease); } .soin.is-in .soin__media > img, .soin.is-in .soin__media > .visuel, .parfum.is-in .parfum__produit > img:not(.parfum__embleme), .coffret-carte.is-in .coffret-carte__media > img { clip-path: inset(0); } .histoire__media[data-reveal] { opacity: 1; transform: none; } .histoire__media[data-reveal] img { clip-path: inset(0 100% 0 0); transform: scale(1.12); transition: clip-path 1.6s var(--ease), transform 2.4s var(--ease); } .histoire__media.is-in img { clip-path: inset(0); transform: none; } /* ─────────────────────────────── Prix */ .prix { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .prix b { font: 600 16px var(--sans); color: var(--charbon); } .prix s { font: 400 12px var(--sans); color: #a79b97; } .prix__note { font: 600 9.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cuivre); } .prix--attente { font: 500 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #a1938e; } .parfum .prix b, .soin .prix b, .coffret-carte .prix b { color: #FAF8F6; font-size: 17px; } .parfum .prix s, .soin .prix s, .coffret-carte .prix s { color: rgba(250, 248, 246, .6); } .soin .prix--attente, .coffret-carte .prix__note { color: rgba(250, 248, 246, .8); } /* ─────────────────────────────── Cartes : actions */ .parfum__ajout { position: absolute; right: 18px; bottom: 16px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #FAF8F6; color: var(--prune-deep); box-shadow: 0 10px 24px -10px rgba(29, 15, 20, .6); opacity: 0; transform: scale(.8); transition: opacity .35s var(--ease), transform .35s var(--ease), background .3s; } .parfum__ajout svg { width: 18px; height: 18px; transition: transform .35s var(--ease); } .parfum:hover .parfum__ajout, .parfum__ajout:focus-visible { opacity: 1; transform: none; } .parfum__ajout:hover { background: var(--rose); } .parfum__ajout:hover svg { transform: rotate(90deg); } .parfum__ajout.is-ajoute { background: var(--rose); opacity: 1; transform: none; } @media (hover: none) { .parfum__ajout { opacity: 1; transform: none; } } .soin__nom a, .coffret-carte__nom a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); } .soin__nom a:hover, .coffret-carte__nom a:hover { background-size: 100% 1px; } .soin__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(250, 248, 246, .22); } .soin__actifs { margin-bottom: 18px; } .soin .lien-fleche, .coffret-carte .lien-fleche { color: #FAF8F6; } .soin .lien-fleche:hover, .coffret-carte .lien-fleche:hover { color: var(--rose-voile); } .soin__actions > [data-prix] { margin-right: auto; } .soin__ajout { font: 600 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; background: #FAF8F6; color: var(--prune-deep); min-height: 40px; padding: 10px 14px; transition: background .3s, color .3s; } .soin__ajout:hover, .soin__ajout.is-ajoute { background: var(--rose); color: var(--prune-deep); } .soin__etape { position: absolute; top: 14px; right: 14px; font: 500 11px ui-monospace, Consolas, monospace; letter-spacing: .1em; background: rgba(250, 248, 246, .92); color: var(--prune); padding: 5px 8px; } .lien-fleche { display: inline-flex; align-items: center; gap: 8px; font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--prune); transition: color .3s; } .lien-fleche svg { width: 16px; height: 16px; transition: transform .35s var(--ease); } .lien-fleche:hover { color: var(--cuivre); } .lien-fleche:hover svg { transform: translateX(4px); } .section__pied--droite { justify-content: flex-end; } /* ─────────────────────────────── Précommande & filtres par type de soin */ .statut { display: inline-block; font: 600 9px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--prune-deep); background: #FAF8F6; padding: 6px 10px; white-space: nowrap; } .soin__media .statut { position: absolute; left: 14px; bottom: 14px; box-shadow: 0 8px 20px -10px rgba(29, 15, 20, .5); } .fiche__precommande { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 0; padding: 14px 16px; background: var(--rose-voile); font: 400 13.5px/1.7 var(--sans); color: #5a4a4e; } .fiche__precommande .statut { flex: none; margin-top: 2px; background: var(--prune); color: var(--ivoire); } .sous-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 clamp(24px, 3.5vh, 36px); } .sous-filtre { font: 500 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--prune); background: var(--rose-voile); border: 1px solid transparent; border-radius: 999px; padding: 9px 15px; transition: background .3s var(--ease), color .3s, border-color .3s; } .sous-filtre span { color: var(--cuivre); margin-left: 4px; } .sous-filtre:hover { border-color: var(--rose); } .sous-filtre.is-actif { background: var(--prune); color: var(--ivoire); } .sous-filtre.is-actif span { color: var(--rose); } /* ─────────────────────────────── Visuel de remplacement (produit sans photo) */ .visuel { position: relative; width: 100%; aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; overflow: hidden; isolation: isolate; } .visuel::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, .28); pointer-events: none; } .visuel--soin { background: radial-gradient(circle at 50% 36%, #FFFFFF 0%, var(--rose-voile) 52%, #E9D6CE 100%); color: var(--prune); } .visuel--soin::after { border-color: rgba(192, 138, 124, .35); } .visuel--parfum { color: #FAF8F6; } .visuel--sensuelle { background: linear-gradient(158deg, #E8A98F 0%, #C9736A 52%, #7E3B44 100%); } .visuel--lueur { background: linear-gradient(158deg, #E0B387 0%, #B5705C 48%, #5E2F3B 100%); } .visuel--seductrice { background: linear-gradient(158deg, #D99A9F 0%, #A85566 50%, #4E2233 100%); } .visuel--distingue { background: linear-gradient(158deg, #D98A5F 0%, #8E3B32 48%, #3A1820 100%); } .visuel--coffret { background: linear-gradient(150deg, #E8A98F 0%, #D08A7A 22%, #A85566 50%, #6E2F3D 76%, #3A1820 100%); } .visuel__embleme { width: 36%; max-width: 150px; height: auto; opacity: .92; } .visuel__nom { font: italic 500 clamp(20px, 2vw, 28px)/1.15 var(--serif); } .visuel__type { font: 600 9.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .75; } .visuel--grand .visuel__embleme { width: 30%; max-width: 190px; margin-bottom: 8px; } .visuel--grand .visuel__nom { font-size: clamp(34px, 3.8vw, 54px); } .visuel--grand .visuel__type { font-size: 11px; } /* ─────────────────────────────── Pages intérieures */ body:not(.page-accueil) main { padding-top: clamp(76px, 8vw, 92px); } .fil { max-width: 1320px; margin: 0 auto; padding: 22px var(--gutter) 0; } .fil ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font: 500 11px var(--sans); letter-spacing: .08em; color: #9a8d89; } .fil li + li::before { content: "/"; margin-right: 6px; color: #cdbdb6; } .fil a { color: var(--prune); transition: color .3s; } .fil a:hover { color: var(--cuivre); } .fil [aria-current] { color: #6b6b6b; } .page-entete { max-width: 1320px; margin: 0 auto; padding: clamp(26px, 5vh, 60px) var(--gutter) clamp(20px, 3vh, 32px); } .page-entete__titre { font: 500 clamp(46px, 6.4vw, 92px)/1.02 var(--serif); color: var(--charbon); margin: 0 0 20px; } .page-entete__titre em, .section-title em { font-style: italic; } .page-entete__titre em { color: var(--prune); } .page-entete__intro { max-width: 60ch; font: 400 16px/1.75 var(--sans); color: #5a5a5a; margin: 0 0 32px; } .filtres { display: flex; flex-wrap: wrap; gap: 10px; } .filtre { font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--prune); border: 1px solid #e2d3cc; padding: 13px 18px; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s; } .filtre span { font-weight: 500; color: var(--cuivre); margin-left: 6px; } .filtre:hover { border-color: var(--prune); } .filtre.is-actif { background: var(--prune); border-color: var(--prune); color: var(--ivoire); } .filtre.is-actif span { color: var(--rose); } .rayon { max-width: 1320px; margin: 0 auto; padding: clamp(24px, 4vh, 48px) var(--gutter) clamp(44px, 6vh, 76px); scroll-margin-top: 80px; } .rayon[hidden] { display: none; } .rayon__entete { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px 40px; padding-top: clamp(24px, 4vh, 40px); margin-bottom: clamp(26px, 4vh, 42px); border-top: 1px solid #eadcd5; } .rayon__texte { max-width: 54ch; margin: 0; font: 400 14.5px/1.75 var(--sans); color: #6b6b6b; } .rayon__texte a { color: var(--prune); border-bottom: 1px solid var(--cuivre); } .rayon__texte strong { color: var(--prune); font-weight: 600; } .rayon__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(26px, 2.8vw, 40px) clamp(20px, 2.4vw, 32px); } .rayon__grille .parfum { width: auto; } .rayon__grille--parfums { grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); } .rayon__grille .parfum__inner { min-height: 0; } .rayon--associes { padding-top: 0; } .rayon--associes .rayon__grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } /* ─────────────────────────────── Fiche produit */ .fiche { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 84px); align-items: start; max-width: 1320px; margin: 0 auto; padding: clamp(18px, 3vh, 34px) var(--gutter) clamp(60px, 9vh, 110px); } .fiche__media { position: sticky; top: 104px; } .fiche__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--rose-voile); } .fiche__photo > img.is-change { animation: photoFondu .55s var(--ease); } @keyframes photoFondu { from { opacity: .2; transform: scale(1.03); } to { opacity: 1; transform: none; } } .fiche__vignettes { display: grid; grid-template-columns: repeat(auto-fill, 76px); gap: 10px; margin-top: 12px; } .fiche__vignette { aspect-ratio: 4 / 5; overflow: hidden; opacity: .55; transition: opacity .3s, box-shadow .3s; } .fiche__vignette img { width: 100%; height: 100%; object-fit: cover; } .fiche__vignette:hover { opacity: 1; } .fiche__vignette.is-actif { opacity: 1; box-shadow: 0 0 0 1.5px var(--prune); } .fiche__photo > img, .fiche__photo > .visuel { width: 100%; height: 100%; object-fit: cover; animation: ficheEntree 1.4s var(--ease) both; } @keyframes ficheEntree { from { clip-path: inset(0 0 100% 0); transform: scale(1.08); } to { clip-path: inset(0); transform: none; } } .fiche__info > * { animation: fadeUp .9s var(--ease) both; } .fiche__info > :nth-child(2) { animation-delay: .08s; } .fiche__info > :nth-child(3) { animation-delay: .14s; } .fiche__info > :nth-child(n+4) { animation-delay: .2s; } .fiche__rayon { font: 600 10.5px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--cuivre); margin: 6px 0 0; } .fiche__nom { font: 500 clamp(40px, 4.8vw, 68px)/1.04 var(--serif); color: var(--charbon); margin: 12px 0 12px; } .fiche--parfums .fiche__nom { font-style: italic; color: var(--prune-deep); } .fiche__type { font: 400 14.5px/1.6 var(--sans); color: #6b6b6b; margin: 0; } .fiche__type em { font: italic 500 16px var(--serif); color: var(--prune); } .fiche__prix { margin: 26px 0 20px; } .fiche__prix .prix b { font: 500 32px var(--serif); color: var(--charbon); } .fiche__prix .prix s { font-size: 16px; } .fiche__prix .prix--attente { font-size: 12px; } .fiche__accroche { font: 400 16.5px/1.75 var(--sans); color: #4a4a4a; margin: 0 0 20px; max-width: 52ch; } .fiche__details, .onglet__liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .fiche__details li, .onglet__liste li { font: 500 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--prune); background: var(--rose-voile); padding: 7px 11px; } .fiche__achat { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 22px; } .fiche__achat .btn { flex: 1 1 220px; text-align: center; } .fiche__achat[hidden], .fiche__achat [hidden] { display: none; } .quantite { display: inline-flex; border: 1px solid #e2d3cc; background: var(--blanc); } .quantite button { width: 46px; min-height: 44px; font: 400 18px var(--sans); color: var(--prune); transition: background .3s; } .quantite button:hover { background: var(--rose-voile); } .quantite input { width: 46px; border: 0; text-align: center; font: 600 15px var(--sans); color: var(--charbon); background: transparent; -moz-appearance: textfield; appearance: textfield; } .quantite input::-webkit-inner-spin-button, .quantite input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .fiche__garanties { display: grid; gap: 11px; margin: 0 0 8px; padding: 20px 0; list-style: none; border-top: 1px solid #eee3de; border-bottom: 1px solid #eee3de; } .fiche__garanties li { display: flex; align-items: center; gap: 12px; font: 400 13.5px/1.5 var(--sans); color: #5a5a5a; } .fiche__garanties svg { flex: none; width: 21px; height: 21px; color: var(--cuivre); } .onglet { border-bottom: 1px solid #eee3de; } .onglet summary { position: relative; list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font: 600 11px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--charbon); transition: color .3s; } .onglet summary::-webkit-details-marker { display: none; } .onglet summary:hover { color: var(--prune); } .onglet summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 1.5px; background: var(--cuivre); box-shadow: none; transition: transform .35s var(--ease); } .onglet summary::before { content: ""; position: absolute; right: 13.25px; top: calc(50% - 5.25px); width: 1.5px; height: 12px; background: var(--cuivre); transition: transform .35s var(--ease), opacity .35s; } .onglet[open] summary::before { transform: rotate(90deg); opacity: 0; } .onglet__corps { padding: 0 0 22px; animation: qrIn .45s var(--ease); } .onglet__corps p { font: 400 14.5px/1.8 var(--sans); color: #5a5a5a; margin: 0 0 12px; } .onglet__corps a { color: var(--prune); border-bottom: 1px solid var(--cuivre); } .onglet__note { font-size: 13px !important; color: var(--cuivre) !important; } /* ─────────────────────────────── Engagements (toutes les pages) */ .engagements { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--blanc); border-top: 1px solid #eadcd5; } .engagements__item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 34px var(--gutter); text-align: center; } .engagements__item + .engagements__item { border-left: 1px solid #eadcd5; } .engagements__item svg { width: 30px; height: 30px; color: var(--cuivre); margin-bottom: 8px; } .engagements__item b { font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--prune); } .engagements__item span { font: 400 13px var(--sans); color: #8a8a8a; } /* ─────────────────────────────── Pages légales & 404 */ .legal { max-width: 820px; margin: 0 auto; padding: 22px var(--gutter) 96px; } .legal__entete h1 { font: 500 clamp(38px, 5vw, 58px)/1.08 var(--serif); color: var(--charbon); margin: 0 0 12px; } .legal__maj { font: 600 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cuivre); margin: 0 0 22px; } .legal__intro { font: 400 16px/1.8 var(--sans); color: #4a4a4a; margin: 0; } .legal__sommaire { background: var(--rose-voile); padding: 24px 28px; margin: 34px 0 20px; } .legal__sommaire ol { columns: 2; column-gap: 32px; margin: 0; padding-left: 18px; font: 400 13.5px/2 var(--sans); color: var(--prune); } .legal__sommaire a { color: var(--prune); transition: color .3s; } .legal__sommaire a:hover { color: var(--cuivre); } .legal__corps section { scroll-margin-top: 110px; } .legal__corps h2 { font: 500 24px/1.3 var(--serif); color: var(--charbon); margin: 42px 0 12px; } .legal__corps p, .legal__corps li { font: 400 15px/1.8 var(--sans); color: #4a4a4a; } .legal__corps ul { padding-left: 20px; } .legal__corps li { margin-bottom: 8px; } .legal__corps a { color: var(--prune); border-bottom: 1px solid var(--cuivre); } .a-confirmer { background: #FFF1B8; color: #6B4E00; font: 700 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; } .introuvable { min-height: 72vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px var(--gutter); text-align: center; } .introuvable h1 { font: 500 clamp(40px, 6vw, 76px)/1.05 var(--serif); margin: 0 0 18px; color: var(--charbon); } .introuvable h1 em { color: var(--prune); } .introuvable p { max-width: 44ch; font: 400 16px/1.75 var(--sans); color: #5a5a5a; margin: 0 0 32px; } .introuvable__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } /* ─────────────────────────────── Panier (tiroir) */ .panier { position: fixed; inset: 0; z-index: 90; visibility: hidden; transition: visibility 0s .5s; } .panier.is-ouvert { visibility: visible; transition-delay: 0s; } .panier__voile { position: absolute; inset: 0; background: rgba(29, 15, 20, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .45s var(--ease); } .panier.is-ouvert .panier__voile { opacity: 1; } .panier__tiroir { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--ivoire); box-shadow: -30px 0 60px -30px rgba(29, 15, 20, .5); transform: translateX(100%); transition: transform .55s var(--ease); outline: none; } .panier.is-ouvert .panier__tiroir { transform: none; } .panier__entete { display: flex; justify-content: space-between; align-items: center; padding: 22px 26px; border-bottom: 1px solid #ebdfd9; } .panier__entete h2 { font: 500 23px var(--serif); color: var(--charbon); margin: 0; } .panier__entete h2 span { font: 500 14px var(--sans); color: var(--cuivre); } .panier__fermer { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--charbon); transition: background .3s, transform .35s var(--ease); } .panier__fermer:hover { background: var(--rose-voile); transform: rotate(90deg); } .panier__fermer svg { width: 20px; height: 20px; } .panier__livraison { padding: 14px 26px 16px; background: var(--rose-voile); } .panier__livraison p { font: 400 13px/1.5 var(--sans); color: #5a4a4e; margin: 0 0 10px; } .panier__livraison b { color: var(--prune); font-weight: 600; } .panier__jauge { height: 3px; background: rgba(110, 61, 79, .14); overflow: hidden; } .panier__jauge span { display: block; height: 100%; background: linear-gradient(90deg, var(--cuivre), var(--prune)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .panier__corps { flex: 1; overflow-y: auto; padding: 4px 26px; } .panier__ligne { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid #efe5e0; } .panier__vignette { width: 72px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--rose-voile); } .panier__vignette img { width: 100%; height: 100%; object-fit: cover; } .panier__vignette .visuel { height: 100%; padding: 6px; } .panier__vignette .visuel::after { inset: 4px; } .panier__vignette .visuel__embleme { width: 60%; } .panier__nom { font: 500 17px/1.25 var(--serif); color: var(--charbon); margin: 0 0 3px; } .panier__nom a:hover { color: var(--prune); } .panier__type { font: 500 9.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cuivre); margin: 0 0 10px; } .panier__precommande { font: 600 9.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--prune); margin: -6px 0 10px; } .panier__qte { display: inline-flex; align-items: center; border: 1px solid #e2d3cc; background: var(--blanc); } .panier__qte button { width: 30px; height: 30px; color: var(--prune); font-size: 16px; transition: background .3s; } .panier__qte button:hover { background: var(--rose-voile); } .panier__qte span { min-width: 26px; text-align: center; font: 600 13px var(--sans); } .panier__droite { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .panier__droite b { font: 600 15px var(--sans); color: var(--charbon); } .panier__retirer { font: 500 11px var(--sans); color: #9a8d89; border-bottom: 1px solid currentColor; padding: 0; transition: color .3s; } .panier__retirer:hover { color: var(--prune); } .panier__vide { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 64px 20px; text-align: center; } .panier__vide img { width: 64px; height: auto; opacity: .85; } .panier__vide p { font: italic 500 19px var(--serif); color: var(--charbon); margin: 0; } .panier__pied { padding: 20px 26px 26px; border-top: 1px solid #ebdfd9; background: var(--blanc); } .panier__total { display: flex; justify-content: space-between; align-items: baseline; } .panier__total span { font: 500 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6b6b6b; } .panier__total b { font: 500 26px var(--serif); color: var(--charbon); } .panier__taxes { font: 400 12px var(--sans); color: #9a8d89; margin: 4px 0 16px; } .panier__caisse { width: 100%; } .panier__note { font: 400 13px/1.6 var(--sans); color: var(--prune); margin: 12px 0 0; } .panier__note:empty { display: none; } .panier__note a { border-bottom: 1px solid var(--cuivre); } /* ═══════════════════════════════════════════════════════════ GALERIE — mode grille (sans JS / mouvement réduit) puis mode 3D ═══════════════════════════════════════════════════════════ */ .galerie { --teinte: 217, 164, 152; --pw: clamp(172px, 20.5vw, 300px); /* largeur d'un panneau */ position: relative; background: #140a0e; color: var(--ivoire); } .galerie__piste { padding: clamp(64px, 9vh, 104px) var(--gutter); } .galerie__scene { position: relative; } .galerie__lueur, .galerie__sol, .galerie__poussiere, .galerie__balayage, .galerie__cadre, .galerie__visee, .galerie__compteur, .galerie__legende, .galerie__commandes { display: none; } .galerie__entete { margin-bottom: 36px; } .galerie__code { font: 500 10.5px ui-monospace, Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; color: rgba(217, 164, 152, .72); margin: 0 0 14px; } .galerie__code span { display: inline-block; color: var(--rose); border: 1px solid rgba(217, 164, 152, .45); padding: 3px 7px; margin-right: 10px; } .galerie__titre { font: 500 clamp(34px, 4.2vw, 58px)/1.08 var(--serif); color: #FAF8F6; margin: 0; } .galerie__titre em { font-style: italic; color: var(--rose); } .galerie__anneau { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 18px; } .galerie__panneau { margin: 0; } .galerie__ouvrir { display: block; width: 100%; padding: 0; cursor: zoom-in; } .galerie__ouvrir img { width: 100%; height: auto; /* sinon l'attribut height="1125" écrase le ratio */ aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--ease); } .galerie__panneau figcaption { padding-top: 10px; font: 400 12px var(--sans); color: rgba(232, 213, 204, .65); } .galerie__panneau figcaption b { color: #FAF8F6; font-weight: 600; margin-right: 6px; } /* ─────────────── Mode 3D : l'anneau */ .galerie--3d .galerie__piste { height: 360vh; padding: 0; } .galerie--3d .galerie__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: 1700px; perspective-origin: 50% 48%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; background: radial-gradient(ellipse 75% 60% at 50% 42%, #2b1520 0%, rgba(20, 10, 14, 0) 70%), linear-gradient(180deg, #0f070b 0%, #140a0e 60%, #1c0e14 100%); } .galerie--3d .galerie__scene.is-glisse { cursor: grabbing; } .galerie--3d .galerie__lueur { display: block; position: absolute; left: 50%; top: 51%; width: 78vmin; height: 78vmin; translate: -50% -50%; background-color: rgba(var(--teinte), .55); -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .35) 32%, transparent 66%); mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .35) 32%, transparent 66%); filter: blur(24px); transition: background-color 1.4s var(--ease); animation: lueurRespire 8s ease-in-out infinite; pointer-events: none; } @keyframes lueurRespire { 0%, 100% { scale: 1; opacity: .8; } 50% { scale: 1.12; opacity: 1; } } /* sol quadrillé qui fuit vers l'horizon */ .galerie--3d .galerie__sol { display: block; position: absolute; left: 50%; top: 100%; width: 240vmax; height: 140vmax; translate: -50% -50%; transform: rotateX(88deg); transform-origin: 50% 50%; background-image: linear-gradient(rgba(217, 164, 152, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 164, 152, .2) 1px, transparent 1px); background-size: 90px 90px; -webkit-mask-image: radial-gradient(ellipse 30% 42% at 50% 50%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 30% 42% at 50% 50%, #000 10%, transparent 70%); animation: solDefile 14s linear infinite; pointer-events: none; } @keyframes solDefile { to { background-position: 0 90px, 90px 0; } } .galerie--3d .galerie__poussiere { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } /* trame d'écran + faisceau de balayage */ .galerie--3d .galerie__balayage { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px); } .galerie--3d .galerie__balayage::after { content: ""; position: absolute; left: 0; right: 0; top: -140px; height: 140px; background: linear-gradient(180deg, transparent, rgba(var(--teinte), .06) 60%, rgba(var(--teinte), .18) 97%, transparent); animation: balayage 7.5s linear infinite; } @keyframes balayage { to { transform: translateY(calc(100vh + 280px)); } } /* coins de l'instrument */ .galerie--3d .galerie__cadre { display: block; position: absolute; inset: 22px; z-index: 4; pointer-events: none; } .galerie__cadre i, .galerie__visee i { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(217, 164, 152, .45); } .galerie__cadre i:nth-child(1), .galerie__visee i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; } .galerie__cadre i:nth-child(2), .galerie__visee i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; } .galerie__cadre i:nth-child(3), .galerie__visee i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; } .galerie__cadre i:nth-child(4), .galerie__visee i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1px 1px 0; } .galerie--3d .galerie__anneau { display: block; position: absolute; left: 50%; top: 51%; width: var(--pw); aspect-ratio: 4 / 5; translate: -50% -50%; transform-style: preserve-3d; will-change: transform; z-index: 3; } .galerie--3d .galerie__panneau { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--i) * 360deg / var(--n) - 90deg)) translateZ(calc(var(--rayon, 600px) * .12)) scale(.5); opacity: 0; transition: transform 1.8s var(--ease) calc(var(--i) * 75ms), opacity 1.3s var(--ease) calc(var(--i) * 75ms); } .galerie--3d.is-assemblee .galerie__panneau { transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--rayon, 600px)); opacity: 1; } .galerie--3d .galerie__panneau figcaption { display: none; } .galerie--3d .galerie__ouvrir { height: 100%; cursor: pointer; /* --face : 1 = face à la caméra, 0 = dos tourné. Mis à jour à chaque image. */ opacity: calc(.12 + .88 * var(--face, 1)); filter: brightness(calc(.3 + .7 * var(--face, 1))) saturate(calc(.35 + .65 * var(--face, 1))); box-shadow: 0 0 0 1px rgba(217, 164, 152, .18); transition: box-shadow .6s var(--ease); } .galerie--3d .galerie__ouvrir img { height: 100%; -webkit-box-reflect: below 12px linear-gradient(transparent 64%, rgba(255, 255, 255, .2)); } .galerie--3d .galerie__panneau.is-face .galerie__ouvrir { box-shadow: 0 0 0 1px rgba(var(--teinte), .75), 0 34px 90px -24px rgba(var(--teinte), .6); } /* ─────────────── Mode 3D : interface */ .galerie--3d .galerie__entete { position: absolute; z-index: 5; top: clamp(86px, 12vh, 128px); left: clamp(28px, 5vw, 64px); max-width: 34ch; margin: 0; } .galerie--3d .galerie__titre { font-size: clamp(28px, 3.4vw, 48px); } .galerie--3d .galerie__compteur { display: flex; flex-direction: column; align-items: flex-end; position: absolute; z-index: 5; top: clamp(86px, 12vh, 128px); right: clamp(28px, 5vw, 64px); font-family: ui-monospace, Consolas, monospace; } .galerie__compteur b { font: 300 clamp(44px, 5.4vw, 76px)/1 ui-monospace, Consolas, monospace; letter-spacing: -.03em; color: #FAF8F6; text-shadow: 0 0 28px rgba(var(--teinte), .55); } .galerie__compteur span { font-size: 12px; letter-spacing: .24em; color: rgba(217, 164, 152, .75); margin-top: 6px; } .galerie__compteur small { font-size: 10px; letter-spacing: .2em; color: rgba(217, 164, 152, .5); margin-top: 10px; } .galerie__compteur.is-change b { animation: chiffre .6s var(--ease) both; } @keyframes chiffre { 0% { opacity: 0; transform: translateY(35%); filter: blur(6px); } 60% { opacity: 1; } 100% { transform: none; filter: none; } } .galerie--3d .galerie__visee { display: block; position: absolute; left: 50%; top: 51%; z-index: 4; width: calc(var(--pw) + 46px); height: calc(var(--pw) * 1.25 + 46px); translate: -50% -50%; pointer-events: none; } .galerie__visee i { border-color: rgba(var(--teinte), .95); width: 20px; height: 20px; transition: border-color 1s var(--ease); } .galerie__visee.is-change { animation: verrou .7s var(--ease) both; } @keyframes verrou { 0% { scale: 1.14; opacity: 0; } 40% { opacity: 1; } 100% { scale: 1; } } .galerie--3d .galerie__legende { display: flex; flex-direction: column; align-items: center; position: absolute; left: 50%; z-index: 5; bottom: clamp(84px, 11.5vh, 120px); translate: -50% 0; text-align: center; white-space: nowrap; } .galerie__legende-titre { font: italic 500 clamp(22px, 2.3vw, 32px) var(--serif); color: #FAF8F6; } .galerie__legende-sous { margin-top: 6px; font: 500 10.5px ui-monospace, Consolas, monospace; letter-spacing: .24em; text-transform: uppercase; color: rgba(217, 164, 152, .82); } .galerie__legende.is-change > * { animation: fadeUp .7s var(--ease) both; } .galerie__legende.is-change > :last-child { animation-delay: .07s; } .galerie--3d .galerie__commandes { display: flex; align-items: center; gap: 16px; position: absolute; z-index: 6; left: clamp(28px, 5vw, 64px); right: clamp(28px, 5vw, 64px); bottom: clamp(26px, 4.5vh, 44px); cursor: default; } .galerie__fleche { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(217, 164, 152, .38); border-radius: 50%; color: #FAF8F6; transition: background .3s var(--ease), border-color .3s, color .3s; } .galerie__fleche:hover { background: var(--rose); border-color: var(--rose); color: var(--prune-deep); } .galerie__fleche svg { width: 18px; height: 18px; } [data-galerie-prec] svg { transform: scaleX(-1); } .galerie__barre { position: relative; flex: 1; height: 1px; background: rgba(217, 164, 152, .2); } .galerie__barre::after { content: ""; position: absolute; inset: -3px 0; background: repeating-linear-gradient(90deg, rgba(217, 164, 152, .45) 0 1px, transparent 1px calc(100% / (var(--n) - 1))); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1px), transparent 0); } .galerie__barre span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cuivre), var(--rose)); box-shadow: 0 0 10px rgba(var(--teinte), .8); transform: scaleX(0); transform-origin: left; } .galerie__aide { font: 500 10px ui-monospace, Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; color: rgba(232, 213, 204, .45); white-space: nowrap; } @media (max-width: 760px) { .galerie--3d .galerie__piste { height: 300vh; } .galerie--3d .galerie__entete { max-width: 20ch; } .galerie--3d .galerie__titre { font-size: 26px; } .galerie--3d .galerie__code { font-size: 9px; letter-spacing: .14em; } .galerie--3d .galerie__code span { display: none; } .galerie--3d .galerie__compteur b { font-size: 38px; } .galerie--3d .galerie__compteur small { display: none; } .galerie__aide { display: none; } .galerie--3d .galerie__cadre { inset: 12px; } } /* ─────────────── Visionneuse */ .visionneuse { --teinte: 217, 164, 152; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ivoire); overflow: hidden; } .visionneuse::backdrop { background: rgba(14, 7, 10, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .visionneuse[open] { animation: fadeUp .45s var(--ease); } .visionneuse__cadre { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 64px 92px 34px; } .visionneuse__figure { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 0; } .visionneuse__image { position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(var(--teinte), .55), 0 40px 120px -30px rgba(var(--teinte), .6); transition: box-shadow 1s var(--ease); } .visionneuse__image img { display: block; width: auto; height: auto; max-width: min(84vw, 1400px); max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); touch-action: pan-y; } .visionneuse__image.is-charge img { clip-path: inset(0); } .visionneuse__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgb(var(--teinte)); box-shadow: 0 0 20px 5px rgba(var(--teinte), .7); opacity: 0; pointer-events: none; } .visionneuse__image.is-charge .visionneuse__scan { animation: scan 1s var(--ease); } @keyframes scan { 0% { top: 0; opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .visionneuse__legende { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .visionneuse__num { font: 500 10.5px ui-monospace, Consolas, monospace; letter-spacing: .24em; color: rgba(217, 164, 152, .75); } .visionneuse__titre { font: italic 500 24px var(--serif); font-weight: 500; color: #FAF8F6; } .visionneuse__sous { font: 500 10.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(232, 213, 204, .6); } .visionneuse__produit { margin-top: 8px; color: var(--rose); } .visionneuse__produit:hover { color: #FAF8F6; } .visionneuse__fermer, .visionneuse__nav { position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid rgba(217, 164, 152, .4); border-radius: 50%; color: #FAF8F6; transition: background .3s var(--ease), border-color .3s, color .3s, transform .35s var(--ease); } .visionneuse__fermer { top: 20px; right: 20px; } .visionneuse__fermer:hover { transform: rotate(90deg); } .visionneuse__nav { top: 50%; translate: 0 -50%; } .visionneuse__nav--prec { left: 22px; } .visionneuse__nav--suiv { right: 22px; } .visionneuse__nav--prec svg { transform: scaleX(-1); } .visionneuse__fermer:hover, .visionneuse__nav:hover { background: var(--rose); border-color: var(--rose); color: var(--prune-deep); } .visionneuse__fermer svg, .visionneuse__nav svg { width: 20px; height: 20px; } @media (max-width: 700px) { .visionneuse__cadre { padding: 70px 14px 96px; } .visionneuse__nav { top: auto; bottom: 24px; translate: none; } .visionneuse__nav--prec { left: calc(50% - 62px); } .visionneuse__nav--suiv { right: calc(50% - 62px); } .visionneuse__image img { max-width: 92vw; max-height: calc(100dvh - 260px); } } /* ─────────────────────────────── Responsive des nouveaux blocs */ @media (max-width: 980px) { .fiche { grid-template-columns: 1fr; } .fiche__media { position: relative; top: 0; max-width: 560px; } .legal__sommaire ol { columns: 1; } } @media (max-width: 560px) { .soin__actions .lien-fleche { order: 3; } .filtre { padding: 12px 14px; } .fiche__achat .btn { flex-basis: 100%; } } /* ─────────────────────────────── Message éphémère */ .toast { position: fixed; left: 50%; bottom: 26px; z-index: 60; transform: translate(-50%, 20px); max-width: min(440px, calc(100vw - 32px)); background: var(--prune-deep); color: var(--ivoire); font: 400 13.5px/1.6 var(--sans); padding: 15px 22px; box-shadow: 0 22px 48px -22px rgba(36, 19, 24, .7); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); } .toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* ─────────────────────────────── Responsive */ @media (max-width: 1060px) { .hero { height: 160vh; } .hero__tagline { display: none; } /* Écran étroit : le film couvre tout (recadrage centré), l'ambiance floutée est retirée (coût décodage) — le fond dégradé prend le relais */ .hero__ambience { display: none; } .hero__film { left: 0; top: 0; transform: none; width: 100%; height: 100%; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; } } /* « Univers olfactif » est plus long que « Parfums » : sur portable étroit, les onglets se resserrent pour laisser le logo respirer */ @media (max-width: 1300px) { .header__nav { gap: 16px; } .header__link { font-size: 10.5px; letter-spacing: .1em; } } @media (max-width: 1180px) { .header__cta { display: none; } .section__head { grid-template-columns: 1fr; align-items: start; } .conseils__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 980px) { .grille { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .faq { grid-template-columns: 1fr; } .faq__intro { position: static; } .footer__top { grid-template-columns: 1fr 1fr; justify-content: normal; } .footer__marque { grid-column: 1 / -1; } } @media (max-width: 900px) { /* Logo centré aussi sur mobile : menu à gauche, panier à droite */ .header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .header__nav--left { display: none; } .header__brand { grid-column: 2; justify-self: center; padding: 0 10px; } .header__burger { position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%; } .header__brand img { height: 42px; } .header.is-scrolled .header__brand img { height: 36px; } .header__nav--right { grid-column: 3; } .header__nav--right .header__link { display: none; } .header__burger { display: flex; } .hero { height: 150vh; } /* Écran en hauteur (29 sept.) : recadré en plein écran, le film carré ne montrait qu'un morceau d'étiquette sous le titre. Il est maintenant affiché ENTIER en haut (--film : ce qui reste une fois le texte placé), bords fondus dans le fond, le nom du parfum dessous ; le texte s'ancre en bas, sans le chevaucher. */ .hero__stage { --film-haut: 64px; --film: clamp(220px, calc(100svh - 500px), 100vw); } .hero__film { left: 50%; top: var(--film-haut); transform: translateX(-50%); width: var(--film); height: var(--film); aspect-ratio: 1 / 1; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 7%, #000 76%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 7%, #000 76%, transparent 100%); mask-composite: intersect; } .hero__inner { justify-content: flex-end; padding-bottom: 40px; } .hero__content { flex-shrink: 0; } .hero__tint { background: linear-gradient(180deg, rgba(29, 15, 20, .55) 0%, transparent 12%); } .hero__tagline { display: none; } /* Nom du parfum DANS le flux, juste au-dessus du surtitre : un écart fixe les sépare quelle que soit la taille du titre (un positionnement calculé finissait par chevaucher « Nature · Science · Essence de beauté » sur les grands cellulaires). */ .hero__credit { position: static; order: -1; flex-shrink: 0; /* sinon, écran court : le bloc s'écrase et l'écart disparaît */ align-self: center; align-items: center; text-align: center; margin-bottom: 22px; white-space: nowrap; text-shadow: 0 2px 14px rgba(29, 15, 20, .9); } .hero__credit-notes { display: none; } .hero__cue { bottom: 20px; } .histoire { grid-template-columns: 1fr; } .infolettre__inner { grid-template-columns: 1fr; } .defile__track > :nth-child(even) { margin-top: 0; } .rituel__grid { grid-template-columns: 1fr; } .engagements { grid-template-columns: 1fr; } .engagements__item + .engagements__item { border-left: 0; border-top: 1px solid #eadcd5; } } @media (max-width: 560px) { .rituel__ligne { --noeud: 60px; } .header .header__lang { display: none; } .header__brand img, .header.is-scrolled .header__brand img { height: 34px; } .menu__lang { font-size: 13px; } /* Cellulaire : film pleine largeur, sans fondu sur les côtés ; il remonte sous l'en-tête sur les écrans courts pour laisser la place au texte. Le nom du parfum s'aligne à droite (demande du 29 sept.). */ .hero__stage { --film: 100vw; --film-haut: clamp(0px, calc(100svh - 100vw - 365px), 64px); } .hero__film { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 76%, transparent 100%); } .hero__credit { align-self: flex-end; align-items: flex-end; text-align: right; } .hero__title { font-size: clamp(40px, 11.5vw, 56px); } .hero__surtitre { letter-spacing: .26em; font-size: 10px; } .hero__actions { flex-direction: column; align-items: flex-start; gap: 16px; } .hero__cue { display: none; } .defile__track > .parfum, .defile__track > .soin { width: 76vw; } .conseils__grid { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr; } .footer__bas { flex-direction: column; text-align: center; } } /* Cellulaire court (iPhone SE…) : texte du hero resserré sous le film pleine largeur */ @media (max-width: 560px) and (max-height: 720px) { .hero__surtitre { display: none; } .hero__title { font-size: 36px; margin-bottom: 22px; } .hero__inner { padding-bottom: 32px; } } /* ─────────────────────────────── Mouvement réduit */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .preloader { display: none; } .hero { height: auto; } .hero__stage { position: relative; } .hero__media { opacity: 1; } .hero__ambience { display: none; } .hero__title .line__inner { transform: none; } .anim-fade, [data-reveal], .hero__credit, .hero__cue { opacity: 1; transform: none; } .band__media { height: 100%; top: 0; transform: none; } .mot > span { transform: none !important; } .soin .soin__media img, .soin .soin__media .visuel, .parfum .parfum__produit img, .coffret-carte__media img, .histoire__media img, .fiche__media img { clip-path: none !important; transform: none !important; } .btn--eclat::after, .progression { display: none; } .conseils__aura i { animation: none; } .qr p { animation: none; } } /* ─────────────────────────────── Bannière de consentement (Google Analytics, Loi 25) N'apparaît que si GA4_ID est rempli dans le générateur (voir js/mesure.js). */ .temoins { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 560px; margin-inline: auto; display: grid; gap: 14px; padding: 18px 20px; background: var(--ivoire); color: var(--charbon); border: 1px solid #e2d3cc; border-radius: 14px; box-shadow: 0 24px 60px -24px rgba(29, 15, 20, .45); font: 400 13.5px/1.6 var(--sans); transform: translateY(20px); opacity: 0; transition: transform .4s var(--ease), opacity .4s; } .temoins.is-visible { transform: none; opacity: 1; } .temoins p { margin: 0; } .temoins a { color: var(--prune); text-decoration: underline; } .temoins__choix { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .temoins__choix .btn { min-height: 44px; padding: 12px 20px; } .footer__bas [hidden] { display: none; }