/* ============================================================
   Appskillia — thème 1B
   Source unique des couleurs, de la typographie et des composants.
   Importé par TOUTES les pages de l'application.
   ------------------------------------------------------------
   TROIS ÉCARTS ASSUMÉS par rapport au fichier livré, et pourquoi :

   1. PAS d'@import vers fonts.googleapis.com. L'application héberge
      des données nominatives de stagiaires ; elle ne doit émettre
      aucune requête vers un tiers au chargement. Les deux mêmes
      familles sont auto-hébergées dans assets/polices.css (89 Ko),
      qui doit être chargé AVANT ce fichier.

   2. Un bloc SOMBRE. Le thème livré est clair uniquement ; l'app
      supportait déjà « prefers-color-scheme: dark ». Charger un
      thème clair par-dessus aurait rendu l'interface illisible pour
      qui a son système en sombre. Seuls les jetons sont redéfinis.

   3. Un PONT en fin de fichier. Les écrans existants consomment des
      variables de rôle (--brand, --ink-1, --page…). Elles sont
      désormais DÉRIVÉES des jetons --aps-*. Conséquence voulue :
      changer --aps-teal en haut de ce fichier repeint réellement
      toute l'application, ce que promet le guide.

   Quatre couleurs livrées ont été assombries pour le PETIT texte
   (--aps-text-faint et les trois *-text de statut) : elles ne
   tenaient pas le rapport 4,5:1 sous 18,66 px. Le ton reste le même,
   il devient lisible. Mesures dans scripts/contraste.mjs.

   Ce qui n'est PAS concerné : les documents imprimés (.pg, .doc),
   qui portent leur propre feuille dans docCss() — un certificat ne
   suit pas la mode de l'interface.
   ============================================================ */

:root {
  /* --- Couleurs de marque --- */
  --aps-ink: #0C2B2E;        /* encre : texte, barre latérale, bandeaux */
  --aps-teal: #12595E;       /* action principale, liens */
  --aps-coral: #F0563A;      /* validation, alerte, accent studio */
  --aps-sand: #EDE7DC;       /* sable : fond de marque */

  /* Le même corail, assombri, réservé au petit texte. */
  --aps-coral-text: #C62B0F;
  /* Le teal du PETIT texte posé sur une teinte (surface-2, fond conforme) : identique au teal en clair, éclairci en
     sombre, où le teal tombait à 4,17:1 sur --aps-surface-2 et 4,28:1 sur --aps-success-bg (10/10/2026). */
  --aps-teal-text: #12595E;

  /* --- Neutres d'interface --- */
  --aps-bg: #F7F4EE;         /* fond d'application */
  --aps-surface: #FFFFFF;    /* cartes, panneaux */
  --aps-surface-2: #FBF9F5;  /* carte imbriquée, champ */
  --aps-surface-3: #F1EEE7;  /* champ de recherche, puce inactive */
  --aps-track: #EFEAE1;      /* rail de barre de progression */
  --aps-line: rgba(12, 43, 46, 0.10);
  --aps-line-strong: rgba(12, 43, 46, 0.16);

  /* --- Texte --- */
  --aps-text: #0C2B2E;
  --aps-text-muted: #4A5F60;
  --aps-text-faint: #697271;     /* assombri : le #8A9695 livré tombait à 3,0:1 */
  --aps-on-ink: #EDE7DC;         /* texte sur fond encre */
  --aps-on-ink-muted: #8FA3A2;

  /* Texte posé SUR un aplat de couleur. En clair c'est du blanc ; en sombre
     les aplats s'éclaircissent et c'est l'encre qui redevient lisible. */
  --aps-on-teal: #FFFFFF;
  --aps-on-info: #FFFFFF;
  --aps-on-coral: #0B282B;       /* l'encre d'un cran plus dense : 4,51:1 sur le corail */

  /* Feuille « papier » : l'aperçu d'un mail tel que le destinataire le reçoit. Le HTML d'un mail porte ses
     couleurs en ligne (#222, #555, liens #0d5c63), pensées pour un fond blanc : ces deux jetons ne sont PAS
     redéfinis en sombre (recette du 10/10 — le corps tombait à 1,4:1 sur la surface sombre). */
  --aps-paper: #FFFFFF;
  --aps-on-paper: #222222;

  /* Bordure des CHAMPS de saisie : 3:1 exigé par le critère 1.4.11, un champ
     doit se voir. Les filets décoratifs restent en --aps-line. */
  --aps-field-border: rgba(12, 43, 46, 0.50);

  /* --- Statuts (lisibles sur fond clair) --- */
  --aps-success: #1E8A6E;
  --aps-success-bg: #EDF5F1;
  --aps-warning: #A6906B;
  --aps-warning-bg: #FBF1EA;
  --aps-danger: #C4442C;
  --aps-danger-bg: #FBEDE8;
  --aps-info: #4A5A7A;           /* ardoise : sous-onglets, boutons secondaires */

  /* Versions assombries pour le texte de statut sous 18,66 px. */
  --aps-success-text: #16705A;
  --aps-warning-text: #6F5E3C;
  --aps-danger-text: #A93A25;

  /* --- Accents de blocs du studio ---
     Ces valeurs servent AUSSI au titre du bloc, donc à du texte de 14 px :
     elles tiennent toutes le 4,5:1 sur la surface. Le sable et le corail
     livrés ont été assombris pour cela ; le liseré garde la même famille. */
  --aps-block-briefing: #12595E;
  --aps-block-avatar: #7A4B8F;
  --aps-block-choix: #16705A;
  --aps-block-condition: #266C6A;
  --aps-block-photo: #867456;
  --aps-block-video: #C62B0F;
  --aps-block-resultat: #0C2B2E;

  /* --- Typographie --- */
  --aps-font-display: "Space Grotesk", "Instrument Sans", system-ui, sans-serif;
  --aps-font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Rayons --- */
  --aps-radius-sm: 8px;
  --aps-radius: 12px;
  --aps-radius-lg: 16px;
  --aps-radius-xl: 20px;
  --aps-radius-pill: 999px;

  /* --- Espacements --- */
  --aps-space-1: 4px;
  --aps-space-2: 8px;
  --aps-space-3: 12px;
  --aps-space-4: 16px;
  --aps-space-5: 20px;
  --aps-space-6: 24px;
  --aps-space-8: 32px;

  /* --- Ombres --- */
  --aps-shadow-card: 0 8px 20px -12px rgba(12, 43, 46, 0.30);
  --aps-shadow-app: 0 24px 60px -30px rgba(12, 43, 46, 0.35);
}

/* ============================================================
   VARIANTE SOMBRE
   L'encre devient le fond, le sable devient l'encre. Le teal
   s'éclaircit : à pleine saturation il tombe sous le seuil de
   contraste sur fond sombre.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --aps-bg: #0C2B2E;
    --aps-surface: #12383A;
    --aps-surface-2: #174144;
    --aps-surface-3: #1B494C;
    --aps-track: #1A4245;
    --aps-line: rgba(237, 231, 220, 0.12);
    --aps-line-strong: rgba(237, 231, 220, 0.20);

    --aps-text: #EDE7DC;
    --aps-text-muted: #B7C7C4;
    --aps-text-faint: #96ACA9;  /* éclairci le 10/10/2026 : #8AA09D tombait à 4,05:1 sur --aps-surface-2 */
    --aps-teal: #6FA8A5;
    --aps-coral: #F0563A;
    --aps-coral-text: #F2836D;
    --aps-teal-text: #85BAB7;
    --aps-info: #9FB0CE;

    --aps-success: #6FC3A6;
    --aps-success-bg: #14403C;
    --aps-warning: #DCA85F;
    --aps-warning-bg: #3A3220;
    --aps-danger: #EE7B67;
    --aps-danger-bg: #43241F;
    --aps-success-text: #8CD3B9;
    --aps-warning-text: #E6BE84;
    --aps-danger-text: #F29685;

    /* Les aplats s'éclaircissent : c'est l'encre qui redevient lisible dessus. */
    --aps-on-teal: #0C2B2E;
    --aps-on-info: #0C2B2E;
    --aps-field-border: rgba(237, 231, 220, 0.42);

    --aps-block-briefing: #79A1A4;
    --aps-block-avatar: #AD90BA;
    --aps-block-choix: #59A894;
    --aps-block-condition: #6AA4A2;
    --aps-block-photo: #AC9775;
    --aps-block-video: #F2836D;
    --aps-block-resultat: #8F9D9F;

    --aps-shadow-card: 0 8px 20px -12px rgba(0, 0, 0, 0.55);
    --aps-shadow-app: 0 24px 60px -30px rgba(0, 0, 0, 0.65);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --aps-bg: #0C2B2E;
  --aps-surface: #12383A;
  --aps-surface-2: #174144;
  --aps-surface-3: #1B494C;
  --aps-track: #1A4245;
  --aps-line: rgba(237, 231, 220, 0.12);
  --aps-line-strong: rgba(237, 231, 220, 0.20);

  --aps-text: #EDE7DC;
  --aps-text-muted: #B7C7C4;
  --aps-text-faint: #96ACA9;  /* éclairci le 10/10/2026 : #8AA09D tombait à 4,05:1 sur --aps-surface-2 */
  --aps-teal: #6FA8A5;
  --aps-coral: #F0563A;
  --aps-coral-text: #F2836D;
  --aps-teal-text: #85BAB7;
  --aps-info: #9FB0CE;

  --aps-success: #6FC3A6;
  --aps-success-bg: #14403C;
  --aps-warning: #DCA85F;
  --aps-warning-bg: #3A3220;
  --aps-danger: #EE7B67;
  --aps-danger-bg: #43241F;
  --aps-success-text: #8CD3B9;
  --aps-warning-text: #E6BE84;
  --aps-danger-text: #F29685;

  --aps-on-teal: #0C2B2E;
  --aps-on-info: #0C2B2E;
  --aps-field-border: rgba(237, 231, 220, 0.42);

  --aps-block-briefing: #79A1A4;
  --aps-block-avatar: #AD90BA;
  --aps-block-choix: #59A894;
  --aps-block-condition: #6AA4A2;
  --aps-block-photo: #AC9775;
  --aps-block-video: #F2836D;
  --aps-block-resultat: #8F9D9F;

  --aps-shadow-card: 0 8px 20px -12px rgba(0, 0, 0, 0.55);
  --aps-shadow-app: 0 24px 60px -30px rgba(0, 0, 0, 0.65);
}

/* ============================================================
   BASE
   ============================================================ */

body {
  margin: 0;
  background: var(--aps-bg);
  color: var(--aps-text);
  font-family: var(--aps-font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* La couleur est HÉRITÉE, jamais imposée. Un titre posé sur un bandeau teal ou
   sur l'encre doit prendre la couleur de son fond, pas celle du texte courant :
   le thème livré écrivait « color: var(--aps-text) » ici, et le titre du
   bandeau de connexion sortait en sable sur le teal, à 2,2:1. La couleur du
   corps de page est déjà posée sur body, les titres de premier niveau la
   reçoivent donc sans que cette règle ait à le redire. */
h1, h2, h3, h4, h5, h6,
.aps-display {
  font-family: var(--aps-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: inherit;
  margin: 0;
}

h1 { font-size: 40px; }
h2 { font-size: 24px; }
h3 { font-size: 17px; }

a { color: var(--aps-teal); text-decoration: none; }
a:hover { color: var(--aps-coral-text); }

.aps-muted { color: var(--aps-text-muted); }
.aps-faint { color: var(--aps-text-faint); }

.aps-label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aps-text-muted);
}

.aps-eyebrow {
  font-family: var(--aps-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aps-text-muted);
}

/* ============================================================
   COQUE D'APPLICATION
   ============================================================ */

.aps-app {
  display: flex;
  min-height: 100vh;
  background: var(--aps-bg);
}

.aps-sidebar {
  width: 232px;
  flex: none;
  background: var(--aps-ink);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.aps-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--aps-font-display);
  font-size: 18px;
  letter-spacing: -0.03em;
  color: var(--aps-on-ink);
}
.aps-sidebar__brand b { font-weight: 700; }
.aps-sidebar__brand span { font-weight: 400; color: var(--aps-on-ink-muted); }

.aps-nav { display: flex; flex-direction: column; gap: 3px; }

.aps-nav__item {
  padding: 10px 13px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: #C3D0CF;
  font-size: 15px;
  cursor: pointer;
}
.aps-nav__item small { font-size: 12px; color: #93A6A5; }
.aps-nav__item:hover { background: rgba(237, 231, 220, 0.06); }

.aps-nav__item--active {
  background: rgba(237, 231, 220, 0.10);
  color: var(--aps-on-ink);
  font-weight: 500;
}
.aps-nav__item--active small { color: var(--aps-on-ink-muted); }

.aps-sidebar__footer {
  margin-top: auto;
  background: rgba(237, 231, 220, 0.07);
  border-radius: 13px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aps-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.aps-topbar {
  background: var(--aps-surface);
  border-bottom: 1px solid var(--aps-line);
  padding: 18px var(--aps-space-8);
  display: flex;
  align-items: center;
  gap: var(--aps-space-5);
}
.aps-topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--aps-space-3);
}

.aps-content {
  flex: 1;
  padding: 22px var(--aps-space-8) 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ============================================================
   SOUS-ONGLETS (pastilles)
   ============================================================ */

.aps-subtabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: var(--aps-space-4) var(--aps-space-8) 0;
}
.aps-subtab {
  font-size: 14px;
  color: var(--aps-text-muted);
  background: var(--aps-surface);
  border: 1px solid var(--aps-line-strong);
  border-radius: var(--aps-radius-pill);
  padding: 9px 18px;
  cursor: pointer;
}
.aps-subtab:hover { border-color: var(--aps-teal); color: var(--aps-teal); }
.aps-subtab--active {
  color: var(--aps-on-info);
  background: var(--aps-info);
  border-color: var(--aps-info);
}

/* ============================================================
   SURFACES
   ============================================================ */

.aps-card {
  background: var(--aps-surface);
  border: 1px solid var(--aps-line);
  border-radius: var(--aps-radius-lg);
  padding: 22px 24px;
}
.aps-card--nested {
  background: var(--aps-surface-2);
  border-radius: 14px;
  padding: 18px;
}
.aps-card--accent { border-left: 4px solid var(--aps-info); }

.aps-kpi { display: flex; flex-direction: column; gap: 5px; }
.aps-kpi__value {
  font-family: var(--aps-font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   BOUTONS
   ============================================================ */

.aps-btn {
  font-family: var(--aps-font-display);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 11px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.aps-btn--primary { background: var(--aps-teal); color: var(--aps-on-teal); }
.aps-btn--primary:hover { background: #0E4A4E; }

.aps-btn--secondary {
  background: var(--aps-surface);
  color: var(--aps-text-muted);
  border-color: var(--aps-line-strong);
}
.aps-btn--secondary:hover { border-color: var(--aps-teal); color: var(--aps-teal); }

.aps-btn--accent { background: var(--aps-info); color: var(--aps-on-info); }
.aps-btn--accent:hover { background: #3B4A66; }

.aps-btn--studio { background: var(--aps-coral); color: var(--aps-on-coral); }
.aps-btn--studio:hover { background: #DC482D; }

.aps-btn--ghost { background: transparent; color: var(--aps-danger-text); }

.aps-btn:focus-visible,
.aps-subtab:focus-visible {
  outline: 2px solid var(--aps-teal);
  outline-offset: 2px;
}

/* ============================================================
   CHAMPS
   ============================================================ */

.aps-field { display: flex; flex-direction: column; gap: 7px; }
.aps-field > label { font-size: 13px; color: var(--aps-text-muted); }

.aps-input {
  background: var(--aps-surface);
  border: 1px solid var(--aps-field-border);
  border-radius: 10px;
  padding: 12px 15px;
  font-family: var(--aps-font-body);
  font-size: 15px;
  color: var(--aps-text);
  width: 100%;
  box-sizing: border-box;
}
.aps-input::placeholder { color: var(--aps-text-faint); }
.aps-input:focus {
  outline: none;
  border-color: var(--aps-teal);
  box-shadow: 0 0 0 3px rgba(18, 89, 94, 0.12);
}

.aps-search {
  background: var(--aps-surface-3);
  border: none;
  border-radius: 9px;
  padding: 10px 16px;
  font-family: var(--aps-font-body);
  font-size: 14px;
  color: var(--aps-text-muted);
}

/* ============================================================
   STATUTS
   ============================================================ */

.aps-badge {
  font-size: 13px;
  border-radius: var(--aps-radius-pill);
  padding: 4px 11px;
  display: inline-block;
}
.aps-badge--success { color: var(--aps-success-text); background: var(--aps-success-bg); }
.aps-badge--warning { color: var(--aps-warning-text); background: var(--aps-warning-bg); }
.aps-badge--danger  { color: var(--aps-danger-text);  background: var(--aps-danger-bg); }
.aps-badge--info    { color: var(--aps-teal);         background: rgba(18, 89, 94, 0.10); }
.aps-badge--neutral { color: var(--aps-text-muted);   background: var(--aps-surface-3); }

.aps-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
}
.aps-dot--todo    { background: #C4B79F; }
.aps-dot--doing   { background: var(--aps-coral); }
.aps-dot--done    { background: var(--aps-success); }

.aps-alert {
  border-radius: var(--aps-radius);
  padding: 14px 18px;
  font-size: 14px;
}
.aps-alert--danger  { background: var(--aps-danger-bg);  border: 1px solid rgba(240, 86, 58, 0.24); color: #6B4A41; }
.aps-alert--warning { background: var(--aps-warning-bg); border: 1px solid rgba(166, 144, 107, 0.32); color: #5C4E36; }
.aps-alert--success { background: var(--aps-success-bg); border: 1px solid rgba(30, 138, 110, 0.24); color: #1E5A4B; }

/* ============================================================
   PROGRESSION
   ============================================================ */

.aps-progress {
  height: 8px;
  border-radius: 4px;
  background: var(--aps-track);
  overflow: hidden;
  display: block;
}
.aps-progress > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--aps-teal);
}
/* Le corail plein ne se detache pas assez du rail sable (2,87:1). La teinte
   dense du meme corail passe a 5:1 : une barre en alerte doit se voir. */
.aps-progress--alert > span { background: var(--aps-coral-text); }
.aps-progress--done  > span { background: var(--aps-success); }

/* ============================================================
   TABLEAUX
   ============================================================ */

.aps-table { width: 100%; border-collapse: collapse; }
.aps-table th {
  text-align: left;
  font-weight: 400;
  font-size: 13px;
  color: var(--aps-text-muted);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--aps-line);
}
.aps-table td {
  font-size: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--aps-line);
}
.aps-table tr:last-child td { border-bottom: none; }
.aps-table tbody tr:hover td { background: var(--aps-surface-2); }

/* ============================================================
   STUDIO — blocs du canevas
   ============================================================ */

.aps-block {
  background: var(--aps-surface);
  border: 1px solid var(--aps-line-strong);
  border-left: 4px solid var(--aps-block-briefing);
  border-radius: var(--aps-radius);
  box-shadow: var(--aps-shadow-card);
  overflow: hidden;
}
.aps-block__head {
  padding: 11px 14px;
  border-bottom: 1px solid var(--aps-line);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}
.aps-block__body { padding: 13px 14px; font-size: 14px; color: var(--aps-text-muted); }

.aps-block--briefing  { border-left-color: var(--aps-block-briefing); }
.aps-block--briefing  .aps-block__head { color: var(--aps-block-briefing); }
.aps-block--avatar    { border-left-color: var(--aps-block-avatar); }
.aps-block--avatar    .aps-block__head { color: var(--aps-block-avatar); }
.aps-block--choix     { border-left-color: var(--aps-block-choix); }
.aps-block--choix     .aps-block__head { color: var(--aps-block-choix); }
.aps-block--condition { border-left-color: var(--aps-block-condition); }
.aps-block--condition .aps-block__head { color: var(--aps-block-condition); }
.aps-block--photo     { border-left-color: var(--aps-block-photo); }
.aps-block--photo     .aps-block__head { color: var(--aps-block-photo); }
.aps-block--video     { border-left-color: var(--aps-block-video); }
.aps-block--video     .aps-block__head { color: var(--aps-block-video); }
.aps-block--resultat  { border-left-color: var(--aps-block-resultat); }
.aps-block--resultat  .aps-block__head { color: var(--aps-block-resultat); }

.aps-canvas {
  background: var(--aps-surface-2);
  border: 1px solid var(--aps-line-strong);
  border-radius: 14px;
  background-image: radial-gradient(rgba(12, 43, 46, 0.13) 1px, transparent 1px);
  background-size: 20px 20px;
  position: relative;
  overflow: hidden;
}

/* Le lecteur vidéo reste sombre : c'est le seul bloc encre en zone claire. */
.aps-player {
  background: var(--aps-ink);
  border-radius: var(--aps-radius-lg);
  color: var(--aps-on-ink-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--aps-space-4);
}

/* ============================================================
   PONT — les variables de rôle des écrans existants
   ------------------------------------------------------------
   Écart n° 3 annoncé en tête de fichier. Rien ici n'invente une
   couleur : chaque ligne DÉSIGNE un jeton --aps-*. C'est ce qui
   rend vraie la promesse du guide — une couleur changée en haut de
   ce fichier repeint l'application entière.
   Le jour où les écrans porteront les classes .aps-*, ce bloc
   disparaît sans que rien d'autre ne bouge.
   ============================================================ */

:root {
  --surface-1: var(--aps-surface);
  --surface-2: var(--aps-surface-2);
  --page: var(--aps-bg);
  --ink-1: var(--aps-text);
  --ink-2: var(--aps-text-muted);
  --ink-3: var(--aps-text-faint);
  --grid: var(--aps-line);
  --axis: var(--aps-line-strong);
  --border: var(--aps-line-strong);

  --brand: var(--aps-teal);
  --brand-600: var(--aps-ink);
  --brand-tint: var(--aps-success-bg);
  --beige: var(--aps-sand);

  /* Séries de graphiques : teal, corail, vert, sable — l'ordre du guide. */
  --s1: var(--aps-teal);
  --s2: var(--aps-coral-text);
  --s3: var(--aps-success);
  --s4: var(--aps-warning);

  --good: var(--aps-success);
  --good-text: var(--aps-success-text);
  --warning: var(--aps-warning-text);
  --serious: var(--aps-coral-text);
  --critical: var(--aps-danger-text);

  --seq250: #BFD4D3;
  --seq400: #6E9C9A;
  --seq550: var(--aps-teal);

  /* Ardoise : sous-onglet actif et bouton secondaire, comme aux maquettes. */
  --ardoise: var(--aps-info);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-600: var(--aps-teal);
    --seq250: #24504F;
    --seq400: #45817E;
  }
}
:root[data-theme="dark"] {
  --brand-600: var(--aps-teal);
  --seq250: #24504F;
  --seq400: #45817E;
}

/* Glisser-déposer (public/assets/depot.js). Tant qu'un fichier survole la page (<html class="depot-actif">),
   chaque zone de dépôt (.depot-cible) se montre en pointillés : on voit où viser. Une zone posée dans une
   autre (la ligne d'une étape dans sa phase) ne se montre qu'au survol, sinon les contours s'empilent. La
   zone sous le pointeur (.depot-survol) prend un trait plein et un fond. Fond --aps-surface-3 et non
   --aps-sand : le sable reste clair en thème sombre et le texte y deviendrait illisible. */
.depot-actif .depot-cible { outline: 2px dashed var(--aps-teal); outline-offset: 2px; }
.depot-actif .depot-cible .depot-cible { outline-color: transparent; }
.depot-survol,
.depot-actif .depot-cible.depot-survol { outline: 2px solid var(--aps-teal); outline-offset: 2px; background: var(--aps-surface-3); }