/* =====================================================================
   TEST COMPLET CECRL — présentation partagée
   placement-test-start, grammar-vocab-test, reading-test, listening-test,
   writing-test, speaking-test, placement-test-report.
   Classes préfixées « tp- ». Les cartes de réponse réutilisent le
   composant .quiz-option de style.css (même rendu que le test rapide et
   les quiz des modules).
   ===================================================================== */

.tp-page{
  --tp-ivory:#FAF6F1; --tp-ivory-2:#F3EBE1; --tp-line:#E6DCD0; --tp-line-2:#D8CCBE;
  --tp-mute:#5E6878; --tp-ok:#1F6B47; --tp-ok-t:#E6F3EC; --tp-warn:#7A5212; --tp-warn-t:#FFF4E0;
  --tp-err:#B42318; --tp-err-t:#FDECEA;
  --tp-shadow:0 1px 2px rgba(16,35,63,.04), 0 12px 32px rgba(16,35,63,.07);
  background:var(--tp-ivory); padding:32px 0 72px; min-height:78vh;
}
.tp-wrap{ max-width:700px; margin:0 auto; padding:0 24px; }
.tp-wrap--wide{ max-width:1120px; }

/* ---------- Étapes du test (état réel du parcours) ---------- */
.tp-steps{ list-style:none; margin:0 0 22px; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.tp-steps li{ min-width:0; }
.tp-steps .tp-bar{ display:block; height:5px; border-radius:100px; background:#E9DFD3; margin-bottom:8px; }
.tp-steps .is-done .tp-bar{ background:var(--navy); }
.tp-steps .is-current .tp-bar{ background:var(--gold); }
.tp-steps .tp-step-label{ display:block; font-size:11.5px; font-weight:700; color:#8A919D; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp-steps .is-done .tp-step-label{ color:var(--navy); }
.tp-steps .is-current .tp-step-label{ color:var(--gold-dark); }
.tp-steps .is-done .tp-step-label::before{ content:'✓ '; }

.tp-status{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px; font-variant-numeric:tabular-nums; }
.tp-status-step{ font-family:var(--display); font-size:13px; font-weight:800; color:var(--navy); letter-spacing:.01em; }
.tp-status-count{ font-size:13px; font-weight:600; color:var(--tp-mute); }

/* ---------- Cartes ---------- */
.tp-card{ background:#fff; border:1px solid var(--tp-line); border-radius:20px; box-shadow:var(--tp-shadow); padding:34px 32px; }
.tp-card + .tp-card{ margin-top:18px; }
.tp-kicker{ display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:12px; }
.tp-kicker::before{ content:''; width:18px; height:1.5px; background:currentColor; opacity:.7; }
.tp-title{ font-family:var(--display-serif); font-weight:600; letter-spacing:-.01em; color:var(--navy); font-size:clamp(22px,2.6vw,27px); line-height:1.2; margin-bottom:14px; }
.tp-question{ font-family:var(--display); font-weight:700; color:var(--navy); font-size:clamp(19px,2.6vw,22px); line-height:1.45; margin-bottom:22px; }
.tp-lead{ color:var(--ink); font-size:15.5px; line-height:1.65; }
.tp-muted{ color:var(--tp-mute); font-size:13.5px; line-height:1.55; }

.tp-actions{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:28px; padding-top:22px; border-top:1px solid var(--tp-line); }
.tp-actions--end{ justify-content:flex-end; }
.tp-hint{ font-size:13px; color:var(--tp-mute); }
.tp-page .btn[disabled], .tp-page .btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
.tp-page .btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* ---------- Questions de compréhension (lecture / écoute) ---------- */
.tp-qblock{ padding:20px 0; border-top:1px solid var(--tp-line); }
.tp-qblock:first-child{ border-top:none; padding-top:4px; }
.tp-qlabel{ display:flex; gap:10px; font-weight:600; font-size:15.5px; line-height:1.45; color:var(--navy); margin-bottom:12px; }
.tp-qnum{ flex:0 0 auto; font-family:var(--display); font-size:12.5px; font-weight:800; color:var(--gold-dark); background:var(--tp-ivory-2); border-radius:7px; padding:2px 8px; height:fit-content; margin-top:1px; }
.tp-qblock .quiz-option{ min-height:50px; font-size:15px; }
.tp-answered{ font-size:13px; font-weight:600; color:var(--tp-mute); font-variant-numeric:tabular-nums; }

/* Lecture : texte et questions côte à côte sur grand écran */
.tp-reading{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:22px; align-items:start; }
.tp-passage{ position:sticky; top:100px; max-height:calc(100vh - 124px); overflow:auto; }
.tp-passage-text{ white-space:pre-line; color:var(--ink); line-height:1.75; font-size:16.5px; font-family:var(--sans); }
.tp-passage-label{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tp-mute); margin-bottom:10px; }

/* Écoute */
.tp-audio{ background:var(--tp-ivory); border:1px solid var(--tp-line); border-radius:16px; padding:18px; margin-bottom:24px; }
.tp-audio-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.tp-audio-icon{ flex:0 0 40px; height:40px; border-radius:12px; background:var(--navy); display:flex; align-items:center; justify-content:center; }
.tp-audio-head b{ display:block; font-size:14.5px; color:var(--navy); }
.tp-audio-head span{ display:block; font-size:13px; color:var(--tp-mute); }
.tp-audio audio{ width:100%; height:48px; display:block; }
.tp-audio-status{ margin-top:10px; font-size:13px; font-weight:600; color:var(--tp-mute); min-height:1.2em; }
.tp-audio-status.is-error{ color:var(--tp-err); }

/* Écrit */
.tp-prompt{ background:var(--tp-ivory); border:1px solid var(--tp-line); border-left:3px solid var(--gold); border-radius:12px; padding:16px 18px; color:var(--ink); font-size:15.5px; line-height:1.65; margin-bottom:20px; }
.tp-textarea{ width:100%; min-height:260px; padding:16px 18px; border:1.5px solid var(--tp-line-2); border-radius:14px; font-family:var(--sans); font-size:16px; line-height:1.7; color:var(--ink); resize:vertical; background:#fff; }
.tp-textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(200,104,63,.14); }
.tp-meter{ display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.tp-meter-bar{ flex:1 1 160px; height:6px; border-radius:100px; background:#EFE6DB; overflow:hidden; }
.tp-meter-fill{ height:100%; width:0; background:var(--gold); border-radius:100px; transition:width .2s ease; }
.tp-meter-fill.is-ok{ background:var(--tp-ok); }
.tp-meter-text{ font-size:13px; font-weight:600; color:var(--tp-mute); font-variant-numeric:tabular-nums; }
.tp-save-note{ font-size:12.5px; color:var(--tp-mute); margin-top:8px; min-height:1.2em; }

/* Oral */
.tp-record{ text-align:center; padding:18px 0 6px; }
.tp-record-btn{
  width:84px; height:84px; border-radius:50%; border:none; cursor:pointer;
  background:var(--navy); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(16,35,63,.25); transition:transform .15s ease, background-color .15s ease;
}
.tp-record-btn:hover{ transform:translateY(-2px); }
.tp-record-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }
.tp-record-btn .tp-dot{ width:26px; height:26px; border-radius:50%; background:#E0533F; transition:border-radius .15s ease, width .15s ease, height .15s ease; }
.tp-record-btn.is-recording{ background:#B42318; animation:tp-pulse 1.6s ease-in-out infinite; }
.tp-record-btn.is-recording .tp-dot{ width:24px; height:24px; border-radius:5px; background:#fff; }
@keyframes tp-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(180,35,24,.35); } 50%{ box-shadow:0 0 0 14px rgba(180,35,24,0); } }
.tp-record-status{ margin-top:14px; font-size:14px; font-weight:600; color:var(--navy); }
.tp-record-timer{ display:block; margin-top:4px; font-family:var(--display); font-size:22px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; }
.tp-inline-alert{ margin-top:14px; padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.5; text-align:left; }
.tp-inline-alert[hidden]{ display:none; }
.tp-inline-alert--error{ background:var(--tp-err-t); color:#7A1A11; border:1px solid #F5C9C3; }
.tp-inline-alert--warn{ background:var(--tp-warn-t); color:var(--tp-warn); border:1px solid #EBCB8B; }
.tp-loader{ height:6px; background:#EFE6DB; border-radius:100px; overflow:hidden; max-width:280px; margin:0 auto; }
.tp-loader > div{ height:100%; width:0; background:var(--gold); border-radius:100px; transition:width .2s; }
.tp-spinner{ width:26px; height:26px; border-radius:50%; border:3px solid #EFE6DB; border-top-color:var(--gold); animation:tp-spin .8s linear infinite; margin:0 auto 12px; }
@keyframes tp-spin{ to{ transform:rotate(360deg); } }

/* ---------- Résultats ---------- */
.tp-result{ text-align:center; }
.tp-level{ font-family:var(--display-serif); font-weight:600; color:var(--navy); font-size:clamp(44px,8vw,60px); line-height:1; letter-spacing:-.02em; margin:6px 0 10px; }
.tp-level-label{ font-size:15px; color:var(--tp-mute); }
.tp-score{ display:inline-flex; gap:8px; align-items:baseline; margin-top:10px; padding:6px 14px; border-radius:100px; background:var(--tp-ivory-2); color:var(--navy); font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; }
.tp-next{ margin-top:26px; }
.tp-next .btn{ justify-content:center; }
.tp-list{ text-align:left; color:var(--ink); font-size:14.5px; line-height:1.6; padding-left:20px; margin:0; }
.tp-list li + li{ margin-top:4px; }
.tp-subhead{ font-family:var(--display); font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin:18px 0 8px; text-align:left; }
.tp-fine{ font-size:12.5px; color:var(--tp-mute); line-height:1.55; margin-top:16px; }

/* Rapport : compétences */
.tp-skills{ display:grid; gap:8px; }
.tp-skill{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--tp-line); border-radius:12px; background:#fff; }
.tp-skill-name{ font-weight:600; color:var(--ink); }
.tp-skill-level{ min-width:58px; text-align:center; font-family:var(--display); font-weight:800; font-size:15px; color:var(--navy); background:var(--tp-ivory-2); border-radius:8px; padding:4px 10px; }
.tp-skill-level.is-empty{ background:#F1EEEA; color:#8A919D; font-weight:600; font-size:13px; }

/* Démarrage */
.tp-intro-steps{ list-style:none; padding:0; margin:22px 0 24px; display:grid; gap:8px; counter-reset:tpi; }
.tp-intro-steps li{ display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--tp-line); border-radius:12px; background:#fff; text-align:left; }
.tp-intro-steps li::before{ counter-increment:tpi; content:counter(tpi); flex:0 0 30px; height:30px; border-radius:9px; background:var(--tp-ivory-2); color:var(--navy); font-family:var(--display); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.tp-intro-steps b{ color:var(--navy); font-weight:700; }
.tp-intro-steps span{ color:var(--tp-mute); font-size:13.5px; }
.tp-intro-steps .tp-time{ margin-left:auto; white-space:nowrap; font-size:12.5px; }

/* ---------- Responsive ---------- */
@media(max-width:979px){
  .tp-reading{ grid-template-columns:1fr; }
  .tp-passage{ position:static; max-height:none; overflow:visible; }
}
@media(max-width:600px){
  .tp-page{ padding:20px 0 56px; }
  .tp-wrap{ padding:0 14px; }
  .tp-card{ padding:24px 18px; border-radius:16px; }
  .tp-steps .tp-step-label{ font-size:10.5px; }
  .tp-actions{ flex-wrap:wrap; }
  .tp-actions .btn{ flex:1 1 auto; justify-content:center; }
  .tp-intro-steps .tp-time{ display:none; }
}
@media(max-width:380px){
  .tp-steps .tp-step-label{ display:none; }
}
@media(prefers-reduced-motion: reduce){
  .tp-record-btn.is-recording{ animation:none; }
  .tp-spinner{ animation-duration:2s; }
  .tp-meter-fill{ transition:none; }
}
.tp-record-timer[hidden]{ display:none; }
/* 23/10/2026 — libellés d'étapes lisibles en entier sur mobile (« Grammaire » était tronqué) */
@media (max-width:420px){
  .tp-steps .tp-step-label{ white-space:normal; overflow:visible; text-overflow:clip; font-size:10.5px; line-height:1.25; overflow-wrap:anywhere; }
  .tp-steps .is-done .tp-step-label::before{ content:'✓'; margin-right:2px; }
}