/** * PlayAwale — Variables de design (design tokens) * ----------------------------------------------------------------------------- * Source unique de vérité pour les couleurs, les polices, les espacements, les * arrondis et les ombres du site. * * Toute valeur visuelle réutilisée ailleurs doit être définie ICI, jamais en * dur dans une feuille de composant : changer la teinte d'un bouton ou la * police des titres se fait alors en une seule ligne, pour tout le site. * * @package PlayAwale * @version 2.0 * @author Nicolas Lion — Développeur web — https://nlion.fr * @copyright 2026 Nicolas Lion */ :root { /* ========================================================================== COULEURS DE MARQUE Palette « terre cuite / sable » reprise du plateau d'awalé en bois. ========================================================================== */ /* Brun foncé du bois : texte principal et titres. */ --color-brand-dark: #3c2723; /* Crème des graines : fond des boutons et des panneaux. */ --color-brand-cream: #f0e1d1; /* Ambre chaud : survol des éléments interactifs. */ --color-brand-amber: #ffc966; /* Deux voisines de l'ambre, pour lui donner du relief : une plus claire au sommet du bouton, une plus sombre sur sa tranche. Un aplat d'ambre seul reste plat ; ces deux-là suffisent à en faire un objet qu'on a envie d'enfoncer. */ --color-brand-amber-light: #ffdb99; --color-brand-amber-deep: #d8a44e; /* Nuances de sable composant le dégradé de l'arrière-plan. */ --color-sand-100: #eae4d9; --color-sand-200: #e0dbcc; --color-sand-300: #d6cdbf; --color-sand-400: #b8a995; /* ========================================================================== COULEURS D'USAGE Ce sont ces variables que les composants utilisent : elles décrivent un rôle (« texte », « fond du bouton ») et non une teinte. ========================================================================== */ --color-text: var(--color-brand-dark); /* Texte secondaire : même teinte, volontairement adoucie. */ --color-text-muted: rgba(60, 39, 35, 0.78); /* Fond de page et dégradé qui l'habille. */ --color-page-bg: var(--color-sand-200); --gradient-page: radial-gradient( circle, var(--color-sand-100) 0%, var(--color-sand-300) 60%, var(--color-sand-400) 100% ); /* Surfaces posées sur le fond : boutons, panneaux, cartes. */ --color-surface: var(--color-brand-cream); --color-surface-hover: var(--color-brand-amber); /* Le dessus éclairé d'une surface posée sur le sable : la lumière tombe de haut, et un objet réel s'éclaircit à son sommet. Se superpose à la couleur de fond, quelle qu'elle soit. */ --gradient-surface-raised: linear-gradient( 180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) ); /* Le bouton qui désigne : de l'ambre clair au sommet à l'ambre plein en bas. */ --gradient-amber-raised: linear-gradient( 180deg, var(--color-brand-amber-light), var(--color-brand-amber) ); /* Les panneaux translucides posés sur le décor — le jeton des chiffres, l'encart d'actualités. Assez opaques pour se lire, assez clairs pour laisser deviner la photographie derrière eux. */ --gradient-panel: linear-gradient( 180deg, rgba(255, 255, 255, 0.48), rgba(240, 225, 209, 0.5) ); /* Voile très léger de la carte translucide de l'accueil. */ --color-surface-glass: rgba(255, 255, 255, 0.01); /* Surface SOMBRE posée par-dessus le jeu, pour une information passagère — la ligne d'état du jeu en réseau. Elle se lit sur le plateau comme sur le décor, sans devoir en changer selon ce qu'elle recouvre, et laisse deviner ce qu'il y a dessous : le jeu continue derrière elle. */ --color-surface-dark: rgba(60, 39, 35, 0.88); /* Présence : la pastille qui dit qu'un adversaire est en ligne. Le vert du plateau — #66bb6a, la barre du camp du bas — assombri d'un cran : tel quel, il se détachait mal du sable clair des cartes. Même famille, donc, pour que le vert veuille dire la même chose partout : « ce côté-là est actif ». */ --color-online: #4c9a50; /* Le halo très léger qui la détache d'un fond clair, sans lui dessiner de bordure. Même teinte, presque effacée. */ --color-online-halo: rgba(76, 154, 80, 0.22); /* Ce qui ne se reprend pas : effacer un profil, renoncer pour de bon. Une terre cuite sombre, de la même famille que le reste — un rouge vif au milieu du sable jurerait avec tout, et crierait là où il suffit de se distinguer. */ --color-danger: #9a3412; --color-danger-surface: #f3d9cb; /* Les quatre issues d'une partie, sur l'écran du bilan. Aucune n'est une couleur neuve : elles sont prises dans ce qui existe déjà, pour qu'un vert veuille dire partout la même chose. Gagnée reprend le vert du plateau, perdue la terre cuite de ce qui ne se reprend pas. Nulle et abandonnée s'effacent volontairement — ce sont des non-issues, et rien ne justifie qu'elles attirent l'œil autant que les deux autres. */ --color-outcome-won: var(--color-online); --color-outcome-lost: var(--color-danger); --color-outcome-drawn: var(--color-sand-400); --color-outcome-abandoned: var(--color-text-muted); /* Les verdicts de l'analyse d'une partie, du coup trouvé à la gaffe. Les deux bons verdicts reprennent le vert de ce qui réussit ; les trois mauvais montent de l'ambre sombre à la terre cuite de ce qui ne se reprend pas, en passant par une rouille intermédiaire — la seule teinte neuve. Chaque verdict porte toujours son mot : la couleur ne dit jamais seule. */ --color-verdict-found: var(--color-brand-dark); --color-verdict-best: var(--color-online); --color-verdict-good: var(--color-sand-400); --color-verdict-inaccuracy: var(--color-brand-amber-deep); --color-verdict-mistake: #c2410c; --color-verdict-blunder: var(--color-danger); /* Couleur de l'anneau de focus clavier (accessibilité). */ --color-focus-ring: #8d3d14; /* ========================================================================== TYPOGRAPHIE Deux familles seulement : une d'affichage, une de lecture. Les polices de repli couvrent le grec, le cyrillique et le chinois, que Joti One ne fournit pas (voir base/fonts.css). ========================================================================== */ /* Police d'affichage : titres, boutons, éléments de marque. */ --font-display: 'Joti One', 'Roboto', 'Segoe UI', 'Noto Sans', system-ui, sans-serif; /* Police de lecture : paragraphes, formulaires, textes longs. */ --font-body: 'Roboto', 'Segoe UI', 'Noto Sans', system-ui, -apple-system, sans-serif; /* Échelle de tailles. Les valeurs fluides s'adaptent seules à la largeur de l'écran : min, valeur idéale, max. */ --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: clamp(1rem, 1.35vw, 1.15rem); --font-size-button: clamp(1.15rem, 1.5vw, 1.5rem); --font-size-title: clamp(1.6rem, 3.2vw, 3.2rem); --line-height-tight: 1.2; --line-height-base: 1.6; /* ========================================================================== ESPACEMENTS Échelle progressive : on compose les marges avec ces valeurs plutôt que d'inventer un chiffre à chaque fois. ========================================================================== */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 2.5rem; /* 40px */ /* ========================================================================== ARRONDIS ========================================================================== */ --radius-sm: 10px; /* Boutons */ --radius-md: 15px; /* Blocs de contenu */ --radius-lg: 32px; /* Carte translucide, petits écrans */ --radius-xl: 50px; /* Carte translucide, grands écrans */ --radius-full: 999px; /* Pastilles et éléments circulaires */ /* ========================================================================== OMBRES ========================================================================== */ /* Ombre courte sous les éléments interactifs. */ --shadow-sm: 0 3px 3px rgba(0, 0, 0, 0.1); /* Halo diffus autour de la carte de l'accueil. */ --shadow-glow: 0 3px 50px rgba(0, 0, 0, 0.1); /* Ce qui donne de l'épaisseur aux surfaces posées sur le sable : une arête claire au sommet, une tranche sombre en bas, et une ombre qui les décolle du décor. C'est ce qui distingue un OBJET d'un rectangle coloré. */ --shadow-raised: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 0 rgba(140, 120, 100, 0.35), 0 6px 14px rgba(60, 39, 35, 0.16); /* La même, soulevée : au survol, l'objet monte d'un cran. */ --shadow-raised-hover: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 4px 0 rgba(140, 120, 100, 0.35), 0 12px 22px rgba(60, 39, 35, 0.22); /* Les deux mêmes, pour le bouton d'ambre : sa tranche est de la couleur sombre de l'ambre, et non du sable, sans quoi il paraîtrait posé sur autre chose que lui-même. */ --shadow-raised-amber: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 0 var(--color-brand-amber-deep), 0 8px 18px rgba(60, 39, 35, 0.2); --shadow-raised-amber-hover: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 5px 0 var(--color-brand-amber-deep), 0 14px 26px rgba(60, 39, 35, 0.26); /* Creux : le rond dans lequel se loge un pictogramme, comme un trou du plateau creusé dans le bois. */ --shadow-hollow: inset 0 2px 4px rgba(60, 39, 35, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.5); /* La même gravure, en plus discrète : pour un titre de section, où la tranche de sable du grand titre pèserait trop lourd. */ --shadow-heading: 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 8px rgba(60, 39, 35, 0.22); /* Titre gravé : un liseré clair dessus, une tranche de sable dessous, et une ombre douce. Les lettres semblent taillées dans le bois du plateau plutôt que posées sur le décor. */ --shadow-title: 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 rgba(184, 169, 149, 0.55), 0 8px 18px rgba(60, 39, 35, 0.3); /* Le halo et la pénombre de l'accueil : une lumière douce au centre, un assombrissement dans les angles. Le décor photographique cesse ainsi de disputer l'attention au contenu, sans qu'on ait à le remplacer. */ --gradient-spotlight: radial-gradient(ellipse 68% 52% at 50% 40%, rgba(255, 252, 246, 0.4), transparent 72%); --gradient-vignette: radial-gradient(ellipse 118% 92% at 50% 46%, transparent 42%, rgba(60, 39, 35, 0.22) 100%); /* ========================================================================== ANIMATIONS Durées et délais de la mise en scène d'ouverture, regroupés pour pouvoir accélérer ou ralentir l'ensemble d'un seul endroit. ========================================================================== */ --duration-fast: 0.25s; --duration-base: 0.3s; --duration-slow: 0.5s; /* Fondu de la photographie d'arrière-plan. */ --duration-backdrop: 2s; /* Apparition de la carte, puis des boutons l'un après l'autre. */ --delay-card: 1s; --delay-button-1: 1.75s; --delay-button-2: 1.85s; --delay-button-3: 1.95s; /* ========================================================================== PROFONDEUR (z-index) Centralisée pour éviter les surenchères de valeurs arbitraires. ========================================================================== */ --z-backdrop: -1; --z-content: 1; --z-overlay: 100; }