/* Calcul d'heures : styles propres à l'outil. */
.o-calcul-heures { display: grid; gap: 26px; min-width: 0; }
.o-calcul-heures [hidden] { display: none !important; }
.o-calcul-heures-bloc { display: grid; gap: 12px; min-width: 0; }
.o-calcul-heures-bloc + .o-calcul-heures-bloc { padding-top: 22px; border-top: 1px solid var(--bord); }
.o-calcul-heures h2 { margin: 0; font-size: 1.2rem; }
.o-calcul-heures h3 { margin: 10px 0 0; font-size: 1.02rem; }
.o-calcul-heures .reglages { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.o-calcul-heures input[type="time"] {
  display: block; width: 100%; min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: var(--rayon-petit);
  background: var(--surface); color: var(--texte); font: inherit; font-variant-numeric: tabular-nums; color-scheme: light dark;
}
.o-calcul-heures input:focus-visible, .o-calcul-heures textarea:focus-visible { outline: 3px solid var(--marque); outline-offset: 0; }
.o-calcul-heures input[aria-invalid="true"] { border-color: var(--erreur-texte); outline: 1px solid var(--erreur-texte); }
.o-calcul-heures textarea { min-height: 120px; font-size: 1rem; }
.o-calcul-heures-resultat {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 22px; padding: 14px 16px;
  border-radius: var(--rayon); background: var(--surface-2); color: var(--texte); font-variant-numeric: tabular-nums; text-align: center;
}
.o-calcul-heures-resultat strong { font-size: 1.9rem; line-height: 1.2; }
.o-calcul-heures-resultat span { font: 600 1.05rem var(--mono); color: var(--texte-2); }
.o-calcul-heures-resultat span:empty { display: none; }
.o-calcul-heures-resultat.erreur { background: var(--erreur-fond); color: var(--erreur-texte); }
.o-calcul-heures-resultat.erreur strong { font-size: 1.05rem; }
.o-calcul-heures .o-calcul-heures-erreur { color: var(--erreur-texte); font-size: .95rem; }

.o-calcul-heures-entete, .o-calcul-heures-rang { display: grid; grid-template-columns: minmax(0, 1.5fr) 118px 118px 86px minmax(96px, 1fr) 42px; gap: 8px; align-items: center; }
.o-calcul-heures-entete { font-size: .82rem; color: var(--texte-2); }
.o-calcul-heures-entete span:nth-child(5) { text-align: right; }
.o-calcul-heures-rangs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.o-calcul-heures-rang label, .o-calcul-heures-r-total { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; font-size: .82rem; color: var(--texte-2); }
.o-calcul-heures-rang label > span, .o-calcul-heures-r-total > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.o-calcul-heures-r-total output { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 42px; font: 600 1rem/1.2 var(--mono); color: var(--texte); text-align: right; }
.o-calcul-heures-r-total output small { font-weight: 500; font-size: .8rem; color: var(--texte-2); }
.o-calcul-heures-r-total output.erreur { color: var(--erreur-texte); font-size: .82rem; font-family: var(--police); }
.o-calcul-heures-rang .btn { width: 42px; min-height: 42px; padding: 0; font-size: 1.25rem; line-height: 1; }
.o-calcul-heures [data-plus] { justify-self: start; }
.o-calcul-heures-totaux { display: grid; gap: 10px; max-width: 460px; width: 100%; margin-left: auto; }
.o-calcul-heures-totaux p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 0; }
.o-calcul-heures-totaux p > span, .o-calcul-heures-taux { color: var(--texte-2); font-size: .92rem; }
.o-calcul-heures-total { padding: 10px 14px; border-radius: var(--rayon-petit); background: var(--surface-2); }
.o-calcul-heures-total output, .o-calcul-heures-montant output { font-variant-numeric: tabular-nums; color: var(--texte); text-align: right; }
.o-calcul-heures-total strong { font-size: 1.35rem; }
.o-calcul-heures-total output span { font: 600 1rem var(--mono); color: var(--texte-2); }
.o-calcul-heures-taux { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; }
.o-calcul-heures-taux input { width: 120px; text-align: right; }
.o-calcul-heures-montant { padding: 0 14px; }
.o-calcul-heures-montant small { font: 500 .85rem var(--mono); color: var(--texte-2); }
.o-calcul-heures-montant strong { font: 700 1.2rem var(--mono); }
.o-calcul-heures-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.o-calcul-heures .o-calcul-heures-avis { display: block; }
.o-calcul-heures-conv input { font: 600 1.1rem var(--mono); }
.o-calcul-heures .reglages small { color: var(--texte-2); }
@media (max-width: 700px) {
  .o-calcul-heures-entete { display: none; }
  .o-calcul-heures-rang { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px; padding-bottom: 12px; border-bottom: 1px solid var(--bord); }
  .o-calcul-heures-rang label:first-child { grid-column: 1 / -1; }
  .o-calcul-heures-rang label:nth-child(3) { grid-column: 2 / -1; }
  .o-calcul-heures-rang label > span, .o-calcul-heures-r-total > span { position: static; width: auto; height: auto; clip-path: none; }
  .o-calcul-heures-rang label:first-child > span { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); }
  .o-calcul-heures-r-total { text-align: right; }
  .o-calcul-heures-rang .btn { align-self: end; }
  .o-calcul-heures-totaux { max-width: none; }
  .o-calcul-heures-actions { justify-content: flex-start; }
  .o-calcul-heures .reglages { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}