/* ========================================================================= SWISS PRO MOVING — jetons de design Version 2, 19.09.2026 — révisée pour le logo FOUR FLAPS. Source de vérité : fondations.md et langage-graphique.md (même dossier). Les valeurs de couleur sont produites par contrastes.py, qui sort en code 1 si une paire déclarée tombe sous son seuil OU si une combinaison interdite cessait de mériter son interdiction. Dernière sortie : « 0 échec(s) sur 65 paires contrôlées. » (_contrastes-sortie.txt) La géométrie vient de geometrie-rabats.py, qui MESURE le logo sur sa planche : « 0 échec(s) sur 3 contrôles. » (_geometrie-sortie.txt) Ce que la version 2 change : - --rabat, le second rouge des rabats sur fond rouge — #8F1A12, lu dans logo-sur-rouge.svg (la croix reste TOUJOURS blanche : une croix rouge sur blanc est l'emblème protégé de la Croix-Rouge) ; - la gamme kraft, couleur d'OBJET et d'impression, jamais de surface ; - --police-titre devient une CONDENSÉE NOIRE, comme le mot-symbole ; - les pentes du logo (1:2 et 4:3) deviennent des jetons. Trois couches, dans cet ordre, et jamais autrement : 1. PRIMITIVES — des valeurs brutes. Aucun composant ne les lit. 2. SÉMANTIQUES — un rôle. C’est la seule couche qui change entre les modes clair et sombre. 3. COMPOSANTS — un composant. Ne lit que la couche 2. Aucune requête externe. Polices système uniquement à ce stade. ========================================================================= */ /* ===================================================== 1. PRIMITIVES ===== */ :root { /* --- Rouge. Ancré sur #DA291C au palier 600 : le rouge du drapeau suisse (Pantone 485) en valeur écran. La transcription fédérale #FF0000 est la borne haute, pas une valeur d’usage : elle ne donne que 4,00:1 sous du blanc et ne peut porter aucun bouton conforme. Gamme construite dans OKLab, teinte constante 29,55°. --------------------------------------- */ --rouge-50: #FFF2EF; --rouge-100: #FFE2DD; --rouge-200: #FFC8BF; --rouge-300: #FFA192; --rouge-400: #FD6755; /* 2,90:1 sur blanc — jamais sous du texte blanc */ --rouge-500: #EC4534; /* 3,84:1 sur blanc — jamais sous du texte blanc */ --rouge-600: #DA291C; /* 4,87:1 — LA MARQUE */ --rouge-700: #BC1107; /* 6,52:1 */ --rouge-800: #940401; /* 9,22:1 */ --rouge-900: #690401; /* 12,98:1 */ --rouge-950: #51110B; /* 14,64:1 sur blanc — 3,01:1 contre --rouge-600. Le plus foncé de la gamme calculée. Il N'EST PLUS la couleur des rabats sur fond rouge : ce rôle est passé à --rabat, dont la valeur est LUE dans les fichiers du logo (voir §, jetons de rôle). */ /* --- Kraft : couleur d'OBJET et d'IMPRESSION. Teinte 68°, le même axe chaud que les neutres (75°) mais avec une chroma qu'on peut nommer. AUCUNE surface d'interface n'est kraft (fondations.md §1.2). --------- */ --kraft-100: #F5E9DC; --kraft-300: #E5CAAE; /* le carton de déménagement — valeur de référence */ --kraft-500: #B99875; --kraft-700: #785D41; /* 6,10:1 sur blanc — trait imprimé sur kraft */ /* --- Neutres, légèrement chauds : teinte 75°, chroma plafonnée à 0,011. Un gris parfaitement neutre contre ce rouge donne le registre clinique ; la pointe de chaleur renvoie au carton et à la couverture. Le fond de page reste du blanc pur : la chaleur commence au palier 50. ------------ */ --neutre-0: #FFFFFF; --neutre-50: #F9F7F5; --neutre-100: #F1EFEC; --neutre-200: #E2E0DD; --neutre-300: #CDCBC7; --neutre-400: #A8A5A0; --neutre-500: #84817D; --neutre-600: #66635F; --neutre-700: #4B4844; --neutre-800: #2E2A26; --neutre-900: #1C1814; --neutre-950: #120E0A; --neutre-1000: #000000; /* --- Fonctionnelles. L’erreur est un grenat : teinte 5° contre 29,55° pour la marque. La teinte est le plus FAIBLE des trois signaux qui les séparent ; la forme et l’icône font le reste (fondations.md §1.4). ----- */ --succes-500: #1D6E42; --succes-100: #E4F8EA; --succes-300: #77D199; --attention-500: #8B5D00; --attention-100: #FFEFDB; --attention-300: #F7B755; --erreur-500: #882546; --erreur-100: #FFEAEE; --erreur-300: #FF85A4; /* --- Voiles. Ce ne sont pas des ombres : ce système n’en a aucune. ------ */ --voile: rgba(0, 0, 0, .55); /* sous une fenêtre modale */ --voile-photo: rgba(0, 0, 0, .45); /* liseré sous le trajet sur photo */ /* --- Typographie ------------------------------------------------------- */ --police-texte: "Helvetica Neue", Helvetica, "Arial Nova", Arial, "Liberation Sans", system-ui, sans-serif; /* Le mot-symbole du logo est une CONDENSÉE NOIRE : fût/capitale 0,234 et O/capitale 0,700, mesurés sur la planche. Helvetica Neue Condensed Black est la plus proche des polices du Mac (écart 0,041) ; DIN Condensed en est loin (0,310) et reste une police de CHIFFRES. fondations.md §2.1. */ --police-titre: "HelveticaNeue-CondensedBlack", "Helvetica Neue Condensed Black", "Avenir Next Condensed", "Arial Narrow", var(--police-texte); --police-chiffre: "DIN Alternate", "DIN Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; --t-affiche: clamp(3rem, 1.4rem + 7.2vw, 7rem); --t-h1: clamp(2.25rem, 1.5rem + 3.6vw, 4.25rem); --t-h2: clamp(1.625rem, 1.25rem + 1.8vw, 2.5rem); --t-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); --t-texte-large: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --t-texte: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --t-petit: .875rem; --t-micro: .8125rem; --t-chiffre: clamp(2.25rem, 1.7rem + 2.6vw, 4rem); --t-chiffre-petit: 1.25rem; --graisse-normale: 400; --graisse-medium: 500; --graisse-gras: 700; --graisse-noire: 900; /* TITRAGE CONDENSÉ SEULEMENT. Jamais dans le texte. */ --interligne-affiche: .96; /* v2 : une condensée gagne à respirer (était .94) */ --interligne-h1: 1.02; /* v2 : idem (était 1) */ --interligne-h2: 1.1; --interligne-h3: 1.25; --interligne-texte: 1.55; --interligne-petit: 1.45; /* v2 : une condensée noire est DÉJÀ serrée. Les valeurs négatives avaient été calculées pour une chasse normale ; elles collent les lettres ici. Borne haute : le mot-symbole du logo mesure +0,034 em. */ --approche-affiche: 0; /* était -.03em */ --approche-h1: 0; /* était -.025em */ --approche-h2: 0; /* était -.015em */ --approche-texte: 0; --approche-capitales: .08em; --mesure: 68ch; --mesure-etroite: 46ch; /* --- Espace. Unité de base : 4 px. ------------------------------------- */ --e4: 4px; --e8: 8px; --e12: 12px; --e16: 16px; --e24: 24px; --e32: 32px; --e40: 40px; --e48: 48px; --e64: 64px; --e80: 80px; --e96: 96px; --e128: 128px; --e160: 160px; /* --- Grille. 12 colonnes : divisible par 2, 3, 4 et 6. ----------------- */ --colonnes: 12; --largeur-max: 1240px; --marge-page: var(--e16); --gouttiere: var(--e16); /* --- Formes. Le style suisse est anguleux : le rayon est nul partout. --rayon-rond n’est pas « un coin très arrondi » : c’est une AUTRE forme, réservée aux disques et anneaux du trajet. Aucun rectangle ne l’emprunte. */ --rayon: 0; --rayon-rond: 999px; /* --- La grammaire du logo, mesurée par geometrie-rabats.py. Le logo n'emploie que DEUX pentes, toutes deux de rapport entier : 1:2 pour le plan du dessus, 4:3 pour les rabats (le double). Aucune autre diagonale n'existe dans ce système — ni 15°, ni 30°, ni 45°. */ --pente-ouverture: 26.565deg; /* 1 : 2 — mesuré 26,57° */ --pente-pli: 53.130deg; /* 4 : 3 — mesuré 53,05° */ /* Le module du logo : sa hauteur divisée par 64. Le rayon des coins vaut m, la fente de pli vaut m, rien n'est plus fin que m. --logo-hauteur est posée par le composant qui affiche le logo. */ --logo-hauteur: 128px; /* taille minimale écran */ --m: calc(var(--logo-hauteur) / 64); --rayon-marque: var(--m); /* formes de marque > 256 px SEULEMENT */ --degagement-logo: calc(var(--m) * 4); /* Coupe en rabat d'une image : un seul coin, pente 1:2 (la course vaut le double de la profondeur, donc la pente tient à toute largeur). */ --coupe-rabat: min(calc(100% / 8), 96px); /* Le pli : le bord supérieur d'un bloc descend UNE fois. Un par page. */ --pli-course: min(calc(100% / 6), 240px); --pli-montee: calc(var(--pli-course) / 2); /* Semis de rabats : 4 rabats par carreau, un par orientation du logo. */ --motif-carreau: 192px; --frise-periode: 96px; --frise-hauteur: 8px; --filet-epaisseur: 1px; --filet-erreur-epaisseur: 3px; --trait-trajet: 2px; --focus-epaisseur: 2px; --focus-decalage: 2px; /* --- Aucune ombre. La profondeur passe par la gamme de surfaces et par les filets. Le jeton existe pour qu’on ne puisse pas en inventer une. -- */ --ombre: none; /* --- Mouvement --------------------------------------------------------- */ --duree-instant: 120ms; --duree-courte: 200ms; --duree-moyenne: 320ms; --duree-longue: 600ms; --entree: cubic-bezier(.2, 0, 0, 1); --sortie: cubic-bezier(.4, 0, 1, 1); --trace: cubic-bezier(.16, 1, .3, 1); /* --- Plans ------------------------------------------------------------- */ --z-decor: 0; --z-contenu: 1; --z-trajet: 3; --z-bandeau: 4; --z-voile: 8; --z-fenetre: 9; } @media (min-width: 768px) { :root { --marge-page: var(--e40); --gouttiere: var(--e24); } } @media (min-width: 1080px) { :root { --marge-page: min(6vw, 96px); --gouttiere: var(--e32); } } /* ============================================ 2. SÉMANTIQUES — CLAIR ===== */ :root { color-scheme: light; --fond: var(--neutre-0); --surface: var(--neutre-50); --surface-enfoncee: var(--neutre-100); --texte: var(--neutre-900); /* 17,65:1 sur --fond */ --texte-secondaire: var(--neutre-700); /* 9,09:1 */ --texte-faible: var(--neutre-600); /* 5,97:1 */ --filet: var(--neutre-200); --filet-fort: var(--neutre-500); /* 3,88:1 — bord de champ */ --marque: var(--rouge-600); /* 4,87:1 détouré du fond */ --marque-survol: var(--rouge-700); --marque-enfoncee: var(--rouge-800); --rabat: #8F1A12; /* 1,86:1 contre --marque — valeur LUE dans les fichiers du logo (logo-sur-rouge.svg), choisie sur image le 19.09.2026. Elle n'appartient PAS a la gamme calculee : c'est une encre, pas un palier. Sous 3:1, et c'est assume : la lisibilite du signe sur rouge est portee par la croix BLANCHE (9,03:1 sur les rabats) et par le nom blanc (4,87:1 sur l'aplat), pas par les rabats. FICHE-LOGO.md 4. */ --marque-texte: var(--rouge-700); /* 6,52:1 — liens */ --sur-marque: var(--neutre-0); /* 4,87:1 sur --marque */ --marque-voile: var(--rouge-50); --texte-sur-voile: var(--rouge-700); /* 5,96:1 sur --marque-voile */ /* Le focus n’a pas de teinte : ni rouge (c’est la marque), ni bleu (ce système n’a pas de bleu). Noir sur clair, blanc sur sombre — les deux seules valeurs qui tiennent aussi sur le bouton rouge (4,32:1). */ --focus: var(--neutre-1000); --focus-contre: var(--neutre-0); --succes: var(--succes-500); --succes-surface: var(--succes-100); --attention: var(--attention-500); --attention-surface: var(--attention-100); --erreur: var(--erreur-500); --erreur-surface: var(--erreur-100); } /* ============================================ 2b. SÉMANTIQUES — SOMBRE === Le bloc est écrit deux fois : une fois pour le choix explicite de la personne, une fois pour la préférence du système quand elle n’a rien choisi. Le CSS nu ne permet pas de le factoriser, et un préprocesseur ferait entrer une chaîne de construction dans un chantier qui n’en a pas. Trois écarts par rapport au mode clair, tous mesurés : 1. --marque ne bouge PAS (#DA291C se détoure du fond sombre à 3,95:1), mais --marque-texte s’éclaircit : #BC1107 ne ferait que 2,95:1. 2. Le survol ASSOMBRIT le rouge, ici aussi. L’éclaircir est impossible : blanc sur --rouge-500 ne donne que 3,84:1. La contrepartie est le filet de 1 px en --marque que porte le bouton (voir couche 3). 3. Le voile de marque devient sombre, donc le texte dessus devient clair. ------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --fond: var(--neutre-950); --surface: var(--neutre-900); --surface-enfoncee: var(--neutre-800); --texte: var(--neutre-50); /* 17,98:1 sur --fond */ --texte-secondaire: var(--neutre-300); /* 11,86:1 */ --texte-faible: var(--neutre-400); /* 7,83:1 */ --filet: var(--neutre-800); --filet-fort: var(--neutre-600); /* 3,22:1 */ --marque: var(--rouge-600); /* 3,95:1 détouré du fond */ --marque-survol: var(--rouge-700); --marque-enfoncee: var(--rouge-800); --rabat: #8F1A12; /* 1,86:1 contre --marque — valeur LUE dans les fichiers du logo (logo-sur-rouge.svg), choisie sur image le 19.09.2026. Elle n'appartient PAS a la gamme calculee : c'est une encre, pas un palier. Sous 3:1, et c'est assume : la lisibilite du signe sur rouge est portee par la croix BLANCHE (9,03:1 sur les rabats) et par le nom blanc (4,87:1 sur l'aplat), pas par les rabats. FICHE-LOGO.md 4. */ --marque-texte: var(--rouge-400); /* 6,63:1 — liens */ --sur-marque: var(--neutre-0); /* 4,87:1 sur --marque */ --marque-voile: var(--rouge-900); --texte-sur-voile: var(--neutre-50); /* 12,14:1 sur --marque-voile */ --focus: var(--neutre-0); --focus-contre: var(--neutre-1000); --succes: var(--succes-300); --succes-surface: var(--neutre-900); --attention: var(--attention-300); --attention-surface: var(--neutre-900); --erreur: var(--erreur-300); --erreur-surface: var(--neutre-900); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --fond: var(--neutre-950); --surface: var(--neutre-900); --surface-enfoncee: var(--neutre-800); --texte: var(--neutre-50); --texte-secondaire: var(--neutre-300); --texte-faible: var(--neutre-400); --filet: var(--neutre-800); --filet-fort: var(--neutre-600); --marque: var(--rouge-600); --marque-survol: var(--rouge-700); --marque-enfoncee: var(--rouge-800); --rabat: #8F1A12; --marque-texte: var(--rouge-400); --sur-marque: var(--neutre-0); --marque-voile: var(--rouge-900); --texte-sur-voile: var(--neutre-50); --focus: var(--neutre-0); --focus-contre: var(--neutre-1000); --succes: var(--succes-300); --succes-surface: var(--neutre-900); --attention: var(--attention-300); --attention-surface: var(--neutre-900); --erreur: var(--erreur-300); --erreur-surface: var(--neutre-900); } } /* ===================================================== 3. COMPOSANTS ===== Ne lisent que la couche 2. Aucune valeur brute ici. ---------------------- */ :root { /* Bouton principal — le seul aplat rouge autorisé par fenêtre. */ --btn-principal-fond: var(--marque); --btn-principal-fond-survol: var(--marque-survol); --btn-principal-fond-appui: var(--marque-enfoncee); --btn-principal-texte: var(--sur-marque); --btn-principal-filet: transparent; --btn-principal-rayon: var(--rayon); --btn-principal-marge-i: var(--e16) var(--e24); --btn-principal-graisse: var(--graisse-medium); /* Bouton secondaire — cerné, jamais plein. */ --btn-second-fond: transparent; --btn-second-fond-survol: var(--surface); --btn-second-texte: var(--texte); --btn-second-filet: var(--filet-fort); /* Champ de saisie */ --champ-fond: var(--fond); --champ-texte: var(--texte); --champ-indication: var(--texte-faible); --champ-filet: var(--filet-fort); --champ-filet-actif: var(--texte); --champ-rayon: var(--rayon); --champ-marge-i: var(--e12) var(--e16); /* Message d’erreur. Sa FORME le sépare de la marque : filet gauche de 3 px, aucun aplat plein, jamais de blanc dessus, jamais un bouton. */ --erreur-bloc-fond: var(--erreur-surface); --erreur-bloc-texte: var(--erreur); --erreur-bloc-filet-gauche: var(--filet-erreur-epaisseur) solid var(--erreur); --erreur-bloc-marge-i: var(--e12) var(--e16); /* Surface / bloc. Cerné ou teinté, jamais posé sur une ombre. */ --bloc-fond: var(--surface); --bloc-filet: var(--filet); --bloc-marge-i: var(--e24); --bloc-ombre: var(--ombre); /* Ligne d’itinéraire « de A à B » */ --trajet-trait: var(--trait-trajet); --trajet-parcouru: var(--marque); --trajet-restant: var(--filet-fort); --trajet-depart-taille: 10px; --trajet-arret-taille: 7px; --trajet-arrivee-taille: 20px; --trajet-arrivee-trait: 1.5px; --trajet-duree: var(--duree-moyenne); --trajet-courbe: var(--trace); /* Pictogrammes : trait = taille ÷ 16. La taille de référence est 24. */ --icone-taille: 24px; --icone-trait: 1.5px; --icone-couleur: currentColor; } /* ================================================= 4. SOCLE MINIMAL ===== Ce que les jetons ne peuvent pas porter seuls. ------------------------- */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police-texte); font-size: var(--t-texte); font-weight: var(--graisse-normale); line-height: var(--interligne-texte); font-synthesis: none; /* aucun faux gras, aucune fausse italique */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Anneau de focus sans teinte : 2 px de --focus, doublés de 2 px de --focus-contre en décalage. Tient sur le fond, sur une surface et sur le bouton rouge (4,32:1 en mode clair, 4,87:1 en mode sombre). */ :focus-visible { outline: var(--focus-epaisseur) solid var(--focus); outline-offset: var(--focus-decalage); box-shadow: 0 0 0 calc(var(--focus-epaisseur) + var(--focus-decalage)) var(--focus-contre); } /* Titrage : la condensée noire du mot-symbole. Elle ne descend JAMAIS sous --t-h2 : plus petite, elle ferme ses contre-poinçons et devient une tache. h3 et tout le reste restent dans la famille de texte. fondations.md §2.3. */ .affiche, h1, h2 { font-family: var(--police-titre); font-weight: var(--graisse-noire); text-wrap: balance; margin: 0 0 var(--e24); } .affiche { font-size: var(--t-affiche); line-height: var(--interligne-affiche); letter-spacing: var(--approche-affiche); } h1 { font-size: var(--t-h1); line-height: var(--interligne-h1); letter-spacing: var(--approche-h1); } h2 { font-size: var(--t-h2); line-height: var(--interligne-h2); letter-spacing: var(--approche-h2); } h3 { font-family: var(--police-texte); font-weight: var(--graisse-gras); font-size: var(--t-h3); line-height: var(--interligne-h3); letter-spacing: -.005em; margin: 0 0 var(--e16); } /* --- La grammaire du rabat, en trois règles. langage-graphique.md §4 et §5. Coupe en rabat : UN SEUL coin par image, le MÊME pour toute la page, et au plus deux images coupées par page. Quatre coins donneraient un octogone, c'est-à-dire plus rien. */ .coupe-rabat { clip-path: polygon(0 var(--coupe-rabat), calc(var(--coupe-rabat) * 2) 0, 100% 0, 100% 100%, 0 100%); border-radius: 0; /* jamais de rayon avec une coupe */ } /* La puce est un rabat en miniature. Elle n'est PAS un triangle : le triangle est réservé à l'erreur, et il ne tient que s'il est seul (fondations.md §1.4). */ .puce { list-style: none; padding-left: var(--e24); position: relative; } .puce::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 8px; background: currentColor; clip-path: polygon(0 4px, 8px 0, 100% 0, 100% 100%, 0 100%); } /* Le pli : le bord supérieur d'un bloc descend UNE fois, vers la droite, à la pente d'ouverture. UN SEUL pli par page, à l'entrée du bloc rouge. */ .pli { clip-path: polygon(0 0, calc(100% - var(--pli-course)) 0, 100% var(--pli-montee), 100% 100%, 0 100%); } /* Chiffres : DIN et chasse fixe partout où un nombre est une mesure. */ .chiffre, .prix, .volume, td { font-family: var(--police-chiffre); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } p, li { max-width: var(--mesure); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* On supprime le mouvement, pas l’information : le changement de COULEUR d’état est réintroduit, et la ligne d’itinéraire s’affiche déjà tracée, à son état final. */ a, button, input, select, textarea, summary, [role="button"] { transition-property: color, background-color, border-color, outline-color; transition-duration: var(--duree-instant) !important; } }