/* =========================================================================
   Moteur commun des QCM de positionnement (test-m1, test-b3, ...)
   Feuille de style identique dans chaque dépôt : ne pas la modifier dans un
   seul d'entre eux. Ce qui est propre à un test se règle dans site.js.
   ========================================================================= */
:root { --bg: #f4f6f9; --text: #2c3e50; --accent: #3498db; }
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg); color: var(--text); padding: 30px; max-width: 800px; margin: auto; }
h1 { border-bottom: 3px solid var(--accent); padding-bottom: 10px; margin-bottom: 6px; text-align: center; font-size: 2em; }
.sous-titre { text-align: center; color: #7f8c8d; font-size: 0.9em; margin: 0 0 22px 0; }

/* ---------- bandeau de progression ---------- */
.progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 20px; }
.progress-bar-container { flex-grow: 1; height: 6px; background-color: #ecf0f1; border-radius: 4px; overflow: hidden; display: flex; }
.progress-fill { height: 100%; background-color: var(--accent); transition: width 0.4s ease; width: 0%; }
.progress-stats { display: flex; align-items: center; gap: 12px; font-size: 0.95em; font-weight: 600; color: #7f8c8d; white-space: nowrap; }
.stat-pill { padding: 4px 10px; border-radius: 20px; display: flex; align-items: center; gap: 5px; font-weight: 700; color: #1a252f; font-size: 0.9em; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.stat-wrong { background-color: #ff8a8a; }
.stat-right { background-color: #96f29b; }

/* ---------- chrono ---------- */
.timer-badge { font-size: 1.1em; font-weight: 700; padding: 8px 18px; border-radius: 25px; display: inline-block; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: background-color 0.3s, color 0.3s; }
.timer-safe { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.timer-warn { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.timer-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; animation: pulse 1s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* ---------- bloc question ---------- */
.question-block { background: white; padding: 35px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #e1e8ed; }
.question-block h3 { margin-top: 0; font-size: 1.2em; color: #1a252f; line-height: 1.4; }
.q-domaine { display: inline-block; font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 20px; color: #fff; margin-bottom: 14px; }
.q-domaine .bc { opacity: .75; font-weight: 600; }
.q-consigne { font-size: 0.85em; color: #7f8c8d; font-style: italic; margin: 10px 0 0 0; }

.options-container { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
button.option-btn { padding: 12px 20px; text-align: left; border: 1px solid #bdc3c7; background-color: #ecf0f1; border-radius: 6px; cursor: pointer; font-size: 1em; transition: all 0.2s ease; font-weight: 500; font-family: inherit; color: var(--text); line-height: 1.45; }
button.option-btn:hover:not(:disabled) { background-color: #d5dbdb; border-color: #95a5a6; }
button.option-btn:disabled { cursor: default; color: #333; }
button.option-btn.option-choisie { background-color: #d6dbdf; border-color: #7f8c8d; }
button.option-btn.opt-bonne { background-color: #d4edda; border-color: #c3e6cb; color: #155724; font-weight: 600; }
button.option-btn.opt-mauvaise { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; }
button.option-btn code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px; font-size: .92em; }

.feedback { margin-top: 20px; padding: 15px; border-radius: 6px; line-height: 1.5; }
.correct { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.incorrect { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.feedback strong { display: block; margin-bottom: 6px; }

.next-btn { margin-top: 20px; background-color: var(--accent); color: white; border: none; padding: 12px 25px; font-size: 1em; border-radius: 6px; cursor: pointer; font-weight: bold; transition: 0.2s; font-family: inherit; }
.next-btn:hover:not(:disabled) { background-color: #2980b9; }
.next-btn:disabled { background-color: #bdc3c7; cursor: not-allowed; }
.btn-continue { background-color: #27ae60; } .btn-continue:hover:not(:disabled) { background-color: #219150; }
.btn-pause { background-color: #f39c12; } .btn-pause:hover:not(:disabled) { background-color: #d68910; }
.actions-question { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.actions-question .next-btn { margin-top: 0; }

/* ---------- schémas ---------- */
.schema-cli { margin: 18px 0 4px 0; background: #fbfcfd; border: 1px solid #e1e8ed; border-left: 4px solid var(--accent); border-radius: 6px; padding: 14px 16px; overflow-x: auto; }
.schema-cli pre { margin: 0; font-family: 'Consolas', 'Courier New', monospace; font-size: 0.82em; line-height: 1.5; color: #1a252f; white-space: pre; }
.schema-cli svg { width: 100%; height: auto; display: block; max-width: 640px; margin: 0 auto; }
.tbl-plan { width: 100%; border-collapse: collapse; font-size: 0.84em; min-width: 440px; }
.tbl-plan th { text-align: left; padding: 7px 8px; border-bottom: 2px solid #0056b3; color: #0056b3; font-size: 0.88em; text-transform: uppercase; letter-spacing: .03em; }
.tbl-plan td { padding: 7px 8px; border-bottom: 1px solid #e1e6ec; font-variant-numeric: tabular-nums; }
.tbl-plan td.n { text-align: center; font-weight: 600; }
.tbl-plan td.libre { background: #e8f4f8; color: #2980b9; font-style: italic; text-align: center; font-weight: 600; }
.tbl-note { margin: 10px 0 0 0; font-size: 0.78em; color: #7f8c8d; font-style: italic; }

/* ---------- écran d'accueil ---------- */
.accueil { background: white; padding: 35px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #e1e8ed; text-align: center; }
.accueil h2 { margin-top: 0; color: #1a252f; }
.accueil > p { color: #7f8c8d; }
.info-box { background-color: #e8f4f8; border-left: 4px solid var(--accent); padding: 15px; margin: 0 auto 25px auto; max-width: 520px; font-size: 0.95em; color: #1f6f9f; text-align: left; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.03); line-height: 1.5; }
.info-box p { margin: 0; }
.info-box p + p { margin-top: 8px; }
.input-user { padding: 15px; font-size: 1.05em; border-radius: 6px; border: 2px solid #bdc3c7; width: 100%; max-width: 350px; margin-bottom: 15px; text-align: center; transition: 0.3s; font-family: inherit; }
.input-user:focus { border-color: var(--accent); outline: none; }

/* Secousse amortie façon iOS : l'amplitude décroît à chaque aller-retour. */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  8%   { transform: translateX(-10px); }
  20%  { transform: translateX(9px); }
  32%  { transform: translateX(-7px); }
  44%  { transform: translateX(5px); }
  58%  { transform: translateX(-3px); }
  74%  { transform: translateX(2px); }
  88%  { transform: translateX(-1px); }
}
.error-shake { animation: shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
/* État d'attente du champ, maintenu jusqu'à la première frappe. */
.input-user.champ-invalide,
.input-user.champ-invalide:focus { border-color: #e74c3c; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.18); }
.message-champ { min-height: 1.3em; margin: -6px auto 12px auto; font-size: 0.9em; font-weight: 600; color: #c0392b; }
@media (prefers-reduced-motion: reduce) {
  .error-shake { animation: none; }
}

.parcours-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0 0 0; text-align: left; }
.parcours { border: 1px solid #e1e8ed; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; box-shadow: 0 2px 5px rgba(0,0,0,.05); }
.parcours-tete { background: #0056b3; color: #fff; padding: 10px 14px; }
.parcours-tete .code { font-size: 0.78em; font-weight: 700; letter-spacing: .06em; opacity: .9; }
.parcours-tete .titre { font-size: 0.95em; font-weight: 700; line-height: 1.3; margin-top: 2px; }
.parcours-corps { padding: 12px 14px 14px 14px; flex-grow: 1; display: flex; flex-direction: column; gap: 9px; }
.parcours-corps p { margin: 0; font-size: 0.86em; color: #5a6b7b; line-height: 1.4; }
.parcours-chiffres { font-size: 0.82em; color: #2c3e50; font-weight: 600; }
.parcours-repartition { font-size: 0.8em; color: #7f8c8d; font-weight: 600; line-height: 1.4; }
.parcours button { margin-top: auto; width: 100%; }
.parcours-complet { grid-column: 1 / -1; }
.parcours-complet .parcours-tete { background: #1e8449; }
.note-banque { font-size: 0.82em; color: #7f8c8d; margin: 16px 0 0 0; line-height: 1.4; text-align: center; }
.sep-accueil { border: 0; border-top: 1px solid #e1e8ed; margin: 28px 0 20px 0; }
.note-reprise { text-align: center; color: #7f8c8d; font-size: 0.9em; margin: -4px 0 15px 0; }

/* ---------- écran de score ---------- */
.score-screen { text-align: center; padding: 40px; background: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #e1e8ed; }
.score-screen h2 { color: var(--accent); font-size: 2.4em; margin: 0; }
.score-screen .sous-score { margin: 2px 0 16px 0; font-size: 0.85em; font-weight: 700; color: #7f8c8d; text-transform: uppercase; letter-spacing: .06em; }
.score-screen > p.resume { font-size: 1.1em; margin: 0 0 22px 0; line-height: 1.5; }
.verdict { display: inline-block; padding: 10px 22px; border-radius: 25px; font-weight: 700; margin-bottom: 18px; }
.v-ok { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.v-moyen { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.v-faible { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.v-neutre { background: #ecf0f1; color: #2c3e50; border: 1px solid #d5dbdb; font-weight: 600; }
.note-correction { margin: 0 auto 26px auto; max-width: 560px; font-size: 0.84em; color: #5a6b7b; line-height: 1.5; }

.profil { text-align: left; margin-bottom: 26px; }
.profil h3 { font-size: 1.05em; color: #1a252f; margin: 0 0 4px 0; }
.profil .sous { color: #7f8c8d; font-size: 0.85em; margin: 0 0 14px 0; }
.barre-dom { margin-bottom: 13px; }
.barre-dom .ligne { display: flex; justify-content: space-between; font-size: 0.88em; margin-bottom: 5px; gap: 10px; }
.barre-dom .nom { font-weight: 600; }
.barre-dom .nom .bc { color: #7f8c8d; font-weight: 600; font-size: .88em; }
.barre-dom .val { font-variant-numeric: tabular-nums; color: #7f8c8d; font-weight: 600; white-space: nowrap; }
.barre-dom .val strong { color: #2c3e50; }
.barre-piste { height: 10px; background: #ecf0f1; border-radius: 5px; overflow: hidden; }
.barre-rempl { height: 100%; border-radius: 5px; transition: width .5s ease; }

.statut-envoi { margin: 24px auto 0 auto; max-width: 520px; padding: 11px 16px; border-radius: 6px; font-size: 0.88em; line-height: 1.45; text-align: left; }

.cartouche-avis { border-radius: 10px; overflow: hidden; margin: 0 0 26px 0; text-align: left; }
.cartouche-avis .titre { background: #0056b3; color: #fff; padding: 9px 16px; font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cartouche-avis .corps { background: #fff; border: 1px solid #e1e8ed; border-top: 0; padding: 13px 16px; font-size: 0.9em; line-height: 1.5; }

.recap-container { margin-top: 30px; text-align: left; background: #fff; padding: 25px; border-radius: 8px; border: 1px solid #e1e8ed; max-height: 460px; overflow-y: auto; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
.recap-container > h3 { margin-top: 0; font-size: 1.05em; color: #1a252f; }
.recap-item { margin-bottom: 25px; padding: 15px; background-color: #fdfefe; border-left: 4px solid #e74c3c; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.recap-question { font-weight: 600; color: #2c3e50; margin-bottom: 10px; font-size: 1.05em; line-height: 1.4; }
.recap-ans-wrong { font-size: 0.95em; margin-bottom: 5px; color: #7f8c8d; }
.recap-ans-right { font-size: 0.95em; margin-bottom: 10px; color: #2c3e50; }
.recap-explanation { font-size: 0.9em; color: #34495e; background-color: #e8f4f8; padding: 12px; border-radius: 4px; line-height: 1.5; border-left: 3px solid var(--accent); }

/* ---------- cartouche de sources ---------- */
.source-cartouche { margin-top: 50px; margin-bottom: 20px; padding: 25px 20px; background-color: #f8f9fa; border-top: 4px solid #0056b3; border-radius: 0 0 8px 8px; text-align: center; color: #333; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.source-cartouche h4 { margin: 0 0 20px 0; font-size: 16px; color: #0056b3; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }
.source-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.source-badge { background-color: #ffffff; border: 1px solid #dee2e6; padding: 8px 15px; border-radius: 30px; font-size: 13px; font-weight: 600; color: #495057; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; }
.source-badge:hover { transform: translateY(-2px); border-color: #0056b3; color: #0056b3; box-shadow: 0 4px 8px rgba(0,86,179,0.1); text-decoration: none; }
.pied { text-align: center; color: #7f8c8d; font-size: 0.78em; margin-bottom: 10px; }

@media (max-width: 600px) {
  body { padding: 16px; }
  h1 { font-size: 1.4em; }
  .question-block, .accueil, .score-screen { padding: 20px; }
  .progress-header { flex-wrap: wrap; gap: 10px; }
  .actions-question { flex-direction: column-reverse; align-items: stretch; }
  .actions-question .next-btn { width: 100%; }
  .schema-cli pre { font-size: 0.72em; }
}