.mto-env-page {
  --mto-env-encre: #102a43;
  --mto-env-texte-calme: #586b82;
  --mto-env-bordure: #dfe7ec;
  --mto-env-fond: #eef2f5;
  max-width: 92rem;
  margin-inline: auto;
  padding: 0 clamp(0.75rem, 2.4vw, 2rem) 3rem;
  color: var(--mto-env-encre);
}

.mto-env-page *, .mto-env-page *::before, .mto-env-page *::after { box-sizing: border-box; }
.mto-env-page :where(section, article, div, header, footer) { min-width: 0; }

.mto-env-hero {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(35rem, 1.25fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: center;
  margin-bottom: 1.5rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 0 0 1.75rem 1.75rem;
  background:
    radial-gradient(circle at 78% 15%, rgb(255 180 176 / 70%), transparent 30%),
    radial-gradient(circle at 42% 80%, rgb(202 240 232 / 80%), transparent 34%),
    linear-gradient(135deg, #f8fafc, #fff4f3 62%, #eaf8f5);
}

.mto-env-fil { display: flex; gap: 0.45rem; align-items: center; margin: 0 0 1.5rem; color: #315d78; font-weight: 700; }
.mto-env-introduction h1 { max-width: 38rem; margin: 0; color: #071f38; font-size: clamp(2.3rem, 5vw, 4.8rem); line-height: 0.98; letter-spacing: -0.045em; }
.mto-env-introduction > p:not(.mto-env-fil) { max-width: 39rem; margin-block: 1.1rem; font-size: clamp(1rem, 2vw, 1.25rem); }
.mto-env-sources { display: inline-flex; gap: 0.55rem; align-items: center; max-width: 100%; padding: 0.7rem 0.9rem; border: 1px solid rgb(16 42 67 / 10%); border-radius: 0.75rem; background: rgb(255 255 255 / 72%); color: var(--mto-env-texte-calme); font-size: 0.86rem; }
.mto-env-sources span { overflow-wrap: anywhere; }

.mto-env-resumes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.mto-env-resume { min-width: 0; min-height: 14rem; padding: 1.1rem; border: 1px solid rgb(255 255 255 / 50%); border-radius: 1rem; background: rgb(255 255 255 / 88%); box-shadow: 0 1rem 2.2rem rgb(44 68 86 / 13%); }
.mto-env-resume--air, .mto-env-resume--pollens { border-top: 0.45rem solid var(--mto-env-accent); }
.mto-env-resume-titre { display: flex; gap: 0.5rem; align-items: center; color: #405a70; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.035em; }
.mto-env-valeur-principale { display: flex; align-items: center; margin-top: 0.85rem; }
.mto-env-valeur-principale img { width: 4rem; height: 4rem; object-fit: contain; }
.mto-env-valeur-principale strong { font-size: 3.3rem; line-height: 1; }
.mto-env-resume > p { margin: 0.55rem 0; }
.mto-env-resume ul { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0.75rem 0 0; padding: 0.7rem 0 0; border-top: 1px solid var(--mto-env-bordure); list-style: none; font-size: 0.85rem; }
.mto-env-resume li { display: flex; gap: 0.3rem; align-items: center; }
.mto-env-indice { display: flex; align-items: end; gap: 0.3rem; margin-top: 1.1rem; }
.mto-env-indice strong { display: grid; width: 3.7rem; height: 3.7rem; place-items: center; border-radius: 0.8rem; background: var(--mto-env-accent); color: #102a43; font-size: 1.8rem; }
.mto-env-indice span { margin-bottom: 0.3rem; color: var(--mto-env-texte-calme); font-size: 0.8rem; }
.mto-env-resume h2 { margin: 0.55rem 0 0; font-size: 1.25rem; }
.mto-env-indisponible { color: var(--mto-env-texte-calme); font-style: italic; }

.mto-env-section { margin-block: 1.4rem; padding: clamp(1rem, 2.5vw, 1.6rem); border: 1px solid var(--mto-env-bordure); border-radius: 1rem; background: #fff; box-shadow: 0 0.25rem 1.2rem rgb(44 68 86 / 5%); }
.mto-env-titre-section { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.mto-env-titre-section h2 { margin: 0; color: #071f38; font-size: clamp(1.25rem, 2.5vw, 1.7rem); }
.mto-env-titre-section p { margin: 0.2rem 0 0; color: var(--mto-env-texte-calme); }
.mto-env-titre-section a { display: inline-flex; flex: none; gap: 0.45rem; align-items: center; min-height: 2.6rem; padding: 0.6rem 0.8rem; border-radius: 0.6rem; color: #006b60; font-weight: 800; text-decoration: none; }
.mto-env-titre-section a:hover, .mto-env-titre-section a:focus-visible { background: #e7f7f3; }

.mto-env-defilement { display: grid; width: 100%; max-width: 100%; grid-auto-columns: 7.2rem; grid-auto-flow: column; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0.25rem 0.15rem 0.8rem; scroll-snap-type: inline mandatory; scrollbar-color: #9bb0bc #eef2f5; }
.mto-env-defilement:focus-visible { outline: 3px solid #006b60; outline-offset: 4px; }
.mto-env-defilement > article { display: grid; place-items: center; min-height: 12.5rem; padding: 0.55rem; border-right: 1px dashed #d5dfe5; scroll-snap-align: start; text-align: center; }
.mto-env-defilement time strong, .mto-env-defilement time small { display: block; }
.mto-env-defilement time small { min-height: 1.2rem; color: var(--mto-env-texte-calme); font-size: 0.73rem; }
.mto-env-defilement img { width: 3.5rem; height: 3.5rem; object-fit: contain; }
.mto-env-temperature { font-size: 1.45rem; font-weight: 800; }
.mto-env-defilement dl, .mto-env-defilement dl div { margin: 0; }
.mto-env-defilement dl div { display: flex; justify-content: center; gap: 0.35rem; align-items: center; margin-top: 0.25rem; font-size: 0.76rem; }
.mto-env-defilement dd { margin: 0; }

.mto-env-grille-principale { display: grid; grid-template-columns: minmax(22rem, 0.9fr) minmax(32rem, 1.4fr); gap: 1.4rem; align-items: start; }
.mto-env-grille-principale > .mto-env-section, .mto-env-colonne > .mto-env-section { margin-block: 0 1.4rem; }
.mto-env-liste-jours { display: grid; gap: 0.35rem; }
.mto-env-liste-jours article { display: grid; grid-template-columns: 5.2rem minmax(9rem, 1fr) auto; gap: 0.65rem; align-items: center; min-height: 5rem; padding: 0.55rem; border-bottom: 1px solid #edf1f3; }
.mto-env-liste-jours h3 { margin: 0; font-size: 0.95rem; }
.mto-env-jour-condition { display: flex; gap: 0.45rem; align-items: center; min-width: 0; }
.mto-env-jour-condition img { flex: none; width: 3.1rem; height: 3.1rem; }
.mto-env-jour-condition span { overflow: hidden; color: var(--mto-env-texte-calme); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.mto-env-temperatures { display: flex; gap: 0.45rem; font-size: 1.05rem; }
.mto-env-temperatures span { color: #8796a8; }
.mto-env-jour-details { grid-column: 2 / -1; display: flex; gap: 0.9rem; margin-top: -0.55rem; color: #48647a; font-size: 0.76rem; }
.mto-env-jour-details span { display: flex; gap: 0.25rem; align-items: center; }

.mto-env-grille-indices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.mto-env-grille-indices article { display: flex; justify-content: space-between; gap: 0.7rem; align-items: center; min-height: 6.2rem; padding: 1rem; border-radius: 0.8rem; background: #f7f9fa; box-shadow: inset 0.3rem 0 var(--mto-env-accent); }
.mto-env-grille-indices article.est-responsable { background: color-mix(in srgb, var(--mto-env-accent) 13%, white); }
.mto-env-grille-indices article > div strong, .mto-env-grille-indices article > div small { display: block; }
.mto-env-grille-indices article > div small { margin-top: 0.25rem; color: var(--mto-env-texte-calme); font-size: 0.75rem; }
.mto-env-grille-indices article > span { min-width: 4.6rem; text-align: right; font-size: 0.74rem; }
.mto-env-grille-indices article > span b { display: block; font-size: 1.45rem; }
.mto-env-demain { display: flex; gap: 0.55rem; align-items: center; margin-top: 0.8rem; padding: 0.75rem; border-radius: 0.65rem; background: #edf8f5; }
.mto-env-demain strong { margin-left: auto; }
.mto-env-previsions-pollens { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; margin-top: 0.9rem; }
.mto-env-previsions-pollens > span { align-self: center; font-weight: 800; }
.mto-env-previsions-pollens > div { min-width: 7.8rem; padding: 0.55rem; border-bottom: 0.3rem solid var(--mto-env-accent); border-radius: 0.5rem; background: #f7f9fa; }
.mto-env-previsions-pollens time, .mto-env-previsions-pollens strong { display: block; }
.mto-env-previsions-pollens time { color: var(--mto-env-texte-calme); font-size: 0.72rem; }
.mto-env-previsions-pollens strong { margin-top: 0.2rem; font-size: 0.84rem; }

.mto-env-cartes-conseils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mto-env-cartes-conseils article { display: flex; gap: 0.9rem; align-items: start; padding: 1rem; border-radius: 0.8rem; background: #f7f9fa; }
.mto-env-cartes-conseils article > wa-icon { flex: none; padding: 0.7rem; border-radius: 0.7rem; background: #e2f6f1; color: #006b60; font-size: 1.35rem; }
.mto-env-cartes-conseils h3, .mto-env-cartes-conseils p { margin: 0; }
.mto-env-cartes-conseils p { margin-top: 0.25rem; color: var(--mto-env-texte-calme); }
.mto-env-conseils > small { display: block; margin-top: 0.9rem; color: var(--mto-env-texte-calme); }
.mto-env-source { padding: 1rem 1.2rem; border-radius: 0.8rem; background: #e8edf0; color: #52677a; font-size: 0.83rem; }
.mto-env-source p { margin: 0.2rem 0; }
.mto-env-visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1080px) {
  .mto-env-hero { grid-template-columns: 1fr; }
  .mto-env-grille-principale { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .mto-env-page { padding-inline: 0.6rem; }
  .mto-env-hero { padding-inline: 1rem; border-radius: 0 0 1.2rem 1.2rem; }
  .mto-env-resumes { grid-template-columns: 1fr; }
  .mto-env-resume { min-height: auto; }
  .mto-env-titre-section { display: block; }
  .mto-env-titre-section a { margin-top: 0.5rem; }
  .mto-env-grille-indices, .mto-env-cartes-conseils { grid-template-columns: 1fr; }
  .mto-env-liste-jours article { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
}

@media (max-width: 430px) {
  .mto-env-liste-jours article { grid-template-columns: 4.2rem minmax(0, 1fr); }
  .mto-env-temperatures { justify-self: end; grid-column: 2; }
  .mto-env-jour-details { grid-column: 2; margin-top: 0; }
}