/* Cap Étapes — French course (« Français B1 »). Uses the tokens of style.css. */

/* ============ Hub ============ */
.fr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 22px 0 0; }
.fr-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; background: var(--surface); color: var(--ink); text-decoration: none; border: 2px solid var(--edge); border-radius: var(--radius); transition: transform .15s, box-shadow .15s; }
.fr-step:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--hard); }
.fr-step.blue { box-shadow: inset 0 7px 0 var(--brand); }
.fr-step.green { box-shadow: inset 0 7px 0 var(--ok); }
.fr-step:not(.blue):not(.green) { box-shadow: inset 0 7px 0 var(--accent); }
.fr-step.blue:hover { box-shadow: inset 0 7px 0 var(--brand), 6px 6px 0 var(--hard); }
.fr-step.green:hover { box-shadow: inset 0 7px 0 var(--ok), 6px 6px 0 var(--hard); }
.fr-step:not(.blue):not(.green):hover { box-shadow: inset 0 7px 0 var(--accent), 6px 6px 0 var(--hard); }
.fr-step-n { font: 600 13px var(--mono); color: var(--muted); }
.fr-step-t { font-stretch: 62%; font-weight: 900; font-size: 32px; line-height: .95; text-transform: uppercase; }
.fr-step-x { color: var(--muted); font-size: 15.5px; }
.fr-step-k { font: 500 13px var(--mono); color: var(--ink); margin-top: auto; padding-top: 6px; border-top: 1.5px dashed var(--line); }
.fr-step .btn { align-self: flex-start; pointer-events: none; }
.fr-sec .sec-head { margin-bottom: 28px; }

.fr-units { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fr-unit a { display: grid; grid-template-columns: 86px minmax(0, 1fr) minmax(150px, 220px); gap: 18px; align-items: center; padding: 16px 20px; background: var(--surface); color: var(--ink); text-decoration: none; border: 2px solid var(--edge); border-radius: 14px; transition: transform .12s, box-shadow .12s; }
.fr-unit a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--brand); }
.fr-unit.valid a { border-color: var(--ok); }
.fr-unit-n { display: grid; place-items: center; height: 70px; border-radius: 8px; background: var(--brand); color: #f8f9f5; font-stretch: 62%; font-weight: 900; font-size: 34px; line-height: 1; border: 2px solid var(--edge); }
.fr-unit-n small { font: 600 9.5px var(--mono); letter-spacing: .14em; opacity: .85; }
.fr-unit.valid .fr-unit-n { background: var(--ok); }
.fr-unit-m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fr-unit-t { font-stretch: 62%; font-weight: 800; font-size: 24px; line-height: 1.02; text-transform: uppercase; }
.fr-unit-x { color: var(--muted); font-size: 14.5px; }
.fr-unit-k { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.fr-unit-s { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fr-segs { display: flex; gap: 3px; width: 100%; max-width: 220px; }
.fr-segs i { flex: 1; height: 10px; border-radius: 2px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.fr-segs i.d { background: var(--ok); box-shadow: none; }
.fr-segs i.c { background: var(--warn); box-shadow: none; }
.status-k.done { color: var(--ok); }
.status-k.cur { color: var(--accent-ink); }

.fr-cecr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-bottom: 14px; }
.fr-cecr-c { background: var(--surface); border: 2px solid var(--edge); border-radius: 14px; padding: 18px; }
.fr-cecr-c p { margin: 8px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.35; }

.fr-proof { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
.fr-proof .prose h3 { font-size: 22px; margin: 28px 0 10px; }
.fr-proof .table-wrap td, .fr-proof .table-wrap th { vertical-align: top; }
.fr-res { position: sticky; top: calc(var(--topbar-h) + 20px); }
.fr-res ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fr-res li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1.5px dashed var(--line); }
.fr-res li:last-child { border-bottom: 0; padding-bottom: 0; }
.fr-res li span { color: var(--muted); font-size: 14px; }

/* ============ Unit page ============ */
.fr-unit-page, .fr-ex-page { padding: 28px 0 40px; }
.fr-unit-head, .fr-ex-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.fr-title { font-size: clamp(38px, 5.2vw, 72px); margin: 0; }
.fr-title.sm { font-size: clamp(32px, 4vw, 54px); }
.fr-unit-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.fr-card-h { font-size: 24px !important; margin: 0 0 12px; letter-spacing: .01em; }
.fr-exam-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font: 600 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fr-unit-prog { display: flex; flex-direction: column; gap: 10px; }
.fr-unit-prog .fr-segs { max-width: none; }
.fr-unit-prog .nc-big small { font-size: 18px; }
.fr-unit-prog p { margin: 0; }
.fr-unit-cta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }
.fr-unit-cta .btn-red { margin-left: auto; }
.nc-big { font-stretch: 62%; font-weight: 900; font-size: 44px; line-height: 1; }
.nc-big small { font-size: 20px; color: var(--muted); }

.fr-sec2 { margin-top: 48px; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.fr-sec-h { display: flex; align-items: center; gap: 14px; font-size: clamp(30px, 3.4vw, 44px); margin: 0 0 20px; }
.fr-sec-h span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 8px; background: var(--ink); color: var(--bg); font: 600 16px var(--mono); }

.fr-lesson { max-width: 860px; font-size: 17px; }
.fr-lesson > p { margin: 0 0 14px; }
.fr-h { font-size: 24px; font-weight: 800; margin: 34px 0 12px; padding-top: 18px; border-top: 2px solid var(--edge); }
.fr-lesson > .fr-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.fr-box-k { display: block; font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.fr-rule, .fr-tip { margin: 16px 0; padding: 16px 18px; border-radius: 12px; border: 2px solid var(--edge); background: var(--surface); }
.fr-rule { box-shadow: inset 6px 0 0 var(--brand); padding-left: 24px; }
.fr-rule .fr-box-k { color: var(--brand-ink); }
.fr-rule p, .fr-tip p { margin: 0; }
.fr-tip { border-style: dashed; border-width: 1.5px; }
.fr-tip.astuce { background: var(--ok-soft); border-color: var(--ok); }
.fr-tip.astuce .fr-box-k { color: var(--ok); }
.fr-tip.attention { background: var(--bad-soft); border-color: var(--bad); }
.fr-tip.attention .fr-box-k { color: var(--bad); }
.fr-tip.examen { background: var(--brand-soft); border-color: var(--brand-ink); }
.fr-tip.examen .fr-box-k { color: var(--brand-ink); }
.fr-table { margin: 16px 0; }
.fr-table table { min-width: 0; }
.fr-table th[scope="row"] { font-weight: 600; color: var(--muted); }
.fr-table figcaption { margin-top: 6px; }
.fr-list-t { font-weight: 700; margin: 18px 0 8px; }
.fr-ex { list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 8px; }
.fr-ex li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; }
.fr-ex li > span { padding-top: 6px; }
.fr-dialogue { margin: 18px 0; border: 2px solid var(--edge); border-radius: 14px; background: var(--surface); overflow: hidden; }
.fr-dialogue-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1.5px solid var(--line); }
.fr-dialogue ol { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 10px; }
.fr-dialogue li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.fr-who { font: 600 12.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; padding-top: 3px; }
.fr-dialogue li.v-f .fr-who { color: var(--accent-ink); }
.fr-dialogue li.v-m .fr-who { color: var(--brand-ink); }

.fr-vocab { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.fr-vocab li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; }
.fr-vocab li > span { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; min-width: 0; }
.fr-vocab-en { color: var(--muted); font-size: 14px; }
.fr-vocab i { color: var(--muted); font-size: 14.5px; }

.fr-exlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fr-exlist a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; background: var(--surface); color: var(--ink); text-decoration: none; border: 2px solid var(--edge); border-radius: 12px; transition: transform .12s, box-shadow .12s; }
.fr-exlist a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--brand); }
.fr-exlist li.ok a { border-color: var(--ok); }
.fr-ex-n { display: grid; place-items: center; height: 40px; border-radius: 6px; border: 1.5px solid var(--edge); font: 600 14px var(--mono); }
.fr-exlist li.ok .fr-ex-n { background: var(--ok); color: var(--surface); border-color: var(--ok); }
.fr-exlist li.ko .fr-ex-n { background: var(--warn-soft); }
.fr-ex-m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fr-ex-t { font-weight: 700; font-size: 17px; }
.fr-ex-k { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fr-ex-s { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fr-ex-s b { font-stretch: 62%; font-weight: 900; font-size: 24px; }
.fr-unit-nav { margin-top: 40px; }

/* ============ Audio, recorder ============ */
.fr-say { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--edge); background: var(--surface); color: var(--brand-ink); cursor: pointer; }
.fr-say:hover { background: var(--brand-soft); }
.fr-say.playing, .fr-audio.playing .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.fr-audio { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fr-plays { font-size: 12px; color: var(--muted); }
.fr-listen { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; border-radius: 12px; background: var(--surface-2); border: 1.5px dashed var(--dash); margin-bottom: 8px; }
.fr-ctx { margin: 0; font-weight: 600; }
.fr-trans { margin: 8px 0; }
.fr-trans summary { cursor: pointer; font: 600 13px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fr-trans p { margin: 8px 0 0; padding-left: 12px; border-left: 3px solid var(--line); }
.fr-trans p.v-m { border-left-color: var(--brand); }
.fr-trans p.v-f { border-left-color: var(--accent); }
.fr-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fr-rec .fr-rec-btn svg { color: var(--accent); }
.fr-rec.on .fr-rec-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.fr-rec.on .fr-rec-btn svg { color: #fff; animation: fr-blink 1s infinite; }
.fr-rec audio { height: 40px; max-width: 100%; }
@keyframes fr-blink { 50% { opacity: .25; } }
.fr-rate { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--mono); text-transform: uppercase; color: var(--muted); }
.fr-rate select { height: 38px; font: 600 14px var(--font); color: var(--ink); background: var(--surface); border: 1.5px solid var(--edge); border-radius: 8px; padding: 0 8px; }

/* ============ Exercise page ============ */
.fr-ex-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.fr-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 900px; }
.fr-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: clamp(16px, 2.4vw, 24px); background: var(--surface); border: 2px solid var(--edge); border-radius: 16px; }
.fr-items.prod .fr-item, .fr-item:only-child { grid-template-columns: minmax(0, 1fr); }
.fr-item-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--edge); font: 600 14px var(--mono); }
.fr-item.ok .fr-item-n { background: var(--ok); color: var(--surface); border-color: var(--ok); }
.fr-item.part .fr-item-n { background: var(--warn); color: var(--surface); border-color: var(--warn); }
.fr-item.ko .fr-item-n { background: var(--bad); color: var(--surface); border-color: var(--bad); }
.fr-item-b { min-width: 0; }
.fr-item-a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.fr-checkall { display: flex; justify-content: flex-end; max-width: 900px; margin-top: 14px; }

.fr-q + .fr-q { margin-top: 22px; padding-top: 18px; border-top: 1.5px dashed var(--line); }
.fr-q-t { font-weight: 700; font-size: 18px; margin: 0 0 12px; }
.fr-blank { display: inline-block; min-width: 70px; border-bottom: 2px solid var(--ink); color: transparent; line-height: 1; }
.fr-opts { display: grid; gap: 8px; }
.fr-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; text-align: left; font: 600 16px/1.35 var(--font); color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 10px; padding: 8px 12px 8px 8px; cursor: pointer; }
.fr-opt .opt-l { width: 34px; height: 34px; font-size: 13px; }
.fr-opt:hover:not(:disabled) { border-color: var(--brand-ink); background: var(--brand-soft); }
.fr-opt.chosen { border-color: var(--brand-ink); background: var(--brand-soft); }
.fr-opt.chosen .opt-l { background: var(--brand); border-color: var(--brand); color: #fff; }
.fr-opt.correct { border-color: var(--ok); background: var(--ok-soft); }
.fr-opt.correct .opt-l { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.fr-opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.fr-opt.wrong .opt-l { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.fr-opt:disabled { cursor: default; }
.fr-opt:disabled:not(.correct):not(.wrong) { opacity: .55; }
.fr-opt.dunno { border-style: dashed; color: var(--muted); }

.fr-fb { margin-top: 12px; padding: 12px 14px; border-radius: 10px; border: 1.5px dashed var(--dash); background: var(--surface-2); font-size: 15.5px; }
.fr-fb b { margin-right: 4px; }
.fr-fb.ok { background: var(--ok-soft); border-color: var(--ok); }
.fr-fb.ok > b:first-child { color: var(--ok); }
.fr-fb.ko { background: var(--bad-soft); border-color: var(--bad); }
.fr-fb.ko > b:first-child { color: var(--bad); }
.fr-fb.acc { background: var(--warn-soft); border-color: var(--warn); }
.fr-fb.acc > b:first-child { color: var(--warn); }
.fr-exp { color: var(--ink); }

.fr-doc { margin: 0 0 18px; border: 2px solid var(--edge); border-radius: 12px; background: var(--bg); overflow: hidden; font-size: 16px; }
.fr-doc-t { padding: 10px 16px; font-weight: 800; background: var(--surface-2); border-bottom: 1.5px solid var(--line); }
.fr-doc-m { padding: 8px 16px; font: 500 12.5px var(--mono); color: var(--muted); border-bottom: 1.5px dashed var(--line); }
.fr-doc-b { padding: 14px 16px; }
.fr-doc-b p { margin: 0 0 10px; }
.fr-doc-b p:last-child { margin: 0; }
.fr-doc.k-affiche, .fr-doc.k-annonce { border-style: double; border-width: 5px; }
.fr-doc.k-affiche .fr-doc-t, .fr-doc.k-annonce .fr-doc-t { text-align: center; text-transform: uppercase; font-stretch: 62%; font-size: 22px; letter-spacing: .03em; }
.fr-doc.k-sms { max-width: 520px; border-radius: 18px; }
.fr-doc.k-sms .fr-doc-b { background: var(--brand-soft); }
.fr-doc.k-article .fr-doc-t { font-family: var(--serif); font-weight: 400; font-size: 24px; background: transparent; }
.fr-doc.k-formulaire .fr-doc-b, .fr-doc.k-notice .fr-doc-b { font-family: var(--mono); font-size: 14.5px; }

.fr-sent { font-size: 18px; line-height: 2.1; margin: 0; }
.fr-gap { font: 600 17px var(--font); color: var(--ink); background: var(--bg); border: none; border-bottom: 2.5px solid var(--brand-ink); border-radius: 4px 4px 0 0; padding: 2px 6px; margin: 0 2px; max-width: 100%; }
.fr-gap:focus { outline: none; background: var(--brand-soft); }
.fr-gap-r { display: inline; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.fr-gap-r.ok { background: var(--ok-soft); color: var(--ok); }
.fr-gap-r.accent { background: var(--warn-soft); color: var(--warn); }
.fr-gap-r.ko { background: var(--bad-soft); color: var(--bad); }
.fr-gap-r.ko b, .fr-gap-r.accent b { color: var(--ok); }
.fr-hint { color: var(--muted); font-style: italic; font-size: 15.5px; }
.fr-choice { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; margin: 0 2px; }
.fr-choice button { font: 600 15.5px var(--font); color: var(--ink); background: var(--bg); border: 1.5px solid var(--edge); border-radius: 999px; padding: 3px 12px; line-height: 1.5; cursor: pointer; }
.fr-choice button:hover:not(:disabled) { background: var(--brand-soft); }
.fr-choice button.on { background: var(--ink); color: var(--bg); }
.fr-choice button.correct { background: var(--ok); color: var(--surface); border-color: var(--ok); }
.fr-choice button.wrong { background: var(--bad); color: var(--surface); border-color: var(--bad); text-decoration: line-through; }
.fr-choice button.hide { display: none; }
.fr-choice button:disabled { cursor: default; }

.fr-order-line { min-height: 54px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 2px dashed var(--dash); border-radius: 10px; background: var(--bg); }
.fr-order-line:empty::before { content: "Touchez les mots dans l'ordre…"; color: var(--muted); font-size: 14.5px; padding-left: 6px; }
.fr-order-line.ok { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }
.fr-order-line.ko { border-style: solid; border-color: var(--bad); background: var(--bad-soft); }
.fr-order-bank { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 40px; }
.fr-tok { font: 600 16px var(--font); color: var(--ink); background: var(--surface); border: 1.5px solid var(--edge); border-bottom-width: 3px; border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.fr-tok:hover:not(:disabled) { background: var(--brand-soft); }
.fr-order-line .fr-tok { background: var(--brand-soft); }
.fr-tok:disabled { cursor: default; }

.fr-assoc { display: grid; gap: 8px; }
.fr-assoc-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1.5px dashed var(--line); }
.fr-assoc-r:last-child { border-bottom: 0; }
.fr-assoc-l { font-weight: 700; }
.fr-assoc select { width: 100%; min-height: 44px; font: 500 15px var(--font); color: var(--ink); background: var(--bg); border: 1.5px solid var(--edge); border-radius: 8px; padding: 6px 8px; }
.fr-assoc-a { font-size: 15px; }
.fr-assoc-a.ok { color: var(--ok); font-weight: 600; }
.fr-assoc-a.ko b { color: var(--ok); }

.fr-src { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.fr-line { width: 100%; font: 500 17px var(--font); color: var(--ink); background: var(--bg); border: 2px solid var(--edge); border-radius: 10px; padding: 10px 12px; margin-top: 8px; resize: vertical; }
.fr-line:focus { outline: 3px solid var(--brand-soft); border-color: var(--brand-ink); }
.fr-line.ok { border-color: var(--ok); background: var(--ok-soft); }
.fr-line.accent { border-color: var(--warn); background: var(--warn-soft); }
.fr-line.ko { border-color: var(--bad); background: var(--bad-soft); }
.fr-dict { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fr-diff { display: block; margin-top: 8px; font-size: 17px; line-height: 1.9; }
.w-ok { color: var(--ok); }
.w-miss { color: var(--warn); text-decoration: underline wavy; font-weight: 700; }
.w-ins, .w-bad { color: var(--bad); }
.w-fix { color: var(--ok); font-weight: 700; }

/* ============ Writing / speaking tasks ============ */
.fr-task { display: grid; gap: 14px; }
.fr-consigne { padding: 16px 18px; border-radius: 12px; background: var(--brand-soft); border: 1.5px solid var(--brand-ink); }
.fr-consigne p { margin: 0 0 6px; font-size: 17px; }
.fr-consigne-k { margin: 6px 0 0 !important; font-size: 12.5px !important; color: var(--brand-ink); text-transform: uppercase; letter-spacing: .06em; }
.fr-tips summary { cursor: pointer; font-weight: 700; }
.fr-tips ul { margin: 8px 0 0; padding-left: 20px; }
.fr-tips li { margin-bottom: 4px; }
.fr-write-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.fr-wc { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); }
.fr-wc.ok { background: var(--ok-soft); color: var(--ok); }
.fr-wc.over { background: var(--warn-soft); color: var(--warn); }
.fr-chrono { display: inline-flex; align-items: center; gap: 8px; }
.fr-chrono-t { font-size: 18px; }
.fr-chrono-t.low, .fr-stage-c.low { color: var(--bad); }
.fr-text { width: 100%; min-height: 220px; font: 400 17px/1.6 var(--font); color: var(--ink); background: var(--bg); border: 2px solid var(--edge); border-radius: 12px; padding: 14px 16px; resize: vertical; }
.fr-text:focus { outline: 3px solid var(--brand-soft); border-color: var(--brand-ink); }
.fr-text[readonly] { background: var(--surface-2); }
.fr-write .muted { margin: 6px 0 0; }
.fr-after:empty { display: none; }
.fr-after, .fr-after-in { display: grid; gap: 14px; }
.fr-checks, .fr-model, .fr-self, .fr-mine { padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); }
.fr-checks ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.fr-checks li.ok { color: var(--ok); }
.fr-checks li.ko { color: var(--bad); }
.fr-model { border: 2px solid var(--ok); background: var(--ok-soft); }
.fr-model p { margin: 8px 0 0; }
.fr-model .fr-audio { margin-top: 4px; }
.fr-mine p { margin: 6px 0 0; }
.fr-grid { display: grid; gap: 10px; margin: 10px 0 14px; }
.fr-crit { margin: 0; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fr-crit legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-weight: 600; font-size: 15px; }
.fr-crit label { display: inline-flex; align-items: center; cursor: pointer; }
.fr-crit input { position: absolute; opacity: 0; pointer-events: none; }
.fr-crit label span { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--edge); font: 600 14px var(--font); }
.fr-crit input:checked + span { background: var(--ink); color: var(--bg); }
.fr-crit input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.fr-examiner { padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1.5px dashed var(--dash); }
.fr-examiner-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.fr-examiner ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fr-examiner li { display: flex; gap: 10px; align-items: flex-start; }
.fr-examiner li .fr-qtext { padding-top: 6px; }
.fr-hide-q { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 14px; color: var(--muted); cursor: pointer; }
.hide-q .fr-qtext { filter: blur(6px); user-select: none; }
.fr-stage { display: grid; gap: 12px; padding: 16px 18px; border-radius: 14px; border: 2px solid var(--edge); background: var(--surface); }
.fr-stage-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fr-stage-k { font-size: 13px; letter-spacing: .1em; color: var(--muted); }
.fr-stage-c { font-stretch: 62%; font-weight: 900; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--font); }
.speaking .fr-stage { border-color: var(--accent); box-shadow: inset 0 6px 0 var(--accent); }
.speaking .fr-stage-k { color: var(--accent-ink); }
.fr-stage-a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.fr-result { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; max-width: 900px; margin-top: 18px; }
.fr-result > div { flex: 1 1 320px; }
.fr-result-s { font-stretch: 62%; font-weight: 900; font-size: 34px; }
.fr-result p { margin: 6px 0 14px; }
.fr-result.ok .stamp-word { color: var(--ok); }
.fr-result.ko .stamp-word { color: var(--bad); }

/* ============ Placement, mock tests ============ */
.fr-pl .q-card .fr-q:first-child { margin-top: 0; }
.fr-bylevel { display: grid; gap: 8px; margin: 14px auto; max-width: 460px; text-align: left; }
.fr-bylevel > div { display: grid; grid-template-columns: 44px minmax(0, 1fr) 54px; gap: 12px; align-items: center; }
.fr-lv { font: 600 13px var(--mono); }
.fr-review .fr-q { margin-top: 14px; }
.fr-review details summary { cursor: pointer; font-weight: 700; margin-bottom: 8px; }

.fr-mock-setup { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; padding-bottom: 30px; }
.fr-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fr-format { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 400 14px var(--font); cursor: pointer; }
.fr-format b { font-stretch: 62%; font-weight: 900; font-size: 24px; text-transform: uppercase; margin-bottom: 4px; }
.fr-format span { color: var(--muted); }
.fr-format.on { border-color: var(--ink); box-shadow: 4px 4px 0 var(--hard); }
.fr-voice-test { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fr-past li { gap: 10px; }
.fr-dash-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.fr-lv-pill { font: 600 11.5px var(--mono); padding: 3px 7px; border-radius: 4px; background: var(--bad-soft); color: var(--bad); }
.fr-lv-pill.ok { background: var(--ok-soft); color: var(--ok); }
.fr-mock-intro .card { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.fr-mock-intro h2 { margin: 0; }
.fr-mock-intro p { margin: 0; font-size: 17px; }
.fr-mock-k { color: var(--brand-ink); font-size: 14px !important; }
.fr-mk-t { font-stretch: 62%; font-weight: 800; font-size: 20px; text-transform: uppercase; white-space: nowrap; }
.fr-mock .q-card .fr-q:first-of-type { margin-top: 18px; }
.fr-mock-ee, .fr-mock-eo { padding: 24px 0 40px; display: grid; gap: 16px; max-width: 900px; }
.fr-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 700 15px var(--font); cursor: pointer; }
.fr-tabs button.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.fr-tabs small { font-size: 12px; opacity: .8; }
.fr-tabs small.ok { color: var(--ok); opacity: 1; }
.fr-tabs button.on small.ok { color: #9fe0bd; }
.fr-tabp { display: grid; gap: 12px; }
.fr-mock-res { padding-bottom: 40px; }
.fr-mock-res .cert { box-shadow: 12px 14px 0 var(--ok); }
.fr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.fr-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); }
.fr-tile.ok { border-color: var(--ok); }
.fr-tile.ko { border-color: var(--bad); }
.fr-tile.todo { border-style: dashed; }
.fr-tile-lv { font-stretch: 62%; font-weight: 900; font-size: 46px; line-height: 1; }
.fr-tile.ok .fr-tile-lv { color: var(--ok); }
.fr-tile.ko .fr-tile-lv { color: var(--bad); }
.fr-prod-r { display: grid; gap: 12px; margin-bottom: 16px; }
.fr-prod-r > p { margin: 0; }
.fr-review-all > summary { cursor: pointer; font-weight: 700; margin: 10px 0; }

/* ============ Dashboard card ============ */
.fr-dash { margin-bottom: 24px; }
.fr-dash-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 20px; align-items: center; }
.fr-dash-row > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fr-dash-cta { flex-direction: row !important; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .fr-steps { grid-template-columns: 1fr; }
  .fr-proof, .fr-mock-setup, .fr-unit-top { grid-template-columns: 1fr; }
  .fr-res { position: static; }
  .fr-dash-row { grid-template-columns: 1fr; }
  .fr-dash-cta { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .fr-unit a { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .fr-unit-n { height: 60px; font-size: 28px; }
  .fr-unit-t { font-size: 20px; }
  .fr-unit-s { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .fr-unit-k { display: none; }
  .fr-item { grid-template-columns: minmax(0, 1fr); }
  .fr-item-n { width: 28px; height: 28px; font-size: 12px; }
  .fr-assoc-r { grid-template-columns: 1fr; gap: 6px; }
  .fr-dialogue li { grid-template-columns: 1fr; gap: 2px; }
  .fr-formats { grid-template-columns: 1fr; }
  .fr-exlist a { grid-template-columns: 40px minmax(0, 1fr); }
  .fr-ex-s { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
  .fr-mk-t { display: none; }
  .fr-unit-cta .btn-red { margin-left: 0; width: 100%; }
  .fr-sent { font-size: 17px; }
}

/* Sentence items: the « Vérifier » button sits next to the sentence on wide screens. */
.fr-item-b.t-trous, .fr-item-b.t-choix, .fr-item-b.t-transfo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.t-trous .fr-sent, .t-choix .fr-sent { flex: 1 1 420px; }
.t-transfo .fr-src, .t-transfo .fr-hint { flex: 1 1 100%; margin: 0; }
.t-transfo .fr-line { flex: 1 1 360px; margin-top: 4px; }
.t-trous .fr-item-a, .t-choix .fr-item-a, .t-transfo .fr-item-a { margin-top: 0; }
.fr-item-b .fr-fbw { flex: 1 1 100%; }
.fr-table th[scope="row"] { width: 1%; white-space: nowrap; }
/* `hidden` must win over the display rules above (.btn, .fr-tabp…). */
.fr-tabp[hidden], .fr-stage [hidden], .fr-rec [hidden], .fr-write [hidden], .fr-task [hidden] { display: none !important; }
.fr-home-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 22px 0 0; color: var(--muted); font-size: 16px; }
/* The site's generic `.ok` colours text green: keep containers in ink. */
.fr-item.ok, .fr-exlist li.ok, .fr-result.ok, .fr-tile.ok, .fr-order-line.ok, .fr-line.ok, .fr-fb.ok { color: var(--ink); }

/* ============ Page D (canvas, 2026-10-21): hub by goal, IRN table, document layout, mock-test screens ============ */
.fr-hub { padding-top: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
.fr-hero { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.fr-hero-l { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.fr-hero h1 { margin: 0; font-size: clamp(44px, 6.2vw, 92px); }
.fr-hero .lead { font-size: 18px; max-width: 620px; }
.fr-plaque .pl-in { flex-direction: column; gap: 4px; padding: 8px 20px 10px; min-width: 150px; }
.fr-plaque .pl-n { border-right: 0; padding-right: 0; letter-spacing: .2em; }
.fr-plaque .pl-t { font-weight: 900; font-size: 46px; letter-spacing: .04em; }
.lv-stamp { display: inline-grid; place-items: center; min-width: 74px; padding: 8px 12px; border: 3.5px solid currentColor; outline: 1.5px solid currentColor; outline-offset: -8px; border-radius: 6px; color: var(--brand-ink); font-stretch: 62%; font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: .06em; transform: rotate(-4deg); }
.lv-cr .lv-stamp { color: var(--ok); }
.lv-nat .lv-stamp { color: var(--bad); }
.lv-stamp.light { color: #f8f9f5; }
.fr-goals { flex: 1 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; }
.fr-goal { display: flex; flex-direction: column; gap: 10px; text-align: left; min-height: 196px; padding: 16px 16px 14px; background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: 14px; font-family: var(--font); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.fr-goal:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--hard); }
.fr-goal.on { box-shadow: 4px 4px 0 var(--hard); }
.fr-goal.lv-csp.on { border-color: var(--brand-ink); background: var(--brand-soft); }
.fr-goal.lv-cr.on { border-color: var(--ok); background: var(--ok-soft); }
.fr-goal.lv-nat.on { border-color: var(--bad); background: var(--bad-soft); }
.fr-goal-k { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fr-goal-t { font-weight: 800; font-size: 16px; line-height: 1.2; }
.fr-goal .lv-stamp { margin-top: auto; align-self: flex-start; }
.fr-goal-x { font-size: 13px; line-height: 1.4; color: var(--muted); }
.fr-goal-banner { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 16px 20px; border-radius: 14px; border: 1.5px dashed var(--brand-ink); background: var(--brand-soft); font-size: 15.5px; line-height: 1.55; }
.fr-goal-banner.lv-cr { background: var(--ok-soft); border-color: var(--ok); }
.fr-goal-banner.lv-nat { background: var(--bad-soft); border-color: var(--bad); }
.fr-goal-banner p { margin: 0; flex: 1 1 320px; }
.fr-goal-banner .btn { flex: none; }
.fr-hub .fr-steps { margin: 0; }
.fr-legend { margin: 0; display: flex; flex-wrap: wrap; gap: 14px 18px; font: 500 12px var(--mono); color: var(--muted); }
.fr-legend span { display: inline-flex; align-items: center; gap: 7px; }
.fr-legend i { width: 14px; height: 14px; border-radius: 3px; background: var(--surface); border: 1.5px solid var(--edge); }
.fr-legend i.d { background: var(--ok); }
.fr-legend i.c { background: var(--warn); }
.fr-unit.cur a { border-color: var(--brand); }
.fr-irn table { font-size: 15px; }
.fr-irn th[scope="row"] { font-weight: 700; white-space: nowrap; vertical-align: top; }
.fr-irn thead th { background: var(--ink); color: var(--bg); font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.fr-irn .fr-irn-b1 td, .fr-irn .fr-irn-b1 th { background: var(--ok-soft); border-top: 2px solid var(--edge); }
.fr-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.fr-way { background: var(--surface); border: 2px solid var(--edge); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.fr-way .fr-box-k { margin: 0; color: var(--brand-ink); }
.fr-way h3 { margin: 0 !important; font-size: 19px; line-height: 1.2; }
.fr-way p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.notice.warn { background: var(--warn-soft); border-color: var(--warn); }
.fr-res { background: #1b3a73; color: #f8f9f5; border-color: #0f1b33; }
.fr-res h3 { color: #f8f9f5; font-stretch: 62%; font-weight: 900; font-size: 24px; text-transform: uppercase; letter-spacing: .01em; }
.fr-res a { color: #f8f9f5; }
.fr-res li { border-bottom-color: #5e7db5; }
.fr-res li span { color: #d3ddee; }

/* Unit and exercise pages: the page-C position bar */
.fr-unit-page .lp-top, .fr-ex-page .lp-top { margin-bottom: 20px; }
.fr-unit-page .crumbs, .fr-ex-page .crumbs { margin: 0; }
.lp-pos .nav-mini { text-transform: none; letter-spacing: .04em; }
.lp-pos .nav-mini.btn-ghost { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }

/* Document exercises (lecture, écoute): the document on the left, the questions on the right */
.fr-item-b.t-lecture, .fr-item-b.t-ecoute { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px 24px; align-items: start; }
.fr-items:has(.t-lecture), .fr-items:has(.t-ecoute) { max-width: none; }
.fr-doc-col { position: sticky; top: calc(var(--topbar-h) + 16px); min-width: 0; }
.fr-doc-col .fr-doc { margin: 0; background: var(--surface); box-shadow: 8px 8px 0 var(--brand); }
.fr-doc-col .fr-listen { margin: 0; border: 2px solid var(--edge); background: var(--surface); box-shadow: 8px 8px 0 var(--brand); }
.fr-doc-col .fr-trans-w { margin-top: 10px; }
.fr-item-b.t-lecture .fr-q:first-child, .fr-item-b.t-ecoute .fr-q:first-child { margin-top: 0; }
.fr-item-b .fr-qs { min-width: 0; }

/* Mock test: setup */
.fr-mock-setup .fr-card-h { margin-bottom: 0; }
.fr-format { border-radius: 14px; padding: 16px 18px; }
.fr-format.on { border-color: var(--brand-ink); background: var(--brand-soft); box-shadow: 4px 4px 0 var(--hard); }
.fr-format.on span { color: var(--ink); }
.fr-format:hover:not(.on) { border-color: var(--edge); }
.fr-mock-setup .chips-select button { border-width: 2px; border-color: var(--edge); min-height: 48px; font-weight: 700; }
.fr-mock-setup .chips-select.multi button small { font: 500 12px var(--mono); opacity: .75; }
.fr-mock-setup .chips-select.multi button.on::before { content: "✓"; font: 700 12px var(--mono); width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; display: inline-grid; place-items: center; }
.fr-mock-side { display: grid; gap: 20px; }
.fr-goal-card { background: #1b3a73; color: #f8f9f5; border-color: #0f1b33; display: flex; flex-direction: column; gap: 10px; }
.fr-goal-card .fr-box-k { color: #c9d3e6; margin: 0; }
.fr-goal-row { display: flex; align-items: center; gap: 16px; }
.fr-goal-row p { margin: 0; font-size: 15px; line-height: 1.5; }
.fr-goal-row .lv-stamp { flex: none; }
.fr-mock-setup .fr-voice-test { padding: 14px 16px; border-radius: 12px; background: var(--surface-2); }
.fr-mock-setup .notice { background: var(--warn-soft); border-color: var(--warn); margin: 0; }

/* Mock test: exam bar and listening player */
.exam-bar .eb-k { display: inline-flex; align-items: center; gap: 8px; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #c9d3e6; white-space: nowrap; }
.exam-bar .eb-k::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #d33a2c; }
.fr-mock .fr-listen { border: 2px solid var(--edge); background: var(--surface); box-shadow: 8px 8px 0 var(--brand); padding: 20px 22px; gap: 12px; }
.fr-mock .fr-listen .fr-ctx { font-size: 19px; line-height: 1.35; }
.fr-mock .fr-listen .fr-audio .btn { min-height: 56px; padding: 0 22px; font-size: 16px; }
.fr-mock .fr-listen .fr-plays { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1.5px solid var(--edge); color: var(--ink); }
.fr-mock .fr-q { background: var(--surface); border: 2px solid var(--edge); border-radius: 16px; padding: 20px 22px; margin-top: 18px; }
.fr-mock .fr-q + .fr-q { padding-top: 20px; border-top: 2px solid var(--edge); }
.fr-mock .fr-q-t { font-size: 20px; }

/* Mock test: result sheet */
.fr-mock-res .cert { box-shadow: 10px 10px 0 var(--brand); }
.fr-est-stamp { position: absolute; top: 18px; right: clamp(16px, 4vw, 36px); display: inline-grid; place-items: center; padding: 10px 16px; border: 4px solid var(--bad); outline: 1.5px solid var(--bad); outline-offset: -10px; border-radius: 8px; color: var(--bad); font-stretch: 62%; font-weight: 900; font-size: 26px; letter-spacing: .06em; text-transform: uppercase; transform: rotate(8deg); opacity: .9; pointer-events: none; }
.fr-tile { background: var(--surface-2); }
.fr-tile.ok { background: var(--ok-soft); }
.fr-tile.ko { background: var(--bad-soft); }
.fr-objective { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 18px; border-radius: 12px; background: var(--brand-soft); border: 1.5px dashed var(--brand-ink); }
.fr-objective p { margin: 0; flex: 1 1 320px; font-size: 15px !important; line-height: 1.5; }
.fr-objective .lv-stamp { min-width: 60px; padding: 6px 10px; font-size: 24px; }

@media (max-width: 980px) {
  .fr-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-item-b.t-lecture, .fr-item-b.t-ecoute { grid-template-columns: 1fr; }
  .fr-doc-col { position: static; }
}
@media (max-width: 640px) {
  .fr-goals { grid-template-columns: 1fr; }
  .fr-goal { min-height: 0; }
  .fr-ways { grid-template-columns: 1fr; }
  .fr-plaque .pl-t { font-size: 36px; }
  .fr-mock-setup .chips-select.multi button small { display: none; }
  .exam-bar .eb-k { display: none; }
  .fr-est-stamp { position: static; align-self: flex-start; transform: rotate(-4deg); font-size: 20px; padding: 6px 12px; }
}