/* ===================================================================== ENTRE DEUX LUMIÈRES — Roxane Mayer, Doula Design System · Design Tokens --------------------------------------------------------------------- Source de vérité pour couleurs, typographie, espacements, rayons, ombres et durées. Ne jamais écrire une valeur brute (#hex, px) dans les composants : toujours passer par une variable définie ici. ===================================================================== */ /* ------------------------------------------------------------------ */ /* POLICES DE LA MARQUE (fichiers locaux, format WOFF2) */ /* ---------------------------------------------------------------- */ /* WOFF2 seulement, pas de repli TTF : le format est compris par */ /* tous les navigateurs depuis 2016 (plus de 98 % du parc), et les */ /* TTF pesaient 4,5 Mo contre 820 Ko ici — le poids des polices est */ /* ce qui ralentissait le plus l'affichage, donc le référencement. */ /* Pour regénérer après une mise à jour de police : */ /* fonttools ttLib.woff2 compress */ /* ------------------------------------------------------------------ */ @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Calligraphie — réservée aux ornements / signatures, jamais le corps */ @font-face { font-family: "Tangerine"; src: url("../fonts/Tangerine-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Tangerine"; src: url("../fonts/Tangerine-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ================================================================ */ /* 1. COULEURS — palette de marque */ /* ================================================================ */ /* Couleurs primaires (extraites du logo) */ --c-wine: #8d2c46; /* Bordeaux · lie-de-vin — couleur signature */ --c-coral: #ea7e7b; /* Corail · rose saumon — accent chaleureux */ --c-blush: #fbdbd4; /* Rose blush — aplats doux, cartes */ --c-blush-pale: #ffefec; /* Blush très pâle — fonds de sections */ /* Déclinaisons du bordeaux */ --c-wine-deep: #6d2036; /* Survol, texte fort sur clair */ --c-wine-900: #4a1626; /* Contraste maximal */ --c-wine-tint: #b56e81; /* Bordeaux désaturé — texte secondaire */ /* Déclinaisons du corail */ --c-coral-deep: #d9615e; /* Survol des accents corail */ --c-coral-soft: #f3a8a4; /* Corail lavé */ /* Corail assombri, réservé au TEXTE. Le corail de marque (#ea7e7b) ne fait que 2.4:1 sur crème : superbe en aplat, illisible en petites capitales. Celui-ci garde la teinte (H=2°) mais passe AA partout (5.2 à 6.2:1 sur les fonds clairs). Aplats, boutons et ornements gardent le corail d'origine — c'est lui qui porte l'identité. */ --c-coral-text: #ae3732; /* Corail de fond pour bouton accent : le blanc sur #ea7e7b ne fait que 2.7:1. Ce ton soutenu porte le blanc à 6.2:1 sans quitter la famille. */ --c-coral-btn: #ae3732; --c-coral-btn-hover: #94292a; /* Neutres chauds (jamais de gris froid pur) */ --c-ink: #4a2e33; /* Texte courant — brun prune, doux à l'œil */ --c-ink-soft: #866067; /* Texte secondaire, légendes (AA : 4.9+) */ /* Tertiaire lisible (5.0:1). L'ancien #b39aa0 ne faisait que 2.4:1 : il reste disponible ci-dessous pour les placeholders uniquement, que WCAG tolère puisqu'ils sont remplacés par la saisie. */ --c-ink-faint: #806068; --c-ink-ghost: #b39aa0; /* Placeholders de formulaire — jamais du contenu */ --c-cream: #fff9f6; /* Fond de page — crème rosé */ --c-cream-2: #fdf1ed; /* Alternance de sections */ --c-white: #ffffff; --c-line: rgba(141, 44, 70, 0.14); /* Filets, séparateurs */ --c-line-strong: rgba(141, 44, 70, 0.28); /* Dégradés aquarelle (univers du flyer) */ --grad-blush: linear-gradient(135deg, #ffefec 0%, #fbdbd4 45%, #f6d3e0 100%); --grad-dawn: linear-gradient(120deg, #fdeeea 0%, #f9dfe6 40%, #ece4f2 100%); --grad-wine: linear-gradient(135deg, #a4405a 0%, #8d2c46 55%, #6d2036 100%); --grad-halo: radial-gradient(60% 60% at 50% 35%, #ffffff 0%, #ffefec 55%, #fbdbd4 100%); /* Rôles sémantiques (à privilégier dans les composants) */ --color-bg: var(--c-cream); --color-bg-alt: var(--c-cream-2); --color-surface: var(--c-white); --color-text: var(--c-ink); --color-text-muted: var(--c-ink-soft); --color-heading: var(--c-wine); --color-primary: var(--c-wine); --color-primary-hover: var(--c-wine-deep); --color-accent: var(--c-coral); /* aplats, filets, ornements */ --color-accent-hover: var(--c-coral-deep); --color-accent-text: var(--c-coral-text); /* texte corail — le seul lisible */ --color-border: var(--c-line); /* ================================================================ */ /* 2. TYPOGRAPHIE */ /* ================================================================ */ --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --font-body: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --font-ui: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-script: "Tangerine", "Snell Roundhand", cursive; /* Graisse du corps de texte : Cormorant est une fonte fine, à faible hauteur d'x. En Regular 400 elle s'efface pour une lectrice fatiguée, sur mobile, le soir. Le Medium 500 rétablit la lisibilité sans rien coûter à l'élégance — c'est le réglage retenu (piste B, 2026-07-16). Les titres restent en 500 aussi : à leur taille, la fonte tient. */ --fw-body: 500; --fw-body-bold: 600; /* dans le corps : au-dessus de 500 */ /* Échelle typographique — ratio ~1.25 (quarte majeure adoucie) */ --fs-3xs: 0.75rem; /* 12px — sur-titres, mentions légales */ --fs-2xs: 0.8125rem; /* 13px */ --fs-xs: 0.9375rem; /* 15px — petites UI */ --fs-sm: 1.0625rem; /* 17px */ --fs-base: 1.1875rem; /* 19px — corps de texte (serif = +grd) */ --fs-md: 1.375rem; /* 22px — chapô */ --fs-lg: 1.75rem; /* 28px — h4 / h5 */ --fs-xl: 2.25rem; /* 36px — h3 */ --fs-2xl: 3rem; /* 48px — h2 */ --fs-3xl: clamp(2.75rem, 6vw, 4.5rem); /* h1 / hero */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.65; /* corps de texte, lecture confortable */ --lh-loose: 1.85; --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.22em; /* sur-titres capitales, façon logo */ /* ================================================================ */ /* 3. ESPACEMENTS — base 4px */ /* ================================================================ */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ --sp-10: 8rem; /* 128 */ --section-y: clamp(3.5rem, 9vw, 7rem); /* respiration verticale des sections */ --container: 1120px; /* largeur max confort */ --container-text: 720px; /* largeur de lecture optimale */ /* ================================================================ */ /* 4. RAYONS */ /* ================================================================ */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* pastilles et boutons : reste un vrai demi-cercle */ --r-blob: 62% 38% 55% 45% / 55% 48% 52% 45%; /* forme organique "goutte" */ /* ================================================================ */ /* 5. OMBRES — teintées rose, jamais grises */ /* ================================================================ */ --shadow-xs: 0 1px 2px rgba(141, 44, 70, 0.06); --shadow-sm: 0 4px 14px rgba(141, 44, 70, 0.08); --shadow-md: 0 12px 30px rgba(141, 44, 70, 0.10); --shadow-lg: 0 24px 60px rgba(141, 44, 70, 0.14); --shadow-glow: 0 10px 40px rgba(234, 126, 123, 0.28); /* ================================================================ */ /* 6. MOUVEMENT */ /* ================================================================ */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 160ms; --dur: 280ms; --dur-slow: 520ms; /* Divers */ --z-header: 100; --z-overlay: 200; --focus-ring: 0 0 0 3px rgba(234, 126, 123, 0.45); }