:root {
  --bg: #14151a;
  --bg-elev: #1c1e26;
  --bg-elev-2: #24262f;
  --border: #2e313c;
  --text: #e7e8ee;
  --text-dim: #9aa0ae;
  --accent: #6c8cff;
  --accent-soft: #34406b;
  --exp: #4a90d9;
  --int: #57b894;
  --danger: #d9534f;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; min-height: 100dvh; }

.app {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(20, 21, 26, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px 10px;
}
.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brand { font-weight: 650; font-size: 15px; letter-spacing: 0.2px; }
.brand small { display: block; color: var(--text-dim); font-weight: 400; font-size: 11px; }
.topbar a.link { color: var(--text-dim); text-decoration: none; font-size: 13px; }
.topbar a.link:hover { color: var(--text); }
.topbar-links { display: flex; align-items: center; gap: 14px; }

.progress {
  margin-top: 10px;
  height: 6px;
  background: var(--bg-elev-2);
  border-radius: 99px;
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--exp), var(--accent));
  transition: width 0.25s ease;
}
.progress-label { margin-top: 6px; font-size: 12px; color: var(--text-dim); text-align: center; }

/* ---------- Card ---------- */
.main { flex: 1; padding: 18px 16px 120px; }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 18px;
}
.cat-chip {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 99px;
  margin-bottom: 14px;
}
.q-label { font-size: 20px; line-height: 1.35; font-weight: 600; margin: 0 0 10px; }
.q-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 18px;
  white-space: pre-line;
  border-left: 2px solid var(--border);
  padding-left: 12px;
}

.scale-block { margin-bottom: 18px; }
.scale-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.scale-title { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.scale-title.exp b { color: var(--exp); }
.scale-title.int b { color: var(--int); }
.scale-value { font-size: 12px; color: var(--text-dim); text-align: right; max-width: 55%; }

.dots { display: flex; gap: 8px; }
.dot {
  flex: 1;
  aspect-ratio: 1 / 1;
  max-width: 52px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease;
}
.dot:active { transform: scale(0.93); }
.scale-block.exp .dot.active { background: var(--exp); color: #fff; border-color: var(--exp); }
.scale-block.int .dot.active { background: var(--int); color: #06281c; border-color: var(--int); }

.comment-toggle {
  margin-top: 4px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
}
.comment-toggle:hover { color: var(--text); }
textarea.comment {
  width: 100%;
  margin-top: 8px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 64px;
}
.hidden { display: none !important; }

/* ---------- Nav footer ---------- */
.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(20, 21, 26, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.navbar-inner { max-width: 640px; margin: 0 auto; display: flex; gap: 10px; }
.btn {
  flex: 1;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.ghost { flex: 0 0 auto; padding: 14px 16px; }

/* ---------- Overview / menu ---------- */
.overview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
}
.overview-item .meta { color: var(--text-dim); font-size: 13px; }
.overview-item .bar {
  height: 5px; width: 90px; background: var(--bg-elev-2);
  border-radius: 99px; overflow: hidden; margin-top: 6px;
}
.overview-item .bar > span { display: block; height: 100%; background: var(--int); }

/* Catégories dépliables sur la page de résultat */
.cat-details { margin-bottom: 10px; }
.cat-details > summary.overview-item {
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
  gap: 12px;
}
.cat-details > summary.overview-item::-webkit-details-marker { display: none; }
.cat-summary-main { flex: 1; min-width: 0; }
.cat-chevron {
  color: var(--text-dim);
  font-size: 24px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.cat-details[open] > summary .cat-chevron { transform: rotate(180deg); }
.cat-questions {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--bg);
  padding: 4px 0;
  margin: -6px 0 0;
}
.qrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.qrow:last-child { border-bottom: none; }
.qrow-label { font-size: 14px; flex: 1; min-width: 0; }
.qrow-empty .qrow-label { color: var(--text-dim); }
.qrow-vals { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.qtag {
  font-size: 12px;
  line-height: 1.3;
  padding: 2px 8px;
  border-radius: 99px;
  text-align: right;
  border: 1px solid var(--border);
}
.qtag-exp { color: var(--exp); }
.qtag-int { color: var(--int); }

/* Couleurs des réponses selon la valeur choisie (page résultat).
   Intérêt = dégradé envie (rouge → vert) ; Expérience = intensité (gris → bleu). */
.qtag-int.qv0 { color: #ec7d78; border-color: rgba(217, 83, 79, 0.5); background: rgba(217, 83, 79, 0.14); }
.qtag-int.qv1 { color: var(--text-dim); }
.qtag-int.qv2 { color: #e0b155; border-color: rgba(224, 177, 85, 0.45); background: rgba(224, 177, 85, 0.12); }
.qtag-int.qv3 { color: #54c2b2; border-color: rgba(84, 194, 178, 0.45); background: rgba(84, 194, 178, 0.12); }
.qtag-int.qv4 { color: var(--int); border-color: rgba(87, 184, 148, 0.5); background: rgba(87, 184, 148, 0.14); }
.qtag-int.qv5 { color: #5fd79b; border-color: rgba(79, 214, 149, 0.55); background: rgba(79, 214, 149, 0.18); }

.qtag-exp.qv0 { color: var(--text-dim); }
.qtag-exp.qv1 { color: var(--text-dim); }
.qtag-exp.qv2 { color: #8bb7ea; border-color: rgba(127, 176, 230, 0.4); background: rgba(127, 176, 230, 0.10); }
.qtag-exp.qv3 { color: var(--exp); border-color: rgba(74, 144, 217, 0.45); background: rgba(74, 144, 217, 0.12); }
.qtag-exp.qv4 { color: #5a9be0; border-color: rgba(74, 144, 217, 0.5); background: rgba(74, 144, 217, 0.15); }
.qtag-exp.qv5 { color: #77b0e6; border-color: rgba(74, 144, 217, 0.6); background: rgba(74, 144, 217, 0.19); }

/* ---------- Comparaison de deux résultats ---------- */
.cmp-input {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 12px;
  font: inherit;
  font-size: 15px;
}
.cmp-input:focus { outline: none; border-color: var(--accent); }
.field-error { color: var(--danger); font-size: 13px; margin-top: 8px; }

/* Petite pastille emoji (barre de comparaison, en-tête setup) */
.rank-emoji.sm {
  width: 40px;
  height: 40px;
  font-size: 22px;
  border-radius: 11px;
}

/* Écran de configuration */
.setup-base { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.setup-base-txt { min-width: 0; }
.cmp-row { display: flex; flex-direction: column; gap: 10px; }
.cmp-go { width: 100%; }
.setup-hint { margin-top: 12px; }

/* Barre compacte des deux tests comparés (écran résultat) */
.cmp-target {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.cmp-target-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmp-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmp-name.dim { color: var(--text-dim); font-weight: 500; }
.cmp-change {
  flex: 0 0 auto;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 99px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cmp-change:hover { color: var(--accent); border-color: var(--accent); }

/* Titre de section (« Explorer par catégorie ») */
.section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  font-weight: 600;
  margin: 20px 2px 10px;
}

/* Sélecteur de mode segmenté */
.seg {
  display: flex;
  gap: 6px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
}
.seg-lg { margin-bottom: 14px; }
.seg-btn {
  flex: 1;
  padding: 10px 8px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg-btn.active { background: var(--accent); color: #fff; }

.score-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 6px 0;
}
.cmp-order { margin-top: 8px; }
.delta-summary { margin-top: 12px; font-size: 13px; color: var(--text-dim); }
.cmp-legend { margin-top: 10px; font-size: 12px; color: var(--text-dim); }
.cmp-legend .c-int { color: var(--int); }
.cmp-legend .c-exp { color: var(--exp); }

/* Colonne de valeurs comparées, à droite d'une ligne de question */
.cmp-vals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  flex-shrink: 0;
}
.cmp-line { display: flex; align-items: center; gap: 6px; }
.cmp-k { font-size: 11px; color: var(--text-dim); width: 24px; text-align: right; }
.arrow, .cmp-vs { color: var(--text-dim); font-size: 12px; }

/* Pastille de valeur 0–5 */
.vchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.vchip-int { color: var(--int); }
.vchip-exp { color: var(--exp); }

/* Badge de variation (évolution) */
.delta { font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 99px; white-space: nowrap; }
.delta.up { color: var(--int); background: rgba(87, 184, 148, 0.16); }
.delta.down { color: var(--danger); background: rgba(217, 83, 79, 0.16); }
.delta.flat { color: var(--text-dim); background: var(--bg-elev-2); }
.delta.new { color: var(--accent); background: var(--accent-soft); }

/* Statistiques cliquables → filtrent les pratiques.
   Sélecteurs scopés sous .stat-tiles pour l'emporter sur « .stat-tiles .tile ». */
.stat-tiles .tile.clickable {
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.stat-tiles .tile.clickable:hover { border-color: var(--accent); }
.stat-tiles .tile.clickable:active { transform: scale(0.97); }
/* Surbrillance pleine de la tuile sélectionnée (comme la sélection du quiz) */
.stat-tiles .tile.active { background: var(--accent); border-color: var(--accent); }
.stat-tiles .tile.active b,
.stat-tiles .tile.active span { color: #fff; }
.tiles-hint { margin-top: 10px; font-size: 12px; color: var(--text-dim); }

/* Bandeau de filtre actif */
.filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 2px 10px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 12px;
  font-size: 13px;
}
.filter-banner b { color: var(--text); }
.filter-clear {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 99px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.filter-clear:hover { border-color: var(--accent); color: var(--accent); }

/* Badge de compatibilité (par pratique) */
.cbadge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.cbadge.match { color: #ff9ecb; background: rgba(255, 120, 180, 0.16); }
.cbadge.explore { color: var(--accent); background: var(--accent-soft); }
.cbadge.conflict { color: var(--danger); background: rgba(217, 83, 79, 0.16); }
.cbadge.aligned { color: var(--int); background: rgba(87, 184, 148, 0.16); }
.cbadge.neutral { color: var(--text-dim); background: var(--bg-elev-2); }

/* Liseré à gauche des lignes selon la compatibilité */
.qrow-match { box-shadow: inset 3px 0 0 #ff78b4; }
.qrow-conflict { box-shadow: inset 3px 0 0 var(--danger); }
.qrow-explore { box-shadow: inset 3px 0 0 var(--accent); }

/* Info-bulle « limite précisée » sur une ligne de conflit (page comparaison) */
.cbadge-info { position: relative; display: inline-flex; align-items: center; gap: 5px; }
.limit-info {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  opacity: 0.9;
}
.limit-info:hover { opacity: 1; }
.limit-tip {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: min(260px, 74vw);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  text-align: left;
  white-space: normal;
}
.limit-tip.show { display: block; }
.limit-tip-head { display: block; font-weight: 600; color: var(--danger); margin-bottom: 6px; }
.limit-tip div > b { color: var(--text-dim); font-weight: 600; margin-right: 5px; }
.limit-tip ul { margin: 3px 0 0; padding-left: 16px; }
.limit-tip li { margin: 2px 0; }
/* Détails d'une fiche : chaque champ sur sa ligne */
.limit-tip-block > div,
.limit-tip > .limit-tip-head ~ div { margin-top: 5px; }
/* Info-bulle à plusieurs fiches (limite commune) : séparateur entre les personnes */
.limit-tip-block + .limit-tip-block { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }

/* Pastille « Limite précisée » cliquable sur la page résultat */
.limit-detail { display: inline-flex; }
.limit-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border-radius: 99px;
  padding: 3px 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
}
.limit-pill:hover { border-color: var(--accent); color: var(--accent); }

/* Badge « Limite commune » (les deux refusent) sur la page comparaison */
.cbadge.shared { color: #c9b8ec; background: rgba(150, 120, 220, 0.16); }
.qrow-shared { box-shadow: inset 3px 0 0 #9678dc; }

h1.page-title { font-size: 22px; margin: 4px 0 4px; }
p.lead { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 0 0 20px; }

.toast {
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 99px;
  font-size: 13px;
  box-shadow: var(--shadow);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.toast.show { opacity: 1; }

/* Crédit du test (accueil) */
.credit {
  margin: 20px 4px 8px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-dim);
}
.credit a { color: var(--accent); text-decoration: none; }
.credit a:hover { text-decoration: underline; }

/* Icône de partage dans le cadre résultat (sur la ligne du pseudo) */
.result-title-row { display: flex; align-items: center; gap: 10px; }
.result-title-row .q-label { flex: 1; min-width: 0; }
.share-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.share-icon:hover { color: var(--accent); border-color: var(--accent); }
.share-icon:active { transform: scale(0.94); }

/* Liens légaux (pied de page) */
.site-footer {
  margin: 14px 4px 8px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.8;
}
.site-footer a { color: var(--text-dim); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; }

/* ---------- Bandeau de consentement cookies ---------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.cookie-text {
  flex: 1 1 260px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}
.cookie-text a { color: var(--accent); text-decoration: none; }
.cookie-actions { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.cookie-actions .btn { flex: 0 0 auto; padding: 10px 18px; }

/* ---------- Pages légales ---------- */
.legal-page { max-width: 720px; margin: 0 auto; padding: 20px 16px 60px; line-height: 1.6; }
.legal-page h1 { font-size: 24px; margin: 4px 0 16px; }
.legal-page h2 { font-size: 17px; margin: 24px 0 8px; color: var(--text); }
.legal-page p, .legal-page li { color: var(--text-dim); font-size: 14.5px; }
.legal-page strong { color: var(--text); }
.legal-page ul { padding-left: 20px; }
.legal-page li { margin: 6px 0; }
.legal-page a { color: var(--accent); text-decoration: none; }
.legal-page a:hover { text-decoration: underline; }
.legal-footer { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; }

/* ---------- Clarification des limites ---------- */
.clar-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 18px 0 8px;
}
.clar-group { display: flex; flex-direction: column; gap: 8px; }
.clar-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.clar-option:hover { border-color: var(--accent-soft); }
.clar-option.selected { border-color: var(--accent); background: var(--accent-soft); }
.clar-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 2px solid var(--text-dim);
  border-radius: 50%;
  position: relative;
}
.clar-option.multi .clar-mark { border-radius: 5px; }
.clar-option.selected .clar-mark { border-color: var(--accent); }
.clar-option.selected .clar-mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: inherit;
}
.clar-text { flex: 1; }

/* ---------- Gamification ---------- */
.warning-box {
  background: rgba(217, 83, 79, 0.12);
  border: 1px solid rgba(217, 83, 79, 0.4);
  color: #f0b8b6;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--text-dim);
  cursor: pointer;
}
.consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
.consent-note { font-size: 12px; color: var(--text-dim); margin: 8px 0 0; line-height: 1.5; }
.consent-note a { color: var(--accent); text-decoration: none; }

/* Sélecteur de type de test sur l'accueil */
.test-select { display: flex; flex-direction: column; gap: 8px; }
.test-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.test-option:hover { border-color: var(--accent); }
.test-option.active { border-color: var(--accent); background: var(--accent-soft); }
.test-option input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
.test-option .test-name { flex: 1; font-weight: 600; color: var(--text); min-width: 0; }
.test-option .test-count { color: var(--text-dim); font-size: 12px; flex: 0 0 auto; }

.stats-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.rank-badge { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rank-emoji {
  font-size: 30px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  border-radius: 14px;
  flex: 0 0 auto;
}
.rank-title { font-size: 16px; font-weight: 650; }
.rank-title.big { font-size: 20px; color: var(--accent); margin: 4px 0 14px; }
.stat-tiles { display: flex; gap: 8px; }
.stat-tiles .tile {
  flex: 1;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}
.stat-tiles .tile b { display: block; font-size: 22px; color: var(--text); }
.stat-tiles .tile span { font-size: 11px; color: var(--text-dim); }
.meter { margin-top: 14px; }
.meter-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.meter-bar { height: 8px; background: var(--bg-elev-2); border-radius: 99px; overflow: hidden; }
.meter-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--int), var(--accent), var(--danger));
  transition: width 0.3s ease;
}

.game-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translate(-50%, -140%);
  max-width: 92%;
  background: var(--bg-elev-2);
  border: 1px solid var(--accent-soft);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 550;
  text-align: center;
  box-shadow: var(--shadow);
  z-index: 40;
  transition: transform 0.4s cubic-bezier(0.2, 1.2, 0.3, 1);
}
.game-banner.show { transform: translate(-50%, 0); }
.game-banner.rank {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-elev-2));
}

.confetti-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 55;
}
.finish-overlay {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(10, 11, 15, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.finish-overlay.show { opacity: 1; }
.finish-inner {
  max-width: 420px; width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.2, 1.2, 0.3, 1);
}
.finish-overlay.show .finish-inner { transform: translateY(0) scale(1); }
.finish-rank { font-size: 58px; line-height: 1; margin-bottom: 8px; animation: pop 0.6s ease both; }
.finish-inner h1 { font-size: 24px; margin: 4px 0; }
.finish-sub { color: var(--text-dim); margin: 0 0 8px; }
.finish-msgs { color: var(--text-dim); font-size: 14px; margin: 16px 0 20px; line-height: 1.5; }
.finish-msgs p { margin: 4px 0; }
.finish-inner .btn { width: 100%; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------- Admin ---------- */
.admin-wrap { max-width: 820px; margin: 0 auto; padding: 20px 16px 60px; }

/* Onglets */
.tabbar {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  border-bottom: 1px solid var(--border);
}
.tab {
  background: none;
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* Catégories en accordéon */
details.accordion { }
details.accordion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  background: var(--bg-elev-2);
  user-select: none;
}
details.accordion > summary::-webkit-details-marker { display: none; }
details.accordion > summary::before {
  content: '▸';
  color: var(--text-dim);
  font-size: 12px;
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
details.accordion[open] > summary::before { transform: rotate(90deg); }
.cat-summary .cat-name { flex: 1; font-weight: 600; min-width: 0; }
.cat-body { }

.admin-cat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.admin-cat > header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--bg-elev-2);
}
.admin-cat > header input { flex: 1 1 160px; min-width: 0; }
.admin-q-wrap { border-top: 1px solid var(--border); padding: 8px 14px; }
.admin-q {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; border-top: 1px solid var(--border);
}
.admin-q-wrap .admin-q { border-top: none; padding: 0; }
.admin-q input { flex: 1 1 160px; min-width: 0; }
.q-desc-input {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 42px;
  resize: vertical;
  color: var(--text-dim);
}
input.field, select.field, textarea.field {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  font-size: 14px;
}
.icon-btn {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 13px;
}
.icon-btn:hover { color: var(--text); }
.icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mt { margin-top: 16px; }
.center { text-align: center; }
.login-box {
  max-width: 340px; margin: 12vh auto 0; padding: 24px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
}
.login-box input { width: 100%; margin: 12px 0; }
.err { color: var(--danger); font-size: 13px; min-height: 18px; }