/** * 00 · LES JETONS — les seules valeurs brutes du thème. * * ┌───────────────────────────────────────────────────────────────────────┐ * │ CE FICHIER NE CONTIENT AUCUNE RÈGLE VISIBLE. │ * │ │ * │ Que des variables. Si une couleur, une durée ou une dimension │ * │ apparaît ailleurs en dur, c'est une valeur qui échappe au système : │ * │ elle ne suivra pas le jour où on éclaircit les panneaux d'un cran. │ * └───────────────────────────────────────────────────────────────────────┘ * * ⚠ **Tout ici est MESURÉ sur le thème karama, pas choisi.** L'identité * visuelle est celle validée par le client ; la reconstruction ne la * réinvente pas. Chaque valeur porte son origine. */ :root { /* ═══ COULEURS ═══════════════════════════════════════════════════════ Les cinq de la marque. Relevées dans `build/tailwind.config.js`, lui-même recopié du bloc `tailwind.config` des 13 pages de la maquette. */ --rouge: #FF2F33; /* l'accent principal, shonen */ --or: #F2C844; /* le second accent, collector */ --noir: #0A0A0C; /* le fond du site */ --acier: #2A2A2E; /* les filets et les bordures */ --gris: #9CA3AF; /* le texte secondaire */ /* Les fonds de panneau. **Deux valeurs, pas neuf.** Le thème karama en écrivait trois — #15151A, #13131A et #0A0A0C — dont les deux premières sont le même gris à deux unités près : invisible à l'œil, ingérable dès qu'on veut les éclaircir ensemble. */ --panneau: #15151A; --panneau-creux: #0F0F14; --blanc: #FFFFFF; --texte: #E5E7EB; /* Les voiles, pour poser du texte sur une image sans la cacher. */ --voile-fort: rgba(10, 10, 12, .86); --voile-moyen: rgba(10, 10, 12, .55); --voile-leger: rgba(10, 10, 12, .25); /* Les teintes d'accent, dérivées — jamais réécrites à la main ailleurs. */ --rouge-voile: rgba(255, 47, 51, .14); --rouge-filet: rgba(255, 47, 51, .40); /* * ⚠ **LE ROUGE DES SURFACES N'EST PAS CELUI DES ACCENTS.** * * `--rouge` (#FF2F33) est fait pour un trait, un chiffre, un filet : sur du * noir il donne 5,37 de contraste, très bien. Mais rempli et surmonté de * texte blanc, il tombe à **3,68** — sous le minimum WCAG AA de 4,5. * * Un cran plus profond, le même rouge porte le blanc à **5,6**. À l'œil * c'est le rouge de la marque ; à la mesure, c'est un bouton lisible. */ --rouge-surface: #D01A1E; --or-voile: rgba(242, 200, 68, .12); --or-filet: rgba(242, 200, 68, .40); --blanc-filet: rgba(255, 255, 255, .12); /* Les couleurs de sens. Séparées de l'accent : un message d'erreur qui partage la variable du bouton principal change de sens le jour où la marque change d'accent. */ --succes: #57C97E; --alerte: #FFB84D; --erreur: var(--rouge); /* ═══ TYPOGRAPHIE ════════════════════════════════════════════════════ Deux familles, auto-hébergées (voir `polices.css`). Un CDN de polices reçoit l'adresse IP de chaque visiteur : on ne s'en sert pas. */ --titre: 'Bebas Neue', 'Arial Narrow', sans-serif; --corps: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* L'échelle. Fluide entre 390 px et 1440 px : une seule valeur par palier, pas de rupture à surveiller aux points d'arrêt. */ --t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem; --t-lg: 1.125rem; --t-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); --t-2xl: clamp(1.5rem, 1.3rem + .9vw, 2rem); --t-3xl: clamp(2rem, 1.55rem + 1.9vw, 2.75rem); /* ⚠ **LE RAPPORT DOIT TENIR SUR MOBILE AUSSI.** Première échelle : `--t-4xl` démarrait à 2,25 rem contre 1 rem de corps, soit 2,25×. En dessous de 2,5×, un titre ne se lit plus comme un titre — il se lit comme du texte administratif. Le grand écran allait bien, le petit était plat. Et c'est le petit que presque tout le monde regarde. */ --t-4xl: clamp(2.6rem, 1.8rem + 3.2vw, 4rem); --t-5xl: clamp(3.1rem, 1.9rem + 5vw, 5.5rem); /* Le chiffre pâle derrière une étape : ça remplit et ça structure sans une seule ligne à rédiger. */ --t-enorme: clamp(4rem, 2rem + 9vw, 7rem); --interligne-titre: .95; /* Bebas Neue est très haute : elle serre. */ --interligne-corps: 1.65; --lettrage-titre: .02em; --lettrage-capital: .18em; /* les intitulés en petites capitales */ /* La largeur de lecture confortable. Un paragraphe plus large fatigue. */ --mesure: 68ch; /* ═══ ESPACEMENT ═════════════════════════════════════════════════════ Une progression, pas un catalogue. Huit valeurs suffisent ; une neuvième signifie presque toujours qu'on bricole un cas particulier. */ --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-6: 1.5rem; --e-8: 2rem; --e-12: 3rem; --e-16: 4rem; --e-24: clamp(3rem, 2rem + 4vw, 6rem); /* le souffle entre deux sections */ --largeur-page: 80rem; /* 1280 px, la grille de la maquette */ --largeur-texte: 48rem; /* une page de contenu suivi */ --gouttiere: clamp(1rem, .5rem + 2vw, 2rem); /* ═══ LES SIGNATURES DE LA MARQUE ════════════════════════════════════ Ce qui fait qu'on reconnaît Hidaya en une image. Ces trois valeurs sont l'identité : les changer change la marque, pas le thème. */ /* Le cisaillement des boutons et des étiquettes. −12°, mesuré. Le contenu porte le cisaillement inverse pour rester lisible. */ --cisaille: -12deg; --contre-cisaille: 12deg; /* La découpe d'angle des cartes. 20 px, mesurée. */ --decoupe: 20px; --decoupe-carte: polygon( 0 0, 100% 0, 100% calc(100% - var(--decoupe)), calc(100% - var(--decoupe)) 100%, 0 100% ); /* Les halos. Deux, un par accent. */ --halo-rouge: 0 10px 20px -5px rgba(255, 47, 51, .4); --halo-or: 0 10px 20px -5px rgba(242, 200, 68, .4); --filet: 1px; /* l'épaisseur d'un trait, partout */ /* ═══ MOUVEMENT ══════════════════════════════════════════════════════ Trois durées, deux courbes. Relevées dans karama/main.css — ce sont des valeurs mesurées sur la maquette, pas des préférences. */ --duree-eclair: 100ms; /* un retour immédiat : appui, bascule */ --duree-action: 250ms; /* survol, ouverture d'un tiroir */ --duree-entree: 500ms; /* une apparition au défilement */ --sortie: cubic-bezier(0, 0, .2, 1); --shonen: cubic-bezier(.175, .885, .32, 1.275); /* léger dépassement */ /* ═══ PLANS ══════════════════════════════════════════════════════════ Nommés, parce qu'un `z-index: 9999` écrit au hasard finit toujours par recouvrir quelque chose qu'on n'avait pas prévu. */ --plan-fond: 0; --plan-contenu: 1; --plan-flottant: 10; --plan-entete: 50; --plan-barre: 60; --plan-tiroir: 70; --plan-voile: 80; --hauteur-entete: 5rem; } /* * ⚠ **AUCUNE VARIABLE N'EST REDÉFINIE SOUS UNE MEDIA QUERY.** * * Les valeurs qui doivent respirer avec l'écran le font par `clamp()`, * au-dessus. Une variable qui change de valeur à 768 px crée deux vérités pour * un même nom : on lit la première, on subit la seconde, et le débogage prend * une heure. Si une valeur doit changer par palier, elle prend deux noms. */ /* * Le thème est sombre par construction — pas par préférence système. Il n'y a * donc pas de variante claire : `prefers-color-scheme` n'a rien à décider ici. * C'est un choix, pas un oubli. */