/* Minuteur et chronomètre : même vert que le reste du site */
#features.min-section { padding-top: 1em; }

.min-onglets { display: flex; justify-content: center; gap: 0.6em; margin: 0 0 1.2em 0; }
.min-onglet {
	font: inherit; font-size: 1em; padding: 0.55em 1.6em; border-radius: 2em; cursor: pointer;
	background: #fff; color: #878787; border: 2px solid #e5e5e5; -webkit-appearance: none; appearance: none;
	transition: background-color .25s ease-in-out, border-color .25s ease-in-out, color .25s ease-in-out;
}
.min-onglet:hover { border-color: #5cc79a; color: #16855a; }
.min-onglet.actif { background: #16855a; border-color: #16855a; color: #fff; }

.min-scene {
	max-width: 46em; margin: 0 auto; padding: 1.6em 1.4em 1.2em 1.4em; text-align: center;
	background: #fff; border: 2px solid #e5e5e5; border-radius: 1.2em;
	transition: background-color .4s ease, border-color .4s ease;
}
.min-affichage {
	font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1.05; color: #16855a;
	font-size: clamp(3.6em, 17vw, 9em); letter-spacing: .02em;
	transition: color .3s ease;
}
.min-barre { height: .7em; background: #e5e5e5; border-radius: 1em; overflow: hidden; margin: 1em auto .8em auto; max-width: 34em; }
.min-barre-ok { height: 100%; width: 100%; background: #5cc79a; border-radius: 1em; transition: width .25s linear, background-color .3s ease; }
.min-message { min-height: 1.6em; margin: 0 0 .8em 0; font-weight: 700; font-size: 1.2em; color: #16855a; }

.min-reglage { margin-bottom: 1.2em; }
.min-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; margin-bottom: 1em; }
.min-preset {
	font: inherit; padding: .45em 1em; border-radius: 2em; cursor: pointer; background: #fff; color: #555;
	border: 2px solid #e5e5e5; -webkit-appearance: none; appearance: none;
	transition: background-color .25s ease-in-out, border-color .25s ease-in-out, color .25s ease-in-out;
}
.min-preset:hover { border-color: #5cc79a; color: #16855a; }
.min-preset.actif { background: #16855a; border-color: #16855a; color: #fff; }

.min-perso-titre { display: block; font-size: .85em; color: #878787; margin-bottom: .4em; }
.min-perso-champs { display: flex; justify-content: center; gap: 1.6em; flex-wrap: wrap; }
.min-champ { display: flex; align-items: center; gap: .5em; font-size: 1.3em; color: #555; }
.min-champ span { min-width: 1.6em; font-weight: 700; font-variant-numeric: tabular-nums; }
.min-champ small { color: #878787; font-size: .65em; min-width: 2em; text-align: left; }
.min-pm {
	width: 2.2em; height: 2.2em; border-radius: 50%; cursor: pointer; font: inherit; line-height: 1; padding: 0;
	background: #fff; color: #16855a; border: 2px solid #5cc79a; -webkit-appearance: none; appearance: none;
	transition: background-color .25s ease-in-out, color .25s ease-in-out;
}
.min-pm:hover { background: #16855a; color: #fff; }

.min-commandes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; margin-top: .4em; }
.min-commandes .button { margin: 0; }
.min-aide { margin: 1.1em 0 0 0; font-size: .8em; color: #878787; }
.min-aide kbd { background: #f3f3f3; border: 1px solid #ddd; border-radius: .3em; padding: .05em .45em; font-family: inherit; }

/* Dernières secondes et fin */
.min-scene.min-fin-proche .min-affichage { color: #e08a00; }
.min-scene.min-fin-proche .min-barre-ok { background: #e08a00; }
.min-scene.min-fini { background: #fdecea; border-color: #d9534f; animation: min-clignote 0.8s ease-in-out infinite; }
.min-scene.min-fini .min-affichage, .min-scene.min-fini .min-message { color: #c0392b; }
.min-scene.min-fini .min-barre-ok { background: #d9534f; }
@keyframes min-clignote { 50% { background: #fff; } }

/* Mode chronomètre : pas de réglage ni de barre */
.min-scene.mode-chrono .min-reglage, .min-scene.mode-chrono .min-barre { display: none; }

/* Plein écran : on ne garde que l'essentiel, en très grand */
.min-scene:fullscreen { max-width: none; border: 0; border-radius: 0; display: flex; flex-direction: column; justify-content: center; padding: 2em; }
.min-scene:fullscreen .min-affichage { font-size: clamp(5em, 30vw, 22em); }
.min-scene:fullscreen .min-aide { display: none; }
.min-scene:-webkit-full-screen { max-width: none; border: 0; border-radius: 0; display: flex; flex-direction: column; justify-content: center; padding: 2em; background: #fff; }
.min-scene:-webkit-full-screen .min-affichage { font-size: 30vw; }

@media screen and (max-width: 640px) {
	.min-commandes .button { width: 100%; }
	.min-scene { padding: 1.2em .8em 1em .8em; }
}
@media (prefers-reduced-motion: reduce) { .min-scene.min-fini { animation: none; } }

/* Le thème met du texte blanc sur tous les boutons : on impose nos couleurs */
.min-onglet, .min-preset, .min-pm { text-shadow: none; }
.min-onglet { color: #878787 !important; background: #fff !important; }
.min-onglet:hover { color: #16855a !important; }
.min-onglet.actif, .min-onglet.actif:hover { color: #fff !important; background: #16855a !important; }
.min-preset { color: #555 !important; background: #fff !important; letter-spacing: 0; text-transform: none; font-size: .95em; }
.min-preset:hover { color: #16855a !important; }
.min-preset.actif, .min-preset.actif:hover { color: #fff !important; background: #16855a !important; }
.min-pm { color: #16855a !important; background: #fff !important; letter-spacing: 0; font-size: 1em; display: inline-flex; align-items: center; justify-content: center; }
.min-pm:hover { color: #fff !important; background: #16855a !important; }
.min-presets { gap: .5em .6em; }
@media screen and (max-width: 640px) {
	.min-preset, .min-onglet { width: auto !important; }
	.min-presets { gap: .5em; }
	.min-pm { width: 2.2em !important; }
}