/* =============================================================
Mirazur — Design Tokens
v1.0 — 2026-05-20
Source de vérité : design.md
À importer dans styles.css avant tout autre CSS :
@import url('./design-tokens.css');
============================================================= */
/* -------------------------------------------------------------
Google Fonts — Cormorant Garamond + Inter Tight + Italianno
À placer dans du document :
------------------------------------------------------------- */
:root {
/* ===========================================================
COLOR — DARK MODE (primaire)
=========================================================== */
--color-bg: #0B0D0A; /* Background absolu */
--color-bg-section: #11140F; /* Section alternée */
--color-bg-card: #181B14; /* Cards, modals, élévation */
--color-bg-overlay: rgba(11, 13, 10, 0.92);
--color-bg-overlay-soft: rgba(11, 13, 10, 0.6);
--color-text-primary: #F1ECDF; /* Ivoire crème */
--color-text-secondary: #A8A294; /* Sable doux */
--color-text-tertiary: #6E6A5E; /* Labels, captions */
--color-text-inverse: #0F0F0E; /* Texte sur fond clair (boutons CTA) */
--color-accent: #C9A961; /* Or vieilli champagne */
--color-accent-hover: #D9BC78; /* Or éclairé */
--color-accent-muted: rgba(201, 169, 97, 0.15);
--color-garden: #5C6B3F; /* Vert olive sourd */
--color-sea: #3A6680; /* Bleu Méditerranée profond */
--color-citrus: #D9A441; /* Citron de Menton */
--color-border: #22241D; /* Bordures, dividers */
--color-border-hover: #3A3D32; /* Hover/focus states */
--color-success: #5C6B3F;
--color-error: #8B3A2E;
/* ===========================================================
TYPOGRAPHY
=========================================================== */
--font-display: 'Cormorant Garamond', 'Cormorant', 'Garamond', 'Times New Roman', serif;
--font-body: 'Inter Tight', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-script: 'Italianno', 'Brush Script MT', cursive;
--font-mono: ui-monospace, 'SF Mono', 'Menlo', monospace;
/* Échelle typographique */
--fs-h1: clamp(3rem, 8vw, 7.5rem);
--fs-h2: clamp(2.25rem, 5vw, 4.5rem);
--fs-h3: clamp(1.5rem, 2.5vw, 2.25rem);
--fs-h4: 1.125rem;
--fs-eyebrow: 0.75rem;
--fs-body-lg: clamp(1.125rem, 1.4vw, 1.25rem);
--fs-body: 1rem;
--fs-body-sm: 0.875rem;
--fs-caption: 0.75rem;
--fs-signature: clamp(2.5rem, 4vw, 3.75rem);
--fs-stat: clamp(2.5rem, 4vw, 3.5rem);
/* Line heights */
--lh-tight: 0.95;
--lh-snug: 1.05;
--lh-display: 1.1;
--lh-base: 1.6;
--lh-relaxed: 1.7;
/* Letter spacing */
--ls-display: -0.02em;
--ls-display-tight: -0.015em;
--ls-body: 0;
--ls-eyebrow: 0.18em;
--ls-label: 0.08em;
--ls-caption: 0.04em;
/* ===========================================================
SPACING — modular scale base 8px
=========================================================== */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-9: 6rem; /* 96px */
--space-10: 8rem; /* 128px */
--space-11: 12rem; /* 192px */
/* Section padding (vertical) */
--section-padding-y: clamp(3rem, 8vw, 8rem);
--section-padding-x: clamp(1.25rem, 4vw, 4rem);
/* ===========================================================
LAYOUT
=========================================================== */
--container-max: 1440px;
--container-text-max: 1280px;
--content-text-max: 38ch; /* Pour paragraphes longs */
--content-readable: 60ch; /* Body lisible */
--grid-cols: 12;
--grid-gutter: clamp(1rem, 2vw, 2rem);
/* ===========================================================
BORDERS & RADII
=========================================================== */
--border-width-thin: 1px;
--border-width: 1.5px;
--border-width-thick: 2px;
--radius-none: 0; /* Par défaut — éditorial brut */
--radius-sm: 2px; /* Cards plats (très subtil) */
--radius-pill: 9999px; /* Boutons CTA */
/* ===========================================================
SHADOWS — utilisés avec parcimonie
=========================================================== */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.5);
--shadow-accent: 0 12px 32px -8px rgba(201, 169, 97, 0.4);
/* ===========================================================
TRANSITIONS & EASINGS
=========================================================== */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-linear: linear;
--duration-instant: 100ms;
--duration-fast: 200ms;
--duration-base: 300ms;
--duration-slow: 600ms;
--duration-slower: 1200ms;
--duration-cinema: 1800ms;
--transition-base: all var(--duration-base) var(--ease-out);
--transition-color: color var(--duration-base) var(--ease-out),
background-color var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
--transition-transform: transform var(--duration-base) var(--ease-out);
/* ===========================================================
Z-INDEX — couches définies
=========================================================== */
--z-base: 1;
--z-content: 10;
--z-sticky: 50;
--z-nav: 100;
--z-cursor: 200;
--z-modal-overlay: 900;
--z-modal: 901;
--z-loader: 1000;
/* ===========================================================
BREAKPOINTS — pour container queries / JS
(les media queries restent en littéraux dans le CSS)
=========================================================== */
--bp-mobile: 768px;
--bp-tablet: 1024px;
--bp-desktop: 1440px;
/* ===========================================================
COMPOSANTS — tailles
=========================================================== */
--nav-height: 88px;
--nav-height-scrolled: 64px;
--nav-height-mobile: 64px;
--button-height: 56px;
--button-height-sm: 44px;
--button-padding-x: 1.75rem;
--moon-size-desktop: 240px;
--moon-size-mobile: 160px;
--moon-nav-size: 28px;
--moon-nav-size-desktop: 36px;
--touch-target-min: 48px;
/* ===========================================================
BLUR & FILTERS
=========================================================== */
--blur-nav: blur(20px) saturate(140%);
--blur-modal: blur(12px);
--blur-lightbox: blur(8px);
}
/* =============================================================
LIGHT MODE — toggle via [data-theme="light"] sur
============================================================= */
[data-theme="light"] {
--color-bg: #F4EBDD;
--color-bg-section: #EFE4D1;
--color-bg-card: #FFFFFF;
--color-bg-overlay: rgba(244, 235, 221, 0.94);
--color-bg-overlay-soft: rgba(244, 235, 221, 0.6);
--color-text-primary: #0F0F0E;
--color-text-secondary: #4A4438;
--color-text-tertiary: #7A7466;
--color-text-inverse: #F4EBDD;
--color-accent: #8B6F2E;
--color-accent-hover: #A8853A;
--color-accent-muted: rgba(139, 111, 46, 0.12);
--color-garden: #4A5732;
--color-sea: #1E4D6B;
--color-citrus: #A87519;
--color-border: #D5C7AC;
--color-border-hover: #B8A88A;
--shadow-md: 0 8px 24px -8px rgba(60, 40, 20, 0.18);
--shadow-lg: 0 24px 48px -16px rgba(60, 40, 20, 0.22);
--shadow-accent: 0 12px 32px -8px rgba(139, 111, 46, 0.3);
}
/* =============================================================
REDUCED MOTION — désactive les animations gourmandes
============================================================= */
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 100ms;
--duration-base: 150ms;
--duration-slow: 200ms;
--duration-slower: 300ms;
--duration-cinema: 400ms;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* =============================================================
BASE — styles fondamentaux qui héritent des tokens
============================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 100%; /* 16px base */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
background-color: var(--color-bg);
color: var(--color-text-primary);
}
@media (min-width: 1024px) {
html {
font-size: 17px; /* léger upscale desktop pour lisibilité */
}
}
body {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-base);
background-color: var(--color-bg);
color: var(--color-text-primary);
transition: background-color var(--duration-slow) var(--ease-out),
color var(--duration-slow) var(--ease-out);
text-wrap: pretty;
}
/* Selection — or vieilli sur tout */
::selection {
background-color: var(--color-accent);
color: var(--color-bg);
}
/* Focus visible — accent ring */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Skip link a11y */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--color-accent);
color: var(--color-bg);
padding: var(--space-3) var(--space-5);
text-decoration: none;
font-family: var(--font-body);
font-weight: 500;
letter-spacing: var(--ls-label);
text-transform: uppercase;
font-size: var(--fs-body-sm);
z-index: var(--z-loader);
}
.skip-link:focus {
top: 0;
}
/* =============================================================
TYPOGRAPHY UTILITIES
============================================================= */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-script { font-family: var(--font-script); }
.text-h1 {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-h1);
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
text-wrap: balance;
}
.text-h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-h2);
line-height: var(--lh-snug);
letter-spacing: var(--ls-display-tight);
text-wrap: balance;
}
.text-h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h3);
line-height: var(--lh-display);
}
.text-eyebrow {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--color-text-tertiary);
}
.text-body-lg {
font-family: var(--font-body);
font-weight: 300;
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
}
.text-body {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-base);
}
.text-caption {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-caption);
letter-spacing: var(--ls-caption);
color: var(--color-text-tertiary);
}
.text-signature {
font-family: var(--font-script);
font-weight: 400;
font-size: var(--fs-signature);
line-height: 1;
color: var(--color-accent);
}
.text-latin {
font-style: italic;
font-variant: small-caps;
}
.text-tabular {
font-variant-numeric: tabular-nums;
}
/* =============================================================
LAYOUT UTILITIES
============================================================= */
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--section-padding-x);
}
.section {
padding-block: var(--section-padding-y);
padding-inline: var(--section-padding-x);
max-width: var(--container-max);
margin-inline: auto;
}
.section--alt {
background-color: var(--color-bg-section);
}
/* =============================================================
BUTTON SYSTEM
============================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: var(--button-height);
padding-inline: var(--button-padding-x);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--fs-body-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
text-decoration: none;
border: var(--border-width-thin) solid transparent;
border-radius: var(--radius-pill);
cursor: pointer;
transition: var(--transition-base);
min-width: var(--touch-target-min);
}
.btn--primary {
background-color: var(--color-accent);
color: var(--color-text-inverse);
}
.btn--primary:hover {
background-color: var(--color-accent-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-accent);
letter-spacing: calc(var(--ls-label) + 0.02em);
}
.btn--ghost {
background-color: transparent;
color: var(--color-text-primary);
border-color: var(--color-border-hover);
}
.btn--ghost:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.btn--link {
background-color: transparent;
color: var(--color-text-primary);
border: none;
height: auto;
padding: var(--space-2) 0;
text-transform: none;
letter-spacing: 0;
font-size: var(--fs-body);
}
.btn--link::after {
content: '';
display: block;
width: 0;
height: 1px;
background-color: currentColor;
transition: width var(--duration-base) var(--ease-out);
}
.btn--link:hover {
color: var(--color-accent);
}
.btn--link:hover::after {
width: 100%;
}
/* =============================================================
IMAGES — ratio aware, loading-aware
============================================================= */
img,
video {
display: block;
max-width: 100%;
height: auto;
}
.media {
position: relative;
overflow: hidden;
background-color: var(--color-bg-card);
}
.media--cinema { aspect-ratio: 16 / 9; }
.media--square { aspect-ratio: 1 / 1; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--landscape { aspect-ratio: 4 / 3; }
.media--tall { aspect-ratio: 2 / 3; }
/* =============================================================
CURSOR CUSTOM — desktop only, opt-out via reduced-motion
============================================================= */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
body[data-cursor-active="true"] {
cursor: none;
}
.cursor {
position: fixed;
top: 0;
left: 0;
width: 8px;
height: 8px;
background-color: var(--color-accent);
border-radius: 50%;
pointer-events: none;
z-index: var(--z-cursor);
mix-blend-mode: difference;
transition: width var(--duration-base) var(--ease-out),
height var(--duration-base) var(--ease-out),
background-color var(--duration-base) var(--ease-out);
}
.cursor--hover {
width: 64px;
height: 64px;
}
}
/* =============================================================
ANIMATIONS — keyframes utilitaires
============================================================= */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes drawLine {
from { stroke-dashoffset: 100%; }
to { stroke-dashoffset: 0; }
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.15); }
}
@keyframes scrollIndicator {
0%, 100% { transform: translateY(0); opacity: 0.4; }
50% { transform: translateY(8px); opacity: 1; }
}
.animate-on-scroll {
opacity: 0;
transform: translateY(24px);
transition: opacity var(--duration-slower) var(--ease-out),
transform var(--duration-slower) var(--ease-out);
}
.animate-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
/* =============================================================
END — Mirazur design tokens
============================================================= */