@font-face { font-family: "Fredoka"; src: url("fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } /* OFL, Google Fonts */

/* Kid-friendly light theme: cream paper, bright colours, big rounded "candy" buttons */
:root {
  --bg: #fff8ec;
  --panel: #ffffff;
  --panel-2: #fff2d6;
  --border: #f0dfbf;
  --text: #3b2f4a;
  --muted: #8b7f99;
  --accent: #ffb703;
  --accent-dark: #e08e00;
  --on-accent: #3b2f4a;
  --warn: #e07a00;
  --danger: #e0475e;
  --toast: #3b2f4a;
  --pink: #ff6f91; --blue: #4cc9f0; --green: #52b788; --purple: #9b5de5; --orange: #ff9f1c; --teal: #2ec4b6;
  --zoom: 1;
  font-family: "Fredoka", "Avenir Next", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0 auto; color: var(--text); max-width: 1000px; padding: env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg) radial-gradient(circle at 1px 1px, #f3e2c2 1.5px, transparent 0) 0 0 / 22px 22px;
}
button { font: inherit; color: var(--text); cursor: pointer; }
h1, h2 { margin: 0; }
.muted { color: var(--muted); font-size: .88rem; }

/* header: mascot + rainbow title + pill tabs */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 12px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 58px; height: 58px; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-4deg); } }
.top h1 { font-size: 2rem; font-weight: 700; letter-spacing: .5px; line-height: 1; }
.top h1 span:nth-child(6n+1) { color: var(--pink); } .top h1 span:nth-child(6n+2) { color: var(--orange); } .top h1 span:nth-child(6n+3) { color: var(--accent-dark); }
.top h1 span:nth-child(6n+4) { color: var(--green); } .top h1 span:nth-child(6n+5) { color: var(--blue); } .top h1 span:nth-child(6n) { color: var(--purple); }
.brand small { display: block; font-size: .85rem; color: var(--muted); margin-top: 3px; }
.tabs { display: flex; gap: 6px; background: var(--panel); border: 2px solid var(--border); border-radius: 999px; padding: 4px; }
.tabs button { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: .95rem; }
.tabs button.on { background: var(--purple); color: #fff; box-shadow: 0 3px 0 #6f3db3; }

.panel { background: var(--panel); border: 2px solid var(--border); border-radius: 24px; padding: 18px; margin-bottom: 16px; box-shadow: 0 6px 0 #f1e3c8; }
.field { margin-bottom: 14px; }
.field.two { display: grid; gap: 14px; }
@media (min-width: 700px) { .field.two { grid-template-columns: 1fr 1fr; } }
.lbl { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 6px; }
input { width: 100%; font: inherit; font-size: 1.05rem; color: var(--text); background: #fff; border: 2px solid var(--border); border-radius: 14px; padding: 10px 12px; }
input:focus { outline: 3px solid var(--accent); outline-offset: -1px; }
.segmented { display: flex; background: var(--panel-2); border: 2px solid var(--border); border-radius: 999px; padding: 4px; gap: 4px; }
.segmented button { flex: 1; border: 0; background: transparent; padding: 9px 6px; border-radius: 999px; color: var(--muted); font-size: .95rem; font-weight: 600; }
.segmented button.on { background: #fff; color: var(--text); box-shadow: 0 0 0 2px var(--accent), 0 3px 0 var(--accent-dark); }
.go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn { padding: 11px 18px; border-radius: 999px; border: 2px solid var(--border); background: #fff; font-weight: 600; font-size: .95rem; white-space: nowrap; box-shadow: 0 3px 0 var(--border); transition: transform .08s; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--border); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent-dark); box-shadow: 0 4px 0 var(--accent-dark); }
#gen { font-size: 1.15rem; padding: 14px 26px; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.danger { color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }
.spin { display: inline-block; width: 13px; height: 13px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* exercise picker: one colour per family, cards with a preview of the page + page counter */
.step { margin-bottom: 20px; }
.step > .lbl { font-size: 1.05rem; color: var(--text); font-weight: 600; margin-bottom: 10px; }
.group { --c: var(--blue); --cd: #2a9fc4; margin-bottom: 16px; background: color-mix(in srgb, var(--c) 10%, #fff); border: 2px solid color-mix(in srgb, var(--c) 45%, #fff); border-radius: 24px; padding: 10px 12px 14px; }
/* same colours as the printed pages (render.js FAMILY_COLOR), in GROUPS order */
.group:nth-child(1) { --c: var(--blue); --cd: #2a9fc4; } .group:nth-child(2) { --c: var(--green); --cd: #3a8f68; }
.group:nth-child(3) { --c: var(--purple); --cd: #6f3db3; } .group:nth-child(4) { --c: var(--orange); --cd: #d97f00; }
.group:nth-child(5) { --c: var(--pink); --cd: #d94a6e; } .group:nth-child(6) { --c: var(--teal); --cd: #1f9187; }
.glbl { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--c); padding: 3px 12px; border-radius: 999px; margin-bottom: 8px; }
.exos { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; }
/* phones: always 2 compact cards per row (one huge card per row made the list endless) */
@media (max-width: 520px) {
  body { padding-left: 10px; padding-right: 10px; }
  .panel { padding: 12px; border-radius: 20px; }
  .exos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .exo { border-radius: 16px; }
  .exo-main img { aspect-ratio: 210 / 120; }
  .exo-main b { font-size: .9rem; padding: 4px 6px 0; }
  .group { padding: 8px 8px 10px; border-radius: 18px; }
  .exo-main span { display: none; } /* the preview + name are enough on a phone */
  .exo-count { padding: 4px; }
  .exo-count button { width: 30px; height: 30px; font-size: 1.1rem; }
  .exo-count span { font-size: .78rem; }
  /* "new" badge, shown for 48 h after new exercises are released */
.ic { width: 1.35em; height: 1.35em; vertical-align: -.33em; }
.ic.big { width: 1.6em; height: 1.6em; }
.act-img { width: 2.4rem; height: 2.4rem; }
.big-dice { width: 4rem; height: 4rem; animation: bob 2.4s ease-in-out infinite; }
.star-off { font-size: 1.4rem; color: var(--muted); }
.theme-toggle > .ic, .theme-toggle > img { width: 26px; height: 26px; }
.exo-new .ic { width: 1.2em; height: 1.2em; vertical-align: -.3em; }
.exo-new { position: absolute; top: 6px; left: 6px; z-index: 1; font-size: .72rem; font-weight: 700; color: #fff; background: var(--pink); padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 0 #d94a6e; }
.exo.on::after { width: 28px; height: 28px; font-size: 1rem; }
  .settings { justify-content: flex-start; }
  .step > .lbl { font-size: .92rem; }
  .top h1 { font-size: 1.6rem; }
  .brand img { width: 46px; height: 46px; }
  .act { flex-basis: 100%; }
}
.exo { position: relative; background: #fffdf8; border: 3px dashed #e3d2b0; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, border-color .15s, background .15s, box-shadow .15s; }
.exo:hover { transform: translateY(-2px) rotate(-.5deg); border-color: var(--c); }
/* selected: tinted card in the family colour, thick solid border, lifted, big check */
.exo.on { background: color-mix(in srgb, var(--c) 16%, #fff); border: 4px solid var(--c); transform: translateY(-4px); box-shadow: 0 6px 0 var(--cd), 0 12px 20px color-mix(in srgb, var(--c) 35%, transparent); }
/* "new" badge, shown for 48 h after new exercises are released */
.ic { width: 1.35em; height: 1.35em; vertical-align: -.33em; }
.ic.big { width: 1.6em; height: 1.6em; }
.act-img { width: 2.4rem; height: 2.4rem; }
.big-dice { width: 4rem; height: 4rem; animation: bob 2.4s ease-in-out infinite; }
.star-off { font-size: 1.4rem; color: var(--muted); }
.theme-toggle > .ic, .theme-toggle > img { width: 26px; height: 26px; }
.exo-new .ic { width: 1.2em; height: 1.2em; vertical-align: -.3em; }
.exo-new { position: absolute; top: 6px; left: 6px; z-index: 1; font-size: .72rem; font-weight: 700; color: #fff; background: var(--pink); padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 0 #d94a6e; }
.exo.on::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border-radius: 50%; background: var(--c); color: #fff; font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 3px 0 var(--cd); animation: pop .25s ease-out; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.exo-main { border: 0; background: transparent; padding: 0 0 8px; text-align: left; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.exo-main img { width: 100%; aspect-ratio: 210 / 120; object-fit: cover; object-position: center; background: #fff; border-bottom: 2px dashed var(--border); filter: grayscale(1); opacity: .5; transition: filter .15s, opacity .15s; }
.exo.on .exo-main img { filter: none; opacity: 1; border-bottom: 3px solid var(--c); }
.exo-main b { padding: 6px 8px 0; font-size: 1rem; font-weight: 600; color: var(--muted); text-align: center; }
.exo.on .exo-main b { color: var(--cd); font-weight: 700; }
.exo-main span { padding: 0 10px; font-size: .8rem; color: var(--muted); line-height: 1.25; }
.exo.on .exo-main span { color: var(--text); }
.exo-count { display: flex; align-items: center; justify-content: space-between; padding: 6px; background: #f6ecd8; }
.exo.on .exo-count { background: var(--c); }
.exo-count button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--c); color: #fff; font-size: 1.3rem; font-weight: 700; line-height: 1; box-shadow: 0 3px 0 var(--cd); }
.exo.on .exo-count button { background: #fff; color: var(--cd); box-shadow: 0 3px 0 var(--cd); }
.exo-count button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--cd); }
.exo-count button:disabled { background: #e8dfcf; color: #fff; box-shadow: none; }
.exo-count span { font-size: .9rem; color: var(--muted); white-space: nowrap; }
.exo-count .short { display: none; }
@media (max-width: 360px) { .exo-count .long { display: none; } .exo-count .short { display: inline; } }
.exo.on .exo-count span { color: #fff; font-weight: 700; font-size: 1rem; }
/* mode: pick the exercises yourself, or a random "surprise" worksheet */
.modes { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.modes button { flex: 1 1 200px; border: 3px solid var(--border); background: #fff; border-radius: 999px; padding: 10px 14px; font-size: 1rem; font-weight: 600; color: var(--muted); }
.modes button.on { border-color: var(--purple); color: #fff; background: var(--purple); box-shadow: 0 4px 0 #6f3db3; }
.surprise { display: flex; align-items: center; gap: 16px; background: #f5edff; border: 3px dashed #c9a8f0; border-radius: 20px; padding: 16px; }
.big-dice { font-size: 3.2rem; animation: bob 2.4s ease-in-out infinite; }
.surprise .segmented button { padding: 8px 4px; }
/* discreet settings bar (level, numbers) at the top of the panel */
.settings { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; margin: -4px 0 10px; }
.set { display: inline-flex; align-items: center; gap: 8px; }
.set-lbl { font-size: .8rem; color: var(--muted); }
.segmented.mini { padding: 2px; gap: 2px; border-width: 1.5px; }
.segmented.mini button { flex: none; padding: 4px 10px; font-size: .8rem; }
.segmented.mini button.on { box-shadow: 0 0 0 1.5px var(--accent), 0 2px 0 var(--accent-dark); }
/* optional theme: folded behind one button */
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--border); background: #fff; border-radius: 999px; padding: 8px 16px 8px 12px; font-size: .95rem; box-shadow: 0 3px 0 var(--border); }
.theme-toggle img { width: 26px; height: 26px; }
.theme-toggle .caret { color: var(--muted); transition: transform .15s; }
.theme-toggle.open .caret { transform: rotate(180deg); }
.theme-toggle + .themes { margin-top: 10px; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.themes button { border: 3px solid var(--border); background: #fff; border-radius: 18px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .85rem; color: var(--text); transition: transform .12s; }
.themes button:hover { transform: scale(1.04) rotate(1deg); }
.themes button.on { border-color: var(--pink); background: #fff0f4; box-shadow: 0 4px 0 #d94a6e; }
.themes img { width: 44px; height: 44px; }
.themes .none { font-size: 28px; line-height: 44px; color: var(--muted); }

/* live progress */
.progress { margin-top: 14px; background: var(--panel-2); border: 2px solid var(--border); border-radius: 16px; padding: 10px 14px; }
.progress ol { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.progress li { font-size: .95rem; }
.progress .ok { color: var(--green); font-weight: 700; display: inline-block; width: 14px; }
.progress .todo { color: var(--muted); display: inline-block; width: 14px; }
.progress .spin { margin-right: 2px; }
.progress .sub { margin: 3px 0 0 20px; color: var(--muted); font-size: .85rem; }

/* variants & models */
.page { position: relative; }
.page-tools { position: absolute; top: 3mm; right: 4mm; display: flex; gap: 6px; zoom: calc(1 / var(--zoom)); }
.page-tool { font: 600 13px "Fredoka", system-ui, sans-serif; color: var(--text); background: #fff2d6; border: 2px solid var(--accent); border-radius: 999px; padding: 4px 10px; }
.page-tool.danger { color: #b8283e; background: #ffe9ee; border-color: #ffb3c1; }
.choices-v { display: grid; gap: 10px; margin-top: 12px; }
.choice { text-align: left; border: 3px solid var(--border); background: #fff; border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.choice:hover { border-color: var(--purple); }
.choice span { color: var(--muted); font-size: .9rem; }
.filter { margin-bottom: 12px; max-width: 380px; }
.star { padding: 6px 8px; font-size: 1.2rem; }

/* visitors: fiches kept on this device + family login */
.login-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #fff; border: 2px dashed var(--border); border-radius: 18px; padding: 12px 16px; margin-bottom: 12px; }
.login-banner span { flex: 1 1 220px; font-size: .92rem; }
.login-banner a { text-decoration: none; }
.login-link { margin-left: auto; font-size: .85rem; color: var(--muted); text-decoration: underline; }
.top .login-link + .tabs { margin-left: 0; }

/* saved list */
.list { padding: 8px; }
.item { display: flex; align-items: center; gap: 6px; border-radius: 16px; }
.item.open { background: var(--panel-2); }
.item-main { flex: 1; text-align: left; border: 0; background: transparent; padding: 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.item + .item { border-top: 2px dashed var(--border); }

/* action bar above the preview */
.actions { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); padding: 10px 0; }
.atitle { flex: 1 1 200px; min-width: 0; font-size: 1.1rem; }
/* big, labelled actions above the worksheet */
.acts { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.act { flex: 1 1 180px; display: flex; align-items: center; gap: 10px; text-align: left; border: 3px solid var(--border); background: #fff; border-radius: 18px; padding: 10px 14px; box-shadow: 0 4px 0 var(--border); transition: transform .08s; }
.act:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--border); }
.act-ic { font-size: 1.8rem; line-height: 1; }
.act b { display: block; font-size: 1.05rem; }
.act small { display: block; font-size: .78rem; color: var(--muted); }
.act.primary { background: var(--accent); border-color: var(--accent-dark); box-shadow: 0 4px 0 var(--accent-dark); }
.act.primary small { color: #6b4d00; }
.act.done { background: #eafaf1; border-color: var(--green); box-shadow: 0 4px 0 #3a8f68; cursor: default; }
/* "À colorier" switch */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .sw { width: 46px; height: 26px; border-radius: 999px; background: #e8dfcf; position: relative; transition: background .15s; }
.switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.switch input:checked + .sw { background: var(--purple); }
.switch input:checked + .sw::after { left: 23px; }
.switch input:focus-visible + .sw { outline: 3px solid var(--accent); }
.badge { margin-left: 8px; font-size: .75rem; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); color: var(--warn); vertical-align: 2px; }
.badge.ok { color: #fff; background: var(--green); }
.warn { color: var(--warn); font-size: .85rem; margin-top: 3px; }

dialog { background: #fff; color: var(--text); border: 3px solid var(--border); border-radius: 26px; padding: 22px; width: min(460px, 94vw); box-shadow: 0 8px 0 #f1e3c8; }
dialog::backdrop { background: rgba(59, 47, 74, .45); backdrop-filter: blur(3px); }
dialog h2 { margin-bottom: 12px; font-size: 1.3rem; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(140px); background: var(--toast); color: #fff; padding: 12px 18px; border-radius: 999px; transition: transform .25s; z-index: 40; max-width: 90vw; }
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.error { background: var(--danger); }

/* ================================================================ A4 pages */
#sheet { zoom: var(--zoom); }
.page {
  width: 210mm; height: 297mm; padding: 13mm 14mm; margin: 0 auto 16px; overflow: hidden;
  background: #fff; color: #111; font-family: "Avenir Next", "Century Gothic", Arial, sans-serif;
  display: flex; flex-direction: column; box-shadow: 0 6px 24px rgba(59, 47, 74, .18); border-radius: 2mm;
}
.ph { display: flex; justify-content: space-between; font-size: 4.2mm; }
.ph .fill { display: inline-block; width: 60mm; border-bottom: .3mm solid #333; height: 4mm; }
.ph .fill.short { width: 32mm; }
.ph { align-items: center; }
.ph-right { display: flex; align-items: center; gap: 6mm; }
.eval { display: inline-flex; gap: 1.5mm; }
.eval svg { display: block; }
.pt { display: flex; align-items: baseline; justify-content: space-between; gap: 6mm; margin: 6mm 0 2mm; border-bottom: .6mm solid #f5c518; padding-bottom: 2mm; }
.pt h2 { font-size: 8mm; }
.pmeta { font-size: 3.2mm; color: #777; }
.consigne { font-size: 5mm; font-weight: 600; margin: 2mm 0 1mm; }
.accroche { font-size: 4.2mm; color: #555; font-style: italic; margin: 0 0 2mm; }
.credit { font-size: 2.4mm; color: #aaa; text-align: center; margin-top: 2mm; }
.pbody { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; min-height: 0; }

.rows { display: flex; flex-direction: column; justify-content: space-evenly; flex: 1; gap: 4mm; }
.row { display: flex; align-items: center; gap: 8mm; }
.row.pair { justify-content: space-around; }
.row.spread { justify-content: space-around; }
.row.boxed { border: .4mm solid #bbb; border-radius: 4mm; padding: 2mm; }
.box { border: .5mm solid #333; border-radius: 4mm; min-height: 30mm; display: flex; align-items: center; justify-content: center; padding: 2mm; }
.box.wide { width: 110mm; }
.box.mid { width: 72mm; }
.box.draw { flex: 1; height: 34mm; }
.pile { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5mm 2.5mm; max-width: 100%; }
.pic { object-fit: contain; display: block; }
.choices { display: flex; gap: 6mm; }
.num { display: inline-flex; align-items: center; justify-content: center; width: 15mm; height: 15mm; font-size: 10mm; font-weight: 700; }
.num.big { font-size: 15mm; width: 20mm; }
.num.square { border: .5mm solid #333; border-radius: 3mm; height: 30mm; width: 30mm; }
.link .row { justify-content: flex-start; }
.link .gap { flex: 1; }
.dot { width: 3.5mm; height: 3.5mm; border-radius: 50%; background: #222; flex: none; }
.card { display: flex; flex-direction: column; align-items: center; gap: 1mm; min-width: 26mm; }
.card .emo { line-height: 1.15; }
.card .word { font-size: 3mm; color: #999; }
.legend { display: flex; gap: 10mm; justify-content: center; margin: 2mm 0 4mm; }
.leg { display: inline-flex; align-items: center; gap: 2mm; font-size: 5mm; }
.shapes { display: block; margin: 0 auto; }
.rank { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3mm; height: 46mm; }
.rank .emo { line-height: 1; }
.write { width: 14mm; height: 14mm; border: .5mm solid #333; border-radius: 2mm; }
.suite { display: flex; flex-direction: column; gap: 3mm; align-items: center; }
.seq { display: flex; gap: 1.5mm; }
.cell { width: 16mm; height: 16mm; border: .4mm solid #999; border-radius: 2mm; display: flex; align-items: center; justify-content: center; font-size: 10mm; }
.cell.q { border: .6mm dashed #333; font-family: Arial, sans-serif; font-weight: 700; color: #888; }
.pick { display: flex; gap: 8mm; align-items: center; }
.pick::before { content: "→"; font-size: 7mm; color: #888; }
.emo-choice { width: 17mm; height: 17mm; border: .4mm solid #ddd; border-radius: 50%; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm 10mm; align-content: space-evenly; flex: 1; }
.syl { display: flex; flex-direction: column; align-items: center; gap: 2mm; }
.cases { display: flex; gap: 1.5mm; }
.case { width: 13mm; height: 13mm; border: .5mm solid #333; }
.model { display: flex; align-items: center; justify-content: center; gap: 6mm; border: .6mm solid #f5c518; border-radius: 4mm; padding: 2mm 6mm; margin: 2mm auto 4mm; width: fit-content; font-size: 9mm; }
.model.letter span { font-size: 22mm; font-weight: 700; line-height: 1; font-family: Arial, sans-serif; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8mm 4mm; align-content: space-evenly; flex: 1; }
.letters { border-collapse: collapse; margin: 0 auto; }
.letters td { width: 21mm; height: 21mm; text-align: center; font-size: 13mm; font-family: Arial, sans-serif; border: .3mm solid #ddd; }
.copy { display: flex; flex-direction: column; gap: 3mm; }
.copy-model { display: flex; align-items: center; gap: 6mm; }
.caps { font-size: 14mm; letter-spacing: 3mm; font-family: Arial, sans-serif; }
.line { height: 16mm; border-top: .4mm solid #333; border-bottom: .4mm solid #333; margin: 3mm 0 9mm; } /* double line: the child writes between */
.trace { display: block; margin: 0 auto; }
.trace .guide { stroke: #ccc; stroke-width: .3; stroke-dasharray: 2 2; }
.trace .model-line { fill: none; stroke: #222; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.trace .dots { fill: none; stroke: #444; stroke-width: 1; stroke-dasharray: .01 2.2; stroke-linecap: round; }
.trace .start { fill: #2fa84f; }

/* new exercises */
.file { display: flex; gap: 1.5mm; justify-content: center; }
.fcell { width: 16mm; height: 16mm; border: .5mm solid #333; border-radius: 2mm; display: flex; align-items: center; justify-content: center; font-size: 9mm; font-weight: 700; font-family: Arial, sans-serif; }
.fcell.hole { border-style: dashed; background: #fafafa; }
.dice { display: flex; gap: 4mm; width: 70mm; justify-content: center; }
.ajout { justify-content: space-between; gap: 3mm; }
.box.small { width: 50mm; min-height: 28mm; }
.op { font-size: 10mm; font-weight: 700; }
.choices.tight { gap: 2mm; }
.write-row { display: flex; justify-content: space-between; }
.lcell .guide { stroke: #bbb; stroke-width: .3; }
.lt-model { fill: none; stroke: #222; stroke-width: .75; stroke-linecap: round; stroke-linejoin: round; }
.lt-dots { fill: none; stroke: #444; stroke-width: .7; stroke-dasharray: .01 1.35; stroke-linecap: round; stroke-linejoin: round; }
.lcell .start, .path .start { fill: #2fa84f; }
.letter-choice { font-family: Arial, sans-serif; border: .4mm solid #ddd; border-radius: 50%; }
.same { display: flex; flex-direction: column; gap: 3mm; align-items: center; }
.same-model { display: flex; align-items: center; gap: 4mm; border: .6mm solid #f5c518; border-radius: 3mm; padding: 1mm 5mm; }
.same-model span { font-size: 9mm; font-family: Arial, sans-serif; letter-spacing: 1mm; font-weight: 700; }
.same-opts { display: flex; gap: 3mm; justify-content: center; max-width: 182mm; }
.same-opts span { font-size: 6.5mm; font-family: Arial, sans-serif; letter-spacing: .6mm; padding: 1mm 2mm; }
.caps-l, .script-l { font-family: Arial, sans-serif; font-weight: 400; }
.join .jd { fill: #222; }
.join .jd.first { fill: #2fa84f; }
.join .ptn { font-size: 4.2px; font-family: Arial, sans-serif; text-anchor: middle; fill: #333; }
.path-row { gap: 2mm; justify-content: space-between; }
.path .dots { fill: none; stroke: #444; stroke-width: 1; stroke-dasharray: .01 2.2; stroke-linecap: round; }
.arrow-big { font-size: 10mm; color: #999; }
.grid-line { stroke: #222; stroke-width: 1.1; stroke-linecap: round; }

.word-big { font-size: 9mm; font-family: Arial, sans-serif; letter-spacing: .8mm; margin: -1mm 0 1mm; }

/* colour mode: a soft, lively look in the family colour (the "À colorier" mode stays black & white) */
.page.colorful { --soft: color-mix(in srgb, var(--fc) 14%, #fff); --mid: color-mix(in srgb, var(--fc) 45%, #fff); --deep: color-mix(in srgb, var(--fc) 70%, #000); }
.page.colorful .pt { border-bottom-color: var(--fc); border-bottom-width: .8mm; }
.page.colorful .pt h2 { color: var(--deep); background: var(--soft); padding: 1mm 4mm; border-radius: 3mm; }
.page.colorful .consigne::before { content: ""; display: inline-block; width: 4mm; height: 4mm; border-radius: 50%; background: var(--fc); margin-right: 2mm; vertical-align: -.5mm; }
.page.colorful .box, .page.colorful .row.boxed, .page.colorful .cell, .page.colorful .fcell:not(.hole), .page.colorful .num.square { border-color: var(--mid); border-width: .6mm; }
.page.colorful .rows > :nth-child(5n+1) .box, .page.colorful .rows > :nth-child(5n+1).boxed { background: #fff6cf; }
.page.colorful .rows > :nth-child(5n+2) .box, .page.colorful .rows > :nth-child(5n+2).boxed { background: #e2f5fd; }
.page.colorful .rows > :nth-child(5n+3) .box, .page.colorful .rows > :nth-child(5n+3).boxed { background: #fde6ee; }
.page.colorful .rows > :nth-child(5n+4) .box, .page.colorful .rows > :nth-child(5n+4).boxed { background: #e5f7ea; }
.page.colorful .rows > :nth-child(5n) .box, .page.colorful .rows > :nth-child(5n).boxed { background: #efe7fd; }
.page.colorful .box.draw { background: #fff !important; } /* the child draws here */
.page.colorful .cell, .page.colorful .fcell:not(.hole), .page.colorful .num.square { background: var(--soft); }
.page.colorful .model { background: #fff6cf; border-color: #f5c518; }
.page.colorful .dot { background: var(--deep); }
.page.colorful .num.big, .page.colorful .caps-l, .page.colorful .script-l { color: var(--deep); }
.page.colorful .case { border-color: var(--deep); }
.page.colorful .same-model, .page.colorful .lcell.model { background: #fff6cf; }
.credit { display: flex; align-items: center; justify-content: center; gap: 2mm; }
.mascot { width: 9mm; height: 9mm; }

.site-footer { text-align: center; font-size: .78rem; color: var(--muted); padding: 18px 0 6px; }
.site-footer a { color: inherit; }

@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; padding: 0; max-width: none; }
  #app, #toast, dialog, .page-tools, .site-footer { display: none !important; }
  #sheet { zoom: 1; }
  .page { margin: 0; box-shadow: none; break-after: page; }
  .page:last-child { break-after: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}