/* ============================================================ MODELES.COM — DESIGN TOKENS Système modulaire 8 palettes : 1 par verticale + Corail homepage. Source de vérité : DESIGN.md Dernière mise à jour : 2026-05-10 ============================================================ Usage : → Corail (homepage / news / transversal) → Prune → Opale → Monochrome → Bistre → Encre → Sauge → Terracotta ============================================================ */ /* === DEFAULT (Corail homepage / news / transversal) === */ :root, body.vertical-default { --bg: #fbfaf6; --bg2: #f3f1ec; --bg3: #e9e6df; --ink: #0d1422; /* bleu nuit */ --mid: #445065; --light: #8e96a4; --accent: #0d1422; /* structure (= ink) */ --accent-2: #e15c4f; /* corail vif — CTA shopping */ --rule: rgba(13,20,34,.10); /* === Alias rétrocompat pour anciennes pages utilisant var(--gold) === */ /* Ancien gold #a8843a banni → mapping vers accent-2 (corail) */ --gold: var(--accent-2); } /* === 1. MODE — Prune === */ body.vertical-mode { --bg: #fbf8f6; --bg2: #f3eeea; --bg3: #eae3de; --ink: #241820; --mid: #5e4751; --light: #a39098; --accent: #5b1d2a; /* bordeaux prune profond */ --accent-2: #5b1d2a; --rule: rgba(36,24,32,.10); } /* === 2. BEAUTÉ & PARFUM — Opale === */ body.vertical-beaute { --bg: #fbfaf7; --bg2: #f1f0eb; --bg3: #e6e6df; --ink: #1a2624; --mid: #4f5a55; --light: #95a09b; --accent: #5d8278; /* vert d'eau désaturé */ --accent-2: #5d8278; --rule: rgba(26,38,36,.10); } /* === 3. CRÉATRICES & INFLUENCE — Monochrome === */ body.vertical-creatrices { --bg: #ffffff; --bg2: #f6f5f1; --bg3: #ecebe5; --ink: #0c0c0c; --mid: #5a5a58; --light: #a3a39e; --accent: #0c0c0c; /* typo-driven, pas de couleur d'accent */ --accent-2: #0c0c0c; --rule: rgba(12,12,12,.10); } /* === 4. MAISON & DÉCO — Bistre === */ body.vertical-maison { --bg: #f8f4ec; --bg2: #efeadc; --bg3: #e3dccb; --ink: #22150c; --mid: #5a4836; --light: #a3927a; --accent: #6b4226; /* sienne brûlée non-or */ --accent-2: #6b4226; --rule: rgba(34,21,12,.10); } /* === 5. HIGH-TECH & HIFI — Encre === */ body.vertical-tech { --bg: #fbfaf7; --bg2: #f3f1ec; --bg3: #ebe7df; --ink: #0e1a2b; --mid: #4a5567; --light: #8c93a1; --accent: #1d3a6b; /* bleu encre soutenu */ --accent-2: #1d3a6b; --rule: rgba(14,26,43,.10); } /* === 6. WELLNESS & FITNESS — Sauge === */ body.vertical-wellness { --bg: #f6f5ef; --bg2: #eeede4; --bg3: #e3e1d4; --ink: #1f2418; --mid: #52584a; --light: #9ba197; --accent: #5a6b4e; /* vert sauge profond */ --accent-2: #5a6b4e; --rule: rgba(31,36,24,.10); } /* === 7. VOYAGE & LIFESTYLE — Terracotta === */ body.vertical-voyage { --bg: #faf6f1; --bg2: #f1ebe2; --bg3: #e7decf; --ink: #2a1a14; --mid: #6b5448; --light: #aa9989; --accent: #b04a2f; /* terre brûlée */ --accent-2: #b04a2f; --rule: rgba(42,26,20,.10); } /* ============================================================ GLOBAL TYPOGRAPHIE — figée toutes verticales ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Mono:wght@300;400;500&family=DM+Sans:wght@400;500;600;700&display=swap'); :root { --font-display: 'Bebas Neue', sans-serif; --font-body: 'Cormorant Garamond', Georgia, serif; --font-mono: 'DM Mono', monospace; --font-ui: 'DM Sans', sans-serif; /* nav, formulaires, UI courante */ } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ============================================================ COMPOSANTS DE BASE — utilisent les variables verticales ============================================================ */ .section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 18px; } .section-title { font-family: var(--font-display); font-size: clamp(44px, 5.5vw, 78px); line-height: 0.95; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 28px; } .section-body { font-family: var(--font-body); font-size: 18px; font-weight: 300; line-height: 1.75; color: var(--mid); max-width: 600px; } /* Boutons — accent-2 prioritaire pour CTA shopping (Corail homepage) */ .btn-primary { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; font-weight: 500; text-transform: uppercase; text-decoration: none; padding: 16px 36px; background: var(--accent-2); color: var(--bg); border: 1px solid var(--accent-2); transition: transform 0.2s ease, opacity 0.2s ease; } .btn-primary:hover { transform: translateY(-1px); opacity: 0.92; } .btn-secondary { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; font-weight: 500; text-transform: uppercase; text-decoration: none; padding: 16px 36px; background: transparent; color: var(--ink); border: 1px solid var(--rule); transition: border-color 0.2s ease; } .btn-secondary:hover { border-color: var(--ink); } /* Card éditoriale */ .card { background: var(--bg); border: 1px solid var(--rule); padding: 28px; transition: background 0.2s ease; } .card:hover { background: var(--bg2); } /* Card eyebrow (catégorie article) */ .card-eyebrow { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 10px; } .card-title { font-family: var(--font-display); font-size: 24px; line-height: 1.1; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 12px; } .card-excerpt { font-family: var(--font-body); font-size: 16px; font-weight: 300; line-height: 1.65; color: var(--mid); } /* Product card — affiliate shopping */ .product-card { background: var(--bg); border: 1px solid var(--rule); padding: 0; display: flex; flex-direction: column; } .product-card-img { aspect-ratio: 4/5; background: var(--bg3); width: 100%; } .product-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; } .product-card-brand { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .product-card-name { font-family: var(--font-display); font-size: 20px; line-height: 1.1; color: var(--ink); } .product-card-price { font-family: var(--font-mono); font-size: 11px; color: var(--mid); margin-top: 4px; } .product-card-cta { margin-top: 12px; align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bg); background: var(--accent-2); padding: 11px 22px; text-decoration: none; transition: opacity 0.2s ease; } .product-card-cta:hover { opacity: 0.88; } /* Rule (séparateur) */ .rule { border: 0; border-top: 1px solid var(--rule); margin: 0; } /* Helpers */ .container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); } .container-article { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); } .container-read { max-width: 720px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); } /* Section spacing */ section { padding: 100px 0; } @media (max-width: 1024px) { section { padding: 72px 0; } } @media (max-width: 600px) { section { padding: 56px 0; } } /* ============================================================ NEWS WIDGET — section partagée entre index.php et fr.php Classes utilisées par news-widget.php : .news-widget, .nw-header, .nw-grid, .nw-card, .nw-img, .nw-cat, .nw-title, .nw-foot, .nw-read, .nw-empty, .preview-link ============================================================ */ .news-widget { background: var(--bg2); border-bottom: 1px solid var(--rule); padding: 80px clamp(20px, 4vw, 60px); } .news-widget > .nw-header, .news-widget > .nw-grid { max-width: 1280px; margin-left: auto; margin-right: auto; } .nw-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 36px; } .nw-meta { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); margin-top: 8px; } .nw-meta-next { color: var(--accent-2); } .preview-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bg); background: var(--accent-2); padding: 14px 28px; text-decoration: none; border: 0; white-space: nowrap; min-height: 48px; box-shadow: 0 2px 8px rgba(225, 92, 79, 0.18); transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .preview-link:hover { opacity: 0.94; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(225, 92, 79, 0.28); } @media (max-width: 600px) { .preview-link { font-size: 11px; padding: 12px 22px; width: 100%; justify-content: center; } } .nw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .nw-card { background: var(--bg); padding: 0 0 22px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: background 0.2s ease, transform 0.2s ease; /* Perf : skip rendering quand off-screen — boost INP/LCP */ content-visibility: auto; contain-intrinsic-size: 0 380px; } .nw-card:hover { background: var(--bg2); } .nw-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; } .nw-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-bottom: 1px solid var(--rule); margin-bottom: 4px; /* Skeleton background pendant chargement — disparaît dès que l'image est chargée */ background-color: var(--bg3); background-image: linear-gradient(110deg, var(--bg3) 30%, var(--bg2) 50%, var(--bg3) 70%); background-size: 200% 100%; } @media (prefers-reduced-motion: no-preference) { .nw-img:not([src*="://"]) { animation: nw-skeleton 1.6s ease-in-out infinite; } } @keyframes nw-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .nw-card > .nw-cat, .nw-card > .nw-title, .nw-card > .nw-foot { padding-left: 24px; padding-right: 24px; } .nw-card > .nw-cat:first-child, .nw-card > .nw-title:first-child { padding-top: 22px; } .nw-cat { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent-2); } .nw-title { font-family: var(--font-display); font-size: 19px; line-height: 1.15; letter-spacing: 0.01em; color: var(--ink); flex: 1; } .nw-foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--light); margin-top: auto; } .nw-read { color: var(--accent-2); } .nw-empty { padding: 32px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--light); text-align: center; } /* News widget — labels et titre dans le header */ .news-widget .section-label, .news-widget .section-title { color: inherit; } .news-widget .section-title { font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 60px); line-height: 0.96; color: var(--ink); margin-bottom: 0; } @media (max-width: 1024px) { .nw-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .nw-grid { grid-template-columns: 1fr; } .nw-header { flex-direction: column; align-items: flex-start; gap: 12px; } .news-widget { padding: 56px clamp(20px, 4vw, 60px); } }