/*
 * Composants Signals — ONEMEDIA.
 *
 * Identité : papier, encre, rouge ONEMEDIA. Les couleurs de signal disent un
 * ÉTAT DE DONNÉE, jamais une décoration : elles ne portent jamais seules
 * l'information, un mot l'accompagne toujours.
 */

.om-sig,
.om-ticker,
.om-live,
.om-closing,
.om-related-signals,
.context-panel--signals,
.om-sig-home,
.om-sig-context,
.om-sig-strip,
.om-sig-pulse,
.om-sig-alert,
.om-sig-card,
.om-sig-weather,
.om-wx,
.om-sig-atlas {
  --sig-up: oklch(46% 0.13 152);
  --sig-down: var(--red-deep, oklch(41% 0.19 27));
  --sig-watch: oklch(52% 0.14 65);
  --sig-critical: var(--red, oklch(49% 0.22 27));
  --sig-quiet: var(--muted, oklch(46% 0.012 24));
  --sig-rule: var(--rule, oklch(84% 0.01 24));
}

html[data-theme="dark"] .om-ticker,
html[data-theme="dark"] .om-live,
html[data-theme="dark"] .om-closing,
html[data-theme="dark"] .om-related-signals,
html[data-theme="dark"] .context-panel--signals,
html[data-theme="dark"] .om-sig-home,
html[data-theme="dark"] .om-sig-context,
html[data-theme="dark"] .om-sig-strip,
html[data-theme="dark"] .om-sig-pulse,
html[data-theme="dark"] .om-sig-alert,
html[data-theme="dark"] .om-sig-card,
html[data-theme="dark"] .om-sig-weather,
html[data-theme="dark"] .om-wx,
html[data-theme="dark"] .om-sig-atlas {
  --sig-up: oklch(72% 0.15 152);
  --sig-down: oklch(68% 0.17 27);
  --sig-watch: oklch(75% 0.14 70);
}

/* --- Étiquettes d'état --------------------------------------------------- */

.om-sig-badge {
  border: 1px solid currentColor;
  font-size: .6rem;
  font-weight: 720;
  letter-spacing: .07em;
  padding: .1rem .35rem;
  text-transform: uppercase;
}

.om-sig-badge--signal { color: var(--sig-quiet); }
.om-sig-badge--alert { color: var(--sig-critical); }
.om-sig-badge--data { color: var(--sig-quiet); }

/* --- Fraîcheur ----------------------------------------------------------- */

.om-sig-fresh {
  color: var(--sig-quiet);
  display: flex;
  flex-wrap: wrap;
  font-size: .72rem;
  gap: .3rem .5rem;
  margin: .4rem 0 0;
}

.om-sig-fresh__source { font-weight: 620; }
.om-sig-fresh__label::after { content: " ·"; }
.om-sig-fresh.is-stale .om-sig-fresh__stale { color: var(--sig-watch); font-weight: 620; }

/* --- Sources ------------------------------------------------------------- */

.om-sig-sources {
  color: var(--sig-quiet);
  font-size: .66rem;
  margin: .6rem 0 0;
  opacity: .85;
}

.om-sig-sources > * + *::before { content: " · "; }
.om-sig-sources a { color: inherit; text-decoration-color: var(--sig-rule); }

/* --- Pouls --------------------------------------------------------------- */

.om-sig-pulse__title {
  color: var(--sig-quiet);
  font-size: .66rem;
  font-weight: 720;
  letter-spacing: .08em;
  margin: 0 0 .6rem;
  text-transform: uppercase;
}

.om-sig-pulse__list { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; }

.om-sig-pulse__list li {
  align-items: baseline;
  display: flex;
  font-size: .8rem;
  gap: .45rem;
  line-height: 1.25;
}

.om-sig-pulse__list strong {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  min-inline-size: 1.6ch;
}

.om-sig-pulse__list li[data-kind="alerts"] strong { color: var(--sig-critical); }
.om-sig-pulse__meta { color: var(--sig-quiet); font-size: .68rem; margin: .6rem 0 0; }

.om-sig-pulse__link {
  display: inline-block;
  font-size: .72rem;
  font-weight: 620;
  letter-spacing: .04em;
  margin-block-start: .7rem;
  text-transform: uppercase;
}

/* --- Valeur chiffrée ----------------------------------------------------- */

.om-sig-quote { min-inline-size: 0; }

.om-sig-quote__head {
  align-items: start;
  color: var(--sig-quiet);
  display: flex;
  font-size: .68rem;
  font-weight: 720;
  gap: .5rem;
  justify-content: space-between;
  letter-spacing: .05em;
  margin: 0;
  text-transform: uppercase;
}

.om-sig-quote__name { max-inline-size: 16ch; }
.om-sig-quote__delta { flex: none; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.om-sig-quote[data-direction="up"] .om-sig-quote__delta { color: var(--sig-up); }
.om-sig-quote[data-direction="down"] .om-sig-quote__delta { color: var(--sig-down); }
.om-sig-quote[data-direction="flat"] .om-sig-quote__delta { color: var(--sig-quiet); }

.om-sig-quote__value {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem);
  line-height: 1.15;
  margin: .35rem 0 0;
}

.om-sig-quote__unit {
  color: var(--sig-quiet);
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .66rem;
  font-weight: 720;
  letter-spacing: .04em;
  margin-inline-start: .35em;
  vertical-align: .3em;
}

/* Période observée : la datation d'une série annuelle, à ne pas confondre avec
   la ligne de fraîcheur qui, elle, date la collecte. */
.om-sig-quote__period {
  color: var(--sig-quiet);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  margin: .2rem 0 0;
}

/* Détails d'une observation : séance boursière ou composition d'un mix. Chaque
   entrée est une paire libellé / valeur, alignée sur la grille de la carte. */
.om-sig-quote__details {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .9rem;
  margin: .45rem 0 0;
}

.om-sig-quote__details > div {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  min-inline-size: 0;
}

.om-sig-quote__details dt {
  color: var(--sig-quiet);
  font-size: .62rem;
  font-weight: 720;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.om-sig-quote__details dd {
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.om-rail-values__period {
  color: var(--sig-quiet);
  font-size: .72rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.om-sig-spark { block-size: 1.6rem; inline-size: 100%; margin-block-start: .2rem; overflow: visible; }
.om-sig-spark polyline { stroke: var(--sig-quiet); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.om-sig-spark--up polyline { stroke: var(--sig-up); }
.om-sig-spark--down polyline { stroke: var(--sig-down); }

/* --- Bandeau horizontal -------------------------------------------------- */

.om-sig-strip__title {
  color: var(--sig-quiet);
  font-size: .66rem;
  font-weight: 720;
  letter-spacing: .08em;
  margin: 0 0 .9rem;
  text-transform: uppercase;
}

.om-sig-strip__items {
  display: grid;
  gap: 1.25rem clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
}

.om-sig-strip__items .om-sig-quote { border-inline-end: 1px solid var(--sig-rule); padding-inline-end: clamp(.75rem, 1.5vw, 1.25rem); }
.om-sig-strip__items .om-sig-quote:last-child { border-inline-end: 0; }

/* --- Carte de signal ----------------------------------------------------- */

.om-sig-card,
.om-sig-alert,
.om-sig-weather--card,
.om-sig-atlas { min-inline-size: 0; }

.om-sig-card__kicker,
.om-sig-alert__kicker {
  align-items: center;
  color: var(--sig-quiet);
  display: flex;
  flex-wrap: wrap;
  font-size: .68rem;
  font-weight: 720;
  gap: .5rem;
  letter-spacing: .06em;
  margin: 0 0 .7rem;
  text-transform: uppercase;
}

.om-sig-card__title,
.om-sig-alert__title {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem);
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}

.om-sig-card__summary,
.om-sig-alert__summary { color: var(--ink-2, #22252b); font-size: .9rem; margin: .55rem 0 0; max-inline-size: 60ch; }

.om-sig-card__measures,
.om-sig-alert__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: .8rem 0 0;
}

.om-sig-card__measures div,
.om-sig-alert__facts div { display: grid; gap: .15rem; }

.om-sig-card__measures dt,
.om-sig-alert__facts dt {
  color: var(--sig-quiet);
  font-size: .62rem;
  font-weight: 720;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.om-sig-card__measures dd,
.om-sig-alert__facts dd { font-size: .9rem; font-variant-numeric: tabular-nums; margin: 0; }

.om-sig-card__state { color: var(--sig-quiet); font-size: .72rem; margin: .6rem 0 0; }
.om-sig-alert[data-band="high"] .om-sig-alert__kicker,
.om-sig-alert[data-band="critical"] .om-sig-alert__kicker { color: var(--sig-critical); }

/* --- Ligne de signal ----------------------------------------------------- */

.om-sig-context__list { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }

.om-sig-row { border-block-start: 1px solid var(--sig-rule); padding-block-start: .8rem; }
.om-sig-row:first-child { border-block-start: 0; padding-block-start: 0; }

.om-sig-row__kicker {
  align-items: center;
  color: var(--sig-quiet);
  display: flex;
  flex-wrap: wrap;
  font-size: .64rem;
  font-weight: 720;
  gap: .45rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.om-sig-row__title { font-size: .95rem; line-height: 1.35; margin: .35rem 0 0; text-wrap: pretty; }
.om-sig-row__machine { color: var(--sig-watch); font-size: .68rem; margin: .25rem 0 0; }
.om-sig-row[data-band="high"] .om-sig-row__kicker,
.om-sig-row[data-band="critical"] .om-sig-row__kicker { color: var(--sig-critical); }

/* --- Météo --------------------------------------------------------------- */

.om-sig-weather__place {
  color: var(--sig-quiet);
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: .06em;
  margin: 0;
  text-transform: uppercase;
}

.om-sig-weather__now { align-items: baseline; display: flex; flex-wrap: wrap; gap: .6rem; margin: .3rem 0 0; }

.om-sig-weather__temp {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.9rem);
  letter-spacing: -.02em;
  line-height: 1;
}

.om-sig-weather__condition { color: var(--ink-2, #22252b); font-size: .95rem; }
.om-sig-weather__range { color: var(--sig-quiet); font-size: .78rem; margin: .35rem 0 0; }

.om-sig-weather__hours { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: .8rem 0 0; padding: 0; }
.om-sig-weather__hours li { display: grid; gap: .15rem; }
.om-sig-weather__hours span { color: var(--sig-quiet); font-size: .66rem; font-variant-numeric: tabular-nums; }
.om-sig-weather__hours strong { font-size: .88rem; font-variant-numeric: tabular-nums; font-weight: 620; }

/* --- Atlas --------------------------------------------------------------- */

.om-sig-atlas__title,
.om-sig-context__title,
.om-sig-home__head .eyebrow {
  color: var(--sig-quiet);
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.om-sig-atlas__title { margin: 0 0 .7rem; }

.om-sig-atlas__legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; margin: 0 0 .9rem; padding: 0; }
.om-sig-atlas__legend li { align-items: center; color: var(--sig-quiet); display: flex; font-size: .72rem; gap: .35rem; }
.om-sig-atlas__legend strong { color: var(--ink, #14161a); font-variant-numeric: tabular-nums; }

.om-sig-atlas__dot { background: var(--sig-quiet); block-size: .5rem; border-radius: 50%; inline-size: .5rem; }
.om-sig-atlas__legend li[data-domain="hazards"] .om-sig-atlas__dot,
.om-sig-atlas__legend li[data-domain="earthquakes"] .om-sig-atlas__dot { background: var(--sig-critical); }
.om-sig-atlas__legend li[data-domain="geopolitics"] .om-sig-atlas__dot { background: var(--sig-watch); }

.om-sig-atlas__list { display: grid; gap: .7rem; list-style: none; margin: 0; padding: 0; }
.om-sig-atlas__event { font-size: .88rem; line-height: 1.3; margin: 0; }
.om-sig-atlas__meta { color: var(--sig-quiet); font-size: .7rem; margin: .15rem 0 0; }
.om-sig-atlas__link { display: inline-block; font-size: .72rem; font-weight: 620; letter-spacing: .04em; margin-block-start: .9rem; text-transform: uppercase; }

/* --- Bloc contextuel ----------------------------------------------------- */

.om-sig-context__title { align-items: center; display: flex; gap: .5rem; margin: 0 0 1rem; }

.om-sig-context--rail { border-block: 1px solid var(--sig-rule); padding-block: clamp(1.25rem, 3vw, 2rem); }
.om-sig-context--block { border-block-start: 1px solid var(--sig-rule); margin-block-start: clamp(2rem, 4vw, 3rem); padding-block-start: clamp(1.25rem, 3vw, 2rem); }

.om-sig-context__quotes {
  display: grid;
  gap: 1.25rem clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  margin-block-start: 1.25rem;
}

.om-sig-context--block .om-sig-context__list { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.om-sig-context--block .om-sig-row { border-block-start: 0; border-inline-start: 1px solid var(--sig-rule); padding-block-start: 0; padding-inline-start: 1rem; }
.om-sig-context--block .om-sig-row:first-child { border-inline-start: 0; padding-inline-start: 0; }

/* --- Accueil ------------------------------------------------------------- */

.om-sig-home { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-column: 1 / -1; }
.om-sig-home__head h2 { font-family: var(--serif, Georgia, serif); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.08; margin: .5rem 0 0; max-inline-size: 22ch; }

.om-sig-home__pulse { border-block-start: 1px solid var(--sig-rule); padding-block-start: 1.25rem; }
.om-sig-home__markets { border-block-start: 1px solid var(--sig-rule); padding-block-start: 1.25rem; }

.om-sig-home__grid {
  border-block-start: 1px solid var(--sig-rule);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  padding-block-start: clamp(1.25rem, 3vw, 2rem);
}

.om-sig-home__feed { border-block-start: 1px solid var(--sig-rule); padding-block-start: clamp(1.25rem, 3vw, 2rem); }
.om-sig-home__feed .om-sig-context__list { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.om-sig-home__feed .om-sig-row { border-block-start: 0; border-inline-start: 1px solid var(--sig-rule); padding-block-start: 0; padding-inline-start: 1rem; }
.om-sig-home__feed .om-sig-row:first-child { border-inline-start: 0; padding-inline-start: 0; }

@media (max-width: 48rem) {
  .om-sig-strip__items .om-sig-quote { border-inline-end: 0; padding-inline-end: 0; }
  .om-sig-context--block .om-sig-row,
  .om-sig-home__feed .om-sig-row { border-inline-start: 0; padding-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .om-sig-home *, .om-sig-context * { transition: none !important; }
}


/* --- Panneau du rail d'article ------------------------------------------ */

.context-panel--signals .om-rail-list,
.context-panel--signals .om-rail-values { display: grid; gap: .85rem; list-style: none; margin: 0; padding: 0; }

.om-rail-list li { display: grid; gap: .2rem; }

.om-rail-list__kicker {
  color: var(--sig-quiet);
  font-size: .6rem;
  font-weight: 720;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.om-rail-list__title { font-size: .875rem; line-height: 1.3; text-wrap: pretty; }
.om-rail-list__meta { color: var(--sig-quiet); font-size: .7rem; }

.om-rail-values { border-block-start: 1px solid var(--sig-rule); margin-block-start: .9rem !important; padding-block-start: .9rem; }

.om-rail-values li {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  justify-content: space-between;
}

.om-rail-values span { color: var(--sig-quiet); font-size: .68rem; font-weight: 720; letter-spacing: .05em; text-transform: uppercase; }
.om-rail-values strong { font-family: var(--serif, Georgia, serif); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.om-rail-values small { color: var(--sig-quiet); font-family: var(--sans, system-ui, sans-serif); font-size: .62rem; font-weight: 720; }
.om-rail-values em { font-size: .72rem; font-style: normal; font-variant-numeric: tabular-nums; }
.om-rail-values li[data-direction="up"] em { color: var(--sig-up); }
.om-rail-values li[data-direction="down"] em { color: var(--sig-down); }
.om-rail-values li[data-direction="flat"] em { color: var(--sig-quiet); }

.context-panel--signals .om-sig-sources { margin-block-start: .9rem; }

/* La grille contextuelle des archives se remplit toujours : le nombre de
   colonnes suit le nombre d'éléments, jamais l'inverse. */
.om-sig-context--block .om-sig-context__list { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }

/* --- Bandeau de cotations, en tête de chaque page ------------------------ */

.om-ticker {
  --tick-up: oklch(42% .13 152);
  --tick-up-bg: oklch(95% .045 152);
  --tick-down: oklch(45% .18 27);
  --tick-down-bg: oklch(95% .04 27);
  background: var(--paper-soft, #f6f2f1);
  border-block-end: 1px solid var(--rule, #d8dade);
  overflow: hidden;
  position: relative;
  z-index: 3;
}

html[data-theme="dark"] .om-ticker {
  --tick-up: oklch(80% .16 152);
  --tick-up-bg: oklch(28% .06 152);
  --tick-down: oklch(76% .17 27);
  --tick-down-bg: oklch(28% .07 27);
}

.om-ticker__viewport { inline-size: 100%; overflow: hidden; }

.om-ticker__track {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  inline-size: max-content;
  animation: om-ticker-scroll 70s linear infinite;
}

.om-ticker:hover .om-ticker__track,
.om-ticker:focus-within .om-ticker__track { animation-play-state: paused; }

@keyframes om-ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.om-ticker__track li {
  align-items: baseline;
  border-inline-end: 1px solid var(--rule, #d8dade);
  display: flex;
  flex: 0 0 auto;
  gap: .5rem;
  padding: .5rem 1.1rem;
  white-space: nowrap;
}

.om-ticker__track li[data-direction="up"] { background: var(--tick-up-bg); }
.om-ticker__track li[data-direction="down"] { background: var(--tick-down-bg); }

.om-ticker__name {
  color: var(--ink-2, #22252b);
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.om-ticker__value { font-family: var(--serif, Georgia, serif); font-size: 1rem; font-variant-numeric: tabular-nums; }
.om-ticker__value small { color: var(--muted, #5d6470); font-family: var(--sans, system-ui, sans-serif); font-size: .58rem; font-weight: 720; }
.om-ticker__delta { font-size: .72rem; font-variant-numeric: tabular-nums; font-weight: 620; }
.om-ticker__track li[data-direction="up"] .om-ticker__delta { color: var(--tick-up); }
.om-ticker__track li[data-direction="down"] .om-ticker__delta { color: var(--tick-down); }
.om-ticker__track li[data-direction="flat"] .om-ticker__delta { color: var(--muted, #5d6470); }

@media (prefers-reduced-motion: reduce) {
  .om-ticker__track { animation: none; }
  .om-ticker__viewport { overflow-x: auto; }
}

/* --- Alerte et météo ----------------------------------------------------- */

.om-live,
.om-closing {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  padding: clamp(2rem, 4vw, 3rem) var(--page-pad, 1.5rem);
}

.om-live { border-block: 1px solid var(--rule, #d8dade); }

.om-live__alert,
.om-live__weather {
  border-radius: 2px;
  padding: clamp(1.1rem, 2vw, 1.6rem);
}

.om-live__alert { background: oklch(96.5% .028 27); }
.om-live__weather { background: oklch(96.5% .028 230); }

html[data-theme="dark"] .om-live__alert { background: oklch(24% .05 27); }
html[data-theme="dark"] .om-live__weather { background: oklch(24% .045 230); }

.om-live__title {
  color: var(--sig-quiet);
  font-size: .7rem;
  font-weight: 720;
  letter-spacing: .06em;
  margin: 0 0 .9rem;
  text-transform: uppercase;
}

.om-live__lead { align-items: baseline; display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin: 0; }
.om-live__lead-city { font-size: 1rem; font-weight: 620; }
.om-live__lead-temp { font-family: var(--serif, Georgia, serif); font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height: 1; }
.om-live__lead-sky { color: var(--ink-2, #22252b); font-size: .95rem; }

.om-live__hours {
  border-block-end: 1px solid var(--rule, #d8dade);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0 0 1rem;
}

.om-live__hours li { display: grid; gap: .1rem; }
.om-live__hours span { color: var(--sig-quiet); font-size: .68rem; font-variant-numeric: tabular-nums; }
.om-live__hours strong { font-size: .95rem; font-variant-numeric: tabular-nums; }

.om-live__cities { display: grid; gap: .55rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.om-live__cities li { align-items: baseline; display: flex; flex-wrap: wrap; gap: .35rem .7rem; }
.om-live__city { flex: 1 1 7rem; font-size: .9rem; }
.om-live__cities strong { font-family: var(--serif, Georgia, serif); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.om-live__cities em { color: var(--sig-quiet); font-size: .78rem; font-style: normal; }

.om-closing__grid {
  display: grid;
  gap: 1.25rem clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}

/* --- Signaux liés d'un article ------------------------------------------- */

.om-related-signals {
  border-block: 1px solid var(--rule, #d8dade);
  margin-block: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(1.5rem, 3vw, 2rem);
}

.om-related-signals__title {
  align-items: center;
  color: var(--sig-quiet);
  display: flex;
  font-size: .7rem;
  font-weight: 720;
  gap: .5rem;
  letter-spacing: .06em;
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}

.om-related-signals .om-sig-context__list { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.om-related-signals .om-sig-row { border-block-start: 0; border-inline-start: 1px solid var(--rule, #d8dade); padding-block-start: 0; padding-inline-start: 1rem; }
.om-related-signals .om-sig-row:first-child { border-inline-start: 0; padding-inline-start: 0; }

@media (max-width: 48rem) {
  .om-related-signals .om-sig-row { border-inline-start: 0; padding-inline-start: 0; }
}

/* --- Météo du lecteur ----------------------------------------------------
 *
 * Une donnée, trois formes. Le bandeau `panel` occupe la tête de page en
 * mobile — la lecture à bout de bras d'un téléphone. La puce `chip` prend une
 * ligne du mât en desktop, où le lecteur n'est pas venu pour la météo. La
 * carte `rail` complète le contexte d'un article lorsque son silo la justifie.
 *
 * Les deux premières sont rendues ensemble et départagées ici : le serveur
 * n'a qu'un modèle à lire, et la page reste juste script désactivé.
 */

.om-wx { --wx-glyph: var(--ink-2, #22252b); }

.om-wx svg { display: block; }
.om-wx__glyph { color: var(--wx-glyph, var(--ink-2, #22252b)); flex: none; }

.om-wx__place {
  color: var(--sig-quiet);
  font-size: .66rem;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.om-wx__temp { font-variant-numeric: tabular-nums; }

.om-wx__reading { display: grid; gap: .1rem; margin: 0; min-inline-size: 0; }

/* Les heures se lisent comme une colonne de journal : des filets, pas des
   cartes. Elles défilent latéralement plutôt que de se replier à 360 px. */
.om-wx__hours {
  border-block-start: 1px solid var(--sig-rule);
  display: flex;
  list-style: none;
  margin: .85rem 0 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.om-wx__hours li {
  border-inline-end: 1px solid var(--sig-rule);
  display: grid;
  flex: 1 0 auto;
  gap: .25rem;
  justify-items: center;
  padding: .7rem .6rem .15rem;
  scroll-snap-align: start;
}

.om-wx__hours li:last-child { border-inline-end: 0; }
.om-wx__hours strong { font-size: .84rem; font-variant-numeric: tabular-nums; font-weight: 640; }
.om-wx__hour { color: var(--sig-quiet); font-size: .64rem; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.om-wx__tick { block-size: 1.35rem; color: var(--wx-glyph, var(--ink-2, #22252b)); inline-size: 1.35rem; }

/* Bandeau de tête, mobile ------------------------------------------------- */

.om-wx--panel {
  background: var(--paper-soft, #f6f2f1);
  border-block-end: 1px solid var(--sig-rule);
  padding: .95rem var(--page-pad, 1.5rem) 1.05rem;
}

.om-wx--panel .om-wx__now {
  align-items: center;
  column-gap: .95rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  row-gap: .3rem;
}

.om-wx--panel .om-wx__glyph { block-size: 2.85rem; inline-size: 2.85rem; }

.om-wx--panel .om-wx__temp {
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.6rem);
  letter-spacing: -.02em;
  line-height: 1.02;
}

.om-wx--panel .om-wx__sky { color: var(--ink-2, #22252b); font-size: .85rem; }

.om-wx--panel .om-wx__range {
  align-self: end;
  color: var(--sig-quiet);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  margin: 0;
  text-align: end;
  text-wrap: balance;
}

.om-wx--panel .om-sig-fresh { margin-block-start: .65rem; }

/* Sous 26 rem, la colonne des extrêmes prend sur la condition et la coupe en
   deux lignes. Elle passe alors sous la lecture, alignée avec elle. */
@media (max-width: 26rem) {
  .om-wx--panel .om-wx__now { grid-template-columns: auto minmax(0, 1fr); }

  .om-wx--panel .om-wx__range {
    grid-column: 2;
    margin-block-start: .1rem;
    text-align: start;
  }
}

/* Puce du mât, desktop ---------------------------------------------------- */

.om-wx--chip {
  align-items: center;
  border: 1px solid var(--sig-rule);
  display: none;
  gap: .5rem;
  margin: 0;
  min-block-size: 2.75rem;
  padding-inline: .7rem;
}

.om-wx--chip .om-wx__glyph { block-size: 1.35rem; inline-size: 1.35rem; }
.om-wx--chip .om-wx__temp { font-size: .92rem; font-weight: 690; }

/* Le mât porte déjà l'édition, l'état et trois actions. La puce cède donc la
   première : sous contrainte, la ville s'abrège plutôt que de pousser les
   actions hors du cadre. Elle garde en revanche toute sa largeur tant qu'il y
   a de la place — la troncature est un dernier recours, pas une mise en page. */
.om-wx--chip .om-wx__place {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 60rem) {
  .om-wx--panel { display: none; }
  .om-wx--chip { display: inline-flex; flex: 0 1 auto; min-inline-size: 0; }
}

/* Carte du rail de lecture ------------------------------------------------ */

.om-wx--rail {
  border-block-end: 1px solid var(--sig-rule);
  margin-block-end: 1rem;
  padding-block-end: .9rem;
}

.om-wx--rail .om-wx__now {
  align-items: center;
  column-gap: .7rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}

.om-wx--rail .om-wx__glyph { block-size: 2.15rem; inline-size: 2.15rem; }

.om-wx--rail .om-wx__temp {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.45rem;
  line-height: 1.05;
}

.om-wx--rail .om-wx__sky { color: var(--sig-quiet); font-size: .76rem; }

.om-wx--rail .om-wx__range {
  color: var(--sig-quiet);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  grid-column: 1 / -1;
  margin: .5rem 0 0;
}

.om-wx--rail .om-wx__hours { margin-block-start: .7rem; }
.om-wx--rail .om-wx__hours li { padding-inline: .35rem; }
.om-wx--rail .om-sig-fresh { margin-block-start: .55rem; }

/* Le pictogramme rejoint les deux surfaces météo préexistantes. Elles alignent
   leur ligne sur la ligne de base : un SVG s'y centre, il ne s'y aligne pas. */
.om-sig-weather__now .om-wx__glyph { align-self: center; block-size: 2.4rem; inline-size: 2.4rem; }
.om-live__lead .om-wx__glyph { align-self: center; block-size: 2.6rem; inline-size: 2.6rem; }