/* ========================================= = VARIABLES & RESET ========================================= */ :root { /* Marron NOULI et son échelle d'opacité */ --primary: #33221A; --primary-60: rgba(51, 34, 26, 0.6); --primary-40: rgba(51, 34, 26, 0.4); --muted: rgba(51, 34, 26, 0.15); /* Surfaces */ --secondary: #fff; --secondary-c: #FBF9F7; --accent: #e5e5e5; /* Statuts */ --danger: #8e372e; --danger-bg: #fce8e8; --success: #1f6e3a; --success-bg: #e8f5ed; --warning: #e67e22; --warning-c: #9a5b00; /* Familles */ --SR: "Satoshi-Regular", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --SM: "Satoshi-Medium", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --SB: "Satoshi-Bold", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-display: "freightbig-pro", var(--SM); --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Échelle de tailles (base 16px = 1rem) */ --text-xxs: 0.625rem; /* 10 — badges */ --text-xs: 0.75rem; /* 12 — méta */ --text-sm: 0.875rem; /* 14 — texte secondaire */ --text-base: 1rem; /* 16 — corps */ --text-md: 1.125rem; /* 18 — sous-titres */ --text-lg: 1.25rem; /* 20 — titres de section */ --text-xl: 1.5rem; /* 24 — H2 */ --text-2xl: 2rem; /* 32 — H1 */ --text-3xl: 3rem; /* 48 — display */ /* Tailles fluides */ --text-display: clamp(1.75rem, 4vw, 3rem); --text-display-sm: clamp(1.25rem, 2.6vw, 2.25rem); /* Espacement de lettres */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-display: 0.08em; --ls-x-wide: 0.2em; /* Rayons (border-radius) — esthétique quasi-droite de la marque */ --radius-xs: 1px; /* barres, boutons, cards, méga-menus */ --radius-sm: 3px; /* boutons icône mobile (burger / panier) */ } * { box-sizing: border-box; margin: 0; padding: 0; } /* L'attribut HTML `hidden` doit toujours masquer, même si une règle plus spécifique met display: grid/flex/etc. (sinon le drawer/cart popup flashe à la charge de page avant que le JS ne les positionne hors-écran). */ [hidden] { display: none !important; } /* Supprime le flash gris/bleu natif au tap sur mobile (iOS / Android) */ button, a, [role="button"] { -webkit-tap-highlight-color: transparent; } /* Marqueur d'état pour le scroll lock (drawer / cart popup ouvert). Le blocage du scroll est géré par JS via preventDefault sur wheel/touchmove + lenis.stop() (Lenis est actif aussi en touch via smoothTouch: true). */ html { scrollbar-gutter: stable; } html, body { margin: 0; padding: 0; overscroll-behavior: none; } /* Lenis (smooth scroll trackpad/molette) — désactiver les optims natives qui interfèrent */ html.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } /* Note : on ne met PAS overflow:hidden ici — Lenis ajoute .lenis-stopped sur au lenis.stop(), et un overflow:hidden sur casse le sticky du header (perd son ancêtre scrollable). Le scroll est bloqué via JS. */ .lenis.lenis-scrolling iframe { pointer-events: none; } body { font-family: var(--SR); font-size: var(--text-base); color: var(--primary); background: var(--secondary-c); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Hiérarchie globale des titres */ h1 { font-family: var(--font-display); font-size: var(--text-2xl); } h2 { font-family: var(--font-display); font-size: var(--text-xl); } h3 { font-family: var(--SM); font-size: var(--text-lg); } h4 { font-family: var(--SM); font-size: var(--text-md); } h5 { font-family: var(--SM); font-size: var(--text-base); } h6 { font-family: var(--SM); font-size: var(--text-sm); } /* ========================================= = UTILITAIRES GLOBAUX ========================================= */ .sr-only { position: absolute; inline-size: 0.0625rem; block-size: 0.0625rem; padding: 0; margin: -0.0625rem; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Chevron / pastille animée (header mega-menu + cart coupon) */ .nl-chevron { flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: var(--primary); transition: height .2s ease, border-radius .2s ease; } .nl-cart--coupon-wrap[open] .nl-chevron, .nl-checkout--gift[open] .nl-chevron, .nl-header--menu-item-has-children:hover .nl-chevron, .nl-header--menu-item-has-children:focus-within .nl-chevron, .nl-header--menu-item-has-children > a[aria-expanded="true"] .nl-chevron, .nl-single--tab.is-active .nl-chevron { height: 2px; border-radius: 3px; } .muted { color: var(--primary-60); text-decoration: none; font-size: var(--text-sm); } .muted:hover { text-decoration: underline; } /* Logo WordPress par défaut */ .custom-logo { max-height: 2.25rem; height: auto; width: auto; } /* Toast "Copié !" */ .nouli-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(1rem); background: var(--primary); color: var(--secondary); padding: 0.625rem 1.25rem; border-radius: 3px; font-size: var(--text-sm); z-index: 9999; opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; } .nouli-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* Focus visible global */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-radius: 3px; } /* Titres page */ .site-main > h1 { margin: 1.5rem 0 1rem; font-size: var(--text-display-sm); font-weight: 700; }