/* ============================================================ MÉRIDIAN — theme.css (design system complet) Chargé automatiquement par PrestaShop. Sections : tokens, base (reset/typo/layout/boutons), composants. Le CSS par page (catalog/product/checkout) est chargé via stylesheets.tpl. ============================================================ */ /* ============================================================ MÉRIDIAN — Design tokens Minimalisme éditorial luxe. Canvas blanc chaud, encre chaude, accent clay. Pas de dark mode. ============================================================ */ :root { /* canvas neutre chaud */ --bg: oklch(0.987 0.004 80); --bg-2: oklch(0.965 0.005 80); /* section alternée */ --surface: oklch(0.998 0.002 80); /* cartes sur bg-2 */ --ink: oklch(0.205 0.012 65); /* quasi-noir chaud */ --ink-soft: oklch(0.46 0.012 65); --ink-faint: oklch(0.62 0.010 65); --line: oklch(0.885 0.006 75); --line-soft: oklch(0.93 0.005 75); --accent: oklch(0.55 0.094 48); /* clay sourd */ --accent-ink: oklch(0.985 0.004 80); /* texte sur accent */ --sale: oklch(0.53 0.135 30); /* sienne brûlée (promos) */ /* typographie */ --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif; --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; /* échelle & motion */ --maxw: 1480px; --gutter: clamp(20px, 4.5vw, 72px); --radius: 2px; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .55s; /* header */ --hdr-h: 70px; --shadow-soft: 0 1px 2px oklch(0.2 0.01 65 / .04), 0 18px 40px -20px oklch(0.2 0.01 65 / .18); --shadow-lift: 0 2px 6px oklch(0.2 0.01 65 / .06), 0 30px 60px -28px oklch(0.2 0.01 65 / .28); color-scheme: light; } /* ============================================================ MÉRIDIAN — Base : reset, fontes, typo, layout, boutons, utils ============================================================ */ /* ---------- Fontes self-hosted (font-display: swap) ---------- */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/archivo-variable.woff2") format("woff2"); } @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/bodoni-moda-variable.woff2") format("woff2"); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* clip (et non hidden) : empêche le scroll horizontal des éléments full-bleed SANS faire du un conteneur de défilement — sinon position:sticky casse. */ overflow-x: hidden; overflow-x: clip; } /* En-tête sticky : c'est