/* ============================================================
   PISTE APX — skin Gen Alpha du mode apprentissage.
   RÉFÉRENCE CANONIQUE : la DA du site vitrine + l'affiche
   affiches/affiche-apprentice-A3.html (autre session, 2026-08-28).
   Un seul monde visuel assumé (nuit violette) : le skin s'applique
   par body.apx et REMPLACE les deux thèmes — palette du flyer :
     fond #191036 · encre #F4F1FF · sourdine #A79FC9
     accent acide #C6F53F · rose #FF4FA3 · rouge PISTE #FF503C (logo)
   Typo : Archivo (inchangée) + Silkscreen (pixel, OFL, auto-hébergée)
   pour les moments APX. Grille 12mm du flyer -> grille 48px discrète.
   Chargé UNIQUEMENT quand le compte est en mode apprentissage.
   ============================================================ */

@font-face {
  font-family: "Silkscreen";
  src: url("/static/fonts/Silkscreen.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

body.apx {
  /* tokens du produit, re-peints au monde APX (un seul thème assumé) */
  --paper: #191036;
  --panel: #221743;
  --panel-2: #2A1D52;
  --ink: #F4F1FF;
  --smoke: #A79FC9;
  --line-soft: rgba(244, 241, 255, .18);
  --trait: rgba(244, 241, 255, .18);
  --red: #FF503C;              /* le carré du logo ne change JAMAIS */
  --red-soft: rgba(255, 79, 163, .14);
  --red-texte: #FF9DC9;        /* rose lisible sur nuit (erreurs) */
  --green: #C6F53F;            /* le vert sémantique devient l'acide */
  --carte: #221743;
  background: var(--paper);
  color: var(--ink);
}

/* la grille pixel du flyer, en filigrane */
body.apx::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background:
    linear-gradient(rgba(244, 241, 255, .05) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, rgba(244, 241, 255, .05) 1px, transparent 1px) 0 0/48px 48px;
}
body.apx > * { position: relative; z-index: 1; }

/* wordmark : PISTE ▪ + APX pixel acide (comme le flyer) */
body.apx .logo { color: var(--ink); }
body.apx .logo-apx {
  font-family: "Silkscreen", "Fragment Mono", monospace;
  font-size: .78em; color: #C6F53F; letter-spacing: .06em;
  margin-inline-start: .45rem;
}
body.apx .logo-mark .ch-cell { fill: var(--ink); }
body.apx .topbar { background: color-mix(in srgb, #191036 88%, transparent); }

/* CTA : l'acide porte l'action, encre nuit dessus (contraste ~13:1) */
/* `button` NU compris : le bouton de connexion n'a pas de classe .button,
   il gardait donc le rouge du thème clair sur fond nuit — contraste refusé
   par axe (audit du 29.08). L'acide sur nuit donne 14:1. */
body.apx .button, body.apx button:not(.link):not(.chip):not(.theme-toggle) {
  background: #C6F53F; color: #191036; border-color: #C6F53F;
}
body.apx .button.ghost {
  background: transparent; color: #C6F53F; border: 1px solid rgba(198, 245, 63, .55);
}
body.apx a, body.apx .link { color: #C6F53F; }
body.apx .link.danger, body.apx .danger-btn { color: #FF4FA3; border-color: #FF4FA3; }

/* eyebrows : le moment pixel (parcimonie — c'est l'épice, pas le plat) */
body.apx .eyebrow {
  font-family: "Silkscreen", "Fragment Mono", monospace;
  color: #FF4FA3; letter-spacing: .1em; font-size: .68rem;
}
body.apx .chip { border-color: rgba(244, 241, 255, .3); color: var(--ink); }
body.apx .chip-on { background: rgba(198, 245, 63, .14); border-color: #C6F53F; color: #C6F53F; }
body.apx .card, body.apx .pblock, body.apx .wiz-carte {
  background: var(--panel); border-color: var(--line-soft);
}
body.apx .badge.yes { background: rgba(198, 245, 63, .16); color: #C6F53F; }
body.apx .badge.warn { background: rgba(255, 79, 163, .16); color: #FF9DC9; }
body.apx input, body.apx select, body.apx textarea {
  background: #140C2C; color: var(--ink); border-color: rgba(244, 241, 255, .25);
}
body.apx ::placeholder { color: #7C74A3; }
body.apx .foot { color: var(--smoke); }
/* le pied reste DISCRET même en Gen Alpha : sans ça, la règle générale
   body.apx .link repeignait les liens du pied en acide, plus voyants que
   le contenu (contraste sourdine sur nuit : 7.2:1, AA large) */
body.apx .foot-liens .link { color: var(--smoke); }
body.apx .foot-liens .link:hover { color: var(--ink); }
body.apx .ok-line { color: #C6F53F; }
body.apx .dossier-etat li.ok { color: var(--ink); }