.meteo::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(820px 520px at 70% 35%, rgba(47,107,255,.10), transparent 60%),
    radial-gradient(760px 520px at 20% 55%, rgba(0,212,255,.08), transparent 60%);
  pointer-events:none;
  opacity:.7;
}

/* =========================================================
   METEO — Mobile layout: Title > Device > Text
   ========================================================= */
@media (max-width: 860px) {
  /* Le container split devient une colonne centrée */
  #meteo .split {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* Astuce : "déplie" les enfants de split__text dans le flux du parent
     -> permet de réordonner h2 / media / p / list / pills */
  #meteo .split__text {
    display: contents;
  }

  /* Titre au-dessus */
  #meteo .split__text > .h2 {
    order: 1;
    text-align: center;
    margin: 0 auto 2px;
    max-width: 22ch;
    line-height: 1.08;
  }

  /* Le device au centre */
  #meteo .split__media {
    order: 2;
    width: 100%;
    display: grid;
    place-items: center;
    margin: 6px 0 4px;
  }

  /* Description + liste + pills sous l’image */
  #meteo .split__text > .lead {
    order: 3;
    text-align: center;
    margin: 8px auto 0;
    max-width: 46ch;
  }

  #meteo .split__text > .list {
    order: 4;
    margin: 10px auto 0;
    width: min(560px, 100%);
    padding-left: 0;          /* selon ton style de .list */
    text-align: left;         /* plus lisible en mobile */
  }

  #meteo .split__text > .pill-row {
    order: 5;
    width: min(560px, 100%);
    justify-content: center;
    margin: 12px auto 0;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Ajuste le “device” pour mobile */
  #meteo .device.device--small {
    width: min(360px, 92vw);
  }

  /* Un peu plus d’air dans la section */
  #meteo.sec {
    padding-top: clamp(40px, 7vw, 64px);
    padding-bottom: clamp(44px, 8vw, 72px);
  }
}

/* Très petit mobile */
@media (max-width: 420px) {
  #meteo .split__text > .h2 {
    max-width: 18ch;
    font-size: clamp(22px, 6.2vw, 28px); /* si ta h2 est trop grande */
  }

  #meteo .device.device--small {
    width: min(330px, 94vw);
  }
}
/* =========================================================
   FIX — overflow horizontal (Météo)
   Empêche le "swipe" gauche/droite sur mobile
   ========================================================= */

#meteo{
  overflow-x: clip;          /* mieux que hidden quand possible */
}

#meteo .split__media{
  overflow-x: clip;
  max-width: 100%;
}

/* Le device ne doit jamais dépasser le viewport */
#meteo .device,
#meteo .device__bezel{
  max-width: 100%;
  overflow: clip;
}

/* Le screen garde tout à l'intérieur (vidéo + island etc.) */
#meteo .device__screen{
  overflow: hidden;
}

/* Si un ::before/::after existe (même dans un autre CSS), on le contraint */
#meteo .device::before,
#meteo .device::after{
  max-width: 100%;
  inset: 0;
}

/* Sécurité: évite qu’un effet de transform/blur "peigne" hors cadre */
#meteo .device,
#meteo .device__bezel,
#meteo .device__screen{
  contain: paint;
}