/* Tutti — CSS classless piloté par attributs.
   Tokens OKLCH en trois couches : primitifs → sémantiques → composants. */

/* ---------- Couche 1 : primitifs ---------- */
:root {
  --gris-0:    oklch(99% 0.002 250);
  --gris-100:  oklch(97% 0.004 250);
  --gris-200:  oklch(92% 0.006 250);
  --gris-400:  oklch(75% 0.010 250);
  --gris-600:  oklch(52% 0.015 250);
  --gris-800:  oklch(30% 0.020 250);
  --gris-900:  oklch(21% 0.020 250);

  --bleu-500:  oklch(52% 0.10 250);
  --bleu-600:  oklch(45% 0.09 250);
  --bleu-700:  oklch(38% 0.08 250);

  --vert-500:  oklch(58% 0.11 150);
  --ambre-500: oklch(72% 0.13 80);
  --rouge-500: oklch(55% 0.16 25);
}

/* ---------- Couche 2 : sémantiques ---------- */
:root {
  --couleur-fond:            var(--gris-100);
  --couleur-surface:         var(--gris-0);
  --couleur-encre:           var(--gris-900);
  --couleur-encre-secondaire: var(--gris-600);
  --couleur-bord:            var(--gris-200);
  --couleur-accent:          var(--bleu-600);
  --couleur-accent-actif:    var(--bleu-700);
  --couleur-ok:              var(--vert-500);
  --couleur-attention:       var(--ambre-500);
  --couleur-erreur:          var(--rouge-500);
}

/* ---------- Couche 3 : composants ---------- */
:root {
  --nav-fond:          var(--couleur-surface);
  --table-entete-fond: var(--gris-100);
  --table-ligne-bord:  var(--couleur-bord);
  --flash-fond:        oklch(95% 0.03 150);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: var(--couleur-encre);
  background: var(--couleur-fond);
}

main {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; margin-top: 2rem; }
a  { color: var(--couleur-accent); }
a:hover { color: var(--couleur-accent-actif); }

/* ---------- En-tête et navigation ---------- */
header {
  background: var(--nav-fond);
  border-bottom: 1px solid var(--couleur-bord);
  padding: 0.5rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

[data-marque] {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--couleur-accent);
}

[data-marque] span {
  color: var(--couleur-encre-secondaire);
  font-size: 0.9rem;
}

header nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

header nav a {
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: 0.3rem;
}

header nav a[aria-current="page"] {
  background: var(--couleur-accent);
  color: var(--gris-0);
}

footer {
  text-align: center;
  color: var(--couleur-encre-secondaire);
  padding: 1rem;
}

/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bord);
}

th, td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--table-ligne-bord);
}

thead th {
  background: var(--table-entete-fond);
  font-weight: 600;
}

caption {
  text-align: left;
  font-weight: 600;
  padding: 0.4rem 0;
}

/* ---------- États des affectations ---------- */
[data-etat="confirmé"]  { border-left: 3px solid var(--couleur-ok); }
[data-etat="pressenti"] { border-left: 3px solid var(--couleur-attention); }
[data-etat="conflit"]   { border-left: 3px solid var(--couleur-erreur); }
[data-etat="manquant"] {
  border-left: 3px dashed var(--gris-400);
  color: var(--couleur-encre-secondaire);
}

/* Proposition d'instrumentation (IMSLP) en attente de validation */
[data-proposition] {
  background: oklch(96% 0.03 250);
  border: 1px dashed var(--couleur-accent);
  border-radius: 0.3rem;
  padding: 0.5rem 0.8rem;
}

/* Pastille d'écart effectif affecté / requis */
[data-ecart] {
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 1rem;
  font-size: 0.85em;
  font-weight: 600;
  border-left: none;
}

[data-ecart][data-etat="ok"] {
  background: oklch(95% 0.03 150);
  color: oklch(35% 0.09 150);
  border: 1px solid var(--couleur-ok);
}

[data-ecart][data-etat="manquant"] {
  background: oklch(96% 0.04 80);
  color: oklch(40% 0.10 80);
  border: 1px dashed oklch(60% 0.12 80);
}

/* ---------- Formulaires ---------- */
form { margin: 1rem 0; }

fieldset {
  border: 1px solid var(--couleur-bord);
  background: var(--couleur-surface);
  border-radius: 0.3rem;
  padding: 0.75rem 1rem;
}

legend { font-weight: 600; padding: 0 0.3rem; }

label { display: inline-block; margin: 0.3rem 0 0.1rem; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--gris-400);
  border-radius: 0.3rem;
  background: var(--couleur-surface);
  color: inherit;
  max-width: 100%;
}

button {
  font: inherit;
  padding: 0.4rem 0.9rem;
  border: none;
  border-radius: 0.3rem;
  background: var(--couleur-accent);
  color: var(--gris-0);
  cursor: pointer;
}

button:hover { background: var(--couleur-accent-actif); }

button[data-danger] {
  background: transparent;
  color: var(--couleur-erreur);
  border: 1px solid var(--couleur-erreur);
  padding: 0.15rem 0.5rem;
}

/* Formulaires en ligne (actions dans les tables) */
td form { margin: 0; display: inline; }

/* ---------- Divers ---------- */
[data-flash] {
  background: var(--flash-fond);
  border: 1px solid var(--couleur-ok);
  border-radius: 0.3rem;
  padding: 0.5rem 0.8rem;
}

details {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bord);
  border-radius: 0.3rem;
  padding: 0.5rem 0.8rem;
  margin: 0.5rem 0;
}

summary { cursor: pointer; font-weight: 600; }

/* Page de connexion : légère vibration du diapason */
[data-anime="diapason"] {
  animation: vibration 2.5s ease-in-out infinite;
  transform-origin: 50% 90%;
}

@keyframes vibration {
  0%, 88%, 100% { transform: rotate(0deg); }
  90%  { transform: rotate(1.6deg); }
  93%  { transform: rotate(-1.4deg); }
  96%  { transform: rotate(0.8deg); }
}

@media (prefers-reduced-motion: reduce) {
  [data-anime="diapason"] { animation: none; }
}

/* ---------- Impression (feuille de service) ---------- */
@media print {
  header nav, footer, [data-flash], [data-ecran] { display: none; }

  body {
    background: none;
    color: black;
    font-size: 11pt;
  }

  header {
    border-bottom: 2px solid black;
    padding: 0 0 0.3rem;
  }

  main { max-width: none; padding: 0; }

  table, th, td { border-color: black; }

  [data-etat] { border-left: none; }
  [data-etat="pressenti"] td:first-child::after { content: " (pressenti)"; }
  [data-etat="conflit"] td:first-child::after   { content: " (conflit)"; }

  a { color: inherit; text-decoration: none; }
}