/* Minuteur Pomodoro */
.o-pomodoro {
  --pomo-travail: #c2361b; --pomo-travail-fond: #fdeae5;
  --pomo-pause: var(--ok-texte); --pomo-pause-fond: var(--ok-fond);
  background: var(--surface);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .o-pomodoro { --pomo-travail: #ffad99; --pomo-travail-fond: #4a1f17; }
}
:root[data-theme="dark"] .o-pomodoro { --pomo-travail: #ffad99; --pomo-travail-fond: #4a1f17; }
.o-pomodoro { --pomo-c: var(--pomo-travail); --pomo-f: var(--pomo-travail-fond); }
.o-pomodoro[data-phase="courte"], .o-pomodoro[data-phase="longue"] { --pomo-c: var(--pomo-pause); --pomo-f: var(--pomo-pause-fond); }

.o-pomodoro-scene { gap: 8px; }
.o-pomodoro-phase {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 16px; border-radius: 999px;
  background: var(--pomo-f); color: var(--pomo-c); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase;
}
/* forme différente selon la phase (en plus du libellé) : cercle plein pour le travail, anneau pour les pauses */
.o-pomodoro-icone { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.o-pomodoro[data-phase="courte"] .o-pomodoro-icone, .o-pomodoro[data-phase="longue"] .o-pomodoro-icone { background: none; border: 3px solid currentColor; }
.o-pomodoro-affichage {
  font: 800 clamp(4rem, 19vw, 9rem)/1 var(--police); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
  color: var(--texte); white-space: nowrap; padding: 2px 0;
}
.o-pomodoro.en-marche .o-pomodoro-affichage { color: var(--pomo-c); }
.o-pomodoro-jauge { display: block; width: min(100%, 520px); height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--pomo-c) var(--part, 0%), var(--bord) var(--part, 0%)); }
.o-pomodoro-cycle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; color: var(--texte-2); font-weight: 600; margin-top: 4px; }
.o-pomodoro-pastilles { display: inline-flex; gap: 8px; }
.o-pomodoro-pastilles i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--pomo-travail); background: transparent; }
.o-pomodoro-pastilles i.faite { background: var(--pomo-travail); }
.o-pomodoro-pastilles i.active { box-shadow: 0 0 0 3px var(--pomo-travail-fond); }
.o-pomodoro-commandes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 4px; width: 100%; }
.o-pomodoro-commandes .tirage-bouton { min-width: 170px; }
.o-pomodoro-message { display: block; min-height: 1.4em; }
.o-pomodoro .tirage-message:empty { display: block; }

.o-pomodoro-reglages { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.o-pomodoro-reglages input[type="number"] { max-width: 9em; }

.o-pomodoro-bas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bord); }
.o-pomodoro-bas h2 { margin: 0 0 10px; font-size: 1.1rem; }
.o-pomodoro-bas h3 { margin: 14px 0 8px; font-size: .95rem; color: var(--texte-2); font-weight: 600; }
.o-pomodoro-form label { display: block; font-size: .88rem; color: var(--texte-2); margin-bottom: 4px; }
.o-pomodoro-ligne { display: flex; gap: 8px; }
.o-pomodoro-ligne input { flex: 1; min-width: 0; }
.o-pomodoro-vide { margin: 10px 0 0; color: var(--texte-2); font-size: .9rem; }
.o-pomodoro-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.o-pomodoro-liste li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); }
.o-pomodoro-liste li.courante { border-color: var(--pomo-travail); background: var(--pomo-travail-fond); }
.o-pomodoro-liste label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.o-pomodoro-liste input[type="radio"] { width: 18px; height: 18px; accent-color: var(--pomo-travail); flex: none; }
.o-pomodoro-tache-texte { overflow-wrap: anywhere; color: var(--texte); }
.o-pomodoro-tomates { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texte); white-space: nowrap; }
.o-pomodoro-tomates::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #d8432a; box-shadow: inset 0 3px 0 -1px #3d8c3a; }
.atelier .o-pomodoro-suppr { min-height: 32px; padding: 0 10px; font-size: 1.1rem; line-height: 1; }

.o-pomodoro-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.o-pomodoro-chiffres div { background: var(--surface-2); border-radius: var(--rayon-petit); padding: 10px 12px; }
.o-pomodoro-chiffres dt { font-size: .85rem; color: var(--texte-2); }
.o-pomodoro-chiffres dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 800; color: var(--texte); font-variant-numeric: tabular-nums; }
.o-pomodoro-histo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 110px; }
.o-pomodoro-histo li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.o-pomodoro-barre { display: block; width: 70%; max-width: 30px; height: max(var(--h, 0%), 3px); border-radius: 5px 5px 2px 2px; background: var(--pomo-travail); opacity: .55; flex: 0 1 auto; max-height: calc(100% - 22px); }
.o-pomodoro-histo li.aujourdhui .o-pomodoro-barre { opacity: 1; }
.o-pomodoro-jour { font-size: .75rem; color: var(--texte-2); white-space: nowrap; }
.o-pomodoro-histo li.aujourdhui .o-pomodoro-jour { color: var(--texte); font-weight: 700; }
.o-pomodoro-effacer { margin-top: 12px; }

.o-pomodoro:fullscreen { display: flex; flex-direction: column; padding: 3vw; overflow: auto; }
.o-pomodoro:fullscreen .o-pomodoro-scene { flex: 1 0 auto; justify-content: center; }
.o-pomodoro:fullscreen .o-pomodoro-affichage { font-size: min(24vw, 42vh); }
.o-pomodoro:fullscreen .o-pomodoro-reglages, .o-pomodoro:fullscreen .o-pomodoro-bas { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .o-pomodoro-jauge { transition: background .25s linear; }
}
@media (max-width: 700px) {
  .o-pomodoro-bas { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .o-pomodoro-commandes .tirage-bouton { min-width: 0; flex: 1 1 160px; }
  .o-pomodoro-reglages { grid-template-columns: 1fr 1fr; }
  .o-pomodoro-reglages label.case { grid-column: 1 / -1; }
}