/* Outil · Fuseaux horaires (Time zones), id fuseaux : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : fz-
   À gauche : le planificateur (l'axe des 24 heures chez toi, une ligne par ville : nom, heure là-bas, demain / hier,
   décalage UTC, et ses 24 cases colorées ; un repère vertical à l'heure choisie ; zone de hauteur fixe qui défile),
   la légende, l'info (heures de bureau en commun). À droite : le jour, l'heure (curseur), Maintenant, et l'ajout d'une
   ville (recherche et liste de hauteur fixe). */
.fz .outil-fixe { align-items: stretch; }
.fz-plan { display: flex; flex-direction: column; gap: 6px; }
.fz-axe { display: grid; grid-template-columns: repeat(24, 1fr); font: 500 10px/1 var(--mono); color: var(--texte2); }
.fz-axe span { text-align: left; }
.fz-lignes { height: 360px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }
.fz-ligne { flex: none; display: flex; flex-direction: column; gap: 6px; }
.fz-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px 70px 28px; gap: 8px; align-items: baseline; height: 28px; }
.fz-nom { font: 500 14px/1.2 var(--corps); color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fz-tete b { font: 700 20px/1 var(--display); letter-spacing: -.02em; color: var(--peche); font-variant-numeric: tabular-nums; }
.fz-tete i, .fz-tete em { font: 500 11px/1 var(--mono); font-style: normal; color: var(--texte2); white-space: nowrap; }
.fz-tete em { text-align: right; }
.fz-retirer { align-self: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte2); }
.fz-retirer svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.fz-retirer:hover { color: var(--papier); }
.fz-retirer:disabled { opacity: .2; cursor: default; }
.fz-barre { position: relative; display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 26px; }
.fz-case { border: 0; padding: 0; border-radius: 3px; cursor: pointer; }
.fz-c0 { background: rgba(242, 240, 235, .05); }
.fz-c1 { background: rgba(242, 240, 235, .16); }
.fz-c2 { background: rgba(255, 140, 90, .55); }
.fz-case:hover { outline: 1px solid var(--papier); outline-offset: -1px; }
.fz-repere { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--papier); pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.fz-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .04em; color: var(--texte2); }
.fz-legende span { display: inline-flex; align-items: center; gap: 6px; }
.fz-legende i { width: 14px; height: 10px; border-radius: 2px; }
.fz-info { flex: none; height: 1lh; margin: 0; overflow: hidden; }

.fz-reglage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: end; }
.fz-reglage .champ input[type="date"] { color-scheme: dark; }
.fz-heure { display: flex; flex-direction: column; gap: var(--libelle); }
.fz-heure .groupe { padding: 0; }
.fz-curseur { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 48px; }
.fz-curseur input { width: 100%; accent-color: var(--orange); }
.fz-curseur b { font: 600 15px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--papier); }
.fz-maintenant { grid-column: 1 / -1; justify-self: start; cursor: pointer; }
.fz-maintenant:hover { translate: none; }
.fz-maintenant:disabled { opacity: .3; cursor: default; }
.fz-ajout { display: flex; flex-direction: column; gap: var(--libelle); }
.fz-ajout .groupe { padding: 0; }
.fz-liste { height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.fz-choix { cursor: pointer; }
.fz-choix .val { font-variant-numeric: tabular-nums; }
.fz-vide { margin: 30px 0; text-align: center; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
@media (max-width: 559px) { .fz-tete { grid-template-columns: minmax(0, 1fr) auto 50px 58px 28px; gap: 6px; } .fz-tete b { font-size: 18px; } }