/* Outils de la famille « temps » (js/outils/temps.js) : l'horloge, les pièces et les billets, le
   minuteur. Les styles communs (boutons, nombre affiché, défi) sont dans outils.css.
   Chaque outil prend toute la place de la zone et en fait un conteneur (container queries) : le
   cadran, le disque ou le porte-monnaie prennent exactement la place qui reste sous la consigne du
   défi, quels que soient l'écran, la taille du texte ou le zoom de l'iPad ; quand la place est bien
   plus large que haute (téléphone en paysage), les boutons passent à droite. */
.outil-horloge, .outil-monnaie, .outil-minuteur { flex: 1 1 0; align-self: stretch; min-height: 0; container: outil-temps / size; }
.horloge-corps, .monnaie-corps, .minuteur-corps { width: 100%; height: 100cqh; margin: 0 auto; }

/* ===================================================================== L'horloge */
.horloge-corps { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
/* la place du cadran : tout ce que les boutons laissent ; le cadran y est le plus grand carré possible */
.horloge-place { flex: 1 1 0; min-height: 0; max-height: 410px; width: 100%; container-type: size; display: grid; place-items: center; }
.horloge-cadran { width: min(100cqw, 100cqh - 6px, 400px); aspect-ratio: 1; }
.horloge-cadran svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; filter: drop-shadow(0 4px 0 var(--line)); }
.horloge-cadran.grab-hour .hand-hour { stroke-width: 6.5; }
.horloge-cadran.grab-minute .hand-minute { stroke-width: 3.8; }
.horloge-commandes { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
/* une colonne par unité (heures, 5 minutes, 1 minute) : « + » en haut, « − » en bas */
.horloge-boutons {
  display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 8px; width: min(100%, 260px);
}
.horloge-boutons.fin { width: min(100%, 380px); }
.horloge-btn { min-width: 0; padding: 4px 6px; font-size: 1.15rem; white-space: nowrap; }
/* « h » et « min » sont écrits : la couleur (celle de l'aiguille) n'est qu'un repère en plus */
.horloge-btn.minutes { color: #a84503; }
.horloge-commandes .outil-commandes { flex-wrap: nowrap; align-items: center; }
.horloge-ecrite { font-size: 1.6rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===================================================================== Les pièces et les billets */
/* --b : une pièce à poser (dans son bouton) ; posée sur .monnaie-corps : un conteneur ne se règle
   pas lui-même par ses container queries */
.monnaie-corps {
  --b: min(64px, 13cqw, 11cqh);
  height: min(100cqh, 600px); max-width: 560px;
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: 'bourse' 'banque' 'commandes';
  justify-items: center; gap: 8px;
}
.monnaie-gauche { grid-area: bourse; position: relative; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.monnaie-bourse {
  flex: 1 1 0; min-height: 0; width: 100%; overflow-y: auto; container: bourse / size;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 4px;
  padding: 6px; border-radius: 18px; background: #fff3dc; border: 3px solid #8a6a2e;
}
/* --p : une pièce dans le porte-monnaie, à la mesure du porte-monnaie (cqw, cqh) ; plus il y en a,
   plus elles rapetissent, pour que tout tienne sans défiler : jusqu'à 12 sur 3 lignes, 20 sur 4,
   30 (MAX_POSES) sur 5 */
.monnaie-bourse { --p: min(52px, 13cqw, 30cqh); }
.monnaie-bourse[data-taille='moyenne'] { --p: min(44px, 10.5cqw, 21cqh); }
.monnaie-bourse[data-taille='petite'] { --p: min(38px, 9cqw, 15cqh); gap: 3px; }
.monnaie-vide { color: var(--muted); font-weight: 700; text-align: center; padding: 0 8px; }
/* « Le porte-monnaie est plein. » : sur le bord du bas, sans prendre de place aux pièces */
.monnaie-plein {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); margin: 0; padding: 0 10px;
  border-radius: 999px; background: var(--bg); font-weight: 700; font-size: 0.9rem; line-height: 1.3; color: #8a4b00; white-space: nowrap;
}
.monnaie-plein:empty { display: none; }
.monnaie-ajout[aria-disabled='true'] { opacity: 0.45; }
.monnaie-banque { grid-area: banque; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.monnaie-billets, .monnaie-pieces { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.monnaie-commandes { grid-area: commandes; flex-wrap: nowrap; align-items: center; }
.monnaie-total { font-size: 1.6rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* les pièces et les billets dessinés (render.js), à la taille de l'outil (--d) ; un bord sombre :
   ils se détachent du fond */
.outil-monnaie .coin {
  justify-content: center; align-content: center; width: var(--d); height: var(--d); font-size: calc(var(--d) * 0.28); line-height: 1;
  box-shadow: 0 0 0 1.5px #4a3b1c, inset 0 0 0 calc(var(--d) * 0.09) var(--ring);
}
.outil-monnaie .coin b { font-size: calc(var(--d) * 0.42); }
.outil-monnaie .note {
  width: calc(var(--d) * 1.62); height: calc(var(--d) * 0.9); border-radius: calc(var(--d) * 0.14); gap: 1px; font-size: calc(var(--d) * 0.3);
  box-shadow: 0 0 0 1.5px #3b3b4a, inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.outil-monnaie .note b { font-size: calc(var(--d) * 0.42); }
/* les centimes (que le jeu n'a pas) : cuivre pour 1, 2 et 5 centimes, or pour 10, 20 et 50 ; un peu
   plus petits que les euros. Le montant est toujours écrit. */
.outil-monnaie .coin-c { --d: calc(var(--taille) * 0.88); color: #2e1f05; }
.outil-monnaie :is(.coin-c1, .coin-c2) { --d: calc(var(--taille) * 0.8); }
.coin-c1, .coin-c2, .coin-c5 { background: #e3a477; --ring: #b8774a; }
.coin-c10, .coin-c20, .coin-c50 { background: #f0cf63; --ring: #c9a23a; }

/* une pièce posée : on la touche pour l'enlever */
.monnaie-posee {
  --taille: var(--p); --d: var(--p);
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; border-radius: 50%;
}
.monnaie-posee.billet { border-radius: 6px; }
.monnaie-posee:active { transform: translateY(2px); }
/* une pièce à poser : un bouton bordé */
.monnaie-ajout {
  --taille: var(--b); --d: var(--b);
  display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 14px;
  min-width: calc(var(--b) + 8px); min-height: calc(var(--b) + 8px);
  background: var(--card); box-shadow: 0 3px 0 var(--line), inset 0 0 0 2px var(--field-line);
}
.monnaie-ajout:active { transform: translateY(2px); }
/* huit pièces (CM) : deux lignes de quatre */
.monnaie-pieces.n8 { display: grid; grid-template-columns: repeat(4, auto); }

/* zone bien plus large que haute (téléphone en paysage) : les pièces à poser à droite */
@container outil-temps (min-aspect-ratio: 7 / 5) {
  /* les pièces à poser : une ligne de billets et une ligne de pièces (deux au CM) */
  .monnaie-corps { --b: min(52px, 6.5cqw, calc(50cqh - 14px)); }
  .outil-monnaie.toutes .monnaie-corps { --b: min(52px, 6.5cqw, calc(33cqh - 12px)); }
  .monnaie-corps {
    max-width: none; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: 'bourse banque' 'commandes banque'; align-items: center; column-gap: 14px;
  }
  .monnaie-gauche { height: 100%; }
}

/* ===================================================================== Le minuteur */
.minuteur-corps { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
/* la place du disque : tout ce que les boutons laissent ; « C'est fini ! » par-dessus */
.minuteur-boite { position: relative; flex: 1 1 0; min-height: 0; max-height: 370px; width: 100%; container-type: size; display: grid; place-items: center; }
.minuteur-disque { width: min(100cqw, 100cqh - 6px, 360px); aspect-ratio: 1; }
.minuteur-disque svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 0 var(--line)); }
.minuteur-fond { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.minuteur-traits line { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
/* la part qui reste : rouge, bordée de sombre (le temps est aussi écrit, en grand) */
.minuteur-reste-part { fill: #d62828; stroke: #8f1a1a; stroke-width: 0.8; stroke-linejoin: round; }
.minuteur-centre { fill: var(--ink); }
.minuteur-fin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap;
  padding: 6px 16px; border-radius: 999px; background: var(--good-dark); color: #fff; font-weight: 700;
  font-size: clamp(1.1rem, 9cqmin, 2.2rem); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.minuteur-fin:empty { display: none; }
.outil-minuteur.fini .minuteur-fin { animation: minuteur-fini 0.9s ease-in-out 3; }
@keyframes minuteur-fini { 50% { transform: translate(-50%, -50%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .outil-minuteur.fini .minuteur-fin { animation: none; } }
.a11y-calm .outil-minuteur.fini .minuteur-fin { animation: none; }
.minuteur-commandes { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
/* le temps qui reste, lisible de loin */
.minuteur-temps {
  margin: 0; font-size: min(64px, 15cqw, 11cqh); font-weight: 700; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.minuteur-durees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 360px); }
.minuteur-duree { min-width: 0; padding: 4px 6px; white-space: nowrap; }
.minuteur-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 440px); }
/* « Recommencer » tient sur un téléphone, même en texte agrandi */
.minuteur-actions .outil-btn { min-width: 0; min-height: 52px; font-size: min(1.15rem, 5cqw); padding: 6px 8px; white-space: nowrap; }
.minuteur-go { background: var(--good-dark); color: #fff; box-shadow: 0 3px 0 #06472f; }
.outil-minuteur.en-marche .minuteur-go { background: var(--accent-dark); box-shadow: 0 3px 0 #1e293b; }

/* zone bien plus large que haute (téléphone en paysage) : les boutons à droite */
@container outil-temps (min-aspect-ratio: 7 / 5) {
  .horloge-corps, .minuteur-corps { flex-direction: row; gap: 16px; }
  .horloge-place, .minuteur-boite { height: 100%; max-height: none; }
  .horloge-commandes { width: auto; }
  .horloge-boutons, .horloge-boutons.fin { width: min(46cqw, 330px); }
  .minuteur-commandes { width: auto; gap: 8px; }
  .minuteur-temps { font-size: min(56px, 10cqw, 22cqh); }
  .minuteur-durees, .minuteur-actions { width: min(48cqw, 340px); }
  .minuteur-actions .outil-btn { min-height: 48px; font-size: min(1.15rem, 2.6cqw); }
}