/* =====================================================================
   MimiGames - Design system
   ===================================================================== */

:root {
  --background: #FAF8F5;
  --surface: #FFFFFF;
  --foreground: #1A1A2E;
  --primary: #2E6B8A;
  --primary-light: #5CBDB9;
  --secondary: #7D9B76;
  --accent: #C9A84C;
  --destructive: #C44569;
  --border: #E8E4DD;
  --muted: #94A3B8;

  --radius-card: 24px;
  --radius-btn: 16px;
  --shadow-card: 0 8px 32px -12px rgba(26, 38, 46, 0.14);
  --shadow-btn: 0 4px 14px -4px rgba(46, 107, 138, 0.35);

  --font-brand: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}
h1, h2, h3, h4, .brand {
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 .4em 0;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--font-mono); }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px;
}
.container-etroit {
  max-width: 460px;
  margin: 0 auto;
  padding: 48px 24px;
}

/* ---------- Cartes ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.card-compacte { padding: 18px 20px; border-radius: 18px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-btn);
  padding: 12px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-light);
  transform: translateY(-2px);
}
.btn-secondaire {
  background: var(--surface);
  color: var(--foreground);
  border: 1.5px solid var(--border);
}
.btn-secondaire:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.btn-destructif {
  background: transparent;
  color: var(--destructive);
  border: 1.5px solid var(--destructive);
}
.btn-destructif:hover:not(:disabled) { background: var(--destructive); color: #fff; }
.btn-bloc { width: 100%; }
.btn-lg { padding: 18px 32px; font-size: 18px; border-radius: 20px; }

/* ---------- Formulaires ---------- */
.champ { margin-bottom: 18px; }
.champ label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--foreground);
}
.champ input[type=text],
.champ input[type=email],
.champ input[type=password],
.champ input[type=number],
.champ input[type=date],
.champ input[type=time],
.champ input[type=datetime-local],
.champ select,
.champ textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--surface);
  color: var(--foreground);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 2px solid var(--primary-light);
  outline-offset: 1px;
  border-color: var(--primary);
}
.champ input[type=date],
.champ input[type=time],
.champ input[type=datetime-local] {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .01em;
  min-height: 46px;
}
.champ input[type=datetime-local]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
  padding: 2px;
  border-radius: 6px;
  transition: opacity .15s ease, background-color .15s ease;
}
.champ input[type=datetime-local]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(46,107,138,.12);
}

.champ-couleur { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pastille-couleur {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.pastille-couleur.selectionnee { border-color: var(--foreground); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }

.msg-erreur {
  background: rgba(196,69,105,.08);
  color: var(--destructive);
  border: 1px solid rgba(196,69,105,.3);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 16px;
}

/* ---------- Badges / étiquettes ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-lobby { background: rgba(148,163,184,.15); color: var(--muted); }
.badge-encours { background: rgba(92,189,185,.18); color: #2a7d78; }
.badge-terminee { background: rgba(201,168,76,.18); color: #8a6d1f; }
.badge-tag { background: rgba(142,92,189,.14); color: #6a4494; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ---------- Entête d'app ---------- */
.entete-app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--foreground);
  color: #fff;
  flex-wrap: wrap;
  gap: 12px;
}
.entete-app .brand { color: #fff; font-size: 20px; margin: 0; display:flex; align-items:center; gap:10px; }
.entete-app .brand .emoji { font-size: 24px; }
.entete-app a { color: rgba(255,255,255,.85); }
.entete-app nav { display: flex; gap: 18px; align-items: center; }

/* ---------- Tableau de bord : raccourcis vers les sections ---------- */
.grille-raccourcis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.carte-raccourci {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.carte-raccourci:hover { transform: translateY(-3px); border-color: var(--primary); text-decoration: none; }
.icone-raccourci { font-size: 32px; line-height: 1; }
.titre-raccourci { font-family: var(--font-brand); font-weight: 700; font-size: 19px; color: var(--foreground); }
.chiffres-raccourci { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.chiffres-raccourci .stat { display: flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: 13.5px; }
.chiffres-raccourci .stat strong { font-family: var(--font-mono); font-size: 22px; font-weight: 800; color: var(--primary); }

/* ---------- Sélecteur de mode (création de partie) ---------- */
.carte-mode {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all .15s ease;
  background: var(--surface);
}
.carte-mode:hover { border-color: var(--primary); }
.carte-mode.selectionnee { border-color: var(--primary); background: rgba(46,107,138,.06); box-shadow: 0 0 0 2px rgba(46,107,138,.15); }
.carte-mode strong { display: block; margin-bottom: 6px; font-size: 14.5px; }
.carte-mode p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* ---------- Onglets (banque de questions) ---------- */
.onglets-matieres {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.onglet-matiere {
  padding: 10px 16px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: -2px;
  transition: color .15s ease, background-color .15s ease;
}
.onglet-matiere:hover { color: var(--foreground); }
.onglet-matiere.actif {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--border);
  box-shadow: 0 -2px 0 var(--primary) inset;
}

.onglets-niveaux { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.onglet-niveau {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  transition: all .15s ease;
}
.onglet-niveau:hover { border-color: var(--primary); color: var(--primary); }
.onglet-niveau.actif { background: var(--primary); border-color: var(--primary); color: #fff; }
.onglet-niveau .compte { opacity: .75; font-weight: 500; }

/* Nombre de questions retenues, par matiere, directement dans l'onglet */
.onglet-matiere .pastille-retenues {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  margin-left: 7px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.onglet-matiere.actif .pastille-retenues { background: var(--primary); }

/* ---------- Banque de questions : formulaire enrichi ---------- */
.aide-champ {
  font-size: 12.5px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.45;
}
.formulaire-question .champ label { margin-bottom: 4px; }

.choix-niveaux {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.groupe-filiere { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.titre-filiere {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.case-niveau {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
  margin: 0;
}
.case-niveau:hover { border-color: var(--primary); color: var(--primary); }
.case-niveau.selectionne { border-color: var(--primary); background: rgba(46,107,138,.08); color: var(--primary); }
.case-niveau input { accent-color: var(--primary); cursor: pointer; }

/* ---------- Éditeur de tags (formulaire question) ---------- */
.editeur-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.editeur-tags input[type=text] {
  flex: 1;
  min-width: 160px;
}
.chip-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  border-radius: 999px;
  background: rgba(142,92,189,.12);
  color: #6a4494;
  font-size: 13px;
  font-weight: 600;
}
.chip-tag button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  opacity: .7;
}
.chip-tag button:hover { opacity: 1; }

/* Filtre par tag (sélection de questions) : mêmes pastilles que .case-niveau,
   couleur tag pour rester cohérent avec .chip-tag / .badge-tag */
.filtre-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.puce-filtre-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
  margin: 0;
}
.puce-filtre-tag:hover { border-color: #8e5cbd; color: #6a4494; }
.puce-filtre-tag.selectionne { border-color: #8e5cbd; background: rgba(142,92,189,.1); color: #6a4494; }
.puce-filtre-tag input { accent-color: #8e5cbd; cursor: pointer; }

.ligne-proposition {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .15s ease, background-color .15s ease;
}
.ligne-proposition.correcte { border-color: var(--secondary); background: rgba(125,155,118,.08); }
.ligne-proposition input[type=text] {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 8px 4px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--foreground);
}
.ligne-proposition input[type=text]:focus { outline: none; }
.marque-correcte {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}
.marque-correcte input { accent-color: var(--secondary); cursor: pointer; }
.lettre-proposition {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--background);
  border: 1.5px solid var(--border);
  font-weight: 700;
  font-size: 13px;
}
.ligne-proposition.correcte .lettre-proposition {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
}
.bouton-icone { padding: 8px 12px; font-size: 13px; line-height: 1; }

.etiquettes-question { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.badge-bareme { background: rgba(201,168,76,.18); color: #8a6d1f; }
.badge-type { background: rgba(46,107,138,.12); color: var(--primary); }
.badge-niveaux { background: rgba(125,155,118,.16); color: #4f6a49; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ---------- Activités : liste, lien partageable, sélection de questions ---------- */
.carte-activite { display: flex; flex-direction: column; gap: 18px; }
.entete-activite {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.actions-activite { display: flex; gap: 8px; flex-shrink: 0; }

.bloc-lien {
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--background);
}
.etiquette-lien {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.ligne-lien { display: flex; gap: 8px; margin-top: 8px; }
.ligne-lien input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--foreground);
}
.ligne-lien .btn { padding: 10px 18px; font-size: 13px; white-space: nowrap; }

.compte-filtre { font-size: 12.5px; color: var(--muted); margin: 0; }

/* ---------- Assistant de création d'activité (étapes) ---------- */
.etapes-assistant {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}
.etape {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.etape .numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 12px;
}
.etape.active { color: var(--foreground); }
.etape.active .numero { border-color: var(--primary); color: var(--primary); }
.etape.faite { color: var(--secondary); }
.etape.faite .numero { border-color: var(--secondary); background: var(--secondary); color: #fff; }

.recap-etape1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--background);
  border: 1.5px solid var(--border);
  margin-bottom: 20px;
}
.recap-etape1 strong { display: block; font-size: 15px; }
.recap-etape1 .mono { font-size: 12.5px; color: var(--muted); }

.liste-questions {
  border: 1.5px solid var(--border);
  border-radius: 14px 14px 0 0;
  border-bottom: none;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
}
.liste-vide {
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* Ligne de question : l'enonce domine, le reste s'efface */
.item-question {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  margin: 0;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background-color .12s ease;
}
.item-question:last-child { border-bottom: none; }
.item-question:hover { background: rgba(46,107,138,.045); }
.item-question.retenue { background: rgba(46,107,138,.07); }

/* La vraie case reste accessible au clavier, la pastille est son rendu */
.item-question input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.item-question .coche {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  position: relative;
  transition: background-color .12s ease, border-color .12s ease;
}
.item-question:hover .coche { border-color: var(--primary); }
.item-question.retenue .coche { background: var(--primary); border-color: var(--primary); }
.item-question.retenue .coche::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.item-question input[type=checkbox]:focus-visible + .coche {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}

.corps-question { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.corps-question .enonce {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--foreground);
}
.corps-question .meta { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.item-question .bareme {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  padding-top: 2px;
  white-space: nowrap;
}
.item-question.retenue .bareme { color: var(--primary); }

/* Resume colle sous la liste : total retenu a gauche, actions a droite */
.resume-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 0 0 14px 14px;
  background: var(--background);
}
.resume-selection .total { font-size: 13.5px; color: var(--muted); }
.resume-selection .total strong { color: var(--foreground); }
.actions-resume { display: flex; gap: 8px; }
.actions-resume .btn { padding: 7px 14px; font-size: 13px; }

/* ---------- Modale de confirmation ---------- */
.fond-modale {
  position: fixed;
  inset: 0;
  background: rgba(26,26,46,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 900;
}
.modale {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
  max-width: 480px;
  width: 100%;
}
.modale h3 { margin-top: 0; }

/* ---------- Exercice élève ---------- */
.container-exercice {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.mention-donnees {
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--background);
  margin-top: 8px;
}
.mention-donnees strong { font-size: 13px; }
.mention-donnees p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

.entete-exercice {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.titre-exercice { font-family: var(--font-brand); font-weight: 700; font-size: 20px; }
.sous-titre-exercice { color: var(--muted); font-size: 13.5px; }
.progression-exercice { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.progression-exercice .mono { font-size: 13px; color: var(--muted); text-align: right; }
.barre-progression {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.barre-progression .remplissage {
  height: 100%;
  background: var(--primary);
  transition: width .3s ease;
}

/* ---------- Récapitulatif et résultats ---------- */
.tuiles-resultat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.tuile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 18px 14px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  text-align: center;
}
.tuile .valeur { font-size: 22px; font-weight: 700; }
.tuile .libelle { font-size: 12.5px; color: var(--muted); }

.ligne-recap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.ligne-recap.juste { border-color: var(--secondary); background: rgba(125,155,118,.07); }
.ligne-recap.partielle { border-color: var(--accent); background: rgba(201,168,76,.09); }
.ligne-recap.fausse { border-color: var(--destructive); background: rgba(196,69,105,.06); }
.ligne-recap.non-traitee { opacity: .7; }
.pastille-recap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--background);
  border: 1.5px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.ligne-recap.juste .pastille-recap { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.ligne-recap.partielle .pastille-recap { background: var(--accent); border-color: var(--accent); color: #fff; }
.ligne-recap.fausse .pastille-recap { background: var(--destructive); border-color: var(--destructive); color: #fff; }
.points-recap {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.points-recap .temps { font-weight: 500; font-size: 12px; color: var(--muted); }

.table-resultats { width: 100%; border-collapse: collapse; }
.table-resultats th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 14px 16px;
  background: var(--background);
}
.table-resultats td { padding: 14px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
.table-resultats tr.ouverte td { background: rgba(46,107,138,.04); }
.table-resultats tr.ligne-detail td { background: var(--background); padding: 16px; }

/* ---------- Pages légales ---------- */
.page-legale h2 { font-size: 19px; margin-top: 28px; }
.page-legale h2:first-child { margin-top: 0; }
.page-legale h3 { font-size: 15.5px; margin-top: 20px; }
.page-legale p, .page-legale li { font-size: 14.5px; line-height: 1.65; }
.page-legale ul { padding-left: 20px; }
.rappel-legal {
  margin-top: 32px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(201,168,76,.14);
  color: #8a6d1f;
  font-size: 13.5px;
}

@media (max-width: 720px) {
  .entete-activite { flex-direction: column; }
  .table-resultats th:nth-child(2), .table-resultats td:nth-child(2) { display: none; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

#blazor-error-ui {
  background: var(--destructive);
  color: #fff;
  bottom: 0;
  box-shadow: 0 -4px 12px rgba(0,0,0,.15);
  display: none;
  left: 0;
  padding: 12px 20px;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; color: #fff; }