/* Lumiko : fiches A4 (aperçu à l'écran et impression) */
/* ---------- Fiches imprimables : aperçu ---------- */
.sheet-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(59, 57, 80, .45); }
.sheet-card { width: min(460px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; background: var(--sand); }
.sheet-card h2 { font-size: 1.3rem; }
.sheet-card p { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.45; user-select: text; -webkit-user-select: text; }
.sheet-card .note { padding: 10px 12px; border-radius: 14px; background: var(--peach); color: var(--ink); }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#sheet-preview { position: relative; width: 100%; overflow: hidden; border-radius: 6px; box-shadow: 0 4px 14px var(--shadow); }
.paper { position: absolute; top: 0; left: 0; width: 210mm; height: 297mm; padding: 12mm; box-sizing: border-box; background: #fff; transform-origin: top left; }

/* ---------- Fiches imprimables : mise en page A4 (aperçu et impression) ---------- */
.sheet { width: 186mm; height: 270mm; box-sizing: border-box; display: flex; flex-direction: column; gap: 4mm; overflow: hidden; color: #000; background: #fff; font-family: var(--font-body); }
.sh-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 6mm; padding-bottom: 3mm; border-bottom: .6mm solid #000; }
.sh-brand { font-family: var(--font-display); font-weight: 600; font-size: 10pt; letter-spacing: .12em; text-transform: uppercase; }
.sheet h1 { color: #000; font-size: 21pt; line-height: 1.1; }
.sh-name { font-size: 12pt; white-space: nowrap; }
.sh-name span { display: inline-block; width: 50mm; margin-left: 2mm; border-bottom: .4mm solid #000; }
.sh-sub { margin: 0; font-size: 11.5pt; line-height: 1.4; }
.sh-rows { display: flex; flex-direction: column; gap: 2.5mm; }
.sh-row { border-bottom: .3mm solid #bbb; }
.sh-row svg { display: block; width: 100%; height: 34mm; }
.sh-line { stroke: #c8c8c8; stroke-width: 2; }
.sh-model { fill: none; stroke: #000; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.sh-dots { fill: none; stroke: #222; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 17; }
.sh-start { fill: #000; }
.sh-art { flex: 1; display: grid; place-items: center; min-height: 0; }
.sh-art svg { width: 172mm; height: 172mm; }
.sh-art .r { fill: #fff; stroke: #000; stroke-width: 4.5; stroke-linejoin: round; }
.sh-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 6mm; font-size: 9pt; color: #444; }
.sh-letter-top { display: flex; align-items: center; justify-content: center; gap: 12mm; }
.sh-big-letter { width: 100mm; height: 62mm; }
.sh-big-letter text { font-family: var(--font-display); font-weight: 600; font-size: 190px; fill: #fff; stroke: #000; stroke-width: 3; }
.sh-pic { width: 42mm; filter: grayscale(1); opacity: .75; }
.sh-pic svg { display: block; width: 100%; height: auto; }
.sh-letters { display: flex; justify-content: space-between; align-items: flex-end; height: 26mm; padding-inline: 2mm; border-bottom: .4mm solid #999; }
.sh-letters span { font-family: var(--font-display); font-weight: 600; font-size: 64pt; line-height: 1; color: #c8c8c8; }
.sh-letters span.free { width: 14mm; }
.sh-letters.word { justify-content: flex-start; }
.sh-letters.word span { letter-spacing: 4mm; }
.sh-seq { display: flex; align-items: center; gap: 5mm; padding-block: 3mm; border-bottom: .3mm solid #bbb; }
.sh-cell { width: 22mm; height: 22mm; display: grid; place-items: center; }
.sh-cell svg { width: 100%; height: 100%; }
.sh-cell.empty { border: .5mm dashed #000; border-radius: 3mm; }
#print-root { display: none; }
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  :root { padding: 0 !important; }
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  .app { display: none !important; }
  #print-root { display: block !important; }
}

/* ---------- Découvre le monde ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs button { padding: 8px 16px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); font-weight: 800; }
.tabs button[aria-pressed="true"] { border-color: var(--leaf); background: var(--mint); }
.disc { flex: 1 0 auto; width: 100%; max-width: 920px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; padding-block: 8px 16px; }
@media (max-width: 720px) { .disc { grid-template-columns: minmax(0, 1fr); } }
.disc-art { padding: 12px; border-radius: 28px; background: linear-gradient(180deg, var(--art-sky), var(--art-card)); box-shadow: 0 5px 0 var(--line); }
.disc-art svg { display: block; width: 100%; height: auto; }
.disc-art [data-part] { cursor: pointer; transition: filter .2s; }
.disc-art [data-part].lit { filter: drop-shadow(0 0 10px var(--sun)) brightness(1.06); }
.disc-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.disc-info h2 { font-size: calc(1.45rem * var(--scale)); }
.disc-prompt { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: calc(1.15rem * var(--scale)); }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: calc(96px * var(--scale)); padding: 10px 12px; border: 2px solid var(--line); border-radius: 20px; background: var(--card); font-weight: 800; transition: background .3s; }
.choice svg { width: calc(72px * var(--scale)); height: calc(48px * var(--scale)); }
.choice.right { border-color: var(--leaf); background: var(--mint); }
.choice.wiggle { animation: wiggle .5s ease-in-out; }
.choice.hint { animation: hint-card 1s ease-in-out 2; }
.disc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-info { display: flex; flex-direction: column; gap: 2mm; }
.sh-info p { margin: 0; font-size: 12pt; line-height: 1.45; }
.sh-art.wide svg { width: 165mm; height: 116mm; }
.sh-q { font-size: 12pt; }
.sh-q ol { margin: 0; padding-left: 6mm; display: flex; flex-direction: column; gap: 4mm; }
.sh-answers { display: flex; flex-wrap: wrap; gap: 8mm; margin-top: 3mm; }
.sh-answers span { padding: 1.5mm 5mm; border: .4mm solid #000; border-radius: 4mm; }