/* ===========================================================================
   ORDO / jetons de design
   Palette : petrole profond (l'encre) + vert de croix pharmaceutique + laiton.
   Le laiton est l'accent rare : il ne sert qu'a ce qui fait foi (scelle, code,
   horodatage). Ne jamais l'employer pour une action.
   =========================================================================== */
:root {
  /* Fonds sombres */
  --nuit:        #071A1F;
  --nuit-haut:   #0A2027;
  --ardoise:     #0E2A31;
  --ardoise-2:   #143840;

  /* Vert de croix */
  --vert:        #14C08A;
  --vert-vif:    #1ED79B;
  --menthe:      #9DFBDD;

  /* Laiton (ce qui fait foi) */
  --laiton:      #E0A45C;
  --laiton-pale: #F3D4AC;

  /* Neutres */
  --craie:       #E8F3EF;
  --craie-2:     #9FB6B2;
  --craie-3:     #6B8480;
  --papier:      #F4F7F6;
  --papier-2:    #FFFFFF;
  --encre:       #08171B;
  --encre-2:     #4A625F;

  /* Lignes */
  --ligne:       color-mix(in srgb, var(--menthe) 13%, transparent);
  --ligne-fort:  color-mix(in srgb, var(--menthe) 24%, transparent);
  --ligne-clair: #DDE6E3;

  /* Etats */
  --alerte:      #FF6B57;
  --attente:     #E0A45C;

  /* Typographie */
  --titre: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texte: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --donnee: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Rythme */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --marge: clamp(20px, 5vw, 72px);
  --colonne: 1240px;

  /* Ombres */
  --ombre-douce: 0 1px 2px rgba(8,23,27,.05), 0 8px 24px -12px rgba(8,23,27,.16);
  --ombre-carte: 0 2px 4px rgba(8,23,27,.06), 0 24px 60px -28px rgba(8,23,27,.32);
  --lueur: 0 0 0 1px color-mix(in srgb, var(--vert) 30%, transparent),
           0 18px 48px -20px color-mix(in srgb, var(--vert) 55%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--texte); font-synthesis-weight: none;
       -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }

/* `hidden` doit gagner sur tout `display` pose par une classe : sans cela, un
   .trouve { display:flex } laisse visible un element masque par le script. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Etiquettes de donnee : capitales etroites, chasse fixe. Elles nomment un
   champ, elles ne decorent pas. */
.etiquette {
  font-family: var(--donnee); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--vert-vif); outline-offset: 3px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}