/* ============================================ KeyZen Conciergerie — Design Tokens Charte graphique client (juin 2026) : • #094713 — Vert forêt (signature) • #ddd1bc — Beige sable • #e6e3de — Gris perle ============================================ */ :root { /* ============== PALETTE CLIENT (3 couleurs sources) ============== */ --kz-green: #094713; /* Vert forêt — signature */ --kz-sand: #ddd1bc; /* Beige sable — chaleur */ --kz-pearl: #e6e3de; /* Gris perle — neutre */ /* ============== DÉRIVÉES HARMONIQUES ============== */ /* Verts (par luminosité décroissante) */ --green-50: #eef4ef; /* Vert très clair (fond) */ --green-100: #d6e4d8; /* Vert pâle */ --green-300: #6b8f70; /* Vert sauge */ --green-500: #2f5a36; /* Vert intermédiaire */ --green-700: #094713; /* Vert signature */ --green-900: #052c0c; /* Vert très foncé */ /* Beiges (dérivés du sable) */ --sand-50: #f5f0e6; /* Beige très clair */ --sand-100: #ebe2cf; /* Beige clair */ --sand-300: #ddd1bc; /* Beige signature */ --sand-500: #c4b69b; /* Beige profond */ --sand-700: #8a7e63; /* Beige terre */ /* Neutres (dérivés du gris perle) */ --pearl-50: #f5f3f0; /* Blanc cassé */ --pearl-100: #ecebe6; /* Gris perle clair */ --pearl-300: #e6e3de; /* Gris perle signature */ --pearl-500: #c8c5bf; /* Gris moyen */ --pearl-700: #6e6b65; /* Gris foncé */ /* ============== ALIAS LEGACY (rétro-compat composants existants) ============== */ --sand: var(--pearl-300); /* Fond principal = gris perle */ --ivory: var(--sand-300); /* Beige signature */ --ivory-soft: var(--sand-100); /* Beige clair */ --palm: var(--green-300); /* Vert sauge clair */ --palm-deep: var(--green-700); /* Vert signature */ --aqua: var(--green-100); /* (ex-bleu) — remplacé par vert pâle */ --aqua-deep: var(--green-500); /* (ex-bleu) — remplacé par vert moyen */ --terracotta: #b8845a; /* Terre cohérente (alerte/danger) */ /* Encres */ --anthracite: #2b2b2b; --ink: #1a1a1a; --muted: #6e6b65; --line: rgba(9, 71, 19, 0.12); --line-strong: rgba(9, 71, 19, 0.28); /* Fonds et surfaces */ --bg: var(--pearl-300); /* #e6e3de */ --bg-alt: var(--pearl-50); /* #f5f3f0 */ --surface: #ffffff; --text: var(--ink); --text-soft: var(--muted); /* Accent configurable via tweaks */ --accent: var(--green-700); --accent-soft: var(--green-500); --accent-contrast: #ffffff; /* Typographies */ --font-serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Échelle typographique (fluide) */ --fs-hero: clamp(3rem, 7vw, 6.5rem); --fs-display: clamp(2.5rem, 5vw, 4.5rem); --fs-h1: clamp(2rem, 4vw, 3.25rem); --fs-h2: clamp(1.6rem, 2.8vw, 2.25rem); --fs-h3: clamp(1.25rem, 1.8vw, 1.5rem); --fs-lead: clamp(1.125rem, 1.4vw, 1.3rem); /* CR 09/2026 (Sprint 3 \u00b7 F12) \u2014 Body typo fluide. Avant : --fs-body: 1rem fixe (16px partout, un peu tass\u00e9 sur mobile). Apr\u00e8s : clamp(0.94rem, 0.9rem + 0.2vw, 1rem) \u2192 15px sur iPhone SE, 16px sur desktop. Gain de densit\u00e9 : ~12% de contenu visible en plus par \u00e9cran mobile. */ --fs-body: clamp(0.94rem, 0.9rem + 0.2vw, 1rem); --fs-small: 0.875rem; --fs-eyebrow: 0.75rem; /* Espacements */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --section-y: clamp(4rem, 9vw, 8rem); --container-max: 1320px; /* CR 09/2026 (Sprint 3 \u00b7 F13) \u2014 Container padding r\u00e9duit. Avant : clamp(1.25rem, 4vw, 3rem) \u2192 51px \u00e0 1280px de viewport, soit 102px perdus en total \u2014 le contenu utile passait de 1320 \u00e0 1178px. Apr\u00e8s : clamp(1.25rem, 2.5vw, 2.5rem) \u2192 32px \u00e0 1280px. Gain : 40px d'espace utile sur laptop, confort mobile pr\u00e9serv\u00e9. */ --container-pad: clamp(1.25rem, 2.5vw, 2.5rem); /* Rayons et ombres */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --shadow-sm: 0 1px 2px rgba(9, 71, 19, 0.05), 0 2px 8px rgba(9, 71, 19, 0.05); --shadow-md: 0 4px 12px rgba(9, 71, 19, 0.07), 0 12px 32px rgba(9, 71, 19, 0.07); --shadow-lg: 0 16px 48px rgba(9, 71, 19, 0.14); /* Transitions */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 180ms; --t-med: 360ms; --t-slow: 720ms; /* Header */ /* CR 08/2026 : header à 2 étages (logo + menu) → hauteur augmentée. Sur mobile / laptop 13" (< 1080px), le header revient à 76px (menu en burger). */ --header-h: 132px; --header-h-mobile: 76px; /* ============== BREAKPOINTS CANONIQUES ============== CR 09/2026 (Sprint 2 · F4) — Convention des breakpoints KeyZen. Avant : 18 valeurs distinctes réparties sur 82 media queries \u2192 source de fragilité et d'incohérences (footer 800, voyageur 640, estimateur 700, header 900\u2026). Après : 5 breakpoints canoniques documentés ci-dessous. Toute nouvelle media query DOIT utiliser l'une de ces 5 valeurs, sauf cas d'usage étroit justifié en commentaire. Les breakpoints sont déclarés en tant que variables CSS pour référence \u2014 les media queries elles-mêmes utilisent les valeurs littérales (les variables CSS ne sont pas encore utilisables dans les conditions @media). --bp-xs : 480px small mobile (iPhone SE et \u2264) --bp-sm : 600px mobile \u2194 large mobile (transition principale) --bp-md : 900px tablet portrait \u2194 landscape --bp-lg : 1080px laptop 13" \u2194 desktop (bascule burger \u2192 nav) --bp-xl : 1360px desktop confort (fin de compression nav) */ --bp-xs: 480px; --bp-sm: 600px; --bp-md: 900px; --bp-lg: 1080px; --bp-xl: 1360px; } /* ============== VARIANTES DE DIRECTION VISUELLE ============== */ /* A — Luxe éditorial discret (par défaut) — gris perle dominant, vert signature ponctuel */ :root[data-style="editorial"] { --bg: var(--pearl-50); /* #f5f3f0 */ --bg-alt: var(--pearl-300); /* #e6e3de */ --surface: #ffffff; --accent: var(--green-700); /* #094713 */ --accent-soft: var(--green-500); --hero-bg: linear-gradient(180deg, #f5f3f0 0%, #e6e3de 100%); --section-divider: 1px; --heading-weight: 400; --heading-style: normal; --letter-spacing-display: -0.02em; } /* B — Resort chaleureux — beige sable dominant, vert profond accent */ :root[data-style="resort"] { --bg: var(--sand-50); /* #f5f0e6 */ --bg-alt: var(--sand-100); /* #ebe2cf */ --surface: #fbf8f2; --accent: var(--green-700); --accent-soft: var(--green-500); --ivory-soft: var(--sand-300); /* Hero : même tonalité que .page-header — beige sable très clair, sans virer foncé */ --hero-bg: linear-gradient(180deg, #f5f0e6 0%, #ebe2cf 100%); --heading-weight: 400; --heading-style: italic; --letter-spacing-display: -0.01em; } /* C — Minimaliste architectural — blanc dominant, vert pour structure */ :root[data-style="minimal"] { --bg: #ffffff; --bg-alt: var(--pearl-300); --surface: #ffffff; --accent: var(--green-900); /* #052c0c — très foncé */ --accent-soft: var(--green-700); --hero-bg: #ffffff; --line: rgba(9, 71, 19, 0.15); --line-strong: rgba(9, 71, 19, 0.35); --heading-weight: 300; --heading-style: normal; --letter-spacing-display: -0.035em; } /* ============== ACCENT DE COULEUR (palette restreinte client) ============== */ :root[data-accent="green"] { --accent: var(--green-700); --accent-soft: var(--green-500); } :root[data-accent="green-dark"]{ --accent: var(--green-900); --accent-soft: var(--green-700); } :root[data-accent="sand"] { --accent: var(--sand-700); --accent-soft: var(--sand-500); } /* Compatibilité tweaks legacy (palm/aqua/terracotta) — mappés vers la nouvelle palette */ :root[data-accent="palm"] { --accent: var(--green-700); --accent-soft: var(--green-300); } :root[data-accent="aqua"] { --accent: var(--green-500); --accent-soft: var(--green-300); } :root[data-accent="terracotta"]{ --accent: var(--sand-700); --accent-soft: var(--sand-500); } /* ============== DENSITÉ ============== */ :root[data-density="airy"] { --section-y: clamp(6rem, 12vw, 11rem); --space-5: 2rem; --space-6: 2.75rem; --space-7: 4rem; } :root[data-density="dense"] { --section-y: clamp(3rem, 6vw, 5rem); --space-5: 1rem; --space-6: 1.5rem; --space-7: 2rem; } /* ============== MODE SOMBRE ============== */ :root[data-theme="dark"] { --bg: #0d1810; /* Vert très foncé presque noir */ --bg-alt: #142218; --surface: #1a2b1f; --text: var(--pearl-300); --text-soft: #a8a59f; --ink: var(--pearl-300); --muted: #a8a59f; --anthracite: var(--pearl-300); --line: rgba(230, 227, 222, 0.1); --line-strong: rgba(230, 227, 222, 0.25); --accent: #6b8f70; /* Vert sauge clair sur fond sombre */ --accent-soft: #94b399; --hero-bg: linear-gradient(180deg, #0d1810 0%, #142218 100%); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); } /* ============== TYPOGRAPHIES ALTERNATIVES (via tweak) ============== */ :root[data-font="cormorant"] { --font-serif: 'Cormorant Garamond', Georgia, serif; } :root[data-font="playfair"] { --font-serif: 'Playfair Display', Georgia, serif; } :root[data-font="fraunces"] { --font-serif: 'Fraunces', Georgia, serif; } :root[data-font="dmserif"] { --font-serif: 'DM Serif Display', Georgia, serif; }