/* Nodlr · tokens de design (direction Rayonnage)
   Source de référence pour l'application React. La maquette (styles.css) les utilise tels quels.
   Thème unique : sombre. Voir DESIGN.md pour les règles d'usage. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  /* ---------- Couleurs : fonds et surfaces ---------- */
  --bg: #121315;               /* fond de l'application */
  --bg-rgb: 18 19 21;          /* même couleur, pour les transparences : rgb(var(--bg-rgb) / .8) */
  --scrim-rgb: 14 15 17;       /* dégradés posés sur les images */
  --surface: #191a1d;          /* panneaux, champs, filtres */
  --surface-2: #222428;        /* survol, fond de barre, jaquette en attente */
  --surface-3: #2b2d32;        /* sélection discrète, pastilles neutres */
  --line: #2e3136;             /* séparateurs, contours au repos */
  --line-strong: #3d4047;      /* contours de boutons, traits de frise */

  /* ---------- Couleurs : texte ---------- */
  --text: #f3f0ea;             /* texte principal (16,3:1 sur --bg) */
  --muted: #aaa69f;            /* texte secondaire (7,7:1) */
  --faint: #86837c;            /* légendes, sources, placeholders (4,9:1) */

  /* ---------- Couleurs : accent (la seule couleur vive) ---------- */
  --accent: #e3a84f;           /* action principale, sélection, « installé » */
  --accent-hover: #ecb763;
  --accent-ink: #241805;       /* texte sur l'accent (8,3:1) */
  --accent-soft: rgb(227 168 79 / .14);   /* fond de message de réussite, badge démo */
  --accent-line: rgb(227 168 79 / .45);   /* contour de message, mois incomplet */
  --selection: rgb(227 168 79 / .32);     /* sélection de texte */

  /* ---------- Couleurs : erreur ---------- */
  --danger: #f0907f;
  --danger-soft: rgb(240 144 127 / .12);
  --danger-line: rgb(240 144 127 / .45);

  /* ---------- Couleurs : texte et traits posés sur une image ---------- */
  --on-image-muted: rgb(243 240 234 / .78);  /* infos sous le titre de « Reprendre » */
  --on-art: rgb(255 255 255 / .9);           /* icône d'un succès débloqué */
  --art-edge: rgb(255 255 255 / .07);        /* liseré intérieur des images */

  /* ---------- Typographie ---------- */
  --font-ui: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;  /* chemins de fichiers uniquement */

  --fs-caption: 12px;          /* légendes, sources (taille minimale) */
  --fs-meta: 13px;             /* métadonnées de carte, libellés de filtre */
  --fs-body: 14px;             /* texte courant */
  --fs-body-lg: 15px;          /* recherche, ligne d'infos de la fiche */
  --fs-lead: 17px;             /* description d'un jeu */
  --fs-h3: 18px;               /* total d'un mois */
  --fs-h2: 20px;               /* titres de section */
  --fs-feature: 40px;          /* titre du jeu mis en avant */
  --fs-number: 44px;           /* grands chiffres : temps, succès */
  --fs-state: 48px;            /* titre des écrans d'état */
  --fs-title: clamp(44px, 5.4vw, 76px);  /* titre de la fiche */
  --fs-brand: 21px;            /* mot « nodlr » de l'en-tête */
  --fs-fallback: var(--fs-lead);   /* titre d'une jaquette sans image */
  --fs-fallback-cover: 26px;       /* titre de la jaquette sans image de la fiche */
  --fallback-letter: 140px;        /* initiale en filigrane d'une jaquette sans image */
  --fallback-letter-wide: 110px;   /* idem, image large */
  --fallback-letter-cover: 220px;  /* idem, jaquette de la fiche */

  --lh-body: 1.5;
  --lh-tight: 1;
  --tracking-title: -.04em;
  --tracking-heading: -.02em;
  --tracking-brand: -.035em;

  /* ---------- Espacements ---------- */
  --space-1: 4px;
  --space-1-5: 6px;            /* réglage fin : écart entre les éléments de l'en-tête */
  --space-2: 8px;
  --space-2-5: 10px;           /* réglage fin : icône et texte d'un champ ou du logo */
  --space-3: 12px;
  --space-3-5: 14px;           /* réglage fin : marges intérieures des messages et des encadrés */
  --space-4: 16px;
  --space-4-5: 18px;           /* réglage fin : écarts autour des grands chiffres et des lignes d'infos */
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;             /* gouttière étroite, marges des panneaux */
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-24: 96px;
  --pad: var(--space-10);      /* gouttière de page ; 28px sous 1240px */

  /* ---------- Formes ---------- */
  --r-sm: 6px;                 /* jaquettes, boutons, champs, messages */
  --r-lg: 12px;                /* grands panneaux */
  --r-pill: 999px;             /* filtres, badge */

  /* ---------- Ombres (seulement pour décoller un élément) ---------- */
  --shadow-lift: 0 18px 32px -12px rgb(0 0 0 / .7);      /* jaquette survolée */
  --shadow-cover: 0 30px 60px -20px rgb(0 0 0 / .8);     /* jaquette de la fiche */
  --shadow-button: 0 6px 16px -4px rgb(0 0 0 / .6);      /* bouton Jouer sur une jaquette */

  /* ---------- Dimensions ---------- */
  --app-min-w: 760px;          /* largeur minimale de la fenêtre */
  --top-h: 68px;               /* en-tête */
  --top-blur: 16px;            /* flou derrière l'en-tête */
  --control-h: 36px;           /* bouton d'icône, état de la mise à jour */
  --search-h: 42px;            /* champ de recherche */
  --search-w: 480px;           /* largeur maximale de la recherche */
  --kbd-h: 22px;               /* indice de touche (« / » dans la recherche) */
  --pill-h: 26px;              /* badge « Mode démo » */
  --brand-mark: 20px;          /* anneau du logo */
  --icon: 18px;                /* icône par défaut */
  --icon-sm: 16px;             /* icône d'un bouton ou de l'état de mise à jour */
  --icon-md: 17px;             /* icône d'un grand bouton */
  --icon-xs: 14px;             /* icône d'un petit bouton */
  --icon-fav: 13px;            /* cœur à côté du titre d'une jaquette */
  --btn-h: 40px;               /* bouton ; aussi le bouton Jouer rond des jaquettes */
  --btn-h-lg: 48px;            /* bouton de la fiche */
  --btn-h-sm: 32px;            /* petit bouton */
  --control-h-sm: 28px;        /* petit bouton d'icône (fermer un message) */
  --chip-h: 34px;              /* filtre et menu de tri */
  --index-w: 26px;             /* bouton de l'index de lettres : largeur */
  --index-h: 26px;             /* idem, hauteur (l'espacement entre les lettres est compris) */
  --status-dot: 7px;           /* point de l'état d'installation */
  --status-halo: 3px;          /* halo du point « installé » */
  --meter-h: 6px;              /* jauge des succès */
  --back-blur: 10px;           /* flou derrière le bouton de retour */
  --card-min: 152px;           /* largeur minimale d'une jaquette dans la grille */
  --card-body-h: 72px;         /* texte sous une jaquette : titre et deux lignes. Hauteur minimale : la grille calcule la hauteur d'une jaquette hors écran sans afficher son texte */
  --cover-w: 264px;            /* jaquette de la fiche ; 220px sous 1240px, 180px sous 960px */
  --activity-w: 400px;         /* bloc « Vos 12 derniers mois » */
  --frise-h: 72px;             /* hauteur d'une colonne de la frise */
  --frise-dot: 5px;            /* point « Dernière partie » sous la frise */
  --tag-h: 22px;               /* étiquette « Mois incomplet », « Pas d'historique » */
  --resume-min-h: 380px;       /* jeu mis en avant dans « Reprendre » */
  --backdrop-h: 600px;         /* image de fond de la fiche */
  --detail-top: 110px;         /* espace entre le retour et la jaquette de la fiche ; 80px sous 960px */
  --detail-gap: var(--space-14);  /* entre la jaquette et le texte de la fiche ; 36px puis 28px */
  --detail-head-w: 760px;      /* titre, infos et actions de la fiche */
  --message-w: 600px;          /* message après une action */
  --state-w: 1000px;           /* écrans d'état et premier lancement */
  --state-top: 72px;           /* marge haute des écrans d'état */

  /* ---------- Mouvement ---------- */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --dur-press: 140ms;          /* appui sur un bouton */
  --dur-ui: 200ms;             /* couleurs, contours */
  --dur-hover: 260ms;          /* survol d'une jaquette */
  --dur-enter: 240ms;          /* apparition d'un message */
  --dur-pop: 320ms;            /* ajout aux favoris : le cœur grossit */
  --dur-morph: 420ms;          /* jaquette ↔ fiche */
}

/* ---------- Fenêtre plus étroite (voir DESIGN.md, section 5) ---------- */
@media (max-width: 1240px) {
  :root { --pad: var(--space-7); --cover-w: 220px; --detail-gap: 36px; }
}
@media (max-width: 960px) {
  :root { --cover-w: 180px; --detail-top: 80px; --detail-gap: var(--space-7); }
}