/* ============================================================
   SOCLE MOBILE — TYPOGRAPHIE
============================================================ */

:root {
  --mobile-font-ui: "Poppins", Arial, sans-serif;
  --mobile-font-display: "Barlow Condensed", sans-serif;

  /* Grille commune de la page d’accueil */
  --mobile-grid-outer: 6px;
  --mobile-grid-padding: 6px;
  --mobile-grid-gap: 6px;

  /* Couleurs du thème */
  --mobile-color-bg: #001f3f;
  --mobile-color-foreground: #ffffff;
  --mobile-color-accent: #58b8f4;
  --mobile-color-border: rgba(86, 181, 242, 0.30);
  --mobile-color-surface: rgba(255, 255, 255, 0.045);

  /* Niveaux de premier plan */
  --mobile-color-foreground-90: rgba(255, 255, 255, 0.90);
  --mobile-color-foreground-80: rgba(255, 255, 255, 0.80);
  --mobile-color-foreground-60: rgba(255, 255, 255, 0.60);
  --mobile-color-foreground-40: rgba(255, 255, 255, 0.40);
  --mobile-color-foreground-20: rgba(255, 255, 255, 0.20);
  --mobile-color-foreground-10: rgba(255, 255, 255, 0.10);
  --mobile-color-surface-light: rgba(255, 255, 255, 0.035);

  /* Couleurs fonctionnelles */
  --mobile-color-neon: #00ff66;
  --mobile-color-neon-soft: rgba(0, 255, 102, 0.18);
  --mobile-color-neon-glow: rgba(0, 255, 102, 0.75);
  --mobile-color-red: #ff3b3b;

  /* Intensité pluie */
  --mobile-color-rain-very-light: #45b4ff;
  --mobile-color-rain-light: #07f7ef;
  --mobile-color-rain-moderate: #7efc00;
  --mobile-color-rain-strong: #ff9a20;
}

/* ============================================================
   SOCLE MOBILE — PAGE
============================================================ */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body.mobile-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--mobile-color-bg);
  color: var(--mobile-color-foreground);
  font-family: var(--mobile-font-display);
}

/* ============================================================
   HEADER MOBILE
============================================================ */

.mobile-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;

  padding-left: 18px;
  padding-right: 18px;

  background: var(--mobile-color-bg);
}


/* ============================================================
   HEADER — GRILLE 3 BULLES DE 72 PX
============================================================ */

.mobile-header-inner {
  width: 100%;
  max-width: none;
  height: 72px;

  margin: 0 auto;
  padding: 0;

  display: grid;

  grid-template-columns:
    minmax(110px, auto)
    minmax(0, 1fr)
    minmax(110px, auto);

  align-items: stretch;
  gap: var(--mobile-card-gap);

  background: transparent;
}


/* ============================================================
   HEADER — SOCLE COMMUN DES 3 BULLES
============================================================ */

.mobile-header-card {
  position: relative;

  height: 72px;
  min-height: 72px;

  margin: 0;
  padding: 7px 8px;
  border-radius: 0;

  background: transparent;

  box-sizing: border-box;
}


/* ============================================================
   HEADER — LOGO
============================================================ */

.mobile-header-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.mobile-header-logo a {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  height: 100%;
}

.mobile-header-logo img {
  display: block;

  width: auto;
  height: 45px;
}


/* ============================================================
   HEADER — VIGILANCE
============================================================ */

.mobile-header-center {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  white-space: nowrap;
}

.mobile-header-vigilance {
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 4px;

  font-family: var(--mobile-font-ui);
  font-size: 0.52rem;
  line-height: 1.15;
  font-weight: 500;

  white-space: nowrap;
}

.mobile-vigilance-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  position: relative;
  top: 1px;

  border-radius: 50%;
}


/* ============================================================
   HEADER — ADMIN + MENU
============================================================ */

.mobile-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 2px;
}


.mobile-header-card--actions {
  padding-right: 0 !important;
}

.mobile-admin-button {
  width: 36px;
  height: 36px;

  padding: 7px;

  border: 0;
  background: transparent;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

.mobile-admin-button img {
  display: block;

  width: 22px;
  height: 22px;
}

.mobile-menu-button {
  width: 36px;
  height: 36px;

  padding: 8px;

  border: 0;
  border-radius: 0;

  background: transparent;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 5px;

  cursor: pointer;
}

.mobile-menu-button span {
  display: block;

  width: 100%;
  height: 3px;

  border-radius: 1px;

  background: var(--mobile-color-foreground);
}


/* ============================================================
   HEADER — PORTRAIT
============================================================ */

@media (orientation: portrait) {

  .mobile-header-inner {
    grid-template-columns:
      minmax(96px, auto)
      minmax(0, 1fr)
      minmax(96px, auto);
  }

}


/* ============================================================
   HEADER — PAYSAGE
============================================================ */

@media (orientation: landscape) {

  .mobile-header-inner {
    grid-template-columns:
      minmax(110px, auto)
      minmax(0, 1fr)
      minmax(110px, auto);
  }

}

/* ============================================================
   VOLET DE NAVIGATION MOBILE
============================================================ */

.mobile-navigation {
  position: fixed;
  inset: 0;
  z-index: 2000;

  visibility: hidden;
  pointer-events: none;
}

.mobile-navigation.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-navigation-panel {
  position: absolute;
  top: 0;
  left: 0;

  width: min(82vw, 330px);
  height: 100dvh;

  padding: 22px 0;

  background: #071522;

  box-shadow: 8px 0 26px rgba(0, 0, 0, .38);

  transform: translateX(-100%);
  transition: transform .28s ease;

  overflow-y: auto;
  z-index: 2;
}

.mobile-navigation.is-open .mobile-navigation-panel {
  transform: translateX(0);
}

.mobile-navigation-backdrop {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  padding: 0;
  border: 0;

  background: rgba(0, 0, 0, .46);

  opacity: 0;
  transition: opacity .28s ease;

  z-index: 1;
}

.mobile-navigation.is-open .mobile-navigation-backdrop {
  opacity: 1;
}

.mobile-navigation-open {
  overflow: hidden;
}

.mobile-navigation-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: 95%;
  margin: 0 auto;
  padding: 2px 8px 15px;

  font-family: var(--mobile-font-display);
  font-size: 1.28rem;
  line-height: 1;
  font-weight: 700;

  color: var(--mobile-color-accent);
  text-align: left;
  letter-spacing: .035em;
}

.mobile-navigation-separator {
  width: 95%;
  height: 1px;

  margin: 0 auto 10px;

  background: var(--mobile-color-foreground-20);
}

.mobile-navigation-section {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 95%;
  min-height: 42px;

  margin: 0 auto;
  padding: 0 10px;

  border: 0;

  background: rgba(88, 184, 244, .11);

  font-family: var(--mobile-font-display);
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 400 !important;

  color: var(--mobile-color-foreground);
  text-align: left;

  cursor: pointer;
}

.mobile-navigation-chevron {
  font-family: var(--mobile-font-ui);
  font-size: .9rem;
  font-weight: 400;

  transition: transform .2s ease;
}

.mobile-navigation-section[aria-expanded="true"]
.mobile-navigation-chevron {
  transform: rotate(180deg);
}

.mobile-navigation-submenu {
  width: 95%;
  margin: 0 auto;
}

/* Navigation : liens secondaires avec puce */
.mobile-navigation-link {
  position: relative;
  display: block;

  width: 100%;
  min-height: 40px;

  padding: 0 12px 0 30px;

  border: 0;
  border-bottom: 1px solid var(--mobile-color-foreground-20);

  background: transparent;

  font-family: var(--mobile-font-display);
  font-size: 1rem;
  font-weight: 300 !important;

  color: var(--mobile-color-foreground-90) !important;
  text-align: left;

  cursor: pointer;
}

.mobile-navigation-link::before {
  content: "•";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);

  font-family: var(--mobile-font-ui);
  font-size: .72rem;
  font-weight: 400;

  color: var(--mobile-color-foreground-60);
}

/* Lien blanc pendant l'appui */
.mobile-navigation-link:active {
  color: var(--mobile-color-foreground) !important;
}

/* Éphémérides : icône Soleil/Lune à droite du lien */
.mobile-navigation-link--ephemerides {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.mobile-navigation-link-icon {
  display: block;
  width: 23px;
  height: 23px;
  margin-left: auto;
  object-fit: contain;
  flex: 0 0 23px;
}

/* Lien correspondant à la page actuellement ouverte */
.mobile-navigation-link.is-active {
  color: var(--mobile-color-accent) !important;
}

/* Navigation : icônes des liens */
.mobile-navigation-link--vigilance,
.mobile-navigation-link--air-quality,
.mobile-navigation-link--temp-humidity,
.mobile-navigation-link--forecast,
.mobile-navigation-link--pressure,
.mobile-navigation-link--rain,
.mobile-navigation-link--wind,
.mobile-navigation-link--webcam,
.mobile-navigation-link--sensors,
.mobile-navigation-link--admin {
  position: relative;
  display: block !important;
}

.mobile-navigation-link--vigilance .mobile-navigation-link-icon,
.mobile-navigation-link--air-quality .mobile-navigation-link-icon,
.mobile-navigation-link--temp-humidity .mobile-navigation-link-icon,
.mobile-navigation-link--forecast .mobile-navigation-link-icon,
.mobile-navigation-link--pressure .mobile-navigation-link-icon,
.mobile-navigation-link--rain .mobile-navigation-link-icon,
.mobile-navigation-link--wind .mobile-navigation-link-icon,
.mobile-navigation-link--webcam .mobile-navigation-link-icon,
.mobile-navigation-link--sensors .mobile-navigation-link-icon,
.mobile-navigation-link--admin .mobile-navigation-link-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  margin: 0;
  flex: none;
}

.mobile-navigation-link--forecast .mobile-navigation-link-icon {
  width: 23px !important;
  height: 23px !important;
}

.mobile-navigation-link--sensors .mobile-navigation-link-icon {
  width: 27px !important;
  height: 27px !important;
}


/* ============================================================
   NAVIGATION — LIENS RADIOMÉTRIE EN ATTENTE
============================================================ */

.mobile-navigation-link--disabled,
.mobile-navigation-link--disabled:disabled {
  color: var(--mobile-color-foreground-40) !important;
  opacity: 1 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* ============================================================
   NAVIGATION — CROIX DE FERMETURE
============================================================ */

.mobile-navigation-close {
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;

  margin: 0 !important;
  padding: 0 2px !important;

  font-family: Arial, sans-serif !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  color: var(--mobile-color-red) !important;

  cursor: pointer !important;
}

/* ============================================================
   NAVIGATION — LOCALISATION SOUS LE TITRE
============================================================ */

.mobile-navigation-title-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.mobile-navigation-location {
  margin-top: 2px !important;

  font-family: var(--mobile-font-ui) !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;

  color: var(--mobile-color-foreground) !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
}


.mobile-navigation-admin-lock {
  margin-left: auto;
  font-size: .9rem;
  opacity: .7;
}

/* ============================================================
   FOOTER MOBILE
============================================================ */

.mobile-footer {
  width: calc(100vw - 8px);
  max-width: none;

  margin-left: calc(50% - 50vw + 4px);
  margin-right: calc(50% - 50vw + 4px);
  margin-top: 12px;

  padding: 12px 10px 14px;

  border-top: 1px solid var(--mobile-color-foreground-20);

  font-family: var(--mobile-font-ui);
  color: var(--mobile-color-foreground-80);
  text-align: center;
}

/* Réseaux */
.mobile-footer-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  margin-bottom: 6px;
}

.mobile-footer-social {
  width: 19px;
  height: 19px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-footer-social img {
  display: block;
  width: 16px;
  height: 16px;
}

.mobile-footer-follow {
  margin-left: 2px;

  font-size: .48rem;
  line-height: 1.2;
  font-weight: 400;
}

/* Copyright */
.mobile-footer-brand {
  margin-bottom: 6px;

  font-size: .50rem;
  line-height: 1.25;
  font-weight: 500;

  color: var(--mobile-color-foreground-90);
}

/* Texte légal */
.mobile-footer-text {
  max-width: 460px;
  margin: 0 auto 7px;

  font-size: .43rem;
  line-height: 1.45;
  font-weight: 400;

  color: var(--mobile-color-foreground-60);
}

/* Liens */
.mobile-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 4px 10px;
}

.mobile-footer-links a,
.mobile-footer-cookie-settings {
  padding: 0;
  border: 0;
  background: transparent;

  font-family: var(--mobile-font-ui);
  font-size: .43rem;
  line-height: 1.3;
  font-weight: 400;

  color: var(--mobile-color-neon) !important;
  text-decoration: none;

  cursor: pointer;
}

/* Paysage : footer plus compact sur une ligne */
@media (orientation: landscape) {

  .mobile-footer {
    padding-top: 9px;
    padding-bottom: 10px;
  }

  .mobile-footer-socials {
    margin-bottom: 5px;
  }

  .mobile-footer-brand {
    margin-bottom: 4px;
  }

  .mobile-footer-text {
    margin-bottom: 5px;
  }
}


/* ============================================================
   TITRES DE PAGES MOBILE — STYLE GLOBAL
============================================================ */

.mobile-page-title {
  margin: 10px 0 14px !important;
  padding: 0 !important;

  font-family: var(--mobile-font-display) !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;

  color: var(--mobile-color-accent) !important;
  text-align: center !important;
}

/* ============================================================
   VIGILANCE MÉTÉO — VUE IFRAME
============================================================ */

:root {
  --vig-green: #3dad3a;
  --vig-yellow: #e3cc12;
  --vig-orange: #f28c1b;
  --vig-red: #d63b31;

  --vig-soft-text: rgba(255, 255, 255, 0.72);
  --vig-main-text: #ffffff;
}

/* ============================================================
   PAGE
============================================================ */

html,
body {
  margin: 0;
  padding: 0;

  min-height: 100%;

  background: transparent;

  color: var(--vig-main-text);

  font-family: var(--mobile-font-ui);
}

html {
  height: 100%;
  overflow: hidden;
}

.vigilance-page {
  min-height: 0;
  background: transparent;
}

body.vigilance-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

/* Fond bleu uniquement quand la page est ouverte directement */

html.vigilance-standalone,
html.vigilance-standalone body.vigilance-page {
  background: #082f52;
}

.vigilance-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;

  width: 100%;
  max-width: 100%;
  min-height: 0;

  padding: 0 10px 10px;

  box-sizing: border-box;
}

/* ============================================================
   TITRE PRINCIPAL
============================================================ */

.vigilance-title-source {
  margin-left: 4px;

  font-size: 0.55em;
  font-weight: 300;

  opacity: 1;

  white-space: nowrap;
}

.vigilance-page-title {
  flex: 0 0 auto;
}

/* ============================================================
   NAVIGATION AUJOURD’HUI / DEMAIN
============================================================ */

.vigilance-period-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 5px;

  width: 100%;
  margin: 0 0 14px;
}

.vigilance-period-link {
  appearance: none;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--mobile-font-ui);
  font-size: 0.60rem;
  font-weight: 400;
  line-height: 1;

  white-space: nowrap;
  cursor: pointer;

  box-sizing: border-box;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.vigilance-period-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.vigilance-period-link:hover {
  color: #ffffff;

  border-color: rgba(255, 255, 255, 0.42);

  background: rgba(255, 255, 255, 0.10);
}

.vigilance-period-link.is-active {
  color: #ffffff;

  border-color: rgba(255, 255, 255, 0.72);

  background: rgba(255, 255, 255, 0.18);

  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.12),
    inset 0 0 7px rgba(255, 255, 255, 0.04);
}

/* ============================================================
   LAYOUT PRINCIPAL
============================================================ */

.vigilance-layout {
  display: grid;
  flex: 0 0 auto;

  grid-template-columns:
    minmax(0, 65%)
    minmax(0, 25%);

  justify-content: space-between;
  align-items: start;

  width: 100%;
  margin-top: 0;
}

.vigilance-main,
.vigilance-side {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-self: flex-start;

  box-sizing: border-box;
}

/* ============================================================
   EN-TÊTE HAUTE-LOIRE
============================================================ */

.vigilance-main-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    145px;

  column-gap: 10px;
  align-items: center;

  width: 100%;
  min-width: 0;

  margin-bottom: 40px;
}

.vigilance-header-left {
  min-width: 0;

  transform: translateX(5px);
}

.vigilance-title {
  margin: 0 0 6px;

  color: #ffffff;

  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1;
}

.vigilance-subtitle {
  margin: 0;

  color: var(--vig-soft-text);

  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.25;
}

/* ============================================================
   BULLE DE VIGILANCE PRINCIPALE
============================================================ */

.vigilance-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 4px;

  width: 145px;
  min-width: 145px;
  max-width: 145px;
  height: 30px;

  margin: 0;
  padding: 0 7px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;

  color: #101010;

  font-size: 0.70rem;
  font-weight: 500;
  line-height: 1;

  white-space: nowrap;

  box-sizing: border-box;
}

.vigilance-badge-prefix,
.vigilance-badge-value {
  display: inline;

  margin: 0;

  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ============================================================
   PHÉNOMÈNES HAUTE-LOIRE
============================================================ */

.vigilance-phenomena-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 5px;

  width: 100%;

  margin-bottom: 7px;
}

.vigilance-phenomenon-card {
  display: flex;
  align-items: center;

  gap: 5px;

  min-width: 0;
  min-height: 27px;

  padding: 0 6px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;

  background: rgba(255, 255, 255, 0.05);

  box-sizing: border-box;
}

.vigilance-dot {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  border-radius: 2px;
}

.vigilance-phenomenon-name {
  min-width: 0;

  color: rgba(255, 255, 255, 0.80);

  font-size: 0.62rem;
  font-weight: 300;
  line-height: 1;

  white-space: nowrap;
}

/* ============================================================
   PICTOGRAMMES DES PHÉNOMÈNES
============================================================ */

.vigilance-phenomenon-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  margin-left: auto;

  color: rgba(255, 255, 255, 0.86);

  pointer-events: none;
}

.vigilance-phenomenon-icon svg {
  display: block;

  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;

  overflow: visible;
}
/* ============================================================
   CARTE
============================================================ */

.vigilance-map-panel {
  padding: 12px 0 6px;

  overflow: visible;

  background: transparent;

  box-sizing: border-box;
}

.vigilance-map-wrap {
  width: 100%;
  max-width: 550px;

  margin: 0 auto;

  transform: translateX(22px);
  transform-origin: center top;
}

.vigilance-map-wrap svg {
  display: block;

  width: 120%;
  height: auto;

  overflow: visible;

  background: transparent !important;
}

/*
 * Le SVG déborde légèrement vers la droite.
 * Il ne doit pas capter la souris au-dessus des bulles.
 */

.vigilance-map-panel,
.vigilance-map-wrap,
.vigilance-map-wrap svg {
  pointer-events: none;
}

/* Tous les départements */

.vigilance-map-wrap [id^="department-"] {
  stroke: rgba(255, 255, 255, 0.95) !important;
  stroke-width: 1.2px !important;

  stroke-linejoin: round;
  stroke-linecap: round;

  transition:
    fill 0.18s ease,
    stroke 0.18s ease,
    stroke-width 0.18s ease,
    filter 0.18s ease,
    opacity 0.18s ease;
}

/* Département éclairé depuis la colonne droite */


/* ============================================================
   COULEURS DE VIGILANCE
============================================================ */

.level-green {
  background-color: var(--vig-green);
  color: #ffffff;
}

.level-yellow {
  background-color: var(--vig-yellow);
  color: #1b1b1b;
}

.level-orange {
  background-color: var(--vig-orange);
  color: #ffffff;
}

.level-red {
  background-color: var(--vig-red);
  color: #ffffff;
}

/* Couleurs de vigilance des départements */

.map-level-green {
  fill: var(--vig-green) !important;
}

.map-level-yellow {
  fill: var(--vig-yellow) !important;
}

.map-level-orange {
  fill: var(--vig-orange) !important;
}

.map-level-red {
  fill: var(--vig-red) !important;
}

/* ============================================================
   HAUTE-LOIRE
============================================================ */

.vigilance-map-wrap #department-43.map-main-department {
  stroke: #0d0d0d !important;
  stroke-width: 2.8px !important;

  stroke-linejoin: round !important;
  stroke-linecap: round !important;

  paint-order: stroke fill markers;
}

.map-main-green {
  fill: #48b848 !important;
}

.map-main-yellow {
  fill: #e8d20b !important;
}

.map-main-orange {
  fill: #f28c1b !important;
}

.map-main-red {
  fill: #d63b31 !important;
}

/* Textes de la carte */

.vigilance-map-wrap text {
  fill: rgba(255, 255, 255, 0.96) !important;

  font-family: var(--mobile-font-ui) !important;
  font-weight: 500 !important;

  pointer-events: none;
}


/* ============================================================
   LIBELLÉS DES DÉPARTEMENTS SUR LA CARTE
============================================================ */

.vigilance-department-label {
  pointer-events: none;

  fill: #ffffff;

  text-anchor: middle;

  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.38);
  stroke-width: 1.5px;
  stroke-linejoin: round;
}

.vigilance-department-number {
  font-family: var(--mobile-font-ui);
  font-size: 16px;
  font-weight: 300;
}

.vigilance-department-name {
  font-family: var(--mobile-font-ui) !important;
  font-size: 15px;
  font-weight: 300 !important;
  letter-spacing: 0.01em;

  stroke: none !important;
  stroke-width: 0 !important;
  paint-order: normal !important;

  fill: rgba(255, 255, 255, 0.88) !important;
}

/* ============================================================
   COLONNE DES DÉPARTEMENTS LIMITROPHES
============================================================ */

.vigilance-side {
  position: relative;
  z-index: 10;

  margin-top: 0;
  padding-top: 0;

  pointer-events: auto;
}

.vigilance-side-title {
  margin: 40px 0 10px;
  padding: 0;

  color: #ffffff;

  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.15;

  white-space: nowrap;
}

.vigilance-neighbors {
  position: relative;
  z-index: 10;

  display: flex;
  flex-direction: column;

  gap: 5px;

  pointer-events: auto;
}

.vigilance-neighbor-item {
  position: relative;
  z-index: 11;

  display: flex;
  align-items: flex-start;

  gap: 6px;

  min-width: 0;

  padding: 6px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;

  background-color: rgba(255, 255, 255, 0.045);
  pointer-events: auto;

  box-sizing: border-box;
}


.vigilance-neighbor-dot {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  margin-top: 2px;

  border-radius: 2px;
}

.vigilance-neighbor-content {
  min-width: 0;
}

.vigilance-neighbor-name {
  margin: 0 0 1px;

  color: #ffffff;

  font-size: 0.66rem;
  font-weight: 400;
  line-height: 1.1;
}

.vigilance-neighbor-detail {
  margin: 0;

  color: rgba(255, 255, 255, 0.68);

  font-size: 0.55rem;
  font-weight: 300;
  line-height: 1.2;
}

.vigilance-neighbor-detail.is-green {
  font-style: italic;
}
/* ============================================================
   LÉGENDE DES NIVEAUX DE VIGILANCE
============================================================ */

.vigilance-color-legend {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 6px 14px;

  width: 100%;
  margin-top: 14px;
  padding: 9px 11px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 7px;

  background: rgba(255, 255, 255, 0.035);

  box-sizing: border-box;
}

.vigilance-color-legend-item {
  display: flex;
  align-items: center;

  gap: 6px;

  min-width: 0;
}

.vigilance-color-legend-item .vigilance-dot {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  border-radius: 2px;
}

.vigilance-color-legend-text {
  min-width: 0;

  color: rgba(255, 255, 255, 0.70);

  font-size: 0.60rem;
  font-weight: 300;
  line-height: 1.3;
}

.vigilance-color-legend-text strong {
  color: #ffffff;

  font-weight: 500;
}
/* ============================================================
   SOURCE ET MISE À JOUR
============================================================ */

.vigilance-meta {
  margin-top: 4px;

  color: rgba(255, 255, 255, 0.60);

  font-size: 0.60rem;
  font-weight: 400;
  line-height: 1.15;
}

/* ============================================================
   ERREUR DE CARTE
============================================================ */

.vigilance-map-error {
  margin: 30px 0;

  color: rgba(255, 255, 255, 0.80);

  font-size: 0.82rem;
  font-weight: 300;
  text-align: center;
}

/* ============================================================
   DISPOSITION NORMALE DE L’IFRAME
============================================================ */

@media screen and (min-width: 521px) {
  .vigilance-layout {
    grid-template-columns:
      minmax(0, 65%)
      minmax(0, 25%) !important;

    justify-content: space-between;
  }

  .vigilance-main {
    grid-column: 1;
    grid-row: 1;
  }

  .vigilance-side {
    grid-column: 2;
    grid-row: 1;

    margin-top: 0;
    padding-top: 0;
  }
}

/* ============================================================
   MOBILE
============================================================ */

@media screen and (max-width: 520px) {
  .vigilance-layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }

  .vigilance-main,
  .vigilance-side {
    grid-column: 1;
  }

  .vigilance-main {
    grid-row: 1;
  }

  .vigilance-side {
    grid-row: 2;

    margin-top: 0;
    padding-top: 0;
  }

  /* Sur mobile, le titre des départements ne doit pas être décalé */
  .vigilance-side-title {
    margin-top: 2px;
  }

  .vigilance-main-heading {
    grid-template-columns:
      minmax(0, 1fr)
      135px;
  }

  .vigilance-badge {
    width: 135px;
    min-width: 135px;
    max-width: 135px;
  }

  .vigilance-phenomena-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vigilance-map-wrap {
    width: 100%;
    transform: none;
  }

  .vigilance-map-wrap svg {
    width: 100%;
  }

  .vigilance-color-legend {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 420px) {
  .vigilance-wrap {
    padding: 10px;
  }

  .vigilance-main-heading {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  .vigilance-badge {
    width: 145px;
    min-width: 145px;
    max-width: 145px;
  }

  .vigilance-phenomena-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .vigilance-title {
    font-size: 1.08rem;
  }

  .vigilance-side-title {
    margin-top: 2px;
    white-space: normal;
  }
}
/* ============================================================
   BULLETIN DÉPARTEMENTAL DE VIGILANCE
   État final consolidé du socle historique.
============================================================ */

/* Bulletin publié. */
.vigilance-bulletin {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 8px;
}

.vigilance-bulletin[hidden] {
  display: none;
}

.vigilance-bulletin-inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.vigilance-bulletin-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.15;
}

.vigilance-bulletin-date {
  margin-top: 2px;
  margin-bottom: 6px;
  font-size: 0.60rem;
  font-weight: 400;
  line-height: 1.15;
  opacity: 0.60;
}

.vigilance-bulletin-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-top: 5px;
  padding-right: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 0.68rem;
  font-weight: 300;
  line-height: 1.28;
}

.vigilance-bulletin-group-title {
  display: none;
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 600;
}

.vigilance-bulletin-section {
  margin-top: 6px;
}

.vigilance-bulletin-section:first-of-type {
  margin-top: 0;
}

.vigilance-bulletin-section-title {
  margin: 0 0 6px;
  font-size: 0.69rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vigilance-bulletin-section p {
  margin: 0 0 4px;
  font-size: inherit;
  font-weight: 300;
  line-height: inherit;
}

.vigilance-bulletin-section p:last-child {
  margin-bottom: 0;
}

/* État sans bulletin : bulle compacte et légende repoussée en bas. */
.vigilance-bulletin.is-empty {
  flex: 0 0 auto;
}

.vigilance-bulletin.is-empty .vigilance-bulletin-content {
  margin-top: 0;
  padding-right: 0;
  overflow: visible;
}

.vigilance-bulletin.is-empty + .vigilance-color-legend {
  margin-top: auto;
}

.vigilance-bulletin-empty {
  margin: 0;
  color: var(--mobile-color-foreground-60);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.25;
}

.mobile-vigilance-view .vigilance-bulletin-empty-level {
  color: var(--vig-green);
}

/* ============================================================
   TOOLTIP DÉPARTEMENTS SUR LA CARTE
============================================================ */

/* Seules les formes des départements sont interactives */
.vigilance-map-wrap [id^="department-"] {
    pointer-events: auto;
    cursor: default;
}

/* Bulle flottante */
.vigilance-map-tooltip {
    position: fixed;
    z-index: 9999;

    min-width: 115px;
    max-width: 180px;

    padding: 6px 8px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;

    background: rgba(8, 47, 82, 0.96);

    color: #ffffff;

    font-family: var(--mobile-font-ui);

    pointer-events: none;

    box-sizing: border-box;
}

/* Nom du département */
.vigilance-map-tooltip-name {
    margin-bottom: 3px;

    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.15;
}

/* Ligne niveau / phénomène */
.vigilance-map-tooltip-detail {
    display: flex;
    align-items: center;

    gap: 5px;

    font-size: 0.56rem;
    font-weight: 300;
    line-height: 1.2;

    color: rgba(255, 255, 255, 0.70);
}

.vigilance-map-tooltip-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 2px;
}


/* ==========================================================
   QUALITE DE L'AIR - BASE AUTONOME MOBILE
   ========================================================== */

/* ============================================================
   MODULE QUALITÉ DE L’AIR
   Module autonome : #air-quality-module

   Le cadre, le titre et l’icône du titre sont gérés globalement :
   .module
   .module > h3
   .module-icon
============================================================ */

#air-quality-module {
  position: relative;
  container-type: inline-size;

  display: flex;
  flex-direction: column;
  gap: var(--mobile-card-gap);

  width: 100%;
  max-width: 100%;
  min-width: 0;

  box-sizing: border-box;

  font-family: var(--mobile-font-ui);
  font-variant-numeric: tabular-nums;
}

#air-quality-module,
#air-quality-module * {
  box-sizing: border-box;
  min-width: 0;
}

/* ============================================================
   SOURCE ATMO
============================================================ */

#air-quality-module .air-source {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  z-index: 5;

  width: 100%;
  max-width: 100%;

  margin: 0;

  text-align: center;
}

#air-quality-module .air-source a,
#air-quality-module .air-source a:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  max-width: 100%;

  color: var(--mobile-color-neon);
  text-decoration: none;

  font-size: 0.55rem;
  font-weight: 400;

  transition: opacity 0.2s ease;
}

#air-quality-module .air-source a:hover,
#air-quality-module .air-source a:active {
  color: var(--mobile-color-neon);
  opacity: 0.8;
}

#air-quality-module .air-source img.air-source-logo {
  display: block !important;

  width: 34px !important;
  max-width: 34px !important;
  height: auto !important;

  flex: 0 0 auto !important;
}

/* ============================================================
   BULLES PRINCIPALES
============================================================ */

#air-quality-module .air-main-row,
#air-quality-module .air-pollutant-gauges {
  width: 100%;
  max-width: 100%;
  height: var(--mobile-card-type-c-height);
  min-height: 0;

  margin: 0;

  border: 0;
  border-radius: 0;
  background: var(--mobile-color-surface);

  box-sizing: border-box;
}

/* ============================================================
   JAUGE PRINCIPALE
============================================================ */

#air-quality-module .air-main-row {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px 8px 0;
}

#air-quality-module .air-container {
  position: relative;

  width: min(100%, 300px);
  height: 150px;

  margin: 0 auto;

  overflow: visible;

  transform: translateY(12px);
}

#air-quality-module .air-container svg {
  position: absolute;
  left: 50%;
  top: 50%;

  display: block;

  transform: translate(-50%, -50%) scale(0.84);

  z-index: 1;
}

/* ============================================================
   TEXTE CENTRAL DE LA JAUGE
============================================================ */

#air-quality-module .air-center {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  pointer-events: none;

  font-family: var(--mobile-font-ui);

  transform: translateY(2px);

  z-index: 2;
}

#air-quality-module .air-center-title {
  font-size: 10px;
  font-weight: 300;
  line-height: 1.1;
  opacity: 0.8;
}

#air-quality-module .air-center-subtitle {
  margin-top: 1px;

  font-size: 10px;
  font-weight: 300;
  line-height: 1.1;
  opacity: 0.8;
}

#air-quality-module .air-center-value {
  margin-top: 4px;

  font-size: 10px;
  font-weight: 500;
  line-height: 1.15;
}

/* ============================================================
   LÉGENDE AUTOUR DE LA JAUGE
============================================================ */

#air-quality-module .air-ring-legend {
  position: absolute;
  inset: 0;

  pointer-events: none;

  z-index: 3;
}

#air-quality-module .air-ring-legend-item {
  position: absolute;
  left: var(--dot-x);
  top: var(--dot-y);

  width: 0;
  height: 0;

  color: white;
  opacity: 1;

  font-family: var(--mobile-font-ui);
  font-size: 8px;
  font-weight: 400;
  line-height: 1.05;
}

#air-quality-module .air-quality-dot {
  position: absolute;
  left: 0;
  top: 0;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  box-shadow: 0 0 3px rgba(255, 255, 255, 0.16);
}

#air-quality-module .air-ring-legend-label {
  position: absolute;
  top: 0;

  display: block;

  width: 70px;

  transform: translateY(-50%);

  white-space: normal;
}

/* Textes placés à gauche des pastilles */

#air-quality-module .legend-1 .air-ring-legend-label,
#air-quality-module .legend-2 .air-ring-legend-label,
#air-quality-module .legend-3 .air-ring-legend-label {
  right: 8px;
  text-align: right;
}

/* Textes placés à droite des pastilles */

#air-quality-module .legend-4 .air-ring-legend-label,
#air-quality-module .legend-5 .air-ring-legend-label,
#air-quality-module .legend-6 .air-ring-legend-label {
  left: 8px;
  text-align: left;
}

/* ============================================================
   POSITION DES SIX PASTILLES

   Les coordonnées sont proportionnelles à la largeur et à la
   hauteur du conteneur. Elles restent donc cohérentes lorsque
   la colonne droite change légèrement de largeur.
============================================================ */

#air-quality-module .legend-1 {
  --dot-x: 27%;
  --dot-y: 68%;
}

#air-quality-module .legend-2 {
  --dot-x: 27%;
  --dot-y: 34%;
}

#air-quality-module .legend-3 {
  --dot-x: 38%;
  --dot-y: 11%;
}

#air-quality-module .legend-4 {
  --dot-x: 62%;
  --dot-y: 11%;
}

#air-quality-module .legend-5 {
  --dot-x: 73%;
  --dot-y: 34%;
}

#air-quality-module .legend-6 {
  --dot-x: 73%;
  --dot-y: 68%;
}

/* ============================================================
   MINI-ÉCHELLES DES POLLUANTS
============================================================ */

#air-quality-module .air-pollutant-gauges {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;

  gap: 3px;

  padding: 7px 8px;
}

#air-quality-module .air-pollutant-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  min-width: 0;
}

#air-quality-module .air-pollutant-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  width: 100%;
  min-width: 0;
  height: 30px;

  margin-bottom: 4px;

  color: white;

  font-family: var(--mobile-font-ui);
  font-size: 7.2px;
  font-weight: 300;
  line-height: 1.05;

  text-align: center;

  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

#air-quality-module .air-pollutant-name > span {
  display: block;
  max-width: 100%;
}

#air-quality-module .air-pollutant-name sub {
  font-size: 0.85em;
  line-height: 0;
  vertical-align: -0.25em;
}

/* ============================================================
   BARRES COLORÉES
============================================================ */

#air-quality-module .air-mini-scale {
  display: flex;
  flex-direction: column;

  gap: 1px;

  transform: translateX(2px);
}

#air-quality-module .air-mini-scale-row {
  display: grid;
  grid-template-columns: 20px 7px;
  align-items: center;

  min-height: 5px;
  column-gap: 1px;
}

#air-quality-module .air-mini-block {
  display: block;

  width: 20px;
  height: 5px;
}

#air-quality-module .air-mini-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 7px;
  height: 7px;

  color: white;
  opacity: 0;

  font-size: 7px;
  font-weight: 600;
  line-height: 1;
}

#air-quality-module .air-mini-scale-row.is-active .air-mini-arrow {
  opacity: 1;
}

#air-quality-module .air-mini-arrow-left {
  display: none;
}

#air-quality-module .air-mini-arrow-right::before {
  content: "◀";
}

/* ============================================================
   RESPONSIVE DU MODULE

   Aucun repositionnement des six pastilles ici :
   leurs coordonnées en pourcentage s’adaptent automatiquement.
============================================================ */

@container (max-width: 280px) {
  #air-quality-module .air-source {
    margin-bottom: 4px;
  }

  #air-quality-module .air-source a,
  #air-quality-module .air-source a:visited {
    font-size: 0.58rem;
  }

  #air-quality-module .air-source img.air-source-logo {
    width: 40px !important;
    max-width: 40px !important;
  }

  #air-quality-module .air-main-row {
    margin-top: -12px;
    margin-bottom: -12px;
  }

  #air-quality-module .air-container {
    width: 100%;
    height: 168px;
  }

  #air-quality-module .air-container svg {
    transform: translate(-50%, -50%) scale(0.92);
  }

  #air-quality-module .air-ring-legend-item {
    font-size: 7px;
  }

  #air-quality-module .air-ring-legend-label {
    width: 62px;
  }

  #air-quality-module .air-pollutant-gauges {
    gap: 2px;
  }

  #air-quality-module .air-pollutant-name {
    height: 28px;
    font-size: 6.5px;
  }

  #air-quality-module .air-mini-scale {
    transform: translateX(1px);
  }

  #air-quality-module .air-mini-scale-row {
    grid-template-columns: 18px 6px;
  }

  #air-quality-module .air-mini-block {
    width: 18px;
  }

  #air-quality-module .air-mini-arrow {
    width: 6px;
    height: 6px;

    font-size: 6px;
  }
}
/* Harmonisation du titre avec le module Pluviomètre */
#air-quality-module > h3 .module-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    object-fit: contain;
}

/* Harmonisation visuelle des titres des modules */
#outdoor-module > h3,
#rain-module > h3,
#wind-module > h3,
#air-quality-module > h3 {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ajustement visuel des titres de la colonne gauche */
#outdoor-module > h3,
#rain-module > h3,
#wind-module > h3 {
    font-size: 14px;
    line-height: 14px;
}


/* ==========================================================
   EPHEMERIDES - BASE AUTONOME MOBILE
   ========================================================== */

.sun-moon-phases {
	--celestial-text: rgba(255, 255, 255, 0.96);
	--celestial-muted: rgba(255, 255, 255, 0.58);
	--celestial-line: rgba(255, 255, 255, 0.22);
	--celestial-arc: rgba(255, 255, 255, 0.30);
	--celestial-sun: #ffd65a;
	--celestial-moon: rgba(255, 255, 255, 0.96);

	width: 100%;
	padding: 8px 0;
	color: var(--celestial-text);
	font-family: var(--mobile-font-ui);
}

.celestial-block {
	width: 100%;
}

.celestial-heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0 0 -22px;
	color: var(--celestial-text);
	font-size: 13px;
	font-weight: 500;
}

.celestial-heading-icon {
	color: var(--celestial-sun);
	font-size: 18px;
	line-height: 1;
}

.celestial-separator {
	height: 0;
	margin: 18px 8px;
	background: none;
	box-shadow: none;
}

.celestial-dial {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.celestial-ground-line {
	stroke: var(--celestial-line);
	stroke-width: 1.2;
}

.celestial-arc {
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 3 8;
}

.celestial-arc-background {
	stroke: var(--celestial-arc);
}

.celestial-arc-progress {
	stroke-dasharray: 0 999;
}

.celestial-sun-progress {
	stroke: rgba(255, 214, 90, 0.82);
}

.celestial-moon-progress {
	stroke: rgba(255, 255, 255, 0.72);
}

.celestial-horizon-point {
	fill: rgba(255, 255, 255, 0.62);
}

.celestial-marker {
	pointer-events: none;
}

.celestial-marker-glow {
	fill: rgba(255, 214, 90, 0.17);
}

.celestial-sun-marker .celestial-marker-body {
	fill: var(--celestial-sun);
	stroke: rgba(255, 255, 255, 0.82);
	stroke-width: 1.5;
	filter:
		drop-shadow(
			0 0 6px rgba(255, 214, 90, 0.50)
		);
}

.celestial-moon-marker-body {
	fill: var(--celestial-moon);
	filter:
		drop-shadow(
			0 0 5px rgba(255, 255, 255, 0.32)
		);
}

.celestial-status {
	fill: var(--celestial-text);
	font-family: var(--mobile-font-ui);
	font-size: 16px;
	font-weight: 500;
}

.celestial-status-secondary {
	fill: rgba(255, 255, 255, 0.70);
	font-size: 17px;
	font-weight: 300;
}

.celestial-time {
	fill: var(--celestial-text);
	font-family: var(--mobile-font-ui);
	font-size: 20px;
	font-weight: 600;
}

.celestial-caption {
	fill: var(--celestial-muted);
	font-family: var(--mobile-font-ui);
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.celestial-moon-symbol {
	position: relative;
	display: inline-block;
	width: 17px;
	height: 17px;
	overflow: hidden;
	border-radius: 50%;
	background: transparent;
}

.celestial-moon-symbol::before {
	position: absolute;
	inset: 0;
	content: "";
	border-radius: 50%;
	background: #fff;
}

.celestial-moon-symbol.phase-new::before {
	display: none;
}

.celestial-moon-symbol.phase-waxing-crescent::before {
	-webkit-mask:
		radial-gradient(
			circle at 78% 50%,
			#000 0 50%,
			transparent 51%
		);
	mask:
		radial-gradient(
			circle at 78% 50%,
			#000 0 50%,
			transparent 51%
		);
}

.celestial-moon-symbol.phase-first-quarter::before {
	-webkit-mask:
		linear-gradient(
			to right,
			transparent 0 50%,
			#000 50% 100%
		);
	mask:
		linear-gradient(
			to right,
			transparent 0 50%,
			#000 50% 100%
		);
}

.celestial-moon-symbol.phase-waxing-gibbous::before {
	-webkit-mask:
		radial-gradient(
			circle at 62% 50%,
			#000 0 50%,
			transparent 51%
		);
	mask:
		radial-gradient(
			circle at 62% 50%,
			#000 0 50%,
			transparent 51%
		);
}

.celestial-moon-symbol.phase-full::before {
	-webkit-mask: none;
	mask: none;
}

.celestial-moon-symbol.phase-waning-gibbous::before {
	-webkit-mask:
		radial-gradient(
			circle at 38% 50%,
			#000 0 50%,
			transparent 51%
		);
	mask:
		radial-gradient(
			circle at 38% 50%,
			#000 0 50%,
			transparent 51%
		);
}

.celestial-moon-symbol.phase-last-quarter::before {
	-webkit-mask:
		linear-gradient(
			to right,
			#000 0 50%,
			transparent 50% 100%
		);
	mask:
		linear-gradient(
			to right,
			#000 0 50%,
			transparent 50% 100%
		);
}

.celestial-moon-symbol.phase-waning-crescent::before {
	-webkit-mask:
		radial-gradient(
			circle at 22% 50%,
			#000 0 50%,
			transparent 51%
		);
	mask:
		radial-gradient(
			circle at 22% 50%,
			#000 0 50%,
			transparent 51%
		);
}

@media (max-width: 700px) {
	.sun-moon-phases {
		padding: 7px 6px;
	}

	.celestial-heading {
		font-size: 12px;
	}

	.celestial-status {
		font-size: 13px;
	}
}

/* Le titre utilise désormais le style global des modules */
#sun-moon-phases-module > .sun-moon-phases > h3 {
	margin: 0;
}

#sun-moon-phases-module > .sun-moon-phases > h3 .module-icon {
	object-fit: contain;
}

/* Nom de la phase lunaire en bas du module */
.celestial-moon-phase-footer {
	width: 100%;
	margin: -4px 0 0;
       padding: 0 12px;
       box-sizing: border-box;
	color: var(--celestial-muted);
	font-family: var(--mobile-font-ui);
	font-size: 8px;
	font-weight: 300;
	line-height: 1;
	text-align: left;
}

/* Centrage horizontal réel du module et des cadrans */
.sun-moon-phases {
	box-sizing: border-box;
}

.celestial-block,
.celestial-dial {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}

/* Icône Soleil/Lune dans le titre du cadran Soleil */
.celestial-heading-image {
	display: block;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	object-fit: contain;
}

/* Icône lunaire réaliste - image de phase actuelle */
.celestial-moon-symbol {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    overflow: hidden;
    border-radius: 50%;
    background-color: #001f3f;
    background-image:
        url("/api/moon_current.php");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.celestial-moon-symbol::before {
    display: none !important;
}

/* Statut de visibilité de la Lune plus lisible */
.celestial-block-moon .celestial-status {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.2;
}

/* Source de l’image des phases lunaires */
.celestial-moon-source {
    width: 100%;
    margin: 5px 0 0;
    padding: 0;

    color: rgba(255, 255, 255, 0.80);

    font-family: var(--mobile-font-ui);
    font-size: 8px;
    font-weight: 300;
    line-height: 1;

    text-align: left;
}

/* Aucun espace sous la source NASA */
#sun-moon-phases-module .sun-moon-phases {
    padding-bottom: 0;
}

/* Source NASA */
#sun-moon-phases-module .celestial-moon-source {
    margin-bottom: 0;
    padding-bottom: 0;

    font-size: 7px;
    line-height: 1;
}

/* Opacité du message solaire selon la visibilité réelle */
#sunPhaseStatus {
    fill: rgba(255, 255, 255, 1);
}

#sunPhaseStatus.celestial-status-secondary {
    fill: rgba(255, 255, 255, 0.70);
}

/* Évolution de la déclinaison lunaire */
.celestial-moon-declination {
    width: 100%;
    margin: -2px 0 3px;
    color: rgba(255, 255, 255, 0.70);
    font-family: var(--mobile-font-ui);
    font-size: 8px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
}

/* Lune visible : allumer les deux lignes */
#moonVisibilityStatus,
#moonDirectionStatus {
    fill: rgba(255, 255, 255, 1);
}

/* Lune invisible : atténuer le message affiché */
#moonVisibilityStatus.celestial-status-invisible,
#moonDirectionStatus.celestial-status-invisible {
    fill: rgba(255, 255, 255, 0.70);
}


/* Informations astronomiques lunaires */
.celestial-moon-details {
    width: 100%;
    margin: 8px 0 3px;
    padding: 0 12px 0 4px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.68);
    font-family: var(--mobile-font-ui);
    font-size: 8px;
    font-weight: 300;
    line-height: 1.5;
    text-align: left;
}

.celestial-moon-details > div {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.celestial-moon-details .moon-detail-label {
    color: rgba(255, 255, 255, 0.84);
    font-weight: 400;
}


.celestial-moon-details > .moon-location-note {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin-top: 10px;
    margin-left: 8px;
    padding: 0;
    color: rgba(173, 216, 255, 0.90);
    font-size: 7px;
    letter-spacing: 0.025em;
    line-height: 1.35;
}

.moon-location-note-icon {
    color: rgba(173, 216, 255, 0.95);
    font-size: 0.48rem;
    line-height: 1;
    text-shadow: 0 0 5px rgba(173, 216, 255, 0.45);
}

.moon-location-source {
    margin-left: 4px;
    color: rgba(173, 216, 255, 0.90);
    font-style: normal;
}


#moonDirectionStatus {
    line-height: calc(1em - 1px);
}


/* ==========================================================
   COOKIES - BASE AUTONOME MOBILE
   ========================================================== */

/* ============================================================
   COOKIE NOTICE — PANNEAU LATÉRAL DÉPLIANT
============================================================ */

.cookie-notice {
  position: fixed;
  right: 16px;
  bottom: 1px;
  z-index: 99999;

  width: min(340px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  box-sizing: border-box;

  padding: 12px 15px 10px 15px;

  background: rgba(0, 31, 63, 0.97);
  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px 0 0 8px;

  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  font-family: var(--mobile-font-ui);
  font-size: clamp(0.68rem, 0.72vw, 0.78rem);
  line-height: 1.25;

  opacity: 0;
  transform: translateX(calc(100% + 24px));
  pointer-events: none;

  transition:
    opacity 0.35s ease,
    transform 0.45s ease;
}

.cookie-notice.show {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.cookie-notice-title {
  margin: 0 24px 6px 0;
  color: var(--mobile-color-neon);

  font-size: clamp(0.78rem, 0.82vw, 0.88rem);
  line-height: 1.15;
  font-weight: 500;
}

.cookie-notice p {
  margin: 0 0 5px 0;
  font-weight: 300;
  line-height: 1.25;
}

.cookie-notice a {
  color: var(--mobile-color-neon);
  text-decoration: none;
}

.cookie-notice a:hover {
  text-decoration: underline;
}

.cookie-notice-close {
  position: absolute;
  top: 6px;
  right: 8px;

  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.80);

  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.cookie-notice-close:hover {
  color: #ffffff;
}


/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 600px) {
  .cookie-notice {
    right: 8px;
    bottom: 8px;

    width: min(300px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;

    padding: 10px 12px 9px 12px;

    border-radius: 8px 0 0 8px;

    font-size: 0.68rem;
    line-height: 1.22;

    transform: translateX(calc(100% + 18px));
  }

  .cookie-notice.show {
    transform: translateX(0);
  }

  .cookie-notice-title {
    margin: 0 22px 5px 0;
    font-size: 0.76rem;
    line-height: 1.15;
  }

  .cookie-notice p {
    margin-bottom: 4px;
    line-height: 1.22;
  }

  .cookie-notice-close {
    top: 6px;
    right: 7px;
    font-size: 17px;
  }

}
.cookie-notice-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 14px;
}

.cookie-notice-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 92px;
  min-height: 32px;

  margin: 0;
  padding: 7px 14px;

  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 3px;

  background-image: none;

  color: inherit;

  font-family: var(--mobile-font-ui);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1;

  text-align: center;
  text-decoration: none;

  box-shadow: none;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  transition:
    opacity 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.cookie-notice-refuse {
  background: transparent;
  color: #ffffff;
}

.cookie-notice-accept {
  border-color: var(--mobile-color-neon);
  background: var(--mobile-color-neon);
  color: #07120c;
}

.cookie-notice-button:hover,
.cookie-notice-button:focus-visible {
  opacity: 0.8;
  outline: none;
}

.cookie-notice[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  .cookie-notice-actions {
    justify-content: stretch;
  }

  .cookie-notice-button {
    flex: 1 1 0;
  }
}

/* ============================================================
   CONTENU MOBILE
============================================================ */

.mobile-content {
  width: 100%;
  max-width: 620px;

  flex: 1 0 auto;
  margin: 0 auto;
  padding: 0 10px 20px;
}

@media (orientation: landscape) {
  .mobile-content {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ============================================================
   BANDEAU PRÉVISIONS MOBILE
============================================================ */

.mobile-weather-banner-section {
  width: 100%;
  margin-top: 0;
  overflow: hidden;
  background: var(--mobile-color-bg);
}

.mobile-weather-banner-separator {
  width: 100%;
  height: 1px;
  background: var(--mobile-color-foreground-20);
  opacity: 0.7;
}

/* Conteneur général */
.mobile-weather-banner-section .weather-banner {
  width: 100%;
  height: 56px;

  overflow: hidden;

  display: flex;
  align-items: center;

  background: var(--mobile-color-bg);

  font-family: var(--mobile-font-ui);
  color: var(--mobile-color-foreground);
}

/* Piste animée */
.mobile-weather-banner-section .weather-banner-track {
  display: flex;
  align-items: center;

  width: max-content;
  min-width: max-content;

  white-space: nowrap;

  will-change: transform;
}

/* Une ville */
.mobile-weather-banner-section .weather-city {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  height: 52px;

  margin-right: 4px;
}

/* Nom de la ville */
.mobile-weather-banner-section .weather-city-name {
  width: max-content;
  min-width: max-content;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 10px 0 20px;

  text-align: center;

  font-size: 0.48rem;
  line-height: 1.15;
  font-weight: 500;
}

.mobile-weather-banner-section .weather-city-name-line {
  display: block;
}

/* Période de prévision — grille transparente */
.mobile-weather-banner-section .weather-period {
  position: relative;

  flex: 0 0 auto;

  width: 52px;
  height: 50px;

  margin-right: 5px;
  padding: 3px 3px;

  border: 0;
  border-radius: 0;

  background: transparent;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  grid-template-rows: auto auto auto auto;

  column-gap: 2px;

  overflow: visible;
}

/* Séparateur vertical entre les périodes */
.mobile-weather-banner-section .weather-period::after {
  content: "";
  position: absolute;

  top: 0;
  right: -3px;

  width: 2px;
  height: 100%;

  background: var(--mobile-separator-vertical);

  transform: scaleX(0.6);
  transform-origin: center;

  pointer-events: none;
}

/* La période actuelle garde le même fond transparent */
.mobile-weather-banner-section .weather-period.is-current {
  background-color: transparent;
}

/* Heure */
.mobile-weather-banner-section .weather-period-label {
  grid-column: 1 / -1;

  font-size: 0.36rem;
  line-height: 1.1;
  font-weight: 500;

  margin-bottom: 1px;
}

/* Température */
.mobile-weather-banner-section .weather-temperature {
  grid-column: 1;
  grid-row: 2;

  position: relative;
  top: 5px;

  font-size: 0.62rem;
  line-height: 1;
  font-weight: 500;
}

/* Ressenti */
.mobile-weather-banner-section .weather-feels-like {
  grid-column: 1;
  grid-row: 3;

  position: relative;
  top: -1px;

  min-width: 0;
  white-space: nowrap;

  display: flex;
  align-items: baseline;
  gap: 2px;

  font-size: 0.36rem;
  line-height: 1.1;
  font-weight: 300;
}

.mobile-weather-banner-section .weather-feels-label {
  opacity: 0.7;
}

/* Pluie */
.mobile-weather-banner-section .weather-rain {
  grid-column: 1 / -1;
  grid-row: 4;

  display: flex;
  align-items: center;
  gap: 2px;

  font-size: 0.36rem;
  line-height: 1.1;
  font-weight: 300;
}

.mobile-weather-banner-section .weather-rain-drop {
  font-size: 0.41rem;
}

/* Picto météo */
.mobile-weather-banner-section .weather-icon {
  grid-column: 2;
  grid-row: 2;

  position: relative;
  top: 0px;

  align-self: center;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
}

.mobile-weather-banner-section .weather-icon img,
.mobile-weather-banner-section .weather-icon svg,
.mobile-weather-banner-section .weather-icon .meteocon {
  display: block;

  width: 18px;
  height: 18px;

  max-width: 18px;
  max-height: 18px;
}

/* Message de chargement / erreur */
.mobile-weather-banner-section .weather-message {
  width: 100%;

  text-align: center;

  font-size: 0.58rem;
  font-weight: 300;
}

/* Bandeau prévisions bord à bord */
.mobile-weather-banner-section {
  width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Ajustement horizontal du contenu des bulles météo */
.mobile-weather-banner-section .weather-period {
  justify-items: start;
  text-align: left;
}

.mobile-weather-banner-section .weather-period-label,
.mobile-weather-banner-section .weather-temperature,
.mobile-weather-banner-section .weather-feels-like,
.mobile-weather-banner-section .weather-rain,
.mobile-weather-banner-section .weather-icon {
  position: relative;
  left: 3px;
}

.mobile-weather-banner-section .weather-feels-like,
.mobile-weather-banner-section .weather-rain {
  justify-content: flex-start;
}

/* ============================================================
   IMAGE ACCUEIL MOBILE
============================================================ */

.mobile-home-image {
  position: relative;

  width: 100vw;
  margin-left: calc(50% - 50vw);

  overflow: hidden;
}

.mobile-home-image img {
  display: block;

  width: 100%;
  height: auto;
}

/* Zone texte superposée */
.mobile-home-image-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding-top: 8px;

  pointer-events: none;
}

.mobile-home-image-text {
  font-family: var(--mobile-font-display);
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;

  color: var(--mobile-color-bg);
}

.mobile-home-image {
  margin-top: 10px;
}

.mobile-home-image-subtext {
  margin-top: 3px;

  font-family: var(--mobile-font-display);
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.02em;

  color: var(--mobile-color-bg);
}

/* Centrage du bloc texte sur l'image */
.mobile-home-image-copy {
  width: calc(100% - 24px);
  max-width: 420px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.mobile-home-image-text,
.mobile-home-image-subtext {
  width: 100%;
  text-align: center;
}

@media (orientation: landscape) {
  .mobile-home-image-subtext {
    font-size: 0.88rem;
  }
}


/* Crédit photo */
.mobile-home-image-credit {
  position: absolute;
  right: 6px;
  bottom: 4px;
  z-index: 3;

  max-width: calc(100% - 12px);

  font-family: var(--mobile-font-ui);
  font-size: 0.45rem;
  line-height: 1.1;
  font-weight: 500;

  color: var(--mobile-color-foreground);
  opacity: 0.7;

  text-align: right;
  white-space: nowrap;

  pointer-events: none;
}

/* ============================================================
   SYNTHÈSE VISUELLE — ACCUEIL MOBILE
============================================================ */

.mobile-home-current {
  position: relative;

  width: 100vw;
  height: clamp(312px, 83vw, 362px);
  margin-top: 10px;
  margin-left: calc(50% - 50vw);
  padding: 0;

  box-sizing: border-box;
  background:
    linear-gradient(
      to bottom,
      transparent 52%,
        var(--mobile-color-bg) 78%,
        var(--mobile-color-bg) 100%
    ),
    radial-gradient(
      ellipse
        clamp(165px, 52vw, 245px)
        clamp(90px, 28vw, 135px)
        at 58% clamp(150px, 43vw, 204px),
      rgba(90, 195, 255, 0.30) 0%,
      rgba(55, 150, 225, 0.16) 34%,
      rgba(20, 90, 165, 0.06) 52%,
      transparent 70%
    ),
    var(--mobile-color-bg);
    overflow: hidden;
}

.mobile-home-current-icon {
  position: absolute;
  top: 5px;
  right: 0;
  left: 15px;
  z-index: 0;

  width: 100%;
  height: clamp(
    208px,
    calc(72vw - 42px),
    298px
  );
}

.mobile-home-current-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.mobile-home-current-location {
  position: absolute;
  top: 10px;
  left: 18px;
  z-index: 1;

  max-width: 55%;

  color: var(--mobile-color-foreground);
  text-align: left;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.mobile-home-current-location-name {
  font-family: var(--mobile-font-display);
  font-size: 1.80rem;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.mobile-home-current-altitude {
  margin-top: 7px;

  display: flex;
  align-items: center;
  gap: 4px;

  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.04em;
}

.mobile-home-current-altitude img {
  display: block;

  width: 13px;
  height: 13px;
  flex: 0 0 13px;

  object-fit: contain;
  opacity: 0.80;
  filter: brightness(0) invert(1);
}

.mobile-home-current-day {
  position: absolute;
  top: 85px;
  left: 18px;
  z-index: 1;

  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 300;

  color: var(--mobile-color-foreground);
  text-align: left;
  text-transform: capitalize;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.mobile-home-current-time {
  position: absolute;
  top: 102px;
  left: 18px;
  z-index: 1;
  font-family: var(--mobile-font-ui);
  font-size: 1.30rem;
  line-height: 1;
  font-weight: 300;
  color: var(--mobile-color-foreground);
  opacity: 0.70;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.mobile-time-colon {
  display: inline-block;
  width: 0.35em;
  text-align: center;
}

.mobile-home-current-observations {
  position: absolute;
  top: 145px;
  left: 18px;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;

  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 300;

  color: var(--mobile-color-foreground);
  opacity: 1.00;
}

#mobileHomeRain1h,
#mobileHomeWindSpeed {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 300;
}

.mobile-home-current-observation {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}


.mobile-home-current-observation-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--mobile-color-foreground);
}

.mobile-home-current-observation-icon > * {
  display: block !important;

  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;

  color: inherit;
  object-fit: contain;
  filter: brightness(0) invert(1);
}


.mobile-home-current-temperature-group {
  position: absolute;
  top: 12px;
  right: 18px;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
}


.mobile-home-current-condition {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  margin-top: 4px;

  width: auto;
  max-width: none;

  white-space: normal;
  text-align: left;
  align-self: flex-start;

  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.66rem;
  line-height: 1.2;
  font-weight: 300;

  color: var(--mobile-color-foreground);
  opacity: 0.70;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.mobile-home-forecast {
  position: absolute;
  right: var(--mobile-grid-outer);
  bottom: 0;
  left: var(--mobile-grid-outer);
  width: auto;
  box-sizing: border-box;
  z-index: 2;

  padding: 18px var(--mobile-grid-padding) 0;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--mobile-grid-gap);

  background:
    linear-gradient(
      to bottom,
      transparent 0,
      var(--mobile-color-bg) 18px,
      var(--mobile-color-bg) 100%
    );

  pointer-events: none;
}

.mobile-home-forecast-day {
  position: relative;

  min-width: 0;
  height: 88px;
  padding: 2px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  background: transparent;
  color: var(--mobile-color-foreground);

  overflow: visible;
}

.mobile-home-forecast-day:not(:last-child)::after {
  content: "";
  position: absolute;

  top: 0;
  right: calc(var(--mobile-grid-gap) / -2);

  width: 2px;
  height: 88px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.12) 20%,
      rgba(255,255,255,0.20) 50%,
      rgba(255,255,255,0.12) 80%,
      rgba(255,255,255,0.05) 100%
    );

  transform: scaleX(0.6);
  transform-origin: center;
  pointer-events: none;
}

.mobile-home-forecast-icon {
  width: 100%;
  height: 38px;
  flex: 0 0 38px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-home-forecast-icon img {
  display: block;

  width: 36px;
  height: 36px;

  object-fit: contain;
}

.mobile-home-forecast-day-label {
  margin-top: 8px;

  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.50rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.07em;

  color: var(--mobile-color-foreground);
  text-align: center;
}

.mobile-home-forecast-temperatures {
  margin-top: 9px;

  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;

  font-family: "Poppins", Arial, sans-serif;
  font-size: 0.54rem;
  line-height: 1;
  font-weight: 300;

  color: var(--mobile-color-foreground);
  text-align: center;
  white-space: nowrap;
}

.mobile-home-forecast-min {
  opacity: 0.70;
}

.mobile-home-forecast-separator {
  opacity: 0.45;
}

.mobile-home-forecast-max {
  opacity: 1;
}


.mobile-home-current-temperature {
  position: static;

  width: auto;

  font-family: var(--mobile-font-display);
  font-size: 2.55rem;
  line-height: 1;
  font-weight: 300;

  color: var(--mobile-color-foreground);
  text-align: center;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.58);
}

.mobile-home-current-temperature .mobile-station-unit {
  position: relative;
  top: 0.12em;
  margin-left: -0.18em;

  font-size: 0.56em;
  font-weight: 400;
  vertical-align: top;
}

@media (orientation: landscape) {
  .mobile-home-current {
    height: clamp(325px, 45vw, 355px);

    background:
      linear-gradient(
        to bottom,
        transparent 52%,
        var(--mobile-color-bg) 78%,
        var(--mobile-color-bg) 100%
      ),
      radial-gradient(
        ellipse
          clamp(220px, 38vw, 300px)
          clamp(90px, 16vw, 120px)
          at 58% 47%,
        rgba(90, 195, 255, 0.30) 0%,
        rgba(55, 150, 225, 0.16) 34%,
        rgba(20, 90, 165, 0.06) 52%,
        transparent 70%
      ),
      var(--mobile-color-bg);
  }

  .mobile-home-current-icon {
    top: -12px;
    right: 0;
    left: 10px;

    height: clamp(
      224px,
      calc(38vw - 26px),
      259px
    );
  }

  .mobile-home-current-icon img {
    transform: none;
  }
}


/* ============================================================
   TABLEAU TECHNIQUE — CONDITIONS ACTUELLES À LA STATION
============================================================ */

.mobile-station-dashboard {
  width: 100%;
  margin-top: 12px;
  padding: var(--mobile-grid-gap) var(--mobile-grid-padding) 8px;

  border: 1px solid rgba(77, 184, 255, 0.65);
  border-radius: 12px;

  background: rgba(0, 20, 43, 0.72);

  font-family: var(--mobile-font-ui);
  color: var(--mobile-color-foreground);
}

.mobile-station-dashboard-title {
  margin: 0 0 8px;
  padding: 0 2px;

  font-size: 0.70rem;
  line-height: 1.15;
  font-weight: 500;

  letter-spacing: 0.02em;
  color: var(--mobile-color-foreground-90);
}


/* ------------------------------------------------------------
   STRUCTURE GÉNÉRALE
------------------------------------------------------------ */

.mobile-station-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.mobile-station-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mobile-grid-gap);
}


/* ------------------------------------------------------------
   PAVÉS
------------------------------------------------------------ */


.mobile-station-card-icon {
  width: 13px;
  height: 13px;

  flex: 0 0 13px;

  opacity: 0.9;
}


/* ------------------------------------------------------------
   TEMPÉRATURE + PICTO
------------------------------------------------------------ */

.mobile-station-temperature-row {
  margin-top: auto;

  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-station-current-icon {
  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-station-current-icon img,
.mobile-station-current-icon svg {
  display: block;

  width: 31px;
  height: 31px;

  max-width: 31px;
  max-height: 31px;
}


/* ------------------------------------------------------------
   CADRANS VENT — COMPOSANT COMMUN
------------------------------------------------------------ */

.mobile-station-card.mobile-wind-gauge-card {
  position: relative;
}

.mobile-wind-gauge-card > .mobile-station-card-head {
  margin-bottom: 0;
}

.mobile-wind-gauge-wrap {
  flex: 1;
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-wind-gauges-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;

  display: grid;
  grid-template-columns: repeat(2, 130px);
  gap: 0;
  justify-content: center;
  align-items: center;

  transform: translateY(-50%);
}

.mobile-wind-gauge-pane {
  min-width: 0;
}

.mobile-wind-gauge-svg {
  --mobile-wind-gauge-speed-track: #ffffff;
  --mobile-wind-gauge-speed-hair: #53a9ff;
  --mobile-wind-gauge-direction-track: #ffffff;
  --mobile-wind-gauge-direction-hair: #53a9ff;
  --mobile-wind-gauge-gust: var(--mobile-color-accent);
  --mobile-wind-gauge-mean: rgba(255,255,255,.55);
  --mobile-wind-gauge-direction: #0080ff;

  display: block;

  width: min(100%, 130px);
  height: auto;

  overflow: visible;
}


.mobile-wind-gauge-label {
  font-family: var(--mobile-font-ui);
  font-size: 11px;
  font-weight: 400;

  fill: var(--mobile-color-foreground-90);

  text-anchor: middle;
  dominant-baseline: middle;
}

.mobile-wind-gauge-value {
  font-family: var(--mobile-font-display);
  font-size: 27px;
  font-weight: 600;
  fill: var(--mobile-color-foreground);
  text-anchor: middle;
  dominant-baseline: middle;
}

.mobile-wind-gauge-mean-value {
  fill: var(--mobile-wind-gauge-mean);
  font-weight: 600;
}

.mobile-wind-gauge-separator {
  fill: var(--mobile-color-foreground-80);
  font-weight: 500;
}

.mobile-wind-gauge-gust-value {
  fill: var(--mobile-wind-gauge-gust);
  font-weight: 700;
}


.mobile-wind-gauge-unit,
.mobile-wind-gauge-degree,
.mobile-wind-gauge-sector-svg {
  font-family: var(--mobile-font-display);
  font-size: 10px;
  font-weight: 500;
  fill: var(--mobile-color-foreground-80);
  text-anchor: middle;
  dominant-baseline: middle;
}

.mobile-wind-gauge-unit {
  font-weight: 600;
  font-size: 12px;
}

.mobile-wind-gauge-degree {
  font-size: 14px;
}

.mobile-wind-gauge-sector-svg {
  font-family: var(--mobile-font-ui);
  font-size: 12px;
  font-weight: 500;
  fill: var(--mobile-color-foreground);
}


.mobile-wind-gauge-legend {
  position: absolute;
  left: 20px;
  bottom: 7px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;

  font-family: var(--mobile-font-ui);
  font-size: 5.5px;
  line-height: 1;
  font-weight: 400;
  color: var(--mobile-color-foreground-80);

  pointer-events: none;
}

.mobile-wind-gauge-legend-item {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.mobile-wind-gauge-legend-line {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 1px;
}

.mobile-wind-gauge-legend-line--mean {
  background: rgba(255,255,255,.55);
}

.mobile-wind-gauge-legend-line--gust {
  background: var(--mobile-color-accent);
}

.mobile-wind-page-gauge-card {
  margin-bottom: 6px;
}


/* Tendance pression : valeur puis flèche à droite */
.mobile-station-card--pressure-trend,
.mobile-pressure-trend-card {
  position: relative;
  overflow: hidden;
}

.mobile-station-pressure-sparkline {
  position: absolute;
  top: 23px;
  left: 0;
  z-index: 0;

  display: block;
  width: 100%;
  height: calc(100% - 23px);

  pointer-events: none;
}

.mobile-station-card--pressure-trend > .mobile-station-card-head,
.mobile-station-card--pressure-trend > .mobile-station-value,
.mobile-station-card--pressure-trend > .mobile-station-trend-value,
.mobile-pressure-trend-card > .mobile-station-card-head,
.mobile-pressure-trend-card > .mobile-station-value {
  position: relative;
  z-index: 1;
}

.mobile-station-trend-value {
  margin-top: auto;
  position: relative;
  top: -10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

#mobileCurrentPressureTrend {
  order: 1;
}


#mobileCurrentTemperature {
  order: 1;
}

#mobileCurrentIcon {
  order: 2;

  position: relative;
  top: -2px !important;
}

  /* Remonte les valeurs/pictos des pavés standards */
  .mobile-station-dashboard .mobile-station-card:not(.mobile-station-card--pressure-trend) .mobile-station-value {
    position: relative;
    top: -10px;
  }


/* Triangle tendance pression disponible en portrait et paysage */
.mobile-station-pressure-triangle {
  display: inline-block;
  flex: 0 0 auto;
}

.mobile-station-pressure-triangle.up {
  width: 0;
  height: 0;

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--mobile-color-foreground);
}

.mobile-station-pressure-triangle.down {
  width: 0;
  height: 0;

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--mobile-color-foreground);
}

.mobile-station-pressure-triangle.stable {
  width: 10px;
  height: 3px;

  background: var(--mobile-color-foreground);
  border-radius: 2px;
}


/* Bulle extérieure : contour blanc discret + presque bord à bord */
.mobile-station-dashboard {
  width: calc(100vw - var(--mobile-grid-outer) - var(--mobile-grid-outer)) !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw + var(--mobile-grid-outer)) !important;
  margin-right: calc(50% - 50vw + var(--mobile-grid-outer)) !important;

  border: 1px solid var(--mobile-color-foreground-20) !important;
}

/* ------------------------------------------------------------
   GRAPHIQUE TEMPÉRATURE / HUMIDITÉ
------------------------------------------------------------ */

.mobile-station-chart-card {
  min-width: 0;

  padding: 7px 8px;

  border: 0;
  border-radius: 0;

  background: transparent;
}

.mobile-station-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  margin-bottom: 5px;
}

.mobile-station-chart-title {
  font-family: var(--mobile-font-ui);
  font-size: 0.48rem;
  line-height: 1.1;
  font-weight: 500;

  letter-spacing: 0.025em;

  color: var(--mobile-color-accent);
}

.mobile-station-chart-period {
  font-size: 0.40rem;
  font-weight: 400;

  color: var(--mobile-color-foreground-60);
}

.mobile-station-chart-wrap {
  position: relative;

  width: 100%;
  height: 145px;
}

.mobile-station-chart-wrap canvas {
  display: block;

  width: 100% !important;
  height: 100% !important;
}

/* ============================================================
   DISPOSITION FINALE — LIGNE HAUTE + ZONE BASSE / GRAPHIQUE
============================================================ */

/* Portrait : 4 pavés puis graphique pleine largeur */
.mobile-station-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.mobile-station-data--bottom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-station-lower .mobile-station-chart-card {
  width: 100%;
  min-width: 0;
  margin: 0;
}


/* ============================================================
   ACCUEIL — SÉPARATEURS DES BULLES EN PORTRAIT
============================================================ */

@media (orientation: portrait) {

  .mobile-station-dashboard .mobile-station-card {
    position: relative;
    overflow: visible;
  }

  /* Trait supérieur de la grille accueil :
     au-dessus de Température / Humidité */
  .mobile-station-layout {
    background-image:
      var(--mobile-separator-horizontal);

    background-size: 100% 1px;
    background-position: top left;
    background-repeat: no-repeat;
  }

  /* Traits verticaux entre les deux colonnes */
  .mobile-dashboard-temperature-card::after,
  .mobile-station-card--pressure::after,
  .mobile-rain-detection-card::after,
  .mobile-dashboard-rain-history-card::after {
    content: "";
    position: absolute;

    top: 0;
    right: -3px;

    width: 2px;
    height: 100%;

    background:
      var(--mobile-separator-vertical);

    transform: scaleX(0.6);
    pointer-events: none;
  }

  /* Traits horizontaux entre les rangées de deux bulles */
  .mobile-dashboard-temperature-card::before,
  .mobile-station-card--pressure::before,
  .mobile-rain-detection-card::before,
  .mobile-dashboard-rain-history-card::before {
    content: "";
    position: absolute;

    left: 0;
    bottom: -3px;

    width: calc(200% + 6px);
    height: 2px;

    background:
      var(--mobile-separator-horizontal);

    transform: scaleY(0.6);
    pointer-events: none;
  }

  /* La grande bulle Vent occupe toute la largeur */
  .mobile-station-dashboard .mobile-wind-gauge-card::before {
    content: "";
    position: absolute;

    left: 0;
    bottom: -3px;

    width: 100%;
    height: 2px;

    background:
      var(--mobile-separator-horizontal);

    transform: scaleY(0.6);
    pointer-events: none;
  }
}



/* Paysage */


/* ============================================================
   PAYSAGE — SÉPARATEURS DES GRILLES
============================================================ */

@media (orientation: landscape) {

  /* ----------------------------------------------------------
     ACCUEIL — grille 12 colonnes
  ---------------------------------------------------------- */

  .mobile-station-dashboard .mobile-station-card {
    position: relative;
    overflow: visible;
  }

  /* Trait supérieur de la grille */
  .mobile-station-dashboard .mobile-station-layout {
    background-image:
      var(--mobile-separator-horizontal);

    background-size: 100% 1px;
    background-position: top left;
    background-repeat: no-repeat;
  }

  /*
   * Première ligne :
   * Température | Humidité | Détection pluie | Intensité pluie
   *
   * Deuxième ligne :
   * Pression | Tendance | Pluie 24 h | Historique pluie
   */
  .mobile-dashboard-temperature-card::after,
  .mobile-dashboard-humidity-card::after,
  .mobile-rain-detection-card::after,
  .mobile-station-card--pressure::after,
  .mobile-station-card--pressure-trend::after,
  .mobile-station-card--rain24::after {
    content: "";
    position: absolute;

    top: 0;
    right: -3px;

    width: 2px;
    height: 100%;

    background:
      var(--mobile-separator-vertical);

    transform: scaleX(0.6);
    transform-origin: center;
    pointer-events: none;
  }

  /* Séparation sous la première ligne */
  .mobile-dashboard-temperature-card::before,
  .mobile-dashboard-humidity-card::before,
  .mobile-rain-detection-card::before,
  .mobile-station-card--rain-intensity::before {
    content: "";
    position: absolute;

    left: 0;
    bottom: -3px;

    width: 100%;
    height: 2px;

    background:
      var(--mobile-separator-horizontal);

    transform: scaleY(0.6);
    transform-origin: center;
    pointer-events: none;
  }

  /* Séparation sous la deuxième ligne */
  .mobile-station-card--pressure::before,
  .mobile-station-card--pressure-trend::before,
  .mobile-station-card--rain24::before,
  .mobile-dashboard-rain-history-card::before {
    content: "";
    position: absolute;

    left: 0;
    bottom: -3px;

    width: 100%;
    height: 2px;

    background:
      var(--mobile-separator-horizontal);

    transform: scaleY(0.6);
    transform-origin: center;
    pointer-events: none;
  }

  /* Troisième ligne : séparation Vent / graphique */
  .mobile-station-dashboard .mobile-wind-gauge-card::after {
    content: "";
    position: absolute;

    top: 0;
    right: -3px;

    width: 2px;
    height: 100%;

    background:
      var(--mobile-separator-vertical);

    transform: scaleX(0.6);
    transform-origin: center;
    pointer-events: none;
  }


  /* ----------------------------------------------------------
     PRESSION / PLUIE / VENT — grilles 2 × 2
     Température/Humidité possède déjà ses règles paysage.
  ---------------------------------------------------------- */

  :is(
    .mobile-pressure-cards,
    .mobile-rain-cards,
    .mobile-wind-cards
  )
  > .mobile-station-card {
    position: relative;
    overflow: visible;
  }

  /* Séparateur vertical central */
  :is(
    .mobile-pressure-cards,
    .mobile-rain-cards,
    .mobile-wind-cards
  )
  > .mobile-station-card:nth-child(odd)::after {
    content: "";
    position: absolute;

    top: 0;
    right: calc(var(--mobile-card-gap) / -2);

    width: 2px;
    height: 100%;

    background:
      var(--mobile-separator-vertical);

    transform: scaleX(0.6);
    transform-origin: center;
    pointer-events: none;
  }

  /* Séparateur horizontal central */
  :is(
    .mobile-pressure-cards,
    .mobile-rain-cards,
    .mobile-wind-cards
  )
  > .mobile-station-card:nth-child(-n+2)::before {
    content: "";
    position: absolute;

    bottom: calc(var(--mobile-card-gap) / -2);
    left: 0;

    width: 100%;
    height: 2px;

    background:
      var(--mobile-separator-horizontal);

    transform: scaleY(0.6);
    transform-origin: center;
    pointer-events: none;
  }
}


/* ============================================================
   HARMONISATION FINALE DES PAVÉS
============================================================ */


.mobile-rain-detection-card {
  display: none;
}

.mobile-rain-detection-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.mobile-rain-detection-no-rain,
.mobile-rain-detection-rain {
  display: block;
  width: 34px;
  height: auto;
}

.mobile-rain-detection-rain {
  display: none;
}
.mobile-rain-drop-fill {
  fill: #53a9ff;
  stroke: none;
}

.mobile-rain-drop-outline {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.mobile-rain-detection-rain.is-raining .mobile-rain-fill-clip--all {
  animation: mobile-rain-fill-all 3s infinite linear;
}

@keyframes mobile-rain-fill-all {
  0% {
    y: 0px;
    height: 0px;
  }

  42% {
    y: 0px;
    height: 195px;
  }

  58% {
    y: 0px;
    height: 195px;
  }

  100% {
    y: 195px;
    height: 0px;
  }
}


.mobile-dashboard-rain-history-head,
.mobile-dashboard-rain-history-wrap {
  display: none;
}

/* Portrait : bulle vent sur toute la largeur */
@media (orientation: portrait) {

  .mobile-rain-detection-card {
    display: flex;
  }
  .mobile-station-data--top,
  .mobile-station-data--bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mobile-station-data--top > .mobile-wind-gauge-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .mobile-station-data--top > .mobile-station-card:not(.mobile-wind-gauge-card),
  .mobile-station-data--bottom > .mobile-station-card {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .mobile-station-lower .mobile-station-chart-card {
    grid-column: 1;
    width: 100%;
  }

  .mobile-dashboard-rain-history-head {
    display: flex;
  }

  .mobile-dashboard-rain-history-wrap {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: auto;
    transform: translateY(8px);
  }

  #mobileDashboardRainChart {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Aligne la zone basse des bulles du dashboard */
  .mobile-station-dashboard
  .mobile-station-card:not(.mobile-station-card--pressure-trend)
  .mobile-station-value,
  .mobile-station-dashboard
  .mobile-station-trend-value {
    top: 0;
  }


  .mobile-rain-detection-wrap {
    transform: translateY(1px);
  }


  /* Ordre final des bulles du dashboard en portrait */
  .mobile-station-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .mobile-station-data--top,
  .mobile-station-lower,
  .mobile-station-data--bottom {
    display: contents;
  }

  .mobile-dashboard-temperature-card {
    order: 1;
  }

  .mobile-dashboard-humidity-card {
    display: flex;
    order: 2;
  }

  .mobile-station-card--pressure {
    order: 3;
  }

  .mobile-station-card--pressure-trend {
    order: 4;
  }

  .mobile-wind-gauge-card {
    order: 5;
    grid-column: 1 / -1 !important;
  }

  .mobile-rain-detection-card {
    order: 6;
  }

  .mobile-station-card--rain-intensity {
    order: 7;
  }

  .mobile-dashboard-rain-history-card {
    order: 8;
  }

  .mobile-station-card--rain24 {
    order: 9;
  }

  .mobile-station-dashboard .mobile-station-chart-card {
    order: 10;
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  .mobile-station-current-icon {
    transform: translateY(5px);
  }

}


/* Paysage : bulle vent = 2 colonnes, 3 bulles simples */
@media (orientation: landscape) {

  .mobile-wind-gauge-card .mobile-wind-gauges-row {
    margin-top: auto;
    margin-bottom: auto;
  }

  .mobile-rain-detection-wrap {
    transform: translateY(5px);
  }


  .mobile-station-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
  }

  .mobile-station-data--top,
  .mobile-station-lower,
  .mobile-station-data--bottom {
    display: contents;
  }

  .mobile-station-data--top > .mobile-station-card:not(.mobile-wind-gauge-card),
  .mobile-station-data--bottom > .mobile-station-card {
    grid-column: span 3 !important;
    grid-row: auto !important;
  }

  .mobile-dashboard-temperature-card { order: 1; }
  .mobile-dashboard-humidity-card { order: 2; }

  .mobile-rain-detection-card {
    display: flex;
    order: 3;
  }

  .mobile-dashboard-rain-history-card {
    order: 8;
  }
  .mobile-station-card--pressure { order: 5; }
  .mobile-station-card--pressure-trend { order: 6; }
  .mobile-station-card--rain-intensity { order: 4; }
  .mobile-station-card--rain24 { order: 7; }

  .mobile-wind-gauge-card {
    order: 9;
    grid-column: span 5 !important;
    grid-row: auto !important;
  }

  .mobile-station-dashboard .mobile-station-chart-card {
    order: 10;
    grid-column: span 7 !important;
    grid-row: auto !important;
    width: 100%;
    height: 150px !important;
    min-height: 0 !important;
    margin: 0;
  }

  .mobile-station-dashboard .mobile-station-chart-wrap {
    height: calc(100% - 20px) !important;
    min-height: 0 !important;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .mobile-station-dashboard #mobileDashboardYearTempChart {
    height: 210px !important;
    min-height: 280px;
    touch-action: pan-y;
  }


  .mobile-dashboard-rain-history-head {
    display: flex;
  }

  .mobile-dashboard-rain-history-wrap {
    display: block;
    position: relative;
    width: 100%;
    height: 62px;
    min-height: 0;
    margin-top: auto;
    transform: translateY(5px);
  }

  #mobileDashboardRainChart {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Ligne basse des valeurs du dashboard paysage */
  .mobile-station-dashboard
  .mobile-station-card:not(.mobile-station-card--pressure-trend)
  .mobile-station-value,
  .mobile-station-dashboard
  .mobile-station-trend-value {
    top: 0;
  }


}

/* Légende sous le graphique Température / Humidité */
.mobile-station-chart-legend {
  margin-top: 4px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  font-family: var(--mobile-font-ui);
  font-size: 0.43rem;
  line-height: 1;
  font-weight: 400;

  color: var(--mobile-color-foreground-80);
}

.mobile-station-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.mobile-station-chart-legend-square {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 1px;
}

.mobile-station-chart-legend-square--temperature {
  background: var(--mobile-color-foreground);
}

.mobile-station-chart-legend-square--humidity {
  background: var(--mobile-color-accent);
}

.mobile-dashboard-year-temp-swatch {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 1px;
}

.mobile-dashboard-year-temp-swatch--min {
  background: #53a9ff;
}

.mobile-dashboard-year-temp-swatch--avg {
  position: relative;
  width: 11px;
  height: 7px;
  flex: 0 0 11px;
  border-radius: 0;
  background: transparent;
}

.mobile-dashboard-year-temp-swatch--avg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 1px;
  background: #53a9ff;
}

.mobile-dashboard-year-temp-swatch--avg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background: #53a9ff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-dashboard-year-temp-swatch--max {
  background: #ff5f7e;
}

.mobile-dashboard-year-temp-swatch--rain {
  background: linear-gradient(
    to bottom,
    rgba(150,220,255,.18) 0%,
    rgba(95,190,255,.48) 35%,
    rgba(30,120,205,.95) 100%
  );
}

.mobile-dashboard-year-temp-swatch--frost {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.92) 0%,
    rgba(180,225,255,.55) 28%,
    rgba(40,126,215,.95) 100%
  );
}

.mobile-station-chart-legend {
  margin-top: 0 !important;
}

/* Centre le titre du tableau station */
.mobile-station-dashboard-title {
  text-align: center;
}


/* Pages mobiles : typographie principale */
.mobile-ephemerides,
.mobile-ephemerides h1,
.mobile-ephemerides h2,
.mobile-ephemerides h3,
.mobile-ephemerides h4,
.mobile-ephemerides button,
.mobile-ephemerides p,
.mobile-ephemerides span,
.mobile-ephemerides div {
  font-family: var(--mobile-font-ui);
}

/* Éphémérides mobile : titre sans icône */
.mobile-ephemerides > h3 .module-icon,
.mobile-ephemerides h3 .module-icon {
  display: none !important;
}

/* Titre Éphémérides */
.mobile-ephemerides > h3,
.mobile-ephemerides h3 {
  margin: 10px 0 12px;
  padding: 0 8px;

  font-family: var(--mobile-font-display) !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;

  color: var(--mobile-color-accent) !important;
  text-align: center;
}

/* Éphémérides portrait */
@media (orientation: portrait) {
  .mobile-ephemerides .celestial-heading-icon {
    font-size: 28px !important;
    position: relative;
    top: -2px;
  }
}

/* Éphémérides : phase lunaire agrandie en portrait et paysage */
.mobile-ephemerides .celestial-moon-symbol {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
}

/* Éphémérides paysage */
@media (orientation: landscape) {
  .mobile-ephemerides .celestial-time {
    font-size: 15px !important;
    font-weight: 500 !important;
  }

  .mobile-ephemerides .celestial-caption {
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: .6px !important;
  }

  .mobile-ephemerides .celestial-heading-icon {
    font-size: 32px !important;
    position: relative;
    top: -2px;
  }

  .mobile-ephemerides > h3,
  .mobile-ephemerides h3 {
    margin-bottom: 18px !important;
  }

  .mobile-ephemerides .celestial-heading {
    margin-bottom: -34px !important;
  }

  .mobile-ephemerides .celestial-separator {
    margin: 10px 8px !important;
  }
}

/* Phase lunaire mobile : rendu final */
.mobile-ephemerides .celestial-moon-symbol {
  background-color: transparent !important;
  background-size: 124% 124% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  transform: rotate(-21deg) !important;
}

/* ============================================================
   PRÉVISIONS À 3 JOURS — BULLES MOBILE
============================================================ */

.mobile-forecast-content #weather-widget {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.mobile-forecast-content #weather-cell,
.mobile-forecast-content .forecast-day {
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-forecast-content #weather-cell {
  position: relative;
  transform: none;
  gap: 8px;
  height: 150px;
  min-height: 0;
  justify-content: flex-start;
}

.mobile-forecast-content #forecast {
  display: contents;
}

.mobile-forecast-content .current-weather {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.mobile-forecast-content .temperature-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-forecast-content #weather-icon,
.mobile-forecast-content .forecast-day .day-icon {
  line-height: 0;
  margin: 2px 0;
}

.mobile-forecast-content #description,
.mobile-forecast-content .forecast-day .day-description {
  display: block;
  margin: 3px 0 5px;
  min-height: 0;

  font-size: .70rem;
  line-height: 1.15;
  text-align: center;
  opacity: .90;
}

@media (orientation: landscape) {
  .mobile-forecast-content #weather-widget {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
}

/* ============================================================
   PRÉVISIONS À 3 JOURS — STYLE IDENTIQUE AU DASHBOARD
============================================================ */

.mobile-forecast-content #weather-cell,
.mobile-forecast-content .forecast-day {
  min-width: 0;
  min-height: 72px;

  padding: 7px 8px;

  border: 0 !important;
  border-radius: 0 !important;

  background: var(--mobile-color-surface) !important;

  box-shadow: none !important;
}

.mobile-forecast-content .forecast-day {
  height: 150px;
  min-height: 0;
}

.mobile-forecast-content .forecast-day .day-title {
  flex: 0 0 auto;
}

.mobile-forecast-content .forecast-day .day-content {
  flex: 1;
  min-height: 0;
  width: 100%;

  display: grid;
  grid-template-rows: .7fr auto auto 1.3fr auto;
  justify-items: center;
  align-items: center;
}

.mobile-forecast-content .forecast-day .day-icon {
  grid-row: 2;
  margin: 0;
}

.mobile-forecast-content .forecast-day .day-description {
  grid-row: 3;
  margin: 2px 0 0;
}

.mobile-forecast-content .forecast-day .day-content .day-temp {
  grid-row: 5;
  margin: 0;
}

.mobile-forecast-content .forecast-day .day-title {
  margin: 0 0 5px;

  font-family: var(--mobile-font-ui);
  font-size: 0.58rem;
  line-height: 1.1;
  font-weight: 500;

  text-transform: uppercase;
  letter-spacing: 0.025em;

  color: var(--mobile-color-accent);
  text-align: center;
}


.mobile-forecast-content #weather-cell > .mobile-station-card-head {
  margin-bottom: 5px;
  font-size: 0.58rem;
  line-height: 1.1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--mobile-color-accent);
  text-align: center;
  justify-content: center;
}

.mobile-forecast-content #temperature {
  display: block;
  font-family: var(--mobile-font-display);
  font-size: 1.70rem !important;
  line-height: 1;
  font-weight: 600 !important;

  color: var(--mobile-color-foreground);
  text-align: center;
}

.mobile-forecast-content .forecast-day .day-temp {
  margin-top: auto;
  font-family: var(--mobile-font-display);
  font-size: 1.35rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;

  color: var(--mobile-color-foreground);
  text-align: center;
}

/* ============================================================
   PRÉVISIONS 3 JOURS — PORTRAIT
   1 bulle tendance + 3 bulles prévisions alignées
============================================================ */

@media (orientation: portrait) {

  .mobile-forecast-content #weather-widget {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  /* Bulle Tendance actuelle sur toute la largeur */
  .mobile-forecast-content #weather-cell {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  /* Les 3 prévisions occupent chacune une colonne */
  .mobile-forecast-content .forecast-day {
    width: 100%;
  }
}

/* ============================================================
   PRÉVISIONS 3 JOURS — AJUSTEMENT PAYSAGE
============================================================ */

@media (orientation: landscape) {

  /* Les 4 bulles utilisent la même grille verticale interne */
  .mobile-forecast-content .current-weather {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;

    flex: 1;
    min-height: 0;
    width: 100%;

    display: grid;
    grid-template-rows: .7fr auto auto 1.3fr auto;
    justify-items: center;
    align-items: center;
    gap: 0;
  }

  .mobile-forecast-content .temperature-info {
    display: contents;
  }

  .mobile-forecast-content #weather-icon {
    grid-row: 2;
    margin: 0;
    transform: translateY(-6px);
  }

  .mobile-forecast-content #description {
    grid-row: 3;
    margin: 2px 0 0;
  }

  .mobile-forecast-content #temperature {
    grid-row: 5;
    margin: 0;
  }

  .mobile-forecast-content .forecast-day .day-icon {
    margin: 0;
  }

  .mobile-forecast-content .forecast-day .day-description {
    margin: 2px 0 0;
  }

  .mobile-forecast-content .forecast-day .day-temp {
    transform: none;
  }

  .mobile-forecast-content #description {
    transform: translateY(-10px);
  }
}

/* Prévisions : unités */
.mobile-forecast-content .forecast-day .day-temp small {
  font-size: inherit !important;
  font-weight: inherit;
  color: inherit;
}

.mobile-forecast-content .forecast-unit {
  margin-left: 1px !important;
  font-size: 0.58em !important;
  font-weight: 500;
  color: var(--mobile-color-foreground-80);
}

/* Tendance actuelle : petit espace avant °C */
.mobile-forecast-content .forecast-current-unit {
  margin-left: 2px !important;
  font-size: 0.58em !important;
  font-weight: 500;
  color: var(--mobile-color-foreground-80);
}

/* Prévisions : description finale */
.mobile-forecast-content .forecast-day .day-description {
  font-family: var(--mobile-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}


.mobile-forecast-content .forecast-day .day-description {
  margin-top: 0;
  margin-bottom: 3px;
}


/* ============================================================
   ACCUEIL — TITRE CONDITIONS MÉTÉO + CONTENEUR SANS BORDURE
============================================================ */

.mobile-station-dashboard {
  margin-top: 0 !important;

  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.mobile-station-dashboard-title {
  margin: 2px 0 14px !important;
  padding: 0 !important;

  font-family: var(--mobile-font-display) !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;

  color: var(--mobile-color-accent) !important;
  text-align: center !important;
}


/* ============================================================
   TEMPÉRATURE / HUMIDITÉ — CADRAN TEMPÉRATURE
============================================================ */

.mobile-temperature-gauge-shell {
  position: relative;
  width: 100% !important;
  max-width: none;
  margin: 0 0 6px !important;
  line-height: 0;
  overflow: visible;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent !important;
}

#mobile-temperature-gauge {
  display: block;
  width: auto;
  height: 100%;
  max-width: 210px;
  max-height: 136px;
  aspect-ratio: 360 / 200;
  background: transparent;
  overflow: visible;
}

#mobile-temperature-gauge text {
  font-family: var(--mobile-font-ui);
  text-anchor: middle;
  dominant-baseline: middle;
}

.mobile-temperature-svg-mark {
  font-size: 12px;
  font-weight: 400;
  fill: var(--mobile-color-foreground-90);
}

#mobile-temperature-gauge-needle {
  transition: none;
}

/* ============================================================
   TEMPÉRATURE / HUMIDITÉ — TITRE + BULLES DASHBOARD
============================================================ */

.mobile-temperature-humidity {
  width: calc(100% - 8px);
  margin: 0 auto;
  box-sizing: border-box;
}


.mobile-temperature-humidity-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mobile-card-gap);

  width: 100%;
  margin-top: 0;
}

.mobile-temperature-humidity-cards .mobile-station-card {
  position: relative;
  background: transparent !important;
  overflow: visible;
}

/* Séparateur vertical entre les deux colonnes */
.mobile-temperature-humidity-cards
  .mobile-station-card:nth-child(odd)::after {
  content: "";
  position: absolute;

  top: 0;
  right: calc(var(--mobile-card-gap) / -2);

  width: 2px;
  height: 100%;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.12) 20%,
      rgba(255, 255, 255, 0.20) 50%,
      rgba(255, 255, 255, 0.12) 80%,
      rgba(255, 255, 255, 0.05) 100%
    );

  transform: scaleX(0.6);
  transform-origin: center;
  pointer-events: none;
}

/* Séparateur horizontal entre les deux rangées */
.mobile-temperature-humidity-cards
  .mobile-station-card:nth-child(-n+2)::before {
  content: "";
  position: absolute;

  bottom: calc(var(--mobile-card-gap) / -2);
  left: 0;

  width: 100%;
  height: 2px;

  background:
    var(--mobile-separator-horizontal);

  transform: scaleY(0.6);
  transform-origin: center;
  pointer-events: none;
}


/* Température / Humidité : triangles min / max */
.mobile-temp-triangle {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
}

.mobile-temp-triangle--min {
  position: relative;
  top: 2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--mobile-color-accent);
}

.mobile-temp-triangle--max {
  position: relative;
  top: 1px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--mobile-color-red);
}

/* ============================================================
   ÉPHÉMÉRIDES — PORTRAIT : LUNE + STATUT
============================================================ */

@media (orientation: portrait) {

  /* Recentrage visuel de la Lune sur son axe */
  .mobile-ephemerides .celestial-moon-symbol {
    position: relative;
    left: 1px;
    top: 0;
  }
}

/* Éphémérides portrait : correction finale marqueur Lune + statut */
@media (orientation: portrait) {

  /* Le groupe doit rester exactement au point calculé par le JS */
  .mobile-ephemerides .celestial-moon-marker {
    scale: none !important;
    transform-box: initial !important;
    transform-origin: initial !important;
  }

  /* Taille finale du disque lunaire */
  .mobile-ephemerides .celestial-moon-marker-body {
    r: 12.5px !important;
  }

  /* Texte lunaire */
  .mobile-ephemerides #moonVisibilityStatus,
  .mobile-ephemerides #moonDirectionStatus {
    font-size: 12px !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
  }

  .mobile-ephemerides #moonVisibilityStatus {
    transform: translateY(5px) !important;
  }

  .mobile-ephemerides #moonDirectionStatus {
    transform: translateY(-5px) !important;
  }
}

/* Éphémérides paysage */
@media (orientation: landscape) {
  .mobile-ephemerides #sunPhaseStatus,
  .mobile-ephemerides #moonVisibilityStatus,
  .mobile-ephemerides #moonDirectionStatus {
    font-size: 12px !important;
    font-weight: 300 !important;
  }

  .mobile-ephemerides #sunPhaseStatus {
    transform: translateY(3px) !important;
  }

  .mobile-ephemerides #moonVisibilityStatus {
    transform: translateY(3px) !important;
  }

  .mobile-ephemerides #moonDirectionStatus {
    transform: translateY(-3px) !important;
  }

  .mobile-ephemerides .celestial-moon-details {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  .mobile-ephemerides .celestial-moon-details .moon-detail-label {
    font-size: inherit !important;
  }

  .mobile-ephemerides .moon-location-note {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
}

/* ============================================================
   PRESSION ATMOSPHÉRIQUE
============================================================ */

.mobile-pressure {
  width: calc(100% - 8px);
  margin: 0 auto;
  box-sizing: border-box;
}


/* Demi-cadran : même largeur que le cadran température */
.mobile-pressure-gauge-shell {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 0 6px;
  line-height: 0;
  overflow: visible;

  display: flex;
  align-items: center;
  justify-content: center;
}

#mobile-pressure-gauge {
  display: block;
  width: 100%;
  max-width: 210px;
  height: auto;
  margin: 0 auto;
  background: transparent;
  overflow: visible;
}

#mobile-pressure-gauge text {
  font-family: var(--mobile-font-ui);
  text-anchor: middle;
  dominant-baseline: middle;
}

.mobile-pressure-svg-mark {
  font-size: 12px;
  font-weight: 400;
  fill: var(--mobile-color-foreground-90);
}

#mobile-pressure-gauge-needle {
  transition: none;
}

/* 2 bulles */
.mobile-pressure-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--mobile-card-gap) !important;
  width: 100% !important;
}


/* ============================================================
   PRESSION — GRAPHIQUE DU JOUR
============================================================ */

.mobile-pressure-lower {
  width: 100%;
}

.mobile-pressure-chart-card {
  margin: 0 0 8px;
  padding: 8px;
}


/* ============================================================
   PRESSION — HARMONISATION FINALE BULLES + GRAPHE
============================================================ */


/* Portrait : 4 bulles en 2 x 2 puis graphique dessous */
@media (orientation: portrait) {

  .mobile-pressure-lower {
    display: flex !important;
    flex-direction: column !important;
  }

  .mobile-pressure-cards {
    order: 1 !important;
    margin-bottom: var(--mobile-card-gap) !important;
  }

  .mobile-pressure-chart-card {
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ============================================================
   PRESSION — COPIE EXACTE DU CADRE BAS DU DASHBOARD
============================================================ */

@media (orientation: landscape) {

  .mobile-pressure {
    width: calc(100vw - 8px) !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw + 4px) !important;
    margin-right: calc(50% - 50vw + 4px) !important;

    padding-left: 8px !important;
    padding-right: 8px !important;

    box-sizing: border-box !important;
  }

  .mobile-pressure-lower {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: var(--mobile-card-gap) !important;
    align-items: stretch !important;
  }

  .mobile-pressure-cards {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    grid-template-rows: repeat(2, 72px) !important;
  }

  .mobile-pressure-cards .mobile-station-card {
    width: 100% !important;
  }

  .mobile-pressure-chart-card {
    grid-column: 3 / 7 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 150px !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .mobile-pressure-chart-wrap {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }

  .mobile-pressure-chart-wrap canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
}


/* ============================================================
   PLUVIOMÈTRE MOBILE
============================================================ */

.mobile-rain {
  width: calc(100% - 8px);
  margin: 0 auto;
  box-sizing: border-box;
}


/* Même largeur visuelle que Pression / Température */
.mobile-rain-gauge-shell {
  width: 100%;
  max-width: 210px;
  margin: 0 !important;
}

.mobile-rain-gauge-shell svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 4 bulles standard */
.mobile-rain-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}


/* ============================================================
   PLUVIOMÈTRE — BULLES IDENTIQUES AU DASHBOARD
============================================================ */

.mobile-rain-cards .mobile-station-card {
  width: 100%;
}


/* ============================================================
   PLUVIOMÈTRE — GRAPHE JOUR
============================================================ */

.mobile-rain-lower {
  width: 100%;
}

.mobile-pressure-chart-card,
.mobile-wind-chart-card,
.mobile-rain-chart-card {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mobile-rain-chart-card {
  min-width: 0;
  margin-top: 6px;
  padding: 7px 8px;
}

.mobile-pressure-chart-head,
.mobile-rain-chart-head {
  margin-bottom: 5px;
}

.mobile-pressure-chart-head,
.mobile-rain-chart-head,
.mobile-wind-chart-head {
  font-family: var(--mobile-font-ui);
  font-size: .48rem;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: .025em;
  color: var(--mobile-color-accent);
}


.mobile-pressure-chart-wrap,
.mobile-rain-chart-wrap {
  position: relative;
  width: 100%;
  height: 125px;
}

.mobile-pressure-chart-wrap canvas,
#mobileWindChart,
.mobile-rain-chart-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (orientation: landscape) {

  .mobile-rain {
    width: calc(100vw - 8px) !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw + 4px) !important;
    margin-right: calc(50% - 50vw + 4px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  .mobile-rain-lower {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    align-items: start;
  }

  .mobile-rain-cards {
    grid-column: 1 / 3;
    grid-row: 1;
    grid-template-rows: repeat(2, 72px);
  }

  .mobile-rain-chart-card {
    grid-column: 3 / 7;
    grid-row: 1;
    height: 150px;
    margin: 0;
  }
}


/* ============================================================
   TEMPÉRATURE / HUMIDITÉ — GRAPHIQUE
============================================================ */

.mobile-temperature-humidity-lower {
  display: block;
}

.mobile-temperature-humidity-chart-card {
  width: 100%;
  margin-top: var(--mobile-card-gap);
  box-sizing: border-box;
}

#mobileTemperatureHumidityChart {
  display: block;
  width: 100%;
  height: 100%;
}


@media (orientation: portrait) {
  .mobile-temperature-humidity-chart-wrap {
    height: 125px;
  }
}


/* Température / Humidité — layout paysage final */
@media (orientation: landscape) {

  .mobile-temperature-humidity {
    width: calc(100vw - 8px) !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw + 4px) !important;
    margin-right: calc(50% - 50vw + 4px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  .mobile-temperature-humidity-lower {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch !important;
  }

  .mobile-temperature-humidity-cards {
    grid-column: 1 / 3;
    grid-row: 1;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 72px);
    gap: var(--mobile-card-gap);

    width: 100%;
    height: 150px !important;
    margin-top: 0 !important;
  }

  .mobile-temperature-humidity-cards .mobile-station-card {
    position: relative;

    grid-column: auto !important;
    grid-row: auto !important;

    background: transparent !important;
    overflow: visible;
  }

  /* Séparateur vertical central */
  .mobile-temperature-humidity-cards
    .mobile-station-card:nth-child(odd)::after {
    content: "";
    position: absolute;

    top: 0;
    right: calc(var(--mobile-card-gap) / -2);

    width: 2px;
    height: 100%;

    background:
      var(--mobile-separator-vertical);

    transform: scaleX(0.6);
    transform-origin: center;
    pointer-events: none;
  }

  /* Séparateur horizontal central */
  .mobile-temperature-humidity-cards
    .mobile-station-card:nth-child(-n+2)::before {
    content: "";
    position: absolute;

    bottom: calc(var(--mobile-card-gap) / -2);
    left: 0;

    width: 100%;
    height: 2px;

    background:
      var(--mobile-separator-horizontal);

    transform: scaleY(0.6);
    transform-origin: center;
    pointer-events: none;
  }

  .mobile-temperature-humidity-chart-card {
    grid-column: 3 / 7;
    grid-row: 1;

    width: 100%;
    min-width: 0;
    height: 150px !important;
    min-height: 0 !important;
    margin: 0;
  }

  .mobile-temperature-humidity-chart-wrap {
    height: calc(100% - 20px) !important;
    min-height: 0 !important;
  }
}

/* ============================================================
   PLUVIOMÈTRE — LÉGENDE INTENSITÉ
============================================================ */

.mobile-rain-intensity-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 3px 7px;

  width: 100%;
  margin: -22px 0 8px;

  font-family: var(--mobile-font-ui);
  font-size: .43rem;
  line-height: 1.15;
  font-weight: 400;

  color: var(--mobile-color-foreground-80);
}

.mobile-rain-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.mobile-rain-legend-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
}

.mobile-rain-legend-dot--very-light {
  background: var(--mobile-color-rain-very-light);
}

.mobile-rain-legend-dot--light {
  background: var(--mobile-color-rain-light);
}

.mobile-rain-legend-dot--moderate {
  background: var(--mobile-color-rain-moderate);
}

.mobile-rain-legend-dot--strong {
  background: var(--mobile-color-rain-strong);
}

.mobile-rain-legend-dot--very-strong {
  background: var(--mobile-color-red);
}

/* ============================================================
   PLUVIOMÈTRE — CADRAN TYPE C
============================================================ */

.mobile-station-card.mobile-rain-gauge-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 0 6px;
}

/* ============================================================
   ANÉMOMÈTRE — CADRAN + ROSE DES VENTS
============================================================ */

.mobile-wind {
  width: 100%;
}

.mobile-wind-gauge-shell {
  position: relative;
  width: min(100%, 210px);
  max-width: 100%;
  margin: 0 auto 28px;
  line-height: 0;
  overflow: visible;
}

#mobile-wind-gauge {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  background: transparent;
}

#mobile-wind-gauge text {
  font-family: var(--mobile-font-ui);
}

.mobile-wind-dial-tick {
  stroke: var(--mobile-color-foreground-90);
}

.mobile-wind-dial-tick-minor {
  stroke: var(--mobile-color-foreground-60);
}

/*
 * Centre du cadran PC :
 * x = 180 / 360 = 50 %
 * y = 170 / 285 = 59,65 %
 */
.mobile-wind-compass {
  position: absolute;
  left: 50%;
  top: 59.65%;
  width: 104px !important;
  height: 104px !important;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mobile-wind-compass-rose,
.mobile-wind-compass-cardinals {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.mobile-wind-compass-rose {
  transform: scale(.69) !important;
  transform-origin: 50% 50%;
  border: 0;
  background: transparent;
  pointer-events: none;
  z-index: 1;
}

.mobile-wind-compass-cardinals {
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

.mobile-wind-compass-arrow {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 32%;
  height: 70%;

  transform:
    translate(-50%, -50%)
    rotate(var(--mobile-wind-page-arrow-rotation, 0deg));

  transform-origin: 50% 50%;
  object-fit: contain;

  filter:
    drop-shadow(0 0 4px var(--mobile-color-foreground-40));

  pointer-events: none;
  z-index: 3;

  transition: transform 2.5s ease-in-out;
}


/* Anémomètre — cadran visuellement aligné sur Pluviomètre / Pression */
#mobile-wind-gauge {
  transform: scale(1.16);
  transform-origin: 50% 50%;
}


/* Anémomètre — légende identique au principe PC */
.mobile-wind-legend {
  gap: 3px;

  font-family: var(--mobile-font-ui);
  font-size: .40rem;
  line-height: 1.05;
  color: var(--mobile-color-foreground-90);
}


.mobile-wind-legend-bar {
  display: block;
}

.mobile-wind-legend-bar--mean {
  background: var(--mobile-color-neon-soft);
}

.mobile-wind-legend-bar--gust {
  background: var(--mobile-color-neon);
}

/* Anémomètre — légende finale alignée sur le bord droit */
.mobile-wind > .mobile-wind-legend {
  position: relative !important;
  inset: auto !important;
  transform: none !important;

  width: 108px !important;
  margin: -22px 12px 18px auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.mobile-wind > .mobile-wind-legend .mobile-wind-legend-row {
  display: grid !important;
  grid-template-columns: 75px 28px !important;
  column-gap: 5px !important;
  align-items: center !important;
  width: 108px !important;
  justify-content: initial !important;
}

.mobile-wind > .mobile-wind-legend .mobile-wind-legend-row > span:first-child {
  display: block !important;
  width: 75px !important;
  text-align: left !important;
}

.mobile-wind > .mobile-wind-legend .mobile-wind-legend-bar {
  width: 28px !important;
  height: 3px !important;
}

/* ============================================================
   GRAPHIQUES — UNITÉS VERTICALES À DROITE
============================================================ */

.mobile-temperature-humidity-chart-wrap,
.mobile-pressure-chart-wrap,
.mobile-rain-chart-wrap,
.mobile-wind-chart-wrap {
  position: relative !important;
}

.mobile-temperature-humidity-chart-wrap::after,
.mobile-pressure-chart-wrap::after,
.mobile-rain-chart-wrap::after,
.mobile-wind-chart-wrap::after {
  position: absolute;
  top: 50%;
  right: -8px;
  z-index: 5;

  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);

  font-family: var(--mobile-font-ui);
  font-size: 0.58rem;
  line-height: 1;
  font-weight: 400;

  color: var(--mobile-color-foreground);
  opacity: 0.70;

  white-space: nowrap;
  pointer-events: none;
}

.mobile-temperature-humidity-chart-wrap::after {
  content: "°C / %";
}

.mobile-pressure-chart-wrap::after {
  content: "hpa";
}

.mobile-rain-chart-wrap::after {
  content: "mm";
}

.mobile-wind-chart-wrap::after {
  content: "km/h";
}


/* ============================================================
   ANÉMOMÈTRE — 4 BULLES
============================================================ */

.mobile-wind-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}


/* ============================================================
   ANÉMOMÈTRE — BULLES + EMPLACEMENT GRAPHIQUE
============================================================ */


/* Portrait : bulles 2 x 2 puis graphique dessous */
.mobile-wind-lower {
  display: block;
}

.mobile-wind-page-gauge-card {
  padding-top: 0 !important;
}

.mobile-wind-page-gauge-card .mobile-wind-gauges-row {
  margin-top: 0 !important;
  top: 40% !important;
}

.mobile-wind-chart-card {
  margin-top: 8px;
  overflow: hidden;
}

.mobile-wind-chart-head {
  padding: 6px 8px 3px;
}

.mobile-wind-chart-wrap {
  position: relative !important;
  width: calc(100% - 10px);
  height: 145px;
  padding: 0 !important;
  box-sizing: border-box;
  transform: translateX(-4px);
}


/* ============================================================
   ANÉMOMÈTRE — GRAPHIQUE VITESSE + DIRECTION
============================================================ */




.mobile-wind-direction-box {
  min-width: 0;
  padding: 3px 1px;

  border: 1px solid rgba(86,181,242,.24);
  border-radius: 5px;
  background: var(--mobile-color-surface-light);

  box-sizing: border-box;
  text-align: center;
}

.mobile-wind-direction-hour {
  display: block;

  margin-bottom: 2px;

  font-family: var(--mobile-font-ui);
  font-size: .34rem;
  line-height: 1;
  font-weight: 400;

  color: var(--mobile-color-foreground-40);
}

.mobile-wind-direction-value {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin-top: auto !important;

  font-family: var(--mobile-font-ui);
  font-size: .42rem;
  line-height: 1;
  font-weight: 500;

  color: var(--mobile-color-foreground);
}

/*
 * Graphe Vent :
 * pas de padding horizontal artificiel façon histogramme pluie.
 * Le canvas utilise toute la largeur disponible.
 */


/* Légende sous le graphique */
.mobile-wind-chart-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  width: 100%;
  padding: 3px 6px 7px;

  box-sizing: border-box;

  font-family: var(--mobile-font-ui);
  font-size: .40rem;
  line-height: 1;
  font-weight: 400;

  color: var(--mobile-color-foreground-80);
}

.mobile-wind-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.mobile-wind-chart-legend-swatch {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 1px;
}

/* Même teinte que l'arc Vitesse moyenne */
.mobile-wind-chart-legend-swatch--mean {
  background: rgba(255,255,255,.55);
}

/* Même vert fluo que l'arc Rafales */
.mobile-wind-chart-legend-swatch--gust {
  background: var(--mobile-color-accent);
}


/* ============================================================
   ANÉMOMÈTRE — BULLES HARMONISÉES + PAYSAGE
============================================================ */


#mobile-wind-direction {
  font-size: 1.35rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

#mobile-wind-direction-degrees {
  font-size: .78rem !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}


/* ------------------------------------------------------------
   PAYSAGE : 4 bulles à gauche / graphique à droite
------------------------------------------------------------ */
@media (orientation: landscape) {

  .mobile-wind {
    width: calc(100vw - 8px) !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw + 4px) !important;
    margin-right: calc(50% - 50vw + 4px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  .mobile-wind-lower {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  /* 2 colonnes × 2 lignes à gauche */
  .mobile-wind-cards {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    grid-template-rows: repeat(2, 72px) !important;
    margin: 0 !important;
  }

  .mobile-wind-cards .mobile-station-card {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Graphique à droite */
  .mobile-wind-chart-card {
    grid-column: 3 / 7 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    height: 150px !important;
    min-height: 150px !important;
  }

  /* Le canvas prend l'espace restant entre directions et légende */
  .mobile-wind-chart-wrap {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Direction du vent : seule exception spécifique en paysage */
  .mobile-wind-direction-value,
  #mobile-wind-direction,
  #mobile-wind-direction-degrees {
    font-family: var(--mobile-font-display) !important;
  }

  .mobile-wind-page-gauge-card .mobile-wind-gauges-row {
    grid-template-columns: repeat(2, 158px);
  }

  .mobile-wind-page-gauge-card .mobile-wind-gauge-svg {
    width: 158px;
    max-width: 158px;
  }

}

/* ============================================================
   ANÉMOMÈTRE — 24 DIRECTIONS INTÉGRÉES AU GRAPHE
============================================================ */

/* Une seule rangée intégrée, alignée exactement sur le plot */
.mobile-wind-chart-wrap > .mobile-wind-direction-strip {
  position: absolute !important;

  left: 30px !important;
  right: 8px !important;
  top: 7px !important;

  width: auto !important;
  height: 22px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(24, minmax(0, 1fr)) !important;
  gap: 0 !important;

  border-top: 1px solid var(--mobile-color-border) !important;
  border-left: 1px solid rgba(86,181,242,.22) !important;
  border-bottom: 1px solid var(--mobile-color-border) !important;

  background: var(--mobile-color-surface-light) !important;

  box-sizing: border-box !important;
  z-index: 3 !important;
}

/* Plus aucune bulle : uniquement les divisions horaires */
.mobile-wind-chart-wrap .mobile-wind-direction-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-right: 1px solid rgba(86,181,242,.18) !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-sizing: border-box !important;
}

/* Repère un peu plus marqué toutes les 3 heures */
.mobile-wind-chart-wrap .mobile-wind-direction-cell:nth-child(3n) {
  border-right-color: rgba(86,181,242,.34) !important;
}

.mobile-wind-chart-wrap .mobile-wind-direction-arrow {
  display: block !important;

  width: 8px !important;
  height: 14px !important;

  margin: 0 !important;

  object-fit: contain !important;

  transform:
    rotate(var(--mobile-wind-hour-arrow, 0deg)) !important;

  transform-origin: 50% 50% !important;

  opacity: .95 !important;
}

/* ============================================================
   NORMES DE HAUTEUR DES BULLES
============================================================ */

:root {
  --mobile-card-type-a-height: 72px;
  --mobile-card-type-b-height: 150px;
  --mobile-card-type-c-height: 150px;
  --mobile-card-stack-gap: 4px;
  --mobile-card-gap: 6px;
  --mobile-card-double-height: 148px;

  /* Séparateurs visuels communs */
  --mobile-separator-horizontal:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(255,255,255,0.12) 20%,
      rgba(255,255,255,0.20) 50%,
      rgba(255,255,255,0.12) 80%,
      transparent 100%
    );

  --mobile-separator-vertical:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255,255,255,0.12) 20%,
      rgba(255,255,255,0.20) 50%,
      rgba(255,255,255,0.12) 80%,
      transparent 100%
    );
}

.mobile-station-card--type-a {
  height: var(--mobile-card-type-a-height) !important;
  min-height: 0 !important;
}

.mobile-station-card--type-b {
  height: var(--mobile-card-type-b-height) !important;
  min-height: 0 !important;
}

.mobile-station-card--type-c {
  height: var(--mobile-card-type-c-height) !important;
  min-height: 0 !important;
}

/* ============================================================
   BULLES MÉTÉO — SOCLE COMMUN
============================================================ */

.mobile-station-card {
  min-width: 0;
  min-height: 72px;

  padding: 7px 8px;

  border: 0;
  border-radius: 0;

  background: transparent;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}


/* ============================================================
   PAGES SECONDAIRES — CARTES TRANSPARENTES + SÉPARATEURS
============================================================ */

:where(
  #mobileEphemerides,
  #mobileAirQuality,
  #mobileVigilanceMeteo,
  #mobileTemperatureHumidity,
  #mobilePressure,
  #mobileRain,
  #mobileWind,
  #mobileWebcam
) .mobile-station-card {
  position: relative;
  background: transparent !important;
  overflow: visible;
}

:where(
  #mobileEphemerides,
  #mobileAirQuality,
  #mobileVigilanceMeteo,
  #mobileTemperatureHumidity,
  #mobilePressure,
  #mobileRain,
  #mobileWind,
  #mobileWebcam
) .mobile-station-chart-card {
  background: transparent !important;
}



/* ============================================================
   MODULES — FERMETURE VISUELLE DES GRILLES
============================================================ */

/* Température / Pression / Pluie :
   fermeture visuelle identique en haut et en bas */
.mobile-temperature-humidity-cards,
.mobile-pressure-cards,
.mobile-rain-cards,
.mobile-wind-cards {
  background-image:
    var(--mobile-separator-horizontal),
    var(--mobile-separator-horizontal);

  background-size: 100% 1px, 100% 1px;
  background-position: top left, bottom left;
  background-repeat: no-repeat;
}



/* ============================================================
   VENT — SUPPRESSION DU FOND RESTANT DU GRAPHIQUE
============================================================ */

.mobile-wind-chart-card,
.mobile-wind-chart-wrap,
.mobile-wind-chart-wrap > .mobile-wind-direction-strip,
.mobile-wind-chart-wrap .mobile-wind-direction-cell,
.mobile-wind-direction-box {
  background: transparent !important;
  box-shadow: none !important;
}

/* Portrait : grille visuelle légère entre les cartes */
@media (orientation: portrait) {

  :where(
    #mobileEphemerides,
    #mobileAirQuality,
    #mobileVigilanceMeteo
  )
  .mobile-station-card:nth-child(odd)::after {
    content: "";
    position: absolute;

    top: 0;
    right: calc(var(--mobile-card-gap) / -2);

    width: 2px;
    height: 100%;

    background:
      var(--mobile-separator-vertical);

    transform: scaleX(0.6);
    transform-origin: center;
    pointer-events: none;
  }

  :where(
    #mobileEphemerides,
    #mobileAirQuality,
    #mobileVigilanceMeteo
  )
  .mobile-station-card:nth-child(-n+2)::before {
    content: "";
    position: absolute;

    bottom: calc(var(--mobile-card-gap) / -2);
    left: 0;

    width: 100%;
    height: 2px;

    background:
      var(--mobile-separator-horizontal);

    transform: scaleY(0.6);
    transform-origin: center;
    pointer-events: none;
  }
}

@media (orientation: portrait) {

  :is(
    .mobile-pressure-cards,
    .mobile-rain-cards,
    .mobile-wind-cards
  )
  > .mobile-station-card:nth-child(odd)::after {
    content: "";
    position: absolute;

    top: 0;
    right: calc(var(--mobile-card-gap) / -2);

    width: 2px;
    height: 100%;

    background: var(--mobile-separator-vertical);

    transform: scaleX(0.6);
    transform-origin: center;
    pointer-events: none;
  }

  :is(
    .mobile-pressure-cards,
    .mobile-rain-cards,
    .mobile-wind-cards
  )
  > .mobile-station-card:nth-child(-n+2)::before {
    content: "";
    position: absolute;

    bottom: calc(var(--mobile-card-gap) / -2);
    left: 0;

    width: 100%;
    height: 2px;

    background: var(--mobile-separator-horizontal);

    transform: scaleY(0.6);
    transform-origin: center;
    pointer-events: none;
  }
}


.mobile-station-card-head {
  display: flex;
  align-items: center;
  gap: 4px;

  margin-bottom: 5px;

  font-family: var(--mobile-font-ui);
  font-size: .48rem;
  line-height: 1.1;
  font-weight: 500;

  letter-spacing: .025em;

  color: var(--mobile-color-accent);
}

.mobile-station-value {
  margin-top: auto;

  font-family: var(--mobile-font-display);
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 600;

  color: var(--mobile-color-foreground);
  white-space: nowrap;
}

.mobile-station-unit {
  margin-left: 2px;

  font-family: var(--mobile-font-display);
  font-size: .58em;
  font-weight: 500;

  color: var(--mobile-color-foreground-80);
}

/* ============================================================
   ANÉMOMÈTRE — RECORDS VENT : HEURE
============================================================ */

.mobile-wind-record-time {
  flex: 0 0 auto !important;
  text-align: right !important;
}

/* Flèche : taille déjà validée */

.mobile-wind-record-arrow {
  display: block !important;

  object-fit: contain !important;

  transform:
    rotate(var(--mobile-wind-record-arrow, 0deg)) !important;

  transform-origin: 50% 50% !important;
}

/* ============================================================
   ANÉMOMÈTRE — RECORDS VENT : STRUCTURE COMMUNE
============================================================ */

/*
 * Structure commune des valeurs de records.
 * Le cercle directionnel suit la valeur et son unité.
 */
.mobile-wind-record-value {
  position: relative !important;

  display: flex !important;
  align-items: flex-end !important;

  width: 100% !important;
  margin-top: auto !important;

  padding-left: 0 !important;

  font-family: var(--mobile-font-display) !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;

  color: var(--mobile-color-foreground) !important;
  white-space: nowrap !important;
}

/* Espace normal entre 27 et km/h */
.mobile-wind-record-value > .mobile-station-unit:not(.mobile-wind-record-time) {
  margin-left: 3px !important;
}

/*
 * Cercle directionnel :
 * dimensions et alignement validés.
 */
.mobile-wind-record-value .mobile-wind-record-arrow-wrap {
  position: relative !important;

  left: auto !important;
  right: auto !important;
  top: 2px !important;
  bottom: auto !important;

  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;

  margin: 0 0 0 5px !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-end !important;

  border: 1px solid var(--mobile-color-foreground) !important;
  border-radius: 50% !important;
  background: var(--mobile-color-surface) !important;
  box-sizing: border-box !important;
}

.mobile-wind-record-value .mobile-wind-record-arrow {
  width: 10px !important;
  height: 18px !important;
}

/*
 * Même taille ET même baseline que l'unité km/h.
 */
.mobile-wind-record-value .mobile-wind-record-time {
  position: static !important;
  top: auto !important;
  bottom: auto !important;

  margin-left: auto !important;
  margin-bottom: 0 !important;

  align-self: baseline !important;

  font-family: var(--mobile-font-display) !important;
  font-size: .58em !important;
  line-height: 1 !important;
  font-weight: 500 !important;

  color: var(--mobile-color-foreground-80) !important;
}

/* ============================================================
   ANÉMOMÈTRE — RECORDS MOIS / ANNÉE : DATE AU-DESSUS DE L'HEURE
============================================================ */
.mobile-wind-record-date {
  font-family: var(--mobile-font-display) !important;
  font-size: .52em !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: var(--mobile-color-foreground-80) !important;

  text-align: center !important;
  width: 100% !important;
  margin: 0 0 2px 0 !important;
}

.mobile-wind-record-datetime .mobile-wind-record-time {
  font-family: var(--mobile-font-display) !important;
  font-size: .58em !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: var(--mobile-color-foreground-80) !important;

  position: static !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

/* ============================================================
   RECORDS MOIS / ANNÉE — DATE + HEURE CENTRÉES À DROITE
   Sans faire remonter valeur + unité
============================================================ */

.mobile-wind-record-datetime {
  margin-left: auto !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-end !important;

  align-self: flex-end !important;

  line-height: 1 !important;
  white-space: nowrap !important;
}

/* ============================================================
   RECORDS MOIS / ANNÉE — VALEUR + UNITÉ ALIGNÉES SUR L'HEURE
============================================================ */

/*
 * Valeur + km/h descendus sur la même ligne basse
 * que l'heure, sans modifier la date au-dessus.
 */

/* ============================================================
   EXCEPTION RAFALE MAX JOUR
   Une seule ligne : valeur + unité + heure sur la même baseline
============================================================ */

#mobileWindDayRecordTime {
  align-self: baseline !important;

  position: relative !important;
  top: 1px !important;
  bottom: auto !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* ============================================================
   RAFALE MAX JOUR — vraie baseline sur une seule ligne
============================================================ */

.mobile-wind-record-value--day {
  align-items: baseline !important;
}

.mobile-wind-record-value--day > #mobileWindDayRecordValue,
.mobile-wind-record-value--day > .mobile-station-unit,
.mobile-wind-record-value--day > #mobileWindDayRecordTime {
  align-self: baseline !important;
  transform: none !important;
}

/* ============================================================
   RECORDS MOIS / ANNÉE — PAYSAGE
   1 titre
   2 date + heure
   3 valeur + unité + cercle
============================================================ */

@media (orientation: landscape) {

  .mobile-wind-record-card--long {
    display: flex !important;
  }

  .mobile-wind-record-card .mobile-wind-record-value {
    display: grid !important;

    grid-template-columns:
      auto
      auto
      1fr
      20px !important;

    grid-template-rows:
      auto
      auto !important;

    align-items: baseline !important;

  }
  /* Ligne 3 : flèche */
  .mobile-wind-record-card .mobile-wind-record-arrow-wrap {
    grid-column: 4 !important;
    grid-row: 2 !important;
    top: 2px !important;
    margin-left: 0 !important;
    justify-self: end !important;
    align-self: end !important;
  }

  /* Ligne 3 : valeur */
  .mobile-wind-record-value--day > #mobileWindDayRecordValue,
  .mobile-wind-record-card--long #mobileWindMonthRecordValue,
  .mobile-wind-record-card--long #mobileWindYearRecordValue {
    grid-column: 1 !important;
    grid-row: 2 !important;

    align-self: end !important;
  }

  /* Ligne 3 : km/h */
  .mobile-wind-record-card
  > .mobile-wind-record-value
  > .mobile-station-unit {
    grid-column: 2 !important;
    grid-row: 2 !important;

    align-self: end !important;
  }

  /* Heure : alignement bas dans le groupe date/heure */
  .mobile-wind-record-card--long .mobile-wind-record-time {
    align-self: end !important;

  }

  /* Date + heure sur la même ligne */

  .mobile-wind-record-card--long .mobile-wind-record-datetime {
    display: flex !important;
    position: relative !important;
    top: 2px !important;
    flex-direction: row !important;

    align-items: baseline !important;
    justify-content: center !important;

    gap: 5px !important;

    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    width: 100% !important;

    margin: 0 0 3px 0 !important;
  }

  .mobile-wind-record-card--long .mobile-wind-record-date,
  .mobile-wind-record-card--long .mobile-wind-record-time {
    position: static !important;
    top: auto !important;

    width: auto !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  /* Ajustement vertical de la ligne basse */
  /* Ligne basse : valeur + unité + cercle descendus ensemble */
  .mobile-wind-record-value--day > #mobileWindDayRecordValue,
  .mobile-wind-record-card--long #mobileWindMonthRecordValue,
  .mobile-wind-record-card--long #mobileWindYearRecordValue,
  .mobile-wind-record-card > .mobile-wind-record-value > .mobile-station-unit {
    position: relative !important;
    top: 0 !important;
  }

  /* MAX JOUR : heure sur la ligne intermediaire */
  .mobile-wind-record-value--day > #mobileWindDayRecordTime {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    top: 2px !important;
    margin: 0 0 3px 0 !important;
    justify-self: center !important;
    align-self: baseline !important;
  }
}

/* ============================================================
   TOOLTIPS GRAPHIQUES — SOCLE COMMUN PAYSAGE
============================================================ */

.mobile-wind-tooltip,
.mobile-rain-tooltip,
.mobile-rain-touch-point {
  display: none;
}

@media (orientation: landscape) {
  .mobile-wind-tooltip,
  .mobile-rain-tooltip {
    position: absolute !important;
    padding: 2px 4px !important;
    transform: translateX(-50%) !important;

    border: 0 !important;
    border-radius: 3px !important;
    background: rgba(0,31,63,.72) !important;

    font-family: var(--mobile-font-ui) !important;
    font-size: 7px !important;
    line-height: 1 !important;
    color: var(--mobile-color-foreground) !important;
    white-space: nowrap !important;

    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 20 !important;
  }

  .mobile-wind-touch-point,
  .mobile-rain-touch-point {
    position: absolute !important;
    width: 5px !important;
    height: 5px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;

    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 15 !important;
  }

  .mobile-wind-tooltip.is-visible,
  .mobile-wind-touch-point.is-visible,
  .mobile-rain-tooltip.is-visible,
  .mobile-rain-touch-point.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Vent */
  .mobile-wind-tooltip {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    top: 38px !important;
    box-sizing: border-box !important;
  }

  .mobile-wind-tooltip-time {
    color: var(--mobile-color-accent) !important;
    font-weight: 600 !important;
    text-align: center !important;
    display: inline !important;
    margin: 0 !important;
  }

  .mobile-wind-tooltip-speed,
  .mobile-wind-tooltip-gust {
    text-align: left !important;
    display: inline !important;
    margin: 0 !important;
  }

  .mobile-wind-tooltip-speed::before,
  .mobile-wind-tooltip-gust::before {
    content: "· " !important;
    color: var(--mobile-color-foreground-40) !important;
  }

  .mobile-wind-touch-point {
    background: #fff !important;
    box-shadow: 0 0 3px rgba(255,255,255,.65) !important;
  }

  .mobile-wind-chart-wrap > .mobile-wind-direction-strip,
  .mobile-wind-chart-wrap .mobile-wind-direction-cell,
  .mobile-wind-chart-wrap .mobile-wind-direction-arrow {
    pointer-events: none !important;
  }

  /* Pluie */
  .mobile-rain-tooltip-host {
    position: relative !important;
  }

  .mobile-rain-tooltip {
    display: block !important;
    top: 12px !important;
  }

  .mobile-rain-touch-point {
    display: block !important;
    background: rgba(150,220,255,.95) !important;
    box-shadow: 0 0 3px rgba(95,190,255,.8) !important;
  }
}

/* ==========================================================
   WEBCAM
   ========================================================== */

.mobile-webcam-view {
  width: 100%;
  max-width: 100%;
  overflow-x: visible;
}

.mobile-webcam-section {
  width: 100%;
  max-width: 100%;
  margin: 0 0 6px;
}

/* WEBCAM MOBILE - REPERE ORIENTATION */

.mobile-webcam-orientation-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.mobile-webcam-orientation-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, .35);
}

.mobile-webcam-repere-arrow {
  position: absolute;
  left: var(--mobile-webcam-repere-x);
  z-index: 3;

  width: 0;
  height: 0;

  transform: translateX(-50%);
  pointer-events: none;
}

.mobile-webcam-repere-arrow--top {
  top: 1px;

  border-top: 11px solid var(--mobile-webcam-repere-color);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}

.mobile-webcam-repere-arrow--bottom {
  bottom: 1px;

  border-right: 7px solid transparent;
  border-bottom: 11px solid var(--mobile-webcam-repere-color);
  border-left: 7px solid transparent;
}

.mobile-webcam-repere-arrow::after {
  content: "";

  position: absolute;
  left: 50%;

  width: 1px;
  height: 10px;

  background: var(--mobile-webcam-repere-color);

  transform: translateX(-50%);
}

.mobile-webcam-repere-arrow--top::after {
  top: 100%;
}

.mobile-webcam-repere-arrow--bottom::after {
  bottom: 100%;
}

.mobile-webcam-repere-label {
  position: absolute;
  top: 50%;
  left: var(--mobile-webcam-repere-x);
  z-index: 3;

  color: var(--mobile-webcam-repere-color);

  font-family: var(--mobile-font-ui);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;

  transform:
    translate(-50%, -50%)
    rotate(-90deg);

  pointer-events: none;
}

.mobile-webcam-orientation-caption {
  position: absolute;
  right: 12px;
  bottom: 6px;
  z-index: 3;

  color: var(--mobile-color-foreground-60);

  font-family: var(--mobile-font-ui);
  font-size: 8px;
  letter-spacing: .5px;

  text-shadow:
    0 0 6px rgba(0, 0, 0, .8);

  pointer-events: none;
}


/* WEBCAM - resserrement entre repère et live */
/* ==========================================================
   WEBCAM - PANORAMIQUE ENTIER + BORD A BORD
   ========================================================== */

/* Le premier bloc ne crée plus d'espace supplémentaire */
/* ==========================================================
   WEBCAM - BORD A BORD COMME IMAGE ACCUEIL
   ========================================================== */

.mobile-webcam-view .mobile-webcam-orientation-frame {
  position: relative;
  overflow: hidden;

  --mobile-webcam-repere-x: 39.5%;
  --mobile-webcam-repere-color: var(--mobile-color-foreground);

  width: calc(100vw - 10px);
  max-width: none;
  height: auto;
  aspect-ratio: auto;

  margin-left: calc(50% - 50vw + 5px);
  margin-right: 0;
  margin-bottom: 6px;

  border-radius: 0;
}

/* WEBCAM - live strictement bord à bord, portrait + paysage */
.mobile-webcam-view .mobile-webcam-live-frame {
  position: relative;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.mobile-webcam-view .mobile-webcam-live-frame iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}


.mobile-webcam-view .mobile-webcam-live-frame.is-loading {
  background: var(--mobile-color-bg);
}

.mobile-webcam-view .mobile-webcam-live-frame.is-loading::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;

  width: 28px;
  height: 28px;

  margin: -24px 0 0 -14px;

  border: 3px solid rgba(88, 184, 244, .24);
  border-top-color: var(--mobile-color-accent);
  border-radius: 50%;

  box-sizing: border-box;
  pointer-events: none;

  animation: mobile-webcam-loading-spin .8s linear infinite;
}

.mobile-webcam-view .mobile-webcam-live-frame.is-loading::after {
  content: "Chargement en cours…";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;

  margin-top: 16px;

  transform: translateX(-50%);

  color: var(--mobile-color-foreground-80);
  font-family: var(--mobile-font-ui);
  font-size: .62rem;
  font-weight: 400;
  white-space: nowrap;

  pointer-events: none;
}

@keyframes mobile-webcam-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================
   MODE ADMIN MOBILE
   ========================================================== */

.mobile-admin-modal[hidden] {
  display: none !important;
}

.mobile-admin-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18px;
}

.mobile-admin-modal-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0, 10, 25, .76);
  backdrop-filter: blur(3px);
}

.mobile-admin-dialog {
  position: relative;
  z-index: 1;

  width: min(100%, 340px);

  padding: 24px 20px 20px;

  border: 1px solid var(--mobile-color-foreground-20);
  border-radius: 14px;

  background: var(--mobile-color-bg);

  box-shadow:
    0 12px 38px rgba(0,0,0,.45);

  color: var(--mobile-color-foreground);
  font-family: var(--mobile-font-ui);
}

.mobile-admin-close {
  position: absolute;
  top: 7px;
  right: 10px;

  border: 0;
  background: transparent;

  color: var(--mobile-color-red);
  font-size: 1.6rem;
  line-height: 1;

  cursor: pointer;
}

.mobile-admin-title {
  text-align: center;

  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.mobile-admin-subtitle {
  margin-top: 3px;
  margin-bottom: 18px;

  text-align: center;

  color: var(--mobile-color-foreground-60);

  font-size: .68rem;
}

.mobile-admin-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-admin-field {
  display: flex;
  flex-direction: column;
  gap: 5px;

  font-size: .68rem;
  color: var(--mobile-color-foreground-80);
}

.mobile-admin-field input {
  box-sizing: border-box;

  width: 100%;
  height: 42px;

  padding: 0 11px;

  border: 1px solid var(--mobile-color-foreground-20);
  border-radius: 8px;

  outline: none;

  background: var(--mobile-color-foreground-10);
  color: var(--mobile-color-foreground);

  font-family: var(--mobile-font-ui);
  font-size: .8rem;
}

.mobile-admin-field input:focus {
  border-color: var(--mobile-color-foreground-40);
}

.mobile-admin-password-wrap {
  position: relative;
}

.mobile-admin-password-wrap input {
  padding-right: 42px;
}

.mobile-admin-toggle-pass {
  position: absolute;
  top: 0;
  right: 0;

  width: 42px;
  height: 42px;

  border: 0;
  background: transparent;

  color: var(--mobile-color-foreground-80);
}

.mobile-admin-error {
  min-height: 16px;

  color: var(--mobile-color-red);
  text-align: center;

  font-size: .66rem;
}

.mobile-admin-submit {
  height: 42px;

  border: 1px solid var(--mobile-color-foreground-20);
  border-radius: 8px;

  background: var(--mobile-color-foreground-10);
  color: var(--mobile-color-foreground);

  font-family: var(--mobile-font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
}

.mobile-admin-modal-open {
  overflow: hidden;
}

/* Popup admin - espace sous le titre */
.mobile-admin-title {
  margin-bottom: 18px;
}

/* Popup admin - confirmation de connexion */
.mobile-admin-error.is-success {
  color: var(--mobile-color-neon);
  line-height: 1.45;
}

/* ==========================================================
   WEBCAM - CONTROLE PTZ MODE ADMIN
   ========================================================== */

.mobile-webcam-admin-ptz {
  --neon-green: var(--mobile-color-neon);

  width: 100%;
  margin: 14px auto 8px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-webcam-admin-status {
  margin-bottom: 10px;

  color: var(--mobile-color-foreground-40);

  font-family: var(--mobile-font-ui);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .08em;

  text-align: center;
}

.mobile-webcam-admin-ptz .ptz-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 7px;
}

.mobile-webcam-admin-ptz .ptz-current-orientation-label {
  color: var(--mobile-color-foreground-40);

  font-family: var(--mobile-font-ui);
  font-size: .68rem;
  font-weight: 300;
  letter-spacing: .055em;

  text-align: center;
}

.mobile-webcam-admin-ptz #camera_ptz {
  display: block;

  width: 190px;
  height: 190px;

  max-width: 72vw;

  overflow: visible;
}

/* Presets */
.mobile-webcam-admin-ptz .preset path {
  fill: transparent;
  stroke: var(--mobile-color-foreground-20);
  stroke-width: 1.1;
  stroke-linecap: round;

  cursor: pointer;
  pointer-events: auto;

  transition: all .35s ease;
}

.mobile-webcam-admin-ptz .admin-mode .preset.active path {
  fill: var(--neon-green);
  stroke: var(--neon-green);
  stroke-width: 2;

  filter:
    drop-shadow(0 0 6px rgba(0, 255, 102, .8))
    drop-shadow(0 0 14px rgba(0, 255, 102, .6));
}

/* Partie centrale */
.mobile-webcam-admin-ptz .ui path,
.mobile-webcam-admin-ptz .ui rect {
  fill: var(--neon-green);
  stroke: none;
  pointer-events: none;

  filter:
    drop-shadow(0 0 6px rgba(0, 255, 102, .55));
}

@media (orientation: landscape) {
  .mobile-webcam-admin-ptz {
    margin-top: 10px;
  }

  .mobile-webcam-admin-ptz #camera_ptz {
    width: 170px;
    height: 170px;
    max-width: 34vw;
  }
}

/* ==========================================================
   MODE ADMIN - COMPTE A REBOURS
   ========================================================== */

.mobile-webcam-admin-countdown {
  margin: -4px 0 10px;

  color: var(--mobile-color-foreground-40);

  font-family: var(--mobile-font-ui);
  font-size: .62rem;
  font-weight: 300;
  letter-spacing: .04em;

  text-align: center;
}

.mobile-webcam-admin-closed {
  margin: 2px 0 12px;

  color: var(--mobile-color-red);

  font-family: var(--mobile-font-ui);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;

  text-align: center;
}

.mobile-webcam-admin-ptz .ptz-control.user-mode .preset path,
.mobile-webcam-admin-ptz .ptz-control.user-mode .tilt {
  pointer-events: none !important;
  cursor: default !important;
}

/* ==========================================================
   VIGILANCE MOBILE — RÈGLES COMMUNES
   Neutralise les contraintes plein écran du socle Vigilance.
   Les variantes portrait et paysage sont regroupées plus bas.
   ========================================================== */

.mobile-vigilance-view {
  position: static !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.mobile-vigilance-view .vigilance-wrap,
.mobile-vigilance-view .vigilance-layout,
.mobile-vigilance-view .vigilance-main,
.mobile-vigilance-view .vigilance-side,
.mobile-vigilance-view .vigilance-map-panel,
.mobile-vigilance-view .vigilance-map-wrap,
.mobile-vigilance-view .vigilance-bulletin,
.mobile-vigilance-view .vigilance-bulletin-inner {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.mobile-vigilance-view .vigilance-side {
  position: static !important;
}

html {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.mobile-page {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.mobile-vigilance-view,
.mobile-vigilance-view * {
  font-family: var(--mobile-font-ui);
}

.mobile-vigilance-view .vigilance-title-source,
.mobile-vigilance-view .vigilance-title-source a,
.mobile-vigilance-view .vigilance-title-source .site-link {
  color: var(--mobile-color-neon) !important;
  font-family: var(--mobile-font-ui) !important;
  font-size: .43rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
}

.mobile-vigilance-view .vigilance-title-source a:hover,
.mobile-vigilance-view .vigilance-title-source a:focus-visible {
  color: var(--mobile-color-neon) !important;
  text-decoration: underline;
}

.mobile-vigilance-view .vigilance-phenomenon-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--mobile-color-surface) !important;
  box-shadow: none !important;
}

.mobile-vigilance-view .vigilance-period-link {
  border: 1px solid var(--mobile-color-border) !important;
  border-radius: 8px !important;
  background: var(--mobile-color-surface) !important;
}

.mobile-vigilance-view .vigilance-period-link.is-active {
  border-color: rgba(88, 184, 244, 0.65) !important;
}

.mobile-vigilance-view .vigilance-neighbor-item,
.mobile-vigilance-view .vigilance-color-legend {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--mobile-color-surface) !important;
  box-shadow: none !important;
}

/* En-tête statique ajouté au-dessus du titre dynamique de l'API. */
.mobile-vigilance-view .vigilance-bulletin-heading {
  margin: 0 0 8px !important;
  color: var(--mobile-color-foreground-80);
  font-size: .86rem !important;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .04em;
  text-align: center;
}

.mobile-vigilance-view .vigilance-bulletin-empty {
  width: 100%;
  text-align: center;
}

/* ==========================================================
   VIGILANCE MOBILE — PORTRAIT
   ========================================================== */

@media (orientation: portrait) {
  .mobile-vigilance-view .vigilance-title-source {
    display: block;
    margin: 4px 0 0 !important;
  }

  /* Flux vertical : les enfants de main et side partagent le même ordre. */
  .mobile-vigilance-view .vigilance-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100%;
  }

  .mobile-vigilance-view .vigilance-main,
  .mobile-vigilance-view .vigilance-side {
    display: contents !important;
  }

  .mobile-vigilance-view .vigilance-main-heading {
    order: 10;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    width: 100%;
    margin: 0 0 10px !important;
  }

  .mobile-vigilance-view .vigilance-phenomena-grid {
    order: 20;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100%;
    margin: 0 0 12px !important;
  }

  .mobile-vigilance-view .vigilance-period-nav {
    order: 30;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0 0 10px !important;
  }

  .mobile-vigilance-view .vigilance-map-panel {
    order: 40;
    display: flex !important;
    justify-content: center !important;
    width: 100%;
    margin: 0 !important;
    padding: 2px 0 6px !important;
  }

  .mobile-vigilance-view .vigilance-side-title {
    order: 50;
    width: 100%;
    margin: 4px 0 8px !important;
    text-align: center;
    white-space: normal !important;
  }

  .mobile-vigilance-view .vigilance-neighbors {
    order: 60;
    width: 100%;
    margin: 0 !important;
  }

  .mobile-vigilance-view .vigilance-meta {
    order: 70;
    width: 100%;
    margin: 8px 0 0 !important;
    text-align: center;
  }

  .mobile-vigilance-view .vigilance-header-left {
    min-width: 0;
  }

  .mobile-vigilance-view .vigilance-title {
    margin: 0 !important;
    font-size: .98rem !important;
    font-weight: 500;
    line-height: 1.15;
  }

  .mobile-vigilance-view .vigilance-subtitle {
    margin: 3px 0 0 !important;
    font-size: .62rem !important;
    line-height: 1.15;
  }

  .mobile-vigilance-view .vigilance-badge {
    width: auto !important;
    min-width: 112px !important;
    max-width: 132px !important;
    margin: 0 !important;
  }

  .mobile-vigilance-view .vigilance-phenomenon-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .mobile-vigilance-view .vigilance-period-link {
    width: 100%;
  }

  /* La translation de 20 px est le réglage visuel final validé. */
  .mobile-vigilance-view .vigilance-map-wrap {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  .mobile-vigilance-view .vigilance-map-wrap svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
    transform: translateX(20px) !important;
  }

  /* Le wrap possède 10 px de padding latéral. */
  .mobile-vigilance-view .vigilance-bulletin {
    width: calc(100% + 20px) !important;
    margin: 12px -10px 0 !important;
  }

  .mobile-vigilance-view .vigilance-bulletin-inner {
    width: 100% !important;
    border-radius: 0 !important;
    box-sizing: border-box;
  }

  .mobile-vigilance-view .vigilance-bulletin-content {
    max-height: none !important;
    overflow: visible !important;
  }

  .mobile-vigilance-view .vigilance-color-legend {
    width: calc(100% + 20px) !important;
    margin: 12px -10px 0 !important;
  }
}

/* ==========================================================
   VIGILANCE MOBILE — PAYSAGE
   ========================================================== */

@media (orientation: landscape) {
  .mobile-vigilance-view .vigilance-layout {
    grid-template-columns:
      minmax(0, calc(75% - 50px))
      minmax(190px, 25%) !important;
    column-gap: 50px !important;
    justify-content: start !important;
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    margin-right: 10px !important;
    margin-left: calc(50% - 50vw + 10px) !important;
  }

  .mobile-vigilance-view .vigilance-main {
    justify-self: stretch !important;
    margin-left: 0 !important;
  }

  .mobile-vigilance-view .vigilance-side {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: auto !important;
  }

  .mobile-vigilance-view .vigilance-main-heading {
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  .mobile-vigilance-view .vigilance-badge {
    transform: translateY(-2px) !important;
  }

  .mobile-vigilance-view .vigilance-phenomena-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: calc(100% + 18px) !important;
    max-width: none !important;
    margin-top: 14px !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    transform: translateY(15px) !important;
  }

  .mobile-vigilance-view .vigilance-phenomenon-card {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 7px !important;
    padding-left: 7px !important;
    box-sizing: border-box;
  }

  .mobile-vigilance-view .vigilance-phenomenon-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .mobile-vigilance-view .vigilance-phenomenon-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin-left: 8px !important;
  }

  .mobile-vigilance-view .vigilance-period-nav,
  .mobile-vigilance-view .vigilance-neighbors,
  .mobile-vigilance-view .vigilance-meta {
    margin-right: 0 !important;
    margin-left: auto !important;
  }

  .mobile-vigilance-view .vigilance-neighbors {
    width: 100% !important;
  }

  .mobile-vigilance-view .vigilance-neighbor-item {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .mobile-vigilance-view .vigilance-neighbor-content {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mobile-vigilance-view .vigilance-neighbor-name,
  .mobile-vigilance-view .vigilance-neighbor-detail {
    white-space: nowrap !important;
  }

  .mobile-vigilance-view .vigilance-bulletin,
  .mobile-vigilance-view .vigilance-color-legend {
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    margin-right: 10px !important;
    margin-left: calc(50% - 50vw + 10px) !important;
  }

  .mobile-vigilance-view .vigilance-bulletin-inner {
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-sizing: border-box;
  }

  /* Même espace bulletin / légende qu'en portrait. */
  .mobile-vigilance-view .vigilance-color-legend {
    margin-top: 12px !important;
  }
}
.mobile-dashboard-year-temp-chart-wrap {
  height: 280px;
}

#mobileDashboardYearTempChart {
  display: block;
  width: 100%;
  height: 100%;
}

.mobile-dashboard-year-temp-legend {
  flex-wrap: nowrap;
  gap: 4px 7px;
  font-size: 5.4px;
  white-space: nowrap;
}


/* Unité du mini-graphe pluie, placée dans l'espace libre supérieur */
.mobile-dashboard-rain-history-wrap::before {
  content: "mm";
  position: absolute;
  left: 0;
  top: -9px;
  width: 13px;
  text-align: right;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 5.4px;
  line-height: 1;
  font-weight: 400;
  color: rgba(255,255,255,.55);
  pointer-events: none;
}

/* Qualité de l'air — même largeur que les autres modules dédiés */
.mobile-air-quality {
  width: calc(100% - 8px);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ============================================================
   QUALITÉ DE L'AIR — ALIGNEMENT PAYSAGE / PC
============================================================ */

@media (orientation: landscape) and (min-width: 600px) {

  .mobile-air-quality {
    width: calc(100vw - 8px) !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw + 4px) !important;
    margin-right: calc(50% - 50vw + 4px) !important;

    padding-left: 8px !important;
    padding-right: 8px !important;

    box-sizing: border-box !important;
  }

  #air-quality-module {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    max-width: none;
  }

  #air-quality-module .air-main-row {
    grid-column: 1 / 4;
    grid-row: 1;

    max-width: none;
  }

  #air-quality-module .air-source {
    grid-column: 1 / 4;
    grid-row: 1;

    width: auto;
  }

  #air-quality-module .air-container {
    max-width: 300px;
  }

  #air-quality-module .air-pollutant-gauges {
    grid-column: 4 / 9;
    grid-row: 1;

    gap: var(--mobile-card-gap);

    max-width: none;

    padding: 0;

    background: transparent;
  }

  #air-quality-module .air-pollutant-gauge {
    height: var(--mobile-card-type-c-height);
    min-height: 0;

    padding: 7px 4px;

    border: 0;
    border-radius: 0;
    background: var(--mobile-color-surface);

    justify-content: center;
  }
}

@media (orientation: portrait) {
  .mobile-wind-chart-card {
    margin-top: var(--mobile-card-gap) !important;
  }
}


/* Grand soleil : aucun halo supplémentaire derrière l’icône */
.mobile-home-current.is-clear-day {
  background:
    linear-gradient(
      to bottom,
      transparent 52%,
      var(--mobile-color-bg) 78%,
      var(--mobile-color-bg) 100%
    ),
    var(--mobile-color-bg);
}



/* ============================================================
   GRAND ÉCRAN / PC — LARGEUR MAXIMALE DU SITE
============================================================ */

@media (orientation: landscape) and (min-width: 1000px) {

  .mobile-header-inner,
  .mobile-content,
  .mobile-footer {
    width: 100% !important;
    max-width: 1200px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

  /*
   * Les pages paysage utilisaient 100vw pour occuper tout
   * l'écran. Sur PC, on les ramène dans la largeur du site.
   */
  .mobile-temperature-humidity,
  .mobile-pressure,
  .mobile-rain,
  .mobile-wind {
    width: 100% !important;
    max-width: 1200px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }
}