/* SpeakPro Academy — Activity Practice (moteur commun, 03/11/2026). Identité SpeakPro : navy, terracotta, crème. */
.pe{ --pe-navy:#10233F; --pe-terra:#C8683F; --pe-terra-d:#A34F2B; --pe-cream:#FBF7F2; --pe-sand:#F3EBE1; --pe-line:#E7DDD1; --pe-ink:#1E2A3F; --pe-mute:#5C6B84;
  --pe-ok:#2E7D5B; --pe-ok-bg:#E8F4EE; --pe-ko:#B3412E; --pe-ko-bg:#FBEBE6; color:var(--pe-ink); font-size:15px; line-height:1.55; }
.pe *{ box-sizing:border-box; }
.pe-loading,.pe-msg{ padding:22px; text-align:center; color:var(--pe-mute); }
.pe-card{ background:#fff; border:1px solid var(--pe-line); border-radius:20px; padding:22px; }
.pe-kicker{ display:block; font:700 11.5px/1.3 'Plus Jakarta Sans',Inter,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--pe-terra-d); }
.pe-title{ margin:4px 0 0; font:600 22px/1.25 Fraunces,Georgia,serif; color:var(--pe-navy); }
.pe-lead{ margin:14px 0 12px; }
.pe-note{ margin:12px 0 0; font-size:13px; color:var(--pe-mute); }
.pe-resume{ margin:14px 0 0; padding:10px 14px; background:var(--pe-sand); border-radius:12px; font-weight:600; color:var(--pe-navy); }



.pe-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.pe-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 20px; border-radius:999px; border:1px solid var(--pe-terra); background:var(--pe-terra); color:#fff;
  font:700 14.5px/1 'Plus Jakarta Sans',Inter,sans-serif; cursor:pointer; text-decoration:none; transition:background .15s, transform .15s; }
.pe-btn:hover{ background:var(--pe-terra-d); border-color:var(--pe-terra-d); }
.pe-btn:disabled{ opacity:.45; cursor:not-allowed; }
.pe-btn.is-ghost{ background:#fff; color:var(--pe-navy); border-color:var(--pe-line); }
.pe-btn.is-ghost:hover:not(:disabled){ border-color:var(--pe-navy); background:#fff; }
/* item */
.pe-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.pe-top .pe-kicker{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-quit{ flex:none; background:none; border:0; padding:4px 0; color:var(--pe-mute); font:600 13px Inter,sans-serif; cursor:pointer; text-decoration:underline; }
.pe-progress{ margin:12px 0 14px; }
.pe-progress-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:13px; }
.pe-progress-row strong{ color:var(--pe-navy); }
.pe-score{ color:var(--pe-mute); } .pe-score .ok{ color:var(--pe-ok); font-weight:600; } .pe-score .ko{ color:var(--pe-ko); font-weight:600; }
.pe-bar{ margin-top:6px; height:6px; border-radius:6px; background:var(--pe-sand); overflow:hidden; }
.pe-bar span{ display:block; height:100%; background:var(--pe-terra); border-radius:6px; transition:width .3s; }
.pe-format{ display:inline-block; font-size:12px; font-weight:700; color:var(--pe-navy); background:var(--pe-sand); border-radius:999px; padding:4px 10px; }
.pe-q{ margin:10px 0 12px; font-weight:600; font-size:16px; color:var(--pe-navy); }
.pe-hint{ margin:0 0 10px; font-size:13px; color:var(--pe-mute); }
.pe-stem,.pe-source{ margin:0 0 12px; padding:12px 14px; background:var(--pe-cream); border:1px solid var(--pe-line); border-radius:12px; font-size:16px; }
.pe-blank{ color:var(--pe-terra-d); font-weight:700; letter-spacing:.05em; }
.pe-options{ display:grid; gap:8px; }
.pe-opt,.pe-mi,.pe-tile,.pe-tok,.pe-chip,.pe-seg-b{ font:500 15px/1.35 Inter,sans-serif; color:var(--pe-ink); background:#fff; border:1.5px solid var(--pe-line); border-radius:12px; cursor:pointer; text-align:left;
  -webkit-tap-highlight-color:transparent; transition:border-color .12s, background .12s; }
.pe-opt{ min-height:48px; padding:10px 14px; width:100%; }
.pe-opt:hover:not(:disabled),.pe-mi:hover,.pe-tile:hover,.pe-tok:hover,.pe-chip:hover{ border-color:var(--pe-navy); }
.pe .is-sel{ border-color:var(--pe-terra); background:#FDF1EA; }
.pe .is-right{ border-color:var(--pe-ok)!important; background:var(--pe-ok-bg)!important; }
.pe .is-wrong{ border-color:var(--pe-ko)!important; background:var(--pe-ko-bg)!important; }
.pe-opt:disabled{ cursor:default; color:var(--pe-ink); }
/* trous */
.pe-gaptext{ font-size:16.5px; line-height:2.3; margin:0 0 10px; }
.pe-gap{ font:600 16px Inter,sans-serif; width:9.5em; max-width:100%; min-height:38px; padding:4px 8px; border:0; border-bottom:2px solid var(--pe-terra); background:var(--pe-cream); border-radius:8px 8px 0 0; color:var(--pe-navy); text-align:center; }
.pe-gap:focus{ outline:2px solid var(--pe-terra); outline-offset:2px; }
.pe-bank{ display:flex; flex-wrap:wrap; gap:8px; }
.pe-chip{ min-height:40px; padding:6px 14px; border-radius:999px; }
/* ordre */
.pe-line{ min-height:58px; padding:8px; border:2px dashed var(--pe-line); border-radius:14px; display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; background:var(--pe-cream); margin-bottom:12px; }
.pe-line.is-empty::before{ content:attr(data-empty); color:var(--pe-mute); font-size:13px; padding:8px; }
.pe-line.is-lines,.pe-pool.is-lines{ flex-direction:column; }
.pe-pool{ display:flex; flex-wrap:wrap; gap:8px; min-height:48px; }
.pe-tile{ min-height:44px; padding:8px 14px; }
.pe-line.is-lines .pe-tile,.pe-pool.is-lines .pe-tile{ width:100%; }
.pe-tile b{ color:var(--pe-terra-d); margin-right:4px; }
.pe-reset{ margin-top:10px; background:none; border:0; padding:4px 0; color:var(--pe-mute); font:600 13px Inter,sans-serif; text-decoration:underline; cursor:pointer; }
.is-done .pe-reset{ display:none; }
/* association */
.pe-cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pe-col{ display:grid; gap:8px; align-content:start; }
.pe-mi{ min-height:48px; padding:8px 12px; position:relative; font-size:14px; }
.pe-mi.is-paired{ border-color:var(--pe-navy); padding-left:34px; }
.pe-mi.is-paired::before{ content:attr(data-n); position:absolute; left:8px; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50%; background:var(--pe-navy); color:#fff; font:700 11px/20px Inter,sans-serif; text-align:center; }
/* classement */
.pe-sort-row{ padding:10px 12px; border:1.5px solid var(--pe-line); border-radius:12px; margin-bottom:8px; }
.pe-sort-item{ display:block; font-weight:600; margin-bottom:8px; }
.pe-seg{ display:flex; flex-wrap:wrap; gap:6px; }
.pe-seg-b{ min-height:38px; padding:6px 12px; border-radius:999px; font-size:13.5px; }
/* correction d'erreur */
.pe-tokens{ font-size:17px; line-height:2.4; margin:0 0 12px; }
.pe-tok{ padding:4px 8px; min-height:36px; border-radius:8px; }
.pe-fix-opts{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
/* saisie */
.pe-input{ width:100%; font:500 16px/1.5 Inter,sans-serif; padding:12px 14px; border:1.5px solid var(--pe-line); border-radius:12px; color:var(--pe-ink); resize:vertical; background:#fff; }
.pe-input:focus{ outline:none; border-color:var(--pe-terra); }
.pe-help{ margin:0 0 10px; padding-left:18px; font-size:13.5px; color:var(--pe-mute); }
.pe-count{ margin:6px 0 0; font-size:12.5px; color:var(--pe-mute); text-align:right; }
.pe-passage{ margin-bottom:12px; border:1px solid var(--pe-line); border-radius:12px; background:var(--pe-cream); }
.pe-passage summary{ padding:10px 14px; font-weight:700; color:var(--pe-navy); cursor:pointer; }
.pe-passage-text{ padding:0 14px 12px; font-size:15px; }
.pe-audio{ margin-bottom:12px; } .pe-audio audio{ width:100%; }
/* retour */
.pe-fb:empty{ display:none; }
.pe-fb{ margin-top:14px; padding:14px 16px; border-radius:14px; border:1px solid; }
.pe-fb.is-ok{ background:var(--pe-ok-bg); border-color:#BFDCCB; } .pe-fb.is-ko{ background:var(--pe-ko-bg); border-color:#EDC6BB; }
.pe-verdict{ margin:0 0 6px; font:700 16px 'Plus Jakarta Sans',Inter,sans-serif; }
.is-ok .pe-verdict{ color:var(--pe-ok); } .is-ko .pe-verdict{ color:var(--pe-ko); }
.pe-given,.pe-answer,.pe-rule{ margin:8px 0 0; }
.pe-given span,.pe-answer>span,.pe-rule span{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pe-mute); }
.pe-answer p{ margin:0; font-weight:600; color:var(--pe-navy); } .pe-answer ul{ margin:2px 0 0; padding-left:18px; font-weight:600; color:var(--pe-navy); }
.pe-x{ margin:8px 0 0; }
.pe-rule{ padding:8px 10px; background:rgba(255,255,255,.7); border-radius:10px; font-weight:600; }
.pe-checks{ list-style:none; margin:6px 0 0; padding:0; }
.pe-checks li{ padding-left:24px; position:relative; margin:4px 0; }
.pe-checks li::before{ position:absolute; left:0; font-weight:800; } .pe-checks li.ok::before{ content:'✓'; color:var(--pe-ok); } .pe-checks li.ko::before{ content:'✗'; color:var(--pe-ko); }
.pe-nav{ display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
.pe-nav .pe-check{ flex:1; max-width:260px; margin-left:auto; }
/* bilan */
.pe-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0; }
.pe-stats div{ background:var(--pe-cream); border:1px solid var(--pe-line); border-radius:14px; padding:12px 8px; text-align:center; }
.pe-stats b{ display:block; font:600 24px/1.1 Fraunces,Georgia,serif; color:var(--pe-navy); } .pe-stats span{ font-size:12px; color:var(--pe-mute); }
.pe-stats .ok b{ color:var(--pe-ok); } .pe-stats .ko b{ color:var(--pe-ko); }
.pe-summary h4{ margin:18px 0 8px; font:700 15px 'Plus Jakarta Sans',Inter,sans-serif; color:var(--pe-navy); }
.pe-weak{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.pe-weak li{ display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:var(--pe-ko-bg); font-weight:600; }
.pe-weak li span{ color:var(--pe-ko); font-size:13px; white-space:nowrap; }
.pe-review{ margin-top:16px; border:1px solid var(--pe-line); border-radius:14px; }
.pe-review summary{ padding:12px 14px; font-weight:700; color:var(--pe-navy); cursor:pointer; }
.pe-review-item{ padding:12px 14px; border-top:1px solid var(--pe-line); }
.pe-review-item .pe-q{ margin-top:0; font-size:15px; }
@media (max-width:560px){
  .pe-card{ padding:16px; border-radius:16px; }
  .pe-title{ font-size:19px; }
  .pe-stats{ grid-template-columns:repeat(2,1fr); }
  .pe-cols{ gap:8px; } .pe-mi{ font-size:13.5px; padding:8px 10px; } .pe-mi.is-paired{ padding-left:30px; }
  .pe-actions .pe-btn{ flex:1 1 100%; }
  .pe-nav .pe-btn{ padding:0 14px; }
}
@media (prefers-reduced-motion:reduce){ .pe-bar span,.pe-btn{ transition:none; } }
/* 04/11/2026 — passer l'entraînement sans tout finir (progression gardée). */
.pe-top-act{ display:inline-flex; align-items:center; gap:14px; flex:none; }
.pe-go{ color:var(--pe-terra-d); text-decoration:none; }
.pe-go:hover{ text-decoration:underline; }
.pe-free{ margin-top:6px; }
@media (max-width:480px){ .pe-top{ flex-wrap:wrap; row-gap:6px; } }

/* 07/11/2026 : carte d'accueil centrée, comme les en-têtes des sections Classic. */
.pe-intro{ text-align:center; }
.pe-intro .pe-head{ display:flex; flex-direction:column; align-items:center; }
.pe-intro .pe-lead{ margin-left:auto; margin-right:auto; max-width:34ch; }
.pe-intro .pe-actions{ justify-content:center; }