/* La palette de la ruche (packages/theme), commune au site, à l'admin de BzzBot et à Rust.Map.Public : noir
   chaud, crème, miel / or, rouge Rust. Une couleur de la palette s'écrit par son nom (var(--honey)), jamais
   recopiée. */
:root {
  /* Grain de papier, pour les panneaux mis en avant (dons, vote de la carte) */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  --cream: #dcd1bb; /* adouci le 6 oct. (était #f2e9d7, éblouissant en gras sur fond noir) */
  --muted: #b7aa96;
  --honey: #d99a3c;
  --red: #b9362c;
  --red-dark: #7e211d;
  --ink: #0b0b09;
  --panel: #171510e8;
  --line: #66543a;

  /* Panneaux des pages intérieures (Soutenir, Mes stats, Trophées, Carte) */
  --gold: #dda23e;
  --red-bright: #c53b2f;
  /* Le rouge des textes sur fond noir (alerte, vote, déconnexion) : le rouge Rust éclairci pour se lire, jamais
     un rose saumon */
  --red-text: #e2553f;
  --parchment: #f1e5ca;
  --text: #d6cdbd;
  --text-soft: #a99e8e;
  --line-gold: rgba(var(--gold-rgb), 0.28);

  /* Ce qu'un état dit d'un coup d'œil, partout pareil : bon (branché, exprimé, acquis), à surveiller (en attente,
     possible, un point à régler), visé (la cible d'un raid, l'objectif d'une étape). Le doré clair est la valeur
     qu'on veut voir en premier dans un outil (le message de la barre, le total). Le texte posé sur un fond miel ou
     doré est presque noir : le miel ne porte pas de crème. */
  --state-ok: #9fcf86;
  --state-wait: #e0a63c;
  --state-target: #e0806b;
  --value-strong: #f0c060;
  --honey-ink: #1b1209;

  /* Les canaux des couleurs qu'on écrit en transparent : rgba(var(--gold-rgb), 0.35) plutôt que de recopier
     « 221, 162, 62 ». L'alpha reste sur place (c'est une intensité, pas une couleur), le ton suit la palette.
     L'ombre et le relief sont le noir et le blanc des creux et des filets clairs : ils ne sont pas de la palette,
     ils ont leur jeton pour qu'un jour le noir des ombres puisse se réchauffer d'un seul endroit.
     La crème, le noir chaud et le filet servent surtout à l'admin, qui pose partout des filets, des voiles et des
     fonds de ligne dans ces trois tons. */
  --gold-rgb: 221, 162, 62;
  --honey-rgb: 217, 154, 60;
  --cream-rgb: 220, 209, 187;
  --ink-rgb: 11, 11, 9;
  --line-rgb: 102, 84, 58;
  --red-rgb: 185, 54, 44;
  --red-bright-rgb: 197, 59, 47;
  --red-text-rgb: 226, 85, 63;
  --parchment-rgb: 241, 229, 202;
  --shadow-rgb: 0, 0, 0;
  --sheen-rgb: 255, 255, 255;
  --panel-gradient: linear-gradient(110deg, rgba(37, 31, 24, 0.95), rgba(18, 16, 13, 0.97));
  --row-gradient: linear-gradient(110deg, rgba(50, 42, 32, 0.9), rgba(27, 23, 18, 0.95));

  /* L'échelle des textes, la même sur toutes les pages : le titre de la page (h1, l'en-tête), le grand titre vitrine,
     le titre d'une section ordinaire,
     celui d'une carte ou d'un panneau, le petit libellé doré au-dessus d'une section, le texte courant, le texte
     secondaire (légendes, aides) */
  --fs-hero: 4.6rem;
  --fs-display: clamp(2rem, 3.2vw, 3rem); /* le grand titre « vitrine » d'une section (Soutenir, Notre histoire…) */
  --fs-section: 1.6rem;
  --fs-card: 1.15rem;
  --fs-kicker: 0.9rem; /* 14,4 px : à 11-13 px, les petits libellés se lisaient mal */
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;

  /* Les barres de progression, incrustées : un rail creusé (fond sombre, ombre intérieure, reflet clair dessous) et
     une barre au léger relief (filet clair en haut, sombre en bas) */
  --well: rgba(var(--shadow-rgb), 0.38);
  --well-shadow: inset 0 1px 3px rgba(var(--shadow-rgb), 0.8), 0 1px 0 rgba(var(--sheen-rgb), 0.05);
  --fill-shadow: inset 0 1px 0 rgba(var(--sheen-rgb), 0.25), inset 0 -1px 0 rgba(var(--shadow-rgb), 0.3);

  /* L'hexagone de la ruche (pas de formes rondes sur le site) */
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

  --max: 1400px;
  --head: 94px;
}

/* Écran moyen ou peu haut : un en-tête plus bas (94 px mangeaient trop de place sur un 1 280 × 1 024) */
@media (max-width: 1440px), (max-height: 860px) {
  :root {
    --head: 82px;
  }
}

@media (max-width: 900px) {
  :root {
    --head: 76px;
  }
}