/* Fiches A4 de l'Atelier : reprend la mise en page des fiches papier d'origine.
   Toutes les mesures sont en points (1/72 de pouce), comme dans les PDF. */

@font-face { font-family: SheetSans; src: url(../fonts/sheet-sans.woff) format('woff'); font-weight: 400; font-display: block; }
@font-face { font-family: SheetSans; src: url(../fonts/sheet-sans-bold.woff) format('woff'); font-weight: 700; font-display: block; }

.sheets {
  --ink: #252525;
  --grey: #666;
  --student: #1c4fa8;
  --teacher: #c0392b;
  --fix: #1e8449;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 4px 0 24px;
}

.sheet {
  position: relative;
  flex: none;
  width: 841.89pt;
  height: 595.28pt;
  box-sizing: border-box;
  background: #fff;
  color: var(--ink);
  font-family: SheetSans, 'DejaVu Sans', Verdana, sans-serif;
  font-size: 11.8pt;
  line-height: 1.25;
  overflow: hidden;
  zoom: var(--z, 1);
  box-shadow: 0 2px 4px rgb(30 40 50 / 6%), 0 10px 34px rgb(30 40 50 / 12%);
  border-radius: 2px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
.sheet[data-format="portrait"] { width: 595.28pt; height: 841.89pt; }
.sheet * { box-sizing: border-box; }
/* Spécificité minimale : les boutons de la fiche de l'élève prennent exactement les mêmes
   tailles que le texte de la fiche vierge (sinon la mise en page changerait d'une vue à l'autre). */
:where(.sheet) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sheet strong { font-weight: 700; }
.sheet h1, .sheet h2, .sheet h3, .sheet h4 { font-family: inherit; }
.sheet u { text-decoration-thickness: .8pt; text-underline-offset: 2.5pt; }

/* ---------- en-tête */
.sh-eyebrow { position: absolute; left: 34pt; top: 17.4pt; font-size: 9pt; font-weight: 700; line-height: 1; text-transform: uppercase; white-space: pre; }
.sh-titleline { position: absolute; left: 34pt; right: 150pt; top: 32.4pt; display: flex; align-items: baseline; gap: 22pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* titre long : sur deux lignes au plus, le sous-titre à la suite */
.sh-titleline.two { display: block; white-space: normal; max-height: 52pt; }
.sh-titleline.two .sh-title { display: inline; line-height: 1.15; }
.sh-titleline.two .sh-sub { display: inline; margin-left: 10pt; line-height: 1.15; }
.sh-title { margin: 0; font-size: 27pt; font-weight: 700; line-height: 1.1; letter-spacing: -.005em; }
.sh-sub { font-size: 16pt; color: var(--grey); }
.sh-level { position: absolute; right: 34pt; top: 17pt; width: 94pt; height: 28pt; border: .7pt solid var(--ink); border-radius: 6pt; display: flex; align-items: center; justify-content: center; font-size: 11.5pt; font-weight: 700; }
.sh-namerow { position: absolute; left: 34pt; right: 34pt; top: calc(75.7pt + var(--hd, 0pt)); display: flex; justify-content: space-between; font-size: 11pt; line-height: 1; }
.sh-dots { letter-spacing: .02em; }
.sh-filled { color: var(--student); font-weight: 700; border-bottom: .6pt dotted #888; padding: 0 6pt; }
.sh-tagline { position: absolute; left: 34pt; top: calc(74.7pt + var(--hd, 0pt)); font-size: 11pt; line-height: 1; color: var(--grey); }
.sh-rule { position: absolute; left: 34pt; right: 34pt; top: calc(98.6pt + var(--hd, 0pt)); border-top: .8pt solid var(--ink); }

/* ---------- repères */
.sh-rep-title { position: absolute; left: 34pt; top: calc(110.3pt + var(--hd, 0pt)); font-size: 9.2pt; font-weight: 700; line-height: 1; white-space: pre; }
.sh-cards { position: absolute; left: 34pt; right: 34pt; top: calc(130pt + var(--hd, 0pt)); height: 117pt; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12pt; }
.sh-card { background: #f7f7f7; border: .7pt solid #b5b5b5; border-radius: 5pt; padding: 8.3pt 10pt 0; font-size: 10.7pt; line-height: 18pt; overflow: hidden; }
.sh-card-title { font-weight: 700; margin-bottom: 6pt; }
.sh-band { position: absolute; left: 34pt; right: 34pt; top: calc(111pt + var(--hd, 0pt)); min-height: 45pt; background: #f7f7f7; border: .7pt solid #bbb; border-radius: 5pt; padding: 11.6pt 12pt 6pt; }
.sh-band-title { font-size: 9pt; font-weight: 700; line-height: 1; margin-bottom: 5pt; }
.sh-band-items { font-size: 11.4pt; line-height: 1.2; }
.sh-band-sep { display: inline-block; margin: 0 18pt; }
.sh-band-text .sh-band-items { font-size: 10.8pt; line-height: 1.35; }
.sh-cadres { position: absolute; left: 34pt; right: 34pt; top: calc(111pt + var(--hd, 0pt)); display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); column-gap: 26pt; background: #f7f7f7; border: .7pt solid #bbb; border-radius: 5pt; padding: 10.5pt 12pt 3pt; overflow: hidden; }
.sh-cadre { min-width: 0; }
.sh-cadre-title { font-size: 8.6pt; font-weight: 700; line-height: 1; text-transform: uppercase; margin-bottom: 5pt; }
.sh-cadre-line { font-size: 10.6pt; line-height: 18.4pt; }

/* ---------- corps en colonnes */
.sh-body { position: absolute; left: 34pt; right: 34pt; display: grid; grid-template-columns: 1fr; }
.sheet[data-cols="2"] .sh-body { grid-template-columns: 1fr 1fr; column-gap: 28.05pt; }
.sheet[data-cols="2"] .sh-body::after { content: ''; position: absolute; left: 50%; top: 1pt; bottom: 0; border-left: .6pt solid #d0d0d0; }
.sh-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.sh-col.shrunk > .ex { zoom: var(--shrink); }
/* hors de la fiche vierge, rien n'est jamais caché : une réponse très longue reste lisible */
.sheets:not([data-mode="blank"]) .sh-col { overflow: visible; }
.layout-probe { position: fixed; left: -30000px; top: 0; visibility: hidden; pointer-events: none; contain: layout style; }
.sh-foot { position: absolute; left: 34pt; right: 34pt; bottom: 12pt; display: flex; justify-content: space-between; align-items: baseline; font-size: 8.5pt; line-height: 1; color: var(--grey); }
.sh-foot b { font-size: 8.5pt; color: var(--ink); }

/* pages qui s'allongent (fiches des versions 0.4/0.5) */
.sheet[data-flow] { height: auto !important; min-height: 841.89pt; overflow: visible; }
.sheet[data-flow] .sh-body { position: relative; left: 0; right: 0; margin: 0 34pt; padding: var(--body-top, 118pt) 0 46pt; }
.sheet[data-flow] .sh-col { overflow: visible; }
.sheet[data-flow] .sh-band { position: relative; top: auto; left: auto; right: auto; margin: 111pt 34pt 0; }
.mx-item.inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4pt 14pt; }
.mx-item.inline .mx-text { min-width: 150pt; margin: 0; }
.mx-item.inline .qc-opts { margin-left: 0; }
.mx .qc-opts.inline { column-gap: 24pt; }
.mx-item { margin-bottom: calc(9pt + var(--air, 0) * 6pt); }
.mx-text { font-size: 11.6pt; line-height: 1.4; margin-bottom: 4pt; }
.mx .qc-opts { margin-left: 4pt; }

/* ---------- exercice */
.ex { position: relative; margin-bottom: calc(14pt + var(--air, 0) * 26pt); }
.ex:last-child { margin-bottom: 0; }
.ex-head { display: flex; align-items: flex-start; gap: 9pt; min-height: 24pt; }
.ex-num { flex: none; width: 23pt; height: 24pt; border: .7pt solid var(--ink); border-radius: 5pt; display: flex; align-items: center; justify-content: center; font-size: 12pt; font-weight: 700; line-height: 1; }
.ex-titles { flex: 1; min-width: 0; padding-top: 5.2pt; }
.ex-consigne { font-size: 12.4pt; font-weight: 700; line-height: 1.25; }
.ex-aide { font-size: 10.5pt; color: var(--grey); margin-top: 5pt; line-height: 1.2; }
button.ex-num { position: relative; font-size: 12pt; font-weight: 700; line-height: 1; text-align: center; border: .7pt solid var(--ink); border-radius: 5pt; }
button.ex-num:hover, button.ex-num:focus-visible { background: #eef3f7; }
.ex-num-ear { position: absolute; right: -7pt; bottom: -6pt; width: 13pt; height: 13pt; border-radius: 50%; background: #fff; border: .6pt solid #b9c6d4; font-size: 6.5pt; line-height: 11.8pt; text-align: center; font-weight: 400; }
.ex-body { padding-left: 7pt; margin-top: calc(10pt + var(--air, 0) * 8pt); }
.ex-modele { font-size: 11.6pt; line-height: 1.55; margin-bottom: 8pt; }
.ex-texte { font-size: 11.4pt; line-height: 1.55; margin-bottom: 8pt; }
.ex-note { font-size: 10.5pt; color: var(--grey); margin: 4pt 0 8pt; }
.ex-lecture .ex-body, .ex-encadre .ex-body { padding-left: 0; margin-top: 0; }

/* encres */
.ink-student { color: var(--student); font-weight: 700; }
.ink-teacher { color: var(--teacher); font-weight: 700; }
.ink-fix { color: var(--fix); font-weight: 700; }
.sheets[data-mode="correction"] .ink-teacher { color: var(--teacher); }

/* ---------- entourer */
.en-rows { display: flex; flex-direction: column; }
.en-row { display: flex; flex-wrap: wrap; align-items: center; font-size: 12pt; min-height: calc(32pt + var(--air, 0) * 10pt); margin-top: -2pt; }
.en-sep { color: var(--grey); margin: 0 7pt; font-size: 12pt; }
.w { position: relative; display: inline-block; padding: 0 4pt; line-height: 20pt; border-radius: 9pt; }
.w.ring-student::after, .w.ring-teacher::before { content: ''; position: absolute; inset: -1pt -2pt; border-radius: 50%; pointer-events: none; }
.w.ring-student::after { border: 1.6pt solid var(--student); }
.w.ring-teacher::before { border: 1.6pt solid var(--teacher); inset: -3.5pt -4.5pt; }
.sheets[data-mode="correction"] .w.ring-teacher::before { inset: -1pt -2pt; }
.enl-row { display: flex; flex-wrap: wrap; font-size: 12pt; line-height: 30pt; margin-top: 2pt; }
/* lettres un peu espacées sur papier comme à l'écran (on entoure plus facilement un groupe de
   lettres) : la fiche de l'élève a exactement la mise en page de la fiche imprimée */
.enl-cell { min-width: 120pt; padding-right: 6pt; display: inline-flex; align-items: center; }
.enl-word { display: inline-flex; letter-spacing: .12em; }
.l { position: relative; display: inline-block; line-height: 20pt; padding: 0 1.2pt; letter-spacing: inherit; } /* un bouton ne l’hérite pas seul */
.rng { position: relative; display: inline-flex; }
.rng::after, .rng-both::before { content: ''; position: absolute; inset: -1.5pt -3.5pt; border: 1.6pt solid var(--student); border-radius: 50%; pointer-events: none; }
.rng-t::after { border-color: var(--teacher); }
.rng-both::before { inset: -4pt -6pt; border-color: var(--teacher); }
.sheets[data-mode="correction"] .rng-t::after { inset: -1.5pt -3.5pt; }
.l.ul-t { text-decoration: underline; text-decoration-color: var(--teacher); text-decoration-thickness: 1.5pt; text-underline-offset: 3pt; }
.enl-word.st-ok, .enl-word.st-retry, .enl-word.st-partial { box-shadow: 0 2.5pt 0 -1pt var(--state); }

/* ---------- compléter */
.cp-grid { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); grid-auto-rows: minmax(calc(38pt + var(--air, 0) * 12pt), auto); align-items: end; margin-top: -12pt; column-gap: 8pt; }
.cp-item { font-size: 11.8pt; line-height: 1.2; padding-bottom: 12pt; white-space: nowrap; }
.cp-item.long { white-space: normal; line-height: 2.3; padding-bottom: 5pt; }
/* banque de mots imprimée (« brille • nage • est ») */
.cp-bank { font-size: 11.6pt; font-weight: 700; line-height: 1.3; margin: 0 0 calc(12pt + var(--air, 0) * 6pt); }
.cp-bank-label { font-weight: 700; }
.cp-bank-sep { display: inline-block; margin: 0 7pt; font-weight: 700; }
/* une phrase et une question au-dessus du trou (« Le bus arrive. / Qu’est-ce qui arrive ? ») */
.cp-item.ctx { white-space: normal; padding-bottom: calc(6pt + var(--air, 0) * 6pt); }
.cp-phrase { font-size: 11.8pt; line-height: 1.3; margin-bottom: 4pt; }
.cp-question { font-size: 10.6pt; color: var(--grey); line-height: 1.3; margin-bottom: 1pt; }
.cp-line { white-space: nowrap; }
.cp-grid.lined { margin-top: -6pt; grid-auto-rows: minmax(calc(34pt * var(--ec, 1) + var(--air, 0) * 12pt), auto); }
.cp-grid.lined .cp-item { padding-bottom: calc(4pt + var(--air, 0) * 6pt); }
/* trou pour écrire des mots à la main : un petit cadre à lignes (comme les lignes d'écriture) */
.blank.lined, .blank-input.lined {
  width: var(--w, 100pt); min-width: 0; max-width: 100%; height: calc(28.5pt * var(--ec, 1)); text-align: left !important;
  /* la ligne foncée (21pt sous le haut du cadre, plus en « écriture large ») tombe sur la
     ligne de base du texte */
  margin: 2pt 4pt calc(-4.4pt - 7.5pt * (var(--ec, 1) - 1)); vertical-align: text-bottom;
  background-image: linear-gradient(#cfcfcf, #cfcfcf), linear-gradient(#cfcfcf, #cfcfcf), linear-gradient(#cfcfcf, #cfcfcf), linear-gradient(#8a8a8a, #8a8a8a), linear-gradient(#cfcfcf, #cfcfcf);
  background-size: 100% .35pt, 100% .35pt, 100% .35pt, 100% .65pt, 100% .35pt;
  background-position: 0 0, 0 calc(7pt * var(--ec, 1)), 0 calc(14pt * var(--ec, 1)), 0 calc(21pt * var(--ec, 1)), 0 calc(28pt * var(--ec, 1));
  background-repeat: no-repeat;
  border-left: .4pt solid #bdbdbd; border-radius: 0;
}
.blank.lined .ink-student, .blank.lined .ink-teacher:not(.above), .blank.lined .ink-fix:not(.above) { position: absolute; left: 5pt; right: 2pt; bottom: calc(6pt + 6pt * (var(--ec, 1) - 1)); font-size: 12pt; line-height: 1; text-align: left; white-space: nowrap; }
.blank-input.lined { padding: calc(21pt * var(--ec, 1) - 11.1pt) 5pt calc(7.5pt * var(--ec, 1) - 2.9pt); font-size: 12pt; line-height: 14pt; text-align: left; }
/* enveloppe d'un trou (cache du corrigé, aide, liste de mots) : exactement la taille du trou,
   alignée comme lui ; rien de ce qu'elle contient d'autre ne prend de place */
.blank-wrap { position: relative; display: inline-flex; vertical-align: text-bottom; }
.blank {
  position: relative;
  display: inline-block;
  /* même largeur pour tous les trous d'un exercice, dans toutes les vues (voir model.js) ;
     une réponse plus longue est écrite plus petit (fitAnswers), le trou ne grandit pas */
  width: max(34pt, calc(var(--trou, 4) * .62em + 10pt));
  height: 15pt;
  margin: 0 3pt;
  font-size: 11.8pt;
  /* alignement qui ne dépend pas du contenu : trou vide, rempli, corrigé ou champ de saisie
     occupent exactement la même place (la ligne ne bouge pas d'un mode à l'autre) */
  vertical-align: text-bottom;
  text-align: center !important;
  background: linear-gradient(to right, #888 45%, transparent 45%) left bottom / 4.5pt .65pt repeat-x;
}
.blank .ink-student, .blank .ink-teacher, .blank .ink-fix { display: block; font-size: 11.8pt; line-height: 14pt; text-align: center; white-space: nowrap; }
.blank .above, .blank-wrap > .above { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); font-size: max(9.5pt, calc(9pt / var(--shrink, 1))); line-height: 1; white-space: nowrap; }
.blank-wrap > .above { margin-bottom: 1pt; }
.sheets[data-mode="student"] .blank { background-color: rgb(28 79 168 / 5%); border-radius: 3pt 3pt 0 0; }
.sheets[data-mode="student"] .blank:hover { background-color: rgb(28 79 168 / 12%); }
/* aides à l'écriture après « Vérifier » */
.blank-wrap { position: relative; }
/* bulle posée sous le trou : elle ne pousse pas le reste de la fiche */
.hint-bubble { position: absolute; left: 0; top: 100%; z-index: 6; width: max-content; max-width: 230pt; margin-top: 3pt; padding: 2pt 8pt; border-radius: 8pt; background: #fff4d9; border: .8pt solid #e3b35c; color: #6b4a0c; font-size: 9.6pt; font-weight: 600; line-height: 1.35; white-space: normal; box-shadow: 0 2pt 6pt rgb(0 0 0 / 12%); }
.hint-line { margin: 3pt 0 0; padding: 3pt 8pt; border-radius: 8pt; background: #fff4d9; border: .8pt solid #e3b35c; color: #6b4a0c; font-size: 10pt; font-weight: 600; }
/* trou où l'on écrit au clavier (ordinateur) */
.blank-input { width: max(34pt, calc(var(--trou, 4) * .62em + 10pt)); max-width: 100%; min-width: 34pt; height: 15pt; padding: 0 3pt; border: 0; border-radius: 3pt 3pt 0 0; font: inherit; font-size: 11.8pt; font-weight: 700; line-height: 15pt; color: var(--student); text-align: center; outline: none; vertical-align: text-bottom; }
.blank-input:focus { background-color: #fff !important; box-shadow: 0 0 0 1.6pt #1c4fa8, 0 0 0 4pt rgb(28 79 168 / 18%); }
.blank-input::-webkit-calendar-picker-indicator { display: none !important; }
.blank-input.st-ok, .blank-input.st-retry, .blank-input.st-partial { box-shadow: inset 0 -2.2pt 0 var(--state); }

/* ---------- cocher */
.qc-list { display: flex; flex-direction: column; gap: calc(12pt + var(--air, 0) * 22pt); }
.qc { position: relative; }
.qc-text { font-size: 11.8pt; line-height: 1.35; margin-bottom: calc(9pt + var(--air, 0) * 8pt); }
.qc-opts.inline { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, max-content)); column-gap: 60pt; row-gap: 8pt; padding-left: 5pt; }
.qc-opts.vertical { display: flex; flex-direction: column; gap: calc(12pt + var(--air, 0) * 14pt); padding-left: 1pt; }
.qc-opts.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18pt; row-gap: calc(7pt + var(--air, 0) * 10pt); padding-left: 5pt; }
.qc-opts.grid .qc-opt { font-size: 11.2pt; }
.qc-opts.grid .box { margin-top: 3pt; }
.qc-opt { display: flex; align-items: flex-start; gap: 8pt; font-size: 11.6pt; line-height: 1.5; }
.qc-opts.vertical .qc-opt { font-size: 10.9pt; }
.box { position: relative; flex: none; display: inline-block; width: 10pt; height: 10pt; border: .7pt solid var(--grey); margin-top: 3.4pt; }
.qc-opts.vertical .box { margin-top: 3pt; }
.box .tick { position: absolute; left: -1pt; top: -8.5pt; font-size: 16.5pt; line-height: 1; }
.box .tick.ring { inset: -4pt; top: -4pt; border: 1.4pt solid var(--teacher); border-radius: 50%; }
.sheets[data-mode="student"] .qc-opt { border-radius: 6pt; padding: 1pt 4pt 1pt 2pt; margin: -1pt -4pt -1pt -2pt; }
.sheets[data-mode="student"] .qc-opt:hover { background: rgb(28 79 168 / 7%); }

/* ---------- classer */
.cl-words { font-size: 11.8pt; line-height: 18pt; margin-top: -4pt; margin-bottom: calc(8pt + var(--air, 0) * 8pt); }
.cl-sep { color: var(--ink); margin: 0 4pt; }
.cl-word { display: inline-block; border-radius: 4pt; padding: 0 2pt; } /* même boîte, mot écrit ou bouton */
.cl-word.used { color: #9aa0a6; text-decoration: line-through; text-decoration-thickness: .8pt; }
.cl-word.picked { background: #fff1b8; box-shadow: 0 0 0 1.2pt #e0b400; }
.cl-table { display: grid; grid-template-columns: repeat(var(--cols), 1fr); border: .7pt solid #aaa; margin: 0 4pt 0 -3pt; }
.cl-col { display: flex; flex-direction: column; border-left: .6pt solid #aaa; text-align: left; }
.cl-col:first-child { border-left: 0; }
.cl-head { height: 26pt; display: flex; align-items: center; justify-content: center; background: #efefef; border-bottom: .7pt solid #aaa; font-size: 10.8pt; font-weight: 700; }
.cl-cell { position: relative; height: calc(22pt + var(--air, 0) * 6pt); margin: 0 7pt; background: linear-gradient(to right, #b0b0b0 33%, transparent 33%) left bottom / 4.5pt .5pt repeat-x; display: flex; align-items: flex-end; justify-content: center; gap: 4pt; padding-bottom: 2pt; font-size: 11pt; }
.cl-cell:last-child { margin-bottom: 5pt; }
.cl-cell .below { font-size: 9pt; }
.cl-placed.wrong { text-decoration: line-through; text-decoration-color: var(--teacher); }
.cl-goto { font-size: 8.5pt; }
.cl-missing { font-size: 9.5pt; margin-top: 4pt; }
.sheets[data-mode="student"] .cl-col:hover .cl-head { background: #e3ecf8; }
/* aide pendant un geste (mot choisi, point choisi) : bulle flottante, hors de la mise en page */
.cl, .rl-wrap { position: relative; }
.cl-help, .rl-help { position: absolute; left: 0; bottom: 100%; z-index: 6; margin-bottom: 4pt; padding: 2pt 8pt; border-radius: 8pt; background: #fff4d9; border: .8pt solid #e3b35c; color: #6b4a0c; font-size: 9.6pt; font-weight: 600; pointer-events: none; box-shadow: 0 2pt 6pt rgb(0 0 0 / 12%); }
.cl-missing { position: absolute; left: 0; right: 0; top: 100%; margin-top: 2pt; font-size: 9.5pt; }

/* ---------- relier */
.rl { position: relative; margin: 4pt 0 2pt; }
.rl-left, .rl-right { position: absolute; top: 0; bottom: 0; }
.rl-left { left: 0; width: 38%; }
.rl-right { left: 62%; right: 0; }
.rl-item { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 6pt; font-size: 11.6pt; line-height: 1.15; }
.rl-left .rl-item { justify-content: flex-end; text-align: right !important; }
.rl-dot { flex: none; width: 6pt; height: 6pt; border-radius: 50%; background: var(--ink); }
.rl-left .rl-dot { margin-right: -3pt; }
.rl-right .rl-dot { margin-left: -3pt; }
.rl-item.picked .rl-dot { box-shadow: 0 0 0 3pt #ffd84d; }
.rl-item.picked .rl-text { background: #fff1b8; border-radius: 3pt; }
.rl-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rl-lines line { stroke-linecap: round; }
.rl-lines .ln-student { stroke: var(--student); stroke-width: 1.8pt; }
.rl-lines .ln-teacher { stroke: var(--teacher); stroke-width: 1.6pt; stroke-dasharray: 5 3; }
.sheets[data-mode="correction"] .rl-lines .ln-teacher { stroke-dasharray: none; }
.rl-lines .ln-hit { stroke: transparent; stroke-width: 14pt; cursor: pointer; pointer-events: stroke; }

/* ---------- écrire (réglure 2,5 mm avec ligne d'appui) */
.wr-item { margin-bottom: calc(7pt + var(--air, 0) * 14pt); }
.wr-item:last-child { margin-bottom: 0; }
.wr-text { font-size: 11.2pt; line-height: 1.3; margin-bottom: calc(2pt + var(--air, 0) * 6pt); }
.wr-modele { font-size: 12.1pt; line-height: 1.4; margin: -1pt 0 8pt; }
.wr-phrase { font-size: 12pt; line-height: 1.35; margin: 0 0 6pt; }
/* --ec : 1 (écriture normale) ou 1,25 (« écriture large », réglage de l'enseignant) */
.sheets.ecriture-large { --ec: 1.25; }
.lines { position: relative; height: calc((var(--rows, 1) * 36pt - 5.3pt) * var(--ec, 1)); margin: -1.5pt 7pt 0 0; }
.lignage { position: relative; height: calc(36pt * var(--ec, 1)); }
.lignage.last { height: calc(30.7pt * var(--ec, 1)); } /* le cadre s'arrête sous la dernière ligne tracée */
.lignage i { position: absolute; left: 0; right: 0; border-top: .35pt solid #d8d8d8; }
.lignage i:nth-child(1) { top: calc(2pt * var(--ec, 1)); }
.lignage i:nth-child(2) { top: calc(9.09pt * var(--ec, 1)); }
.lignage i:nth-child(3) { top: calc(16.17pt * var(--ec, 1)); }
.lignage i.base { top: calc(23.26pt * var(--ec, 1)); border-top: .65pt solid #888; }
.lignage i:nth-child(5) { top: calc(30.35pt * var(--ec, 1)); }
.lignage::before { content: ''; position: absolute; left: 0; top: calc(2pt * var(--ec, 1)); height: calc(28.35pt * var(--ec, 1)); border-left: .4pt solid #bebebe; }
.lines-text { position: absolute; left: 5pt; right: 4pt; top: calc(1pt + 5pt * (var(--ec, 1) - 1)); font-size: 12.5pt; line-height: calc(36pt * var(--ec, 1)); white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; }
.lines-text.second { top: calc(16pt * var(--ec, 1)); font-size: 10.5pt; font-weight: 700; opacity: .95; }
/* réponse plus longue que les lignes : deux lignes de texte par ligne de la fiche */
/* écriture serrée : deux lignes de texte par ligne d'écriture, sans jamais dépasser du cadre */
/* Tailles minimales SUR LA FEUILLE : dans une colonne réduite (zoom --shrink), la taille écrite
   compense la réduction (réponse de l'élève ≥ 10 pt, corrections ≥ 9 pt). */
.lines-text.compact { font-size: max(10.8pt, calc(10pt / var(--shrink, 1))); line-height: calc((var(--rows, 1) * 36pt - 7.3pt) * var(--ec, 1) / (2 * var(--rows, 1))); top: 1pt; }
/* Réponse trop longue : renvoi vers la page « Suite des réponses » (voir fitAnswers). */
.suite-mark { display: inline-block; font-size: max(8.5pt, calc(8.5pt / var(--shrink, 1))); line-height: 11pt; font-weight: 700; font-style: normal; color: var(--ink); border: .7pt solid #555; border-radius: 3pt; padding: 0 3pt; vertical-align: 1pt; white-space: nowrap; }
.suite-alone { position: absolute; right: 4pt; bottom: 3pt; }
.sheet.annex .annex-body { position: absolute; left: 34pt; right: 34pt; overflow: hidden; }
.annex-item { margin: 0 0 14pt; }
.annex-head { font-size: 10.5pt; font-weight: 700; margin-bottom: 5pt; }
.annex-text { font-size: 12.5pt; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.annex-text + .annex-text { margin-top: 4pt; font-size: 11pt; }
.annex-label { font-style: normal; font-weight: 700; color: var(--ink); }
.annex-section { font-size: 13pt; font-weight: 700; margin: 6pt 0 10pt; }
.annex-criteria { margin: 0; padding-left: 16pt; font-size: 11.5pt; line-height: 1.5; }
/* Photocopie en noir et blanc : la correction de l'enseignant se reconnaît aussi à sa forme
   (écriture penchée, anneaux et traits en pointillés), pas seulement à sa couleur. */
.sheets:not([data-mode="correction"]) .ink-teacher { font-style: italic; }
.sheets:not([data-mode="correction"]) .w.ring-teacher::before,
.sheets:not([data-mode="correction"]) .rng-t::after,
.sheets:not([data-mode="correction"]) .rng-both::before,
.sheets:not([data-mode="correction"]) .box .tick.ring { border-style: dashed; }
/* Groupe de mots entouré : seulement les bords qui existent (haut et bas, puis les deux bouts) ;
   « border-style » sur les quatre côtés dessinait une barre entre deux mots du groupe. */
.sheets:not([data-mode="correction"]) .act-entourer .sel-t::before { border-top-style: dashed; border-bottom-style: dashed; }
.sheets:not([data-mode="correction"]) .act-entourer .sel-t.t-start::before { border-left-style: dashed; }
.sheets:not([data-mode="correction"]) .act-entourer .sel-t.t-end::before { border-right-style: dashed; }
.sheets:not([data-mode="correction"]) .act-souligner .sel-t,
.sheets:not([data-mode="correction"]) .l.ul-t { text-decoration-style: dashed; }
.sheets:not([data-mode="correction"]) .cq-ans.expected rect { stroke-dasharray: 3 2; }
.lines-text.ink-fix::before { content: '✎ '; font-weight: 400; }
.lines-text.second.compact { top: 12pt; font-size: max(9.8pt, calc(9pt / var(--shrink, 1))); }
.ink-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; stroke: var(--student); overflow: visible; }
.lines-tools { position: absolute; right: -2pt; top: -20pt; display: none; gap: 4pt; }
.sheets[data-mode="student"] .lines { cursor: text; border-radius: 4pt; }
.sheets[data-mode="student"] .lines:hover { background: rgb(28 79 168 / 4%); }
.sheets[data-mode="student"] .lines-tools { display: flex; }
.tool { width: 22pt; height: 18pt; border-radius: 5pt !important; background: #f1f5fa !important; border: .6pt solid #c9d6e6 !important; font-size: 11pt !important; line-height: 16pt; text-align: center !important; color: #2b4f7e !important; }
.tool:hover { background: #e2ecf8 !important; }

/* ---------- vrai / faux */
.vf { display: flex; flex-direction: column; gap: 10pt; }
.vf-row { display: flex; align-items: flex-start; gap: 12pt; font-size: 11.4pt; line-height: 1.4; }
.vf-text { flex: 1; }
.vf-opts { display: flex; gap: 14pt; }
.vf-opt { display: inline-flex; align-items: center; gap: 5pt; font-size: 10.5pt; }
.vf-opt .box { margin-top: 0; }

/* ---------- souligner */
.sl { display: flex; flex-direction: column; gap: calc(6pt + var(--air, 0) * 6pt); font-size: 12pt; line-height: 1.8; }
.sl-row { position: relative; }
/* mots et espaces : même boîte (hauteur de ligne) dans toutes les vues, pour que les
   anneaux et les traits d'un groupe se raccordent exactement */
.sw { position: relative; display: inline-block; border-radius: 3pt; }
.sg { position: relative; display: inline-block; white-space: pre; }
.sl-row .b { font-weight: 700; }
.sl-row .u { text-decoration: underline; text-decoration-thickness: .8pt; text-underline-offset: 2.5pt; }
/* mot repère encadré (« [[Le chien]] aboie. ») : un seul cadre autour du groupe */
.sl-row .mark { background: #f1f1f1; box-shadow: 0 .7pt 0 #9a9a9a, 0 -.7pt 0 #9a9a9a; padding: 1pt 0; line-height: 1.35; }
.sl-row .mark.m-start { box-shadow: 0 .7pt 0 #9a9a9a, 0 -.7pt 0 #9a9a9a, -.7pt 0 0 #9a9a9a; border-radius: 3pt 0 0 3pt; padding-left: 3pt; }
.sl-row .mark.m-end { box-shadow: 0 .7pt 0 #9a9a9a, 0 -.7pt 0 #9a9a9a, .7pt 0 0 #9a9a9a; border-radius: 0 3pt 3pt 0; padding-right: 3pt; }
.sl-row .mark.m-start.m-end { box-shadow: 0 0 0 .7pt #9a9a9a; border-radius: 3pt; }
/* souligner : un trait continu sous le mot ou le groupe */
.act-souligner .sel-s { box-shadow: inset 0 -1.8pt 0 var(--student); }
.act-souligner .sel-t { text-decoration: underline; text-decoration-color: var(--teacher); text-decoration-thickness: 1.6pt; text-underline-offset: 4pt; }
/* entourer : un seul anneau autour du mot ou du groupe (sans rien déplacer) */
.act-entourer .sel-s::after, .act-entourer .sel-t::before { content: ''; position: absolute; left: 0; right: 0; top: 1pt; bottom: 1pt; border-top: 1.6pt solid var(--student); border-bottom: 1.6pt solid var(--student); pointer-events: none; }
.act-entourer .sel-s.s-start::after { left: -4pt; border-left: 1.6pt solid var(--student); border-radius: 11pt 0 0 11pt; }
.act-entourer .sel-s.s-end::after { right: -4pt; border-right: 1.6pt solid var(--student); border-radius: 0 11pt 11pt 0; }
.act-entourer .sel-s.s-start.s-end::after { border-radius: 11pt; }
.act-entourer .sel-t::before { top: -2pt; bottom: -2pt; border-color: var(--teacher); }
.act-entourer .sel-t.t-start::before { left: -8pt; border-left: 1.6pt solid var(--teacher); border-radius: 13pt 0 0 13pt; }
.act-entourer .sel-t.t-end::before { right: -8pt; border-right: 1.6pt solid var(--teacher); border-radius: 0 13pt 13pt 0; }
.act-entourer .sel-t.t-start.t-end::before { border-radius: 13pt; }
.sheets[data-mode="correction"] .act-entourer .sel-t::before { top: 1pt; bottom: 1pt; }
.sheets[data-mode="correction"] .act-entourer .sel-t.t-start::before { left: -3.5pt; }
.sheets[data-mode="correction"] .act-entourer .sel-t.t-end::before { right: -3.5pt; }
/* phrases par paires : a. / b. */
.sl-group { display: grid; grid-template-columns: 16pt 1fr; align-items: start; }
.sl-label { font-weight: 700; line-height: 1.8; }
.sl-group-rows { display: flex; flex-direction: column; }

/* ---------- lecture, encadré */
.rd { font-size: 11.2pt; line-height: 1.5; }
.rd-title { font-size: 13pt; font-weight: 700; margin-bottom: 6pt; }
.rd-text p { margin: 0 0 6pt; text-align: justify; hyphens: auto; }
.rd-source { font-size: 8.5pt; color: var(--grey); margin-top: 4pt; }
.bx { background: #f7f7f7; border: .7pt solid #bbb; border-radius: 5pt; padding: 8pt 10pt; font-size: 11pt; line-height: 1.45; }
.bx-title { font-weight: 700; margin-bottom: 3pt; }

/* ---------- légender un schéma */
.lg-title { font-size: 10.5pt; font-weight: 700; margin: 0 0 4pt; }
.lg-bank { font-size: 11pt; margin: 0 0 6pt; }
.lg-frame { padding: 0 30pt; }
.lg-draw { position: relative; width: min(100%, calc(var(--h, 150pt) * var(--ratio, 2))); aspect-ratio: var(--ratio, 2); margin: 0 auto; }
.lg-svg, .lg-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lg-line { position: absolute; height: 0; border-top: .8pt solid #333; pointer-events: none; }
.lg-dot { position: absolute; width: 4.5pt; height: 4.5pt; margin: -2.25pt 0 0 -2.25pt; border-radius: 50%; background: #222; pointer-events: none; }
.lg-num { position: absolute; width: 17pt; height: 17pt; margin-top: -8.5pt; padding: 0; border: 1.2pt solid #222 !important; border-radius: 50% !important; background: #fff !important; font-size: 10pt !important; font-weight: 700; line-height: 14.5pt; text-align: center !important; color: #222; }
.lg-num.g { left: -30pt; }
.lg-num.d { right: -30pt; }
.sheets[data-mode="student"] .lg-num:hover { background: #e3ecf8 !important; }
.lg-answers { display: flex; flex-wrap: wrap; gap: 8pt 18pt; margin-top: 10pt; font-size: 11.6pt; }
.lg-answer { display: inline-flex; align-items: flex-end; gap: 2pt; }
.lg-answer .blank { min-width: max(72pt, calc(var(--trou, 6) * .62em + 10pt)); }

/* ---------- grille à cocher */
.gr { border: .7pt solid #999; border-radius: 3pt; font-size: 11pt; overflow: hidden; }
.gr-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 2), minmax(46pt, max-content)); border-top: .5pt solid #bbb; }
.gr-row:first-child { border-top: 0; }
.gr-row > * { padding: 4pt 7pt; display: flex; align-items: center; min-height: 19pt; }
.gr-head { background: #efefef; font-weight: 700; font-size: 10.4pt; }
.gr-col { justify-content: center; text-align: center; border-left: .5pt solid #bbb; }
.gr-cell { justify-content: center; border-left: .5pt solid #bbb !important; }
.gr-cell .box { margin-top: 0; }
.sheets[data-mode="student"] .gr-cell:hover { background: rgb(28 79 168 / 7%) !important; }
.gr-row.st-ok, .gr-row.st-retry, .gr-row.st-partial { box-shadow: inset 3pt 0 0 var(--state); }

/* ---------- image */
.im { margin: 0; }
.im-svg { display: flex; justify-content: center; }
.im-svg svg { height: 100%; width: auto; max-width: 100%; display: block; }
.im-cap { font-size: 9.6pt; color: var(--grey); text-align: center; margin-top: 3pt; font-style: italic; }

/* ---------- écoute */
.qc-listen { display: flex; align-items: center; gap: 6pt; height: 20pt; } /* même hauteur avec ou sans bouton ▶ */
.listen-btn { display: inline-flex; align-items: center; gap: 2pt; height: 19pt; font-size: 11pt !important; padding: 0 10pt !important; border-radius: 12pt !important; border: 1pt solid #9db6d6 !important; background: #eef4fb !important; color: #1c4fa8 !important; }
.listen-btn:hover { background: #dde9f7 !important; }
.qc-listen-word { font-size: 11pt; }
.print-only { display: none; }
.lang-en { font-style: normal; }

/* ---------- états de correction (entraînement, copies) */
.st-ok { --state: #1e8449; }
.st-retry { --state: #c0392b; }
.st-partial { --state: #d68910; }
.st-review { --state: #7d8a96; }
.en-row.st-ok, .en-row.st-retry, .en-row.st-partial, .qc-opts.st-ok, .qc-opts.st-retry, .qc-opts.st-partial, .vf-row.st-ok, .vf-row.st-retry, .sl-row.st-ok, .sl-row.st-retry { box-shadow: -4pt 0 0 -2pt var(--state); }
.blank.st-ok { background-image: linear-gradient(#1e8449, #1e8449); background-size: 100% 1.4pt; }
.blank.st-retry { background-image: linear-gradient(#c0392b, #c0392b); background-size: 100% 1.4pt; }
.lines.st-ok::after, .lines.st-retry::after, .cl-table.st-ok::after, .rl.st-ok::after, .cl-table.st-retry::after, .rl.st-retry::after, .cl-table.st-partial::after, .rl.st-partial::after {
  position: absolute; right: -2pt; top: -14pt; font-size: 11pt; font-weight: 700; color: var(--state);
}
.lines.st-ok::after, .cl-table.st-ok::after, .rl.st-ok::after { content: '✓'; }
.lines.st-retry::after, .cl-table.st-retry::after, .rl.st-retry::after { content: '✗'; }
.cl-table.st-partial::after, .rl.st-partial::after { content: '½'; }
.cl-table { position: relative; }

/* ---------- caches du corrigé progressif */
/* Caches du corrigé pas à pas : posés par-dessus la fiche, ils ne déplacent jamais rien. */
.mask {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18pt;
  height: 16pt;
  margin: 0;
  border: .8pt dashed #7d8a90 !important;
  border-radius: 5pt !important;
  background: #eeeeeb !important;
  color: #333 !important;
  font-size: 10pt !important;
  font-weight: 700;
  vertical-align: middle;
  text-align: center !important;
}
.mask.open { background: transparent !important; border-color: transparent !important; }
.mask.open:hover { border-color: #aaa !important; }
.blank-wrap .mask { position: absolute; inset: -1pt 1pt -2pt 1pt; width: auto; height: auto; margin: 0; }
.blank-wrap .mask.open { pointer-events: auto; }
.lines-wrap { position: relative; }
.lines-wrap > .mask { position: absolute; right: 6pt; top: -18pt; }
.qc > .mask { position: absolute; right: 0; top: 0; }
.en-row, .vf-row, .gr-row, .mx-item, .enl-cell { position: relative; }
.sl-row > .mask, .en-row > .mask, .vf-row > .mask, .gr-row > .mask, .mx-item > .mask { right: -3pt; top: 50%; transform: translateY(-50%); }
.gr-row > .mask { padding: 0; min-height: 0; }
.enl-cell > .mask { left: 50%; top: -15pt; transform: translateX(-50%); }
.cl > .mask, .rl + .mask { position: absolute; right: 0; top: -30pt; }
.cl { position: relative; }

/* ---------- panneaux d'écriture et palette (hors fiche) */
.popover {
  position: absolute;
  z-index: 60;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgb(20 30 50 / 28%), 0 0 0 1px rgb(20 30 50 / 8%);
  padding: 12px;
  font-family: var(--ui-font, system-ui, sans-serif);
  min-width: 220px;
}
.pop-choices { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 10px; }
.pop-choice { min-width: 64px; min-height: 58px; padding: 0 16px; font: 700 26px/1 SheetSans, system-ui, sans-serif; border-radius: 14px; border: 2px solid #c9d6e6; background: #f5f8fc; color: #16324f; cursor: pointer; }
.pop-choice.on, .pop-choice:hover { background: #1c4fa8; border-color: #1c4fa8; color: #fff; }
.pop-row { display: flex; gap: 8px; }
.pop-input { flex: 1; min-width: 0; font: 22px SheetSans, system-ui, sans-serif; padding: 8px 10px; border: 2px solid #c9d6e6; border-radius: 10px; color: #1c4fa8; }
.pop-ok, .pop-clear { min-width: 50px; border-radius: 10px; border: 0; background: #1c4fa8; color: #fff; font-weight: 700; font-size: 17px; cursor: pointer; }
.pop-clear { background: #eef1f5; color: #445; }

.writer-backdrop { position: fixed; inset: 0; background: rgb(15 25 40 / 38%); z-index: 70; }
.writer {
  position: fixed;
  z-index: 71;
  left: 50%;
  top: 8vh;
  transform: translateX(-50%);
  width: min(960px, calc(100vw - 24px));
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgb(10 20 40 / 35%);
  padding: 20px;
  font-family: var(--ui-font, system-ui, sans-serif);
}
.writer-title { font-size: 21px; font-weight: 700; margin-bottom: 10px; color: #1b2a3a; }
.writer-model { font: 22px/1.5 SheetSans, sans-serif; margin-bottom: 10px; padding: 8px 12px; background: #f6f7f4; border-radius: 10px; }
.writer-text { width: 100%; font: 26px/1.6 SheetSans, sans-serif; color: #1c4fa8; padding: 12px 14px; border: 2px solid #c9d6e6; border-radius: 14px; resize: vertical; }
.writer-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.inkpad { width: 100%; background: #fff; border: 2px solid #dfe6ee; border-radius: 14px; overflow: hidden; }
.inkpad-canvas { display: block; touch-action: none; cursor: crosshair; }

.flash { animation: flash .6s; }
@keyframes flash { 0%, 100% { background: transparent; } 40% { background: #ffe9a8; } }

/* ---------- impression */
@media print {
  .print-only { display: inline !important; }
  @page { size: A4 landscape; margin: 0; }
  html, body { background: #fff !important; }
  .sheets { display: block; padding: 0; gap: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sheet { zoom: 1 !important; box-shadow: none; border-radius: 0; break-after: page; page-break-after: always; margin: 0; }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  /* Critères de correction : imprimés seulement si « Imprimer les critères » est coché. */
  .sheets:not(.print-criteria) .sheet.annex-criteria { display: none !important; }
  .sheets:not(.print-criteria) .sheet:has(+ .sheet.annex-criteria) { break-after: auto; page-break-after: auto; }
  .print-root .sheets + .sheets { break-before: page; page-break-before: always; }
  /* Un A4 d'imprimante fait un peu moins que 595,28 pt : sans cette marge d'un point, chaque
     fiche débordait sur une page blanche. Le contenu, placé depuis le haut, ne bouge pas. */
  .sheet[data-format="paysage"] { width: 841pt !important; height: 594pt !important; }
  .sheet[data-format="portrait"] { width: 594pt !important; height: 841pt !important; }
  html, body, #app, .page { height: auto !important; min-height: 0 !important; }
  .viewer, .player, .work-body { padding: 0 !important; margin: 0 !important; }
  .no-print, .mask:not(.open) { display: none !important; }
  .sheet[data-flow] .ex { break-inside: avoid; page-break-inside: avoid; }
  .sheets[data-mode="student"] .blank { background-color: transparent; }
}
.print-portrait { }
/* Page lue par le moteur PDF : rien autour des fiches. */
body[data-role="print"] { background: #fff; margin: 0; }
body[data-role="print"] .print-root .sheets { padding: 0; gap: 0; --z: 1; }

/* ---------- fiches « calque » (mise en page exacte d'une fiche importée) */
.sheet.calque { overflow: hidden; }
.cq-bg, .cq-bg > svg, .cq-ans, .cq-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.cq-bg text, .cq-ans text { font-family: SheetSans, 'DejaVu Sans', Verdana, sans-serif; }
.cq-ans { pointer-events: none; }
.cq-ans.expected rect { stroke: var(--teacher); }
.cq-ans.expected text { fill: var(--teacher); }
.cq-zone { position: absolute; display: flex; align-items: flex-end; justify-content: center; border-radius: 3pt; }
.sheets[data-mode="student"] .cq-zone { cursor: pointer; }
.sheets[data-mode="student"] .cq-blank, .sheets[data-mode="student"] .cq-cell { background: rgb(28 79 168 / 7%); }
.sheets[data-mode="student"] .cq-blank:hover, .sheets[data-mode="student"] .cq-cell:hover, .sheets[data-mode="student"] .cq-line:hover { background: rgb(28 79 168 / 13%); }
.cq-blank .ink-student, .cq-cell .ink-student { line-height: 1; padding-bottom: 3pt; }
.cq-line { justify-content: flex-start; align-items: flex-end; padding: 0 0 7.5pt 5pt; }
.sheets[data-mode="student"] .cq-line { background: rgb(28 79 168 / 3%); }
.cq-line-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; }
.cq-line .ink-layer { stroke: var(--student); }
.cq-word { border-radius: 50%; }
.cq-word.on { border: 1.6pt solid var(--student); }
.sheets[data-mode="student"] .cq-word:hover { background: rgb(28 79 168 / 8%); }
.cq-letters { border-radius: 4pt; }
.sheets[data-mode="student"] .cq-letters:hover { background: rgb(28 79 168 / 8%); }
.cq-ring { position: absolute; top: 1pt; bottom: 1pt; border: 1.6pt solid var(--student); border-radius: 50%; }
.cq-box { align-items: center; }
.cq-tick { font-size: 15pt; line-height: 1; margin-top: -8pt; margin-left: 3pt; }
.cq-mask { position: absolute; border: .8pt dashed #7d8a90 !important; border-radius: 5pt !important; background: #eeeeeb !important; color: #333 !important; font-size: 10pt !important; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cq-mask.open { background: transparent !important; border-color: transparent !important; }
.cq-mark { position: absolute; font-weight: 700; font-size: 11pt; pointer-events: none; }
.cq-mark.st-ok { color: #1e8449; } .cq-mark.st-retry { color: var(--teacher); } .cq-mark.st-partial { color: #d68910; } .cq-mark.st-review { display: none; }
.cq-zone.st-ok { box-shadow: inset 0 -1.4pt 0 #1e8449; } .cq-zone.st-retry { box-shadow: inset 0 -1.4pt 0 var(--teacher); }

.letters-pop { min-width: 0; }
.letters-help { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #334; }
.letters-row { display: flex; gap: 6px; margin-bottom: 12px; }
.letter-tile { width: 48px; height: 58px; border-radius: 12px; border: 2px solid #c9d6e6; background: #f5f8fc; font: 700 30px SheetSans, system-ui, sans-serif; color: #16324f; cursor: pointer; }
.letter-tile.on { background: #fff; border-color: #1c4fa8; box-shadow: 0 0 0 3px #1c4fa8 inset; color: #1c4fa8; }
.pop-row.end { justify-content: flex-end; }
.pop-choice.long { font-size: 18px; min-height: 48px; }
.writer-tabs { display: flex; gap: 8px; margin-bottom: 10px; }

/* ---------- mode pas à pas : un exercice à la fois, en grand */
.step-host { display: block; padding: 0; }
.sheet.step-sheet { width: auto; height: auto; min-height: 0; zoom: var(--step-zoom, 1.5); box-shadow: none; padding: 12pt 14pt 16pt; overflow: visible; border-radius: 0; }
.sheet.step-sheet .ex { margin: 0; }
.sheet.step-sheet .sh-col { overflow: visible; }
.sh-foot .sh-comp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sh-foot .sh-mention { flex: none; margin: 0 12pt; color: #777; }
/* renvoi dans un trou (réponse trop longue, suite sur la page « Suite des réponses ») */
.blank .suite-mark { font-size: max(7.5pt, calc(7.5pt / var(--shrink, 1))); line-height: 9pt; padding: 0 2pt; margin-left: 1pt; vertical-align: 1pt; }

/* « Recopie, puis souligne » : mots soulignés ou entourés dans la réponse écrite */
.lines-text .mw { border-radius: 3pt; }
.lines-text .mw.mk { text-decoration: underline; text-decoration-thickness: 1.6pt; text-underline-offset: 3.5pt; }
.lines.mark-entourer .lines-text .mw.mk { text-decoration: none; box-shadow: 0 0 0 1.4pt currentColor; border-radius: 40%; padding: 0 1pt; }
.lines-text.ink-teacher .mw.mk { text-decoration-style: dashed; }
.sheets[data-mode="student"] .lines.markable .lines-text.ink-student .mw { pointer-events: auto; cursor: pointer; }
.sheets[data-mode="student"] .lines.markable .lines-text.ink-student .mw:hover { background: rgb(28 79 168 / 10%); }
/* Aide « touche le mot » : sous la phrase de l'élève (ni sur sa consigne, ni sous les boutons),
   par-dessus la fiche sans rien déplacer ; elle disparaît dès qu'un mot est touché. */
.mark-hint { position: absolute; left: 6pt; top: calc(100% + 4pt); z-index: 3; white-space: nowrap; font-size: 9.5pt; font-weight: 700; color: #1c4fa8; background: #eef4fb; border: .8pt solid #9db6d6; border-radius: 10pt; padding: 2.5pt 8pt; box-shadow: 0 1pt 3pt rgb(0 0 0 / 12%); pointer-events: none; animation: mark-hint 1.5s ease-out infinite; }
.mark-hint::before { content: ''; position: absolute; left: 16pt; top: -3.6pt; width: 6pt; height: 6pt; background: inherit; border-left: .8pt solid #9db6d6; border-top: .8pt solid #9db6d6; transform: rotate(45deg); }
@keyframes mark-hint { from { box-shadow: 0 1pt 3pt rgb(0 0 0 / 12%), 0 0 0 0 rgb(28 79 168 / 35%); } to { box-shadow: 0 1pt 3pt rgb(0 0 0 / 12%), 0 0 0 5pt rgb(28 79 168 / 0%); } }
@media (prefers-reduced-motion: reduce) { .mark-hint { animation: none; } }
@media print { .mark-hint { display: none !important; } }
/* Dos d'un document au nombre de pages impair (PDF de plusieurs documents, recto verso). */
.sheet.sheet-blank { position: relative; }
.sheet.sheet-blank p { position: absolute; left: 0; right: 0; bottom: 28pt; margin: 0; text-align: center; font-size: 9pt; color: #9a9a9a; }