/*
 * EMPRIZE — jetons de design.
 *
 * Direction artistique calée sur la référence fournie : noir profond, un seul
 * accent vif, blanc chaud (jamais du blanc pur) pour le texte, bordures
 * teintées de cet accent très transparent, angles vifs et coins biseautés.
 *
 * L'accent retenu est le vert du logo du groupe (#4FF529). Pour revenir au
 * rouge de la maquette de référence, deux valeurs suffisent :
 *   --c-primary: #ff0000;  --rgb-primary: 255, 0, 0;
 *
 * Le reste du thème ne référence que ces variables : changer ce fichier
 * suffit à changer l'apparence du site.
 */

:root {
	/* Couleurs de base */
	--c-dark: #0a0a0a;            /* fond général */
	--c-mid: #1a1a1a;             /* sections alternées, surfaces */
	--c-light: #f0ede6;           /* blanc chaud, cassé — pas de #fff */
	--c-primary: #4ff529;         /* vert du logo, seule couleur du site */

	/* Déclinaisons en composantes, pour les transparences */
	--rgb-dark: 10, 10, 10;
	--rgb-light: 240, 237, 230;
	--rgb-primary: 79, 245, 41;

	/* Rôles */
	--c-bg: var(--c-dark);
	--c-bg-alt: var(--c-mid);
	--c-surface: rgba(255, 255, 255, 0.04);
	--c-text: var(--c-light);
	--c-text-muted: rgba(var(--rgb-light), 0.7);
	--c-text-faint: rgba(var(--rgb-light), 0.5);
	--c-accent: var(--c-primary);
	--c-accent-contrast: var(--c-dark);   /* texte sombre sur aplat rouge */
	--c-border: rgba(var(--rgb-primary), 0.12);
	--c-border-hi: rgba(var(--rgb-primary), 0.4);
	--c-overlay: rgba(var(--rgb-dark), 0.92);

	/* Typographie */
	/* Variantes livrées : "Big Shoulders Display" (condensée anguleuse),
	   "Chakra Petch" (biseautée), "Grenze Gotisch" (gothique). */
	--font-display: "Orbitron", "Big Shoulders Display", "Impact", sans-serif;
	--font-accent: "Barlow Condensed", "Oswald", sans-serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--weight-display: 900;
	--weight-ui: 600;

	/* Interlettrage : capitales très espacées pour les surtitres, c'est la
	   signature typographique de la référence. */
	--tracking-display: 0.01em;
	--tracking-label: 0.35em;
	--tracking-ui: 0.15em;
	--tracking-button: 0.12em;

	/* Échelle typographique */
	--fs-hero: clamp(2.75rem, 9vw, 7.5rem);
	--fs-h2: clamp(1.75rem, 4.2vw, 3.25rem);
	--fs-h3: 1.3rem;
	--fs-body: 1rem;
	--fs-small: 0.85rem;
	--fs-label: 0.7rem;
	--lh-body: 1.7;
	--lh-title: 1.05;

	/* Rythme */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;
	--space-7: clamp(4rem, 9vw, 6rem);
	--gutter: clamp(1.25rem, 4vw, 3rem);

	/* Formes et effets */
	--radius: 0;                  /* aucun arrondi : tout est à angle vif */
	--bevel: 8px;                 /* coin coupé des boutons pleins */
	--border: 1px solid var(--c-border);
	--divider: 48px;              /* trait rouge sous les titres de section */
	--glow: 0 8px 24px rgba(var(--rgb-primary), 0.35);
	--wrap: 1200px;
	--wrap-narrow: 860px;
	--measure: 640px;             /* longueur de ligne confortable */
	--transition: 200ms ease;

	/* Effet verre (« Liquid Glass ») — n'agit que par-dessus une image */
	--verre-fond: rgba(var(--rgb-light), 0.07);
	--verre-fond-dense: rgba(var(--rgb-dark), 0.55);
	--verre-flou: 16px;
	--verre-saturation: 180%;
	--verre-bordure: rgba(var(--rgb-light), 0.22);
	--verre-eclat: rgba(255, 255, 255, 0.35);
	--verre-ombre: 0 12px 40px rgba(0, 0, 0, 0.45);

	/* Traitement des images : légèrement désaturées, couleur pleine au survol */
	--img-filter: grayscale(20%);
	--img-filter-strong: grayscale(40%);
	--img-filter-hover: grayscale(0%);
}