/* ===== MATHS ACADEMY — Charte graphique ===== */
@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');

/* Exposants/indices MathJax agrandis (trop petits par défaut : 70.7% / 50%) pour rester lisibles */
mjx-container [size="s"]  { font-size: 85% !important; }
mjx-container [size="ss"] { font-size: 65% !important; }

:root {
  --violet:       #A57EB2;
  --violet-dark:  #7A5A8A;
  --violet-light: #C4A0D4;
  --violet-pale:  #F7F3FA;
  --violet-mid:   #E8DCF0;
  --gold:         #D4A847;
  --gold-light:   #F7E9C0;
  --green:        #2E9E6B;
  --green-light:  #D4F4E5;
  --orange:       #E07B39;
  --orange-light: #FDE8D4;
  --red:          #C0392B;
  --red-light:    #FADBD8;
  --gray-100:     #F8F9FA;
  --gray-200:     #E9ECEF;
  --gray-400:     #ADB5BD;
  --gray-600:     #6C757D;
  --gray-800:     #5E5E5E;
  --text-dark:    #343A40;
  --white:        #FFFFFF;
  --shadow-sm:    0 2px 8px rgba(107,63,160,0.12);
  --shadow-md:    0 4px 20px rgba(107,63,160,0.18);
  --shadow-lg:    0 8px 40px rgba(107,63,160,0.22);
  --radius:       14px;
  --radius-sm:    8px;
}

/* Sur iPad/mobile, WebKit teinte brièvement tout élément tapé (boutons QCM,
   Vérifier, Corriger cette étape...) d'un flash bleu translucide par défaut —
   visible uniquement dans les onglets Exercices car ce sont les seuls à
   contenir des éléments cliquables (Rappel/Méthode sont en lecture seule). */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

sup {
  font-size: 0.65em;
  vertical-align: 0.35em;
  line-height: 1;
}

body {
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 14px;
  background: var(--white);
  color: var(--gray-800);
  min-height: 100vh;
}

/* ===== TOPBAR ===== */
.topbar {
  background: white;
  color: var(--violet);
  padding: 0 24px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 0 2px 8px rgba(165,126,178,0.15);
  border-bottom: 2px solid var(--violet-mid);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-left { display: none; }

.topbar-logo {
  position: absolute;
  left: 50%;                 /* centré sur toute la largeur (plus de sidebar) */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}
.topbar-logo img {
  height: 50px;
  width: auto;
  display: block;
}
.topbar-logo .brand {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--violet);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  justify-content: flex-end;
}

.topbar-logo span { color: var(--violet); }

.topbar-nav { display: flex; align-items: center; gap: 24px; }

.topbar-nav a {
  color: var(--gray-600);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s;
}

.topbar-nav a:hover, .topbar-nav a.active { color: var(--violet); }

.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--violet-light);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: white;
}

/* ===== PAGES ===== */
.page { display: none; }
.page.active { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ===== AUTH PAGES ===== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--violet-dark) 0%, var(--violet) 60%, var(--violet-light) 100%);
  padding: 24px;
}

.auth-card {
  background: white;
  border-radius: 20px;
  padding: 48px 40px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
}

.auth-logo {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo h1 {
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--violet-dark);
}

.auth-logo h1 span { color: var(--gold); }

.auth-logo p {
  color: var(--gray-600);
  font-size: 14px;
  margin-top: 6px;
}

.auth-tabs {
  display: flex;
  background: var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 28px;
}

.auth-tab {
  flex: 1;
  padding: 9px;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--gray-600);
  transition: all .2s;
  border: none;
  background: none;
}

.auth-tab.active {
  background: white;
  color: var(--violet-dark);
  box-shadow: var(--shadow-sm);
}

.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 7px;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  transition: border-color .2s;
  outline: none;
}

.form-group input:focus { border-color: var(--violet); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  cursor: pointer;
  transition: all .2s;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--violet);
  color: white;
  width: 100%;
  padding: 14px;
}

.btn-primary:hover { background: var(--violet-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-outline {
  background: transparent;
  border: 2px solid var(--violet);
  color: var(--violet);
}

.btn-outline:hover { background: var(--violet-pale); }

.btn-sm { padding: 8px 16px; font-size: 13px; }

.auth-link {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--gray-600);
}

.auth-link a { color: var(--violet); font-weight: 600; cursor: pointer; }

/* ===== ACCUEIL ===== */
.home-hero {
  background: white;
  border-bottom: 2px solid var(--violet-mid);
  padding: 48px 40px;
  text-align: center;
}

.home-hero h2 {
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--violet);
  margin-bottom: 8px;
}

.home-hero p { color: var(--gray-600); font-size: 16px; }

.home-content { padding: 16px 40px; max-width: 1200px; margin: 0 auto; }

.section-title {
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--violet-dark);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--violet-mid);
  border-radius: 2px;
}

/* ===== NIVEAUX CARDS ===== */
.levels-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.levels-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.level-card {
  background: white;
  border-radius: var(--radius);
  padding: 9px 14px;
  text-align: left;
  cursor: pointer;
  transition: all .25s;
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Rangée haute (réveil + nom + note) : centrée comme avant le passage en
   colonne — la barre de progression (ajoutée en dessous, cf. .level-card
   .progress-bar) a besoin que la carte devienne flex-column. */
.level-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Réveil (maîtrise) et note agrégés (posés en JS par _renderLevelMasteryIcons/
   _renderHomeResourceMasteryIcons, cf. js/dashboard.js) : espace un peu plus
   large réveil↔nom et nom↔note que le reste. */
.level-card .mastery-icon { margin-right: 6px; }
.level-card .app-card-note { margin-left: 6px; }

/* Barre de progression (ajoutée en JS par _renderLevelMasteryIcons/
   _renderHomeResourceMasteryIcons, demande Arnaud 06/08/2026 : même barre que
   sur la page Niveau — Chapitres) — réutilise .progress-bar/.progress-fill
   telles quelles, juste un texte plus petit et centré pour tenir dans une
   carte plus compacte qu'une .chapter-card. */
.level-card .progress-bar { margin-top: 4px; }
.level-card .chapter-progress-label { text-align: center; margin-top: 3px; font-size: 11px; }

.level-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--violet-light);
}

.level-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--violet-dark);
  margin-bottom: 4px;
}

.level-card p {
  font-size: 14px;
  color: var(--gray-600);
}

/* ===== RECENT ACTIVITY ===== */
.recent-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.recent-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: white;
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid transparent;
  flex: 1 1 0;
  min-width: 200px;
  transition: all .2s;
}
.recent-item.clickable { cursor: pointer; }
.recent-item.clickable:hover { border-color: var(--violet-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.recent-item .recent-title { font-size: 14px; font-weight: 600; color: var(--violet-dark); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-item .recent-pct { font-weight: 700; flex-shrink: 0; }

.activity-card {
  background: white;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.activity-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--violet-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.activity-info h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.activity-info p { font-size: 14px; color: var(--gray-600); }

.score-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
}

.score-green { background: var(--green-light); color: var(--green); }
.score-orange { background: var(--orange-light); color: var(--orange); }
.score-red { background: var(--red-light); color: var(--red); }

/* ===== CHAPITRE LIST ===== */
.chapter-page { padding: 32px 40px; max-width: 1200px; margin: 0 auto; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 24px;
}

.breadcrumb a { color: var(--violet); text-decoration: none; font-weight: 500; cursor: pointer; }
.breadcrumb span { color: var(--gray-400); }

.chapters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.chapter-card {
  background: white;
  border-radius: var(--radius);
  padding: 22px;
  cursor: pointer;
  transition: all .25s;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--violet-light);
}

.chapter-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-left-color: var(--violet);
}

.chapter-card h3 { font-size: 15px; font-weight: 600; color: var(--violet-dark); margin-bottom: 8px; }

.chapter-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--gray-600);
  margin-top: 10px;
}

/* Réveil + note de chapitre : un seul bloc insécable pour que flex-wrap les
   fasse toujours passer à la ligne ensemble, jamais l'un sans l'autre. */
.chapter-mastery-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.progress-bar {
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet-light), var(--violet));
  border-radius: 3px;
  transition: width .4s;
}

.chapter-progress-label {
  font-size: 12px;
  color: var(--gray-600);
  margin-top: 6px;
}

/* ===== COMPETENCES ===== */
.competences-page { padding: 32px 40px; max-width: 900px; margin: 0 auto; }

.competence-list { display: flex; flex-direction: column; gap: 10px; }

.competence-item {
  background: white;
  border-radius: var(--radius);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all .2s;
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
}

.competence-item:hover {
  border-color: var(--violet-light);
  box-shadow: var(--shadow-md);
}

.competence-left { display: flex; align-items: center; gap: 14px; }

.comp-number {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--violet-pale);
  color: var(--violet);
  font-weight: 700;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.comp-name { font-size: 15px; font-weight: 500; }

.comp-badges { display: flex; gap: 6px; align-items: center; }

.badge-app {
  background: var(--gold-light);
  color: #8B6914;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
}

.badge-done { background: var(--green-light); color: var(--green); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.badge-todo { background: var(--gray-200); color: var(--gray-600); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.badge-travaux { background: #ef8a00; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }

/* ===== ICÔNE DE MAÎTRISE (compétences + portail Apps) ===== */
.mastery-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; margin-left: 2px; }
.app-card .mastery-icon { margin: 0 6px 0 0; }
.app-card .app-card-note { display: inline-block; margin: 0 0 0 6px; font-size: 11px; }
.sidebar-item.view-eleve-active { background: #fff3e0; color: #c2410c; font-weight: 700; }
.sidebar-item.view-eleve-active .s-icon { filter: none; }

/* ===== EXERCICE ===== */
.exercice-page { padding: 32px 40px; max-width: 800px; margin: 0 auto; }

.exercice-header {
  background: white;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.exercice-header h2 {
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 20px;
  color: var(--violet-dark);
}

.timer {
  background: var(--violet-pale);
  color: var(--violet);
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.exercice-card {
  background: white;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.exercice-card h3 {
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 18px;
  color: var(--gray-800);
  margin-bottom: 20px;
  line-height: 1.5;
}

.answer-area { margin-top: 20px; }

.answer-input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  outline: none;
  transition: border-color .2s;
}

.answer-input:focus { border-color: var(--violet); }

.btn-validate {
  background: var(--violet);
  color: white;
  padding: 13px 32px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  margin-top: 16px;
  transition: all .2s;
}

.btn-validate:hover { background: var(--violet-dark); transform: translateY(-1px); }

.correction-block {
  background: var(--green-light);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 20px;
  display: none;
}

.correction-block.show { display: block; }
.correction-block.wrong { background: var(--red-light); border-color: var(--red); }

.correction-block h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.correction-block.wrong h4 { color: var(--red); }

.correction-block p { font-size: 14px; line-height: 1.7; color: var(--gray-800); }

.pdf-viewer {
  width: 100%;
  height: 600px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  font-size: 15px;
  flex-direction: column;
  gap: 12px;
}

.pdf-viewer .pdf-icon { font-size: 48px; }

/* ===== DASHBOARD ===== */
.dashboard-page { padding: 32px 40px; max-width: 1200px; margin: 0 auto; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.stat-card .stat-value {
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--violet);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: 13px;
  color: var(--gray-600);
  margin-top: 6px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.dash-card {
  background: white;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.dash-card h3 {
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--violet-dark);
  margin-bottom: 18px;
}

/* Grille compétences */
.comp-grid-container { overflow-x: auto; }

.comp-grid-header {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  padding-left: 120px;
}

.comp-grid-header span {
  width: 28px;
  text-align: center;
  font-size: 10px;
  color: var(--gray-600);
  font-weight: 600;
}

.comp-grid-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.comp-grid-label {
  width: 116px;
  font-size: 11px;
  color: var(--gray-800);
  text-align: right;
  padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comp-cell {
  width: 28px; height: 28px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.cell-green  { background: var(--green-light); color: var(--green); }
.cell-orange { background: var(--orange-light); color: var(--orange); }
.cell-red    { background: var(--red-light); color: var(--red); }
.cell-empty  { background: var(--gray-200); color: transparent; }

/* Historique */
.history-list { display: flex; flex-direction: column; gap: 10px; }

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
}

.history-left h4 { font-size: 14px; font-weight: 600; }
.history-left p  { font-size: 14px; color: var(--gray-600); margin-top: 2px; }
.history-score   { font-size: 14px; font-weight: 700; color: var(--green); }

/* Graph simplifié */
.mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100px;
  padding: 0 4px;
}

.mini-bar {
  flex: 1;
  background: var(--violet-mid);
  border-radius: 4px 4px 0 0;
  transition: background .2s;
  position: relative;
  cursor: pointer;
}

.mini-bar:hover { background: var(--violet-light); }

.mini-bar-label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--gray-600);
  white-space: nowrap;
}

/* ===== APPS PAGE ===== */
.apps-page { padding: 32px 40px; max-width: 1200px; margin: 0 auto; }

.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.app-card {
  background: white;
  border-radius: var(--radius);
  padding: 22px;
  cursor: pointer;
  transition: all .25s;
  box-shadow: var(--shadow-sm);
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
}

.app-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.app-card .app-icon { font-size: 42px; margin-bottom: 12px; display: block; }
.app-card h3 { font-size: 14px; font-weight: 600; color: var(--violet-dark); margin-bottom: 6px; }
.app-card p  { font-size: 14px; color: var(--gray-600); }

/* ===== RESOURCES PAGE ===== */
.resources-page { padding: 32px 40px; max-width: 1200px; margin: 0 auto; }

.resources-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.res-tab {
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--gray-200);
  background: white;
  color: var(--gray-600);
  transition: all .2s;
}

.res-tab.active, .res-tab:hover {
  border-color: var(--violet);
  color: var(--violet);
  background: var(--violet-pale);
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.resource-card {
  background: white;
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: all .25s;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.resource-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.resource-type-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.icon-pdf   { background: #FFE8E8; }
.icon-map   { background: #E8F8F5; }
.icon-flash { background: #FFF3E0; }

.resource-info h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.resource-info p  { font-size: 14px; color: var(--gray-600); }

/* ===== SIDEBAR (desktop) ===== */
.app-layout {
  display: flex;
  min-height: calc(100vh - 70px);
}

.sidebar {
  width: 240px;
  background: white;
  border-right: 1px solid var(--gray-200);
  padding: 24px 0;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar-section { margin-bottom: 8px; }

.sidebar-label {
  padding: 6px 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar-item {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700, #495057);
  cursor: pointer;
  transition: all .2s;
  border-right: 3px solid transparent;
}

.sidebar-item:hover { background: var(--violet-pale); color: var(--violet); }
.sidebar-item.active { background: var(--violet-pale); color: var(--violet); border-right-color: var(--violet); font-weight: 600; }

.sidebar-item .s-icon { display: none; }

.main-content { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }

/* ===== EN-TÊTE + ONGLETS DE NAVIGATION ===== */
.nav-header {
  padding: 12px 40px 0;
  border-bottom: 1px solid var(--gray-200);
  background: white;
  text-align: center;
  flex-shrink: 0;
}
.nav-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: var(--violet);
  margin: 0 0 12px;
}
.nav-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.nav-tab {
  display: inline-block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-600, #6c757d);
  cursor: pointer;
  background: transparent;
  border: none;
  border-right: none;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  transition: all .2s;
  white-space: nowrap;
}
.nav-tab:hover { background: var(--violet-pale); color: var(--violet); border-right-color: transparent; }
.nav-tab.active {
  background: transparent;
  color: var(--violet);
  border-right-color: transparent;
  border-bottom-color: var(--violet);
  font-weight: 700;
}
.nav-tab .s-icon { display: inline; }

/* Onglet "Aide" : bascule directement les infos-bulles (plus de menu
   déroulant depuis le 26/07/2026 — Visite guidée et F.A.Q supprimées).
   Grisé = désactivées, coloré = activées (cf. aideToggleInfobulles(),
   js/app.js). */
#aide-toggle-btn { color: var(--gray-400); }
#aide-toggle-btn:hover { background: var(--violet-pale); color: var(--violet); }
#aide-toggle-btn.aide-toggle-on { color: var(--violet); font-weight: 700; }

/* ===== INFOS-BULLES (aide contextuelle au survol, js/app.js) ===== */
.infobulle-tip {
  display: none;
  position: fixed;
  z-index: 9999;
  max-width: 260px;
  padding: 8px 12px;
  background: var(--violet-light);
  color: white;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

/* ===== MODAL ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay.show { display: flex; }

.modal {
  background: white;
  border-radius: 20px;
  padding: 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.modal h3 {
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 20px;
  color: var(--violet-dark);
  margin-bottom: 16px;
}

.modal p { font-size: 14px; color: var(--gray-600); line-height: 1.7; margin-bottom: 20px; }

.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }

/* ===== UTILS ===== */
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--violet-pale);
  color: var(--violet);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

hr.section-sep {
  border: none;
  border-top: 2px solid var(--gray-200);
  margin: 32px 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .topbar { padding: 0 16px; }
  .topbar-logo { position: static; transform: none; left: auto; margin: 0 auto; }
  .topbar-nav { display: none; }
  .topbar-logo { font-size: 18px; justify-content: flex-start; padding-left: 16px; }
  #user-name { display: none; }
  .home-content, .chapter-page, .competences-page,
  .exercice-page, .dashboard-page, .apps-page, .resources-page { padding: 20px 16px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .levels-grid { grid-template-columns: repeat(2, 1fr); }
  .sidebar { display: none; }
}

/* =============================================
   PAGE FICHE
   ============================================= */
.fiche-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 40px 60px;
}

.fiche-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 18px;
}
.fiche-breadcrumb a { color: var(--violet); cursor: pointer; text-decoration: none; }
.fiche-breadcrumb a:hover { text-decoration: underline; }
.bc-sep { color: var(--gray-400); }

.fiche-titre {
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--violet);
  margin-bottom: 24px;
}

/* Onglets */
.fiche-tabs {
  display: flex;
  border-bottom: 2px solid var(--violet-mid);
  margin-bottom: 28px;
  gap: 0;
}
.fiche-tab {
  padding: 11px 26px;
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-600);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all .2s;
}
.fiche-tab:hover { color: var(--violet); }
.fiche-tab.active { color: var(--violet); border-bottom-color: var(--violet); }

.fiche-section { display: none; }
.fiche-section.active { display: block; background: var(--violet-pale); border-radius: var(--radius); padding: 20px; }

/* ── Rappel ── */
.rappel-card {
  background: transparent;
  border-radius: var(--radius);
  padding: 28px 32px;
  border-left: 4px solid var(--violet);
}
.rappel-titre {
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 16px;
  color: var(--violet);
  margin-bottom: 16px;
}
.rappel-liste {
  margin-left: 18px;
  margin-top: 10px;
  color: var(--gray-600);
  font-size: 14px;
  line-height: 1.9;
}
.violet-bold { color: var(--violet); font-weight: 700; }
.formule-box {
  background: var(--violet-pale);
  border-radius: 10px;
  padding: 18px 24px;
  margin-top: 18px;
  text-align: center;
}
.formule-note {
  font-size: 12px;
  color: var(--gray-600);
  margin-top: 10px;
}

/* ── Méthode ── */
.methode-enonce {
  background: var(--violet-pale);
  border-radius: var(--radius);
  padding: 14px 20px;
  font-size: 14px;
  color: var(--gray-600);
  font-style: italic;
  margin-bottom: 20px;
}
/* Tableaux de rappel (opérations sur les limites, etc.). Les bordures sont
   définies ici et non en inline car le HTML du rappel passe par _fmt1() qui
   supprime les « 1 » devant une lettre (« 1px » → « px » = bordure cassée). */
.fiche-optable {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.82rem;
  margin: 6px 0;
  text-align: center;
}
.fiche-optable th,
.fiche-optable td { border: 1px solid #777; padding: 6px 8px; }
.fiche-optable th { background: #ececec; }
.fiche-optable td.lbl { text-align: left; white-space: nowrap; }

.exemple-card {
  background: white;
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--violet-light);
  margin-bottom: 14px;
}
.exemple-header {
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--violet);
  margin-bottom: 12px;
}
.exemple-etape {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 6px;
  padding-left: 14px;
  border-left: 2px solid var(--violet-mid);
  line-height: 1.7;
  overflow-wrap: break-word;
}
/* Méthode composée uniquement d'une image importée du PDF : on retire les
   filets violets (carte + étape) et l'image s'étend jusqu'aux bords de la
   carte pour rester la plus grande et lisible possible. */
.exemple-card:has(.methode-image-full) { border-left: none; }
.exemple-etape:has(> .methode-image-full) {
  padding-left: 0;
  border-left: none;
  margin-left: -26px;
  margin-right: -26px;
}
/* Même traitement quand le Rappel lui-même n'est qu'une image importée du PDF. */
.rappel-card:has(> .methode-image-full) { border-left: none; }
.rappel-card > .methode-image-full {
  margin-left: -32px;
  margin-right: -32px;
}
.exemple-resultat {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--violet-mid);
  text-align: center;
  font-weight: 700;
  color: var(--violet);
  font-size: 15px;
}
/* Tableaux simples recréés en HTML dans les fiches (grilles, lois de proba,
   tableaux à double entrée). Styles en CSS pour éviter le piège _fmt1 sur les
   valeurs « 1px »/« 1rem » et pour un rendu net/responsive sans image. */
.fiche-grid-wrap { overflow-x: auto; }
.fiche-grid { border-collapse: collapse; margin: 12px auto; font-size: 15px; color: var(--gray-600); }
.fiche-grid td { border: 1px solid #cfcfcf; padding: 7px 16px; text-align: center; background: #fff; }
.fiche-grid td.gh { background: #d6d6d6; color: #fff; }
.fiche-grid td.diag { position: relative; background: #d6d6d6; padding: 0; min-width: 64px; height: 44px; }
.fiche-grid td.diag .dx { position: absolute; left: 7px; bottom: 2px; color: #fff; }
.fiche-grid td.diag .dy { position: absolute; right: 7px; top: 2px; color: #fff; }
.fiche-grid.tight td { padding: 6px 9px; font-size: 13px; }

/* Mots-clés en gras : couleur mauve de la charte (les couleurs inline,
   ex. vrai/faux des fiches de logique, restent prioritaires). */
.fiche-section strong { color: var(--violet); }
/* Disposition en deux colonnes dans une fiche (ex. h>0 | h<0) */
.fiche-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 4px;
}
.fiche-2col > div { min-width: 0; }
@media (max-width: 560px) {
  .fiche-2col { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Synthèse : exercices ouverts avec correction repliable ── */
.synthese-intro {
  font-size: 14px;
  color: var(--gray-600);
  font-style: italic;
  margin-bottom: 18px;
}
.synthese-card {
  background: white;
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--violet-light);
  margin-bottom: 14px;
}
.synthese-enonce {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--gray-700, #374151);
  line-height: 1.7;
}
.synthese-num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--violet); color: white;
  font-family: 'GFS Didot', 'Didot', Georgia, serif; font-weight: 700; font-size: 13px;
  border-radius: 50%;
}
.synthese-toggle {
  margin-top: 14px;
  background: none;
  border: 1px solid var(--violet);
  color: var(--violet);
  font-size: 13px; font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
}
.synthese-toggle:hover { background: var(--violet-pale); }
.synthese-toggle.open { background: var(--violet); color: white; }
.synthese-correction {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--violet-mid);
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.8;
}
.synthese-correction.open { display: block; }

/* ── App : carte de lancement de l'application liée ── */
.app-launch {
  background: white;
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--violet);
  text-align: center;
}
.app-launch-icon { font-size: 40px; margin-bottom: 12px; }
.app-launch-text {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 20px;
}

/* ── Vidéos : lecteurs YouTube embarqués ── */
.video-card {
  background: white;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* ratio 16:9 */
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.video-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--violet);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.video-link:hover { text-decoration: underline; }

/* ── Page Ressources ── */
.resources-page { max-width: 760px; margin: 0 auto; padding-bottom: 40px; }
.resources-subtitle {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: var(--violet);
  margin: 32px 0 14px;
}
.resources-video-card { margin-bottom: 8px; }
.resources-books {
  background: white;
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.books-heading { font-weight: 700; color: var(--gray-700, #495057); margin: 18px 0 8px; }
.books-heading:first-child { margin-top: 0; }
.books-list { margin: 0 0 4px 20px; padding: 0; line-height: 2; color: var(--gray-700, #495057); }
.books-list a { color: var(--violet); font-weight: 600; text-decoration: none; }
.books-list a:hover { text-decoration: underline; }

/* ── Ressources : playlist YouTube sous le lecteur ── */
.resources-video-row { display: flex; flex-direction: column; gap: 16px; }
.video-playlist {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
}
.playlist-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  transition: background 0.15s;
}
.playlist-item:hover { background: var(--gray-100); }
.playlist-item.active { background: var(--violet-pale); border-color: var(--violet-light); }
.playlist-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #000; }
.playlist-title { font-size: 12.5px; line-height: 1.35; color: var(--gray-700, #495057); }
.playlist-item.active .playlist-title { color: var(--violet); font-weight: 600; }

/* Solution annotée : étapes à gauche, remarques à droite (style PDF d'Arnaud) */
.fiche-annot {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 22px;
  row-gap: 8px;
  align-items: start;
  margin: 8px 0;
}
.fiche-annot .fa-note { padding-top: 0.3em; }
.fiche-annot .fa-indent { padding-left: 3.4em; }
.fiche-annot .fa-note { color: var(--gray-600); font-size: 0.9em; line-height: 1.4; }
.fiche-annot .fa-note-r { display: flex; align-items: center; gap: 8px; }
/* Encadré rouge type « remarque » du PDF */
.fiche-callout {
  color: #d32f2f;
  background: #fff;
  border: 1px solid #f1c5c5;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  padding: 8px 11px;
  font-size: 0.9em;
  line-height: 1.4;
}
/* Flèche rouge pointant vers la gauche (vers l'équation) */
.fiche-arrow-left {
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  width: 40px;
  height: 2px;
  background: #d32f2f;
}
.fiche-arrow-left::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -5px;
  border: 6px solid transparent;
  border-right-color: #d32f2f;
}
@media (max-width: 560px) {
  .fiche-annot { grid-template-columns: 1fr; row-gap: 2px; }
  .fiche-annot .fa-note { padding: 2px 0 8px 2em; }
  .fiche-annot .fa-note-r { padding-left: 2em; }
  .fiche-annot .fa-indent { padding-left: 1.6em; }
}

/* Tableau de signes (style PDF d'Arnaud) : bordure extérieure + séparateur de la
   colonne label + séparateur de ligne, sans grille interne. */
.sign-table {
  border-collapse: collapse;
  border: 1.5px solid #bbb;
  margin: 12px auto;
  max-width: 100%;
}
.sign-table td {
  padding: 7px 16px;
  text-align: center;
  white-space: nowrap;
  font-size: 0.95em;
  color: #444;
}
.sign-table tr:first-child td { border-bottom: 1.5px solid #bbb; }
.sign-table td:first-child { border-right: 1.5px solid #bbb; }
.sign-table .st-var { font-style: italic; }
.sign-table .st-sign { color: #d32f2f; font-weight: 700; font-size: 1.1em; }
.sign-table-cap { text-align: center; color: #d32f2f; font-size: 0.9em; margin: -4px 0 8px; }

/* ── Exercices ── */
.ex-progress-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.ex-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
}
.ex-progress-fill {
  height: 100%;
  background: var(--violet);
  border-radius: 4px;
  transition: width .4s ease;
  width: 0%;
}
.ex-progress-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
}

.ex-card {
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 20px 28px 16px;
  text-align: left;
  margin-bottom: 12px;
}
/* Les formules MathJax en display (\[...\]) se centrent elles-mêmes ; on
   recentre ici les images/figures de l'énoncé qui dépendaient auparavant
   du text-align:center hérité de .ex-card. */
.ex-card img, .ex-card svg { display: block; margin-left: auto; margin-right: auto; }
/* La règle ci-dessus visait les images/figures de l'énoncé, mais `svg` capte
   aussi les <svg> internes de MathJax (rendu SVG des formules \(...\)) : en
   display:block, chaque formule inline devient son propre bloc et casse le
   texte qui l'entoure sur des lignes séparées. On restaure l'inline pour ces
   svg-là uniquement (sélecteur plus spécifique, pas besoin de !important). */
.ex-card mjx-container svg { display: inline; margin: 0; }
.ex-question { font-size: 20px; color: var(--gray-800); }
.ex-consigne { font-size: 14px; color: var(--gray-600); margin-top: 10px; }

/* Bouton QCM générique (window._qcmOpts/selectQCM, cf. fiche-engine.js) —
   utilisé par de nombreuses fiches pour un choix à N options. Historiquement
   injecté depuis js/fiches/1re-spe-derivation-02.js (chargé une fois pour
   toutes les pages) ; déplacé ici le 06/08/2026 dans le cadre de
   l'uniformisation des onglets Exercices, pour que ce ne soit plus la
   responsabilité d'un fichier de contenu arbitraire de fournir un style
   partagé par tout le site. Valeurs INCHANGÉES (aucun impact visuel). */
.qcm-btn {
  background: #fff;
  color: #7A5A8A;
  border: 2px solid var(--violet);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 110px;
}
.qcm-btn.selected { background: var(--violet); color: #fff; }
.qcm-btn:hover:not(.selected) { background: #f0e8f5; }

/* Bouton de choix à état géré en JS (pas de classe .selected — la fiche
   bascule elle-même background/borderColor/color au clic, souvent parce que
   plusieurs groupes de boutons coexistent sur le même exercice, cf. piège
   "un seul groupe QCM à la fois" documenté dans la skill mathelys-comp).
   Base extraite le 06/08/2026 (uniformisation des onglets Exercices) de
   blocs de style identiques copiés-collés dans des dizaines de fiches —
   valeurs INCHANGÉES par variante, juste centralisées. Chaque variante de
   taille déjà repérée sur le site devient un modificateur ici au fil des
   lots migrés, plutôt que des classes non reliées entre elles. */
.ex-choice-btn, .ex-choice-btn-sm, .ex-choice-btn-xs, .ex-choice-btn-md, .ex-choice-btn-lg, .ex-choice-btn-xxs, .ex-choice-btn-wide140, .ex-choice-btn-110, .ex-choice-btn-100, .ex-choice-btn-85-100, .ex-choice-btn-90, .ex-choice-btn-16-140, .ex-choice-btn-120, .ex-choice-btn-14-110, .ex-choice-btn-14-100, .ex-choice-btn-85-120, .ex-choice-btn-88-100, .ex-choice-btn-20-80, .ex-choice-btn-28-80, .ex-choice-btn-22-90, .ex-choice-btn-22-70, .ex-choice-btn-20-70, .ex-choice-btn-20-120, .ex-choice-btn-18-70, .ex-choice-btn-16-80, .ex-choice-btn-16-120, .ex-choice-btn-16-90, .ex-choice-btn-16-120-85, .ex-choice-btn-16-110, .ex-choice-btn-14-160, .ex-choice-btn-14-130, .ex-choice-btn-14-110-80 {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: center;
}
.ex-choice-btn, .ex-choice-btn-sm, .ex-choice-btn-xs, .ex-choice-btn-110, .ex-choice-btn-100, .ex-choice-btn-90, .ex-choice-btn-16-140, .ex-choice-btn-120, .ex-choice-btn-14-110, .ex-choice-btn-14-100, .ex-choice-btn-28-80 { font-size: 0.9rem; }
/* 27 fiches Tle Techno (log-dec/pc/sa/sg/va), migrées le 06/08/2026. */
.ex-choice-btn { padding: 10px 20px; min-width: 140px; }
/* 18 fiches Tle Comp./Tle Expertes (lois-dens/complexgeo/complextrigo/markov),
   migrées le 06/08/2026. */
.ex-choice-btn-sm { padding: 10px 18px; min-width: 80px; }
/* 12 fiches Tle Expertes (complexgeo/markov), migrées le 06/08/2026. */
.ex-choice-btn-xs { padding: 10px 18px; min-width: 70px; }
/* 9 fiches Tle Expertes (complextrigo/complexutil), migrées le 06/08/2026.
   ⚠ tle-exp-complextrigo-06.js a une variante quasi identique (+
   line-height:1.6) laissée de côté volontairement pour ce lot — à traiter
   séparément plutôt que de changer ce composant partagé sans vérifier
   l'effet sur les 9 fiches ci-dessus. */
.ex-choice-btn-md { padding: 10px 16px; font-size: 0.85rem; min-width: 100px; }
/* 7 fiches Tle Comp. (lois-dens/lois-disc), migrées le 06/08/2026. */
.ex-choice-btn-lg { padding: 10px 22px; font-size: 0.95rem; min-width: 70px; }
/* 9 fiches Tle Expertes (complexutil/eqpoly), migrées le 06/08/2026. */
.ex-choice-btn-xxs { padding: 10px 14px; font-size: 0.82rem; min-width: 90px; }
/* 6 fiches Tle Techno (log-dec/fct-inverse/exp-base-a), migrées le 07/08/2026. */
.ex-choice-btn-wide140 { padding: 10px 20px; font-size: 0.95rem; min-width: 140px; }
/* 5 fiches (2de systemes/tle-tech sa/exp-base-a), migrées le 07/08/2026. */
.ex-choice-btn-110 { padding: 10px 16px; min-width: 110px; }
/* 5 fiches (2de ensembles-et-nombres/systemes, tle-exp complextrigo), migrées le 07/08/2026. */
.ex-choice-btn-100 { padding: 10px 16px; min-width: 100px; }
/* 4 fiches Tle Spé (loi-bin/rp), migrées le 07/08/2026. */
.ex-choice-btn-85-100 { padding: 9px 14px; font-size: 0.85rem; min-width: 100px; }
/* 4 fiches Tle Expertes (arith/complextrigo), migrées le 07/08/2026. */
.ex-choice-btn-90 { padding: 10px 18px; min-width: 90px; }
/* 4 fiches 2de/Tle Techno (eq-droites/sg), migrées le 07/08/2026. */
.ex-choice-btn-16-140 { padding: 10px 16px; min-width: 140px; }
/* 4 fiches 2de Info chiffrée, migrées le 07/08/2026. */
.ex-choice-btn-120 { padding: 10px 14px; min-width: 120px; }
/* 4 fiches 2de (equations/inequations), migrées le 07/08/2026. */
.ex-choice-btn-14-110 { padding: 10px 14px; min-width: 110px; }
/* 4 fiches 2de (ensembles-et-nombres/stats), migrées le 07/08/2026. */
.ex-choice-btn-14-100 { padding: 10px 14px; min-width: 100px; }
/* 3 fiches 2de (ensembles-et-nombres/inequations/info-chiffree), migrées le 07/08/2026. */
.ex-choice-btn-85-120 { padding: 10px 14px; font-size: 0.85rem; min-width: 120px; }
/* 2 fiches Tle Spé Primitives (prim-03/04), migrées le 08/08/2026. */
.ex-choice-btn-88-100 { padding: 9px 14px; font-size: 0.88rem; min-width: 100px; }
/* 2 fiches 2de Vecteurs et coordonnées (vecteurs-coords-03/04), migrées le
   09/08/2026. */
.ex-choice-btn-20-80 { padding: 12px 20px; font-size: 1.0rem; min-width: 80px; }
/* 2 fiches Tle Expertes Complexes-géo (complexgeo-06/10), migrées le
   09/08/2026 — même famille que .ex-choice-btn-28-80 (font 0.9rem). */
.ex-choice-btn-28-80 { padding: 10px 28px; min-width: 80px; }
/* 2 fiches Tle Comp. Suites (suites-01/08), migrées le 09/08/2026. */
.ex-choice-btn-22-90 { padding: 10px 22px; font-size: 0.92rem; min-width: 90px; }
/* 2 fiches Tle Comp. Suites (suites-02/11), migrées le 09/08/2026. */
.ex-choice-btn-22-70 { padding: 10px 22px; font-size: 0.92rem; min-width: 70px; }
/* 2 fiches Tle Comp. (limite-04/ln-07), migrées le 09/08/2026. */
.ex-choice-btn-20-70 { padding: 10px 20px; font-size: 0.95rem; min-width: 70px; }
/* 2 fiches Tle Techno (exp-base-a-03/05), migrées le 09/08/2026. */
.ex-choice-btn-20-120 { padding: 10px 20px; font-size: 0.95rem; min-width: 120px; }
/* 2 fiches Tle Comp. Intégration (integration-07/08), migrées le 09/08/2026. */
.ex-choice-btn-18-70 { padding: 10px 18px; font-size: 0.95rem; min-width: 70px; }
/* 2 fiches 2de Équations de droites (eq-droites-03/08), migrées le 09/08/2026. */
.ex-choice-btn-16-80 { padding: 10px 16px; font-size: 0.95rem; min-width: 80px; }
/* 2 fiches 2de Équations de droites (eq-droites-01/02), migrées le 09/08/2026. */
.ex-choice-btn-16-120 { padding: 10px 16px; font-size: 0.95rem; min-width: 120px; }
/* 2 fiches (tle-comp-limite-06, tle-tech-exp-base-a-05), migrées le 09/08/2026. */
.ex-choice-btn-16-90 { padding: 10px 16px; font-size: 0.88rem; min-width: 90px; }
/* 2 fiches Tle Expertes Complexes-trigo (complextrigo-04/12), migrées le
   09/08/2026 — nommage avec suffixe font-size pour éviter la collision avec
   .ex-choice-btn-16-120 (même padding/min-width, font-size 0.95rem). */
.ex-choice-btn-16-120-85 { padding: 10px 16px; font-size: 0.85rem; min-width: 120px; }
/* 2 fiches Tle Expertes Complexes-trigo (complextrigo-09/11), migrées le
   09/08/2026. */
.ex-choice-btn-16-110 { padding: 10px 16px; font-size: 0.85rem; min-width: 110px; }
/* 2 fiches 2de (fct-ref-02, fct-gen-08), migrées le 09/08/2026. */
.ex-choice-btn-14-160 { padding: 10px 14px; font-size: 0.9rem; min-width: 160px; }
/* 2 fiches 2de Info chiffrée (info-chiffree-01/04), migrées le 09/08/2026. */
.ex-choice-btn-14-130 { padding: 10px 14px; font-size: 0.9rem; min-width: 130px; }
/* 2 fiches 2de Inéquations (inequations-03/04), migrées le 09/08/2026 —
   nommage avec suffixe font-size pour éviter la collision avec
   .ex-choice-btn-14-110 (même padding/min-width, font-size 0.9rem par
   défaut). */
.ex-choice-btn-14-110-80 { padding: 10px 14px; font-size: 0.8rem; min-width: 110px; }
/* 2 fiches Tle Techno exp-base-a-01/06, migrées le 07/08/2026 — même famille
   que .ex-choice-btn-wide140 mais SANS text-align:center dans l'original,
   comme .ex-choice-btn-wide90 plus bas : hors du groupe partagé exprès. */
.ex-choice-btn-wide140-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 10px 20px;
  min-width: 140px;
}
/* 3 fiches Tle Comp./Tle Spé (lois-disc/loi-bin), migrées le 07/08/2026 —
   même famille, pas de text-align:center dans l'original. */
.ex-choice-btn-22-70-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 10px 22px;
  min-width: 70px;
}
/* 4 fiches (2de ensembles-et-nombres, tle-spe suites-lim), migrées le
   07/08/2026 — pas de text-align:center dans l'original. */
.ex-choice-btn-20-80-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 10px 20px;
  min-width: 80px;
}
/* 3 fiches 3e Calcul littéral (Somme ou Produit), migrées le 07/08/2026 —
   pas de text-align:center non plus dans l'original, hors du groupe partagé. */
.ex-choice-btn-bold {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 28px;
}
/* 3 fiches 2de (ensembles-et-nombres/fct-var/inequations, groupe <'<','=','>'>),
   migrées le 07/08/2026 — pas de min-width ni text-align dans l'original. */
.ex-choice-btn-16-8 {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 8px 16px;
}
/* 3 fiches (tle-comp-integration/tle-spe-loi-bin), migrées le 07/08/2026 —
   pas de text-align:center dans l'original. */
.ex-choice-btn-20-70-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 10px 20px;
  min-width: 70px;
}
/* 3 fiches Tle Spé Loi binomiale, migrées le 07/08/2026 — pas de
   text-align:center dans l'original. */
.ex-choice-btn-95-80-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 10px 18px;
  min-width: 80px;
}
/* 8 fiches Tle Spé Limites de suites (tle-spe-lim-*), migrées le 06/08/2026.
   ⚠ Pas de text-align:center dans le style d'origine (contrairement aux
   variantes ci-dessus) — hors du groupe partagé exprès pour ne pas
   l'ajouter silencieusement. */
.ex-choice-btn-wide90 {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 10px 20px;
  min-width: 90px;
}
/* 2 fiches Tle Spé Loi binomiale (loi-bin-01/02), migrées le 08/08/2026 —
   pas de text-align:center dans l'original. */
.ex-choice-btn-16-80-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 9px 16px;
  min-width: 80px;
}
/* 2 fiches Tle Spé Suites/limites (suites-lim-01/10), migrées le 08/08/2026 —
   pas de text-align:center dans l'original. */
.ex-choice-btn-14-90-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 9px 14px;
  min-width: 90px;
}
/* 2 fiches Tle Spé Suites/limites (suites-lim-07/08), migrées le 08/08/2026 —
   pas de text-align:center dans l'original. */
.ex-choice-btn-85-110-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 9px 14px;
  min-width: 110px;
}
/* 1 fiche 2de Ensembles et nombres (2de-ensembles-et-nombres-15, 2 occurrences),
   migrée le 08/08/2026 — pas de min-width ni text-align dans l'original. */
.ex-choice-btn-14-8 {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 8px 14px;
}
/* 1 fiche 2de Inéquations (2de-inequations-06, 2 occurrences), migrée le
   08/08/2026 — pas de min-width ni text-align dans l'original. */
.ex-choice-btn-14-8-85 {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 8px 14px;
}
/* 1 fiche 3e Arithmétique (3e-arithmetique-12, 2 occurrences), migrée le
   08/08/2026 — pas de text-align:center dans l'original. */
.ex-choice-btn-36-120-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 12px 36px;
  min-width: 120px;
}
/* 1 fiche 3e Arithmétique (3e-arithmetique-13, 2 occurrences), migrée le
   08/08/2026 — pas de text-align:center dans l'original. */
.ex-choice-btn-32-130-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 12px 32px;
  min-width: 130px;
}
/* 1 fiche 3e Arithmétique (3e-arithmetique-03, 2 occurrences), migrée le
   08/08/2026 — pas de text-align:center dans l'original. */
.ex-choice-btn-28-140-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 12px 28px;
  min-width: 140px;
}
/* 1 fiche 3e Arithmétique (3e-arithmetique-11, 2 occurrences ; attribut
   data-v="..." intercalé entre class et onclick — fix manuel, pas de
   script), migrée le 08/08/2026 — pas de text-align:center dans l'original. */
.ex-choice-btn-24-130-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 12px 24px;
  min-width: 130px;
}
/* 1 fiche Tle Comp. Lois de densité (tle-comp-lois-dens-01, 2 occurrences ;
   attribut data-val="..." intercalé entre class et onclick — fix manuel, pas
   de script), migrée le 09/08/2026 — pas de min-width ni text-align dans
   l'original. */
.ex-choice-btn-36-11-bold {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  padding: 11px 36px;
}
/* 2 fiches Tle Comp. (ln-01, integration-05), migrées le 09/08/2026 — pas de
   text-align:center dans l'original. */
.ex-choice-btn-20-60-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 10px 20px;
  min-width: 60px;
}
/* 1 fiche Tle Spé Calcul intégral (calcul-integral-03, 2 occurrences),
   migrée le 09/08/2026 — pas de min-width ni text-align dans l'original. */
.ex-choice-btn-20-10 {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 10px 20px;
}
/* 2 fiches Tle Spé Primitives (prim-01/02), migrées le 09/08/2026 — pas de
   text-align:center dans l'original. */
.ex-choice-btn-18-90-nc {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 10px 18px;
  min-width: 90px;
}

/* Variante "liste" : boutons pleine largeur, texte aligné à gauche, empilés
   verticalement (flex-direction:column côté fiche) — pour des options trop
   longues pour des puces côte à côte. 15 fiches 3e Calcul littéral, migrées
   le 06/08/2026 (2 tailles de police déjà en usage, préservées telles quelles). */
.ex-choice-btn-list, .ex-choice-btn-list-sm, .ex-choice-btn-list-xs {
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  width: 100%;
  padding: 10px 14px;
}
.ex-choice-btn-list { font-size: 0.95rem; }
.ex-choice-btn-list-sm { font-size: 0.9rem; }
/* 2 fiches Tle Expertes Markov (markov-03/10), migrées le 09/08/2026 — même
   famille "liste" (conteneur en grid 1 colonne côté fiche, pas flex-column,
   mais même mise en forme du bouton), taille de police plus petite. */
.ex-choice-btn-list-xs { font-size: 0.8rem; }

/* Menu déroulant (<select>) de réponse — 28 occurrences dans 14 fiches
   (1re Spé/2de/3e), migrées le 06/08/2026, puis 153 occurrences supplémentaires
   dans 25 fiches qui passaient par une variable JS partagée (type DER15_SEL) —
   même migration une fois la variable résolue. Restent volontairement de côté :
   quelques usages combinés à d'autres propriétés (ex. style="${VAR};width:100%"),
   à traiter séparément fiche par fiche plutôt que de risquer une valeur perdue. */
.ex-select { padding: 6px; border: 1.5px solid #ccc; border-radius: 6px; font-size: 15px; }
/* Variante avec max-width:100% (fiches à select large dans un conteneur
   flex/grid étroit) — 12 variables JS partagées (CV04_SEL, EDP9_SEL,
   INT09_SEL, L09_SEL, LD10_SEL, LN08_SEL, PD12_SEL, SN05_SEL, SV04_SEL,
   TC8_SEL, TD4_SEL, TSL11_SEL), 229 occurrences, migrées le 09/08/2026. */
.ex-select-mw { padding: 6px; border: 1.5px solid #ccc; border-radius: 6px; font-size: 15px; max-width: 100%; }
/* Variante pleine largeur en bloc (fiches Tle/1re Techno à select seul sur sa
   ligne) — 12 variables JS partagées (DER09_SEL, E09_SEL, I05_SEL, L11_SEL,
   PC04_SEL, PC09_SEL, POLY14_SEL, SA06_SEL, SG07_SEL, ST03_SEL, V09_SEL,
   VA08_SEL), 145 occurrences, migrées le 09/08/2026. */
.ex-select-block { padding: 6px; border: 1.5px solid #ccc; border-radius: 6px; font-size: 15px; max-width: 100%; display: block; width: 100%; }

/* Champs de saisie texte de réponse (<input type="text">) — même chantier
   d'uniformisation que .ex-choice-btn-*/.ex-select-*, démarré le 09/08/2026.
   Base extraite de blocs style="..." identiques copiés-collés dans des
   dizaines de fiches : border/border-radius/text-align partagés, chaque
   variante de taille ne fixe que padding/font-size/width. */
.ex-input-100-9, .ex-input-90-10, .ex-input-110-9, .ex-input-70-8, .ex-input-60-10, .ex-input-70-8-10, .ex-input-130-9, .ex-input-70-10, .ex-input-150-10, .ex-input-80-9, .ex-input-100-10 {
  border: 2px solid #ccc;
  border-radius: 8px;
  text-align: center;
}
/* 28 fiches 6e/5e (aires/angles/droites/stats/fractions/unités/proportionnalité),
   migrées le 09/08/2026. */
.ex-input-100-9 { padding: 9px; font-size: 1.1rem; width: 100px; }
/* 17 fiches 3e/1re Spé (relatifs/pythagore/fonctions/thalès/unités), migrées le 09/08/2026. */
.ex-input-90-10 { padding: 10px; font-size: 1.2rem; width: 90px; }
/* 14 fiches 6e/5e (aires/entiers/fractions/proportionnalité/unités), migrées le 09/08/2026. */
.ex-input-110-9 { padding: 9px; font-size: 1.1rem; width: 110px; }
/* 6 fiches 3e Fractions (numérateur/dénominateur, 2 occ./fiche), migrées le 09/08/2026. */
.ex-input-70-8 { padding: 8px; font-size: 1.2rem; width: 70px; }
/* 5 fiches (2de vecteurs-coords, 3e unités), migrées le 09/08/2026. */
.ex-input-60-10 { padding: 10px; font-size: 1.2rem; width: 60px; }
/* 5 fiches 5e Fractions (numérateur/dénominateur), migrées le 09/08/2026 —
   même famille que .ex-input-70-8 mais font-size différent (1rem au lieu de
   1.2rem) : suffixe -10 pour éviter la collision de nom. */
.ex-input-70-8-10 { padding: 8px; font-size: 1rem; width: 70px; }
/* 9 fiches 6e Décimaux/Entiers/Unités, migrées le 10/08/2026. */
.ex-input-130-9 { padding: 9px; font-size: 1.1rem; width: 130px; }
/* 5 fiches 3e Unités, migrées le 10/08/2026. */
.ex-input-70-10 { padding: 10px; font-size: 1.2rem; width: 70px; }
/* 7 fiches 3e Unités, migrées le 10/08/2026. */
.ex-input-150-10 { padding: 10px; font-size: 1.2rem; width: 150px; }
/* 6 fiches 5e/6e (fractions/puissances/décimaux), migrées le 10/08/2026. */
.ex-input-80-9 { padding: 9px; font-size: 1.1rem; width: 80px; }
/* 7 fiches 3e (calcul/périmètre/proportionnalité/relatifs/trigonométrie),
   migrées le 10/08/2026. */
.ex-input-100-10 { padding: 10px; font-size: 1.2rem; width: 100px; }

.ex-answer-area {
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 16px 28px;
  margin-bottom: 12px;
}

/* Input fraction */
.ex-input-frac {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.ex-a-label { font-size: 18px; font-weight: 700; color: var(--gray-600); }
.mj-radical { display:inline-flex; align-items:center; vertical-align:middle; }
.mj-radical mjx-container { margin:0 !important; }
/* Racine AU DÉNOMINATEUR d'une fraction : retire son propre trait (double
   barre moche avec le vinculum de la fraction juste au-dessus) — cf. chantier
   racines carrées du 04/07/2026. */
.mj-nobar mjx-sqrt mjx-box { border-top: none !important; padding-top: 0 !important; }
.frac-input-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.frac-input-num, .frac-input-den {
  width: 90px;
  text-align: center;
  padding: 9px 10px;
  border: 2px solid var(--violet-mid);
  border-radius: 8px;
  font-size: 17px;
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  color: var(--gray-800);
  outline: none;
  transition: border-color .2s;
}
.frac-input-num:focus, .frac-input-den:focus { border-color: var(--violet); }
.frac-input-bar { width: 90px; height: 2px; background: var(--gray-600); border-radius: 1px; }
.ex-note { font-size: 11px; color: var(--gray-400); }

.btn-valider {
  background: var(--violet);
  color: white;
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.btn-valider:hover:not(:disabled) { background: var(--violet-dark); transform: translateY(-1px); }
.btn-valider:disabled { opacity: .5; cursor: default; }

/* Feedback */
.ex-feedback { display: none; border-radius: var(--radius); padding: 16px 26px; margin-bottom: 10px; }
.ex-feedback.show { display: block; }
.ex-feedback.correct { background: #EAF7EF; border: 2px solid #2E9E6B; }
.ex-feedback.wrong   { background: var(--red-light); border: 2px solid var(--red); }
.fb-titre { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.ex-feedback.correct .fb-titre { color: #2E9E6B; }
.ex-feedback.wrong   .fb-titre { color: var(--red); }
.fb-step { font-size: 14px; color: var(--gray-800); margin-bottom: 8px; line-height: 1.75; }
.fb-correction { margin-bottom: 10px; }

.btn-suivant {
  background: white;
  color: var(--violet);
  border: 2px solid var(--violet);
  padding: 10px 26px;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  margin-top: 4px;
}
.btn-suivant:hover { background: var(--violet-pale); }

/* Résultats finaux */
.ex-results {
  background: white;
  border-radius: var(--radius);
  padding: 48px 32px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.ex-results-score { font-family: 'GFS Didot', 'Didot', Georgia, serif; font-size: 64px; font-weight: 700; line-height: 1; }
.score-vert   { color: #2E9E6B; }
.score-orange { color: var(--orange); }
.score-rouge  { color: var(--red); }
.ex-results-pct { font-size: 18px; color: var(--gray-600); margin-top: 6px; }
.ex-results-msg { font-size: 15px; color: var(--gray-600); line-height: 1.7; margin: 20px auto 28px; max-width: 480px; }

/* ===== DASHBOARD ÉLÈVE — Phase 3 ===== */

/* Onglets */
.db-tabs {
  display: flex;
  border-bottom: 2px solid var(--violet);
  gap: 2px;
  margin-bottom: 0;
}
.db-tab {
  flex: 1;
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  border: 1px solid var(--violet-mid);
  border-bottom: none;
  background: var(--gray-100);
  color: var(--gray-600);
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: background .12s, color .12s;
}
.db-tab.active { background: var(--violet); color: white; border-color: var(--violet); }
.db-tab:hover:not(.active) { background: white; color: var(--violet); }

/* Panels */
.dbp { display: none; padding-top: 1.5rem; }
.dbp.active { display: block; }

/* Table commune */
.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.db-table th {
  background: var(--violet-pale);
  color: var(--violet-dark);
  font-weight: 500;
  padding: 8px 10px;
  border: 1px solid var(--violet-mid);
  text-align: center;
  font-size: 12px;
}
.db-table td {
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  text-align: center;
  color: var(--gray-800);
}
/* ── Mes sessions : vue groupée (Date ⊃ Heure ⊃ Activité ⊃ Scores) ── */
.db-table td.db-grp-date,
.db-table td.db-grp-heure,
.db-table td.db-grp-act { vertical-align: middle; }
.db-table td.db-grp-date  { font-weight: 600; }
.db-table td.db-grp-heure { font-weight: 500; }
.db-table td.db-grp-act   { text-align: center; }
/* Couleur des lignes selon le barème sévère de la note (demande d'Arnaud du
   11/07/2026) — mêmes teintes que les badges de note ailleurs sur le site. */
.db-table td.db-grp-act.db-sev-green,  .db-table td.db-grp-score.db-sev-green  { color: var(--green); }
.db-table td.db-grp-act.db-sev-orange, .db-table td.db-grp-score.db-sev-orange { color: var(--orange); }
/* Rouge plus vif que --red (trop proche du marron pour ce texte sur fond
   blanc) — même rouge vif déjà utilisé dans les fiches (#e23b2e). */
.db-table td.db-grp-act.db-sev-red,    .db-table td.db-grp-score.db-sev-red    { color: #E23B2E; }
/* Trait plus marqué au début de chaque session (nouvelle heure) */
.db-table tr.db-grp-start > td { border-top: 2px solid var(--violet-mid); }
/* Ligne d'espacement entre deux jours */
.db-table tr.db-grp-sep td {
  border: none;
  background: transparent;
  padding: 6px 0;
}

/* État vide */
.db-empty { text-align: center; color: #888; padding: 28px 16px; font-size: 0.92rem; }

.db-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 20px;
}
.db-badge-red    { background: var(--red-light);    color: var(--red);    }
.db-badge-orange { background: var(--orange-light); color: var(--orange); }
.db-badge-green  { background: var(--green-light);  color: var(--green);  }

/* Zoom graphiques */
.db-zoom-row { display: flex; gap: 8px; margin-bottom: 1.25rem; }
.db-zoom {
  padding: 5px 16px;
  border: 1px solid var(--violet-mid);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  cursor: pointer;
  color: var(--violet);
  background: transparent;
  transition: background .12s;
}
.db-zoom.active { background: var(--violet-pale); border-color: var(--violet); }

/* ===== Onglet « Mes compétences » — tableau croisé + détail ===== */
.dbc-table {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: white;
}
.dbc-col { display: flex; flex-direction: column; min-width: 0; }
.dbc-col-head { font-size: 12px; font-weight: 500; color: var(--violet-dark); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbc-col-body { display: flex; flex-direction: column; gap: 6px; overflow-y: visible; padding-right: 2px; }
.dbc-col-body-static { }
/* Colonnes dynamiques (Catégorie/App) : hauteur bornée + ascenseur propre, pour
   ne pas faire grandir toute la carte quand une catégorie a beaucoup d'items. */
.dbc-col-body-dynamic { max-height: 280px; overflow-y: auto; }
/* Séparateur fin entre les 4 colonnes fixes (Fait/Maîtrise/Type/Niveau) et les
   2 colonnes dynamiques (Catégorie/App), qui changent selon le Type choisi. */
.dbc-col-sep { border-left: 1px solid var(--violet-mid); padding-left: 14px; margin-left: 4px; }
.dbc-col-empty { font-size: 12px; color: #999; margin: 0; }
.dbc-chip {
  padding: 8px 10px;
  border: 2px solid var(--violet-mid);
  background: #fff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #444;
  cursor: pointer;
  transition: all .15s;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
/* Colonnes dynamiques : fond mauve très clair par défaut (même teinte que le
   bouton Réinitialiser), pour les distinguer visuellement des 4 colonnes fixes. */
.dbc-col-dynamic .dbc-chip { background: var(--violet-pale); }
@media (hover: hover) { .dbc-chip:hover { border-color: var(--violet); } }
.dbc-chip.selected { border-color: #2f9e56; background: #fff; color: #1e7a3f; font-weight: 500; }
.dbc-chip .mastery-icon { margin: 0; }
/* Filtre Note (couleur du barème sévère) : contour coloré au repos, rempli
   quand sélectionné — même code couleur que les badges de note partout ailleurs. */
.dbc-chip-vert   { border-color: var(--green);  color: var(--green); }
.dbc-chip-orange { border-color: var(--orange); color: var(--orange); }
.dbc-chip-rouge  { border-color: var(--red);    color: var(--red); }
.dbc-chip-vert.selected   { background: var(--green);  border-color: var(--green);  color: #fff; }
.dbc-chip-orange.selected { background: var(--orange); border-color: var(--orange); color: #fff; }
.dbc-chip-rouge.selected  { background: var(--red);    border-color: var(--red);    color: #fff; }

.dbc-reset-btn {
  margin-top: 22px;
  padding: 7px 14px;
  border: 1.5px solid var(--violet-mid);
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  cursor: pointer;
  transition: all .15s;
}
@media (hover: hover) { .dbc-reset-btn:hover { background: var(--violet-mid); border-color: var(--violet); } }

@media (max-width: 900px) {
  .dbc-table { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dbc-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.dbc-detail { display: flex; flex-direction: column; gap: 1.25rem; }
.dbc-card {
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: white;
}
.dbc-card-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dbc-card-title { font-size: 14px; font-weight: 500; color: var(--violet-dark); }
.dbc-zoom-row { margin-bottom: 0; }
.dbc-zoom-row .db-zoom { padding: 4px 12px; font-size: 12px; }

.dbc-stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; }
.dbc-stat {
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: var(--violet-pale);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.dbc-stat-label { font-size: 13px; font-weight: 500; color: var(--violet-dark); }
.dbc-stat-value { font-size: 30px; font-weight: 700; color: var(--violet); line-height: 1.1; }
.dbc-stat-sub { font-size: 12px; color: #888; }
.dbc-stat-cta { width: 100%; }

.dbc-weakest { margin-top: 1.5rem; }
.dbc-weak-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dbc-weak-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .12s;
}
.dbc-weak-item:hover { border-color: var(--violet); background: var(--violet-pale); transform: translateY(-1px); }
.dbc-weak-name { font-size: 13px; color: var(--violet-dark); flex: 1; }
.dbc-weak-scores { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dbc-weak-score { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 20px; flex-shrink: 0; }

@media (max-width: 560px) {
  .dbc-stats-grid { grid-template-columns: 1fr; }
}

/* Grille graphiques */
.db-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.db-chart-wrap { }
/* Onglet « Ma progression » : graphes empilés (l'un sous l'autre). */
.db-prog-col { display: flex; flex-direction: column; gap: 24px; }
.db-prog-col .db-chart-wrap {
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: white;
}
.db-chart-label { font-size: 12px; color: var(--gray-600); margin-bottom: 5px; }
.db-chart-legend { display: flex; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.db-chart-legend span { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gray-600); }
.db-ld { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.db-chart-rep-row { display: flex; gap: 20px; }
.db-chart-rep-col { flex: 1; min-width: 0; text-align: center; }
.db-chart-rep-col .db-chart-legend { justify-content: center; }
.db-chart-sublabel { font-size: 12px; font-weight: 500; color: var(--violet-dark); margin: 0 0 4px; }

/* Sous-onglets téléchargements */
.db-sub-tabs { display: flex; gap: 8px; margin-bottom: 1.25rem; }
.db-sub-tab {
  padding: 6px 18px;
  border: 1px solid var(--violet-mid);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  cursor: pointer;
  color: var(--violet);
  background: transparent;
}
.db-sub-tab.active { background: var(--violet-pale); border-color: var(--violet); }

/* Grille fichiers */
.db-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.db-file-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s;
  display: block;
  text-decoration: none;
  color: var(--gray-800);
}
.db-file-card:hover { box-shadow: var(--shadow-sm); }
.db-file-prev {
  height: 80px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.db-file-foot {
  padding: 7px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}
.db-file-name { font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.db-file-badge { background: #D85A30; color: white; font-size: 9px; font-weight: 600; padding: 2px 5px; border-radius: 3px; flex-shrink: 0; }
.db-file-add {
  border: 1.5px dashed var(--violet-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
}

/* Zone upload */
.db-upload-zone {
  border: 2px dashed var(--violet-mid);
  border-radius: var(--radius);
  padding: 3rem;
  text-align: center;
}

/* Calendrier */
.db-cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.db-cal-month-label { font-size: 14px; font-weight: 500; color: var(--gray-800); }
.db-cal-grid {
  display: grid;
  grid-template-columns: 40px repeat(7, 1fr);
  min-width: 420px;
  font-size: 12px;
  border: 1px solid var(--gray-200);
  background: var(--gray-100);
}
.db-cal-h {
  padding: 6px 4px;
  text-align: center;
  font-weight: 500;
  font-size: 11px;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200);
}
.db-cal-t {
  color: var(--gray-400);
  text-align: right;
  padding: 0 6px 0 0;
  line-height: 34px;
  height: 34px;
  font-size: 11px;
}
.db-cal-c {
  border: 0.5px solid var(--gray-200);
  height: 34px;
  cursor: pointer;
  position: relative;
  background: white;
}
.db-cal-c.occ  { background: var(--gray-200); cursor: default; }
.db-cal-c.sel  { background: var(--green-light); }
.db-cal-c.free:hover { background: rgba(46,158,107,0.08); }
.db-cal-c.gcal { background: #dbe7fb; cursor: default; }
.db-cal-lbl.gcal-lbl { color: #2b5db3; }
.gcal-btn.gcal-on { color: #2b5db3; border-color: #4a86e8; background: #eef4fd; }
.db-cal-lbl {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 500; color: var(--green);
  overflow: hidden; padding: 0 3px; white-space: nowrap;
}
.db-cal-lbl-mine { white-space: normal; line-height: 1.1; font-size: 8.5px; text-align: center; }
.db-cal-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--gray-600);
  flex-wrap: wrap;
}
.db-leg-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 4px;
  vertical-align: -2px;
}
.db-cal-notif {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  background: var(--green-light);
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  max-width: 92vw;
  text-align: center;
}

@media (max-width: 768px) {
  .db-tab { font-size: 11px; padding: 8px 3px; }
  .db-charts-grid { grid-template-columns: 1fr; }
}

/* Agenda 15 min */
.db-cal-t15 { height: 26px; line-height: 26px; font-size: 10px; color: var(--gray-400); }
.db-cal-c15 { height: 26px; }

/* ===== DASHBOARD PROFESSEUR ===== */

.pp { display: none; padding: 20px 0; }
.pp.active { display: block; }
.pp-tab {}

/* Vue d'ensemble (diagrammes de répartition + bulletins cumulés) */
.prof-overview { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.prof-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prof-ov-card { display: flex; flex-direction: column; gap: 10px; }
.prof-ov-chart { position: relative; height: 200px; }
.prof-ov-bulletin-card { display: flex; flex-direction: column; gap: 10px; }
.prof-ov-bulletin-chart { position: relative; height: 260px; }
.prof-ov-empty { margin: 0; }
@media (max-width: 900px) {
  .prof-overview-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .prof-overview-grid { grid-template-columns: 1fr; }
}

/* Grille élèves */
.prof-eleves-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 4px 0 8px;
}
.prof-eleve-card {
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.prof-eleve-card:hover {
  box-shadow: 0 2px 8px rgba(165,126,178,0.18);
  border-color: var(--violet);
}
.prof-eleve-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.prof-eleve-info { flex: 1; min-width: 0; }
.prof-eleve-name { font-weight: 600; font-size: 0.95rem; color: var(--text-dark); }
.prof-self-badge {
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--violet);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  vertical-align: 1px;
  margin-left: 4px;
}
.prof-eleve-meta { margin: 2px 0 6px; }
.prof-eleve-niveau {
  font-size: 0.75rem;
  background: var(--violet-pale);
  color: var(--violet-dark);
  border-radius: 10px;
  padding: 1px 8px;
}
.prof-eleve-stats { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.prof-stat { font-size: 0.8rem; color: #666; }
.prof-eleve-last { font-size: 0.78rem; color: #999; }

/* Sélecteur élève */
.prof-student-select { margin-bottom: 18px; }
.prof-student-select select {
  padding: 8px 12px;
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text-dark);
  background: #fff;
  cursor: pointer;
  min-width: 240px;
}
.prof-student-select select:focus { outline: none; border-color: var(--violet); }

/* ===== Fiche élève détaillée (onglet Mes élèves) ===== */
.prof-eleve-detail { display: flex; flex-direction: column; gap: 20px; }
.pe-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pe-back {
  border: 1px solid var(--violet-mid);
  background: #fff;
  color: var(--violet-dark);
  border-radius: 20px;
  padding: 5px 14px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.pe-back:hover { background: var(--violet-pale); border-color: var(--violet); }
.pe-id { display: flex; align-items: center; gap: 12px; }
.pe-name { font-weight: 600; font-size: 1.15rem; color: var(--text-dark); }
.pe-idfields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pe-idfields input, .pe-idfields select {
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-dark);
  background: #fff;
}
.pe-idfields input#pe-prenom, .pe-idfields input#pe-nom { width: 120px; }
.pe-idfields input:focus, .pe-idfields select:focus { outline: none; border-color: var(--violet); }
.pe-wipe-btn {
  margin-left: auto;
  border: 1px solid var(--red-light);
  background: #fff;
  color: var(--red);
  border-radius: 20px;
  padding: 5px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.pe-wipe-btn:hover { background: var(--red-light); }
.pe-preview-btn {
  margin-left: auto;
  border: 1px solid var(--violet-mid);
  background: #fff;
  color: var(--violet-dark);
  border-radius: 20px;
  padding: 5px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.pe-preview-btn:hover { background: var(--violet-pale); }

/* Bloc notes prof */
.pe-profbox {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  background: var(--violet-pale);
  padding: 16px;
}
.pe-field { display: flex; flex-direction: column; gap: 6px; }
.pe-field label { font-size: 0.78rem; font-weight: 500; color: var(--violet-dark); }
.pe-field select, .pe-field textarea, .pe-field input[type="number"] {
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  background: #fff;
  color: var(--text-dark);
}
.pe-field select:focus, .pe-field textarea:focus, .pe-field input[type="number"]:focus { outline: none; border-color: var(--violet); }
.pe-field-annulations { flex: 0 0 auto; }
.pe-field-annulations input[type="number"] { width: 70px; }
.pe-field-note { flex: 1 1 200px; }
.pe-field-note textarea { resize: vertical; min-height: 42px; }

/* Bulletin scolaire (mini graphique + édition) */
.pe-field-bulletin { flex: 0 0 auto; }
.pe-bulletin-row { display: flex; align-items: center; gap: 6px; }
.pe-bulletin-chart { width: 130px; height: 42px; }
.pe-bulletin-edit {
  border: 1px solid var(--violet-mid);
  background: #fff;
  border-radius: 50%;
  width: 30px; height: 30px;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
}
@media (hover: hover) { .pe-bulletin-edit:hover { background: var(--violet-pale); border-color: var(--violet); } }
.pe-bulletin-modal { max-width: 420px; }
.pe-bulletin-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pe-bulletin-editrow { display: flex; gap: 8px; align-items: center; }
.pe-bulletin-editrow .pe-bulletin-label {
  flex: 1;
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.88rem;
}
.pe-bulletin-editrow .pe-bulletin-value {
  width: 64px;
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 0.88rem;
  text-align: center;
}
.pe-bulletin-editrow .pe-bulletin-label:focus,
.pe-bulletin-editrow .pe-bulletin-value:focus { outline: none; border-color: var(--violet); }
.pe-bulletin-del { border: none; background: none; cursor: pointer; font-size: 0.95rem; opacity: 0.6; flex-shrink: 0; }
.pe-bulletin-del:hover { opacity: 1; }

/* Sections */
.pe-section { border-top: 1px solid var(--violet-mid); padding-top: 14px; }
.pe-section-t { font-size: 0.95rem; font-weight: 600; color: var(--violet-dark); margin-bottom: 12px; }
.pe-export-btn {
  border: 1px solid var(--violet-mid);
  background: #fff;
  color: var(--violet-dark);
  border-radius: 20px;
  padding: 5px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  margin-bottom: 12px;
}
.pe-export-btn:hover { background: var(--violet-pale); border-color: var(--violet); }

/* Liste prioritaire */
.pe-prio { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pe-prio-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--violet-mid);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: #fff;
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
a.pe-prio-item { cursor: pointer; }
.pe-prio-item.pe-prio-nolink { cursor: default; opacity: 0.7; }
@media (hover: hover) { a.pe-prio-item:hover { border-color: var(--violet); background: var(--violet-pale); } }
.pe-prio-name { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--text-dark); }

/* Graphes progression */
.pe-charts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
.pe-chart { border: 1px solid var(--violet-mid); border-radius: var(--radius-sm); padding: 12px; background: #fff; height: 220px; }
@media (max-width: 768px) { .pe-charts { grid-template-columns: 1fr; } }

/* Calendrier prof — créneau disponible */
.db-cal-c.prof-avail {
  background: rgba(165,126,178,0.18);
  cursor: pointer;
}
.db-cal-c.prof-avail:hover { background: rgba(165,126,178,0.32); }

/* Pastille légende */
.db-cal-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: -1px;
}

.score-vert   { background: var(--green-light);  color: var(--green);  }
.score-orange { background: var(--orange-light); color: var(--orange); }
.score-rouge  { background: var(--red-light);    color: var(--red);    }

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

/* ===== PAGE APPLICATIONS ===== */

.apps-portal {
  padding: 24px 32px;
  max-width: 900px;
  margin: 0 auto;
}

/* Onglets niveaux */
.apps-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--violet-mid);
  padding-bottom: 12px;
}
.apps-tab {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--violet-mid);
  background: #fff;
  color: var(--violet-dark);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.apps-tab:hover   { background: var(--violet-pale); }
.apps-tab.active  { background: var(--violet); color: #fff; border-color: var(--violet); }

/* Panneau par niveau */
.apps-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
}
.apps-panel.active { display: flex; }

/* Groupe thématique */
.apps-theme {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apps-theme-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--violet-dark);
}
.apps-theme-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Carte app — nom seul */
.app-card {
  padding: 9px 18px;
  background: #fff;
  border: 1.5px solid var(--violet-mid);
  border-radius: 20px;
  text-decoration: none;
  color: var(--text-dark, #343A40);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.app-card:hover {
  background: var(--violet-pale);
  border-color: var(--violet);
  color: var(--violet-dark);
}
.app-card-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

@media (max-width: 768px) {
  .apps-portal { padding: 16px; }
  .app-card { font-size: 0.82rem; padding: 8px 12px; }
}

/* ===== MATH INLINE (apps) ===== */
.app-frac {
  display: inline-flex; flex-direction: column;
  align-items: center; vertical-align: middle;
  font-size: 0.82em; line-height: 1.1; margin: 0 2px;
}
.app-frac span:first-child { border-bottom: 1px solid currentColor; padding: 0 2px; }
.app-frac span:last-child  { padding: 0 2px; }

/* ===== APP ENGINE ===== */

#page-app {
  display: none;
  padding: 0;
  margin: 0;
}
/* écran d'app immersif : l'en-tête de navigation est masqué (showPage),
   page-app prend toute la hauteur sous la topbar (70px). */
#page-app.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }

#app-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.app-screen { display: none; flex-direction: column; flex: 1; }
.app-screen.active { display: flex; }

/* --- Config --- */
.app-config-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.app-config-card {
  background: #fff; border-radius: 16px; padding: 32px 36px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10); max-width: 440px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.app-config-icon { font-size: 2.8rem; line-height: 1; }
.app-config-title { font-size: 1.7rem; font-weight: 700; color: #4a235a; text-align: center; margin: 0 0 4px; }

.app-sliders { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.app-slider-row { display: flex; flex-direction: column; gap: 4px; }
.app-slider-labels { display: flex; justify-content: space-between; font-size: 0.87rem; color: #555; }
.app-slider-val { font-weight: 700; color: #4a235a; }
.app-slider {
  width: 100%; accent-color: #7d3c98;
  height: 6px; border-radius: 3px; cursor: pointer;
}
.app-bonus-tag {
  text-align: center; font-size: 0.82rem; font-weight: 600;
  color: #c0392b; background: #fdf2f2; border-radius: 20px; padding: 4px 14px;
  min-height: 24px;
}
.app-bonus-tag:empty { display: none; }

.app-start-btn { width: 100%; font-size: 1rem; padding: 14px; margin-top: 4px; }
.app-back-btn  { width: 100%; font-size: 0.88rem; padding: 10px; color: #888; }

/* --- HUD --- */
.app-hud {
  display: flex; align-items: center; justify-content: space-between;
  background: #F3EEFF; color: var(--violet);
  padding: 6px 14px; height: 42px; flex-shrink: 0;
  gap: 12px; border-bottom: 1px solid var(--violet-mid);
  position: relative;
}
.app-hud-title {
  flex: 1; min-width: 0; text-align: center;
  font-family: 'GFS Didot', 'Didot', Georgia, serif;
  font-size: 1.05rem; font-weight: 700; color: var(--violet);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-hud-close {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--violet);
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
  cursor: pointer; padding: 5px 10px; border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.app-hud-close:hover { background: rgba(165,126,178,0.15); color: var(--violet-dark); }
.app-hud-mute {
  background: none; border: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: 5px 8px; border-radius: 8px;
  transition: background 0.15s; flex-shrink: 0;
}
@media (hover: hover) {
  .app-hud-mute:hover { background: rgba(165,126,178,0.15); }
}
.app-hud-score {
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; color: var(--violet);
}
.app-hud-timer {
  font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 48px; text-align: right; color: var(--violet);
}
.app-hud-timer.app-timer-urgent { color: #E0504A; animation: app-blink 0.7s step-end infinite; }
@keyframes app-blink { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* --- Rythme bar --- */
.app-ryt-wrap {
  height: 5px; background: #e8d5f5; flex-shrink: 0;
}
.app-ryt-bar {
  height: 100%; background: #7d3c98;
  transition: width 0.05s linear, background 0.3s;
}
.app-ryt-bar.app-ryt-urgent { background: #e74c3c; }

/* --- Contenu question --- */
.app-content {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px 24px; gap: 16px; overflow: hidden;
}
.app-iframe {
  flex: 1; width: 100%; border: none; background: #fff;
  min-height: 0;
}
.app-question {
  font-size: 1.15rem; font-weight: 600; color: #2c3e50;
  text-align: center; max-width: 600px;
  line-height: 1.5;
}
.app-answer {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; max-width: 620px; width: 100%;
}
.app-answer button {
  padding: 10px 18px; border: 2px solid #ccc; border-radius: 10px;
  background: #fff; cursor: pointer; font-size: 0.95rem;
  min-width: 120px; text-align: center; transition: all 0.15s;
  font-family: inherit;
}
/* Survol réservé aux vrais pointeurs : sur tactile (iPad) le :hover « colle »
   après le tap et le bouton de la question suivante hériterait de la surbrillance. */
@media (hover: hover) {
  .app-answer button:hover:not(:disabled) { border-color: #7d3c98; color: #7d3c98; }
}
.app-answer button:disabled { opacity: 0.6; cursor: default; }
.app-answer button.selected { background: #7d3c98; border-color: #7d3c98; color: #fff; }

.app-feedback {
  font-size: 2rem; font-weight: 900; height: 40px; line-height: 40px;
  text-align: center;
}
.app-feedback.fb-ok { color: #27ae60; }
.app-feedback.fb-ko { color: #e74c3c; }

/* ===== PAYSAGE (iPad + PC) : énoncé/figure à gauche, réponses QCM à droite ===== */
/* On se base sur l'ORIENTATION (pas un seuil de largeur) : dans l'iframe du site,
   la largeur peut être faussée — l'orientation reste fiable. */
@media (orientation: landscape) {
  .app-content {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 36px;
    position: relative;
  }
  /* Énoncé dimensionné à son contenu (ne pousse pas les réponses au bord) :
     énoncé + réponses forment un groupe centré. */
  .app-question {
    flex: 0 1 auto;
    max-width: 48%;
    text-align: center;
  }
  .app-answer {
    flex: 0 0 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    width: auto;
    min-width: 180px;
    max-width: 300px;
    align-self: center;
  }
  .app-answer button { width: 100%; }
  /* Le ✓/✗ ne prend pas de colonne : il flotte au centre-bas. */
  .app-feedback {
    position: absolute;
    left: 50%; bottom: 8px;
    transform: translateX(-50%);
    height: auto; line-height: 1; margin: 0; pointer-events: none;
  }
}

/* --- Résultats --- */
.app-results-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.app-results-card {
  background: #fff; border-radius: 16px; padding: 32px 36px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10); max-width: 420px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.app-results-icon  { font-size: 2.5rem; }
.app-results-app   { font-size: 1.7rem; font-weight: 700; color: #4a235a; margin: 0 0 4px; }
.app-results-score {
  font-size: 2rem; font-weight: 900;
  padding: 8px 24px; border-radius: 50px;
}
.app-results-score.score-vert   { background: #eafaf1; color: #1e8449; }
.app-results-score.score-orange { background: #fef9e7; color: #b7770d; }
.app-results-score.score-rouge  { background: #fdedec; color: #c0392b; }
.student-preview-banner {
  background: var(--violet); color: #fff; text-align: center;
  padding: 8px 16px; font-size: 13px; font-weight: 500;
}
.student-preview-banner button {
  margin-left: 12px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.5);
  color: #fff; padding: 3px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.chapter-note-wrap { display: inline-flex; flex-shrink: 0; margin-bottom: 14px; }
.section-title .chapter-note-wrap { margin-bottom: 0; }
.chapter-note-badge { font-size: 13px; }
.comp-note { font-size: 11px; padding: 2px 10px; }
.app-results-msg { color: #555; font-size: 0.95rem; margin: 0; }
.app-results-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 4px; }
.app-results-btns .btn { width: 100%; text-align: center; }

@media (max-width: 600px) {
  .app-config-card, .app-results-card { padding: 24px 18px; }
  .app-question { font-size: 1rem; }
  .app-answer button { font-size: 0.85rem; min-width: 90px; padding: 8px 10px; }
}

.logique-link {
  display: block; text-align: center; padding: 9px 0;
  background: var(--violet-pale); border-radius: 8px;
  color: var(--violet); font-weight: 600; font-size: 13px;
  text-decoration: none;
}
.logique-link:hover { background: var(--violet-mid); }

/* ===== MESSAGERIE (élève/parent ↔ prof) ===== */

/* Badge de compteur sur l'onglet ("Messagerie 3") */
.msg-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  background: var(--red); color: white; font-size: 11px; font-weight: 700;
  border-radius: 10px; line-height: 18px;
}

/* — Fil de discussion (commun élève/prof) — */
.msg-list {
  display: flex; flex-direction: column; gap: 10px;
  height: 46vh; min-height: 280px; max-height: 520px;
  overflow-y: auto; padding: 6px 10px 10px; margin-bottom: 12px;
  background: var(--gray-100); border-radius: 12px;
}
.msg-bubble {
  max-width: 72%; padding: 10px 14px; border-radius: 14px;
  font-size: 14px; line-height: 1.5; word-break: break-word;
}
.msg-bubble.theirs { align-self: flex-start; background: white; border: 1px solid var(--gray-200); color: var(--gray-800); }
.msg-bubble.mine   { align-self: flex-end;   background: var(--violet); color: white; }
.msg-text { white-space: pre-wrap; }
.msg-files { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.msg-file {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  text-decoration: underline; color: inherit;
}
.msg-bubble.theirs .msg-file { color: var(--violet-dark); }
.msg-meta { font-size: 11px; opacity: .7; margin-top: 6px; }

/* — Zone de composition (commune élève/prof) — */
.msg-compose { max-width: 100%; }
.msg-files-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.msg-file-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--violet-pale); border: 1px solid var(--violet-mid);
  border-radius: 14px; padding: 4px 6px 4px 10px; font-size: 12px; color: var(--violet-dark);
}
.msg-file-chip button {
  border: none; background: none; cursor: pointer; color: var(--gray-600);
  font-size: 13px; line-height: 1; padding: 2px 4px;
}
.msg-compose-row { display: flex; align-items: flex-end; gap: 10px; }
.msg-compose-row textarea {
  flex: 1; box-sizing: border-box; padding: 10px 14px;
  border: 1.5px solid var(--gray-200); border-radius: 10px;
  font-family: inherit; font-size: 14px; resize: none; color: var(--gray-800);
}
.msg-compose-row textarea:focus { outline: none; border-color: var(--violet-light); }
.msg-compose-row .btn-primary { width: auto; padding: 10px 22px; flex-shrink: 0; }
.msg-file-btn {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0; font-size: 18px; cursor: pointer;
  border: 1.5px solid var(--gray-200); border-radius: 10px; background: white;
}
.msg-file-btn:hover { border-color: var(--violet-light); background: var(--violet-pale); }

/* — Vue prof : liste des conversations + fil — */
.msg-prof-wrap { display: flex; gap: 20px; align-items: flex-start; }
.msg-threads {
  flex: 0 0 260px; display: flex; flex-direction: column; gap: 8px;
  max-height: 620px; overflow-y: auto;
}
.msg-thread {
  background: white; border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; transition: all .15s;
}
.msg-thread:hover { border-color: var(--violet-light); }
.msg-thread.active { background: var(--violet-pale); border-color: var(--violet); }
.msg-thread-top { display: flex; align-items: center; gap: 8px; }
.msg-thread-name { font-weight: 600; color: var(--violet-dark); font-size: 14px; }
.msg-thread-badge {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--red); color: white; font-size: 11px; font-weight: 700; border-radius: 10px;
}
.msg-thread-preview {
  color: var(--gray-600); font-size: 12px; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-chat { flex: 1; min-width: 0; }
.msg-chat-header { font-weight: 700; color: var(--violet-dark); font-size: 15px; margin-bottom: 10px; }

@media (max-width: 768px) {
  .msg-prof-wrap { flex-direction: column; }
  .msg-threads { flex: none; width: 100%; max-height: 220px; }
  .msg-bubble { max-width: 88%; }
}

/* ===== CARTE D'INVITATION (prof) ===== */
.carte-intro { color: var(--gray-600); font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.carte-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.carte-canvas {
  border: 1px solid var(--gray-200); border-radius: 12px;
  box-shadow: 0 4px 16px rgba(165,126,178,0.18); max-width: 100%; height: auto;
}
.carte-actions { display: flex; justify-content: center; margin-bottom: 26px; }
.carte-actions .btn-primary { width: auto; padding: 12px 28px; }
.carte-code-box {
  max-width: 480px; margin: 0 auto; background: var(--violet-pale);
  border: 1px solid var(--violet-mid); border-radius: 12px; padding: 18px 20px;
}
.carte-code-box label { display: block; font-weight: 600; color: var(--violet-dark); font-size: 14px; margin-bottom: 10px; }
.carte-code-row { display: flex; gap: 10px; flex-wrap: wrap; }
.carte-code-row input {
  flex: 1; min-width: 160px; box-sizing: border-box; padding: 10px 14px;
  border: 1.5px solid var(--gray-200); border-radius: 8px; font-family: inherit;
  font-size: 15px; text-transform: uppercase; color: var(--gray-800);
}
.carte-code-row input:focus { outline: none; border-color: var(--violet-light); }
.carte-code-row .btn-outline { white-space: nowrap; }
.carte-code-msg { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; }
.carte-code-box + .carte-code-box { margin-top: 16px; }
#carte-link-input { text-transform: none; font-size: 14px; }

/* ===== TO DO LIST (prof) ===== */
.todo-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.todo-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.todo-fbtn {
  padding: 6px 14px; border: 1.5px solid var(--violet-mid); border-radius: 18px;
  background: white; color: var(--gray-600); font-size: 13px; font-family: inherit; cursor: pointer;
}
.todo-fbtn:hover { border-color: var(--violet-light); }
.todo-fbtn.active { background: var(--violet); border-color: var(--violet); color: white; }

.todo-form {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--violet-pale); border: 1px solid var(--violet-mid);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
}
.todo-cat-select {
  padding: 9px 12px; border: 1.5px solid var(--violet-mid); border-radius: 8px;
  font-family: inherit; font-size: 14px; background: white; color: var(--gray-700); cursor: pointer;
}
.todo-text-input {
  flex: 1; min-width: 200px; padding: 9px 12px;
  border: 1.5px solid var(--violet-mid); border-radius: 8px;
  font-family: inherit; font-size: 14px; outline: none;
}
.todo-text-input:focus { border-color: var(--violet); }

.todo-list { display: flex; flex-direction: column; gap: 8px; }
.todo-item {
  display: flex; align-items: center; gap: 10px;
  background: white; border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 1px 4px rgba(165,126,178,.06);
}
.todo-item.todo-dragging { opacity: .5; border-style: dashed; border-color: var(--violet); }
.todo-grip { color: var(--gray-400); cursor: grab; font-size: 16px; line-height: 1; user-select: none; }
.todo-grip:active { cursor: grabbing; }
.todo-pill {
  flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 12px; border: 1px solid; white-space: nowrap;
}
.todo-txt { flex: 1; font-size: 14px; color: var(--gray-700); line-height: 1.4; word-break: break-word; }
.todo-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.todo-mv, .todo-del {
  border: none; background: transparent; cursor: pointer; border-radius: 6px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--gray-400); transition: background .15s, color .15s;
}
.todo-mv:hover { background: var(--violet-mid); color: var(--violet-dark); }
.todo-del { font-size: 18px; }
.todo-del:hover { background: #FDEDEC; color: var(--red); }
.todo-head .btn { width: auto; flex: 0 0 auto; }
.todo-form .btn { width: auto; flex: 0 0 auto; }