/* ══════════════════════════════════════════════════════════ SHEGLAMOUR — CSS UNIFIÉ & CORRIGÉ Fonts dans : ══════════════════════════════════════════════════════════ */ /* ══ VARIABLES ══════════════════════════════════════════════ */ :root { --bordeaux: #440B19; --bordeaux-s: #5c1022; --bordeaux-l: #6e1a2e; --bordeaux-xl: #8a2a3e; --white: #F5F1EE; --off-white: #F5F1EE; --border: rgba(68, 11, 25, 0.15); --border-d: #440B19; --bg: #F5F1EE; --bg-dark: #440B19; --text: #440B19; --text-inv: #F5F1EE; --text-muted: #6e1a2e; --accent: #440B19; --serif: 'Syne', 'Helvetica Neue', sans-serif; --sans: 'DM Sans', system-ui, sans-serif; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-ovr: cubic-bezier(.22, .68, 0, 1.2); /* ── Système de boutons unifié ── */ --btn-h: 36px; /* hauteur unique pour tous les boutons */ --btn-h-sm: 30px; /* version compacte dans les cartes */ --btn-fs: 9px; /* font-size bouton */ --btn-ls: 0.12em; /* letter-spacing bouton */ --btn-px: 18px; /* padding horizontal bouton */ /* ── Espacement sections ── */ --section-gap: 96px; --section-px: 5%; /* padding horizontal partagé */ } /* ══ RESET ══════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; border: none; } /* ══ FONT AWESOME ════════════════════════════════════════════ */ .fa-solid { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } .fa-regular { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; } .fa-brands { font-family: "Font Awesome 6 Brands" !important; } /* ══ HEADER ══════════════════════════════════════════════════ */ .header { position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--section-px); height: 70px; background: transparent; z-index: 100; transition: background 0.35s ease, border-bottom 0.35s ease; } .header.scrolled { background: var(--bg); border-bottom: 1px solid var(--border); } .header .logo { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bordeaux); } .logo img { height: 60px; width: auto; display: block; object-fit: contain; } .mobile-logo img { height: 120px; width: auto; display: block; object-fit: contain; } .navbar { display: flex; gap: 32px; align-items: center; } .navbar a { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bordeaux); transition: opacity 0.2s; position: relative; } .navbar a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--bordeaux); transition: width 0.3s var(--ease); } .navbar a:hover { opacity: .65; } .navbar a:hover::after { width: 100%; } .icons { display: flex; align-items: center; gap: 20px; } .icons a, .icons button { display: flex; align-items: center; justify-content: center; color: var(--bordeaux); background: none; border: none; font-size: 1rem; transition: opacity 0.2s; } .icons a:hover, .icons button:hover { opacity: .6; } /* ══ MENU HAMBURGER ══════════════════════════════════════════ */ .menu-toggle { display: none; font-size: 1.6rem; background: none; border: none; color: var(--bordeaux); cursor: pointer; z-index: 102; } .menu-overlay { display: none; position: fixed; inset: 0; background: rgba(68, 11, 25, 0.30); z-index: 101; } .menu-overlay.active { display: block; } .navbar.active { position: fixed; top: 0; left: 0; width: 70%; max-width: 300px; height: 100%; flex-direction: column; gap: 28px; padding: 70px 32px; background: var(--bg); border-right: 1px solid var(--border); z-index: 103; box-shadow: 8px 0 40px rgba(68, 11, 25, 0.12); transform: translateX(-100%); animation: slideIn 0.3s var(--ease) forwards; } @keyframes slideIn { to { transform: translateX(0); } } /* ══ HERO SLIDER ═════════════════════════════════════════════ */ .hero-slider { position: relative; width: 100%; height: 100vh; overflow: hidden; margin-top: -70px; margin-bottom: var(--section-gap); background: var(--bg); } .hero-slider::before { content: ''; position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at center, transparent 38%, rgba(22, 4, 8, 0.55) 100%); pointer-events: none; } .hero-slider::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient( to right, rgba(68, 11, 25, 0.78) 0%, rgba(68, 11, 25, 0.42) 30%, rgba(245, 241, 238, 0.12) 62%, #F5F1EE 100% ); pointer-events: none; } .hero-slider .slide { position: absolute; inset: 0; left: 100%; opacity: 0; transition: left 0.7s cubic-bezier(0.77, 0, 0.18, 1), opacity 0.7s cubic-bezier(0.77, 0, 0.18, 1); } .hero-slider .slide.active { left: 0; opacity: 1; z-index: 1; } .hero-slider picture { display: block; width: 100%; height: 100%; } .hero-slider img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.88) contrast(1.06) brightness(0.92); } .hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; padding: 38px 64px; text-align: center; color: var(--white); background: rgba(68, 11, 25, 0.38); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .hero-content h1 { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; line-height: 1.08; } .hero-content p { font-family: var(--sans); font-size: 0.78rem; font-weight: 300; letter-spacing: 0.20em; text-transform: uppercase; color: var(--off-white); margin-bottom: 30px; } .hero-slider .navigation { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 28px; z-index: 4; pointer-events: none; } .hero-slider .navigation span { pointer-events: all; background: rgba(68, 11, 25, 0.46); padding: 13px 16px; cursor: pointer; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.18); transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .hero-slider .navigation span:hover { background: var(--bordeaux); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(68, 11, 25, 0.32); } .hero-slider .dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4; } .hero-slider .dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--off-white); border: 1px solid var(--off-white); cursor: pointer; transition: background 0.3s var(--ease), width 0.3s var(--ease); } .hero-slider .dots span.active { background: var(--white); width: 22px; border-radius: 999px; } /* ══ TYPOGRAPHIE PARTAGÉE ════════════════════════════════════ */ .section-header { text-align: center; padding: 0 var(--section-px) 48px; } .eyebrow, .featured-eyebrow, .reviews-eyebrow { display: block; font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: 0.38em; text-transform: uppercase; color: var(--bordeaux-l); margin-bottom: 14px; } .section-title, .featured-title, .reviews-title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--bordeaux); line-height: 1.05; } .section-title em, .reviews-title em { font-style: normal; color: var(--bordeaux-l); } .featured-subtitle { font-family: var(--sans); font-size: 14px; color: var(--bordeaux-l); letter-spacing: 0.04em; max-width: 380px; } .featured-rule, .reviews-rule { width: 48px; height: 1.5px; background: var(--bordeaux); margin-top: 4px; } /* ══ SÉPARATEUR ORNEMENTAL ═══════════════════════════════════ */ .ornament-divider { display: flex; align-items: center; gap: 20px; padding: 0 var(--section-px); margin: var(--section-gap) 0; } .ornament-divider::before, .ornament-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--bordeaux), transparent); } .ornament-center { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bordeaux-l); white-space: nowrap; } .ornament-dot { width: 4px; height: 4px; background: var(--bordeaux); } /* ══ DIVIDER SIMPLE ══════════════════════════════════════════ */ .divider { height: 1px; background: var(--border); margin: 0 var(--section-px); } /* ══ CREATE YOUR LOOK ════════════════════════════════════════ */ .create-look-section { background: var(--bg); padding: var(--section-gap) 0; } .create-look { display: grid; grid-template-columns: repeat(4, 1fr); height: 74vh; gap: 2px; } .create-item { position: relative; overflow: hidden; cursor: pointer; } .create-item a { display: block; width: 100%; height: 100%; } .create-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s ease; } .create-item:hover img { transform: scale(1.06); } .create-overlay { position: absolute; inset: 0; background: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 2.4rem 2rem; } .create-overlay::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 45%; background: linear-gradient(to top, rgba(68, 11, 25, .88) 0%, transparent 100%); pointer-events: none; } .create-label-small, .create-name, .create-divider, .create-cta { position: relative; z-index: 1; } .create-label-small { font-family: var(--sans); font-size: 8px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--white); margin-bottom: 8px; opacity: 0; transform: translateY(8px); transition: all 0.45s var(--ease) 0.05s; } .create-name { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: 4px; color: var(--white); text-transform: uppercase; line-height: 1; transform: translateY(6px); transition: transform 0.5s var(--ease); } .create-divider { width: 32px; height: 1px; background: var(--off-white); margin: 10px 0; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease) 0.1s; } .create-cta { font-family: var(--sans); font-size: 8.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--white); font-weight: 500; opacity: 0; transform: translateY(8px); transition: all 0.4s var(--ease) 0.15s; } .create-item:hover .create-label-small, .create-item:hover .create-cta { opacity: 1; transform: translateY(0); } .create-item:hover .create-name { transform: translateY(0); } .create-item:hover .create-divider { transform: scaleX(1); } /* ══ WORTH THE HYPE ══════════════════════════════════════════ */ .worth-hype-section { background: var(--bg); padding: var(--section-gap) var(--section-px); } /* Le composant .worth-hype peut être utilisé directement comme section */ .worth-hype { display: grid; grid-template-columns: 340px 1fr; min-height: 640px; overflow: hidden; border: 1.5px solid var(--bordeaux); align-items: stretch; margin: 0 var(--section-px); background: #F5F1EE; } .hype-left { position: relative; overflow: hidden; } .hype-image-frame { height: 100%; } .hype-image-frame img, .hype-left img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 1.4s var(--ease); } .worth-hype:hover .hype-left img { transform: scale(1.04); } .hype-left::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(68,11,25,.06) 100%); pointer-events: none; } /* Badges */ .badge { position: absolute; font-family: var(--sans); font-size: 8px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 6px 14px; z-index: 2; } .badge-new { bottom: 20px; right: 16px; background: var(--bg); color: var(--bordeaux); border: 1.5px solid var(--bordeaux); } .hype-right { display: flex; flex-direction: column; padding: 48px; gap: 32px; background: var(--bg); } .hype-header { padding-bottom: 24px; border-bottom: 1px solid var(--border); } .hype-eyebrow { display: block; font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: 0.38em; text-transform: uppercase; color: var(--bordeaux-l); margin-bottom: 12px; } .hype-header h2 { font-family: var(--serif); font-size: clamp(26px, 3vw, 42px); font-weight: 700; color: var(--bordeaux); line-height: 1.05; letter-spacing: 2px; text-transform: uppercase; margin-top: 8px; } .hype-header h2 em { font-style: normal; color: var(--bordeaux-l); } /* ══ GRILLE PRODUITS (worth-hype) ════════════════════════════ */ .hype-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; flex: 1; align-items: start; } /* ══ CARTE PRODUIT ═══════════════════════════════════════════ */ .product-card { background: var(--bg); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; transition: border-color .3s ease, transform .4s var(--ease), box-shadow .4s ease; } .product-card:hover { border-color: var(--bordeaux); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(68, 11, 25, 0.10); } .product-image-wrapper { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--border); } .product-image-wrapper a { display: block; width: 100%; height: 100%; } .product-image-wrapper img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: var(--bg); transition: transform 0.7s var(--ease); } .product-card:hover .product-image-wrapper img { transform: scale(1.06); } .add-to-wishlist { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; background: var(--bg); border: 1px solid var(--border) !important; color: var(--bordeaux-l); font-size: 11px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s, background .2s, color .2s; z-index: 2; cursor: pointer; border-radius: 0; } .product-card:hover .add-to-wishlist { opacity: 1; transform: scale(1); } .add-to-wishlist:hover { background: var(--bordeaux) !important; color: var(--off-white) !important; border-color: var(--bordeaux) !important; } .product-info { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .product-category-label { font-size: 8px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bordeaux-l); } .product-info h3 { font-family: var(--serif); font-size: 13px; font-weight: 600; color: var(--bordeaux); line-height: 1.4; min-height: calc(1.4em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-info h3 a { color: inherit; transition: opacity .2s; } .product-info h3 a:hover { opacity: .7; } /* Bloc prix : hauteur fixe pour aligner les boutons quelle que soit la présence ou non d'un ancien prix / badge solde */ .product-info .price, .fp-price-wrap { display: flex; align-items: center; flex-wrap: nowrap; /* une seule ligne */ gap: 5px; height: 22px; /* hauteur fixe = même espace pour tous */ overflow: hidden; /* cache ce qui dépasse si jamais */ font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--bordeaux); } .fp-old-price { font-family: var(--serif); font-size: 11px; color: var(--bordeaux-l); text-decoration: line-through; opacity: 0.55; font-weight: 400; white-space: nowrap; } .fp-price { font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--bordeaux); white-space: nowrap; } .fp-price--sale { color: var(--bordeaux); } .badge-solde { font-family: var(--sans); font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--bordeaux); color: var(--white); padding: 2px 7px; } .badge-solde--img { position: absolute; top: 10px; left: 10px; background: var(--bordeaux); color: var(--white); font-family: var(--sans); font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; z-index: 2; pointer-events: none; } /* ══ BOUTONS — SYSTÈME UNIFIÉ ════════════════════════════════ Tous les boutons d'action partagent : - hauteur fixe via --btn-h-sm (dans les cartes) - même font-size, letter-spacing, text-transform - pas de min-width, pas de white-space bizarre ─────────────────────────────────────────────────────────── */ /* Wrapper actions dans les cartes */ .add-to-cart-wrapper, .fp-actions { margin-top: auto; /* colle les boutons en bas quelle que soit la hauteur du prix */ display: flex; gap: 6px; align-items: stretch; /* même hauteur pour qty + bouton */ width: 100%; } /* Le bouton teinte (sans wrapper qty) doit aussi être collé en bas */ .product-info > .choose-shade-btn, .fp-info > .choose-shade-btn { margin-top: auto; } /* Champ quantité */ .quantity-wrapper input[type="number"], .fp-qty { width: 38px; height: var(--btn-h-sm); flex-shrink: 0; border: 1.5px solid var(--bordeaux); background: var(--bg); color: var(--bordeaux); font-family: var(--sans); font-size: 11px; text-align: center; outline: none; -moz-appearance: textfield; appearance: textfield; transition: border-color .2s; border-radius: 0; } .quantity-wrapper input:focus, .fp-qty:focus { border-color: var(--bordeaux); } .quantity-wrapper input::-webkit-inner-spin-button, .quantity-wrapper input::-webkit-outer-spin-button, .fp-qty::-webkit-inner-spin-button, .fp-qty::-webkit-outer-spin-button { -webkit-appearance: none; } /* Bouton ajouter au panier */ .add-to-cart, .fp-cart-btn { flex: 1; height: var(--btn-h-sm); min-height: var(--btn-h-sm); padding: 0 var(--btn-px); border: 1.5px solid var(--bordeaux); background: var(--bordeaux); color: var(--white); font-family: var(--sans); font-size: var(--btn-fs); font-weight: 600; letter-spacing: var(--btn-ls); text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .15s; border-radius: 0; } .add-to-cart:hover, .fp-cart-btn:hover { background: var(--bg); color: var(--bordeaux); border-color: var(--bordeaux); } .add-to-cart:active, .fp-cart-btn:active { transform: scale(.97); } .add-to-cart i, .fp-cart-btn i { font-size: 10px; flex-shrink: 0; } /* Bouton choisir une teinte */ .choose-shade-btn { flex: 1; height: var(--btn-h-sm); min-height: var(--btn-h-sm); padding: 0 var(--btn-px); border: 1.5px solid var(--bordeaux); background: var(--bg); color: var(--bordeaux); font-family: var(--sans); font-size: var(--btn-fs); font-weight: 600; letter-spacing: var(--btn-ls); text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background .25s, color .25s; border-radius: 0; width: 100%; box-sizing: border-box; } .choose-shade-btn i { font-size: 10px; flex-shrink: 0; } .choose-shade-btn:hover { background: var(--bordeaux); color: var(--white); } /* États désactivés — unifiés */ .fp-cart-btn:disabled, .add-to-cart:disabled, .choose-shade-btn:disabled { background: transparent; color: rgba(68, 11, 25, .35); border: 1px solid rgba(68, 11, 25, .15); box-shadow: none; cursor: not-allowed; pointer-events: none; opacity: 1; } /* Rupture de stock badge */ .out-of-stock-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; background: var(--bg); border: 1px solid var(--border); color: var(--bordeaux-l); font-family: var(--sans); font-size: 8px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; pointer-events: none; z-index: 2; } /* ══ FEATURED PRODUCTS — SCROLL HORIZONTAL ═══════════════════ */ .featured-section { position: relative; padding: var(--section-gap) 0 calc(var(--section-gap) * 1.1); overflow: hidden; background: var(--bg); } .featured-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--bordeaux); } .coffrets-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--bordeaux); } .featured-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 48px; } .featured-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 var(--section-px); } .featured-track-wrapper { position: relative; } .featured-track-wrapper::before, .featured-track-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; pointer-events: none; z-index: 2; } .featured-track-wrapper::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); } .featured-track-wrapper::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); } .featured-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 12px var(--section-px) 28px; scrollbar-width: thin; scrollbar-color: var(--bordeaux) transparent; cursor: grab; } .featured-track:active { cursor: grabbing; } .featured-track::-webkit-scrollbar { height: 3px; } .featured-track::-webkit-scrollbar-track { background: transparent; } .featured-track::-webkit-scrollbar-thumb { background: var(--bordeaux); } /* Carte dans le track */ .fp-card { background: var(--bg); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; flex: 0 0 220px; scroll-snap-align: start; transition: border-color .3s ease, transform .4s var(--ease), box-shadow .4s ease; } .fp-card:hover { border-color: var(--bordeaux); transform: translateY(-5px); box-shadow: 0 20px 48px rgba(68, 11, 25, 0.10); } .fp-img-wrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--border); } .fp-img-wrap a { display: block; width: 100%; height: 100%; } .fp-img-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: var(--bg); transition: transform .7s var(--ease); } .fp-card:hover .fp-img-wrap img { transform: scale(1.06); } .fp-wishlist { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; background: var(--bg); border: 1px solid var(--border) !important; color: var(--bordeaux-l); font-size: 12px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.75); transition: opacity .2s, transform .25s var(--ease), background .2s, color .2s; z-index: 2; cursor: pointer; border-radius: 0; } .fp-card:hover .fp-wishlist { opacity: 1; transform: scale(1); } .fp-wishlist:hover { background: var(--bordeaux) !important; color: var(--white) !important; border-color: var(--bordeaux) !important; } .fp-info { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .fp-name { font-family: var(--serif); font-size: 13px; font-weight: 600; color: var(--bordeaux); line-height: 1.4; min-height: calc(1.4em * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .fp-name a { color: inherit; text-decoration: none; transition: opacity .2s; } .fp-name a:hover { opacity: .7; } /* Badges spéciaux */ .badge-new-drop { position: absolute; top: 10px; left: 10px; background: var(--bordeaux); color: var(--white); font-family: var(--sans); font-size: 8px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; padding: 6px 14px; z-index: 2; pointer-events: none; } .badge-coffret { position: absolute; top: 10px; left: 10px; background: var(--bg); color: var(--bordeaux); border: 1.5px solid var(--bordeaux); font-family: var(--sans); font-size: 8px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 10px; z-index: 2; pointer-events: none; } /* Footer section */ .featured-footer { display: flex; justify-content: center; padding: 0 var(--section-px); } .featured-cta { display: inline-flex; align-items: center; gap: 10px; height: var(--btn-h); padding: 0 44px; border: 1.5px solid var(--bordeaux); background: transparent; color: var(--bordeaux); font-family: var(--sans); font-size: var(--btn-fs); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; overflow: hidden; position: relative; transition: color .28s ease; cursor: pointer; } .featured-cta::before { content: ''; position: absolute; inset: 0; background: var(--bordeaux); transform: translateX(-101%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); z-index: 0; } .featured-cta:hover::before { transform: translateX(0); } .featured-cta span, .featured-cta i { position: relative; z-index: 1; transition: color .28s ease; } .featured-cta:hover span, .featured-cta:hover i { color: var(--white); } .featured-cta i { font-size: 13px; } .featured-empty { text-align: center; color: var(--bordeaux-l); font-family: var(--sans); font-size: 14px; padding: 40px var(--section-px); } /* ══ TRUST / LIVRAISON ═══════════════════════════════════════ */ .trust-section { padding: var(--section-gap) var(--section-px); background: var(--bordeaux); display: flex; justify-content: center; margin-top: var(--section-gap); } .trust-inner { max-width: 1100px; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); } .trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 32px; border-right: 1px solid rgba(255, 255, 255, .15); } .trust-item:last-child { border-right: none; } .trust-icon { width: 52px; height: 52px; background: rgba(255, 255, 255, .12); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 20px; color: var(--white); } .trust-title { font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--white); margin-bottom: 10px; } .trust-desc { font-size: 13px; color: var(--off-white); line-height: 1.7; max-width: 210px; } /* ══ AVIS CLIENTS ════════════════════════════════════════════ */ .reviews-section { padding: var(--section-gap) var(--section-px); background: var(--bg); } .reviews-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; } .reviews-header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .reviews-counter { display: flex; align-items: center; justify-content: center; gap: 20px; background: var(--bordeaux); color: var(--white); padding: 16px 44px; width: fit-content; margin: 0 auto; } .counter-num { font-family: var(--serif); font-size: 34px; font-weight: 700; } .counter-stars { color: var(--bordeaux-xl); font-size: 14px; letter-spacing: 2px; } .counter-label { font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--off-white); line-height: 1.5; } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .review-card { background: var(--white); border: 1px solid var(--border); padding: 26px; display: flex; flex-direction: column; gap: 14px; } .review-stars { color: var(--bordeaux); font-size: 13px; letter-spacing: 3px; } .review-text { font-family: var(--serif); font-size: 15px; color: var(--bordeaux); line-height: 1.65; font-style: italic; flex: 1; } .review-author { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; } .review-avatar { width: 36px; height: 36px; background: var(--bordeaux); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; } .review-name { font-size: 13px; font-weight: 600; color: var(--bordeaux); } .review-date { font-size: 11px; color: var(--bordeaux-l); } /* ══ ANIMATIONS ══════════════════════════════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .reveal { animation: fadeUp .65s var(--ease) both; } .reveal-left { animation: fadeUp .65s var(--ease) .1s both; } .reveal-right { animation: fadeUp .65s var(--ease) .2s both; } .reveal-up { animation: fadeUp .7s var(--ease) .15s both; } /* ══ RESPONSIVE — TABLETTE ═══════════════════════════════════ */ @media (max-width: 1200px) { .worth-hype { grid-template-columns: 280px 1fr; } .hype-right { padding: 36px 32px; } .hype-products { gap: 12px; } .fp-card { flex: 0 0 200px; } } @media (max-width: 1024px) { :root { --section-gap: 80px; } .worth-hype { grid-template-columns: 1fr; min-height: unset; margin: 0 var(--section-px); } .hype-left { height: 420px; } .hype-right { padding: 32px 24px; } .hype-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .create-look { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { :root { --section-gap: 64px; --btn-h-sm: 32px; } .header { height: 58px; } .menu-toggle { display: block; } .hero-slider { height: 92svh; margin-top: -58px; } .hero-content { width: 88%; padding: 28px 26px; } .hero-content h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); } .hero-content p { font-size: 0.68rem; letter-spacing: 0.16em; margin-bottom: 22px; } .hero-slider .navigation { padding: 0 14px; } .hero-slider .navigation span { padding: 10px 13px; font-size: 0.9rem; } .hype-right { padding: 28px 20px; gap: 24px; } .hype-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .create-look { grid-template-columns: repeat(2, 1fr); } .trust-inner { grid-template-columns: 1fr; } .trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.15); padding: 28px 20px; } .trust-item:last-child { border-bottom: none; } .reviews-grid { grid-template-columns: 1fr; } .reviews-counter { padding: 14px 28px; } .fp-card { flex: 0 0 180px; } .logo img { height: 48px; } } @media (max-width: 480px) { :root { --section-gap: 52px; --btn-h-sm: 30px; --btn-fs: 8px; --btn-px: 10px; } .hype-left { height: 260px; } .hype-right { padding: 20px 14px; gap: 18px; } .hype-header h2 { font-size: clamp(22px, 6vw, 28px); } .hype-header { padding-bottom: 16px; } .hype-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .worth-hype { margin: 0 14px; } .product-info { padding: 10px; } .product-info h3, .fp-name { font-size: 12px; } .fp-price, .product-info .price { font-size: 13px; } .badge, .badge-new, .badge-new-drop, .badge-coffret { font-size: 7px; padding: 3px 8px; } .section-title { font-size: 1.6rem; } .ornament-divider { padding: 0 4%; } .fp-card { flex: 0 0 160px; } .featured-cta { padding: 0 28px; font-size: 9px; } .featured-subtitle { font-size: 12px; } /* Qualité : boutons icône seuls sur très petit écran */ .add-to-cart .btn-label, .fp-cart-btn .btn-label, .choose-shade-btn .btn-label { display: none; } } @media (max-width: 360px) { .hype-products { grid-template-columns: 1fr; } .fp-card { flex: 0 0 145px; } } .choose-shade-btn, .fp-cart-btn, .add-to-cart { white-space: normal; height: auto; min-height: var(--btn-h-sm); padding: 6px 8px; text-align: center; line-height: 1.3; font-size: 8px; }:root { /* ... tes variables existantes ... */ --liv-h: 40px; /* hauteur de la bannière livraison */ } /* ══ BANNIÈRE LIVRAISON GRATUITE ═════════════════════════════ */ .livraison-banner { position: fixed; top: 0; left: 0; width: 100%; height: var(--liv-h); z-index: 110; /* au-dessus du header (z-index:100) */ background: var(--bordeaux); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform .35s var(--ease), opacity .3s var(--ease); } .livraison-banner.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; } .livraison-banner-inner { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 16px; max-width: 100%; } .livraison-banner-inner::-webkit-scrollbar { display: none; } .livraison-item { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--white); white-space: nowrap; } .livraison-item strong { font-weight: 700; } .livraison-item i { font-size: 11px; color: var(--white); } .livraison-sep { color: rgba(245, 241, 238, 0.4); font-size: 11px; } /* Le header se positionne sous la bannière au chargement, puis remonte à top:0 quand .scrolled est ajouté */ .header { transform: translateY(var(--liv-h)); transition: background 0.35s ease, border-bottom 0.35s ease, transform 0.35s var(--ease); } .header.scrolled { transform: translateY(0); }@media (max-width: 768px) { :root { --liv-h: 32px; } .livraison-item { font-size: 9.5px; } .livraison-banner-inner { gap: 12px; } }