/*
 * Tokens du site. FICHIER DU SITE : la mise à niveau de la base n'y touche jamais.
 * Uniquement des propriétés personnalisées dans :root, en trois blocs :
 *   1. maquette : généré par outils/tokens-depuis-maquette.js, jamais modifié à la main ;
 *   2. contrat  : les noms que la base et les sections utilisent, qui renvoient à la maquette ;
 *   3. projet   : ce que la maquette ajoute et que le contrat ne couvre pas.
 * Les valeurs du contrat ci-dessous sont neutres : le pilote les fait pointer vers la maquette.
 */

:root {
	/* MAQUETTE:DEBUT (généré, ne pas modifier à la main) */
	/* source : sources/maquette/evenement.html (artifact claude.ai, sans export), bloc :root repris tel quel, le 2026-10-23 */
	--m-ink: #000000;
	--m-paper: #ffffff;
	--m-grey: #8d8d8d;
	--m-grey-2: #3a3a3a;
	--m-grey-3: #161616;
	--m-line: #2a2a2a;
	--m-display: "Anton", Impact, "Arial Narrow", sans-serif;
	--m-text: "DM Sans", Arial, Helvetica, sans-serif;
	/* MAQUETTE:FIN */

	/* Contrat : couleurs (page sombre ; le tunnel d'inscription, sur fond clair, se règle dans sa section) */
	--couleur-fond: var(--m-ink);
	--couleur-surface: var(--m-grey-3);
	--couleur-texte: var(--m-paper);
	--couleur-texte-doux: var(--m-grey);
	--couleur-primaire: var(--m-paper);
	--couleur-primaire-douce: var(--m-grey-2);
	--couleur-sur-primaire: var(--m-ink);
	--couleur-accent: var(--m-grey);
	--couleur-trait: var(--m-line);
	--couleur-lien: var(--couleur-texte);
	--couleur-lien-survol: var(--m-grey);
	--couleur-focus: var(--m-paper);
	--couleur-erreur: #b3261e;

	/* Contrat : typographie */
	--police-texte: var(--m-text);
	--police-titre: var(--m-display);
	--graisse-texte: 400;
	--graisse-forte: 700;
	--graisse-titre: 400;
	--taille-petite: 0.875rem;
	--taille-texte: 1rem;
	--taille-grande: 1.125rem;
	--taille-h4: 1.25rem;
	--taille-h3: 1.75rem;
	--taille-h2: clamp(2.125rem, 5vw, 3.5rem);
	--taille-h1: clamp(3.5rem, 13vw, 9.375rem);
	--interligne-serre: 0.95;
	--interligne-texte: 1.5;

	/* Contrat : espacements (échelle de 4 px) */
	--espace-1: 4px;
	--espace-2: 8px;
	--espace-3: 12px;
	--espace-4: 16px;
	--espace-5: 24px;
	--espace-6: 32px;
	--espace-7: 48px;
	--espace-8: 64px;
	--espace-9: 96px;
	--espace-section: 56px;

	/* Contrat : formes, ombres, mouvements (maquette à angles droits, sans ombre) */
	--rayon-s: 0;
	--rayon-m: 0;
	--rayon-l: 0;
	--rayon-pilule: 0;
	--ombre-carte: none;
	--duree-rapide: 150ms;
	--duree-normale: 250ms;
	--courbe: cubic-bezier(0.4, 0, 0.2, 1);
	--focus-epaisseur: 3px;

	/* Contrat : mise en page */
	--conteneur-max: 1120px;
	--conteneur-etroit: 820px;
	--conteneur-marge: 20px;
	--grille-espace: var(--espace-5);

	/* Projet */
	--couleur-texte-contenu: #d6d6d6;
	--taille-accroche: clamp(1.125rem, 2.4vw, 1.625rem);
	--interligne-affiche: 0.9;
	--hauteur-hero: 72vh;
	--graisse-moyenne: 500;
	--taille-logo: 1.375rem;
	--hauteur-entete: 69px; /* barre de l'en-tête sans son trait de 1px : 70 px en tout, comme la maquette */
	--hauteur-logo-entete: calc(var(--hauteur-entete) - 2 * var(--espace-1)); /* logo du client (écusson) : la barre, moins 4 px de chaque côté */
	--hauteur-logo-pied: 112px;
	--taille-bouton-lecture: 72px; /* bouton de lecture de la vidéo du format, absent de la maquette */
	--duree-chargement: 1.2s; /* barre de chargement des places du tunnel, absente de la maquette */

	/* Tunnel d'inscription, sur fond clair : couleurs en dur de la maquette (.book) */
	--couleur-tunnel-fond: var(--m-paper);
	--couleur-tunnel-texte: var(--m-ink);
	--couleur-tunnel-doux: #555555;
	--couleur-tunnel-inactif: #9a9a9a;
	--couleur-tunnel-trait: #d9d9d9;
	--couleur-tunnel-grise: #f0f0f0;
	--couleur-tunnel-complet: #a8a8a8;
	--couleur-tunnel-survol: #222222;
	--taille-choix: 1.5rem;
	--trait-etape: 4px; /* soulignement de l'étape en cours, marque d'un champ en erreur */
	--largeur-choix: 190px; /* largeur mini d'une carte de choix */
	--largeur-vague: 96px; /* largeur mini d'une case de départ */
	--pastille-cote: 12px; /* carrés de la légende des départs */
	--case-cote: 18px;
	--case-cote-flex: 20px;
	--couleur-tunnel-filet: #e3e3e3; /* séparation des lignes du récapitulatif et du billet */
	--largeur-billet: 460px;
	--taille-confirmation: clamp(3.375rem, 12vw, 7.5rem); /* « Tu es inscrit·e » */

	/* E-mails (assets/css/emails.css) : les messageries n'ont pas Anton, Impact en prend la place */
	--police-email-titre: Anton, Impact, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}