/* ────────────────────────────────────────────────────────────────────────── Jetons — Chichi Churros Préséance Barthez : le projet a une identité visuelle existante (l'enseigne du stand), on garde SES couleurs et on applique NOTRE structure — grille, hiérarchie, densité, cibles, mouvement. Palette refaite le 2026-09-15 à partir de deux nuanciers choisis par Adnan, combinés plutôt que pris l'un ou l'autre : BLACK CHERRY #2A0C1B → --ink CAROUSEL PINK #FFE0EB → --wash PERFECT ROSE #BE2C55 → --accent ROMANTIC ORANGE #FAAA48 → --orange (lettrage sur fond sombre) PEACH GLOW #FFDDAC → base de --encre-nuit CHOCOLATE MELANGE #2F0F03 → base de --nuit Le rose remplace la famille magenta : plus juste, et surtout il **passe 4,5:1 dans les deux sens**, ce que le magenta fluo ne faisait pas. Celui-ci obligeait à un second jeton plus clair pour le grand display ; ce n'est plus nécessaire, et --accent-xl n'existe que pour ne pas casser les feuilles qui l'appellent encore. L'orange remplace le jaune sur fond sombre. Il s'accorde au film du hero, une friture dorée dans une huile presque noire — ce que le jaune citron faisait jurer. Contrastes calculés, pas estimés : --ink sur --paper ........ 16,82:1 ✅ --accent sur --paper ......... 5,33:1 ✅ (et --paper sur --accent : 5,48) --accent sur --wash .......... 4,65:1 ✅ --mute sur --paper ......... 6,60:1 ✅ --rule sur --paper ......... 1,93:1 ❌ jamais du texte, filets seulement --orange sur --nuit .......... 9,96:1 ✅ --encre-nuit sur --nuit ..... 16,97:1 ✅ ────────────────────────────────────────────────────────────────────────── */ :root { /* Fonds et encre — jamais #FFFFFF ni #000000 */ /* Crème chaude, pas gris rosé. Le premier jeu de fonds tenait tous ses contrastes et paraissait quand même terne : mesuré, --paper était à 2 % de saturation et --paper-2 à 4,5 %. Techniquement rose, optiquement gris. Poussés à 7,5 % et 12,7 % en tirant vers la pêche, ils relient enfin le rose du ticket au chocolat des sections sombres et à l'orange du lettrage : une seule famille chaude, zéro gris. */ --paper: #FFF6EC; /* crème pêche, 7,5 % de saturation */ --paper-2: #FBEADB; /* pêche plus dense, 12,7 % */ --ink: #2A0C1B; /* BLACK CHERRY */ --nuit: #1C0A06; /* CHOCOLATE MELANGE, approfondi */ /* Accent unique — PERFECT ROSE */ --accent: #BE2C55; --accent-xl: #BE2C55; /* même valeur : le rose n'a pas besoin d'être éclairci pour passer sur du grand display */ --accent-on: #FFF9FA; /* texte sur aplat d'accent — 5,48:1 */ --accent-survol: #A0244A; /* rose assombri — 7,09:1 sous --accent-on */ --wash: #FFE0EB; /* CAROUSEL PINK */ --mute: #6F505B; --rule: #C7AEB6; /* ── Surfaces TOUJOURS sombres : hero, menu, pied, bascule ────────────── Ces jetons ne basculent JAMAIS avec le thème. Le film, le panneau du menu et le pied restent sombres dans les deux modes ; y poser --paper ou --ink, qui s'inversent, rendrait leur texte sombre sur sombre. (Régression constatée puis corrigée le 13/09.) -------------------------------------------------------------------- */ --orange: #FAAA48; /* ROMANTIC ORANGE — lettrage sur fond sombre */ --encre-nuit: #FBEFE6; /* dérivé de PEACH GLOW — 16,97:1 sur --nuit */ --paper-mute: rgba(251,239,230,.74); --rule-nuit: rgba(251,239,230,.22); /* États sémantiques — jamais décoratifs */ --ok: #0B7A46; --alerte:#9C2B22; /* Espace, base 8. Proximité 1:2 tenue par la paire intra/inter. */ --u: 8px; --gap-intra: 12px; --gap-inter: 32px; --max: 1120px; /* Sur un écran très large, 1120 px font une colonne perdue au milieu du vide. La mesure de lecture reste bornée ailleurs (`.mesure`, les `ch` des paragraphes) : élargir le contenant ne rallonge aucune ligne de texte, il donne seulement de l'air aux grilles et aux images. */ --marge-panneau: 12px; /* respiration autour des panneaux */ /* Cibles tactiles — planchers Fitts */ --cible: 44px; --cible-prim: 52px; --bord: 8px; /* rayon des éléments cliquables */ --bord-carte: 14px; /* Mouvement — rien au-delà de 400 ms sur une réponse à une action */ --t-micro: 120ms; --t-etat: 200ms; --t-entree:320ms; --e-in: cubic-bezier(.2,0,0,1); --e-out: cubic-bezier(.4,0,1,1); /* Le rideau : départ franc, arrivée qui s'étire longtemps. C'est la courbe d'un objet lourd qu'on lance et qui se pose — elle donne du poids à une ligne de titre, là où une courbe symétrique la fait glisser comme un panneau coulissant. */ --e-rideau: cubic-bezier(.16,1,.3,1); /* ── Trois caractères, trois emplois ─────────────────────────────────── Anton est parti. Adnan : « je le trouve tellement pas beau, ni la police, ni la couleur ». Il avait raison, et la mesure le dit aussi : Anton a une chasse de 0,499 em sur le H. C'est un grotesque condensé — le caractère des titres de presse et des affiches de sport. Sur un stand de confiserie foraine, en capitales, par-dessus une friture, ça criait sans rien dire. Alfa Slab One prend sa place. C'est une égyptienne ultra-grasse, à gros empattements rectangulaires : le wood type de baraque foraine au sens propre. Chasse du H à 0,840 em, soit 68 % plus large — la silhouette du hero change du tout au tout, ce qui était le reproche. Les candidates écartées, sur mesure des TTF et pas sur impression : Rye ......... Ÿ absent, É rogné (ymax = ascendante exactement), et sCapHeight déclarée à 0,177 em au lieu de ~0,75. Caprasimo ... l'accent dépasse la boîte ascendante : É et À se coupent dans tout overflow:hidden — ce que le masque de ligne du hero utilise justement. Smokum ...... chasse du H à 0,459 em, encore plus étroite qu'Anton : elle ne répond pas au reproche. Oi .......... la plus belle du lot, TDC Award 2018, et la plus sûre pour les accents (0,193 em de marge). Mais 1,112 em de chasse : « Chichi churros » déborde même à 4,6rem, mesuré. Bagel Fat One grasse arrondie, très juste pour « sucre ». Elle parle boutique de bonbons moderne, pas fête foraine, et elle jurerait avec l'auvent festonné. Alfa Slab One laisse 0,087 em sous l'ascendante pour les accents : le É de « les meilleurs » passe sans être rogné par le masque. Hanken Grotesk reste en corps : grotesque neutre + égyptienne grasse est un duo qui tient. Fraunces reste, mais cantonnée à ce qu'elle a toujours porté — les mots qu'on dirait à l'oral, jamais un titre : deux serifs gras en concurrence se battraient sur le même terrain. */ --f-display: "Alfa Slab One", "Rockwell", Georgia, serif; --f-corps: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --f-fantaisie: "Fraunces", Georgia, "Times New Roman", serif; } /* Pas de mode sombre. Il existait, il fonctionnait, et Adnan l'a tranché : clair d'office. Un thème de moins, c'est deux fois moins de contrastes à tenir et un réglage de moins à comprendre pour quelqu'un qui cherche une adresse. Les jetons des surfaces toujours sombres (--nuit, --orange, --encre-nuit) restent : le hero, le menu et le pied sont sombres par dessin, pas par thème. */ @media (min-width: 1700px) { :root { --max: 1340px; } } @media (min-width: 2400px) { :root { --max: 1520px; } } @media (prefers-reduced-motion: reduce) { :root { --t-micro:100ms; --t-etat:100ms; --t-entree:100ms; } }