/* ══════════════════════════════════════════════════════════════════════
   Lecteur de modules — plein écran, sans rechargement
   Classes rd-* · tokens --fd-* de fiche.css (repris ici pour être autonome)
   Mouvement : transform / opacity uniquement ; prefers-reduced-motion respecté.
   ══════════════════════════════════════════════════════════════════════ */
.rd {
  --fd-bg: #0A0A0F; --fd-surf: #111118; --fd-line: rgba(237, 233, 254, .08); --fd-line-2: rgba(237, 233, 254, .15);
  --fd-v6: #7C3AED; --fd-v7: #6D28D9; --fd-v4: #A78BFA; --fd-v1: #EDE9FE; --fd-mint: #34D399; --fd-mint-bg: rgba(52, 211, 153, .1);
  --fd-amber: #FBBF24; --fd-rose: #FB7185; --fd-text: #ECECF4; --fd-mut: #A1A1AA; --fd-dim: #8B8B97;
  --fd-mono: 'JetBrains Mono', ui-monospace, monospace; --fd-ease: cubic-bezier(.4, 0, .2, 1); --fd-out: cubic-bezier(.16, 1, .3, 1);
  --rd-top: 64px; --rd-plan: 320px;
  position: fixed; inset: 0; z-index: 9000; background: var(--fd-bg); color: var(--fd-text);
  display: grid; grid-template-rows: var(--rd-top) minmax(0, 1fr);
}
.rd[hidden] { display: none; }
html.rd-open, html.rd-open body { overflow: hidden; }
.rd.is-in { animation: rdIn .32s var(--fd-out) both; }
@keyframes rdIn { from { opacity: 0; transform: translateY(14px); } }
.rd :focus-visible { outline: 2px solid var(--fd-v1); outline-offset: 2px; }
/* titres et questions reçoivent le focus pour les lecteurs d'écran, sans être des commandes : pas de cadre */
.rd [tabindex="-1"]:focus, .rd [tabindex="-1"]:focus-visible { outline: none; }
.rd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Barre du haut ─────────────────────────────────────────────────────── */
.rd-top { position: relative; display: flex; align-items: center; gap: .6rem; padding: 0 1rem; border-bottom: 1px solid var(--fd-line); background: rgba(10, 10, 15, .92); }
.rd-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.rd-prog b { display: block; height: 100%; background: linear-gradient(90deg, var(--fd-v6), var(--fd-v4)); transform-origin: 0 50%; transform: scaleX(var(--r, 0)); }
.rd-ic {
  min-width: 44px; height: 44px; padding: 0 .75rem; border-radius: 12px; border: 1px solid transparent; background: transparent;
  color: var(--fd-mut); display: inline-flex; align-items: center; justify-content: center; gap: .45rem; cursor: pointer;
  font: 500 .86rem/1 Inter, system-ui, sans-serif; transition: color .2s, background-color .2s, border-color .2s;
}
.rd-ic:hover { color: var(--fd-text); background: rgba(237, 233, 254, .05); }
.rd-ic svg { width: 18px; height: 18px; flex: none; }
.rd-ic:disabled { opacity: .35; cursor: default; }
.rd-ic:disabled:hover { background: transparent; color: var(--fd-mut); }
.rd-ic[aria-pressed="true"] { color: var(--fd-v1); border-color: rgba(167, 139, 250, .45); background: rgba(124, 58, 237, .16); }
.rd-where { flex: 1; min-width: 0; display: grid; gap: .2rem; padding: 0 .4rem; }
.rd-where .rd-k { font: 500 .66rem/1.2 var(--fd-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--fd-v4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-where strong { font-size: .92rem; font-weight: 600; color: var(--fd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-plan-btn { display: none; }

/* ── Corps : plan + lecture ───────────────────────────────────────────── */
.rd-body { position: relative; display: grid; grid-template-columns: var(--rd-plan) minmax(0, 1fr); min-height: 0; }
.rd-plan { min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--fd-line); background: #0D0D13; padding: 1.25rem 1rem 2rem; transition: transform .32s var(--fd-out), opacity .22s var(--fd-ease); }
.rd-main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; outline: none; }
.rd.is-focus .rd-body { grid-template-columns: 0 minmax(0, 1fr); }
.rd.is-focus .rd-plan { transform: translateX(-100%); opacity: 0; pointer-events: none; overflow: hidden; padding: 0; border: 0; }
.rd.is-focus .rd-top { background: rgba(10, 10, 15, .7); }

/* Plan du module */
.rd-mod-k { font: 500 .66rem/1.2 var(--fd-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--fd-v4); margin: 0 .4rem; }
.rd-mod-t { font-family: var(--font-title, 'Bricolage Grotesque', system-ui, sans-serif); font-weight: 700; font-stretch: 88%; font-size: 1.28rem; line-height: 1.12; color: #F6F4FF; margin: .45rem .4rem .8rem; }
.rd-mod-p { display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: center; margin: 0 .4rem 1.1rem; font: 500 .74rem/1 var(--fd-mono); color: var(--fd-mut); }
.rd-bar { display: block; height: 5px; border-radius: 5px; background: rgba(237, 233, 254, .1); overflow: hidden; }
.rd-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--fd-v6), var(--fd-v4)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .5s var(--fd-out); }
.rd-ls { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rd-it {
  width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: .65rem; align-items: start; min-height: 48px;
  padding: .7rem .6rem; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--fd-mut);
  font: inherit; font-size: .88rem; line-height: 1.4; text-align: left; cursor: pointer; text-decoration: none;
}
.rd-it:hover { background: rgba(237, 233, 254, .045); color: var(--fd-text); }
.rd-it[aria-current="step"] { background: rgba(124, 58, 237, .16); border-color: rgba(167, 139, 250, .38); color: #fff; }
.rd-it[aria-disabled="true"] { cursor: default; color: var(--fd-dim); }
.rd-it[aria-disabled="true"]:hover { background: transparent; }
.rd-st { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--fd-line-2); color: transparent; margin-top: -1px; }
.rd-st svg { width: 12px; height: 12px; }
.rd-it.is-done .rd-st { background: var(--fd-v6); border-color: var(--fd-v6); color: #fff; }
.rd-it[aria-current="step"] .rd-st { border: 2px solid var(--fd-v4); box-shadow: inset 0 0 0 3px #1A1430, inset 0 0 0 10px var(--fd-v4); }
.rd-it.is-lock .rd-st { border-style: dashed; color: var(--fd-dim); }
.rd-it.is-quiz .rd-st, .rd-it.is-pdf .rd-st { border-radius: 6px; color: var(--fd-v4); }
.rd-it.is-quiz.is-done .rd-st { color: #fff; }
.rd-it-d { font: 500 .7rem/1.4 var(--fd-mono); color: var(--fd-dim); white-space: nowrap; }
.rd-it-n { display: inline-block; margin-left: .4rem; padding: .16rem .38rem; border-radius: 999px; font: 600 .6rem/1 var(--fd-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fd-v1); background: rgba(124, 58, 237, .34); vertical-align: 1px; }
.rd-sep { margin: 1rem .4rem .5rem; font: 500 .64rem/1 var(--fd-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--fd-dim); }
.rd-mods { margin: 1.2rem .4rem 0; border-top: 1px solid var(--fd-line); padding-top: .8rem; }
.rd-mods summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: space-between; color: var(--fd-mut); font-size: .86rem; }
.rd-mods summary::-webkit-details-marker { display: none; }
.rd-mods summary svg { width: 16px; height: 16px; transition: transform .25s var(--fd-ease); }
.rd-mods[open] summary svg { transform: rotate(180deg); }
.rd-mods ol { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: 2px; }
.rd-mods li button { width: 100%; display: grid; grid-template-columns: 30px 1fr; gap: .5rem; padding: .55rem .4rem; border: 0; border-radius: 10px; background: none; color: var(--fd-mut); font: inherit; font-size: .84rem; text-align: left; cursor: pointer; line-height: 1.35; }
.rd-mods li button:hover { background: rgba(237, 233, 254, .045); color: var(--fd-text); }
.rd-mods li button[disabled] { cursor: default; color: var(--fd-dim); }
.rd-mods li button[disabled]:hover { background: none; }
.rd-mods li b { font: 600 .74rem/1.6 var(--fd-mono); color: var(--fd-dim); }

/* ── Leçon ─────────────────────────────────────────────────────────────── */
.rd-col { width: min(100%, 46rem); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1.1rem, 4vw, 2rem) 4rem; }
.rd-eb { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font: 500 .7rem/1.3 var(--fd-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fd-v4); margin: 0 0 .9rem; }
.rd-eb span + span::before { content: '·'; margin-right: .9rem; color: var(--fd-dim); }
.rd-h { font-family: var(--font-title, 'Bricolage Grotesque', system-ui, sans-serif); font-weight: 700; font-stretch: 88%; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem); line-height: 1.06; color: #F6F4FF; margin: 0 0 1.75rem; text-wrap: balance; letter-spacing: calc(0.6px - 0.03em); }
.rd-resume { display: flex; align-items: center; gap: .55rem; margin: -.6rem 0 1.4rem; padding: .55rem .8rem; border-radius: 10px; font-size: .84rem; color: var(--fd-v1); background: rgba(124, 58, 237, .14); border: 1px solid rgba(167, 139, 250, .3); width: fit-content; }
.rd-resume svg { width: 15px; height: 15px; color: var(--fd-v4); }

/* Contenu : typographie de lecture */
.rd-c { font-size: 1.075rem; line-height: 1.75; color: #D9D8E4; overflow-wrap: break-word; }
.rd-c > * + * { margin-top: 1.05em; }
.rd-c h1, .rd-c h2, .rd-c h3, .rd-c h4 { font-family: var(--font-title, 'Bricolage Grotesque', system-ui, sans-serif); font-weight: 700; font-stretch: 88%; color: #F3F1FD; line-height: 1.2; letter-spacing: calc(0.6px - 0.03em); }
.rd-c h1 { display: none; }               /* le titre de la leçon est déjà en tête */
.rd-c h2 { font-size: 1.6rem; margin-top: 2.1em; }
.rd-c h3 { font-size: 1.3rem; margin-top: 1.9em; }
.rd-c h4 { font-size: 1.08rem; margin-top: 1.6em; color: var(--fd-v1); }
.rd-c > h2:first-child, .rd-c > h3:first-child { display: none; }  /* doublon du titre de leçon */
.rd-c strong { color: #fff; font-weight: 600; }
.rd-c em { color: #E4E1F5; }
.rd-c a { color: var(--fd-v4); text-decoration: underline; text-underline-offset: 3px; }
.rd-c ul, .rd-c ol { padding-left: 1.3rem; }
.rd-c li + li { margin-top: .45em; }
.rd-c li::marker { color: var(--fd-v4); }
.rd-c code { font: .9em var(--fd-mono); padding: .12em .38em; border-radius: 6px; background: rgba(237, 233, 254, .08); color: var(--fd-v1); }
.rd-c hr { border: 0; height: 1px; background: var(--fd-line-2); margin: 2.2em 0; }
.rd-c blockquote { margin-left: 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--fd-v6); color: #CFCDE0; }
.rd-tw { overflow-x: auto; border-radius: 12px; border: 1px solid var(--fd-line); }
.rd-c table { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.rd-c th, .rd-c td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--fd-line); vertical-align: top; }
.rd-c th { font: 600 .74rem/1.3 var(--fd-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fd-v4); background: rgba(124, 58, 237, .08); }
.rd-c tr:last-child td { border-bottom: 0; }

/* Encadrés (markdown ::: … et classes HTML existantes) */
.rd-box { position: relative; border-radius: 16px; padding: 1.05rem 1.2rem 1.15rem; border: 1px solid var(--fd-line-2); background: rgba(17, 17, 24, .8); font-size: 1rem; line-height: 1.65; }
.rd-box > * + * { margin-top: .7em; }
.rd-box-h { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .55rem; font: 600 .7rem/1.2 var(--fd-mono); letter-spacing: .12em; text-transform: uppercase; }
.rd-box-h span { display: inline-flex; align-items: center; gap: .45rem; }
.rd-box-h svg { width: 15px; height: 15px; }
.rd-box.is-tip { border-color: rgba(167, 139, 250, .35); background: rgba(124, 58, 237, .09); }
.rd-box.is-tip .rd-box-h { color: var(--fd-v4); }
.rd-box.is-keep { border-color: rgba(52, 211, 153, .35); background: var(--fd-mint-bg); }
.rd-box.is-keep .rd-box-h { color: var(--fd-mint); }
.rd-box.is-warn { border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .07); }
.rd-box.is-warn .rd-box-h { color: var(--fd-amber); }
.rd-box.is-case { border-color: rgba(237, 233, 254, .16); background: rgba(237, 233, 254, .035); }
.rd-box.is-case .rd-box-h { color: var(--fd-v1); }
.rd-box.is-ex { border-color: rgba(167, 139, 250, .3); border-style: dashed; background: transparent; }
.rd-box.is-ex .rd-box-h { color: var(--fd-v4); }
.rd-box.is-sum { border-color: rgba(167, 139, 250, .3); background: linear-gradient(160deg, rgba(124, 58, 237, .12), rgba(17, 17, 24, .8) 60%); }
.rd-box.is-sum .rd-box-h { color: var(--fd-v1); }
.rd-box.is-sum h2, .rd-box.is-sum h3 { font-size: 1.1rem; margin-top: 1.1em; }
.rd-box.is-sum > h2:first-of-type, .rd-box.is-sum > h3:first-of-type { margin-top: .2em; display: block; }
.rd-box.is-prompt { border-color: rgba(167, 139, 250, .38); background: #0E0C18; }
.rd-box.is-prompt .rd-box-h { color: var(--fd-v4); }
.rd-prompt { font: .95rem/1.7 var(--fd-mono); color: #E9E5FF; white-space: pre-wrap; }
.rd-copy {
  min-height: 36px; padding: 0 .8rem; border-radius: 999px; border: 1px solid rgba(167, 139, 250, .45); background: rgba(124, 58, 237, .18);
  color: var(--fd-v1); font: 600 .74rem/1 Inter, sans-serif; letter-spacing: 0; text-transform: none; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
}
.rd-copy:hover { background: rgba(124, 58, 237, .32); }
.rd-copy.is-ok { color: #D1FAE5; border-color: rgba(52, 211, 153, .5); background: rgba(52, 211, 153, .16); }
.rd-copy svg { width: 14px; height: 14px; }

/* Médias et outils de la leçon (vidéo, audio, voix de l'appareil, vitesse, Nova) */
.rd-video { margin: 0 0 1.4rem; border-radius: 16px; overflow: hidden; border: 1px solid var(--fd-line-2); background: #000; aspect-ratio: 16 / 9; }
.rd-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.rd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.9rem; }
.rd-audio { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .35rem .25rem .8rem; border-radius: 999px; border: 1px solid var(--fd-line-2); background: rgba(17, 17, 24, .7); max-width: 100%; }
.rd-audio > svg { width: 17px; height: 17px; color: var(--fd-v4); flex: none; }
.rd-audio audio { height: 38px; width: min(320px, 62vw); }
.rd-tool {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border-radius: 999px;
  border: 1px solid var(--fd-line-2); background: transparent; color: var(--fd-mut); cursor: pointer;
  font: 500 .86rem/1 Inter, system-ui, sans-serif; transition: color .2s, border-color .2s, background-color .2s;
}
.rd-tool:hover { color: var(--fd-text); border-color: rgba(167, 139, 250, .5); }
.rd-tool svg { width: 17px; height: 17px; flex: none; color: var(--fd-v4); }
.rd-tool[aria-pressed="true"] { color: var(--fd-v1); border-color: rgba(167, 139, 250, .55); background: rgba(124, 58, 237, .16); }
.rd-tool:disabled { opacity: .55; cursor: default; }
.rd-rate { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .4rem 0 .9rem; border-radius: 999px; border: 1px solid var(--fd-line); }
.rd-rate span { font: 500 .66rem/1 var(--fd-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fd-dim); }
.rd-rate select { min-height: 36px; padding: 0 .4rem; border: 0; border-radius: 10px; background: transparent; color: var(--fd-text); font: 600 .84rem/1 var(--fd-mono); cursor: pointer; }
.rd-rate select option { background: #111118; color: var(--fd-text); }

/* Notes personnelles */
.rd-notes { margin-top: 2.6rem; border-radius: 16px; border: 1px solid var(--fd-line-2); background: rgba(17, 17, 24, .6); }
.rd-notes summary { list-style: none; cursor: pointer; min-height: 52px; display: flex; align-items: center; gap: .6rem; padding: 0 1.1rem; font-weight: 600; font-size: .93rem; color: var(--fd-text); }
.rd-notes summary::-webkit-details-marker { display: none; }
.rd-notes summary svg { width: 17px; height: 17px; color: var(--fd-v4); flex: none; }
.rd-notes summary svg:last-child { margin-left: auto; color: var(--fd-dim); transition: transform .25s var(--fd-ease); }
.rd-notes[open] summary svg:last-child { transform: rotate(180deg); }
.rd-notes textarea {
  display: block; width: calc(100% - 2.2rem); margin: 0 1.1rem; min-height: 132px; resize: vertical; padding: .8rem .9rem; border-radius: 12px;
  border: 1px solid var(--fd-line-2); background: rgba(10, 10, 15, .8); color: var(--fd-text); font: .95rem/1.6 Inter, system-ui, sans-serif;
}
.rd-notes textarea:focus { border-color: var(--fd-v4); }
.rd-notes-s { margin: .5rem 1.1rem 1rem; min-height: 1.2em; font: 500 .72rem/1.2 var(--fd-mono); color: var(--fd-dim); }

/* Aide des raccourcis clavier */
.rd-keys { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem; background: rgba(5, 5, 8, .72); }
.rd-keys[hidden] { display: none; }
.rd-keys-c { width: min(100%, 26rem); padding: 1.4rem 1.5rem; border-radius: 20px; border: 1px solid var(--fd-line-2); background: #111118; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95); }
.rd-keys-c h2 { font-family: var(--font-title, 'Bricolage Grotesque', system-ui, sans-serif); font-weight: 700; font-stretch: 88%; font-size: 1.4rem; margin: 0 0 1rem; color: #F6F4FF; }
.rd-keys-c dl { margin: 0; display: grid; gap: .55rem; }
.rd-keys-c dl div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; align-items: center; }
.rd-keys-c dd { margin: 0; font-size: .9rem; color: var(--fd-mut); }
.rd-keys-c p { margin: 1rem 0 1.1rem; font-size: .8rem; line-height: 1.5; color: var(--fd-dim); }
.rd kbd { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .45rem; border-radius: 8px; border: 1px solid var(--fd-line-2); border-bottom-width: 2px; background: #17171F; font: 600 .8rem/1 var(--fd-mono); color: var(--fd-v1); }

/* Avis sur le module après un quiz réussi */
.rd-rate-mod { margin-top: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .85rem 1rem; border-radius: 16px; border: 1px solid var(--fd-line); background: rgba(237, 233, 254, .03); }
.rd-rate-mod p { margin: 0; font-size: .92rem; color: var(--fd-text); }
.rd-rate-mod div { display: flex; gap: .15rem; }
.rd-rate-mod button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--fd-dim); cursor: pointer; transition: color .15s, background-color .15s; }
.rd-rate-mod button svg { width: 22px; height: 22px; }
.rd-rate-mod button:hover, .rd-rate-mod div:hover button:has(~ button:hover) { color: var(--fd-amber); }
.rd-rate-mod button.is-on { color: var(--fd-amber); }
.rd-rate-mod button.is-on svg { fill: currentColor; }
.rd-rate-mod button:disabled { cursor: default; }

/* Fin de leçon */
.rd-end { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--fd-line); display: grid; gap: 1rem; }
.rd-end-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between; }
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: 0 1.3rem; border-radius: 999px;
  font: 600 .95rem/1.2 Inter, system-ui, sans-serif; cursor: pointer; text-decoration: none; text-align: left;
  transition: background-color .2s, border-color .2s, color .2s;
}
.rd-btn svg { width: 17px; height: 17px; flex: none; }
.rd-btn-pri { background: var(--fd-v6); color: #fff; border: 1px solid rgba(237, 233, 254, .2); box-shadow: 0 14px 34px -18px rgba(124, 58, 237, .95); }
.rd-btn-pri:hover { background: var(--fd-v7); }
.rd-btn-sec { background: transparent; color: var(--fd-v1); border: 1px solid var(--fd-line-2); }
.rd-btn-sec:hover { border-color: rgba(167, 139, 250, .55); }
.rd-btn-pri small { display: block; font: 500 .74rem/1.3 Inter, sans-serif; color: rgba(255, 255, 255, .8); }
.rd-btn-pri span { display: grid; }
.rd-done { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .9rem 0 .55rem; border-radius: 999px; border: 1px solid var(--fd-line-2); background: transparent; color: var(--fd-mut); font: 500 .88rem/1 Inter, sans-serif; cursor: pointer; }
.rd-done span { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--fd-line-2); display: grid; place-items: center; }
.rd-done svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.rd-done[aria-checked="true"] { color: var(--fd-v1); border-color: rgba(167, 139, 250, .45); }
.rd-done[aria-checked="true"] span { background: var(--fd-v6); border-color: var(--fd-v6); }
.rd-done[aria-checked="true"] svg { opacity: 1; }
.rd-hint { margin: 0; font-size: .84rem; color: var(--fd-dim); }

/* Navigation mobile (bas d'écran) */
.rd-nav { display: none; }

/* ── Quiz intégré ──────────────────────────────────────────────────────── */
.rd-q-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.7rem 0 1.8rem; }
.rd-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .65rem; border-radius: 999px; border: 1px solid var(--fd-line-2); font: 500 .74rem/1 var(--fd-mono); color: var(--fd-mut); }
.rd-chip b { color: var(--fd-v1); font-weight: 600; }
.rd-chip.is-low b { color: var(--fd-amber); }
.rd-qp { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; margin-bottom: 1.6rem; }
.rd-qp i { height: 5px; border-radius: 5px; background: rgba(237, 233, 254, .1); }
.rd-qp i.is-ok { background: var(--fd-mint); }
.rd-qp i.is-ko { background: var(--fd-rose); }
.rd-qp i.is-cur { background: var(--fd-v4); }
.rd-qq { font-size: 1.22rem; line-height: 1.5; font-weight: 600; color: #F6F4FF; margin: .35rem 0 1.2rem; }
.rd-qk { font: 500 .7rem/1.2 var(--fd-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fd-v4); }
.rd-opts { display: grid; gap: .6rem; border: 0; margin: 0; padding: 0; }
.rd-opt { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: .75rem; align-items: start; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--fd-line-2); background: rgba(17, 17, 24, .7); cursor: pointer; font-size: 1rem; line-height: 1.5; color: var(--fd-text); transition: border-color .2s, background-color .2s; }
.rd-opt:hover { border-color: rgba(167, 139, 250, .5); }
.rd-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rd-opt-m { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--fd-line-2); display: grid; place-items: center; font: 600 .74rem/1 var(--fd-mono); color: var(--fd-mut); margin-top: -1px; }
.rd-opt-m svg { width: 13px; height: 13px; }
.rd-opt:has(input:checked) { border-color: var(--fd-v4); background: rgba(124, 58, 237, .14); }
.rd-opt:has(input:checked) .rd-opt-m { border-color: var(--fd-v4); background: var(--fd-v4); color: #140f24; }
.rd-opt:has(input:focus-visible) { outline: 2px solid var(--fd-v1); outline-offset: 2px; }
/* correction : plus spécifique que l'état « coché » (:has) */
.rd-opts .rd-opt.is-ok { border-color: rgba(52, 211, 153, .65); background: rgba(52, 211, 153, .1); }
.rd-opts .rd-opt.is-ok .rd-opt-m { border-color: var(--fd-mint); background: var(--fd-mint); color: #052e1c; }
.rd-opts .rd-opt.is-ko { border-color: rgba(251, 113, 133, .6); background: rgba(251, 113, 133, .08); }
.rd-opts .rd-opt.is-ko .rd-opt-m { border-color: var(--fd-rose); background: var(--fd-rose); color: #3b0a14; }
.rd-opts.is-locked .rd-opt { cursor: default; }
.rd-opts.is-locked .rd-opt:not(.is-ok):not(.is-ko) { opacity: .55; }
.rd-fb { margin-top: 1.1rem; padding: .85rem 1rem; border-radius: 14px; font-size: .95rem; line-height: 1.55; display: flex; gap: .6rem; align-items: flex-start; }
.rd-fb svg { width: 18px; height: 18px; flex: none; margin-top: .12rem; }
.rd-fb.is-ok { background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .35); color: #D1FAE5; }
.rd-fb.is-ko { background: rgba(251, 113, 133, .08); border: 1px solid rgba(251, 113, 133, .35); color: #FFE4E6; }
.rd-fb:empty { display: none; }
.rd-q-act { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* Résultat */
.rd-res { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem 1.8rem; align-items: center; padding: 1.4rem; border-radius: 20px; border: 1px solid var(--fd-line-2); background: rgba(17, 17, 24, .75); }
.rd-res.is-pass { border-color: rgba(52, 211, 153, .4); background: linear-gradient(150deg, rgba(52, 211, 153, .12), rgba(17, 17, 24, .8) 60%); }
.rd-res.is-fail { border-color: rgba(251, 191, 36, .35); }
.rd-ring { position: relative; width: 132px; height: 132px; }
.rd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rd-ring circle { fill: none; stroke-width: 10; }
.rd-ring .t { stroke: rgba(237, 233, 254, .1); }
.rd-ring .v { stroke: var(--fd-v4); stroke-linecap: round; }
.rd-res.is-pass .rd-ring .v { stroke: var(--fd-mint); }
.rd-res.is-fail .rd-ring .v { stroke: var(--fd-amber); }
.rd-ring .th { stroke: #fff; stroke-width: 12; }
.rd-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 2rem/1 var(--fd-mono); color: #fff; font-variant-numeric: tabular-nums; }
.rd-res h2 { font-family: var(--font-title, 'Bricolage Grotesque', system-ui, sans-serif); font-weight: 700; font-stretch: 88%; font-size: 1.7rem; line-height: 1.1; margin: 0 0 .4rem; color: #F6F4FF; }
.rd-res p { margin: 0; color: var(--fd-mut); line-height: 1.6; }
.rd-res-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .7rem; }
.rd-recap { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.rd-recap li { display: grid; grid-template-columns: 24px 1fr; gap: .6rem; font-size: .92rem; line-height: 1.5; color: var(--fd-mut); padding: .65rem .8rem; border-radius: 12px; background: rgba(237, 233, 254, .03); }
.rd-recap svg { width: 16px; height: 16px; margin-top: .2rem; }
.rd-recap .is-ok svg { color: var(--fd-mint); }
.rd-recap .is-ko svg { color: var(--fd-rose); }
.rd-recap em { display: block; font-style: normal; color: var(--fd-text); }

/* Transition entre leçons */
.rd-col.is-out { animation: rdOut .16s var(--fd-ease) both; }
.rd-col.is-enter { animation: rdEnter .34s var(--fd-out) both; }
@keyframes rdOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes rdEnter { from { opacity: 0; transform: translateY(14px); } }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .rd { --rd-top: 56px; grid-template-rows: var(--rd-top) minmax(0, 1fr) auto; }
  .rd-top { padding: 0 .4rem; gap: .2rem; }
  .rd-plan-btn { display: inline-flex; }
  .rd-ic .rd-lbl { display: none; }
  .rd-keys-btn { display: none; }                 /* pas de clavier sur mobile */
  .rd-tools { gap: .4rem; }
  .rd-audio { flex: 1 1 100%; }
  .rd-audio audio { flex: 1; width: auto; }
  .rd-body { grid-template-columns: minmax(0, 1fr); }
  .rd-plan {
    position: absolute; inset: 0 auto 0 0; width: min(86vw, 340px); z-index: 3; border-right: 1px solid var(--fd-line-2);
    transform: translateX(-102%); box-shadow: 30px 0 60px -30px rgba(0, 0, 0, .9);
  }
  .rd.is-plan .rd-plan { transform: none; }
  .rd-scrim { position: absolute; inset: 0; z-index: 2; background: rgba(5, 5, 8, .66); opacity: 0; pointer-events: none; transition: opacity .22s var(--fd-ease); }
  .rd.is-plan .rd-scrim { opacity: 1; pointer-events: auto; }
  .rd.is-focus .rd-body { grid-template-columns: minmax(0, 1fr); }
  .rd-col { padding-bottom: 2.5rem; }
  .rd-c { font-size: 1.04rem; }
  .rd-nav {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: .4rem; align-items: center;
    padding: .45rem .6rem calc(.45rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--fd-line); background: rgba(10, 10, 15, .96);
  }
  .rd-nav .rd-ic { width: 100%; }
  .rd-nav .rd-ic:last-child { justify-content: flex-end; color: var(--fd-v1); }
  .rd-nav .rd-ic:first-child { justify-content: flex-start; }
  /* le bouton de Nova (au premier plan sur tout le site) monte au-dessus de la barre Précédente / Suivante */
  html.rd-open #nova-launcher { translate: 0 -62px; }
  .rd-res { grid-template-columns: 1fr; justify-items: start; }
  .rd-ring { width: 112px; height: 112px; }
  .rd-end-row .rd-btn-pri { width: 100%; }
}
@media (min-width: 900px) { .rd-scrim { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .rd.is-in, .rd-col.is-out, .rd-col.is-enter { animation: none !important; }
  .rd-plan, .rd-scrim, .rd-bar b, .rd-tool, .rd-notes summary svg, .rd-rate-mod button { transition: none !important; }
}