/* Andika (SIL, licence OFL 1.1, fonts/OFL.txt), hébergée avec le site : pas de requête tierce, marche hors ligne. */
@font-face {
  font-family: 'Andika';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/andika-400-italic-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Andika';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/andika-400-italic-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/andika-400-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/andika-400-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/andika-700-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Andika';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/andika-700-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Polices du réglage « Police » de la feuille (ADR 0011), licence OFL 1.1, hébergées comme Andika :
   OpenDyslexic (fonts/OFL-opendyslexic.txt) et Playwrite France Traditionnelle (fonts/OFL-playwrite.txt).
   Un seul fichier latin par style ; Playwrite n'a qu'un poids, le gras est simulé par le navigateur.
   Elles ne se chargent que si une feuille les utilise : pas de préchargement. */
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/opendyslexic-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/opendyslexic-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/opendyslexic-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playwrite FR Trad';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/playwrite-fr-trad-latin-400-normal.woff2') format('woff2');
}

/* Outfit, police de l'interface (ADR 0015), licence OFL 1.1 (fonts/OFL-outfit.txt), du paquet npm
   @fontsource/outfit 5.3.0, sous-ensemble latin : cinq graisses d'environ 14 Ko. La feuille garde Andika. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/outfit-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/outfit-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/outfit-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/outfit-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/outfit-latin-800-normal.woff2') format('woff2');
}

:root {
  --bg: #f4f7f5;
  --panel: #ffffff;
  --surface: #f0f4f1;
  --border: #e1e8e3;
  --border-strong: #7e8f85;
  --text: #16261e;
  --muted: #4a5a51;
  --accent: #24493a;
  --accent-hover: #1a372c;
  --accent-soft: #e2efe6;
  --good: #11703a;
  --good-soft: #ddf5e5;
  --danger: #b4380b;
  --placeholder: #5f6f66;
  --on-accent: #fff;
  --sun: #ffc247;
  --on-sun: #16261e;
  --stage: #dceae0;
  --segmented: #ffffff;
  --toast: #16261e;
  --on-toast: #fff;
  --toast-error: #b4380b;
  --answer: #d0021b;
  --radius: 16px;
  --radius-card: 24px;
  --shadow: 0 1px 2px rgba(36, 73, 58, 0.06), 0 1px 3px rgba(36, 73, 58, 0.08);
  --shadow-pop: 0 10px 30px rgba(36, 73, 58, 0.18);
  /* Couleurs des exercices (ADR 0015) : fond clair et encre, au moins 5,2:1 entre elles. */
  --t-bleu-bg: #e3ecff;
  --t-bleu-ink: #1e4fc2;
  --t-vert-bg: #ddf5e5;
  --t-vert-ink: #11703a;
  --t-ambre-bg: #fff0d1;
  --t-ambre-ink: #8a4b00;
  --t-violet-bg: #efebff;
  --t-violet-ink: #4b32c3;
  --t-rose-bg: #ffe4ee;
  --t-rose-ink: #a3184f;
  --t-sarcelle-bg: #d9f3f1;
  --t-sarcelle-ink: #0b6461;
  --t-orange-bg: #ffe6d6;
  --t-orange-ink: #a3410f;
  color-scheme: light;
}

/* Thème sombre de l'interface (ADR 0010), palette « Nuit de savane » (ADR 0015), à l'écran seulement :
   l'impression reste claire. Contrastes WCAG AA calculés : texte 14,4:1 sur les cartes, texte atténué
   7,9:1, exemples grisés 6,2:1, accent jaune 9:1, bordures des champs 4,4:1 sur les cartes et 3,9:1 sur
   les surfaces ; en clair, texte 15,8:1, atténué 7,3:1, exemples 5,3:1, accent 10:1, bordures 3,4:1.
   Encre des exercices sur leur fond : au moins 5,2:1 en clair et 8,3:1 en sombre.
   --answer n'y est pas : la feuille A4 garde ses couleurs. */
@media screen {
  :root[data-theme='dark'] {
    --bg: #0e1712;
    --panel: #15221b;
    --surface: #1b2b22;
    --border: #24372d;
    --border-strong: #6f8a7b;
    --text: #eaf2ec;
    --muted: #a6b8ad;
    --placeholder: #8fa398;
    --accent: #ffb020;
    --accent-hover: #ffc659;
    --accent-soft: #1e3328;
    --on-accent: #0e1712;
    --good: #9ee6b8;
    --good-soft: #143524;
    --danger: #ff9a5c;
    --sun: #ffb020;
    --on-sun: #0e1712;
    --stage: #1b3a2c;
    --segmented: #0e1712;
    --toast: #2e4639;
    --on-toast: #fff;
    --toast-error: #9a3412;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.5);
    --t-bleu-bg: #172a4d;
    --t-bleu-ink: #a9c6ff;
    --t-vert-bg: #143524;
    --t-vert-ink: #9ee6b8;
    --t-ambre-bg: #3a2a0c;
    --t-ambre-ink: #ffd27a;
    --t-violet-bg: #2a2350;
    --t-violet-ink: #c9bcff;
    --t-rose-bg: #3d1a28;
    --t-rose-ink: #ffb3cc;
    --t-sarcelle-bg: #0f3533;
    --t-sarcelle-ink: #8fe3dc;
    --t-orange-bg: #3d2114;
    --t-orange-ink: #ffb98f;
    color-scheme: dark;
  }
}

/* Chaque tuile et chaque carte d'exercice prend la couleur de son type (CATALOGUE.teinte). */
.t-bleu {
  --t-bg: var(--t-bleu-bg);
  --t-ink: var(--t-bleu-ink);
}
.t-vert {
  --t-bg: var(--t-vert-bg);
  --t-ink: var(--t-vert-ink);
}
.t-ambre {
  --t-bg: var(--t-ambre-bg);
  --t-ink: var(--t-ambre-ink);
}
.t-violet {
  --t-bg: var(--t-violet-bg);
  --t-ink: var(--t-violet-ink);
}
.t-rose {
  --t-bg: var(--t-rose-bg);
  --t-ink: var(--t-rose-ink);
}
.t-sarcelle {
  --t-bg: var(--t-sarcelle-bg);
  --t-ink: var(--t-sarcelle-ink);
}
.t-orange {
  --t-bg: var(--t-orange-bg);
  --t-ink: var(--t-orange-ink);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family:
    'Outfit',
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Boutons ---------- */

button,
.button {
  font: inherit;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
button:hover,
.button:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
button.primary:hover {
  background: var(--accent-hover);
}
button.small {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 13px;
}
button.icon {
  min-width: 36px;
  min-height: 36px;
  padding: 4px 8px;
  border-color: transparent;
  background: transparent;
}
button.icon:hover {
  background: var(--surface);
  border-color: var(--border);
}
button.ghost {
  color: var(--muted);
}
/* Bouton plein, sans contour : « Voir un exemple », thème (en-tête). */
button.soft {
  border-color: transparent;
  background: var(--surface);
  font-weight: 600;
}
button.soft:hover {
  background: var(--accent-soft);
  border-color: transparent;
}
button.link {
  border: 0;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  padding: 8px 0;
}

/* ---------- En-tête ---------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 24px;
  background: var(--panel);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.logo {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--accent);
}
.pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.actions button {
  min-height: 44px;
  border-radius: 14px;
}
#btn-theme {
  display: grid;
  place-items: center;
  width: 44px;
  padding: 0;
}
#btn-theme svg,
button.icon svg,
.image-add .ico svg {
  display: block;
}
.image-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#btn-pdf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 20px;
}
/* Le point jaune du bouton PDF ; en sombre, le bouton est déjà jaune. */
#btn-pdf .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sun);
}
:root[data-theme='dark'] #btn-pdf .dot {
  display: none;
}

/* Menu « ⋯ » (en-tête et cartes d'exercice) */
.menu {
  position: relative;
}
.menu summary {
  list-style: none;
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
}
.menu summary::-webkit-details-marker {
  display: none;
}
.menu summary:hover,
.menu[open] summary {
  background: var(--surface);
}
.menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.menu-list button,
.menu-list .button {
  border: 0;
  background: none;
  text-align: left;
}
.menu-list button:hover:not(:disabled),
.menu-list .button:hover {
  background: var(--accent-soft);
}
.menu-list .danger {
  color: var(--danger);
}
.menu-list hr {
  width: 100%;
  margin: 4px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* ---------- Mise en page ---------- */

.layout {
  flex: 1;
  display: flex;
  gap: 16px;
  min-height: 0;
  padding: 16px;
}

/* La barre de défilement de la colonne a sa place réservée, avec de l'air avant l'aperçu. */
.editor {
  width: 552px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0 12px 80px 0;
  scrollbar-gutter: stable;
}
/* Barres de défilement fines, arrondies, aux couleurs du thème, sans flèches. Chrome et Safari lisent les
   pseudo-éléments ::-webkit-scrollbar, mais les ignorent si scrollbar-color est posé : la règle
   standard est donc réservée aux navigateurs qui ne les connaissent pas (Firefox). */
.editor::-webkit-scrollbar,
.preview-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.editor::-webkit-scrollbar-thumb,
.preview-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--border-strong);
}
.editor::-webkit-scrollbar-track,
.preview-wrap::-webkit-scrollbar-track,
.editor::-webkit-scrollbar-corner,
.preview-wrap::-webkit-scrollbar-corner {
  background: transparent;
}
.editor::-webkit-scrollbar-button,
.preview-wrap::-webkit-scrollbar-button {
  display: none;
}
@supports not selector(::-webkit-scrollbar) {
  .editor,
  .preview-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }
}

.editor h2 {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.editor h2 .count {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}

/* Cartes blanches de la colonne (ADR 0015) ; les exercices sont dedans, avec un contour fin. */
.card,
.welcome,
.add {
  background: var(--panel);
  border-radius: var(--radius-card);
  padding: 22px;
  margin-bottom: 14px;
}
.ex-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.exercises .ex-card:last-child {
  margin-bottom: 0;
}

/* ---------- Champs ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  min-width: 0;
}
.field > label {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
input[type='text'],
input[type='number'],
textarea,
select {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
}
textarea {
  resize: vertical;
  line-height: 1.45;
}
input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  font-style: italic;
}
.help {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}
.help code {
  background: var(--surface);
  padding: 0 4px;
  border-radius: 4px;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  cursor: pointer;
}
.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.row {
  display: flex;
  gap: 12px;
}
.row > .field {
  flex: 1;
}
.row > .narrow {
  flex: 0 0 110px;
}
/* « Ma fiche » : le titre en grand, la classe en pastille jaune. */
.fiche .row > .field:first-child input {
  font-size: 19px;
  font-weight: 700;
}
.fiche .narrow input {
  border-color: transparent;
  background: var(--sun);
  color: var(--on-sun);
  font-weight: 700;
  text-align: center;
}
.fiche .narrow input::placeholder {
  color: var(--on-sun);
  opacity: 0.75;
}

/* Style : deux colonnes, une seule sur un petit écran (voir plus bas). La case se cale sur les listes. */
.style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
}
.style-grid > .check {
  align-self: end;
  min-height: 40px;
  margin-bottom: 12px;
}

/* Prénom, Date, Page de corrigé : des pilules sur une ligne, à la ligne sur un petit écran. */
.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.checks .check {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 500;
}
.checks .check:has(input:checked) {
  background: var(--accent-soft);
}
.checks .check input {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* ---------- Cartes d'exercice ---------- */

.ex-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -6px -6px 10px;
}
.ex-card.collapsed .ex-head {
  margin-bottom: -6px;
}
/* L'encre de l'exercice colore aussi ses boutons d'action, sur fond neutre. */
.ex-head button.icon,
.ex-head .menu summary {
  color: var(--muted);
}
.ex-h {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: inherit;
}
.icon.placeholder {
  visibility: hidden;
}
.ex-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  border-radius: 14px;
  background: none;
  text-align: left;
  padding: 6px;
  white-space: normal;
}
.ex-title:hover {
  background: var(--surface);
}
/* En-tête d'une carte (ADR 0015) : numéro aux couleurs du type, nom et consigne, compte des lignes. */
.ex-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--t-bg, var(--surface));
  color: var(--t-ink, var(--text));
  font-size: 16px;
  font-weight: 700;
}
.ex-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ex-name {
  font-weight: 600;
  font-size: 16.5px;
}
.ex-consigne {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex-consigne:empty,
.ex-count:empty {
  display: none;
}
.ex-count {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--t-bg, var(--surface));
  color: var(--t-ink, var(--text));
  font-size: 13px;
  font-weight: 600;
}
.chevron {
  margin-left: auto;
  padding: 0 4px;
  font-size: 18px;
  color: var(--muted);
}
.tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}
.ex-card.flash {
  animation: flash 1.2s ease-out;
}
@keyframes flash {
  from {
    box-shadow: 0 0 0 4px var(--accent-soft);
    border-color: var(--accent);
  }
}
.ex-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.ex-foot .field {
  margin-bottom: 0;
}

/* Image d'une question (ADR 0013) : sous le texte à lire, une miniature et ses réglages. */
.image-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.image-thumb {
  max-width: 160px;
  max-height: 110px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}
.image-settings {
  flex: 1 1 220px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 12px;
  min-width: 0;
}
.image-settings .field {
  margin-bottom: 0;
}
.image-settings .image-legend {
  flex: 1 1 100%;
}

.block-sep {
  font: inherit;
  font-weight: 700;
  color: var(--muted);
  width: 100%;
  margin: 8px 0 12px;
  padding: 6px 2px;
  border: 0;
  border-bottom: 2px solid var(--border-strong);
  background: transparent;
}

/* ---------- Lignes ---------- */

.rows {
  list-style: none;
  counter-reset: ligne;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.row-line {
  counter-increment: ligne;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.row-line::before {
  content: counter(ligne) '.';
  flex: 0 0 20px;
  padding-top: 10px;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}
.cell-grow {
  flex: 1;
  min-width: 0;
}
.inline {
  display: flex;
  gap: 6px;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stack .answer input {
  background: var(--surface);
}
/* Réponse attendue et lignes de réponse (ADR 0012) : côte à côte, la liste passe dessous
   seulement dans une colonne très étroite. */
.answer-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: flex-end;
}
.answer-line > .answer {
  flex: 1 1 9em;
}
.answer-line > .lines select {
  width: auto;
}
.pair {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pair .link {
  color: var(--muted);
}
.choix-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.choix-line .apres {
  grid-column: 1 / -1;
}
.mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mini > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.mini.good > span {
  color: var(--good);
}
.mini.good input {
  border-color: var(--good);
  background: var(--good-soft);
  font-weight: 600;
}
.row-heads {
  display: grid;
  gap: 8px;
  margin: 0 44px 4px 28px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.row-heads-relier {
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}
.row-heads-vraifaux {
  grid-template-columns: 1fr 114px;
}
.hint {
  margin: 0 0 8px;
}
.rows textarea {
  resize: none;
  overflow: hidden;
  min-height: 40px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.chips:empty {
  display: none;
}
.chip {
  min-height: 36px;
  padding: 2px 10px;
  border-radius: 999px;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: 13px;
  font-weight: 600;
}
.toggle {
  display: flex;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
}
.toggle button {
  border: 0;
  border-radius: 0;
  min-width: 56px;
  background: var(--panel);
}
.toggle button + button {
  border-left: 1px solid var(--border-strong);
}
.toggle button[aria-pressed='true'] {
  background: var(--accent);
  color: var(--on-accent);
}
.add-line {
  margin-top: 8px;
  margin-left: 28px;
  border-style: dashed;
  color: var(--accent);
  background: none;
}
/* Classer : le mot, puis sa catégorie, sous les en-têtes « Mot » et « Catégorie ». */
.classer-line,
.row-heads-classer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Listes de noms (catégories, verbes) et temps à cocher (ADR 0014). */
.words-editor,
.tenses-editor {
  min-width: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.words-editor legend,
.tenses-editor legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.words {
  list-style: none;
  counter-reset: nom;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.word-line {
  counter-increment: nom;
  display: flex;
  align-items: center;
  gap: 8px;
}
.word-line::before {
  content: counter(nom) '.';
  flex: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}
.tenses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
}
.tenses-hint {
  margin: 6px 0 0;
}
/* .help est un bloc : sans cette règle, l'attribut hidden ne masquerait pas le rappel. */
.tenses-hint[hidden] {
  display: none;
}

/* Tableau à compléter : la grille défile de côté quand elle est plus large que la colonne de
   l'éditeur, jamais la page. Une case à remplir a un bord en tirets. */
.table-scroll {
  overflow-x: auto;
  margin: 0 -4px;
}
.table-edit {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
}
.table-edit th {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
}
.table-edit tbody th {
  width: 20px;
  padding-top: 10px;
  text-align: right;
  vertical-align: top;
}
.table-edit td {
  vertical-align: top;
  padding: 0;
}
.col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  white-space: nowrap;
}
.table-edit input {
  min-width: 7em;
}
.table-edit tr.header input {
  font-weight: 700;
  background: var(--surface);
}
.table-edit input.to-fill {
  border-style: dashed;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fill-toggle {
  color: var(--muted);
}
.fill-toggle[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.table-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin-left: 28px;
}
.table-add .add-line {
  margin-left: 0;
}

/* ---------- Ajouter un exercice ---------- */

.welcome {
  text-align: center;
  padding: 28px 20px;
}
.welcome p {
  color: var(--muted);
  margin: 0 0 16px;
}
/* Liste d'ajout (ADR 0015) : une ligne par exercice, son picto au trait dans un carré à sa couleur,
   puis le nom et la description, côte à côte si la place le permet, sinon l'un sous l'autre. */
.welcome .tiles {
  text-align: left;
}
.tiles {
  display: flex;
  flex-direction: column;
}
.tile {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 8px;
  white-space: normal;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
}
.tile:last-child {
  border-bottom: 0;
}
.tile:hover {
  background: var(--surface);
  border-color: var(--border);
}
.tile-picto {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--t-bg, var(--surface));
  color: var(--t-ink, var(--text));
}
.tile-picto svg {
  display: block;
}
.tile-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}
.tile-name {
  font-weight: 600;
}
.tile-desc {
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Notifications ---------- */

.toast {
  max-width: calc(100vw - 32px);
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 18px;
  border-radius: var(--radius);
  background: var(--toast);
  color: var(--on-toast);
  box-shadow: var(--shadow-pop);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.toast.error {
  background: var(--toast-error);
}
.toast button {
  min-height: 32px;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: var(--on-toast);
  font-weight: 600;
}

#btn-voir,
.topbar .court {
  display: none;
}

/* ---------- Pied de l'éditeur et pages annexes (ADR 0016) ---------- */

.editor-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding: 24px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.editor-foot a,
.annexe a {
  color: var(--accent);
  text-underline-offset: 3px;
}
/* Cible d'au moins 24 px de haut (WCAG 2.5.8). */
.editor-foot a {
  display: inline-block;
  padding: 4px 0;
}

/* Confidentialité et 404 : une colonne de texte, sans la mise en page de l'éditeur. */
body.annexe {
  display: block;
  height: auto;
  min-height: 100vh;
}
.annexe main {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  line-height: 1.55;
}
.annexe .brand {
  margin-bottom: 24px;
}
.annexe h1 {
  font-size: 32px;
  line-height: 1.2;
}
.annexe h2 {
  margin: 20px 0 8px;
  font-size: 20px;
}
.annexe section {
  margin-top: 16px;
  padding: 4px 24px 20px;
  background: var(--panel);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}
.annexe ul {
  padding-left: 20px;
}
.annexe code {
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

/* ---------- Écrans tactiles et préférences ---------- */

@media (pointer: coarse) {
  button,
  .button,
  .menu summary,
  input[type='text'],
  select {
    min-height: 44px;
  }
  button.icon,
  button.small,
  .chip {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Aperçu ---------- */

.preview-wrap {
  flex: 1;
  overflow: auto;
  padding: 20px 28px 28px;
  border-radius: 28px;
  background: var(--stage);
}
.preview-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 20px;
}
.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: var(--segmented);
}
/* « Enregistrée » : seulement si la fiche vient d'être gardée dans le navigateur (save). */
.save-state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.save-state::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.save-state[hidden] {
  display: none;
}
.segmented[hidden] {
  display: none;
}
.segmented button {
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}
.segmented button:hover {
  background: var(--accent-soft);
}
.segmented button[aria-pressed='true'] {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
#preview .exercise {
  cursor: pointer;
}
.sheet-empty {
  margin: 20mm 0;
  text-align: center;
  color: #6b7385;
  font-style: italic;
}
@media screen {
  #preview[data-vue='eleve'] .corrige-sheet,
  #preview[data-vue='corrige'] .sheet:not(.corrige-sheet) {
    display: none;
  }
}

/* La feuille garde ses couleurs fixes, blanche avec du texte noir, dans les deux thèmes (ADR 0010).
   Ses marges intérieures sont celles de @page : le texte a la même largeur qu'à l'impression, et la
   mesure « jusqu'à la fin de la page » (fillPages dans app.js, ADR 0012) tombe juste. */
.sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 24px;
  padding: 12mm 13mm;
  color-scheme: light;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  font-family: var(--sheet-font);
  font-size: calc(var(--sheet-size) * var(--font-scale));
  line-height: var(--sheet-line);
  color: #111;
}

/* Style de la feuille (ADR 0011). Chaque réglage change une variable ; sans classe, la fiche d'avant.
   --sheet-line reste un nombre sans calc() : il s'hérite tel quel et suit la taille de chaque élément. */
.sheet {
  --sheet-font: 'Andika', 'Comic Sans MS', system-ui, sans-serif;
  --sheet-size: 12.5pt;
  --font-scale: 1;
  --sheet-line: 1.55;
  --sheet-gap: 6mm;
  --write-scale: 1;
}
.sheet.size-large {
  --sheet-size: 14.5pt;
}
.sheet.size-xlarge {
  --sheet-size: 17pt;
}
/* OpenDyslexic est plus haute et bien plus large qu'Andika : à 90 %, ses minuscules ont la même hauteur. */
.sheet.font-dys {
  --sheet-font: 'OpenDyslexic', 'Comic Sans MS', system-ui, sans-serif;
  --font-scale: 0.9;
}
/* La cursive est plus large et ses majuscules et jambages débordent de l'interligne : texte un peu
   réduit et lignes plus espacées pour que les lettres de deux lignes ne se touchent pas. */
.sheet.font-cursive {
  --sheet-font: 'Playwrite FR Trad', 'Comic Sans MS', system-ui, sans-serif;
  --font-scale: 0.92;
  --sheet-line: 1.8;
}
.sheet.leading-airy {
  --sheet-line: 1.9;
}
.sheet.font-cursive.leading-airy {
  --sheet-line: 2.2;
}
/* Titre en cursive : ses grandes majuscules et ses jambages touchaient l'étiquette de classe et le filet. */
.sheet.font-cursive .sheet-title {
  line-height: 1.6;
  padding-bottom: 3mm;
}
.sheet.font-cursive .classe-tag {
  margin-bottom: 3mm;
}
.sheet.font-cursive .sheet-subtitle {
  margin-top: 3mm;
}
.sheet.gap-tight {
  --sheet-gap: 3mm;
}
.sheet.gap-wide {
  --sheet-gap: 10mm;
}
.sheet.lines-small {
  --write-scale: 0.7;
}
.sheet.lines-large {
  --write-scale: 1.3;
}
.sheet.corrige-sheet .sheet-title::before {
  content: 'Corrigé — ';
  color: var(--answer);
}

.sheet-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.9em;
  margin-bottom: 4mm;
}
.sheet-meta .fill {
  display: inline-block;
  width: 45mm;
  border-bottom: 1px dotted #555;
}
.sheet-meta .date .fill {
  width: 32mm;
}
.sheet-top {
  display: flex;
  align-items: flex-start;
  gap: 6mm;
  margin-bottom: 6mm;
}
.sheet-top .titles {
  flex: 1;
  text-align: center;
}
.sheet-title {
  margin: 0;
  font-size: 1.7em;
  line-height: 1.2;
  border-bottom: 3px double #333;
  padding-bottom: 2mm;
}
.sheet-subtitle {
  margin: 2mm 0 0;
  font-style: italic;
}
.classe-tag {
  display: inline-block;
  font-size: 0.8em;
  padding: 0 8px;
  border: 1px solid #333;
  border-radius: 10px;
  margin-bottom: 2mm;
}

.block {
  margin-bottom: 4mm;
}
.block > h2 {
  font-size: 1.15em;
  margin: 5mm 0 3mm;
  padding: 1mm 3mm;
  background: #e8eef7;
  border-left: 5px solid #2f6fd6;
  break-after: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.exercise {
  margin-bottom: var(--sheet-gap);
  break-inside: avoid;
}
/* « Jusqu'à la fin de la page » (ADR 0012) : l'exercice commence où il tombe et va jusqu'au bas de
   la page, il peut donc se couper ; ses questions restent entières, comme le suppose la mesure. */
.exercise.fill-ex {
  break-inside: auto;
}
.exercise.fill-ex ol.items > li {
  break-inside: avoid;
}
/* « Une page entière » : la rédaction commence une page. */
.exercise.page-start {
  break-before: page;
}
.exercise .head {
  margin-bottom: 2mm;
  display: flex;
  gap: 2mm;
  align-items: baseline;
}
.exercise .num {
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
}
.exercise .consigne {
  font-weight: 700;
  flex: 1;
}
.exercise .body {
  padding-left: 3mm;
}

ol.items {
  margin: 0;
  padding-left: 7mm;
}
ol.items > li {
  margin-bottom: 2.5mm;
  padding-left: 1mm;
}
ol.items.spaced > li {
  margin-bottom: 4mm;
}

.blank {
  display: inline-block;
  /* Largeur posée par drawPreview (ADR 0016) : ce repli, la plus petite largeur de blank(), sert si
     un chemin futur insérait la feuille sans elle. */
  min-width: 5em;
  border-bottom: 1.5px dotted #333;
  height: calc(1.1em * var(--write-scale));
  vertical-align: -0.15em;
  margin: 0 1mm;
}
.ans {
  color: var(--answer);
  font-weight: 700;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Indice de la feuille (choix à écrire) ; l'aide des lignes de l'éditeur est aussi .hint. */
.sheet .hint {
  color: #444;
  font-size: 0.9em;
}

.choice {
  white-space: nowrap;
  margin: 0 1mm;
}
.choice::before {
  content: '(';
}
.choice::after {
  content: ')';
}
.choice .opt {
  padding: 0 1.5mm;
  border: 1.5px solid transparent;
  border-radius: 50%;
}
.choice .opt.circled {
  border-color: var(--answer);
  color: var(--answer);
  font-weight: 700;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.choice .slash {
  color: #666;
}

.bank {
  border: 1.5px dashed #555;
  border-radius: 6px;
  padding: 2mm 4mm;
  margin-bottom: 3mm;
  text-align: center;
}
.bank .sep {
  color: #888;
  margin: 0 2.5mm;
}

/* Lignes où l'élève écrit : leur hauteur suit le réglage « Lignes d'écriture » (--write-scale). */
.wline {
  border-bottom: 1px solid #888;
  height: calc(2.1em * var(--write-scale));
}
.wline:first-child {
  margin-top: calc(-0.6em * var(--write-scale));
}

.reading {
  border: 1px solid #999;
  border-radius: 6px;
  padding: 3mm 4mm;
  margin-bottom: 3mm;
  background: #fafafa;
  text-align: justify;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.reading p {
  margin: 0 0 2mm;
}
.reading p:last-child {
  margin: 0;
}

/* Le cadre épouse l'image : chaque taille borne la largeur de l'image (en mm, la largeur du texte
   est de 184 mm) et sa hauteur reste sous 150 mm. Une image en hauteur n'a donc pas de bandes vides. */
.q-image {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 3mm;
  padding: 2mm;
  border: 1px solid #b5b5b5;
  border-radius: 4px;
  background: #fafafa;
  break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Dans un exercice qui va jusqu'au bas de la page (il se coupe), l'image reste avec la consigne et le
   texte qui la précèdent : fillPages (app.js) les mesure comme un seul bloc. */
.exercise.fill-ex:has(.q-image) > .head,
.exercise.fill-ex .reading:has(+ .q-image) {
  break-after: avoid;
}
.exercise.fill-ex .reading:has(+ .q-image) {
  break-inside: avoid;
}
.q-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 125mm;
  max-height: 150mm;
}
.q-image.size-petite img {
  max-width: 80mm;
}
.q-image.size-grande img {
  max-width: 100%;
}
/* La légende prend la largeur de l'image sans élargir le cadre. */
.q-image figcaption {
  width: 0;
  min-width: 100%;
  margin-top: 1.5mm;
  font-size: 0.9em;
  font-style: italic;
  line-height: 1.3;
  text-align: center;
}

.lecon {
  border: 2px solid #2f6fd6;
  border-radius: 8px;
  padding: 3mm 4mm;
  margin-bottom: var(--sheet-gap);
  background: #f3f7fd;
  break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.lecon .lecon-title {
  font-weight: 700;
  margin-bottom: 1mm;
  color: #2f6fd6;
}
.lecon p {
  margin: 0 0 1.5mm;
}
.lecon p:last-child {
  margin: 0;
}
.lecon strong {
  background: #fff3a8;
  padding: 0 1mm;
}

table.grid {
  border-collapse: collapse;
  width: 100%;
}
table.grid th,
table.grid td {
  border: 1px solid #555;
  padding: 1.5mm 2.5mm;
  height: calc(2.3em * var(--write-scale));
  text-align: left;
}
table.grid th {
  background: #eef1f5;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.conj-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5mm;
}
.conj-wrap table.grid {
  width: auto;
  flex: 1;
  min-width: 70mm;
}
table.grid caption {
  font-weight: 700;
  text-align: left;
  padding-bottom: 1mm;
}
table.grid .pron {
  display: inline-block;
  min-width: 18mm;
  color: #333;
}

table.vf {
  border-collapse: collapse;
  width: 100%;
}
table.vf td,
table.vf th {
  padding: 1.5mm 2mm;
  border-bottom: 1px solid #ccc;
}
table.vf th {
  font-size: 0.85em;
  width: 14mm;
  text-align: center;
}
table.vf td:first-child {
  width: 100%;
}
table.vf td.box {
  text-align: center;
  width: 14mm;
}
table.vf .square {
  display: inline-block;
  width: 4.5mm;
  height: 4.5mm;
  border: 1.5px solid #333;
  vertical-align: middle;
  text-align: center;
  line-height: 4mm;
  font-weight: 700;
  color: var(--answer);
}

table.match {
  width: 100%;
  border-collapse: collapse;
}
table.match td {
  padding: 2mm 0;
}
table.match td.left {
  text-align: right;
  width: 42%;
}
table.match td.right {
  width: 42%;
}
table.match .dot {
  display: inline-block;
  width: 2.5mm;
  height: 2.5mm;
  border-radius: 50%;
  background: #111;
  margin: 0 3mm;
  vertical-align: middle;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.shuffled {
  font-style: italic;
}
.shuffled .sep {
  color: #888;
  margin: 0 1.5mm;
  font-style: normal;
}
.ul {
  text-decoration: underline;
  text-decoration-color: var(--answer);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  color: var(--answer);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.teacher-note {
  font-style: italic;
  color: #777;
}
.empty-hint {
  color: #aaa;
  font-style: italic;
}

/* Impression économe (ADR 0011), à l'écran comme sur le papier : ni fond ni couleur. Les réponses
   du corrigé (--answer) passent en noir gras, les bordures colorées en filet gris foncé fin. */
.sheet.eco {
  --answer: #000;
}
.sheet.eco .block > h2 {
  background: none;
  border-left: 1.5px solid #333;
}
.sheet.eco .reading,
.sheet.eco .q-image,
.sheet.eco table.grid th,
.sheet.eco .lecon strong {
  background: none;
}
.sheet.eco .lecon {
  background: none;
  border: 1px solid #333;
}
.sheet.eco .lecon .lecon-title {
  color: inherit;
}
.sheet.eco .ul {
  font-weight: 700;
}
.sheet.eco .sheet-empty {
  color: #555;
}

/* ---------- Petits écrans ---------- */

@media (max-width: 480px) {
  .card,
  .welcome,
  .add {
    padding: 16px;
  }
  .choix-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .choix-line .avant {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1000px) {
  body {
    height: auto;
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    padding: 8px 12px;
  }
  .brand {
    gap: 8px;
    font-size: 19px;
  }
  .logo {
    width: 32px;
    height: 32px;
    border-radius: 11px;
  }
  .pill {
    display: none;
  }
  .actions {
    gap: 4px;
  }
  .layout {
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }
  .editor {
    width: 100%;
    overflow: visible;
    padding: 0 0 12px;
  }
  .preview-wrap {
    overflow-x: auto;
    padding: 12px 12px 40px;
    border-radius: 24px;
  }
  .row-heads {
    margin-right: 40px;
  }
  .style-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  #btn-voir {
    display: block;
  }
  .topbar .long {
    display: none;
  }
  .topbar .court {
    display: inline;
  }
}

/* Très petit écran : « PDF » seul, pour que la barre tienne avec le bouton du thème. */
@media (max-width: 440px) {
  .topbar .verbe {
    display: none;
  }
}

/* Téléphone : l'en-tête sur deux lignes nettes. Le nom, le thème et ⋯ en haut, puis Aperçu, Nouvelle, Exemple et
   PDF qui se partagent la largeur. .actions s'efface pour que ses boutons se rangent dans la barre. */
@media (max-width: 560px) {
  .actions {
    display: contents;
  }
  .brand {
    flex: 1 0 calc(100% - 112px);
  }
  .topbar #btn-voir,
  .topbar #btn-new,
  .topbar #btn-sample,
  .topbar #btn-pdf {
    order: 1;
    flex: 1 1 21%;
    justify-content: center;
    padding-inline: 6px;
  }
  .topbar {
    gap: 8px;
  }
  .topbar .verbe {
    display: none;
  }
}

/* Carte d'exercice sur un téléphone : le nom garde la place, sans la pastille de compte. */
@media (max-width: 480px) {
  .ex-count {
    display: none;
  }
}

/* ---------- Impression / PDF ---------- */

@page {
  size: A4;
  margin: 12mm 13mm;
}

@media print {
  body {
    display: block;
    height: auto;
    background: #fff;
  }
  .editor,
  .topbar,
  .preview-bar,
  .toast,
  #btn-voir {
    display: none !important;
  }
  .layout {
    display: block;
    padding: 0;
  }
  #preview {
    zoom: 1 !important;
  }
  /* La zone verte de l'aperçu (ADR 0015) reste à l'écran : le papier n'a que la feuille. */
  .preview-wrap {
    padding: 0;
    overflow: visible;
    border-radius: 0;
    background: none;
  }
  .sheet {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
  .sheet + .sheet {
    break-before: page;
  }
  /* Rappels de l'éditeur (« Cochez au moins un temps. », titre manquant) : à l'écran seulement. */
  .empty-hint {
    display: none;
  }
}