/* ==========================================================================
   SpeakPro Academy — pages de parcours (liste des modules d'une formation)
   Inspiration : page de cours Coursera (présentation + faits clés, puis
   programme module par module) et mise en page Polaris (colonne principale
   2/3, contexte 1/3). Les cartes de module existantes sont conservées.
   ========================================================================== */
body.sp-learn .sp-hub-hero{ padding:56px 0 52px; }
.sp-hub-hero-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:64px; align-items:end; max-width:1120px; }
.sp-hub-intro h1{ max-width:16ch !important; }
.sp-hub-intro .lead{ max-width:52ch !important; }

/* Panneau de progression dans l'en-tête */
.sp-hub-panel{ background:#fff; border:1px solid #E5DBCF; border-radius:20px; padding:24px 24px 22px; }
.sp-hub-panel .card{ background:transparent !important; border:0 !important; padding:0 !important; margin:0 0 18px !important; }
.sp-hub-panel .card h3{ font-family:var(--display) !important; font-size:13px !important; font-weight:700 !important; letter-spacing:.12em; text-transform:uppercase; color:#6B707A !important; margin:0 !important; }
.sp-hub-panel [id$="-progress-pct"]{ font-family:var(--display-serif) !important; font-weight:600 !important; font-size:34px !important; color:#1E2430 !important; }
.sp-hub-panel .quiz-progress-bar{ height:6px; background:#EFE7DC; border-radius:6px; }
.sp-hub-panel .quiz-progress-fill{ background:#A9552F; border-radius:6px; }
.sp-hub-panel .card p{ font-size:13.5px !important; line-height:1.55; color:#6B707A !important; }
.sp-hub-cta{ width:100%; justify-content:center; }

/* Corps : programme + colonne de contexte */
body.sp-learn section.sp-hub-body{ padding:64px 0 96px; background:#fff; }
.sp-hub-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:72px; align-items:start; max-width:1120px; }
.sp-hub-main{ max-width:740px; }
.sp-hub-listhead{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid #E5DBCF; }
.sp-hub-listhead h2{ font-size:clamp(26px,3vw,34px) !important; margin:0; }
.sp-hub-listhead p{ margin:0; font-size:14px; color:#6B707A; }
.sp-hub-main .module-card{ margin-bottom:12px; }

.sp-hub-aside{ position:sticky; top:104px; }
.sp-hub-k{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#1E2430; margin:0 0 12px; }
.sp-hub-facts{ list-style:none; margin:0 0 28px; padding:0; border-top:1px solid #E5DBCF; }
.sp-hub-facts li{ padding:12px 0; border-bottom:1px solid #EFE7DC; font-size:15px; color:#1E2430; display:flex; gap:12px; align-items:baseline; }
.sp-hub-facts li::before{ content:"—"; color:#A9552F; }
.sp-hub-aside .card{ background:#FBF8F3 !important; border:1px solid #E5DBCF !important; border-radius:18px; padding:20px !important; margin:0 0 18px !important; }
.sp-hub-aside .card .card{ background:transparent !important; border:0 !important; border-bottom:1px solid #EFE7DC !important; border-radius:0; padding:10px 0 !important; margin:0 !important; }
.sp-hub-aside .card h3{ font-size:16px !important; font-weight:700; margin-bottom:4px; }
.sp-hub-aside .card .card h3{ font-size:13.5px !important; font-weight:600; }
.sp-hub-aside .quiz-progress-bar{ height:5px; background:#EFE7DC; }
.sp-hub-aside .quiz-progress-fill{ background:#A9552F; }
.sp-hub-note{ padding:20px; border:1px solid #E5DBCF; border-radius:18px; }
.sp-hub-note-t{ font-family:var(--display-serif); font-size:20px; line-height:1.25; color:#1E2430; margin:0 0 6px; }
.sp-hub-note p:not(.sp-hub-k):not(.sp-hub-note-t){ font-size:14px; color:#4A505B; line-height:1.6; margin:0 0 12px; }
.sp-hub-link{ font-weight:700; font-size:14px; color:#A9552F !important; text-decoration:none; }

@media (max-width:960px){
  .sp-hub-hero-grid, .sp-hub-grid{ grid-template-columns:1fr; gap:32px; }
  .sp-hub-aside{ position:static; order:-1; }
  .sp-hub-facts{ display:flex; flex-wrap:wrap; gap:6px 18px; border:0; margin-bottom:12px; }
  .sp-hub-facts li{ border:0; padding:2px 0; font-size:14px; }
}
@media (max-width:560px){
  body.sp-learn .sp-hub-hero{ padding:36px 0 32px; }
  body.sp-learn section.sp-hub-body{ padding:40px 0 72px; }
  .sp-hub-panel{ padding:20px 18px; }
}

/* Appel à l'action de fin de page : texte à gauche, bouton à droite */
.sp-hub-body + section.tight{ padding:56px 0 !important; background:#F4EEE6 !important; }
.sp-hub-body + section.tight > .wrap-narrow{ max-width:1120px; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:48px; align-items:center; text-align:left !important; }
.sp-hub-body + section.tight h2{ grid-column:1; font-size:clamp(24px,2.8vw,32px) !important; margin:0; }
.sp-hub-body + section.tight p.lead{ grid-column:1; margin:10px 0 0 !important; max-width:56ch; font-size:16px; }
.sp-hub-body + section.tight .btn{ grid-column:2; grid-row:1 / span 2; }
@media (max-width:760px){ .sp-hub-body + section.tight > .wrap-narrow{ grid-template-columns:1fr; } .sp-hub-body + section.tight .btn{ grid-column:1; grid-row:auto; margin-top:22px; justify-self:start; } }
.sp-hub-panel .sp-hub-k{ color:#6B707A; }
.sp-hub-panel-sub{ font-size:14px; line-height:1.6; color:#4A505B; margin:0 0 18px; }

/* Choix d'examen (toefl-toeic) : deux options comparables, mêmes lignes */
body.sp-learn section.sp-exam{ background:#fff; padding:64px 0 88px; }
.sp-exam-wrap{ max-width:1120px; }
.sp-exam-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.sp-exam-choice{ display:flex; flex-direction:column; padding:36px 36px 32px; border:1px solid #E5DBCF; border-radius:22px; background:#fff; color:#1E2430; text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease; }
.sp-exam-choice:hover{ border-color:#1E2430; box-shadow:0 18px 40px -28px rgba(30,36,48,.45); }
.sp-exam-choice:focus-visible{ outline:3px solid rgba(169,85,47,.45); outline-offset:3px; }
.sp-exam-tag{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#A9552F; margin:0 0 14px; }
.sp-exam-choice h2{ font-size:clamp(26px,2.6vw,32px) !important; line-height:1.15; margin:0 0 12px; max-width:20ch; }
.sp-exam-desc{ color:#4A505B; font-size:16px; line-height:1.65; margin:0 0 26px; max-width:52ch; }
.sp-exam-facts{ margin:0 0 30px; border-top:1px solid #E5DBCF; flex:1; }
.sp-exam-facts div{ display:grid; grid-template-columns:120px 1fr; gap:16px; padding:13px 0; border-bottom:1px solid #EFE7DC; }
.sp-exam-facts dt{ font-size:13px; color:#6B707A; font-weight:600; }
.sp-exam-facts dd{ margin:0; font-size:15px; color:#1E2430; }
.sp-exam-btn{ align-self:flex-start; }
.sp-exam-coach{ background:#F4EEE6; padding:52px 0; }
.sp-exam-coach-in{ max-width:1120px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.sp-exam-coach h2{ font-size:clamp(22px,2.4vw,28px); margin:0 0 6px; }
.sp-exam-coach p{ margin:0; color:#4A505B; }
@media (max-width:860px){ .sp-exam-grid{ grid-template-columns:1fr; } .sp-exam-coach-in{ flex-direction:column; align-items:flex-start; } }
@media (max-width:560px){ .sp-exam-choice{ padding:26px 22px; } .sp-exam-facts div{ grid-template-columns:1fr; gap:2px; } body.sp-learn section.sp-exam{ padding:40px 0 64px; } }
@media (prefers-reduced-motion: reduce){ .sp-exam-choice{ transition:none; } }
.sp-lhero .sp-exam-wrap .lead{ max-width:60ch; }