/* ============================
   VARIABLES GLOBALES
============================ */
:root {
    --topbar-bg: #1f2937;
    --topbar-fg: #ffffff;

    --main-bg: rgba(255, 255, 255, 0.96);
    --card-bg: #ffffff;

    --accent: #2563eb;
    --accent-hover: #1d4ed8;

    --success: #15803d;
    --success-bg: #dcfce7;
    --error: #b91c1c;
    --error-bg: #fee2e2;

    --border-soft: #dbe3ee;
    --border-strong: #94a3b8;

    --text-main: #1f2937;
    --text-muted: #6b7280;

    --surface-1: #ffffff;
    --surface-2: #f8fbff;
    --surface-3: #f3f6fb;
    --surface-4: #f3f4f6;
    --table-row-alt: #fafafa;

    --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
    --shadow-card: 0 6px 18px rgba(15, 23, 42, 0.05);
}

/* ============================
   FONTS
============================ */
@font-face {
    font-family: 'Indie_Flower';
    src: url("/static/polices/Indie_Flower/Indie_Flower.0841af952c80.ttf") format('truetype');
}

@font-face {
    font-family: 'Lobster';
    src: url("/static/polices/Lobster/Lobster.9406d0ab606c.ttf");
}

@font-face {
    font-family: 'KiloGram';
    src: url("/static/polices/KiloGram.934c1fcc5ac2.otf");
}

@font-face {
    font-family: 'AlexBrush';
    src: url("/static/polices/AlexBrush.c8b7ff20d0c0.ttf");
}

/* ============================
   RESET / GLOBAL
============================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    overflow-y: scroll;
}

html,
body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
    color: var(--text-main);
    background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 40%, #f4f6f8 100%);
}

body {
    line-height: 1.45;
}

a {
    color: inherit;
}

ul {
    padding-left: 0;
}
/* ============================
   BADGES + DARK MODE TOGGLE
============================ */
#top-left-badges,
.badges-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

#top-left-badges text {
    fill: #fff;
}

.badge {
    width: 60px;
    text-align: center;
    font-family: sans-serif;
}

.badge-icon {
    font-size: 0.7em;
    margin-top: 2px;
}

.badge-name {
    font-size: 0.6em;
    color: #ddd;
}

.badge svg {
    width: 60px;
    height: 60px;
}

#dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 28px;
    line-height: 1;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    flex: 0 0 42px;
}

#dark-mode-toggle:hover {
    background-color: #444;
}

/* ============================
   HEADER / TOPBAR
   volontairement remis proche de l'ancien
============================ */
.topbar {
    position: sticky;
    top: 0;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1rem;
    background: linear-gradient(90deg, #1f2937, #334155);
    color: var(--topbar-fg);
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
    z-index: 9999;
}

.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    padding: 0 1rem;
    gap: 1rem;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 220px;
}

.header-left {
    visibility: hidden;
}

.header-center {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    text-align: center;
}

.greeting-text {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 0 0.2rem 0;
    font-family: 'Indie_Flower', cursive;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
}

.logout-form {
    display: inline-flex;
    margin: 0;
}

.logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.logout-btn img {
    display: block;
    width: 43px;
    height: auto;
}

/* ============================
   USER GREETING
============================ */
.user-greeting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: 'Indie_Flower', cursive;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
}

/* ============================
   NAVIGATION / BUTTONS
============================ */

/* Calculatrice */
.calculator-card {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 12px;
  max-width: 390px;
  background: #f8f8f8;
}

.calc-display {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 18px;
  text-align: left;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.calc-grid button {
  min-width: 0;
  padding: 10px 0;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
}

.calc-equal {
  font-weight: bold;
}

.calc-scientific {
  background: #eef2ff !important;
  font-weight: 600;
}

.calc-spacer {
  min-width: 0;
}


.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.nav > a,
.nav > form {
    display: inline-flex;
    align-items: center;
}

.logout-icon {
    width: 40px;
    height: 40px;
}

.nav-item,
.nav-item-bis,
.btn,
.action-btn {
    border-radius: 10px;
    transition: 0.18s ease;
    appearance: none;
    -webkit-appearance: none;
    text-decoration: none;
    cursor: pointer;
}

.nav-item,
.nav-item-bis,
.btn {
    padding: 9px 15px;
    font-size: 1rem;
    line-height: 1.2;
    color: #1f2937;
    background-color: #fff;
    border: 1px solid #cfd8e3;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.nav-item:hover,
.nav-item-bis:hover,
.btn:hover {
    background-color: #f3f6fb;
    transform: translateY(-1px);
}

.tab-container,
.list-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0 auto 20px auto;
}

.list-tabs button {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid #cfd8e3;
    background-color: #fff;
    color: #111827;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.list-tabs button:hover {
    background-color: #f3f6fb;
}

.tab-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    max-width: 220px;
    min-height: 62px;
    padding: 10px 18px;
    font-size: 0.95rem;
    border: 1px solid #cfd8e3;
    border-radius: 18px;
    text-decoration: none;
    text-align: center;
    background-color: #fff;
    color: #111827;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, transform 0.18s ease;
}

.tab-link.active {
    background-color: #2563eb;
    color: #fff;
    font-weight: 700;
    border-color: #2563eb;
}

.tab-link:hover {
    background-color: #f3f6fb;
    transform: translateY(-1px);
}

/* ============================
   MAIN CONTENT
============================ */
.main-content {
    display: flex;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

.main-container {
    width: 100%;
    min-width: 300px;
    max-width: 1300px;
    margin: 18px auto 28px auto;
    padding: 1.5rem;
    background-color: var(--main-bg);
    border: 1px solid rgba(219, 227, 238, 0.9);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    color: var(--text-main);
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
}

.main-container h1 {
    margin-top: 0;
    margin-bottom: 1.2rem;
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--text-main);
}

.main-container p {
    max-width: none;
}

/* ============================
   INTRO / TITRES
============================ */
.introduction {
    display: block;
    font-family: "Lobster", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
    color: #1f2937;
}

/* ============================
   MENU EXERCICES / TUILES
============================ */
.navigation-autres,
.exercises-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 2rem 0;
    padding: 0 10px;
}

/* IMPORTANT :
   les templates themes_list / chapitres_list / exercises_list
   utilisent .tile-container > .menu-tile en enfants directs */
.tile-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    justify-content: center; /* centre le bloc complet */
    gap: 20px;
}

.tile-container > .menu-tile,
.tile-container > .exercise-tile {
    width: 100%;
    min-width: 0;
}

.exercise-tile {
    width: 100%;
}

.menu-tile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 74px;
    padding: 1rem 0.8rem;
    text-align: center;
    text-decoration: none;
    color: #111827;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
    background: #fff;
    border: 1px solid #d7e1ec;
    border-radius: 18px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.menu-tile:hover {
    background: #f8fbff;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
    border-color: var(--border-strong);
}

.menu-tile:active {
    transform: translateY(0);
}

/* ============================
   TABLEAUX / STATS / HISTORIQUE
============================ */
table {
    border-collapse: separate;
    border-spacing: 0;
}

.stats-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#historyTable,
.stats-table,
.stats-table-centered {
    width: 100%;
    background: #fff;
    border: 2px solid var(--border-soft);
    border-radius: 18px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.stats-table-centered {
    max-width: 500px;
    margin: 20px 0;
    text-align: center;
}

#historyTable th,
#historyTable td,
.stats-table th,
.stats-table td,
.stats-table-centered th,
.stats-table-centered td {
    padding: 10px 12px;
    vertical-align: top;
    border-right: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
}

#historyTable > thead > tr > th:last-child,
#historyTable > tbody > tr > td:last-child,
.stats-table th:last-child,
.stats-table td:last-child,
.stats-table-centered th:last-child,
.stats-table-centered td:last-child {
    border-right: none;
}

#historyTable > tbody > tr:last-child > td,
.stats-table tbody tr:last-child td,
.stats-table-centered tbody tr:last-child td {
    border-bottom: none;
}

#historyTable thead th,
.stats-table th,
.stats-table-centered th {
    background: #f3f4f6;
    color: #374151;
    font-weight: 700;
    text-align: center;
}

#historyTable tbody tr:nth-child(even),
.stats-table tbody tr:nth-child(even),
.stats-table-centered tbody tr:nth-child(even) {
    background: #fafafa;
}

.stats-table td.latex,
#historyTable td.latex {
    font-size: 0.8em;
    word-wrap: break-word;
    white-space: normal;
    max-width: 400px;
}

td.math,
#historyTable td.math {
    max-width: 400px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

#historyTable td.latex,
#historyTable td.math {
    max-width: 320px;
}

#historyTable td:nth-child(2),
#historyTable td:nth-child(4) {
    min-width: 220px;
}

#historyTable mjx-container {
    max-width: 100%;
}

/* ============================
   MATHJAX GLOBAL
============================ */
mjx-container[jax="CHTML"][display="true"] {
    text-align: center !important;
    margin: 0.3rem 0 !important;
}

.MathJax {
    text-align: center !important;
}

/* ============================
   EXERCISES
============================ */
.exercise-page,
.exercise-card {
    max-width: 820px;
    margin: 0 auto;
}

.exercise-card {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.move-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 100%;
}

.move-form .toolbar-select {
    max-width: 160px;
    min-width: 0;
}

.move-form .btn {
    flex: 0 0 auto;
}

.exercise-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding: 14px 16px;
    background: #f8fbff;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}

.toolbar-select {
    height: 42px;
    min-width: 150px;
    padding: 0 0.8rem;
    border: 1px solid #cfd8e3;
    border-radius: 10px;
    background: #fff;
    font-size: 0.98rem;
    color: var(--text-main);
}

.action-btn {
    min-height: 42px;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    font-size: 0.98rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.primary-btn {
    background: var(--accent);
    color: #fff;
}

.primary-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.secondary-btn {
    background: #fff;
    color: var(--text-main);
    border-color: #cfd8e3;
}

.secondary-btn:hover {
    background: #f3f6fb;
    transform: translateY(-1px);
}

.icon-btn {
    min-width: 42px;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

.statement-card,
.exercise-form-card,
.exercise-correction-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--shadow-card);
    margin-bottom: 18px;
}

.card-label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.exercise-statement {
    width: 100%;
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.7;
    text-align: center;
    max-width: 100%;
}

.calculation-program-steps {
    display: inline-grid;
    gap: 6px;
    margin: 8px auto 14px;
    padding-left: 1.5rem;
    text-align: left;
}

.calculation-program-stages {
    width: min(100%, 620px);
    margin: 8px auto 14px;
    text-align: left;
}

.calculation-program-stages > p,
.calculation-program-correction > p {
    margin: 10px 0 6px;
}

.calculation-program-stage {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}

.calculation-program-stage .calculation-program-steps {
    display: grid;
    margin: 6px 0 0;
}

.exercise-form-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.answer-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}

.exercise-answer-input {
    width: 100%;
    max-width: 340px;
    padding: 14px 16px;
    font-size: 1.1rem;
    border: 1px solid #cfd5e1;
    border-radius: 12px;
    background: #fff;
    text-align: center;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.exercise-answer-input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.25);
}

.exercise-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 0;
}

.keyboard-wrapper {
    width: 100%;
    max-width: 520px;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}

/* Dimensions tactiles du clavier MathLive et zone de sécurité mobile. */
body {
    --keycap-height: 54px;
    --keycap-width: 54px;
    --keycap-max-width: 54px;
    --keycap-font-size: 22px;
    --keycap-small-font-size: 17px;
    --keycap-extra-small-font-size: 15px;
    --keycap-gap: 5px;
    --keyboard-padding-top: 8px;
    --keyboard-padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.feedback-box {
    margin: 0 0 18px 0;
    padding: 14px 16px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    border: 1px solid transparent;
}

.feedback-success {
    background: var(--success-bg);
    color: var(--success);
    border-color: #86efac;
}

.feedback-error {
    background: var(--error-bg);
    color: var(--error);
    border-color: #fca5a5;
}

.classic-error-feedback {
    font-weight: 600;
    text-align: left;
}

.classic-error-feedback summary {
    cursor: pointer;
    font-weight: 700;
}

.classic-error-feedback summary:hover,
.classic-error-feedback summary:focus-visible {
    text-decoration: underline;
}

.classic-error-feedback p {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid currentColor;
    line-height: 1.5;
}

.inline-action {
    text-align: center;
    margin-bottom: 18px;
}

.exercise-correction-card {
    text-align: left;
}

.exercise-correction-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.25rem;
    color: var(--text-main);
}

.exercise-correction-steps {
    margin: 0 0 0px 0px;
    align-items: center;
    padding: 0;
}

.exercise-correction-steps li {
    margin-bottom: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.position-correction-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.position-correction-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
}

.position-correction-table th,
.position-correction-table td {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-soft);
    text-align: center;
}

.position-correction-table th {
    background: var(--surface-3);
}

.exercise-correction-steps mjx-container[display="true"] {
    text-align: center !important;
}

.arithmetic-common-factor {
    color: #dc2626;
}

body.dark .arithmetic-common-factor {
    color: #f87171;
}

.final-result {
    margin-bottom: 18px;
    padding: 4px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 1.4rem;
}

.statement-card,
.exercise-correction-card,
.exercise-correction-steps li,
.final-result {
    overflow-x: auto;
    overflow-y: hidden;
}

.exercise-statement mjx-container[display="true"],
.exercise-correction-card mjx-container[display="true"],
.exercise-correction-steps li mjx-container[display="true"],
.final-result mjx-container[display="true"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: block !important;
    -webkit-overflow-scrolling: touch;
}

.exercise-statement mjx-container:not([display="true"]),
.exercise-correction-card mjx-container:not([display="true"]),
.exercise-correction-steps li mjx-container:not([display="true"]) {
    display: inline !important;
    overflow: visible !important;
}

.exercise-correction-card mjx-container[jax="CHTML"][display="true"],
.exercise-correction-steps li mjx-container[jax="CHTML"][display="true"] {
    text-align: center !important;
    white-space: nowrap !important;
}

.final-result mjx-container[jax="CHTML"][display="true"] {
    text-align: center !important;
    white-space: nowrap !important;
}

/* ============================
   FILTERS FORM
============================ */
.filters-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    width: 100%;
}

/* ============================
   FORMULAIRES GÉNÉRAUX
============================ */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
    background: #fff;
    color: var(--text-main);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 10px 12px;
}

/* ============================
   MESSAGES DJANGO
============================ */
.main-container > div[style*="margin-bottom:20px"] > div[style*="padding:12px 16px"] {
    border: 1px solid var(--border-soft) !important;
    background: var(--surface-2) !important;
    color: var(--text-main) !important;
}

/* ============================
   DARK MODE
============================ */
body.dark {
    color: #e5e7eb;
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
    --main-bg: rgba(17, 24, 39, 0.96);
    --card-bg: #1f2937;
    --text-main: #e5e7eb;
    --text-muted: #94a3b8;
    --border-soft: #334155;
    --border-strong: #475569;
    --surface-1: #1f2937;
    --surface-2: #1f2937;
    --surface-3: #111827;
    --surface-4: #111827;
    --table-row-alt: #182230;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
}

body.dark .topbar {
    color: #e5e7eb;
}

body.dark .main-container {
    background-color: rgba(17, 24, 39, 0.96);
    color: #e5e7eb;
    border-color: #334155;
}

body.dark .nav-item,
body.dark .nav-item-bis,
body.dark .btn,
body.dark .tab-link,
body.dark .list-tabs button,
body.dark .toolbar-select,
body.dark .exercise-answer-input,
body.dark .secondary-btn,
body.dark input[type="text"],
body.dark input[type="number"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark select,
body.dark textarea {
    background: #111827;
    color: #e5e7eb;
    border-color: #475569;
}

body.dark .nav-item:hover,
body.dark .nav-item-bis:hover,
body.dark .btn:hover,
body.dark .tab-link:hover,
body.dark .list-tabs button:hover,
body.dark .secondary-btn:hover {
    background: #1e293b;
}

body.dark .tab-link.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

body.dark .statement-card,
body.dark .exercise-form-card,
body.dark .exercise-correction-card,
body.dark .stats-table,
body.dark .stats-table-centered,
body.dark #historyTable,
body.dark .menu-tile,
body.dark .exercise-toolbar {
    background: #1f2937;
    color: #e5e7eb;
    border-color: #334155;
}

body.dark .exercise-correction-steps li,
body.dark .keyboard-wrapper,
body.dark .stats-table th,
body.dark .stats-table-centered th,
body.dark #historyTable th {
    background: #111827;
    color: #e5e7eb;
    border-color: #334155;
}

body.dark .stats-table td,
body.dark .stats-table-centered td,
body.dark #historyTable td {
    border-color: #475569;
}

body.dark #historyTable tbody tr:nth-child(even),
body.dark .stats-table tbody tr:nth-child(even),
body.dark .stats-table-centered tbody tr:nth-child(even) {
    background: #182230;
}

body.dark .final-result {
    background: #172554;
    border-color: #1d4ed8;
    color: #e5e7eb;
}

body.dark .card-label {
    background: #1e3a8a;
    color: #dbeafe;
}

body.dark .menu-tile {
    color: #e5e7eb;
}

body.dark .menu-tile:hover {
    background: #243244;
}

body.dark .badge-name {
    color: #eee;
}

body.dark .badge-pct {
    fill: #fff;
}

body.dark .introduction,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
    color: #e5e7eb;
}

/* ============================
   RESPONSIVE
============================ */
@media (max-width: 980px) {
    .tile-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .main-content:has(.exercise-page) {
        padding-right: 6px;
        padding-left: 6px;
    }

    .main-container:has(> .exercise-page) {
        padding-right: 8px;
        padding-left: 8px;
    }

    .exercise-correction-card {
        padding-right: 5px;
        padding-left: 5px;
    }

    .exercise-correction-steps li {
        padding-right: 3px;
        padding-left: 3px;
    }

    .topbar .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.6rem;
        padding: 0;
    }

    .header-left {
        display: none;
    }

    .header-right {
        min-width: 0;
        justify-content: center;
        flex-wrap: wrap;
    }

    .header-center {
        justify-content: center;
    }

    .header-right svg {
        transform: scale(0.8);
        transform-origin: center;
    }
}

.geometry-correction {
    width: 100%;
    max-width: 100%;
    text-align: left;
}

.geometry-correction p {
    margin: 0.45rem 0;
    overflow-wrap: anywhere;
}

.exercise-correction-card .geometry-correction mjx-container[jax="CHTML"][display="true"],
.exercise-correction-steps li .geometry-correction mjx-container[jax="CHTML"][display="true"] {
    text-align: center !important;
    font-size: 1.3em !important;
}

.geometry-pythagore-math {
    display: grid;
    width: 100%;
    place-items: center;
}

.exercise-correction-card .geometry-correction-pythagore .geometry-pythagore-math mjx-container[jax="CHTML"][display="true"],
.exercise-correction-steps li .geometry-correction-pythagore .geometry-pythagore-math mjx-container[jax="CHTML"][display="true"] {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .tile-container {
        grid-template-columns: 1fr;
    }

    .nav,
    .tab-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }

    .nav > a,
    .nav > form {
        width: 100%;
        margin: 0;
    }

    .nav-item,
    .nav-item-bis,
    .tab-link,
    .btn {
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .tab-container {
        max-width: 420px;
    }

    .tab-link {
        max-width: none;
    }
}

@media (max-width: 700px) {
    .main-container {
        padding: 1rem;
        border-radius: 14px;
    }

    .main-container h1 {
        font-size: 1.5rem;
    }

    .exercise-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .toolbar-group {
        width: 100%;
        justify-content: center;
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-select,
    .action-btn {
        width: 100%;
        max-width: 280px;
    }

    .exercise-statement {
        font-size: 1.1rem;
        line-height: 1.5;
    }

    .exercise-answer-input {
        max-width: 100%;
    }

    .exercise-actions {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .statement-card,
    .exercise-form-card,
    .exercise-correction-card {
        padding: 16px 12px;
    }

    .exercise-page,
    .exercise-card {
        max-width: 100%;
    }

    .exercise-statement mjx-container,
    .exercise-correction-card mjx-container,
    .exercise-correction-steps li,
    .final-result {
        font-size: 1.05rem;
        line-height: 1.5;
    }

    .exercise-statement mjx-container[jax="CHTML"][display="true"],
    .exercise-correction-steps li mjx-container[jax="CHTML"][display="true"],
    .final-result mjx-container[jax="CHTML"][display="true"] {
        font-size: 1em !important;
    }

    .introduction {
        font-size: 1.6rem;
    }

    .menu-tile {
        font-size: 1.05rem;
        min-height: 68px;
    }

    .filters-form {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }

    .filters-form label,
    .filters-form select {
        width: 90%;
        max-width: 300px;
        text-align: center;
    }

    .stats-table-centered {
        width: 95%;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    body {
        background-attachment: scroll;
        /* Quatre rangées seulement : les touches peuvent rester grandes sans
           passer sous les barres de navigation des petits écrans. */
        --keycap-height: clamp(46px, 10svh, 58px);
        --keycap-width: clamp(46px, 10svh, 58px);
        --keycap-max-width: 58px;
        --keycap-font-size: clamp(19px, 5vw, 23px);
        --keycap-small-font-size: 16px;
        --keycap-extra-small-font-size: 14px;
        --keycap-gap: 4px;
        --keyboard-padding-top: 6px;
        --keyboard-padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    .header-center {
        gap: 0.45rem;
    }

    .greeting-text {
        font-size: 1.3rem;
    }

    .logout-btn img {
        width: 42px;
    }

    #dark-mode-toggle {
        width: 38px;
        height: 38px;
        font-size: 24px;
        flex-basis: 38px;
    }
}

@media (max-width: 480px) {
    .nav,
    .tab-container {
        grid-template-columns: 1fr;
    }
}


/* ============================
   Marketing profs particuliers
============================ */
.mf-landing,
.mf-landing * {
    color: inherit;
}

.mf-landing {
    color: #111827 !important;
    background: #ffffff;
}

.mf-landing h1,
.mf-landing h2,
.mf-landing h3 {
    color: #0f172a !important;
}

.mf-landing p,
.mf-landing li,
.mf-landing span {
    color: #374151 !important;
}

.mf-container {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

.mf-hero {
  padding: 92px 0;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 34%),
    linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
}

.mf-hero-grid {
  display: grid;
  grid-template-columns: 1.35fr .75fr;
  gap: 56px;
  align-items: center;
}

.mf-badge {
  display: inline-flex;
  margin: 0 0 18px;
  color: #1d4ed8;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.mf-hero h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.35rem, 5vw, 4.15rem);
  line-height: 1.04;
  letter-spacing: -.045em;
  color: #0f172a;
}

.mf-hero-text {
  max-width: 720px;
  margin: 24px 0 0;
  color: #374151;
  font-size: 1.18rem;
  line-height: 1.7;
}

.mf-proof {
  max-width: 560px;
  margin: 28px 0 0;
  padding: 15px 18px;
  background: #ffffff;
  border-left: 5px solid #2563eb;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
  color: #1f2937;
}

.mf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.mf-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.mf-btn:hover {
  transform: translateY(-1px);
}

.mf-btn-primary {
  color: #ffffff;
  background: #2563eb;
  box-shadow: 0 14px 28px rgba(37, 99, 235, .22);
}

.mf-btn-secondary {
  color: #1d4ed8;
  background: #ffffff;
  border-color: #bfdbfe;
}

.mf-hero-card {
  padding: 30px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #e5e7eb;
  box-shadow: 0 24px 55px rgba(15, 23, 42, .10);
}

.mf-hero-card h2 {
  margin: 0 0 18px;
  font-size: 1.35rem;
  color: #0f172a;
}

.mf-hero-card ul,
.mf-list-box ul {
  margin: 0;
  padding-left: 20px;
  color: #374151;
  line-height: 1.9;
}

.mf-section {
  padding: 74px 0;
}

.mf-light {
  background: #f8fafc;
}

.mf-section h2 {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  color: #0f172a;
}

.mf-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.mf-card {
  padding: 30px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 35px rgba(15, 23, 42, .045);
}

.mf-card span {
  display: inline-flex;
  margin-bottom: 18px;
  color: #2563eb;
  font-weight: 900;
  font-size: .82rem;
  letter-spacing: .08em;
}

.mf-card h3 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 1.25rem;
}

.mf-card p,
.mf-two-cols p,
.mf-offer p {
  margin: 0;
  color: #4b5563;
  font-size: 1.05rem;
  line-height: 1.75;
}

.mf-two-cols {
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: 54px;
  align-items: start;
}

.mf-two-cols h2 {
  margin-left: 0;
  text-align: left;
}

.mf-two-cols p + p {
  margin-top: 18px;
}

.mf-list-box {
  padding: 30px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 35px rgba(15, 23, 42, .045);
}

.mf-list-box h3 {
  margin: 0 0 18px;
  color: #0f172a;
}

.mf-offer {
  max-width: 780px;
  text-align: center;
}

.mf-price-box {
  max-width: 480px;
  margin: 34px auto 28px;
  padding: 32px;
  display: grid;
  gap: 12px;
  border-radius: 26px;
  background: #eff6ff;
  border: 2px solid #2563eb;
}

.mf-price-box strong {
  color: #1d4ed8;
  font-size: 1.5rem;
}

.mf-price-box span {
  color: #1f2937;
}

.mf-main-cta {
  margin-top: 4px;
}

.mf-center {
  max-width: 720px;
  margin: -18px auto 0;
  text-align: center;
  color: #4b5563;
  line-height: 1.7;
}

.mf-center-actions {
  justify-content: center;
}

.mf-pdf {
  margin-top: 34px;
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 24px 55px rgba(15, 23, 42, .10);
}

.mf-pdf iframe {
  width: 100%;
  height: 720px;
  display: block;
  border: 0;
}

@media (max-width: 900px) {
  .mf-container {
    width: min(100% - 32px, 1120px);
  }

  .mf-hero {
    padding: 62px 0;
  }

  .mf-hero-grid,
  .mf-two-cols,
  .mf-cards {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .mf-section {
    padding: 56px 0;
  }

  .mf-actions {
    flex-direction: column;
  }

  .mf-btn {
    width: 100%;
  }

  .mf-hero-card,
  .mf-card,
  .mf-list-box,
  .mf-price-box {
    padding: 24px;
  }

  .mf-pdf iframe {
    height: 520px;
  }
}

/* ============================
   BADGES (light + dark)
============================ */
.badge-level {
    font-family: 'Indie_Flower';
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 4px;
    color: #111827; /* noir en mode normal */
}

.badge-icon {
    font-size: 20px;
    color: #111827;
}

/* DARK MODE */
body.dark .badge-level,
body.dark .badge-icon {
    color: #ffffff;
}


/* ============================
   TAILLE MATHJAX
============================ */
/* FORCER la taille MathJax */
.exercise-statement mjx-container[jax="CHTML"],
.exercise-correction-card mjx-container[jax="CHTML"],
.exercise-correction-steps li mjx-container[jax="CHTML"],
.final-result mjx-container[jax="CHTML"] {
    font-size: 1.3em !important;
}


/* ============================
   QCM
============================ */
.qcm-title-row {
    margin-bottom: 4px;
}

.qcm-title {
    font-size: 3.2rem;
    line-height: 1;
}

.qcm-stats,
.qcm-results {
    display: grid;
    gap: 12px;
    width: 100%;
    margin: 0 auto 22px;
}

.qcm-shell {
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--shadow-card);
}

.qcm-stats {
    grid-template-columns: repeat(4, minmax(130px, 160px));
    justify-content: center;
    max-width: 700px;
}

.qcm-results {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    max-width: 760px;
}

.qcm-stat,
.qcm-result {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-2);
    text-align: center;
}

.qcm-stat-label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.qcm-stat-value {
    display: block;
    color: var(--text-main);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.qcm-stat-timer,
.qcm-result-score {
    background: #eef4ff;
    border-color: #bfdbfe;
}

.qcm-stat-timer {
    grid-column: 2 / span 2;
}

.qcm-result-score {
    grid-column: 1 / -1;
}

.qcm-result-main {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 160px));
    justify-content: center;
    gap: 12px;
}

.qcm-result-score .qcm-stat-value {
    font-size: 2rem;
}

body.dark .qcm-stat,
body.dark .qcm-result {
    background: #1f2937;
    border-color: #334155;
}

body.dark .qcm-stat-timer,
body.dark .qcm-result-score {
    background: #172554;
    border-color: #2563eb;
}

body.dark .qcm-stat-label {
    color: #bfdbfe;
}

body.dark .qcm-stat-value {
    color: #f8fafc;
}

body.dark .qcm-shell {
    background: #111827;
    border-color: #334155;
}

.qcm-image {
    display: block;
    max-width: 100%;
    max-height: 350px;
    height: auto;
    margin: 0 auto;
}

.qcm-question-block {
    scroll-margin-top: 20vh;
}

.qcm-question {
    font-size: 1.25rem;
    line-height: 1.55;
}

.qcm-reponses {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 20px;
    max-width: 760px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}

.qcm-btn {
    width: 100%;
    min-width: 0;
    padding: 18px;
    font-size: 1.2em;
    border-radius: 12px;
    border: 2px solid #444;
    background: white;

    color: #1f2937;
    -webkit-text-fill-color: #1f2937;

    -webkit-appearance: none;
    appearance: none;

    cursor: pointer;
    overflow-wrap: anywhere;
    white-space: normal;
}

.qcm-btn:hover {
    background: #eef4ff;
}

body.dark .qcm-btn {
    background: #1f2937;
    color: #f8fafc;
    -webkit-text-fill-color: #f8fafc;
    border-color: #475569;
}

body.dark .qcm-btn:hover {
    background: #172554;
}

.qcm-correct {
    background: #c8f7c5;
    border-color: #1f9d3a;
    color: #14532d;
    -webkit-text-fill-color: #14532d;
}

.qcm-wrong {
    background: #f7c5c5;
    border-color: #c0392b;
    color: #7f1d1d;
    -webkit-text-fill-color: #7f1d1d;
}

body.dark .qcm-correct {
    background: #14532d;
    border-color: #22c55e;
    color: #f0fdf4;
    -webkit-text-fill-color: #f0fdf4;
}

body.dark .qcm-wrong {
    background: #7f1d1d;
    border-color: #ef4444;
    color: #fef2f2;
    -webkit-text-fill-color: #fef2f2;
}

.qcm-next-btn,
.qcm-end-btn {
    display: inline-block;
    width: auto;
    min-width: 180px;
    padding: 13px 24px;
    border-radius: 12px;
    border: 2px solid #93c5fd;

    background: #eef4ff;
    color: var(--text-main);

    cursor: pointer;
    font-size: 1.05rem;

    text-decoration: none;
    text-align: center;
}

.qcm-next-btn:hover,
.qcm-end-btn:hover {
    background: #dbeafe;
}

body.dark .qcm-next-btn,
body.dark .qcm-end-btn {
    background: #1f2937;
    color: #f8fafc;
    border-color: #475569;
}

body.dark .qcm-next-btn:hover,
body.dark .qcm-end-btn:hover {
    background: #172554;
}
.qcm-start-btn {
    display: inline-block;
    width: auto;
    min-width: 180px;
    padding: 13px 24px;
    border-radius: 12px;
    border: 2px solid #93c5fd;
    background: #eef4ff;
    color: var(--text-main);
    cursor: pointer;
    font-size: 1.05rem;
}

.qcm-start-btn:hover {
    background: #dbeafe;
}

body.dark .qcm-start-btn {
    background: #1f2937;
    color: #f8fafc;
    border-color: #475569;
}

body.dark .qcm-start-btn:hover {
    background: #172554;
}


#qcm-zone {
    scroll-margin-top: 20px;
}

@media (max-width: 640px) {
    .qcm-title-row {
        margin-bottom: 0;
    }

    .qcm-title {
        font-size: 2.5rem;
    }

    .qcm-stats,
    .qcm-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 16px;
    }

    .qcm-stat,
    .qcm-result {
        padding: 9px 8px;
    }

    .qcm-stat-label {
        font-size: 0.68rem;
        margin-bottom: 3px;
    }

    .qcm-stat-value {
        font-size: 0.98rem;
    }

    .qcm-stat-timer,
    .qcm-result-score {
        grid-column: 1 / -1;
    }

    .qcm-result-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .qcm-result-score .qcm-stat-value {
        font-size: 1.55rem;
    }

    .qcm-reponses {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: none;
        margin-top: 20px;
        width: 100%;
    }

    .qcm-question {
        font-size: 1.1rem;
        line-height: 1.45;
    }

    .qcm-btn {
        padding: 14px 12px;
        font-size: 1rem;
        line-height: 1.25;
    }

    .qcm-next-btn,
    .qcm-end-btn {
        width: 100%;
        padding: 13px 16px;
        font-size: 1rem;
        text-align: center;
    }

    .qcm-start-btn {
        width: auto;
        min-width: 160px;
        padding: 12px 20px;
    }
}

@media (max-width: 380px) {
    .qcm-stats,
    .qcm-results {
        grid-template-columns: 1fr;
    }

    .qcm-result-main {
        grid-template-columns: 1fr;
    }

    .qcm-btn {
        font-size: 0.95rem;
    }
}

#question {
    display: block;
    scroll-margin-top: 20px;
}

.qcm-teacher-stats {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 30px;
}

.qcm-student-card {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.qcm-student-card h2 {
    margin-bottom: 15px;
}

.qcm-username {
    font-size: 0.9em;
    opacity: 0.7;
}

.qcm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.qcm-stats-grid div {
    padding: 12px;
    border-radius: 12px;
    background: rgba(0,0,0,0.04);
    text-align: center;
}

.qcm-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.qcm-table th,
.qcm-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

@media screen and (max-width: 700px) {
    .qcm-table {
        font-size: 0.85em;
    }

    .qcm-table th,
    .qcm-table td {
        padding: 6px;
    }
}

.problem-figure {
    display: block;
    margin: 20px auto;
    max-width: 500px;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.problem-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.problem-text {
    flex: 1;
}

@media (max-width: 900px) {
    .problem-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }

    .problem-layout > .problem-figure {
        order: 1;
        width: min(100%, 380px);
        margin: 12px auto 4px;
    }

    .problem-layout > .problem-text {
        order: 2;
        width: 100%;
    }
}

.problem-text p:first-child {
    margin-top: 0;
}

@media (max-width: 900px) {
    .exercise-correction-card,
    .exercise-correction-steps,
    .exercise-correction-steps li {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .exercise-correction-steps {
        display: block;
        align-items: stretch;
    }

    .exercise-correction-steps li {
        align-self: stretch;
    }

    .exercise-correction-card mjx-container[jax="CHTML"][display="true"],
    .exercise-correction-steps li mjx-container[jax="CHTML"][display="true"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        font-size: clamp(0.8rem, 2.8vw, 1.05rem) !important;
        white-space: normal !important;
    }

    .exercise-correction-card mjx-math,
    .exercise-correction-steps li mjx-math {
        max-width: 100%;
    }

    .geometry-correction-transition {
        max-width: 100%;
        margin: 0.8rem 0 !important;
        overflow-wrap: anywhere;
        white-space: normal;
    }
}

.qcm-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
    flex-wrap: wrap;
}

/* ==========================================================
   TEACHER DASHBOARD — REFONTE V1
   ========================================================== */


.teacher-sidebar,
.teacher-main-panel,
.teacher-card,
.teacher-table-card,
.teacher-list-card,
.teacher-empty-state-v2 {
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
}

.teacher-sidebar {
    position: sticky;
    top: 86px;
    align-self: start;
    border-radius: 22px;
    padding: 18px;
}

.teacher-sidebar-header {
    padding: 4px 4px 18px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 16px;
}

.teacher-sidebar-kicker,
.teacher-eyebrow,
.teacher-muted-label,
.teacher-sidebar-section-title {
    display: inline-flex;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.teacher-sidebar-header h1 {
    margin: 8px 0 8px;
    color: var(--text-main);
    font-size: 1.45rem;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.teacher-sidebar-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.teacher-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.teacher-sidebar-link {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: var(--text-main);
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.teacher-sidebar-link:hover {
    background: var(--surface-2);
    border-color: var(--border-soft);
    transform: translateY(-1px);
}

.teacher-sidebar-link.active {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.teacher-sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: var(--surface-2);
    font-size: 1.15rem;
}

.teacher-sidebar-link.active .teacher-sidebar-icon {
    background: #dbeafe;
}

.teacher-sidebar-link strong {
    display: block;
    font-size: 0.96rem;
    line-height: 1.2;
}

.teacher-sidebar-link small {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.25;
}

.teacher-sidebar-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.teacher-sidebar-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
}

.teacher-sidebar-action:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.teacher-main-panel {
    min-width: 0;
    border-radius: 24px;
    padding: 24px;
}

.teacher-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.teacher-page-heading h2 {
    margin: 6px 0 8px;
    color: var(--text-main);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.teacher-page-heading p {
    max-width: 760px;
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.55;
}

.teacher-card,
.teacher-table-card,
.teacher-list-card,
.teacher-empty-state-v2 {
    border-radius: 20px;
}

.teacher-card {
    padding: 20px;
    margin-bottom: 20px;
}

.teacher-group-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.teacher-toolbar-form,
.teacher-create-list-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.teacher-toolbar-form label,
.teacher-create-list-form label {
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 800;
}

.teacher-toolbar-form select,
.teacher-toolbar-form input,
.teacher-create-list-form input,
.teacher-create-list-form select {
    min-height: 42px;
    min-width: 210px;
}

.teacher-current-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: var(--surface-2);
}

.teacher-current-group h3 {
    margin: 4px 0 0;
    color: var(--text-main);
    font-size: 1.45rem;
    line-height: 1.12;
}

.teacher-inline-actions,
.teacher-card-actions,
.teacher-list-card-footer,
.teacher-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.teacher-inline-actions-right {
    justify-content: flex-end;
}

.teacher-inline-actions form {
    display: inline-flex;
    margin: 0;
}

.teacher-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--surface-1);
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.15;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.teacher-action-btn:hover {
    background: var(--surface-2);
    transform: translateY(-1px);
}

.teacher-action-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.teacher-action-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

.teacher-action-danger {
    color: #b91c1c;
}

.teacher-action-danger:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

.teacher-subcard {
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: var(--surface-1);
}

.teacher-subcard-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--text-main);
    font-size: 1rem;
}

.teacher-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.teacher-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
}

.teacher-section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.teacher-section-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface-1);
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 800;
}

.teacher-section-tab:hover {
    background: var(--surface-2);
}

.teacher-section-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.teacher-results-block {
    margin-top: 20px;
}

.teacher-table-card {
    overflow: hidden;
}

.teacher-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.teacher-data-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface-1);
}

.teacher-data-table th,
.teacher-data-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
    vertical-align: middle;
    text-align: center;
}

.teacher-data-table th:last-child,
.teacher-data-table td:last-child {
    border-right: 0;
}

.teacher-data-table tbody tr:last-child td {
    border-bottom: 0;
}

.teacher-data-table thead th {
    background: var(--surface-3);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.teacher-data-table tbody tr:hover {
    background: var(--surface-2);
}

.teacher-student-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.teacher-student-link {
    color: var(--text-main);
    font-weight: 850;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.teacher-student-actions,
.teacher-row-actions {
    justify-content: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.teacher-student-actions a,
.teacher-row-actions a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 800;
}

.teacher-student-actions a:hover,
.teacher-row-actions a:hover {
    color: var(--accent);
}

.teacher-metric-list,
.teacher-completed-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    line-height: 1.35;
}

.teacher-metric-list strong,
.teacher-score {
    color: var(--accent);
    font-weight: 850;
}

.teacher-completed-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.teacher-empty-cell {
    padding: 24px !important;
    color: var(--text-muted);
}

.teacher-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.teacher-list-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
}

.teacher-list-card-muted {
    opacity: 0.86;
}

.teacher-list-card-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.teacher-list-card-header h3 {
    margin: 4px 0 0;
    color: var(--text-main);
    font-size: 1.18rem;
    line-height: 1.2;
}

.teacher-list-card-header a {
    color: inherit;
    text-underline-offset: 3px;
}

.teacher-share-form-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.teacher-form-title {
    margin: 0;
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 850;
}

.teacher-checkbox-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.teacher-checkbox-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-main);
    font-size: 0.88rem;
    font-weight: 700;
}

.teacher-checkbox-pill input {
    margin: 0;
}

.teacher-list-card-footer {
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.teacher-filter-card,
.teacher-create-list-card {
    margin-bottom: 18px;
}

.teacher-all-students-table {
    min-width: 920px;
}

.teacher-empty-state-v2 {
    padding: 26px;
    text-align: center;
}

.teacher-empty-state-v2 strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text-main);
    font-size: 1.05rem;
}

.teacher-empty-state-v2 p,
.teacher-muted {
    margin: 0;
    color: var(--text-muted);
}

/* Dark mode */

body.dark .teacher-sidebar,
body.dark .teacher-main-panel,
body.dark .teacher-card,
body.dark .teacher-table-card,
body.dark .teacher-list-card,
body.dark .teacher-empty-state-v2,
body.dark .teacher-subcard {
    background: #111827;
    border-color: #334155;
}

body.dark .teacher-current-group,
body.dark .teacher-sidebar-icon,
body.dark .teacher-sidebar-action,
body.dark .teacher-section-tab,
body.dark .teacher-checkbox-pill,
body.dark .teacher-data-table,
body.dark .teacher-data-table tbody tr:hover {
    background: #1f2937;
}

body.dark .teacher-data-table thead th {
    background: #0f172a;
}

body.dark .teacher-sidebar-link:hover,
body.dark .teacher-section-tab:hover {
    background: #1f2937;
}

body.dark .teacher-sidebar-link.active,
body.dark .teacher-chip {
    background: #172554;
    border-color: #2563eb;
    color: #dbeafe;
}

body.dark .teacher-sidebar-link.active .teacher-sidebar-icon {
    background: #1e3a8a;
}

body.dark .teacher-action-danger:hover {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fee2e2;
}

/* Responsive */
@media (max-width: 1100px) {

    .teacher-sidebar-link {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .teacher-sidebar-icon {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 900px) {


    .teacher-sidebar {
        position: static;
        border-radius: 20px;
    }

    .teacher-sidebar-header {
        text-align: center;
    }

    .teacher-sidebar-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .teacher-sidebar-link {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .teacher-sidebar-link small {
        display: none;
    }

    .teacher-sidebar-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .teacher-sidebar-section-title {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .teacher-main-panel {
        padding: 18px;
    }

    .teacher-current-group {
        flex-direction: column;
        align-items: stretch;
    }

    .teacher-inline-actions-right {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .teacher-main-panel,
    .teacher-sidebar {
        border-radius: 18px;
        padding: 16px;
    }

    .teacher-page-heading {
        display: block;
        text-align: center;
    }

    .teacher-page-heading h2 {
        font-size: 1.7rem;
    }

    .teacher-sidebar-nav,
    .teacher-sidebar-actions {
        grid-template-columns: 1fr;
    }

    .teacher-sidebar-link {
        grid-template-columns: 34px minmax(0, 1fr);
        justify-items: stretch;
        text-align: left;
    }

    .teacher-sidebar-link small {
        display: block;
    }

    .teacher-toolbar-form,
    .teacher-create-list-form {
        flex-direction: column;
        align-items: stretch;
    }

    .teacher-toolbar-form select,
    .teacher-toolbar-form input,
    .teacher-create-list-form input,
    .teacher-create-list-form select,
    .teacher-action-btn {
        width: 100%;
    }

    .teacher-section-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    .teacher-section-tab {
        width: 100%;
        border-radius: 14px;
    }

    .teacher-data-table {
        min-width: 640px;
    }

    .teacher-all-students-table {
        min-width: 860px;
    }

    .teacher-list-grid {
        grid-template-columns: 1fr;
    }

    .teacher-list-card-footer,
    .teacher-card-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {

    .teacher-main-panel,
    .teacher-sidebar {
        padding: 14px;
    }

    .teacher-data-table th,
    .teacher-data-table td {
        padding: 11px 10px;
        font-size: 0.86rem;
    }

    .teacher-data-table {
        min-width: 580px;
    }

    .teacher-all-students-table {
        min-width: 820px;
    }
}


/* ==========================================================
   TEACHER DASHBOARD — AJUSTEMENT V3
   Onglet Listes : progression + note si terminée
   ========================================================== */

.teacher-list-progress-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    text-align: left;
}

.teacher-list-progress-item {
    padding: 11px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface-2);
}

.teacher-list-progress-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.teacher-list-progress-link:hover,
.teacher-list-progress-link:focus-visible {
    color: inherit;
    text-decoration: none;
}

.teacher-list-progress-link:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.45);
    outline-offset: 2px;
}

.teacher-list-progress-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.teacher-list-progress-top a {
    color: var(--text-main);
    font-weight: 850;
    line-height: 1.25;
    text-underline-offset: 3px;
}

.teacher-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.teacher-status-not_started {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.teacher-status-in_progress {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.teacher-status-completed {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.teacher-list-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 750;
}

.teacher-list-progress-meta strong {
    color: var(--accent);
    white-space: nowrap;
}

.teacher-progress-bar {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.28);
}

.teacher-progress-bar span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.teacher-list-progress-completed .teacher-progress-bar span {
    background: linear-gradient(90deg, #16a34a, #86efac);
}

.teacher-list-progress-not_started .teacher-progress-bar span {
    background: #94a3b8;
}

body.dark .teacher-list-progress-item {
    background: #1f2937;
    border-color: #334155;
}

body.dark .teacher-status-not_started {
    background: #111827;
    color: #cbd5e1;
    border-color: #334155;
}

body.dark .teacher-status-in_progress {
    background: #172554;
    color: #dbeafe;
    border-color: #2563eb;
}

body.dark .teacher-status-completed {
    background: #14532d;
    color: #dcfce7;
    border-color: #22c55e;
}

@media (max-width: 700px) {
    .teacher-list-progress-top,
    .teacher-list-progress-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

.teacher-status-link {
    text-decoration: none;
    cursor: pointer;
}

.teacher-status-link:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}

/* ==========================================================
   ATTRIBUER UNE LISTE À DES ÉLÈVES
   ========================================================== */

.assign-students-page {
    max-width: 980px;
    margin: 0 auto;
}

.assign-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}

.assign-header h1 {
    margin: 6px 0 8px;
    color: var(--text-main);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.assign-header p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.assign-card {
    padding: 20px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
}

.assign-help-box {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
    color: #1f2937;
}

.assign-help-box p {
    margin: 6px 0 0;
    color: #374151;
    line-height: 1.5;
}

.assign-groups-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.assign-group {
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: var(--surface-1);
    overflow: hidden;
}

.assign-group summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    cursor: pointer;
    list-style: none;
    font-weight: 850;
    color: var(--text-main);
}

.assign-group summary::-webkit-details-marker {
    display: none;
}

.assign-group summary::before {
    content: "▸";
    color: var(--text-muted);
    transition: transform 0.18s ease;
}

.assign-group[open] summary::before {
    transform: rotate(90deg);
}

.assign-group summary small {
    margin-left: auto;
    color: var(--text-muted);
    font-weight: 700;
}

.assign-group summary em {
    padding: 4px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 900;
}

.assign-student-list {
    display: grid;
    gap: 8px;
    padding: 0 15px 15px 42px;
}

.assign-student-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-main);
}

.assign-student-row input {
    margin: 0;
}

.assign-student-name {
    font-weight: 750;
}

.assign-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}

.assign-badge-group {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.assign-badge-direct {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.assign-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
}

body.dark .assign-card,
body.dark .assign-group,
body.dark .assign-student-row {
    background: #111827;
    border-color: #334155;
}

body.dark .assign-help-box {
    background: #172554;
    border-color: #2563eb;
    color: #dbeafe;
}

body.dark .assign-help-box p {
    color: #bfdbfe;
}

body.dark .assign-group summary em,
body.dark .assign-badge-group {
    background: #172554;
    border-color: #2563eb;
    color: #dbeafe;
}

body.dark .assign-badge-direct {
    background: #14532d;
    border-color: #22c55e;
    color: #dcfce7;
}

@media (max-width: 700px) {
    .assign-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .assign-card {
        padding: 16px;
    }

    .assign-group summary {
        flex-wrap: wrap;
    }

    .assign-group summary small {
        margin-left: 0;
    }

    .assign-student-list {
        padding-left: 15px;
    }

    .assign-student-row {
        flex-wrap: wrap;
    }

    .assign-actions {
        flex-direction: column;
    }

    .assign-actions .teacher-action-btn {
        width: 100%;
    }
}

/* ==========================================================
   STUDENT DASHBOARD — REFONTE V1
   CSS ciblé uniquement sur student_home.html
   ========================================================== */

.student-dashboard-container {
    max-width: 1420px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: left;
    overflow: visible;
}

.student-dashboard-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    width: 100%;
    align-items: start;
}

.student-sidebar,
.student-main-panel,
.student-card,
.student-empty-state-inline {
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
}

.student-sidebar {
    position: sticky;
    top: 86px;
    align-self: start;
    border-radius: 22px;
    padding: 18px;
}

.student-sidebar-header {
    padding: 4px 4px 18px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 16px;
}

.student-sidebar-kicker,
.student-eyebrow,
.student-muted-label,
.student-sidebar-section-title {
    display: inline-flex;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.student-sidebar-header h1 {
    margin: 8px 0 8px;
    color: var(--text-main);
    font-size: 1.45rem;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.student-sidebar-header p,
.student-page-heading p,
.student-selected-filter,
.student-empty-state-inline p,
.student-sidebar-note p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.student-sidebar-header p,
.student-sidebar-note p {
    font-size: 0.92rem;
}

.student-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-sidebar-link {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: var(--text-main);
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.student-sidebar-link:hover,
.student-sidebar-link.active {
    background: var(--surface-2);
    border-color: var(--border-soft);
    transform: translateY(-1px);
}

.student-sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: var(--surface-2);
    font-size: 1.15rem;
}

.student-sidebar-link strong {
    display: block;
    font-size: 0.96rem;
    line-height: 1.2;
}

.student-sidebar-link small {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.25;
}

.student-sidebar-note {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.student-sidebar-note p {
    margin-top: 8px;
}

.student-main-panel {
    min-width: 0;
    border-radius: 24px;
    padding: 24px;
}

.student-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.student-page-heading h2 {
    margin: 6px 0 8px;
    color: var(--text-main);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.student-page-heading p {
    max-width: 760px;
    font-size: 1rem;
}

.student-heading-actions {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.student-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--surface-1);
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.15;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.student-action-btn:hover {
    background: var(--surface-2);
    transform: translateY(-1px);
}

.student-action-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.student-action-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

.student-card {
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

.student-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.student-card-header h3 {
    margin: 5px 0 0;
    color: var(--text-main);
    font-size: 1.35rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.student-list-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.student-list-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface-1);
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.student-list-tabs button:hover {
    background: var(--surface-2);
}

.student-list-tabs button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.student-list-tabs button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.78rem;
}

.student-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.student-list-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: var(--surface-2);
    color: var(--text-main);
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.student-list-chip:hover {
    transform: translateY(-1px);
    background: #eff6ff;
    border-color: #bfdbfe;
}

.student-list-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #ffffff;
}

.student-list-chip strong {
    line-height: 1.25;
    font-size: 0.95rem;
}

.student-list-chip-progress {
    border-color: #bfdbfe;
}

.student-list-chip-completed {
    border-color: #86efac;
    background: #f0fdf4;
}

.student-empty-state-inline {
    padding: 18px;
    border-radius: 16px;
    border-style: dashed;
    text-align: center;
}

.student-empty-state-inline strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-main);
}
.student-filters-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.student-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.student-filter-field label {
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 850;
}

.student-filter-field select {
    width: 100%;
    min-height: 42px;
}

.student-filter-field select:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.student-selected-filter {
    margin-top: 8px;
    font-size: 0.9rem;
}

.student-kpi-grid,
.student-qcm-grid {
    display: grid;
    gap: 12px;
}

.student-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.student-kpi-card,
.student-qcm-card {
    min-width: 0;
    padding: 16px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: var(--surface-2);
    text-align: center;
}

.student-kpi-card span,
.student-qcm-label,
.student-qcm-detail {
    display: block;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.student-kpi-card strong,
.student-qcm-value {
    display: block;
    margin-top: 6px;
    color: var(--text-main);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.student-qcm-section {
    margin: 0 0 20px;
}

.student-qcm-grid {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.student-qcm-detail {
    margin-top: 5px;
    font-size: 0.68rem;
    line-height: 1.25;
    letter-spacing: 0.02em;
}

.student-subsection-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 12px;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 900;
}

.student-subsection-title::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--border-soft);
}

.student-badges-wrapper {
    display: flex;
    justify-content: center;
    transform: scale(0.9);
    transform-origin: center;
}

/* Dark mode */
body.dark .student-dashboard-container {
    background: transparent;
}

body.dark .student-sidebar,
body.dark .student-main-panel,
body.dark .student-card,
body.dark .student-empty-state-inline {
    background: #111827;
    border-color: #334155;
}

body.dark .student-sidebar-icon,
body.dark .student-sidebar-link:hover,
body.dark .student-sidebar-link.active,
body.dark .student-list-tabs button,
body.dark .student-list-chip,
body.dark .student-kpi-card,
body.dark .student-qcm-card {
    background: #1f2937;
}

body.dark .student-list-tabs button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

body.dark .student-list-chip:hover {
    background: #172554;
    border-color: #2563eb;
}

body.dark .student-list-chip span {
    background: #111827;
}

body.dark .student-list-chip-completed {
    background: #14532d;
    border-color: #22c55e;
}

body.dark .student-kpi-card span,
body.dark .student-qcm-label,
body.dark .student-qcm-detail {
    color: #bfdbfe;
}

body.dark .student-kpi-card strong,
body.dark .student-qcm-value {
    color: #f8fafc;
}

/* Responsive */
@media (max-width: 1100px) {
    .student-dashboard-shell {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 18px;
    }

    .student-sidebar-link {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .student-sidebar-icon {
        width: 34px;
        height: 34px;
    }

    .student-filters-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-qcm-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .student-dashboard-container {
        padding: 0;
    }

    .student-dashboard-shell {
        grid-template-columns: 1fr;
    }

    .student-sidebar {
        position: static;
        border-radius: 20px;
    }

    .student-sidebar-header {
        text-align: center;
    }

    .student-sidebar-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-sidebar-link {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .student-sidebar-link small {
        display: none;
    }

    .student-main-panel {
        padding: 18px;
    }

    .student-page-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .student-heading-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .student-main-panel,
    .student-sidebar {
        border-radius: 18px;
        padding: 16px;
    }

    .student-page-heading {
        display: block;
        text-align: center;
    }

    .student-page-heading h2 {
        font-size: 1.7rem;
    }

    .student-heading-actions {
        justify-content: center;
        margin-top: 14px;
    }

    .student-sidebar-nav {
        grid-template-columns: 1fr;
    }

    .student-sidebar-link {
        grid-template-columns: 34px minmax(0, 1fr);
        justify-items: stretch;
        text-align: left;
    }

    .student-sidebar-link small {
        display: block;
    }

    .student-list-tabs,
    .student-filters-form,
    .student-kpi-grid,
    .student-qcm-grid {
        grid-template-columns: 1fr;
    }

    .student-list-tabs {
        display: grid;
    }

    .student-list-tabs button,
    .student-action-btn {
        width: 100%;
    }

    .student-list-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .student-dashboard-shell {
        gap: 14px;
    }

    .student-main-panel,
    .student-sidebar,
    .student-card {
        padding: 14px;
    }

    .student-kpi-card strong,
    .student-qcm-value {
        font-size: 1.25rem;
    }
}

/* Student dashboard — graphique d'activité */
.student-chart-wrapper {
    position: relative;
    width: 100%;
    height: 320px;
    min-height: 0;
    max-height: 320px;
    overflow: hidden;
}

.student-chart-wrapper > canvas,
.student-chart-wrapper canvas#activityChart {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

@media (max-width: 700px) {
    .student-chart-wrapper {
        height: min(72vw, 340px);
        max-height: 340px;
    }
}

@media (max-width: 480px) {
    .student-chart-wrapper {
        height: min(68vw, 280px);
        max-height: 280px;
    }
}

/* ==========================================================
   DESIGN POLISH — PASS 1
   Petites touches globales non destructives
   ========================================================== */

:root {
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --shadow-lift: 0 16px 40px rgba(15, 23, 42, 0.10);
    --shadow-hover: 0 18px 42px rgba(15, 23, 42, 0.14);
    --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

button,
input,
select,
textarea {
    font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    box-shadow: var(--focus-ring);
}

/* Titres : moins "template scolaire", plus produit */
.main-container h1,
.teacher-page-heading h2,
.student-page-heading h2,
.assign-header h1,
.qcm-title,
.introduction {
    font-family: Arial, sans-serif;
    font-weight: 850;
    letter-spacing: -0.045em;
}

.introduction {
    font-size: clamp(1.45rem, 2.6vw, 2.15rem);
    line-height: 1.08;
    color: var(--text-main);
}

/* Surfaces principales : rendu plus cohérent entre pages */
.main-container,
.teacher-main-panel,
.student-main-panel,
.teacher-sidebar,
.student-sidebar,
.assign-card,
.qcm-shell {
    border-color: var(--border-soft);
    box-shadow: var(--shadow-card);
}

.teacher-main-panel,
.student-main-panel,
.assign-card,
.qcm-shell {
    border-radius: var(--radius-xl);
}

.teacher-card,
.student-card,
.teacher-table-card,
.teacher-list-card,
.teacher-empty-state-v2,
.student-empty-state-inline,
.statement-card,
.exercise-form-card,
.exercise-correction-card,
.qcm-stat,
.qcm-result,
.qcm-student-card {
    border-radius: var(--radius-lg);
}

/* Boutons : hiérarchie et hover plus nets */
.btn,
.nav-item,
.nav-item-bis,
.action-btn,
.teacher-action-btn,
.student-action-btn,
.qcm-start-btn,
.qcm-next-btn,
.qcm-end-btn {
    font-weight: 800;
    letter-spacing: 0.005em;
}

.btn:hover,
.nav-item:hover,
.nav-item-bis:hover,
.action-btn:hover,
.teacher-action-btn:hover,
.student-action-btn:hover,
.qcm-start-btn:hover,
.qcm-next-btn:hover,
.qcm-end-btn:hover,
.menu-tile:hover,
.student-list-chip:hover,
.teacher-list-progress-item:hover {
    box-shadow: var(--shadow-hover);
}

.primary-btn,
.teacher-action-primary,
.student-action-primary,
.tab-link.active,
.teacher-section-tab.active,
.student-list-tabs button.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #2563eb;
    color: #fff;
}

/* Cartes de navigation cours/exercices */
.menu-tile,
.exercise-tile,
.student-list-chip,
.teacher-sidebar-link,
.student-sidebar-link,
.teacher-sidebar-action {
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.menu-tile,
.exercise-tile {
    min-height: 68px;
    border-radius: var(--radius-md);
    font-weight: 800;
}

.tile-container {
    gap: 18px;
}

/* Formulaires : meilleure lisibilité en light/dark */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
    min-height: 40px;
    border-radius: var(--radius-sm);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    border-color: #93c5fd;
    box-shadow: var(--focus-ring);
}

/* Dashboard prof / élève : densité et alignements */
.teacher-sidebar-header h1,
.student-sidebar-header h1 {
    font-weight: 850;
}

.teacher-sidebar-link.active,
.student-sidebar-link.active {
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.teacher-data-table thead th,
.teacher-muted-label,
.student-muted-label,
.teacher-eyebrow,
.student-eyebrow,
.assign-badge,
.card-label {
    letter-spacing: 0.055em;
}

.teacher-data-table td,
.teacher-data-table th {
    line-height: 1.35;
}

.teacher-list-progress-item,
.student-kpi-card,
.student-qcm-card,
.qcm-stat,
.qcm-result {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.045);
}

/* QCM : carte moins vide et commandes plus homogènes */
.qcm-title {
    margin-bottom: 0.25rem;
    font-size: clamp(2rem, 4vw, 3rem);
}

.qcm-start-btn,
.qcm-next-btn,
.qcm-end-btn {
    border-width: 1px;
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.qcm-start-btn:hover,
.qcm-next-btn:hover,
.qcm-end-btn:hover {
    background: #dbeafe;
}

/* Dark mode : cohérence des surfaces */
body.dark {
    --shadow-lift: 0 16px 40px rgba(0, 0, 0, 0.30);
    --shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.38);
    --focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.20);
}

body.dark .main-container,
body.dark .teacher-main-panel,
body.dark .student-main-panel,
body.dark .teacher-sidebar,
body.dark .student-sidebar,
body.dark .assign-card,
body.dark .qcm-shell {
    background: #111827;
    border-color: #334155;
}

body.dark .menu-tile,
body.dark .exercise-tile,
body.dark .qcm-stat,
body.dark .qcm-result,
body.dark .student-kpi-card,
body.dark .student-qcm-card,
body.dark .teacher-list-progress-item {
    background: #1f2937;
    border-color: #334155;
}

body.dark .qcm-start-btn,
body.dark .qcm-next-btn,
body.dark .qcm-end-btn {
    background: #1f2937;
    color: #dbeafe;
    border-color: #475569;
}

body.dark .qcm-start-btn:hover,
body.dark .qcm-next-btn:hover,
body.dark .qcm-end-btn:hover {
    background: #172554;
    border-color: #2563eb;
}

@media (max-width: 700px) {
    .main-container,
    .teacher-main-panel,
    .student-main-panel,
    .assign-card,
    .qcm-shell {
        border-radius: 18px;
    }

    .tile-container {
        gap: 12px;
    }
}

/* ==========================================================
   SITE UI — UNIFORMISATION COURS / QCM / EXERCICES
   Passe visuelle ciblée, sans modification des vues
   ========================================================== */

.site-eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-messages {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.site-message {
    padding: 12px 16px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text-main);
    font-weight: 750;
    box-shadow: var(--shadow-card);
}

.site-message-success {
    background: var(--success-bg);
    border-color: #86efac;
    color: var(--success);
}

.site-message-error {
    background: var(--error-bg);
    border-color: #fca5a5;
    color: var(--error);
}

.site-hero-card,
.site-form-card,
.site-empty-card,
.qcm-config-card,
.qcm-question-card {
    width: min(100%, 860px);
    margin: 0 auto;
    padding: 28px;
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
}

.site-hero-card {
    text-align: center;
}

.site-hero-card h1,
.catalog-header h1,
.qcm-page-header h1,
.exercise-page-heading h1 {
    margin: 4px 0 10px;
    color: var(--text-main);
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    line-height: 1.06;
    letter-spacing: -0.05em;
    font-weight: 900;
}

.site-hero-card p,
.catalog-header p,
.qcm-page-header p,
.exercise-page-heading p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.site-info-stack {
    display: grid;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
}

.site-info-stack p {
    margin: 0;
}

.site-empty-text,
.site-empty-card {
    color: var(--text-muted);
    text-align: center;
}

.site-empty-card {
    padding: 22px;
    font-weight: 750;
}

.site-form-page,
.catalog-page,
.qcm-page,
.exercise-page {
    width: 100%;
    margin: 0 auto;
}

.catalog-header,
.qcm-page-header,
.exercise-page-heading {
    margin: 0 auto 22px;
    text-align: center;
}

.catalog-header {
    max-width: 840px;
}

.catalog-header-compact,
.qcm-page-header-compact {
    margin-bottom: 16px;
}

.catalog-header h2,
.catalog-group h2 {
    margin: 4px 0 10px;
    color: var(--text-main);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    letter-spacing: -0.035em;
    line-height: 1.12;
}

.catalog-grid {
    margin-top: 18px;
}

.catalog-grid-small {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.catalog-subsection {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-soft);
}

.catalog-section-stack {
    display: grid;
    gap: 28px;
}

.catalog-group {
    padding: 20px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: var(--surface-1);
    box-shadow: var(--shadow-card);
}

.site-filter-card,
.site-form-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.site-filter-card {
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: var(--surface-2);
}

.site-filter-card label,
.site-form-card label,
.qcm-field label {
    color: var(--text-main);
    font-size: 0.86rem;
    font-weight: 850;
}

.site-form-card {
    flex-direction: column;
    align-items: stretch;
    max-width: 520px;
}

.site-form-card input,
.site-form-card button {
    width: 100%;
}

.exercise-page {
    max-width: 900px;
}

.exercise-page-heading {
    max-width: 820px;
}

.exercise-list-run-page .exercise-page-heading p {
    margin-top: 8px;
    font-weight: 750;
}

.exercise-card .exercise-correction-card {
    margin-top: 18px;
}

.aide-card {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
    color: #1f2937;
    line-height: 1.55;
}

.qcm-page {
    max-width: 920px;
}

.qcm-page-header {
    max-width: 760px;
}

.qcm-config-card {
    display: grid;
    gap: 22px;
}

.qcm-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.qcm-config-grid-small {
    grid-template-columns: repeat(2, minmax(160px, 220px));
    justify-content: center;
}

.qcm-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.qcm-field-wide {
    grid-column: 1 / -1;
}

.qcm-field label span {
    color: var(--text-muted);
    font-weight: 700;
}

.qcm-config-section {
    padding: 18px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: var(--surface-2);
}

.qcm-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.qcm-section-heading h2 {
    margin: 3px 0 0;
    color: var(--text-main);
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.qcm-themes-panel {
    margin-top: 16px;
}

.qcm-themes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.qcm-theme-tuile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface-1);
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.qcm-theme-tuile:hover {
    transform: translateY(-1px);
    border-color: #bfdbfe;
}

.qcm-theme-tuile.selected {
    background: #eff6ff;
    border-color: #2563eb;
    color: #1d4ed8;
}

.qcm-theme-tuile span {
    font-weight: 850;
    line-height: 1.2;
}

.qcm-theme-tuile small {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.site-form-error {
    margin-top: 10px;
    color: var(--error);
    font-weight: 800;
    text-align: center;
}

.qcm-config-actions,
.qcm-actions-centered {
    display: flex;
    justify-content: center;
}

.qcm-question-card {
    width: 100%;
    max-width: 900px;
}

.qcm-image-wrap {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.qcm-question-card .qcm-question {
    margin: 0 auto;
    max-width: 760px;
    text-align: center;
}

.qcm-actions-centered {
    margin-top: 22px;
}

.badges-strip {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.badge-card-mini {
    width: 112px;
    text-align: center;
}

.badge-card-mini img {
    display: block;
    margin: 0 auto;
}

.badge-progressbar {
    height: 6px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.35);
}

.badge-progressbar > div {
    height: 100%;
    transition: width 0.3s ease;
}

.badge-percent {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
}

body.dark .site-message,
body.dark .site-hero-card,
body.dark .site-form-card,
body.dark .site-empty-card,
body.dark .catalog-group,
body.dark .qcm-config-card,
body.dark .qcm-question-card {
    background: #111827;
    border-color: #334155;
}

body.dark .site-filter-card,
body.dark .qcm-config-section {
    background: #1f2937;
    border-color: #334155;
}

body.dark .aide-card {
    background: #172554;
    border-color: #2563eb;
    color: #dbeafe;
}

body.dark .qcm-theme-tuile {
    background: #111827;
    border-color: #334155;
    color: #e5e7eb;
}

body.dark .qcm-theme-tuile:hover {
    border-color: #2563eb;
}

body.dark .qcm-theme-tuile.selected {
    background: #172554;
    border-color: #2563eb;
    color: #dbeafe;
}

body.dark .qcm-theme-tuile small {
    color: #bfdbfe;
}

@media (max-width: 760px) {
    .site-hero-card,
    .site-form-card,
    .qcm-config-card,
    .qcm-question-card {
        padding: 20px;
        border-radius: 20px;
    }

    .qcm-config-grid,
    .qcm-config-grid-small {
        grid-template-columns: 1fr;
    }

    .qcm-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .qcm-section-heading .action-btn,
    .qcm-start-btn,
    .qcm-next-btn,
    .qcm-end-btn {
        width: 100%;
    }
}

/* QCM start — corrections minimales */
.qcm-start-page .qcm-config-grid:first-of-type {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    max-width: 680px;
    margin: 0 auto;
}

.qcm-start-page .qcm-config-grid:first-of-type .qcm-field,
.qcm-start-page .qcm-config-grid:first-of-type select {
    width: 100%;
}

.qcm-start-page #themes-block {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.qcm-start-page .qcm-section-heading {
    align-items: center;
}

.qcm-start-page .qcm-section-heading .action-btn {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .qcm-start-page .qcm-config-grid:first-of-type {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .qcm-start-page .qcm-section-heading .action-btn {
        width: 100%;
    }
}



/* ==========================================================
   PROTOTYPE COURS — VERSION MODERNE V2
   Fichier test : add_frac.html
   ========================================================== */

.lesson-page-v2 {
    width: min(100%, 980px);
    margin: 0 auto;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Les fiches de cours utilisent leurs propres cartes : le conteneur global
   ne doit donc pas former un grand cadre supplémentaire autour d'elles. */
.main-container.lesson-main-container {
    max-width: 1030px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

body.dark .main-container.lesson-main-container {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.lesson-hero-v2,
.lesson-card-v2,
.lesson-info-card-v2 {
    border: 1px solid var(--lesson-page-border);
    background: var(--lesson-page-card);
    box-shadow: var(--lesson-page-shadow-soft);
}

.lesson-hero-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    margin-bottom: 18px;
    padding: 28px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 34%),
        linear-gradient(135deg, var(--lesson-page-panel) 0%, var(--lesson-page-card-blue) 100%);
    box-shadow: var(--lesson-page-shadow);
}

.lesson-kicker-v2,
.lesson-section-heading-v2 span,
.lesson-info-card-v2 span,
.lesson-formula-box-v2 > span {
    display: inline-flex;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesson-hero-v2 h1 {
    margin: 7px 0 10px;
    color: var(--text-main);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.03;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.lesson-hero-v2 p {
    max-width: 680px;
    margin: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.lesson-practice-btn-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 20px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.20);
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.lesson-practice-actions-v2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.lesson-practice-btn-v2:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.26);
}

.lesson-info-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.lesson-info-card-v2 {
    padding: 17px 18px;
    border-radius: 18px;
    background: var(--lesson-page-card-soft);
}

.lesson-info-card-v2 strong {
    display: block;
    margin: 5px 0 6px;
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1.25;
}

.lesson-info-card-v2 p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.lesson-card-v2 {
    margin-top: 18px;
    padding: 26px;
    border-radius: 22px;
    background: linear-gradient(
        180deg,
        var(--lesson-page-card) 0%,
        var(--lesson-page-card-soft) 100%
    );
}

.lesson-card-v2 p {
    margin: 13px 0;
    color: var(--text-main);
    font-size: 1.05rem;
    line-height: 1.75;
}

.lesson-card-v2 p:first-of-type {
    margin-top: 0;
}

.lesson-card-v2 a {
    color: var(--accent);
    font-weight: 800;
    text-underline-offset: 3px;
}

.lesson-card-v2 a.lesson-card-cta-v2,
body.dark .lesson-card-v2 a.lesson-card-cta-v2 {
    color: #fff;
    text-decoration: none;
}

.lesson-section-heading-v2 {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
}

.lesson-section-heading-v2 h2,
.lesson-intro-v2 h2 {
    margin: 5px 0 0;
    color: var(--text-main);
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
    font-weight: 900;
}

.lesson-intro-v2 h2 {
    margin-bottom: 14px;
}

.lesson-formula-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.lesson-formula-box-v2 {
    margin-top: 16px;
    padding: 16px 18px;
    overflow-x: auto;
    border: 1px solid #bfdbfe;
    border-radius: 18px;
    background: #eff6ff;
    color: var(--text-main);
    text-align: center;
    -webkit-overflow-scrolling: touch;
}

.lesson-example-box-v2 {
    border-color: #86efac;
    background: #f0fdf4;
}

.lesson-formula-box-v2 > span {
    justify-content: center;
    width: 100%;
    margin-bottom: 8px;
}

.lesson-formula-box-v2 mjx-container {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

body.dark .lesson-hero-v2,
body.dark .lesson-card-v2,
body.dark .lesson-info-card-v2 {
    border-color: var(--lesson-page-border);
}

body.dark .lesson-hero-v2 {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.20), transparent 36%),
        linear-gradient(135deg, var(--lesson-page-panel) 0%, var(--lesson-page-card-blue) 100%);
}

body.dark .lesson-info-card-v2 {
    background: var(--lesson-page-card-soft);
}

body.dark .lesson-card-v2 {
    background: linear-gradient(
        180deg,
        var(--lesson-page-card) 0%,
        var(--lesson-page-card-soft) 100%
    );
}

body.dark .lesson-formula-box-v2 {
    background: #172554;
    border-color: #2563eb;
    color: #e5e7eb;
}

body.dark .lesson-example-box-v2 {
    background: #14532d;
    border-color: #22c55e;
}

body.dark .lesson-card-v2 a {
    color: #93c5fd;
}

@media (max-width: 760px) {
    .lesson-hero-v2 {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px;
        text-align: center;
    }

    .lesson-practice-btn-v2 {
        width: 100%;
    }

    .lesson-practice-actions-v2 {
        width: 100%;
    }

    .lesson-info-grid-v2,
    .lesson-formula-grid-v2 {
        grid-template-columns: 1fr;
    }

    .lesson-card-v2 {
        padding: 20px;
        border-radius: 20px;
    }

    .lesson-card-v2 p {
        font-size: 1rem;
        line-height: 1.65;
    }
}



/* Compléments pour généraliser le prototype à toutes les fiches */
.course-index-page-v2 {
    max-width: 1080px;
}

.course-index-stack-v2 {
    display: grid;
    gap: 24px;
}

.course-index-theme-v2 h2 {
    margin: 0 0 16px;
    color: var(--text-main);
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.course-index-chapter-v2 {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.course-index-chapter-v2 h3 {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lesson-info-content-v2,
.lesson-info-content-v2 .para,
.lesson-card-v2 .para {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.lesson-info-content-v2 {
    color: var(--text-muted);
    line-height: 1.55;
}

.lesson-card-v2 .para,
.lesson-card-v2 ul,
.lesson-card-v2 ol {
    margin: 13px 0;
    color: var(--text-main);
    font-size: 1.05rem;
    line-height: 1.75;
}

.lesson-card-v2 ul,
.lesson-card-v2 ol {
    padding-left: 1.35rem;
}

.lesson-card-v2 li {
    margin: 8px 0;
}

.lesson-card-v2 .centre {
    text-align: center;
}

.lesson-card-v2 .marge_haut {
    margin-top: 16px;
}

.lesson-card-v2 .underline {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.22em;
}

.lesson-media-box-v2,
.lesson-table-wrap-v2 {
    margin: 18px auto;
    text-align: center;
}

.lesson-media-box-v2 img,
.lesson-card-v2 img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.lesson-table-wrap-v2,
.lesson-card-v2 table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lesson-card-v2 table {
    width: 100%;
    margin: 16px auto;
    border: 1px solid var(--border-soft) !important;
    border-radius: 16px;
    background: var(--surface-1);
    box-shadow: var(--shadow-card);
}

.lesson-card-v2 th,
.lesson-card-v2 td {
    padding: 12px 14px;
    border-color: var(--border-soft) !important;
    color: var(--text-main);
    text-align: center;
}

.lesson-card-v2 th {
    background: var(--surface-3);
    font-weight: 900;
}

.lesson-card-v2 .red { color: #dc2626; }
.lesson-card-v2 .green { color: #16a34a; }
.lesson-card-v2 .blue { color: #2563eb; }
.lesson-card-v2 .orange { color: #ea580c; }

body.dark .course-index-theme-v2 {
    background: #111827;
    border-color: #334155;
}

body.dark .lesson-media-box-v2 img,
body.dark .lesson-card-v2 img {
    background: #f8fafc;
}

body.dark .lesson-card-v2 table {
    background: #111827;
    border-color: #334155 !important;
}

body.dark .lesson-card-v2 th {
    background: #0f172a;
}

body.dark .lesson-card-v2 th,
body.dark .lesson-card-v2 td {
    border-color: #334155 !important;
}

.lesson-media-box-v2 img.course-small-figure {
    width: min(100%, 300px);
}

@media (max-width: 760px) {
    .lesson-card-v2 .para,
    .lesson-card-v2 ul,
    .lesson-card-v2 ol {
        font-size: 1rem;
        line-height: 1.65;
    }

    .lesson-card-v2 table {
        display: block;
        width: 100%;
    }
}

/* ==========================================================
   CATALOGUE UNIFIÉ DES EXERCICES
   Template : exercises/exercise_catalog.html
   ========================================================== */

.exercise-catalog-container {
    width: 100%;
    max-width: 1500px;
    min-width: 0;
    margin: 22px auto 34px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

.exercise-catalog,
.exercise-catalog *,
.exercise-catalog *::before,
.exercise-catalog *::after {
    box-sizing: border-box;
}

.exercise-catalog {
    --catalog-panel: rgba(255, 255, 255, 0.97);
    --catalog-card: #ffffff;
    --catalog-card-soft: #f8fafc;
    --catalog-card-blue: #eff6ff;
    --catalog-border: rgba(148, 163, 184, 0.28);
    --catalog-border-strong: rgba(37, 99, 235, 0.32);
    --catalog-text: #0f172a;
    --catalog-muted: #64748b;
    --catalog-subtle: #475569;
    --catalog-blue: #2563eb;
    --catalog-blue-dark: #1d4ed8;
    --catalog-blue-soft: rgba(37, 99, 235, 0.10);
    --catalog-shadow: 0 18px 48px rgba(15, 23, 42, 0.09);
    --catalog-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.06);
    --catalog-shadow-hover: 0 18px 38px rgba(37, 99, 235, 0.14);

    width: min(100%, 1420px);
    margin: 0 auto;
    color: var(--catalog-text);
}

body.dark .exercise-catalog,
html[data-theme="dark"] .exercise-catalog,
body.dark-mode .exercise-catalog,
body.theme-dark .exercise-catalog,
[data-bs-theme="dark"] .exercise-catalog {
    --catalog-panel: rgba(15, 23, 42, 0.97);
    --catalog-card: #111827;
    --catalog-card-soft: #1e293b;
    --catalog-card-blue: rgba(37, 99, 235, 0.18);
    --catalog-border: rgba(148, 163, 184, 0.22);
    --catalog-border-strong: rgba(96, 165, 250, 0.42);
    --catalog-text: #f8fafc;
    --catalog-muted: #94a3b8;
    --catalog-subtle: #cbd5e1;
    --catalog-blue: #60a5fa;
    --catalog-blue-dark: #bfdbfe;
    --catalog-blue-soft: rgba(96, 165, 250, 0.15);
    --catalog-shadow: 0 20px 52px rgba(2, 6, 23, 0.38);
    --catalog-shadow-soft: 0 10px 28px rgba(2, 6, 23, 0.26);
    --catalog-shadow-hover: 0 18px 38px rgba(2, 6, 23, 0.40);
}

.exercise-catalog button,
.exercise-catalog select,
.exercise-catalog input {
    font: inherit;
}

.exercise-catalog a > svg,
.exercise-catalog button > svg,
.exercise-catalog [class*="-icon"] svg,
.exercise-catalog [class*="-arrow"] svg {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exercise-catalog-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(24px, 4vw, 42px);
    overflow: hidden;
    border: 1px solid var(--catalog-border);
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 12%, rgba(37, 99, 235, 0.17), transparent 30%),
        linear-gradient(135deg, var(--catalog-panel) 0%, var(--catalog-card-blue) 100%);
    box-shadow: var(--catalog-shadow);
}

.exercise-catalog-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #2563eb 0%, #60a5fa 55%, transparent 100%);
}

.exercise-catalog-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

.exercise-catalog-eyebrow,
.exercise-catalog-section-label,
.exercise-catalog-control-label,
.exercise-catalog-control-block > label {
    display: block;
    color: var(--catalog-blue-dark);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.exercise-catalog-hero h1 {
    margin: 0.5rem 0 0.7rem;
    color: var(--catalog-text);
    font-size: clamp(2.25rem, 5vw, 4.5rem);
    font-weight: 950;
    letter-spacing: -0.06em;
    line-height: 0.96;
}

.exercise-catalog-hero p {
    max-width: 780px;
    margin: 0;
    color: var(--catalog-subtle);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.55;
}

.exercise-catalog-dashboard-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.7rem 1rem;
    border: 1px solid var(--catalog-border);
    border-radius: 14px;
    background: var(--catalog-card);
    color: var(--catalog-text);
    font-size: 0.9rem;
    font-weight: 850;
    text-decoration: none;
    box-shadow: var(--catalog-shadow-soft);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.exercise-catalog-dashboard-link:hover {
    border-color: var(--catalog-border-strong);
    color: var(--catalog-blue-dark);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--catalog-shadow-hover);
}

.exercise-catalog-controls {
    position: sticky;
    top: 78px;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(380px, 1.2fr);
    gap: 18px;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid var(--catalog-border);
    border-radius: 22px;
    background: var(--catalog-panel);
    box-shadow: var(--catalog-shadow-soft);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.exercise-catalog-control-block {
    min-width: 0;
}

.exercise-catalog-control-block > label,
.exercise-catalog-control-label {
    margin-bottom: 0.55rem;
    color: var(--catalog-muted);
}

.exercise-catalog-select-wrap {
    position: relative;
}

.exercise-catalog-select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--catalog-muted);
    border-bottom: 2px solid var(--catalog-muted);
    pointer-events: none;
    transform: translateY(-70%) rotate(45deg);
}

.exercise-catalog-select-wrap select {
    width: 100%;
    min-height: 50px;
    padding: 0.75rem 3rem 0.75rem 1rem;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--catalog-border);
    border-radius: 15px;
    outline: none;
    background: var(--catalog-card);
    color: var(--catalog-text);
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.exercise-catalog-select-wrap select:focus {
    border-color: var(--catalog-border-strong);
    box-shadow: 0 0 0 4px var(--catalog-blue-soft);
}

.exercise-catalog-control-help {
    display: block;
    min-height: 1.15rem;
    margin-top: 0.45rem;
    color: var(--catalog-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.exercise-catalog-view-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--catalog-border);
    border-radius: 16px;
    background: var(--catalog-card-soft);
}

.exercise-catalog-view-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 50px;
    padding: 0.7rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--catalog-muted);
    font-size: 0.92rem;
    font-weight: 900;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.exercise-catalog-view-switch button:hover {
    color: var(--catalog-text);
}

.exercise-catalog-view-switch button.is-active {
    border-color: var(--catalog-border);
    background: var(--catalog-card);
    color: var(--catalog-blue-dark);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
}

.exercise-catalog-main {
    min-height: 510px;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--catalog-border);
    border-radius: 26px;
    background: var(--catalog-panel);
    box-shadow: var(--catalog-shadow);
}

.exercise-catalog-view-panel[hidden],
.exercise-catalog-empty[hidden],
.exercise-catalog-back-button[hidden],
.exercise-catalog-search button[hidden] {
    display: none !important;
}

.exercise-catalog-navigation-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 42px;
    margin-bottom: 18px;
}

.exercise-catalog-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--catalog-border);
    border-radius: 12px;
    background: var(--catalog-card);
    color: var(--catalog-text);
    font-size: 0.86rem;
    font-weight: 850;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.exercise-catalog-back-button:hover {
    border-color: var(--catalog-border-strong);
    color: var(--catalog-blue-dark);
    transform: translateX(-2px);
}

.exercise-catalog-breadcrumb {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.5rem;
    overflow-x: auto;
    color: var(--catalog-muted);
    scrollbar-width: none;
    white-space: nowrap;
}

.exercise-catalog-breadcrumb::-webkit-scrollbar {
    display: none;
}

.exercise-catalog-breadcrumb button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--catalog-muted);
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
}

.exercise-catalog-breadcrumb button:hover,
.exercise-catalog-breadcrumb .is-current {
    color: var(--catalog-blue-dark);
}

.exercise-catalog-breadcrumb .is-current {
    font-size: 0.86rem;
    font-weight: 900;
}

.exercise-catalog-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--catalog-border);
}

.exercise-catalog-section-heading h2 {
    margin: 0.35rem 0 0.45rem;
    outline: none;
    color: var(--catalog-text);
    font-size: clamp(1.85rem, 3vw, 2.7rem);
    font-weight: 950;
    letter-spacing: -0.045em;
    line-height: 1.03;
}

.exercise-catalog-section-heading p {
    max-width: 760px;
    margin: 0;
    color: var(--catalog-muted);
    line-height: 1.5;
}

.exercise-catalog-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--catalog-border-strong);
    border-radius: 999px;
    background: var(--catalog-blue-soft);
    color: var(--catalog-blue-dark);
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.exercise-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.exercise-catalog-navigation-card,
.exercise-catalog-exercise-card {
    min-width: 0;
    border: 1px solid var(--catalog-border);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--catalog-card) 0%, var(--catalog-card-soft) 100%);
    color: var(--catalog-text);
    box-shadow: var(--catalog-shadow-soft);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.exercise-catalog-navigation-card:hover,
.exercise-catalog-exercise-card:hover {
    border-color: var(--catalog-border-strong);
    background: linear-gradient(180deg, var(--catalog-card) 0%, var(--catalog-card-blue) 100%);
    color: var(--catalog-text);
    box-shadow: var(--catalog-shadow-hover);
    transform: translateY(-3px);
}

.exercise-catalog-navigation-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 13px;
    min-height: 104px;
    padding: 17px;
    text-align: left;
    cursor: pointer;
}

.exercise-catalog-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--catalog-border-strong);
    border-radius: 15px;
    background: var(--catalog-blue-soft);
    color: var(--catalog-blue-dark);
}

.exercise-catalog-card-copy {
    min-width: 0;
}

.exercise-catalog-card-copy strong {
    display: block;
    color: var(--catalog-text);
    font-size: 1.03rem;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.exercise-catalog-card-copy small {
    display: block;
    margin-top: 0.38rem;
    color: var(--catalog-muted);
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.3;
}

.exercise-catalog-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--catalog-muted);
    transition: color 0.18s ease, transform 0.18s ease;
}

.exercise-catalog-navigation-card:hover .exercise-catalog-card-arrow,
.exercise-catalog-exercise-card:hover .exercise-catalog-card-arrow {
    color: var(--catalog-blue-dark);
    transform: translateX(3px);
}

.exercise-catalog-exercise-card {
    display: flex;
    flex-direction: column;
    min-height: 178px;
    padding: 18px;
    text-decoration: none;
}

.exercise-catalog-exercise-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.exercise-catalog-exercise-top strong {
    display: block;
    width: 100%;
    min-width: 0;
    color: var(--catalog-text);
    font-size: 1.04rem;
    font-weight: 900;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.exercise-catalog-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 25px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--catalog-border-strong);
    border-radius: 999px;
    background: var(--catalog-blue-soft);
    color: var(--catalog-blue-dark);
    font-size: 0.69rem;
    font-weight: 950;
    white-space: nowrap;
    align-self: center;
}

.exercise-catalog-exercise-meta {
    display: block;
    margin-top: 0.65rem;
    color: var(--catalog-muted);
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1.4;
}

.exercise-catalog-exercise-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--catalog-blue-dark);
    font-size: 0.82rem;
    font-weight: 900;
}

.exercise-catalog-search-row {
    margin-bottom: 18px;
}

.exercise-catalog-search {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    width: min(100%, 760px);
    min-height: 56px;
    margin: 0 auto;
    padding: 0.35rem 0.5rem 0.35rem 1rem;
    border: 1px solid var(--catalog-border);
    border-radius: 18px;
    background: var(--catalog-card);
    color: var(--catalog-muted);
    box-shadow: var(--catalog-shadow-soft);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.exercise-catalog-search:focus-within {
    border-color: var(--catalog-border-strong);
    box-shadow: 0 0 0 4px var(--catalog-blue-soft), var(--catalog-shadow-soft);
}

.exercise-catalog-search input {
    width: 100%;
    min-width: 0;
    padding: 0.65rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--catalog-text);
    font-size: 1rem;
    font-weight: 750;
}

.exercise-catalog-search input::placeholder {
    color: var(--catalog-muted);
    opacity: 0.8;
}

.exercise-catalog-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: var(--catalog-card-soft);
    color: var(--catalog-muted);
    cursor: pointer;
}

.exercise-catalog-search button:hover {
    background: var(--catalog-blue-soft);
    color: var(--catalog-blue-dark);
}

.exercise-catalog-letter-nav {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 26px;
    padding: 4px 2px 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.exercise-catalog-letter-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 1px solid var(--catalog-border);
    border-radius: 11px;
    background: var(--catalog-card-soft);
    color: var(--catalog-text);
    font-size: 0.84rem;
    font-weight: 900;
    text-decoration: none;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.exercise-catalog-letter-nav a:hover {
    border-color: var(--catalog-border-strong);
    background: var(--catalog-blue-soft);
    color: var(--catalog-blue-dark);
    transform: translateY(-2px);
}

.exercise-catalog-alpha-groups {
    display: grid;
    gap: 32px;
}

.exercise-catalog-letter-group {
    scroll-margin-top: 176px;
}

.exercise-catalog-letter-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.exercise-catalog-letter-heading::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--catalog-border);
}

.exercise-catalog-letter-heading h3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 13px;
    background: var(--catalog-blue-soft);
    color: var(--catalog-blue-dark);
    font-size: 1.2rem;
    font-weight: 950;
}

.exercise-catalog-letter-heading span {
    color: var(--catalog-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.exercise-catalog-exercise-card-compact {
    min-height: 160px;
}

.exercise-catalog-inline-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 28px;
    border: 1px dashed var(--catalog-border-strong);
    border-radius: 18px;
    background: var(--catalog-card-soft);
    text-align: center;
}

.exercise-catalog-inline-empty strong {
    color: var(--catalog-text);
    font-size: 1.15rem;
    font-weight: 950;
}

.exercise-catalog-inline-empty p {
    max-width: 560px;
    margin: 0.45rem 0 0;
    color: var(--catalog-muted);
    line-height: 1.5;
}

.exercise-catalog-inline-empty button {
    min-height: 42px;
    margin-top: 1rem;
    padding: 0.6rem 0.95rem;
    border: 1px solid var(--catalog-blue);
    border-radius: 12px;
    background: var(--catalog-blue);
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.exercise-catalog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 430px;
    padding: 32px;
    text-align: center;
}

.exercise-catalog-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px solid var(--catalog-border-strong);
    border-radius: 22px;
    background: var(--catalog-blue-soft);
    color: var(--catalog-blue-dark);
}

.exercise-catalog-empty-icon svg {
    width: 32px;
    height: 32px;
}

.exercise-catalog-empty h2 {
    margin: 1rem 0 0.45rem;
    color: var(--catalog-text);
    font-size: 1.55rem;
    font-weight: 950;
}

.exercise-catalog-empty p {
    max-width: 560px;
    margin: 0;
    color: var(--catalog-muted);
    line-height: 1.5;
}

.exercise-catalog-empty button {
    min-height: 44px;
    margin-top: 1rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--catalog-blue);
    border-radius: 13px;
    background: var(--catalog-blue);
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.exercise-catalog-view-panel.is-rendering {
    animation: exercise-catalog-enter 0.22s ease both;
}

@keyframes exercise-catalog-enter {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1120px) {
    .exercise-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .exercise-catalog-container {
        margin-top: 16px;
    }

    .exercise-catalog-controls {
        position: static;
        grid-template-columns: 1fr;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .exercise-catalog-letter-group {
        scroll-margin-top: 24px;
    }
}

@media (max-width: 700px) {
    .exercise-catalog-container {
        margin: 12px auto 24px;
    }

    .exercise-catalog-hero {
        flex-direction: column;
        padding: 24px 20px;
        border-radius: 22px;
    }

    .exercise-catalog-hero h1 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .exercise-catalog-dashboard-link {
        width: 100%;
    }

    .exercise-catalog-controls {
        margin: 12px 0;
        padding: 14px;
        border-radius: 18px;
    }

    .exercise-catalog-main {
        min-height: 460px;
        padding: 18px 14px;
        border-radius: 20px;
    }

    .exercise-catalog-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 18px;
    }

    .exercise-catalog-count {
        align-self: flex-start;
    }

    .exercise-catalog-navigation-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .exercise-catalog-back-button {
        width: 100%;
    }

    .exercise-catalog-breadcrumb {
        width: 100%;
    }

    .exercise-catalog-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .exercise-catalog-navigation-card {
        min-height: 92px;
        padding: 14px;
    }

    .exercise-catalog-exercise-card,
    .exercise-catalog-exercise-card-compact {
        min-height: 154px;
        padding: 16px;
    }

    .exercise-catalog-alpha-heading {
        padding-bottom: 16px;
    }

    .exercise-catalog-letter-nav {
        margin-right: -14px;
        margin-left: -14px;
        padding-right: 14px;
        padding-left: 14px;
    }
}

@media (max-width: 480px) {
    .exercise-catalog-view-switch button {
        flex-direction: column;
        gap: 0.3rem;
        min-height: 60px;
        padding: 0.55rem;
        font-size: 0.8rem;
    }

    .exercise-catalog-navigation-card {
        grid-template-columns: 42px minmax(0, 1fr) 24px;
        gap: 10px;
    }

    .exercise-catalog-card-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .exercise-catalog-level-badge {
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .exercise-catalog *,
    .exercise-catalog *::before,
    .exercise-catalog *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================
   CONSTRUCTION DE POLYGONES INTERACTIVE
============================ */
.interactive-polygon,
.interactive-polygon-correction {
    --interactive-grid: #cbd5e1;
    --interactive-dot: #94a3b8;
    --interactive-source: #334155;
    --interactive-target: #2563eb;
    --interactive-guide: #e11d48;
    --interactive-axis: #7c3aed;
}

.interactive-polygon {
    display: grid;
    gap: 1rem;
}

.interactive-polygon-heading,
.interactive-polygon-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.interactive-polygon-kicker {
    display: block;
    margin-bottom: 0.18rem;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.interactive-polygon-instructions,
.interactive-polygon-status {
    margin: 0;
}

.interactive-polygon-instructions {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.interactive-polygon-progress {
    min-width: 64px;
    padding: 0.42rem 0.72rem;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 0.88rem;
    font-weight: 800;
    text-align: center;
}

.interactive-polygon-canvas-shell {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    background:
        radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.07), transparent 32%),
        var(--surface-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--shadow-card);
}

.interactive-polygon-canvas {
    display: block;
    width: 100%;
    height: auto;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.interactive-polygon-canvas:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.45);
    outline-offset: -3px;
}

.interactive-polygon-grid-line {
    stroke: var(--interactive-grid);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.interactive-polygon-grid-dot {
    fill: var(--interactive-dot);
}

.interactive-polygon-source-shape {
    fill: rgba(51, 65, 85, 0.1);
    stroke: var(--interactive-source);
    stroke-width: 3;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.interactive-polygon-source-point {
    fill: var(--interactive-source);
    stroke: var(--surface-1);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.interactive-polygon-source-label,
.interactive-polygon-target-label,
.interactive-polygon-guide-label,
.interactive-polygon-axis-label,
.interactive-polygon-center-label {
    paint-order: stroke;
    stroke: var(--surface-1);
    stroke-width: 5px;
    stroke-linejoin: round;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 800;
}

.interactive-polygon-source-label {
    fill: var(--interactive-source);
}

.interactive-polygon-target-shape {
    fill: rgba(37, 99, 235, 0.13);
    stroke: var(--interactive-target);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

polyline.interactive-polygon-target-shape {
    fill: none;
}

.interactive-polygon-target-point {
    fill: var(--interactive-target);
    stroke: #dbeafe;
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
}

.interactive-polygon-target-label {
    fill: #1d4ed8;
}

.interactive-polygon-guide-line {
    stroke: var(--interactive-guide);
    stroke-width: 4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.interactive-polygon-guide-arrow,
.interactive-polygon-guide-point {
    fill: var(--interactive-guide);
}

.interactive-polygon-guide-point {
    stroke: #ffe4e6;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.interactive-polygon-guide-label {
    fill: #be123c;
}

.interactive-polygon-axis-line {
    stroke: var(--interactive-axis);
    stroke-width: 4;
    stroke-dasharray: 12 8;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.interactive-polygon-axis-label {
    fill: var(--interactive-axis);
}

.interactive-polygon-center-point {
    fill: var(--interactive-axis);
    stroke: var(--surface-1);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.interactive-polygon-center-label {
    fill: var(--interactive-axis);
}

.interactive-polygon-keyboard-cursor {
    fill: rgba(37, 99, 235, 0.12);
    stroke: var(--interactive-target);
    stroke-width: 3;
    stroke-dasharray: 5 4;
    vector-effect: non-scaling-stroke;
}

.interactive-polygon-status {
    min-height: 1.5rem;
    color: var(--text-main);
    font-weight: 700;
}

.interactive-polygon-tools,
.interactive-polygon-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.interactive-polygon-tools {
    flex: 0 0 auto;
}

.interactive-polygon-undo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    color: var(--text-main);
    background: var(--surface-1);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease,
                background 0.18s ease, transform 0.18s ease;
}

.interactive-polygon-undo:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-2);
    transform: translateY(-1px);
}

.interactive-polygon-undo:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

.interactive-polygon-undo svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.interactive-polygon-actions {
    margin-top: 0;
}

.interactive-polygon button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
}

.interactive-polygon-error .interactive-polygon-canvas-shell,
.interactive-polygon-error .interactive-polygon-tools,
.interactive-polygon-error .interactive-polygon-actions {
    display: none;
}

body.dark-mode .interactive-polygon,
body.dark-mode .interactive-polygon-correction {
    --interactive-grid: #475569;
    --interactive-dot: #64748b;
    --interactive-source: #e2e8f0;
    --interactive-target: #60a5fa;
    --interactive-guide: #fb7185;
    --interactive-axis: #c4b5fd;
}

body.dark-mode .interactive-polygon-progress {
    border-color: #1e40af;
    color: #bfdbfe;
    background: rgba(30, 64, 175, 0.25);
}

body.dark-mode .interactive-polygon-canvas-shell {
    background:
        radial-gradient(circle at 20% 0%, rgba(96, 165, 250, 0.1), transparent 32%),
        var(--surface-2);
}

body.dark-mode .interactive-polygon-source-label,
body.dark-mode .interactive-polygon-target-label,
body.dark-mode .interactive-polygon-guide-label,
body.dark-mode .interactive-polygon-axis-label,
body.dark-mode .interactive-polygon-center-label {
    stroke: var(--surface-1);
}

.interactive-polygon-correction {
  margin-top: 1rem;
}

.interactive-polygon-correction-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.interactive-polygon-correction-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
}

.interactive-polygon-correction-legend span::before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  vertical-align: -0.05rem;
}

.interactive-polygon-legend-student::before {
  background: #dc2626;
}

.interactive-polygon-legend-expected::before {
  background: #16a34a;
}

.interactive-polygon-correction-canvas {
  cursor: default;
  touch-action: auto;
}

.interactive-polygon-correction-student-shape {
  fill: rgba(220, 38, 38, 0.08);
  stroke: #dc2626;
  stroke-width: 4;
  stroke-dasharray: 10 7;
}

.interactive-polygon-correction-student-point {
  fill: #ffffff;
  stroke: #dc2626;
  stroke-width: 4;
}

.interactive-polygon-correction-student-label {
  fill: #b91c1c;
  font-size: 18px;
  font-weight: 800;
}

.interactive-polygon-correction-expected-shape {
  fill: rgba(22, 163, 74, 0.14);
  stroke: #16a34a;
  stroke-width: 4;
}

.interactive-polygon-correction-expected-point {
  fill: #ffffff;
  stroke: #16a34a;
  stroke-width: 4;
}

.interactive-polygon-correction-expected-label {
  fill: #15803d;
  font-size: 18px;
  font-weight: 800;
}

.interactive-polygon-correction-values {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-size: 0.94rem;
}

.interactive-polygon-correction-values p {
  margin: 0;
}

body.dark-mode .interactive-polygon-correction-student-point,
body.dark-mode .interactive-polygon-correction-expected-point {
  fill: #111827;
}

body.dark-mode .interactive-polygon-correction-student-label {
  fill: #fca5a5;
}

body.dark-mode .interactive-polygon-correction-expected-label {
  fill: #86efac;
}

@media (max-width: 700px) {
  .interactive-polygon-correction-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media print {
  .interactive-polygon-correction .interactive-polygon-canvas-shell {
    max-width: 17cm;
    margin-inline: auto;
    break-inside: avoid;
  }
}

body.dark-mode .interactive-polygon-target-label {
    fill: #93c5fd;
}

body.dark-mode .interactive-polygon-guide-label {
    fill: #fda4af;
}

@media (max-width: 700px) {
    .interactive-polygon-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .interactive-polygon-footer {
        align-items: center;
    }

    .interactive-polygon-canvas-shell {
        border-radius: 15px;
    }

    .interactive-polygon-actions,
    .interactive-polygon-actions .action-btn {
        width: 100%;
    }
}
.exercise-geometry-figure {
    width: min(100%, 340px);
    margin: 1rem auto;
    color: var(--text-main);
}

.exercise-geometry-figure svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.exercise-geometry-figure text {
    fill: currentColor;
    stroke: var(--card-bg);
    stroke-width: 4px;
    stroke-linejoin: round;
    paint-order: stroke fill;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.exercise-geometry-figure .exercise-geometry-note {
    font-size: 13px;
    font-weight: 600;
}

.exercise-geometry-caption {
    margin: 0.45rem 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.3;
    text-align: center;
}

.angle-calculation-figure {
    width: min(100%, 480px);
}

.angle-calculation-figure .angle-mark text {
    font-size: 21px;
}

.angle-calculation-figure .angle-vertex {
    font-size: 18px;
}

.answer-unit-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.answer-unit-field .exercise-answer-input {
    flex: 1;
    min-width: 0;
}

.answer-unit {
    flex-shrink: 0;
    font-weight: 600;
}

.missing-length-figure {
    width: min(100%, 480px);
}

.missing-length-figure text {
    font-size: 22px;
    stroke-width: 2px;
    font-weight: 600;
}

.coordinate-plane-figure {
    width: min(100%, 480px);
}

.coordinate-plane-figure text {
    font-size: 17px;
    stroke-width: 2px;
    font-weight: 600;
}

.coordinate-plane-figure .plane-point-name {
    font-size: 20px;
    font-weight: 700;
}

@media (max-width: 420px) {
    .exercise-geometry-figure {
        width: 100%;
    }
}

.classic-error-illustration svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}