/** Shopify CDN: Minification failed
Line 8:0 Unexpected "}"
**/
.product-tagline{-webkit-line-clamp:2 !important}
}
/* ── LANDSCAPE PHONE ── */
@media(max-height:500px) and (orientation:landscape){
.stories-slide{min-height:auto !important}
.stories-content{padding:1rem !important}
.stories-title{font-size:1.2rem !important}
.pdp-layout{grid-template-columns:1fr 1fr !important}
.pdp-gallery{position:relative !important;top:auto !important}
}
/* ═══════════════════════════════════════════════════════ */
/* PDP SECTIONS — UNIFIED LAYOUT */
/* ═══════════════════════════════════════════════════════ */
/* ── Profil Olfactif ── */
.oil-profile{padding:2.5rem 2rem;border-top:1px solid var(--light-border);border-bottom:1px solid var(--light-border);background:var(--offwhite)}
.oil-profile-inner{max-width:900px;margin:0 auto}
.oil-profile-overline{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.18em;color:var(--gold);margin-bottom:1.2rem;text-align:center}
.oil-profile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.oil-profile-item{background:var(--white);border-radius:12px;padding:1.2rem;text-align:center;border:1px solid var(--light-border)}
.oil-profile-icon{margin-bottom:0.6rem;color:var(--gold)}
.oil-profile-icon svg{display:inline-block}
.oil-profile-label{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--warm-grey);display:block;margin-bottom:0.4rem}
.oil-profile-value{font-size:0.82rem;font-weight:500;color:var(--dark-azur);min-height:1.2em}
.intensity-bars{display:inline-flex;gap:3px;vertical-align:middle}
.intensity-bars .bar{width:6px;height:16px;border-radius:2px;background:var(--light-border)}
.intensity-bars .bar.on{background:var(--gold)}
/* ── Scent Story ── */
.scent-story{padding:3.5rem 2rem;background:var(--offwhite)}
.scent-story-inner{max-width:900px;margin:0 auto;text-align:center}
.scent-story-overline{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.18em;color:var(--gold);margin-bottom:0.8rem}
.scent-story h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.2rem,2.5vw,1.6rem);font-weight:400;color:var(--dark-azur);line-height:1.35;margin-bottom:1.2rem}
.scent-story-text{font-size:0.88rem;line-height:1.8;color:var(--warm-grey);max-width:650px;margin:0 auto 2rem}
.scent-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.scent-story-item{background:var(--white);border:1px solid var(--light-border);border-radius:12px;padding:1.5rem 1rem;text-align:center;transition:transform 0.3s}
.scent-story-item:hover{transform:translateY(-3px)}
.scent-story-icon{font-size:1.5rem;margin-bottom:0.5rem}
.scent-story-label{font-family:'Cormorant Garamond',serif;font-size:0.9rem;font-weight:500;color:var(--dark-azur);margin-bottom:0.3rem}
.scent-story-desc{font-size:0.75rem;color:var(--warm-grey);line-height:1.6}
/* ── How-To ── */
.pdp-howto-inner{max-width:900px;margin:0 auto}
.pdp-howto h2{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:400;color:var(--dark-azur);text-align:center;margin-bottom:2rem}
.pdp-howto-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pdp-howto-step{text-align:center;background:var(--offwhite);border-radius:12px;padding:1.5rem 1rem}
.pdp-howto-num{width:36px;height:36px;border-radius:50%;background:var(--dark-azur);color:var(--white);display:flex;align-items:center;justify-content:center;margin:0 auto 0.8rem;font-size:0.78rem;font-weight:600}
.pdp-howto-step h3{font-size:0.82rem;font-weight:600;color:var(--dark-azur);margin-bottom:0.3rem}
.pdp-howto-step p{font-size:0.75rem;color:var(--warm-grey);line-height:1.6}
/* ── Compare Table ── */
.pdp-compare-inner{max-width:900px;margin:0 auto}
.pdp-compare h2{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--white);text-align:center;margin-bottom:0.5rem}
.pdp-compare-sub{text-align:center;font-size:0.82rem;color:rgba(255,255,255,0.5);margin-bottom:2rem}
.pdp-compare-table{width:100%;border-collapse:collapse;font-size:0.75rem}
.pdp-compare-table th{padding:10px 12px;text-align:left;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--gold);border-bottom:1px solid rgba(255,255,255,0.1)}
.pdp-compare-table td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.06);color:rgba(255,255,255,0.7)}
.pdp-compare-table td:first-child{color:rgba(255,255,255,0.4);font-size:0.72rem}
.pdp-compare-table td:nth-child(2){color:var(--white);font-weight:500}
.compare-check{color:var(--gold);font-weight:700;margin-right:3px}
.compare-x{color:rgba(255,255,255,0.3);margin-right:3px}
/* ── PDP FAQ ── */
.pdp-faq-inner{max-width:800px;margin:0 auto}
.pdp-faq h2{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--dark-azur);text-align:center;margin-bottom:1.5rem}
.pdp-faq-item{background:var(--white);border:1px solid var(--light-border);border-radius:10px;margin-bottom:6px;overflow:hidden}
.pdp-faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;font-size:0.82rem;font-weight:500;color:var(--dark-azur);background:none;border:none;cursor:pointer;text-align:left;font-family:'Jost',sans-serif;transition:background 0.2s;min-height:44px}
.pdp-faq-q:hover{background:var(--offwhite)}
.pdp-faq-q svg{flex-shrink:0;transition:transform 0.3s}
.pdp-faq-q.open svg{transform:rotate(180deg)}
.pdp-faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s ease}
.pdp-faq-a-inner{padding:0 1.2rem 1rem;font-size:0.78rem;color:var(--warm-grey);line-height:1.75}
/* ── Reassurance Bar ── */
.reassurance-item{display:flex;align-items:flex-start;gap:0.8rem;padding:1rem;background:var(--offwhite);border-radius:10px}
.reassurance-item strong{font-size:0.78rem;color:var(--dark-azur);display:block;margin-bottom:2px}
.reassurance-item span{font-size:0.68rem;color:var(--warm-grey);display:block}
/* ── MOBILE for all PDP sections ── */
@media(max-width:768px){
.oil-profile{padding:1.5rem 1rem}
.oil-profile-grid{grid-template-columns:1fr 1fr;gap:0.6rem}
.oil-profile-item{padding:0.8rem}
.oil-profile-label{font-size:0.58rem}
.oil-profile-value{font-size:0.75rem}
.intensity-bars .bar{width:5px;height:14px}
.scent-story{padding:2.5rem 1rem}
.scent-story-text{font-size:0.82rem}
.scent-story-grid{grid-template-columns:1fr;gap:0.8rem}
.scent-story-item{padding:1rem}
.pdp-howto{padding:2.5rem 1rem}
.pdp-howto-steps{grid-template-columns:1fr;gap:0.8rem}
.pdp-howto-step{padding:1rem}
.pdp-howto-num{width:32px;height:32px;font-size:0.72rem}
.pdp-compare{padding:2rem 1rem}
.pdp-compare-table{font-size:0.65rem;display:block;overflow-x:auto}
.pdp-compare-table th,.pdp-compare-table td{padding:6px 8px;white-space:nowrap}
.pdp-faq{padding:2rem 1rem}
.pdp-faq-q{padding:0.8rem 1rem;font-size:0.78rem}
.pdp-faq-a-inner{padding:0 1rem 0.8rem;font-size:0.75rem}
}
@media(max-width:480px){
.oil-profile-grid{grid-template-columns:1fr 1fr}
.pdp-reassurance{grid-template-columns:1fr 1fr}
}
/* ── Accessibility ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ── Focus visible ── */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* ── Contrast fix ── */
.card-sub-label,.oil-profile-overline,.scent-story-overline,.section-overline,.pdp-overline,
.quiz-profile-label,.trust-item small{color:var(--gold-text) !important}
/* ── Cross-sell ── */
.cross-sell{max-width:1100px;margin:0 auto;padding:3rem 2rem}
.cross-sell h2{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:400;color:var(--dark-azur);text-align:center;margin-bottom:1.5rem}
.cross-sell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.cross-card{display:block;text-decoration:none;text-align:center;padding:1.2rem;border-radius:12px;background:var(--offwhite);transition:transform 0.3s,box-shadow 0.3s;opacity:1}
.cross-card:hover{transform:translateY(-4px);box-shadow:0 4px 16px rgba(0,0,0,0.06)}
.cross-card-img{aspect-ratio:1;border-radius:10px;overflow:hidden;margin-bottom:0.8rem;background:var(--white)}
.cross-card-img-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.cross-card-name{font-family:'Cormorant Garamond',serif;font-size:0.92rem;font-weight:500;color:var(--dark-azur);margin-bottom:0.2rem}
.cross-card-notes{font-size:0.72rem;color:var(--warm-grey);margin-bottom:0.3rem}
.cross-card-price{font-size:0.82rem;color:var(--gold);font-weight:600}
@media(max-width:768px){.cross-sell-grid{grid-template-columns:repeat(2,1fr);gap:0.8rem}.cross-card{padding:0.8rem}}
@media(max-width:480px){.cross-sell-grid{grid-template-columns:1fr}}
.card-social{font-size:0.72rem;color:var(--warm-grey);margin-bottom:0.4rem;display:flex;align-items:center;gap:0.3rem}
@media(max-width:768px){.card-social{font-size:0.62rem}}
.pdp-compare{padding:2rem 1rem;background:var(--dark-azur);border-radius:12px;margin:2rem 0}
.compare-check{color:var(--gold);font-weight:700}
.compare-x{color:rgba(255,255,255,0.3);font-weight:400}
/* ========================================================
1. REFINED COLOR TOKENS — warmer luxury blacks & champagne
Layered on top of existing :root so they take precedence
======================================================== */
:root {
/* warmer ink instead of pure #1A1A1A */
--dark-azur: #1A1A1A;
--dark-azur-deep: #0E0D12;
--noir: #1A1A1A;
/* refined gold with a hint more warmth */
--gold: #D4AF37;
--gold-rich: #C5A22F;
--gold-text: #A88A2E;
--gold-pale: #E8D9B8;
--gold-light: rgba(201, 168, 106, 0.55);
--gold-glow: rgba(201, 168, 106, 0.10);
--gold-border: rgba(201, 168, 106, 0.18);
--gold-glow-bg: rgba(201, 168, 106, 0.05);
/* refined warm ivory */
--offwhite: #F5F3F0;
--cream: #EFEADE;
/* refined text greys */
--warm-grey: rgba(20, 19, 24, 0.58);
--light-grey: rgba(20, 19, 24, 0.42);
--light-border: rgba(20, 19, 24, 0.08);
/* subtle shadow system */
--shadow-sm: 0 1px 2px rgba(20,19,24,0.04), 0 4px 12px rgba(20,19,24,0.04);
--shadow-md: 0 4px 14px rgba(20,19,24,0.05), 0 20px 48px rgba(20,19,24,0.07);
--shadow-lg: 0 10px 28px rgba(20,19,24,0.06), 0 40px 80px rgba(20,19,24,0.10);
--shadow-gold: 0 12px 36px rgba(201,168,106,0.18);
/* editorial curves */
--ease-luxe: cubic-bezier(0.19, 1, 0.22, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0, 1);
}
/* ========================================================
2. GLOBAL TYPOGRAPHY ELEVATION
======================================================== */
body {
font-feature-settings: "ss01", "liga", "kern";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Refined overlines/eyebrows — true small caps effect */
.section-overline,
.pdp-overline,
.stories-label,
.mega-heading,
.b2b-overline,
.card-rating small,
.mega-promo-label {
font-family: 'Jost', sans-serif !important;
font-size: 0.68rem !important;
font-weight: 500 !important;
letter-spacing: 0.28em !important;
text-transform: uppercase !important;
color: var(--gold-text) !important;
font-variant-caps: all-small-caps;
}
/* Display headings — more drama, tighter leading */
h1, h2, h3,
.section-title,
.stories-title,
.pdp-title,
.b2b-title,
.page-hero-content h1,
.page-hero-content h2 {
font-family: 'Cormorant Garamond', serif !important;
font-weight: 400 !important;
letter-spacing: -0.015em !important;
line-height: 1.08 !important;
font-feature-settings: "liga", "dlig", "swsh";
}
.section-title {
font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
line-height: 1.1 !important;
margin-bottom: 1rem !important;
}
/* Italic becomes the editorial signature */
em, i, .stories-title em, h1 em, h2 em, h3 em {
font-style: italic;
color: inherit;
letter-spacing: -0.01em;
}
/* Body text refinement */
p, .section-subtitle, .stories-content p {
font-feature-settings: "kern", "liga";
letter-spacing: 0.005em;
}
/* Section subtitle more refined */
.section-subtitle {
font-size: clamp(0.95rem, 1.6vw, 1.05rem) !important;
line-height: 1.7 !important;
color: var(--warm-grey) !important;
max-width: 54ch;
margin-left: auto;
margin-right: auto;
}
/* ========================================================
3. PHOTO PLACEHOLDERS — ELEGANT BRANDED VERSION
Replace ugly grey boxes with AROMAZUR monogram + thin border
======================================================== */
.photo-placeholder {
background:
radial-gradient(ellipse at center, rgba(201,168,106,0.08) 0%, transparent 60%),
linear-gradient(135deg, var(--offwhite) 0%, var(--cream) 100%) !important;
border: 1px solid var(--gold-border) !important;
position: relative !important;
overflow: hidden !important;
}
.photo-placeholder::before {
content: 'A';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.5rem, 8vw, 5rem);
font-style: italic;
font-weight: 300;
color: var(--gold);
opacity: 0.25;
letter-spacing: -0.04em;
pointer-events: none;
z-index: 1;
}
.photo-placeholder::after {
content: '';
position: absolute;
inset: 12px;
border: 0.5px solid var(--gold-border);
pointer-events: none;
z-index: 1;
}
/* Hide the raw label text by default; show only on hover in dev mode */
.photo-label {
opacity: 0 !important;
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 1rem !important;
font-size: 0.58rem !important;
letter-spacing: 0.18em !important;
color: var(--warm-grey) !important;
background: linear-gradient(to top, rgba(246,243,236,0.9), transparent) !important;
transition: opacity 0.4s var(--ease-luxe) !important;
z-index: 2;
line-height: 1.4 !important;
}
.photo-placeholder:hover .photo-label {
opacity: 1 !important;
}
/* Dark variant for hero stories — monogram in gold on dark */
.stories-photo-pl.photo-placeholder {
background:
radial-gradient(ellipse at 30% 40%, rgba(201,168,106,0.12) 0%, transparent 50%),
linear-gradient(135deg, #1A1820 0%, #0E0D12 100%) !important;
border-color: rgba(201,168,106,0.12) !important;
}
.stories-photo-pl.photo-placeholder::before {
color: var(--gold);
opacity: 0.18;
}
.stories-photo-pl.photo-placeholder::after {
border-color: rgba(201,168,106,0.1);
}
/* ========================================================
4. HERO — cinematic refinement
======================================================== */
.hero-stories {
min-height: 85vh !important;
background: var(--dark-azur) !important;
}
.hero-stories .stories-bg {
background:
radial-gradient(ellipse at 20% 30%, rgba(201,168,106,0.08) 0%, transparent 45%),
radial-gradient(ellipse at 80% 70%, rgba(201,168,106,0.05) 0%, transparent 50%),
linear-gradient(180deg, #1A1A1A 0%, #0A0910 100%) !important;
}
/* Hero content takes priority over placeholder */
.hero-stories .stories-content {
position: relative !important;
z-index: 5 !important;
text-align: center !important;
max-width: 780px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
}
/* Bury the placeholder text — it was overlapping the H1 */
.hero-stories .stories-photo-pl {
opacity: 0.4 !important;
z-index: 1 !important;
}
.hero-stories .stories-photo-pl .photo-label {
display: none !important;
}
.stories-label {
margin-bottom: 1.5rem !important;
color: var(--gold-pale) !important;
opacity: 0.85;
}
.stories-title {
font-size: clamp(2.4rem, 6vw, 4.2rem) !important;
color: #FFFFFF !important;
line-height: 1.05 !important;
margin-bottom: 1.5rem !important;
font-weight: 300 !important;
}
.stories-title em {
color: var(--gold) !important;
font-style: italic;
display: block;
margin-top: 0.3em;
font-size: 0.82em;
font-weight: 300;
}
.stories-price {
font-family: 'Jost', sans-serif !important;
font-size: 0.78rem !important;
font-weight: 400 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.7) !important;
margin-bottom: 2rem !important;
}
.stories-price strong {
font-weight: 500 !important;
color: var(--gold) !important;
font-size: 1.1em !important;
letter-spacing: 0.04em !important;
}
/* Stories nav controls: move bottom-right, more elegant */
.stories-nav {
position: absolute !important;
bottom: 2rem !important;
right: 2rem !important;
top: auto !important;
display: flex !important;
gap: 0.5rem !important;
z-index: 10 !important;
}
.stories-arrow, .stories-pause {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
color: rgba(255,255,255,0.8) !important;
font-size: 0.9rem !important;
cursor: pointer !important;
transition: all 0.3s var(--ease-luxe) !important;
}
.stories-arrow:hover, .stories-pause:hover {
background: rgba(201,168,106,0.15) !important;
border-color: var(--gold-light) !important;
color: var(--gold) !important;
}
.stories-progress {
top: 1.2rem !important;
gap: 0.4rem !important;
padding: 0 2rem !important;
}
.stories-bar {
height: 1.5px !important;
background: rgba(255,255,255,0.15) !important;
}
.stories-bar-fill {
background: var(--gold) !important;
}
/* ========================================================
5. CTA / BUTTONS — refined interactions
======================================================== */
.stories-cta {
display: inline-block !important;
padding: 15px 36px !important;
background: transparent !important;
color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,0.35) !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.72rem !important;
font-weight: 500 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
text-decoration: none !important;
position: relative;
overflow: hidden;
transition: all 0.4s var(--ease-luxe) !important;
}
.stories-cta::before {
content: '';
position: absolute;
inset: 0;
background: var(--gold);
transform: translateY(101%);
transition: transform 0.5s var(--ease-luxe);
z-index: -1;
}
.stories-cta:hover {
color: var(--dark-azur) !important;
border-color: var(--gold) !important;
}
.stories-cta:hover::before {
transform: translateY(0);
}
/* Primary CTAs on white bg: refined black button */
.hero-product-btn, .form-submit, .devis-submit,
button[class*="btn-primary"] {
letter-spacing: 0.16em !important;
transition: all 0.4s var(--ease-luxe) !important;
position: relative;
overflow: hidden;
}
.hero-product-btn:hover, .form-submit:hover, .devis-submit:hover {
background: var(--dark-azur-deep) !important;
transform: translateY(-1px);
box-shadow: var(--shadow-md) !important;
}
/* ========================================================
6. CRITICAL MOBILE NAV FIX
The existing CSS rule for hiding .header-nav on mobile is broken.
Here we fix it properly.
======================================================== */
@media (max-width: 900px) {
.header .header-nav,
.header .mega-nav {
display: none !important;
}
.header .mobile-toggle {
display: flex !important;
}
.header .lang-toggle {
display: none !important;
}
}
@media (max-width: 600px) {
.header-actions {
gap: 0.2rem !important;
}
.header-icon-btn {
width: 40px !important;
height: 40px !important;
}
}
/* Mobile nav drawer refinement */
.mobile-nav {
background: linear-gradient(180deg, #1A1A1A 0%, #0A0910 100%) !important;
color: #F5F3F0 !important;
padding: 5rem 2rem 2rem !important;
}
.mobile-nav a {
color: #F5F3F0 !important;
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.8rem !important;
font-weight: 300 !important;
letter-spacing: -0.01em !important;
padding: 0.5rem 0 !important;
border-bottom: 0.5px solid rgba(201,168,106,0.12) !important;
width: min(320px, 100%) !important;
text-align: center !important;
transition: color 0.3s var(--ease-luxe) !important;
}
.mobile-nav a:hover {
color: var(--gold) !important;
}
.mobile-nav-close {
color: var(--gold) !important;
font-size: 1.2rem !important;
top: 1.5rem !important;
right: 1.5rem !important;
opacity: 0.8;
}
/* ========================================================
7. HEADER refinement
======================================================== */
.header {
backdrop-filter: saturate(180%) blur(12px) !important;
-webkit-backdrop-filter: saturate(180%) blur(12px) !important;
background: rgba(246, 243, 236, 0.88) !important;
border-bottom: 0.5px solid var(--light-border) !important;
transition: all 0.4s var(--ease-luxe) !important;
}
.header.scrolled {
background: rgba(246, 243, 236, 0.96) !important;
box-shadow: 0 1px 24px rgba(20,19,24,0.04) !important;
}
.header-nav a {
font-size: 0.72rem !important;
font-weight: 500 !important;
letter-spacing: 0.2em !important;
}
.header-nav a::after {
background: var(--gold) !important;
height: 0.5px !important;
}
/* Shipping bar refinement */
.shipping-bar {
font-size: 0.68rem !important;
letter-spacing: 0.15em !important;
padding: 9px 16px !important;
font-weight: 400 !important;
}
.shipping-bar-item {
font-weight: 400 !important;
}
/* Announcement bar */
.announcement {
background: var(--dark-azur) !important;
color: rgba(255,255,255,0.75) !important;
font-size: 0.7rem !important;
letter-spacing: 0.18em !important;
padding: 8px 0 !important;
}
/* ========================================================
8. SECTION RHYTHM — more luxurious breathing room
======================================================== */
.section {
padding: 7rem 1.5rem !important;
}
@media (min-width: 769px) {
.section {
padding: 9rem 2rem !important;
}
}
.section-header {
margin-bottom: 4rem !important;
text-align: center;
}
/* Thin gold hairline divider — optional decorative element */
.az-divider,
.section-header::after {
content: '';
display: block;
width: 32px;
height: 0.5px;
background: var(--gold);
margin: 1.5rem auto 0;
opacity: 0.7;
}
/* ========================================================
9. PRODUCT CARDS — more editorial
======================================================== */
.product-card, .oil-card {
background: #FFFFFF !important;
border: 0.5px solid var(--light-border) !important;
border-radius: 2px !important;
transition: all 0.5s var(--ease-luxe) !important;
}
.product-card::after {
background: var(--gold) !important;
height: 1px !important;
opacity: 0.8;
}
.product-card:hover, .oil-card:hover {
border-color: var(--gold-border) !important;
box-shadow: var(--shadow-md) !important;
transform: translateY(-2px);
}
/* Product card image area taller, more editorial */
.product-card .photo-placeholder,
.oil-card .photo-placeholder {
aspect-ratio: 4 / 5 !important;
}
/* Refined rating pill */
.card-rating {
font-family: 'Jost', sans-serif !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
}
.card-rating small {
font-size: 0.68rem !important;
letter-spacing: 0.15em !important;
color: var(--warm-grey) !important;
}
/* Price display */
.card-price-always, .product-price {
font-family: 'Jost', sans-serif !important;
font-weight: 400 !important;
letter-spacing: 0.04em !important;
}
.card-price-always strong,
.product-price {
font-family: 'Cormorant Garamond', serif !important;
font-weight: 500 !important;
font-size: 1.15rem !important;
color: var(--dark-azur) !important;
letter-spacing: -0.01em !important;
}
/* Discount badges (-33%, -40%) refined */
[class*="percent-badge"],
.stories-price-badge {
background: var(--gold) !important;
color: #FFFFFF !important;
font-size: 0.6rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
padding: 3px 8px !important;
border-radius: 2px !important;
text-transform: uppercase !important;
}
/* Badges NOUVELLE, BEST-SELLERS, PREMIUM — editorial */
[class*="best-sellers-badge"],
[class*="premium-badge"],
[class*="new-badge"] {
background: rgba(20,19,24,0.92) !important;
color: #FFFFFF !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.58rem !important;
font-weight: 500 !important;
letter-spacing: 0.22em !important;
padding: 5px 10px !important;
border-radius: 0 !important;
text-transform: uppercase !important;
}
/* ========================================================
10. ABONNEMENT PLANS — elevated cards
======================================================== */
[data-az-replace-when-verified="stats"] > div > div:first-child {
color: var(--gold) !important;
font-style: italic !important;
}
/* Plan card popular highlight */
.sub-plan-cta-primary {
background: var(--dark-azur) !important;
color: #FFFFFF !important;
border: 1px solid var(--dark-azur) !important;
letter-spacing: 0.18em !important;
font-weight: 500 !important;
}
.sub-plan-cta-primary:hover {
background: var(--gold) !important;
color: var(--dark-azur) !important;
border-color: var(--gold) !important;
}
.sub-plan-cta-outline {
background: transparent !important;
color: var(--dark-azur) !important;
border: 1px solid var(--dark-azur) !important;
letter-spacing: 0.18em !important;
font-weight: 500 !important;
}
.sub-plan-cta-outline:hover {
background: var(--dark-azur) !important;
color: #FFFFFF !important;
}
/* ========================================================
11. SUBTLE GRAIN TEXTURE on dark sections — luxury depth
======================================================== */
.sub-hero-new,
.hero-stories,
.announcement,
.newsletter,
section[style*="background:var(--dark-azur)"] {
position: relative;
}
.sub-hero-new::before,
.hero-stories::before,
.newsletter::before,
section[style*="background:var(--dark-azur)"]::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 180px 180px;
pointer-events: none;
opacity: 0.6;
mix-blend-mode: overlay;
z-index: 1;
}
.sub-hero-new > *,
.hero-stories > *,
.newsletter > *,
section[style*="background:var(--dark-azur)"] > * {
position: relative;
z-index: 2;
}
/* ========================================================
12. NEWSLETTER — editorial moment
======================================================== */
.newsletter {
background: linear-gradient(135deg, var(--dark-azur) 0%, #1A1820 100%) !important;
padding: 6rem 2rem !important;
}
.newsletter h2 {
color: #FFFFFF !important;
font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
margin-bottom: 1rem !important;
}
.newsletter p {
color: rgba(255,255,255,0.7) !important;
max-width: 46ch;
margin: 0 auto 2rem !important;
}
/* ========================================================
13. B2B section refinement
======================================================== */
.b2b-section {
overflow: hidden;
}
.b2b-card {
background: rgba(246,243,236,0.96) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 0.5px solid var(--gold-border) !important;
}
.b2b-title {
font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
line-height: 1.15 !important;
margin-bottom: 1.2rem !important;
}
.b2b-cta {
background: var(--dark-azur) !important;
color: #FFFFFF !important;
padding: 14px 32px !important;
border: none !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.72rem !important;
font-weight: 500 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
cursor: pointer;
transition: all 0.4s var(--ease-luxe) !important;
margin-top: 1.5rem;
}
.b2b-cta:hover {
background: var(--gold) !important;
color: var(--dark-azur) !important;
}
/* ========================================================
14. FOOTER refinement
======================================================== */
.footer {
background: var(--dark-azur) !important;
}
.footer h4 {
font-family: 'Jost', sans-serif !important;
font-size: 0.68rem !important;
font-weight: 600 !important;
letter-spacing: 0.24em !important;
text-transform: uppercase !important;
color: var(--gold) !important;
margin-bottom: 1.2rem !important;
}
.footer a {
font-size: 0.82rem !important;
letter-spacing: 0.02em !important;
transition: color 0.3s var(--ease-luxe) !important;
}
.footer a:hover {
color: var(--gold) !important;
}
.footer-social a {
transition: all 0.3s var(--ease-luxe) !important;
}
.footer-social a:hover {
color: var(--gold) !important;
transform: translateY(-2px);
}
/* ========================================================
15. FORM inputs — refined
======================================================== */
.form-input, .form-select, .form-textarea,
.devis-field input, .devis-field select, .devis-field textarea,
.footer-nl-form input, .newsletter-form input {
font-family: 'Jost', sans-serif !important;
font-size: 0.88rem !important;
letter-spacing: 0.01em !important;
transition: all 0.3s var(--ease-luxe) !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
.devis-field input:focus, .devis-field select:focus, .devis-field textarea:focus {
border-color: var(--gold) !important;
outline: none !important;
box-shadow: 0 0 0 3px var(--gold-glow) !important;
}
/* ========================================================
16. DEMO BADGE — more discreet
======================================================== */
#azDemoBadge {
background: rgba(20,19,24,0.9) !important;
color: var(--gold) !important;
border: 1px solid var(--gold-border) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
font-size: 10px !important;
letter-spacing: 0.14em !important;
padding: 8px 14px !important;
border-radius: 2px !important;
}
/* ========================================================
17. COOKIE BAR refinement
======================================================== */
.cookie-bar {
background: rgba(20,19,24,0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-top: 0.5px solid var(--gold-border) !important;
}
.cookie-bar-text {
color: rgba(255,255,255,0.8) !important;
font-size: 0.82rem !important;
font-weight: 400 !important;
}
.cookie-bar-text a {
color: var(--gold) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.cookie-bar-accept {
background: var(--gold) !important;
color: var(--dark-azur) !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.7rem !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
padding: 10px 20px !important;
border: none !important;
border-radius: 2px !important;
transition: all 0.3s var(--ease-luxe) !important;
}
.cookie-bar-decline {
background: transparent !important;
color: rgba(255,255,255,0.8) !important;
border: 0.5px solid rgba(255,255,255,0.2) !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.7rem !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
padding: 10px 20px !important;
border-radius: 2px !important;
}
/* ========================================================
18. TRUST BAR (below hero) refinement
======================================================== */
[class*="trust-"] {
background: var(--offwhite) !important;
border-top: 0.5px solid var(--light-border) !important;
border-bottom: 0.5px solid var(--light-border) !important;
}
/* ========================================================
19. SMOOTH SCROLL REVEAL
======================================================== */
.reveal, .reveal-left, .reveal-right {
transition: opacity 0.9s var(--ease-luxe), transform 0.9s var(--ease-luxe) !important;
}
/* ========================================================
20. MOBILE REFINEMENTS
======================================================== */
@media (max-width: 768px) {
.hero-stories {
min-height: 80vh !important;
}
.stories-title {
font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
padding: 0 1rem;
}
.stories-content {
padding: 0 1.2rem !important;
}
.section {
padding: 5rem 1.2rem !important;
}
.section-header {
margin-bottom: 2.5rem !important;
}
.footer-inner {
padding: 3rem 1.2rem !important;
}
.stories-nav {
bottom: 1.2rem !important;
right: 1.2rem !important;
}
/* ensure hero text doesn't overlap placeholder on mobile */
.hero-stories .stories-photo-pl {
opacity: 0.25 !important;
}
}
/* ========================================================
21. PRINT-LIKE REFINEMENTS
Ensure selection color is on-brand
======================================================== */
::selection {
background: var(--gold);
color: var(--dark-azur);
}
::-moz-selection {
background: var(--gold);
color: var(--dark-azur);
}
/* ========================================================
22. FOCUS VISIBLE — a11y + luxe
======================================================== */
:focus-visible {
outline: 2px solid var(--gold) !important;
outline-offset: 2px !important;
border-radius: 2px;
}
/* ========================================================
FIX #1 — Stories nav controls: properly bottom-right
Higher specificity to beat the original rule
======================================================== */
body .hero-stories .stories-nav {
position: absolute !important;
bottom: 2.5rem !important;
right: 2.5rem !important;
top: auto !important;
left: auto !important;
transform: none !important;
display: flex !important;
flex-direction: row !important;
gap: 0.6rem !important;
z-index: 10 !important;
}
body .hero-stories .stories-arrow,
body .hero-stories .stories-pause {
position: relative !important;
top: auto !important;
right: auto !important;
left: auto !important;
transform: none !important;
margin: 0 !important;
}
@media (max-width: 768px) {
body .hero-stories .stories-nav {
bottom: 1.2rem !important;
right: 1.2rem !important;
gap: 0.4rem !important;
}
}
/* ========================================================
FIX #2 — Kill the monogram bleed on full-bleed dark heroes
(Story page, subscribe hero, etc.)
======================================================== */
section[style*="position:relative;min-height:70vh"] .photo-placeholder::before,
section[style*="position:relative;min-height:70vh"] .photo-placeholder::after,
section[style*="min-height:70vh"] .photo-placeholder::before,
section[style*="min-height:70vh"] .photo-placeholder::after {
display: none !important;
}
section[style*="position:relative;min-height:70vh"] .photo-placeholder {
background: transparent !important;
border: none !important;
}
/* Also hide monogram on small contained placeholder (story page intro square) */
section[style*="background:var(--dark-azur)"] .photo-placeholder::before,
section[style*="background:var(--dark-azur)"] .photo-placeholder::after {
display: none !important;
}
section[style*="background:var(--dark-azur)"] .photo-placeholder {
background: rgba(255,255,255,0.02) !important;
border: 0.5px solid rgba(201,168,106,0.08) !important;
}
/* ========================================================
FIX #3 — Product cards hover reveal
Subtle "Voir →" that appears on hover
======================================================== */
.product-card, .oil-card {
position: relative !important;
}
.product-card::before {
content: 'Voir →';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 22px;
background: rgba(20, 19, 24, 0.88);
color: #FFFFFF;
font-family: 'Jost', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
border-radius: 2px;
opacity: 0;
transition: opacity 0.4s var(--ease-luxe);
z-index: 5;
pointer-events: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
white-space: nowrap;
}
.product-card:hover::before {
opacity: 1;
}
/* Only reveal "Voir →" on the image portion — position it there */
.product-card .product-card-img,
.product-card .photo-placeholder {
position: relative;
}
/* Move the hover label to only over the image */
.product-card::before {
top: 35%; /* image is roughly top 70% of card */
}
/* ========================================================
FIX #4 — Number ornaments on "3 convictions" section
Story page has 3 cards — inject numbered ornament via nth-child
======================================================== */
section[style*="padding:5rem 2rem"][style*="background:var(--offwhite)"] > div > div:last-child > div {
position: relative;
}
section[style*="padding:5rem 2rem"][style*="background:var(--offwhite)"] > div > div:last-child > div:nth-child(1)::before,
section[style*="padding:5rem 2rem"][style*="background:var(--offwhite)"] > div > div:last-child > div:nth-child(2)::before,
section[style*="padding:5rem 2rem"][style*="background:var(--offwhite)"] > div > div:last-child > div:nth-child(3)::before {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: 3.5rem;
color: var(--gold);
opacity: 0.35;
letter-spacing: -0.02em;
line-height: 1;
display: block;
margin-bottom: 1rem;
}
section[style*="padding:5rem 2rem"][style*="background:var(--offwhite)"] > div > div:last-child > div:nth-child(1)::before {
content: '01';
}
section[style*="padding:5rem 2rem"][style*="background:var(--offwhite)"] > div > div:last-child > div:nth-child(2)::before {
content: '02';
}
section[style*="padding:5rem 2rem"][style*="background:var(--offwhite)"] > div > div:last-child > div:nth-child(3)::before {
content: '03';
}
/* ========================================================
FIX #5 — Drop caps option (opt-in via .az-dropcap class)
Apply by adding the class to any paragraph you want elevated
======================================================== */
.az-dropcap::first-letter,
.stories-content p.az-dropcap::first-letter,
.scent-story-text p:first-of-type::first-letter {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: 3.8em;
line-height: 0.85;
float: left;
padding: 0.15em 0.15em 0 0;
color: var(--gold);
letter-spacing: -0.04em;
}
/* ========================================================
FIX #6 — Refined subscription plan cards
======================================================== */
#subPlansNew > div > div[style*="border:2px solid var(--gold)"] {
border: 1.5px solid var(--gold) !important;
box-shadow:
0 1px 0 var(--gold-border),
0 20px 60px rgba(201,168,106,0.12),
0 0 0 1px rgba(201,168,106,0.06) !important;
position: relative;
transform: translateY(-4px);
}
#subPlansNew > div > div[style*="border:2px solid var(--gold)"] > div:first-child {
background: var(--dark-azur) !important;
color: #FFFFFF !important;
font-family: 'Jost', sans-serif !important;
font-weight: 500 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
padding: 5px 18px !important;
border-radius: 0 !important;
font-size: 0.58rem !important;
top: -14px !important;
}
/* Plan titles */
#subPlansNew h3 {
font-size: 1.5rem !important;
letter-spacing: -0.01em !important;
margin-bottom: 0.5rem !important;
}
/* Plan price refined */
#subPlansNew .sub-plan-price {
margin: 1rem 0 !important;
}
#subPlansNew .sub-plan-price span[style*="font-size:2.5rem"] {
font-size: 2.8rem !important;
font-weight: 400 !important;
letter-spacing: -0.03em !important;
}
/* Plan feature lists */
#subPlansNew ul {
border-top: 0.5px solid var(--light-border);
border-bottom: 0.5px solid var(--light-border);
padding: 1.2rem 0 !important;
margin: 1.5rem 0 !important;
}
#subPlansNew ul li {
font-size: 0.82rem !important;
line-height: 1.8 !important;
padding: 0.3rem 0;
}
/* ========================================================
FIX #7 — Bottom ornament on section headers
Cleaner than the existing little line
======================================================== */
.section-header {
position: relative;
}
/* Override the existing line with a more elegant version */
.section-header::after {
content: '' !important;
display: block !important;
width: 1px !important;
height: 40px !important;
background: linear-gradient(180deg, var(--gold) 0%, transparent 100%) !important;
margin: 1.8rem auto 0 !important;
opacity: 0.8 !important;
}
/* ========================================================
FIX #8 — Hero label + price refined
======================================================== */
.hero-stories .stories-label {
display: inline-block !important;
padding-bottom: 0.6rem !important;
border-bottom: 0.5px solid var(--gold-light);
letter-spacing: 0.34em !important;
font-size: 0.64rem !important;
}
/* ========================================================
FIX #9 — Trust bar below hero (icons row)
======================================================== */
section[style*="padding:4rem 1.5rem;background:var(--offwhite)"] {
border-top: 0.5px solid var(--light-border) !important;
border-bottom: 0.5px solid var(--light-border) !important;
padding: 2.2rem 1.5rem !important;
background: var(--offwhite) !important;
}
/* ========================================================
FIX #10 — Footer ornament
======================================================== */
.footer-inner {
padding: 4rem 2rem 2rem !important;
}
.footer-brand-desc {
font-size: 0.82rem !important;
line-height: 1.75 !important;
color: rgba(255,255,255,0.65) !important;
margin-top: 0.8rem;
}
.footer-nl-content h4 {
color: #FFFFFF !important;
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.2rem !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* ========================================================
FIX #11 — Remove background on homepage promotional
section so it blends (gold button section)
======================================================== */
section[style*="padding:4rem 1.5rem;background:var(--offwhite);text-align:center;"] {
background: var(--white) !important;
padding: 5rem 2rem !important;
}
/* ========================================================
FIX #12 — Quiz page polish
======================================================== */
.quiz-intro h1, .quiz-intro h1 em {
font-weight: 300 !important;
letter-spacing: -0.02em !important;
line-height: 1.1 !important;
}
/* Quiz stats: 5 / 30s / 10 - make them Cormorant italic like the editorial */
.quiz-intro div[style*="font-family:'Cormorant Garamond'"] {
color: var(--gold) !important;
font-style: italic !important;
font-weight: 400 !important;
}
/* Quiz start button refined */
.quiz-start-btn {
background: var(--gold) !important;
color: var(--dark-azur) !important;
padding: 16px 44px !important;
border: none !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.74rem !important;
font-weight: 500 !important;
letter-spacing: 0.24em !important;
text-transform: uppercase !important;
border-radius: 2px !important;
cursor: pointer;
transition: all 0.4s var(--ease-luxe) !important;
}
.quiz-start-btn:hover {
background: var(--dark-azur) !important;
color: var(--gold) !important;
}
/* Quiz option cards */
.quiz-option {
border-radius: 2px !important;
transition: all 0.4s var(--ease-luxe) !important;
}
.quiz-option:hover {
border-color: var(--gold) !important;
box-shadow: var(--shadow-md) !important;
transform: translateY(-2px);
}
/* ========================================================
FIX #13 — Scrollbar styling (webkit only)
======================================================== */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--offwhite);
}
::-webkit-scrollbar-thumb {
background: var(--gold-border);
border: 3px solid var(--offwhite);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gold);
}
/* ========================================================
FIX #14 — PDP refinements
======================================================== */
.pdp-title {
font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
line-height: 1.1 !important;
margin-bottom: 0.6rem !important;
}
.pdp-price {
font-family: 'Cormorant Garamond', serif !important;
font-weight: 500 !important;
font-size: 1.8rem !important;
color: var(--dark-azur) !important;
letter-spacing: -0.02em !important;
}
.pdp-tagline {
font-style: italic !important;
color: var(--warm-grey) !important;
font-size: 0.98rem !important;
line-height: 1.6 !important;
}
/* ========================================================
FIX #15 — Ensure no breakage on older iPhones
Some backdrop-filter fallbacks
======================================================== */
@supports not (backdrop-filter: blur(10px)) {
.header {
background: rgba(246, 243, 236, 0.98) !important;
}
.mobile-nav {
background: #1A1A1A !important;
}
}
/* ========================================================
BONUS — Subtle page load fade-in
======================================================== */
@keyframes azFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
body {
animation: azFadeIn 0.6s var(--ease-luxe);
}
/* ============================================================
1. PAGE LOADER — AROMAZUR wordmark fade
============================================================ */
.az-preloader {
position: fixed;
inset: 0;
z-index: 99998;
background: #1A1A1A;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: opacity 0.8s var(--ease-luxe), visibility 0.8s var(--ease-luxe);
}
.az-preloader.az-fade-out {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.az-preloader-wordmark {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 300;
font-style: italic;
letter-spacing: 0.18em;
color: var(--gold);
text-transform: uppercase;
opacity: 0;
animation: azWordmarkFade 1.6s var(--ease-luxe) forwards;
}
.az-preloader-tagline {
margin-top: 1rem;
font-family: 'Jost', sans-serif;
font-size: 0.62rem;
font-weight: 400;
letter-spacing: 0.4em;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
opacity: 0;
animation: azWordmarkFade 1.6s 0.3s var(--ease-luxe) forwards;
}
.az-preloader-line {
position: absolute;
bottom: 14%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 1px;
background: var(--gold);
animation: azLineGrow 1.6s 0.5s var(--ease-luxe) forwards;
}
@keyframes azWordmarkFade {
from { opacity: 0; letter-spacing: 0.3em; }
to { opacity: 1; letter-spacing: 0.18em; }
}
@keyframes azLineGrow {
from { width: 0; opacity: 0; }
to { width: 60px; opacity: 0.6; }
}
/* ============================================================
2. SCROLL REVEAL v2 — via IntersectionObserver
Replaces the existing .reveal smooth transitions with orchestrated
staggered entry. Uses new [data-az-reveal] + .az-in-view classes.
============================================================ */
[data-az-reveal] {
opacity: 0;
transform: translateY(32px);
transition:
opacity 0.9s var(--ease-luxe),
transform 1s var(--ease-luxe);
will-change: opacity, transform;
}
[data-az-reveal="left"] { transform: translateX(-32px); }
[data-az-reveal="right"] { transform: translateX(32px); }
[data-az-reveal="scale"] { transform: scale(0.96); }
[data-az-reveal].az-in-view {
opacity: 1;
transform: none;
}
/* Stagger on children */
[data-az-stagger] > * {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s var(--ease-luxe), transform 0.8s var(--ease-luxe);
}
[data-az-stagger].az-in-view > *:nth-child(1) { transition-delay: 0.00s; opacity: 1; transform: none; }
[data-az-stagger].az-in-view > *:nth-child(2) { transition-delay: 0.10s; opacity: 1; transform: none; }
[data-az-stagger].az-in-view > *:nth-child(3) { transition-delay: 0.20s; opacity: 1; transform: none; }
[data-az-stagger].az-in-view > *:nth-child(4) { transition-delay: 0.30s; opacity: 1; transform: none; }
[data-az-stagger].az-in-view > *:nth-child(5) { transition-delay: 0.40s; opacity: 1; transform: none; }
[data-az-stagger].az-in-view > *:nth-child(6) { transition-delay: 0.50s; opacity: 1; transform: none; }
/* ============================================================
3. KEN BURNS — subtle drift on hero background
============================================================ */
@keyframes azKenBurns {
0% { transform: scale(1) translate(0, 0); }
100% { transform: scale(1.08) translate(-1.5%, -1%); }
}
.hero-stories .stories-bg {
animation: azKenBurns 28s ease-in-out infinite alternate;
}
/* ============================================================
4. PRODUCT CARD — image zoom inside overflow hidden
============================================================ */
.product-card, .oil-card {
overflow: hidden;
}
.product-card .product-card-img,
.product-card .photo-placeholder,
.oil-card .product-card-img,
.oil-card .photo-placeholder {
overflow: hidden;
position: relative;
}
.product-card .product-card-img > *,
.product-card .photo-placeholder,
.oil-card .product-card-img > *,
.oil-card .photo-placeholder {
transition: transform 1.2s var(--ease-luxe) !important;
}
.product-card:hover .product-card-img > *,
.product-card:hover .photo-placeholder,
.oil-card:hover .product-card-img > *,
.oil-card:hover .photo-placeholder {
transform: scale(1.06) !important;
}
/* ============================================================
5. FLYING BOTTLE — add to cart
============================================================ */
.az-flying-bottle {
position: fixed;
z-index: 99999;
width: 36px;
height: 46px;
pointer-events: none;
will-change: transform, opacity;
transition: transform 0.9s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.9s ease;
}
.az-flying-bottle svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 4px 12px rgba(201,168,106,0.4));
}
@keyframes azCartPulse {
0% { transform: scale(1); }
50% { transform: scale(1.22); color: var(--gold); }
100% { transform: scale(1); }
}
.az-cart-pulse {
animation: azCartPulse 0.55s var(--ease-luxe);
}
/* ============================================================
6. STORIES CAROUSEL — smoother transitions
============================================================ */
.stories-slide {
transition: opacity 1.1s var(--ease-luxe) !important;
}
.stories-slide:not(.active) {
opacity: 0 !important;
}
.stories-slide.active {
opacity: 1 !important;
}
.stories-slide .stories-content > * {
opacity: 0;
transform: translateY(16px);
}
.stories-slide.active .stories-content > * {
animation: azSlideInContent 0.9s var(--ease-luxe) forwards;
}
.stories-slide.active .stories-content > *:nth-child(1) { animation-delay: 0.20s; }
.stories-slide.active .stories-content > *:nth-child(2) { animation-delay: 0.30s; }
.stories-slide.active .stories-content > *:nth-child(3) { animation-delay: 0.42s; }
.stories-slide.active .stories-content > *:nth-child(4) { animation-delay: 0.55s; }
@keyframes azSlideInContent {
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
7. MAGAZINE ARTICLE LAYOUT — .az-article-magazine
Apply this class to any or content container for blog posts
============================================================ */
.az-article-magazine {
max-width: 820px;
margin: 0 auto;
padding: 5rem 1.5rem;
font-family: 'Jost', sans-serif;
font-size: 1.02rem;
line-height: 1.85;
color: var(--dark-azur);
letter-spacing: 0.005em;
}
.az-article-magazine .az-article-kicker {
font-family: 'Jost', sans-serif;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-text);
display: block;
text-align: center;
margin-bottom: 1.5rem;
font-variant-caps: all-small-caps;
}
.az-article-magazine h1, .az-article-magazine .az-article-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.2rem, 5vw, 3.4rem);
font-weight: 300;
line-height: 1.08;
text-align: center;
margin: 0 auto 1.2rem;
max-width: 22ch;
color: var(--dark-azur);
letter-spacing: -0.02em;
}
.az-article-magazine h1 em {
font-style: italic;
color: var(--gold);
}
.az-article-magazine .az-article-meta {
text-align: center;
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--warm-grey);
margin-bottom: 3rem;
font-family: 'Jost', sans-serif;
}
.az-article-magazine .az-article-meta::before,
.az-article-magazine .az-article-meta::after {
content: '——';
margin: 0 0.8rem;
color: var(--gold);
letter-spacing: -0.1em;
}
.az-article-magazine .az-article-lead {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
line-height: 1.55;
text-align: center;
color: var(--warm-grey);
max-width: 32em;
margin: 0 auto 4rem;
font-weight: 400;
}
.az-article-magazine h2 {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 400;
line-height: 1.2;
margin: 3.5rem 0 1.2rem;
letter-spacing: -0.015em;
color: var(--dark-azur);
}
.az-article-magazine h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: 500;
margin: 2.5rem 0 0.8rem;
color: var(--dark-azur);
}
.az-article-magazine p {
margin-bottom: 1.4rem;
color: rgba(20,19,24,0.88);
}
/* Drop cap on first paragraph */
.az-article-magazine > p:first-of-type::first-letter,
.az-article-magazine .az-article-intro::first-letter {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: 4.2em;
line-height: 0.82;
float: left;
padding: 0.18em 0.14em 0 0;
color: var(--gold);
letter-spacing: -0.04em;
}
/* 2-column intro (optional via .az-article-intro-columns) */
.az-article-magazine .az-article-intro-columns {
column-count: 2;
column-gap: 2rem;
column-rule: 0.5px solid var(--light-border);
margin: 2rem 0 3rem;
}
@media (max-width: 700px) {
.az-article-magazine .az-article-intro-columns { column-count: 1; }
}
/* Pull quote */
.az-article-magazine .az-pull-quote,
.az-pull-quote {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(1.4rem, 2.8vw, 2.2rem);
line-height: 1.3;
color: var(--dark-azur);
text-align: center;
margin: 4rem auto;
max-width: 28ch;
padding: 2rem 0;
position: relative;
font-weight: 400;
}
.az-pull-quote::before,
.az-pull-quote::after {
content: '';
display: block;
width: 40px;
height: 0.5px;
background: var(--gold);
margin: 0 auto;
opacity: 0.6;
}
.az-pull-quote::before { margin-bottom: 1.5rem; }
.az-pull-quote::after { margin-top: 1.5rem; }
/* Blockquote editorial */
.az-article-magazine blockquote {
border-left: 2px solid var(--gold);
padding-left: 1.8rem;
margin: 2.5rem 0;
font-style: italic;
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
line-height: 1.55;
color: var(--warm-grey);
}
.az-article-magazine blockquote cite {
display: block;
margin-top: 0.8rem;
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
font-style: normal;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-text);
}
/* Image full-bleed */
.az-article-magazine .az-article-figure {
margin: 3rem -4rem;
position: relative;
}
@media (max-width: 900px) {
.az-article-magazine .az-article-figure { margin: 2rem 0; }
}
.az-article-magazine .az-article-figure img,
.az-article-magazine .az-article-figure .photo-placeholder {
width: 100%;
aspect-ratio: 3/2;
object-fit: cover;
display: block;
}
.az-article-magazine .az-article-figure figcaption {
font-family: 'Jost', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--warm-grey);
text-align: center;
margin-top: 1rem;
font-style: italic;
text-transform: none;
letter-spacing: 0.02em;
}
/* ============================================================
8. TYPOGRAPHIC ORNAMENTS — decorative elements
============================================================ */
.az-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
color: var(--gold);
opacity: 0.7;
margin: 2rem auto;
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
font-style: italic;
}
.az-ornament::before,
.az-ornament::after {
content: '';
width: 40px;
height: 0.5px;
background: currentColor;
opacity: 0.6;
}
.az-ornament-diamond::before { content: none; }
.az-ornament-diamond::after { content: none; }
.az-ornament-diamond { font-size: 0.7rem; letter-spacing: 0.5em; }
.az-ornament-diamond { content: '◆ ◆ ◆'; }
/* ============================================================
9. ASYMMETRIC GRID — grid-breaking layout
============================================================ */
.az-asymmetric-row {
display: grid;
grid-template-columns: 3fr 5fr;
gap: 4rem;
align-items: center;
max-width: 1200px;
margin: 6rem auto;
padding: 0 2rem;
}
.az-asymmetric-row.az-reverse {
grid-template-columns: 5fr 3fr;
}
@media (max-width: 900px) {
.az-asymmetric-row,
.az-asymmetric-row.az-reverse {
grid-template-columns: 1fr;
gap: 2rem;
margin: 3rem auto;
}
}
/* ============================================================
10. NOTES PYRAMID (refined)
============================================================ */
.az-notes-pyramid {
display: flex;
flex-direction: column;
gap: 1.2rem;
max-width: 500px;
margin: 2rem auto;
}
.az-notes-pyramid-row {
display: grid;
grid-template-columns: 100px 1fr;
gap: 2rem;
align-items: baseline;
padding: 1.2rem 0;
border-bottom: 0.5px solid var(--light-border);
}
.az-notes-pyramid-row:last-child { border-bottom: none; }
.az-notes-pyramid-label {
font-family: 'Jost', sans-serif;
font-size: 0.68rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold-text);
font-weight: 500;
}
.az-notes-pyramid-content {
font-family: 'Cormorant Garamond', serif;
font-size: 1.15rem;
font-style: italic;
line-height: 1.4;
color: var(--dark-azur);
}
/* ============================================================
11. MAGAZINE PREVIEW SECTION (for home showcase)
============================================================ */
.az-magazine-preview {
background: var(--offwhite);
padding: 7rem 2rem;
border-top: 0.5px solid var(--light-border);
border-bottom: 0.5px solid var(--light-border);
}
.az-magazine-preview-inner {
max-width: 1180px;
margin: 0 auto;
}
.az-magazine-preview-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 3rem;
margin-top: 4rem;
}
@media (max-width: 900px) {
.az-magazine-preview-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
.az-magazine-card {
cursor: pointer;
transition: transform 0.5s var(--ease-luxe);
position: relative;
}
.az-magazine-card:hover { transform: translateY(-4px); }
.az-magazine-card:has(.az-magazine-card-link--soon):not(:has(a.az-magazine-card-link:not(.az-magazine-card-link--soon))) {
cursor: default;
}
.az-magazine-card:has(.az-magazine-card-link--soon):not(:has(a.az-magazine-card-link:not(.az-magazine-card-link--soon))):hover {
transform: none;
}
.az-magazine-card .photo-placeholder {
aspect-ratio: 4/3;
margin-bottom: 1.5rem;
overflow: hidden;
}
.az-magazine-card-kicker {
font-family: 'Jost', sans-serif;
font-size: 0.64rem;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold-text);
margin-bottom: 0.8rem;
}
.az-magazine-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-weight: 400;
line-height: 1.2;
margin-bottom: 0.8rem;
color: var(--dark-azur);
letter-spacing: -0.015em;
}
.az-magazine-card p {
font-size: 0.9rem;
line-height: 1.6;
color: var(--warm-grey);
margin-bottom: 1rem;
}
.az-magazine-card-link {
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dark-azur);
text-decoration: none;
padding-bottom: 2px;
border-bottom: 0.5px solid var(--gold);
transition: all 0.3s var(--ease-luxe);
}
.az-magazine-card-link:hover {
color: var(--gold);
border-color: var(--dark-azur);
}
/* ============================================================
12. RESPECT reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
.hero-stories .stories-bg { animation: none !important; }
[data-az-reveal], [data-az-stagger] > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.az-preloader { display: none !important; }
.az-flying-bottle { display: none !important; }
}
.az-magazine-card-link--soon {
color: var(--warm-grey) !important;
border-color: var(--light-border) !important;
cursor: not-allowed !important;
font-style: italic !important;
}
.az-magazine-card-link--soon:hover {
color: var(--warm-grey) !important;
border-color: var(--light-border) !important;
}
/* Also make clickable card (first one) feel extra inviting */
.az-magazine-card:has(a[href*="article-"]) {
cursor: pointer;
}
.az-magazine-card a.az-magazine-card-link[href*="article-"]::after {
content: '';
display: inline-block;
width: 8px;
transition: transform 0.3s var(--ease-luxe);
}
.az-magazine-card a.az-magazine-card-link[href*="article-"]:hover::after {
transform: translateX(4px);
}
/* ─── Hide broken subscribe upsell inside oil cards ────────────── */
/* ─── Subscribe upsell: compact, readable layout ─── */
.card-subscribe {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
padding: 0.7rem 0.8rem !important;
margin: 0.6rem 0 0 !important;
background: linear-gradient(135deg, rgba(201, 168, 106, 0.08), rgba(201, 168, 106, 0.03)) !important;
border: 0.5px solid rgba(201, 168, 106, 0.25) !important;
border-radius: 3px !important;
font-family: 'Jost', sans-serif !important;
}
.card-sub-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.5rem !important;
min-width: 0 !important;
}
.card-sub-label {
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
flex: 1 !important;
}
.card-sub-label > * {
font-family: 'Jost', sans-serif !important;
}
.card-sub-label small {
display: block !important;
font-size: 0.62rem !important;
line-height: 1.3 !important;
color: var(--gold-text, #A88A2E) !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
margin-top: 2px !important;
white-space: normal !important;
overflow: visible !important;
}
/* The main label "Abonnement" */
.card-sub-label {
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: var(--dark-azur, #1A1A1A) !important;
}
/* Toggle button — clean switch */
.card-sub-toggle {
flex-shrink: 0 !important;
width: 36px !important;
height: 20px !important;
border-radius: 20px !important;
border: 0.5px solid var(--light-border) !important;
background: #EFEADE !important;
position: relative !important;
cursor: pointer !important;
padding: 0 !important;
transition: background 0.25s ease !important;
}
.card-sub-toggle::before {
content: '' !important;
position: absolute !important;
top: 2px !important;
left: 2px !important;
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
background: #fff !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
transition: transform 0.25s ease !important;
}
.card-sub-toggle.active {
background: var(--gold, #D4AF37) !important;
border-color: var(--gold, #D4AF37) !important;
}
.card-sub-toggle.active::before {
transform: translateX(16px) !important;
}
/* On very narrow cards (< 200px), shorten text */
@media (max-width: 900px) {
.card-sub-label small {
font-size: 0.58rem !important;
}
}
/* ─── Oils grid: 3 cols max, cleaner alignment ────────────────── */
.oils-page-layout,
.oils-main,
.oils-page-wrapper {
max-width: 100% !important;
overflow-x: hidden !important;
}
.oils-grid,
#page-oils .products-grid,
.products-grid.oils-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 1.2rem !important;
max-width: 1400px !important;
margin: 0 auto !important;
}
@media (max-width: 1300px) {
.oils-grid,
#page-oils .products-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
}
@media (max-width: 980px) {
.oils-grid,
#page-oils .products-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 720px) {
.oils-grid,
#page-oils .products-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
.oils-grid,
#page-oils .products-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem !important;
}
}
/* Oil card: cleaner structure */
.product-card.oil-card {
display: flex !important;
flex-direction: column !important;
border-radius: 2px !important;
overflow: hidden !important;
}
.product-card.oil-card .product-image,
.product-card.oil-card .product-card-img {
aspect-ratio: 4 / 5 !important;
max-height: 380px !important;
}
.product-card.oil-card .product-info,
.product-card.oil-card > div:nth-child(2) {
padding: 1.2rem !important;
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
}
/* Size pills on oil cards: stack nicely, limit height */
.card-sizes {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0.3rem !important;
margin-top: 0.6rem !important;
}
.card-size-pill {
padding: 0.4rem 0.2rem !important;
text-align: center !important;
border: 0.5px solid var(--light-border) !important;
background: transparent !important;
cursor: pointer !important;
font-size: 0.7rem !important;
line-height: 1.3 !important;
border-radius: 2px !important;
transition: all 0.2s var(--ease-luxe) !important;
}
.card-size-pill.active {
background: var(--dark-azur) !important;
color: #fff !important;
border-color: var(--dark-azur) !important;
}
.card-size-pill span {
display: block !important;
font-size: 0.65rem !important;
opacity: 0.75 !important;
margin-top: 1px !important;
}
/* ─── Home coffrets: fix huge empty placeholders ───────────────── */
#page-home .product-card .photo-placeholder,
#page-home .oil-card .photo-placeholder {
aspect-ratio: 4 / 5 !important;
max-height: 440px !important;
}
/* Coffrets (bigger, 2-col) */
#page-home [class*="coffret"] .photo-placeholder,
#page-home .bundle-card .photo-placeholder {
aspect-ratio: 16 / 10 !important;
max-height: 380px !important;
}
/* ─── Diffusers page: tighter hero + better grid ────────────────── */
#page-diffusers .device-hero {
padding: 4rem 2rem !important;
min-height: auto !important;
}
#page-diffusers .device-hero-inner,
#page-diffusers .device-hero-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 3rem !important;
align-items: center !important;
max-width: 1180px !important;
margin: 0 auto !important;
}
@media (max-width: 900px) {
#page-diffusers .device-hero-inner {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
}
#page-diffusers .device-hero-img {
aspect-ratio: 4/3 !important;
max-height: 380px !important;
width: 100% !important;
overflow: hidden !important;
}
/* Diffuser grid: 3 cols clean */
#page-diffusers .device-grid,
#page-diffusers .products-grid,
#page-diffusers .devices-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 2rem !important;
max-width: 1180px !important;
margin: 2rem auto !important;
padding: 0 2rem !important;
}
@media (max-width: 900px) {
#page-diffusers .device-grid,
#page-diffusers .products-grid {
grid-template-columns: 1fr !important;
max-width: 500px !important;
}
}
/* Diffuser cards: cleaner spacing */
#page-diffusers .product-card,
#page-diffusers .device-card {
display: flex !important;
flex-direction: column !important;
background: #fff !important;
border: 0.5px solid var(--light-border) !important;
border-radius: 2px !important;
overflow: hidden !important;
transition: all 0.4s var(--ease-luxe) !important;
}
#page-diffusers .product-card:hover {
border-color: var(--gold-border) !important;
box-shadow: var(--shadow-md) !important;
transform: translateY(-2px);
}
#page-diffusers .product-card .product-image,
#page-diffusers .product-card .photo-placeholder,
#page-diffusers .device-card .device-img {
aspect-ratio: 1 / 1 !important;
max-height: 320px !important;
background: linear-gradient(135deg, #F5F3F0 0%, #EFEADE 100%) !important;
}
#page-diffusers .product-card .product-info,
#page-diffusers .device-card .device-info {
padding: 1.5rem !important;
}
/* ─── Fix the device-hero stats layout ─────────────────────────── */
#page-diffusers .device-hero-stats {
display: flex !important;
gap: 2rem !important;
flex-wrap: wrap !important;
margin-top: 1.5rem !important;
}
#page-diffusers .device-hero-stats > div,
#page-diffusers .device-stat {
display: flex !important;
flex-direction: column !important;
gap: 0.2rem !important;
}
/* ─── Home product cards: uniform, no overflow ────────────────── */
#page-home .products-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 1.5rem !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
}
@media (max-width: 1100px) {
#page-home .products-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 800px) {
#page-home .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
#page-home .products-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem !important;
padding: 0 1rem !important;
}
}
/* ─── Magazine preview cards on home: always visible ──────────── */
.az-magazine-preview [data-az-stagger] > *,
.az-magazine-preview .az-magazine-card {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
.az-magazine-card-link {
display: inline-block !important;
position: relative !important;
z-index: 5 !important;
}
/* ─── Percentage badges: more readable ────────────────────────── */
[class*="percent-badge"],
.stories-price-badge,
.card-percent-badge {
background: #C85A5A !important; /* red for clearer discount signal */
color: #fff !important;
font-size: 0.62rem !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
padding: 3px 7px !important;
border-radius: 2px !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
/* Old price strikethrough visibility */
.price-old,
[class*="old-price"],
s.price,
.card-price-always s {
color: var(--warm-grey) !important;
text-decoration: line-through !important;
font-size: 0.85em !important;
margin-right: 0.4em !important;
opacity: 0.7;
}
/* ─── Fix PDP layout on small screens ─────────────────────────── */
@media (max-width: 900px) {
.pdp-layout {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
}
/* ─── Home hero overlap fix ─────────────────────────────────── */
#page-home .hero-stories .stories-photo-pl {
position: absolute !important;
inset: 0 !important;
opacity: 0.25 !important;
z-index: 1 !important;
pointer-events: none !important;
}
/* ─── Footer: slight improvement in spacing ──────────────────── */
.footer-grid {
gap: 3rem !important;
}
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr 1fr !important;
gap: 2rem !important;
}
}
/* ─── Cards visual uniformity: ensure no horizontal scroll ─── */
body, html { overflow-x: hidden !important; }
.spa-page { overflow-x: hidden; }
/* ─── Coffret cards on home: better internal layout ───────── */
#page-home [class*="coffret"] .photo-placeholder::before,
#page-home .bundle-card .photo-placeholder::before {
font-size: clamp(2rem, 6vw, 4rem) !important;
}
/* ─── FAQ page: better spacing ───────────────────────────── */
#page-faq details {
padding: 1.2rem 0 !important;
border-bottom: 0.5px solid var(--light-border);
}
/* ─── Remove duplicate product info that might overflow ───── */
.card-rating small {
display: block !important;
font-size: 0.6rem !important;
color: var(--warm-grey) !important;
margin-top: 0.2rem !important;
}
/* ─── FORCE SHOW abonnement on home + oils cards ─── */
#page-home .product-card.oil-card .card-subscribe,
#page-oils .product-card.oil-card .card-subscribe,
.oil-card.static-open .card-subscribe,
.oil-card.expanded .card-subscribe {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
padding: 0.7rem 0.8rem !important;
margin: 0.6rem 0 0 !important;
background: linear-gradient(135deg, rgba(201, 168, 106, 0.08), rgba(201, 168, 106, 0.03)) !important;
border: 0.5px solid rgba(201, 168, 106, 0.25) !important;
border-radius: 3px !important;
max-height: none !important;
opacity: 1 !important;
overflow: visible !important;
visibility: visible !important;
}
#page-home .product-card.oil-card .card-subscribe .card-sub-row,
#page-oils .product-card.oil-card .card-subscribe .card-sub-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.5rem !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
/* Keep the "Ajouter au panier" button visible + style it properly.
The .card-atc button lives inside .card-subscribe but is the MAIN CTA. */
.card-subscribe > button.card-atc,
#page-home .product-card.oil-card .card-subscribe > button.card-atc,
#page-oils .product-card.oil-card .card-subscribe > button.card-atc {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
width: 100% !important;
padding: 0.7rem 1rem !important;
background: var(--dark-azur, #1A1A1A) !important;
color: #fff !important;
border: none !important;
border-radius: 2px !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.72rem !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
cursor: pointer !important;
margin-top: 0.5rem !important;
transition: all 0.3s var(--ease-luxe) !important;
}
.card-subscribe > button.card-atc:hover {
background: var(--gold, #D4AF37) !important;
color: var(--dark-azur, #1A1A1A) !important;
transform: translateY(-1px);
}
/* Fix the "1+X" looking thing on ratings */
.card-rating .card-rating-count::before {
content: '(' !important;
}
.card-rating .card-rating-count::after {
content: ')' !important;
}
/* ─── /oils page: rebuild the grid via descendant selector ───── */
#page-oils aside.oils-sidebar,
#page-oils .oils-sidebar {
width: 220px !important;
flex-shrink: 0 !important;
}
/* The main content area of /oils */
#page-oils .oils-main,
#page-oils > div > div:last-child {
flex: 1 !important;
min-width: 0 !important;
overflow: visible !important;
}
/* The actual product grid parent — anonymous div containing .oil-cards */
#page-oils div:has(> .product-card.oil-card) {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 1.2rem !important;
width: 100% !important;
max-width: none !important;
}
@media (max-width: 1200px) {
#page-oils div:has(> .product-card.oil-card) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 640px) {
#page-oils div:has(> .product-card.oil-card) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0.8rem !important;
}
}
/* Oil cards: reset to fluid width, not fixed 280px */
#page-oils .product-card.oil-card {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
#page-oils .product-card.oil-card .product-image,
#page-oils .product-card.oil-card .product-card-img {
width: 100% !important;
aspect-ratio: 4/5 !important;
max-height: 320px !important;
}
/* Card size pills: fit in card width */
#page-oils .card-sizes {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0.25rem !important;
width: 100% !important;
}
#page-oils .card-size-pill {
padding: 0.35rem 0.1rem !important;
min-width: 0 !important;
font-size: 0.65rem !important;
overflow: hidden !important;
text-align: center !important;
}
#page-oils .card-size-pill span {
display: block !important;
font-size: 0.6rem !important;
opacity: 0.8 !important;
}
/* ─── /diffusers: fix hero + grid ─── */
#page-diffusers > * {
max-width: 100% !important;
overflow-x: hidden !important;
}
/* Diffuser hero: better 2-col */
#page-diffusers .device-hero,
#page-diffusers .diffusers-hero,
#page-diffusers section:first-of-type {
padding: 4rem 2rem !important;
}
/* Diffuser product grid — 3 cols */
#page-diffusers div:has(> .product-card),
#page-diffusers div:has(> .device-card) {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 2rem !important;
max-width: 1180px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
}
@media (max-width: 900px) {
#page-diffusers div:has(> .product-card),
#page-diffusers div:has(> .device-card) {
grid-template-columns: 1fr !important;
max-width: 500px !important;
}
}
#page-diffusers .product-card {
width: 100% !important;
min-width: 0 !important;
}
#page-diffusers .product-card .photo-placeholder,
#page-diffusers .product-card .product-image {
aspect-ratio: 1/1 !important;
max-height: 320px !important;
}
/* ─── Home products grid: prevent overflow ─── */
#page-home div:has(> .product-card.oil-card) {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 1.2rem !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
}
@media (max-width: 1100px) {
#page-home div:has(> .product-card.oil-card) {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 800px) {
#page-home div:has(> .product-card.oil-card) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* ─── Home coffrets: smaller, less empty ─── */
#page-home [class*="bundle"] .photo-placeholder,
#page-home [class*="coffret"] .photo-placeholder {
aspect-ratio: 16 / 11 !important;
max-height: 300px !important;
}
/* ─── Universal safeguards ─── */
.spa-page {
overflow-x: hidden !important;
}
.product-card,
.oil-card,
.device-card {
box-sizing: border-box !important;
min-width: 0 !important;
}
/* Ensure stars/rating don't overflow their card */
.card-rating,
.pdp-rating,
.rating-row {
max-width: 100% !important;
overflow: hidden !important;
}
/* Ensure all images respect their containers */
img { max-width: 100% !important; height: auto; }
/* ─── Fix the oils page layout ─── */
#page-oils .oils-page-layout {
display: grid !important;
grid-template-columns: 220px 1fr !important;
gap: 2rem !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
}
@media (max-width: 900px) {
#page-oils .oils-page-layout {
grid-template-columns: 1fr !important;
}
#page-oils .oils-sidebar {
display: none;
}
}
#page-oils .oils-sidebar {
width: 220px !important;
}
#page-oils .oils-main {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
/* The actual oil grid — 5 cols desktop, dégressif responsive */
#page-oils #oilsPageGrid,
#page-oils .oils-grid {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 1.1rem !important;
width: 100% !important;
}
@media (max-width: 1300px) {
#page-oils #oilsPageGrid,
#page-oils .oils-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
@media (max-width: 980px) {
#page-oils #oilsPageGrid,
#page-oils .oils-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 720px) {
#page-oils #oilsPageGrid,
#page-oils .oils-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* Oil cards proper width */
#page-oils .product-card.oil-card {
width: 100% !important;
min-width: 0 !important;
}
/* Size pills responsive */
#page-oils .card-sizes {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0.25rem !important;
overflow: hidden !important;
}
#page-oils .card-size-pill {
font-size: 0.62rem !important;
padding: 0.35rem 0.2rem !important;
min-width: 0 !important;
text-align: center !important;
}
#page-oils .card-size-pill span {
display: block !important;
font-size: 0.56rem !important;
}
/* If card is still too narrow, show only 2 sizes or stack */
@media (max-width: 1300px) {
#page-oils .card-size-pill {
font-size: 0.6rem !important;
}
}
/* ─── Section labels & empty cells should span all columns ─── */
#page-diffusers .device-grid > h3,
#page-diffusers .device-grid > h2,
#page-diffusers .products-grid > h3,
#page-diffusers .products-grid > h2 {
grid-column: 1 / -1 !important;
margin-top: 3rem !important;
margin-bottom: 1rem !important;
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.4rem !important;
font-weight: 400 !important;
font-style: italic !important;
color: var(--dark-azur) !important;
text-align: center !important;
letter-spacing: -0.01em !important;
}
/* First label: no top margin */
#page-diffusers .device-grid > h3:first-child,
#page-diffusers .device-grid > h2:first-child {
margin-top: 1rem !important;
}
/* Empty / separator divs shouldn't occupy grid cells */
#page-diffusers .device-grid > div:empty {
display: none !important;
}
/* Also for oils */
#page-oils .oils-grid > h3,
#page-oils .oils-grid > h2,
#page-oils #oilsPageGrid > h3,
#page-oils #oilsPageGrid > h2 {
grid-column: 1 / -1 !important;
margin-top: 3rem !important;
margin-bottom: 1rem !important;
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.4rem !important;
font-style: italic !important;
color: var(--dark-azur) !important;
text-align: center !important;
}
#page-oils #oilsPageGrid > h3:first-child,
#page-oils #oilsPageGrid > h2:first-child {
margin-top: 1rem !important;
}
#page-oils #oilsPageGrid > div:empty {
display: none !important;
}
/* Fix the giant empty placeholders height on coffrets */
#page-oils #oilsPageGrid .product-card .photo-placeholder,
#page-oils .product-card.oil-card .photo-placeholder,
#page-oils #oilsPageGrid .product-card .product-image {
aspect-ratio: 4/5 !important;
max-height: 320px !important;
min-height: 220px !important;
}
/* Diffuser card images: more reasonable height */
#page-diffusers .product-card .photo-placeholder,
#page-diffusers .device-card .photo-placeholder,
#page-diffusers .product-card .product-image {
aspect-ratio: 1/1 !important;
max-height: 280px !important;
min-height: 220px !important;
}
/* ─── Fix oils layout: force all non-sidebar children to column 2 ─── */
#page-oils .oils-page-layout {
display: grid !important;
grid-template-columns: 220px 1fr !important;
gap: 2rem !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 2rem 2rem !important;
align-items: start !important;
}
#page-oils .oils-page-layout > aside.oils-sidebar,
#page-oils .oils-page-layout > #oilsSidebar {
grid-column: 1 !important;
grid-row: 1 / span 10 !important;
width: 100% !important;
position: sticky !important;
top: 120px !important;
}
/* All non-sidebar children go in column 2 */
#page-oils .oils-page-layout > *:not(.oils-sidebar):not(#oilsSidebar):not(.oils-mobile-filter-btn) {
grid-column: 2 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
#page-oils .oils-page-layout > .oils-mobile-filter-btn {
display: none !important;
}
/* Empty divs (height 0 or width 0) should not occupy space */
#page-oils .oils-page-layout > div:empty,
#page-oils .oils-page-layout > div[style*="width: 0"],
#page-oils .oils-page-layout > div[style*="display: none"] {
display: none !important;
}
/* Coffrets container (anonymous div containing bundle cards) */
#page-oils .oils-page-layout > div:has(> .product-card) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 1.5rem !important;
max-width: 900px !important;
margin: 0 0 2.5rem 0 !important;
}
/* Main content */
#page-oils .oils-main {
display: block !important;
width: 100% !important;
}
/* Mobile: sidebar below content */
@media (max-width: 900px) {
#page-oils .oils-page-layout {
grid-template-columns: 1fr !important;
}
#page-oils .oils-page-layout > aside.oils-sidebar {
display: none !important;
}
#page-oils .oils-page-layout > *:not(.oils-sidebar) {
grid-column: 1 !important;
}
}
/* ─── Bloc Subscribe & Save sur oil-card : compact, élégant ─── */
.card-subscribe {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
padding: 0.8rem 0.9rem !important;
margin: 0.7rem 0 0 !important;
background: linear-gradient(135deg, rgba(201,168,106,0.07), rgba(201,168,106,0.02)) !important;
border: 0.5px solid rgba(201,168,106,0.3) !important;
border-radius: 3px !important;
font-family: 'Jost', sans-serif !important;
position: relative !important;
}
.card-subscribe .card-sub-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.5rem !important;
margin: 0 !important;
border: none !important;
padding: 0 !important;
}
.card-sub-label {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
cursor: default !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--dark-azur, #1A1A1A) !important;
}
/* Inline -15% badge next to "Abonnement Signature" */
.card-sub-badge {
display: inline-block !important;
background: var(--gold, #D4AF37) !important;
color: var(--dark-azur, #1A1A1A) !important;
padding: 1px 6px !important;
border-radius: 2px !important;
font-size: 0.63rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
margin-left: 0.4em !important;
vertical-align: 1px !important;
}
.card-sub-label small {
display: block !important;
font-family: 'Cormorant Garamond', serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: 0.74rem !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--warm-grey, #9D9C9A) !important;
margin-top: 3px !important;
}
/* Perks list (tiny bullets) */
.card-sub-perks {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
padding-top: 0.5rem !important;
border-top: 0.5px solid rgba(201,168,106,0.25) !important;
margin-top: 0.2rem !important;
}
.card-sub-perks span {
font-size: 0.58rem !important;
line-height: 1.45 !important;
color: var(--warm-grey, #6b6659) !important;
letter-spacing: 0.02em !important;
font-weight: 400 !important;
position: relative !important;
padding-left: 0.9em !important;
}
.card-sub-perks span::before {
content: '·' !important;
position: absolute !important;
left: 0.15em !important;
color: var(--gold, #D4AF37) !important;
font-weight: 700 !important;
font-size: 1.3em !important;
line-height: 0.8 !important;
}
.card-sub-perks sup {
font-size: 0.7em !important;
}
/* Toggle — keep clean */
.card-sub-toggle {
flex-shrink: 0 !important;
width: 36px !important;
height: 20px !important;
border-radius: 20px !important;
border: 0.5px solid var(--light-border) !important;
background: #EFEADE !important;
position: relative !important;
cursor: pointer !important;
padding: 0 !important;
transition: background 0.25s ease !important;
min-width: 36px !important;
min-height: 20px !important;
}
.card-sub-toggle::before,
.card-sub-toggle::after {
content: '' !important;
position: absolute !important;
top: 2px !important;
left: 2px !important;
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
background: #fff !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
transition: transform 0.25s ease !important;
}
.card-sub-toggle.active {
background: var(--gold, #D4AF37) !important;
border-color: var(--gold, #D4AF37) !important;
}
.card-sub-toggle.active::before,
.card-sub-toggle.active::after {
transform: translateX(16px) !important;
}
/* On very narrow screens */
@media (max-width: 480px) {
.card-sub-perks span { font-size: 0.55rem !important; }
.card-sub-label { font-size: 0.66rem !important; letter-spacing: 0.1em !important; }
}
.pdp-howto-grid .photo-placeholder,
.pdp-howto-step .photo-placeholder {
max-height: 220px;
aspect-ratio: 4 / 3 !important;
overflow: hidden;
}
@media (max-width: 780px) {
.pdp-howto-grid {
grid-template-columns: 1fr 1fr !important;
gap: 0.8rem !important;
}
}
@media (max-width: 520px) {
.pdp-howto-grid {
grid-template-columns: 1fr !important;
}
}
/* H fix : grille oils 5 cols desktop, responsive dégressif */
@media (min-width: 1201px) {
.oils-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 1rem; }
}
@media (min-width: 961px) and (max-width: 1200px) {
.oils-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1.1rem; }
}
@media (min-width: 741px) and (max-width: 960px) {
.oils-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1rem; }
}
/* Cards compactes en 5 cols : réduire le bloc subscribe */
@media (min-width: 1201px) {
.oils-grid .product-card .product-name { font-size: 0.95rem; }
.oils-grid .product-card .product-notes { font-size: 0.7rem; line-height: 1.3; }
.oils-grid .card-subscribe { padding-top: 0.5rem; margin-top: 0.5rem; }
.oils-grid .card-sub-row { margin-bottom: 0.35rem; }
.oils-grid .card-sub-label { font-size: 0.65rem; }
.oils-grid .card-sub-label small { font-size: 0.58rem; }
.oils-grid .card-sub-perks { font-size: 0.6rem; gap: 0.2rem; }
.oils-grid .card-sub-perks span { line-height: 1.3; }
.oils-grid .card-atc { padding: 0.55rem; font-size: 0.68rem; }
.oils-grid .card-size-pill { font-size: 0.65rem; padding: 0.25rem 0.4rem; }
.oils-grid .product-image { aspect-ratio: 1 / 1; }
}
/* ═══════════════════════════════════════════════════════════════
AROMAZUR v12 — Design system
Objectifs : typo discipline, or discipline, cards simples, détails premium
═══════════════════════════════════════════════════════════════ */
:root {
/* Type scale (ratio 1.25, base 16px) */
--fs-overline: 0.69rem; /* 11px */
--fs-caption: 0.81rem; /* 13px */
--fs-body: 0.94rem; /* 15px */
--fs-body-lg: 1.06rem; /* 17px */
--fs-h4: 1.19rem; /* 19px */
--fs-h3: 1.50rem; /* 24px */
--fs-h2: 2.25rem; /* 36px */
--fs-h1: 3.50rem; /* 56px */
/* Weights disciplinés — Cormorant ne dépasse jamais 500 */
--fw-serif-light: 300;
--fw-serif-reg: 400;
--fw-serif-med: 500;
--fw-sans-reg: 400;
--fw-sans-med: 500;
/* Couleur or : uniquement pour prix + CTA primaire. Titres en tobacco foncé. */
--color-title: #1A1A1A; /* brun tabac, pas or */
--color-body: rgba(26,26,26,0.72);
--color-muted: rgba(26,26,26,0.50);
--color-overline: rgba(26,26,26,0.55); /* overlines discrètes, pas or */
--color-price: #D4AF37; /* or réservé aux prix */
--color-cta: #D4AF37; /* or réservé aux CTA primaires */
}
/* ─────────────────────────────────────────────────────────
TYPO DISCIPLINE
───────────────────────────────────────────────────────── */
/* Cormorant serif : toujours 400-500, jamais 600-700 en prod */
.section-title,
.stories-title,
h1, h2, h3 {
font-weight: var(--fw-serif-reg) !important;
letter-spacing: -0.015em;
}
h1 { letter-spacing: -0.025em; } /* serré pour les gros titres éditoriaux */
h2 { letter-spacing: -0.02em; }
/* Titres en brun tabac (pas or, pas dark-azur anonyme) */
.section-title,
.pdp-title,
.page-hero h1,
.pdp-howto-title {
color: var(--color-title) !important;
}
/* Cormorant 600 et 700 qui traînent → forcés en 400/500 */
[style*="font-weight:600"][style*="Cormorant"],
[style*="font-weight: 600"][style*="Cormorant"],
.stories-title[style*="font-weight:500"] {
font-weight: 400 !important;
}
/* Prix : or + tabular nums pour aligner parfaitement les chiffres */
.product-price-block strong,
.pdp-price,
.card-price-always strong,
.stories-price,
.price-old,
[class*="price"] {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
.product-price-block strong,
.card-price-always strong {
color: var(--color-price) !important;
font-weight: var(--fw-sans-med) !important;
}
/* ─────────────────────────────────────────────────────────
OR DISCIPLINE — l'or ne sert qu'aux prix + CTA primaires
───────────────────────────────────────────────────────── */
/* Overlines : ne plus être or par défaut, passer en gris chaud */
.section-overline:not(.text-gold-light):not(.text-gold) {
color: var(--color-overline) !important;
}
/* Em italiques doré dans les titres — ok MAIS plus discret, pas doré saturé */
h1 em, h2 em, .stories-title em, .section-title em {
color: var(--color-price); /* même or que prix, cohérence */
font-weight: var(--fw-serif-reg) !important;
font-style: italic;
}
/* ─────────────────────────────────────────────────────────
CARDS SIMPLIFIÉES (listing) — axe 2
Plan : sur /oils, /home, /diffusers, cacher le bloc
subscribe visible par défaut. Ne reste : image + nom + notes + prix + CTA
Remplace par un badge -15% discret en haut à droite.
───────────────────────────────────────────────────────── */
/* Sur les listings : masquer le gros bloc subscribe — spécificité haute */
#page-home .product-card.oil-card .card-subscribe,
#page-oils .product-card.oil-card .card-subscribe,
#page-diffusers .product-card.oil-card .card-subscribe,
body .oils-grid .card-subscribe,
body .products-grid .card-subscribe,
body #page-home .card-subscribe,
body #page-oils .card-subscribe,
body #page-diffusers .card-subscribe {
display: none !important;
}
/* Masquer aussi les .card-sizes (pills 20/50/120/500ml) sur listing */
#page-home .product-card.oil-card .card-sizes,
#page-oils .product-card.oil-card .card-sizes,
body .oils-grid .card-sizes,
body .products-grid .card-sizes,
body #page-home .card-sizes,
body #page-oils .card-sizes {
display: none !important;
}
/* Masquer card-social (🔥 185+ vendus) — c'est bruyant sur listing */
body .oils-grid .card-social,
body .products-grid .card-social,
body #page-home .card-social,
body #page-oils .card-social {
display: none !important;
}
/* Badge discret "-15% avec abonnement" en haut à droite de chaque card */
.oils-grid .product-card .product-image,
#page-oils .product-card .product-image,
#page-home .product-card .product-image {
position: relative;
}
/* Badge image désactivé — remplacé par badge discret sous le prix (design-system-v12) */
.oils-grid .product-card:not([data-family="coffret"]) .product-image::after,
#page-oils .product-card:not([data-family="coffret"]) .product-image::after {
content: none;
}
/* Bouton card : renommer "Ajouter au panier" n'est pas possible par CSS
mais on peut changer son style pour qu'il ressemble plus à un "Découvrir" */
.oils-grid .card-atc,
#page-oils .card-atc,
#page-home .product-card .card-atc {
background: transparent !important;
color: var(--color-title) !important;
border: 1px solid var(--color-title) !important;
font-size: 0.72rem !important;
font-weight: var(--fw-sans-med) !important;
letter-spacing: 0.15em;
padding: 0.7rem 0.5rem !important;
transition: all 0.3s ease;
}
.oils-grid .card-atc:hover,
#page-oils .card-atc:hover,
#page-home .product-card .card-atc:hover {
background: var(--color-title) !important;
color: #FFF !important;
}
/* Product image : carré parfait, pas de ratio bizarre */
.oils-grid .product-card .product-image,
#page-oils .product-card .product-image,
#page-home .product-card .product-image {
aspect-ratio: 1 / 1 !important;
background: #F5F3F0 !important;
}
/* Product info : spacing plus aéré */
.oils-grid .product-card .product-info,
#page-oils .product-card .product-info,
#page-home .product-card .product-info {
padding: 0.8rem 0.2rem 0 0.2rem !important;
}
.oils-grid .product-name,
#page-oils .product-name {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.05rem !important;
font-weight: var(--fw-serif-reg) !important;
color: var(--color-title) !important;
letter-spacing: -0.01em;
margin-bottom: 0.25rem !important;
}
.oils-grid .product-notes,
#page-oils .product-notes {
font-family: 'Jost', sans-serif !important;
font-size: 0.72rem !important;
color: var(--color-muted) !important;
line-height: 1.4 !important;
font-weight: var(--fw-sans-reg) !important;
letter-spacing: 0.02em;
margin-bottom: 0.5rem !important;
}
/* Rating plus discret */
.oils-grid .card-meta,
#page-oils .card-meta {
font-size: 0.7rem !important;
color: var(--color-muted) !important;
margin-bottom: 0.4rem !important;
}
.oils-grid .card-rating,
#page-oils .card-rating {
color: var(--color-muted) !important; /* pas doré, discret */
}
/* Card price plus proéminent */
.oils-grid .card-price-always,
#page-oils .card-price-always {
font-family: 'Jost', sans-serif !important;
font-size: 0.9rem !important;
font-weight: var(--fw-sans-med) !important;
color: var(--color-title) !important;
margin: 0.2rem 0 0.8rem !important;
}
/* Supprimer les bordures et ombres sur cards listing — style plus minimal */
.oils-grid .product-card,
#page-oils .product-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Card rating pas en gold */
.card-rating {
color: var(--color-muted) !important;
}
/* ─────────────────────────────────────────────────────────
DÉTAILS PREMIUM — axe 7
───────────────────────────────────────────────────────── */
/* Smooth scroll */
html { scroll-behavior: smooth; }
/* Transition entre pages */
.spa-page { transition: opacity 0.28s ease; }
.spa-page:not(.page-active):not([style*="display:block"]):not([style*="display: block"]) { opacity: 0; }
/* Monogramme A en filigrane sur les photo-placeholders nude */
.photo-placeholder {
position: relative;
background: #F5F3F0 !important;
}
.photo-placeholder::before {
content: 'A';
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 8vw, 5rem);
font-weight: 400;
color: rgba(212,175,55,0.10);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: -0.04em;
pointer-events: none;
user-select: none;
}
.photo-placeholder .photo-label {
position: relative;
z-index: 2;
opacity: 0.35;
}
/* Curseur léger custom sur liens ATC / CTA principaux */
.card-atc, .pdp-atc, .btn-primary, .stories-cta, .faq-cta-btn, .split-card,
a[href^="#/product"], a[href^="#/oils"], a[href^="#/diffusers"] {
cursor: pointer;
}
/* ─────────────────────────────────────────────────────────
HERO HOME — axe 3 (asymétrique, crème, 3 preuves + 1 CTA)
Cache l'ancien carrousel stories, montre le nouveau hero
───────────────────────────────────────────────────────── */
/* Ancien hero stories restauré — v12 désactivé */
#page-home .hero-stories { display: block; }
.home-hero-v12 {
display: none !important;
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
min-height: 620px;
background: linear-gradient(180deg, #F5F3F0 0%, #FBF7F0 100%);
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(26,26,26,0.06);
}
.home-hero-v12__content {
padding: 5rem 4rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.5rem;
}
.home-hero-v12__overline {
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-price);
font-weight: 500;
}
.home-hero-v12__title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.5rem, 4.5vw, 4rem);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-title);
margin: 0;
}
.home-hero-v12__title em {
color: var(--color-price);
font-style: italic;
font-weight: 400;
}
.home-hero-v12__proofs {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding-top: 1rem;
margin-top: 0.5rem;
border-top: 1px solid rgba(26,26,26,0.1);
}
.home-hero-v12__proof {
display: flex;
align-items: center;
gap: 0.8rem;
font-family: 'Jost', sans-serif;
font-size: 0.95rem;
color: var(--color-title);
letter-spacing: -0.005em;
}
.home-hero-v12__proof::before {
content: '—';
color: var(--color-price);
font-size: 1.1rem;
opacity: 0.75;
}
.home-hero-v12__cta-row {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
align-items: center;
flex-wrap: wrap;
}
.home-hero-v12__cta {
display: inline-block;
padding: 16px 36px;
background: var(--color-title);
color: #FFF;
font-family: 'Jost', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
transition: all 0.3s ease;
}
.home-hero-v12__cta:hover {
background: var(--color-price);
color: var(--color-title);
}
.home-hero-v12__cta-secondary {
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-title);
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1px solid var(--color-title);
}
.home-hero-v12__visual {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #E8DECB 0%, #D4C4A8 100%);
}
.home-hero-v12__visual::before {
content: 'A';
font-family: 'Cormorant Garamond', serif;
font-size: 30rem;
font-weight: 300;
color: rgba(26,26,26,0.08);
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
line-height: 1;
letter-spacing: -0.05em;
pointer-events: none;
user-select: none;
}
.home-hero-v12__caption {
position: absolute;
bottom: 2rem; right: 2rem;
font-family: 'Jost', sans-serif;
font-size: 0.65rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
}
/* Responsive : colonne unique en-dessous de 960px */
@media (max-width: 960px) {
.home-hero-v12 { grid-template-columns: 1fr; min-height: auto; }
.home-hero-v12__visual { min-height: 320px; }
.home-hero-v12__content { padding: 3.5rem 2rem 2.5rem; }
.home-hero-v12__visual::before { font-size: 16rem; }
}
@media (max-width: 600px) {
.home-hero-v12__content { padding: 2.5rem 1.5rem 2rem; }
}
/* ─────────────────────────────────────────────────────────
Micro-fix : s'assurer que le footer reste propre
───────────────────────────────────────────────────────── */
.footer { border-top: 1px solid rgba(26,26,26,0.08); }
/* ════════════════════════════════════════════════════════════════
AROMAZUR DESIGN SYSTEM v12
Axe 2 cards · Axe 4 or · Axe 5 typo · Axe 7 détails premium
════════════════════════════════════════════════════════════════ */
/* ═══ AXE 5 : TYPE SCALE + DISCIPLINE ═══════════════════════════ */
:root {
/* Type scale 8 tailles (ratio 1.25) */
--fs-overline: 0.69rem;
--fs-small: 0.81rem;
--fs-body: 0.94rem;
--fs-body-lg: 1.06rem;
--fs-h4: 1.19rem;
--fs-h3: 1.5rem;
--fs-h2: 2.25rem;
--fs-h1: 3.5rem;
/* Weights disciplinés */
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 600;
/* Letter spacing */
--ls-tight: -0.02em;
--ls-eyebrow: 0.15em;
}
/* Force Cormorant 600 → 400 partout (élégance retrouvée) */
h1, h2, h3, h4, h5, h6,
.pdp-title, .section-title, .stories-title,
.mobile-nav a, .sidebar-title,
.pdp-howto-title, .pdp-howto h2,
.quiz-question, .oil-profile-title,
[class*="-title"]:not(.mbs-title) {
font-weight: 400 !important;
}
/* Letter-spacing négatif sur titres éditoriaux (détail Apple/Vanity Fair) */
h1, h2, .pdp-title, .section-title, .stories-title,
.page-hero h1, .page-hero h2 {
letter-spacing: var(--ls-tight);
}
/* Tabular-nums : tous les chiffres de prix s'alignent verticalement */
.product-price, .pdp-price, .card-price-always,
.stories-price, .stories-price strong,
.price-old, .pill-price,
[class*="-price"] strong, [class*="price-"] strong,
#addToCart, #almaPrice {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ═══ AXE 4 : DISCIPLINE DE L'OR ═════════════════════════════════
Règle : l'or = (a) les prix, (b) les CTAs principaux. Ailleurs → brun tabac avec filet or fin
═══════════════════════════════════════════════════════════════ */
/* Overlines : passer en brun foncé avec petit filet or en dessous */
.section-overline,
.mega-heading,
.cart-cross-title,
.mega-promo-label,
[class*="overline"]:not([class*="text-gold"]):not([class*="az-article-kicker"]) {
color: var(--dark-azur) !important;
font-weight: 500 !important;
letter-spacing: 0.16em !important;
}
/* Filet or sous les overlines centrées uniquement (éviter double-trait partout) */
.section-overline[style*="text-align:center"],
section[class*="sub-"] .section-overline,
section[class*="hero"] .section-overline,
.pdp-compare .section-overline {
padding-bottom: 0.4rem !important;
position: relative;
}
.section-overline[style*="text-align:center"]::after,
section[class*="sub-"] .section-overline::after,
.pdp-compare .section-overline::after {
content: '';
display: block;
width: 32px;
height: 1px;
background: var(--gold);
margin: 0.35rem auto 0;
opacity: 0.7;
}
/* Italiques Cormorant : désaturer l'or partout sauf hero stories + prix */
.section-title em,
.split-card h2 em,
.sub-save-intro em,
.sub-comparison em,
.pdp-title em,
h2 em, h3 em {
color: var(--dark-azur) !important;
}
/* Exceptions où l'or doit rester */
.hero-stories .stories-title em,
.stories-title em,
.stories-price strong,
.home-hero-v12 em {
color: var(--gold) !important;
}
/* ═══ AXE 2 : SIMPLIFICATION DES CARDS PRODUIT ═══════════════════
Cacher le bloc card-subscribe (trop lourd), garder seulement
un badge discret "−15% avec abonnement" sous le prix
═══════════════════════════════════════════════════════════════ */
.oils-grid .product-card .card-subscribe,
.products-grid .product-card .card-subscribe,
#page-home .product-card .card-subscribe,
#page-oils .product-card .card-subscribe {
display: none !important;
}
/* Badge discret sous le prix, même design cohérent partout */
.oils-grid .product-card .card-price-always::after,
.products-grid .product-card .card-price-always::after,
#page-home .product-card .card-price-always::after,
#page-oils .product-card .card-price-always::after {
content: '−15% avec abonnement';
display: block;
font-family: 'Jost', sans-serif;
font-size: 0.6rem;
font-weight: 500;
color: var(--gold-text);
letter-spacing: 0.06em;
margin-top: 0.3rem;
text-transform: none;
opacity: 0.9;
}
/* Product-footer (sizes) conservé, mais sans le bloc abonnement */
.oils-grid .product-card .product-footer,
#page-oils .product-card .product-footer {
display: block !important;
opacity: 1 !important;
max-height: none !important;
margin-top: 0.6rem;
padding-bottom: 0.8rem;
}
/* ═══ AXE 7 : DÉTAILS PREMIUM ═══════════════════════════════════ */
html {
scroll-behavior: smooth;
}
/* Font smoothing global */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Transition douce sur les liens et boutons */
a, button {
transition: color 0.3s var(--ease-luxe), background-color 0.3s var(--ease-luxe), border-color 0.3s var(--ease-luxe);
}
/* Barre de focus accessibilité propre (remplace le outline bleu) */
*:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 2px;
}
/* Amélioration hover sur cards */
.product-card.oil-card:hover .product-name {
color: var(--gold-text);
}
/* Small caps pour les labels secondaires (touche éditoriale) */
.stories-label, .product-badge, .pdp-overline {
font-variant-caps: all-small-caps;
letter-spacing: 0.12em !important;
}
/* ═══════════════════════════════════════════════════════════════
AROMAZUR DESIGN SYSTEM v2 — Typographie disciplinée
═══════════════════════════════════════════════════════════════ */
:root {
/* ─── Type scale Major Third (1.250) — 8 tailles seulement ─── */
--fs-overline: 0.69rem; /* 11px — kickers, labels, meta */
--fs-micro: 0.78rem; /* 12.5px — captions, fine-print */
--fs-small: 0.88rem; /* 14px — card notes, ui small */
--fs-body: 1.00rem; /* 16px — body par défaut */
--fs-body-lg: 1.13rem; /* 18px — body éditorial, pullquotes */
--fs-h4: 1.33rem; /* 21px — titres cards, sous-sections */
--fs-h3: 1.67rem; /* 27px — sous-titres de page */
--fs-h2: 2.22rem; /* 36px — titres de section */
--fs-h1: 3.00rem; /* 48px — hero (clamp sur viewport) */
/* ─── Letter-spacing system — 4 valeurs seulement ─── */
--ls-tight: -0.02em; /* grands titres serif */
--ls-snug: -0.01em; /* sous-titres serif */
--ls-normal: 0; /* body */
--ls-wide: 0.1em; /* overlines, nav */
--ls-xwide: 0.18em; /* CTAs, boutons */
/* ─── Line-height system ─── */
--lh-tight: 1.15; /* grands titres */
--lh-snug: 1.3; /* sous-titres */
--lh-normal: 1.5; /* body small */
--lh-relaxed: 1.65; /* body reading */
--lh-loose: 1.8; /* prose éditoriale */
/* ─── Color tokens ─── */
--tobacco-text: #1A1A1A;
--tobacco-muted: rgba(26,26,26,0.72);
--tobacco-faded: rgba(26,26,26,0.55);
}
/* ═══════════════════════════════════════════════════════════════
RESET TYPOGRAPHIQUE — imposer les bonnes règles partout
═══════════════════════════════════════════════════════════════ */
/* Body par défaut */
body {
font-family: 'Jost', -apple-system, sans-serif;
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-relaxed);
color: var(--tobacco-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ─── Cormorant Garamond : weight 400 par défaut, 500 max pour emphase ─── */
h1, h2, h3, h4, h5, h6,
.pdp-title,
.section-title,
.stories-title,
.page-hero h1,
.page-hero h2,
.hero h1, .hero h2,
.sidebar-title,
.footer-nl-content h4,
.mega-promo-title,
.crosssell-name,
.crosssell-name-lg,
.faq-category-title,
.page-404 h1,
.az-article-magazine h1,
.az-article-magazine h2,
.pdp-howto-title,
.quiz-question,
.result-card-name {
font-family: 'Cormorant Garamond', serif !important;
font-weight: 400 !important;
font-style: normal;
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
}
/* Sous-titres serif un peu plus lights */
.pdp-tagline,
.page-hero-content p,
.section-subtitle,
.stories-sub,
.az-article-lead {
font-family: 'Cormorant Garamond', serif !important;
font-weight: 300 !important;
font-style: italic;
letter-spacing: var(--ls-snug);
line-height: var(--lh-snug);
}
/* ─── Tailles fixes selon hiérarchie ─── */
.page-hero h1 {
font-size: clamp(2rem, 5vw, var(--fs-h1)) !important;
}
.section-title,
.pdp-title,
.stories-title,
.hero h1,
.hero h2,
.page-404 h1 {
font-size: clamp(1.75rem, 3.5vw, var(--fs-h2)) !important;
}
.az-article-magazine h1 {
font-size: clamp(1.75rem, 4vw, var(--fs-h2)) !important;
margin-bottom: 1.5rem;
}
.az-article-magazine h2 {
font-size: var(--fs-h3) !important;
margin-top: 2.5rem;
margin-bottom: 1rem;
}
.faq-category-title,
.sidebar-title,
.result-card-name {
font-size: var(--fs-h4) !important;
}
.crosssell-name,
.crosssell-name-lg,
.mega-promo-title,
.footer-nl-content h4 {
font-size: var(--fs-body) !important;
}
/* ─── Italiques : réservés aux accents signature ─── */
h1 em, h2 em, h3 em,
.section-title em,
.pdp-title em,
.stories-title em,
.page-hero h1 em,
.az-article-magazine h1 em,
.az-article-magazine h2 em {
font-weight: 300 !important;
font-style: italic;
color: inherit; /* L'accent couleur est géré par la discipline or */
}
/* ─── Sans-serif : Jost discipliné ─── */
/* Overlines / kickers : toujours identiques */
.section-overline,
.pdp-overline,
.mega-heading,
.stories-label,
.az-article-kicker,
.oil-profile-overline,
.scent-story-overline,
.card-sub-label {
font-family: 'Jost', sans-serif !important;
font-size: var(--fs-overline) !important;
font-weight: 500 !important;
letter-spacing: var(--ls-wide) !important;
text-transform: uppercase !important;
line-height: var(--lh-normal);
margin-bottom: 0.8rem;
color: var(--tobacco-faded) !important;
}
/* Boutons / CTAs : Jost 500, letter-spacing large */
.btn,
.btn-text-toggle,
.card-atc,
.pdp-atc,
.quick-add-btn,
.stories-cta,
.quiz-start-btn,
.quiz-email-submit,
.result-card-btn,
.faq-cta-btn,
.shipping-cta-btn,
.cart-checkout-btn,
.tab,
.home-cat-filter,
.home-filter,
.oil-filter-btn,
.footer-nl-form button {
font-family: 'Jost', sans-serif !important;
font-weight: 500 !important;
letter-spacing: var(--ls-xwide) !important;
text-transform: uppercase;
}
/* Body text, paragraphes, descriptions */
p,
.product-tagline,
.product-notes,
.review-text,
.faq-answer-inner,
.shipping-section p,
.legal-content p,
.az-article-magazine p {
font-family: 'Jost', sans-serif;
font-weight: 400;
line-height: var(--lh-relaxed);
letter-spacing: var(--ls-normal);
}
/* Articles éditoriaux : serif pour la lecture */
.az-article-magazine .az-intro,
.az-article-magazine p:not(.az-article-kicker):not(.az-article-meta) {
font-family: 'Cormorant Garamond', serif;
font-size: var(--fs-body-lg) !important;
font-weight: 400;
line-height: var(--lh-loose);
}
/* ─── Prix en tabular-nums ─── */
.pdp-price,
.pdp-price strong,
.card-price-always,
.card-price-always strong,
.product-price-block,
.product-price-block strong,
.stories-price,
.stories-price strong,
.price-old,
.cart-item-price,
.cart-summary-total,
.sub-pricing-amount,
.pdp-price-sub,
.alma-price,
#almaPrice,
.pill-price {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
/* ═══════════════════════════════════════════════════════════════
DISCIPLINE OR — or = prix + CTAs uniquement
═══════════════════════════════════════════════════════════════ */
/* Overlines : brun foncé muted, plus de doré partout */
.section-overline,
.pdp-overline,
.mega-heading,
.az-article-kicker,
.oil-profile-overline,
.scent-story-overline,
.card-sub-label {
color: var(--tobacco-faded) !important;
}
/* Italiques dans titres : brun par défaut */
.section-title em,
.pdp-title em,
.page-hero h1 em,
.az-article-magazine h1 em,
.az-article-magazine h2 em,
.faq-category-title em {
color: var(--tobacco-text) !important;
}
/* EXCEPTIONS — or autorisé uniquement sur : */
.stories-title em, /* hero carrousel signature */
.stories-label {
color: var(--gold) !important;
}
.pdp-price,
.pdp-price strong,
.stories-price strong,
.card-price-always strong,
.price-old {
/* prix gardent leur couleur actuelle */
}
/* ═══════════════════════════════════════════════════════════════
SIMPLIFIER CARDS LISTING (axe 2, conservé)
═══════════════════════════════════════════════════════════════ */
#page-oils .product-card.oil-card .card-subscribe .card-sub-row,
#page-oils .product-card.oil-card .card-subscribe .card-sub-perks,
#page-home .product-card.oil-card .card-subscribe .card-sub-row,
#page-home .product-card.oil-card .card-subscribe .card-sub-perks,
#page-home .products-grid .card-subscribe .card-sub-row,
#page-home .products-grid .card-subscribe .card-sub-perks,
.oils-grid .product-card.oil-card .card-subscribe .card-sub-row,
.oils-grid .product-card.oil-card .card-subscribe .card-sub-perks,
.products-grid.device-grid .card-subscribe .card-sub-row,
.products-grid.device-grid .card-subscribe .card-sub-perks {
display: none !important;
}
#page-oils .oil-card .card-subscribe,
#page-oils .product-card.oil-card .card-subscribe,
#page-home .oil-card .card-subscribe,
#page-home .product-card.oil-card .card-subscribe,
.oils-grid .oil-card .card-subscribe,
.oils-grid .product-card.oil-card .card-subscribe {
display: block !important;
max-height: none !important;
opacity: 1 !important;
overflow: visible !important;
visibility: visible !important;
border-top: none !important;
padding: 0 !important;
margin: 0.6rem 0 0 !important;
background: transparent !important;
border: none !important;
width: 100% !important;
box-sizing: border-box !important;
}
#page-oils .oil-card .card-subscribe > .card-atc,
#page-home .oil-card .card-subscribe > .card-atc,
.oils-grid .oil-card .card-subscribe > .card-atc {
display: flex !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 0.85rem 0.5rem !important;
background: var(--dark-azur, #1A1A1A) !important;
color: #fff !important;
border: none !important;
border-radius: 2px !important;
font-family: 'Jost', sans-serif !important;
font-size: var(--fs-overline) !important;
font-weight: 500 !important;
letter-spacing: var(--ls-xwide) !important;
text-transform: uppercase !important;
margin: 0 !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s var(--ease-luxe, ease) !important;
}
#page-oils .oil-card .card-subscribe > .card-atc:hover,
#page-home .oil-card .card-subscribe > .card-atc:hover {
background: var(--gold, #D4AF37) !important;
color: var(--dark-azur, #1A1A1A) !important;
transform: translateY(-1px);
}
/* Badge -15% corner */
.oils-grid .product-card .product-image::after,
#oilsPageGrid .product-card .product-image::after {
content: "−15 % abo";
position: absolute;
top: 8px;
right: 8px;
font-family: 'Jost', sans-serif;
font-size: 0.6rem;
font-weight: 500;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--tobacco-text);
background: rgba(255,255,255,0.92);
padding: 3px 8px;
border-radius: 2px;
backdrop-filter: blur(6px);
z-index: 3;
pointer-events: none;
}
.oils-grid .product-card:has(.product-badge) .product-image::after,
#oilsPageGrid .product-card:has(.product-badge) .product-image::after {
top: 44px;
}
/* ═══════════════════════════════════════════════════════════════
DÉTAILS PREMIUM (axe 7, conservé)
═══════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
.spa-page { transition: opacity 0.28s ease-out; }
.spa-page.d-none, .spa-page[style*="display:none"] { opacity: 0; }
a, button, .card-atc, .pdp-atc, .product-card, .quiz-option,
.filter-dot, .oil-filter-btn, .stories-cta, .home-cat-filter {
cursor: pointer;
}
.product-card {
transition: transform 0.35s var(--ease-luxe), box-shadow 0.35s var(--ease-luxe);
}
.product-card:hover { transform: translateY(-2px); }
.card-atc:hover, .btn:hover, .stories-cta:hover { transform: translateY(-1px); }
/* Photo placeholders avec monogramme A */
.photo-placeholder {
background-color: #F0E5DA;
background-image:
radial-gradient(circle at 50% 50%, rgba(26,26,26,0.04) 0%, transparent 65%),
linear-gradient(135deg, rgba(212,175,55,0.05) 0%, transparent 50%);
position: relative;
}
.photo-placeholder::before {
content: "A";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 4rem;
color: rgba(26,26,26,0.06);
pointer-events: none;
z-index: 0;
line-height: 1;
}
.photo-placeholder .photo-label {
position: relative;
z-index: 1;
}
/* ═══════════════════════════════════════════════════════════════
FIXES SPÉCIFIQUES (hero stories, quiz, review stars)
═══════════════════════════════════════════════════════════════ */
/* Hero stories : titre principal doit rester grand */
.stories-title {
font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
font-weight: 400 !important;
color: var(--white) !important;
}
.stories-sub,
.stories-price {
font-family: 'Jost', sans-serif !important;
font-weight: 400 !important;
letter-spacing: var(--ls-wide);
color: rgba(255,255,255,0.8);
}
.stories-price strong {
font-weight: 500 !important;
color: var(--gold);
}
/* ═══════════════════════════════════════════════════════════════
COFFRETS CADEAUX HOME — grille 2 cols centrée
═══════════════════════════════════════════════════════════════ */
#homeCoffretsWrapper {
max-width: 840px !important;
margin: 0 auto 2.5rem !important;
padding: 0 1rem;
text-align: center;
}
#homeCoffretsWrapper .home-coffrets-grid,
#homeCoffretsWrapper .products-grid.device-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 1.5rem !important;
max-width: 760px !important;
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
}
@media (max-width: 640px) {
#homeCoffretsWrapper .home-coffrets-grid,
#homeCoffretsWrapper .products-grid.device-grid {
grid-template-columns: 1fr !important;
max-width: 380px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
HEADER REDESIGN v3 — 2 rangées : Logo centré / Nav + Actions
Style éditorial (Hermès, Diptyque, Byredo)
═══════════════════════════════════════════════════════════════ */
/* 1. Shipping-bar ultra-fine 1 ligne */
.shipping-bar {
padding: 0.55rem 1.5rem !important;
background: var(--white) !important;
border-bottom: 1px solid rgba(26,26,26,0.06) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 2.2rem !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.7rem !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
color: rgba(26,26,26,0.72) !important;
flex-wrap: wrap !important;
}
.shipping-bar-item {
display: flex;
align-items: center;
gap: 0.45rem;
}
.shipping-bar-item svg {
width: 13px !important;
height: 13px !important;
opacity: 0.55;
flex-shrink: 0;
}
.shipping-bar-item .gold {
color: var(--dark-azur, #1A1A1A) !important;
font-weight: 500 !important;
}
@media (max-width: 760px) {
.shipping-bar { gap: 1rem !important; font-size: 0.62rem !important; padding: 0.5rem 0.8rem !important; }
.shipping-bar-item svg { width: 11px !important; height: 11px !important; }
.shipping-bar-item:nth-child(2) { display: none !important; }
}
/* 2. Header 2 rangées */
.header.header-redesign {
background: var(--white) !important;
border-bottom: 1px solid rgba(26,26,26,0.08) !important;
padding: 0 !important;
position: relative;
}
/* Masquer les anciens éléments header pour éviter doublons */
.header-redesign .header-logo,
.header-redesign .header-inner { display: none !important; }
/* ── Rangée 1 : LOGO ──────────────────── */
.header-brand-row {
padding: 1.6rem 2rem 0.9rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
/* Hamburger + actions-mobile cachés sur desktop */
.header-brand-row .mobile-toggle,
.header-brand-row .header-actions-mobile {
display: none;
}
.header-logo-center {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--dark-azur, #1A1A1A);
gap: 4px;
transition: opacity 0.3s ease;
}
.header-logo-center:hover { opacity: 0.75; }
.header-logo-center .logo-wordmark {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 2.1rem;
letter-spacing: 0.34em;
line-height: 1;
color: var(--dark-azur, #1A1A1A);
text-transform: uppercase;
padding-left: 0.34em; /* compensation letter-spacing */
}
.header-logo-center .logo-tagline {
font-family: 'Jost', sans-serif;
font-size: 0.58rem;
font-weight: 400;
letter-spacing: 0.24em;
line-height: 1.2;
color: rgba(26,26,26,0.5);
text-transform: uppercase;
margin-top: 4px;
}
/* ── Rangée 2 : NAV + ACTIONS ──────────── */
.header-nav-row {
display: flex;
align-items: center;
justify-content: center;
padding: 0.3rem 2rem 1rem;
position: relative;
border-top: 1px solid rgba(26,26,26,0.04);
padding-top: 0.9rem;
margin-top: 0.3rem;
}
.header-redesign .mega-nav.nav-main {
display: flex;
align-items: center;
justify-content: center;
}
.header-redesign .header-nav {
display: flex;
gap: 2.4rem;
list-style: none;
padding: 0;
margin: 0;
}
.header-redesign .header-nav a {
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dark-azur, #1A1A1A);
text-decoration: none;
position: relative;
padding: 4px 0;
transition: color 0.3s ease;
white-space: nowrap;
}
/* Ligne or discrète au hover */
.header-redesign .header-nav a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--gold, #D4AF37);
transition: width 0.4s var(--ease-luxe, ease);
}
.header-redesign .header-nav a:hover::after { width: 100%; }
.header-redesign .header-nav a:hover { color: var(--gold, #D4AF37); }
/* Supprimer "bouton contour" du Quiz */
.header-redesign .header-nav li.nav-cta a,
.header-redesign .header-nav a {
border: none !important;
border-radius: 0 !important;
padding: 4px 0 !important;
background: transparent !important;
}
/* Actions en absolute à droite sur la rangée nav */
.header-actions.header-actions-v2 {
position: absolute;
top: 50%;
right: 2rem;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 2px;
z-index: 10;
}
.header-redesign .header-icon-btn,
.header-redesign .lang-toggle {
width: 34px;
height: 34px;
border: none;
background: transparent;
color: var(--dark-azur, #1A1A1A);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.25s ease;
border-radius: 50%;
padding: 0;
}
.header-redesign .header-icon-btn svg {
width: 17px;
height: 17px;
stroke-width: 1.4;
fill: none;
stroke: currentColor;
}
.header-redesign .header-icon-btn:hover,
.header-redesign .lang-toggle:hover {
background: rgba(26,26,26,0.05);
color: var(--gold, #D4AF37);
}
.header-redesign .lang-toggle {
width: auto;
padding: 0 8px;
gap: 3px;
font-family: 'Jost', sans-serif;
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 14px;
}
.header-redesign .lang-toggle .lang-flag { font-size: 0.78rem; }
.header-redesign .cart-badge {
position: absolute;
top: 2px;
right: 2px;
background: var(--gold, #D4AF37);
color: #fff;
font-family: 'Jost', sans-serif;
font-size: 0.55rem;
font-weight: 600;
min-width: 15px;
height: 15px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
box-sizing: border-box;
line-height: 1;
}
/* Tablet : réduire espacement */
@media (max-width: 1200px) {
.header-redesign .header-nav { gap: 1.8rem; }
.header-redesign .header-nav a { font-size: 0.68rem; letter-spacing: 0.14em; }
.header-logo-center .logo-wordmark { font-size: 1.9rem; letter-spacing: 0.3em; }
}
@media (max-width: 1024px) {
.header-redesign .header-nav { gap: 1.3rem; }
.header-redesign .header-nav a { font-size: 0.64rem; letter-spacing: 0.12em; }
/* Masquer Pro ET Quiz sur tablet (trop serré) */
.header-redesign .header-nav li:nth-last-child(1),
.header-redesign .header-nav li:nth-last-child(2) { display: none; }
.header-actions.header-actions-v2 { right: 1rem; }
.header-redesign .lang-toggle { padding: 0 6px; }
.header-logo-center .logo-wordmark { font-size: 1.8rem; letter-spacing: 0.28em; }
}
/* Mobile : logo centré + hamburger + actions minimales */
@media (max-width: 900px) {
.header-brand-row {
padding: 0.9rem 1rem !important;
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
gap: 0.5rem !important;
position: relative;
}
.header-logo-center {
grid-column: 2;
justify-self: center;
}
.header-logo-center .logo-wordmark { font-size: 1.25rem; letter-spacing: 0.2em; padding-left: 0.2em; }
.header-logo-center .logo-tagline { font-size: 0.48rem; letter-spacing: 0.16em; margin-top: 2px; }
/* Cacher la rangée 2 entière sur mobile (remplacée par burger menu) */
.header-nav-row {
display: none !important;
}
/* Hamburger à gauche du logo */
.header-brand-row .mobile-toggle {
display: flex !important;
grid-column: 1;
justify-self: start;
flex-direction: column;
gap: 4px;
cursor: pointer;
padding: 8px;
z-index: 5;
}
.header-brand-row .mobile-toggle span {
width: 22px;
height: 1.5px;
background: var(--dark-azur, #1A1A1A);
}
/* Actions à droite du logo (panier + éventuellement search) */
.header-brand-row .header-actions-mobile {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: 0;
}
.header-brand-row .header-actions-mobile .header-icon-btn {
width: 36px;
height: 36px;
border: none;
background: transparent;
color: var(--dark-azur, #1A1A1A);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 50%;
padding: 0;
}
.header-brand-row .header-actions-mobile .header-icon-btn svg {
width: 18px;
height: 18px;
stroke-width: 1.4;
fill: none;
stroke: currentColor;
}
.header-brand-row .header-actions-mobile .cart-badge {
position: absolute;
top: 4px;
right: 4px;
background: var(--gold, #D4AF37);
color: #fff;
font-family: 'Jost', sans-serif;
font-size: 0.5rem;
font-weight: 600;
min-width: 14px;
height: 14px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
}
/* Mega dropdowns : position absolue centrée sous la nav */
.header-redesign .has-mega { position: relative; }
.header-redesign .mega-drop {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--white);
border: 1px solid rgba(26,26,26,0.08);
padding: 2rem;
min-width: 620px;
box-shadow: 0 10px 40px rgba(26,26,26,0.08);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
z-index: 100;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2.5rem;
margin-top: 0.5rem;
}
.header-redesign .has-mega:hover .mega-drop {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
/* ═══════════════════════════════════════════════════════════════
QUICK SUBSCRIBE — Panel au hover/tap sur cards home (v2)
Sélecteur de taille + Achat unique/Abonnement + ATC dynamique
═══════════════════════════════════════════════════════════════ */
#page-home .oil-card .quick-sub-overlay {
position: absolute !important;
inset: 0 !important;
background: rgba(26,26,26,0.96);
backdrop-filter: blur(2px);
color: #fff;
display: flex !important;
flex-direction: column;
justify-content: center;
padding: 1.1rem 1rem 1rem;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(6px);
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0.22s;
z-index: 10;
pointer-events: none !important;
box-sizing: border-box;
gap: 0.6rem;
overflow: hidden;
}
#page-home .oil-card:hover .quick-sub-overlay,
#page-home .oil-card.qs-open .quick-sub-overlay {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0);
transition-delay: 0s;
pointer-events: auto !important;
}
#page-home .oil-card {
position: relative;
overflow: hidden;
}
/* Header overlay */
.quick-sub-overlay .qs-name {
font-family: 'Jost', sans-serif;
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(212,175,55,0.9); /* gold */
text-align: center;
margin: 0;
}
.quick-sub-overlay .qs-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 400;
letter-spacing: -0.01em;
text-align: center;
color: #fff;
margin: 0 0 0.2rem;
line-height: 1.2;
}
/* Size pills */
.quick-sub-overlay .qs-sizes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.quick-sub-overlay .qs-size-pill {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem 0.2rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 3px;
color: rgba(255, 255, 255, 0.75);
font-family: 'Jost', sans-serif;
cursor: pointer;
transition: all 0.2s ease;
line-height: 1.2;
gap: 2px;
}
.quick-sub-overlay .qs-size-pill:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.quick-sub-overlay .qs-size-pill.active {
background: #fff;
color: var(--dark-azur, #1A1A1A);
border-color: #fff;
}
.quick-sub-overlay .qs-size-ml {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.02em;
}
.quick-sub-overlay .qs-size-price {
font-size: 0.62rem;
font-weight: 400;
opacity: 0.75;
font-variant-numeric: tabular-nums;
}
.quick-sub-overlay .qs-size-pill.active .qs-size-price {
opacity: 0.85;
}
/* Purchase options (Achat unique / Abonnement) */
.quick-sub-overlay .qs-purchase {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 0.15rem;
}
.quick-sub-overlay .qs-option {
display: grid;
grid-template-columns: 18px 1fr auto;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.7rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 3px;
color: rgba(255, 255, 255, 0.85);
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
line-height: 1.3;
}
.quick-sub-overlay .qs-option:hover {
background: rgba(255, 255, 255, 0.08);
}
.quick-sub-overlay .qs-option.active {
background: rgba(212,175,55,0.14);
border-color: var(--gold, #D4AF37);
color: #fff;
}
.quick-sub-overlay .qs-radio {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.35);
position: relative;
transition: all 0.2s ease;
flex-shrink: 0;
}
.quick-sub-overlay .qs-option.active .qs-radio {
border-color: var(--gold, #D4AF37);
}
.quick-sub-overlay .qs-option.active .qs-radio::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--gold, #D4AF37);
}
.quick-sub-overlay .qs-opt-label {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.02em;
display: flex;
flex-direction: column;
gap: 1px;
}
.quick-sub-overlay .qs-opt-label small {
font-size: 0.58rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.02em;
}
.quick-sub-overlay .qs-discount-chip {
display: inline-block;
background: var(--gold, #D4AF37);
color: #1A1A1A;
padding: 1px 6px;
border-radius: 2px;
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.06em;
margin-left: 4px;
vertical-align: middle;
}
.quick-sub-overlay .qs-opt-price {
font-family: 'Jost', sans-serif;
font-size: 0.82rem;
font-weight: 600;
color: #fff;
font-variant-numeric: tabular-nums;
text-align: right;
}
/* CTA ATC */
.quick-sub-overlay .qs-atc {
width: 100%;
padding: 0.85rem 0.6rem;
background: #fff;
color: #1A1A1A;
border: none;
border-radius: 2px;
font-family: 'Jost', sans-serif;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s ease;
font-variant-numeric: tabular-nums;
margin-top: 0.2rem;
}
.quick-sub-overlay .qs-atc:hover {
background: var(--gold, #D4AF37);
transform: translateY(-1px);
}
.quick-sub-overlay .qs-atc.done {
background: var(--gold, #D4AF37);
color: #1A1A1A;
}
/* Lien "Voir les détails" */
.quick-sub-overlay .qs-details {
font-family: 'Jost', sans-serif;
font-size: 0.56rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
text-align: center;
text-decoration: none;
margin-top: 0.1rem;
cursor: pointer;
transition: color 0.2s;
}
.quick-sub-overlay .qs-details:hover {
color: rgba(255, 255, 255, 0.9);
}
/* Bouton close overlay */
.quick-sub-overlay .qs-close {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
background: rgba(255,255,255,0.1);
border: none;
border-radius: 50%;
color: #fff;
font-size: 0.95rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 0;
z-index: 2;
}
.quick-sub-overlay .qs-close:hover {
background: rgba(255,255,255,0.2);
}
/* Bouton trigger mobile (caché desktop) */
.qs-mobile-trigger {
display: none;
position: absolute;
bottom: 10px;
right: 10px;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--gold, #D4AF37);
color: #1A1A1A;
border: none;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
z-index: 8;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
line-height: 1;
}
/* Mobile : tap pour ouvrir le panel */
@media (max-width: 900px) {
/* Sur mobile, pas de hover (le :hover stuck cause bug) - uniquement qs-open */
#page-home .oil-card:hover .quick-sub-overlay {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
#page-home .oil-card.qs-open .quick-sub-overlay {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
#page-home .oil-card .qs-mobile-trigger {
display: flex;
}
/* CRITIQUE : masquer l'ancien système card-subscribe + card-sizes + card-price-always
sur mobile (home) pour éviter doublon avec le quick-sub overlay */
#page-home .oil-card .card-subscribe,
#page-home .oil-card .card-sizes,
#page-home .oil-card .card-atc,
#page-home .oil-card .card-sub-toggle {
display: none !important;
}
/* Card price always OK sur mobile (reste visible en permanence) */
#page-home .oil-card .card-price-always {
display: block !important;
padding: 0.4rem 0.8rem 0.8rem !important;
}
.quick-sub-overlay .qs-sizes {
gap: 3px;
}
.quick-sub-overlay .qs-size-pill {
padding: 0.4rem 0.15rem;
}
.quick-sub-overlay .qs-size-ml {
font-size: 0.65rem;
}
.quick-sub-overlay .qs-size-price {
font-size: 0.56rem;
}
}
@media (max-width: 900px) {
/* 1. Masquer tous les éléments redondants dans les oil-cards de home
(remplacés par le quick-subscribe overlay au tap sur "+") */
#page-home .product-card.oil-card .card-subscribe,
#page-home .product-card.oil-card .card-meta,
#page-home .product-card.oil-card .card-sizes,
#page-home .product-card.oil-card .card-sub-toggle,
#page-home .product-card.oil-card .product-footer,
#page-home .product-card.oil-card .card-subscribe > button.card-atc,
#page-home .product-card.oil-card .card-subscribe .card-sub-row,
#page-home .product-card.oil-card .card-subscribe .card-sub-label,
#page-home .product-card.oil-card .card-subscribe .card-sub-perks {
display: none !important;
}
/* 2. Compacter la card : nom + notes + prix + bouton discret */
#page-home .product-card.oil-card {
overflow: hidden !important;
border-radius: 4px !important;
}
#page-home .product-card.oil-card .product-info {
padding: 0.55rem 0.65rem 0.7rem !important;
display: flex !important;
flex-direction: column !important;
gap: 0.2rem !important;
}
#page-home .product-card.oil-card .product-name {
font-family: 'Cormorant Garamond', serif !important;
font-weight: 400 !important;
font-size: 0.95rem !important;
line-height: 1.15 !important;
margin: 0 0 2px !important;
color: var(--dark-azur, #1A1A1A) !important;
}
#page-home .product-card.oil-card .product-notes {
font-family: 'Jost', sans-serif !important;
font-size: 0.6rem !important;
font-weight: 400 !important;
line-height: 1.3 !important;
color: rgba(26,26,26,0.5) !important;
margin: 0 0 0.35rem !important;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
letter-spacing: 0.02em;
}
/* 3. card-price-always : ligne unique compacte "Dès 25€" */
#page-home .product-card.oil-card .card-price-always {
display: block !important;
padding: 0.25rem 0 !important;
margin: 0 !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.7rem !important;
font-weight: 400 !important;
color: rgba(26,26,26,0.55) !important;
line-height: 1.3 !important;
letter-spacing: 0.02em !important;
border: none !important;
}
#page-home .product-card.oil-card .card-price-always strong {
font-family: 'Jost', sans-serif !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
color: var(--gold, #D4AF37) !important;
margin-left: 2px;
}
/* 4. Masquer tous les autres éléments "Abo -15%" / tagline éventuelles */
#page-home .product-card.oil-card .product-info > div:not(.product-name):not(.product-notes):not(.card-price-always):not(.card-sizes):not(.card-subscribe):not(.card-meta) {
/* div libres entre nos éléments — à cacher si non liste blanche */
}
/* 5. Badge "Meilleures ventes" plus petit */
#page-home .product-card.oil-card .product-badge {
font-size: 0.5rem !important;
padding: 2px 6px !important;
top: 8px !important;
left: 8px !important;
letter-spacing: 0.1em !important;
font-weight: 500 !important;
}
/* 6. Image : garder 1:1 mais ombre discrète pour différencier */
#page-home .product-card.oil-card .product-image {
aspect-ratio: 1 / 1 !important;
}
/* 7. Bouton +gold bien visible en bottom-right de la card */
#page-home .product-card.oil-card .qs-mobile-trigger {
display: flex !important;
bottom: 6px !important;
right: 6px !important;
width: 32px !important;
height: 32px !important;
font-size: 1rem !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}
/* 7b. MASQUER l'ancien système mobile bottom sheet (remplacé par quick-sub overlay) */
#page-home .product-card.oil-card .mbs-add-btn,
#page-home .product-card.oil-card .product-quick-add {
display: none !important;
}
/* 7c. Tag "−15% avec abonnement" compact (évite tronquage) — version courte mobile */
#page-home .product-card.oil-card .card-price-always::after {
content: '−15% en abonnement' !important;
font-size: 0.55rem !important;
letter-spacing: 0.02em !important;
margin-top: 0.15rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
/* 8. Grille 2 colonnes avec gap serré — FRAGRANCES uniquement */
#page-home #homePanelHuiles .products-grid,
#page-home #collection .products-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.55rem !important;
padding: 0 0.8rem !important;
}
/* 8b. Coffrets restent en 1 colonne (textes plus longs, plus lisible) */
#page-home #homeCoffretsWrapper .home-coffrets-grid,
#page-home #homeCoffretsWrapper .products-grid {
grid-template-columns: 1fr !important;
max-width: 380px !important;
margin: 0 auto !important;
gap: 1rem !important;
padding: 0 1rem !important;
}
/* 9. CRITIQUE : rendre le bouton cœur visible sur mobile (pas de hover)
Sinon impossible d'ajouter des produits aux favoris */
.product-card-wishlist,
#page-home .product-card-wishlist,
#page-oils .product-card-wishlist,
.oil-card .product-card-wishlist {
opacity: 1 !important;
background: rgba(255, 255, 255, 0.92) !important;
width: 36px !important;
height: 36px !important;
top: 8px !important;
right: 8px !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}
.product-card-wishlist.active {
background: rgba(255, 255, 255, 0.98) !important;
}
.product-card-wishlist svg {
width: 16px !important;
height: 16px !important;
}
/* 10. Badge wishlist mobile : style cohérent avec cart */
#wishlistBtnMobile .cart-badge {
position: absolute !important;
top: 2px !important;
right: 2px !important;
background: var(--gold, #D4AF37) !important;
color: #fff !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.5rem !important;
font-weight: 600 !important;
min-width: 14px !important;
height: 14px !important;
border-radius: 7px !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
padding: 0 3px !important;
line-height: 1 !important;
}
#wishlistBtnMobile .cart-badge.visible {
display: flex !important;
}
}
/* Trust badges : 3 pictos alignés horizontalement (style Diptyque) */
.pdp-trust-badges {
display: flex;
gap: 0.5rem;
padding: 1rem 0;
margin: 0.8rem 0 0;
border-top: 0.5px solid rgba(26,26,26,0.08);
border-bottom: 0.5px solid rgba(26,26,26,0.08);
}
.pdp-trust-badge {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
text-align: center;
color: rgba(26,26,26,0.75);
}
.pdp-trust-badge svg {
color: var(--gold, #D4AF37);
flex-shrink: 0;
}
.pdp-trust-badge-text {
font-family: 'Jost', sans-serif;
line-height: 1.3;
}
.pdp-trust-badge-text strong {
display: block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--dark-azur, #1A1A1A);
}
.pdp-trust-badge-text small {
display: block;
font-size: 0.58rem;
font-weight: 400;
color: rgba(26,26,26,0.55);
margin-top: 1px;
letter-spacing: 0.02em;
}
/* Réassurance : liste checks avec police éditoriale */
.pdp-reassurance {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem 0 0.4rem;
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
line-height: 1.45;
color: rgba(26,26,26,0.78);
}
.pdp-reassurance-item {
display: flex;
align-items: flex-start;
gap: 0.6rem;
}
.pdp-reassurance-check {
color: var(--gold, #D4AF37);
font-weight: 700;
font-size: 0.85rem;
flex-shrink: 0;
line-height: 1.3;
}
.pdp-reassurance-item strong {
font-weight: 600;
color: var(--dark-azur, #1A1A1A);
}
/* Durée d'utilisation : hint discret sous les pills de taille */
.pdp-duration-hint {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.6rem 0.8rem;
margin: 0 0 1rem;
background: rgba(201, 168, 106, 0.06);
border-left: 2px solid var(--gold, #D4AF37);
border-radius: 2px;
font-family: 'Jost', sans-serif;
font-size: 0.65rem;
line-height: 1.4;
color: rgba(26,26,26,0.7);
letter-spacing: 0.01em;
}
.pdp-duration-hint svg {
color: var(--gold, #D4AF37);
flex-shrink: 0;
}
.pdp-duration-hint strong {
color: var(--dark-azur, #1A1A1A);
font-weight: 600;
}
/* Mobile : trust badges empilent 2 par rangée si trop serrés */
@media (max-width: 600px) {
.pdp-trust-badges {
gap: 0.3rem;
}
.pdp-trust-badge-text strong {
font-size: 0.62rem;
}
.pdp-trust-badge-text small {
font-size: 0.52rem;
}
.pdp-reassurance {
font-size: 0.68rem;
}
.pdp-duration-hint {
font-size: 0.6rem;
padding: 0.5rem 0.7rem;
}
}
/* ═══ 1. GRID : force même hauteur pour toutes les cards d'une même rangée ═══ */
#page-home .products-grid,
#page-home #homePanelHuiles .products-grid,
#page-home #collection .products-grid {
align-items: stretch !important;
}
/* ═══ 2. CARD : flex column pour push ATC en bas ═══ */
#page-home .product-card.oil-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
position: relative !important;
overflow: hidden !important;
}
/* ═══ 3. BADGE : position absolute sur l'image (ne décale plus la card) ═══ */
#page-home .product-card.oil-card .product-badge {
position: absolute !important;
top: 12px !important;
left: 12px !important;
z-index: 3 !important;
background: rgba(26,26,26,0.88) !important;
color: var(--gold, #D4AF37) !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.55rem !important;
font-weight: 500 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
padding: 5px 10px !important;
border-radius: 2px !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
letter-spacing: 0.12em !important;
}
#page-home .product-card.oil-card .product-badge.badge-bestseller {
background: var(--gold, #D4AF37) !important;
color: #fff !important;
}
/* ═══ 4. IMAGE : ratio fixe partout ═══ */
#page-home .product-card.oil-card .product-image {
aspect-ratio: 1 / 1 !important;
flex-shrink: 0 !important;
}
/* ═══ 5. PRODUCT-INFO : flex column pour distribuer en bas ═══ */
#page-home .product-card.oil-card .product-info {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
padding: 1rem 1rem 1.1rem !important;
}
/* ═══ 6. NOM : hauteur fixe 1 ligne ═══ */
#page-home .product-card.oil-card .product-name {
font-family: 'Cormorant Garamond', serif !important;
font-weight: 400 !important;
font-size: 1.05rem !important;
line-height: 1.3 !important;
color: var(--dark-azur, #1A1A1A) !important;
margin: 0 0 0.35rem !important;
min-height: 1.35rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ═══ 7. NOTES : min-height 2 lignes (uniforme pour toutes) ═══ */
#page-home .product-card.oil-card .product-notes {
font-family: 'Jost', sans-serif !important;
font-size: 0.68rem !important;
font-weight: 400 !important;
line-height: 1.45 !important;
color: rgba(26,26,26,0.55) !important;
letter-spacing: 0.02em !important;
margin: 0 0 0.7rem !important;
/* Force exactement 2 lignes - les notes courtes auront l'air réparties, pas collées */
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
min-height: 2em !important;
}
/* ═══ 8. CARD-META : rating + intensity alignés ═══ */
#page-home .product-card.oil-card .card-meta {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 0.6rem !important;
padding: 0.2rem 0 0.5rem !important;
border-bottom: 1px solid rgba(26,26,26,0.06) !important;
margin: 0 0 0.7rem !important;
font-size: 0.7rem !important;
}
#page-home .product-card.oil-card .card-rating {
font-family: 'Jost', sans-serif !important;
font-size: 0.72rem !important;
font-weight: 500 !important;
color: var(--dark-azur, #1A1A1A) !important;
letter-spacing: 0.02em !important;
}
#page-home .product-card.oil-card .card-rating small {
color: rgba(26,26,26,0.5) !important;
font-weight: 400 !important;
margin-left: 2px !important;
}
/* Masquer card-social ("290+ vendus") car pas uniforme sur toutes */
#page-home .product-card.oil-card .card-social {
display: none !important;
}
/* Masquer card-intensity (barres variables) - déjà abstrait */
#page-home .product-card.oil-card .card-intensity {
display: inline-flex !important;
gap: 2px !important;
}
#page-home .product-card.oil-card .intensity-bars {
display: flex !important;
gap: 2px !important;
}
#page-home .product-card.oil-card .intensity-bars .bar {
width: 3px !important;
height: 12px !important;
background: rgba(26,26,26,0.15) !important;
border-radius: 1px !important;
}
#page-home .product-card.oil-card .intensity-bars .bar.on {
background: var(--gold, #D4AF37) !important;
}
/* ═══ 9. PRIX : bloc uniforme "Dès 25€ — -15% abonnement" ═══ */
#page-home .product-card.oil-card .card-price-always {
font-family: 'Jost', sans-serif !important;
font-size: 0.75rem !important;
color: rgba(26,26,26,0.6) !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.3 !important;
display: block !important;
}
#page-home .product-card.oil-card .card-price-always strong {
font-size: 1rem !important;
font-weight: 600 !important;
color: var(--gold, #D4AF37) !important;
margin-left: 2px !important;
}
/* ═══ 10. CARD-SUBSCRIBE : pousser en bas avec margin-top: auto ═══ */
#page-home .product-card.oil-card .card-subscribe {
margin-top: auto !important;
margin-bottom: 0 !important;
padding-top: 0.7rem !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
background: transparent !important;
border: none !important;
gap: 0 !important;
}
/* ═══ 11. MASQUER bloc "sub-row" + perks (trop lourd sur card compacte) ═══ */
#page-home .product-card.oil-card .card-subscribe .card-sub-row,
#page-home .product-card.oil-card .card-subscribe .card-sub-perks,
#page-home .product-card.oil-card .card-subscribe .card-sub-label,
#page-home .product-card.oil-card .card-subscribe .card-sub-toggle {
display: none !important;
}
/* ═══ 12. ATC BUTTON : toujours en bas, uniforme ═══ */
#page-home .product-card.oil-card .card-subscribe > button.card-atc {
width: 100% !important;
padding: 0.8rem 1rem !important;
background: var(--dark-azur, #1A1A1A) !important;
color: #fff !important;
border: none !important;
border-radius: 2px !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.68rem !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
cursor: pointer !important;
margin: 0 !important;
transition: background 0.3s ease !important;
}
#page-home .product-card.oil-card .card-subscribe > button.card-atc:hover {
background: var(--gold, #D4AF37) !important;
color: var(--dark-azur, #1A1A1A) !important;
transform: none !important;
}
/* ═══ 13. MASQUER product-footer et product-quick-add (redondants) ═══ */
#page-home .product-card.oil-card .product-footer,
#page-home .product-card.oil-card .product-quick-add {
display: none !important;
}
/* ═══ 14. MOBILE : ajustements tailles (garder cards compactes 276px) ═══ */
@media (max-width: 900px) {
#page-home .product-card.oil-card .product-badge {
top: 6px !important;
left: 6px !important;
font-size: 0.5rem !important;
padding: 3px 7px !important;
letter-spacing: 0.1em !important;
}
#page-home .product-card.oil-card .product-info {
padding: 0.55rem 0.65rem 0.7rem !important;
}
#page-home .product-card.oil-card .product-name {
font-size: 0.9rem !important;
margin-bottom: 2px !important;
min-height: 1.1rem !important;
}
#page-home .product-card.oil-card .product-notes {
font-size: 0.6rem !important;
line-height: 1.3 !important;
margin-bottom: 0.35rem !important;
min-height: 1.5em !important;
}
#page-home .product-card.oil-card .card-meta {
display: none !important; /* gain de place sur mobile */
}
#page-home .product-card.oil-card .card-price-always {
font-size: 0.7rem !important;
}
#page-home .product-card.oil-card .card-price-always strong {
font-size: 0.95rem !important;
}
#page-home .product-card.oil-card .card-subscribe > button.card-atc {
padding: 8px 10px !important;
font-size: 0.62rem !important;
letter-spacing: 0.1em !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
QUICK-SUBSCRIBE OVERLAY — Version MOBILE compacte
Card = 269px → tout doit tenir dedans sans déborder
Le titre "Comment le voulez-vous ?" est coupé avant ce fix
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* 1. Overlay : padding réduit pour gagner 18px verticaux */
#page-home .oil-card .quick-sub-overlay {
padding: 0.55rem 0.55rem 0.55rem !important;
gap: 0.35rem !important;
justify-content: flex-start !important;
}
/* 2. Nom produit overline : plus petit */
#page-home .oil-card .quick-sub-overlay .qs-name {
font-size: 0.48rem !important;
letter-spacing: 0.14em !important;
margin-bottom: 0 !important;
padding-bottom: 2px !important;
}
/* 3. Titre "Comment le voulez-vous ?" : compact, pas coupé */
#page-home .oil-card .quick-sub-overlay .qs-title {
font-size: 0.78rem !important;
line-height: 1.1 !important;
margin: 0 0 0.25rem !important;
padding: 0 !important;
}
/* 4. Pills de taille : compactes 26px */
#page-home .oil-card .quick-sub-overlay .qs-sizes {
gap: 2px !important;
margin-bottom: 0.15rem !important;
}
#page-home .oil-card .quick-sub-overlay .qs-size-pill {
padding: 3px 2px !important;
min-height: 26px !important;
border-radius: 2px !important;
}
#page-home .oil-card .quick-sub-overlay .qs-size-ml {
font-size: 0.55rem !important;
line-height: 1 !important;
margin-bottom: 1px !important;
}
#page-home .oil-card .quick-sub-overlay .qs-size-price {
font-size: 0.5rem !important;
line-height: 1 !important;
}
/* 5. Options achat unique / abonnement : compactes 30px chacune */
#page-home .oil-card .quick-sub-overlay .qs-purchase {
gap: 3px !important;
margin: 0.2rem 0 !important;
}
#page-home .oil-card .quick-sub-overlay .qs-option {
padding: 4px 6px !important;
gap: 5px !important;
min-height: 28px !important;
align-items: center !important;
}
#page-home .oil-card .quick-sub-overlay .qs-radio {
width: 11px !important;
height: 11px !important;
flex-shrink: 0 !important;
}
#page-home .oil-card .quick-sub-overlay .qs-option.active .qs-radio::after {
width: 5px !important;
height: 5px !important;
}
#page-home .oil-card .quick-sub-overlay .qs-opt-label {
font-size: 0.6rem !important;
line-height: 1.1 !important;
flex: 1 !important;
overflow: hidden !important;
}
/* Masquer les sous-titres "Livré tous les X jours · Sans engagement" */
#page-home .oil-card .quick-sub-overlay .qs-opt-label small {
display: none !important;
}
#page-home .oil-card .quick-sub-overlay .qs-discount-chip {
font-size: 0.5rem !important;
padding: 1px 4px !important;
margin-left: 3px !important;
}
#page-home .oil-card .quick-sub-overlay .qs-opt-price {
font-size: 0.62rem !important;
font-weight: 600 !important;
flex-shrink: 0 !important;
}
/* 6. Bouton ATC : compact 34px au lieu de 60px */
#page-home .oil-card .quick-sub-overlay .qs-atc {
padding: 8px 6px !important;
font-size: 0.58rem !important;
letter-spacing: 0.1em !important;
min-height: 34px !important;
margin-top: 0.15rem !important;
border-radius: 2px !important;
}
/* 7. Lien "Voir les détails" : masquer sur mobile (prend trop de place) */
#page-home .oil-card .quick-sub-overlay .qs-details {
display: none !important;
}
/* 8. Bouton close × plus petit */
#page-home .oil-card .quick-sub-overlay .qs-close {
width: 22px !important;
height: 22px !important;
top: 4px !important;
right: 4px !important;
font-size: 0.9rem !important;
}
/* ═══════════════════════════════════════════════════════════════════
FILTRES FAMILLES OLFACTIVES — scroll horizontal mobile
7 filtres = 607px > 352px viewport → scroll propre avec fade
═══════════════════════════════════════════════════════════════════ */
#page-home .oil-family-filters,
#page-oils .oil-family-pills {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scroll-behavior: smooth !important;
scroll-snap-type: x mandatory !important;
padding: 0.4rem 1rem 0.8rem !important;
margin: 0 -1rem !important; /* sort du padding parent pour full-bleed */
gap: 0.5rem !important;
/* Mask gradient à droite pour indiquer scroll */
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 30px), transparent 100%);
mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 30px), transparent 100%);
justify-content: flex-start !important;
}
/* Masquer scrollbar proprement */
#page-home .oil-family-filters::-webkit-scrollbar,
#page-oils .oil-family-pills::-webkit-scrollbar {
display: none !important;
}
#page-home .oil-family-filters,
#page-oils .oil-family-pills {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
#page-home .oil-family-filters .oil-family-btn,
#page-oils .oil-family-pills .oil-filter-btn {
flex-shrink: 0 !important;
scroll-snap-align: start !important;
padding: 0.4rem 0.9rem !important;
font-size: 0.7rem !important;
letter-spacing: 0.02em !important;
white-space: nowrap !important;
min-height: 32px !important;
display: flex !important;
align-items: center !important;
gap: 0.4rem !important;
font-weight: 400 !important;
}
#page-home .oil-family-filters .oil-family-btn.active,
#page-oils .oil-family-pills .oil-filter-btn.active {
background: var(--dark-azur, #1A1A1A) !important;
color: #fff !important;
border-color: var(--dark-azur, #1A1A1A) !important;
}
#page-home .oil-family-filters .family-dot,
#page-oils .oil-family-pills .filter-dot {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
display: inline-block !important;
flex-shrink: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════
PAGE /oils — APPLIQUER les règles cards-uniform sur #page-oils aussi
Les boutons ATC débordaient jusqu'à 162px (bug majeur mobile)
═══════════════════════════════════════════════════════════════════ */
#page-oils .product-card.oil-card {
overflow: hidden !important;
}
#page-oils .product-card.oil-card .product-footer {
display: none !important;
}
#page-oils .product-card.oil-card .card-atc,
#page-oils .product-card.oil-card .card-subscribe > button.card-atc {
width: 100% !important;
max-width: 100% !important;
padding: 0.7rem 0.5rem !important;
font-size: 0.6rem !important;
letter-spacing: 0.08em !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#page-oils .product-card.oil-card .product-info {
padding: 0.6rem 0.7rem 0.7rem !important;
}
#page-oils .product-card.oil-card .card-meta {
display: none !important;
}
#page-oils .product-card.oil-card .card-subscribe .card-sub-row,
#page-oils .product-card.oil-card .card-subscribe .card-sub-perks,
#page-oils .product-card.oil-card .card-subscribe .card-sub-label,
#page-oils .product-card.oil-card .card-subscribe .card-sub-toggle {
display: none !important;
}
/* Oils grid = 2 colonnes sur mobile */
#page-oils .oils-grid,
#page-oils .products-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.55rem !important;
padding: 0 0.8rem !important;
}
/* ═══════════════════════════════════════════════════════════════════
FIX #2 — PDP MOBILE : table comparative scroll horizontal + size-badge
Table .pdp-compare-table fait 673px sur viewport 390px (débordait 299px)
═══════════════════════════════════════════════════════════════════ */
#page-product .pdp-compare,
#page-product .pdp-compare-inner {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: thin !important;
/* Fade gradient à droite pour indiquer le scroll */
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 40px), transparent 100%);
mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 40px), transparent 100%);
}
#page-product .pdp-compare-table {
min-width: 600px !important; /* Force la table à rester lisible même si elle scroll */
font-size: 0.7rem !important;
}
#page-product .pdp-compare-table th,
#page-product .pdp-compare-table td {
padding: 0.5rem 0.6rem !important;
font-size: 0.7rem !important;
line-height: 1.3 !important;
}
#page-product .pdp-compare-table th:first-child,
#page-product .pdp-compare-table td:first-child {
position: sticky !important;
left: 0 !important;
background: var(--offwhite, #F5F3F0) !important;
z-index: 2 !important;
min-width: 130px !important;
box-shadow: 2px 0 6px rgba(0,0,0,0.04) !important;
}
#page-product .pdp-compare-table::-webkit-scrollbar {
height: 4px !important;
}
/* Size-badge "Meilleur rapport qualité-prix" : compact + tient sur mobile */
#page-product .pdp-sizes .size-badge {
font-size: 0.5rem !important;
padding: 2px 6px !important;
max-width: calc(100% - 12px) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
letter-spacing: 0.04em !important;
}
/* PDP sizes : 4 tailles en grid 2×2 sur mobile au lieu de row */
#page-product .pdp-sizes {
flex-wrap: wrap !important;
gap: 0.5rem !important;
}
#page-product .pdp-sizes .size-option {
flex: 1 1 calc(50% - 0.3rem) !important;
min-width: 0 !important;
max-width: calc(50% - 0.3rem) !important;
}
/* ═══════════════════════════════════════════════════════════════════
FIX #3 — PAGE /diffusers MOBILE : table comparative scroll horizontal
.compare-table débordait de 81px (wrapper = .compare-section)
═══════════════════════════════════════════════════════════════════ */
#page-diffusers .compare-section {
padding: 2rem 0 !important;
overflow: hidden !important;
}
#page-diffusers .compare-section .compare-title {
padding: 0 1rem !important;
}
#page-diffusers .compare-section > p {
padding: 0 1rem !important;
}
/* Table wrapper : scroll horizontal natif */
#page-diffusers .compare-section .compare-table {
display: block !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
white-space: nowrap !important;
max-width: 100% !important;
min-width: 0 !important;
/* Fade à droite pour signaler scroll */
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 40px), transparent 100%);
mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 40px), transparent 100%);
}
#page-diffusers .compare-section .compare-table thead,
#page-diffusers .compare-section .compare-table tbody {
display: table !important;
width: max-content !important;
min-width: 100% !important;
}
#page-diffusers .compare-section .compare-table th,
#page-diffusers .compare-section .compare-table td {
padding: 0.55rem 0.7rem !important;
font-size: 0.7rem !important;
min-width: 90px !important;
white-space: normal !important;
}
#page-diffusers .compare-section .compare-table th:first-child,
#page-diffusers .compare-section .compare-table td:first-child {
position: sticky !important;
left: 0 !important;
background: var(--cream, #F5F3F0) !important;
z-index: 2 !important;
min-width: 110px !important;
max-width: 110px !important;
box-shadow: 2px 0 6px rgba(0,0,0,0.04) !important;
}
#page-diffusers .compare-section .compare-table::-webkit-scrollbar {
height: 4px !important;
}
/* CTAs sous la table : stackés sur mobile */
#page-diffusers .compare-section .compare-ctas {
flex-direction: column !important;
gap: 0.5rem !important;
padding: 0 1rem !important;
}
#page-diffusers .compare-section .compare-cta-btn {
width: 100% !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
FIX #4 — .stories-progress : débordait de 12px desktop + mobile
Correction via max-width (pas dans un media query car s'applique partout)
═══════════════════════════════════════════════════════════════════ */
.stories-progress {
width: calc(100% - 24px) !important;
max-width: calc(100% - 24px) !important;
box-sizing: border-box !important;
}
.sub-split-hero .split-card:hover {
transform: translateY(-4px);
background: rgba(255,255,255,0.08) !important;
border-color: var(--gold) !important;
}
.sub-split-hero .split-card-featured:hover {
background: linear-gradient(135deg,rgba(201,168,106,0.18),rgba(201,168,106,0.08)) !important;
box-shadow: 0 12px 50px rgba(201,168,106,0.3) !important;
}
@media (max-width:768px){
.sub-split-hero .split-choice { grid-template-columns:1fr !important; }
}
@media (max-width:900px){
.sub-packs-grid { grid-template-columns:1fr !important; max-width:500px !important; }
.sub-comp-table table { font-size:0.72rem !important; }
.sub-comp-table td, .sub-comp-table th { padding:0.7rem 0.4rem !important; }
}
.sub-pack a:hover { background:var(--gold) !important; color:var(--dark-azur) !important; border-color:var(--gold) !important; }
.sub-pack-featured a:hover { background:var(--gold) !important; }
@media (max-width:768px){
.sub-why-grid { grid-template-columns:repeat(2,1fr) !important; }
.sub-proof-grid { grid-template-columns:repeat(2,1fr) !important; }
.sub-proof-grid > div { border:none !important; }
}
@media (max-width:480px){
.sub-why-grid { grid-template-columns:1fr !important; }
}
.fragrance-du-mois{background:#1A1A1A;padding:3rem 2rem;position:relative;overflow:hidden}
.fragrance-du-mois::before{content:"";position:absolute;top:0;left:50%;width:60px;height:1px;background:#D4AF37;transform:translateX(-50%)}
.fdm-wrapper{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:340px 1fr;gap:3rem;align-items:center}
.fdm-visual{position:relative;width:100%;aspect-ratio:1/1.1;border-radius:4px;overflow:hidden;border:1px solid rgba(212,175,55,0.15);background:#8FA866;min-height:280px}
.fdm-visual-inner{position:absolute;inset:0;transition:background 0.8s ease}
.fdm-photo-label{position:absolute;bottom:0.8rem;left:0.8rem;right:0.8rem;font-size:0.55rem;color:rgba(245,243,240,0.3);letter-spacing:0.1em;text-transform:uppercase;text-align:center}
.fdm-content{color:#F5F3F0;display:flex;flex-direction:column;justify-content:center}
.fdm-overline{font-family:'Jost',sans-serif;font-size:0.62rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#D4AF37;margin:0 0 0.8rem 0}
.fdm-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:400;line-height:1.1;color:#F5F3F0;margin:0 0 1rem 0;font-style:italic}
.fdm-story{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1rem;line-height:1.5;color:rgba(245,243,240,0.75);margin:0 0 1.1rem 0;padding:0 0 0 0.9rem;border-left:2px solid #D4AF37}
.fdm-pyramid{font-size:0.78rem;color:rgba(245,243,240,0.55);line-height:1.6;letter-spacing:0.02em;margin:0 0 1.6rem 0}
.fdm-cta-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.fdm-cta{display:inline-block;padding:12px 24px;background:#D4AF37;color:#1A1A1A;text-decoration:none;font-family:'Jost',sans-serif;font-size:0.7rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;border-radius:2px;transition:transform 0.3s var(--ease-luxe, ease),background 0.3s}
.fdm-cta:hover{background:#E8C558;transform:translateX(3px)}
.fdm-cta-secondary{font-family:'Jost',sans-serif;font-size:0.68rem;color:rgba(245,243,240,0.7);letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(245,243,240,0.2);padding-bottom:2px;transition:color 0.3s,border-color 0.3s}
.fdm-cta-secondary:hover{color:#D4AF37;border-color:#D4AF37}
@media(max-width:768px){
.fragrance-du-mois{padding:2.5rem 1.2rem}
.fdm-wrapper{grid-template-columns:1fr;gap:1.8rem}
.fdm-visual{aspect-ratio:3/4;max-width:280px;margin:0 auto;min-height:240px}
.fdm-title{font-size:1.8rem}
.fdm-story{font-size:0.95rem}
.fdm-cta-row{flex-direction:column;align-items:stretch}
.fdm-cta{text-align:center}
.fdm-cta-secondary{text-align:center}
}