/* Outil · Compteur (Counter) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : kp-
   À gauche : le compteur choisi en grand (nom, valeur, objectif ou date, barre de progression), les gros boutons − et +
   (grisés pour un « jours depuis »), l'info, Remettre à zéro / à aujourd'hui. À droite : les compteurs (zone fixe), l'ajout
   rapide, le nom, puis les réglages du type (pas et objectif, ou la date : l'un ou l'autre, à la même place). */
.kp .outil-fixe { align-items: stretch; }
.kp-ecran { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.kp-nom { font: 500 12px/1.2 var(--mono); letter-spacing: .06em; color: var(--texte2); height: 1.2em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-valeur { font: 700 clamp(64px, 14vw, 104px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--papier); }
.kp-valeur.kp-pop { animation: kp-pop .25s var(--courbe); }
@keyframes kp-pop { from { transform: scale(1.06); color: var(--peche); } }
.kp-sous { font: 500 12px/1.2 var(--mono); letter-spacing: .04em; color: var(--texte2); height: 1.2em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-barre { width: min(280px, 80%); height: 6px; border-radius: 3px; background: rgba(242, 240, 235, .1); overflow: hidden; }
.kp-barre i { display: block; height: 100%; background: var(--orange); border-radius: 3px; transition: width .3s var(--courbe); }
.kp-cache { visibility: hidden; }
.kp-boutons { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.kp-gros { height: 76px; border: 0; border-radius: 16px; cursor: pointer; font: 300 40px/1 var(--corps); color: var(--papier); background: rgba(242, 240, 235, .08);
  box-shadow: inset 0 0 0 1px var(--filet); touch-action: manipulation; transition: background .15s, transform .1s; }
.kp-gros:active { transform: scale(.97); }
.kp-gros:disabled { opacity: .3; cursor: default; }
.kp-plus { background: var(--papier); color: var(--noir); box-shadow: none; }
.kp-eteint { opacity: .3; }
.kp-info { flex: none; height: 1lh; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kp-actions { display: flex; justify-content: center; }
.kp-actions .pastille { cursor: pointer; }
.kp-actions .pastille:hover { translate: none; }
.kp-actions .pastille:disabled { opacity: .3; cursor: default; }

.kp-liste { height: 268px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; }
.kp-ligne { flex: none; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; height: 48px; padding: 0 6px 0 12px; border-radius: 12px; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--filet-doux); transition: background .2s var(--courbe), box-shadow .2s var(--courbe); }
.kp-ligne:hover { background: rgba(242, 240, 235, .04); }
.kp-ligne.actuelle { background: rgba(242, 240, 235, .07); box-shadow: inset 0 0 0 1px var(--papier); }
.kp-type svg { display: block; width: 16px; height: 16px; color: var(--texte2); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kp-lnom { font: 500 13.5px/1.2 var(--corps); color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-lval { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--peche); }
.kp-mini { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte2); }
.kp-mini svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kp-mini:hover { color: var(--papier); }
.kp-mini:disabled { opacity: .25; cursor: default; }
.kp-champ { display: flex; flex-direction: column; gap: 10px; }
.kp-reglages { display: none; flex-direction: column; gap: 18px; height: 160px; }
.kp[data-type="nombre"] [data-reglages="nombre"], .kp[data-type="depuis"] [data-reglages="depuis"] { display: flex; }
.kp .saisie[type="date"] { color-scheme: dark; }
.kp-clavier { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--texte2); }
@media (hover: none) { .kp-clavier { visibility: hidden; } }
@media (max-width: 959px) { .kp-ecran, .kp-boutons { order: -2; } }