/* Outil · Chronomètre (Stopwatch), id chrono : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ch-
   À gauche : le chrono choisi en grand (nom, temps, cadence), trois gros boutons (Démarrer / Pause, Marqueur, Remettre à zéro),
   les marqueurs (zone fixe qui défile), l'info, Copier et Exporter. À droite : les chronos (lignes de hauteur fixe, temps en
   direct), Ajouter, le nom, l'affichage, la cadence (grisée hors du timecode), le bip, le rappel du clavier. */
.ch .outil-fixe { align-items: stretch; }
.ch-ecran { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.ch-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; }
.ch-temps { font: 700 clamp(40px, 9vw, 64px)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--papier); white-space: nowrap; }
.ch-sous { font: 500 11px/1.2 var(--mono); color: var(--texte2); height: 1.2em; }
.ch-boutons { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
.ch-gros { height: 54px; border: 0; border-radius: 14px; cursor: pointer; font: 600 14px/1 var(--corps); color: var(--papier); background: rgba(242, 240, 235, .08);
  box-shadow: inset 0 0 0 1px var(--filet); transition: background .2s var(--courbe), opacity .3s; }
.ch-gros:hover { background: rgba(242, 240, 235, .13); }
.ch-gros:disabled { opacity: .3; cursor: default; }
.ch-go { background: var(--papier); color: var(--noir); box-shadow: none; }
.ch-go:hover { background: #fff; }
.ch-go.ch-arret { background: var(--orange); color: var(--noir); }
.ch-discret { color: var(--texte2); }
.ch-marqueurs { height: 168px; overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 4px 14px; }
.ch-tour { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; height: 38px; border-bottom: 1px solid var(--filet-doux); font: 500 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.ch-tour:last-child { border-bottom: 0; }
.ch-tour span { color: var(--texte2); }
.ch-tour b { color: var(--papier); font-weight: 600; }
.ch-tour i { font-style: normal; color: var(--texte2); min-width: 7.5em; text-align: right; }
.ch-rien { margin: 0; height: 160px; display: grid; place-items: center; text-align: center; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
.ch-info { flex: none; height: 1lh; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ch-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ch-actions .pastille { cursor: pointer; }
.ch-actions .pastille:hover, .ch-ajouter:hover { translate: none; }
.ch-actions .pastille:disabled, .ch-ajouter:disabled { opacity: .3; cursor: default; }

/* Les chronos : 8 au plus, lignes de hauteur fixe dans une zone fixe */
.ch-chronos { height: 248px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ch-ligne { flex: none; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; height: 50px; padding: 0 6px; 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); }
.ch-ligne:hover { background: rgba(242, 240, 235, .04); }
.ch-ligne.actuelle { background: rgba(242, 240, 235, .07); box-shadow: inset 0 0 0 1px var(--papier); }
.ch-lnom { font: 500 13.5px/1.2 var(--corps); color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-ltemps { font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--texte2); }
.ch-ligne.tourne .ch-ltemps { color: var(--peche); }
.ch-mini { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte2); }
.ch-mini svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ch-mini:hover { color: var(--papier); background: rgba(242, 240, 235, .06); }
.ch-mini:disabled { opacity: .25; cursor: default; }
.ch-ligne.tourne .ch-mini:first-child { color: var(--orange); }
.ch-ajouter { cursor: pointer; }
.ch-champ { display: flex; flex-direction: column; gap: 10px; }
.ch-eteint { opacity: .3; pointer-events: none; transition: opacity .4s var(--courbe); }
.ch-clavier { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--texte2); }
@media (hover: none) { .ch-clavier { visibility: hidden; } }