/* =========================================================================
   [Nom] · Design system « Lumière Soleil · Infini » — jetons
   -------------------------------------------------------------------------
   Seule source des couleurs, tailles, espacements, rayons, ombres et
   mouvements. Les composants (composants.css), l'application (Razor) et la
   vitrine (Astro) ne contiennent AUCUNE valeur en dur : uniquement var(--…).

   Police : Figtree 400 / 500 / 600, chargée par la page (voir README,
   « Polices »). Thème : clair uniquement (color-scheme: light).
   Contrastes : calculés WCAG 2.1 (ratio entre parenthèses) ; tout texte ≥ 4,5:1,
   tout bord de contrôle ≥ 3:1.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---------- Couleurs de base (palette) ----------------------------------
     60 % fond et neutres · 30 % surfaces de structure · 10 % action (prune).
     La mandarine est une couleur de MARQUE (surfaces émotionnelles), jamais
     une couleur d'action. */

  /* Neutres chauds */
  --creme: #FFF9F4;          /* L0 fond général */
  --surface: #FFFFFF;        /* L1 cartes, champs, tableaux */
  --sable: #F7EDE4;          /* L1 bis : menu latéral, en-têtes de tableau, segments */
  --filet: #F0E2D6;          /* bordure de surface (décor, 1,3:1 — jamais seule pour un contrôle) */
  --trait: #9C8790;          /* bordure de champ et de case — 3,3:1 sur blanc, 3,2:1 sur crème */
  --cacao: #2A1F2D;          /* texte — 15,1:1 sur crème, 15,8:1 sur blanc */
  --taupe: #6A5A63;          /* texte secondaire — 6,2:1 crème, 5,6:1 sable, 4,9:1 pêche */

  /* Action : la prune, SEULE couleur d'action */
  --prune: #6E3FA3;          /* boutons, liens, focus — blanc dessus 7,2:1 ; sur crème 6,9:1 */
  --prune-fonce: #5A3188;    /* survol / appui — blanc dessus 9,4:1 */
  --prune-pale: #F3EAFB;     /* sélection, élément actif — texte prune 6,2:1 */

  /* Lumière : pêche */
  --peche: #FFD9C4;          /* fonds chauds — cacao 12:1, taupe 4,9:1 */
  --peche-pale: #FFE9DC;     /* tuiles d'icônes, encarts — cacao 13,5:1 */
  --abricot: #F2A47E;        /* décor et graphiques uniquement (2:1 : jamais de texte) */

  /* Peps : mandarine (le soleil) */
  --mandarine: #FF8A1F;          /* disque solaire, aplats de marque — cacao 6,7:1 ; blanc 2,4:1 INTERDIT */
  --mandarine-claire: #FFB070;   /* anneau du soleil — cacao 8,8:1 */
  --mandarine-pale: #FFE7CC;     /* halo, encarts — cacao 13,2:1, prune 6:1 */
  --mandarine-fonce: #B85300;    /* texte mandarine — 4,7:1 crème, 4,9:1 blanc (pas sur mandarine-pale : 4,1:1) */

  /* États (texte foncé sur fond pâle de la même famille) */
  --ok: #1D6B47;        --ok-pale: #E3F3EA;        /* 5,6:1 */
  --att: #8A5300;       --att-pale: #FFF0D4;       /* 5,6:1 */
  --alerte: #A33A1C;    --alerte-pale: #FDE6DC;    /* 5,5:1 */
  --danger: #B42318;    /* erreur de champ, destruction — 6,6:1 sur blanc ; blanc dessus 6,6:1 */

  /* ---------- Rôles sémantiques (à utiliser en priorité) ----------------- */
  --fond: var(--creme);
  --fond-structure: var(--sable);
  --fond-carte: var(--surface);
  --texte: var(--cacao);
  --texte-sec: var(--taupe);
  --bordure: var(--filet);
  --bordure-controle: var(--trait);
  --action: var(--prune);
  --action-survol: var(--prune-fonce);
  --action-pale: var(--prune-pale);
  --texte-sur-action: #FFFFFF;
  --texte-sur-marque: var(--cacao);   /* sur mandarine, pêche : toujours cacao */
  --focus: var(--prune);
  --anneau-focus: var(--prune-pale);
  /* Couleur qui sépare les deux cœurs du logo : la couleur du fond sur lequel il est posé */
  --logo-fond: var(--creme);

  /* ---------- Typographie ------------------------------------------------- */
  --police: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --police-chiffres: var(--police);   /* + font-variant-numeric: tabular-nums */

  --graisse-normale: 400;    /* texte courant */
  --graisse-moyenne: 500;    /* libellés, boutons, en-têtes de tableau */
  --graisse-forte: 600;      /* titres. Jamais au-delà de 600. */

  /* Échelle tierce mineure (× 1,2) depuis 16 px, arrondie au pixel.
     Rien sous 12 px ; 12 px est réservé aux métadonnées. */
  --taille-meta: 0.75rem;     /* 12 px — horodatage, mentions, aide courte */
  --taille-sec: 0.875rem;     /* 14 px — texte secondaire, cellules denses */
  --taille-corps: 1rem;       /* 16 px — texte courant, champs, cellules */
  --taille-1: 1.1875rem;      /* 19 px — titre de carte, chapô */
  --taille-2: 1.4375rem;      /* 23 px — titre de section d'écran (h3) */
  --taille-3: 1.75rem;        /* 28 px — titre de page outil (h2) */
  --taille-4: 2.0625rem;      /* 33 px — h1 outil */
  --taille-5: 2.5rem;         /* 40 px — grands chiffres de carte */
  --taille-6: 3rem;           /* 48 px — titre de section vitrine */
  --taille-7: 3.5625rem;      /* 57 px — prix, chiffres vedettes */
  --taille-affiche: clamp(2.75rem, 6.4vw, 5.25rem);  /* 44 → 84 px — héros vitrine */
  --taille-geant: clamp(4.5rem, 8vw, 6rem);          /* 72 → 96 px — compte à rebours */

  --interligne-serre: 1.1;    /* affiche, chiffres géants */
  --interligne-titre: 1.2;    /* titres */
  --interligne-corps: 1.55;   /* texte courant */
  --interligne-meta: 1.4;     /* 12 px sur plusieurs lignes */

  --approche-titre: -0.02em;  /* titres ≥ 23 px */
  --approche-affiche: -0.04em;/* affiche et chiffres géants */

  --mesure: 68ch;             /* longueur de ligne maximale du texte courant */

  /* ---------- Espacements : grille de 4 / 8 px ---------------------------- */
  --esp-1: 4px;     /* micro : icône ↔ texte serré */
  --esp-2: 8px;     /* écart dans un groupe */
  --esp-3: 12px;    /* écart libellé ↔ champ, lignes de liste */
  --esp-4: 16px;    /* marge latérale mobile, padding de carte compacte */
  --esp-6: 24px;    /* padding de carte, écart entre groupes */
  --esp-8: 32px;    /* écart entre blocs */
  --esp-10: 40px;   /* marge latérale tablette+ */
  --esp-12: 48px;   /* hauteur de contrôle, écart de section outil */
  --esp-16: 64px;   /* section vitrine */
  --esp-24: 96px;   /* grande section vitrine */

  --largeur-max: 1280px;      /* conteneur de page */
  --largeur-lecture: 720px;   /* colonne de texte */
  --gouttiere: var(--esp-4);  /* 16 px < 768 px, 40 px au-delà (voir plus bas) */

  /* Cibles tactiles */
  --cible-min: 44px;          /* plus petite zone cliquable */
  --hauteur-controle: 48px;   /* boutons, champs */
  --hauteur-controle-petit: 44px;

  /* ---------- Rayons ------------------------------------------------------ */
  --r-xs: 8px;        /* badges carrés, vignettes */
  --r-s: 12px;        /* champs, petites cartes, tuiles d'illustration */
  --r-m: 20px;        /* cartes */
  --r-l: 28px;        /* grands blocs, cadres, offres */
  --r-rond: 999px;    /* boutons, pastilles, badges */

  /* ---------- Bordures et ombres (élévation : filet d'abord) ------------- */
  --bordure-fine: 1px solid var(--bordure);
  --bordure-champ: 1.5px solid var(--bordure-controle);
  /* Ombres douces, alpha < 0,08 */
  --ombre-1: 0 1px 2px rgba(42, 31, 45, .04), 0 12px 32px rgba(42, 31, 45, .06);   /* cartes L1 */
  --ombre-2: 0 2px 4px rgba(42, 31, 45, .05), 0 24px 48px rgba(42, 31, 45, .07);   /* menus, dialogues L2–L3 */
  --anneau: 0 0 0 4px var(--anneau-focus);                                          /* halo de focus des champs */
  --voile: rgba(42, 31, 45, .4);                                                    /* fond derrière un dialogue */

  /* Couches */
  --z-collant: 10;
  --z-menu: 100;
  --z-dialogue: 200;
  --z-vol: 400;       /* pastille en vol (animations.js) */

  /* ---------- Mouvement --------------------------------------------------
     Durées de l'interface : 100 / 150 / 200 / 300 ms. Uniquement transform et
     opacité (couleurs ≤ 150 ms). Entrée en sortie douce, sortie en accélération.
     Rien ne tourne en boucle. */
  --duree-100: 100ms;
  --duree-150: 150ms;
  --duree-200: 200ms;
  --duree-300: 300ms;
  --courbe-entree: cubic-bezier(.16, 1, .3, 1);   /* ease-out : apparition */
  --courbe-sortie: cubic-bezier(.7, 0, .84, 0);   /* ease-in : disparition */
  --courbe-douce: ease;                            /* couleurs, opacité */

  /* Moment de marque (écart documenté au skill motion) : le tracé qui bat.
     Joué UNE fois, jamais sur un élément d'interface. */
  --logo-trace: 1200ms;
  --logo-trace-courbe: cubic-bezier(.65, 0, .35, 1);
  --logo-battement: 600ms;
  --logo-battement-delai: 1150ms;
  --logo-battement-courbe: cubic-bezier(.45, 0, .55, 1);
  --logo-battement-echelle: 1.28;

  /* Micro-animations (animations.js lit ces valeurs) */
  --vol-duree: var(--duree-300);       /* invité qui rejoint la cérémonie */
  --vol-arc: 48px;                     /* hauteur de l'arc */
  --coeurs-duree: var(--duree-300);    /* petits cœurs */
  --coeurs-ecart: 30ms;                /* décalage entre deux cœurs */
  --coeurs-montee: 20px;
  --recit-ecart: 450ms;                /* exception vitrine : arrivées successives (récit, joué une fois) */
}

@media (min-width: 768px) {
  :root { --gouttiere: var(--esp-10); }
}

/* ---------- Moins d'animations -----------------------------------------
   Quand le système le demande : durées ramenées à 100 ms (fondu seul),
   aucun déplacement. Les composants s'appuient sur ces jetons ; les
   animations de marque et les micro-animations sont coupées dans leurs
   propres fichiers (logo-anime.css, animations.js). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-150: 100ms;
    --duree-200: 100ms;
    --duree-300: 100ms;
    --vol-arc: 0px;
    --coeurs-montee: 0px;
  }
}

/* ---------- Socle minimal (facultatif mais recommandé) ------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: var(--graisse-normale) var(--taille-corps)/var(--interligne-corps) var(--police);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--graisse-forte);
  line-height: var(--interligne-titre);
  letter-spacing: var(--approche-titre);
}
p { margin: 0; }
b, strong { font-weight: var(--graisse-forte); }
a { color: var(--action); text-underline-offset: .2em; }
a:hover { color: var(--action-survol); }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--prune-pale); color: var(--cacao); }