* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #f6f2ea; color: #1c1612; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
/* Pas de zoom ni de sélection de texte si l'écran est touché par accident */
html, body { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; }
button { font-family: inherit; touch-action: manipulation; }

.screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 3.5vmin; padding: 16px; text-align: center; }
.screen.active { display: flex; }
[hidden] { display: none !important; }

h1 { font-size: 8vmin; }
.primary { font-size: 7vmin; font-weight: 700; padding: 3.5vmin 9vmin; border: 0; border-radius: 3vmin; background: #e8590c; color: #fff; }
.primary:disabled { background: #bbb; }

/* Écran de départ */
#instruction { font-size: 4vmin; color: #5a5048; max-width: 30em; }
#warning { font-size: 4vmin; color: #c21818; max-width: 30em; }
#warning:empty { display: none; }
.choice { display: flex; gap: 2.5vmin; }
.choice button { font-size: 5vmin; font-weight: 700; padding: 2.5vmin 5vmin; border: 0.6vmin solid #b9b0a4; border-radius: 2.5vmin; background: #fff; color: #1c1612; }
.choice button.selected { border-color: #1c1612; background: #1c1612; color: #fff; }
/* Les durées (de une à quatre, réglées dans le panneau d'admin) : des boutons de même largeur, qui se serrent s'il le faut
   pour tenir tous sur une ligne, même quatre longues durées sur un petit téléphone */
#durationChoice { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 21vmin); max-width: 100%; }
#durationChoice button { font-size: 4.5vmin; padding: 2.5vmin 0; white-space: nowrap; }
/* Tant qu'on ne sait pas ce que le panneau d'admin a réglé (durées, micro) — un instant, à la première visite seulement —,
   les choix et le bouton de départ gardent leur place mais ne se montrent pas */
#start.waiting #durationChoice, #start.waiting .toggles, #start.waiting #startBtn { visibility: hidden; }
/* Choix de la langue : petit, dans le coin en haut à gauche */
#langChoice { position: absolute; top: 3vmin; left: 3vmin; gap: 1.5vmin; }
#langChoice button { font-size: 3.2vmin; padding: 1.2vmin 2.5vmin; border-width: 0.4vmin; border-radius: 1.5vmin; }

/* Interrupteur façon iOS : avec exercices / mode libre */
.switch { display: flex; align-items: center; gap: 2.5vmin; font-size: 4.2vmin; font-weight: 700; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: relative; flex: none; width: 13vmin; height: 7.6vmin; border-radius: 3.8vmin; background: #cfc8ba; transition: background 0.2s; }
.switch .thumb { position: absolute; top: 0.6vmin; left: 0.6vmin; width: 6.4vmin; height: 6.4vmin; border-radius: 50%; background: #fff; box-shadow: 0 0.3vmin 1vmin rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.switch input:checked + .track { background: #34c759; }
.switch input:checked + .track .thumb { transform: translateX(5.4vmin); }
.switch input:focus-visible + .track { outline: 0.5vmin solid #1c1612; outline-offset: 0.4vmin; }

/* Lien vers les exercices : discret, dans le coin en haut à droite */
#exercisesLink { position: absolute; top: 3vmin; right: 3vmin; font-size: 3.2vmin; font-weight: 600; color: #5a5048; text-decoration: none; padding: 1.2vmin 1vmin; }

/* Préparation des exercices en 3D (prepare.js) : petite barre en bas de l'accueil, visible seulement tant qu'elle dure */
.prep { position: absolute; left: 50%; bottom: 3vmin; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1.2vmin;
  font-size: 2.8vmin; font-weight: 600; color: #8a8076; white-space: nowrap; visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; pointer-events: none; }
.prep.visible { visibility: visible; opacity: 1; }
.prep-track { width: 44vmin; height: 1.2vmin; border-radius: 0.6vmin; background: #ddd5c8; overflow: hidden; }
#prepBar { display: block; width: 100%; height: 100%; background: #e8590c; transform: scaleX(0); transform-origin: left center; transition: transform 0.25s linear; }

/* Écran de jeu */
#game { justify-content: space-between; padding: 0; gap: 0; }
#timerTrack { width: 100%; height: 3vh; background: #ddd5c8; flex: none; }
#timerBar { height: 100%; width: 100%; background: #e8590c; }
/* Rappel de l'exercice en cours, sous la barre de temps */
#drillBar { flex: none; width: 100%; padding: 1vmin 3vw 0; display: flex; align-items: center; justify-content: center; gap: 3vmin; }
#drillName { min-width: 0; font-size: 3.5vmin; font-weight: 700; color: #e8590c; text-align: center; }
/* « Revoir » : remontre l'exercice en cours, puis les mains reviennent (pas pendant une pause) */
#reviewBtn { flex: none; font-size: 3.2vmin; font-weight: 700; padding: 0.9vmin 2.6vmin; border: 2px solid #e8590c; border-radius: 2vmin; background: #fff; color: #e8590c; }
body.paused #reviewBtn { visibility: hidden; }
#stage { flex: 1; width: 100%; min-height: 0; position: relative; }
#hands { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-around; padding: 1vmin; }
.hand { width: 48%; height: 100%; }
.hand svg { width: 100%; height: 100%; display: block; }
.hand svg path { stroke-width: 3; }
#right svg { transform: scaleX(-1); }
#countdown { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 60vmin; font-weight: 900; }
#stage.counting #countdown { display: flex; }

/* « Plus rapide ! » : grand, contrasté, qui clignote, sans cacher les mains.
   Téléphone à l'horizontale : sur deux lignes, entre les deux mains. À la verticale : au-dessus des mains. */
#faster { position: absolute; z-index: 5; display: none; left: 50%; top: 50%; width: 19vw; transform: translate(-50%, -50%);
  padding: 2vmin 1vmin; border-radius: 3vmin; background: #e8590c; color: #fff; text-align: center;
  font-size: 7.5vmin; font-weight: 900; line-height: 1.05; box-shadow: 0 1vmin 3vmin rgba(232, 89, 12, 0.45); }
#faster.active { display: block; animation: fasterBlink 0.8s ease-in-out infinite; }
@keyframes fasterBlink {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.2; transform: translate(-50%, -50%) scale(1.08); }
}
@media (orientation: portrait) {
  #faster { top: 3vmin; width: auto; white-space: nowrap; padding: 2vmin 6vmin; font-size: 10vmin; transform: translateX(-50%); }
  @keyframes fasterBlink {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.2; transform: translateX(-50%) scale(1.08); }
  }
}
/* Si l'appareil demande moins d'animations : le message clignote toujours, mais sans grossir */
@media (prefers-reduced-motion: reduce) {
  #faster.active { animation-name: fasterFade; }
  @keyframes fasterFade { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
}
#stage.counting #hands { display: none; }

#bottom { width: 100%; flex: none; padding: 1.5vh 3vw; display: flex; align-items: center; justify-content: space-between; gap: 3vw; font-size: 3.5vmin; }
#counts, #remaining { font-weight: 700; white-space: nowrap; }
#counts .ok { color: #0a8f3c; }
#counts .ko { color: #c21818; }
#heard { flex: 1; color: #6b6259; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
#stopBtn { font-size: 3.5vmin; padding: 1.5vmin 3vmin; border: 2px solid #8a8076; border-radius: 2vmin; background: #fff; color: #1c1612; }
/* Pause, à côté de « Stop » (ici, et pendant la présentation d'un exercice) : deux barres ; en pause, le bouton devient
   orange et montre un triangle — le même bouton fait reprendre. De la hauteur de « Stop ». */
.pauseBtn { flex: none; align-self: stretch; display: inline-flex; align-items: center; font-size: 3.5vmin; padding: 1.5vmin 2.6vmin; border: 2px solid #8a8076; border-radius: 2vmin; background: #fff; color: #1c1612; }
.pauseBtn svg { display: block; width: 1.2em; height: 1.2em; fill: currentColor; }
.pauseBtn .i-play, body.paused .pauseBtn .i-pause { display: none; }
body.paused .pauseBtn .i-play { display: block; }
body.paused .pauseBtn { border-color: #e8590c; background: #e8590c; color: #fff; }
/* En pause : plus de mains (le temps est arrêté, on ne compte pas), le mot « Pause » et un grand bouton pour reprendre */
#pausePanel { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5vmin; }
#pauseWord { font-size: 16vmin; font-weight: 900; line-height: 1; }
body.paused #pausePanel { display: flex; }
body.paused #hands, body.paused #countdown, body.paused #faster { visibility: hidden; }

/* Écran de score */
#scorePercent { font-size: 32vmin; font-weight: 900; line-height: 1; white-space: nowrap; }
#scoreDetail { font-size: 4vmin; color: #5a5048; }

/* Présentation d'un exercice : par-dessus l'écran de jeu, sous la coche et la croix */
#drill { position: fixed; inset: 0; display: none; background: #fff; z-index: 9; }
#drill.active { display: block; }
#drillFrame { width: 100%; height: 100%; border: 0; display: block; }
#drillButtons { position: absolute; right: 3vw; bottom: 1.5vh; display: flex; align-items: center; gap: 3vw; }
#drillStop { font-size: 3.5vmin; padding: 1.5vmin 3vmin; border: 2px solid #8a8076; border-radius: 2vmin; background: #fff; color: #1c1612; }
/* (en pause pendant un exercice : la joueuse reste à l'écran, figée ; le mot « Pause » à côté des boutons) */
#drillPaused { display: none; padding: 1.2vmin 3vmin; border-radius: 99vmin; background: #1c1612; color: #fff; font-size: 3.5vmin; font-weight: 800; }
body.paused #drillPaused { display: block; }

/* Petit interrupteur, dans la barre du bas pendant la séance */
.switch.small { flex: none; font-size: 3.5vmin; gap: 1.5vmin; }
.switch.small .track { width: 9vmin; height: 5.2vmin; border-radius: 2.6vmin; }
.switch.small .thumb { top: 0.5vmin; left: 0.5vmin; width: 4.2vmin; height: 4.2vmin; }
.switch.small input:checked + .track .thumb { transform: translateX(3.8vmin); }

/* Les deux interrupteurs de l'accueil, l'un sous l'autre */
.toggles { display: flex; flex-direction: column; align-items: flex-start; gap: 2vmin; }

/* Fenêtre d'aide pour l'accès au micro */
#micHelp { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(28, 22, 18, 0.6); z-index: 11; }
#micHelp.active { display: flex; }
#micHelp .box { background: #f6f2ea; border-radius: 16px; padding: 22px; max-width: 34em; max-height: 100%; overflow-y: auto; text-align: left; font-size: clamp(15px, 3.4vmin, 20px); line-height: 1.45; }
#micHelpTitle { font-size: 1.4em; margin-bottom: 8px; }
#micHelp h3 { font-size: 1.05em; margin: 14px 0 4px; }
#micHelp ol { padding-left: 1.4em; }
#micHelpReload { margin-top: 12px; color: #5a5048; }
#micHelpClose { display: block; margin: 18px auto 0; font-size: 1.15em; padding: 10px 36px; }
/* Mode sans calcul : rien à compter, rien à écouter */
#game.silent #counts, #game.silent #heard { visibility: hidden; }

/* Coche / croix plein écran */
#feedback { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10; }
#feedback.ok { display: flex; background: #0a8f3c; }
#feedback.ko { display: flex; background: #c21818; }
#feedback svg { width: 80vmin; height: 80vmin; display: none; }
#feedback.ok #iconOk, #feedback.ko #iconKo { display: block; }