/* ═══════════════════════════════════════════════════════════════
   COACH — Design System SPORT
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #F2EDE4;
  --bg-subtle: #E8E1D6;
  --card: #FDFAF5;
  --card-hover: #F8F3EB;
  --primary: #B8944A;
  --primary-hover: #C9A961;
  --primary-light: rgba(184,148,74,0.1);
  --primary-ghost: rgba(184,148,74,0.05);
  --accent: #C9A961;
  --accent-light: rgba(201,169,97,0.08);
  --success: #16a34a;
  --success-light: rgba(22,163,74,0.1);
  --danger: #dc2626;
  --danger-light: rgba(220,38,38,0.1);
  --warning: #d97706;
  --warning-light: rgba(217,119,6,0.1);
  --text: #1C1410;
  --text-secondary: #5C4D3C;
  --text-muted: #9A8878;
  --border: #DDD6CA;
  --border-light: #EDE8DF;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 6px rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.05);
  --shadow-md: 0 4px 20px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.13);
  --glow: 0 0 24px rgba(201,169,97,0.3);
  --glow-accent: 0 0 16px rgba(201,169,97,0.2);
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Typography scale */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.3rem;
  --text-2xl: 1.6rem;

  /* Studio colors */
  --studio-marcq: #f59e0b;
  --studio-wasquehal: #3b82f6;
  --studio-lille: #10b981;
  --studio-boulogne: #ef4444;
  --studio-neuilly: #8b5cf6;
  --studio-levallois: #ec4899;
}

.hidden { display: none !important; }

body {
  font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1;
}

/* ─── Login ──────────────────────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.login-card.shake { animation: shake 0.3s ease; }

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 20px;
}
.login-overlay::before {
  content: ''; position: absolute; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,169,97,0.07) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.login-overlay.hidden { display: none; }
.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  width: 100%; max-width: 380px;
  box-shadow: var(--shadow-md);
  text-align: center; position: relative; z-index: 1;
}
.login-title {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-size: 2.2rem; font-weight: 900; color: var(--primary);
  margin-bottom: 4px; letter-spacing: 0.06em; text-transform: uppercase;
}
.login-subtitle { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.15em; }
.login-card input {
  width: 100%; background: var(--bg-subtle);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 14px 16px;
  font-size: 1.1rem; text-align: center;
  letter-spacing: 0.2em; margin-bottom: 12px;
  font-family: inherit; transition: all .2s var(--ease);
}
.login-card input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(47,129,247,0.2);
}
.login-card .btn-primary { width: 100%; padding: 14px; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.login-error { color: var(--danger); font-size: .85rem; margin-bottom: .75rem; font-weight: 600; }
.login-error.hidden { display: none; }

/* Club / Studio select overlay */
.club-select-card {
  max-width: 520px !important;
  padding: 2rem 2rem 2.5rem !important;
  border-top-color: var(--primary) !important;
}
.club-select-icon {
  font-size: 2.4rem; margin-bottom: 10px; line-height: 1;
}
.club-select-title {
  font-size: 1.4rem; font-weight: 900; color: var(--text);
  margin-bottom: 6px; letter-spacing: 0.02em;
}
.club-select-subtitle {
  color: var(--text-muted); font-size: .82rem;
  margin-bottom: 20px; font-weight: 500; letter-spacing: 0.04em;
}
.club-select-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.club-select-btn {
  padding: 18px 10px 14px; border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--bg-subtle); color: var(--text);
  cursor: pointer; transition: all .2s var(--ease);
  text-align: center; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.club-select-btn-dot {
  width: 14px; height: 14px; border-radius: 50%;
  flex-shrink: 0; transition: transform .2s;
}
.club-select-btn-label {
  font-size: .82rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  line-height: 1.2;
}
.club-select-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.club-select-btn:hover .club-select-btn-dot {
  transform: scale(1.3);
}
.club-select-btn:active { transform: translateY(-1px); }

/* ─── Header ─────────────────────────────────────── */
header {
  background: #0A0A0A;
  border-bottom: 1px solid #1E1E1E;
  box-shadow: 0 1px 0 rgba(201,169,97,0.08);
  padding: 0 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  height: 58px;
  position: sticky; top: 0; z-index: 50;
}
.header-left { display: flex; align-items: center; gap: 14px; }
header h1 {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-size: 1.15rem; font-weight: 900; color: var(--primary);
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.1em;
}
/* Score E.L.I.T.E.S — badge header persistant */
#header-elites-score {
  display: none; align-items: center; gap: 6px;
  background: rgba(201,169,97,0.08);
  border: 1px solid rgba(201,169,97,0.2);
  border-radius: 20px; padding: 4px 12px 4px 8px;
  white-space: nowrap; cursor: default;
}
#header-elites-score.visible { display: flex; }
.hes-label {
  font-size: .6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-muted);
}
.hes-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem; font-weight: 900; color: var(--primary);
  font-feature-settings: 'tnum' 1;
}
.hes-max { font-size: .65rem; color: var(--text-muted); font-weight: 600; }
nav {
  display: flex; gap: 4px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
  padding: 0; background: none;
}
nav::-webkit-scrollbar { display: none; }
.tab-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 18px 13px 16px; border-radius: 0;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); font-size: 0.72rem;
  font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
  font-family: inherit; text-transform: uppercase;
  letter-spacing: 0.12em; position: relative;
}
.tab-btn .tab-icon { font-size: .95rem; }
.tab-btn:hover { color: var(--text); background: none; border-bottom-color: rgba(201,169,97,0.3); }
.tab-btn.active { color: var(--primary); background: none; box-shadow: none; border-bottom-color: var(--primary); }
/* Academy tab */
.tab-btn-academy { color: rgba(245,158,11,.6); }
.tab-btn-academy:hover { color: #f59e0b; border-bottom-color: rgba(245,158,11,.4); }
.tab-btn-academy.active { color: #f59e0b; border-bottom-color: #f59e0b; }
/* Validation tab */
.tab-btn-validation { color: rgba(16,185,129,.6); }
.tab-btn-validation:hover { color: #10b981; border-bottom-color: rgba(16,185,129,.4); }
.tab-btn-validation.active { color: #10b981; border-bottom-color: #10b981; }
.user-info { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--text-secondary); font-size: .85rem; }
.user-info.hidden { display: none; }
.btn-logout {
  padding: 6px 14px; background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted); font-size: .75rem; font-weight: 700;
  cursor: pointer; transition: all .2s var(--ease); font-family: inherit; text-transform: uppercase;
}
.btn-logout:hover { background: var(--danger-light); border-color: var(--danger); color: var(--danger); }
.btn-nutrition {
  padding: 6px 14px; background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted); font-size: .75rem; font-weight: 700;
  cursor: pointer; transition: all .2s var(--ease); font-family: inherit; text-transform: uppercase;
}
.btn-nutrition:hover { background: #2F7BFF; border-color: #1A56C4; color: #fff; }

/* ─── Main & Tabs ────────────────────────────────── */
main { max-width: 1400px; margin: 0 auto; padding: 20px; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ─── Buttons ────────────────────────────────────── */
.btn-primary {
  background: #0A0A0A;
  color: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius);
  padding: 10px 22px; font-weight: 700;
  font-size: 0.85rem; cursor: pointer;
  font-family: inherit; text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.15s var(--ease);
  box-shadow: none;
  min-height: 44px;
}
.btn-primary:hover {
  background: var(--primary);
  color: #0A0A0A;
  box-shadow: var(--glow);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: var(--card); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 20px; font-weight: 600;
  font-size: 0.85rem; cursor: pointer;
  font-family: inherit; min-height: 44px;
  transition: all 0.15s var(--ease);
}
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-ghost); }
.btn-danger-sm {
  background: var(--danger-light); color: var(--danger); border: 1px solid rgba(255,23,68,.3);
  border-radius: var(--radius-sm); padding: 4px 10px; font-size: .75rem; font-weight: 700;
  cursor: pointer; font-family: inherit; text-transform: uppercase;
}
.btn-danger-sm:hover { background: rgba(255,23,68,.2); }

/* ─── Month Nav ──────────────────────────────────── */
.month-nav {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  background: var(--card);
  padding: 12px 20px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
.month-nav button {
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-sm);
  width: 36px; height: 36px; cursor: pointer; font-size: 1rem; display: flex; align-items: center;
  justify-content: center; transition: all .2s var(--ease); font-family: inherit; color: var(--text);
}
.month-nav button:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.month-nav span { font-weight: 800; font-size: 1rem; min-width: 180px; text-align: center; color: var(--text); }
.month-nav input[type="month"] {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px;
  font-family: inherit; font-size: .85rem; background: var(--bg-subtle); color: var(--text);
}
.month-nav select {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px;
  font-family: inherit; font-size: .85rem; background: var(--bg-subtle); color: var(--text);
}

/* ─── Badge ──────────────────────────────────────── */
.badge-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 20px; font-size: .8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* ─── Section title ─────────────────────────────── */
.section-title {
  font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-secondary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

/* ─── KPI Colors ─────────────────────────────────── */
.kpi-good { color: var(--success); font-weight: 800; }
.kpi-warn { color: var(--warning); font-weight: 800; }
.kpi-bad { color: var(--danger); font-weight: 800; }

/* ─── Super Indicateur ───────────────────────────── */
.super-indic-card {
  display: flex; align-items: center; gap: 16px;
  border-radius: var(--radius-lg); padding: 18px 20px;
  margin-bottom: 18px;
  border: 2px solid transparent;
  transition: box-shadow .2s;
}
.super-indic-card.si-ok      { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.35); }
.super-indic-card.si-ko      { background: rgba(239,68,68,.07);  border-color: rgba(239,68,68,.3); }
.super-indic-card.si-unknown { background: var(--bg);            border-color: var(--border); }
.si-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.si-body { flex: 1; min-width: 0; }
.si-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 4px; }
.si-value { font-size: 1.35rem; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.si-rate  { font-size: .9rem; font-weight: 600; margin-left: 6px; }
.si-bar-wrap { display: flex; align-items: center; gap: 10px; }
.si-bar {
  flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden;
  position: relative;
}
.si-bar::after {
  content: ''; position: absolute; left: 0; top: 0; height: 100%;
  width: var(--pct, 0%); background: var(--color, var(--primary));
  border-radius: 3px; transition: width .5s;
}
.si-target { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.si-badge {
  font-size: .78rem; font-weight: 800; letter-spacing: .04em;
  white-space: nowrap; padding: 6px 12px; border-radius: 99px;
}
.si-ok  .si-badge { background: rgba(34,197,94,.15);  color: #16a34a; }
.si-ko  .si-badge { background: rgba(239,68,68,.12);  color: #dc2626; }
.si-unknown .si-badge { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
@media (max-width: 500px) {
  .si-badge { display: none; }
  .super-indic-card { gap: 12px; padding: 14px; }
}

/* ─── KPI M-1 comparison ─────────────────────────── */
.recap-prev {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 500;
}
.recap-prev-good { color: var(--success); font-weight: 700; }
.recap-prev-bad  { color: var(--danger);  font-weight: 700; }
.recap-prev-neutral { color: var(--text-muted); font-weight: 600; }

/* ─── Dashboard ──────────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.dash-card {
  background: var(--card);
  border-radius: var(--radius-lg); padding: 22px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  transition: all .3s var(--ease); position: relative; overflow: hidden;
}
.dash-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.dash-card-header { margin-bottom: 12px; }
.dash-card-name { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; }
.dash-card-studio { font-size: .8rem; color: var(--text-muted); }
.dash-card-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dash-kpi {
  display: flex; flex-direction: column; align-items: center; padding: 8px;
  background: var(--bg-subtle); border-radius: var(--radius-sm);
}
.dash-kpi-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.dash-kpi-value { font-size: .95rem; font-weight: 800; }

/* ─── Admin Panel ────────────────────────────────── */
.admin-panel {
  margin-top: 32px; background: var(--card); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
.admin-panel.hidden { display: none; }
.admin-panel h2 { font-size: 1rem; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; }
.add-rep-form { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.add-rep-form input, .add-rep-form select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .85rem; background: var(--bg-subtle); color: var(--text);
}
.add-rep-form input:focus, .add-rep-form select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ghost);
}
.admin-rep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.admin-coach-card {
  background: var(--bg-subtle); border-radius: var(--radius); padding: 14px;
  border: 1px solid var(--border); transition: all .2s var(--ease);
}
.admin-coach-card:hover { border-color: var(--primary); box-shadow: var(--glow); }
.admin-coach-card-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.admin-coach-name { font-weight: 800; font-size: .9rem; flex: 1; }
.admin-coach-info { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-coach-detail {
  font-size: .75rem; color: var(--text-muted); background: var(--bg);
  padding: 3px 10px; border-radius: var(--radius-sm); font-weight: 600;
}
.btn-edit-sm {
  background: none; border: none; cursor: pointer; font-size: .85rem;
  padding: 4px 6px; border-radius: var(--radius-sm); transition: all .15s;
}
.btn-edit-sm:hover { background: var(--primary-light); }
.badge-leader {
  font-size: .65rem; background: var(--warning); color: #000; padding: 2px 6px;
  border-radius: var(--radius-sm); font-weight: 800; text-transform: uppercase; vertical-align: middle;
}

/* Modal overlay */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; animation: fadeIn .15s ease;
}
.modal-card {
  background: var(--card); border-radius: var(--radius-lg); width: 90%; max-width: 420px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border); overflow: hidden;
  animation: slideUp .2s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.modal-close {
  background: none; border: none; color: var(--text-muted); font-size: 1.2rem;
  cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--danger-light); color: var(--danger); }
.modal-body { padding: 20px; }
.modal-field { margin-bottom: 14px; }
.modal-field label {
  display: block; font-size: .75rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.modal-field input, .modal-field select {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-subtle); color: var(--text); font-family: inherit; font-size: .9rem;
  box-sizing: border-box;
}
.modal-field input:focus, .modal-field select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ghost);
}
.modal-toggle-row { display: flex; gap: 8px; }
.modal-toggle-btn {
  flex: 1; padding: 10px; border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--bg-subtle); color: var(--text-muted); font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: all .2s var(--ease); text-align: center; font-family: inherit;
}
.modal-toggle-btn:hover { border-color: var(--primary); color: var(--text); }
.modal-toggle-btn.active {
  border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 800;
}
.modal-footer {
  display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px;
  border-top: 1px solid var(--border);
}
/* .btn-secondary — defined above, no duplicate needed */

/* Resiliation modal */
.resil-list { max-height: 300px; overflow-y: auto; margin-bottom: 12px; }
.resil-member-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 4px;
  background: var(--bg-subtle); border: 1px solid var(--border);
}
.resil-member-name { font-weight: 600; font-size: .85rem; }
.resil-delete-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: .9rem; padding: 2px 6px; border-radius: var(--radius-sm);
}
.resil-delete-btn:hover { background: var(--danger-light); color: var(--danger); }
.resil-add-row { display: flex; gap: 8px; }
.resil-input {
  flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-subtle); color: var(--text); font-family: inherit; font-size: .85rem;
}
.resil-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ghost); }
.resil-add-btn { white-space: nowrap; }

/* Clickable KPI card */
.recap-kpi-clickable { cursor: pointer; transition: all .2s var(--ease); }
.recap-kpi-clickable:hover { border-color: var(--primary); box-shadow: var(--glow); transform: translateY(-2px); }

.ctrl-resil-count { font-weight: 700; color: var(--primary); font-size: .9rem; }

/* ─── Today Tab ──────────────────────────────────── */
.td-page { padding: 6px 20px 14px; max-width: 1080px; margin: 0 auto; }
.td-header { margin-bottom: 6px; }
.td-header h2 {
  font-size: 1.15rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text); margin-bottom: 4px;
}

/* Desktop 2-column layout */
@media (min-width: 768px) {
  .td-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    align-items: start;
  }
  .td-header { grid-column: 1 / -1; margin-bottom: 8px; }

  /* Each studio group spans full width, then lays out its blocks in 2 columns */
  .td-studio-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 0;
    align-items: stretch;
  }
  /* Col 1: energy/smileys block */
  .td-studio-group .td-block-centered { grid-column: 1; }
  /* Col 2: leader action block only */
  .td-studio-group .td-block-leader-action { grid-column: 2; }
  /* Essentials: full width strip below the 2-col row */
  .td-studio-group .td-block-essentials { grid-column: 1 / -1; }
  /* Indicators full width */
  .td-studio-group .td-block-indicators { grid-column: 1 / -1; }

  /* When there are 2 studios, add a separator between them */
  .td-studio-group + .td-studio-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px dashed var(--border);
  }
}

/* Sub-tab nav */
.td-subnav {
  display: flex; gap: 8px; margin-bottom: 12px;
  overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
}
.td-subnav::-webkit-scrollbar { display: none; }
.td-subbtn {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 14px; border-radius: 12px;
  border: 2px solid var(--border); background: var(--bg-subtle);
  color: var(--text-muted); cursor: pointer; transition: all .2s var(--ease);
  font-family: inherit; min-width: 64px;
}
.td-subbtn:hover { border-color: var(--primary); color: var(--primary); }
.td-subbtn.active {
  border-color: var(--primary); background: var(--primary-light); color: var(--primary);
  box-shadow: var(--glow);
}
.td-subbtn-icon { font-size: 1.4rem; line-height: 1; }
.td-subbtn-label { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

.td-subpanel.hidden { display: none !important; }

.td-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 14px; margin-bottom: 10px;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.td-block-centered { text-align: center; }
.td-block-title {
  font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--primary); margin-bottom: 10px;
  opacity: 0.85;
}

/* Smileys — big version for Forme tab */
.td-smileys-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 12px; }
.td-smileys-big { gap: 20px; margin: 20px 0; }
.td-smiley {
  width: 64px; height: 64px; font-size: 1.8rem;
  border-radius: 14px; border: 2px solid var(--border);
  background: var(--bg-subtle); cursor: pointer;
  transition: all 0.2s var(--ease); display: flex; align-items: center; justify-content: center;
}
.td-smileys-big .td-smiley {
  width: auto; height: auto; font-size: 1rem;
  flex-direction: column; gap: 4px; padding: 10px;
  border-radius: 14px; min-width: 64px;
  background: var(--bg-subtle);
}
.td-smiley-emoji { font-size: 2rem; line-height: 1; }
.td-smiley-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.td-smiley:hover { border-color: var(--primary); transform: scale(1.04); }
.td-smiley.active { border-color: var(--primary); background: rgba(47,129,247,0.15); }

/* 5 niveaux d'énergie */
.td-energy-5.active { border-color: #f97316; background: rgba(249,115,22,.15); box-shadow: 0 0 20px rgba(249,115,22,.25); }
.td-energy-5.active .td-smiley-label { color: #f97316; }
.td-energy-4.active { border-color: var(--success); background: var(--success-light); box-shadow: 0 0 20px rgba(0,230,118,.2); }
.td-energy-4.active .td-smiley-label { color: var(--success); }
.td-energy-3.active { border-color: #60a5fa; background: rgba(96,165,250,.12); box-shadow: 0 0 20px rgba(96,165,250,.2); }
.td-energy-3.active .td-smiley-label { color: #60a5fa; }
.td-energy-2.active { border-color: var(--warning); background: var(--warning-light); box-shadow: 0 0 20px rgba(255,171,0,.2); }
.td-energy-2.active .td-smiley-label { color: var(--warning); }
.td-energy-1.active { border-color: var(--danger); background: var(--danger-light); box-shadow: 0 0 20px rgba(255,23,68,.2); }
.td-energy-1.active .td-smiley-label { color: var(--danger); }

/* Notes area */
.td-notes-wrap { display: flex; flex-direction: column; gap: 12px; }
.td-notes-area {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-family: inherit; font-size: .9rem;
  padding: 12px 14px; resize: vertical; min-height: 130px; line-height: 1.6;
  box-sizing: border-box; transition: border-color .2s var(--ease);
}
.td-notes-area:focus { outline: none; border-color: var(--primary); }
.td-notes-save-btn {
  align-self: flex-end; padding: 8px 20px; border-radius: 8px;
  border: none; background: var(--primary); color: #ffffff;
  font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
  transition: all .2s var(--ease);
}
.td-notes-save-btn:hover { background: var(--primary-hover, #58a6ff); }

/* CR Panel */
.td-cr-panel { display: flex; flex-direction: column; gap: 20px; }
.td-cr-mic-section { text-align: center; }
.td-cr-record-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 36px; border: 2px solid var(--border); border-radius: 16px;
  background: var(--bg-subtle); cursor: pointer; transition: all .2s var(--ease);
  font-family: inherit; color: var(--text-secondary);
}
.td-cr-record-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-light); }
.td-cr-record-btn.recording {
  border-color: var(--danger); background: var(--danger); color: white;
  animation: commPulse 1s infinite; box-shadow: 0 0 20px rgba(255,23,68,.4);
}
.td-cr-record-label { font-size: .9rem; font-weight: 700; }
.td-cr-hint { font-size: .75rem; color: var(--text-muted); margin-top: 8px; }
.td-cr-divider { text-align: center; color: var(--text-muted); font-size: .8rem; position: relative; }
.td-cr-divider::before, .td-cr-divider::after { content: ''; position: absolute; top: 50%; width: 42%; height: 1px; background: var(--border); }
.td-cr-divider::before { left: 0; }
.td-cr-divider::after { right: 0; }
.td-cr-text-section { display: flex; flex-direction: column; gap: 8px; }
.td-cr-text-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.td-cr-status { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 12px; }

/* ── Bulle "Les nouveaux" — leader (lecture seule) ── */
.td-counter-nouveaux {
  grid-column: span 2;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; max-height: 260px;
}
.td-nv-cards { display: flex; flex-direction: column; gap: 6px; }
.td-nv-entry {
  background: var(--bg-subtle);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; transition: border-color .2s;
}
.td-nv-entry.td-nv-dismissing { opacity: 0; transform: scale(.95); }
.td-nv-entry-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.td-nv-entry-name { font-size: .88rem; font-weight: 700; flex: 1; }
.td-nv-badge { font-size: .68rem; font-weight: 800; border-radius: 20px; padding: 2px 8px; }
.td-nv-badge-satisfait { background: var(--success-light); color: var(--success); }
.td-nv-badge-arrete { background: var(--danger-light); color: var(--danger); }
.td-nv-badge-rib { background: #dbeafe; color: #1d4ed8; }
.td-nv-badge-photo { background: #ede9fe; color: #7c3aed; }
button.td-nv-badge-photo { border: none; cursor: pointer; transition: opacity .15s, transform .1s; }
button.td-nv-badge-photo:hover { opacity: .7; transform: scale(1.06); }
.td-nv-badge-croix {
  background: #dc2626; color: #fff; font-size: .78rem; font-weight: 900;
  padding: 3px 10px; border: none; cursor: pointer;
  transition: background .15s, transform .1s;
}
.td-nv-badge-croix:hover { background: #b91c1c; transform: scale(1.08); }
/* Badges cliquables (acquittement) */
button.td-nv-ack-btn {
  cursor: pointer; border: none; font-family: inherit;
  transition: opacity .2s, transform .15s;
}
button.td-nv-ack-btn:hover { opacity: .75; transform: scale(1.06); }
/* Sous contrôle verrouillé */
.td-nv-ok-label.td-nv-ok-locked { opacity: .4; cursor: not-allowed; }
.td-nv-ok-label.td-nv-ok-locked .td-nv-ok-chk { cursor: not-allowed; }

/* Animation clignotante pour "Arrêté" */
@keyframes arreteAlert {
  0%, 100% { border-color: var(--danger); box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50% { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(220,38,38,0.2); }
}
.td-nv-arrete { animation: arreteAlert 1.4s ease-in-out infinite; border-color: var(--danger) !important; }

@keyframes ribAlert {
  0%, 100% { border-color: #1d4ed8; box-shadow: 0 0 0 0 rgba(29,78,216,0); }
  50% { border-color: #1d4ed8; box-shadow: 0 0 0 4px rgba(29,78,216,0.18); }
}
.td-nv-rib { animation: ribAlert 1.6s ease-in-out infinite; border-color: #1d4ed8 !important; }

.td-nv-ok-label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.td-nv-ok-chk { accent-color: var(--success); width: 15px; height: 15px; cursor: pointer; }
.td-nv-ok-text { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.td-nouveaux-empty { color: var(--text-muted); font-size: .82rem; font-style: italic; margin: 0; }

/* ── Popup Croix Rouge ── */
.nv-croix-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 9999;
  align-items: center; justify-content: center;
}
.nv-croix-overlay.nv-croix-visible { display: flex; }
.nv-croix-popup {
  background: var(--card); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  width: min(340px, 90vw); overflow: hidden;
  animation: popIn .2s ease;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.9) translateY(12px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.nv-croix-popup-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px;
  background: #dc2626; color: #fff;
}
.nv-croix-popup-title { font-weight: 800; font-size: .95rem; letter-spacing: .04em; }
.nv-croix-popup-close {
  background: none; border: none; color: #fff; font-size: 1.3rem;
  cursor: pointer; line-height: 1; padding: 0 2px; opacity: .8;
}
.nv-croix-popup-close:hover { opacity: 1; }
.nv-croix-popup-text {
  padding: 18px 18px 8px; font-size: .92rem; color: var(--text);
  line-height: 1.5; min-height: 48px;
}
.nv-croix-popup-fait-label {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 18px; cursor: pointer;
  font-size: .88rem; font-weight: 700; color: var(--text-secondary);
}
.nv-croix-fait-chk { accent-color: #16a34a; width: 18px; height: 18px; cursor: pointer; }

/* ── Admin DATA — panneau Nouveaux ── */
.data-nv-add-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.data-nv-input {
  flex: 1; background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; font-size: .88rem;
  font-family: inherit; color: var(--text);
}
.data-nv-input:focus { outline: none; border-color: var(--primary); }
.data-nv-add-btn {
  white-space: nowrap; padding: 8px 14px; font-size: .78rem; font-weight: 700;
  background: var(--primary); color: #0A0A0A; border: none; border-radius: var(--radius);
  cursor: pointer; font-family: inherit; transition: opacity .15s;
}
.data-nv-add-btn:hover { opacity: .85; }
.data-nv-list { display: flex; flex-direction: column; gap: 6px; }
.data-nv-empty { font-size: .8rem; color: var(--text-muted); font-style: italic; margin: 0; }
.data-nv-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 12px;
}
.data-nv-name { flex: 1; font-size: .88rem; font-weight: 600; }
.data-nv-sa-btn {
  padding: 4px 12px; border-radius: 20px; font-size: .72rem; font-weight: 800;
  cursor: pointer; font-family: inherit; letter-spacing: .06em;
  border: 1px solid var(--border); background: none; color: var(--text-muted);
  transition: all .15s;
}
.data-nv-sa-btn:hover { border-color: var(--danger); color: var(--danger); }
.data-nv-sa-btn.nv-sa-on { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }
.data-nv-rib-btn {
  padding: 4px 12px; border-radius: 20px; font-size: .72rem; font-weight: 800;
  cursor: pointer; font-family: inherit; letter-spacing: .06em;
  border: 1px solid var(--border); background: none; color: var(--text-muted);
  transition: all .15s;
}
.data-nv-rib-btn:hover { border-color: #1d4ed8; color: #1d4ed8; }
.data-nv-rib-btn.nv-rib-on { background: #dbeafe; color: #1d4ed8; border-color: #1d4ed8; }
.data-nv-photo-btn {
  padding: 4px 10px; border-radius: 20px; font-size: .82rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: none; color: var(--text-muted);
  transition: all .15s;
}
.data-nv-photo-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.data-nv-photo-btn.nv-photo-on { background: #ede9fe; color: #7c3aed; border-color: #7c3aed; }
.data-nv-croix-btn {
  padding: 4px 10px; border-radius: 20px; font-size: .82rem; font-weight: 900;
  cursor: pointer; font-family: inherit;
  border: 1px solid var(--border); background: none; color: var(--text-muted);
  transition: all .15s;
}
.data-nv-croix-btn:hover { border-color: #dc2626; color: #dc2626; }
.data-nv-croix-btn.nv-croix-on { background: #fee2e2; color: #dc2626; border-color: #dc2626; }
.data-nv-row { flex-wrap: wrap; }
.data-nv-croix-input {
  flex: 1 0 100%; margin-top: 6px;
  background: #fff0f0; border: 1px solid #fca5a5; border-radius: 6px;
  padding: 6px 10px; font-size: .82rem; font-family: inherit; color: var(--text);
}
.data-nv-croix-input:focus { outline: none; border-color: #dc2626; }
.data-nv-del {
  background: none; border: none; color: var(--text-muted); font-size: 1.1rem;
  cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1;
}
.data-nv-del:hover { color: var(--danger); background: var(--danger-light); }

/* Surpack specific styling */
.td-counter-surpack { grid-column: span 2; display: flex; flex-direction: column; align-items: center; }
.td-counter-surpack .td-counter-label { text-align: center; }
.td-counter-surpack .td-counter-controls { justify-content: center; }
.td-surpack-input {
  width: 180px; min-width: 120px; font-size: 1.6rem; font-weight: 900; text-align: center;
  border: 2px solid var(--primary); border-radius: 12px;
  background: var(--primary-light); color: var(--text); padding: 10px 14px;
  font-family: inherit; letter-spacing: 0.02em;
  transition: all .2s var(--ease);
}
.td-surpack-input::placeholder { color: var(--text-muted); }
.td-surpack-input:focus {
  outline: none; border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px var(--primary-ghost);
}
.td-euro-tag { color: var(--warning); font-size: .75rem; font-weight: 700; }
.td-euro-suffix { color: var(--warning); font-weight: 800; font-size: 1.1rem; }

/* Club badge (auto from studio) */
.td-club-badge-row { margin-top: 16px; text-align: center; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.td-club-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius);
  background: var(--primary-light); border: 1px solid rgba(37,99,235,.2);
  font-size: .8rem; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.td-club-badge-second {
  background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.3); color: #3b82f6;
}
.td-club-badge-remove {
  background: none; border: 1px solid rgba(239,68,68,.35); cursor: pointer;
  color: #ef4444; font-size: .72rem; padding: 4px 10px;
  border-radius: var(--radius); font-family: inherit; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.td-club-badge-remove:hover { background: rgba(239,68,68,.1); border-color: #ef4444; }
.td-club-badge-add {
  padding: 5px 12px; border-radius: var(--radius); border: 1px dashed var(--border);
  background: none; color: var(--text-muted); font-size: .75rem; font-weight: 700;
  cursor: pointer; font-family: inherit; text-transform: uppercase; letter-spacing: .05em;
  transition: all .2s var(--ease);
}
.td-club-badge-add:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.td-second-studio-picker {
  margin-top: 10px; text-align: center;
}
.td-second-studio-picker select {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-subtle); color: var(--text); font-family: inherit; font-size: .85rem;
  cursor: pointer;
}
.td-second-studio-picker select:focus { outline: none; border-color: var(--primary); }

/* Community club filters */
.comm-club-filters {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px;
}
.comm-club-filter {
  padding: 6px 16px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-subtle); font-size: .75rem; font-weight: 700; color: var(--text-muted);
  cursor: pointer; transition: all .2s var(--ease); text-transform: uppercase; letter-spacing: 0.05em;
  font-family: inherit;
}
.comm-club-filter:hover { border-color: var(--primary); color: var(--primary); }
.comm-club-filter.active {
  background: var(--primary); color: #ffffff; border-color: var(--primary);
  box-shadow: var(--glow); font-weight: 800;
}

/* Badge Leader */
.badge-leader {
  display: inline-block; font-size: .6rem; font-weight: 900; text-transform: uppercase;
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #0a0a0a;
  padding: 2px 8px; border-radius: var(--radius-sm); margin-left: 6px; vertical-align: middle;
  letter-spacing: .08em;
}

/* Admin leader toggle */
.admin-leader-toggle { display: flex; align-items: center; gap: 4px; font-size: .75rem; cursor: pointer; }
.admin-leader-toggle input { cursor: pointer; accent-color: var(--primary); }
.admin-leader-label { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: .65rem; }

/* Add coach leader checkbox */
.add-coach-leader-check { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-secondary); cursor: pointer; }
.add-coach-leader-check input { cursor: pointer; accent-color: var(--primary); }

.td-checklist { display: flex; flex-direction: column; }
.td-check-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; min-height: 52px; transition: all 0.2s var(--ease);
}
/* Compactage bloc Essentiels pour aligner avec bloc Forme */
/* Bloc leader — saisie action clé */
.td-block-leader-action { border-left: 3px solid var(--primary) !important; padding: 14px !important; }
.td-leader-action-wrap { display: flex; flex-direction: row; gap: 8px; align-items: center; margin-bottom: 8px; }
.td-leader-action-input {
  flex: 1; padding: 0 12px; height: 40px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-subtle);
  color: var(--text); font-family: inherit; font-size: .9rem;
  transition: border-color .2s;
}
.td-leader-action-input:focus { outline: none; border-color: var(--primary); }
.td-leader-action-btns { display: flex; gap: 8px; flex-shrink: 0; }
.btn-primary-sm {
  height: 40px; padding: 0 16px; border-radius: var(--radius-sm); border: none;
  background: var(--primary); color: #fff; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: opacity .2s; white-space: nowrap;
}
.btn-primary-sm:hover { opacity: .85; }
.btn-ghost-sm {
  height: 40px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); font-size: .82rem; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.btn-ghost-sm:hover { border-color: var(--danger); color: var(--danger); }
.td-leader-action-status { font-size: .78rem; color: #22c55e; margin-top: 4px; }

/* Item "Action clé" dans les Essentiels */
.td-check-row-action-cle {
  background: rgba(245,158,11,0.07);
  border-radius: 8px; margin-bottom: 4px;
  border-bottom: none !important; border: 1px solid rgba(245,158,11,0.3) !important;
  padding: 10px 8px !important; min-height: unset !important;
  cursor: pointer;
}
.td-check-row-action-cle:hover { background: rgba(245,158,11,0.13) !important; }
.td-action-cle-icon { font-size: 1rem; flex-shrink: 0; }
.td-action-cle-text { font-weight: 700 !important; color: #b45309 !important; font-size: .88rem !important; }
/* Checkbox ambre */
.td-check-box-action-cle {
  border-color: #f59e0b !important;
}
.td-done-action-cle .td-check-box-action-cle {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
}
.td-done-action-cle .td-action-cle-text {
  color: #92400e !important;
  text-decoration: line-through;
  opacity: 0.7;
}

/* Essentiels — pleine largeur, checklist en grille 2 colonnes */
.td-block-essentials { padding: 14px !important; }
.td-block-essentials .td-block-title { margin-bottom: 8px; }
.td-block-essentials .td-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.td-block-essentials .td-check-row { padding: 5px 0; min-height: 34px; border-bottom: 1px solid var(--border); }
.td-block-essentials .td-check-row .td-check-label { font-size: .875rem; }
.td-block-essentials .td-check-row-action-cle { padding: 6px 8px !important; margin-bottom: 0; grid-column: 1 / -1; }
.td-check-row:last-child { border-bottom: none; }
.td-check-row:hover { opacity: 0.85; }
.td-check-row.td-done {
  background: none;
}
.td-check-row input[type="checkbox"] { display: none; }
.td-check-box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid var(--border); flex-shrink: 0;
  background: var(--bg-subtle); transition: all 0.2s var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.td-done .td-check-box { background: var(--success); border-color: var(--success); }
.td-done .td-check-box::after { content: '✓'; color: #ffffff; font-size: .8rem; font-weight: 900; }
.td-check-label { font-size: .9rem; font-weight: 500; color: var(--text); flex: 1; }
.td-check-row.td-done .td-check-label { color: var(--text-secondary); text-decoration: line-through; }

/* CR recording wrapper + live timer */
.td-cr-rec-wrap { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.td-cr-rec-live {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--danger-light, #fff0f0); border: 1px solid rgba(239,68,68,.3);
  border-radius: var(--radius-sm); padding: 3px 8px;
  animation: fadeInRec .15s ease;
}
.td-cr-rec-timer {
  font-size: .85rem; font-weight: 700; font-family: monospace;
  color: #ef4444; min-width: 36px;
}
.td-cr-rec-timer.over { color: #b91c1c; }
.td-cr-rec-cancel {
  background: none; border: none; cursor: pointer;
  font-size: .8rem; padding: 0 2px; color: #ef4444; line-height: 1;
}
.td-cr-rec-cancel:hover { opacity: .7; }

/* CR micro button */
.td-cr-mic-btn {
  width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-subtle); cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--text-secondary); transition: all .2s var(--ease);
  flex-shrink: 0;
}
.td-cr-mic-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-light); }
.td-cr-mic-btn.recording {
  border-color: var(--danger); background: var(--danger); color: white;
  animation: commPulse 1s infinite; box-shadow: 0 0 15px rgba(255,23,68,.4);
}

.td-counters-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* Desktop: 4 columns — must be AFTER the global 2-col rule to win */
@media (min-width: 768px) {
  .td-counters-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .td-counter-surpack { grid-column: span 2; align-items: center; }
}
.td-counter-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 12px; text-align: center;
  transition: all 0.2s var(--ease);
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column; justify-content: center;
}
.td-counter-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.td-counter-card.td-counter-active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: var(--glow);
}
.td-counter-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; letter-spacing: .03em; }
.td-counter-controls { display: flex; align-items: center; gap: 8px; justify-content: center; }
.td-counter-btn {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-subtle);
  color: var(--text); font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s var(--ease); font-family: inherit;
}
.td-counter-btn:hover { border-color: var(--primary); color: var(--primary); }
.td-counter-val {
  width: 40px; text-align: center; background: none;
  border: none; color: var(--text); font-size: 1.2rem;
  font-weight: 800; font-family: inherit;
}
.td-counter-val:focus { outline: none; }
.td-counter-val::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ─── DATA Tab ───────────────────────────────────── */
.data-tab-wrap { max-width: 1200px; margin: 0 auto; padding: 16px 0; }
.data-tab-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 16px; flex-wrap: wrap;
}
.data-month-nav { display: flex; align-items: center; gap: 12px; }
.data-nav-btn {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card);
  font-size: 1rem; cursor: pointer; transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
.data-nav-btn:hover { border-color: var(--primary); color: var(--primary); }
.data-month-label { font-size: 1rem; font-weight: 700; color: var(--text); min-width: 100px; text-align: center; }

.data-studios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .data-studios-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .data-studios-grid { grid-template-columns: 1fr; }
}

.data-studio-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px;
  box-shadow: var(--shadow-sm);
}
.data-studio-header {
  padding-left: 10px; margin-bottom: 14px;
}
.data-studio-name {
  font-size: .95rem; font-weight: 800; color: var(--text);
  text-transform: uppercase; letter-spacing: .04em;
}

.data-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.data-field { display: flex; flex-direction: column; gap: 4px; }
.data-field label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
}
.data-input {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-subtle); font-size: .88rem; font-family: inherit;
  color: var(--text); transition: border-color .2s; width: 100%;
}
.data-input:focus { outline: none; border-color: var(--primary); }
.data-input-objectif { background: var(--primary-ghost); border-color: rgba(184,148,74,.3); }
.data-field-full { grid-column: 1 / -1; }
.data-field-hint { font-size: .62rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); opacity: .7; }
textarea.data-input { resize: vertical; min-height: 52px; line-height: 1.5; font-size: .82rem; }
.data-input-text { font-style: italic; }

/* ─── Recap ──────────────────────────────────────── */
.recap-page { max-width: 1100px; margin: 0 auto; }
.recap-header { text-align: center; margin-bottom: 24px; }
.recap-header h2 { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; }
.recap-subtitle { color: var(--text-muted); }
.recap-section { margin-bottom: 28px; }
.recap-section-solo { margin-bottom: 16px; }
.recap-section-title {
  font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--text-secondary);
}
/* Section Mes indicateurs — coach non-leader (1 seul KPI) */
.recap-kpis-solo { display: flex; }
.recap-kpis-solo .recap-kpi-card { min-width: 160px; max-width: 200px; padding: 10px 16px; text-align: left; }
/* Studios overview table */
/* CA evolution chart in recap */
.recap-ca-chart-wrap {
  background: var(--bg-subtle); border-radius: var(--radius); padding: 12px;
  border: 1px solid var(--border); height: 280px; margin-top: 12px; position: relative;
}

/* ─── Directeur : saisie CA / Dépenses ──────────── */
.dr-saisie-wrap {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 24px; margin-bottom: 24px;
}
.dr-saisie-title {
  font-size: .95rem; font-weight: 800; margin: 0 0 16px;
  color: var(--text);
}
.dr-saisie-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.dr-saisie-table thead th {
  background: var(--bg-subtle); color: var(--text-muted); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 800;
  padding: 8px 12px; text-align: left; border-bottom: 2px solid var(--border);
}
.dr-saisie-table tbody tr { border-bottom: 1px solid var(--border); }
.dr-saisie-club { font-weight: 700; padding: 10px 12px; min-width: 100px; }
.dr-saisie-input {
  width: 120px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-subtle); color: var(--text); font-family: inherit; font-size: .85rem;
  transition: border-color .2s;
}
.dr-saisie-input:focus { outline: none; border-color: var(--primary); }
.dr-saisie-input-pct { width: 72px; text-align: center; }
.dr-saisie-contrib {
  font-weight: 800; font-size: .95rem; padding: 10px 12px; min-width: 90px;
}
.dr-saisie-save {
  padding: 6px 14px; border-radius: var(--radius-sm); border: 1px solid var(--primary);
  background: var(--primary-light); color: var(--primary); font-size: .78rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all .2s; white-space: nowrap;
}
.dr-saisie-save:hover { background: var(--primary); color: #fff; }
.dr-saisie-save:disabled { opacity: .6; cursor: default; }

.studios-table-section { margin-top: 24px; }
.studios-table-wrap { overflow-x: auto; }
.studios-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.studios-table thead th {
  background: var(--bg-subtle); color: var(--text-muted); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 800;
  padding: 10px 16px; text-align: center; border-bottom: 2px solid var(--border);
}
.studios-table thead th:first-child { text-align: left; }
.ve-sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color .15s, background .15s; }
.ve-sortable:hover { color: var(--text); background: var(--card-hover); }
.ve-sort-active { color: var(--primary) !important; }
.ve-sort-icon { font-size: .65rem; opacity: .8; }
.studios-table tbody tr { border-bottom: 1px solid var(--border); transition: background .15s; }
.studios-table tbody tr:hover { background: var(--card-hover); }
.studios-table tbody td:not(.studios-td-name) { text-align: center; padding: 10px 12px; }
.studios-td-name {
  font-weight: 700; color: var(--text); padding: 12px 16px;
}
.studios-td-val {
  text-align: center; padding: 12px 16px; font-weight: 600; color: var(--text-secondary);
}
.studios-td-val.kpi-good { color: var(--success); }
.studios-td-val.kpi-warn { color: var(--warning); }
.studios-td-val.kpi-bad { color: var(--danger); }
.studios-td-val.kpi-blink { animation: blink-red 1s ease-in-out infinite; }
@keyframes blink-red {
  0%, 100% { color: var(--danger); opacity: 1; }
  50% { opacity: 0.3; }
}
.ckpi-contrib-negative {
  animation: blink-contrib-neg 1.2s ease-in-out infinite;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
}
@keyframes blink-contrib-neg {
  0%, 100% { color: #ef4444; opacity: 1; }
  50%       { color: #ff6b6b; opacity: 0.4; }
}

.recap-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.recap-kpi-card {
  background: var(--card); border-radius: var(--radius); padding: 20px; text-align: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.recap-kpi-card:hover { border-color: rgba(201,169,97,0.35); box-shadow: 0 0 0 1px rgba(201,169,97,0.15), var(--shadow-sm); }
.recap-kpi-label { display: block; font-size: .65rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: .12em; font-weight: 700; }
.recap-kpi-value { font-family: 'Fraunces', 'Playfair Display', Georgia, serif; font-size: 1.6rem; font-weight: 900; color: var(--primary); font-feature-settings: 'tnum' 1; }
.recap-kpi-ca-obj { display: block; margin-top: 6px; font-size: .75rem; color: var(--text-muted); font-weight: 600; }
.recap-kpi-ca-double { border-top: 3px solid var(--primary); }

/* Badges section */
.recap-badges { margin-bottom: 24px; }
.recap-badges h3 { font-size: 1rem; margin-bottom: 12px; text-align: center; text-transform: uppercase; font-weight: 800; }
.recap-badges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.recap-badge-card {
  background: var(--card);
  border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--shadow-sm); text-align: center;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  transition: all .25s var(--ease);
}
.recap-badge-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-top-color: var(--primary); }
.recap-badge-card.is-mine {
  border-color: var(--primary);
  border-top: 3px solid var(--primary);
  background: var(--primary-light);
  box-shadow: var(--glow), var(--shadow-sm);
}
.recap-badge-icon { font-size: 1.5rem; margin-bottom: 6px; }
.recap-badge-label { font-size: .8rem; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.recap-badge-desc { font-size: .68rem; color: var(--text-muted); margin-top: 4px; line-height: 1.3; }
.recap-badge-winner { font-size: .88rem; color: var(--primary); font-weight: 800; margin-top: 6px; }
.recap-badge-value { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }

/* Stats du mois */
.recap-stats {
  background: var(--card); border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-sm); margin-bottom: 20px; border: 1px solid var(--border);
}
.recap-stats h3 { font-size: .95rem; margin-bottom: 12px; text-transform: uppercase; font-weight: 800; }
.recap-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.recap-stat-item {
  display: flex; justify-content: space-between; padding: 10px 12px;
  background: var(--bg-subtle); border-radius: var(--radius); font-size: .85rem;
  border: 1px solid var(--border);
}
.recap-stat-label { color: var(--text-secondary); }
.recap-stat-value { font-weight: 800; color: var(--primary); }

/* ─── Control Tab ────────────────────────────────── */
.ctrl-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ctrl-header select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .85rem; background: var(--bg-subtle); color: var(--text);
}
.ctrl-page { max-width: 900px; margin: 0 auto; }
.ctrl-club-title {
  font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 16px; text-align: center; color: var(--primary);
}
.ctrl-coach-block {
  background: var(--card); border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-sm); margin-bottom: 16px; border: 1px solid var(--border);
}
.ctrl-coach-block-header {
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.ctrl-coach-block-name {
  font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
}
.ctrl-team-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ctrl-team-member {
  padding: 6px 14px; border-radius: var(--radius); background: var(--bg-subtle);
  border: 1px solid var(--border); font-size: .85rem; font-weight: 600;
}
.ctrl-evolution-charts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.ctrl-chart-wrap {
  background: var(--bg-subtle); border-radius: var(--radius); padding: 12px;
  border: 1px solid var(--border); height: 280px; position: relative;
}
@media (max-width: 768px) {
  .ctrl-evolution-charts { grid-template-columns: 1fr; }
}
.ctrl-admin-data {
  background: var(--card); border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-sm); margin-bottom: 20px; border: 1px solid var(--border);
}
.ctrl-admin-data h3 { font-size: .95rem; margin-bottom: 12px; text-transform: uppercase; font-weight: 800; }
.ctrl-admin-fields { display: flex; flex-wrap: wrap; gap: 16px; }
.ctrl-field { flex: 1; min-width: 200px; }
.ctrl-field label { display: block; font-size: .8rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.ctrl-field input, .ctrl-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .875rem; background: var(--bg-subtle); color: var(--text);
}
.ctrl-field input:focus, .ctrl-field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ghost);
}
.ctrl-field textarea { resize: vertical; }
.ctrl-field-full { flex-basis: 100%; }
.ctrl-input-row { display: flex; align-items: center; gap: 6px; }
.ctrl-unit { font-size: .8rem; color: var(--text-muted); font-weight: 700; }
.ctrl-daily-summary {
  background: var(--card); border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-sm); margin-bottom: 20px; border: 1px solid var(--border);
}
.ctrl-daily-summary h3 { font-size: .95rem; margin-bottom: 12px; text-transform: uppercase; font-weight: 800; }
.ctrl-daily-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ctrl-daily-item {
  display: flex; justify-content: space-between; padding: 10px 12px;
  background: var(--bg-subtle); border-radius: var(--radius); font-size: .85rem;
  border: 1px solid var(--border);
}
.ctrl-daily-label { color: var(--text-secondary); }
.ctrl-daily-value { font-weight: 800; color: var(--primary); }
.ctrl-comment {
  background: var(--card); border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-sm); margin-bottom: 20px; border: 1px solid var(--border);
}
.ctrl-comment h3 { font-size: .95rem; margin-bottom: 8px; text-transform: uppercase; font-weight: 800; }
.ctrl-ai-section { margin-top: 20px; }
.ai-analysis {
  background: var(--card); border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow-sm); margin-top: 12px; font-size: .9rem; line-height: 1.7;
  border: 1px solid var(--border);
}
.ai-analysis ul { padding-left: 20px; margin: 8px 0; }
.ai-analysis li { margin-bottom: 4px; }
.analysis-heading { display: block; margin-top: 16px; font-size: .95rem; color: var(--primary); font-weight: 800; }

/* ─── Notes ──────────────────────────────────────── */
/* ─── RESSOURCES ─────────────────────────────────────────── */
.res-container { max-width: 900px; margin: 0 auto; }
.res-header { text-align: center; margin-bottom: 24px; }
.res-header h2 { font-size: 1.3rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.05em; }
.res-subtitle { color: var(--text-muted); font-size: .85rem; margin-top: 4px; }
.res-add-form {
  display: flex; gap: 10px; margin-bottom: 24px; padding: 16px;
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
  flex-wrap: wrap;
}
.res-input {
  flex: 1; min-width: 200px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: .85rem; font-family: inherit;
}
.res-input:focus { border-color: var(--primary); outline: none; }
.res-add-btn { white-space: nowrap; padding: 10px 24px !important; }
.res-category-title {
  font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--primary); margin: 28px 0 12px 0; padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-light);
}
.res-category-title:first-child { margin-top: 0; }
.res-list { display: flex; flex-direction: column; gap: 14px; }
.res-card {
  display: flex; gap: 16px; background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--border); overflow: hidden; transition: all .2s var(--ease);
}
.res-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.res-thumb-link {
  position: relative; flex-shrink: 0; width: 220px; height: 124px; display: block; overflow: hidden;
}
.res-thumb { width: 100%; height: 100%; object-fit: cover; }
.res-play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4); opacity: 0; transition: opacity .2s;
}
.res-thumb-link:hover .res-play-overlay { opacity: 1; }
.res-info {
  display: flex; flex-direction: column; justify-content: center; padding: 12px 16px 12px 0;
  flex: 1; min-width: 0; position: relative;
}
.res-title { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.res-date { font-size: .75rem; color: var(--text-muted); }
.res-category-badge {
  display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
  background: var(--primary-light); color: var(--primary);
}
.res-delete-btn {
  position: absolute; top: 8px; right: 8px; background: var(--danger-light); border: none;
  color: var(--danger); width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  font-size: .7rem; display: flex; align-items: center; justify-content: center;
}
.res-empty { color: var(--text-muted); text-align: center; padding: 60px 0; font-size: .9rem; }
@media (max-width: 600px) {
  .res-card { flex-direction: column; }
  .res-thumb-link { width: 100%; height: 180px; }
  .res-info { padding: 12px 16px; }
}

/* ── Academy Formations ─────────────────────────────────── */
.aca-section-sep { margin: 36px 0 16px 0; }
.aca-section-title {
  font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); padding-bottom: 10px; border-bottom: 1px dashed var(--border);
}
/* ── Ressources group wrapper ────────────────────────────── */
.aca-group-block {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 4px 12px 12px;
  margin-bottom: 20px;
}
.aca-group-header {
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  padding: 12px 6px 10px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.aca-group-count {
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: .75rem;
  font-weight: 700;
}
.aca-group-block .aca-cat-block:last-child { margin-bottom: 0; }

.aca-cat-block { margin-bottom: 12px; }

/* Accordion toggle button */
.aca-cat-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border); cursor: pointer; font-family: inherit;
  transition: all .2s var(--ease);
  box-shadow: var(--shadow-xs);
}
.aca-cat-toggle:hover { border-color: var(--primary); background: var(--primary-light); }
.aca-cat-toggle-label {
  font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--primary); display: flex; align-items: center; gap: 10px;
}
.aca-cat-chevron {
  color: var(--primary); flex-shrink: 0;
  transition: transform .25s var(--ease);
}
.aca-cat-count {
  background: var(--primary-light); color: var(--primary); font-size: .7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}

/* Grid collapse */
.aca-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
  margin-top: 12px; overflow: hidden;
}
.aca-cat-collapsed { display: none; }
.aca-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: all .2s var(--ease);
}
.aca-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.aca-thumb-link {
  position: relative; display: block; width: 100%; height: 140px; overflow: hidden;
}
.aca-thumb { width: 100%; height: 100%; object-fit: cover; }
.aca-card-body { padding: 12px 14px; }
.aca-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px;
}
.aca-card-name { font-size: .9rem; font-weight: 700; color: var(--text); line-height: 1.3; flex: 1; }
.aca-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.aca-card-desc {
  font-size: .8rem; color: var(--text-muted); margin: 6px 0 0 0; line-height: 1.5;
}
.aca-edit-form {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
@media (max-width: 600px) {
  .aca-cat-grid { grid-template-columns: 1fr; }
}

/* ─── Badge "Nouveau" formation ─────────────────────────── */
.badge-nouveau {
  display: inline-block; font-size: .75rem;
  background: #fee2e2; color: #dc2626;
  border-radius: 6px; padding: 1px 6px;
  font-weight: 700; margin-left: 6px;
  animation: pulse-nouveau 2s ease-in-out infinite;
}
@keyframes pulse-nouveau {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.05); }
}

/* ─── Nav dot indicator for new formations ──────────────── */
.tab-btn-validation { position: relative; }
.tab-btn-module     { position: relative; }
.tab-has-new::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #dc2626;
}

/* ─── VALIDATION ─────────────────────────────────────────── */
.val-container { max-width: 900px; margin: 0 auto; }
.val-header { text-align: center; margin-bottom: 24px; }
.val-header h2 { font-size: 1.3rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.05em; }
.val-subtitle { color: var(--text-muted); font-size: .85rem; margin-top: 4px; }
.val-add-form {
  display: flex; gap: 10px; margin-bottom: 16px; padding: 16px;
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
  flex-wrap: wrap;
}
.val-input {
  flex: 1; min-width: 180px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: .85rem; font-family: inherit;
}
.val-input:focus { border-color: var(--primary); outline: none; }
.val-add-btn { white-space: nowrap; }
.val-manage-panel {
  background: var(--card); border: 1px solid var(--primary); border-radius: var(--radius);
  padding: 20px; margin-bottom: 20px;
}
.val-manage-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.val-manage-header h3 { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.val-manage-close {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  padding: 6px 12px; border-radius: var(--radius-sm); font-size: .8rem; cursor: pointer;
}
.val-manage-close:hover { border-color: var(--primary); color: var(--text); }
.val-manage-panel .val-add-form { margin-bottom: 0; border: none; padding: 0 0 16px 0; background: none; }
.val-mod-group { margin-bottom: 16px; }
.val-mod-cat-label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.val-mod-count {
  background: var(--bg-subtle); color: var(--text-muted);
  border-radius: 10px; padding: 1px 7px; font-size: .7rem;
}
.val-mod-items { display: flex; flex-direction: column; gap: 4px; }
.val-mod-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--bg-subtle); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.val-mod-name { font-size: .85rem; color: var(--text); }
.val-coach-select { margin-bottom: 20px; }
.val-coach-label { font-size: .8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 10px; }
.val-coach-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.val-coach-chip {
  padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-subtle); font-size: .8rem; font-weight: 700; color: var(--text-muted);
  cursor: pointer; transition: all .2s; font-family: inherit;
}
.val-coach-chip:hover { border-color: var(--primary); color: var(--primary); }
.val-coach-chip.active { background: var(--primary); color: #ffffff; border-color: var(--primary); box-shadow: var(--glow); }

/* ── Calendrier Academy ── */
.cal-container { max-width: 980px; margin: 0 auto; }
.cal-header { margin-bottom: 24px; }
.cal-header h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 4px; }
.cal-subtitle { color: var(--text-muted); font-size: .9rem; margin: 0; }

/* Layout deux colonnes */
.cal-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}
.cal-left-col { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
.cal-events-list { min-width: 0; }

/* ── Mini calendrier visuel ── */
.cal-vis-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  user-select: none;
}
.cal-vis-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cal-vis-month-label {
  font-size: .9rem; font-weight: 800; color: var(--text);
}
.cal-vis-btn {
  background: none; border: 1.5px solid var(--border);
  border-radius: 8px; width: 30px; height: 30px;
  cursor: pointer; font-size: 1.1rem; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.cal-vis-btn:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }

/* Grille 7 colonnes */
.cal-vis-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-vis-dh {
  font-size: .65rem; font-weight: 800; text-align: center;
  color: var(--text-muted); padding-bottom: 6px;
  text-transform: uppercase; letter-spacing: .04em;
}
.cal-vis-day {
  position: relative;
  aspect-ratio: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 8px;
  cursor: default;
  transition: background .12s;
}
.cal-vis-day.has-event { cursor: pointer; }
.cal-vis-day.has-event:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.cal-vis-empty { visibility: hidden; }
.cal-vis-dn {
  font-size: .78rem; font-weight: 500; line-height: 1;
  color: var(--text);
}
.cal-vis-day.is-past .cal-vis-dn { color: var(--text-muted); }
.cal-vis-day.is-today {
  background: var(--primary);
  border-radius: 8px;
}
.cal-vis-day.is-today .cal-vis-dn { color: #fff; font-weight: 800; }
.cal-vis-day.is-today .cal-vis-dot { background: rgba(255,255,255,.9); }

/* Dot événement */
.cal-vis-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary);
  margin-top: 2px; flex-shrink: 0;
}
.cal-vis-day.has-event:not(.is-today) { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.cal-vis-day.has-event:not(.is-today) .cal-vis-dn { color: var(--primary); font-weight: 700; }

/* Highlight au scroll */
@keyframes cal-highlight-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent); }
  60%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: none; }
}
.cal-event-highlight {
  animation: cal-highlight-pulse .8s ease forwards;
  border-left-color: var(--primary) !important;
}

/* ── Focus du mois ── */
.cal-focus-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: 14px;
  padding: 16px;
}
.cal-focus-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.cal-focus-icon { font-size: 1.1rem; }
.cal-focus-title {
  flex: 1; font-size: .85rem; font-weight: 800;
  color: var(--text); text-transform: uppercase; letter-spacing: .04em;
}
.cal-focus-edit-btn {
  background: none; border: 1px solid var(--border);
  border-radius: 7px; padding: 3px 8px; cursor: pointer;
  font-size: .8rem; color: var(--text-muted);
  transition: background .12s, color .12s;
}
.cal-focus-edit-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.cal-focus-content {
  font-size: .85rem; color: var(--text); line-height: 1.6;
  white-space: pre-wrap;
}
.cal-focus-empty { color: var(--text-muted); font-style: italic; font-size: .82rem; }
.cal-focus-edit-zone { margin-top: 4px; }
.cal-focus-textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text);
  font-size: .85rem; font-family: inherit; line-height: 1.5;
  resize: vertical; outline: none; transition: border-color .15s;
}
.cal-focus-textarea:focus { border-color: var(--primary); }
.cal-focus-actions {
  display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end;
}

/* Formulaire ajout */
.cal-add-form {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 18px; margin-bottom: 28px;
}
.cal-form-title { font-size: .92rem; font-weight: 700; margin: 0 0 14px; color: var(--primary); }
.cal-form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cal-input {
  flex: 1; min-width: 140px;
  padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: .88rem;
  outline: none; transition: border-color .15s;
}
.cal-input:focus { border-color: var(--primary); }
.cal-input-date { flex: 0 0 auto; min-width: 160px; }
.cal-submit-btn { margin-top: 4px; }

/* Groupes par mois */
.cal-month-group { margin-bottom: 28px; }
.cal-month-title {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border);
}

/* Carte événement */
.cal-event {
  background: var(--card); border: 1.5px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 10px; padding: 12px 14px;
  margin-bottom: 8px; transition: box-shadow .15s;
}
.cal-event:hover { box-shadow: 0 3px 12px rgba(0,0,0,.07); }
.cal-event-past { opacity: .5; border-left-color: var(--border); }

/* Vue lecture */
.cal-ev-view { display: flex; align-items: flex-start; gap: 14px; }
.cal-ev-date {
  font-size: .78rem; font-weight: 700; color: var(--primary);
  white-space: nowrap; min-width: 110px; padding-top: 2px; flex-shrink: 0;
}
.cal-event-past .cal-ev-date { color: var(--text-muted); }
.cal-ev-body { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-ev-title { font-size: .92rem; font-weight: 700; color: var(--text); }
.cal-ev-studio {
  font-size: .72rem; font-weight: 700;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary); border-radius: 6px; padding: 2px 7px;
}
.cal-ev-notes { font-size: .78rem; color: var(--text-muted); font-style: italic; }
.cal-ev-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-start; }
.cal-edit-btn {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 6px; width: 26px; height: 26px; cursor: pointer;
  font-size: .78rem; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s, color .15s;
}
.cal-edit-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.cal-del-btn {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 6px; width: 26px; height: 26px; cursor: pointer;
  font-size: .8rem; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s, color .15s;
}
.cal-del-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

/* Formulaire édition inline */
.cal-ev-edit { margin-top: 10px; }
.cal-ev-edit-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cal-ev-edit-row .cal-input { flex: 1; min-width: 120px; }
.cal-ev-edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.cal-empty {
  display: flex; align-items: center; gap: 10px;
  padding: 24px; background: var(--card); border-radius: 12px;
  border: 1.5px dashed var(--border); color: var(--text-muted);
  font-size: .9rem; justify-content: center;
}
.cal-empty-icon { font-size: 1.5rem; }
.cal-loading { padding: 20px; text-align: center; color: var(--text-muted); font-size: .9rem; }

@media (max-width: 720px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-left-col { position: static; }
  .cal-event { flex-wrap: wrap; gap: 6px; }
  .cal-ev-date { min-width: unset; }
  .cal-form-row { flex-direction: column; }
}

/* ── Parcours Tab ── */
.parc-belt-block { margin-bottom: 32px; }
.parc-belt-title {
  display: flex; align-items: center; gap: 10px;
  font-size: .9rem; font-weight: 800; color: var(--text);
  margin: 0 0 12px; padding: 8px 12px;
  background: color-mix(in srgb, var(--belt-color, var(--border)) 12%, transparent);
  border-left: 4px solid var(--belt-color, var(--border));
  border-radius: 0 8px 8px 0;
}
.parc-belt-title-emoji { font-size: 1.2rem; }
.parc-belt-count {
  margin-left: auto; background: var(--belt-color, var(--border));
  color: #fff; font-size: .72rem; font-weight: 800;
  padding: 1px 8px; border-radius: 20px; min-width: 22px; text-align: center;
}
.parc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.parc-card {
  background: var(--card); border: 2px solid var(--border);
  border-top: 3px solid var(--belt-color, var(--border));
  border-radius: 12px; padding: 14px 12px 10px;
  transition: box-shadow .18s, transform .12s;
}
.parc-card-clickable { cursor: pointer; }
.parc-card-clickable:hover { box-shadow: 0 4px 20px rgba(37,99,235,.15); transform: translateY(-2px); border-color: var(--primary); }

/* ── Validation comment popup ─────────────────────────────── */
#val-comment-modal { position: fixed; inset: 0; z-index: 1100; }
.vcm-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: prd-fade-in .15s ease;
}
.vcm-card {
  background: var(--card); width: 100%; max-width: 380px;
  border-radius: 18px; padding: 24px 20px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: prd-slide-up .18s ease;
  display: flex; flex-direction: column; gap: 12px;
}
.vcm-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1rem; font-weight: 800; color: var(--text);
}
.vcm-close {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: var(--bg-subtle); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .85rem;
}
.vcm-close:hover { background: var(--border); }
.vcm-subtitle { font-size: .78rem; color: var(--text-muted); margin: 0; }
.vcm-textarea {
  width: 100%; min-height: 90px; resize: vertical;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-subtle); color: var(--text);
  padding: 10px 12px; font-size: .83rem; font-family: inherit;
  outline: none; transition: border-color .15s;
  box-sizing: border-box;
}
.vcm-textarea:focus { border-color: var(--primary); }
.vcm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.vcm-actions .btn-primary { padding: 8px 20px; }
.vcm-actions .btn-secondary { padding: 8px 14px; }

/* ── Parcours coach detail modal ─────────────────────────── */
#parc-detail-modal { position: fixed; inset: 0; z-index: 1000; }
.prd-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
  animation: prd-fade-in .18s ease;
}
@keyframes prd-fade-in { from { opacity:0 } to { opacity:1 } }
.prd-panel {
  background: var(--card); width: 100%; max-width: 520px;
  max-height: 88vh; border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  animation: prd-slide-up .22s ease;
  overflow: hidden;
}
@keyframes prd-slide-up { from { transform: translateY(40px); opacity:.5 } to { transform: translateY(0); opacity:1 } }
.prd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.prd-title { font-size: .95rem; font-weight: 800; color: var(--text); }
.prd-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--bg-subtle); color: var(--text-muted); font-size: 1rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0;
}
.prd-close:hover { background: var(--border); color: var(--text); }
.prd-body { flex: 1; overflow-y: auto; padding: 16px 20px 32px; }
.parc-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 6px; }
.parc-name { font-size: .82rem; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parc-studio-tag {
  font-size: .65rem; font-weight: 700; color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 5px; white-space: nowrap; flex-shrink: 0;
}
.parc-bar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.parc-bar-fill { height: 100%; background: var(--belt-color, var(--primary)); border-radius: 3px; transition: width .4s ease; }
.parc-info { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; }
.parc-count { color: var(--text-muted); }
.parc-pct { font-weight: 800; color: var(--text); }
.parc-pending { font-size: .7rem; color: var(--warning); margin-top: 4px; }
@media (max-width: 600px) { .parc-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } }

/* ── Pending Validations Panel (admin only) ── */
.vpend-section { margin-bottom: 28px; }
.vpend-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.vpend-title { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; }
.vpend-total-badge {
  background: var(--warning); color: #fff; font-size: .75rem; font-weight: 800;
  padding: 2px 8px; border-radius: 20px; min-width: 22px; text-align: center;
}
.vpend-empty {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; background: var(--card); border-radius: 10px;
  border: 1px solid var(--border); color: var(--text-muted); font-size: .9rem;
  margin-bottom: 20px;
}
.vpend-empty-icon { font-size: 1.2rem; }
.vpend-list { display: flex; flex-direction: column; gap: 12px; }
.vpend-coach-block {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.vpend-coach-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.vpend-coach-header:hover { background: var(--primary-light); }
.vpend-coach-name { font-weight: 700; font-size: .9rem; flex: 1; }
.vpend-coach-studio {
  font-size: .72rem; font-weight: 600; padding: 2px 8px;
  background: rgba(59,130,246,.1); color: var(--primary);
  border-radius: 20px;
}
.vpend-count-badge {
  background: var(--warning); color: #fff; font-size: .7rem; font-weight: 800;
  padding: 1px 7px; border-radius: 20px;
}
.vpend-coach-rows { display: flex; flex-direction: column; }
.vpend-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.vpend-row:last-child { border-bottom: none; }
.vpend-row:hover { background: var(--bg-subtle); }
.vpend-row-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vpend-formation { font-size: .85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpend-cat { font-size: .72rem; color: var(--text-muted); }
.vpend-row-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vpend-score {
  font-size: .78rem; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; background: rgba(245,158,11,.12); color: var(--warning);
}
.vpend-score-good { background: rgba(34,197,94,.12); color: #16a34a; }
.vpend-date { font-size: .72rem; color: var(--text-muted); }
.vpend-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.vpend-btn-validate, .vpend-btn-refuse {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.vpend-btn-validate { background: rgba(34,197,94,.15); color: #16a34a; }
.vpend-btn-validate:hover { background: #16a34a; color: #fff; transform: scale(1.08); }
.vpend-btn-refuse { background: rgba(239,68,68,.12); color: #ef4444; }
.vpend-btn-refuse:hover { background: #ef4444; color: #fff; transform: scale(1.08); }
.vpend-btn-validate:disabled, .vpend-btn-refuse:disabled { opacity: .4; cursor: default; transform: none; }
@media (max-width: 600px) {
  .vpend-date { display: none; }
  .vpend-row { padding: 9px 12px; }
}

/* ── Studio Progress Panel (coach leader / admin) ── */
.stprog-section { margin-bottom: 24px; }
.stprog-hint { font-size: .78rem; color: var(--text-muted); margin: -6px 0 10px; font-style: italic; }
.stprog-title {
  font-size: 1rem; font-weight: 700; color: var(--text);
  margin: 0 0 6px; padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}
.stprog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.stprog-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px 12px;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .12s;
  border-top: 3px solid var(--belt-color, var(--border));
}
.stprog-card:hover { border-color: var(--primary); box-shadow: var(--glow); transform: translateY(-2px); }
.stprog-card.active { border-color: var(--primary); box-shadow: var(--glow); background: var(--primary-light); }
.stprog-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 4px; }
.stprog-name { font-size: .82rem; font-weight: 700; color: var(--text); line-height: 1.2; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stprog-belt { font-size: 1.2rem; flex-shrink: 0; }
.stprog-bar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.stprog-bar-fill { height: 100%; background: var(--belt-color, var(--primary)); border-radius: 3px; transition: width .4s ease; }
.stprog-stats { font-size: .78rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.stprog-pct { font-weight: 700; color: var(--text); }
.stprog-pending { font-size: .72rem; color: var(--warning); margin-top: 4px; }
.stprog-quiz-info { font-size: .72rem; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 600px) {
  .stprog-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
}

/* Hero progress ring */
.val-hero {
  display: flex; align-items: center; gap: 28px; padding: 28px;
  background: linear-gradient(135deg, var(--card) 0%, rgba(59,130,246,.08) 100%);
  border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 24px;
}
.val-hero-ring { position: relative; flex-shrink: 0; }
.val-hero-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.val-hero-number { font-size: 2.2rem; font-weight: 900; color: var(--text); line-height: 1; }
.val-hero-pct-sign { font-size: 1rem; font-weight: 700; color: var(--text-muted); margin-top: 4px; }
.val-hero-info { flex: 1; }
.val-hero-name { font-size: 1.3rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.val-hero-sub { font-size: .85rem; color: var(--text-muted); margin-bottom: 12px; }
.val-hero-pills { display: flex; gap: 8px; }
.val-pill {
  padding: 4px 14px; border-radius: 20px; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.val-pill-ok { background: rgba(34,197,94,.15); color: #22c55e; }
.val-pill-pending { background: rgba(59,130,246,.15); color: #60a5fa; }

/* Category cards grid */
.val-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.val-cat-card {
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
  overflow: hidden; transition: all .2s;
}
.val-cat-card:hover { border-color: var(--cat-color, var(--primary)); }
.val-cat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px 8px;
}
.val-cat-label { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.val-cat-score {
  font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 20px;
  background: rgba(255,255,255,.06); color: var(--text-secondary);
}
.val-cat-bar-wrap {
  height: 3px; background: var(--border); margin: 0 18px 6px;
}
.val-cat-bar { height: 100%; border-radius: 2px; transition: width .5s ease; }
.val-cat-items { padding: 4px 10px 10px; }

/* Individual items */
.val-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-sm); transition: all .15s; margin-bottom: 2px;
}
.val-item:hover { background: var(--bg-subtle); }
.val-item-check {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: .8rem; font-weight: 900; flex-shrink: 0;
  border: 2px solid var(--border); color: var(--text-muted); transition: all .2s;
}
.val-item-done .val-item-check {
  background: rgba(34,197,94,.2); border-color: #22c55e; color: #22c55e;
}
.val-item-failed .val-item-check {
  background: rgba(239,68,68,.2); border-color: #ef4444; color: #ef4444;
}
.val-item-pending .val-item-check { border-style: dashed; }
.val-item-awaiting .val-item-check {
  background: rgba(217,119,6,.15); border-color: var(--warning); color: var(--warning);
}
.val-item-content { flex: 1; min-width: 0; }
.val-item-name {
  font-size: .82rem; font-weight: 600; display: block;
  color: var(--text);
}
.val-item-done .val-item-name { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: rgba(34,197,94,.4); }
.val-item-date { font-size: .65rem; color: var(--text-muted); }
.val-item-actions { display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.val-item:hover .val-item-actions { opacity: 1; }
.val-item-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); cursor: pointer; font-size: .7rem; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; transition: all .15s;
  font-family: inherit;
}
.val-item-btn:hover { border-color: var(--primary); color: var(--text); background: var(--bg-subtle); }
.val-ibtn-ok.active { background: rgba(34,197,94,.2); border-color: #22c55e; color: #22c55e; }
.val-ibtn-fail.active { background: rgba(239,68,68,.2); border-color: #ef4444; color: #ef4444; }
.val-ibtn-del:hover { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }

.val-empty { color: var(--text-muted); text-align: center; padding: 60px 0; font-size: .9rem; }
.val-list { min-height: 100px; }

@media (max-width: 600px) {
  .val-hero { flex-direction: column; text-align: center; }
  .val-hero-pills { justify-content: center; }
  .val-cats-grid { grid-template-columns: 1fr; }
  .val-item-actions { opacity: 1; }
}

/* ─── QUIZ ───────────────────────────────────────────────── */
.quiz-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.quiz-overlay.hidden { display: none; }
.quiz-modal {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 28px;
  position: relative; box-shadow: var(--shadow-lg);
}
.quiz-modal-wide { max-width: 780px; }
.quiz-close {
  position: absolute; top: 12px; right: 16px; background: none; border: none;
  color: var(--text-muted); font-size: 1.5rem; cursor: pointer; line-height: 1;
}
.quiz-close:hover { color: var(--text); }
.quiz-header { text-align: center; margin-bottom: 24px; }
.quiz-title { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.quiz-formation { color: var(--primary); font-weight: 700; font-size: .9rem; margin-top: 4px; }
.quiz-info { color: var(--text-muted); font-size: .8rem; margin-top: 4px; }
.quiz-loading { text-align: center; padding: 40px; color: var(--text-muted); }

/* Questions */
.quiz-questions { display: flex; flex-direction: column; gap: 24px; }
.quiz-q { background: var(--card); border-radius: var(--radius); padding: 18px; border: 1px solid var(--border); }
.quiz-q-num { font-size: .7rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.quiz-q-text { font-size: .95rem; font-weight: 700; margin-bottom: 14px; line-height: 1.4; }
.quiz-options { display: flex; flex-direction: column; gap: 6px; }
.quiz-option {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  cursor: pointer; transition: all .15s; background: var(--bg-subtle);
}
.quiz-option:hover { border-color: var(--primary); background: var(--primary-ghost); }
.quiz-option.selected { border-color: var(--primary); background: var(--primary-light); }
.quiz-option input { display: none; }
.quiz-option-letter {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: .75rem; font-weight: 900; flex-shrink: 0;
  background: var(--bg-subtle); color: var(--text-muted);
}
.quiz-option.selected .quiz-option-letter { background: var(--primary); color: #ffffff; }
.quiz-option-text { font-size: .85rem; font-weight: 600; }

/* Submit */
.quiz-submit-wrap { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.quiz-submit-btn {
  padding: 12px 32px; border-radius: var(--radius); border: none;
  background: var(--primary); color: #ffffff; font-size: .85rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; cursor: pointer; transition: all .2s;
  font-family: inherit;
}
.quiz-submit-btn:hover { background: var(--primary-hover); transform: translateY(-1px); }
.quiz-submit-btn:disabled { opacity: .5; cursor: not-allowed; }
.quiz-btn-secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.quiz-btn-secondary:hover { background: var(--card-hover); }

/* Results */
.quiz-result { text-align: center; padding: 20px 0; }
.quiz-result-icon { font-size: 3rem; margin-bottom: 10px; }
.quiz-result-title { font-size: 1.3rem; font-weight: 900; }
.quiz-result-score { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0; }
.quiz-score-big { font-size: 2rem; font-weight: 900; }
.quiz-score-pct { font-size: 1.1rem; font-weight: 800; padding: 4px 14px; border-radius: 20px; }
.quiz-score-pass { background: rgba(34,197,94,.2); color: #22c55e; }
.quiz-score-fail { background: rgba(239,68,68,.2); color: #ef4444; }
.quiz-result-msg { color: var(--text-muted); font-size: .85rem; }

/* Corrections */
.quiz-corrections { margin-top: 24px; }
.quiz-corrections h3 { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; color: var(--text-muted); }
.quiz-corr { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 6px; border-left: 3px solid; }
.quiz-corr-ok { border-color: #22c55e; background: rgba(34,197,94,.05); }
.quiz-corr-ko { border-color: #ef4444; background: rgba(239,68,68,.05); }
.quiz-corr-header { display: flex; align-items: center; gap: 10px; }
.quiz-corr-num { font-size: .7rem; font-weight: 900; color: var(--text-muted); background: var(--bg-subtle); padding: 2px 8px; border-radius: 4px; }
.quiz-corr-icon { font-size: 1rem; }
.quiz-corr-answer { font-size: .8rem; color: var(--text-secondary); margin-top: 4px; }
.quiz-corr-explain { font-size: .8rem; color: var(--text-muted); margin-top: 4px; font-style: italic; }

/* Quiz buttons in validation */
.quiz-start-btn {
  padding: 5px 14px; border-radius: var(--radius); border: 1px solid var(--primary);
  background: var(--primary-light); color: var(--primary); font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: all .15s;
  font-family: inherit; white-space: nowrap;
}
.quiz-start-btn:hover { background: var(--primary); color: #ffffff; }
.quiz-passed-badge {
  padding: 3px 10px; border-radius: 20px; font-size: .65rem; font-weight: 800;
  background: rgba(34,197,94,.15); color: #22c55e; text-transform: uppercase; white-space: nowrap;
}
.val-ibtn-quiz { background: var(--primary-light) !important; color: var(--primary) !important; font-weight: 900 !important; border-color: var(--primary) !important; opacity: 1 !important; }

/* Quiz Editor */
.quiz-editor-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.quiz-editor-q { background: var(--card); border-radius: var(--radius-sm); padding: 12px; border: 1px solid var(--border); }
.quiz-editor-q-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.quiz-editor-q-text { flex: 1; font-size: .85rem; font-weight: 700; }
.quiz-editor-options { display: flex; flex-wrap: wrap; gap: 6px; }
.quiz-editor-opt { font-size: .78rem; padding: 3px 10px; border-radius: 4px; background: var(--bg-subtle); color: var(--text-muted); }
.quiz-editor-correct { background: rgba(34,197,94,.2); color: #22c55e; font-weight: 700; }
.quiz-editor-explain { font-size: .75rem; color: var(--text-muted); font-style: italic; margin-top: 6px; }
.quiz-editor-add { background: var(--card); border-radius: var(--radius); padding: 18px; border: 1px solid var(--border); }
.quiz-editor-ai {
  background: linear-gradient(135deg, var(--card) 0%, rgba(59,130,246,.08) 100%);
  border-radius: var(--radius); padding: 18px; border: 1px solid var(--primary);
  margin-bottom: 14px;
}
.quiz-editor-ai h3 { font-size: .85rem; font-weight: 800; text-transform: uppercase; margin-bottom: 6px; }
.quiz-ai-desc { font-size: .78rem; color: var(--text-muted); margin-bottom: 10px; }
.quiz-ai-textarea { width: 100%; font-size: .8rem; resize: vertical; min-height: 80px; }
.quiz-ai-btn { white-space: nowrap; }
.quiz-ai-status { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.quiz-editor-add h3 { font-size: .85rem; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
.quiz-editor-opts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quiz-editor-opt-input label { font-size: .7rem; font-weight: 700; color: var(--text-muted); display: block; margin-bottom: 4px; }

.notes-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.notes-header h2 { font-size: 1.1rem; text-transform: uppercase; font-weight: 800; }
.notes-empty { color: var(--text-muted); text-align: center; padding: 40px 0; }
.note-card {
  background: var(--card); border-radius: var(--radius); padding: 16px;
  margin-bottom: 10px; box-shadow: var(--shadow-xs); border: 1px solid var(--border);
  cursor: pointer; transition: all .2s var(--ease);
}
.note-card:hover { box-shadow: var(--shadow-sm); border-color: var(--primary); }
.note-preview { font-size: .875rem; color: var(--text-secondary); margin-bottom: 8px; }
.note-meta { display: flex; justify-content: space-between; align-items: center; }
.note-date { font-size: .75rem; color: var(--text-muted); }
.note-actions { display: flex; gap: 6px; }
.note-btn {
  padding: 4px 10px; border-radius: var(--radius-sm); font-size: .75rem; font-weight: 700;
  cursor: pointer; border: 1px solid var(--border); background: var(--bg-subtle);
  font-family: inherit; transition: all .15s var(--ease); color: var(--text-secondary);
  text-transform: uppercase;
}
.note-btn:hover { background: var(--card-hover); border-color: var(--text-muted); }
.note-btn-delete:hover { background: var(--danger-light); color: var(--danger); border-color: rgba(255,23,68,.3); }

/* ─── Modal ──────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px);
}
.modal {
  background: var(--card); border-radius: var(--radius-xl); padding: 28px;
  width: 100%; max-width: 560px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.modal h2 { margin-bottom: 16px; font-size: 1.1rem; text-transform: uppercase; font-weight: 800; }
.modal textarea {
  width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: .9rem; resize: vertical;
  background: var(--bg-subtle); color: var(--text);
}
.modal textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ghost); }
.form-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: flex-end; }

/* ─── PDF Export ─────────────────────────────────── */
.btn-recap-pdf {
  background: var(--primary-light); color: var(--primary); border: 1px solid rgba(0,230,118,.2);
  border-radius: var(--radius-sm); padding: 6px 14px; font-size: .8rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: inherit;
  transition: all .2s var(--ease); text-transform: uppercase;
}
.btn-recap-pdf:hover { background: var(--primary); color: #ffffff; box-shadow: var(--glow); }

/* ─── Community / Team ───────────────────────────── */
.comm-container { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; height: calc(100vh - 140px); }
.comm-header { text-align: center; margin-bottom: 16px; }
.comm-header h2 { font-size: 1.2rem; text-transform: uppercase; font-weight: 900; }
.comm-subtitle { color: var(--text-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: 0.1em; font-size: .75rem; }
.comm-messages {
  flex: 1; overflow-y: auto; padding: 16px; background: var(--card);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  border: 1px solid var(--border); margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.comm-empty { color: var(--text-muted); text-align: center; padding: 40px 0; font-size: .9rem; }

.comm-msg { display: flex; gap: 10px; max-width: 85%; animation: commFadeIn .25s var(--ease); }
.comm-msg-me { margin-left: auto; flex-direction: row-reverse; }
.comm-msg-other { margin-right: auto; }
@keyframes commFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.comm-msg-avatar {
  width: 36px; height: 36px; border-radius: var(--radius); display: flex; align-items: center;
  justify-content: center; font-size: .7rem; font-weight: 800; flex-shrink: 0;
  border: 1px solid var(--border);
}
.comm-msg-body { min-width: 0; }
.comm-msg-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.comm-msg-name { font-size: .75rem; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; }
.comm-msg-time { font-size: .65rem; color: var(--text-muted); }
.comm-msg-cr-tag {
  font-size: .6rem; font-weight: 800; background: var(--primary-light); color: var(--primary);
  padding: 2px 8px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: .05em;
}
.comm-msg-club-tag {
  font-size: .6rem; font-weight: 700; background: var(--accent-light); color: var(--accent);
  padding: 2px 8px; border-radius: var(--radius-sm); text-transform: uppercase;
}
.comm-msg-leader-tag {
  font-size: .6rem; font-weight: 700;
  background: linear-gradient(135deg, rgba(0,230,118,.1), rgba(0,176,255,.1));
  color: var(--primary); padding: 2px 8px; border-radius: var(--radius-sm);
}
.comm-delete-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: .7rem; padding: 0 2px; opacity: 0; transition: opacity .15s;
}
.comm-msg:hover .comm-delete-btn { opacity: 1; }
.comm-delete-btn:hover { color: var(--danger); }
/* Like button */
.comm-msg-footer { margin-top: 4px; min-height: 22px; }
.comm-like-btn {
  display: inline-flex; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; padding: 2px 6px;
  border-radius: 20px; font-size: .8rem; font-family: inherit;
  transition: background .15s, transform .1s; color: var(--text-muted);
  opacity: 0.5;
}
.comm-msg:hover .comm-like-btn { opacity: 1; }
.comm-like-btn:hover { background: rgba(239,68,68,.08); }
.comm-like-btn.liked { opacity: 1; color: #e11d48; }
.comm-like-count { font-size: .72rem; font-weight: 700; min-width: 10px; }
.comm-like-display { font-size: .75rem; color: #e11d48; margin-left: 4px; }
@keyframes like-pop { 0%,100% { transform: scale(1); } 40% { transform: scale(1.4); } 70% { transform: scale(.9); } }
.comm-like-btn.like-pop .comm-like-heart { display: inline-block; animation: like-pop .3s ease; }

.comm-text-msg {
  background: var(--bg-subtle); padding: 10px 14px; border-radius: var(--radius);
  font-size: .875rem; line-height: 1.5; word-break: break-word;
  border: 1px solid var(--border);
}
.comm-msg-me .comm-text-msg { background: var(--primary-light); border-color: rgba(0,230,118,.2); }

.comm-audio-msg {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--bg-subtle); border-radius: var(--radius); border: 1px solid var(--border);
  min-width: 200px;
}
.comm-msg-me .comm-audio-msg { background: var(--primary-light); border-color: rgba(0,230,118,.2); }

.comm-play-btn {
  width: 34px; height: 34px; border-radius: var(--radius); border: none;
  background: var(--primary); color: #ffffff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s var(--ease); font-weight: 800;
}
.comm-play-btn:hover { background: var(--primary-hover); transform: scale(1.05); box-shadow: var(--glow); }

.comm-audio-wave {
  flex: 1; height: 6px; background: var(--border); border-radius: 3px;
  overflow: hidden; position: relative;
}
.comm-audio-progress {
  height: 100%; background: var(--primary); border-radius: 3px;
  width: 0%; transition: width .1s linear;
}
.comm-speed-btn {
  padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--text-muted); font-size: .65rem; font-weight: 800;
  cursor: pointer; transition: all .15s var(--ease); font-family: inherit;
  min-width: 30px; text-align: center;
}
.comm-speed-btn:hover { border-color: var(--primary); color: var(--primary); }
.comm-audio-dur { font-size: .7rem; color: var(--text-muted); font-weight: 700; min-width: 28px; text-align: right; }

.comm-input-bar { display: flex; gap: 8px; align-items: center; }
.comm-text-input {
  flex: 1; display: flex; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs);
}
.comm-text-input input {
  flex: 1; padding: 10px 16px; border: none; background: transparent;
  font-family: inherit; font-size: .875rem; color: var(--text);
}
.comm-text-input input::placeholder { color: var(--text-muted); }
.comm-text-input input:focus { outline: none; }
.comm-send-btn {
  width: 40px; height: 40px; border: none; background: var(--primary); color: #ffffff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s var(--ease); border-radius: var(--radius);
}
.comm-send-btn:hover { background: var(--primary-hover); }
.comm-mic-btn {
  width: 42px; height: 42px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); color: var(--text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s var(--ease); flex-shrink: 0;
}
.comm-mic-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-light); }
.comm-mic-btn.recording {
  background: var(--danger); color: white; border-color: var(--danger);
  animation: commPulse 1s infinite; box-shadow: 0 0 15px rgba(255,23,68,.4);
}
@keyframes commPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ─── Recording live bar (inside input bar) ──────── */
.comm-rec-live {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: var(--danger-light, #fff0f0); border: 1px solid rgba(239,68,68,.3);
  border-radius: var(--radius); padding: 0 14px; height: 42px;
  animation: fadeInRec .15s ease;
}
@keyframes fadeInRec { from { opacity: 0; transform: scaleX(.97); } to { opacity: 1; transform: scaleX(1); } }
.comm-rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #ef4444; flex-shrink: 0;
  animation: recBlink .8s ease-in-out infinite;
}
@keyframes recBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.comm-rec-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  color: #ef4444; flex-shrink: 0;
}
.comm-rec-timer {
  font-size: 1.15rem; font-weight: 700; font-family: monospace;
  color: #ef4444; min-width: 44px;
}
.comm-rec-timer.over { color: #b91c1c; }
.comm-rec-hint {
  font-size: .72rem; color: var(--text-muted); margin-left: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comm-rec-cancel {
  flex-shrink: 0; background: none; border: 1px solid rgba(239,68,68,.35);
  border-radius: var(--radius-sm); color: #ef4444; font-size: .85rem;
  padding: 3px 8px; cursor: pointer; transition: background .15s;
  line-height: 1;
}
.comm-rec-cancel:hover { background: rgba(239,68,68,.12); }

/* ─── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Responsive (tablet) ────────────────────────── */
@media (max-width: 768px) {
  header { padding: 0 12px; gap: 8px; }
  nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main { padding: 12px; }
  .ctrl-admin-fields { flex-direction: column; }
  .add-rep-form { flex-direction: column; }
  .add-rep-form input, .add-rep-form select { width: 100%; }
}

/* ─── Mobile — Bottom tab bar ────────────────────── */
@media (max-width: 767px) {
  header { height: 48px; padding: 0 16px; }
  header h1 { font-size: 0.95rem; }

  nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    display: flex; z-index: 100;
    height: 58px; padding: 0;
    overflow-x: auto; gap: 0;
    scrollbar-width: none;
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  }
  nav::-webkit-scrollbar { display: none; }

  .tab-btn {
    flex: 1; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 4px 2px; gap: 2px;
    border-radius: 0; font-size: 0.55rem;
    min-width: 52px;
    border-top: 2px solid transparent;
    text-transform: uppercase; letter-spacing: 0;
    white-space: nowrap; overflow: hidden;
  }
  .tab-btn .tab-icon { font-size: 1.15rem; }
  .tab-btn.active { color: var(--primary); background: rgba(47,129,247,0.08); border-top-color: var(--primary); }

  main { padding-bottom: 66px; }
}

/* ─── Mobile responsive (extra rules) ───────────── */
@media (max-width: 767px) {
  /* Touch targets */
  .btn-primary, .btn-secondary { min-height: 44px; }
  .td-check-row { min-height: 48px; }
  .td-smileys-big { gap: 6px; }
  .td-smileys-big .td-smiley { padding: 10px 8px; min-width: 52px; }
  .td-smileys-big .td-smiley-emoji { font-size: 1.6rem; }
  .td-smileys-big .td-smiley-label { font-size: .5rem; }
  .td-counter-btn { width: 44px; height: 44px; font-size: 1.3rem; }

  /* Grilles en 1 colonne */
  .coaches-grid { grid-template-columns: 1fr !important; }
  .ctrl-overview-grid { grid-template-columns: 1fr !important; }

  /* Tables scrollables */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .studios-table-wrap { overflow-x: auto; }

  /* Formulaires empilés */
  .val-add-form { flex-direction: column; }
  .val-add-form input, .val-add-form select { width: 100%; }

  /* Titres */
  h2 { font-size: 1.1rem !important; }
  h3 { font-size: 0.95rem !important; }

  /* Sections */
  .val-container, .res-container, .td-page { padding: 12px; }

  /* Recap CA chart moins haut */
  .recap-ca-chart-wrap { height: 220px !important; }

  /* Cards grid single column */
  .dash-grid, .recap-kpis, .recap-badges-grid { grid-template-columns: 1fr; }
  .admin-rep-list { grid-template-columns: 1fr; }
  .td-counters-grid { grid-template-columns: 1fr 1fr; }
  .month-nav { flex-wrap: wrap; justify-content: center; padding: 8px 12px; }
  .month-nav span { min-width: auto; font-size: .9rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  main { padding: 20px; }
  .coaches-grid { grid-template-columns: repeat(2, 1fr); }
  .recap-badges-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Empty states ───────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.5; display: block; }
.empty-state h3 { font-size: 1.1rem; color: var(--text-secondary, var(--text)); margin-bottom: 8px; }
.empty-state p { font-size: 0.85rem; margin-bottom: 20px; }

/* ─── Coach cards (onglet Succès admin) ──────────── */
.coaches-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.coach-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; transition: box-shadow 0.2s; }
.coach-card:hover { box-shadow: 0 0 0 2px var(--primary); }
.coach-card-leader { border-color: rgba(250,204,21,.35); box-shadow: 0 0 0 1px rgba(250,204,21,.2); }
.coach-card-leader:hover { box-shadow: 0 0 0 2px rgba(250,204,21,.6); }
.coach-leader-tag {
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: #ca8a04; margin-bottom: 6px;
}
.coach-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.coach-name { font-weight: 700; font-size: .95rem; flex: 1; }
.studio-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; color: #fff; flex-shrink: 0; }
.coach-inactive { opacity: 0.5; }
.inactive-separator { grid-column: 1 / -1; padding: 8px 0; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; border-top: 1px dashed var(--border); margin-top: 8px; }
.coaches-group-sep {
  grid-column: 1 / -1; padding: 6px 0 4px;
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); border-top: 1px solid var(--border); margin-top: 6px;
}
.coaches-group-sep:first-child { border-top: none; margin-top: 0; }
.studio-badge.studio-marcq { background: var(--studio-marcq); }
.studio-badge.studio-wasquehal { background: var(--studio-wasquehal); }
.studio-badge.studio-lille { background: var(--studio-lille); }
.studio-badge.studio-boulogne { background: var(--studio-boulogne); }
.studio-badge.studio-neuilly { background: var(--studio-neuilly); }
.studio-badge.studio-levallois { background: var(--studio-levallois); }

/* ─── Chart studio selector ──────────────────────── */
.chart-studio-selector { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; overflow-x: auto; padding-bottom: 4px; }
.chart-studio-btn { border: 1px solid var(--border); background: none; color: var(--text-muted); padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; cursor: pointer; white-space: nowrap; min-height: auto; }
.chart-studio-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ─── Control overview grid ──────────────────────── */
.ctrl-overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.ctrl-studio-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; transition: box-shadow 0.2s; }
.ctrl-studio-card:hover { box-shadow: 0 0 0 2px var(--primary); }
.ctrl-studio-card h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-bottom: 12px; }
.studio-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ctrl-ca-bar { margin-bottom: 8px; }
.ctrl-ca-bar span { font-size: 0.8rem; color: var(--text-muted); display: block; margin-bottom: 4px; }
.ctrl-mini-metrics { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-muted); }

/* ─── Objectifs modal ────────────────────────────── */
.modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; width: min(480px, 95vw); max-height: 90vh; overflow-y: auto; }
.modal-box h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; }
.objectifs-form { display: flex; flex-direction: column; gap: 12px; }
.objectif-row { display: flex; align-items: center; gap: 12px; }
.objectif-row label { flex: 1; font-size: 0.9rem; display: flex; align-items: center; gap: 6px; }
.objectif-row input { width: 120px; text-align: right; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ─── Team messages contraste ────────────────────── */
.comm-message .msg-text { color: var(--text); }
.comm-msg-name { font-weight: 700; }

/* ─── Sécurité admin-only ────────────────────────── */
[data-admin-only] { display: none !important; }
body.is-admin [data-admin-only] { display: revert !important; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════════════ */

/* Tab icons/labels layout — desktop: row, mobile: column (overridden by media query) */
.tab-icon { font-size: 1rem; line-height: 1; }
.tab-label { font-size: .65rem; line-height: 1; }

/* Mobile user-info hidden (nav at bottom, no room) */
@media (max-width: 767px) {
  .user-info { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  main { padding: 20px 16px; }
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN-ONLY ELEMENTS
   ═══════════════════════════════════════════════════════════════ */
[data-admin-only] { display: none !important; }
body.is-admin [data-admin-only] { display: unset !important; }
body.is-admin [data-admin-only].hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   CHART STUDIO SELECTOR
   ═══════════════════════════════════════════════════════════════ */
.chart-studio-selector {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
  overflow-x: auto; padding-bottom: 4px;
}
.chart-studio-btn {
  padding: 6px 16px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--bg-subtle); color: var(--text-muted); font-size: .75rem;
  font-weight: 700; cursor: pointer; transition: all .2s var(--ease);
  font-family: inherit; text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap;
}
.chart-studio-btn:hover { border-color: var(--primary); color: var(--primary); }
.chart-studio-btn.active {
  background: var(--primary); color: #ffffff; border-color: var(--primary);
  box-shadow: var(--glow);
}

/* ═══════════════════════════════════════════════════════════════
   COACH CARDS (Succès tab redesign)
   ═══════════════════════════════════════════════════════════════ */
.coach-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.coach-card {
  background: var(--card); border-radius: var(--radius-lg); padding: 16px;
  border: 1px solid var(--border); transition: all .3s var(--ease); position: relative;
}
.coach-card:hover { box-shadow: var(--shadow-md), var(--glow); transform: translateY(-2px); }
.coach-card-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.coach-card .coach-name { font-weight: 800; font-size: .95rem; text-transform: uppercase; flex: 1; }
.studio-badge {
  font-size: .6rem; font-weight: 800; padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .05em;
}
.studio-badge-marcq { background: rgba(245,158,11,.15); color: var(--studio-marcq); }
.studio-badge-wasquehal { background: rgba(59,130,246,.15); color: var(--studio-wasquehal); }
.studio-badge-lille { background: rgba(16,185,129,.15); color: var(--studio-lille); }
.studio-badge-boulogne { background: rgba(239,68,68,.15); color: var(--studio-boulogne); }
.studio-badge-neuilly { background: rgba(139,92,246,.15); color: var(--studio-neuilly); }
.studio-badge-levallois { background: rgba(236,72,153,.15); color: var(--studio-levallois); }

/* KPI list inside coach card */
.coach-kpi-list {
  display: flex; flex-direction: column; gap: 0;
  margin-top: 4px;
}
.coach-kpi-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.coach-kpi-row:last-child { border-bottom: none; }
.coach-kpi-label { color: var(--text-muted); font-weight: 500; }
.coach-kpi-value { font-weight: 700; color: var(--text); }

.coach-inactive { opacity: 0.55; }
.coaches-inactive-sep {
  text-align: center; color: var(--text-muted); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin: 20px 0 12px; padding-top: 12px;
  border-top: 1px dashed var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   CONTRÔLE OVERVIEW GRID
   ═══════════════════════════════════════════════════════════════ */
.ctrl-overview-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.ctrl-studio-card {
  background: var(--card); border-radius: var(--radius-lg); padding: 20px;
  border: 1px solid var(--border); cursor: pointer; transition: all .3s var(--ease);
}
.ctrl-studio-card:hover { box-shadow: var(--shadow-md), var(--glow); transform: translateY(-3px); }
.ctrl-studio-card h3 {
  display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 800;
  text-transform: uppercase; margin-bottom: 12px;
}
.studio-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ctrl-ca-bar { margin-bottom: 10px; }
.ctrl-ca-bar span { font-size: .8rem; color: var(--text-secondary); font-weight: 600; display: block; margin-bottom: 4px; }
.ctrl-ca-bar .progress { height: 6px; background: var(--bg-subtle); border-radius: 3px; overflow: hidden; }
.ctrl-ca-bar .progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .5s ease; }
.ctrl-mini-metrics {
  display: flex; gap: 12px; font-size: .8rem; color: var(--text-muted); font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.5; }
.empty-state h3 { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 8px; }
.empty-state p { font-size: 0.85rem; margin-bottom: 20px; }

/* ═══════════════════════════════════════════════════════════════
   OBJECTIFS CA MODAL
   ═══════════════════════════════════════════════════════════════ */
.obj-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.obj-row { display: flex; align-items: center; gap: 8px; }
.obj-row label { font-size: .8rem; font-weight: 700; min-width: 90px; text-transform: uppercase; }
.obj-row input {
  flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-subtle); color: var(--text); font-family: inherit; font-size: .9rem;
}
.obj-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ghost); }

/* ═══════════════════════════════════════════════════════════════
   GAMIFICATION — BELTS
   ═══════════════════════════════════════════════════════════════ */
.val-hero-belt { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.val-belt-emoji { font-size: 1.5rem; }
.val-belt-name { font-size: .85rem; font-weight: 700; }
.val-belt-next {
  font-size: .7rem; color: var(--text-muted); margin-top: 4px;
}
.val-hero-xp {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .85rem; font-weight: 800; color: var(--warning);
  margin-top: 4px;
}
.val-hero-badges {
  display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap;
}
.val-hero-badge {
  font-size: 1.2rem; opacity: 0.2; transition: opacity .3s;
}
.val-hero-badge.unlocked { opacity: 1; }
.val-hero-streak {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .85rem; font-weight: 800; color: var(--warning);
}
.val-hero-streak.hot { color: #ef4444; text-shadow: 0 0 8px rgba(239,68,68,.4); }

/* Belt up animation */
.belt-up-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.3s ease;
}
.belt-up-overlay.hidden { display: none !important; }
.belt-up-card {
  text-align: center; padding: 40px;
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.belt-up-emoji { font-size: 5rem; animation: pulse 1s infinite; }
.belt-up-card h2 { font-size: 1.6rem; font-weight: 900; margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .1em; }
.belt-up-card p { color: var(--text-secondary); font-size: 1.1rem; }
@keyframes scaleIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* XP Toast */
.xp-toast {
  position: fixed; top: 80px; right: 20px; z-index: 9999;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #000; font-weight: 900; font-size: 1.2rem;
  padding: 12px 24px; border-radius: 12px;
  animation: xpFloat 2s ease forwards;
  box-shadow: 0 4px 20px rgba(245,158,11,0.4);
  pointer-events: none;
}
@keyframes xpFloat {
  0% { opacity: 0; transform: translateY(20px) scale(0.8); }
  20% { opacity: 1; transform: translateY(0) scale(1.05); }
  80% { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ═══════════════════════════════════════════════════════════════
   GAMIFICATION — QUIZ IMPROVED
   ═══════════════════════════════════════════════════════════════ */
.quiz-timer-bar {
  width: 100%; height: 4px; background: var(--bg-subtle);
  border-radius: 2px; margin: 12px 0; overflow: hidden;
}
.quiz-timer-fill {
  height: 100%; background: var(--success);
  transition: width 1s linear; border-radius: 2px;
}
.quiz-timer-fill.warning { background: var(--warning); }
.quiz-timer-fill.danger { background: var(--danger); }

.quiz-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font-size: .85rem;
}
.quiz-progress { color: var(--text-muted); font-weight: 700; }
.quiz-timer { font-weight: 800; color: var(--text); font-size: .9rem; }

.quiz-question-text {
  font-size: 1rem; font-weight: 700; margin-bottom: 16px; line-height: 1.5;
}
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
  display: block; width: 100%; text-align: left;
  padding: 14px 18px; background: var(--bg-subtle); border: 2px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: .9rem;
  cursor: pointer; transition: all .2s var(--ease); font-family: inherit;
}
.quiz-option:hover { border-color: var(--primary); background: var(--primary-light); }
.quiz-option.selected { border-color: var(--primary); background: var(--primary-light); }
.quiz-option.correct { border-color: var(--success); background: var(--success-light); animation: correctPulse .5s ease; }
.quiz-option.wrong { border-color: var(--danger); background: var(--danger-light); }
@keyframes correctPulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* Quiz result */
.quiz-result-card { text-align: center; padding: 32px 20px; }
.quiz-result-stars { font-size: 2.5rem; margin-bottom: 12px; }
.quiz-result-score { font-size: 2rem; font-weight: 900; }
.quiz-result-pct { font-size: 1rem; color: var(--text-muted); margin-bottom: 8px; }
.quiz-result-xp { font-size: 1.2rem; font-weight: 800; color: var(--warning); margin-bottom: 16px; }
.quiz-result-perfect { font-size: 1.3rem; font-weight: 900; color: var(--success); margin-top: 12px; }

/* Stars on items */
.val-item-stars { font-size: .7rem; margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════════
   GAMIFICATION — LEADERBOARD
   ═══════════════════════════════════════════════════════════════ */
.val-leaderboard {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 20px; margin-bottom: 24px; border: 1px solid var(--border);
}
.val-leaderboard h3 { font-size: .95rem; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
.val-lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius); margin-bottom: 4px;
  transition: background .2s; font-size: .85rem;
}
.val-lb-row:hover { background: var(--bg-subtle); }
.val-lb-gold { background: rgba(251,191,36,0.05); }
.val-lb-silver { background: rgba(192,192,192,0.03); }
.val-lb-bronze { background: rgba(205,127,50,0.03); }
.val-lb-rank {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .75rem; flex-shrink: 0;
  background: var(--bg-subtle); color: var(--text-muted);
}
.val-lb-gold .val-lb-rank { background: #fbbf24; color: #000; }
.val-lb-silver .val-lb-rank { background: #c0c0c0; color: #000; }
.val-lb-bronze .val-lb-rank { background: #cd7f32; color: #000; }
.val-lb-name { font-weight: 700; min-width: 80px; }
.val-lb-belt { font-size: 1rem; }
.val-lb-streak { font-size: .8rem; font-weight: 700; color: var(--warning); min-width: 36px; }
.val-lb-bar {
  flex: 1; height: 6px; background: var(--bg-subtle);
  border-radius: 3px; overflow: hidden;
}
.val-lb-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .5s ease;
}
.val-lb-pct { font-weight: 800; font-size: .8rem; min-width: 36px; text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   GAMIFICATION — SKILL TREE / PATH
   ═══════════════════════════════════════════════════════════════ */
.skill-path {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 20px; margin-bottom: 16px; border: 1px solid var(--border);
}
.skill-path-title { font-size: .9rem; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.skill-path-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px; padding: 12px 0;
}
.skill-node-connector { display: none; }
.skill-node {
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; transition: transform .2s;
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 8px; gap: 6px;
}
.skill-node:hover { transform: translateY(-3px); border-color: var(--primary); }
.skill-node-circle {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 900;
  border: 3px solid var(--border); background: var(--card);
  color: var(--text-muted); transition: all .3s; flex-shrink: 0;
}
.skill-node.validated {
  border-color: rgba(0,230,118,.35); background: rgba(0,230,118,.06);
}
.skill-node.validated .skill-node-circle {
  border-color: var(--success); background: var(--success-light);
  color: var(--success); box-shadow: 0 0 10px rgba(0,230,118,.25);
}
.skill-node.locked { opacity: 0.45; }
.skill-node.quiz-done {
  border-color: rgba(217,119,6,.35); background: rgba(217,119,6,.06);
}
.skill-node.quiz-done .skill-node-circle {
  border-color: var(--warning); background: rgba(217,119,6,.1);
  color: var(--warning);
}
.skill-node.quiz-done .skill-node-label { color: var(--warning); }
.skill-node-label {
  font-size: .65rem; color: var(--text-secondary); font-weight: 600;
  text-align: center; line-height: 1.3; word-break: break-word;
}
.skill-node.validated .skill-node-label { color: var(--success); }
.skill-path-progress { font-size: .75rem; color: var(--text-muted); font-weight: 600; margin-top: 4px; }

/* Admin inline actions on skill nodes */
.skill-node.admin-node { cursor: default; }
.skill-node.admin-node:hover { transform: none; border-color: var(--border); }
.skill-node-actions {
  display: flex; gap: 3px; margin-top: 4px;
}
.sna-btn {
  width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 7px;
  font-size: .7rem; font-weight: 800; cursor: pointer;
  background: var(--card); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.sna-btn:hover { transform: scale(1.18); }
.sna-ok { color: var(--success); }
.sna-ok:hover, .sna-ok.active {
  background: var(--success-light); color: var(--success);
  border-color: var(--success); box-shadow: 0 0 0 1px var(--success);
}
.sna-fail { color: #ef4444; }
.sna-fail:hover, .sna-fail.active {
  background: rgba(239,68,68,.12); color: #ef4444;
  border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444;
}
.sna-reset:hover { background: var(--border); color: var(--text); }
.sna-quiz-badge {
  font-size: .55rem; color: var(--text-muted); font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
  background: var(--bg-subtle); border: 1px solid var(--border);
}
.sna-quiz-badge.sna-qpassed {
  color: var(--success); border-color: var(--success); background: var(--success-light);
}
.sna-comment-text {
  font-size: .55rem; color: var(--text-muted); font-style: italic;
  text-align: center; line-height: 1.3; word-break: break-word;
  max-width: 100%; padding: 0 2px;
}

/* View toggle (list/tree) */
.val-view-toggle {
  display: flex; gap: 4px; margin-bottom: 16px;
}
.val-view-btn {
  padding: 6px 14px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-subtle); color: var(--text-muted); font-size: .75rem;
  font-weight: 700; cursor: pointer; transition: all .2s var(--ease); font-family: inherit;
}
.val-view-btn.active { background: var(--primary); color: #ffffff; border-color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   SYSTEM MESSAGES (Team feed)
   ═══════════════════════════════════════════════════════════════ */
.comm-msg.system-msg {
  background: linear-gradient(135deg, rgba(251,191,36,.06), rgba(249,115,22,.06));
  border: 1px solid rgba(251,191,36,.15); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 8px;
}
.comm-msg.system-msg .comm-msg-text {
  font-weight: 700; font-size: .85rem; color: var(--warning);
}

/* ═══════════════════════════════════════════════════════════════
   BADGE UNLOCK ANIMATION
   ═══════════════════════════════════════════════════════════════ */
.badge-unlock-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.3s ease;
}
.badge-unlock-overlay.hidden { display: none !important; }
.badge-unlock-card {
  text-align: center; padding: 40px;
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.badge-unlock-emoji { font-size: 5rem; animation: pulse 1s infinite; }
.badge-unlock-card h2 { font-size: 1.4rem; font-weight: 900; margin: 16px 0 8px; text-transform: uppercase; }
.badge-unlock-card p { color: var(--text-secondary); font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════
   RECAP PDF BUTTON FIX
   ═══════════════════════════════════════════════════════════════ */
.btn-recap-pdf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-subtle); color: var(--text-secondary); font-size: .8rem;
  font-weight: 700; cursor: pointer; transition: all .2s var(--ease);
  font-family: inherit; margin-left: auto;
}
.btn-recap-pdf:hover { border-color: var(--primary); color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   BODY CHECK
   ═══════════════════════════════════════════════════════════════ */
.tab-btn-bodycheck { border-color: #f59e0b !important; color: #f59e0b !important; }
.tab-btn-bodycheck.active { background: #f59e0b !important; color: #fff !important; }

.bc-container { max-width: 700px; margin: 0 auto; padding: 20px; }
.bc-header { text-align: center; margin-bottom: 24px; }
.bc-header h2 { font-size: 1.5rem; font-weight: 800; color: var(--text); }
.bc-subtitle { color: var(--text-secondary); font-size: .85rem; margin-top: 4px; }

/* Form */
.bc-form-section {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 12px;
}
.bc-form-section h3 { font-size: .9rem; font-weight: 700; color: #f59e0b; margin-bottom: 12px; }
.bc-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.bc-field label { display: block; font-size: .75rem; color: var(--text-secondary); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.bc-field input, .bc-field select {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 12px; color: var(--text); font-size: .9rem; font-family: inherit;
  transition: border-color .2s;
}
.bc-field input:focus, .bc-field select:focus { outline: none; border-color: #f59e0b; }
.bc-field select { cursor: pointer; }
.bc-form-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: center; }
.bc-analyze-btn { background: #f59e0b !important; font-weight: 700; }
.bc-analyze-btn:hover { background: #d97706 !important; }

/* Analysis grid */
.bc-grid-analysis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.bc-grid-item {
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; }
.bc-grid-icon { font-size: 1.2rem; margin-right: 6px; }
.bc-grid-item strong { color: var(--text); font-size: .85rem; }
.bc-grid-item p { color: var(--text-secondary); font-size: .82rem; margin-top: 6px; line-height: 1.5; }
@media (max-width: 600px) { .bc-grid-analysis { grid-template-columns: 1fr; } }

.bc-result { margin-top: 24px; }
.bc-report {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 28px; position: relative;
  box-shadow: var(--shadow);
}
.bc-report-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.bc-report-header h3 { font-size: 1.2rem; font-weight: 800; color: #f59e0b; }
.bc-report-date { color: var(--text-secondary); font-size: .8rem; }

.bc-table {
  width: 100%; border-collapse: collapse; margin-bottom: 16px;
}
.bc-table tr { border-bottom: 1px solid rgba(255,255,255,.06); }
.bc-table tr:last-child { border-bottom: none; }
.bc-table td { padding: 10px 12px; font-size: .9rem; }
.bc-table-label { color: var(--text-secondary); font-weight: 600; width: 55%; }
.bc-table-value { color: var(--text); font-weight: 800; text-align: right; font-size: 1rem; }

.bc-report-divider {
  height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 16px 0;
}

.bc-message { padding: 12px 0; }
.bc-message p {
  color: var(--text); font-size: .95rem; line-height: 1.6;
  margin: 8px 0; padding-left: 12px; border-left: 3px solid #f59e0b;
}

.bc-actions {
  display: flex; gap: 10px; margin-top: 20px; justify-content: center;
}
.bc-copy-btn { font-size: .85rem; }
.bc-mail-btn { font-size: .85rem; }

.bc-error {
  background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3);
  border-radius: var(--radius); padding: 16px; color: #f87171;
  text-align: center; font-size: .9rem;
}

/* ─── PERSO (admin only) ─────────────────────────────────── */
.perso-container { max-width: 900px; margin: 0 auto; padding: 20px 0; }
.perso-header { text-align: center; margin-bottom: 24px; }
.perso-header h2 { margin: 0; font-size: 1.6rem; }
.perso-subtitle { color: var(--text-muted); margin: 4px 0 0; font-size: .9rem; }

.perso-card {
  background: var(--card); border-radius: var(--radius); padding: 20px;
  margin-bottom: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.perso-card h3 { margin: 0 0 16px; font-size: 1rem; color: var(--text-primary); }

.perso-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.perso-row:last-child { margin-bottom: 0; }
.perso-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 120px; position: relative; }
.perso-field-auto { flex: 2; min-width: 200px; }
.perso-field label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; }
.perso-field input, .perso-field select {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; color: var(--text-primary); font-size: .95rem;
}
.perso-field input:focus { outline: none; border-color: var(--primary); }

.perso-energie-stars { display: flex; gap: 4px; }
.perso-energie-stars button {
  flex: 1; min-width: 36px; padding: 10px 0; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-secondary); border-radius: 8px;
  cursor: pointer; font-weight: 700; transition: all .15s;
}
.perso-energie-stars button:hover { border-color: var(--primary); }
.perso-energie-stars button.active { background: var(--primary); color: white; border-color: var(--primary); }

.perso-feeling { display: flex; gap: 6px; }
.perso-feeling button {
  flex: 1; padding: 10px 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-secondary); border-radius: 8px;
  cursor: pointer; font-size: .85rem; font-weight: 600; transition: all .15s;
}
.perso-feeling button:hover { border-color: var(--primary); }
.perso-feeling button.active { background: var(--primary); color: white; border-color: var(--primary); }

.perso-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  max-height: 220px; overflow-y: auto; box-shadow: var(--shadow); margin-top: 4px;
}
.perso-suggestions div {
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.perso-suggestions div:last-child { border-bottom: none; }
.perso-suggestions div:hover { background: var(--primary-light); }
.perso-suggestions .sug-muscle { color: var(--text-muted); font-size: .75rem; margin-left: 8px; }

.perso-perf {
  background: var(--primary-light); border-left: 3px solid var(--primary);
  padding: 10px 14px; margin: 12px 0; border-radius: 6px; font-size: .85rem;
  display: flex; gap: 20px; flex-wrap: wrap;
}
.perso-perf b { color: var(--primary); }

.perso-sets-today { display: flex; flex-direction: column; gap: 8px; }
.perso-set-item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: all .15s;
}
.perso-set-item:hover { border-color: var(--primary); background: var(--primary-light); }
.perso-set-name { font-weight: 700; flex: 1; }
.perso-set-muscle { color: var(--text-muted); font-size: .75rem; }
.perso-set-stats { color: var(--text-secondary); font-size: .85rem; }
.perso-set-feeling { font-size: 1.1rem; }
.perso-set-delete {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1.1rem; padding: 4px 8px;
}
.perso-set-delete:hover { color: #ef4444; }

.perso-progress-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 9500;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.perso-progress-overlay.hidden { display: none; }
.perso-progress-card {
  background: var(--card); border-radius: var(--radius); padding: 24px;
  max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.perso-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.perso-progress-header h3 { margin: 0; }
.perso-progress-chart-wrap { height: 260px; margin-bottom: 16px; }
.perso-progress-history { max-height: 260px; overflow-y: auto; }
.perso-hist-row {
  display: flex; justify-content: space-between; padding: 8px 12px;
  border-bottom: 1px solid var(--border); font-size: .85rem;
}
.perso-hist-row:last-child { border-bottom: none; }
.perso-hist-date { color: var(--text-muted); min-width: 90px; }

.perso-card h3 { display: flex; align-items: center; }
.perso-sessions-list { display: flex; flex-direction: column; gap: 8px; }
.perso-session-card {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}
.perso-session-info { display: flex; align-items: center; gap: 10px; flex: 1; }
.perso-session-name { font-weight: 700; }
.perso-session-count { color: var(--text-muted); font-size: .75rem; }
.perso-session-actions { display: flex; gap: 6px; }
.perso-session-actions button { font-size: .8rem; padding: 6px 12px; }
.perso-fav-btn {
  background: none; border: none; font-size: 1.3rem; cursor: pointer;
  color: var(--text-muted); padding: 0;
}
.perso-fav-btn.active { color: #fbbf24; }

.perso-session-ex-list { max-height: 280px; overflow-y: auto; margin-top: 8px; }
.perso-session-ex-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 6px; font-size: .9rem;
}
.perso-session-ex-num {
  background: var(--primary); color: white; border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
}
.perso-session-ex-name { flex: 1; font-weight: 600; }
.perso-session-ex-muscle { color: var(--text-muted); font-size: .75rem; }
.perso-session-ex-row button {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1.1rem; padding: 0 6px;
}

.perso-obj-ok { color: #22c55e; font-weight: 700; }

/* ─── Accompagnement ─────────────────────────────── */
.accomp-header {
  padding: 28px 24px 0;
  max-width: 1100px; margin: 0 auto;
}
.accomp-header h2 { font-size: 1.4rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.accomp-subtitle { color: var(--text-muted); font-size: .9rem; margin-bottom: 16px; }
.accomp-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.accomp-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: 24px;
  padding: 0 24px 40px;
  max-width: 1100px; margin: 0 auto;
}
/* ── manage panel ── */
.accomp-manage-panel {
  max-width: 1100px; margin: 0 auto 20px; padding: 0 24px;
}
.accomp-manage-toggle {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-muted); font-size: .85rem; font-weight: 600; cursor: pointer;
  padding: 8px 16px; transition: border-color .2s;
}
.accomp-manage-toggle:hover { border-color: var(--primary); color: var(--text); }
.accomp-manage-hint { font-size: .82rem; color: var(--text-muted); margin: 10px 0 8px; }
.accomp-manage-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px; padding: 4px 0 12px;
}
.accomp-manage-row {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 12px; transition: border-color .2s;
}
.accomp-manage-row:has(input:checked) { border-color: var(--primary); }
.accomp-manage-chk { accent-color: var(--primary); cursor: pointer; width: 15px; height: 15px; }
.accomp-manage-name { font-weight: 600; font-size: .88rem; flex: 1; }
.accomp-manage-studio { font-size: .75rem; color: var(--text-muted); }

.accomp-loading, .accomp-empty {
  grid-column: 1/-1; text-align: center;
  color: var(--text-muted); padding: 40px 0; font-size: .95rem;
}
.accomp-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 16px;
}
.accomp-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.accomp-coach-info { display: flex; flex-direction: column; gap: 4px; }
.accomp-coach-name { font-weight: 800; font-size: 1.05rem; color: var(--text); }
.accomp-coach-studio {
  font-size: .78rem; background: var(--primary-light, rgba(99,102,241,.12));
  color: var(--primary); padding: 2px 9px; border-radius: 99px; font-weight: 600;
  display: inline-block;
}
/* ── total badge ── */
.accomp-total-badge {
  text-align: center; min-width: 60px;
}
.accomp-total-pts { font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1; }
.accomp-total-max { font-size: .85rem; color: var(--text-muted); font-weight: 500; }
.accomp-total-bar {
  height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 4px;
  position: relative;
}
.accomp-total-bar::after {
  content: ''; position: absolute; left: 0; top: 0; height: 100%;
  width: var(--pct, 0%); background: var(--primary); border-radius: 2px; transition: width .4s;
}
/* ── criterion rows ── */
.accomp-criteria-list { display: flex; flex-direction: column; gap: 10px; }
.accomp-criterion { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.accomp-criterion-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.accomp-criterion-title { font-weight: 700; font-size: .9rem; flex: 1; }
.accomp-crit-pts { font-size: .82rem; font-weight: 700; }
/* super row */
.accomp-super-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25);
  border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.accomp-super-label { flex: 1; font-size: .82rem; font-weight: 600; }
.accomp-super-pts { font-size: .75rem; color: #f59e0b; font-weight: 700; white-space: nowrap; }
/* sub rows */
.accomp-sub-list { display: flex; flex-direction: column; gap: 4px; }
.accomp-sub-row {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  padding: 5px 6px; border-radius: 4px; transition: background .15s;
}
.accomp-sub-row:hover { background: var(--card); }
.accomp-sub-row span:last-child { font-size: .82rem; color: var(--text); line-height: 1.4; }
.accomp-textarea {
  width: 100%; min-height: 54px; resize: vertical; box-sizing: border-box;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); padding: 8px 10px; font-size: .85rem; font-family: inherit;
  transition: border-color .2s;
}
.accomp-textarea:focus { outline: none; border-color: var(--primary); }
.accomp-global-comment-block { display: flex; flex-direction: column; gap: 6px; }
.accomp-global-comment-block label {
  font-size: .78rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.accomp-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.accomp-saved-at { font-size: .75rem; color: var(--text-muted); }
.accomp-save-btn { min-width: 150px; }

/* ─── Évaluation leader dans Succès (read-only) ─── */
.eval-leader-section {}
.eval-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.eval-total-badge { text-align: center; }
.eval-total-badge { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.eval-total-badge span { font-size: .8rem; color: var(--text-muted); font-weight: 500; }
.eval-total-sub { font-size: .78rem; font-weight: 600; }
.eval-criteria-list { display: flex; flex-direction: column; gap: 8px; }
.eval-criterion-row {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px;
}
.eval-criterion-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.eval-criterion-title { font-weight: 700; font-size: .88rem; flex: 1; }
.eval-crit-pts { font-size: .8rem; font-weight: 700; }
/* super row read-only */
.eval-super-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius); margin-bottom: 6px;
  border: 1px solid transparent; font-size: .82rem;
}
.eval-super-row.done { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); }
.eval-super-row.todo { background: var(--bg); border-color: var(--border); opacity: .6; }
.eval-super-label { flex: 1; font-weight: 600; }
.eval-super-pts { font-size: .75rem; color: #f59e0b; font-weight: 700; }
/* sub items read-only */
.eval-sub-list { display: flex; flex-direction: column; gap: 3px; }
.eval-sub-item { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; padding: 3px 6px; border-radius: 4px; }
.eval-sub-item.done { color: var(--text); }
.eval-sub-item.todo { color: var(--text-muted); }
.eval-sub-icon { font-size: .85rem; flex-shrink: 0; margin-top: 1px; }
.eval-block { margin-bottom: 8px; }
.eval-block-title { font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.eval-block-content { font-size: .88rem; color: var(--text); line-height: 1.6; margin: 0; }
.eval-empty { color: var(--text-muted); font-size: .9rem; font-style: italic; }
.eval-updated-at { font-size: .72rem; color: var(--text-muted); margin-top: 10px; text-align: right; }

@media (max-width: 600px) {
  .accomp-cards-grid { grid-template-columns: 1fr; padding: 0 12px 32px; }
  .accomp-header { padding: 20px 12px 0; }
}

/* ─── PILOTAGE ───────────────────────────────────────────── */
.pilotage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.pilotage-month-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  font-weight: 600;
}
.pilotage-section {
  margin-bottom: 24px;
}
.pilotage-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text);
}
.pilotage-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .pilotage-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pilotage-cards-grid { grid-template-columns: 1fr; }
}
.pilotage-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
}
.pilotage-card.ok   { border-left: 4px solid #22c55e; }
.pilotage-card.warn { border-left: 4px solid #f59e0b; }
.pilotage-card.bad  { border-left: 4px solid #ef4444; }
.pilotage-card.great { border-left: 4px solid #3b82f6; }
.pilotage-card-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 4px 0;
}
.pilotage-card-label {
  font-size: .8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.pilotage-card-phrase {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}
.pilotage-card-meta {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.pilotage-alerts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pilotage-alert {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-subtle, var(--card));
}
.pilotage-alert.red    { border-left: 3px solid #ef4444; }
.pilotage-alert.orange { border-left: 3px solid #f59e0b; }
.pilotage-alert.green  { border-left: 3px solid #22c55e; }
.pilotage-alert-label {
  font-weight: 600;
  flex: 1;
}
.pilotage-alert-val {
  font-size: .85rem;
  color: var(--text-secondary);
}
.pilotage-contrib-table {
  width: 100%;
  border-collapse: collapse;
}
.pilotage-contrib-table th,
.pilotage-contrib-table td {
  padding: 8px 10px;
  text-align: left;
  font-size: .82rem;
}
.pilotage-contrib-table th {
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.pilotage-contrib-table .text-right { text-align: right; }
.pilotage-contrib-table tr:nth-child(even) { background: var(--bg-subtle, rgba(0,0,0,.03)); }
.pilotage-contrib-badge {
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 700;
}
.pilotage-contrib-badge.great { background: #dbeafe; color: #1d4ed8; }
.pilotage-contrib-badge.ok    { background: #dcfce7; color: #15803d; }
.pilotage-contrib-badge.bad   { background: #fee2e2; color: #b91c1c; }
.pilotage-fiab-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}
.pilotage-fiab-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  flex: 1;
  min-width: 140px;
}
.pilotage-fiab-item.ok    { border-left: 4px solid #22c55e; }
.pilotage-fiab-item.warn  { border-left: 4px solid #f59e0b; }
.pilotage-fiab-item.bad   { border-left: 4px solid #ef4444; }
.pilotage-fiab-item.great { border-left: 4px solid #3b82f6; }
.pilotage-priority-box {
  background: linear-gradient(135deg, var(--card) 0%, var(--bg-subtle, var(--card)) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}
.pilotage-priority-item {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: .9rem;
}
.pilotage-priority-item:last-child { border-bottom: none; }
.pilotage-trend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .pilotage-trend-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pilotage-trend-grid { grid-template-columns: 1fr; }
}
.pilotage-trend-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.pilotage-trend-card.ok    { border-left: 4px solid #22c55e; }
.pilotage-trend-card.warn  { border-left: 4px solid #f59e0b; }
.pilotage-trend-card.bad   { border-left: 4px solid #ef4444; }
.pilotage-trend-card.great { border-left: 4px solid #3b82f6; }
.pilotage-status-badge {
  display: inline-block;
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 700;
}
.pilotage-status-badge.ok    { background: #dcfce7; color: #15803d; }
.pilotage-status-badge.warn  { background: #fef9c3; color: #854d0e; }
.pilotage-status-badge.bad   { background: #fee2e2; color: #b91c1c; }
.pilotage-status-badge.great { background: #dbeafe; color: #1d4ed8; }

/* ─── COCKPIT RÉSEAU ───────────────────────────────────────── */
.cockpit-wrap { padding: 0 0 32px; }
.cockpit-title-bar {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px; padding: 20px 24px;
  background: linear-gradient(135deg, var(--card) 0%, rgba(59,130,246,.06) 100%);
  border-radius: var(--radius); border: 1px solid var(--border);
}
.cockpit-main-title { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.cockpit-subtitle { margin: 4px 0 0; font-size: .85rem; color: var(--text-muted); }
.cockpit-section { margin-bottom: 28px; }
.cockpit-section-title {
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 2px solid var(--border);
}
.cockpit-section-divider { height: 1px; background: var(--border); margin: 16px 0 32px; }

/* ── Super KPI Contribution ─────────────────────────────── */
.ckpi-grid { display: flex; flex-direction: column; gap: 10px; }
.ckpi-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ckpi-bubble {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 12px 10px;
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
}
.ckpi-bubble-name {
  font-size: .78rem; font-weight: 800; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
.ckpi-row { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.ckpi-lbl { font-size: .68rem; color: var(--text-muted); font-weight: 600; }
.ckpi-val { font-size: .78rem; font-weight: 700; color: var(--text); }
.ckpi-contrib {
  font-size: 1.6rem; font-weight: 900; line-height: 1;
  margin-top: 8px; letter-spacing: -.03em;
}
.ckpi-contrib-lbl { font-size: .62rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ckpi-avg-banner {
  border: 2px solid; border-radius: 16px;
  padding: 20px 24px; margin-bottom: 16px;
  transition: background .3s;
}
.ckpi-avg-inner {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.ckpi-avg-label { font-size: .82rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .07em; }
.ckpi-avg-value { font-size: 3rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; }

/* Synthèse réseau */
.cockpit-network-summary {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 14px 18px; background: var(--bg-subtle, var(--card));
  border-radius: var(--radius); border: 1px solid var(--border);
}
.cockpit-ns-item { text-align: center; min-width: 80px; }
.cockpit-ns-val { font-size: 1.25rem; font-weight: 800; }
.cockpit-ns-label { font-size: .7rem; color: var(--text-muted); margin-top: 2px; }
.cockpit-synth-phrase {
  font-size: .85rem; color: var(--text-secondary); margin: 0 0 14px;
  padding: 8px 12px; background: rgba(239,68,68,.06); border-radius: var(--radius-sm);
  border-left: 3px solid rgba(239,68,68,.4);
}

/* Studio cards contribution */
.cockpit-studios-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 900px) { .cockpit-studios-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cockpit-studios-grid { grid-template-columns: 1fr; } }
.cockpit-studio-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.cockpit-studio-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cockpit-studio-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cockpit-studio-name { font-weight: 700; font-size: .9rem; }
.cockpit-studio-val { font-size: 1.4rem; font-weight: 800; margin: 4px 0; }
.cockpit-studio-meta { font-size: .73rem; color: var(--text-muted); }
.cockpit-trend { font-size: .85rem; margin-left: 4px; }
.cockpit-trend.up { color: #22c55e; }
.cockpit-trend.down { color: #ef4444; }
.cockpit-trend.neutral { color: #94a3b8; }

/* Badge */
.cockpit-badge {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 9999px; font-size: .7rem; font-weight: 700; white-space: nowrap;
}

/* Diagnostic grid */
.cockpit-diag-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1100px) { .cockpit-diag-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .cockpit-diag-grid { grid-template-columns: 1fr 1fr; } }
.cockpit-diag-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px;
}
.cockpit-diag-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cockpit-diag-icon { font-size: 1.1rem; }
.cockpit-diag-label { font-weight: 700; font-size: .82rem; flex: 1; }
.cockpit-diag-counts { display: flex; gap: 10px; font-size: .8rem; font-weight: 700; margin-bottom: 8px; align-items: center; }
.cockpit-diag-studios { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.cockpit-diag-studio {
  font-size: .72rem; padding: 2px 6px; border-radius: var(--radius-sm); font-weight: 600;
}
.cockpit-diag-studio.red { background: rgba(239,68,68,.15); color: #ef4444; }
.cockpit-diag-studio.orange { background: rgba(245,158,11,.15); color: #f59e0b; }
.cockpit-diag-phrase { font-size: .75rem; color: var(--text-muted); font-style: italic; }

/* Priorités */
.cockpit-priorities-list { display: flex; flex-direction: column; gap: 8px; }
.cockpit-priority-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.cockpit-priority-item.red { border-left: 4px solid #ef4444; }
.cockpit-priority-item.orange { border-left: 4px solid #f59e0b; }
.cockpit-priority-rank { font-size: 1.2rem; flex-shrink: 0; }
.cockpit-priority-content { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cockpit-priority-studio { font-weight: 700; font-size: .9rem; }
.cockpit-priority-contrib { font-size: .8rem; color: var(--text-secondary); }
.cockpit-priority-causes { font-size: .78rem; color: var(--text-muted); font-style: italic; }
.cockpit-priority-badge { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 9999px; white-space: nowrap; flex-shrink: 0; }

/* Leaders */
.cockpit-leaders-list { display: flex; flex-direction: column; gap: 8px; }
.cockpit-leader-row {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.cockpit-leader-info { min-width: 110px; max-width: 130px; }
.cockpit-leader-name { display: block; font-weight: 700; font-size: .9rem; }
.cockpit-leader-studio { font-size: .75rem; color: var(--text-muted); }
.cockpit-leader-contrib { font-size: 1.1rem; font-weight: 800; min-width: 80px; text-align: right; }
.cockpit-leader-pillars { display: flex; gap: 6px; align-items: center; }
.cockpit-accomp-score { font-size: .85rem; font-weight: 800; min-width: 40px; text-align: center; }
.cockpit-leader-score-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 72px; }
.cockpit-accomp-score-big { font-size: 1.5rem; font-weight: 900; line-height: 1; }
.cockpit-pill {
  font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 9999px;
}
.cockpit-pill.red { background: rgba(239,68,68,.15); color: #ef4444; }
.cockpit-pill.orange { background: rgba(245,158,11,.15); color: #f59e0b; }
.cockpit-leader-phrase { font-size: .7rem; color: var(--text-muted); font-style: italic; text-align: right; white-space: nowrap; }

/* Axes prioritaires */
.cockpit-axes {
  flex: 1; padding: 6px 12px; border-left: 2px solid var(--border); min-width: 0;
}
.cockpit-axes-title {
  display: block; font-size: .65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted); margin-bottom: 4px;
}
.cockpit-axes-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
}
.cockpit-axes-list li {
  font-size: .76rem; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── Academy : Taux opérationnels ───────────────────────── */
.aca-op-wrap { padding-bottom: 24px; }

/* Super indicateur */
.aca-op-si {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  background: var(--card); border: 2px solid; border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 24px; flex-wrap: wrap;
}
.aca-op-si-left { flex: 1; min-width: 200px; }
.aca-op-si-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.aca-op-si-rate { font-size: 3rem; font-weight: 900; line-height: 1; margin-bottom: 6px; }
.aca-op-si-detail { font-size: .9rem; color: var(--text-secondary); margin-bottom: 6px; }
.aca-op-si-phrase { font-size: .82rem; color: var(--text-muted); font-style: italic; }
.aca-op-si-right { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* Gauge SVG */
.aca-op-gauge { width: 80px; height: 80px; }
.aca-op-gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aca-op-gauge-text {
  font-size: 8px; font-weight: 800; text-anchor: middle; dominant-baseline: central;
  transform: rotate(90deg); transform-origin: center;
}

/* Filtre studio */
.aca-op-filter-wrap { width: 100%; }
.aca-op-filter {
  width: 100%; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--text);
  font-size: .8rem; font-family: inherit; cursor: pointer;
}

/* Sections */
.aca-op-section { margin-bottom: 20px; }
.aca-op-section-title {
  font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 12px;
  padding-bottom: 6px; border-bottom: 2px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.aca-op-section-count {
  background: #ef4444; color: white; border-radius: 9999px;
  padding: 2px 7px; font-size: .7rem; font-weight: 800;
}
.aca-op-all-ok {
  color: #22c55e; font-weight: 600; padding: 12px;
  background: rgba(34,197,94,.08); border-radius: var(--radius-sm);
}

/* Cards coachs non opérationnels */
.aca-op-coaches-list { display: flex; flex-direction: column; gap: 10px; }
.aca-op-coach-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 16px; border-left: 3px solid #ef4444;
}
.aca-op-coach-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.aca-op-coach-name { font-weight: 700; font-size: .9rem; }
.aca-op-coach-studio { font-size: .78rem; color: var(--text-muted); background: var(--bg-subtle); padding: 2px 8px; border-radius: 9999px; }
.aca-op-coach-score { font-weight: 700; margin-left: auto; }
.aca-op-progress-bar { height: 5px; background: var(--border); border-radius: 9999px; overflow: hidden; margin-bottom: 10px; }
.aca-op-progress-fill { height: 100%; border-radius: 9999px; transition: width .4s; }
.aca-op-missing-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.aca-op-missing-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-radius: var(--radius-sm); font-size: .8rem; }
.aca-op-missing-item.none    { background: rgba(148,163,184,.1); }
.aca-op-missing-item.pending { background: rgba(245,158,11,.1); }
.aca-op-missing-item.progress { background: rgba(59,130,246,.1); }
.aca-op-missing-name { font-weight: 500; }
.aca-op-missing-status { color: var(--text-muted); font-size: .75rem; }

/* Studios */
.aca-op-studios-list { display: flex; flex-direction: column; gap: 8px; }
.aca-op-studio-row {
  display: grid; grid-template-columns: 140px 1fr 50px 60px 100px; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
@media (max-width: 700px) { .aca-op-studio-row { grid-template-columns: 1fr 1fr; } }
.aca-op-studio-name { font-weight: 600; font-size: .85rem; }
.aca-op-studio-bar-wrap { height: 6px; background: var(--border); border-radius: 9999px; overflow: hidden; }
.aca-op-studio-bar-fill { height: 100%; border-radius: 9999px; }
.aca-op-studio-rate { font-weight: 800; font-size: .9rem; text-align: right; }
.aca-op-studio-count { font-size: .8rem; color: var(--text-muted); }
.aca-op-studio-diff { font-size: .75rem; font-weight: 600; }

/* Modules bloquants */
.aca-op-blocks-list { display: flex; flex-direction: column; gap: 8px; }
.aca-op-block-row {
  padding: 10px 14px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.aca-op-block-name { font-weight: 600; font-size: .85rem; margin-bottom: 6px; }
.aca-op-block-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.aca-op-stat {
  font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 9999px;
}
.aca-op-stat.red  { background: rgba(239,68,68,.15); color: #ef4444; }
.aca-op-stat.orange { background: rgba(245,158,11,.15); color: #f59e0b; }
.aca-op-stat.blue { background: rgba(59,130,246,.15); color: #3b82f6; }
.aca-op-stat.gray { background: rgba(148,163,184,.15); color: #94a3b8; }
.aca-op-block-bar-wrap { height: 4px; background: var(--border); border-radius: 9999px; overflow: hidden; }
.aca-op-block-bar-fill { height: 100%; border-radius: 9999px; }

/* ─── Tri de tableau ───────────────────────────────────────────────────────── */
.sortable-table th[onclick] { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-table th[onclick]:hover { background: rgba(255,255,255,.07); }
.sortable-table th.th-sort-asc::after  { content: ' ↑'; opacity: .9; }
.sortable-table th.th-sort-desc::after { content: ' ↓'; opacity: .9; }

/* ═══════════════════════════════════════════════════════════════
   REVUE MENSUELLE DU STUDIO
   ═══════════════════════════════════════════════════════════════ */

.revue-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 20px 20px 0;
}
.revue-title { font-size: 1.25rem; font-weight: 800; margin: 0; }
.revue-subtitle { font-size: .82rem; color: var(--text-muted); margin: 4px 0 0; }

.revue-form { padding: 16px; max-width: 760px; margin: 0 auto; }
.revue-locked { opacity: .92; }
.revue-locked input, .revue-locked textarea, .revue-locked select { pointer-events: none; opacity: .7; }

/* Status bar */
.revue-status-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 16px;
}
.revue-status-badge {
  font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 9999px;
}
.revue-status-draft     { background: rgba(148,163,184,.2); color: #94a3b8; }
.revue-status-submitted { background: rgba(245,158,11,.15); color: #f59e0b; }
.revue-status-validated { background: rgba(34,197,94,.15);  color: #22c55e; }
.revue-date-info  { font-size: .75rem; color: var(--text-muted); }
.revue-locked-msg { font-size: .75rem; color: #f59e0b; }

/* Sections */
.revue-section {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; margin-bottom: 12px;
}
.revue-section-title {
  font-size: .95rem; font-weight: 700; margin: 0 0 12px;
  text-transform: uppercase; letter-spacing: .04em;
}
.revue-pillar-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.revue-pillar-icon { font-size: 1.1rem; }
.revue-pillar-header .revue-section-title { margin: 0; }
.revue-pillar-si {
  font-size: .72rem; color: var(--text-muted); font-style: italic;
  margin-left: auto;
}

/* Synthèse */
.revue-synthese-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
}
.revue-synth-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; text-align: center; position: relative;
}
.revue-synth-label { display: block; font-size: .68rem; color: var(--text-muted); margin-bottom: 4px; }
.revue-synth-card strong { font-size: 1.1rem; }
.revue-auto-tag {
  position: absolute; top: 4px; right: 6px;
  font-size: .58rem; background: rgba(59,130,246,.15); color: #3b82f6;
  padding: 1px 5px; border-radius: 9999px; font-weight: 700;
}
.revue-empty { color: var(--text-muted); font-style: italic; }

/* Champs */
.revue-fields-row {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px;
}
.revue-field-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px; }
.revue-field-label { font-size: .75rem; font-weight: 600; color: var(--text-muted); }
.revue-input-wrap  { display: flex; align-items: center; gap: 4px; }
.revue-num-input {
  width: 90px; background: var(--input-bg,var(--bg)); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; color: var(--text); font-size: .9rem;
  -moz-appearance: textfield;
}
.revue-num-input::-webkit-outer-spin-button,
.revue-num-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.revue-num-suffix { font-size: .8rem; color: var(--text-muted); }
.revue-readonly-val {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; background: var(--bg); border: 1px dashed var(--border);
  border-radius: 8px; font-size: .9rem; color: var(--text);
}
.revue-text-input {
  width: 100%; background: var(--input-bg,var(--bg)); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; color: var(--text); font-size: .88rem;
}

/* Checklist */
.revue-checklist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.revue-check-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 8px 10px; background: var(--bg); border-radius: 8px;
}
.revue-check-label { font-size: .82rem; font-weight: 600; min-width: 200px; flex: 1; }

/* Radio */
.revue-radio-group { display: flex; flex-wrap: wrap; gap: 6px; }
.revue-radio-label {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: .78rem; padding: 4px 10px; border-radius: 9999px;
  border: 1px solid var(--border); background: var(--card-bg);
  transition: all .15s;
}
.revue-radio-label input[type=radio] { display: none; }
.revue-radio-checked {
  background: rgba(59,130,246,.15); border-color: #3b82f6; color: #3b82f6; font-weight: 700;
}

/* Commentaires */
.revue-comment-wrap { margin-top: 8px; }
.revue-comment-required .revue-comment-label::after { content: ' '; }
.revue-comment-label { font-size: .75rem; color: var(--text-muted); display: block; margin-bottom: 4px; }
.revue-req { color: #ef4444; font-weight: 700; }
.revue-textarea {
  width: 100%; background: var(--input-bg,var(--bg)); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; color: var(--text); font-size: .85rem;
  resize: vertical; min-height: 60px; font-family: inherit;
}
.revue-textarea:focus, .revue-text-input:focus, .revue-num-input:focus {
  outline: none; border-color: #3b82f6;
}

/* Alertes */
.revue-alerts-section { border-left: 3px solid #f59e0b; }
.revue-alerts-list { display: flex; flex-direction: column; gap: 6px; }
.revue-alert-item {
  background: rgba(245,158,11,.1); color: #f59e0b; border-radius: 8px;
  padding: 7px 12px; font-size: .82rem; font-weight: 600;
}
.revue-no-alert { font-size: .85rem; color: #22c55e; margin: 0; }
.revue-alert-inline {
  font-size: .78rem; color: #f59e0b; background: rgba(245,158,11,.1);
  border-radius: 6px; padding: 4px 10px; margin-bottom: 6px;
}

/* Plan d'action */
.revue-plan-hint { font-size: .78rem; color: var(--text-muted); margin: -6px 0 12px; }
.revue-plan-grid { display: flex; flex-direction: column; gap: 10px; }
.revue-plan-field { display: flex; flex-direction: column; gap: 4px; }

/* DR */
.revue-dr-comment { border-left: 3px solid #3b82f6; }
.revue-dr-text { font-size: .88rem; color: var(--text); margin: 0; white-space: pre-wrap; }

/* Boutons */
.revue-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 16px 0; justify-content: flex-end;
}
.btn-revue-draft, .btn-revue-submit {
  padding: 10px 22px; border-radius: 10px; font-weight: 700;
  font-size: .88rem; border: none; cursor: pointer; transition: opacity .15s;
}
.btn-revue-draft   { background: var(--border); color: var(--text); }
.btn-revue-submit  { background: #3b82f6; color: #fff; }
.btn-revue-draft:hover, .btn-revue-submit:hover { opacity: .85; }
.btn-revue-draft:disabled, .btn-revue-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Toast */
.revue-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1e293b; color: #fff; padding: 10px 22px; border-radius: 10px;
  font-size: .88rem; font-weight: 600; z-index: 9999;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
}
.revue-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   REVUES DR — Directeur de réseau
   ═══════════════════════════════════════════════════════════════ */

.drr-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; padding: 20px 20px 0;
}
.drr-title    { font-size: 1.25rem; font-weight: 800; margin: 0; }
.drr-subtitle { font-size: .82rem; color: var(--text-muted); margin: 4px 0 0; }

/* Stats */
.drr-stats {
  display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 16px 0;
}
.drr-stat-card {
  flex: 1; min-width: 90px; padding: 12px; border-radius: 10px;
  text-align: center; border: 1px solid var(--border);
}
.drr-stat-submitted { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); }
.drr-stat-validated { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.3); }
.drr-stat-draft     { background: rgba(148,163,184,.1); border-color: var(--border); }
.drr-stat-val   { display: block; font-size: 1.6rem; font-weight: 800; }
.drr-stat-label { display: block; font-size: .72rem; color: var(--text-muted); margin-top: 2px; }

/* Liste */
.drr-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.drr-empty {
  padding: 48px 20px; text-align: center;
  color: var(--text-muted); font-size: .9rem; display: flex;
  flex-direction: column; align-items: center; gap: 8px;
}

/* Carte */
.drr-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.drr-card-highlight { border-color: #f59e0b; }
.drr-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; padding: 14px 16px; cursor: pointer;
  user-select: none;
}
.drr-card-header:hover { background: rgba(255,255,255,.03); }
.drr-card-left  { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.drr-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.drr-studio-name { font-size: .95rem; font-weight: 700; }
.drr-date { font-size: .72rem; color: var(--text-muted); }
.drr-toggle-icon { font-size: .8rem; color: var(--text-muted); margin-left: 8px; }

/* KPIs inline */
.drr-kpis       { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.drr-kpi        { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 9999px; }
.drr-kpi-green  { background: rgba(34,197,94,.15);   color: #22c55e; }
.drr-kpi-orange { background: rgba(245,158,11,.15);  color: #f59e0b; }
.drr-kpi-red    { background: rgba(239,68,68,.15);   color: #ef4444; }
.drr-kpi-grey   { background: rgba(148,163,184,.12); color: #94a3b8; }
.drr-alerts-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.drr-alert-badge {
  font-size: .68rem; padding: 2px 7px; border-radius: 9999px;
  background: rgba(245,158,11,.15); color: #f59e0b; font-weight: 600;
}

/* Détail */
.drr-card-body { padding: 0 16px 16px; border-top: 1px solid var(--border); }
.drr-detail { margin-top: 12px; }
.drr-detail-section { margin-bottom: 16px; }
.drr-detail-title {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin: 0 0 10px;
}

/* Grille KPI synthèse */
.drr-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: 8px;
}
.drr-kpi-item {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; text-align: center;
}
.drr-kpi-label { display: block; font-size: .65rem; color: var(--text-muted); margin-bottom: 3px; }
.drr-kpi-item strong { font-size: .95rem; }

/* Piliers */
.drr-pillars-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 10px;
}
.drr-pillar {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
}
.drr-pillar h5 { font-size: .78rem; font-weight: 700; margin: 0 0 6px; }
.drr-pillar p  { font-size: .78rem; margin: 0 0 4px; color: var(--text); }
.drr-petit-plus { font-style: italic; color: var(--text-muted) !important; }
.drr-comment { margin-top: 6px; }
.drr-comment-label { font-size: .68rem; color: var(--text-muted); font-weight: 600; display: block; margin-bottom: 2px; }
.drr-comment-text  { font-size: .78rem; white-space: pre-wrap; margin: 0; }

/* Plan d'action */
.drr-plan-row { display: flex; flex-direction: column; gap: 6px; }
.drr-plan-row > div { font-size: .82rem; }
.drr-plan-lbl { font-weight: 700; color: var(--text-muted); margin-right: 6px; }

/* Validation */
.drr-action-section { background: var(--bg); border-radius: 8px; padding: 12px; }
.drr-validated-msg { color: #22c55e; font-weight: 700; font-size: .85rem; margin: 0 0 6px; }
.drr-validate-btns { display: flex; gap: 8px; margin-top: 10px; }
.btn-drr-validate {
  padding: 8px 20px; background: #22c55e; color: #fff;
  border: none; border-radius: 8px; font-weight: 700; font-size: .85rem;
  cursor: pointer;
}
.btn-drr-validate:hover    { opacity: .85; }
.btn-drr-validate:disabled { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════
   SUIVI DR — Reporting hebdomadaire Directeur de Réseau
   ═══════════════════════════════════════════════════════════ */

#tab-suivi-dr { padding: 0; }

.dr-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 0 40px;
}

/* ── Top bar ── */
.dr-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.dr-topbar-read {
  justify-content: space-between;
}

.dr-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dr-topbar-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  white-space: nowrap;
}

.dr-week-sel {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.dr-week-sel:focus { outline: none; border-color: var(--primary); }
.dr-week-sel-read { flex: 0 1 auto; max-width: 220px; }

.dr-updated {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.dr-save-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.dr-save-btn:hover { background: var(--primary-hover); }
.dr-save-btn:disabled { opacity: .6; cursor: not-allowed; }

.dr-feedback {
  text-align: center;
  padding: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--success);
  background: var(--success-light);
  margin: 8px 16px;
  border-radius: 8px;
}

/* ── Cards (edit mode) ── */
.dr-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dr-card {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.dr-card-green  { border-left: 3px solid var(--success); }
.dr-card-red    { border-left: 3px solid var(--danger); }
.dr-card-blue   { border-left: 3px solid var(--primary); }
.dr-card-gold   { border-left: 3px solid #f59e0b; }
.dr-card-orange { border-left: 3px solid #f97316; }

.dr-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 8px;
}

.dr-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  flex: 1;
}

.dr-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dr-dot-green  { background: var(--success); }
.dr-dot-red    { background: var(--danger); }
.dr-dot-blue   { background: var(--primary); }
.dr-dot-gold   { background: #f59e0b; }
.dr-dot-orange { background: #f97316; }

.dr-pill {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}
.dr-pill-top  { background: var(--success-light); color: var(--success); }
.dr-pill-flop { background: var(--danger-light); color: var(--danger); }

.dr-card-body {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dr-sublabel {
  display: flex;
  align-items: center;
  padding-top: 4px;
}
.dr-sublabel-top  { padding-top: 0; }
.dr-sublabel-flop { padding-top: 8px; border-top: 1px solid var(--border-light); margin-top: 4px; }

.dr-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dr-select {
  flex: 0 0 130px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.dr-select:focus { outline: none; border-color: var(--primary); }

.dr-input {
  flex: 1;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.82rem;
  color: var(--text);
}
.dr-input:focus { outline: none; border-color: var(--primary); background: var(--card); }
.dr-input::placeholder { color: var(--text-muted); }

/* priority rows */
.dr-prio-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dr-prio-num {
  width: 22px; height: 22px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Empty state ── */
.dr-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.dr-empty {
  padding: 60px 20px;
  text-align: center;
}
.dr-empty-icon  { font-size: 2.5rem; margin-bottom: 12px; }
.dr-empty-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.dr-empty-sub   { font-size: 0.82rem; color: var(--text-muted); }

/* ── Read view (Admin) ── */
.dr-read-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dr-read-card {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.dr-read-card-arb { border-left: 3px solid #f97316; }

.dr-read-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 8px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dr-head-green { color: var(--success); background: var(--success-light); }
.dr-head-red   { color: var(--danger);  background: var(--danger-light); }
.dr-head-blue  { color: var(--primary); background: var(--primary-light); }
.dr-head-gold  { color: #92400e; background: #fef3c7; }
.dr-head-orange{ color: #9a3412; background: #ffedd5; }

.dr-read-body {
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dr-read-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dr-read-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  min-width: 80px;
}

.dr-read-comment {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
}

.dr-read-sublabel {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 0 2px;
}
.dr-read-sl-top  { color: var(--success); }
.dr-read-sl-flop { color: var(--danger); padding-top: 10px; border-top: 1px solid var(--border-light); margin-top: 4px; }

.dr-read-prio {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}

.dr-read-arb {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
  padding: 2px 0;
}

.dr-read-none {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ── Tab button style ── */
.tab-btn-suivi-dr.active {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
}
.tab-btn-suivi-dr:hover:not(.active) {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
}

.dr-save-btn-ok {
  background: var(--success) !important;
  transform: scale(1.04);
  transition: background .15s, transform .15s;
}