/* ==========================================================================
   SpeakPro Academy — pages « leçon » (modules de formation)
   Composition : en-tête aligné sur la colonne de lecture (fil d'Ariane,
   position dans le parcours, titre), parcours en étapes numérotées sur une
   ligne de temps, plan du module dans une colonne latérale collante,
   navigation module précédent / suivant. Inspirations : pages de cours
   Coursera (modules numérotés, durée, contenu), mise en page Polaris
   (colonne principale 2/3, contexte 1/3).
   ========================================================================== */
body.sp-lesson-page{ background:#fff; }

/* En-tête */
body.sp-lesson-page .sp-lhero{ background:#FBF8F3; padding:28px 0 44px; }
body.sp-lesson-page .sp-lhero .sp-lesson-headwrap{ max-width:1120px; padding:0 24px; margin:0 auto; }
body.sp-lesson-page .sp-lhero .sp-lesson-headwrap > :not(.sp-crumbs){ max-width:720px; }
body.sp-lesson-page .sp-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; color:#6B707A; margin:0 0 30px; }
body.sp-lesson-page .sp-crumbs a{ color:#1E2430; font-weight:600; text-decoration:none; border-bottom:1px solid #D9CCBD; padding-bottom:1px; }
body.sp-lesson-page .sp-crumbs a:hover{ border-color:#A9552F; }
body.sp-lesson-page .sp-lhero .eyebrow{ font-size:11.5px; }
body.sp-lesson-page .sp-lhero h1{ font-size:clamp(32px,4.4vw,48px); max-width:none; }

/* Grille */
.sp-lesson{ display:grid; grid-template-columns:minmax(0,1fr) 272px; gap:72px; max-width:1120px; margin:0 auto; padding:8px 24px 0; align-items:start; }
body.sp-lesson-page section.tight{ padding-top:48px; padding-bottom:96px; }
body.sp-lesson-page .sp-lesson-main{ max-width:720px; width:100%; margin:0; padding:0; }

/* Étapes : une ligne de temps, sans empiler des cartes */
body.sp-lesson-page .sp-lesson-main .sp-step{
  position:relative; background:transparent !important; border:0 !important; border-radius:0; box-shadow:none !important;
  padding:0 0 52px 64px !important; margin:0 !important;
}
body.sp-lesson-page .sp-lesson-main .sp-step::before{
  content:attr(data-step); position:absolute; left:0; top:-2px; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#fff; border:1.5px solid #1E2430;
  font:600 15px/1 var(--display-serif, Georgia, serif); color:#1E2430; z-index:1;
}
body.sp-lesson-page .sp-lesson-main .sp-step::after{ content:""; position:absolute; left:18.5px; top:40px; bottom:6px; width:1px; background:#E5DBCF; }
body.sp-lesson-page .sp-lesson-main .sp-step > .icon{ display:none !important; }
body.sp-lesson-page .sp-lesson-main .sp-step h3, body.sp-lesson-page .sp-lesson-main .sp-step > h2, body.sp-lesson-page .sp-lesson-main .sp-step .quiz-intro h2{
  font-family:var(--display-serif, Georgia, serif) !important; font-weight:500 !important; font-size:26px !important; line-height:1.15;
  letter-spacing:-.015em; color:#1E2430 !important; margin:4px 0 10px !important;
}
body.sp-lesson-page .sp-lesson-main .sp-step p{ color:#4A505B; font-size:16px; line-height:1.7; max-width:62ch; }

/* Étape « séance avec le coach » : mise en avant discrète (l'étape clé du parcours) */
body.sp-lesson-page .sp-lesson-main .sp-step[style*="border-color:var(--gold)"]::before{ background:#1E2430; color:#fff; }
/* Étape audio : plus de fond coloré, le lecteur suffit */
body.sp-lesson-page .sp-lesson-main .sp-step[style*="background:var(--blue-tint2)"]{ background:transparent !important; }
body.sp-lesson-page .sp-lesson-main audio{ width:100%; max-width:560px; margin-top:6px; }

/* Vidéos complémentaires : grille sobre */
body.sp-lesson-page .sp-yt-section .sp-yt-badge{ margin-bottom:2px; }

/* Quiz final : seul bloc en panneau, car interactif */
body.sp-lesson-page .sp-lesson-main .sp-step--panel{ padding-bottom:0 !important; }
body.sp-lesson-page .sp-lesson-main .sp-step--panel::after{ display:none; }
body.sp-lesson-page .sp-lesson-main .sp-step--panel > *{ position:relative; }
body.sp-lesson-page .sp-lesson-main .quiz-card.sp-step--panel .quiz-intro,
body.sp-lesson-page .sp-lesson-main .quiz-card.sp-step--panel [id^="quiz-quiz"],
body.sp-lesson-page .sp-lesson-main .quiz-card.sp-step--panel .quiz-result{
  background:#FBF8F3; border:1px solid #E5DBCF; border-radius:20px; padding:28px; text-align:left;
}
body.sp-lesson-page .sp-lesson-main .quiz-card.sp-step--panel .quiz-intro .icon-wrap{ display:none; }

/* Exercices : liste aérée */
body.sp-lesson-page .practice-item{ border-top:1px solid #EFE7DC; padding-top:20px; margin-top:20px !important; }
body.sp-lesson-page .practice-item:first-child{ border-top:0; padding-top:4px; margin-top:4px !important; }

/* Verrou : simple ligne dans la ligne de temps */
body.sp-lesson-page #locked-notice{
  position:relative; background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 0 44px 64px !important; text-align:left !important; margin:0 !important;
}
body.sp-lesson-page #locked-notice::before{
  content:""; position:absolute; left:0; top:-4px; width:38px; height:38px; border-radius:50%; background:#F4EEE6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A9552F' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E") center no-repeat;
}
body.sp-lesson-page #locked-notice p{ font-size:15px !important; color:#6B707A !important; font-weight:500 !important; padding-top:6px; }

/* Navigation précédent / suivant */
.sp-lesson-pager{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px; padding-top:28px; border-top:1px solid #E5DBCF; }
.sp-lesson-pager a{ display:flex; flex-direction:column; gap:4px; padding:18px 20px; border:1px solid #E5DBCF; border-radius:16px; text-decoration:none; color:#1E2430; transition:border-color .15s ease; }
.sp-lesson-pager a:hover{ border-color:#1E2430; }
.sp-lesson-pager a:focus-visible{ outline:3px solid rgba(169,85,47,.4); outline-offset:2px; }
.sp-lesson-pager small{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#6B707A; }
.sp-lesson-pager span{ font-family:var(--display-serif, Georgia, serif); font-size:20px; }
.sp-lesson-pager .sp-pager-next{ text-align:right; align-items:flex-end; }

/* Plan du module (colonne latérale) */
.sp-lesson-aside{ position:sticky; top:104px; }
.sp-outline summary{ list-style:none; display:flex; align-items:baseline; justify-content:space-between; gap:12px; cursor:default; padding-bottom:14px; border-bottom:1px solid #E5DBCF; }
.sp-outline summary::-webkit-details-marker{ display:none; }
.sp-outline summary span{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#1E2430; }
.sp-outline summary em{ font-style:normal; font-size:13px; color:#6B707A; }
.sp-outline ol{ list-style:none; margin:0; padding:6px 0 0; }
.sp-outline li a{ display:grid; grid-template-columns:26px 1fr; gap:10px; padding:11px 0; text-decoration:none; color:#1E2430; font-size:14.5px; line-height:1.4; border-bottom:1px solid #F2ECE4; }
.sp-outline li a:hover span{ color:#A9552F; }
.sp-outline li b{ font:600 14px/1.4 var(--display-serif, Georgia, serif); color:#A9552F; }
.sp-outline li small{ display:flex; align-items:center; gap:5px; margin-top:3px; font-size:12px; color:#6B707A; }
.sp-outline li.is-locked a{ color:#8A8F98; cursor:default; }
.sp-outline li.is-locked b{ color:#B8AFA4; }
.sp-outline-hub{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:20px; font-size:14px; font-weight:600; color:#1E2430; text-decoration:none; }
.sp-outline-hub:hover{ color:#A9552F; }

@media (max-width:960px){
  .sp-lesson{ grid-template-columns:1fr; gap:0; padding:0 20px; }
  .sp-lesson-aside{ position:static; order:-1; margin-bottom:36px; border:1px solid #E5DBCF; border-radius:16px; padding:16px 18px; }
  .sp-outline summary{ cursor:pointer; border-bottom:0; padding-bottom:0; }
  .sp-outline[open] summary{ padding-bottom:12px; border-bottom:1px solid #E5DBCF; }
  .sp-outline summary em::after{ content:" ▾"; }
  body.sp-lesson-page .sp-lhero .sp-lesson-headwrap{ padding:0 20px; }
}
@media (max-width:560px){
  body.sp-lesson-page .sp-lhero{ padding:20px 0 32px; }
  body.sp-lesson-page .sp-crumbs{ margin-bottom:20px; }
  body.sp-lesson-page .sp-lesson-main .sp-step{ padding:0 0 44px 0 !important; }
  body.sp-lesson-page .sp-lesson-main .sp-step::before{ position:static; margin-bottom:14px; width:34px; height:34px; }
  body.sp-lesson-page .sp-lesson-main .sp-step::after{ display:none; }
  body.sp-lesson-page .sp-lesson-main .sp-step + .sp-step, body.sp-lesson-page .sp-lesson-main .sp-step:not(:first-child){ border-top:1px solid #EFE7DC !important; padding-top:32px !important; }
  body.sp-lesson-page #locked-notice{ padding:0 0 36px 52px !important; }
  body.sp-lesson-page .sp-lesson-main .sp-step h3{ font-size:23px !important; }
  .sp-lesson-pager span{ font-size:17px; }
}
@media (prefers-reduced-motion: reduce){ .sp-lesson-pager a{ transition:none; } }

/* Le fil d'Ariane remplace le sur-titre (même information) */
body.sp-lesson-page .sp-lhero .eyebrow{ display:none; }
/* Ressource facultative après les étapes */
body.sp-lesson-page .sp-extra{ margin-top:8px; padding-top:36px; border-top:1px solid #E5DBCF; }
body.sp-lesson-page .sp-extra .card{ background:transparent; border:0; padding:0; }
body.sp-lesson-page .sp-extra h3{ font-family:var(--display-serif, Georgia, serif); font-weight:500; font-size:22px; }