/* Virgule lesson V3 — reading surface, shared identity, calm study flow. */
.free-lesson {
  width: min(100%, var(--vgl-v3-max));
  max-width: none;
  margin: 0 auto;
  padding: 0 0 72px;
}
.lesson-threshold {
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 5vw, 54px) var(--vgl-v3-gutter) 34px;
  background-color: var(--ardoise, #091a09);
  background-image: url('/assets/hero/hero-fond.webp');
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--craie-doree-border);
}
.lesson-threshold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8,20,12,.46);
  z-index: -1;
  pointer-events: none;
}
.lesson-threshold > * { position: relative; max-width: 820px; margin-inline: auto; }
.free-lesson-top { margin: 0 0 24px; }
.free-back { color: var(--craie-pale); font-size: 13px; }
.free-back:hover { color: var(--craie-doree); }
.free-badge {
  color: var(--craie-doree);
  border-color: var(--craie-doree-border);
  background: rgba(8,20,12,.42);
  padding: 6px 10px;
}
#lessonHeader { max-width: 820px; }
.free-title {
  font-family: var(--font-head, 'Syne', sans-serif);
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0 0 10px;
}
.free-subtitle { max-width: 620px; color: var(--craie-pale); font-size: 14px; line-height: 1.7; margin: 0; }
.lesson-language {
  display: flex;
  justify-content: flex-end;
  margin: 14px auto 0;
  width: min(100% - 32px, var(--vgl-v3-reading));
}
.lesson-reading {
  width: min(calc(100% - 2 * var(--vgl-v3-gutter)), var(--vgl-v3-reading));
  margin-inline: auto;
  padding-block: 34px 20px;
}
#lessonContent { min-height: 220px; padding-top: 0; }
.stepProgress { gap: 6px; padding: 0 0 20px; }
.stepSeg { height: 3px; border-radius: var(--radius-pill); background: var(--vgl-v3-line); }
.stepSeg.filled { background: var(--craie-doree); }
.stepArea { padding: 0; }
.stepBack {
  margin: 0 0 18px;
  width: 36px;
  height: 36px;
  background: transparent;
  border-color: var(--vgl-v3-line);
}
.stepBody { min-height: 180px; }
.stepBody .lesson-h1:first-child { display: none; }
.stepBody .lesson-h2:first-child { margin-top: 0; }
.stepBody .lesson-p { max-width: 72ch; }
.stepContinue, .free-next a {
  min-height: 48px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body,'DM Sans',sans-serif);
  font-weight: 500;
}
.stepContinue {
  width: auto;
  padding-inline: 24px;
  background: var(--craie-doree);
  color: var(--ardoise);
  border: 1px solid var(--craie-doree);
}
.stepContinue:focus-visible, .free-back:focus-visible { outline: 2px solid var(--craie-doree); outline-offset: 3px; }
.block-texte { margin-bottom: 8px; }
.block-widget {
  margin: 28px 0 10px;
  padding: clamp(18px, 4vw, 28px);
  background: var(--vgl-v3-surface);
  border-color: var(--vgl-v3-line);
  border-radius: var(--radius-lg);
}
.block-checkpoint.qCard { padding: 24px; margin: 0; }
.checkpointTag { letter-spacing: .1em; }
.free-next {
  margin-top: 34px;
  padding: 22px;
  background: var(--vgl-v3-surface);
  border: 1px solid var(--vgl-v3-line);
  border-radius: var(--radius-lg);
  text-align: start;
}
.free-next p { color: var(--craie-pale); line-height: 1.7; }
.free-next a { display: inline-flex; align-items: center; padding-inline: 20px; background: var(--craie-doree); color: var(--ardoise); text-decoration: none; }
.free-error { background: var(--vgl-v3-surface); border-color: var(--vgl-v3-line); border-radius: var(--radius-lg); }
.lesson-threshold + .lesson-reading { border-top: 0; }
@media (max-width: 767px) {
  .lesson-threshold { padding-inline: 16px; padding-top: 22px; background-image: url('/assets/hero/hero-fond-m.webp'); }
  .free-title { font-size: clamp(32px, 10vw, 46px); }
  .free-lesson-top { margin-bottom: 20px; }
  .lesson-reading { width: calc(100% - 32px); padding-top: 28px; }
  .stepBody { min-height: 160px; }
  .stepContinue { width: 100%; justify-content: center; }
  .block-checkpoint.qCard { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .stepBody.stepEnter { animation: none; }
}
body { padding: 72px 0 48px; }
body[data-lesson-active="true"] #main-footer { display: none; }
.free-lesson { overflow: clip; }
.lesson-reading .stepBody .lesson-h2 { color: var(--craie); }
.lesson-reading .lesson-h2 { color: var(--craie-doree); }
@media (max-width: 767px) { body { padding-inline: 0; } }
/* Experience motion: lessons should feel like scenes, not document pagination. */
.lesson-threshold{animation:vgl-lesson-threshold 760ms var(--vgl-ease) both}
@keyframes vgl-lesson-threshold{from{opacity:.2;transform:translateY(-8px)}to{opacity:1;transform:none}}
.stepBody.stepEnter{animation:vgl-scene-in 460ms var(--vgl-ease) both}
@keyframes vgl-scene-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.block-widget,.block-checkpoint.qCard{animation:vgl-scene-in 520ms var(--vgl-ease) 80ms both}
.stepContinue,.free-next a{transition:transform var(--vgl-motion-fast) var(--vgl-ease),background-color var(--vgl-motion-fast) ease,border-color var(--vgl-motion-fast) ease}
.stepContinue:hover,.free-next a:hover{transform:translateY(-2px)}
.stepContinue:active,.free-next a:active{transform:scale(.985)}
@media(prefers-reduced-motion:reduce){.lesson-threshold,.stepBody.stepEnter,.block-widget,.block-checkpoint.qCard{animation:none!important}.stepContinue,.free-next a{transition:none!important}}

.lessonStage{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--craie-pale);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.lessonStageIndex{color:var(--craie-doree);font-variant-numeric:tabular-nums}
.lessonStageLabel{font-weight:500}
.stepSeg.current{border-bottom:2px solid var(--craie-doree)}
@media(prefers-reduced-motion:reduce){.lessonStage{transition:none}}

.lessonReflection{margin:0 0 24px;padding:20px;border:1px solid var(--vgl-v3-line);border-radius:var(--radius-lg);background:var(--vgl-v3-surface);}
.lessonReflectionTag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--craie-doree);margin-bottom:8px}
.lessonReflectionTitle{font-family:var(--font-head,'Syne',sans-serif);font-size:20px;line-height:1.25;margin:0 0 8px}
.lessonReflectionPrompt{margin:0 0 14px;color:var(--craie-pale);font-size:13px;line-height:1.6}
.lessonReflectionInput{display:block;width:100%;min-height:88px;resize:vertical;padding:12px;border:1px solid var(--vgl-v3-line);border-radius:var(--radius-md);background:transparent;color:var(--craie);font:inherit;line-height:1.5}
.lessonReflectionInput:focus-visible{outline:2px solid var(--craie-doree);outline-offset:2px}
.lessonReflectionActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.lessonReflectionSave{min-height:44px;padding:0 16px;border:1px solid var(--craie-doree);border-radius:var(--radius-pill);background:transparent;color:var(--craie-doree);font:500 13px var(--font-body,'DM Sans',sans-serif);cursor:pointer}
.lessonReflectionState{font-size:12px;color:var(--craie-pale)}
@media(max-width:767px){.lessonReflection{padding:18px 16px}.lessonReflectionSave{width:100%}}
@media(prefers-reduced-motion:reduce){.lessonReflectionSave{transition:none}}


/* Reader convergence — tranche 4: turn the lesson viewport into a calm
   studio surface. The lesson is the product here: progress is a thin
   instrument, the current scene owns the eye, and interactions read as
   learning instruments rather than generic cards. */
.lesson-reading {
  max-width: 960px;
  padding-top: clamp(28px, 4vw, 42px);
}
.stepProgress {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 22px;
  padding-bottom: 0;
}
.stepSeg {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 0;
  background: var(--vgl-v3-line);
  border: 0;
  transition: background-color var(--vgl-motion-fast) ease, height var(--vgl-motion-fast) ease;
}
.stepSeg.done { background: var(--craie-doree); }
.stepSeg.current { height: 3px; background: var(--craie-doree); border: 0; }
.stepArea { position: relative; }
.stepBack {
  position: absolute;
  inset-inline-start: 0;
  top: -2px;
  margin: 0;
  z-index: 2;
}
.lessonStage {
  justify-content: center;
  min-height: 36px;
  margin: 0 0 26px;
  font-size: 10px;
  letter-spacing: .14em;
}
.lessonStage::before,
.lessonStage::after {
  content: '';
  width: min(12vw, 84px);
  height: 1px;
  background: var(--vgl-v3-line);
}
.lessonStageIndex { letter-spacing: .08em; }
.stepBody {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stepBody .block-texte {
  width: min(100%, 720px);
  margin-inline: auto;
}
.stepBody .lesson-p {
  max-width: 68ch;
  margin-inline: auto;
}
.block-widget {
  margin: 34px 0 14px;
  padding: clamp(20px, 4vw, 34px);
  background: var(--vgl-v3-surface);
  border: 1px solid var(--vgl-v3-line);
  border-inline-start: 3px solid var(--craie-doree);
  border-radius: var(--radius-md);
}
.block-checkpoint.qCard {
  padding: clamp(22px, 4vw, 32px);
  margin: 20px 0 0;
  background: transparent;
  border: 1px solid var(--vgl-v3-line);
  border-inline-start: 3px solid var(--craie-doree);
  border-radius: var(--radius-md);
}
.stepContinue {
  align-self: flex-end;
  margin-top: 28px;
  min-width: 164px;
}
.free-next {
  position: relative;
  margin-top: 42px;
  padding: clamp(24px, 4vw, 34px);
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--craie-doree);
}
.lessonReflection {
  margin-top: 0;
  padding: clamp(24px, 4vw, 34px);
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--craie-doree);
  background: transparent;
}
.lessonReflectionTitle { font-size: clamp(22px, 3vw, 30px); }
@media (min-width: 768px) {
  .lesson-threshold > *, #lessonHeader { max-width: 900px; }
  .free-title { max-width: 13ch; }
  .free-subtitle { font-size: 15px; }
}
@media (max-width: 767px) {
  .lesson-reading { padding-top: 24px; }
  .lessonStage { margin-bottom: 20px; }
  .lessonStage::before, .lessonStage::after { width: 28px; }
  .stepBody { min-height: 240px; justify-content: flex-start; }
  .stepBack { position: static; margin: 0 0 12px; }
  .stepContinue { align-self: stretch; min-width: 0; margin-top: 24px; }
  .block-widget { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .stepSeg { transition: none; }
}