/* =====================================================================
MOVEA — DESIGN SYSTEM (tokens + recettes de composants)
École de danse jazz · Jade Prieur
---------------------------------------------------------------------
Direction : moderniser franchement tout en gardant l'esprit
féminin, vivant et accessible. Typo display Fraunces + Inter,
glassmorphism allégé, contrastes renforcés.
À charger AVANT styles.css :
===================================================================== */
:root {
/* ------------------------------------------------------------------
1. COULEURS
------------------------------------------------------------------
Règle de contraste (WCAG AA = 4.5:1 pour le texte) :
texte corps : --c-ink (#231923) sur fond clair -> ~13:1 ✓
texte secondaire: --c-muted (#5E4A57) sur fond clair -> ~7:1 ✓
boutons / liens : --c-primary (#9F315E) sur blanc -> ~6.6:1 ✓
*/
/* Fonds */
--c-bg: #fbf5ef; /* fond principal (paper) */
--c-bg-alt: #fffaf5; /* fond alternatif (ivory) */
--c-surface: #ffffff; /* cartes opaques */
--c-champagne: #ead7bd; /* touches chaudes, tags */
--c-mist: #efe8e4; /* séparateurs de sections */
/* Marque */
--c-plum: #351729; /* titres, texte fort */
--c-plum-soft: #5a3148; /* sous-titres */
--c-ink: #231923; /* corps de texte */
--c-muted: #5e4a57; /* texte secondaire (assombri pour AA) */
/* Accent rose / berry (couleur d'action) */
--c-primary: #9f315e; /* CTA, liens, accents */
--c-primary-700: #7e2049; /* hover / pressed */
--c-secondary: #d76d87; /* rose moyen, décor */
--c-rose-100: #ffe4ea; /* fonds très doux */
--c-rose-300: #f3aeb9;
/* Neutres chauds */
--c-gold: #b2823f; /* doré assombri pour rester lisible */
--c-green: #687b5d;
/* Lignes & verre */
--c-line: rgba(53, 23, 41, 0.12);
--c-line-strong: rgba(53, 23, 41, 0.20);
/* Glassmorphism allégé : plus d'opacité, moins de flou = + lisible */
--glass: rgba(255, 250, 245, 0.78);
--glass-strong: rgba(255, 250, 245, 0.92);
--glass-border: rgba(255, 255, 255, 0.70);
--glass-blur: 16px; /* avant : 22–42px */
/* ------------------------------------------------------------------
2. TYPOGRAPHIE
------------------------------------------------------------------ */
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
"Segoe UI", sans-serif;
/* Échelle de tailles (fluide, clamp = mini / idéal vw / maxi) */
--fs-display: clamp(3.6rem, 11vw, 9rem); /* hero H1 */
--fs-h1: clamp(2.4rem, 6vw, 4.6rem); /* titres section */
--fs-h2: clamp(2rem, 4vw, 3.2rem); /* sous-titres */
--fs-h3: clamp(1.3rem, 2vw, 1.75rem); /* cartes */
--fs-lead: clamp(1.08rem, 1.5vw, 1.28rem);/* chapô */
--fs-body: 1.0625rem; /* 17px corps */
--fs-sm: 0.875rem; /* 14px */
--fs-xs: 0.78rem; /* 12.5px eyebrow */
/* Interlignes */
--lh-display: 0.92;
--lh-heading: 1.05;
--lh-body: 1.6;
/* Graisses */
--fw-display: 460; /* Fraunces : 400–500 = élégant */
--fw-body: 400;
--fw-medium: 500;
--fw-semibold:600;
--fw-bold: 800;
/* Interlettrage */
--ls-tight: -0.02em; /* gros titres */
--ls-eyebrow: 0.16em; /* surtitres MAJUSCULES */
/* ------------------------------------------------------------------
3. ESPACEMENT (base 8 pt)
------------------------------------------------------------------ */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* Rythme vertical des sections (fluide) */
--section-y: clamp(72px, 10vw, 132px);
/* ------------------------------------------------------------------
4. LARGEURS & GRILLE
------------------------------------------------------------------ */
--container: 1160px; /* largeur max de contenu */
--container-narrow: 760px;
--gutter: clamp(20px, 4vw, 36px); /* marge latérale */
--grid-gap: clamp(14px, 2vw, 24px); /* gouttière de grille */
/* ------------------------------------------------------------------
5. RAYONS
------------------------------------------------------------------ */
--r-sm: 10px;
--r-md: 14px;
--r-lg: 18px;
--r-xl: 24px;
--r-2xl: 32px;
--r-pill: 999px;
/* ------------------------------------------------------------------
6. OMBRES (douces, teintées plum)
------------------------------------------------------------------ */
--shadow-xs: 0 1px 2px rgba(53, 23, 41, 0.06);
--shadow-sm: 0 4px 14px rgba(53, 23, 41, 0.08);
--shadow-md: 0 12px 32px rgba(53, 23, 41, 0.10);
--shadow-lg: 0 24px 58px rgba(53, 23, 41, 0.12);
--shadow-xl: 0 36px 90px rgba(53, 23, 41, 0.18);
/* ------------------------------------------------------------------
7. MOUVEMENT
------------------------------------------------------------------ */
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--dur-fast: 160ms;
--dur: 220ms;
--dur-slow: 420ms;
/* Compat avec l'ancien styles.css (alias) */
--paper: var(--c-bg);
--ivory: var(--c-bg-alt);
--champagne: var(--c-champagne);
--mist: var(--c-mist);
--rose-100: var(--c-rose-100);
--rose-300: var(--c-rose-300);
--rose-500: var(--c-secondary);
--rose-700: var(--c-primary);
--plum: var(--c-plum);
--plum-soft: var(--c-plum-soft);
--ink: var(--c-ink);
--muted: var(--c-muted);
--gold: var(--c-gold);
--green: var(--c-green);
--line: var(--c-line);
--shadow: var(--shadow-lg);
--radius: var(--r-md);
}
/* =====================================================================
RECETTES UTILITAIRES (réutilisables hors du site Movea)
===================================================================== */
/* Conteneur centré */
.ds-container {
width: min(var(--container), calc(100% - var(--gutter) * 2));
margin-inline: auto;
}
/* Grille auto-responsive : passe de N colonnes à 1 sans media query */
.ds-grid {
display: grid;
gap: var(--grid-gap);
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
/* Carte de base (boxe) */
.ds-card {
padding: var(--space-5);
border: 1px solid var(--glass-border);
border-radius: var(--r-xl);
background: var(--glass);
box-shadow: var(--shadow-md);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
transition: transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.ds-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
/* Bouton principal */
.ds-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 22px;
border: 0;
border-radius: var(--r-md);
font-family: var(--font-sans);
font-weight: var(--fw-bold);
cursor: pointer;
transition: transform var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease);
}
.ds-btn--primary {
color: #fff;
background: linear-gradient(135deg, var(--c-plum), var(--c-primary));
box-shadow: 0 14px 34px rgba(159, 49, 94, 0.28);
}
.ds-btn--primary:hover { transform: translateY(-2px); }
.ds-btn--ghost {
color: var(--c-primary);
background: var(--c-surface);
box-shadow: inset 0 0 0 1.5px rgba(159, 49, 94, 0.30);
}
/* Image harmonisée : ratio + filtre subtil unifié */
.ds-media {
display: block;
width: 100%;
object-fit: cover;
border-radius: var(--r-lg);
filter: saturate(0.96) contrast(1.03);
box-shadow: var(--shadow-md);
}
.ds-media--portrait { aspect-ratio: 3 / 4; }
.ds-media--square { aspect-ratio: 1 / 1; }
.ds-media--wide { aspect-ratio: 16 / 9; }