/* Outil · Timecode : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : tc- */

/* L'écran (à gauche sur ordinateur, en haut au téléphone) : le résultat en grand, ses détails, et de quoi le copier */
.tc .outil-fixe { align-items: center; }
.tc-ecran { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0 8px; text-align: center; }
.tc-etiquette { font: var(--repere); letter-spacing: .1em; color: var(--texte2); }
.tc-grand { font: 700 clamp(34px, 10.5vw, 64px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-details { display: flex; flex-direction: column; gap: 4px; font: var(--valeur); line-height: 1.6; letter-spacing: .06em; color: var(--texte2); text-wrap: balance; }
.tc-details b { font-weight: 500; color: var(--papier); }
.tc-copies { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }

/* Réglages */
.tc-df { margin-top: var(--dans-groupe); max-width: 220px; }
/* Modes : chaque bouton prend la largeur de son texte (« Changer de cadence » tient sur une ligne) */
.tc-modes { grid-auto-columns: auto; }
.tc [hidden] { display: none !important; }
/* Les champs : .champ.compact (app/kit.css) ; ceux du mode Calculer (lignes, facteur) prennent la même allure */
.tc-panneau { display: flex; flex-direction: column; gap: var(--dans-groupe); }
.tc-ligne input, .tc-facteur input { width: 100%; min-width: 0; border: 0; outline: none; border-radius: 16px; background: var(--encre);
  box-shadow: inset 0 0 0 1px var(--filet); padding: 14px 16px; color: var(--papier);
  font: 600 16px/1.25 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; transition: box-shadow .3s var(--courbe); }
.tc-ligne input:focus, .tc-facteur input:focus { box-shadow: inset 0 0 0 1.5px var(--papier); }
.tc-ligne input.faux { box-shadow: inset 0 0 0 1.5px var(--peche); }

/* Calculer : une ligne = signe, timecode, retirer */
.tc-lignes { display: flex; flex-direction: column; gap: 8px; margin-top: -6px; }
.tc-ligne { display: grid; grid-template-columns: 48px minmax(0, 1fr) 40px; gap: 8px; align-items: center; }
.tc-signe { height: 48px; border: 0; border-radius: 16px; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); color: var(--papier);
  font: 600 18px/1 var(--display); }
.tc-signe:hover { box-shadow: inset 0 0 0 1px var(--papier); }
.tc-retirer:disabled { opacity: .3; pointer-events: none; }
.tc-ajouter { align-self: flex-start; }
.tc-ajouter:hover { translate: none; }
.tc-facteur { display: grid; grid-template-columns: auto 120px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 6px; }
.tc-facteur .groupe { margin: 0; }