/* Leçon et quiz : grands caractères, lecture confortable au tableau comme sur iPad.
   --fs règle la taille de tout le texte (boutons A− / A+). */

.lesson { --fs: 1; --accent: var(--brand); --accent-2: var(--brand-deep); --pale: var(--brand-soft); font-size: calc(21px * var(--fs)); line-height: 1.55; color: var(--ink); padding-bottom: 60px; }
.ls-head { background: #fff; border-bottom: 1px solid var(--line-2); }
.ls-head-inner, .ls-bar-inner, .ls-main { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.ls-head-inner { padding-top: 22px; padding-bottom: 18px; }
.ls-eyebrow { font-family: var(--title-font); font-size: calc(13px * var(--fs)); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.ls-title { font-size: calc(46px * var(--fs)); margin: 6px 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em; }
.ls-sub { font-family: var(--ui-font); font-weight: 400; font-size: .5em; color: var(--muted); }
.ls-intro { color: var(--ink-2); font-size: calc(18px * var(--fs)); margin: 0; }
.ls-bar { position: sticky; top: var(--topbar-h, 0px); z-index: 20; background: rgb(244 242 236 / 94%); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line-2); }
.ls-bar-inner { display: flex; gap: 12px; align-items: center; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.ls-tabs { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.ls-tab { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 6px 18px 6px 8px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-family: var(--title-font); font-weight: 500; font-size: 16.5px; color: var(--ink); }
.ls-tab-n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2); font-weight: 700; font-size: 15px; }
.ls-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ls-tab[aria-selected="true"] .ls-tab-n { background: rgb(255 255 255 / 22%); color: #fff; }
.ls-badge { font-size: 12px; font-weight: 700; background: var(--sun-soft); color: #7a5600; border-radius: 999px; padding: 1px 8px; }
.ls-tools { display: flex; gap: 6px; }
.ls-tool { min-height: 42px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 15px; }
.ls-tool.on { background: var(--sun); border-color: var(--sun); }
.ls-main { padding-top: 24px; }
.ls-card { background: #fff; border-radius: 26px; box-shadow: var(--shadow); padding: 30px 32px 32px; margin-bottom: 22px; }
.ls-h2 { font-size: calc(31px * var(--fs)); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ls-h3 { font-size: calc(23px * var(--fs)); margin-bottom: 10px; }
.ls-p { margin: 8px 0 16px; }
.ls-sub-p { color: var(--ink-2); font-size: .85em; margin: 0 0 14px; }
.ls-say { border: 0; background: var(--pale); color: var(--accent-2); width: 42px; height: 42px; border-radius: 50%; font-size: 18px; flex: none; }
.ls-say.small { width: 36px; height: 36px; font-size: 15px; position: absolute; right: 12px; top: 12px; opacity: .8; }
.ls-anchors { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 18px; margin: 16px 0 20px; }
.ls-anchor { position: relative; border: 1.5px solid #cfe2df; border-radius: 20px; padding: 20px; background: #f8fbfa; }
.ls-anchor-word { font-family: var(--title-font); font-size: calc(44px * var(--fs)); font-weight: 700; color: var(--accent); line-height: 1.1; margin-bottom: 6px; letter-spacing: .01em; }
.ls-anchor-title { font-weight: 700; font-size: .8em; color: var(--ink-2); margin-bottom: 4px; }
.mark-letter { background: #cfe5e1; color: var(--brand-ink); border-radius: 8px; padding: 0 .08em; box-shadow: 0 0 0 2px #cfe5e1; }
.ls-examples { background: var(--pale); border-radius: 14px; padding: 12px 16px; font-size: .9em; line-height: 1.7; margin: 6px 0 14px; }
.ls-examples strong, .ls-rule-line strong { color: var(--accent-2); }
.ls-examples.big { font-size: calc(30px * var(--fs)); line-height: 1.6; padding: 18px 22px; }
.ls-rules { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 18px; margin-bottom: 18px; }
.ls-rule { border: 1.5px solid #cfe2df; border-radius: 20px; padding: 20px 22px; background: #f8fbfa; }
.ls-rule-line { margin: 6px 0 6px; }
.ls-box { margin: 10px 0 16px; background: #fff; }
.ls-hint { border-left: 6px solid var(--sun); background: var(--sun-soft); padding: 14px 18px; border-radius: 4px 14px 14px 4px; font-size: .9em; margin: 14px 0 18px; }
.ls-defi { border-left-color: var(--coral); background: #fff4ef; }
.ls-list li { margin-bottom: 6px; }
.ls-question { border: 1.5px dashed var(--line); border-radius: 16px; padding: 14px 18px; margin: 12px 0; }
.ls-answer { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--leaf-soft); }
.ls-next { display: flex; justify-content: flex-end; margin-top: 18px; }

/* leçons importées d'anciennes pages (HTML nettoyé) : mêmes couleurs que la leçon native */
.ls-imported > .ls-next { margin-bottom: 22px; }
.ls-html .card { background: #fff; border-radius: 26px; box-shadow: var(--shadow); padding: 30px 32px 32px; margin-bottom: 22px; }
.ls-html h2 { font-size: calc(31px * var(--fs)); margin: 0 0 14px; }
.ls-html h3 { font-size: calc(23px * var(--fs)); margin: 0 0 10px; }
.ls-html p { margin: 8px 0 16px; }
.ls-html .two, .ls-html .three { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 14px 0 18px; }
.ls-html .three { grid-template-columns: repeat(3, 1fr); }
.ls-html .rule { position: relative; border: 1.5px solid #cfe2df; border-radius: 20px; padding: 20px 22px; background: #f8fbfa; margin-bottom: 14px; }
.ls-html .two > .rule, .ls-html .three > .rule { margin-bottom: 0; }
.ls-html .rule strong { color: var(--accent-2); }
.ls-html .anchor-word { font-family: var(--title-font); font-size: calc(44px * var(--fs)); font-weight: 700; color: var(--accent); line-height: 1.1; margin-bottom: 6px; }
.ls-html .letter { background: #cfe5e1; color: var(--brand-ink); border-radius: 8px; padding: 0 .08em; box-shadow: 0 0 0 2px #cfe5e1; }
.ls-html .examples { background: var(--pale); border-radius: 14px; padding: 12px 16px; font-size: .9em; line-height: 1.7; margin: 6px 0 14px; }
.ls-html .big-step { font-size: calc(28px * var(--fs)); line-height: 1.6; }
.ls-html .hint { border-left: 6px solid var(--sun); background: var(--sun-soft); padding: 14px 18px; border-radius: 4px 14px 14px 4px; font-size: .9em; margin: 14px 0 18px; }
.ls-html .warning { border: 1.5px solid #e5c47e; background: #fff8e8; border-radius: 16px; padding: 16px 18px; }
.ls-html .sound { font-size: 1.4em; font-weight: 700; color: var(--accent); }
.ls-html .mini, .ls-html .comp, .ls-html .sub { font-size: .8em; color: var(--muted); }

/* quiz */
.qz-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 4px; }
.qz-top .ls-h2 { margin: 0 auto 0 0; }
.qz-levels { display: flex; gap: 8px; }
.qz-level { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-family: var(--title-font); font-weight: 500; font-size: 16px; }
.qz-level[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.qz-count { background: var(--pale); color: var(--accent-2); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 15px; }
.qz-dots { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 18px; }
.qz-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c8d3d8; background: #fff; padding: 0; }
.qz-dot.now { border-color: var(--accent); box-shadow: 0 0 0 3px var(--pale); }
.qz-dot.tried { background: #f7d9a0; border-color: #e3b35c; }
.qz-dot.ok { background: #9fd3b3; border-color: #5fb487; }
.qz-dot.first { background: var(--leaf); border-color: var(--leaf); }
.qz-round { font-family: var(--title-font); font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.qz-question { font-size: calc(31px * var(--fs)); line-height: 1.3; margin: 0 0 20px; display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; font-family: var(--ui-font); font-weight: 700; }
.qz-options { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 14px; }
.qz-option { display: flex; align-items: center; gap: 14px; min-height: calc(86px * var(--fs)); padding: 12px 18px; border-radius: 18px; border: 2px solid var(--line); background: #fff; text-align: left; font-size: calc(24px * var(--fs)); line-height: 1.3; color: var(--ink); transition: transform .08s, background .15s; }
.qz-option:hover:not(:disabled) { border-color: var(--accent); background: #f4faf9; }
.qz-option:active:not(:disabled) { transform: scale(.985); }
.qz-letter { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-2); font-family: var(--title-font); font-weight: 700; font-size: 18px; }
.qz-option.correct { background: var(--leaf-soft); border-color: var(--leaf); color: #1d5a37; }
.qz-option.correct .qz-letter { background: var(--leaf); color: #fff; }
.qz-option.wrong { background: #fbf1ee; border-color: #efc2b6; color: #8a4636; opacity: .75; }
.qz-option:disabled { cursor: default; }
.qz-feedback { min-height: 72px; margin: 18px 0; padding: 16px 20px; border-radius: 16px; background: #f4f6f6; font-size: .95em; }
.qz-feedback.good { background: var(--leaf-soft); color: #1d5a37; }
.qz-feedback.retry { background: #fff3df; color: #7a4a12; }
.qz-hint-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.qz-hint { flex: 1; margin: 0; background: var(--sun-soft); border-radius: 12px; padding: 10px 16px; font-size: .9em; }
.qz-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.qz-end { text-align: center; padding: 20px 10px; }
.qz-stars { font-size: 64px; letter-spacing: 8px; color: #ddd6c4; }
.qz-stars .on { color: var(--sun); text-shadow: 0 3px 0 #d9982a; }
.qz-end-title { font-family: var(--title-font); font-size: 30px; font-weight: 700; margin: 6px 0; }
.qz-end .qz-actions { justify-content: center; margin-top: 16px; }

/* images et schémas (dessins SVG fournis dans le JSON) */
.ls-figure { width: min(100%, var(--w, 70%)); margin: 14px auto 22px; text-align: center; }
.ls-figure-img { display: block; width: 100%; padding: 14px; border: 1.5px solid var(--line-2); border-radius: 20px; background: #fff; cursor: zoom-in; }
.ls-figure-img svg { display: block; width: 100%; height: auto; max-height: 58vh; }
.ls-figure.big { width: 100%; }
.ls-figure.big .ls-figure-img { cursor: zoom-out; }
.ls-figure.big .ls-figure-img svg { max-height: 86vh; }
.ls-caption { margin-top: 8px; color: var(--ink-2); font-size: .85em; }

.ls-schema { --lab: 9.5em; width: min(100%, var(--w, 100%)); margin: 14px auto 22px; font-size: .9em; }
.ls-schema-title { font-family: var(--title-font); font-weight: 700; font-size: 1.05em; text-align: center; margin-bottom: 8px; }
.ls-schema-frame { background: #fff; border: 1.5px solid var(--line-2); border-radius: 20px; padding: 18px 16px; }
.ls-schema-frame.has-g { padding-left: calc(var(--lab) + 2.2em); }
.ls-schema-frame.has-d { padding-right: calc(var(--lab) + 2.2em); }
.ls-schema-draw { position: relative; width: 100%; aspect-ratio: var(--ratio, 2); }
.ls-schema-svg, .ls-schema-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ls-sc-line { position: absolute; height: 0; border-top: 2px solid var(--ink); pointer-events: none; }
.ls-sc-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.ls-sc-label { position: absolute; transform: translateY(-50%); display: inline-flex; align-items: center; gap: .4em; width: max-content; max-width: var(--lab); padding: .28em .7em .28em .3em; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: .92em; line-height: 1.15; text-align: left; color: var(--ink); box-shadow: 0 1px 2px rgb(30 40 50 / 8%); }
.ls-sc-label.g { right: calc(100% + 1.4em); }
.ls-sc-label.d { left: calc(100% + 1.4em); }
.ls-sc-label:hover { border-color: var(--accent); }
.ls-sc-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--accent); color: #fff; font-size: .85em; }
.ls-schema.quiz :is(.ls-sc-label, .ls-sc-item):not(.shown) .ls-sc-text { display: none; }
.ls-schema.quiz :is(.ls-sc-label, .ls-sc-item):not(.shown)::after { content: '?'; padding: 0 .5em; color: var(--muted); }
.ls-schema.quiz :is(.ls-sc-label, .ls-sc-item).shown { background: var(--leaf-soft); border-color: var(--leaf); }
.ls-schema-legend { display: none; list-style: none; margin: 10px 0 0; padding: 0; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ls-sc-item { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em .3em .3em; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; }
.ls-schema-tools { display: flex; justify-content: center; margin-top: 10px; }

/* tableaux */
.ls-table-wrap { margin: 12px 0 22px; overflow-x: auto; }
.ls-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1.5px solid #cfe2df; border-radius: 16px; overflow: hidden; font-size: .88em; background: #fff; }
.ls-table th { background: var(--pale); color: var(--accent-2); text-align: left; padding: .6em .85em; font-family: var(--title-font); font-weight: 700; }
.ls-table td { padding: .6em .85em; border-top: 1px solid #e2ecea; vertical-align: top; }
.ls-table td + td, .ls-table th + th { border-left: 1px solid #e2ecea; }
.ls-table.first-col td:first-child { font-weight: 700; color: var(--accent-2); background: #f8fbfa; }

/* flashcards */
.fc { border: 1.5px solid #cfe2df; border-radius: 24px; background: #f8fbfa; padding: 18px; margin: 12px 0 22px; }
.fc-modes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fc-mode { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 16px; }
.fc-mode[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.fc-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 26px; align-items: center; background: #fff; border-radius: 22px; padding: 22px; box-shadow: var(--shadow); }
.fc-img { position: relative; aspect-ratio: 1.1; }
.fc-img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fc-word { font-family: var(--title-font); font-size: calc(60px * var(--fs)); font-weight: 700; color: var(--accent); line-height: 1.05; margin: 0 0 8px; }
.fc-tr { font-size: 1.05em; color: var(--ink-2); margin: 0 0 8px; }
.fc-phrase { font-style: italic; margin: 0 0 12px; }
.fc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.fc-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.fc-count { font-weight: 700; color: var(--muted); }
.fc-game-help { font-weight: 700; }
.fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 10px 0 12px; }
.fc-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; aspect-ratio: 1; padding: 10px; border-radius: 18px; border: 2px solid var(--line); background: #fff; }
.fc-tile:hover { border-color: var(--accent); }
.fc-tile-img { position: relative; flex: 1; width: 100%; min-height: 0; }
.fc-tile-img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fc-tile-word { font-weight: 700; font-size: .85em; }
.fc-tile.gone { border-style: dashed; border-color: #e3b35c; background: var(--sun-soft); }
.fc-q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--title-font); font-size: 64px; font-weight: 700; color: #b07a00; }

/* phrase modèle et phrase à construire */
.ls-phrase { background: var(--sky-soft); border-radius: 18px; padding: 14px 18px; margin: 10px 0 18px; }
.ls-phrase-text { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1.3em; font-weight: 700; color: #1c3f86; }
.ls-phrase-tr { color: var(--ink-2); font-size: .85em; margin-top: 2px; }
.bd { border: 1.5px solid #cfe2df; border-radius: 24px; background: #f8fbfa; padding: 18px 20px; margin: 12px 0 22px; }
.bd-cols { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 14px; }
.bd-col { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.bd-chip { display: inline-flex; flex-direction: column; align-items: flex-start; min-height: 48px; padding: 6px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: .95em; line-height: 1.2; text-align: left; }
.bd-chip small { font-weight: 400; font-size: .72em; color: var(--muted); }
.bd-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.bd-chip[aria-pressed="true"] small { color: rgb(255 255 255 / 85%); }
.bd-result { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; background: #fff; border-radius: 18px; padding: 12px 16px; }
.bd-phrase { margin: 0; font-family: var(--title-font); font-size: 1.6em; font-weight: 700; color: #1c3f86; }
.bd-tr { margin: 8px 4px 0; color: var(--ink-2); font-size: .85em; }

/* écoutes (les mots de l'exercice d'écoute, sans les montrer) */
.ecs { border: 1.5px solid #cfe2df; border-radius: 24px; background: #f8fbfa; padding: 18px 20px; margin: 12px 0 22px; }
.ecs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }

/* quiz : parties, écoute, image */
.qz-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 6px; }
.qz-part { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 15px; }
.qz-part small { margin-left: 6px; font-weight: 700; color: var(--muted); }
.qz-part[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.qz-part[aria-pressed="true"] small { color: rgb(255 255 255 / 75%); }
.qz-review-tag { font-weight: 700; color: #7a4a12; background: #fff3df; border-radius: 999px; padding: 8px 16px; }
.qz-part-tag { margin-left: 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--bg-2); border-radius: 999px; padding: 2px 10px; }
.qz-listen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -6px 0 18px; }
.qz-listen-help { color: var(--muted); font-size: .8em; }
.qz-figure { position: relative; width: min(100%, calc(34vh * var(--ratio, 1.4)), 460px); aspect-ratio: var(--ratio, 1.4); margin: -4px auto 18px; }
.qz-figure svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* surligneur */
.lesson.highlighting .ls-main { cursor: text; }
mark.hl { background: #ffe066; color: inherit; border-radius: 4px; padding: 0 .05em; box-shadow: 0 0 0 2px #ffe066; }

@media (max-width: 700px) {
  .ls-schema-frame.has-g, .ls-schema-frame.has-d { padding: 12px; }
  .ls-sc-line, .ls-sc-dot { display: none; }
  .ls-sc-label.g, .ls-sc-label.d { left: var(--x); right: auto; transform: translate(-50%, -50%); padding: 0; border: 2px solid #fff; background: transparent; box-shadow: none; max-width: none; }
  .ls-sc-label .ls-sc-text, .ls-schema.quiz .ls-sc-label::after { display: none !important; }
  .ls-sc-label .ls-sc-n { width: 1.6em; height: 1.6em; box-shadow: 0 1px 4px rgb(0 0 0 / 35%); }
  .ls-schema-legend { display: flex; }
}
@media (max-width: 860px) {
  .ls-anchors, .ls-rules, .ls-html .two, .ls-html .three, .fc-card, .bd-cols { grid-template-columns: 1fr; }
  .ls-schema { --lab: 7em; font-size: .85em; }
  .fc-img { max-width: 320px; margin: 0 auto; width: 100%; }
  .fc-word { font-size: calc(46px * var(--fs)); }
  .ls-html .card { padding: 22px 18px; border-radius: 20px; }
  .qz-options { grid-template-columns: 1fr; }
  .ls-card { padding: 22px 18px; border-radius: 20px; }
  .ls-title { font-size: calc(34px * var(--fs)); }
  .ls-tab { min-height: 44px; font-size: 15px; }
}
@media print {
  .ls-bar, .ls-say, .ls-next, .qz-actions, .ls-schema-tools, .fc-modes, .fc-actions, .fc-nav { display: none !important; }
  .ls-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}