/*
 * PolePosition — jetons de design (design tokens).
 * =============================================================================
 * SEUL fichier où sont définies les valeurs de la charte. Toutes les autres
 * feuilles (socle et pages des lots) n'utilisent QUE ces variables : changer
 * une couleur ici la change sur tout le site.
 *
 * L'OR n'existe qu'ici (--couleur-or, --couleur-or-clair) : l'esquisse client
 * montre un or plus vif, qui pourra remplacer ces deux valeurs plus tard.
 * Ses déclinaisons (transparences, dégradé, halo) sont calculées à partir
 * d'elles avec color-mix() — ne jamais réécrire un code couleur or ailleurs.
 *
 * Points de rupture (les variables CSS ne sont pas utilisables dans
 * @media : valeurs à reprendre telles quelles) :
 *   < 640 px   mobile          (grille 1 colonne)
 *   ≥ 640 px   tablette        (grille 2 colonnes)
 *   < 900 px   barre d'onglets mobile + en-tête compact
 *   ≥ 900 px   bureau          (en-tête complet, menu compte latéral)
 *   ≥ 1100 px  bureau large    (grille 3 colonnes)
 */

:root {
	/* --- Couleurs de la charte (identiques à l'app) --------------------- */
	--couleur-noir: #000000;
	--couleur-surface: #0b0b0b;          /* fond des cartes, panneaux */
	--couleur-surface-2: #141414;        /* champs, éléments surélevés */
	--couleur-surface-3: #1c1c1c;        /* survol */
	--couleur-bordure: #242424;
	--couleur-bordure-forte: #363636;
	/* Bulles de la messagerie : valeurs exactes de l'app (PepiteColors). */
	--couleur-bulle-moi: #2a2a2a;         /* surfaceClaire : mes messages */
	--couleur-bulle-autre: #1a1a1a;       /* surface : messages reçus */
	--couleur-or: #c8960c;
	--couleur-or-clair: #e0b53a;
	--couleur-texte: #ffffff;
	--couleur-texte-doux: #cfcfcf;
	--couleur-texte-secondaire: #9a9a9a; /* contraste 7,4:1 sur noir */
	--couleur-sur-or: #000000;           /* texte posé sur un fond or */

	/* --- Couleurs fonctionnelles ---------------------------------------- */
	--couleur-erreur: #ff6b6b;
	--couleur-succes: #4ade80;
	--couleur-erreur-fond: color-mix(in srgb, var(--couleur-erreur) 12%, transparent);
	--couleur-erreur-bord: color-mix(in srgb, var(--couleur-erreur) 45%, transparent);
	--couleur-succes-fond: color-mix(in srgb, var(--couleur-succes) 12%, transparent);
	--couleur-succes-bord: color-mix(in srgb, var(--couleur-succes) 40%, transparent);
	--couleur-voile: rgb(0 0 0 / 0.72);  /* fond des modales, pastille prix */
	--couleur-contour-verre: rgb(255 255 255 / 0.25); /* bord des boutons posés sur une photo */

	/* --- Déclinaisons de l'or (calculées, ne pas figer) ------------------ */
	--couleur-or-fond: color-mix(in srgb, var(--couleur-or) 14%, transparent);
	--couleur-or-bord: color-mix(in srgb, var(--couleur-or) 55%, transparent);
	--couleur-or-halo: color-mix(in srgb, var(--couleur-or) 70%, transparent);
	--degrade-or: linear-gradient(180deg, var(--couleur-or-clair), var(--couleur-or));

	/* --- Typographie ------------------------------------------------------ */
	--police: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--taille-xs: 0.75rem;     /* 12 px — mentions, marques en capitales */
	--taille-s: 0.8125rem;    /* 13 px — métadonnées */
	--taille-m: 0.9375rem;    /* 15 px — texte courant dense */
	--taille-base: 1rem;      /* 16 px */
	--taille-l: 1.125rem;     /* 18 px */
	--taille-xl: 1.375rem;    /* 22 px — titres de section */
	--taille-2xl: 1.75rem;    /* 28 px — titres de page */
	--taille-3xl: clamp(1.75rem, 4vw, 2.5rem);
	--graisse-normale: 400;
	--graisse-moyenne: 500;
	--graisse-semi: 600;
	--graisse-forte: 700;
	--graisse-extra: 800;
	--interligne: 1.5;
	--interligne-serre: 1.2;
	--interlettrage-capitales: 0.08em;

	/* --- Espacements (échelle de 4 px) ------------------------------------ */
	--espace-1: 4px;
	--espace-2: 8px;
	--espace-3: 12px;
	--espace-4: 16px;
	--espace-5: 20px;
	--espace-6: 24px;
	--espace-8: 32px;
	--espace-10: 40px;
	--espace-12: 48px;
	--espace-16: 64px;

	/* --- Rayons ----------------------------------------------------------- */
	--rayon-s: 8px;
	--rayon-m: 12px;
	--rayon-l: 14px;
	--rayon-xl: 20px;
	--rayon-pilule: 999px;
	--rayon-bulle: 18px;                  /* bulle de discussion (app) */
	--rayon-bulle-coin: 4px;              /* coin côté expéditeur (app) */

	/* --- Ombres ----------------------------------------------------------- */
	--ombre-carte: 0 12px 32px -18px rgb(0 0 0 / 0.8);
	--ombre-flottante: 0 20px 48px -12px rgb(0 0 0 / 0.9);
	--ombre-or: 0 12px 30px -14px var(--couleur-or-halo);

	/* --- Mise en page ----------------------------------------------------- */
	--largeur-max: 1200px;
	--largeur-texte: 760px;    /* pages de contenu, formulaires larges */
	--largeur-auth: 440px;     /* cartes de connexion / inscription */
	--gouttiere: 20px;
	--hauteur-en-tete: 64px;
	--hauteur-onglets: 64px;
	--largeur-menu-compte: 260px;
	--carte-ratio: 16 / 10;    /* photo des cartes (6 cartes visibles en 1440 × 900) */
	--grille-espace: 20px;

	/* --- Focus (accessibilité) -------------------------------------------- */
	--focus-contour: 2px solid var(--couleur-or-clair);
	--focus-decalage: 2px;

	/* --- Animations ------------------------------------------------------- */
	--duree-rapide: 0.15s;
	--duree: 0.22s;
	--courbe: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* --- Superposition (z-index) ------------------------------------------ */
	--couche-en-tete: 50;
	--couche-onglets: 60;
	--couche-menu: 70;
	--couche-toasts: 110;
}