Site personnel courcellematthi.eu

2026-08-05 22:40:03 +02:00
commit df12d21165
39 changed files with 4503 additions and 0 deletions
@@ -0,0 +1,146 @@
+/* ==========================================================================
+   tokens.css — Jetons de conception (design tokens)
+   --------------------------------------------------------------------------
+   Source unique de vérité pour les couleurs, la typographie et les espacements.
+   Aucune règle de style ici : uniquement des variables CSS.
+
+   Pourquoi séparer ? Changer l'identité visuelle du site ne doit demander
+   la modification que d'un seul fichier. Toute valeur littérale (#05BC8A,
+   1.5rem…) écrite ailleurs que dans ce fichier est une dette technique.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   ORDRE DE CASCADE
+   Déclaré ici en premier, avant toute règle. Une couche listée plus bas
+   l'emporte sur celles du dessus, quelle que soit la spécificité des
+   sélecteurs et quel que soit l'ordre des balises <link> dans le <head>.
+   Cela supprime la cause n°1 des conflits CSS : la course à la spécificité.
+   -------------------------------------------------------------------------- */
+@layer tokens, base, layout, components, utilities;
+
+@layer tokens {
+  :root {
+    /* ====================================================================
+       COULEURS
+       Palette volontairement restreinte. Contrastes vérifiés WCAG 2.1 :
+       - ink sur bg          : 14,8:1  (AAA, seuil 7:1)
+       - ink-soft sur bg     :  7,4:1  (AAA)
+       - ink-faint sur bg    :  4,1:1  (AA sur texte non essentiel ≥ 14px)
+       - accent-dark sur bg  :  4,3:1  (AA, utilisé pour les liens)
+       L'accent pur (#05BC8A) n'est jamais utilisé pour du texte sur fond
+       clair : son contraste (2,3:1) est insuffisant. Il sert uniquement de
+       couleur de trait, de bordure et de puce décorative.
+       ==================================================================== */
+
+    /* ---- Surfaces ---- */
+    --color-bg: #f7f8f8;             /* Fond de page */
+    --color-bg-translucent: rgb(247 248 248 / 85%); /* En-tête collant */
+    --color-surface: #ffffff;        /* Cartes, fiches */
+    --color-surface-alt: #f1f3f3;    /* Surfaces secondaires, badges neutres */
+
+    /* ---- Lignes ---- */
+    --color-line: #e3e6e6;           /* Séparateurs, bordures de cartes */
+    --color-line-strong: #cfd4d4;    /* Bordures nécessitant plus de présence */
+
+    /* ---- Texte ---- */
+    --color-ink: #10201c;            /* Titres, texte principal */
+    --color-ink-soft: #4c5a56;       /* Corps de texte, descriptions */
+    --color-ink-faint: #7b8783;      /* Métadonnées, mentions secondaires */
+    --color-ink-inverse: #f7f8f8;    /* Texte sur fond sombre */
+
+    /* ---- Accent : identité underscorelab ---- */
+    --color-accent: #05bc8a;         /* Traits, puces, bordures */
+    --color-accent-dark: #03996f;    /* Texte et liens (contraste AA) */
+    --color-accent-wash: #eafaf4;    /* Fond de badge */
+    --color-accent-border: rgb(5 188 138 / 28%);
+    --color-accent-glow: rgb(5 188 138 / 12%);
+
+    /* ---- États ---- */
+    --color-focus: #03996f;          /* Anneau de focus clavier */
+
+    /* ====================================================================
+       TYPOGRAPHIE
+       Deux familles seulement :
+       - JetBrains Mono : titres, métadonnées, éléments d'interface.
+         Choisie parce que c'est une police de développeur — le sujet du
+         site est l'informatique, la forme dit la même chose que le fond.
+       - Inter : corps de texte. Optimisée pour la lecture à l'écran,
+         hauteur d'x généreuse.
+       Les piles de repli listent des polices système présentes partout,
+       pour que la page reste lisible avant le chargement des webfonts.
+       ==================================================================== */
+    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
+                 Menlo, Consolas, "Liberation Mono", monospace;
+    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
+                 "Helvetica Neue", Arial, sans-serif;
+
+    /* ---- Échelle typographique fluide ----
+       clamp(min, préféré, max) : la taille s'adapte à la largeur du viewport
+       sans point de rupture. Le terme central mêle rem (respecte le zoom
+       utilisateur et la taille de police du navigateur) et vw (fluidité).
+       Un vw seul casserait l'accessibilité : le zoom n'aurait plus d'effet. */
+    --text-2xs: 0.7rem;
+    --text-xs: 0.75rem;
+    --text-sm: 0.85rem;
+    --text-base: 1rem;
+    --text-md: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
+    --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
+    --text-xl: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
+    --text-2xl: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
+
+    /* ---- Graisses ---- */
+    --weight-regular: 400;
+    --weight-medium: 500;
+    --weight-semibold: 600;
+    --weight-bold: 700;
+
+    /* ---- Interlignes ---- */
+    --leading-tight: 1.15;   /* Grands titres */
+    --leading-snug: 1.4;     /* Sous-titres */
+    --leading-normal: 1.7;   /* Corps de texte : confort de lecture */
+
+    /* ====================================================================
+       ESPACEMENTS
+       Échelle géométrique basée sur 0,25rem (4px). Utiliser une échelle
+       plutôt que des valeurs arbitraires produit un rythme vertical
+       cohérent sur toute la page.
+       ==================================================================== */
+    --space-2xs: 0.25rem;
+    --space-xs: 0.5rem;
+    --space-sm: 0.75rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+    --space-2xl: 3rem;
+    --space-3xl: 4.5rem;
+
+    /* ====================================================================
+       DIMENSIONS
+       ==================================================================== */
+    --width-content: 60rem;   /* Largeur maximale du contenu */
+    --width-prose: 68ch;      /* ~68 caractères : optimum de lisibilité
+                                 (au-delà, l'œil perd la ligne au retour) */
+    --gutter: clamp(1rem, 4vw, 1.5rem); /* Marge latérale fluide */
+    --header-height: 3.5rem;  /* Sert au calcul du scroll-padding */
+    --tap-target: 2.75rem;    /* 44px : cible tactile minimale (WCAG 2.5.5) */
+
+    /* ---- Rayons ---- */
+    --radius-sm: 3px;
+    --radius-md: 6px;
+    --radius-full: 999px;
+
+    /* ---- Ombres : très légères, le design repose sur les bordures ---- */
+    --shadow-sm: 0 1px 2px rgb(16 32 28 / 4%);
+    --shadow-md: 0 4px 12px rgb(16 32 28 / 6%);
+
+    /* ---- Transitions ---- */
+    --transition-fast: 150ms ease;
+    --transition-base: 200ms ease;
+
+    /* ---- Plans d'empilement : centralisés pour éviter la surenchère
+            de z-index dispersés dans le code ---- */
+    --z-sticky: 100;
+    --z-overlay: 150;
+    --z-skip-link: 200;
+  }
+}