/* ========================================================================== MAISON INNERBLOOM PILATES · DESIGN TOKENS v3 Source de vérité du design. Variables CSS `--ib-*` + @font-face uniquement. Aucune règle de mise en forme ici (voir styles.css). Parti pris : docs/08-design-v2.md 3 COUCHES 1. Primitives : valeurs brutes --ib-moka, --ib-espresso, --ib-space-6… 2. Sémantiques : rôle d'usage --ib-text, --ib-bg, --ib-accent-text… 3. Composants : en-tête, boutons, cartes --ib-header-h, --ib-radius-card… COULEURS DE MARQUE (mesurées dans le logo V3) : Moka #BB9575 · Noir #000 · Blanc #FFF. Dérivées (affiches de la cliente) : crème, beige, taupe #9E9283, espresso #3B2A20. BREAKPOINTS (une variable CSS ne peut pas servir dans @media) base mobile-first (320–767) · 48em = 768 · 64em = 1024 · 80em = 1280 · 96em = 1536 CONTRASTES WCAG MESURÉS (scripts/contrast-v2.cjs) Seuils : texte 4,5:1 · grand texte (≥ 24 px) 3:1 · interface 3:1 encre #2B201A sur crème #F6F1EA 14,11 · blanc 15,86 AAA encre atténuée #65574C sur crème 6,19 · beige #EDE4D8 5,52 · blanc 6,95 AA moka texte #7E5B40 sur crème 5,46 · beige 4,83 · blanc 6,15 AA moka titre #9A7656 sur crème 3,66 (grand texte ≥ 24 px SEULEMENT) AA large crème #F4EDE4 sur espresso #3B2A20 11,76 · sur taupe profond #6E6356 5,05 AA atténué foncé #CBBDAD sur espresso 7,43 AAA moka #BB9575 sur espresso 4,99 (texte et chiffres sur fond foncé) AA INTERDIT : moka #BB9575 sur crème (2,44) ou blanc (2,74) pour du texte → décor seulement. INTERDIT : crème sur taupe #9E9283 (2,62) → taupe = filets et décor. ========================================================================== */ /* -------------------------------------------------------------------------- POLICES (OFL, auto-hébergées, sous-ensemble latin) · aucune requête externe -------------------------------------------------------------------------- */ @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/cormorant-garamond-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/jost-variable.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ===== 1. PRIMITIVES · COULEURS ======================================== */ --ib-moka: #BB9575; /* marque · décor sur clair, texte sur espresso */ --ib-moka-light: #D7B898; /* survol sur fond foncé */ --ib-moka-title: #9A7656; /* mots d'accent ≥ 24 px sur crème */ --ib-moka-text: #7E5B40; /* liens, surtitres, accents ≤ 24 px sur clair */ --ib-noir: #000000; --ib-blanc: #FFFFFF; --ib-ivoire: #FBF8F3; /* cartes, formulaire */ --ib-creme: #F6F1EA; /* fond de page (blanc crème) */ --ib-beige: #EDE4D8; /* sections alternées, cadres */ --ib-sable: #E2D5C4; /* filets marqués, aplats décoratifs */ --ib-taupe: #9E9283; /* affiche fondateurs · filets, décor */ --ib-taupe-deep: #6E6356; /* bloc fondateurs (texte crème 5,05) */ --ib-espresso: #3B2A20; /* affiche ouverture · sections foncées */ --ib-espresso-deep: #2E211A; /* pied de page */ --ib-encre: #2B201A; /* texte principal */ --ib-encre-muted: #65574C; /* texte secondaire */ --ib-on-dark: #F4EDE4; --ib-on-dark-muted: #CBBDAD; --ib-error: #9B3B2E; --ib-error-on-dark: #E8B4A4; --ib-success: #3F6B4F; /* ===== 2. SÉMANTIQUES ================================================== */ --ib-bg: var(--ib-creme); --ib-surface: var(--ib-ivoire); --ib-surface-alt: var(--ib-beige); --ib-text: var(--ib-encre); --ib-text-muted: var(--ib-encre-muted); --ib-accent-text: var(--ib-moka-text); --ib-accent-title: var(--ib-moka-title); --ib-line: rgba(59, 42, 32, .16); /* filets fins sur clair (décor) */ --ib-line-strong: rgba(59, 42, 32, .32); --ib-line-dark: rgba(244, 237, 228, .18); /* filets fins sur foncé */ --ib-focus: var(--ib-moka-text); --ib-focus-dark: var(--ib-moka-light); /* ===== TYPOGRAPHIE ===================================================== */ --ib-font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif; --ib-font-text: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif; /* Échelle fluide (min à 375 px → max à 1536 px) */ --ib-fs-hero: clamp(4.5rem, min(7.4vw, 12.5svh), 8rem); /* h1 « Fleurir de l'intérieur. » ≥ 1024 px (mobile : styles.css) */ --ib-fs-giant: clamp(3.25rem, 15vw, 10.5rem); /* signature du pied de page */ --ib-fs-display: clamp(2.5rem, 6.2vw, 5.75rem); /* chiffres, « 50 » */ --ib-fs-h2: clamp(2.25rem, 4.6vw, 4.25rem); --ib-fs-statement:clamp(1.6rem, 2.9vw, 2.75rem); /* grande phrase éditoriale */ --ib-fs-h3: clamp(1.6rem, 2.3vw, 2.25rem); --ib-fs-h4: clamp(1.3rem, 1.6vw, 1.6rem); --ib-fs-lead: clamp(1.0625rem, 1.25vw, 1.1875rem); --ib-fs-body: 1rem; --ib-fs-small: .875rem; --ib-fs-micro: .75rem; /* capitales espacées */ --ib-lh-tight: .92; --ib-lh-title: 1.04; --ib-lh-snug: 1.25; --ib-lh-body: 1.65; --ib-track-caps: .22em; --ib-track-wide: .3em; /* ===== ESPACEMENT (base 4 px) ========================================== */ --ib-space-1: .25rem; --ib-space-2: .5rem; --ib-space-3: .75rem; --ib-space-4: 1rem; --ib-space-5: 1.5rem; --ib-space-6: 2rem; --ib-space-7: 3rem; --ib-space-8: 4rem; --ib-space-9: 6rem; --ib-space-10: 8rem; --ib-space-11: 10rem; --ib-frame: clamp(.5rem, 1vw, 1rem); /* marge autour des grandes cartes */ --ib-gutter: clamp(1.25rem, 4.6vw, 4rem); /* marge intérieure du contenu */ --ib-section: clamp(5rem, 11vw, 10rem); /* rythme vertical entre sections */ --ib-max: 84rem; /* 1344 px de contenu max */ --ib-card-pad: clamp(1.25rem, 3.4vw, 3rem); /* marge intérieure des grandes cartes */ --ib-field-border:#8A6A50; /* bord de champ : 4,93 sur blanc */ /* ===== RAYONS ========================================================== */ --ib-radius-xl: clamp(1.5rem, 2.8vw, 2.5rem); /* hero, grands blocs (24 → 40) */ --ib-radius-lg: clamp(1.25rem, 2vw, 1.75rem); /* images, cartes (20 → 28) */ --ib-radius-md: 1rem; --ib-radius-sm: .5rem; --ib-radius-pill: 999px; /* ===== OMBRES (très douces, tons chauds) ================================ */ --ib-shadow-soft: 0 1px 2px rgba(59, 42, 32, .05), 0 12px 32px -12px rgba(59, 42, 32, .14); --ib-shadow-float:0 1px 2px rgba(59, 42, 32, .06), 0 18px 40px -18px rgba(59, 42, 32, .28); /* ===== MOUVEMENT ======================================================== */ --ib-ease-out: cubic-bezier(.22, 1, .36, 1); /* entrées, révélations */ --ib-ease-expo: cubic-bezier(.16, 1, .3, 1); /* masques de titre, dévoilements */ --ib-ease-inout: cubic-bezier(.77, 0, .175, 1); /* déplacements à l'écran */ --ib-ease-hover: ease; /* couleurs, survols */ --ib-dur-press: 160ms; --ib-dur-fast: 220ms; --ib-dur-base: 320ms; --ib-dur-reveal: 600ms; --ib-dur-hero: 600ms; --ib-dur-kenburns:18s; /* dézoom très lent de la photo du hero (exception assumée) */ --ib-stagger: 60ms; /* ===== COMPOSANTS ======================================================= */ --ib-header-h: 5.25rem; --ib-announce-h: 2.5rem; --ib-btn-h: 3.25rem; /* ≥ 44 px */ --ib-z-header: 50; --ib-z-menu: 60; --ib-z-tools: 70; } /* v5 : barre d’en-tête plus haute pour le logo agrandi */ @media (min-width: 64em) { :root { --ib-header-h: 6.5rem; } }