/* ============================================================
   exercises.css — Styles spécifiques aux pages exercices
   Dépend de assets/style.css (variables, reset, base)
   ============================================================ */

/* ── Label de section (version exercices) ── */
.section-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 5px;
}

/* ── Cards ── */
.card {
  background: var(--bg-card);
  border: 0.5px solid var(--border-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  border-bottom: 0.5px solid transparent;
  transition: background 0.15s;
}
.card-header:hover { background: var(--bg-page); }
.card-header.open  { border-bottom-color: var(--border-mid); }
.card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}
.card-sub {
  font-size: 12px;
  color: var(--text-secondary);
}
.card-body {
  padding: 18px;
  display: none;
  flex-direction: column;
  gap: 14px;
}
.card-body.open { display: flex; }

/* ── Badges exercices ── */
.b1 { background: #E1F5EE; color: #0F6E56; }
.b2 { background: #E6F1FB; color: #185FA5; }
.b3 { background: #FAEEDA; color: #854F0B; }
.b4 { background: #FCEBEB; color: #A32D2D; }
.b5 { background: #EEEDFE; color: #3C3489; }

.bonus {
  background: #EEEDFE;
  color: #3C3489;
  border-left: 2px solid #3c348994;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 8px 12px;
}

@media (prefers-color-scheme: dark) {
  .b1    { background: #085041; color: #9FE1CB; }
  .b2    { background: #0C447C; color: #B5D4F4; }
  .b3    { background: #633806; color: #FAC775; }
  .b4    { background: #791F1F; color: #F7C1C1; }
  .b5    { background: #26215C; color: #CECBF6; }
  .bonus { background: #26215C; color: #CECBF6; }
}

/* ── Chevron ── */
.chevron {
  font-size: 11px;
  color: var(--text-tertiary);
  transition: transform 0.2s;
}
.chevron.open { transform: rotate(90deg); }

/* ── Séparateur ── */
.sep {
  border: none;
  border-top: 0.5px solid var(--border-lo);
  margin: 2px 0;
}

/* ── Blocs variantes (step) ── */
.step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-inner);
  border: 0.5px solid var(--border-lo);
  border-radius: var(--radius-md);
}
.step-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Bloc défi supplémentaire ── */
.bonus-block {
  background: var(--accent-bg);
  border: 0.5px solid var(--border-lo);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.bonus-block-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.bonus-header { border-left: 3px solid #7F77DD; }
@media (prefers-color-scheme: dark) {
  .bonus-header { border-left-color: #AFA9EC; }
}

/* ── Indice ── */
.hint {
  background: var(--bg-page);
  border-left: 2px solid var(--border-mid);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
.hint:hover { border-left-color: var(--border-hi); }
.hint-text {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.65;
}
.hint-text.open { display: block; }

.hint-text img {
  width: 100%;
}

/* ── Lien retour sommaire ── */
.back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color 0.15s;
}
.back-link:hover { color: var(--text-secondary); }

/* ── Liste des topics (index exercices) ── */

.link-icon {
  font-size: 18px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Statuts exercices ── */
.status {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-done     { background: #E1F5EE; color: #0F6E56; }
.status-wip      { background: #FAEEDA; color: #854F0B; }
.status-upcoming { background: var(--bg-page); color: var(--text-tertiary); }
@media (prefers-color-scheme: dark) {
  .status-done     { background: #085041; color: #9FE1CB; }
  .status-wip      { background: #633806; color: #FAC775; }
  .status-upcoming { background: var(--bg-page); color: var(--text-tertiary); }
}

.arrow {
  font-size: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* ── Fiches associées à un topic (page thème) ── */
.topic-lessons {
  background: var(--bg-card);
  border: 0.5px solid var(--border-lo);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

/* ── Fiches associées ── */
.lessons-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.lessons-list li a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.lessons-list li a:hover .lesson-label { text-decoration: underline; }
.lessons-list li .lesson-arrow { flex-shrink: 0; }

/* ── Sections de fiche ── */
.fiche-section {
  background: var(--bg-card);
  border: 0.5px solid var(--border-lo);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

/* ── Groupes de l'index exercices (rendu dynamique) ── */
.ex-group { display: flex; flex-direction: column; gap: 0.4rem; }
.ex-group + .ex-group { margin-top: 1.25rem; }
.ex-group-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  padding-bottom: 0.1rem;
}
.ex-item-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 0.5px solid var(--border-lo);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.ex-item-link:hover {
  background: var(--bg-inner);
  border-color: var(--border-mid);
}
.ex-item-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.ex-item-arrow {
  font-size: 18px;
  color: var(--text-tertiary);
}

/* ── Bloc SQL à copier ── */
.sql-block {
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 0.6rem;
    font-size: 0.82rem;
  }
 
  .sql-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    font-size: 0.75rem;
    color: var(--text-tertiary, #888);
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.03em;
  }
 
  .sql-block-header .sql-filename {
    color: var(--text-secondary, #aaa);
    font-weight: 500;
  }
 
  .sql-copy-btn {
    background: none;
    border: 1px solid var(--border-mid);
    border-radius: 4px;
    color: var(--text-tertiary, #888);
    padding: 2px 8px;
    font-size: 0.72rem;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
  }
 
  .sql-copy-btn:hover {
    color: var(--text-secondary, #bbb);
    border-color: var(--border-hi);
  }
 
  .sql-copy-btn.copied {
    color: var(--tip-border);
    border-color: var(--tip-border);
  }

  /* ── MLD textuel ── */
  .mld {
    color: var(--text-primary);
  }

  .mld .cmt {
    font-size: 9px;
    font-weight: bold;
  }

  .mld strong, 
  .mld-pk {
    font-weight: bold;
  }

  .mld-pk {
    text-decoration: underline;
  }

  .mld-fk {
    color: var(--accent);
  }