:root { --bg1: #ffe9a8; --bg2: #ffb3d9; --ink: #3a2a5a; --accent: #7a4dff; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; height: 100dvh; overflow: hidden; font-family: "Trebuchet MS", "Avenir Next", system-ui, sans-serif; color: var(--ink); user-select: none; -webkit-user-select: none; }
body { background: linear-gradient(160deg, var(--bg1), var(--bg2)); }
#app { position: fixed; inset: 0; height: 100dvh; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.hidden { display: none !important; }
h1 { margin: 0; font-size: clamp(26px, 5vw, 52px); text-shadow: 0 3px 0 #fff8; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; touch-action: manipulation; }
button:disabled { opacity: .35; cursor: default; }

/* accueil */
.title-art { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; z-index: 0; }
#screen-accueil { justify-content: center; gap: 4vh; }
#screen-accueil > * { position: relative; z-index: 1; }
#screen-accueil .title-art { position: absolute; }
.menu { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; padding: 0 16px; }
.big { min-width: 200px; min-height: 160px; border-radius: 36px; background: #fff; box-shadow: 0 8px 0 #0002, 0 12px 24px #0002; font-size: clamp(22px, 3vw, 32px); font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 24px; transition: transform .12s; }
.big .ico { font-size: 64px; line-height: 1; }
.big:active, .tool:active, .round:active, .pill:active, .vignette:active { transform: scale(.94); }
.round { width: 64px; height: 64px; border-radius: 50%; background: #fff; font-size: 30px; box-shadow: 0 4px 0 #0002; flex: none; }
.pill { min-height: 64px; padding: 0 22px; border-radius: 32px; background: #fff; font-size: 20px; font-weight: 700; box-shadow: 0 4px 0 #0002; display: flex; align-items: center; gap: 8px; flex: none; }
.pill span { font-size: 28px; }
.pill.hang { background: #ffd60a; }
.speak { position: absolute; right: 16px; bottom: 16px; }
.topbar .speak { position: static; }

/* en-tête */
.topbar { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; flex: none; }
.spacer { flex: 1; }

/* choix */
#screen-choix h1 { flex: 1; text-align: center; font-size: clamp(22px, 4vw, 40px); }
#choix-list { width: 100%; flex: 1; overflow-y: auto; padding: 8px 18px 24px; }
.palier { margin-bottom: 14px; }
.palier h2 { margin: 4px 0 8px; font-size: 28px; }
.vignettes { display: flex; flex-wrap: wrap; gap: 16px; }
.vignette { width: 220px; min-height: 190px; border-radius: 24px; background: #fff; padding: 10px; box-shadow: 0 5px 0 #0002; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 20px; font-weight: 700; }
.vignette img, .vignette canvas { width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 14px; background: #fff; border: 2px solid #eee; }

/* atelier */
.middle { flex: 1; width: 100%; display: flex; min-height: 0; gap: 10px; padding: 0 10px; }
#tools { display: grid; grid-template-columns: repeat(2, 78px); grid-auto-rows: 78px; gap: 8px; align-content: start; overflow-y: auto; flex: none; padding: 4px; }
.tool { width: 78px; height: 78px; border-radius: 22px; background: #fff; box-shadow: 0 4px 0 #0002; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; }
.tool .ico { font-size: 32px; line-height: 1; }
.tool .lbl { font-size: 12px; font-weight: 700; }
.tool.active { background: var(--accent); color: #fff; transform: scale(1.06); box-shadow: 0 4px 0 #0004; }
#stage { flex: 1; position: relative; min-width: 0; min-height: 0; }
.sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 12px; box-shadow: 0 8px 28px #0004; overflow: hidden; touch-action: none; cursor: crosshair; }
.sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.sheet canvas:last-of-type { pointer-events: none; }
.ripple { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none; animation: ripple .55s ease-out forwards; }
@keyframes ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(7); opacity: 0; } }
#palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 8px 14px; flex: none; }
.swatch { width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 3px 0 #0003; transition: transform .12s; padding: 0; }
.swatch.active { transform: scale(1.25); border-color: var(--ink); margin: 0 6px; }

@media (orientation: portrait) {
  .middle { flex-direction: column; }
  #tools { display: flex; flex-wrap: wrap; justify-content: center; overflow: visible; }
  .tool { width: 68px; height: 68px; }
  .tool .lbl { display: none; }
  .topbar .pill { padding: 0 14px; }
}
@media (max-height: 640px) and (orientation: landscape) {
  .swatch { width: 56px; height: 56px; }
  #palette { padding: 6px; gap: 6px; }
}

/* galerie */
#screen-galerie { background: linear-gradient(180deg, #8fd3ff, #ffe3f0 60%, #ffd9a8); }
#gallery-host { position: absolute; inset: 0; }
.gallery-canvas { display: block; width: 100%; height: 100%; }
.gal-home { position: absolute; left: 16px; top: 16px; }
.gal-new { position: absolute; right: 16px; top: 16px; }
.gal-prev { position: absolute; left: 16px; top: 50%; margin-top: -32px; }
.gal-next { position: absolute; right: 16px; top: 50%; margin-top: -32px; }

#toast { position: fixed; left: 50%; bottom: 120px; transform: translate(-50%, 20px); background: #fff; padding: 14px 26px; border-radius: 30px; font-size: 22px; font-weight: 700; box-shadow: 0 6px 20px #0003; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 50; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

.pill .lbl { font-size: 20px; }
.pill.clear { min-width: 64px; }
.pill.danger { background: #ff3b30; color: #fff; }
.sheet.squash { animation: squash .55s ease-out; }
@keyframes squash {
  0% { transform: translate(-50%, -50%) scale(1, 1); }
  25% { transform: translate(-50%, -50%) scale(1.06, .92); }
  55% { transform: translate(-50%, -50%) scale(.96, 1.05); }
  100% { transform: translate(-50%, -50%) scale(1, 1); }
}
.gal-edit { position: absolute; left: 0; right: 0; bottom: 20px; margin: 0 auto; width: fit-content; height: 72px; min-height: 72px; padding: 0 34px; background: #ffd60a; font-size: 26px; z-index: 5; box-shadow: 0 6px 0 #0003; }
.gal-edit span { font-size: 34px; }
@media (max-width: 520px) { .vignette { width: calc(50% - 8px); min-height: 150px; font-size: 18px; } .vignettes { gap: 16px; } #choix-list { padding: 8px 12px 24px; } }

/* téléphone : la feuille doit rester grande, barres compactes */
@media (max-width: 520px) and (orientation: portrait) {
  .topbar { padding: max(6px, env(safe-area-inset-top)) 8px 4px; gap: 6px; }
  .round { width: 48px; height: 48px; font-size: 24px; }
  .pill { min-height: 48px; padding: 0 12px; font-size: 0; border-radius: 24px; }
  .pill span { font-size: 24px; }
  .pill .lbl { display: none; }
  .middle { padding: 0 6px; gap: 4px; }
  #tools { gap: 6px; padding: 2px; }
  .tool { width: 48px; height: 48px; border-radius: 16px; }
  .tool .ico { font-size: 26px; }
  #palette { gap: 6px; padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); max-width: 360px; margin: 0 auto; }
  .swatch { width: 48px; height: 48px; border-width: 3px; }
  .swatch.active { transform: scale(1.1); margin: 0; }
  #screen-accueil { overflow-y: auto; justify-content: safe center; gap: 12px; padding: 12px 0; }
  .big { min-width: 150px; min-height: 96px; padding: 8px 16px; }
  .big .ico { font-size: 40px; }
  .menu { gap: 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { flex-wrap: nowrap; padding: 4px max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left)); gap: 8px; }
  .round { width: 48px; height: 48px; font-size: 24px; }
  .pill { min-height: 48px; padding: 0 12px; font-size: 0; border-radius: 24px; }
  .pill span { font-size: 24px; }
  .pill .lbl { display: none; }
  .middle { padding: 0 8px; gap: 8px; }
  #tools { grid-template-columns: repeat(3, 48px); grid-auto-rows: 48px; gap: 6px; }
  .tool { width: 48px; height: 48px; border-radius: 16px; }
  .tool .ico { font-size: 26px; }
  .tool .lbl { display: none; }
  #palette { flex-wrap: nowrap; gap: 4px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
  .swatch { width: 44px; height: 44px; border-width: 3px; flex: none; }
  #palette { justify-content: center; }
  .swatch.active { transform: scale(1.1); margin: 0; }
  #screen-accueil { gap: 8px; flex-direction: column; }
  #screen-accueil h1 { font-size: 28px; }
  .big { min-height: 88px; min-width: 150px; padding: 6px 16px; border-radius: 28px; }
  .big .ico { font-size: 36px; }
  .menu { gap: 14px; }
  #screen-choix .topbar h1 { font-size: 22px; }
  .vignette { width: 150px; min-height: 130px; font-size: 16px; }
  .gal-edit { bottom: 8px; height: 56px; min-height: 56px; }
}