/* Pause : jeux calmes. Couleurs douces, grandes cibles au doigt comme à la souris. */

.pause-page { max-width: 1040px; margin: 0 auto; padding: 22px 20px 60px; }
.pause-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pause-head .grow { flex: 1; min-width: 220px; }
.pause-head h1 { font-size: 30px; }
.pause-head p { margin: 4px 0 0; }
.pause-clock { font-size: 20px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 18px; font-variant-numeric: tabular-nums; }
.pause-intro { font-size: 18px; color: var(--ink-2); }
.pause-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.pause-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; border-radius: 24px; border: 1.5px solid var(--line-2); background: #fff; box-shadow: var(--shadow); text-align: left; font-size: 17px; transition: transform .12s, box-shadow .12s; }
.pause-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.pause-tile strong { font-family: var(--title-font); font-size: 22px; }
.pause-emoji { font-size: 44px; line-height: 1; margin-bottom: 4px; }
.pause-nav { margin-bottom: 12px; }
.pause-stage { background: #fff; border-radius: 26px; box-shadow: var(--shadow); padding: 20px; }
.pause-closed { max-width: 620px; font-size: 18px; }
.pause-end { max-width: 560px; margin: 40px auto; text-align: center; background: #fff; border-radius: 28px; box-shadow: var(--shadow); padding: 36px 28px; }
.pause-end-emoji { font-size: 72px; }
.pause-end h1 { font-size: 32px; margin: 8px 0; }
.pause-end p { font-size: 18px; color: var(--ink-2); }

/* carte « La pause » de l'accueil élève */
.pause-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 22px 0 6px; padding: 18px 22px; border-radius: 22px; background: #fff; border: 1.5px dashed var(--line); }
.pause-card.open { border: 1.5px solid #cfe2df; background: linear-gradient(120deg, #f2faf7, #fff8ea); }
.pause-card .grow { flex: 1; min-width: 220px; }
.pause-card h2 { font-size: 22px; margin-bottom: 2px; }
.pause-card p { margin: 0; color: var(--ink-2); }
.pause-card-emoji { font-size: 40px; }

/* commun aux jeux */
.game-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: 15px; }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.game-status { font-size: 18px; font-weight: 600; margin: 4px 0 14px; min-height: 1.5em; }
.game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }

/* mémory */
.mm-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 0 auto; }
.mm-card { aspect-ratio: 1; border: 0; padding: 0; background: none; perspective: 700px; border-radius: 18px; }
.mm-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s ease; }
.mm-card.shown .mm-inner { transform: rotateY(180deg); }
.mm-back, .mm-front { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mm-back { background: linear-gradient(135deg, #1f6f78, #3a9aa3); color: rgb(255 255 255 / 55%); font-size: 30px; box-shadow: inset 0 0 0 5px rgb(255 255 255 / 18%); }
.mm-front { background: #fff; border: 2px solid var(--line); transform: rotateY(180deg); font-size: clamp(30px, 6vw, 54px); }
.mm-front.word { font-family: var(--title-font); font-size: clamp(16px, 2.6vw, 24px); font-weight: 700; color: #1c3f86; }
.mm-card.found .mm-front { border-color: var(--leaf); background: var(--leaf-soft); }
.mm-card:focus-visible { box-shadow: var(--focus); }

/* labyrinthe */
.mz-wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; }
.mz-board { width: min(100%, 520px, 62vh); touch-action: none; }
.mz-svg { display: block; width: 100%; height: auto; }
.mz-board.bump { animation: mz-bump .18s; }
@keyframes mz-bump { 30% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
.mz-pad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-areas: ". haut ." "gauche . droite" ". bas ."; gap: 8px; }
.mz-key { width: 64px; height: 64px; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; font-size: 28px; font-weight: 700; }
.mz-key:active { background: var(--brand-soft); }
.mz-haut { grid-area: haut; } .mz-bas { grid-area: bas; } .mz-gauche { grid-area: gauche; } .mz-droite { grid-area: droite; }
.maze.won .mz-svg { filter: drop-shadow(0 0 10px rgb(242 179 61 / 60%)); }

/* mélodie */
.ml-pads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 460px; margin: 0 auto; }
.ml-pad { aspect-ratio: 1.3; border-radius: 28px; border: 0; background: var(--c); opacity: .55; box-shadow: inset 0 -8px 0 rgb(0 0 0 / 12%); transition: opacity .12s, transform .12s; touch-action: manipulation; }
.ml-pad.lit, .ml-pad:active { opacity: 1; transform: scale(1.03); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 30%, transparent), inset 0 -8px 0 rgb(0 0 0 / 12%); }
.melody[data-phase="ecoute"] .ml-pad { cursor: default; }

/* taquin */
.tq-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; width: min(100%, 420px); margin: 0 auto; }
.tq-tile, .tq-empty { aspect-ratio: 1; border-radius: 18px; }
.tq-tile { border: 0; background: hsl(var(--hue) 55% 48%); color: #fff; font-family: var(--title-font); font-size: clamp(26px, 5vw, 40px); font-weight: 700; box-shadow: inset 0 -6px 0 rgb(0 0 0 / 15%); }
.tq-tile.ok { box-shadow: inset 0 -6px 0 rgb(0 0 0 / 15%), 0 0 0 3px #fff, 0 0 0 5px hsl(var(--hue) 55% 70%); }
.tq-empty { background: var(--bg-2); }

/* coloriage */
.md-wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; justify-content: center; }
.md-art { width: min(100%, 560px, 66vh); }
.md-svg { display: block; width: 100%; height: auto; }
.md-svg [data-g] { cursor: pointer; transition: fill .15s; }
.md-svg [data-g]:hover { stroke-width: 2.6; }
.md-palette { display: grid; grid-template-columns: repeat(2, 52px); gap: 10px; }
.md-color { width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff; background: var(--c); box-shadow: 0 0 0 1.5px var(--line); }
.md-color.eraser { background: repeating-linear-gradient(45deg, #fff 0 6px, #eee 6px 12px); }
.md-color[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.08); }
@media (max-width: 700px) { .md-palette { grid-template-columns: repeat(7, 42px); } .md-color { width: 42px; height: 42px; } }

/* respiration */
.br-stage { display: flex; justify-content: center; padding: 20px 0; }
.br-circle { --ms: 4000ms; width: 240px; height: 240px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #e1f0ee 0%, #f4f2ec 70%); }
.br-core { width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9fd3b3, #1f6f78); transition: transform var(--ms) ease-in-out; }
.breath[data-step="inspire"] .br-core, .breath[data-step="garde"] .br-core { transform: scale(2.4); }
.breath[data-step="souffle"] .br-core { transform: scale(1); }
.br-label { text-align: center; font-family: var(--title-font); font-size: 26px; font-weight: 700; margin: 6px 0; }
.breath .muted { text-align: center; }
.breath .game-actions { justify-content: center; }
.br-offline { margin: 24px auto 0; max-width: 620px; background: var(--leaf-soft); border-radius: 20px; padding: 16px 22px; }
.br-offline h3 { font-size: 19px; margin-bottom: 6px; }
.br-offline li { margin: 4px 0; }

@media (prefers-reduced-motion: reduce) {
  .mm-inner, .br-core, .pause-tile { transition: none; }
  .mz-board.bump { animation: none; }
}