/* ==========================================================================
   Excellia v9 : « Instrument sur papier ». Kit de matière partagé.
   Atelier et app My Agent le chargent AVANT leur propre feuille.
   Règle d'or : tout est encre sur papier ; seule la voix de Léa a des couleurs
   (corail, violet, bleu, toujours en grains) ; le bleu seul = en direct ;
   orange = à vérifier ; rouge = urgence ; vert = en service ou fait.
   Pas de grain de texture ni de règle graduée (retirés le 30/09, décision d'Evan).
   Rien de ce kit ne bouge sauf le halo de la LED en direct. Rien ne retarde une réponse.
   ========================================================================== */
:root {
  /* Papier et encre (inchangés : ce sont ceux du site) */
  --paper: #f6f5f2;
  --ink: #0b0b0b;
  --ink-2: #5b5a56;
  --ink-3: #8a8883;             /* libellés tertiaires, graduations */
  /* Surfaces : trois niveaux et un creux */
  --sheet: #fbfaf8;             /* feuille posée : cartes */
  --sheet-hi: #fefdfb;          /* haut de la feuille (la lumière tombe d'en haut) */
  --raised: #ffffff;            /* objet au premier plan : volet, fenêtre, pop-up */
  --well: #efede8;              /* creux : champs, pistes, cases de code */
  /* Filets */
  --hair: rgba(11, 11, 11, 0.09);
  --hair-2: rgba(11, 11, 11, 0.16);
  --hair-3: rgba(11, 11, 11, 0.32);
  --hair-dash: rgba(11, 11, 11, 0.14);
  /* Signes */
  --live: #0a84ff;  --live-ink: #0059c7;  --live-wash: rgba(10, 132, 255, 0.10);
  --warn: #9a4a00;  --warn-wash: rgba(178, 80, 0, 0.09);
  --danger: #a1231b; --danger-wash: rgba(161, 35, 27, 0.08);
  --ok: #1d7a3e;    --ok-wash: rgba(29, 122, 62, 0.09);
  /* Voix de Léa : les trois couleurs des particules, jamais en aplat */
  --v-corail: #ff5a3c; --v-violet: #8b5cf6; --v-bleu: #2f6bff;
  /* Lumière et relief (ombres en couches, teinte chaude du papier) */
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --lift-1: 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 1px rgba(46, 40, 30, 0.04), 0 2px 5px -2px rgba(46, 40, 30, 0.06), 0 10px 22px -12px rgba(46, 40, 30, 0.10);
  --lift-2: 0 0 0 1px var(--hair-2), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(46, 40, 30, 0.06), 0 6px 14px -6px rgba(46, 40, 30, 0.10), 0 22px 44px -18px rgba(46, 40, 30, 0.18);
  --lift-3: 0 0 0 1px rgba(11, 11, 11, 0.10), inset 0 1px 0 #fff, 0 2px 4px rgba(46, 40, 30, 0.06), 0 18px 40px -14px rgba(46, 40, 30, 0.22), 0 48px 96px -32px rgba(46, 40, 30, 0.30);
  --sunk: inset 0 0 0 1px rgba(11, 11, 11, 0.07), inset 0 1px 2px rgba(46, 40, 30, 0.10), 0 1px 0 rgba(255, 255, 255, 0.8);
  /* Encre en relief : boutons primaires, carte Pro */
  --ink-face: linear-gradient(180deg, #262625 0%, #111110 55%, #0b0b0b 100%);
  --ink-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 14px -8px rgba(0, 0, 0, 0.45);
  /* Trame ordonnée 4 x 4 (univers noir et blanc uniquement) */
  --trame-blanche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath fill='%23fff' d='M0 0h1v1H0zM2 2h1v1H2z'/%3E%3C/svg%3E");
  --trame-noire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath fill='%230b0b0b' d='M0 0h1v1H0zM2 2h1v1H2z'/%3E%3C/svg%3E");
  /* Mouvement (inchangé) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---------- Matière ---------- */
/* Papier : à poser sur le calque de fond (fixe). Lumière venue d'en haut, statique. */
.m-paper {
  background-color: var(--paper);
  background-image: radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(46, 40, 30, 0.045) 100%);
  background-size: 100% 100%, 100% 100%;
}
/* Feuille posée : cartes. */
.m-sheet {
  background-color: var(--sheet);
  background-image: linear-gradient(180deg, var(--sheet-hi), var(--sheet));
  background-size: 100% 100%;
  box-shadow: var(--lift-1);
  border: 0;
}
.m-raised { background: var(--raised); box-shadow: var(--lift-3); border: 0; }
/* Creux : champs, pistes, cases. */
.m-well { background: var(--well); box-shadow: var(--sunk); border: 0; }
/* Encre en relief. */
.m-ink {
  color: #fff;
  background-color: #0b0b0b;
  background-image: var(--ink-face);
  background-size: 100% 100%;
  box-shadow: var(--ink-edge);
  border: 0;
}

/* ---------- Structure d'instrument ---------- */
/* Champ de mesure : grille de points fondue. Uniquement là où vit l'orbe ou un état vide. */
.m-field { position: relative; }
.m-field::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(11, 11, 11, 0.26) 0.8px, transparent 1.25px) 0 0 / 20px 20px;
  -webkit-mask: radial-gradient(64% 58% at 50% 45%, #000 24%, transparent 80%);
          mask: radial-gradient(64% 58% at 50% 45%, #000 24%, transparent 80%);
}
/* Croix de repérage aux quatre coins d'un bloc (surfaces « document » seulement). */
.m-marks { position: relative; }
.m-marks::after {
  content: ""; position: absolute; inset: -14px; pointer-events: none;
  --c: var(--hair-3);
  background:
    linear-gradient(var(--c), var(--c)) 6px 0 / 1px 13px no-repeat, linear-gradient(var(--c), var(--c)) 0 6px / 13px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 6px) 0 / 1px 13px no-repeat, linear-gradient(var(--c), var(--c)) 100% 6px / 13px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 6px 100% / 1px 13px no-repeat, linear-gradient(var(--c), var(--c)) 0 calc(100% - 6px) / 13px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 6px) 100% / 1px 13px no-repeat, linear-gradient(var(--c), var(--c)) 100% calc(100% - 6px) / 13px 1px no-repeat;
}
/* Crochets d'angle : UNIQUEMENT pour marquer la sélection ou l'élément actif (un seul jeu visible). */
.m-brackets { position: relative; }
.m-brackets::after {
  content: ""; position: absolute; inset: -6px; pointer-events: none; border-radius: 4px;
  --c: var(--ink); --l: 10px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1.5px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px var(--l) no-repeat;
  opacity: 0; transform: scale(1.03); transition: opacity 160ms var(--ease-out), transform 220ms var(--ease-out);
}
.m-brackets.is-on::after, .m-brackets[aria-current="true"]::after, .m-brackets[aria-selected="true"]::after { opacity: 1; transform: none; }

/* ---------- Typographie d'instrument ---------- */
.m-label { font: 500 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.m-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.m-index { font: 500 11px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- LED d'état ---------- */
.m-led {
  --c: #c9c7c1; position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), var(--c);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25), 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent);
}
.m-led--ok { --c: var(--ok); }
.m-led--warn { --c: #c46a12; }
.m-led--danger { --c: #d0342a; }
.m-led--live { --c: var(--live); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(10, 132, 255, 0.16), 0 0 8px rgba(10, 132, 255, 0.42); }
/* Seule animation permanente autorisée : le halo de la LED en direct (opacité d'un pseudo-élément, compositeur). */
.m-led--live::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(10, 132, 255, 0.5);
  animation: m-led-halo 1.8s var(--ease-out) infinite;
}
@keyframes m-led-halo { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: scale(1.6); } }

/* ---------- La voix de Léa ---------- */
/* Fil de voix et filet de voix : retirés le 01/10 (plus aucune barre multicolore). Les classes restent, sans dessin. */
.m-voice { position: relative; }
.m-voice::before { content: none; }
.m-voice-rule { display: none; }

/* ---------- Réduction du mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  .m-led--live::after { animation: none; opacity: 0.5; transform: none; }
  .m-brackets::after { transition: opacity 160ms linear; transform: none; }
}