/* ========================================================================== Auxentis — jetons de design (tokens) Source : Bible du design Auxentis, parties IV et VI. La bible fait foi : ce fichier la traduit en code et ne la modifie jamais. Valeurs validées par Lancelot le 18/09/2026 ; proportions, durées et courbe calées sur brandvm.com et apple.com (annexe C). Usage : copier ce fichier dans le projet, puis utiliser les variables sémantiques (--fond, --texte, --action…) plutôt que les couleurs brutes. Thème : automatique (réglage de l'appareil) ; forcé par ou (boutons Clair / Sombre). ========================================================================== */ :root { /* ---------- 1. Palette brute (partie IV, ch. 12) ---------- */ /* Marque — palette V2 */ --aux-encre: #13141a; --aux-amethyste: #5b3fbf; --aux-amethyste-clair: #9d87e8; --aux-emeraude: #0e8a66; --aux-emeraude-profond: #0a6b4f; /* cartes avec petit texte */ --aux-or: #f5b91e; --aux-or-profond: #9c6a07; /* texte or, grand texte seulement */ /* Neutres */ --aux-papier: #f1f0f4; /* fond clair : jamais de blanc pur */ --aux-papier-fonce: #e6e4ec; --aux-encre-2: #1d1e26; --aux-filet-clair: #d9d7e2; --aux-filet-sombre: #2e2f39; --aux-gris-clair: #55566a; /* texte secondaire sur Papier */ --aux-gris-sombre: #a9a8b8; /* texte secondaire sur Encre */ /* États (logiciels, partie VI, ch. 27) */ --aux-rouge: #b42318; /* validé */ --aux-rouge-clair: #ef7a6d; /* validé */ --aux-emeraude-clair: #3dbf98; /* réussi, fond sombre */ --aux-or-fonce: #7a5205; /* attention, fond clair */ /* ---------- 2. Rôles — thème clair (par défaut) ---------- */ --fond: var(--aux-papier); --surface: var(--aux-papier-fonce); --texte: var(--aux-encre); --texte-2: var(--aux-gris-clair); --filet: var(--aux-filet-clair); --action: var(--aux-amethyste); /* bouton principal, sélection, lien */ --sur-action: #ffffff; /* texte posé sur --action */ --focus: var(--aux-amethyste); --etat-reussi: var(--aux-emeraude-profond); --etat-attention: var(--aux-or-fonce); --etat-erreur: var(--aux-rouge); --etat-info: var(--aux-amethyste); /* Blocs à fond fixe (sections sombres et claires alternées, ch. 12) */ --bloc-sombre-fond: var(--aux-encre); --bloc-sombre-texte: var(--aux-papier); --bloc-sombre-texte-2: var(--aux-gris-sombre); --bloc-sombre-filet: var(--aux-filet-sombre); --bloc-sombre-accent: var(--aux-amethyste-clair); /* liens, mot qui joue */ --bloc-sombre-action: var(--aux-amethyste); /* bouton plein, texte blanc (7,2:1) */ /* ---------- 3. Typographie (ch. 13 et 27) ---------- */ --police: "Archivo", "Arial Narrow", Arial, sans-serif; --police-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --police-mail: Arial, Helvetica, sans-serif; /* mails HTML (ch. 22) */ /* Le jeu de largeur (titres principaux uniquement) */ --largeur-titre: 75%; --graisse-titre: 800; --largeur-jeu: 125%; --graisse-jeu: 300; --largeur-texte: 100%; /* Échelle du site et des supports (ch. 13) — valeurs mobiles. Sur ordinateur (≥ 768 px), l'unité est fluide : valeur à 1 440 px × largeur / 1 440. */ --t-titre-1: 2.75rem; /* 44 px → 88 px à 1 440 px */ --t-titre-2: 2.25rem; /* 36 px → 64 px à 1 440 px */ --t-titre-3: 1.5rem; /* 24 px → 28 px à 1 440 px */ --t-texte: 1.0625rem; /* 17 px, jamais sous 16 px */ --t-petit: 0.9375rem; /* 15 px */ --t-etiquette: 0.75rem; /* 12 px, mono, majuscules */ --interligne-titre: 1; --interligne-titre-3: 1.15; --interligne-texte: 1.5; --lettres-titre: -0.02em; --espacement-etiquette: 0.08em; /* Échelle des logiciels (ch. 27) — pas de jeu de largeur */ --app-titre-ecran: 1.5rem; /* 24 px, 700 */ --app-titre-bloc: 1.125rem; /* 18 px, 600 */ --app-texte: 0.9375rem; /* 15 px, 400 */ --app-tableau: 0.875rem; /* 14 px, 400 */ --app-etiquette: 0.75rem; /* 12 px, 500 */ /* ---------- 4. Espacements (ch. 14) — aucune autre valeur ---------- */ --e-1: 4px; --e-2: 8px; --e-3: 16px; --e-4: 24px; --e-5: 32px; --e-6: 48px; --e-7: 64px; --e-8: 104px; --e-9: 128px; --section-v: 64px; /* haut et bas d'une section ; 104 px à 1 440 px */ --ecart-titre-contenu: 32px; /* 48 px à 1 440 px */ --ecart-titre-texte: 16px; /* 24 px à 1 440 px */ --ecart-cartes: 16px; --marge-carte: 24px; /* 32 px à 1 440 px */ /* Grille */ --bloc-large-max: 1360px; /* cartes, images, schémas (brandvm) */ --bloc-texte-max: 980px; /* titre + paragraphes (apple.com) */ --gouttiere: 24px; --marge-laterale: 24px; /* 40 px sur bureau */ /* ---------- 5. Arrondis (ch. 14, calés sur brandvm) ---------- */ --arrondi-0: 0; /* sections, images pleine largeur */ --arrondi-controle: 4px; /* boutons, champs — jamais de pilule */ --arrondi-etiquette: 4px; --arrondi-petit: 6px; /* vignettes, encarts, panneaux des logiciels */ --arrondi-carte: 16px; /* grandes cartes du site et des supports */ /* ---------- 6. Profondeur ---------- */ --ombre: none; /* aucune ombre… */ --ombre-flottant: 0 8px 24px rgb(19 20 26 / 0.14), 0 2px 6px rgb(19 20 26 / 0.08); /* …sauf ce qui flotte dans un logiciel (validé) */ /* ---------- 7. Mouvement (ch. 17, relevé sur brandvm) ---------- */ --duree-survol: 240ms; --duree-etat: 400ms; --duree-grand: 735ms; /* carte qui se retourne, ouverture d'un bloc */ --duree-app: 240ms; /* logiciels : jamais plus */ --courbe: cubic-bezier(0.64, 0.05, 0, 1); /* courbe unique, partout */ /* ---------- 8. Tailles des contrôles (logiciels) ---------- */ --h-controle: 44px; /* mobile ; 40 px sur ordinateur */ --h-ligne-tableau: 44px; } /* ---------- Thème sombre : automatique (Auto) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fond: var(--aux-encre); --surface: var(--aux-encre-2); --texte: var(--aux-papier); --texte-2: var(--aux-gris-sombre); --filet: var(--aux-filet-sombre); --action: var(--aux-amethyste-clair); --sur-action: var(--aux-encre); --focus: var(--aux-amethyste-clair); --etat-reussi: var(--aux-emeraude-clair); --etat-attention: var(--aux-or); --etat-erreur: var(--aux-rouge-clair); --etat-info: var(--aux-amethyste-clair); --ombre-flottant: 0 8px 24px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.3); } } /* ---------- Thème sombre : forcé (bouton Sombre) ---------- */ :root[data-theme="dark"] { --fond: var(--aux-encre); --surface: var(--aux-encre-2); --texte: var(--aux-papier); --texte-2: var(--aux-gris-sombre); --filet: var(--aux-filet-sombre); --action: var(--aux-amethyste-clair); --sur-action: var(--aux-encre); --focus: var(--aux-amethyste-clair); --etat-reussi: var(--aux-emeraude-clair); --etat-attention: var(--aux-or); --etat-erreur: var(--aux-rouge-clair); --etat-info: var(--aux-amethyste-clair); --ombre-flottant: 0 8px 24px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.3); } /* ---------- Bureau : unité fluide (valeur à 1 440 px, proportionnelle à la largeur) ---------- */ @media (min-width: 768px) { :root { --t-titre-1: calc(88 / 1440 * 100vw); --t-titre-2: calc(64 / 1440 * 100vw); --t-titre-3: max(24px, calc(28 / 1440 * 100vw)); --t-texte: max(16px, calc(17 / 1440 * 100vw)); --t-petit: max(14px, calc(15 / 1440 * 100vw)); --section-v: calc(104 / 1440 * 100vw); --ecart-titre-contenu: calc(48 / 1440 * 100vw); --ecart-titre-texte: calc(24 / 1440 * 100vw); --marge-carte: calc(32 / 1440 * 100vw); --arrondi-carte: calc(16 / 1440 * 100vw); --marge-laterale: 40px; --h-controle: 40px; } } /* ---------- Mouvement réduit : aucune animation ---------- */ @media (prefers-reduced-motion: reduce) { :root { --duree-survol: 0ms; --duree-etat: 0ms; --duree-grand: 0ms; --duree-app: 0ms; } }