/* La météo par jour d'une rando (meteo.js, ADR 0037) : la page Météo empilée dans le panneau, la ligne de météo et le
   bloc Course de la rando, et ce que « Préparer la course » (course.css) en reprend : le ruban des jours, le soleil, la
   page du panneau. Dessin de la maquette validée docs/da/meteo-par-jour.html (section 02), aux jetons de l'app
   (packages/jetons → jetons.css) : pluie = graphe-allure, neige = graphe-cadence, ciel de jour, ciel de nuit et disque du
   soleil ; aucune couleur écrite ici. Thèmes clair et sombre par les jetons. */

.mt-page,
.mt-entree {
  --mt-pluie: var(--graphe-allure);
  --mt-neige: var(--graphe-cadence);
  --mt-melee: repeating-linear-gradient(-45deg, var(--mt-pluie) 0 2px, var(--mt-neige) 2px 4px);
}

/* ---------- La page du panneau : en-tête, défilement, barre d'actions ---------- */
.mt-page {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-top: 1px solid var(--filet);
  background: var(--papier);
  color: var(--encre);
}
.mt-page[hidden] {
  display: none;
}
.mt-entete {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 2px 8px 0 10px;
  border-bottom: 1px solid var(--filet);
}
.mt-retour {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  color: var(--encre-2);
  font: 500 14px/1 var(--police);
  cursor: pointer;
}
.mt-retour span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mt-retour .ic-trait {
  width: 20px;
  height: 20px;
  flex: none;
}
.mt-defile {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 18px 24px;
  scrollbar-width: thin;
}
.mt-barre {
  flex: none;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--filet);
  background: var(--papier);
}
.mt-titre {
  margin: 2px 0 12px;
  font: var(--texte-titre-ecran-poids) 34px/1 var(--police-titre);
  letter-spacing: -0.02em;
}
.mt-surtitre {
  font: 600 11px/1.25 var(--police-etroite);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.mt-aside {
  font-size: 12.5px;
  color: var(--encre-3);
  text-align: right;
}
.mt-defs {
  position: absolute;
}

/* ---------- Boutons de la barre ---------- */
.mt-actions {
  display: flex;
  gap: 8px;
}
.mt-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-s);
  background: none;
  color: var(--encre);
  font: 600 13.5px/1.15 var(--police);
  text-wrap: balance;
  cursor: pointer;
}
.mt-bouton.plein {
  flex: 1 1 auto;
  min-width: 0;
  border-color: var(--action);
  background: var(--action);
  color: var(--sur-action);
}
.mt-bouton.large {
  width: 100%;
}
.mt-bouton.plein[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.mt-bouton .ic-trait {
  width: 18px;
  height: 18px;
  flex: none;
}
.mt-radar {
  flex: none;
  justify-content: flex-start;
  padding: 0 10px;
  text-align: left;
}
.mt-radar span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mt-radar small {
  font: 500 11.5px/1.1 var(--police);
  color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}
.mt-radar[aria-pressed="true"] {
  border-color: var(--encre);
  background: var(--creux);
}
.mt-radar[disabled] {
  border-style: dashed;
  color: var(--encre-3);
  cursor: not-allowed;
}
.mt-radar[disabled] small {
  color: var(--encre-2);
}

/* ---------- Bandeaux d'état ---------- */
.mt-bandeau {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  margin: 0 0 14px;
  padding: 11px 12px;
  border-radius: var(--r-s);
  font-size: 13.5px;
  line-height: 1.4;
}
.mt-bandeau > .ic-trait {
  width: 22px;
  height: 22px;
}
.mt-bandeau b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}
.mt-bandeau p {
  margin: 0;
  color: var(--encre-2);
}
.mt-bandeau .mr-action {
  display: inline-flex;
  grid-column: 2;
  justify-self: start;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-top: 6px;
}
.mt-bandeau .mr-action .ic-trait {
  width: 16px;
  height: 16px;
}
.mt-bandeau.horsLigne,
.mt-bandeau.horsPrevision {
  border: 1px solid var(--filet-fort);
  background: var(--surface);
}
.mt-bandeau.ancienne {
  border-left: 3px solid var(--encre);
  background: var(--creux);
}
.mt-bandeau.indisponible {
  border: 1px dashed var(--filet-fort);
  background: var(--surface);
}
.mt-squelette {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border-top: 1px solid var(--encre);
  border-bottom: 1px solid var(--filet);
}
.mt-squelette span {
  height: 150px;
  border-left: 1px solid var(--filet);
  background: repeating-linear-gradient(
    180deg,
    transparent 0 22px,
    color-mix(in srgb, var(--encre) 4%, transparent) 22px 34px
  );
}
.mt-squelette span:first-child {
  border-left: 0;
}

/* ---------- Le ruban des jours ---------- */
.mt-ruban {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  border-top: 1px solid var(--encre);
  border-bottom: 1px solid var(--filet);
}
.mt-jour {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 8px 0 6px;
  border: 0;
  background: none;
  color: var(--encre);
  font: inherit;
  cursor: pointer;
}
.mt-jour + .mt-jour {
  box-shadow: -1px 0 0 var(--filet);
}
.mt-jour[aria-checked="true"] {
  background: var(--creux);
}
.mt-jour[aria-checked="true"]::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--encre);
}
@media (hover: hover) {
  .mt-jour:hover:not([aria-checked="true"]) {
    background: color-mix(in srgb, var(--creux) 55%, transparent);
  }
}
.mt-j-sem {
  font: 600 10.5px/1.2 var(--police-etroite);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--encre-3);
}
.mt-jour[aria-checked="true"] .mt-j-sem {
  color: var(--encre);
}
.mt-j-date {
  margin-top: 1px;
  font: 400 22px/1.05 var(--police-titre);
}
.mt-jour.tendance .mt-j-date {
  font-style: italic;
}
.mt-jour.tendance .mt-j-ic {
  opacity: 0.7;
}
.mt-j-fiche {
  display: block;
  width: 9px;
  height: 8px;
  margin: 2px 0 3px;
}
.mt-tri path {
  fill: var(--accent);
}
.mt-j-ic .mt-ic {
  display: block;
  width: 26px;
  height: 26px;
}
.mt-j-max {
  margin-top: 4px;
  font: 600 13.5px/1.1 var(--police);
  font-variant-numeric: tabular-nums;
}
.mt-j-bande {
  display: block;
  width: 100%;
  height: 40px;
  margin: 3px 0;
}
.mt-j-zero {
  stroke: var(--encre-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.mt-j-barre-t {
  stroke: var(--encre);
  stroke-width: 4;
  stroke-linecap: round;
}
.mt-j-min {
  font: 500 12.5px/1.1 var(--police);
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.mt-j-pr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 34px;
  margin-top: 4px;
}
.mt-j-pr span {
  font: 600 11px/1.1 var(--police);
  white-space: nowrap;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.mt-j-pr svg {
  display: block;
  width: 14px;
  height: 18px;
  margin-top: 2px;
}
.mt-ruban.compact .mt-j-pr {
  height: 28px;
}
.mt-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--encre-3);
}
.mt-legende b {
  font-weight: 600;
  color: var(--encre-2);
}
.mt-legende .mt-tri {
  display: inline-block;
  width: 9px;
  height: 8px;
  margin: 0 3px 0 0;
}

/* ---------- Le jour vu ---------- */
.mt-jourtete {
  margin-top: 18px;
}
.mt-jourtete .ligne1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.mt-jour-titre {
  margin: 0;
  font: 400 27px/1.05 var(--police-titre);
  letter-spacing: -0.01em;
}
.mt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--accent-texte);
  font: 600 12.5px/1 var(--police);
}
.mt-badge .mt-tri {
  width: 10px;
  height: 9px;
}
.mt-ciel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--encre-2);
}
.mt-ciel .mt-ic {
  flex: none;
  width: 22px;
  height: 22px;
}

/* ---------- Ta course ---------- */
.mt-course {
  margin-top: 14px;
}
.mt-course-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--encre);
}
.mt-course ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mt-course li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 0 11px;
  align-items: center;
  min-height: 56px;
  padding: 7px 0;
  border-bottom: 1px solid var(--filet);
}
.mt-marq {
  width: 12px;
  height: 12px;
}
.mt-marq .plein {
  fill: var(--accent);
}
.mt-marq .creux {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}
.mt-c-quoi b {
  display: block;
  font: 600 15.5px/1.25 var(--police);
}
.mt-c-quoi b span {
  margin-left: 6px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.mt-c-quoi b span.alerte {
  font-weight: 600;
  color: var(--accent-texte);
}
.mt-c-quoi small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.mt-c-temp {
  text-align: right;
}
.mt-c-temp b {
  display: block;
  font: 600 25px/1 var(--police-etroite);
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mt-c-temp small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- Sections : soleil, heure par heure ---------- */
.mt-section {
  margin-top: 28px;
}
.mt-section-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--encre);
}
.mt-section-tete.avec-mode {
  align-items: center;
}
.mt-titre-section {
  margin: 0;
  font: 400 23px/1.1 var(--police-titre);
  letter-spacing: -0.01em;
}

/* Le soleil, d'après la Horizon Card de Home Assistant (MIT) : l'idée du dessin, pas son code. */
.mt-s-svg {
  display: block;
  margin: 10px auto 0;
  overflow: visible;
}
.mt-s-jour {
  fill: var(--ciel-jour);
}
.mt-s-nuit {
  fill: var(--ciel-nuit);
}
.mt-s-courbe {
  fill: none;
  stroke: var(--encre-3);
  stroke-width: 1.2;
}
.mt-s-horizon {
  stroke: var(--encre-3);
  stroke-width: 1;
}
.mt-s-fleche {
  fill: none;
  stroke: var(--encre-3);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mt-s-trait {
  stroke: var(--filet-fort);
  stroke-width: 1;
}
.mt-s-mot {
  font: 500 12px var(--police);
  fill: var(--encre-3);
}
.mt-s-heure {
  font: 600 17px var(--police);
  fill: var(--encre);
  font-variant-numeric: tabular-nums;
}
.mt-s-temps {
  font: 600 13px var(--police);
  fill: var(--accent-texte);
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--papier);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.mt-s-course {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mt-s-astre {
  fill: var(--disque-soleil);
}
.mt-s-halo-a {
  stop-color: var(--disque-soleil);
  stop-opacity: 0.7;
}
.mt-s-halo-b {
  stop-color: var(--disque-soleil);
  stop-opacity: 0;
}
.mt-s-marq {
  fill: var(--accent);
  stroke: var(--papier);
  stroke-width: 1.2;
}
.mt-s-marq-creux {
  fill: var(--papier);
  stroke: var(--accent);
  stroke-width: 2;
}
.mt-s-alerte {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font: 600 13.5px/1.4 var(--police);
  color: var(--accent-texte);
}
.mt-s-alerte .ic-trait {
  flex: none;
  width: 18px;
  height: 18px;
}

/* Heure par heure : quatre pistes en un SVG (Graphes.modeleHeuresMeteo), leurs en-têtes et le drapeau par-dessus. */
.mt-mode {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-s);
}
.mt-mode button {
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-left: 1px solid var(--filet);
  background: none;
  color: var(--encre-2);
  font: 500 13px/1 var(--police);
  white-space: nowrap;
  cursor: pointer;
}
.mt-mode button:first-child {
  border-left: 0;
}
.mt-mode button[aria-pressed="true"] {
  background: var(--encre);
  color: var(--papier);
  font-weight: 600;
}
.mt-g {
  position: relative;
  margin-top: 4px;
  outline: none;
  touch-action: pan-y;
  user-select: none;
}
.mt-g:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 4px;
}
.mt-g-svg {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  overflow: visible;
}
.mt-g-tete {
  position: absolute;
  right: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-top: 1px solid var(--filet);
  pointer-events: none;
}
.mt-g-tete.premiere {
  border-top: 0;
}
.mt-g-nom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--encre-3);
  font: 600 10.5px/1.2 var(--police-etroite);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mt-g-nom i {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.mt-g-val {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  font: 600 14.5px/1.2 var(--police);
  font-variant-numeric: tabular-nums;
}
.mt-g-val small {
  font-size: 12px;
  font-weight: 500;
  color: var(--encre-2);
}
.mt-g-grille {
  stroke: var(--filet);
  stroke-width: 1;
}
.mt-g-zero {
  stroke: var(--encre-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.mt-g-base {
  stroke: var(--filet-fort);
  stroke-width: 1;
}
.mt-g-cote,
.mt-g-heure {
  font: 500 10px var(--police);
  fill: var(--encre-3);
  font-variant-numeric: tabular-nums;
}
.mt-g-heure {
  font-size: 10.5px;
}
.mt-g-axe {
  stroke: var(--encre);
  stroke-width: 1;
}
.mt-g-aplat {
  fill: var(--aplat);
  opacity: 0.75;
}
.mt-g-ligne {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mt-g-ligne.fine {
  stroke: var(--encre-3);
  stroke-width: 1;
}
.mt-g-rafale {
  fill: var(--aplat);
}
.mt-g-extreme {
  fill: var(--encre);
}
.mt-g-etiq {
  font: 600 11px var(--police);
  fill: var(--encre);
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--papier);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.mt-g-etiq.ref {
  font-size: 10.5px;
  font-weight: 500;
  fill: var(--encre-2);
}
.mt-g-vide {
  font: 500 12px var(--police);
  fill: var(--encre-3);
}
.mt-g-fleche {
  fill: none;
  stroke: var(--encre-2);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mt-g-gel {
  fill: var(--mt-neige);
  opacity: 0.12;
}
.mt-g-ref {
  stroke: var(--encre-3);
  stroke-width: 1;
}
.mt-g-pt-ref {
  fill: var(--encre-3);
}
.mt-g-tri {
  fill: var(--accent);
  stroke: var(--papier);
  stroke-width: 1.2;
}
.mt-g-profil {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.mt-g-zone {
  fill: var(--accent);
  opacity: 0.08;
}
.mt-g-passe {
  fill: var(--papier);
  opacity: 0.55;
}
.mt-g-course {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
}
.mt-g-course-tick {
  stroke: var(--accent);
  stroke-width: 1.5;
}
.mt-g-course-txt {
  font: 600 11px var(--police);
  fill: var(--accent-texte);
  font-variant-numeric: tabular-nums;
}
.mt-g.actif .mt-g-course-txt {
  visibility: hidden;
}
.mt-g-alt-aplat {
  fill: var(--accent);
  opacity: 0.12;
}
.mt-g-alt-ligne {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.mt-g-alt-hors {
  stroke: var(--encre-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.mt-g-curseur {
  stroke: var(--encre-3);
  stroke-width: 1;
}
.mt-g-pt {
  fill: var(--encre);
  stroke: var(--papier);
  stroke-width: 2;
}
.mt-g-sel {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.2;
}
.mt-g-drapeau {
  position: absolute;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-xs);
  background: var(--encre);
  color: var(--papier);
  font: 600 11.5px/22px var(--police);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
  pointer-events: none;
}
.mt-g-drapeau[hidden] {
  display: none;
}
.mt-g-aide {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--encre-3);
}
.mt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- La ligne de source ---------- */
.mt-source {
  margin: 24px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--filet);
  font-size: 12px;
  line-height: 1.5;
  color: var(--encre-3);
}
.mt-source button {
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre);
  font: 600 12px/1.5 var(--police);
  text-decoration: underline;
  text-decoration-color: var(--filet-fort);
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- La ligne de météo de la rando ---------- */
.mt-entree {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  margin: 12px 0 0;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  background: none;
  color: var(--encre);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
div.mt-entree {
  grid-template-columns: 32px minmax(0, 1fr);
  cursor: default;
}
.mt-entree.compacte {
  margin-top: 0;
  border-top: 0;
}
.mt-e-ic .mt-ic,
.mt-e-ic .ic-trait {
  display: block;
  width: 32px;
  height: 32px;
}
.mt-e-texte b {
  display: block;
  font: 600 15px/1.3 var(--police);
}
.mt-e-texte .l2 {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.mt-e-texte .l3 {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--encre-3);
}
.mt-marque {
  margin-right: 6px;
  padding: 0 5px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-xs);
  color: var(--encre);
  font: 600 11px/1.4 var(--police);
}
.mt-chev {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--encre-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Le bloc Course de la rando (sa boîte : mesrandos.css) ---------- */
.mt-c-titre {
  margin: 0;
  font: 400 23px/1.1 var(--police-titre);
  letter-spacing: -0.01em;
}
.mt-c-lignes {
  margin-top: 8px;
}
.mt-c-lignes p,
.mt-c-vide {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.mt-c-lignes p:first-child {
  font: 600 17px/1.3 var(--police);
}
.mt-c-vide {
  margin-top: 6px;
  color: var(--encre-2);
}