/* jetons.css — socle visuel des outils EPS
   Direction artistique : livret imprimé, papier ivoire et encres, aucun angle
   arrondi, aucun dégradé, ombres pleines décalées, grain d'impression.
   Fichier autonome, copiable tel quel entre les projets EPS.

   Palettes de données validées (OKLab / simulation CVD Machado 2009) :
   — catégoriel clair  #1A6E9E / #B06A23 sur fond #F2EEE3
   — catégoriel sombre #3E93C4 / #C07F36 sur fond #1C1A16
   — rampe ordinale 5 pas, teinte unique, contrôlée en clair et en sombre.
   Ne pas substituer une couleur sans repasser le validateur. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("./polices/FamiljenGrotesk-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("./polices/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("./polices/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  --papier:      #F2EEE3;
  --papier-2:    #FBF8F0;
  --encre:       #2A2721;
  --encre-2:     #615A51;
  --encre-3:     #8A8279;
  --trait:       #D9D2C4;
  --trait-fort:  #2A2721;

  --serie-1:     #1A6E9E;
  --serie-2:     #B06A23;
  --bande:       rgba(26, 110, 158, .12);
  --bande-trait: rgba(26, 110, 158, .45);

  --z1: #C79A79;
  --z2: #B57B52;
  --z3: #A25C31;
  --z4: #833F18;
  --z5: #5E2A0E;

  --ok:     #2F6B3C;
  --alerte: #8A5A12;
  --grave:  #96331F;

  --sans: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --ombre: 4px 4px 0 var(--trait-fort);
  --ombre-fine: 2px 2px 0 var(--trait-fort);

  --pas: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papier:      #1C1A16;
    --papier-2:    #26231E;
    --encre:       #F2EEE3;
    --encre-2:     #C3BCAE;
    --encre-3:     #8A8279;
    --trait:       #3A3630;
    --trait-fort:  #6E675C;

    --serie-1:     #3E93C4;
    --serie-2:     #C07F36;
    --bande:       rgba(62, 147, 196, .16);
    --bande-trait: rgba(62, 147, 196, .5);

    --z1: #7A3A14;
    --z2: #96522A;
    --z3: #AD6E44;
    --z4: #C08B63;
    --z5: #D2A886;

    --ok:     #63A46C;
    --alerte: #D0A044;
    --grave:  #D9705A;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --papier:      #1C1A16;
  --papier-2:    #26231E;
  --encre:       #F2EEE3;
  --encre-2:     #C3BCAE;
  --encre-3:     #8A8279;
  --trait:       #3A3630;
  --trait-fort:  #6E675C;

  --serie-1:     #3E93C4;
  --serie-2:     #C07F36;
  --bande:       rgba(62, 147, 196, .16);
  --bande-trait: rgba(62, 147, 196, .5);

  --z1: #7A3A14;
  --z2: #96522A;
  --z3: #AD6E44;
  --z4: #C08B63;
  --z5: #D2A886;

  --ok:     #63A46C;
  --alerte: #D0A044;
  --grave:  #D9705A;
}

/* ------------------------------------------------------------------ socle */
* { box-sizing: border-box; border-radius: 0 !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--papier);
  /* grain d'impression : bruit, pas un dégradé */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3 { font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: .95rem; }
p  { margin: 0 0 .6em; }

.mono { font-family: var(--mono); }
.muet { color: var(--encre-2); }
.petit { font-size: .82rem; }

.enveloppe {
  max-width: 1120px;
  margin: 0 auto;
  padding: calc(var(--pas) * 3) var(--pas) calc(var(--pas) * 8);
}

.carte {
  background: var(--papier-2);
  border: 2px solid var(--trait-fort);
  box-shadow: var(--ombre);
  padding: calc(var(--pas) * 2);
  margin-bottom: calc(var(--pas) * 3);
}

.bouton {
  font: 700 .9rem/1 var(--sans);
  color: var(--encre);
  background: var(--papier-2);
  border: 2px solid var(--trait-fort);
  box-shadow: var(--ombre-fine);
  padding: 10px 14px;
  cursor: pointer;
  min-height: 44px;
}
.bouton:hover { background: var(--papier); }
.bouton:active { box-shadow: none; transform: translate(2px, 2px); }
.bouton:focus-visible { outline: 3px solid var(--serie-1); outline-offset: 2px; }

textarea, input[type="text"] {
  font: 400 .9rem/1.45 var(--mono);
  color: var(--encre);
  background: var(--papier);
  border: 2px solid var(--trait);
  padding: 10px;
  width: 100%;
  resize: vertical;
}
textarea:focus, input:focus { outline: 3px solid var(--serie-1); outline-offset: 1px; border-color: var(--trait-fort); }

table { border-collapse: collapse; width: 100%; font-size: .82rem; }
th, td { border: 1px solid var(--trait); padding: 5px 7px; text-align: right; white-space: nowrap; }
th { background: var(--papier); font-weight: 700; text-align: center; }
td:first-child, th:first-child { text-align: left; }
td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: var(--serie-1); }

@media print {
  body { background-image: none; }
  .carte { box-shadow: none; break-inside: avoid; }
  .sans-impression { display: none !important; }
}