/* ==========================================================================
   Thème commun Patamusic — variables, base, composants partagés.
   Chargé par toutes les pages avant la feuille spécifique à la page.
   ========================================================================== */
:root{
  --bg:#13110d;
  --panel:#1b1813;
  --panel2:#221e17;
  --border:#2e2a21;
  --text:#ece7da;
  --muted:#9b9484;
  --faint:#5d574a;
  --amber:#f0a32b;
  --teal:#45c79e;
  --coral:#e8643c;
  --violet:#8f7fe8;
  --gray:#8b8576;
  --line:#3b362b;
  --danger:#e8643c;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  background-image:radial-gradient(ellipse 80% 40% at 50% -10%, rgba(240,163,43,.05), transparent);
  color:var(--text);
  font-family:'Outfit',sans-serif;
  font-weight:300;
}

a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1400px;margin:0 auto;padding:0 16px 50px}

h1{font-family:'Fraunces',serif;font-weight:600}
h2{font-family:'Fraunces',serif;font-weight:600}

/* ---- légende (pastilles de couleur) ---- */
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--muted)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}

/* ---- cases d'accord / de note ---- */
.cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:58px;padding:6px 9px;border-radius:9px;border:1px solid;
}
.cell .ch{font-size:15.5px;font-weight:500;line-height:1.2}
.cell .dg{font-size:11px;color:var(--muted);line-height:1.3}
.cells{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}

/* ---- chips ---- */
.chip{border:1px solid var(--border);background:var(--panel);border-radius:9px;padding:4px 11px;font-size:13.5px}
.chip b{font-weight:500;margin-right:7px}
.chip span{color:var(--muted);font-size:12px}

/* ---- boutons (barre / sélecteurs) ---- */
.btn{
  background:var(--panel2);border:1px solid var(--border);color:var(--muted);
  font-family:'Outfit',sans-serif;font-size:13px;border-radius:8px;
  padding:4px 10px;cursor:pointer;transition:opacity .15s;
}
.btn:hover{opacity:.85}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.on{background:rgba(240,163,43,.16);border-color:var(--amber);color:var(--amber);font-weight:500}
.btn-primary{background:rgba(240,163,43,.16);border-color:var(--amber);color:var(--amber);font-weight:500}
.btn-danger{border-color:rgba(232,100,60,.5);color:var(--coral)}

/* ==========================================================================
   Toasts (feedback explicite après chaque action)
   ========================================================================== */
#toasts{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{
  background:var(--panel2);border:1px solid var(--border);border-left-width:3px;
  border-radius:8px;padding:10px 14px;font-size:13.5px;color:var(--text);
  min-width:200px;max-width:340px;box-shadow:0 6px 24px rgba(0,0,0,.4);
  animation:toast-in .18s ease-out;
}
.toast.success{border-left-color:var(--teal)}
.toast.error{border-left-color:var(--coral)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ==========================================================================
   Modale (formulaires ajout / suppression)
   ========================================================================== */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(8,7,5,.66);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;
  z-index:50;overflow:auto;
}
.modal{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:20px 22px;width:100%;max-width:560px;
}
.modal h2{font-size:19px;margin:0 0 14px}
.modal .field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.modal label{font-size:12.5px;color:var(--faint)}
.modal input,.modal select,.modal textarea{
  background:var(--panel2);border:1px solid var(--border);color:var(--text);
  font-family:'Outfit',sans-serif;font-size:14px;border-radius:8px;padding:7px 10px;
}
.modal textarea{resize:vertical;min-height:54px}
.modal .row2{display:flex;gap:10px;flex-wrap:wrap}
.modal .row2 .field{flex:1;min-width:120px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}