/* ========================================================================== Paintball Albi — jetons de conception Direction « Impact » : papier, encre, orange et vermillon. La peinture ne sert qu'à deux endroits, le mot frappé et la coulure entre sections ; partout ailleurs elle reste un aplat ou une bordure. Premier fichier de la cascade : tokens.css → main.css → pages.css Aucune règle de mise en forme ici, uniquement des valeurs. Contrôle des contrastes : node scripts/contraste.mjs ========================================================================== */ :root { /* --- Couleurs primitives --------------------------------------------- Les teintes vives plafonnent à 2,8:1 sur papier : elles ne peuvent porter ni texte ni bordure signifiante. Chacune a donc deux déclinaisons, une pour le texte (4,5:1) et une pour les bordures (3:1). Ne jamais écrire une couleur en dur ailleurs que dans ce bloc. */ --c-encre: #16161a; /* 17,74:1 sur papier */ --c-encre-douce: #3a3a42; /* 11,08:1 — texte secondaire */ --c-encre-tendre: #55555f; /* 7,24:1 — légendes, méta */ --c-papier: #fffdf7; --c-papier-ombre: #f4efe4; /* alternance de sections */ /* Fonds teintés. Ils remplacent l'encre pour les sections de contenu : un aplat sombre coupe une page claire en deux et pèse lourd sur une direction qui se veut accueillante. Assez désaturés pour que le texte encre y garde plus de 15:1. */ --c-menthe: #d7eee9; --c-abricot: #fbe4d3; --c-paille: #f8ebcd; --c-orange: #ff6b1a; /* aplats et fonds de bouton */ --c-orange-bord: #f26210; /* 3,16:1 — bordures et icônes */ --c-orange-profond: #b83c00; /* 5,60:1 — liens et texte */ --c-vermillon: #e01f3d; /* la tache, uniquement */ --c-vermillon-sombre: #a8102a; /* 7,45:1 — texte d'accent */ --c-turquoise: #10b3a8; /* aplats */ --c-turquoise-bord: #0e9b92; /* 3,37:1 — bordures et icônes */ --c-turquoise-sombre: #0a6f68; /* 5,92:1 — sur-titres et chiffres */ /* États. Le rouge d'erreur est distinct du vermillon de marque : confondre les deux ferait lire chaque accent comme une alerte. */ --c-erreur: #b3261e; --c-erreur-fond: #fdecea; --c-succes: #146c43; --c-succes-fond: #e7f4ec; /* --- Rôles sémantiques ----------------------------------------------- Les composants n'utilisent que ces variables-ci, jamais les primitives. Changer une charte se fait alors dans ce bloc seul. */ --fond: var(--c-papier); --fond-alterne: var(--c-papier-ombre); --fond-menthe: var(--c-menthe); --fond-abricot: var(--c-abricot); --fond-paille: var(--c-paille); /* L'encre ne sert plus que là où une photo ou le pied la justifient. */ --fond-inverse: var(--c-encre); --texte: var(--c-encre); --texte-doux: var(--c-encre-douce); --texte-tendre: var(--c-encre-tendre); --texte-inverse: var(--c-papier); --lien: var(--c-orange-profond); --lien-survol: var(--c-vermillon-sombre); --accent: var(--c-orange); --accent-bord: var(--c-orange-bord); --accent-texte: var(--c-orange-profond); --marque: var(--c-vermillon); --appui: var(--c-turquoise-sombre); --bordure: rgba(22, 22, 26, .14); --bordure-forte: var(--c-encre); /* --- Typographie ------------------------------------------------------ Les deux familles sont auto-hébergées (public/fonts) : un appel à Google Fonts ajoute une connexion tierce, coûte au premier rendu et transmet l'adresse IP du visiteur. */ --police-titre: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --police-texte: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; /* Échelle fluide. Le pas de base ne descend jamais sous 16 px : en dessous, iOS zoome de lui-même dès qu'un champ reçoit le focus. */ --t-xs: 0.8125rem; /* 13 px — mentions */ --t-sm: 0.9375rem; /* 15 px — méta */ --t-base: 1rem; /* 16 px — plancher */ --t-md: clamp(1.0625rem, 0.2vw + 1rem, 1.1875rem); --t-lg: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem); --t-xl: clamp(1.5rem, 1.4vw + 1.2rem, 2.125rem); --t-2xl: clamp(1.875rem, 2.6vw + 1.3rem, 3rem); --t-3xl: clamp(2.375rem, 5vw + 1.2rem, 4.25rem); /* Dernier cran de l'échelle. Sans usage actuel : le titre du hero a sa propre formule, indexée sur la largeur de sa colonne. Conservé pour ne pas trouer l'échelle — la retirer ferait redéfinir cette taille à la main à la première page qui en aurait besoin. */ --t-4xl: clamp(2.625rem, 8.5vw + 0.6rem, 5.4rem); --poids-normal: 400; --poids-moyen: 500; --poids-gras: 700; --poids-massif: 800; /* réservé aux titres de niveau 1 */ --inter-titre: 0.94; /* les grands titres se resserrent */ --inter-texte: 1.6; --inter-dense: 1.35; --chasse-titre: -0.032em; /* La chasse négative resserre les lettres d'un grand titre, ce qui est voulu — mais elle s'applique aussi à l'espace entre les mots, qui tombait à 0,17 em. Les mots se touchaient presque. Ce réglage la ramène à 0,22 em, au-dessus de l'espace naturelle de la police (0,20 em). Au-delà, la pastille du mot frappé finit par déborder de sa colonne : mesuré, cela commence à 0,06 em. */ --mots-titre: 0.05em; --chasse-texte: 0; --chasse-capitale: 0.1em; /* les petites capitales ont besoin d'air */ --mesure: 38ch; /* longueur de ligne confortable */ --mesure-large: 62ch; /* --- Espacements ------------------------------------------------------ Échelle en multiples de 4 px. Une marge en pourcentage se calculerait sur la largeur du conteneur et jamais sur sa hauteur : on n'en utilise pas dans le rythme vertical. */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; /* Respiration verticale des sections. Deux sections de même fond qui se suivent additionnent leurs marges et creusent un trou : main.css neutralise ce cas, ces valeurs supposent l'alternance respectée. */ --section-y: clamp(3rem, 7vw, 5.5rem); --section-y-large: clamp(4rem, 10vw, 8rem); /* De combien la carte d'appel final descend sur le pied. La valeur est partagée : le pied ajoute ce débord à son retrait haut, faute de quoi la carte recouvrirait la première ligne du pied. */ --debord-carte: 4rem; --contenu-max: 72rem; --contenu-etroit: 46rem; --gouttiere: clamp(1.25rem, 4vw, 2.5rem); /* --- Formes ----------------------------------------------------------- Le vocabulaire est franc : rayon nul ou complètement arrondi. Les rayons intermédiaires font hésitant sur une direction aussi marquée. */ --r-sm: 0.375rem; --r-md: 0.75rem; --r-lg: 1.25rem; --r-plein: 999px; /* Ombre portée pleine et décalée, jamais floue : elle appartient au registre de l'affiche sérigraphiée, pas à celui du matériau. */ --ombre-relief: 4px 4px 0 var(--c-encre); --ombre-relief-bas: 2px 2px 0 var(--c-encre); --ombre-carte: 0 0.5rem 1.5rem rgba(22, 22, 26, .09); --ombre-flottante: 0 1rem 2.5rem rgba(22, 22, 26, .14); --trait: 2px; --trait-epais: 3px; /* --- Cibles tactiles -------------------------------------------------- 44 px minimum. Pour un lien en ligne, main.css étend la zone sensible par un pseudo-élément absolu plutôt que d'épaissir le lien lui-même. */ --cible: 44px; --cible-ecart: 8px; /* --- Mouvement -------------------------------------------------------- Sortie plus rapide que l'entrée : une interface qui s'efface lentement donne l'impression de traîner. Tout est neutralisé plus bas sous prefers-reduced-motion. */ --duree-instant: 120ms; --duree-courte: 180ms; --duree-moyenne: 280ms; --duree-sortie: 160ms; /* Survols : plus long que le reste. Une réaction de 150 ms se perçoit comme un saut, pas comme un mouvement. */ --duree-survol: 340ms; /* Apparitions au défilement : plus bref que les survols. Elles se produisent en série pendant qu'on parcourt la page, et une entrée qui traîne donne l'impression d'attendre le contenu. */ --duree-apparition: 300ms; /* Tirages du pêle-mêle : rotation, soulèvement, ombre et bordure bougent ensemble. Au rythme d'un survol ordinaire, l'ensemble paraît sec. */ --duree-tirage: 460ms; --courbe-entree: cubic-bezier(.16, .84, .44, 1); --courbe-sortie: cubic-bezier(.4, 0, .78, .32); /* Départ et arrivée également amortis. La courbe d'entrée démarre trop vite pour un survol : elle convient à une apparition, où l'on veut que l'élément soit là tout de suite, pas à un déplacement que l'œil suit. */ --courbe-douce: cubic-bezier(.4, 0, .2, 1); /* --- Superposition ---------------------------------------------------- Échelle fermée : aucune valeur de z-index hors de cette liste. */ --z-fond: 0; --z-contenu: 10; --z-sticky: 20; --z-entete: 40; --z-voile: 80; --z-modale: 100; --z-notice: 200; --z-edition: 1000; /* barre d'administration, au-dessus de tout */ } /* --- Ruptures ------------------------------------------------------------ Rappel, les media queries n'acceptent pas les variables : 40rem (640 px) — téléphone large 48rem (768 px) — tablette portrait 64rem (1024 px) — tablette paysage et petit portable 80rem (1280 px) — bureau -------------------------------------------------------------------- */ /* --- Mouvement réduit ---------------------------------------------------- Sur toutes les animations, sans exception. La règle vit ici, dans les jetons, pour qu'aucune feuille suivante n'ait à y penser. */ @media (prefers-reduced-motion: reduce) { :root { --duree-instant: 0.01ms; --duree-courte: 0.01ms; --duree-moyenne: 0.01ms; --duree-sortie: 0.01ms; --duree-survol: 0.01ms; --duree-apparition: 0.01ms; --duree-tirage: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }