/* Vitrimap - Heure dans le monde (0.107.0), chargé seulement par /services/heure-monde */
.hm-page { --hm: #534AB7; --hm-pale: #EEEDFA; --hm-nuit: #1F1A4D; }
.hm-bloc { margin: 0 0 26px; }
.hm-bloc h2 { font-size: 22px; margin: 0 0 12px; }
.hm-bloc h3 { font-size: 17px; margin: 18px 0 8px; }
.hm-bloc p, .hm-texte p { text-align: justify; }

/* Grande horloge du lieu */
.hm-grande { background: var(--hm-nuit); color: #fff; border-radius: var(--r-cadre); padding: 22px 24px; margin: 0 0 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hm-grande-h { font-family: var(--titre); font-size: clamp(48px, 11vw, 92px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hm-grande-d { font-size: 15px; font-weight: 600; color: #CFCBF5; }
.hm-resume b { font-variant-numeric: tabular-nums; }
.hm-phrase { font-size: 17px; }
.hm-phrase strong { color: var(--hm); }

/* Tableau « à Paris / ici » */
.hm-page .tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hm-table { border-collapse: collapse; background: var(--blanc); font-size: 14px; font-variant-numeric: tabular-nums; min-width: 100%; }
.hm-table th, .hm-table td { padding: 8px 10px; border: 1px solid var(--trait); text-align: center; white-space: nowrap; }
.hm-table thead th { background: var(--hm-pale); color: var(--hm-nuit); }
.hm-table tbody th { text-align: left; }
.hm-table small { display: block; font-size: 10px; color: var(--gris); font-weight: 600; }
.hm-changements { margin: 8px 0 0; padding-left: 20px; }
.hm-changements li { margin: 0 0 6px; text-align: justify; }

/* Rangée d'horloges */
.hm-horloges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.hm-horloges a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n n" "h j" "e e"; gap: 0 6px; background: var(--blanc); padding: 10px 12px; color: var(--encre); text-decoration: none; box-shadow: inset 0 0 0 1px var(--trait); border-radius: var(--r-petit); }
.hm-horloges a:hover, .hm-horloges .on a { box-shadow: inset 0 0 0 2px var(--hm); }
.hm-horloges span { grid-area: n; font-size: 13px; font-weight: 700; color: var(--texte); line-height: 1.25; overflow-wrap: anywhere; }
.hm-horloges b { grid-area: h; font-family: var(--titre); font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hm-horloges small { grid-area: j; align-self: center; font-size: 11px; font-weight: 700; color: var(--hm); }
.hm-horloges em { grid-area: e; font-style: normal; font-size: 12px; color: var(--gris); font-weight: 600; }

/* Villes d'un pays à plusieurs fuseaux */
.hm-villes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.hm-villes a { display: flex; flex-direction: column; background: var(--blanc); padding: 12px 14px; color: var(--encre); text-decoration: none; box-shadow: inset 0 0 0 1px var(--trait); border-radius: var(--r-petit); }
.hm-villes a:hover { box-shadow: inset 0 0 0 2px var(--hm); }
.hm-villes b { font-family: var(--titre); font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hm-villes span { font-size: 12px; color: var(--gris); font-weight: 600; }

/* Carte et fiche de la zone */
.hm-corps { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 16px; align-items: start; }
.hm-plan { height: 520px; border-radius: var(--r-cadre); overflow: hidden; background: #AAD3DF; z-index: 0; }
.hm-legende { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--gris); }
.hm-legende b { font-weight: 700; white-space: nowrap; }
.hm-legende-cases { display: flex; flex: 1; min-width: 0; }
.hm-legende-cases i { flex: 1; height: 12px; position: relative; }
.hm-legende-cases i span { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); font-style: normal; font-weight: 700; }
.hm-zone { background: var(--blanc); box-shadow: var(--ombre); border-radius: var(--r-cadre); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hm-zone p { margin: 0; }
.hm-zone-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hm-zone-tete strong { font-family: var(--titre); font-size: 20px; }
.hm-zone-tete span { color: var(--hm); font-weight: 800; font-size: 13px; white-space: nowrap; }
.hm-zone-h b { display: block; font-family: var(--titre); font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-zone-h span { font-size: 13px; color: var(--gris); font-weight: 600; }
.hm-zone-infos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; border-top: 1px solid var(--trait); padding-top: 10px; }
.hm-zone-infos dt { color: var(--gris); font-weight: 700; }
.hm-zone-infos dd { margin: 0; overflow-wrap: anywhere; }
.hm-zone-lien { font-weight: 700; font-size: 14px; color: var(--hm); text-decoration: none; }
.hm-soleil { font-size: 22px; line-height: 26px; text-align: center; color: #F5A524; text-shadow: 0 0 6px rgba(255, 200, 60, .9); }

/* Convertisseur (boutons et champs à angles droits) */
.hm-conv-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--blanc); padding: 14px; box-shadow: inset 0 0 0 1px var(--trait); }
.hm-conv-ligne label { display: flex; align-items: center; gap: 8px; font-weight: 700; flex-wrap: wrap; }
.hm-conv-ligne input, .hm-conv-ligne select { font: 600 15px var(--corps); padding: 8px 10px; border: 1px solid var(--trait); border-radius: 0; background: var(--blanc); color: var(--encre); max-width: 100%; }
.hm-conv-ligne select { max-width: 260px; }
.hm-inverser { font: 800 18px var(--corps); padding: 6px 12px; border: 1px solid var(--hm); border-radius: 0; background: var(--blanc); color: var(--hm); cursor: pointer; }
.hm-inverser:hover { background: var(--hm); color: #fff; }
.hm-conv-res { font-size: 17px; margin: 12px 0 0; min-height: 1.5em; }
.hm-conv-res strong { font-family: var(--titre); font-size: 22px; color: var(--hm); }

/* Listes de liens */
.hm-liens .relais-voisines a:hover { box-shadow: inset 0 0 0 2px var(--hm); }
.hm-tous { margin: 0 0 26px; }
.hm-tous a { font-weight: 700; color: var(--hm); text-decoration: none; }

@media (max-width: 900px) {
  .hm-corps { display: block; }
  .hm-plan { height: 340px; margin-bottom: 0; }
  .hm-zone { margin-top: 26px; }
  .hm-horloges { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .hm-horloges b { font-size: 22px; }
  .hm-conv-ligne select { max-width: 100%; }
}
/* 0.108.2 : horloges de même hauteur (nom sur deux lignes, ex. Nouvelle-Calédonie) */
.hm-horloges li { display: flex; }
.hm-horloges li > a { flex: 1; grid-template-rows: 1fr auto auto; align-items: end; }
.hm-horloges span { align-self: start; }
