/* Outil · Dates (Date calculator) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : dt-
   En haut, centré : le mode (Entre deux dates / Ajouter ou retirer). À gauche : le résultat en grand (toucher = copier) et
   5 lignes fixes, l'info, Copier. À droite : les réglages du mode (l'autre mode est masqué : ce sont deux pages, comme les
   onglets de Mots de passe). */
.dt .outil-fixe { align-items: stretch; }
.dt-haut { display: flex; justify-content: center; }
.dt-haut .seg { width: min(100%, 460px); }
@media (min-width: 960px) {
  .dt.outil-colonnes { grid-template-rows: auto minmax(0, 1fr); row-gap: 18px; }
  .dt-haut { grid-column: 1 / -1; margin-top: 4px; }
}
.dt-resultat { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 8px 18px 6px; }
.dt-grand { display: flex; align-items: center; width: 100%; height: 92px; border: 0; background: none; padding: 0; cursor: copy; text-align: left;
  font: 700 28px/1.12 var(--display); letter-spacing: -.02em; color: var(--peche); border-bottom: 1px solid var(--filet-doux); }
.dt-grand::first-letter { text-transform: none; }
.dt-rangee { cursor: default; height: 46px; }
.dt-rangee:last-child { border-bottom: 0; }
.dt-rangee .val { font-variant-numeric: tabular-nums; }
.dt-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.dt-actions { display: flex; justify-content: center; }
.dt-actions .pastille { cursor: pointer; }
.dt-actions .pastille:hover, .dt-boutons .pastille:hover { translate: none; }
.dt-actions .pastille:disabled { opacity: .3; cursor: default; }

.dt-reglages { display: none; flex-direction: column; gap: 18px; }
.dt[data-mode="ecart"] [data-reglages="ecart"], .dt[data-mode="ajouter"] [data-reglages="ajouter"] { display: flex; }
.dt-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dt-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; }
.dt-boutons .pastille { cursor: pointer; padding: 7px 14px; }
.dt input[type="date"] { color-scheme: dark; min-height: 52px; }
/* Téléphone : la page part du haut (les deux modes n'ont pas autant de réglages) */
@media (max-width: 959px) { .dt.outil-page { justify-content: flex-start; } .dt-grand { font-size: 23px; } }