/* base.css — un imprimé, pas une interface (D40).
   Encres en aplat, aucun dégradé, ombres portées franches et décalées. */

:root {
  --papier:        #EDE3CE;
  --papier-clair:  #F5EEDF;
  --papier-fonce:  #E0D3B6;
  --encre:         #221E18;
  --encre-douce:   #4A4239;
  --encre-pale:    #8d8375;
  --encre-2:       #2F4F5A;   /* seconde encre */
  --equipe-b:      #9FB9C2;   /* encre claire, équipe B (D41) */
  --equipe-b-txt:  #16252B;
  --trait:         #b3a68c;
  --trait-clair:   #c4b596;
  --alerte:        #A8372A;
  --hausse:        #3B6474;   /* jamais rouge/vert : ΔE 3,9 en deutéranopie */
  --baisse:        #A8372A;

  --bronze:  #A2542A;
  --argent:  #7C838C;
  --or:      #C08A1E;
  --diamant: #3E7C93;

  --mono: 'Space Mono', ui-monospace, 'Courier New', monospace;
  --sans: 'Familjen Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}

/* le grain d'impression, en couche fixe et non interactive */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: .30; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.mono { font-family: var(--mono); }

/* ---- bandeau ---- */
.bandeau {
  display: flex; align-items: center; gap: 18px;
  height: 60px; padding: 0 24px;
  background: var(--encre); color: var(--papier);
}
.bandeau h1 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; }
.bandeau .sep { width: 1px; height: 24px; background: #5c554a; }
.bandeau .contexte { font-family: var(--mono); font-size: 12px; color: #c9bda4; }
.bandeau .pousse { flex-grow: 1; }

/* ---- primitives imprimées ---- */
.carte { border: 2px solid var(--encre); background: var(--papier-clair); }
.ombre { box-shadow: 3px 3px 0 var(--encre); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 18px; border: 2px solid var(--encre);
  background: var(--papier-clair); color: var(--encre);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .13em;
  cursor: pointer; box-shadow: 3px 3px 0 var(--encre);
  transition: transform .05s linear, box-shadow .05s linear;
}
.bouton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
.bouton.primaire { background: var(--encre); color: var(--papier); box-shadow: 3px 3px 0 var(--encre-douce); }
.bouton.discret { box-shadow: none; border-color: var(--trait); color: var(--encre-pale); }

/* ---- jetons élèves : la valeur dit l'équipe, la couleur dit la catégorie (D41) ---- */
.jeton {
  display: flex; align-items: center; height: 38px;
  border: 2px solid var(--encre); background: var(--encre);
  box-shadow: 3px 3px 0 #C2B69C; color: #F0E7D3;
  font-size: 14px; font-weight: 600; user-select: none;
}
.jeton.b {
  background: var(--equipe-b); border-color: var(--encre-2);
  box-shadow: 3px 3px 0 var(--encre-2); color: var(--equipe-b-txt);
}
.jeton .categorie { align-self: stretch; width: 9px; }
.jeton .nom { padding: 0 9px; }
.jeton.absent { opacity: .34; pointer-events: none; }

.cat-bronze  { background: var(--bronze); }
.cat-argent  { background: var(--argent); }
.cat-or      { background: var(--or); }
.cat-diamant { background: var(--diamant); }

/* ---- delta : la couleur ne porte jamais l'information seule ---- */
.delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.delta.hausse { color: var(--hausse); }
.delta.baisse { color: var(--baisse); }
.delta.stable { color: var(--encre-pale); }

/* ---- saisie des scores : deux appareils, deux gestes (D52) ---- */
.pave { display: none; }
@media (pointer: coarse) { .pave { display: grid; } }
@media (pointer: fine)   { .pave { display: none; } }

.champ-score {
  width: 56px; height: 40px; text-align: center;
  border: 2px solid var(--encre); background: var(--papier);
  font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--encre);
}
.champ-score:focus { outline: none; border-color: var(--or); box-shadow: 2px 2px 0 var(--or); background: #fff8e8; }

.vide { border: 2px dashed var(--trait); background: rgba(179,166,140,.10); }

/* ---- l'app est faite pour un écran large en paysage (D44) ---- */
.avertissement-format { display: none; }
@media (max-width: 900px) {
  .avertissement-format {
    display: block; padding: 40px; font-size: 16px; line-height: 1.5;
  }
  .application { display: none; }
}