/* ═══════════════════════════════════════════════════════════
VOLTIO — THEME CSS
Identité : Urbain électrique
Palette : Anthracite asphalte + indigo électrique + ambre charge
Fonts : Space Grotesk (headings) + Inter (body)
═══════════════════════════════════════════════════════════ */
/* ── Variables ─────────────────────────────────────────── */
:root {
--primary: #15181D; /* anthracite asphalte */
--primary-soft: #232936;
--cta: #5E53FF; /* indigo électrique */
--cta-hover: #4A3FE0;
--accent: #5E53FF; /* indigo électrique */
--accent-soft: #C7C3FF;
--wood: #8B93A1; /* gris acier */
--wood-soft: #D5D9E0;
--bg: #F6F7F9; /* gris-blanc urbain */
--bg-alt: #ECEEF2;
--bg-tint: #E2E5EC;
--bg-deep: #15181D; /* anthracite pour sections sombres */
--ink: #15181D;
--ink-soft: #3A4049;
--border: #DCE0E6;
--border-light: #ECEEF2;
--muted: #6B7280;
--muted-light: #9AA1AC;
--danger: #E0473E;
--success: #3FA65C;
--stars: #FFB224; /* ambre charge pour étoiles */
--terra-soft: #C7C3FF; /* indigo clair */
--radius: 10px;
--radius-sm: 6px;
--radius-lg: 18px;
--shadow: 0 2px 14px rgba(21,24,29,.08);
--shadow-lg: 0 12px 36px rgba(21,24,29,.16);
--transition: .25s ease;
--container: 1280px;
--header-h: 72px;
--utility-h: 36px;
--font-heading: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
}
/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cta); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--cta-hover); }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
::selection { background: var(--cta); color: #fff; }
/* ── Skip link ────────────────────────────────────────── */
.skip-link { position: absolute; top: -100%; left: 8px; padding: 8px 16px; background: var(--primary); color: #fff; z-index: 9999; border-radius: var(--radius-sm); }
.skip-link:focus { top: 8px; }
/* ── Container ────────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
/* ── Typography ───────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
.section-title { text-align: center; margin-bottom: 40px; position: relative; }
.section-title::after { content: ''; display: block; width: 60px; height: 3px; background: var(--cta); margin: 12px auto 0; border-radius: 2px; }
.section-subtitle { text-align: center; color: var(--muted); max-width: 600px; margin: -24px auto 40px; }
/* ── Buttons ──────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; font-weight: 600; font-size: .95rem; border-radius: var(--radius); transition: all var(--transition); white-space: nowrap; }
.btn-primary { background: var(--cta); color: #fff; }
.btn-primary:hover { background: var(--cta-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-secondary { background: transparent; color: var(--cta); border: 2px solid var(--cta); }
.btn-secondary:hover { background: var(--cta); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--border); }
.btn-ghost:hover { border-color: var(--cta); color: var(--cta); }
.btn-lg { padding: 16px 36px; font-size: 1.05rem; }
.btn-sm { padding: 8px 16px; font-size: .85rem; }
.btn-white { background: #fff; color: var(--primary); }
.btn-white:hover { background: var(--bg-alt); color: var(--primary); }
/* ── Announcement Bar ─────────────────────────────────── */
.announcement-bar { background: var(--primary); color: #fff; text-align: center; padding: 10px 20px; font-size: .85rem; font-weight: 500; }
.announcement-bar a { color: #fff; text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════
HEADER
═══════════════════════════════════════════════════════════ */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border-light); transition: box-shadow var(--transition); height: var(--header-h); }
.site-header.scrolled { box-shadow: var(--shadow); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
/* Logo */
.logo { flex-shrink: 0; }
.logo a { display: flex; align-items: center; gap: 8px; color: var(--primary); }
.logo-text { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--primary); letter-spacing: -.02em; }
.logo img { height: 40px; width: auto; }
/* Desktop nav */
.nav-desktop { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.nav-desktop > a,
.nav-dropdown > a.nav-dropdown-trigger { display: flex; align-items: center; gap: 4px; padding: 8px 14px; font-weight: 500; font-size: .93rem; color: var(--ink); border-radius: var(--radius-sm); transition: all var(--transition); white-space: nowrap; }
.nav-desktop > a:hover,
.nav-dropdown:hover > a.nav-dropdown-trigger { color: var(--cta); background: var(--bg-tint); }
.nav-arrow { font-size: .65rem; transition: transform var(--transition); }
.nav-dropdown:hover .nav-arrow { transform: rotate(180deg); }
/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 220px; background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transition: all var(--transition); z-index: 50; }
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown-item { display: block; padding: 8px 12px; color: var(--ink); border-radius: var(--radius-sm); font-size: .9rem; transition: all var(--transition); }
.nav-dropdown-item:hover { background: var(--bg-tint); color: var(--cta); }
.nav-dropdown-all { font-weight: 600; border-bottom: 1px solid var(--border-light); margin-bottom: 4px; padding-bottom: 10px; }
/* Header actions */
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background var(--transition); font-size: 1.2rem; position: relative; color: var(--ink); }
.header-icon-btn:hover { background: var(--bg-tint); }
.cart-count { position: absolute; top: 2px; right: 2px; background: var(--cta); color: #fff; font-size: .65rem; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
/* Mobile burger */
.burger-btn { display: none; width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger-line { display: block; width: 22px; height: 2px; background: var(--ink); transition: all var(--transition); border-radius: 2px; }
/* ── Mobile nav overlay + drawer ──────────────────────── */
.mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: all var(--transition); z-index: 199; }
.mobile-nav-overlay.open { opacity: 1; visibility: visible; }
.mobile-nav { position: fixed; top: 0; left: 0; width: min(340px, 85vw); height: 100%; background: var(--bg); z-index: 200; transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; display: flex; flex-direction: column; }
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
.mobile-nav-header .logo-text { font-size: 1.2rem; }
.mobile-nav-close { font-size: 1.5rem; color: var(--ink); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.mobile-nav-links { padding: 8px 0; flex: 1; }
.mobile-nav-links > a { display: block; padding: 14px 20px; font-size: 1rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--border-light); transition: background var(--transition); }
.mobile-nav-links > a:hover { background: var(--bg-tint); color: var(--cta); }
.mobile-nav-child { padding-left: 40px !important; font-size: .9rem !important; font-weight: 400 !important; color: var(--muted) !important; }
/* ── Search overlay ───────────────────────────────────── */
.search-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.5); display: flex; align-items: flex-start; justify-content: center; padding-top: 120px; opacity: 0; visibility: hidden; transition: all var(--transition); }
.search-overlay.open { opacity: 1; visibility: visible; }
.search-box { background: var(--bg); border-radius: var(--radius); padding: 24px; width: min(600px, 90vw); box-shadow: var(--shadow-lg); }
.search-form { display: flex; align-items: center; gap: 8px; }
.search-form input { flex: 1; padding: 14px 20px; border: 2px solid var(--border); border-radius: var(--radius); font-size: 1.1rem; outline: none; transition: border-color var(--transition); }
.search-form input:focus { border-color: var(--cta); }
.search-form button { font-size: 1.2rem; padding: 8px; }
.search-close { color: var(--muted); }
.search-results { margin-top: 16px; max-height: 400px; overflow-y: auto; }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); transition: background var(--transition); color: var(--ink); }
.search-results a:hover { background: var(--bg-tint); }
.search-results img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }
.search-result-info { flex: 1; }
.search-result-info strong { display: block; font-size: .9rem; color: var(--ink); }
.search-result-info span { font-size: .85rem; color: var(--muted); }
/* ── Cart overlay + drawer ────────────────────────────── */
.cart-overlay { position: fixed; inset: 0; z-index: 249; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: all var(--transition); }
.cart-overlay.open { opacity: 1; visibility: visible; }
.cart-drawer { position: fixed; top: 0; right: 0; width: min(420px, 90vw); height: 100%; z-index: 250; background: var(--bg); box-shadow: -4px 0 24px rgba(0,0,0,.1); transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; }
.cart-drawer.open { transform: translateX(0); }
.cart-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--border-light); }
.cart-header h3 { font-family: var(--font-heading); margin: 0; }
.cart-close { font-size: 1.5rem; color: var(--ink); }
.cart-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.cart-items { display: flex; flex-direction: column; }
.cart-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.cart-item img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-item-info { flex: 1; }
.cart-item-info strong { font-size: .9rem; }
.cart-item-price { color: var(--cta); font-weight: 600; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cart-item-qty button { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.cart-item-remove { color: var(--danger); font-size: .8rem; cursor: pointer; margin-top: 4px; }
.cart-empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.cart-empty-icon { font-size: 3rem; display: block; margin-bottom: 12px; }
.cart-footer { padding: 20px; border-top: 1px solid var(--border-light); }
.cart-promo { display: flex; gap: 8px; margin-bottom: 8px; }
.cart-promo input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .85rem; }
.cart-promo button { padding: 8px 14px; background: var(--bg-tint); border-radius: var(--radius-sm); font-weight: 600; font-size: .85rem; color: var(--cta); }
.cart-promo-msg { font-size: .8rem; margin-bottom: 8px; }
.cart-promo-msg.success { color: var(--success); }
.cart-promo-msg.error { color: var(--danger); }
.cart-totals { margin-bottom: 16px; }
.cart-total-row { display: flex; justify-content: space-between; font-size: 1.1rem; }
.cart-total-row strong { font-weight: 700; }
.cart-checkout-btn { width: 100%; }
/* ═══════════════════════════════════════════════════════════
HERO
═══════════════════════════════════════════════════════════ */
.hero-main { position: relative; overflow: hidden; }
.hero-bg { min-height: 540px; background-size: cover; background-position: center; display: flex; align-items: center; position: relative; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(31,58,46,.78) 0%, rgba(31,58,46,.35) 50%, rgba(31,58,46,.78) 100%); }
.hero-content { position: relative; z-index: 1; text-align: center; padding: 80px 20px; max-width: 720px; margin: 0 auto; }
.hero-title { color: #fff; font-size: clamp(2.2rem, 6vw, 3.8rem); margin-bottom: 16px; text-shadow: 0 2px 8px rgba(0,0,0,.2); }
.hero-title span { color: var(--accent); }
.hero-subtitle { color: rgba(255,255,255,.85); font-size: clamp(1rem, 2.5vw, 1.25rem); max-width: 600px; margin: 0 auto 32px; }
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ═══════════════════════════════════════════════════════════
USPs
═══════════════════════════════════════════════════════════ */
.usps-icons { padding: 48px 0; border-bottom: 1px solid var(--border-light); }
.usps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.usp-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--bg); border-radius: var(--radius); }
.usp-icon { font-size: 2rem; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--bg-tint); border-radius: var(--radius); flex-shrink: 0; }
.usp-text { display: flex; flex-direction: column; gap: 2px; }
.usp-text strong { font-size: .95rem; color: var(--ink); }
.usp-text span { font-size: .85rem; color: var(--muted); }
/* ═══════════════════════════════════════════════════════════
CATEGORIES SLIDER
═══════════════════════════════════════════════════════════ */
.categories-slider { padding: 80px 0; }
.categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.category-tile { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; display: flex; align-items: flex-end; }
.category-tile-image { position: absolute; inset: 0; }
.category-tile-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.category-tile:hover .category-tile-image img { transform: scale(1.05); }
.category-tile-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(31,58,46,.85) 100%); }
.category-tile-name { position: relative; z-index: 1; color: #fff; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; padding: 20px; }
/* ═══════════════════════════════════════════════════════════
PRODUCT CARDS (shared)
═══════════════════════════════════════════════════════════ */
.product-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; transition: all var(--transition); color: var(--ink); }
.product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-4px); border-color: var(--cta); color: var(--ink); }
.product-card-image { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-alt); }
.product-card-image img { width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform .4s ease; }
.product-card:hover .product-card-image img { transform: scale(1.03); }
.product-card-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; color: var(--muted); }
.product-card-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; color: #fff; background: var(--cta); }
.badge-new { background: var(--cta); }
.badge-promo { background: var(--danger); }
.badge-best { background: var(--stars); }
.product-card-compare { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; background: rgba(255,255,255,.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .85rem; opacity: 0; transition: opacity var(--transition); z-index: 2; }
.product-card:hover .product-card-compare { opacity: 1; }
.product-card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card-price-row { display: flex; align-items: center; gap: 8px; }
.price-original { text-decoration: line-through; color: var(--muted); font-size: .85rem; }
.price-current { font-weight: 700; color: var(--primary); font-size: 1.1rem; }
.product-card-add { margin-top: auto; }
.product-card-sm .product-card-image { aspect-ratio: 1/1; }
.product-card-sm .product-card-body { padding: 12px; }
/* ═══════════════════════════════════════════════════════════
BESTSELLERS
═══════════════════════════════════════════════════════════ */
.bestsellers { padding: 80px 0; background: var(--bg-alt); }
.bestsellers-scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
/* ═══════════════════════════════════════════════════════════
CATEGORY SLIDERS
═══════════════════════════════════════════════════════════ */
.category-sliders { padding: 80px 0; }
.cat-slider-block { margin-bottom: 48px; }
.cat-slider-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cat-slider-header h3 { font-family: var(--font-heading); }
.cat-slider-all { font-weight: 600; color: var(--cta); }
.cat-slider-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.cat-slider-empty { color: var(--muted); font-style: italic; }
/* ═══════════════════════════════════════════════════════════
COUNTDOWN PROMO
═══════════════════════════════════════════════════════════ */
.countdown-promo { position: relative; background-size: cover; background-position: center; padding: 80px 0; text-align: center; color: #fff; }
.countdown-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(31,58,46,.88), rgba(122,158,92,.55)); }
.countdown-content { position: relative; z-index: 1; }
.countdown-title { color: #fff; margin-bottom: 12px; }
.countdown-subtitle { color: rgba(255,255,255,.85); margin-bottom: 32px; }
.countdown-timer { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius); padding: 16px 20px; min-width: 70px; }
.countdown-num { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--accent); }
.countdown-label { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; opacity: .8; }
.countdown-sep { font-size: 2rem; font-weight: 700; display: flex; align-items: center; }
/* ═══════════════════════════════════════════════════════════
COMPARATOR EXPRESS
═══════════════════════════════════════════════════════════ */
.comparator-express { padding: 80px 0; background: var(--bg-alt); }
.comparator-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparator-table { width: 100%; border-collapse: collapse; background: var(--bg); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.comparator-table th, .comparator-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-light); font-size: .9rem; }
.comparator-table th { background: var(--primary); color: #fff; font-weight: 600; }
.comparator-table th span { display: block; margin-top: 8px; font-size: .85rem; }
.comparator-img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); margin: 0 auto 8px; }
.comparator-label { text-align: left; font-weight: 600; background: var(--bg-alt); }
.comparator-prix { font-weight: 700; color: var(--cta); }
.comparator-mobile { display: none; }
/* Mobile comparator cards */
.comparator-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 12px; }
.comparator-cards::-webkit-scrollbar { height: 4px; }
.comparator-cards::-webkit-scrollbar-thumb { background: var(--cta); border-radius: 4px; }
.comparator-cards::-webkit-scrollbar-track { background: var(--border-light); }
.comparator-card { flex: 0 0 75%; scroll-snap-align: start; background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.comparator-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.comparator-card-name { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; padding: 16px 16px 0; }
.comparator-card-price { font-size: 1.3rem; font-weight: 700; color: var(--cta); padding: 4px 16px 12px; }
.comparator-card-specs { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-light); }
.comparator-card-specs li { display: flex; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border-light); font-size: .9rem; }
.comparator-card-specs .spec-label { font-weight: 600; color: var(--muted); }
.comparator-card-specs .spec-value { font-weight: 500; }
.comparator-card-cta { margin: 16px; text-align: center; }
/* ═══════════════════════════════════════════════════════════
BUYING QUIZ
═══════════════════════════════════════════════════════════ */
.buying-quiz { padding: 80px 0; }
.quiz-container { max-width: 640px; margin: 0 auto; }
.quiz-progress { height: 6px; background: var(--border-light); border-radius: 3px; margin-bottom: 24px; }
.quiz-progress-bar { height: 100%; background: var(--cta); border-radius: 3px; transition: width .4s ease; }
.quiz-question { font-family: var(--font-heading); font-size: 1.3rem; text-align: center; margin-bottom: 24px; }
.quiz-q-icon { margin-right: 8px; }
.quiz-options { display: grid; gap: 12px; }
.quiz-option { padding: 16px 20px; border: 2px solid var(--border); border-radius: var(--radius); font-size: 1rem; font-weight: 500; text-align: center; transition: all var(--transition); }
.quiz-option:hover { border-color: var(--cta); background: var(--bg-tint); }
.quiz-result { text-align: center; }
.quiz-result-card { background: var(--bg-tint); border-radius: var(--radius); padding: 32px; margin-bottom: 16px; }
.quiz-result-card h3 { font-family: var(--font-heading); margin-bottom: 12px; }
.quiz-restart { margin-top: 16px; }
/* ═══════════════════════════════════════════════════════════
TESTIMONIALS
═══════════════════════════════════════════════════════════ */
.testimonials { padding: 80px 0; background: var(--primary); color: #fff; }
.testimonials .section-title { color: #fff; }
.testimonials .section-title::after { background: var(--accent); }
.testimonials .section-subtitle { color: rgba(255,255,255,.6); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.testimonial-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 28px; }
.testimonial-stars { color: var(--stars); font-size: 1.1rem; margin-bottom: 12px; letter-spacing: 2px; }
.testimonial-text { font-style: italic; color: rgba(255,255,255,.75); margin-bottom: 16px; line-height: 1.7; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--cta); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .9rem; flex-shrink: 0; }
.testimonial-name { color: #fff; font-weight: 600; }
.testimonial-loc { display: block; font-size: .8rem; color: rgba(255,255,255,.5); }
.testimonial-product { margin-top: 12px; font-size: .85rem; color: rgba(255,255,255,.5); }
/* ═══════════════════════════════════════════════════════════
REASSURANCE
═══════════════════════════════════════════════════════════ */
.reassurance { padding: 60px 0; background: var(--bg-alt); }
.reassurance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; text-align: center; }
.reassurance-item { padding: 24px; background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow); }
.reassurance-icon { font-size: 2.5rem; display: block; margin-bottom: 12px; }
.reassurance-item strong { display: block; margin-bottom: 4px; }
.reassurance-item p { font-size: .85rem; color: var(--muted); }
/* ═══════════════════════════════════════════════════════════
FAQ HOME
═══════════════════════════════════════════════════════════ */
.faq-home { padding: 80px 0; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-light); }
.faq-question { padding: 18px 0; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
content: '';
flex-shrink: 0;
width: 20px;
height: 20px;
background-color: var(--primary, #222);
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: transform .25s ease;
}
.faq-item[open] .faq-question::after { transform: rotate(-180deg); }
.faq-answer { padding: 0 0 18px; color: var(--muted); line-height: 1.7; }
/* ═══════════════════════════════════════════════════════════
BLOG LATEST
═══════════════════════════════════════════════════════════ */
.blog-latest { padding: 80px 0; background: var(--bg-alt); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.blog-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-light); background: var(--bg); transition: all var(--transition); }
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.blog-card img { width: 100%; height: 200px; object-fit: cover; }
.blog-card-body { padding: 20px; }
.blog-card-body h3 { font-size: 1.1rem; margin-bottom: 8px; }
.blog-card-body p { font-size: .9rem; color: var(--muted); }
/* ═══════════════════════════════════════════════════════════
NEWSLETTER
═══════════════════════════════════════════════════════════ */
.newsletter-signup { padding: 80px 0; background: var(--primary); color: #fff; }
.newsletter-box { max-width: 600px; margin: 0 auto; text-align: center; }
.newsletter-box h2 { color: #fff; margin-bottom: 8px; }
.newsletter-box p { color: rgba(255,255,255,.7); margin-bottom: 8px; }
.newsletter-incentive { font-weight: 700; font-size: 1.1rem; color: var(--accent); margin-bottom: 24px; }
.newsletter-form { display: flex; gap: 12px; }
.newsletter-form input { flex: 1; padding: 14px 20px; border: none; border-radius: var(--radius); font-size: 1rem; }
.newsletter-form .btn { flex-shrink: 0; background: var(--cta); color: #fff; font-weight: 700; }
.newsletter-form .btn:hover { background: var(--cta-hover); }
.newsletter-msg { margin-top: 12px; font-size: .9rem; }
.newsletter-msg.success { color: #A7F3D0; }
.newsletter-msg.error { color: #FCA5A5; }
/* ═══════════════════════════════════════════════════════════
CUSTOM: SPA FINDER
═══════════════════════════════════════════════════════════ */
.spa-finder { padding: 80px 0; background: var(--bg-alt); }
.finder-wizard { max-width: 700px; margin: 0 auto; }
.finder-progress { height: 6px; background: var(--border-light); border-radius: 3px; margin-bottom: 24px; }
.finder-progress-bar { height: 100%; background: var(--cta); border-radius: 3px; transition: width .4s ease; }
.finder-step { background: var(--bg); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); }
.finder-step-title { font-family: var(--font-heading); display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.finder-step-num { width: 36px; height: 36px; background: var(--cta); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; font-family: var(--font-body); }
.finder-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.finder-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; border: 2px solid var(--border); border-radius: var(--radius); transition: all var(--transition); }
.finder-opt:hover { border-color: var(--cta); background: var(--bg-tint); transform: translateY(-2px); }
.finder-opt-icon { font-size: 2rem; }
.finder-results { text-align: center; }
.finder-results h3 { font-family: var(--font-heading); margin-bottom: 24px; }
.finder-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-bottom: 24px; }
.finder-why { font-size: .85rem; color: var(--muted); margin-top: 4px; }
/* ═══════════════════════════════════════════════════════════
CUSTOM: MATERIAL GUIDE
═══════════════════════════════════════════════════════════ */
.material-guide { padding: 80px 0; }
.material-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; }
.material-card { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; transition: all var(--transition); display: flex; flex-direction: column; }
.material-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--cta); }
.material-card-banner { padding: 28px 20px; text-align: center; color: #fff; }
.material-card-icon { font-size: 2.6rem; display: block; margin-bottom: 8px; }
.material-card-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; margin: 0; }
.material-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.material-card-tagline { font-style: italic; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.material-rating-row { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; }
.material-rating-row strong { color: var(--ink); }
.material-rating-bar { display: inline-flex; gap: 3px; }
.material-rating-bar span { width: 12px; height: 12px; border-radius: 2px; background: var(--border); }
.material-rating-bar span.filled { background: var(--cta); }
.material-pros, .material-cons { font-size: .85rem; line-height: 1.55; }
.material-pros li, .material-cons li { padding-left: 22px; position: relative; margin-bottom: 4px; }
.material-pros li::before { content: '✓'; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.material-cons li::before { content: '–'; position: absolute; left: 0; color: var(--muted); font-weight: 700; }
.material-card-foot { padding: 16px 20px; background: var(--bg-alt); border-top: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; }
.material-card-foot small { color: var(--muted); font-size: .8rem; }
.material-card-foot strong { color: var(--primary); font-size: 1.1rem; font-family: var(--font-heading); }
.material-tip { margin-top: 32px; background: var(--bg-tint); border-left: 4px solid var(--cta); border-radius: var(--radius-sm); padding: 16px 20px; font-size: .9rem; color: var(--ink); }
/* ═══════════════════════════════════════════════════════════
CUSTOM: INSTALLATION PLANNER
═══════════════════════════════════════════════════════════ */
.installation-planner { padding: 80px 0; background: var(--bg-alt); }
.planner-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; }
.planner-progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: .9rem; }
.planner-bar { height: 8px; background: var(--border-light); border-radius: 4px; margin-bottom: 24px; }
.planner-bar-fill { height: 100%; background: var(--cta); border-radius: 4px; transition: width .4s ease; }
.planner-check { display: flex; gap: 12px; padding: 16px; background: var(--bg); border-radius: var(--radius); margin-bottom: 8px; cursor: pointer; transition: all var(--transition); border: 1px solid transparent; align-items: flex-start; }
.planner-check:hover { border-color: var(--border); }
.planner-check.checked { border-color: var(--cta); background: var(--bg-tint); }
.planner-check input { margin-top: 4px; accent-color: var(--cta); width: 18px; height: 18px; flex-shrink: 0; }
.planner-check-icon { font-size: 1.5rem; flex-shrink: 0; }
.planner-check strong { display: block; margin-bottom: 2px; }
.planner-check p { font-size: .85rem; color: var(--muted); margin: 0; }
.planner-tips { background: var(--bg); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); position: sticky; top: calc(var(--header-h) + 20px); }
.planner-tips h3 { margin-bottom: 16px; }
.planner-tips-list { display: flex; flex-direction: column; gap: 10px; }
.planner-tips-list li { padding-left: 20px; position: relative; font-size: .9rem; color: var(--muted); }
.planner-tips-list li::before { content: '→'; position: absolute; left: 0; color: var(--cta); }
.planner-tips .btn { margin-top: 20px; width: 100%; }
/* ═══════════════════════════════════════════════════════════
CUSTOM: SEASONAL RITUALS
═══════════════════════════════════════════════════════════ */
.seasonal-rituals { padding: 80px 0; }
.seasons-nav { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; }
.season-tab { padding: 12px 24px; border-radius: var(--radius); border: 2px solid var(--border); font-weight: 600; display: flex; align-items: center; gap: 8px; transition: all var(--transition); }
.season-tab:hover { border-color: var(--season-color, var(--cta)); }
.season-tab.active { background: var(--season-color, var(--cta)); color: #fff; border-color: var(--season-color, var(--cta)); }
.season-icon { font-size: 1.3rem; }
.season-content { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.season-info h3 { margin-bottom: 12px; }
.season-meta { display: flex; gap: 16px; margin-bottom: 16px; font-weight: 600; color: var(--cta); }
.season-ritual { color: var(--muted); line-height: 1.7; margin-bottom: 16px; }
.season-products-tip { background: var(--bg-tint); padding: 12px 16px; border-radius: var(--radius-sm); font-size: .9rem; }
.season-image { border-radius: var(--radius); overflow: hidden; }
.season-image img { width: 100%; height: 350px; object-fit: cover; }
/* ═══════════════════════════════════════════════════════════
BREADCRUMB
═══════════════════════════════════════════════════════════ */
.breadcrumb { padding: 16px 0; font-size: .85rem; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--cta); }
.breadcrumb span { margin: 0 6px; }
.breadcrumb .current { color: var(--ink); }
/* ═══════════════════════════════════════════════════════════
CATEGORY PAGE
═══════════════════════════════════════════════════════════ */
.category-page { padding: 40px 0 80px; }
.category-header { margin-bottom: 32px; }
.category-header h1 { margin-bottom: 8px; }
.category-desc { color: var(--muted); max-width: 700px; }
.subcategory-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.chip { padding: 8px 18px; border: 1px solid var(--border); border-radius: 50px; font-size: .85rem; font-weight: 500; color: var(--ink); transition: all var(--transition); }
.chip:hover { border-color: var(--cta); background: var(--bg-tint); color: var(--cta); }
.category-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.category-count { color: var(--muted); font-size: .9rem; }
.category-filters { display: flex; gap: 8px; }
.category-filters select { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); cursor: pointer; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.category-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.category-empty .btn { margin-top: 16px; }
/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 48px; }
.pagination-btn { padding: 10px 20px; border: 1px solid var(--border); border-radius: var(--radius); font-weight: 600; transition: all var(--transition); color: var(--ink); }
.pagination-btn:hover { border-color: var(--cta); color: var(--cta); }
.pagination-info { color: var(--muted); font-size: .9rem; }
/* ═══════════════════════════════════════════════════════════
PRODUCT PAGE
═══════════════════════════════════════════════════════════ */
.product-page { padding: 40px 0 80px; }
.product-top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.product-gallery { position: sticky; top: calc(var(--header-h) + 20px); }
.product-main-image { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); margin-bottom: 12px; }
.gallery-swiper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery-swiper::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1; }
.gallery-slide img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.gallery-counter { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.55); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: .85rem; font-weight: 600; pointer-events: none; }
.product-thumbnails { display: flex; gap: 8px; overflow-x: auto; }
.product-thumb { width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: border-color var(--transition); flex-shrink: 0; }
.product-thumb.active, .product-thumb:hover { border-color: var(--cta); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-info { display: flex; flex-direction: column; gap: 16px; }
.product-title { font-size: clamp(1.4rem, 3.5vw, 1.9rem); line-height: 1.3; margin: 0; }
.product-name { margin-bottom: 0; }
.product-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.product-price-block { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.product-price { font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 700; color: var(--primary); font-family: var(--font-heading); }
.product-price-original { font-size: 1rem; text-decoration: line-through; color: var(--muted); }
.product-discount { background: var(--danger); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 700; }
.product-installment { font-size: .9rem; color: var(--muted); }
.product-highlights { display: flex; flex-direction: column; gap: 6px; }
.product-highlights li { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.product-highlights li::before { content: '✓'; color: var(--cta); font-weight: 700; }
.product-variants { display: flex; flex-direction: column; gap: 12px; }
.variant-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem; }
.variant-group select { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.product-actions { display: flex; flex-direction: column; gap: 10px; }
.product-actions-row { display: flex; gap: 10px; align-items: center; }
.product-actions-row .quantity-selector { flex-shrink: 0; }
.product-actions-row .product-add-cart { flex: 1; }
.quantity-selector { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--bg-alt); }
.quantity-selector .qty-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: none; border: none; cursor: pointer; color: var(--ink); }
.quantity-selector input { width: 40px; height: 44px; text-align: center; border: none; font-weight: 600; font-size: 1rem; background: transparent; -moz-appearance: textfield; }
.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-add-cart { width: 100%; border-radius: 999px; background: var(--primary); color: #fff; font-size: 1rem; font-weight: 600; padding: 14px 24px; text-align: center; }
.product-add-cart:hover { background: #274a3a; }
.product-buy-now { width: 100%; border-radius: 999px; background: transparent; color: var(--primary); font-size: 1rem; font-weight: 600; padding: 14px 24px; text-align: center; border: 2px solid var(--primary); transition: all var(--transition); }
.product-buy-now:hover { background: var(--primary); color: #fff; }
.qty-control { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.qty-control button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.qty-control input { width: 48px; height: 40px; text-align: center; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); font-weight: 600; }
.product-actions .btn { min-width: 0; }
.btn-buy { background: var(--primary); color: #fff; border-radius: 999px; }
.btn-buy:hover { background: #274a3a; }
.product-stock { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.stock-ok { color: var(--success); font-weight: 500; }
.stock-low { color: var(--danger); font-weight: 500; }
.stock-out { color: var(--muted); }
.product-reassurance { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; }
.reassurance-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: .8rem; border-bottom: 1px solid var(--border-light); white-space: nowrap; overflow: hidden; }
.reassurance-item:last-child { border-bottom: none; }
.reassurance-icon { font-size: 1.1rem; flex-shrink: 0; }
.delivery-countdown { font-size: .85rem; color: var(--muted); }
.product-description { margin-bottom: 48px; }
.product-description h2 { margin-bottom: 16px; }
.product-description .rich-content { color: var(--muted); line-height: 1.8; }
.product-features { margin-bottom: 48px; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 40px 0; }
.feature-row:nth-child(even) { direction: rtl; }
.feature-row:nth-child(even) > * { direction: ltr; }
.feature-row-text h3 { margin-bottom: 8px; }
.feature-row-text p { color: var(--muted); }
.feature-row-image { border-radius: var(--radius); overflow: hidden; }
.feature-row-image img { width: 100%; height: 250px; object-fit: cover; }
.product-aplus { margin-bottom: 48px; }
.aplus-gallery { display: flex; flex-direction: column; gap: 0; }
.aplus-image { width: 100%; height: auto; display: block; border-radius: var(--radius); margin-bottom: 16px; }
.product-specs { margin-bottom: 48px; }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr:nth-child(odd) { background: var(--bg-alt); }
.specs-table th, .specs-table td { padding: 12px 16px; text-align: left; font-size: .9rem; }
.specs-table th { font-weight: 600; width: 40%; }
.product-guarantees { margin-bottom: 48px; }
.guarantee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.guarantee-card { text-align: center; padding: 20px; background: var(--bg-alt); border-radius: var(--radius); }
.guarantee-card .icon { font-size: 2rem; margin-bottom: 8px; }
.guarantee-card strong { display: block; margin-bottom: 4px; }
.guarantee-card p { font-size: .8rem; color: var(--muted); margin: 0; }
.product-faq { margin-bottom: 48px; }
.product-related { margin-bottom: 48px; }
.related-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 20px; padding-bottom: 12px; }
.related-grid::-webkit-scrollbar { height: 4px; }
.related-grid::-webkit-scrollbar-thumb { background: var(--cta); border-radius: 4px; }
.related-grid::-webkit-scrollbar-track { background: var(--border-light); }
.related-grid > * { flex: 0 0 240px; scroll-snap-align: start; }
.recently-viewed { margin-bottom: 48px; }
.recently-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.mobile-sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--bg); border-top: 1px solid var(--border-light); padding: 12px 20px; box-shadow: 0 -2px 12px rgba(0,0,0,.08); }
.mobile-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-sticky-price { font-weight: 700; color: var(--primary); font-size: 1.1rem; }
.mobile-sticky-bar .btn { flex: 1; }
/* ═══════════════════════════════════════════════════════════
STATIC PAGE
═══════════════════════════════════════════════════════════ */
.static-page { padding: 40px 0 80px; }
.static-page h1 { margin: 24px 0; }
.rich-content { max-width: 800px; color: var(--muted); line-height: 1.8; }
.rich-content h2, .rich-content h3 { color: var(--ink); margin: 24px 0 12px; }
.rich-content p { margin-bottom: 16px; }
.rich-content ul, .rich-content ol { margin: 16px 0; padding-left: 24px; }
.rich-content li { margin-bottom: 8px; list-style: disc; }
.rich-content a { color: var(--cta); text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════
COMPARE BAR
═══════════════════════════════════════════════════════════ */
.compare-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; background: var(--bg); border-top: 2px solid var(--cta); padding: 16px 20px; transform: translateY(100%); transition: transform .3s ease; box-shadow: 0 -4px 24px rgba(0,0,0,.1); }
.compare-bar.visible { transform: translateY(0); }
.compare-bar-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--container); margin: 0 auto; }
.compare-items { display: flex; gap: 8px; }
.compare-chip { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-tint); border-radius: 20px; font-size: .85rem; }
.compare-chip button { font-size: .8rem; color: var(--danger); }
/* ═══════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════ */
.site-footer { background: var(--primary); color: rgba(255,255,255,.8); padding: 60px 0 0; margin-top: 80px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 40px; }
.footer-brand { max-width: 280px; }
.footer-brand h4 { font-family: var(--font-heading); font-size: 1.4rem; color: #fff; font-weight: 800; margin-bottom: 12px; }
.footer-baseline { font-size: .9rem; line-height: 1.6; color: rgba(255,255,255,.6); }
.footer-col h4 { color: #fff; font-family: var(--font-heading); margin-bottom: 16px; font-size: 1.05rem; }
.footer-col ul { display: flex; flex-direction: column; }
.footer-col a { display: block; padding: 4px 0; font-size: .9rem; color: rgba(255,255,255,.6); transition: color var(--transition); }
.footer-col a:hover { color: #fff; }
.footer-socials { display: flex; gap: 12px; margin-top: 16px; }
.footer-social-link { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .9rem; transition: all var(--transition); color: rgba(255,255,255,.7); }
.footer-social-link:hover { border-color: var(--accent); background: rgba(255,255,255,.1); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding: 20px 0; text-align: center; font-size: .8rem; color: rgba(255,255,255,.5); }
.footer-bottom a, .footer-cookies button { color: rgba(255,255,255,.5); background: none; border: none; cursor: pointer; font-size: .8rem; }
.footer-cookies button:hover { color: #fff; text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════════════════════ */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
/* ═══════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.product-top { grid-template-columns: 1fr; gap: 32px; }
.product-gallery { position: static; }
.feature-row { grid-template-columns: 1fr; gap: 16px; }
.feature-row:nth-child(even) { direction: ltr; }
.temp-visual { grid-template-columns: 1fr; }
.planner-layout { grid-template-columns: 1fr; }
.season-content { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
:root { --header-h: 60px; }
.nav-desktop { display: none; }
.burger-btn { display: flex; }
.hero-bg { min-height: 400px; }
.hero-ctas { flex-direction: column; align-items: center; }
.categories-grid, .bestsellers-scroll, .cat-slider-row, .recently-viewed .product-grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 16px;
padding-bottom: 12px;
scroll-padding: 0 16px;
}
.categories-grid::-webkit-scrollbar, .bestsellers-scroll::-webkit-scrollbar, .cat-slider-row::-webkit-scrollbar, .recently-viewed .product-grid::-webkit-scrollbar {
height: 4px;
}
.categories-grid::-webkit-scrollbar-thumb, .bestsellers-scroll::-webkit-scrollbar-thumb, .cat-slider-row::-webkit-scrollbar-thumb, .recently-viewed .product-grid::-webkit-scrollbar-thumb {
background: var(--cta); border-radius: 4px;
}
.categories-grid::-webkit-scrollbar-track, .bestsellers-scroll::-webkit-scrollbar-track, .cat-slider-row::-webkit-scrollbar-track, .recently-viewed .product-grid::-webkit-scrollbar-track {
background: var(--border-light);
}
.categories-grid > * {
flex: 0 0 45%;
scroll-snap-align: start;
}
.bestsellers-scroll > * {
flex: 0 0 55%;
scroll-snap-align: start;
}
.cat-slider-row > * {
flex: 0 0 55%;
scroll-snap-align: start;
}
.recently-viewed .product-grid > * {
flex: 0 0 55%;
scroll-snap-align: start;
}
.product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.category-page { padding-bottom: 100px; }
.product-page { padding-bottom: 20px; }
.countdown-timer { gap: 4px; }
.countdown-unit { padding: 12px 14px; min-width: 56px; }
.countdown-num { font-size: 1.5rem; }
.newsletter-form { flex-direction: column; }
.footer-grid { grid-template-columns: 1fr; gap: 24px; }
.reassurance .reassurance-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
.reassurance .reassurance-grid .reassurance-item { padding: 16px 12px; white-space: normal; overflow: visible; flex-direction: column; text-align: center; }
.product-reassurance {
display: grid;
grid-template-columns: 1fr 1fr;
border: none;
gap: 10px;
background: transparent;
}
.product-reassurance .reassurance-item {
border: 1px solid var(--border-light);
border-radius: var(--radius);
flex-direction: column;
text-align: center;
padding: 14px 10px;
white-space: normal;
font-size: .78rem;
gap: 6px;
}
.product-reassurance .reassurance-item:last-child { border-bottom: 1px solid var(--border-light); }
.product-reassurance .reassurance-icon { font-size: 1.4rem; }
.testimonials-grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 16px;
padding-bottom: 12px;
}
.testimonials-grid > * {
flex: 0 0 85%;
scroll-snap-align: start;
}
.testimonials-grid::-webkit-scrollbar { height: 4px; }
.testimonials-grid::-webkit-scrollbar-thumb { background: var(--cta); border-radius: 4px; }
.testimonials-grid::-webkit-scrollbar-track { background: var(--border-light); }
.blog-grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 16px;
padding-bottom: 12px;
}
.blog-grid > * {
flex: 0 0 82%;
scroll-snap-align: start;
}
.blog-grid::-webkit-scrollbar { height: 4px; }
.blog-grid::-webkit-scrollbar-thumb { background: var(--cta); border-radius: 4px; }
.blog-grid::-webkit-scrollbar-track { background: var(--border-light); }
.comparator-desktop { display: none; }
.comparator-mobile { display: block; }
.seasons-nav { gap: 4px; }
.season-tab { padding: 10px 16px; font-size: .85rem; }
.usps-grid { grid-template-columns: 1fr 1fr; }
.usp-card { flex-direction: column; text-align: center; padding: 14px 8px; gap: 8px; }
.usp-icon { width: 72px; height: 72px; font-size: 2.8rem; }
}
@media (max-width: 480px) {
.categories-grid > * {
flex: 0 0 70%;
}
.bestsellers-scroll > * {
flex: 0 0 75%;
}
.cat-slider-row > * {
flex: 0 0 75%;
}
.recently-viewed .product-grid > * {
flex: 0 0 75%;
}
.product-grid { grid-template-columns: 1fr; }
.product-card-sm .product-card-image { aspect-ratio: 1/1; }
.hero-title { font-size: 1.8rem; }
.usps-grid { grid-template-columns: 1fr 1fr; }
}
/* ── Utility: visually hidden ─────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
/* ── Print ────────────────────────────────────────────── */
@media print {
.site-header, .site-footer, .mobile-sticky-bar, .cart-drawer, .cart-overlay, .search-overlay, .compare-bar, .mobile-nav, .mobile-nav-overlay { display: none !important; }
body { color: #000; }
a { color: #000; text-decoration: underline; }
}
/* ─── Footer grid : max 4 colonnes (brand + 3 cols) sur 1 ligne, wrap sinon ─── */
.footer-grid {
display: grid;
grid-template-columns: 1.4fr repeat(auto-fit, minmax(160px, 1fr));
gap: 36px;
align-items: start;
}
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 540px) {
.footer-grid { grid-template-columns: 1fr; gap: 22px; }
}
/* ─── Footer bottom : copyright + legal strip + cookies sur 1 ligne ─── */
.footer-bottom {
display: flex;
flex-wrap: wrap; row-gap: 14px;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 24px;
margin-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom .footer-copyright {
margin: 0;
font-size: 13px;
opacity: 0.7;
order: 1;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
order: 2;
font-size: 13px;
}
.footer-legal a {
color: inherit;
opacity: 0.85;
text-decoration: none;
transition: opacity .15s;
}
.footer-legal a:hover { opacity: 1; text-decoration: underline; }
.footer-legal-sep {
opacity: 0.4;
font-size: 11px;
user-select: none;
}
.footer-bottom .footer-cookies {
margin: 0;
order: 3;
}
.footer-bottom .footer-cookies button {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: inherit;
padding: 6px 14px;
border-radius: 100px;
font-size: 12px;
cursor: pointer;
opacity: 0.85;
transition: opacity .15s, border-color .15s;
}
.footer-bottom .footer-cookies button:hover {
opacity: 1;
border-color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 700px) {
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-bottom .footer-copyright { order: 3; }
.footer-legal { order: 1; }
.footer-bottom .footer-cookies { order: 2; }
}
/* ─── Testimonials : single-row horizontal scroll (DiceBear avatars) ─── */
.testimonials-grid {
display: flex !important;
flex-wrap: nowrap !important;
gap: 18px;
overflow-x: auto;
overflow-y: hidden;
padding: 4px 4px 16px;
margin: 0 -4px;
scroll-snap-type: x proximity;
scroll-padding: 4px;
-webkit-overflow-scrolling: touch;
}
.testimonials-grid::-webkit-scrollbar { height: 8px; }
.testimonials-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; }
.testimonials-grid::-webkit-scrollbar-thumb { background: rgba(127,127,127,0.35); border-radius: 4px; }
.testimonials-grid::-webkit-scrollbar-thumb:hover { background: rgba(127,127,127,0.55); }
.testimonials-grid { scrollbar-width: thin; }
.testimonials-grid > .testimonial-card {
flex: 0 0 320px;
scroll-snap-align: start;
}
.testimonial-avatar-wrap {
width: 44px;
height: 44px;
flex-shrink: 0;
position: relative;
}
.testimonial-avatar-wrap .testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
}
@media (max-width: 600px) {
.testimonials-grid > .testimonial-card { flex: 0 0 280px; }
}
/* --- Bestsellers en 1 ligne avec scroll horizontal --- */
.bestsellers-scroll,
.bestsellers .products-grid,
.bestsellers .bestsellers-grid {
display: flex !important;
flex-wrap: nowrap !important;
gap: 18px !important;
overflow-x: auto;
overflow-y: hidden;
padding: 4px 4px 16px;
margin: 0 -4px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
grid-template-columns: none !important;
}
.bestsellers-scroll > .product-card,
.bestsellers .products-grid > .product-card,
.bestsellers .bestsellers-grid > .product-card {
flex: 0 0 240px !important;
scroll-snap-align: start;
width: auto !important;
}
.bestsellers-scroll::-webkit-scrollbar { height: 8px; }
.bestsellers-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; }
.bestsellers-scroll::-webkit-scrollbar-thumb { background: rgba(127,127,127,0.35); border-radius: 4px; }
.bestsellers-scroll::-webkit-scrollbar-thumb:hover { background: rgba(127,127,127,0.55); }
@media (max-width: 600px) {
.bestsellers-scroll > .product-card,
.bestsellers .products-grid > .product-card { flex: 0 0 200px !important; }
}
/* --- Footer 4 cols explicites en desktop --- */
@media (min-width: 700px) {
.footer-grid {
display: grid !important;
grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
gap: 36px !important;
align-items: start !important;
}
}
@media (max-width: 699px) and (min-width: 480px) {
.footer-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 28px !important;
}
}
@media (max-width: 479px) {
.footer-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
}
/* --- Reassurance cards : texte qui wrap (jamais tronqué) --- */
.reassurance .reassurance-item,
.reassurance-grid .reassurance-item {
white-space: normal !important;
overflow: visible !important;
display: block !important;
text-align: center !important;
padding: 28px 20px !important;
border-bottom: none !important;
}
.reassurance .reassurance-item p,
.reassurance-grid .reassurance-item p {
white-space: normal !important;
overflow: visible !important;
word-wrap: break-word !important;
font-size: 0.9rem !important;
line-height: 1.5 !important;
}
.reassurance .reassurance-item strong,
.reassurance-grid .reassurance-item strong {
white-space: normal !important;
overflow: visible !important;
}
/* --- Bestsellers + Categories en 1 ligne avec scroll horizontal --- */
.bestsellers-scroll,
.bestsellers .products-grid,
.bestsellers .bestsellers-grid,
.categories-grid,
.categories-slider .categories-grid,
.cat-slider-row,
.category-sliders .cat-slider-row {
display: flex !important;
flex-wrap: nowrap !important;
gap: 18px !important;
overflow-x: auto;
overflow-y: hidden;
padding: 4px 4px 16px;
margin: 0 -4px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
grid-template-columns: none !important;
}
.bestsellers-scroll > .product-card,
.bestsellers .products-grid > .product-card,
.bestsellers .bestsellers-grid > .product-card {
flex: 0 0 240px !important;
scroll-snap-align: start;
width: auto !important;
}
.categories-grid > .category-tile,
.categories-grid > * {
flex: 0 0 200px !important;
scroll-snap-align: start;
width: auto !important;
min-width: 200px;
}
.cat-slider-row > * {
flex: 0 0 240px !important;
scroll-snap-align: start;
}
.bestsellers-scroll::-webkit-scrollbar,
.categories-grid::-webkit-scrollbar,
.cat-slider-row::-webkit-scrollbar { height: 8px; }
.bestsellers-scroll::-webkit-scrollbar-track,
.categories-grid::-webkit-scrollbar-track,
.cat-slider-row::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; }
.bestsellers-scroll::-webkit-scrollbar-thumb,
.categories-grid::-webkit-scrollbar-thumb,
.cat-slider-row::-webkit-scrollbar-thumb { background: rgba(127,127,127,0.35); border-radius: 4px; }
.bestsellers-scroll::-webkit-scrollbar-thumb:hover,
.categories-grid::-webkit-scrollbar-thumb:hover,
.cat-slider-row::-webkit-scrollbar-thumb:hover { background: rgba(127,127,127,0.55); }
@media (max-width: 600px) {
.bestsellers-scroll > .product-card,
.bestsellers .products-grid > .product-card { flex: 0 0 200px !important; }
.categories-grid > .category-tile,
.categories-grid > * { flex: 0 0 160px !important; min-width: 160px; }
}
/* --- Footer 4 cols explicites en desktop --- */
@media (min-width: 700px) {
.footer-grid {
display: grid !important;
grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
gap: 36px !important;
align-items: start !important;
}
}
@media (max-width: 699px) and (min-width: 480px) {
.footer-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 28px !important;
}
}
@media (max-width: 479px) {
.footer-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
}
/* --- Reassurance cards : texte qui wrap (jamais tronqué) --- */
.reassurance .reassurance-item,
.reassurance-grid .reassurance-item {
white-space: normal !important;
overflow: visible !important;
display: block !important;
text-align: center !important;
padding: 28px 20px !important;
border-bottom: none !important;
}
.reassurance .reassurance-item p,
.reassurance-grid .reassurance-item p {
white-space: normal !important;
overflow: visible !important;
word-wrap: break-word !important;
font-size: 0.9rem !important;
line-height: 1.5 !important;
}
.reassurance .reassurance-item strong,
.reassurance-grid .reassurance-item strong {
white-space: normal !important;
overflow: visible !important;
}
/* --- Bestsellers + Categories en 1 ligne avec scroll horizontal --- */
.bestsellers-scroll,
.bestsellers .products-grid,
.bestsellers .bestsellers-grid,
.categories-grid,
.categories-slider .categories-grid,
.cat-slider-row,
.category-sliders .cat-slider-row {
display: flex !important;
flex-wrap: nowrap !important;
gap: 18px !important;
overflow-x: auto;
overflow-y: hidden;
padding: 4px 4px 16px;
margin: 0 -4px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
grid-template-columns: none !important;
}
.bestsellers-scroll > .product-card,
.bestsellers .products-grid > .product-card,
.bestsellers .bestsellers-grid > .product-card {
flex: 0 0 240px !important;
scroll-snap-align: start;
width: auto !important;
}
.categories-grid > .category-tile,
.categories-grid > * {
flex: 0 0 200px !important;
scroll-snap-align: start;
width: auto !important;
min-width: 200px;
}
.cat-slider-row > * {
flex: 0 0 240px !important;
scroll-snap-align: start;
}
.bestsellers-scroll::-webkit-scrollbar,
.categories-grid::-webkit-scrollbar,
.cat-slider-row::-webkit-scrollbar { height: 8px; }
.bestsellers-scroll::-webkit-scrollbar-track,
.categories-grid::-webkit-scrollbar-track,
.cat-slider-row::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; }
.bestsellers-scroll::-webkit-scrollbar-thumb,
.categories-grid::-webkit-scrollbar-thumb,
.cat-slider-row::-webkit-scrollbar-thumb { background: rgba(127,127,127,0.35); border-radius: 4px; }
.bestsellers-scroll::-webkit-scrollbar-thumb:hover,
.categories-grid::-webkit-scrollbar-thumb:hover,
.cat-slider-row::-webkit-scrollbar-thumb:hover { background: rgba(127,127,127,0.55); }
@media (max-width: 600px) {
.bestsellers-scroll > .product-card,
.bestsellers .products-grid > .product-card { flex: 0 0 200px !important; }
.categories-grid > .category-tile,
.categories-grid > * { flex: 0 0 160px !important; min-width: 160px; }
}
/* --- Footer 4 cols explicites en desktop --- */
@media (min-width: 700px) {
.footer-grid {
display: grid !important;
grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
gap: 36px !important;
align-items: start !important;
}
}
@media (max-width: 699px) and (min-width: 480px) {
.footer-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 28px !important;
}
}
@media (max-width: 479px) {
.footer-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
}
/* --- Wizards step-based : seul le step .active est visible.
Couvre les sections custom_*_finder, buying_quiz, deck_builder, etc.
qui ont une structure --- */
.finder-step:not(.active),
.wizard-step:not(.active),
.quiz-step:not(.active),
.deck-builder-step:not(.active),
.builder-step:not(.active),
.step:not(.active):not(.warranty-steps .step):not(.warranty-steps li),
[data-step]:not(.active):not(.timeline-item) {
display: none !important;
}
/* Le step .active reste en block */
.finder-step.active,
.wizard-step.active,
.quiz-step.active,
.deck-builder-step.active,
.builder-step.active {
display: block !important;
}
/* Options dans un wizard : grid responsive de cards */
.finder-options,
.wizard-options,
.quiz-options {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
gap: 12px !important;
margin-top: 16px;
}
.finder-option,
.wizard-option,
.quiz-option {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 22px 16px;
border: 2px solid var(--border, #e5e5e5);
border-radius: 10px;
background: #fff;
transition: border-color .2s, background .2s, transform .2s;
font-size: .9rem;
font-weight: 500;
color: var(--ink, #1a1a1a);
cursor: pointer;
text-align: center;
}
.finder-option:hover,
.wizard-option:hover,
.quiz-option:hover {
border-color: var(--accent, #FFCB05);
transform: translateY(-2px);
}
.finder-option.selected,
.wizard-option.selected,
.quiz-option.selected {
border-color: var(--cta, #d62828);
background: var(--bg-tint, #fff8e0);
}
.finder-option-icon,
.wizard-option-icon,
.quiz-option-icon { font-size: 2rem; }
.finder-progress,
.wizard-progress,
.quiz-progress {
height: 4px;
background: var(--border-light, #f0f0f0);
border-radius: 2px;
margin-bottom: 24px;
overflow: hidden;
}
.finder-progress-bar,
.wizard-progress-bar,
.quiz-progress-bar {
height: 100%;
background: var(--accent, #FFCB05);
border-radius: 2px;
transition: width .4s ease;
}
.finder-step-label,
.wizard-step-label,
.quiz-step-label {
font-size: .85rem;
color: var(--muted, #777);
margin-bottom: 16px;
font-weight: 600;
}
.finder-question,
.wizard-question,
.quiz-question {
font-size: 1.4rem;
margin-bottom: 20px;
font-weight: 600;
}
.finder-result,
.wizard-result,
.quiz-result { text-align: center; padding: 32px 20px; }
.finder-result-icon { font-size: 3rem; display: block; margin-bottom: 16px; }
/* --- Reassurance cards : texte qui wrap (jamais tronqué) --- */
.reassurance .reassurance-item,
.reassurance-grid .reassurance-item {
white-space: normal !important;
overflow: visible !important;
display: block !important;
text-align: center !important;
padding: 28px 20px !important;
border-bottom: none !important;
}
.reassurance .reassurance-item p,
.reassurance-grid .reassurance-item p {
white-space: normal !important;
overflow: visible !important;
word-wrap: break-word !important;
font-size: 0.9rem !important;
line-height: 1.5 !important;
}
.reassurance .reassurance-item strong,
.reassurance-grid .reassurance-item strong {
white-space: normal !important;
overflow: visible !important;
}
/* ═══════════════════════════════════════════════════════════
LAYOUT FIXES (propagate-layout-fixes.js — 2026-05-09 v4)
- Bestsellers + Categories : single-row horizontal scroll
- Footer : 4 cols explicites en desktop
- Reassurance cards : pas de troncature de texte
- Wizards step-based : seul .active visible (finder/quiz/wizard)
- Premium polish : material/comparator cards en cards arrondies + ombres
+ check/cross stylés en pastilles + CTA boutons pill
═══════════════════════════════════════════════════════════ */
/* --- Bestsellers + Categories en 1 ligne avec scroll horizontal --- */
.bestsellers-scroll,
.bestsellers .products-grid,
.bestsellers .bestsellers-grid,
.categories-grid,
.categories-slider .categories-grid,
.cat-slider-row,
.category-sliders .cat-slider-row {
display: flex !important;
flex-wrap: nowrap !important;
gap: 18px !important;
overflow-x: auto;
overflow-y: hidden;
padding: 4px 4px 16px;
margin: 0 -4px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
grid-template-columns: none !important;
}
.bestsellers-scroll > .product-card,
.bestsellers .products-grid > .product-card,
.bestsellers .bestsellers-grid > .product-card {
flex: 0 0 240px !important;
scroll-snap-align: start;
width: auto !important;
}
.categories-grid > .category-tile,
.categories-grid > * {
flex: 0 0 200px !important;
scroll-snap-align: start;
width: auto !important;
min-width: 200px;
}
.cat-slider-row > * {
flex: 0 0 240px !important;
scroll-snap-align: start;
}
.bestsellers-scroll::-webkit-scrollbar,
.categories-grid::-webkit-scrollbar,
.cat-slider-row::-webkit-scrollbar { height: 8px; }
.bestsellers-scroll::-webkit-scrollbar-track,
.categories-grid::-webkit-scrollbar-track,
.cat-slider-row::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; }
.bestsellers-scroll::-webkit-scrollbar-thumb,
.categories-grid::-webkit-scrollbar-thumb,
.cat-slider-row::-webkit-scrollbar-thumb { background: rgba(127,127,127,0.35); border-radius: 4px; }
.bestsellers-scroll::-webkit-scrollbar-thumb:hover,
.categories-grid::-webkit-scrollbar-thumb:hover,
.cat-slider-row::-webkit-scrollbar-thumb:hover { background: rgba(127,127,127,0.55); }
@media (max-width: 600px) {
.bestsellers-scroll > .product-card,
.bestsellers .products-grid > .product-card { flex: 0 0 200px !important; }
.categories-grid > .category-tile,
.categories-grid > * { flex: 0 0 160px !important; min-width: 160px; }
}
/* --- Footer 4 cols explicites en desktop --- */
@media (min-width: 700px) {
.footer-grid {
display: grid !important;
grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
gap: 36px !important;
align-items: start !important;
}
}
@media (max-width: 699px) and (min-width: 480px) {
.footer-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 28px !important;
}
}
@media (max-width: 479px) {
.footer-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
}
/* --- Wizards step-based : seul le step .active est visible.
Couvre les sections custom_*_finder, buying_quiz, deck_builder, etc.
qui ont une structure --- */
.finder-step:not(.active),
.wizard-step:not(.active),
.quiz-step:not(.active),
.deck-builder-step:not(.active),
.builder-step:not(.active),
.step:not(.active):not(.warranty-steps .step):not(.warranty-steps li),
[data-step]:not(.active):not(.timeline-item) {
display: none !important;
}
/* Le step .active reste en block */
.finder-step.active,
.wizard-step.active,
.quiz-step.active,
.deck-builder-step.active,
.builder-step.active {
display: block !important;
}
/* Options dans un wizard : grid responsive de cards */
.finder-options,
.wizard-options,
.quiz-options {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
gap: 12px !important;
margin-top: 16px;
}
.finder-option,
.wizard-option,
.quiz-option {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 22px 16px;
border: 2px solid var(--border, #e5e5e5);
border-radius: 10px;
background: #fff;
transition: border-color .2s, background .2s, transform .2s;
font-size: .9rem;
font-weight: 500;
color: var(--ink, #1a1a1a);
cursor: pointer;
text-align: center;
}
.finder-option:hover,
.wizard-option:hover,
.quiz-option:hover {
border-color: var(--accent, #FFCB05);
transform: translateY(-2px);
}
.finder-option.selected,
.wizard-option.selected,
.quiz-option.selected {
border-color: var(--cta, #d62828);
background: var(--bg-tint, #fff8e0);
}
.finder-option-icon,
.wizard-option-icon,
.quiz-option-icon { font-size: 2rem; }
.finder-progress,
.wizard-progress,
.quiz-progress {
height: 4px;
background: var(--border-light, #f0f0f0);
border-radius: 2px;
margin-bottom: 24px;
overflow: hidden;
}
.finder-progress-bar,
.wizard-progress-bar,
.quiz-progress-bar {
height: 100%;
background: var(--accent, #FFCB05);
border-radius: 2px;
transition: width .4s ease;
}
.finder-step-label,
.wizard-step-label,
.quiz-step-label {
font-size: .85rem;
color: var(--muted, #777);
margin-bottom: 16px;
font-weight: 600;
}
.finder-question,
.wizard-question,
.quiz-question {
font-size: 1.4rem;
margin-bottom: 20px;
font-weight: 600;
}
.finder-result,
.wizard-result,
.quiz-result { text-align: center; padding: 32px 20px; }
.finder-result-icon { font-size: 3rem; display: block; margin-bottom: 16px; }
/* --- Material/Comparator cards : style premium homogène pour TOUTE
section qui compare des options (matières, gammes, formules, plans) --- */
.materials-grid,
.comparator-grid,
.options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
margin-top: 32px;
}
@media (min-width: 1100px) {
.materials-grid,
.comparator-grid,
.options-grid { grid-template-columns: repeat(4, 1fr); }
}
.material-card,
.comparator-card,
.option-card-premium {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
position: relative;
}
.material-card:hover,
.comparator-card:hover,
.option-card-premium:hover {
transform: translateY(-6px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.08);
border-color: var(--accent, #FFCB05);
}
.material-card-top,
.comparator-card-top,
.option-card-top {
background: linear-gradient(135deg, var(--bg-tint, #fff8e0) 0%, var(--bg-alt, #faf6ef) 100%);
padding: 28px 24px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
text-align: center;
}
.material-icon,
.comparator-icon,
.option-icon {
font-size: 2.6rem;
display: block;
margin: 0 auto 12px;
width: 64px;
height: 64px;
display: flex !important;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.material-name,
.comparator-name {
font-family: var(--font-heading, serif);
font-size: 1.5rem !important;
margin: 0 0 6px !important;
color: var(--ink, #1a1a1a);
letter-spacing: 0.01em;
font-style: normal;
}
.material-tagline,
.comparator-tagline {
font-size: 0.85rem;
color: var(--muted, #777);
margin: 0 !important;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.material-desc,
.comparator-desc {
padding: 20px 24px 0;
font-size: 0.92rem;
line-height: 1.65;
color: var(--muted, #555);
margin: 0 0 16px;
}
.material-pros-cons,
.comparator-pros-cons {
padding: 0 24px;
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 16px;
}
.material-pros h4,
.material-cons h4,
.comparator-pros h4,
.comparator-cons h4 {
font-size: 0.78rem !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 8px !important;
color: var(--ink, #1a1a1a);
font-family: var(--font-body, system-ui, sans-serif) !important;
font-style: normal;
}
.material-pros ul,
.material-cons ul,
.comparator-pros ul,
.comparator-cons ul {
list-style: none !important;
padding: 0 !important;
margin: 0;
}
.material-pros li,
.comparator-pros li {
font-size: 0.86rem;
color: var(--ink, #2a2a2a);
padding: 4px 0 4px 22px;
position: relative;
line-height: 1.5;
}
.material-pros li::before,
.comparator-pros li::before {
content: '✓';
position: absolute;
left: 0;
top: 4px;
width: 16px;
height: 16px;
background: #22c55e;
color: #fff;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.material-cons li,
.comparator-cons li {
font-size: 0.86rem;
color: var(--muted, #777);
padding: 4px 0 4px 22px;
position: relative;
line-height: 1.5;
}
.material-cons li::before,
.comparator-cons li::before {
content: '−';
position: absolute;
left: 0;
top: 4px;
width: 16px;
height: 16px;
background: #f0f0f0;
color: #999;
border-radius: 50%;
font-size: 14px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.material-ideal,
.comparator-ideal {
margin: auto 24px 0;
padding: 14px 16px;
background: var(--bg-tint, #fff8e0);
border-radius: 8px;
font-size: 0.85rem;
line-height: 1.5;
color: var(--ink, #2a2a2a);
}
.material-ideal strong,
.comparator-ideal strong {
color: var(--cta, #d62828);
font-weight: 700;
}
.material-cta,
.comparator-cta,
.option-card-cta {
margin: 16px 24px 24px !important;
padding: 12px 20px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
text-decoration: none;
font-size: 0.9rem !important;
font-weight: 700;
border-radius: 100px !important;
background: var(--ink, #1a1a1a);
color: #fff !important;
border: none !important;
transition: background .2s, transform .2s;
text-align: center;
}
.material-cta:hover,
.comparator-cta:hover,
.option-card-cta:hover {
background: var(--cta, #d62828);
color: #fff !important;
transform: translateY(-1px);
}
.material-cta::after,
.comparator-cta::after,
.option-card-cta::after {
content: '→';
font-size: 1.1em;
transition: transform .2s;
}
.material-cta:hover::after,
.comparator-cta:hover::after { transform: translateX(3px); }
/* --- Premium polish global : section titles + spacing + cards --- */
.section-title {
position: relative;
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.section-subtitle {
max-width: 560px;
margin: 0 auto 32px;
text-align: center;
font-size: 1rem;
line-height: 1.6;
color: var(--muted, #777);
}
/* --- Reassurance cards : texte qui wrap (jamais tronqué) --- */
.reassurance .reassurance-item,
.reassurance-grid .reassurance-item {
white-space: normal !important;
overflow: visible !important;
display: block !important;
text-align: center !important;
padding: 28px 20px !important;
border-bottom: none !important;
}
.reassurance .reassurance-item p,
.reassurance-grid .reassurance-item p {
white-space: normal !important;
overflow: visible !important;
word-wrap: break-word !important;
font-size: 0.9rem !important;
line-height: 1.5 !important;
}
.reassurance .reassurance-item strong,
.reassurance-grid .reassurance-item strong {
white-space: normal !important;
overflow: visible !important;
}
/* ═══════════════════════════════════════════════════════════
HORTIS — UTILITY BAR (au-dessus du header)
═══════════════════════════════════════════════════════════ */
.utility-bar { background: var(--primary); color: rgba(255,255,255,.85); font-size: .8rem; line-height: 1; }
.utility-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--utility-h); }
.utility-bar-left, .utility-bar-right { display: flex; align-items: center; gap: 18px; }
.utility-bar a { color: rgba(255,255,255,.85); transition: color var(--transition); }
.utility-bar a:hover { color: #fff; }
.utility-bar-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); padding: 5px 10px; border-radius: 99px; font-weight: 500; }
.utility-bar-dot { width: 6px; height: 6px; border-radius: 50%; background: #B4C0A4; box-shadow: 0 0 0 4px rgba(180,192,164,.18); animation: hortis-pulse 2s infinite; }
@keyframes hortis-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.utility-bar-sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); }
@media (max-width: 768px) { .utility-bar { display: none; } }
/* ═══════════════════════════════════════════════════════════
FOOTER HORTIS — 6 colonnes + ribbon trust + payment chips
═══════════════════════════════════════════════════════════ */
.footer-ribbon { background: var(--bg-tint); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: 28px 0; }
.footer-ribbon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.footer-ribbon-item { display: flex; align-items: center; gap: 14px; }
.footer-ribbon-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 50%; font-size: 1.4rem; box-shadow: var(--shadow); }
.footer-ribbon-text strong { display: block; font-size: .92rem; color: var(--ink); margin-bottom: 2px; }
.footer-ribbon-text span { font-size: .8rem; color: var(--muted); }
.site-footer { background: var(--primary); color: rgba(255,255,255,.78); padding: 64px 0 0; }
.site-footer h4 { color: #fff; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; margin-bottom: 18px; }
.site-footer a { color: rgba(255,255,255,.7); transition: color var(--transition); }
.site-footer a:hover { color: var(--terra-soft); }
.footer-inner { padding: 0; }
/* Footer = 1 seul étage : 4 colonnes max (brand 2x + 3 cols liens). Voir feedback_footer_single_row. */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.2fr 1fr; gap: 48px; padding-bottom: 48px; padding-top: 8px; }
.footer-col h4 { letter-spacing: .02em; }
.footer-col ul li { margin-bottom: 10px; font-size: .9rem; }
.footer-brand p { font-size: .9rem; line-height: 1.6; margin-bottom: 18px; }
.footer-baseline { color: rgba(255,255,255,.85); }
.footer-socials { display: flex; gap: 10px; margin-bottom: 24px; }
.footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); transition: all var(--transition); }
.footer-social-link:hover { background: var(--cta); transform: translateY(-2px); }
.footer-newsletter-mini { background: rgba(255,255,255,.06); padding: 14px 16px; border-radius: var(--radius); margin-top: 8px; }
.footer-newsletter-mini h5 { color: #fff; font-size: .95rem; margin-bottom: 6px; font-weight: 600; }
.footer-newsletter-mini p { font-size: .8rem; margin-bottom: 10px; color: rgba(255,255,255,.65); }
.footer-newsletter-mini form { display: flex; gap: 6px; }
.footer-newsletter-mini input { flex: 1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 8px 12px; color: #fff; font-size: .85rem; outline: none; }
.footer-newsletter-mini input::placeholder { color: rgba(255,255,255,.45); }
.footer-newsletter-mini button { background: var(--cta); color: #fff; border-radius: 6px; padding: 8px 14px; font-size: .85rem; font-weight: 600; cursor: pointer; border: none; }
.footer-newsletter-mini button:hover { background: var(--cta-hover); }
/* Paiements : supprimé en tant que bandeau séparé — les logos sont déplacés dans footer-bottom à droite */
.footer-payments { display: none; }
.footer-payments-label { display: none; }
.footer-payment-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-payment-chip { padding: 6px 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; font-size: .75rem; color: rgba(255,255,255,.85); font-weight: 600; letter-spacing: .03em; }
.footer-payment-chip strong { color: #fff; }
.footer-bottom { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 14px; gap: 12px; font-size: .8rem; color: rgba(255,255,255,.55); }
.footer-copyright { color: rgba(255,255,255,.55); margin: 0; }
.footer-legal { display: flex; gap: 10px; align-items: center; }
.footer-legal a { font-size: .8rem; }
.footer-legal-sep { color: rgba(255,255,255,.3); }
.footer-cookies { margin: 0; }
.footer-cookies button { color: rgba(255,255,255,.55); font-size: .8rem; cursor: pointer; background: none; border: none; }
.footer-cookies button:hover { color: var(--terra-soft); }
/* Mobile = wrap autorisé, mais desktop ≥ 1024px = strictement 1 rangée. */
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } .footer-payments { flex-direction: column; align-items: flex-start; } }
/* ═══════════════════════════════════════════════════════════
SECTION HEADER COMMUN
═══════════════════════════════════════════════════════════ */
.section-padding { padding: 96px 0; }
.section-padding-sm { padding: 64px 0; }
.section-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-header .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--bg-tint); color: var(--primary); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 99px; margin-bottom: 20px; }
.section-header .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cta); }
.section-header .section-title { margin-bottom: 16px; }
.section-header .section-subtitle { color: var(--muted); max-width: 600px; margin: 0 auto; }
/* ═══════════════════════════════════════════════════════════
ATELIER CREDS
═══════════════════════════════════════════════════════════ */
.atelier-creds-section { background: var(--bg); }
.atelier-creds-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.atelier-creds-img { position: relative; aspect-ratio: 5/4; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.atelier-creds-img img { width: 100%; height: 100%; object-fit: cover; }
.atelier-creds-badge { position: absolute; bottom: 24px; left: 24px; background: rgba(255,251,244,.94); backdrop-filter: blur(8px); padding: 14px 18px; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; }
.atelier-creds-badge-icon { font-size: 1.6rem; }
.atelier-creds-badge strong { display: block; font-size: .92rem; color: var(--ink); }
.atelier-creds-badge span { font-size: .8rem; color: var(--muted); }
.atelier-creds-content h2 { margin-bottom: 20px; }
.atelier-creds-content p { color: var(--ink-soft); margin-bottom: 18px; line-height: 1.7; }
.atelier-creds-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0; }
.atelier-creds-stat { background: var(--bg-alt); padding: 18px 14px; border-radius: var(--radius); text-align: center; border-left: 3px solid var(--cta); }
.atelier-creds-stat-num { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--primary); display: block; line-height: 1; margin-bottom: 6px; }
.atelier-creds-stat-label { font-size: .78rem; color: var(--muted); }
.atelier-creds-signature { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border-light); }
.atelier-creds-signature-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--wood-soft); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary); font-family: var(--font-heading); }
.atelier-creds-signature-text strong { display: block; color: var(--ink); font-size: .9rem; }
.atelier-creds-signature-text span { font-size: .8rem; color: var(--muted); }
@media (max-width: 900px) { .atelier-creds-grid { grid-template-columns: 1fr; gap: 40px; } }
/* ═══════════════════════════════════════════════════════════
PRESS STRIP
═══════════════════════════════════════════════════════════ */
.press-strip-section { background: var(--bg-alt); padding: 64px 0; }
.press-strip-label { text-align: center; color: var(--muted); font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 36px; }
.press-strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.press-strip-card { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 26px; transition: all var(--transition); }
.press-strip-card:hover { box-shadow: var(--shadow); border-color: var(--accent-soft); }
.press-strip-source { font-family: var(--font-heading); font-weight: 700; color: var(--primary); font-size: 1.1rem; letter-spacing: .02em; margin-bottom: 14px; }
.press-strip-quote { font-size: .92rem; color: var(--ink); line-height: 1.6; margin-bottom: 14px; font-style: italic; }
.press-strip-foot { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--border-light); }
/* ═══════════════════════════════════════════════════════════
WARRANTY GRID
═══════════════════════════════════════════════════════════ */
.warranty-grid-section { background: var(--bg); }
.warranty-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.warranty-card { background: var(--bg-alt); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 32px 28px; position: relative; overflow: hidden; transition: all var(--transition); }
.warranty-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--cta), var(--accent)); }
.warranty-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.warranty-card-icon { width: 56px; height: 56px; background: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 18px; box-shadow: var(--shadow); }
.warranty-card-years { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 700; color: var(--cta); line-height: 1; margin-bottom: 8px; }
.warranty-card-years sup { font-size: 1rem; vertical-align: 1.2em; }
.warranty-card-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.warranty-card-desc { font-size: .9rem; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
.warranty-card-bullets { list-style: none; padding: 0; margin: 0; }
.warranty-card-bullets li { font-size: .85rem; color: var(--ink-soft); padding: 6px 0 6px 22px; position: relative; }
.warranty-card-bullets li::before { content: '✓'; position: absolute; left: 0; top: 6px; color: var(--accent); font-weight: 700; }
/* ═══════════════════════════════════════════════════════════
GLOSSARY
═══════════════════════════════════════════════════════════ */
.glossary-section { background: var(--bg-alt); }
.glossary-tabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
.glossary-tab { padding: 8px 18px; background: var(--bg); border: 1px solid var(--border-light); border-radius: 99px; font-size: .82rem; color: var(--muted); cursor: pointer; transition: all var(--transition); font-family: var(--font-body); font-weight: 500; }
.glossary-tab.active, .glossary-tab:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.glossary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.glossary-entry { background: var(--bg); border-radius: var(--radius); padding: 22px; border-left: 3px solid var(--accent); transition: all var(--transition); }
.glossary-entry:hover { border-left-color: var(--cta); box-shadow: var(--shadow); transform: translateX(4px); }
.glossary-term { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.glossary-term-tag { font-size: .7rem; font-weight: 600; color: var(--cta); background: rgba(61,82,54,.12); padding: 2px 8px; border-radius: 99px; letter-spacing: .04em; text-transform: uppercase; font-family: var(--font-body); }
.glossary-def { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }
.glossary-def strong { color: var(--ink); }
/* ═══════════════════════════════════════════════════════════
LIVE ACTIVITY
═══════════════════════════════════════════════════════════ */
.live-activity-section { background: var(--bg); }
.live-activity-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--bg-alt); border-radius: var(--radius-lg); padding: 24px 32px; margin-bottom: 32px; }
.live-activity-pulse { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--primary); }
.live-activity-pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: #5F7F45; box-shadow: 0 0 0 5px rgba(95,127,69,.18); animation: hortis-pulse 1.6s infinite; }
.live-activity-stat { text-align: center; }
.live-activity-stat-num { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--primary); display: block; line-height: 1; }
.live-activity-stat-label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.live-activity-feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.live-activity-item { display: flex; align-items: center; gap: 14px; background: var(--bg-alt); border-radius: var(--radius); padding: 14px 18px; border: 1px solid var(--border-light); }
.live-activity-icon { width: 38px; height: 38px; flex-shrink: 0; background: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.live-activity-text { flex: 1; font-size: .87rem; color: var(--ink-soft); line-height: 1.5; }
.live-activity-text strong { color: var(--ink); }
.live-activity-time { font-size: .75rem; color: var(--muted); white-space: nowrap; }
/* ═══════════════════════════════════════════════════════════
SUPPORT CENTER
═══════════════════════════════════════════════════════════ */
.support-center-section { background: var(--bg-alt); }
.support-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.support-card { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 28px; transition: all var(--transition); color: var(--ink); display: flex; flex-direction: column; }
.support-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent-soft); color: var(--ink); }
.support-card-icon { font-size: 2rem; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--bg-tint); border-radius: var(--radius); margin-bottom: 18px; }
.support-card--terra .support-card-icon { background: rgba(61,82,54,.14); }
.support-card--moss .support-card-icon { background: rgba(139,159,126,.18); }
.support-card--wood .support-card-icon { background: rgba(180,144,106,.18); }
.support-card-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; margin-bottom: 10px; color: var(--primary); }
.support-card-desc { font-size: .9rem; color: var(--muted); line-height: 1.6; margin-bottom: 18px; flex: 1; }
.support-card-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--cta); font-weight: 600; font-size: .88rem; margin-top: auto; transition: gap var(--transition); }
.support-card:hover .support-card-cta { gap: 10px; }
.support-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 6px; box-shadow: 0 0 0 3px rgba(95,127,69,.2); animation: hortis-pulse 2s infinite; }
/* ═══════════════════════════════════════════════════════════
AMBIANCES JARDIN (galerie d'inspirations)
═══════════════════════════════════════════════════════════ */
.ambiances-section { background: var(--bg); }
.ambiances-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.ambiance-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; cursor: pointer; transition: all var(--transition); text-decoration: none; }
.ambiance-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ambiance-card.span-3 { grid-column: span 3; }
.ambiance-card.span-4 { grid-column: span 4; }
.ambiance-card.span-6 { grid-column: span 6; aspect-ratio: 5/4; }
.ambiance-card.span-8 { grid-column: span 8; aspect-ratio: 5/4; }
.ambiance-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ambiance-card:hover img { transform: scale(1.07); }
.ambiance-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(42,51,38,.85) 100%); padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.ambiance-card-tag { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--terra-soft); margin-bottom: 8px; }
.ambiance-card-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: #fff; margin-bottom: 4px; }
.ambiance-card-desc { font-size: .82rem; color: rgba(255,255,255,.88); line-height: 1.5; }
@media (max-width: 900px) {
.ambiances-grid { grid-template-columns: repeat(6, 1fr); }
.ambiance-card.span-3, .ambiance-card.span-4 { grid-column: span 3; }
.ambiance-card.span-6, .ambiance-card.span-8 { grid-column: span 6; }
}
@media (max-width: 540px) {
.ambiances-grid { grid-template-columns: repeat(2, 1fr); }
.ambiance-card.span-3, .ambiance-card.span-4, .ambiance-card.span-6, .ambiance-card.span-8 { grid-column: span 2; aspect-ratio: 4/5; }
}
/* ═══════════════════════════════════════════════════════════
ŒUF SUSPENDU FOCUS
═══════════════════════════════════════════════════════════ */
.oeuf-suspendu-section { background: linear-gradient(135deg, var(--bg-tint) 0%, var(--bg-alt) 100%); position: relative; overflow: hidden; }
.oeuf-suspendu-section::before { content: ''; position: absolute; top: -120px; right: -120px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(61,82,54,.18) 0%, transparent 70%); border-radius: 50%; }
.oeuf-suspendu-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.oeuf-suspendu-visual { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.oeuf-suspendu-visual img { width: 100%; height: 100%; object-fit: cover; }
.oeuf-suspendu-visual-badge { position: absolute; top: 24px; left: 24px; background: rgba(255,251,244,.95); backdrop-filter: blur(8px); padding: 10px 16px; border-radius: 99px; font-size: .78rem; font-weight: 600; color: var(--primary); letter-spacing: .04em; }
.oeuf-suspendu-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cta); margin-bottom: 18px; }
.oeuf-suspendu-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--cta); }
.oeuf-suspendu-content h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 20px; line-height: 1.15; }
.oeuf-suspendu-lead { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 28px; }
.oeuf-suspendu-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px; }
.oeuf-suspendu-feature { display: flex; gap: 12px; }
.oeuf-suspendu-feature-icon { width: 36px; height: 36px; flex-shrink: 0; background: var(--bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .95rem; box-shadow: var(--shadow); }
.oeuf-suspendu-feature-text strong { display: block; font-size: .92rem; color: var(--ink); margin-bottom: 2px; }
.oeuf-suspendu-feature-text span { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.oeuf-suspendu-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.oeuf-suspendu-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; padding-top: 24px; border-top: 1px dashed var(--border); }
.oeuf-suspendu-price-from { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.oeuf-suspendu-price-value { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--primary); }
.oeuf-suspendu-price-vs { font-size: .9rem; color: var(--muted); text-decoration: line-through; }
@media (max-width: 900px) { .oeuf-suspendu-grid { grid-template-columns: 1fr; gap: 40px; } .oeuf-suspendu-features { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════
MANIFESTO BLOCK
═══════════════════════════════════════════════════════════ */
.manifesto-section { background: var(--primary); color: #fff; padding: 120px 0; position: relative; overflow: hidden; }
.manifesto-section::before { content: ''; position: absolute; bottom: -180px; left: -180px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(61,82,54,.22) 0%, transparent 70%); border-radius: 50%; }
.manifesto-inner { max-width: 820px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.manifesto-eyebrow { display: inline-block; font-size: .82rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--terra-soft); margin-bottom: 24px; }
.manifesto-text { font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.4; font-weight: 500; color: #fff; margin-bottom: 32px; }
.manifesto-text em { color: var(--terra-soft); font-style: italic; }
.manifesto-signature { display: inline-flex; align-items: center; gap: 14px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.18); }
.manifesto-signature-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--wood-soft); display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 700; font-family: var(--font-heading); }
.manifesto-signature-text { text-align: left; }
.manifesto-signature-text strong { display: block; color: #fff; font-size: .9rem; }
.manifesto-signature-text span { font-size: .8rem; color: rgba(255,255,255,.65); }
/* ═══════════════════════════════════════════════════════════
HERO HORTIS — Mosaïque + trust badges
═══════════════════════════════════════════════════════════ */
.hero-hortis { background: linear-gradient(135deg, var(--bg-tint) 0%, var(--bg-alt) 100%); position: relative; overflow: hidden; padding: 80px 0; }
.hero-hortis::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(61,82,54,.14) 0%, transparent 60%); border-radius: 50%; pointer-events: none; }
.hero-hortis::after { content: ''; position: absolute; bottom: -120px; left: -120px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(139,159,126,.18) 0%, transparent 60%); border-radius: 50%; pointer-events: none; }
.hero-hortis-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero-hortis-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--primary); background: rgba(139,159,126,.18); padding: 8px 16px; border-radius: 99px; margin-bottom: 24px; }
.hero-hortis-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 4px rgba(61,82,54,.2); animation: hortis-pulse 2s infinite; }
.hero-hortis-title { font-family: var(--font-heading); font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.05; color: var(--primary); margin: 0 0 20px; letter-spacing: -.02em; }
.hero-hortis-subtitle { font-size: 1.1rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 36px; max-width: 540px; }
.hero-hortis-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-hortis-ctas .btn-lg { padding: 18px 32px; font-size: 1rem; }
.hero-hortis-ctas .btn-primary { box-shadow: 0 8px 24px rgba(61,82,54,.28); }
.hero-hortis-ctas .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(61,82,54,.36); }
.hero-hortis-badges { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 28px; border-top: 1px dashed var(--border); }
.hero-hortis-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-soft); font-weight: 500; }
.hero-hortis-badge-icon { font-size: 1.1rem; }
.hero-hortis-visual { position: relative; }
.hero-hortis-mosaic { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; aspect-ratio: 1/1.15; }
.hero-hortis-mosaic-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-hortis-mosaic-main img { width: 100%; height: 100%; object-fit: cover; }
.hero-hortis-mosaic-side { display: grid; grid-template-rows: 1fr 1.2fr; gap: 14px; }
.hero-hortis-mosaic-top, .hero-hortis-mosaic-bot { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.hero-hortis-mosaic-top img, .hero-hortis-mosaic-bot img { width: 100%; height: 100%; object-fit: cover; }
.hero-hortis-single { position: relative; aspect-ratio: 4/4.6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-hortis-single img { width: 100%; height: 100%; object-fit: cover; }
.hero-hortis-sticker { position: absolute; background: rgba(255,251,244,.96); backdrop-filter: blur(8px); padding: 12px 16px; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.hero-hortis-sticker strong { font-family: var(--font-heading); font-size: 1.2rem; color: var(--primary); }
.hero-hortis-sticker span { font-size: .76rem; color: var(--muted); }
.hero-hortis-sticker-1 { top: 24px; left: 24px; transform: rotate(-3deg); }
.hero-hortis-sticker-2 { bottom: 18px; right: -8px; transform: rotate(2deg); }
.hero-hortis-sticker-2 strong { font-size: .92rem; }
@media (max-width: 900px) {
.hero-hortis-inner { grid-template-columns: 1fr; gap: 40px; }
.hero-hortis-visual { order: -1; max-width: 480px; margin: 0 auto; }
.hero-hortis-mosaic { aspect-ratio: 1/1; }
}
/* ═══════════════════════════════════════════════════════════
HORTIS VS — comparateur différenciation
═══════════════════════════════════════════════════════════ */
.hortis-vs-section { background: var(--bg-alt); }
.hortis-vs-table { background: var(--bg); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border-light); }
.hortis-vs-head { display: grid; grid-template-columns: 1.2fr 1.5fr 1.5fr; background: var(--primary); color: #fff; }
.hortis-vs-head-cell { padding: 22px 24px; font-family: var(--font-heading); font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.hortis-vs-head-left { background: rgba(61,82,54,.22); border-left: 3px solid var(--cta); }
.hortis-vs-head-right { color: rgba(255,255,255,.55); border-left: 1px solid rgba(255,255,255,.1); }
.hortis-vs-logo { font-size: 1.3rem; }
.hortis-vs-logo-grey { font-size: 1.3rem; filter: grayscale(1) opacity(.6); }
.hortis-vs-row { display: grid; grid-template-columns: 1.2fr 1.5fr 1.5fr; border-top: 1px solid var(--border-light); transition: background var(--transition); }
.hortis-vs-row:hover { background: var(--bg-alt); }
.hortis-vs-cell { padding: 18px 24px; font-size: .9rem; line-height: 1.55; display: flex; align-items: flex-start; gap: 10px; }
.hortis-vs-cell-criteria { font-weight: 600; color: var(--primary); background: var(--bg-tint); }
.hortis-vs-cell-left { background: rgba(61,82,54,.04); border-left: 3px solid var(--cta); color: var(--ink); }
.hortis-vs-cell-left.is-strong { font-weight: 500; }
.hortis-vs-cell-right { color: var(--muted); border-left: 1px solid var(--border-light); }
.hortis-vs-check { color: var(--success); font-weight: 700; flex-shrink: 0; font-size: 1.1rem; line-height: 1.3; }
.hortis-vs-cross { color: var(--danger); font-weight: 700; flex-shrink: 0; font-size: 1.05rem; line-height: 1.3; }
.hortis-vs-cell-left .hortis-vs-cross { color: var(--muted); }
.hortis-vs-footer { text-align: center; margin-top: 40px; }
.hortis-vs-footer p { color: var(--ink-soft); font-size: 1rem; margin-bottom: 20px; max-width: 700px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) {
.hortis-vs-head, .hortis-vs-row { grid-template-columns: 1fr; }
.hortis-vs-cell-criteria { background: var(--primary); color: #fff; padding: 12px 20px; }
.hortis-vs-cell { padding: 14px 20px; }
}
/* ═══════════════════════════════════════════════════════════
ATELIER PROCESS — timeline 4 étapes
═══════════════════════════════════════════════════════════ */
.atelier-process-section { background: var(--bg); }
.atelier-process-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; counter-reset: process; position: relative; }
.atelier-process-timeline::before { content: ''; position: absolute; top: 32px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--cta) 0%, var(--accent) 100%); z-index: 0; opacity: .35; }
.atelier-process-step { position: relative; z-index: 1; }
.atelier-process-num { width: 64px; height: 64px; margin: 0 auto 20px; background: var(--bg); border: 3px solid var(--cta); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; color: var(--cta); box-shadow: var(--shadow); }
.atelier-process-card { background: var(--bg-alt); border-radius: var(--radius-lg); padding: 26px 22px; border: 1px solid var(--border-light); text-align: center; transition: all var(--transition); height: 100%; }
.atelier-process-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-soft); }
.atelier-process-icon { font-size: 2rem; margin-bottom: 14px; }
.atelier-process-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; color: var(--primary); margin-bottom: 10px; }
.atelier-process-desc { font-size: .88rem; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
.atelier-process-duration { display: inline-block; font-size: .78rem; color: var(--cta); background: rgba(61,82,54,.1); padding: 5px 12px; border-radius: 99px; font-weight: 600; }
@media (max-width: 900px) { .atelier-process-timeline { grid-template-columns: repeat(2, 1fr); } .atelier-process-timeline::before { display: none; } }
@media (max-width: 540px) { .atelier-process-timeline { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════
BUNDLE KITS — packs prêts à monter
═══════════════════════════════════════════════════════════ */
.bundle-kits-section { background: var(--bg-alt); }
.bundle-kits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }
.bundle-kit { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--transition); display: flex; flex-direction: column; }
.bundle-kit:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.bundle-kit-image { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.bundle-kit-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bundle-kit:hover .bundle-kit-image img { transform: scale(1.05); }
.bundle-kit-badge { position: absolute; top: 16px; left: 16px; background: var(--cta); color: #fff; padding: 6px 14px; border-radius: 99px; font-size: .85rem; font-weight: 700; letter-spacing: .04em; box-shadow: var(--shadow); }
.bundle-kit--terra .bundle-kit-badge { background: var(--cta); }
.bundle-kit--moss .bundle-kit-badge { background: var(--accent); }
.bundle-kit--wood .bundle-kit-badge { background: var(--wood); }
.bundle-kit-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.bundle-kit-label { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.bundle-kit-desc { font-size: .9rem; color: var(--muted); line-height: 1.5; margin-bottom: 18px; }
.bundle-kit-items { list-style: none; padding: 0; margin: 0 0 20px; border-top: 1px solid var(--border-light); }
.bundle-kit-items li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-light); font-size: .85rem; gap: 10px; }
.bundle-kit-item-name { color: var(--ink-soft); flex: 1; }
.bundle-kit-item-price { color: var(--muted); font-weight: 500; white-space: nowrap; }
.bundle-kit-total { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 18px; margin-top: auto; }
.bundle-kit-total-label { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.bundle-kit-total-prices { display: flex; align-items: baseline; gap: 10px; }
.bundle-kit-total-strike { font-size: .9rem; color: var(--muted); text-decoration: line-through; }
.bundle-kit-total-value { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--cta); }
.bundle-kit-cta { width: 100%; }
/* ═══════════════════════════════════════════════════════════
AVANT/APRÈS — galerie transformations
═══════════════════════════════════════════════════════════ */
.avant-apres-section { background: var(--bg); }
.avant-apres-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px; }
.avant-apres-card { background: var(--bg-alt); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-light); transition: all var(--transition); }
.avant-apres-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.avant-apres-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); }
.avant-apres-figure { position: relative; aspect-ratio: 1; overflow: hidden; margin: 0; background: var(--bg); }
.avant-apres-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.avant-apres-figure-before img { filter: grayscale(.4) brightness(.95); }
.avant-apres-card:hover .avant-apres-figure-after img { transform: scale(1.04); }
.avant-apres-label { position: absolute; top: 10px; left: 10px; background: rgba(255,251,244,.94); backdrop-filter: blur(8px); padding: 4px 12px; border-radius: 99px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.avant-apres-label-after { background: var(--cta); color: #fff; }
.avant-apres-body { padding: 22px; }
.avant-apres-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.avant-apres-client { font-family: var(--font-heading); font-size: 1.05rem; color: var(--primary); font-weight: 600; }
.avant-apres-budget { font-size: .8rem; color: var(--cta); background: rgba(61,82,54,.1); padding: 4px 10px; border-radius: 99px; font-weight: 600; }
.avant-apres-product { font-size: .85rem; color: var(--muted); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); }
.avant-apres-quote { font-size: .9rem; color: var(--ink); line-height: 1.6; font-style: italic; margin: 0; }
/* ═══════════════════════════════════════════════════════════
CARTE INSTALLATIONS — France SVG + stats
═══════════════════════════════════════════════════════════ */
.carte-installations-section { background: var(--bg-alt); }
.carte-installations-stats { display: flex; justify-content: center; gap: 48px; margin-bottom: 32px; flex-wrap: wrap; }
.carte-installations-stat { text-align: center; }
.carte-installations-stat-num { display: block; font-family: var(--font-heading); font-size: 2.4rem; font-weight: 700; color: var(--cta); line-height: 1; margin-bottom: 6px; }
.carte-installations-stat-label { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.carte-installations-map { max-width: 720px; margin: 0 auto; background: var(--bg); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.carte-svg { width: 100%; height: auto; max-height: 560px; }
.carte-city-glow { fill: rgba(61,82,54,.18); }
.carte-city.is-hot .carte-city-glow { fill: rgba(61,82,54,.32); animation: hortis-pulse 2.4s infinite; }
.carte-city-dot { fill: var(--cta); }
.carte-city.is-hot .carte-city-dot { fill: var(--primary); }
.carte-city-name { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--primary); }
.carte-city-count { font-size: 11px; fill: var(--muted); }
.carte-atelier-label { font-size: 14px; font-weight: 700; fill: var(--cta); font-family: var(--font-heading); }
.carte-installations-foot { text-align: center; margin-top: 24px; color: var(--ink-soft); font-size: .92rem; }
.carte-installations-foot a { color: var(--cta); font-weight: 600; text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════
ERREURS À ÉVITER — pédagogie liste
═══════════════════════════════════════════════════════════ */
.erreurs-section { background: var(--bg); }
.erreurs-list { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.erreur-item { display: grid; grid-template-columns: 72px 1fr; gap: 22px; background: var(--bg-alt); border-radius: var(--radius-lg); padding: 26px 28px; border: 1px solid var(--border-light); border-left: 4px solid var(--danger); transition: all var(--transition); }
.erreur-item:hover { transform: translateX(4px); box-shadow: var(--shadow); border-left-color: var(--cta); }
.erreur-num { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; color: var(--cta); line-height: 1; opacity: .35; }
.erreur-content { flex: 1; }
.erreur-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 14px; flex-wrap: wrap; }
.erreur-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: var(--primary); margin: 0; }
.erreur-danger { font-size: .72rem; font-weight: 700; color: var(--danger); background: rgba(176,65,62,.12); padding: 4px 10px; border-radius: 99px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.erreur-desc { font-size: .92rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 14px; }
.erreur-fix { background: rgba(139,159,126,.14); border-radius: var(--radius); padding: 12px 16px; font-size: .9rem; color: var(--ink); line-height: 1.55; }
.erreur-fix strong { color: var(--success); margin-right: 4px; }
@media (max-width: 640px) { .erreur-item { grid-template-columns: 56px 1fr; gap: 14px; padding: 20px; } }
/* ═══════════════════════════════════════════════════════════
STICKY MOBILE CTA — bouton fixe en bas (mobile only)
═══════════════════════════════════════════════════════════ */
.sticky-mobile-cta { display: none; }
@media (max-width: 768px) {
.sticky-mobile-cta {
display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
background: rgba(255,251,244,.96); backdrop-filter: blur(12px);
border-top: 1px solid var(--border-light); padding: 12px 16px; gap: 10px;
box-shadow: 0 -4px 16px rgba(42,51,38,.1);
}
.sticky-mobile-cta .btn { flex: 1; padding: 14px; font-size: .95rem; }
body { padding-bottom: 80px; }
}
/* ═══════════════════════════════════════════════════════════
FREE SHIPPING PROGRESS BAR (dans drawer panier)
═══════════════════════════════════════════════════════════ */
.shipping-progress { background: var(--bg-alt); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--border-light); }
.shipping-progress-text { font-size: .82rem; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.4; }
.shipping-progress-text strong { color: var(--cta); }
.shipping-progress-text.is-unlocked { color: var(--success); font-weight: 600; }
.shipping-progress-bar { height: 6px; background: var(--border-light); border-radius: 99px; overflow: hidden; }
.shipping-progress-fill { height: 100%; background: linear-gradient(90deg, var(--cta), var(--accent)); border-radius: 99px; transition: width .4s ease; width: 0; }
.shipping-progress.is-unlocked .shipping-progress-fill { background: var(--success); width: 100% !important; }
/* ═══════════════════════════════════════════════════════════
SCROLL REVEAL — animations légères
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
.section-padding > .container > * { animation: hortis-fade-up .6s ease both; }
.section-padding > .container > *:nth-child(2) { animation-delay: .08s; }
.section-padding > .container > *:nth-child(3) { animation-delay: .16s; }
}
@keyframes hortis-fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ═══════════════════════════════════════════════════════════
BACK TO TOP — bouton flottant
═══════════════════════════════════════════════════════════ */
.back-to-top { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all var(--transition); z-index: 50; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--cta); transform: translateY(-4px); }
@media (max-width: 768px) { .back-to-top { bottom: 80px; right: 16px; } }
/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
USPs PRO — SVG line icons, layout aéré, hairline separators
Remplace .usps-icons / .usp-card de la version emoji.
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.usps-pro-section { background: var(--bg); padding: 32px 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.usps-pro-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.usps-pro-item { display: flex; align-items: center; gap: 18px; padding: 22px 28px; position: relative; transition: background var(--transition); }
.usps-pro-item:hover { background: var(--bg-alt); }
/* Hairline separators verticales entre items (Г©purГ©) */
.usps-pro-item:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 28px;
bottom: 28px;
width: 1px;
background: var(--border-light);
}
.usps-pro-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary);
transition: color var(--transition), transform var(--transition);
}
.usps-pro-icon svg { display: block; }
.usps-pro-item:hover .usps-pro-icon { color: var(--cta); transform: translateY(-2px); }
.usps-pro-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.usps-pro-title {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 600;
color: var(--primary);
line-height: 1.2;
letter-spacing: -0.005em;
}
.usps-pro-sub {
font-size: .82rem;
color: var(--muted);
line-height: 1.4;
letter-spacing: .01em;
}
/* Responsive : 2 cols sur tablette, 1 col sur mobile, separators horizontaux */
@media (max-width: 900px) {
.usps-pro-grid { grid-template-columns: repeat(2, 1fr); }
.usps-pro-item:not(:last-child)::after { display: none; }
.usps-pro-item:nth-child(odd):not(:last-child) {
border-right: 1px solid var(--border-light);
}
.usps-pro-item:not(:nth-last-child(-n+2)) {
border-bottom: 1px solid var(--border-light);
}
}
@media (max-width: 540px) {
.usps-pro-grid { grid-template-columns: 1fr; }
.usps-pro-item { padding: 18px 20px; }
.usps-pro-item:nth-child(odd):not(:last-child) { border-right: none; }
.usps-pro-item:not(:last-child) { border-bottom: 1px solid var(--border-light); }
}
/* ═══════════════════════════════════════════════════════════
USPs PRO — SVG line icons, layout aéré, hairline separators (empire)
═══════════════════════════════════════════════════════════ */
.usps-pro-section { background: var(--bg, #fff); padding: 32px 0; border-top: 1px solid var(--border-light, #eee); border-bottom: 1px solid var(--border-light, #eee); }
.usps-pro-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.usps-pro-item { display: flex; align-items: center; gap: 18px; padding: 22px 28px; position: relative; transition: background .25s ease; }
.usps-pro-item:hover { background: var(--bg-alt, var(--bg-tint, #f7f7f7)); }
.usps-pro-item:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 28px;
bottom: 28px;
width: 1px;
background: var(--border-light, #eee);
}
.usps-pro-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary, #222);
transition: color .25s ease, transform .25s ease;
}
.usps-pro-icon svg { display: block; }
.usps-pro-item:hover .usps-pro-icon { color: var(--cta, var(--accent, #555)); transform: translateY(-2px); }
.usps-pro-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.usps-pro-title {
font-family: var(--font-heading, inherit);
font-size: 1rem;
font-weight: 600;
color: var(--primary, #222);
line-height: 1.2;
letter-spacing: -0.005em;
}
.usps-pro-sub {
font-size: .82rem;
color: var(--muted, #888);
line-height: 1.4;
letter-spacing: .01em;
}
@media (max-width: 900px) {
.usps-pro-grid { grid-template-columns: repeat(2, 1fr); }
.usps-pro-item:not(:last-child)::after { display: none; }
.usps-pro-item:nth-child(odd):not(:last-child) { border-right: 1px solid var(--border-light, #eee); }
.usps-pro-item:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--border-light, #eee); }
}
@media (max-width: 540px) {
.usps-pro-grid { grid-template-columns: 1fr; }
.usps-pro-item { padding: 18px 20px; }
.usps-pro-item:nth-child(odd):not(:last-child) { border-right: none; }
.usps-pro-item:not(:last-child) { border-bottom: 1px solid var(--border-light, #eee); }
}
/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
WARRANTY V2 — refonte propre, 4 cards strict, métrique inline
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.warranty-v2-section { background: var(--bg, #fff); }
.warranty-v2-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.warranty-v2-card {
background: var(--bg-alt, #f5efe2);
border: 1px solid var(--border-light, #ece2c9);
border-radius: var(--radius-lg, 18px);
padding: 32px 28px;
display: flex;
flex-direction: column;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.warranty-v2-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg, 0 12px 36px rgba(0,0,0,.12));
border-color: var(--accent-soft, #B4C0A4);
}
/* Top : icГґne Г gauche, mГ©trique Г droite, alignГ©s sur mГЄme ligne */
.warranty-v2-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-light, #ece2c9);
}
.warranty-v2-card-icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg, #fff);
border-radius: 50%;
color: var(--primary, #2A3326);
}
.warranty-v2-card-icon svg { display: block; }
/* MГ©trique : chiffre BIG + unit en petit dessous, alignГ©s Г droite */
.warranty-v2-card-metric {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1;
}
.warranty-v2-card-num {
font-family: var(--font-heading, Georgia, serif);
font-size: 2.2rem;
font-weight: 700;
color: var(--cta, var(--primary, #2A3326));
letter-spacing: -0.02em;
line-height: 1;
}
.warranty-v2-card-unit {
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--muted, #6E6A5C);
margin-top: 4px;
}
.warranty-v2-card-title {
font-family: var(--font-heading, Georgia, serif);
font-size: 1.1rem;
font-weight: 700;
color: var(--ink, #1F2519);
margin: 0 0 10px;
line-height: 1.25;
letter-spacing: -0.005em;
}
.warranty-v2-card-desc {
font-size: .88rem;
color: var(--muted, #6E6A5C);
line-height: 1.55;
margin: 0 0 16px;
}
.warranty-v2-card-bullets {
list-style: none;
padding: 0;
margin: auto 0 0;
border-top: 1px dashed var(--border, #d6cdb6);
padding-top: 14px;
}
.warranty-v2-card-bullets li {
font-size: .82rem;
color: var(--ink-soft, #3A3F32);
padding: 5px 0 5px 22px;
position: relative;
line-height: 1.45;
}
.warranty-v2-card-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 12px;
height: 7px;
border-left: 2px solid var(--success, #5F7F45);
border-bottom: 2px solid var(--success, #5F7F45);
transform: rotate(-45deg);
}
@media (max-width: 1024px) {
.warranty-v2-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 540px) {
.warranty-v2-grid { grid-template-columns: 1fr; }
.warranty-v2-card { padding: 24px 22px; }
}
/* Footer payment mini — petits logos compacts dans la barre footer-bottom, à droite */
.footer-payment-mini { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: 0; }
.footer-payment-mini .pay-mini { display: inline-flex; width: 40px; height: 24px; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.15); background: #fff; line-height: 0; transition: transform .2s ease; }
.footer-payment-mini .pay-mini:hover { transform: translateY(-1px); }
.footer-payment-mini .pay-mini svg { display: block; width: 100%; height: 100%; }
@media (max-width: 768px) { .footer-payment-mini { margin-left: 0; margin-top: 8px; } }
/* Legacy .footer-payment-logos (gardé caché si présent dans cache) */
.footer-payment-logos { display: none; }
.footer-payment-mini .pay-mini img[alt="CB"] { object-fit: cover; }
.site-footer { overflow-x: hidden; }
.footer-inner { max-width: 100%; overflow-x: hidden; }
/* Anti scroll-horizontal global : confiner les carrousels dans leur section */
html, body { overflow-x: hidden; max-width: 100vw; }
.bestsellers, .categories-slider, .category-sliders, .ambiances-section, .hero-main, .testimonials, .atelier-creds-section, .warranty-v2-section { overflow-x: hidden; }
.bestsellers-scroll, .categories-grid, .cat-slider-row, .recently-viewed .product-grid { max-width: 100%; box-sizing: border-box; }
/* TOPBAR_MOBILE_1LINE v4 (ns 2026-07-25) - tout sur une ligne, tagline "Jusqu'à minuit" visible */
@media (max-width: 640px) {
#frezio-topbar {
flex-direction: row !important;
flex-wrap: nowrap !important;
padding: 8px 30px 8px 8px !important;
font-size: 11px !important;
gap: 6px !important;
line-height: 1.2 !important;
justify-content: center !important;
overflow: hidden !important;
}
#frezio-topbar > span:first-of-type {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 4px !important;
white-space: nowrap !important;
min-width: 0 !important;
font-size: 11px !important;
}
#frezio-topbar > span:first-of-type > span {
display: inline !important;
white-space: nowrap !important;
}
#frezio-topbar > span:first-of-type > span.topbar-tagline {
display: inline !important;
}
#frezio-topbar > span:first-of-type > span[style*="uppercase"] {
font-size: 11px !important;
letter-spacing: 0.2px !important;
}
#frezio-countdown {
flex-direction: row !important;
flex-shrink: 0 !important;
font-size: 11px !important;
gap: 2px !important;
}
#frezio-countdown > span[data-cd] {
padding: 1px 4px !important;
min-width: 22px !important;
font-size: 11px !important;
}
#frezio-topbar button[aria-label*="ermer"], #frezio-topbar button[aria-label*="chlie"] {
font-size: 16px !important;
right: 4px !important;
padding: 0 4px !important;
}
}
/* JARDIN - retire fond beige section bestsellers 2026-08-03 */
.bestsellers { background: transparent !important; }
/* JARDIN - prefiltres subcategory-chips sur 1 ligne 2026-08-03 */
.subcategory-chips { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.subcategory-chips .chip { white-space: nowrap; flex-shrink: 0; }
/* === city-savings v1 === */
.city-savings-section { background: var(--bg-alt); }
.city-savings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.city-savings-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; }
.city-savings-card--highlight { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-lg); transform: scale(1.03); }
.city-savings-card--highlight .city-savings-cost-label,
.city-savings-card--highlight .city-savings-time span { color: var(--accent-soft); }
.city-savings-icon { font-size: 36px; display: block; margin-bottom: 10px; }
.city-savings-label { font-family: var(--font-heading); font-size: 18px; margin-bottom: 14px; }
.city-savings-cost { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--cta); }
.city-savings-card--highlight .city-savings-cost { color: var(--accent); }
.city-savings-cost-label { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.city-savings-time { font-size: 14px; font-weight: 600; }
.city-savings-time span { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.city-savings-disclaimer { text-align: center; font-size: 12px; color: var(--muted); margin-top: 20px; }
@media (max-width: 768px) {
.city-savings-grid { grid-template-columns: 1fr; }
.city-savings-card--highlight { transform: none; order: -1; }
}
/* === photo-sections v1 (use-cases / photo-banner / brand-story) === */
.uc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 24px); }
.uc-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; color: #fff; background: #15181D; text-decoration: none; isolation: isolate; }
.uc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; z-index: -2; }
.uc-card:hover img { transform: scale(1.05); }
.uc-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21,24,29,0) 30%, rgba(21,24,29,.88) 100%); }
.uc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 1.6vw, 26px); display: flex; flex-direction: column; gap: 6px; }
.uc-tag { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #FFB224; }
.uc-title { font-family: var(--font-heading); font-size: clamp(18px, 1.5vw, 24px); line-height: 1.2; }
.uc-text { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.85); }
.uc-cta { margin-top: 6px; font-size: 14px; font-weight: 600; color: #fff; }
@media (max-width: 1024px) { .uc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .uc-grid { grid-template-columns: 1fr; } .uc-card { aspect-ratio: 4 / 3; } }
.photo-banner { position: relative; overflow: hidden; color: #fff; min-height: clamp(380px, 38vw, 560px); display: flex; align-items: center; isolation: isolate; }
.photo-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.photo-banner-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(21,24,29,.88) 0%, rgba(21,24,29,.55) 55%, rgba(21,24,29,.25) 100%); }
.photo-banner-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-block: clamp(40px, 5vw, 80px); flex-wrap: wrap; }
.photo-banner-copy { max-width: 560px; }
.photo-banner-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #FFB224; margin-bottom: 12px; }
.photo-banner-title { font-family: var(--font-heading); font-size: clamp(28px, 3.2vw, 48px); line-height: 1.1; margin: 0 0 14px; text-wrap: balance; }
.photo-banner-text { font-size: clamp(15px, 1.1vw, 18px); line-height: 1.55; color: rgba(255,255,255,.88); margin: 0 0 22px; }
.photo-banner-stats { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(20px, 3vw, 48px); }
.photo-banner-stats li { display: flex; flex-direction: column; gap: 4px; }
.photo-banner-stats strong { font-family: var(--font-heading); font-size: clamp(28px, 3vw, 46px); line-height: 1; }
.photo-banner-stats span { font-size: 13px; color: rgba(255,255,255,.8); max-width: 140px; }
.brand-story-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.brand-story-media { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 18px 50px rgba(21,24,29,.16); }
.brand-story-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-story-badge { position: absolute; left: 16px; bottom: 16px; background: #fff; color: #15181D; border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.brand-story-badge strong { font-family: var(--font-heading); font-size: 26px; line-height: 1; color: #5E53FF; }
.brand-story-badge span { font-size: 12px; color: #4a4f58; margin-top: 4px; }
.brand-story-p { font-size: 16px; line-height: 1.65; color: #3b4048; margin: 0 0 14px; }
.brand-story-list { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 10px; }
.brand-story-list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: #15181D; }
.brand-story-list li span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #5E53FF; color: #fff; font-size: 12px; display: grid; place-items: center; margin-top: 1px; }
@media (max-width: 860px) { .brand-story-grid { grid-template-columns: 1fr; } .photo-banner-shade { background: rgba(21,24,29,.7); } }
/* === photo-sections fix1 === */
.photo-banner .photo-banner-title { color: #fff; text-align: left; }
.photo-banner .photo-banner-title::after { display: none; }
.photo-banner .photo-banner-text { color: rgba(255,255,255,.92); }
.photo-banner-shade { background: linear-gradient(90deg, rgba(21,24,29,.92) 0%, rgba(21,24,29,.7) 50%, rgba(21,24,29,.35) 100%); }
.photo-banner-stats { padding: 18px 24px; border-radius: 14px; background: rgba(21,24,29,.55); backdrop-filter: blur(6px); }
.brand-story-head { text-align: left; align-items: flex-start; margin-bottom: 18px; }
.brand-story-head .section-title { text-align: left; margin-bottom: 0; }
.brand-story-head .section-title::after { margin-left: 0; margin-right: auto; }
.brand-story-head .eyebrow { margin-left: 0; }
/* === photo-cards fix1 : fond blanc uniforme pour les photos produit === */
.product-card-image { background: #fff; border-bottom: 1px solid rgba(21,24,29,.06); }
.product-card-image img { padding: 14px; }
.product-card-sm .product-card-image { background: #fff; }
/* === product-faq v2 : accordéon en cartes === */
.product-faq { margin: 56px 0; }
.pfaq-list { display: grid; gap: 10px; max-width: 880px; }
.pfaq-item { background: #fff; border: 1px solid rgba(21,24,29,.10); border-radius: 14px; transition: box-shadow .2s, border-color .2s; }
.pfaq-item:hover { border-color: rgba(94,83,255,.45); }
.pfaq-item[open] { border-color: #5E53FF; box-shadow: 0 6px 22px rgba(94,83,255,.10); }
.pfaq-q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: #15181D; }
.pfaq-q::-webkit-details-marker { display: none; }
.pfaq-q:focus-visible { outline: 2px solid #5E53FF; outline-offset: 2px; border-radius: 14px; }
.pfaq-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #EEEDFF; position: relative; }
.pfaq-ico::before, .pfaq-ico::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: #5E53FF; border-radius: 2px; transform: translate(-50%, -50%); transition: transform .2s; }
.pfaq-ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.pfaq-item[open] .pfaq-ico::after { transform: translate(-50%, -50%) rotate(0deg); }
.pfaq-a { padding: 0 22px 20px; color: #454b55; line-height: 1.7; }
.pfaq-a p { margin: 0; max-width: 72ch; }
/* product-faq v2b */
.product-faq > h2 { margin: 0 0 20px; }
/* === customer-reviews v1 : avis Amazon.fr avec photos === */
.product-customer-reviews { margin: 56px 0; }
.product-customer-reviews h2 { margin: 0 0 6px; }
.customer-reviews-subtitle { font-size: .92rem; color: #5b616c; margin: 0 0 22px; }
.customer-reviews-row { display: flex; flex-wrap: nowrap; gap: 18px; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 18px; margin: 0 -4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.customer-reviews-row::-webkit-scrollbar { height: 8px; }
.customer-reviews-row::-webkit-scrollbar-thumb { background: rgba(21,24,29,.22); border-radius: 4px; }
.customer-review-card { flex: 0 0 310px; scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(21,24,29,.10); border-radius: 16px; overflow: hidden; }
.customer-review-image { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; background: #fff; border: 0; padding: 0; cursor: zoom-in; overflow: hidden; }
.customer-review-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.customer-review-image:hover img { transform: scale(1.04); }
.customer-review-count { position: absolute; right: 10px; bottom: 10px; background: rgba(21,24,29,.78); color: #fff; font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 12px; }
.customer-review-stars { color: #FFB224; font-size: 1.05rem; letter-spacing: 2px; padding: 16px 20px 0; }
.customer-review-stars .star-empty { color: #dcdfe6; }
.customer-review-text { color: #3b4048; margin: 10px 0 14px; padding: 0 20px; line-height: 1.6; font-size: .94rem; flex: 1 0 auto; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.customer-review-author { display: flex; align-items: center; gap: 12px; padding: 0 20px 12px; }
.customer-review-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #EEEDFF; color: #5E53FF; font-weight: 700; display: grid; place-items: center; }
.customer-review-author strong { display: block; color: #15181D; font-size: .95rem; }
.customer-review-loc { display: block; font-size: .78rem; color: #7a808a; margin-top: 2px; }
.customer-review-source { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 20px 16px; border-top: 1px solid rgba(21,24,29,.07); font-size: .78rem; }
.customer-review-badge { background: #F3F4F7; color: #4a505a; padding: 3px 9px; border-radius: 10px; font-weight: 600; }
.customer-review-source a { color: #5E53FF; text-decoration: none; font-weight: 600; }
.customer-review-source a:hover { text-decoration: underline; }
@media (max-width: 600px) { .customer-review-card { flex: 0 0 280px; } }
.customer-images-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; display: none; align-items: center; justify-content: center; }
.customer-images-lightbox.open { display: flex; }
.customer-images-lightbox .ci-lb-image { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.customer-images-lightbox .ci-lb-close, .customer-images-lightbox .ci-lb-prev, .customer-images-lightbox .ci-lb-next { position: absolute; background: rgba(255,255,255,.92); border: 0; cursor: pointer; font-size: 28px; line-height: 1; color: #15181D; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.customer-images-lightbox .ci-lb-close { top: 24px; right: 24px; }
.customer-images-lightbox .ci-lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.customer-images-lightbox .ci-lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.customer-images-lightbox .ci-lb-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: .9rem; background: rgba(0,0,0,.5); padding: 6px 14px; border-radius: 14px; }
/* customer-reviews v1b */
.customer-review-source { flex-wrap: wrap; row-gap: 6px; }
.customer-review-badge { white-space: nowrap; }
/* customer-reviews v1c */
.customer-review-extra, .customer-review-extra[hidden] { display: none !important; }
/* customer-reviews v1d : cartes à hauteur naturelle + vraies photos de profil */
.customer-reviews-row { align-items: flex-start; }
.customer-review-text { flex: 0 0 auto; margin-bottom: 16px; }
.customer-review-avatar-img { object-fit: cover; background: #EEEDFF; }
/* === mobile-2cols v1 : règle skin « mobile = 2 colonnes minimum, jamais 1 » === */
@media (max-width: 800px) {
.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
.product-grid .product-card-body { padding: 10px 10px 12px; }
.product-grid .product-card-title { font-size: .86rem; line-height: 1.3; min-height: calc(.86rem * 1.3 * 2); }
.product-grid .product-card-price-row { gap: 6px; flex-wrap: wrap; }
.product-grid .price-current, .product-grid .product-card-price { font-size: .98rem; }
.product-grid .product-card-add { font-size: .8rem; padding: 8px 6px; }
.product-grid .product-card-image img { padding: 8px; }
.related-grid { display: flex !important; }
.uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.uc-card { aspect-ratio: 3 / 4; border-radius: 12px; }
.uc-body { padding: 12px; gap: 4px; }
.uc-title { font-size: 1rem; }
.uc-text { font-size: .78rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.uc-cta { font-size: .8rem; }
}
@media (max-width: 479px) {
.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.footer-grid { grid-template-columns: 1fr 1fr !important; gap: 22px 14px !important; }
.footer-grid .footer-brand { grid-column: 1 / -1; }
}
/* customer-images-grid v1 : galerie photos de clients */
.customer-images-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 0 0 22px; max-width: 880px; }
.customer-image-tile { appearance: none; border: 0; padding: 0; cursor: zoom-in; background: #fff; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; display: block; transition: transform .15s ease, box-shadow .15s ease; }
.customer-image-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(21,24,29,.14); }
.customer-image-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 800px) { .customer-images-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }
/* === reassurance-lines v1 : réassurance fiche produit = LIGNES dans un seul cadre, sur tous les écrans (jamais 3 cartes-icônes) === */
.product-reassurance { display: flex !important; flex-direction: column; gap: 0 !important; border: 1px solid var(--border-light) !important; border-radius: var(--radius); overflow: hidden; background: #fff; }
.product-reassurance .reassurance-item { display: flex; flex-direction: row !important; align-items: center; text-align: left !important; gap: 12px !important; padding: 12px 16px !important; font-size: .86rem; line-height: 1.35; white-space: normal !important; border: 0 !important; border-bottom: 1px solid var(--border-light) !important; border-radius: 0 !important; }
.product-reassurance .reassurance-item:last-child { border-bottom: 0 !important; }
.product-reassurance .reassurance-icon { font-size: 1.15rem !important; flex: none; width: 24px; text-align: center; }
/* === jardin-category-ui v1 : filtres sidebar, toolbar, tri, recherche en-tête (extrait du jardin-shop live) === */
.header-icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background var(--transition); font-size: 1.2rem; position: relative; color: var(--ink); }
.header-icon-btn:hover { background: var(--bg-tint); }
.cart-count { position: absolute; top: 2px; right: 2px; background: var(--cta); color: #fff; font-size: .65rem; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
/* ── Search overlay ───────────────────────────────────── */
.search-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.5); display: flex; align-items: flex-start; justify-content: center; padding-top: 120px; opacity: 0; visibility: hidden; transition: all var(--transition); }
.search-overlay.open { opacity: 1; visibility: visible; }
.search-box { background: var(--bg); border-radius: var(--radius); padding: 0; width: min(600px, 90vw); box-shadow: var(--shadow-lg); }
.search-form { display: flex; align-items: center; gap: 8px; }
.search-form input { flex: 1; padding: 14px 20px; border: 2px solid var(--border); border-radius: var(--radius); font-size: 1.1rem; outline: none; transition: border-color var(--transition); }
.search-form input:focus { border-color: var(--cta); }
.search-form button { font-size: 1.2rem; padding: 8px; }
.search-results { margin-top: 16px; max-height: 400px; overflow-y: auto; }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); transition: background var(--transition); color: var(--ink); }
.search-results a:hover { background: var(--bg-tint); }
.search-results img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }
.search-result-info { flex: 1; }
.search-result-info strong { display: block; font-size: .9rem; color: var(--ink); }
.search-result-info span { font-size: .85rem; color: var(--muted); }
/* ═══════════════════════════════════════════════════════════
CATEGORY PAGE — sidebar filtres + grid (responsive)
═══════════════════════════════════════════════════════════ */
/* Sur la page catégorie, on déborde du container pour exploiter toute la largeur écran */
.category-page > .container { max-width: min(1800px, calc(100vw - 32px)); padding: 0 16px; }
.category-layout { display: grid; grid-template-columns: 240px 1fr; gap: 90px; align-items: start; margin-top: 20px; }
/* ─── Box filtres : redesign carte premium ─── */
.category-sidebar { background: #fff; border: 1px solid #e9e6df; border-radius: 14px; padding: 22px 20px; position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; box-shadow: 0 1px 3px rgba(31,58,46,.04), 0 4px 12px rgba(31,58,46,.03); }
.category-sidebar::-webkit-scrollbar { width: 6px; }
.category-sidebar::-webkit-scrollbar-thumb { background: #d8d3c8; border-radius: 3px; }
.filters-sidebar-header { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f0ede5; }
.filters-sidebar-header strong { font-size: 1.05rem; color: var(--ink); font-family: var(--font-heading); letter-spacing: .02em; flex: 1; }
.filters-clear-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .8rem; padding: 4px 8px; border-radius: 6px; transition: all .15s ease; }
.filters-clear-btn:hover { color: var(--cta); background: rgba(31,58,46,.05); }
.filters-mobile-close { display: none; background: none; border: none; cursor: pointer; font-size: 1.4rem; color: var(--muted); padding: 0 8px; }
.filter-group { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #f5f2eb; }
.filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-group-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.filter-option { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; cursor: pointer; font-size: .9rem; color: var(--ink); border-radius: 6px; transition: background .15s ease; }
.filter-option:hover { background: #f7f4ec; }
.filter-option input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 1.5px solid #c9c3b3; border-radius: 4px; cursor: pointer; background: #fff; flex-shrink: 0; transition: all .15s ease; position: relative; }
.filter-option input[type=checkbox]:hover { border-color: var(--cta); }
.filter-option input[type=checkbox]:checked { background: var(--cta); border-color: var(--cta); }
.filter-option input[type=checkbox]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.filter-option-label { flex: 1; font-weight: 500; }
.filter-option-count { color: var(--muted); font-size: .75rem; background: #f5f2eb; padding: 2px 8px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.filter-option input[type=checkbox]:checked ~ .filter-option-label { color: var(--cta); font-weight: 600; }
.filters-mobile-btn { display: none; background: var(--bg); border: 1px solid var(--border-light); border-radius: 8px; padding: 8px 14px; font-size: .9rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.filters-mobile-btn:hover { background: var(--bg-alt); }
.filters-mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999; }
.filters-mobile-overlay.open { display: block; }
@media (max-width: 880px) {
.category-layout { grid-template-columns: 1fr; gap: 16px; }
.category-sidebar { position: fixed; top: 0; left: -320px; width: 300px; height: 100vh; max-height: 100vh; z-index: 1000; transition: left .3s ease; border-radius: 0; padding: 18px 16px; }
.category-sidebar.open { left: 0; }
.filters-mobile-btn { display: inline-block; }
.filters-mobile-close { display: block; }
}
/* ═══════════════════════════════════════════════════════════
CATEGORY PAGE
═══════════════════════════════════════════════════════════ */
.category-page { padding: 40px 0 80px; }
.category-header { margin-bottom: 32px; }
.category-header h1 { margin-bottom: 8px; }
.category-desc { color: var(--muted); max-width: 700px; }
.subcategory-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.chip { padding: 8px 18px; border: 1px solid var(--border); border-radius: 50px; font-size: .85rem; font-weight: 500; color: var(--ink); transition: all var(--transition); }
.chip:hover { border-color: var(--cta); background: var(--bg-tint); color: var(--cta); }
.category-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.category-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.category-empty .btn { margin-top: 16px; }
/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 48px; }
.pagination-btn { padding: 10px 20px; border: 1px solid var(--border); border-radius: var(--radius); font-weight: 600; transition: all var(--transition); color: var(--ink); }
.pagination-btn:hover { border-color: var(--cta); color: var(--cta); }
.pagination-info { color: var(--muted); font-size: .9rem; }
@media (max-width: 768px) {
.category-page { padding-bottom: 100px; }
}
@media print {
.site-header, .site-footer, .mobile-sticky-bar, .cart-drawer, .cart-overlay, .search-overlay, .compare-bar, .mobile-nav, .mobile-nav-overlay { display: none !important; }
}
/* Cache toute la navigation (flèches, dots, "Previous/Next page", "1: Gazebo 2:...") */
.aplus-original-content .a-carousel-controls,
.aplus-original-content .a-carousel-overlay-buttons,
.aplus-original-content .a-carousel-goto-prevpage,
.aplus-original-content .a-carousel-goto-nextpage,
.aplus-original-content .aplus-goto-btn,
.aplus-original-content .a-icon-previous-rounded,
.aplus-original-content .a-icon-next-rounded,
.aplus-original-content .a-carousel-pagination-dots,
.aplus-original-content .aplus-carousel-index,
.aplus-original-content .aplus-carousel-label,
.aplus-original-content .a-button-search,
.aplus-original-content [class*="goto-prevpage"],
.aplus-original-content [class*="goto-nextpage"],
.aplus-original-content [class*="-overlay-buttons"] { display: none !important; }
/* === header-search-v1 === Recherche inline desktop + loupe SVG */
.header-search-inline {
display: flex;
align-items: center;
background: rgba(255,255,255,0.6);
border: 1px solid var(--border-light, #e6e0d4);
border-radius: 999px;
padding: 0 6px 0 14px;
height: 38px;
width: 240px;
transition: border-color .15s ease, background .15s ease;
}
.header-search-inline:focus-within {
border-color: var(--cta, #6b8e3d);
background: #fff;
}
.header-search-inline input {
flex: 1;
border: 0;
background: transparent;
outline: none;
font-size: .9rem;
color: var(--ink, #1a1a1a);
min-width: 0;
}
.header-search-inline input::placeholder { color: #999; font-style: normal; }
.header-search-inline button {
background: transparent;
border: 0;
padding: 6px;
cursor: pointer;
color: var(--ink, #1a1a1a);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.header-search-inline button:hover { color: var(--cta, #6b8e3d); }
@media (max-width: 900px) {
.header-search-inline { display: none; }
}
/* SVG dans header-icon-btn : couleur + alignement */
.header-icon-btn svg { display: block; color: currentColor; }
.cart-count.cart-pop {
animation: cartBump 0.4s ease-out;
}
/* === category-cards-redesign v1 === Castorama-style : image full-square + texte dehors */
.category-page .product-card {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
overflow: visible !important;
box-shadow: none !important;
transition: transform .15s ease;
}
.category-page .product-card:hover {
transform: translateY(-3px);
}
.category-page .product-card-image {
background: transparent !important;
border: 1px solid var(--border-light, #e6e0d4);
border-radius: 10px;
padding: 0 !important;
aspect-ratio: 1 !important;
overflow: hidden;
position: relative;
transition: border-color .15s ease, box-shadow .15s ease;
}
.category-page .product-card:hover .product-card-image {
border-color: var(--cta, #6b8e3d);
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.category-page .product-card-image img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
padding: 8px !important;
display: block;
}
.category-page .product-card-body {
padding: 10px 4px 4px !important;
gap: 2px !important;
background: transparent !important;
border: none !important;
}
.category-page .product-card-title {
font-size: .95rem !important;
font-weight: 600 !important;
color: var(--ink, #1a1a1a) !important;
margin: 0 0 2px !important;
line-height: 1.3 !important;
min-height: 0 !important;
}
.category-page .product-card-price-row {
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
margin-top: auto !important;
}
.category-page .price-current {
font-size: 1.05rem !important;
font-weight: 700 !important;
color: var(--ink, #1a1a1a) !important;
order: 0;
}
.category-page .price-original {
font-size: .85rem !important;
color: #999 !important;
text-decoration: line-through;
order: 1;
}
/* Badges positionnés sur le coin top-left de l'image card */
.category-page .product-card-badges {
top: 8px !important;
left: 8px !important;
}
/* === category-toolbar-redesign v4 === Toolbar entière scrollable horizontal */
.category-toolbar {
display: flex !important;
align-items: center;
justify-content: flex-start;
gap: 6px;
flex-wrap: nowrap;
margin-bottom: 16px;
padding: 8px 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
cursor: grab;
user-select: none;
}
.category-toolbar.dragging { cursor: grabbing; }
.category-toolbar::-webkit-scrollbar { display: none; }
.category-toolbar > * { flex-shrink: 0; }
/* Plus de wrapper interne, les pills sont juste flex enfants */
.quick-pills-wrap { position: static; flex: 0 0 auto; display: contents; }
.quick-pills-wrap::after, .quick-pills-wrap::before { display: none; }
.quick-filter-pills { display: contents; }
@media (min-width: 769px) {
#filters-mobile-toggle.cat-tool-btn { display: none !important; }
}
.category-toolbar .category-count,
.category-toolbar .category-filters { display: none !important; }
/* Boutons identiques "Filtres" et "Trier par" */
.cat-tool-btn {
display: inline-flex !important;
align-items: center;
gap: 8px;
background: transparent !important;
color: var(--ink, #1a1a1a) !important;
border: 1px solid var(--border-light, #d9d2c2) !important;
border-radius: 999px !important;
padding: 8px 18px !important;
font-size: .9rem !important;
font-weight: 600 !important;
cursor: pointer;
transition: border-color .15s, background .15s;
white-space: nowrap;
}
.cat-tool-btn:hover {
border-color: var(--ink, #1a1a1a) !important;
background: #f8f4ec !important;
}
/* Icône entonnoir pour Filtres */
#filters-mobile-toggle.cat-tool-btn::before {
content: "";
width: 14px; height: 14px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Sort dropdown menu */
.sort-dropdown { position: relative; display: inline-block; }
.sort-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: #fff;
border: 1px solid var(--border-light, #d9d2c2);
border-radius: 12px;
padding: 6px;
margin: 0;
list-style: none;
min-width: 180px;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
z-index: 100;
}
.sort-menu li {
padding: 8px 14px;
border-radius: 8px;
font-size: .9rem;
cursor: pointer;
color: var(--ink, #1a1a1a);
user-select: none;
}
.sort-menu li:hover { background: #f4f1e8; }
.sort-menu li[aria-selected="true"] { font-weight: 700; color: var(--cta, #6b8e3d); }
.sort-menu li[aria-selected="true"]::after { content: " ✓"; }
@media (max-width: 768px) {
.category-page,
.category-page section,
.category-page .container,
.category-page > .container,
.category-layout { padding-left: 4px !important; padding-right: 4px !important; margin-left: 0 !important; margin-right: 0 !important; }
.category-toolbar { margin-left: 0 !important; padding-left: 0 !important; }
}
/* === quick-filter-pills v3 === Inline slider + chevron scroll hint */
.quick-pills-wrap {
position: relative;
flex: 1 1 auto;
min-width: 0;
margin-left: -2px;
}
.quick-pills-wrap::after {
content: "";
position: absolute;
top: 0; right: 0;
width: 36px; height: 100%;
pointer-events: none;
background: linear-gradient(to left, var(--bg, #faf6ee) 30%, transparent);
z-index: 2;
}
.quick-pills-wrap::before {
content: "›";
position: absolute;
top: 50%; right: 8px;
transform: translateY(-50%);
z-index: 3;
font-size: 1.4rem;
color: var(--ink, #1a1a1a);
pointer-events: none;
font-weight: 700;
line-height: 1;
}
.quick-filter-pills {
display: flex;
flex-wrap: nowrap;
gap: 6px;
margin: 0;
padding: 0 32px 0 4px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.quick-filter-pills::-webkit-scrollbar { display: none; }
.quick-pill {
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--ink, #1a1a1a);
border: 1px solid var(--border-light, #d9d2c2);
border-radius: 999px;
padding: 6px 14px;
font-size: .85rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background .15s, border-color .15s, color .15s;
}
.quick-pill:hover {
border-color: var(--ink, #1a1a1a);
background: #f8f4ec;
}
.quick-pill.active {
background: var(--cta, #6b8e3d);
border-color: var(--cta, #6b8e3d);
color: #fff;
font-weight: 600;
}
/* overflow: visible removed — toolbar needs overflow-x: auto pour scroller */
/* === pills-drag-cursor v1 === Curseur drag pour scrolling souris */
.quick-filter-pills { cursor: grab; user-select: none; }
.quick-filter-pills.dragging { cursor: grabbing; }
.quick-filter-pills.dragging .quick-pill { pointer-events: none; }
/* === toolbar-arrows-v1 === Flèches navigation cliquables */
.toolbar-wrap { position: relative; margin-bottom: 16px; }
.toolbar-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--border-light, #d9d2c2);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
color: var(--ink, #1a1a1a);
cursor: pointer;
z-index: 10;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background .15s;
}
.toolbar-arrow:hover { background: #f8f4ec; }
.toolbar-arrow[hidden] { display: none; }
.toolbar-arrow-left { left: -4px; }
.toolbar-arrow-right { right: -4px; }
/* Gradient fade pour estomper les bords pendant le scroll */
.toolbar-wrap::before,
.toolbar-wrap::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 32px;
pointer-events: none;
z-index: 5;
transition: opacity .2s;
}
.toolbar-wrap::before {
left: 0;
background: linear-gradient(to right, var(--bg, #faf6ee), transparent);
opacity: 0;
}
.toolbar-wrap::after {
right: 0;
background: linear-gradient(to left, var(--bg, #faf6ee), transparent);
opacity: 1;
}
.toolbar-wrap.scrolled-start::before { opacity: 1; }
.toolbar-wrap.scrolled-end::after { opacity: 0; }
/* Padding minimal à gauche (flèche gauche s'overlay sur le contenu déjà scrollé) */
.toolbar-wrap .category-toolbar { padding-left: 2px !important; padding-right: 36px !important; }
/* === discount-badge-v1 === Badge réduction top-left de l'image, style sekholia */
.product-card-discount {
position: absolute;
top: 8px;
left: 8px;
background: #d93636;
color: #fff;
font-weight: 700;
font-size: .8rem;
padding: 4px 8px;
border-radius: 4px;
z-index: 3;
letter-spacing: .02em;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
.category-toolbar { gap: 4px !important; padding-left: 0 !important; }
.toolbar-wrap .category-toolbar { padding-left: 0 !important; padding-right: 30px !important; }
.toolbar-arrow-right { right: 0 !important; }
/* Boutons Filtres / Trier par plus compacts */
.cat-tool-btn { padding: 7px 12px !important; font-size: .85rem !important; }
.cat-tool-btn-dropdown svg { margin-left: 2px; }
}
/* === category-white-bg v1 === Fond blanc sur les pages catégorie */
body:has(.category-page) { background: transparent !important; }
.category-page { background: transparent !important; }
/* === discount-badge color v2 === Couleur du site (var(--cta)) au lieu du rouge */
.product-card-discount { background: var(--cta, #6b8e3d) !important; }
/* Hide les contrôles de carousel (flèches gauche/droite + dots pagination) */
.aplus-original-content .a-carousel-controls,
.aplus-original-content .a-carousel-button,
.aplus-original-content .a-carousel-goto-prevpage,
.aplus-original-content .a-carousel-goto-nextpage,
.aplus-original-content .a-carousel-pagination,
.aplus-original-content .a-carousel-pagination-dots,
.aplus-original-content .a-carousel-row-inner,
.aplus-original-content [class*="carousel-control"],
.aplus-original-content [class*="carousel-button"],
.aplus-original-content [class*="carousel-pagination"],
.aplus-original-content [class*="carousel-arrow"] {
display: none !important;
}
/* ═══ Fix layout cat sans sidebar (2026-06-11) ═══
Quand hasFilters est false côté server, .category-sidebar n'est pas rendu.
Sans ça, .category-main prend la col 240px du grid au lieu de toute la largeur.
:only-child marche universellement (vs :has limité). */
.category-layout > .category-main:only-child {
grid-column: 1 / -1;
width: 100%;
}
/* CAT_CARD_IMG_COVER_2026_07_15 */
/* Images cat page : remplissent toute la card, meme si crop */
.category-page .product-card-image {
padding: 0 !important;
}
.category-page .product-card-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
padding: 0 !important;
}
/* CAT_IMG_ZOOM_MORE_2026_07_15 */
/* Zoom + crop plus agressif sur cards categorie */
.category-page .product-card-image {
overflow: hidden;
padding: 0 !important;
}
.category-page .product-card-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
transform: scale(1.12) !important;
transition: transform .3s ease;
}
.category-page .product-card:hover .product-card-image img {
transform: scale(1.2) !important;
}
/* CAT_IMG_FULL_FILL_2026_07_16 */
/* Force les images cards categorie a remplir COMPLETEMENT (aucun blanc) */
.category-page .product-card-image,
.category-page .product-card .product-card-image {
padding: 0 !important;
background: #f5f5f5 !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
position: relative !important;
}
.category-page .product-card-image img,
.category-page .product-card .product-card-image img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
padding: 0 !important;
margin: 0 !important;
transform: scale(1.02) !important;
}
/* CAT_CARDS_CLEAN_2026_08_01 - fix definitif blanc-dans-gris + dezoom photos */
/* Uniformise le fond des cards categorie en BLANC pur (plus de gris) */
/* Priorite maximum : override toutes les regles precedentes */
.category-page .product-card {
background: #ffffff !important;
border: 1px solid #e6e0d4 !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: none !important;
}
.category-page .product-card:hover {
border-color: #d4c9b0 !important;
box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
transform: translateY(-2px);
}
.category-page .product-card-image,
.category-page .product-card .product-card-image {
background: #ffffff !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
position: relative !important;
}
.category-page .product-card-image img,
.category-page .product-card .product-card-image img {
position: static !important;
inset: auto !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
transition: transform .3s ease !important;
}
.category-page .product-card:hover .product-card-image img {
transform: scale(1.04) !important;
}
.category-page .product-card-body {
padding: 12px 6px 6px !important;
background: #ffffff !important;
}
.subcategory-chips { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.subcategory-chips .chip { white-space: nowrap; flex-shrink: 0; }
.header-icon-search-mobile { display: none; }
@media (max-width: 900px) { .header-icon-search-mobile { display: inline-flex; align-items: center; justify-content: center; } }
.header-icon-btn svg { display: block; }
.cart-empty-icon { display: block; text-align: center; margin-bottom: 8px; }
/* === category-grid4 v1 : 4 colonnes desktop, 3 tablette (mobile = 2, cf. mobile-2cols) === */
@media (min-width: 1100px) { .category-main .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 801px) and (max-width: 1099px) { .category-main .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 801px) { .category-main .product-card-title { font-size: .92rem; } }
/* === gallery-thumbs v2 : miniatures en rangée défilante (jusqu'à 12 photos), jamais de débordement === */
.product-gallery { min-width: 0; max-width: 100%; }
.product-thumbnails { display: flex !important; flex-wrap: nowrap !important; gap: 8px; overflow-x: auto; max-width: 100%; padding: 6px 2px 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.product-thumbnails::-webkit-scrollbar { height: 6px; }
.product-thumbnails::-webkit-scrollbar-thumb { background: rgba(21,24,29,.22); border-radius: 4px; }
.product-thumbnails .product-thumb { flex: 0 0 68px; width: 68px; height: 68px; padding: 0; border-radius: 10px; overflow: hidden; background: #fff; border: 2px solid transparent; }
.product-thumbnails .product-thumb.active { border-color: #5E53FF; }
.product-thumbnails .product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 800px) { .product-thumbnails .product-thumb { flex-basis: 60px; width: 60px; height: 60px; } }
/* no-sticky-cta : pas de boutons collants en bas de page mobile */
.sticky-mobile-cta { display: none !important; }
/* === header-mobile-grid v2 : burger gauche · logo centré · recherche + panier à droite === */
.burger-btn-left { display: none; }
@media (max-width: 900px) {
.header-inner { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.burger-btn-left { display: flex; justify-self: start; margin-left: -8px; }
.header-actions .burger-btn { display: none !important; }
.header-inner .logo { grid-column: 2; justify-self: center; text-align: center; }
.header-inner .header-actions { grid-column: 3; justify-self: end; }
.nav-desktop { display: none !important; }
}
/* ===== category-mobile-compact v1 : produits visibles plus haut sur mobile ===== */
@media (max-width: 768px) {
.breadcrumb { padding-top: 8px !important; padding-bottom: 6px !important; }
.category-page { padding-top: 6px !important; }
.category-header { margin-bottom: 0 !important; }
.category-header h1 { font-size: 25px !important; line-height: 1.15 !important; margin: 0 0 4px !important; letter-spacing: -0.01em; }
.category-desc { font-size: 13.5px !important; line-height: 1.45 !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.subcategory-chips { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 10px 0 8px !important; padding-bottom: 2px !important; gap: 8px !important; }
.subcategory-chips::-webkit-scrollbar { display: none; }
.subcategory-chips .chip { flex: 0 0 auto; padding: 7px 14px !important; font-size: 13.5px !important; line-height: 1.2 !important; white-space: nowrap; }
.toolbar-wrap { margin-bottom: 10px !important; }
.category-toolbar .cat-tool-btn { padding-top: 8px !important; padding-bottom: 8px !important; font-size: 14px !important; }
}
/* ===== svg-icons-no-emoji v1 : icônes au trait à la place des emojis ===== */
.ico { display: inline-block; vertical-align: -0.2em; flex-shrink: 0; }
.material-card-icon, .planner-check-icon, .finder-opt-icon, .reassurance-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--primary, currentColor); }
.material-card-icon .ico, .planner-check-icon .ico, .finder-opt-icon .ico { display: block; }
.ico-euro { font-weight: 700; letter-spacing: 0.04em; color: var(--primary, currentColor); }
.product-card-compare .ico { display: block; }
.product-card-placeholder .ico, .product-gallery .ico { opacity: .45; }
.material-tip .ico, .planner-tips h3 .ico, h3 > .ico { vertical-align: -0.25em; margin-right: 4px; color: var(--primary, currentColor); }
/* ===== category-reviews v1 : avis photo d'autres modèles, étiquetés ===== */
.category-reviews { margin-top: clamp(20px, 3vw, 32px); padding-top: clamp(16px, 2.5vw, 24px); border-top: 1px solid var(--border, #e5e7eb); }
.category-reviews-title { font-size: clamp(17px, 2vw, 20px); margin: 0 0 4px; }
.customer-review-about { font-size: 12.5px; margin: 8px 0 2px; color: var(--text-muted, #6b7280); }
.customer-review-about a { color: var(--primary, #5b4bff); font-weight: 600; text-decoration: none; }
.customer-review-about a:hover { text-decoration: underline; }
/* ===== category-reviews v2 : alignement ===== */
.customer-review-card .customer-review-about { padding: 0 16px; }