/* ==========================================================================
   101 MOVE ME — jetons de design.
   Monde de reference : le courrier et le passeport. Enveloppes par avion,
   tampons d'entree, etiquettes de bagage, cachets de la poste.
   Aucun degrade nulle part : le rouge et le bleu s'utilisent en aplats pleins
   et en chevrons diagonaux.
   ========================================================================== */

:root {
  /* --- Palette -----------------------------------------------------------
     Sobre, avec une seule couleur. Le monde de reference reste le courrier,
     mais un tampon n'est pas un feu d'artifice : c'est de l'encre rouge posee
     sur du papier gris, et rien d'autre.
     Le bleu par avion a ete retire de l'interface. Deux couleurs vives aux
     antipodes du cercle chromatique se battaient au lieu de se completer ;
     elles ne subsistent que sur le lisere de la page-porte, une fois. */
  --papier:        #FAF9F6;   /* papier legerement chaud, jamais blanc pur */
  --papier-doux:   #F2F0EA;   /* fond des cartes, un cran plus dense */
  --encre:         #1C1D1F;   /* texte : noir neutre, pas bleu marine */
  --gris-cachet:   #74736E;   /* texte secondaire */
  --trait:         #E2E0D8;

  /* LA couleur. Un rouge d'encre a tampon, un peu terreux : il tient
     l'attention sans crier, et se marie au papier au lieu de s'y opposer. */
  --accent:        #C3362B;
  --accent-doux:   #F0E0DC;

  /* Reservees aux donnees, jamais a la decoration. */
  --vert-tampon:   #3F7A5E;
  --bleu-avion:    #2F5D8C;
  --jaune-douane:  #C99A2E;

  --fond:          var(--papier);
  --fond-doux:     var(--papier-doux);
  --fond-carte:    #FFFFFF;
  --texte:         var(--encre);
  --texte-doux:    var(--gris-cachet);
  --nuit:          var(--encre);
  --rouge-avion:   var(--accent);   /* compatibilite : ancien nom */
  --nuit-encre:    var(--encre);

  /* --- Raretes des hauts faits ------------------------------------------ */
  --commun:     #9A9891;
  --courant:    #2F5D8C;
  --rare:       #6B5B95;
  --legendaire: #C99A2E;

  /* --- Typographie ------------------------------------------------------ */
  --display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --texte-police: 'Public Sans', system-ui, -apple-system, sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Echelle nette : un vrai ecart entre les niveaux, pas six tailles qui se
     ressemblent. */
  --t-xs:  0.75rem;
  --t-sm:  0.875rem;
  --t-md:  1rem;
  --t-lg:  1.125rem;
  --t-xl:  1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;
  /* Reserve a la page-porte, le seul endroit ou un titre doit occuper l'ecran.
     Partout ailleurs on ne depasse pas --t-2xl : l'ecran sert a lire des
     passages, pas a admirer une affiche. */
  --t-4xl: clamp(2.5rem, 11vw, 4.5rem);

  --gras-normal: 400;
  --gras-moyen:  600;
  --gras-fort:   800;

  /* --- Espacement (echelle de 4) ---------------------------------------- */
  --e1: 0.25rem;  --e2: 0.5rem;  --e3: 0.75rem; --e4: 1rem;
  --e6: 1.5rem;   --e8: 2rem;    --e12: 3rem;   --e16: 4rem;

  /* --- Rayons et ombres ------------------------------------------------- */
  --rayon-sm: 3px;
  --rayon:    6px;
  --rayon-lg: 12px;
  --rayon-rond: 999px;

  --ombre-plate: 0 1px 0 var(--trait);
  --ombre-carte: 0 2px 0 rgba(27, 42, 74, 0.08), 0 8px 24px rgba(27, 42, 74, 0.06);
  --ombre-levee: 0 4px 0 rgba(27, 42, 74, 0.10), 0 16px 40px rgba(27, 42, 74, 0.12);

  /* --- Durees ----------------------------------------------------------- */
  --d-appui:    120ms;
  --d-entree:   300ms;
  --d-tampon:   220ms;
  --d-confetti: 600ms;
  --d-deverrou: 500ms;
  --d-compteur: 900ms;
  --d-parcours: 1200ms;
  --d-rang:     1200ms;
  --sortie: cubic-bezier(0.22, 1, 0.36, 1);

  --largeur-max: 34rem;   /* colonne unique, lisible au pouce */
  --gouttiere: 1rem;      /* LA marge laterale : entete, contenu et barre s'y alignent */
  --barre-h: 3.75rem;     /* hauteur du bandeau de navigation du bas */
  --lisere: 6px;
}

/* Mode sombre : inversion sur nuit d'encre, memes accents, contraste AA
   tenu sur les deux fonds. */
[data-theme='sombre'] {
  --fond:       var(--nuit-encre);
  --fond-carte: #1B2540;
  --texte:      #EEF2FB;
  --texte-doux: #93A2C2;
  --trait:      #2C3856;
  --papier:     #131A2E;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='clair']) {
    --fond:        #141414;   /* gris tres sombre neutre, pas bleu nuit */
    --fond-doux:   #1C1C1C;
    --fond-carte:  #1C1C1C;
    --texte:       #EDEBE6;
    --texte-doux:  #97948D;
    --trait:       #2B2B2B;
    --papier:      #141414;
    --papier-doux: #1C1C1C;
    --encre:       #EDEBE6;
    --nuit:        #EDEBE6;   /* inverse : ce qui etait noir devient clair */
    --accent:      #E4574A;   /* le rouge s'eclaircit pour rester lisible */
    --accent-doux: #34211E;
  }
}
[data-theme='sombre'] {
  --fond: #141414; --fond-doux: #1C1C1C; --fond-carte: #1C1C1C;
  --texte: #EDEBE6; --texte-doux: #97948D; --trait: #2B2B2B;
  --papier: #141414; --papier-doux: #1C1C1C; --encre: #EDEBE6;
  --nuit: #EDEBE6; --accent: #E4574A; --accent-doux: #34211E;
}

/* prefers-reduced-motion coupe reellement tout : aucun tampon, aucun confetti,
   aucun defilement de compteur. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-appui: 0ms; --d-entree: 0ms; --d-tampon: 0ms; --d-confetti: 0ms;
    --d-deverrou: 0ms; --d-compteur: 0ms; --d-parcours: 0ms; --d-rang: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}