/* ============================================================ 1calendrier : tokens de design v1 ------------------------------------------------------------ Ce fichier est LA source de vérité visuelle du produit. Pour changer la palette, la typo ou les rayons partout (site marketing, portail client, e-mails), on édite CE fichier et rien d'autre. Règles : - Thème clair PAR DÉFAUT. Le sombre est une OPTION choisie par l'utilisateur (bouton) : il s'active en posant data-theme="dark" sur , jamais automatiquement (décision Aurélien 31/07/2026). - Un seul accent (vert), rétrogradé aux ÉTATS produit (pastilles santé, lectures OK) : les CTA sont encre. L'ambre reste l'alerte. - Direction v2 « éditoriale cinématique » (réf. Squarespace, voir design/direction-v2.md) : displays en graisse normale, boutons rectangles à majuscules espacées, cartes-images signature. - Rayons : boutons = 6px, cartes = 12px, champs = 10px, pill (999px) réservé aux badges d'état. - Texte courant : 16px minimum. Cibles tactiles : 44px minimum. ============================================================ */ :root { /* ---------- Couleurs : fonds ---------- */ --bg: #fafaf9; /* fond de page */ --bg-soft: #f1f1ef; /* fond de section alternée */ --surface: #ffffff; /* cartes, panneaux, champs */ /* ---------- Couleurs : textes ---------- */ --ink: #1c1c1a; /* titres et texte principal (16,3:1 sur bg : AAA) */ --ink-soft: #57544e; /* texte secondaire (7,2:1 sur bg : AAA) */ --ink-faint: #747066; /* texte discret (4,7:1 sur bg : AA), métadonnées, mentions */ /* ---------- Couleurs : structure ---------- */ --line: #e4e2dd; /* bordures, séparateurs */ /* ---------- Couleurs : accent (vert = tout va bien) ---------- */ --accent: #0e7a58; /* boutons, liens forts, pastilles OK (5,1:1 sur bg : AA) */ --accent-ink: #0a5c43; /* hover des boutons, texte accentué sur fond accent-soft */ --accent-soft: #e3f2ec; /* fond teinté accent (cartes mises en avant) */ --on-accent: #ffffff; /* texte posé sur --accent (5,3:1 : AA) */ /* ---------- Couleurs : alerte (ambre = attention) ---------- Réservé aux états sémantiques : panne, conflit, avertissement. Jamais utilisé comme couleur décorative. */ --alert: #b45309; /* texte et bordures d'alerte (4,8:1 sur bg : AA) */ --alert-soft: #fdf3e3; /* fond d'une zone en alerte */ /* ---------- Typographie ---------- */ --font: 'Satoshi', system-ui, -apple-system, sans-serif; /* Échelle v2 : les displays sont GRANDS mais en graisse normale, c'est ce qui fait le ton éditorial (réf. Squarespace). */ --text-display: clamp(2.6rem, 5.2vw, 4.2rem); /* h1 hero, graisse 500, interlignage 1.05 */ --text-h2: clamp(1.8rem, 3.2vw, 2.6rem); /* titres de section, 500, 1.12 */ --text-h3: 1.15rem; /* titres de carte, 700, 1.3 */ --text-body: 1rem; /* texte courant (16px), 500, 1.6 */ --text-small: 0.88rem; /* mentions, métadonnées, 500, 1.5 */ --weight-display: 500; /* graisse des grands titres (jamais 900) */ --tracking-display: -0.025em; /* resserrement des grands titres */ --tracking-h2: -0.02em; /* Libellés de boutons : majuscules espacées */ --btn-text: 0.85rem; --btn-tracking: 0.08em; /* ---------- Espacements (multiples de 4) ---------- */ --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: 88px; /* padding vertical des sections desktop */ /* ---------- Rayons (v2 : rectangles nets) ---------- */ --radius-btn: 6px; /* boutons */ --radius-card: 12px; /* cartes, panneaux, images */ --radius-field: 10px; /* champs de formulaire, encarts internes */ --radius-pill: 999px; /* badges d'état UNIQUEMENT */ /* ---------- Ombres (teintées, jamais noir pur) ---------- */ --shadow-panel: 0 12px 40px color-mix(in srgb, var(--ink) 7%, transparent); --shadow-pop: 0 4px 16px color-mix(in srgb, var(--ink) 10%, transparent); /* Ombre discrète pour surfaces bordées (une bordure OU une grande ombre, jamais les deux : ici la bordure structure, l'ombre affleure) */ --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent); /* Ombre d'élévation au survol (cartes cliquables) */ --shadow-lift: 0 6px 14px -6px color-mix(in srgb, var(--ink) 18%, transparent); /* ---------- Focus (accessibilité, toujours visible) ---------- */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); /* ---------- Mouvement ---------- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.15s; /* micro-retours (boutons) */ --dur-med: 0.3s; /* transitions d'état */ --dur-slow: 0.6s; /* apparitions au scroll */ /* ---------- Dimensions ---------- */ --touch-target: 44px; /* hauteur minimale de tout élément cliquable */ --content-max: 1200px; /* largeur maximale du contenu */ --reading-max: 65ch; /* largeur maximale d'un paragraphe */ } /* ============================================================ Thème sombre OPTIONNEL : activé uniquement par data-theme="dark" sur (bouton + localStorage, voir themeToggle() ci-dessous). Tous les contrastes vérifiés : AA minimum, AAA pour la plupart. ============================================================ */ :root[data-theme="dark"] { --bg: #131311; --bg-soft: #1b1b18; --surface: #1f1f1c; --ink: #f0efec; /* 16,2:1 : AAA */ --ink-soft: #b3b0a8; /* 8,6:1 : AAA */ --ink-faint: #7c7972; /* 4,3:1 : grands textes uniquement */ --line: #2d2d29; --accent: #34b98a; /* 7,5:1 : AAA */ --accent-ink: #6fd7af; --accent-soft: #17281f; --on-accent: #0c1512; /* texte sombre sur bouton vert clair (7,5:1 : AAA) */ --alert: #e8a04c; /* 8,5:1 : AAA */ --alert-soft: #2b2115; --shadow-panel: 0 12px 40px rgb(0 0 0 / 0.5); --shadow-pop: 0 4px 16px rgb(0 0 0 / 0.55); --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-lift: 0 6px 14px -6px rgb(0 0 0 / 0.6); } /* ============================================================ Points de rupture (référence, à utiliser dans les media queries) : - mobile : < 640px (1 colonne, padding 16px, nav repliée) - tablette : 640 à 1024px (2 colonnes max, padding 24px) - desktop : > 1024px (grilles complètes, padding 24px, max 1200px) ============================================================ */ /* ============================================================ Base minimale commune à toutes les pages du produit. ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font); font-size: var(--text-body); font-weight: 500; line-height: 1.6; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } /* Focus clavier toujours visible, sur tous les éléments interactifs */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-field); } /* Respect systématique de la préférence de mouvement réduit */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Bascule de thème : bouton icône standard (lune/soleil), un composant produit à part entière. Le markup : + design/theme.js qui injecte l'icône et le libellé accessible. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-target); height: var(--touch-target); border-radius: var(--radius-pill); background: transparent; border: none; color: var(--ink-soft); cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .theme-toggle:hover { color: var(--ink); background: var(--bg-soft); } .theme-toggle svg { width: 19px; height: 19px; }