/* LE-RADAR — mât photo + chrome masthead
 * Extrait de style.css (D2 tranche 1) pour limiter la surface agent.
 * Chargé via <link rel="stylesheet"> avant style.css — jamais @import.
 */

/* ═══════════════════════════════════════════════════════════
   FOND PHOTO DU MÂT — banque du Québec (Wikimedia Commons, licences ouvertes)
   Bannière plein-largeur derrière le mât (date/titre/actions/météo)
   uniquement — le reste de la page garde son fond plein habituel.
   ═══════════════════════════════════════════════════════════ */
.masthead { position: relative; }
#bg-photo-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  /* Défaut centre ; JS pose 50% {focalY%} (auto ou banque). */
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  /* Fondu initial seulement — pas de délai, la photo est déjà décodée. */
  transition: opacity 420ms ease-out;
}
#bg-photo-layer.loaded { opacity: 1; }
/* Calque temporaire posé au-dessus de l'ancienne photo pendant le shuffle. */
.bg-photo-transition {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease-out;
}
.bg-photo-transition.is-visible { opacity: 1; }

/*
 * Voile photo minimal : pas de « film sombre » derrière LE RADAR.
 * Lisibilité date/slogan = ombres de texte (ci-dessous), pas un assombrissement
 * global de la photo (surtout sur images claires / neige).
 */
.bg-photo-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 420ms ease-out;
  /* Clair : à peine un dégradé de bords — photo quasi intacte */
  background:
    linear-gradient(
      180deg,
      rgba(10, 12, 16, 0.07) 0%,
      transparent 28%,
      transparent 72%,
      rgba(10, 12, 16, 0.06) 100%
    );
}
[data-theme="dark"] .bg-photo-scrim {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.14) 0%,
      transparent 30%,
      transparent 70%,
      rgba(0, 0, 0, 0.12) 100%
    );
}
#bg-photo-layer.loaded + .bg-photo-scrim { opacity: 1; }

.masthead-inner { position: relative; z-index: 2; }
/*
 * Gouttière droite = même que le contenu (.masthead-inner, .tuner-inner, .wire)
 * et que la dernière icône du mât (padding --pad dans .masthead-inner).
 * 100% du .masthead (pas 100vw) : évite le décalage scrollbar vs boîte contenu.
 * Plus de right:10px collé au bord écran.
 */
.masthead-shuffle-slot,
.bg-photo-credit {
  --masthead-edge-right: max(
    env(safe-area-inset-right, 0px),
    calc((100% - min(100%, var(--maxw, 100%))) / 2 + var(--pad, 24px))
  );
}
.masthead-shuffle-slot {
  position: absolute;
  z-index: 4;
  /* Même origine verticale que .masthead-inner (+ safe-area PWA). */
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: var(--masthead-edge-right);
}
.masthead-bg-shuffle { cursor: pointer; }
.masthead-bg-shuffle svg { width: 15px; height: 15px; }

.bg-photo-credit {
  position: absolute;
  z-index: 3;
  right: var(--masthead-edge-right);
  left: auto;
  bottom: 5px;
  /* Largeur = contenu, plafonnée à la colonne contenu. */
  width: max-content;
  max-width: calc(
    min(100vw, var(--maxw, 100vw)) - 2 * var(--pad, 24px)
  );
  font-size: 9.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.68);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  opacity: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 420ms ease-out, color 180ms ease;
  pointer-events: none;
}
/*
 * Crédit : format court partout (ex-mobile) — © + auteur.
 * Titre / licence dans title= (quebec-backgrounds.js). Pas de ligne bureau
 * monstrueuse « titre (id) —auteur… » collée.
 */
.bg-photo-credit__full { display: none !important; }
.bg-photo-credit__short {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  /* Compromis : ni collé (0.12em) ni trop aéré (0.35rem) */
  gap: 0.28em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bg-photo-credit__copyleft,
.bg-photo-credit__copyright {
  display: inline-block;
  align-self: baseline;
  flex: 0 0 auto;
  font-size: 0.88em;
  line-height: 1;
  opacity: 0.78;
}
.bg-photo-credit__copyleft {
  transform: scaleX(-1);
}
#bg-photo-layer.loaded ~ .bg-photo-credit { opacity: 1; }
.bg-photo-credit {
  font-size: 8px;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.bg-photo-credit a {
  color: inherit;
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  pointer-events: auto;
  padding: 0;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}
.bg-photo-credit:hover,
.bg-photo-credit:focus-within { color: rgba(255, 255, 255, 0.95); }
.bg-photo-credit a:hover,
.bg-photo-credit a:focus-visible {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}
.bg-photo-credit a:active {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

/*
 * Mobile + tablette (≤1023, météo dockée) : crédit bas-droit comme en 390 —
 * lisibilité + air sous le slogan. Bureau ≥1024 : slot shuffle flottant.
 */
@media (max-width: 1023.98px) {
  .bg-photo-credit {
    bottom: 5px;
    /* right : --masthead-edge-right (gouttière contenu), pas 10px. */
    left: auto;
    color: rgba(255, 255, 255, 0.74);
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.7),
      0 0 8px rgba(0, 0, 0, 0.3);
  }
  #bg-photo-layer.loaded ~ .bg-photo-credit { opacity: 0.9; }

  /* Crédit ancré bas ; brand rembourré bas pour ne pas chevaucher le slogan. */
  .masthead:has(#bg-photo-layer.loaded) .masthead-brand {
    padding-top: 0;
    padding-bottom: 16px;
  }
}
@media (max-width: 360px) {
  .bg-photo-credit {
    font-size: 8.5px;
    max-width: calc(100% - 16px);
  }
  /* Même principe qu'au palier 720px, décalage un peu plus court : sous
     360px le crédit est déjà réduit (8.5px), la marque n'a pas besoin de
     remonter autant. */
  .masthead:has(#bg-photo-layer.loaded) .masthead-brand {
    padding-top: 3px;
    padding-bottom: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #bg-photo-layer,
  .bg-photo-transition,
  .bg-photo-scrim,
  .bg-photo-credit { transition: none; }
}

/*
 * Mât sur photo — focus-group le-radar-masthead-photo-chrome C.
 * Slogan / crédit : soft glass. Date : **sœur des cartes météo**
 * (même hauteur 29px, radius 5px, verre, ombre, typo) — une ligne
 * « MARDI 11 AOÛT 2026 · 14 h 00 » entière (météo plafonnée à 3 cartes).
 * Chrome = copie de .masthead-weather__city (photo dark / light).
 *
 * Date+heure **toujours visibles** dès qu’il y a #bg-photo-layer (pas
 * d’attente .loaded) — masquage pré-photo retiré (retour mainteneur).
 */
.masthead:has(#bg-photo-layer) .masthead-date {
  opacity: 1;
  transition: opacity 280ms ease-out;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  /* Espacement date · heure porté par width du · (pas gap + margin). */
  gap: 0;
  box-sizing: border-box;
  height: 29px;
  /* Hug le texte (pas stretch 1fr → plaque vide). max-width:100 % = jamais
   * hors de la cellule grille (sinon EN long chevauche les icônes et la
   * cascade MASTHEAD_DATE_FORMATS ne part jamais : scrollW == clientW). */
  width: max-content;
  max-width: 100%;
  min-width: 0;
  justify-self: start;
  padding: 0 8px;
  border-radius: 5px;
  /* Identique à .masthead-weather__city sur photo (dark default) */
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(90deg, rgba(200, 180, 120, 0.22) 0%, transparent 55%),
    rgba(22, 24, 30, 0.82);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 3px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: rgba(236, 238, 242, 0.92);
  -webkit-text-stroke: 0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-shadow: none;
  text-transform: uppercase;
  overflow: hidden;
}
.masthead:has(#bg-photo-layer) .masthead-date #today-date {
  display: block;
  /* Ne pas flex-grow : sinon le chip s’étire au max-width pour rien. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Rôle « name » météo */
  color: rgba(245, 246, 248, 0.96);
  line-height: 1.15;
  /* letter-spacing parent : blanc après dernier glyphe → · trop collé à la date */
  margin-inline-end: -0.03em;
}
/* Heure = même ligne, rôle « temp » météo (blanc dense, tabular) */
.masthead:has(#bg-photo-layer) .masthead-date .masthead-time {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 1;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  text-transform: none;
}
/* Point médian : boîte symétrique (gap parent = 0).
 * Avant : gap 5px + margin 0.42em → espace gauche >> droite (· mal centré). */
.masthead:has(#bg-photo-layer) .masthead-date .masthead-time::before {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.1em;
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-size: 1em;
  line-height: 1;
  /* Caps uppercase + chiffres tabular : léger remontée optique */
  transform: translateY(-0.07em);
  color: rgba(245, 246, 248, 0.55);
  opacity: 1;
  flex-shrink: 0;
}
/* Clair : même verre ardoise que les cartes météo en light */
[data-theme="light"] .masthead:has(#bg-photo-layer) .masthead-date {
  background:
    linear-gradient(90deg, rgba(200, 180, 120, 0.16) 0%, transparent 55%),
    rgba(54, 59, 68, 0.68);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 3px 10px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px) saturate(1.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
}
/* Dark explicite : même base que weather city photo (pas plus opaque) */
[data-theme="dark"] .masthead:has(#bg-photo-layer) .masthead-date {
  background:
    linear-gradient(90deg, rgba(200, 180, 120, 0.22) 0%, transparent 55%),
    rgba(22, 24, 30, 0.82);
  border-color: rgba(255, 255, 255, 0.14);
}
/*
 * Tablette (météo dockée, colonne date = 1fr) : hug content, borné à la
 * cellule — évite plaque vide ET chevauchement des actions.
 */
@media (max-width: 1023.98px) {
  .masthead:has(#bg-photo-layer) .masthead-date {
    justify-self: start !important;
    width: max-content;
    max-width: 100%;
  }
}
/*
 * Mobile photo ≤600 : alignement vs icônes (pas de translateY).
 */
@media (max-width: 599.98px) {
  .masthead:has(#bg-photo-layer) .masthead-date {
    transform: none;
    align-self: center;
    max-width: 100%;
  }
}
/*
 * Stack date puis heure ≤449 — 390 + 430 lab. En 1 ligne la date longue
 * « tient » et l’heure est clipée (overflow:hidden → « · 14 »). Empiler
 * libère la largeur pour l’année complète ; la cascade JS raccourcit si
 * besoin (MARDI… trop long pour ~130 px).
 */
@media (max-width: 449.98px) {
  .masthead:has(#bg-photo-layer) .masthead-date {
    height: auto;
    min-height: 29px;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    padding: 4px 8px;
  }
  .masthead:has(#bg-photo-layer) .masthead-date #today-date {
    flex: 0 1 auto;
    max-width: 100%;
    /* Pas d’ellipse figée : la cascade MASTHEAD_DATE_FORMATS raccourcit. */
    text-overflow: clip;
  }
  .masthead:has(#bg-photo-layer) .masthead-date .masthead-time {
    margin-left: 0;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
  }
  .masthead:has(#bg-photo-layer) .masthead-date .masthead-time::before {
    content: none;
  }
}
/* Slogan : glass un cran plus compact en mobile (évite collision crédit / mât bas). */
@media (max-width: 430px) {
  .masthead:has(#bg-photo-layer.loaded) .wordmark-full {
    max-width: min(92vw, 22rem);
    /* padding-inline > radius (0.6rem) : le glyphe ne rentre plus dans l’arc. */
    padding: 0.4rem 1rem;
    margin-top: 0.25rem;
    letter-spacing: 0.08em;
    gap: 0.08em;
  }
  .masthead:has(#bg-photo-layer.loaded) .wordmark-full__lead,
  .masthead:has(#bg-photo-layer.loaded) .wordmark-full__tag {
    letter-spacing: 0.08em;
  }
  .masthead:has(#bg-photo-layer.loaded) .masthead-brand {
    padding-bottom: 18px;
  }
}
.masthead:has(#bg-photo-layer.loaded) .wordmark {
  position: relative;
  isolation: isolate;
}
/* Halo derrière LE RADAR : quasi transparent — plus de tache sombre « film » */
.masthead:has(#bg-photo-layer.loaded) .wordmark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: -1;
  width: min(40rem, 90vw);
  height: min(7.2rem, 32vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(
    ellipse 48% 38% at 50% 48%,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0.02) 50%,
    transparent 74%
  );
}
[data-theme="dark"] .masthead:has(#bg-photo-layer.loaded) .wordmark::before {
  background: radial-gradient(
    ellipse 50% 40% at 50% 48%,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.04) 50%,
    transparent 74%
  );
}
.masthead:has(#bg-photo-layer.loaded) .wordmark-mark {
  color: #ffffff;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.22),
    0 4px 14px rgba(0, 0, 0, 0.12);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
[data-theme="dark"] .masthead:has(#bg-photo-layer.loaded) .wordmark-mark {
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.32),
    0 5px 16px rgba(0, 0, 0, 0.18);
}
.masthead:has(#bg-photo-layer.loaded) .wordmark-brand {
  -webkit-text-stroke: 0;
  text-decoration: none;
  box-shadow: none;
  border: 0;
  outline: none;
}
/* Slogan : soft glass — 2 lignes sous 1280 ; une ligne dès 1280. */
.masthead:has(#bg-photo-layer.loaded) .wordmark-full {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
  /* Assez large pour « … DU QUÉBEC, » en nowrap + letter-spacing */
  max-width: min(94vw, 36rem);
  width: max-content;
  margin-top: 0.35rem;
  padding: 0.42rem 1.15rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 14, 18, 0.48);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.97);
  -webkit-text-stroke: 0;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.45);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  white-space: normal;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
}
.masthead:has(#bg-photo-layer.loaded) .wordmark-full__lead {
  display: block;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
}
.masthead:has(#bg-photo-layer.loaded) .wordmark-full__tag {
  display: block;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
  letter-spacing: 0.14em;
}
@media (min-width: 1280px) {
  .masthead:has(#bg-photo-layer.loaded) .wordmark-full {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.35em;
    max-width: none;
    width: max-content;
    white-space: nowrap;
  }
  .masthead:has(#bg-photo-layer.loaded) .wordmark-full__lead,
  .masthead:has(#bg-photo-layer.loaded) .wordmark-full__tag {
    display: inline;
    white-space: nowrap;
    max-width: none;
  }
}
[data-theme="dark"] .masthead:has(#bg-photo-layer.loaded) .wordmark-full {
  background: rgba(8, 10, 14, 0.52);
  color: rgba(255, 255, 255, 0.97);
}
/* Clair : même verre ardoise que les cartes météo / date en light. */
[data-theme="light"] .masthead:has(#bg-photo-layer.loaded) .wordmark-full {
  background:
    linear-gradient(90deg, rgba(200, 180, 120, 0.16) 0%, transparent 55%),
    rgba(54, 59, 68, 0.68);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 3px 10px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px) saturate(1.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
}
.masthead:has(#bg-photo-layer.loaded) .wordmark-logo {
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28))
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.14));
}
[data-theme="dark"] .masthead:has(#bg-photo-layer.loaded) .wordmark-logo {
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.48))
    drop-shadow(0 3px 10px rgba(0, 0, 0, 0.26));
}
/* Crédit photo : soft glass plus compact que date/slogan (légende discrète) */
.masthead:has(#bg-photo-layer.loaded) .bg-photo-credit {
  padding: 0.12rem 0.38rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 14, 18, 0.45);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  width: max-content;
  max-width: min(70vw, 14rem);
  font-size: 8px;
  letter-spacing: 0.01em;
}
.masthead:has(#bg-photo-layer.loaded) .bg-photo-credit__short {
  gap: 0.28em;
}
.masthead:has(#bg-photo-layer.loaded) .bg-photo-credit__copyleft,
.masthead:has(#bg-photo-layer.loaded) .bg-photo-credit__copyright {
  font-size: 0.88em;
  opacity: 0.78;
}
[data-theme="dark"] .masthead:has(#bg-photo-layer.loaded) .bg-photo-credit {
  background: rgba(8, 10, 14, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .masthead:has(#bg-photo-layer) .masthead-date {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(22, 24, 30, 0.92);
  }
  .masthead:has(#bg-photo-layer.loaded) .wordmark-full,
  .masthead:has(#bg-photo-layer.loaded) .bg-photo-credit {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12, 14, 18, 0.72);
  }
  [data-theme="light"] .masthead:has(#bg-photo-layer.loaded) .wordmark-full {
    background: rgba(54, 59, 68, 0.88);
  }
}

/*
 * Puces météo sur photo — toujours sombres, comme les boutons du mât.
 * Elles ne suivent pas le thème clair afin de conserver un contraste stable
 * sur chaque photo de fond.
 *
 * Couleurs en hex/rgba fixes : ne pas s’appuyer sur var(--ink) seul, car le
 * mât photo peut hériter d’un blanc de wordmark.
 */
.masthead:has(#bg-photo-layer.loaded) .masthead-weather {
  color: rgba(236, 238, 242, 0.92);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.masthead:has(#bg-photo-layer.loaded) .masthead-weather__city {
  color: rgba(236, 238, 242, 0.92);
  -webkit-text-stroke: 0;
  text-shadow: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--weather-tone, #c8102e) 22%, transparent) 0%, transparent 55%),
    rgba(22, 24, 30, 0.82);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 3px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.masthead:has(#bg-photo-layer.loaded) .masthead-weather__city:hover {
  border-color: color-mix(in srgb, var(--weather-tone, #c8102e) 55%, rgba(255, 255, 255, 0.22));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--weather-tone, #c8102e) 28%, transparent) 0%, transparent 55%),
    rgba(32, 35, 44, 0.9);
}
.masthead:has(#bg-photo-layer.loaded) .masthead-weather__name,
.masthead:has(#bg-photo-layer.loaded) .masthead-weather__name-text,
.masthead:has(#bg-photo-layer.loaded) .masthead-weather__name-full,
.masthead:has(#bg-photo-layer.loaded) .masthead-weather__name-compact {
  color: rgba(245, 246, 248, 0.96);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.masthead:has(#bg-photo-layer.loaded) .masthead-weather__temp {
  color: #ffffff;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.masthead:has(#bg-photo-layer.loaded) .masthead-weather__icon {
  filter: brightness(1.12) saturate(1.05);
  opacity: 1;
}

/* Clair : même famille ardoise que les boutons, mais un verre plus léger. */
[data-theme="light"] .masthead:has(#bg-photo-layer.loaded) .masthead-weather__city {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--weather-tone, #c8102e) 16%, transparent) 0%, transparent 55%),
    rgba(54, 59, 68, 0.68);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 3px 10px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px) saturate(1.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
}
[data-theme="light"] .masthead:has(#bg-photo-layer.loaded) .masthead-weather__city:hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--weather-tone, #c8102e) 23%, transparent) 0%, transparent 55%),
    rgba(67, 73, 84, 0.78);
}

/* Sans photo de mât, le thème clair conserve les cartes ardoise récentes
   plutôt que l'ancien panneau pâle. Elles restent ainsi cohérentes avec la
   variante claire sur photo. */
:root:not([data-theme="dark"]) .masthead:not(:has(#bg-photo-layer.loaded)) .masthead-weather__city {
  color: rgba(236, 238, 242, 0.92);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--weather-tone, #c8102e) 16%, transparent) 0%, transparent 55%),
    rgba(54, 59, 68, 0.68);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 3px 10px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px) saturate(1.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
}
:root:not([data-theme="dark"]) .masthead:not(:has(#bg-photo-layer.loaded)) .masthead-weather__name,
:root:not([data-theme="dark"]) .masthead:not(:has(#bg-photo-layer.loaded)) .masthead-weather__name-text,
:root:not([data-theme="dark"]) .masthead:not(:has(#bg-photo-layer.loaded)) .masthead-weather__name-full,
:root:not([data-theme="dark"]) .masthead:not(:has(#bg-photo-layer.loaded)) .masthead-weather__name-compact,
:root:not([data-theme="dark"]) .masthead:not(:has(#bg-photo-layer.loaded)) .masthead-weather__temp {
  color: rgba(245, 246, 248, 0.96);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
:root:not([data-theme="dark"]) .masthead:not(:has(#bg-photo-layer.loaded)) .masthead-weather__icon {
  filter: brightness(1.12) saturate(1.05);
}

/* Plus de filet sous date / météo / boutons — la photo continue sans trait. */
.masthead:has(#bg-photo-layer.loaded) .masthead-top {
  border-bottom: none;
}

/* Boutons ronds : verre dépoli, bordure et ombre douces. */
.masthead:has(#bg-photo-layer.loaded) .masthead-icon {
  /* Pastille sombre stable : les pictogrammes ne disparaissent pas dans une
     photo claire, blanche ou très détaillée. */
  color: #f7fbff;
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(9, 14, 21, 0.62);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.3),
    0 5px 14px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  filter: none;
  transition:
    border-color 200ms ease,
    background 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease,
    transform 140ms ease;
}
.masthead:has(#bg-photo-layer.loaded) .masthead-icon svg {
  stroke-width: 2.15;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.52));
}
.masthead:has(#bg-photo-layer.loaded) .masthead-rss { color: #ffad70; }
.masthead:has(#bg-photo-layer.loaded) .masthead-coffee { color: #ffe08a; }
.masthead:has(#bg-photo-layer.loaded) .masthead-pomo { border-color: rgba(255, 106, 106, 0.68); }
.masthead:has(#bg-photo-layer.loaded) .masthead-solitaire { border-color: rgba(255, 154, 154, 0.56); }
.theme-toggle .ico-sun { color: #f7c948; }
.theme-toggle .ico-moon { color: #9bd7ff; }
.masthead:has(#bg-photo-layer.loaded) .theme-toggle:has(.ico-sun:not(.hidden)) {
  border-color: rgba(247, 201, 72, 0.74);
  background: rgba(89, 61, 7, 0.52);
}
.masthead:has(#bg-photo-layer.loaded) .theme-toggle:has(.ico-moon:not(.hidden)) {
  border-color: rgba(155, 215, 255, 0.72);
  background: rgba(15, 61, 92, 0.54);
}
/*
 * Accueil sur photo : même verre sombre que RSS / pomo au repos.
 * Le pourpre de marque n’apparaît qu’au pressé (:active), pas en
 * « page courante » permanente.
 */
.masthead:has(#bg-photo-layer.loaded) .masthead-home:active {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 55%),
    color-mix(in srgb, #6c2163 58%, rgba(9, 14, 21, 0.5));
  border-color: color-mix(in srgb, #cf7ec1 48%, rgba(255, 255, 255, 0.28));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, #6c2163 32%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.masthead:has(#bg-photo-layer.loaded) .masthead-rss[aria-current="page"] {
  color: #ffd4a8;
  background: color-mix(in srgb, #c45a12 42%, rgba(9, 14, 21, 0.55));
  border-color: rgba(255, 173, 112, 0.62);
}
.masthead:has(#bg-photo-layer.loaded) .masthead-sports[aria-current="page"] {
  color: #ffe08a;
  background: color-mix(in srgb, #8a6a10 40%, rgba(9, 14, 21, 0.55));
  border-color: rgba(255, 224, 138, 0.55);
}

/* Survols sur photo : verre clair. Accueil n’a plus de pastille mauve
   persistante — le hover est le même que RSS / solitaire. */
@media (hover: hover) and (pointer: fine) {
  .masthead:has(#bg-photo-layer.loaded) .theme-toggle:hover,
  .masthead:has(#bg-photo-layer.loaded) .masthead-home:hover,
  .masthead:has(#bg-photo-layer.loaded) .masthead-rss:hover:not([aria-current="page"]),
  .masthead:has(#bg-photo-layer.loaded) .masthead-solitaire:hover,
  .masthead:has(#bg-photo-layer.loaded) .masthead-coffee:hover,
  .masthead:has(#bg-photo-layer.loaded) .masthead-sports:hover:not([aria-current="page"]) {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.18);
    box-shadow:
      0 2px 10px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
  .masthead:has(#bg-photo-layer.loaded) .masthead-pomo:hover {
    color: #fff;
    border-color: rgba(255, 140, 130, 0.5);
    background: rgba(200, 16, 46, 0.28);
    box-shadow:
      0 2px 10px rgba(200, 16, 46, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}

/* Jointure mât → synthé (pas de filet clair). */
.masthead:has(#bg-photo-layer.loaded) { border-bottom-color: var(--tuner-bg); }

/* Conteneurs principaux : jamais plus larges que le viewport */
.masthead,
.masthead-inner,
.tuner,
.tuner-inner,
.wire,
.filters-panel,
.news-list,
.news-hero,
.brief-rail,
.news-tail {
  max-width: 100%;
  min-width: 0;
}
.masthead,
.tuner,
.wire {
  overflow-x: clip;
}

/*
 * Scripts RTL (arabe, farsi, hébreu, ourdou) :
 * le shell UI reste LTR (pas de dir=rtl sur <html>), seul le contenu
 * éditorial lit de droite à gauche — évite le basculement du tuner/filtres.
 */
html[data-script-dir="rtl"] .wire-title,
html[data-script-dir="rtl"] .wire-status,
html[data-script-dir="rtl"] .news-updated,
html[data-script-dir="rtl"] .article-title,
html[data-script-dir="rtl"] .article-brief,
html[data-script-dir="rtl"] .article-byline,
html[data-script-dir="rtl"] .article-eyebrow,
html[data-script-dir="rtl"] .article-time,
html[data-script-dir="rtl"] .article-meta,
html[data-script-dir="rtl"] .filters-toggle__label,
html[data-script-dir="rtl"] .filters-compact__text {
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: start;
}

/* Slogan sous le wordmark : RTL pour la lecture, mais toujours centré
   (text-align:start le collait à droite en arabe / farsi / hébreu). */
html[data-script-dir="rtl"] .wordmark-full {
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: center;
}

html[data-script-dir="rtl"] .wordmark-mark {
  /* Titre de marque centré ; bidi naturel pour le texte traduit */
  unicode-bidi: plaintext;
  text-align: center;
}

/* Filet si un ancien cache a encore dir=rtl sur <html> */
html[dir="rtl"] {
  direction: ltr; /* force le chrome en LTR */
}
html[dir="rtl"] body {
  overflow-x: clip;
}

a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }

/* ─────────────── MASTHEAD ─────────────── */
/* Le synthétiseur suit directement le mât : aucun filet intermédiaire. Cela
   évite une couture sombre dans les shells qui intègrent le lecteur natif. */
.masthead { border-bottom: 0; }

.masthead-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--pad) 16px;
}

.masthead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px;
  /* Filet retiré : rangée date/météo/actions sans trait (photo et hors photo). */
  border-bottom: none;
}

.masthead-date {
  position: relative;
  font-weight: 600;
}
.masthead-time {
  position: absolute;
  top: 2em;
  left: 0;
  display: block;
  font-family: inherit;
  font-weight: inherit;
  font-size: 0.82em;
  letter-spacing: inherit;
  line-height: 1;
  text-transform: inherit;
  white-space: nowrap;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

/* Météo — tableau de gare : plusieurs villes côte à côte. La rangée s'adapte
   à l'espace et les noms longs défilent dans leur propre case. */
.masthead-weather {
  display: none;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  margin: 0;
  color: var(--ink-soft);
  white-space: nowrap;
  /* clip (pas hidden) : coupe un débordement horizontal sans forcer
     overflow-y:auto — les anims leave/arrive translateY restent visibles. */
  overflow-x: clip;
}
.masthead-weather.is-too-narrow:not(.masthead-weather--docked) { display: none !important; }
.masthead-weather__board {
  position: relative;
  display: grid;
  grid-template-columns: var(--weather-grid, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  height: 29px;
  /* Laisser voir translateY des anims leave/arrive (sinon clip parent). */
  overflow: visible;
}
/* Carte 0 = ancre spéciale MTL/QC (colonne un cran plus large). Secondaires à droite. */
.masthead-weather__board[data-weather-count="1"] { --weather-grid: minmax(0, 1fr); }
.masthead-weather__board[data-weather-count="2"] { --weather-grid: minmax(120px, 1fr) minmax(88px, 1fr); }
.masthead-weather__board[data-weather-count="3"] { --weather-grid: minmax(120px, .95fr) repeat(2, minmax(88px, 1fr)); }
.masthead-weather__board[data-weather-count="4"] { --weather-grid: minmax(118px, .9fr) repeat(3, minmax(80px, 1fr)); }
/* Jumeau : regroupement DOM seulement — les cartes restent des items du board. */
.masthead-weather__twin { display: contents; }
.masthead-weather__board[data-weather-count="3"] { --weather-sec: 1; }
.masthead-weather__board[data-weather-count="4"] { --weather-sec: 2; }
.masthead-weather__board[data-weather-count="5"] { --weather-sec: 3; }
.masthead-weather__board[data-weather-count="6"] { --weather-sec: 4; }
.masthead-weather__board[data-weather-count="7"] { --weather-sec: 5; }
.masthead-weather__board[data-weather-count="8"] { --weather-sec: 6; }
.masthead-weather__board[data-weather-count="9"] { --weather-sec: 7; }
.masthead-weather__board[data-weather-count="10"] { --weather-sec: 8; }
.masthead-weather__board[data-weather-count="11"] { --weather-sec: 9; }
.masthead-weather__board[data-weather-count="12"] { --weather-sec: 10; }
/*
 * ≥1440 dual : une rangée. MTL + QC = max-content. Le reliquat va aux
 * secondaires en 1fr (pas un trou à droite du board). Le nom reste
 * flex-grow 0 : Chromium ne pousse plus °C au bout de la tuile.
 */
@media (min-width: 1440px) {
  .masthead-weather__board[data-weather-dual-primary] {
    display: grid;
    width: 100%;
    max-width: 100%;
    height: 29px;
    grid-template-rows: 29px;
    grid-template-columns: max-content max-content repeat(var(--weather-sec, 2), minmax(0, 1fr));
    overflow: hidden;
  }
}
.masthead-weather__city {
  display: none;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.03em;
  overflow: hidden;
  /* Lavis + bordure suivent la condition (sun/rain/…) via --weather-tone,
   * pas seulement l’accent de marque — parité cartes sports / mât photo. */
  border: 1px solid color-mix(in srgb, var(--weather-tone, var(--accent)) 28%, var(--rule));
  border-radius: 5px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--weather-tone, var(--accent)) 22%, transparent) 0%, transparent 55%),
    color-mix(in srgb, var(--bg-soft) 88%, var(--weather-tone, var(--accent)) 12%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg) 72%, transparent);
  cursor: pointer;
  text-decoration: none;
  /* Couleurs explicites : ne jamais hériter d’un blanc photo du mât. */
  color: var(--ink-soft);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.masthead-weather__city.is-active { display: flex; }
/* Rotation gare : sortie puis entrée (synchro WEATHER_LEAVE_MS / ARRIVE_MS). */
.masthead-weather__city.is-leaving {
  display: flex;
  animation: weather-tile-leave 280ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
.masthead-weather__city.is-arriving {
  animation: weather-tile-arrive 460ms cubic-bezier(0.22, 0.8, 0.28, 1) both;
}
.masthead-weather__city:hover { border-color: color-mix(in srgb, var(--weather-tone, var(--accent)) 68%, var(--rule)); background-color: color-mix(in srgb, var(--bg-soft) 76%, var(--weather-tone, var(--accent)) 24%); }
.masthead-weather__icon { flex: 0 0 15px; width: 15px; color: var(--weather-tone, var(--accent)); line-height: 1; text-align: center; }
.masthead-weather__icon .weather-icon-meteocon { display: block; width: 15px; height: 15px; object-fit: contain; }
.masthead-weather__icon svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.masthead-weather__icon svg.weather-icon--night { fill: currentColor !important; stroke: none !important; opacity: 1; }
/* Nom : ne pas s’étirer (évite le grand vide avant la température). */
.masthead-weather__name {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  /* Respiration : le letter-spacing de la tuile ajoute un chasse après la
     dernière glyphe ; sans ce pixel le « L » de MONTRÉAL touche le rognage. */
  padding-inline-end: 1px;
  color: var(--ink);
  line-height: 1.15;
}
.masthead-weather__name-text {
  display: inline-block;
  /* Au repos / sans marquee : borne au viewport (clip). En overflow JS lève
   * max-width pour mesurer puis anime (sinon scrollWidth == clientWidth). */
  max-width: 100%;
  white-space: nowrap;
  color: inherit;
  vertical-align: middle;
}
.masthead-weather__name-full,
.masthead-weather__name-compact {
  color: inherit;
}
.masthead-weather__name-compact { display: none; }
/*
 * Marquee météo : max-width none obligatoire (sinon le texte ne dépasse pas
 * et l’animation est invisible — bug « SAINT-IGNACE-D » figé).
 * Pause lecture ~0.8 s (plus court que sports 1.6 s : un seul toponyme).
 * 1 aller-retour (2 × alternate), pas infinite.
 */
.masthead-weather__city.is-overflowing .masthead-weather__name-text {
  max-width: none;
  animation: weather-name-scroll 5.5s ease-in-out 0.8s var(--weather-scroll-trips, 2) alternate both;
}
@keyframes weather-name-scroll {
  /* Hold à l’origine au départ et au retour, puis pause JS avant de changer. */
  0%, 22% { transform: translateX(0); }
  78%, 100% { transform: translateX(calc(var(--weather-scroll, 0) * -1)); }
}
.masthead-weather__temp {
  flex: 0 0 auto;
  margin-left: 2px;
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.masthead-weather__city[data-weather-tone="sun"] { --weather-tone: #d88a0a; }
.masthead-weather__city[data-weather-tone="cloud"] { --weather-tone: #66839e; }
.masthead-weather__city[data-weather-tone="rain"] { --weather-tone: #287bb9; }
.masthead-weather__city[data-weather-tone="snow"] { --weather-tone: #5498bb; }
.masthead-weather__city[data-weather-tone="storm"] { --weather-tone: #a86dce; }
@media (min-width: 360px) {
  .masthead-top {
    display: grid;
    grid-template-areas: 'date weather actions';
    /* La date se BORNE au lieu de pousser. En `max-content` elle était
       intouchable : « Thursday, August 6, 2026 » réclamait 195 px, et comme la
       colonne météo était en minmax(0, 1fr) c'est elle qui absorbait toute la
       compression — ruban écrasé à 43 px, nom rogné à clientWidth 0. En
       `minmax(0, max-content)` la date peut rétrécir, et le plancher porté par
       .masthead-weather (voir plus bas) garantit qu'elle rétrécit d'abord.
       Le format se replie alors via MASTHEAD_DATE_FORMATS (app.js). */
    grid-template-columns: minmax(0, max-content) 1fr max-content;
    column-gap: clamp(4px, .6vw, 10px);
  }
  /* `stretch` + min-width: 0 : la COLONNE dimensionne la case, pas le contenu.
     Sans ça, scrollWidth == clientWidth et la cascade de formats ne part
     jamais — exactement le piège déjà documenté pour le volet mobile. */
  .masthead-date { grid-area: date; justify-self: stretch; min-width: 0; }
  /* Photo : chip date = max-content (voir .masthead:has(...).masthead-date). */
  .masthead:has(#bg-photo-layer) .masthead-date {
    justify-self: start;
    min-width: 0;
  }
  .masthead-date #today-date {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Plancher porté par l'élément, pas par la piste : sur les pages sans ruban
     (fiches, annuaire) la case est vide et n'impose rien, donc la date y garde
     toute sa longueur. Quand le ruban se retire lui-même (.is-too-narrow), le
     plancher disparaît avec lui et la date se redéploie. */
  .masthead-weather { display: inline-flex; grid-area: weather; width: 100%; justify-self: stretch; min-width: 104px; max-width: 100%; overflow-x: clip; }
  .masthead-actions { grid-area: actions; justify-self: end; }
  /* Météo absente du mât (dockée) : pas de colonne weather vide. */
  .masthead-top:not(:has(#masthead-weather)) {
    grid-template-areas: 'date actions';
    grid-template-columns: minmax(0, 1fr) max-content;
  }
}
/* Bureau : le ruban occupe la colonne 1fr. `width: auto` shrink-wrapait
   les cartes, MONTRÉAL débordait, et le fit tombait à 2 villes. */
@media (min-width: 1024px) {
  .masthead-weather {
    justify-content: stretch;
  }
  .masthead-weather__board {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 359.98px) { .masthead-weather:not(.masthead-weather--docked) { display: none !important; } }
.masthead-weather__city.is-compact .masthead-weather__name-full { display: none; }
.masthead-weather__city.is-compact .masthead-weather__name-compact { display: inline; }

/* Repli mobile : la météo dockée sous le syntoniseur garde la carte du
   bureau, juste dans un conteneur pleine largeur plutôt qu'une cellule de
   grille du masthead. */
.masthead-weather-dock { display: none; }
.masthead-weather-dock:not(:empty) {
  display: block;
  max-width: var(--maxw);
  margin: 0 auto;
  /* Même rythme vertical que le bandeau sports (8 px). */
  padding: 8px var(--pad) 0;
}
.masthead-weather--docked {
  /* flex (pas inline-flex) : board 100 % de la gouttière, multi-cartes visibles. */
  display: flex !important;
  width: 100%;
  max-width: 100%;
  justify-content: stretch;
  box-sizing: border-box;
}
.masthead-weather--docked .masthead-weather__board {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}
/*
 * ≤1023.98 px : météo hors .masthead (#masthead-weather-dock) — tablette 768/900
 * comme mobile 390/430. Les styles « photo mât » ne matchent plus → rejouer
 * le verre ardoise + --weather-tone (parité bureau photo et puces sports).
 */
.masthead-weather--docked .masthead-weather__city {
  color: rgba(236, 238, 242, 0.92);
  -webkit-text-stroke: 0;
  text-shadow: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--weather-tone, #c8102e) 28%, transparent) 0%, transparent 55%),
    rgba(42, 46, 54, 0.92);
  border-color: color-mix(in srgb, var(--weather-tone, var(--accent)) 42%, rgba(255, 255, 255, 0.16));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.masthead-weather--docked .masthead-weather__city:hover {
  border-color: color-mix(in srgb, var(--weather-tone, var(--accent)) 62%, rgba(255, 255, 255, 0.22));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--weather-tone, #c8102e) 36%, transparent) 0%, transparent 55%),
    rgba(48, 52, 62, 0.96);
  background-color: transparent;
}
.masthead-weather--docked .masthead-weather__name,
.masthead-weather--docked .masthead-weather__name-text,
.masthead-weather--docked .masthead-weather__name-full,
.masthead-weather--docked .masthead-weather__name-compact {
  color: rgba(245, 246, 248, 0.96);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.masthead-weather--docked .masthead-weather__temp {
  color: #ffffff;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.masthead-weather--docked .masthead-weather__icon {
  filter: brightness(1.12) saturate(1.05);
  opacity: 1;
}
@keyframes weather-tile-leave {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-55%); }
}
@keyframes weather-tile-arrive {
  from { opacity: 0; transform: translateY(70%); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .masthead-weather__city.is-overflowing .masthead-weather__name-text { animation: none; }
  .masthead-weather__city.is-arriving,
  .masthead-weather__city.is-leaving {
    animation: none;
  }
}