/*
Theme Name:   Météo Saône-et-Loire
Theme URI:    https://meteo-saone-et-loire.fr
Description:  Thème enfant de Twenty Twenty-Three portant la charte graphique Météo Saône-et-Loire. Palette, typographie Archivo auto-hébergée, composants de données.
Author:       Météo Saône-et-Loire
Template:     twentytwentythree
Version:      9.23.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License:      GNU General Public License v2 or later
Text Domain:  msl
*/

/* =========================================================
   1. Utilitaires de la charte
   ========================================================= */
:root{
  --msl-rayon: 10px;
  --msl-transition: .18s cubic-bezier(.4,0,.2,1);
}

/* Surfaces de données : fond nuit, texte brume.
   À poser sur un groupe via la classe « surface-donnees ». */
.surface-donnees{
  background: var(--wp--preset--color--nuit);
  color: var(--wp--preset--color--brume);
  border-radius: var(--msl-rayon);
  position: relative;
  overflow: hidden;
}
.surface-donnees :where(h1,h2,h3,h4,h5,h6){ color: var(--wp--preset--color--brume); }
.surface-donnees a{ color: var(--wp--preset--color--ambre); }

/* Surtitre de section */
.msl-surtitre{
  font-size: .74rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color: var(--wp--preset--color--lie); margin:0 0 .45rem;
}
.surface-donnees .msl-surtitre{ color: var(--wp--preset--color--ambre); }

/* Chiffre de température, ligne serrée */
.msl-temp{
  font-weight:800; font-size:clamp(2.6rem,12vw,3.6rem);
  line-height:.84; letter-spacing:-.04em;
  font-variant-numeric: tabular-nums;
}

/* Pastille d'état, avec pulsation */
.msl-pastille{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background: var(--wp--preset--color--ambre); position:relative; flex:none;
}
.msl-pastille::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid var(--wp--preset--color--ambre);
  animation: msl-pulse 2s ease-out infinite;
}
@keyframes msl-pulse{
  0%{ transform:scale(.6); opacity:.9 } 100%{ transform:scale(1.8); opacity:0 }
}

/* Contenu verrouillé : aperçu flouté + voile */
.msl-verrou{ position:relative; border-radius:var(--msl-rayon); overflow:hidden }
.msl-verrou > img, .msl-verrou > svg, .msl-verrou > .wp-block-image{
  filter: blur(5px) saturate(.8);
}
.msl-verrou__voile{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5rem; text-align:center;
  padding:1rem; background: rgba(10,30,43,.62); color: var(--wp--preset--color--brume);
}

/* Grille de tuiles, deux colonnes dès le mobile */
.msl-tuiles{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
@media (min-width: 782px){ .msl-tuiles{ grid-template-columns:repeat(3,1fr); gap:.9rem } }

/* Rangée défilante (tarifs, heures) sans barre visible */
.msl-defile{ display:flex; gap:.7rem; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch }
.msl-defile::-webkit-scrollbar{ display:none }
.msl-defile > *{ flex:none; scroll-snap-align:start }

/* =========================================================
   2. Confort de lecture et performance
   ========================================================= */
body{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased }
img, svg, video{ max-width:100%; height:auto }
:where(.wp-block-image) img{ border-radius: var(--msl-rayon) }

/* Cible tactile minimale de 44 px, exigence mobile */
:where(a, button, input[type=submit], .wp-block-button__link){ min-height:44px }
.wp-block-button__link{ display:inline-flex; align-items:center; justify-content:center }

/* Respect des préférences système */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* Focus visible, obligation d'accessibilité */
:where(a, button, input, select, textarea):focus-visible{
  outline:2px solid var(--wp--preset--color--ambre); outline-offset:2px; border-radius:3px;
}

/* =========================================================
   3. Bandeau d'alertes : une ligne, les risques defilent
   ========================================================= */
.msl-bloc-alertes{ background: var(--wp--preset--color--nuit) }

.msl-bande{
  position: relative; display: flex; align-items: center; gap: .7rem;
  background: var(--wp--preset--color--nuit); color: var(--wp--preset--color--brume);
  padding: .55rem .8rem .55rem .95rem;
  min-height: 58px;
  border-bottom: 1px solid rgba(240,237,230,.09);
}
/* Filet de couleur a gauche : la gravite se lit avant meme le texte. */
.msl-bande--actif::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--niveau-actif, var(--wp--preset--color--ambre));
  transition: background .4s ease;
}
.msl-bande__pastille{
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--wp--preset--color--ambre); position: relative;
}
.msl-bande__pastille::after{
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--wp--preset--color--ambre);
  animation: msl-pulse 2s ease-out infinite;
}

/* La piste garde la hauteur d'un seul risque : les autres sont empiles
   par-dessus, en position absolue, et se relaient en fondu. */
.msl-bande__piste{
  position: relative; flex: 1; min-width: 0; min-height: 44px;
  display: flex; align-items: center;
}
.msl-bande__item{
  position: absolute; inset: 0; display: flex; align-items: center; gap: .6rem;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.msl-bande__item.est-actif{ opacity: 1; transform: none; pointer-events: auto }

.msl-bande__ico{
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--niveau, var(--wp--preset--color--ambre));
  background: color-mix(in srgb, var(--niveau, #E9A029) 16%, transparent);
}
.msl-bande__ico svg{ width: 17px; height: 17px }

.msl-bande__txt{ margin: 0; min-width: 0; line-height: 1.25 }
.msl-bande__txt strong{
  display: block; font-size: .84rem; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msl-bande__txt span{
  display: block; font-size: .8rem; color: rgba(240,237,230,.6); margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msl-bande__heure{
  flex: none; margin-left: auto; font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; color: rgba(240,237,230,.45);
}

.msl-bande__points{ display: flex; gap: 5px; flex: none }
.msl-bande__point{
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(240,237,230,.26); transition: background .25s ease, width .25s ease;
}
.msl-bande__point.est-actif{ background: var(--wp--preset--color--ambre); width: 16px; border-radius: 3px }

.msl-bande__tout{
  flex: none; display: inline-flex; align-items: center; gap: .3rem;
  text-decoration: none; color: var(--wp--preset--color--ambre);
  font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  border: 1px solid rgba(233,160,41,.42); border-radius: 999px;
  padding: .3rem .55rem .3rem .6rem; min-height: 32px;
}
.msl-bande__nb{ font-weight: 800 }
.msl-bande__tout svg{ width: 12px; height: 12px }
.msl-bande__maj{
  flex: none; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: rgba(240,237,230,.32);
}

/* Etat calme : meme hauteur, ton neutre, aucune animation. */
.msl-bande--calme{ color: rgba(240,237,230,.8) }
.msl-bande--calme .msl-bande__ico{
  color: #7C8B7A; background: rgba(124,139,122,.16);
}
.msl-bande--calme .msl-bande__txt strong{ font-weight: 700; font-size: .88rem }

/* Sous 640 px on sacrifie l'accessoire, jamais le risque lui-meme. */
@media (max-width: 640px){
  .msl-bande{ padding-inline: .7rem; gap: .5rem }
  .msl-bande__maj,
  .msl-bande__mot{ display: none }
  .msl-bande__heure{ font-size: .66rem }
}
@media (max-width: 400px){
  .msl-bande__points{ display: none }
}

/* =========================================================
   4. Tuiles, métiers, radar, tarifs
   ========================================================= */
.msl-tuile, .msl-metier{ text-decoration:none; display:flex; flex-direction:column; gap:.15rem }

.msl-tuile{
  background: var(--wp--preset--color--blanc);
  border:1px solid var(--wp--preset--color--bord);
  border-radius: var(--msl-rayon);
  padding:.85rem .8rem; min-height:92px;
  justify-content:flex-end; position:relative; overflow:hidden;
  transition: transform var(--msl-transition);
}
.msl-tuile::before{
  content:""; position:absolute; top:-30px; right:-30px; width:76px; height:76px;
  border-radius:50%; background: rgba(233,160,41,.13);
}
.msl-tuile:active{ transform:scale(.98) }
.msl-tuile__t{ font-weight:700; font-size: .9rem; line-height:1.2; color: var(--wp--preset--color--saone) }
.msl-tuile__s{ font-size: .76rem; line-height:1.35; color: rgba(19,36,51,.6) }

.msl-metier{
  background: var(--wp--preset--color--saone);
  color: var(--wp--preset--color--brume);
  border-radius: var(--msl-rayon); padding:.85rem .8rem;
  transition: transform var(--msl-transition);
}
.msl-metier:active{ transform:scale(.97) }
.msl-metier__t{ font-weight:700; font-size: .9rem }
.msl-metier__s{ font-size:.67rem; line-height:1.35; color: rgba(240,237,230,.6) }

.msl-radar{ position:relative; border-radius:var(--msl-rayon); overflow:hidden; background:var(--wp--preset--color--nuit) }
.msl-radar img{ display:block; width:100% }
.msl-radar__barre{
  position:absolute; inset:auto 0 0 0; padding:.65rem .8rem;
  background: var(--wp--preset--gradient--voile-nuit);
  display:flex; align-items:flex-end; gap:.55rem;
}
.msl-radar__barre p{ margin:0; color:var(--wp--preset--color--brume); font-size: .85rem; font-weight:700; line-height:1.25 }
.msl-radar__barre span{
  display:block; font-size: .7rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color: var(--wp--preset--color--ambre); margin-top:.15rem;
}
.msl-radar__direct{
  margin-left:auto; flex:none; font-size: .66rem; font-weight:700; letter-spacing:.12em;
  color: var(--wp--preset--color--brume); background: rgba(233,160,41,.22);
  border:1px solid rgba(233,160,41,.5); padding:.2rem .5rem; border-radius:99px;
}
.msl-verrou{ margin-top:.6rem }
.msl-verrou img{ display:block; width:100% }
.msl-verrou__voile p{ margin:0; font-size: .88rem; font-weight:700; line-height:1.3 }
.msl-verrou__voile small{ font-weight:500; font-size: .76rem; color: rgba(240,237,230,.68) }
.msl-verrou__btn{
  background: var(--wp--preset--color--ambre); color: var(--wp--preset--color--saone);
  font-weight:700; font-size: .82rem; padding:.55rem 1rem; border-radius:99px;
  text-decoration:none; display:inline-flex; align-items:center;
}

.msl-tarifs{ padding-bottom:.4rem }
.msl-tarif{
  width:245px; background: var(--wp--preset--color--blanc);
  border:1px solid var(--wp--preset--color--bord); border-radius:var(--msl-rayon);
  padding:1.1rem 1rem 1rem; position:relative;
}
.msl-tarif--haut{ background: var(--wp--preset--color--saone); border-color: var(--wp--preset--color--saone); color: var(--wp--preset--color--brume) }
.msl-tarif__badge{
  position:absolute; top:-9px; left:1rem; background: var(--wp--preset--color--ambre);
  color: var(--wp--preset--color--saone); font-size: .66rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; padding:.18rem .55rem; border-radius:99px;
}
.msl-tarif__nom{ font-size:.95rem; font-weight:800; margin:0 0 .15rem }
.msl-tarif--haut .msl-tarif__nom{ color: var(--wp--preset--color--brume) }
.msl-tarif__prix{ font-size:1.15rem; font-weight:700; margin:0 0 .75rem; letter-spacing:-.01em }
.msl-tarif--haut .msl-tarif__prix{ color: var(--wp--preset--color--ambre) }
.msl-tarif__liste{ margin:0 0 .9rem; padding:0; list-style:none; font-size: .85rem; line-height:1.5 }
.msl-tarif__liste li{ padding-left:1.05rem; position:relative; margin-bottom:.3rem }
.msl-tarif__liste li::before{
  content:""; position:absolute; left:0; top:.42rem; width:8px; height:8px;
  border-radius:50%; background: var(--wp--preset--color--ambre);
}
.msl-tarif__btn{
  display:flex; align-items:center; justify-content:center; width:100%;
  background: var(--wp--preset--color--gris); color: var(--wp--preset--color--saone);
  font-weight:700; font-size: .85rem; padding:.7rem; border-radius:99px; text-decoration:none;
}
.msl-tarif__btn--plein{ background: var(--wp--preset--color--ambre) }

/* En-tête et pied */
.msl-entete{ position:sticky; top:0; z-index:40; border-bottom:1px solid var(--wp--preset--color--bord) }
.msl-entete__sous{ color: rgba(19,36,51,.6); margin:0 }
.msl-pied a{ color: rgba(240,237,230,.75) }
.msl-pied__zones{ color: rgba(240,237,230,.42) }

/* La dernière carte d'article */
.msl-dernier .wp-block-post-featured-image img{ border-radius: var(--msl-rayon); object-fit:cover }

/* =========================================================
   5. Aperçu radar cliquable
   ========================================================= */
.msl-radar--lien{
  display:block; text-decoration:none; color:inherit;
  transition: transform var(--msl-transition);
}
.msl-radar--lien:active{ transform:scale(.99) }
.msl-radar--lien img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover }

.msl-radar__absent{
  aspect-ratio:4/3; display:grid; place-items:center; text-align:center;
  background: var(--wp--preset--color--nuit);
}
.msl-radar__absent p{ margin:0; color:var(--wp--preset--color--brume); font-weight:700; font-size:.9rem }
.msl-radar__absent span{
  display:block; font-weight:600; font-size: .76rem; letter-spacing:.13em;
  text-transform:uppercase; color: rgba(240,237,230,.5); margin-top:.3rem;
}

.msl-radar__barre{
  position:absolute; inset:auto 0 0 0; padding:.65rem .8rem;
  background: var(--wp--preset--gradient--voile-nuit);
  display:flex; align-items:flex-end; gap:.55rem;
}
.msl-radar__txt{
  color:var(--wp--preset--color--brume); font-size: .85rem; font-weight:700; line-height:1.25;
}
.msl-radar__txt span{
  display:block; font-size: .7rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color: var(--wp--preset--color--ambre); margin-top:.15rem;
}
.msl-radar__direct{
  margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:.35rem;
  font-size: .66rem; font-weight:700; letter-spacing:.12em;
  color: var(--wp--preset--color--brume); background: rgba(233,160,41,.22);
  border:1px solid rgba(233,160,41,.5); padding:.22rem .55rem; border-radius:99px;
}
.msl-radar__ouvrir{
  position:absolute; top:.7rem; right:.7rem;
  background: rgba(10,30,43,.82); color: var(--wp--preset--color--brume);
  font-size: .74rem; font-weight:700; letter-spacing:.04em;
  padding:.4rem .7rem; border-radius:99px; backdrop-filter: blur(4px);
}
.msl-verrou__fond{
  aspect-ratio:16/9;
  background:
    radial-gradient(circle at 42% 52%, #D14E7A 0%, #9B4FA0 22%, #5A5FA8 44%, #2C4E7A 66%, #0A1E2B 100%);
  filter: blur(6px);
}

/* La carte interactive, sur la page Observation : pleine largeur, sans marge */
.msl-carte-pleine{ margin-block:0 }
.msl-carte-pleine > *{ max-width:none }

/* Les rendus de la chaine sont des calques TRANSPARENTS, concus pour etre
   poses sur le fond Leaflet. Affiches seuls, ils ont besoin d'un fond :
   sans quoi les echos flottent sur du blanc. */
.msl-radar--lien{ background: var(--wp--preset--color--nuit) }
.msl-radar--lien img{ background: var(--wp--preset--color--nuit) }
.msl-verrou img{ background: var(--wp--preset--color--nuit) }

/* Rendu reserve, visible par un adherent : meme traitement que le radar libre,
   badge different. Le fond degrade du verrou n'est plus une image floutee mais
   un motif genere : aucun octet de donnee reelle n'atteint un non-adherent. */
.msl-radar--prive{ margin-top:.6rem }
.msl-radar--prive .msl-radar__direct{
  background: rgba(110,31,50,.28); border-color: rgba(233,160,41,.45);
}

/* =========================================================
   6. En-tete fixe
   =========================================================
   Piege classique : un ancetre en overflow-x:hidden annule tout
   position:sticky de ses descendants, sans aucun message d'erreur.
   overflow:clip produit le meme effet visuel SANS casser le sticky.
   C'est la seule difference entre un en-tete qui suit et un qui part. */
html{ overflow-x: clip }
body,
.wp-site-blocks{ overflow-x: clip }

.wp-site-blocks > header,
header.wp-block-template-part,
.msl-entete{
  position: sticky;
  top: 0;
  z-index: 100;
}
/* La barre d'administration mesure 32 px, 46 px en dessous de 783 px. */
body.admin-bar .wp-site-blocks > header,
body.admin-bar header.wp-block-template-part,
body.admin-bar .msl-entete{ top: 32px }
@media (max-width: 782px){
  body.admin-bar .wp-site-blocks > header,
  body.admin-bar header.wp-block-template-part,
  body.admin-bar .msl-entete{ top: 46px }
}
/* Ombre discrete des que la page defile, pour detacher l'en-tete du contenu. */
.msl-entete{
  box-shadow: 0 1px 0 var(--wp--preset--color--bord);
  transition: box-shadow .2s ease;
}

/* =========================================================
   7. Contenus embarques : iframe, carte, video
   =========================================================
   Un iframe n'a pas de largeur intrinseque : sans contrainte il prend
   toute la place disponible, ce qui casse la colonne de lecture sur
   grand ecran. On le borne a la largeur « large » du site et on lui
   donne un rapport d'image, seule facon d'eviter le saut de mise en
   page pendant le chargement. */
.msl-embed{
  max-width: var(--wp--style--global--wide-size, 1140px);
  margin-inline: auto;
  width: 100%;
}
.msl-embed--pleine{ max-width: none }

.msl-embed iframe,
.msl-embed > .wp-block-html iframe{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;      /* portrait sur telephone : la carte a besoin de hauteur */
  border: 0;
  border-radius: var(--msl-rayon);
  background: var(--wp--preset--color--nuit);
}
@media (min-width: 600px){
  .msl-embed iframe{ aspect-ratio: 4 / 3 }
}
@media (min-width: 1000px){
  .msl-embed iframe{ aspect-ratio: 16 / 9 }
}

/* =========================================================
   8. Rythme : alternance des largeurs
   ========================================================= */
.msl-duo,
.msl-trio{ display: grid; gap: .8rem }
.msl-duo{ grid-template-columns: 1fr }
.msl-trio{ grid-template-columns: 1fr }
@media (min-width: 600px){
  .msl-trio{ grid-template-columns: repeat(2, 1fr) }
}
@media (min-width: 860px){
  .msl-duo{ grid-template-columns: repeat(2, 1fr); gap: 1.1rem }
  .msl-trio{ grid-template-columns: repeat(3, 1fr); gap: 1.1rem }
}
.msl-carte{
  background: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--bord);
  border-radius: var(--msl-rayon);
  padding: 1.1rem 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: .35rem;
  text-decoration: none; color: inherit;
}
.msl-carte--nuit{
  background: var(--wp--preset--color--saone);
  border-color: var(--wp--preset--color--saone);
  color: var(--wp--preset--color--brume);
}
.msl-carte__t{ font-weight: 800; font-size: 1rem; line-height: 1.2 }
.msl-carte__x{ font-size: .84rem; line-height: 1.5; color: rgba(19,36,51,.7) }
.msl-carte--nuit .msl-carte__x{ color: rgba(240,237,230,.66) }
.msl-carte__n{
  font-family: inherit; font-weight: 800; font-size: 1.9rem; line-height: 1;
  color: var(--wp--preset--color--lie); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-bottom: .1rem;
}
.msl-carte--nuit .msl-carte__n{ color: var(--wp--preset--color--ambre) }

/* =========================================================
   9. En-tete de page interieure
   ========================================================= */
.msl-hero{
  position: relative; border-radius: var(--msl-rayon); overflow: hidden;
  background: var(--wp--preset--color--nuit); color: var(--wp--preset--color--brume);
  display: flex; align-items: flex-end; min-height: 210px;
}
@media (min-width: 860px){ .msl-hero{ min-height: 300px } }
.msl-hero img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .95;
}
.msl-hero__voile{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,30,43,.15) 0%, rgba(10,30,43,.9) 78%);
}
.msl-hero__txt{ position: relative; padding: 1.4rem 1.3rem 1.5rem; max-width: 46ch }
.msl-hero__s{
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--wp--preset--color--ambre); margin: 0 0 .4rem;
}
.msl-hero h1{
  margin: 0; color: var(--wp--preset--color--brume);
  font-size: clamp(1.5rem, 5.5vw, 2.4rem); line-height: 1.05; letter-spacing: -.025em;
}
.msl-hero__c{
  margin: .6rem 0 0; font-size: .88rem; line-height: 1.5;
  color: rgba(240,237,230,.78);
}

/* =========================================================
   10. Menu superpose : volet, icones, animation
   =========================================================
   Le bloc Navigation de WordPress produit un volet fonctionnel mais nu.
   Tout se rhabille ici, sans une ligne de JavaScript : WordPress se
   contente d'ajouter la classe .is-menu-open, il suffit de s'y accrocher. */

/* --- Le bouton, trois traits --- */
.wp-block-navigation__responsive-container-open{
  width: 44px; height: 44px;          /* cible tactile reglementaire */
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--wp--preset--color--saone);
  background: transparent;
  transition: background .18s ease, transform .18s ease;
}
.wp-block-navigation__responsive-container-open:hover{
  background: var(--wp--preset--color--gris);
}
.wp-block-navigation__responsive-container-open:active{
  transform: scale(.92);
}
.wp-block-navigation__responsive-container-open svg{
  width: 26px; height: 26px; fill: currentColor;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.wp-block-navigation__responsive-container-open:active svg{ transform: rotate(90deg) }

/* --- Le volet --- */
.wp-block-navigation__responsive-container.is-menu-open{
  background-color: var(--wp--preset--color--nuit);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--wp--preset--color--brume);
  padding: clamp(1.2rem, 5vw, 2.4rem);
  animation: msl-volet .34s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes msl-volet{
  from{ opacity: 0; clip-path: circle(0% at calc(100% - 42px) 42px) }
  to  { opacity: 1; clip-path: circle(150% at calc(100% - 42px) 42px) }
}

/* --- Le bouton de fermeture --- */
.wp-block-navigation__responsive-container-close{
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 10px; color: var(--wp--preset--color--brume);
  border: 1px solid rgba(240,237,230,.18);
  transition: background .18s ease, transform .3s cubic-bezier(.4,0,.2,1);
}
.wp-block-navigation__responsive-container-close:hover{
  background: rgba(240,237,230,.08); transform: rotate(90deg);
}
.wp-block-navigation__responsive-container-close svg{ width: 22px; height: 22px; fill: currentColor }

/* --- La liste --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  gap: 0; width: 100%; max-width: 34rem; margin-inline: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  width: 100%;
  border-bottom: 1px solid rgba(240,237,230,.11);
  animation: msl-entree .42s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes msl-entree{
  from{ opacity: 0; transform: translateY(14px) }
  to  { opacity: 1; transform: none }
}
/* Apparition en cascade : chaque entree suit la precedente de 45 ms.
   L'oeil lit alors la liste dans l'ordre au lieu de la recevoir d'un bloc. */
.is-menu-open .wp-block-navigation-item:nth-child(1){ animation-delay: .10s }
.is-menu-open .wp-block-navigation-item:nth-child(2){ animation-delay: .145s }
.is-menu-open .wp-block-navigation-item:nth-child(3){ animation-delay: .19s }
.is-menu-open .wp-block-navigation-item:nth-child(4){ animation-delay: .235s }
.is-menu-open .wp-block-navigation-item:nth-child(5){ animation-delay: .28s }
.is-menu-open .wp-block-navigation-item:nth-child(6){ animation-delay: .325s }
.is-menu-open .wp-block-navigation-item:nth-child(7){ animation-delay: .37s }
.is-menu-open .wp-block-navigation-item:nth-child(8){ animation-delay: .415s }

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display: flex; align-items: center; gap: .9rem;
  width: 100%; padding: .95rem .3rem;
  font-size: clamp(1.05rem, 4.4vw, 1.35rem);
  font-weight: 700; letter-spacing: -.01em;
  color: var(--wp--preset--color--brume);
  text-decoration: none;
  transition: color .16s ease, padding-left .16s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover{
  color: var(--wp--preset--color--ambre);
  padding-left: .65rem;
}
/* Chevron discret, pousse a droite */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after{
  content: "→";
  margin-left: auto;
  font-weight: 400;
  color: rgba(240,237,230,.28);
  transition: transform .18s ease, color .18s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover::after{
  color: var(--wp--preset--color--ambre);
  transform: translateX(4px);
}

/* --- Les icones ---
   Posees en mask-image : le dessin prend la couleur du texte, donc il
   passe en ambre au survol sans qu'on ait a fournir un second fichier. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before{
  content: "";
  flex: none; width: 24px; height: 24px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
  opacity: .8;
  transition: opacity .16s ease;
  /* Repli : une pastille, pour toute entree sans icone dediee. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3C/svg%3E");
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover::before{ opacity: 1 }

/* La ligne des territoires, en pied de volet. Decorative. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::after{
  content: "Autunois · Bassin minier · Couchois · Chalonnais · Bresse · Charolais · Mâconnais";
  display: block; margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(240,237,230,.11);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; line-height: 2; text-align: center;
  color: rgba(240,237,230,.34);
  max-width: 34rem; margin-inline: auto;
  animation: msl-entree .5s .46s cubic-bezier(.2,.7,.2,1) both;
}
.wp-block-navigation__responsive-container.is-menu-open{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20700%22%20fill%3D%22none%22%20stroke%3D%22%2523F0EDE6%22%20stroke-opacity%3D%22.07%22%20stroke-width%3D%221.4%22%3E%3Cellipse%20cx%3D%22330%22%20cy%3D%22150%22%20rx%3D%2260%22%20ry%3D%2240%22%20transform%3D%22rotate%28-18%20330%20150%29%22%2F%3E%3Cellipse%20cx%3D%22330%22%20cy%3D%22150%22%20rx%3D%22110%22%20ry%3D%2272%22%20transform%3D%22rotate%28-18%20330%20150%29%22%2F%3E%3Cellipse%20cx%3D%22330%22%20cy%3D%22150%22%20rx%3D%22165%22%20ry%3D%22106%22%20transform%3D%22rotate%28-18%20330%20150%29%22%2F%3E%3Cellipse%20cx%3D%22330%22%20cy%3D%22150%22%20rx%3D%22225%22%20ry%3D%22142%22%20transform%3D%22rotate%28-18%20330%20150%29%22%2F%3E%3Cellipse%20cx%3D%22330%22%20cy%3D%22150%22%20rx%3D%22290%22%20ry%3D%22180%22%20transform%3D%22rotate%28-18%20330%20150%29%22%2F%3E%3Cellipse%20cx%3D%2260%22%20cy%3D%22600%22%20rx%3D%2290%22%20ry%3D%2258%22%20transform%3D%22rotate%2812%2060%20600%29%22%2F%3E%3Cellipse%20cx%3D%2260%22%20cy%3D%22600%22%20rx%3D%22150%22%20ry%3D%2296%22%20transform%3D%22rotate%2812%2060%20600%29%22%2F%3E%3Cellipse%20cx%3D%2260%22%20cy%3D%22600%22%20rx%3D%22215%22%20ry%3D%22136%22%20transform%3D%22rotate%2812%2060%20600%29%22%2F%3E%3C%2Fsvg%3E") }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="previsions"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%227.5%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M3%2017.5a4%204%200%200%201%204-4%205%205%200%200%201%209.6%201.2A3.4%203.4%200%200%201%2016%2021H7a4%204%200%200%201-4-3.5z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%227.5%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M3%2017.5a4%204%200%200%201%204-4%205%205%200%200%201%209.6%201.2A3.4%203.4%200%200%201%2016%2021H7a4%204%200%200%201-4-3.5z%22%2F%3E%3C%2Fsvg%3E") }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="observation"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%222.3%22%2F%3E%3Cpath%20d%3D%22M6%2013a5%205%200%200%201%205%205h-2.2A2.8%202.8%200%200%200%206%2015.2z%22%2F%3E%3Cpath%20d%3D%22M6%208a10%2010%200%200%201%2010%2010h-2.2A7.8%207.8%200%200%200%206%2010.2z%22%2F%3E%3Cpath%20d%3D%22M6%203a15%2015%200%200%201%2015%2015h-2.2A12.8%2012.8%200%200%200%206%205.2z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%222.3%22%2F%3E%3Cpath%20d%3D%22M6%2013a5%205%200%200%201%205%205h-2.2A2.8%202.8%200%200%200%206%2015.2z%22%2F%3E%3Cpath%20d%3D%22M6%208a10%2010%200%200%201%2010%2010h-2.2A7.8%207.8%200%200%200%206%2010.2z%22%2F%3E%3Cpath%20d%3D%22M6%203a15%2015%200%200%201%2015%2015h-2.2A12.8%2012.8%200%200%200%206%205.2z%22%2F%3E%3C%2Fsvg%3E") }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="climatologie"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Crect%20x%3D%223%22%20y%3D%2212%22%20width%3D%223.4%22%20height%3D%229%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%228.3%22%20y%3D%227%22%20width%3D%223.4%22%20height%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2213.6%22%20y%3D%2214%22%20width%3D%223.4%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2218.9%22%20y%3D%223%22%20width%3D%223.4%22%20height%3D%2218%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Crect%20x%3D%223%22%20y%3D%2212%22%20width%3D%223.4%22%20height%3D%229%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%228.3%22%20y%3D%227%22%20width%3D%223.4%22%20height%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2213.6%22%20y%3D%2214%22%20width%3D%223.4%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2218.9%22%20y%3D%223%22%20width%3D%223.4%22%20height%3D%2218%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E") }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="rechauffement"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M10%203.5a2.5%202.5%200%200%201%205%200v9.1a5%205%200%201%201-5%200V3.5zm2.5%209.9a3%203%200%201%200%200%206%203%203%200%200%200%200-6z%22%2F%3E%3Cpath%20d%3D%22M11.6%206.5h1.8v7h-1.8z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M10%203.5a2.5%202.5%200%200%201%205%200v9.1a5%205%200%201%201-5%200V3.5zm2.5%209.9a3%203%200%201%200%200%206%203%203%200%200%200%200-6z%22%2F%3E%3Cpath%20d%3D%22M11.6%206.5h1.8v7h-1.8z%22%2F%3E%3C%2Fsvg%3E") }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="adhesion"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12%202l2.6%205.6%206.1.8-4.5%204.2%201.2%206-5.4-3-5.4%203%201.2-6L3.3%208.4l6.1-.8z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12%202l2.6%205.6%206.1.8-4.5%204.2%201.2%206-5.4-3-5.4%203%201.2-6L3.3%208.4l6.1-.8z%22%2F%3E%3C%2Fsvg%3E") }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="qui-sommes-nous"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M0.0%2087.1%20L10.9%20109.5%20L11.7%20117.3%20L20.3%20119.4%20L25.7%20125.1%20L32.7%20125.6%20L38.2%20130.0%20L38.2%20152.3%20L29.9%20159.1%20L30.9%20171.8%20L41.6%20177.5%20L67.0%20176.5%20L71.9%20178.8%20L81.0%20174.4%20L85.2%20161.9%20L115.6%20161.9%20L119.7%20165.3%20L120.5%20173.1%20L124.4%20176.8%20L141.8%20124.8%20L171.9%20124.5%20L180.5%20131.8%20L195.6%20126.9%20L194.8%20107.1%20L197.9%20102.2%20L192.7%2087.1%20L192.7%2073.1%20L199.7%2069.5%20L193.8%2063.0%20L187.8%2061.9%20L178.7%2052.9%20L176.9%2046.9%20L143.1%2050.0%20L126.2%2057.3%20L115.1%2057.3%20L106.0%2052.1%20L101.3%2044.3%20L88.1%2038.1%20L83.9%2032.6%20L76.4%2028.2%20L70.4%2027.7%20L64.7%2021.2%20L60.0%2020.9%20L47.3%2027.4%20L46.5%2041.4%20L41.8%2046.9%20L45.5%2050.3%20L46.2%2079.1%20L36.4%2082.5%20L30.6%2087.4%20L18.4%2087.4%20L10.4%2083.5%20Z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M0.0%2087.1%20L10.9%20109.5%20L11.7%20117.3%20L20.3%20119.4%20L25.7%20125.1%20L32.7%20125.6%20L38.2%20130.0%20L38.2%20152.3%20L29.9%20159.1%20L30.9%20171.8%20L41.6%20177.5%20L67.0%20176.5%20L71.9%20178.8%20L81.0%20174.4%20L85.2%20161.9%20L115.6%20161.9%20L119.7%20165.3%20L120.5%20173.1%20L124.4%20176.8%20L141.8%20124.8%20L171.9%20124.5%20L180.5%20131.8%20L195.6%20126.9%20L194.8%20107.1%20L197.9%20102.2%20L192.7%2087.1%20L192.7%2073.1%20L199.7%2069.5%20L193.8%2063.0%20L187.8%2061.9%20L178.7%2052.9%20L176.9%2046.9%20L143.1%2050.0%20L126.2%2057.3%20L115.1%2057.3%20L106.0%2052.1%20L101.3%2044.3%20L88.1%2038.1%20L83.9%2032.6%20L76.4%2028.2%20L70.4%2027.7%20L64.7%2021.2%20L60.0%2020.9%20L47.3%2027.4%20L46.5%2041.4%20L41.8%2046.9%20L45.5%2050.3%20L46.2%2079.1%20L36.4%2082.5%20L30.6%2087.4%20L18.4%2087.4%20L10.4%2083.5%20Z%22%2F%3E%3C%2Fsvg%3E") }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="accueil"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12%203l9%208h-2.6v9h-5v-5.6h-2.8V20h-5v-9H3z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M12%203l9%208h-2.6v9h-5v-5.6h-2.8V20h-5v-9H3z%22%2F%3E%3C%2Fsvg%3E") }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="contact"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M3%205.5h18v13H3z%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M3.6%206.2L12%2012.5l8.4-6.3%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M3%205.5h18v13H3z%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M3.6%206.2L12%2012.5l8.4-6.3%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") }


/* =========================================================
   11. Correctif de priorite du volet
   =========================================================
   Le bloc Navigation applique ses couleurs de superposition en ligne,
   ou via une classe generee : ces declarations passent AVANT la feuille
   du theme enfant. Sans !important, le volet garde le fond clair par
   defaut et le texte creme devient invisible.
   La bonne pratique reste de regler les couleurs dans l'editeur
   (bloc Navigation > Couleurs > Superposition) ; ceci garantit le
   resultat meme si le reglage n'a pas ete fait. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open{
  background-color: #0A1E2B !important;
  color: #F0EDE6 !important;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  color: #F0EDE6 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible{
  color: #E9A029 !important;
}

/* Icone du dereglement climatique : l'adresse de la page ne contient pas
   forcement « rechauffement ». On couvre les formulations possibles. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="dereglement"]::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="derangement"]::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="climatique"]::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M10%203.5a2.5%202.5%200%200%201%205%200v9.1a5%205%200%201%201-5%200V3.5zm2.5%209.9a3%203%200%201%200%200%206%203%203%200%200%200%200-6z%22%2F%3E%3Cpath%20d%3D%22M11.6%206.5h1.8v7h-1.8z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M10%203.5a2.5%202.5%200%200%201%205%200v9.1a5%205%200%201%201-5%200V3.5zm2.5%209.9a3%203%200%201%200%200%206%203%203%200%200%200%200-6z%22%2F%3E%3Cpath%20d%3D%22M11.6%206.5h1.8v7h-1.8z%22%2F%3E%3C%2Fsvg%3E");
}

/* L'apercu anime est une image OPAQUE, deja composee : contrairement aux
   calques radar bruts, elle n'a besoin d'aucun fond derriere elle. */
.msl-radar--lien img[src*=".gif"]{ background: transparent }
.msl-radar--lien img{ aspect-ratio: auto; max-height: 78vh; object-fit: contain }

/* =========================================================
   12. Cadre de la carte de previsions
   =========================================================
   Un iframe n'a pas de hauteur naturelle : sans reglage il en prend une
   arbitraire, qui coupe le contenu ou laisse un grand vide. La carte
   annonce donc sa hauteur reelle, et on la lui applique. La valeur en dur
   du gabarit ne sert que le temps du chargement. */
.msl-cadre{
  max-width: var(--wp--style--global--wide-size, 1140px);
  margin-inline: auto;
  border-radius: var(--msl-rayon);
  overflow: hidden;
  background: var(--wp--preset--color--gris);
}
.msl-cadre iframe{
  display: block;
  width: 100%;
  border: 0;
  /* Transition douce : sans elle, chaque remesure fait sauter la page
     sous les doigts pendant le chargement. */
  transition: height .25s ease;
}
.msl-cadre--pleine{ max-width: none; border-radius: 0 }

/* =========================================================
   13. Compte : connexion et inscription dans l'en-tete
   ========================================================= */
.msl-compte{ display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap }
.msl-compte__lien,
.msl-compte__nom,
.msl-compte__sortie{
  font-size: .8rem; font-weight: 700; text-decoration: none;
  color: var(--wp--preset--color--saone);
  display: inline-flex; align-items: center; min-height: 44px;
}
.msl-compte__lien:hover,
.msl-compte__nom:hover{ color: var(--wp--preset--color--lie) }
.msl-compte__lien--fort{
  border: 1px solid var(--wp--preset--color--saone);
  border-radius: 999px; padding: 0 .8rem; min-height: 36px;
}
.msl-compte__lien--fort:hover{
  background: var(--wp--preset--color--saone); color: var(--wp--preset--color--brume);
}
.msl-compte--connecte .msl-compte__nom::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--wp--preset--color--ambre); margin-right: .4rem;
}
.msl-compte__sortie{ font-weight: 500; color: rgba(19,36,51,.5); font-size: .76rem }

/* Sous 560 px l'en-tete deborde : on ne garde que l'essentiel.
   « Créer un compte » reste visible sur la page Abonnements, ou il compte. */
@media (max-width: 560px){
  .msl-compte__lien--fort{ display: none }
  .msl-compte__sortie{ display: none }
}

/* Quatre paliers : la rangee defile, avec un indice visuel de debordement */
.msl-tarifs{ scroll-padding-left: 1rem }
.msl-tarif{ width: 232px }
.msl-tarif__note{
  display: block; font-size: .76rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(19,36,51,.45); margin-top: .15rem;
}
.msl-tarif--haut .msl-tarif__note{ color: rgba(240,237,230,.5) }

/* =========================================================
   14. Page Mon compte
   ========================================================= */
.msl-compte-page{ display: grid; gap: .8rem }
.msl-compte-bloc{
  background: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--bord);
  border-radius: var(--msl-rayon);
  padding: 1.1rem 1.1rem 1.2rem;
}
.msl-compte-bloc--niveau{
  background: var(--wp--preset--color--saone);
  border-color: var(--wp--preset--color--saone);
  color: var(--wp--preset--color--brume);
}
.msl-compte-bloc--niveau .is-style-surtitre{ color: var(--wp--preset--color--ambre) }
.msl-compte-niveau{
  font-family: inherit; font-weight: 800; font-size: 1.2rem;
  margin: 0 0 .3rem; letter-spacing: -.01em;
}
.msl-compte-detail{ margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(19,36,51,.7) }
.msl-compte-bloc--niveau .msl-compte-detail{ color: rgba(240,237,230,.78) }
.msl-compte-lien{
  display: inline-flex; align-items: center; min-height: 44px; margin-right: 1.1rem;
  font-size: .86rem; font-weight: 700; text-decoration: none;
  color: var(--wp--preset--color--lie);
}
.msl-compte-bloc--niveau .msl-compte-lien{ color: var(--wp--preset--color--ambre) }
.msl-compte-lien--sortie{ color: rgba(19,36,51,.5); font-weight: 500 }

.msl-champ{ display: grid; gap: .3rem; margin: 0 0 1rem }
.msl-champ label{ font-size: .85rem; font-weight: 700; letter-spacing: .01em }
.msl-champ input{
  font: inherit; font-size: .95rem; padding: .65rem .85rem; min-height: 44px;
  border: 1px solid var(--wp--preset--color--bord); border-radius: 8px;
  background: var(--wp--preset--color--gris); color: var(--wp--preset--color--texte);
}
.msl-champ input:focus{
  outline: 2px solid var(--wp--preset--color--ambre); outline-offset: 1px;
  background: var(--wp--preset--color--blanc);
}
.msl-aide{ font-size: .8rem; color: rgba(19,36,51,.55); line-height: 1.45 }
.msl-fige{
  font-size: .95rem; font-weight: 600; padding: .65rem .85rem;
  background: var(--wp--preset--color--gris); border-radius: 8px;
  color: rgba(19,36,51,.55);
}
.msl-compte-page button[type=submit]{ border: 0; cursor: pointer; width: auto; padding-inline: 2rem }

.msl-avis{
  margin: 0; padding: .8rem 1rem; border-radius: var(--msl-rayon);
  font-size: .9rem; font-weight: 600; border-left: 3px solid;
}
.msl-avis--bon{ background: rgba(233,160,41,.12); border-color: var(--wp--preset--color--ambre) }
.msl-avis--ko{ background: rgba(110,31,50,.09); border-color: var(--wp--preset--color--lie) }

@media (min-width: 760px){
  .msl-compte-page{ grid-template-columns: 1fr 1fr; align-items: start }
  .msl-compte-page > .msl-avis{ grid-column: 1 / -1 }
  .msl-compte-bloc:nth-of-type(2){ grid-row: span 2 }
}

/* =========================================================
   15. Invitation a installer
   =========================================================
   iOS ne propose jamais l'installation de lui-meme : sans cette carte,
   la fonction existe mais reste invisible. Elle montre l'icone telle
   qu'elle apparaitra sur l'ecran d'accueil — c'est l'argument le plus
   efficace : on voit ce qu'on obtient. Affichee une seule fois, jamais
   quand le site tourne deja en mode autonome. */
.msl-install{
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  background: var(--wp--preset--color--nuit); color: var(--wp--preset--color--brume);
  border: 1px solid rgba(240,237,230,.1);
  border-radius: 18px; padding: 1.05rem 1.05rem 1.15rem;
  box-shadow: 0 18px 50px rgba(6,18,26,.5);
  max-width: 30rem; margin-inline: auto; overflow: hidden;
  opacity: 0; transform: translateY(18px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  padding-bottom: calc(1.15rem + env(safe-area-inset-bottom));
}
.msl-install--visible{ opacity: 1; transform: none }
/* Halo ambre : rappelle le soleil de la marque sans repeter le logo. */
.msl-install::before{
  content: ""; position: absolute; top: -70px; right: -60px; width: 190px; height: 190px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(233,160,41,.20), transparent 68%);
}
.msl-install__x{
  position: absolute; top: 5px; right: 5px; width: 34px; height: 34px;
  background: transparent; border: 0; color: rgba(240,237,230,.5);
  font-size: 1.35rem; line-height: 1; cursor: pointer; border-radius: 8px;
}
.msl-install__x:hover{ color: var(--wp--preset--color--brume) }

.msl-install__haut{ display: flex; align-items: center; gap: .8rem; position: relative }
/* Coins arrondis d'icone d'application : le format que le telephone donnera. */
.msl-install__icone{
  flex: none; width: 56px; height: 56px; border-radius: 14px; overflow: hidden;
  background: var(--wp--preset--color--saone); display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(240,237,230,.12);
  animation: msl-pose .5s .1s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes msl-pose{ from{ transform: scale(.7); opacity: 0 } to{ transform: none; opacity: 1 } }
.msl-install__icone svg{ width: 100%; height: 100%; display: block }
.msl-install__t{ margin: 0; font-weight: 800; font-size: .98rem; line-height: 1.2 }
.msl-install__s{
  margin: .15rem 0 0; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--wp--preset--color--ambre);
}
.msl-install__x2{
  margin: .75rem 0 0; font-size: .88rem; line-height: 1.5; color: rgba(240,237,230,.75);
}

.msl-install__etapes{
  list-style: none; margin: .85rem 0 0; padding: 0; display: grid; gap: .5rem; position: relative;
}
.msl-install__etapes li{
  display: flex; align-items: center; gap: .65rem; font-size: .88rem; line-height: 1.35;
  background: rgba(240,237,230,.06); border-radius: 10px; padding: .55rem .7rem;
  animation: msl-entree .4s cubic-bezier(.2,.7,.2,1) both;
}
.msl-install__etapes li:nth-child(1){ animation-delay: .18s }
.msl-install__etapes li:nth-child(2){ animation-delay: .26s }
.msl-install__etapes b{ color: var(--wp--preset--color--brume); font-weight: 700 }
.msl-install__n{
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--wp--preset--color--ambre); color: var(--wp--preset--color--saone);
  font-size: .75rem; font-weight: 800; display: grid; place-items: center;
}
.msl-install__g{ flex: none; width: 22px; height: 22px; color: var(--wp--preset--color--ambre) }
.msl-install__g svg{ width: 100%; height: 100%; display: block }

.msl-install__go{
  display: block; width: 100%; margin-top: .9rem;
  background: var(--wp--preset--color--ambre); color: var(--wp--preset--color--saone);
  border: 0; border-radius: 999px; padding: .75rem 1.3rem;
  font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; min-height: 44px;
}
.msl-install__go:hover{ background: #D4901F }
.msl-install__note{
  margin: .6rem 0 0; font-size: .75rem; color: rgba(240,237,230,.45); text-align: center;
}

/* En mode autonome, la barre d'etat iOS empiete sur l'en-tete :
   on rend l'espace sur, sinon le logo passe sous l'heure. */
@media (display-mode: standalone){
  .msl-entete{ padding-top: calc(.55rem + env(safe-area-inset-top)) }
  .msl-pied{ padding-bottom: calc(var(--wp--preset--spacing--50) + env(safe-area-inset-bottom)) }
}

/* --- Apercu d'alerte dans l'invitation ---
   Le polygone rouge est celui du suivi de cellules, pas une icone
   generique : qui a deja vu la carte le reconnait immediatement. */
.msl-alerte-demo{
  position: relative; display: flex; gap: .7rem; align-items: flex-start;
  margin-top: .9rem; padding: .7rem .8rem; border-radius: 12px;
  background: rgba(214,84,58,.11);
  border: 1px solid rgba(214,84,58,.34);
  border-left: 3px solid #D6543A;
  animation: msl-entree .42s .14s cubic-bezier(.2,.7,.2,1) both;
}
.msl-alerte-demo__ico{
  flex: none; width: 46px; height: 46px;
  animation: msl-cellule 2.4s ease-in-out infinite;
}
@keyframes msl-cellule{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.07) } }
.msl-alerte-demo__ico svg{ width: 100%; height: 100%; display: block }
.msl-alerte-demo__t{
  margin: 0; font-size: .84rem; font-weight: 800; line-height: 1.2;
  color: var(--wp--preset--color--brume);
  display: flex; align-items: center; gap: .4rem;
}
.msl-alerte-demo__pt{
  width: 7px; height: 7px; border-radius: 50%; background: #D6543A;
  flex: none; position: relative;
}
.msl-alerte-demo__pt::after{
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid #D6543A; animation: msl-pulse 2s ease-out infinite;
}
.msl-alerte-demo__d{
  margin: .2rem 0 0; font-size: .81rem; line-height: 1.45; color: rgba(240,237,230,.72);
}

/* Chaque risque est cliquable et mene a SA couche : la grele au dual-pol,
   la rafale au Doppler. Un lien unique obligerait a chercher soi-meme. */
a.msl-bande__item{ text-decoration: none; color: inherit; cursor: pointer }
a.msl-bande__item:hover .msl-bande__txt strong{ color: var(--niveau) }
a.msl-bande__item:hover .msl-bande__fleche{ transform: translateX(3px) }
.msl-bande__fleche{
  flex: none; width: 15px; height: 15px; margin-left: .3rem;
  color: rgba(240,237,230,.35); transition: transform .18s ease, color .18s ease;
}
a.msl-bande__item:hover .msl-bande__fleche{ color: var(--niveau) }
.msl-bande__fleche svg{ width: 100%; height: 100% }
a.msl-bande__item:focus-visible{
  outline: 2px solid var(--wp--preset--color--ambre); outline-offset: -2px; border-radius: 6px;
}

/* Filet de securite : un iframe pose a la main dans un bloc HTML n'herite
   d'aucune de nos regles. On centre et on borne tout iframe pointant vers
   la carte, quelle que soit la facon dont il a ete insere. */
.wp-block-html iframe[src*="carte.php"],
.entry-content iframe[src*="carte.php"]{
  display: block;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1140px);
  margin-inline: auto;
  border: 0;
  border-radius: var(--msl-rayon);
}

/* --- Bandeau : cadrage sur grand ecran ---
   En pleine largeur, l'icone se retrouvait seule a gauche et le texte
   flottait au centre. On borne le contenu a la largeur « large » du site
   et on le centre : le bandeau reste plein, sa substance s'aligne sur
   le reste de la page. */
.msl-bande{
  justify-content: flex-start;
  padding-inline: max(.95rem, calc((100% - var(--wp--style--global--wide-size, 1140px)) / 2));
}
.msl-bande--calme{ align-items: center }

/* L'etat calme tient sur une ligne : titre et precision cote a cote. */
.msl-bande--calme .msl-bande__txt{
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
}
.msl-bande--calme .msl-bande__txt strong{ display: inline }
.msl-bande--calme .msl-bande__txt span{
  display: inline; margin-top: 0; font-size: .85rem;
}
.msl-bande--calme .msl-bande__ico{
  width: 26px; height: 26px; border-radius: 7px;
}
.msl-bande--calme .msl-bande__ico svg{ width: 15px; height: 15px }

/* La piste ne doit pas s'etirer sur toute la largeur disponible : sans
   cette borne, l'heure et les points partent a l'autre bout de l'ecran. */
.msl-bande__piste{ max-width: 62ch }
.msl-bande__heure{ margin-left: 1.2rem }

@media (max-width: 640px){
  .msl-bande__piste{ max-width: none }
  .msl-bande__heure{ margin-left: auto }
  .msl-bande--calme .msl-bande__txt{ display: block }
  .msl-bande--calme .msl-bande__txt span{ display: block; margin-top: .1rem }
}

/* =========================================================
   16. Veille : le departement se trace
   =========================================================
   Un radar qui tourne dit « je surveille ». Le contour du departement qui
   se trace dit « je surveille CE territoire » — et cette forme n'appartient
   qu'a nous. C'est la difference entre un signe generique et une signature.

   Le trace boucle en 4,5 s, puis le coeur bat au moment ou il se referme :
   le mouvement se termine sur un point, l'oeil sait ou se poser. */
.msl-veille{
  flex: none; position: relative; width: 34px; height: 34px;
  display: block;
}
.msl-veille__svg{ width: 100%; height: 100%; display: block; overflow: visible }

.msl-veille__fond{ fill: rgba(143,191,159,.10) }
.msl-veille__lit{
  fill: none; stroke: #8FBF9F; stroke-opacity: .22; stroke-width: 5;
}
.msl-veille__trace{
  fill: none; stroke: #8FBF9F; stroke-width: 6; stroke-linecap: round;
  /* Le tour du departement mesure environ 1 100 unites : on masque toute
     la ligne, puis on la devoile. */
  stroke-dasharray: 1100; stroke-dashoffset: 1100;
  animation: msl-tracer 4.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes msl-tracer{
  0%   { stroke-dashoffset: 1100; opacity: 1 }
  55%  { stroke-dashoffset: 0;    opacity: 1 }
  78%  { stroke-dashoffset: 0;    opacity: 1 }
  100% { stroke-dashoffset: 0;    opacity: 0 }
}

.msl-veille__coeur{
  fill: #9FE1CB; transform-origin: 100px 79px;
  animation: msl-battre 4.5s ease-in-out infinite;
}
@keyframes msl-battre{
  0%, 50% { opacity: .3; transform: scale(.75) }
  62%     { opacity: 1;  transform: scale(1.3) }
  100%    { opacity: .3; transform: scale(.75) }
}

/* Sans mouvement, le contour reste dessine et le coeur visible :
   l'information passe, seule l'animation disparait. */
@media (prefers-reduced-motion: reduce){
  .msl-veille__trace{ animation: none; stroke-dashoffset: 0; opacity: .8 }
  .msl-veille__coeur{ animation: none; opacity: .8 }
}

/* =========================================================
   17. Bandeau a deux etages : quoi, puis quand
   =========================================================
   La ligne du haut dit ce qui se passe et, par temps calme, comment etre
   prevenu. La frise dit QUAND. C'est la seule question qui compte pour
   quelqu'un qui a une vigne ou une grue : pas « y a-t-il un risque »,
   mais « ai-je le temps de finir ». */
.msl-bande--frise{
  display: block; padding-top: .5rem; padding-bottom: .55rem;
}
.msl-bande__ligne{
  display: flex; align-items: center; gap: .7rem; min-height: 34px;
}
.msl-bande--frise .msl-bande__piste{ min-height: 34px }

/* Message d'invitation, en ambre : ce n'est pas une publicite, c'est la
   suite logique de la phrase — on ne peut pas etre alerte sans compte. */
.msl-bande__suite{
  display: inline; margin-left: .45rem; font-size: .85rem; font-weight: 700;
  color: var(--wp--preset--color--ambre); text-decoration: none;
  border-bottom: 1px solid rgba(233,160,41,.35);
}
.msl-bande__suite:hover{ border-bottom-color: var(--wp--preset--color--ambre) }
.msl-bande__suite--ok{
  color: rgba(143,191,159,.9); font-weight: 600; border-bottom: 0;
}
.msl-bande--calme .msl-bande__txt{ display: block }
.msl-bande--calme .msl-bande__txt strong{ display: inline; font-size: .88rem }

/* --- la frise --- */
.msl-frise{ margin-top: .45rem }
.msl-frise__barre{
  display: flex; gap: 1px; height: 7px; border-radius: 4px; overflow: hidden;
}
.msl-frise__s{ flex: 1; display: block; transition: background .3s ease }
/* L'heure courante, marquee : sans repere, on ne sait pas ou commence la frise. */
.msl-frise__s:first-child{ box-shadow: inset 2px 0 0 rgba(240,237,230,.55) }
.msl-frise__reperes{
  display: flex; justify-content: space-between; margin-top: .28rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .09em;
  color: rgba(240,237,230,.38); text-transform: uppercase;
}

@media (max-width: 560px){
  .msl-bande__suite{
    display: block; margin-left: 0; margin-top: .1rem; font-size: .8rem;
    border-bottom: 0;
  }
  .msl-bande--calme .msl-bande__txt strong{ display: block; font-size: .86rem }
  .msl-frise__reperes{ font-size: .62rem }
}

/* Le texte prend la place disponible, l'horodatage ne bouge pas : sans
   cette repartition, la mention « il y a 4 minutes » se fait chevaucher
   par le message des que celui-ci passe sur deux lignes. */
.msl-bande__ligne .msl-bande__txt{ flex: 1; min-width: 0 }
.msl-bande__ligne .msl-bande__maj{ flex: none; margin-left: auto; padding-left: .6rem }
@media (max-width: 820px){
  .msl-bande__ligne .msl-bande__maj{ display: none }
}

/* Sur telephone, la pastille « 2 risques » se reduisait a un cercle avec un
   chiffre : illisible et inutile. La ligne entiere est deja cliquable et les
   points indiquent qu'il y en a plusieurs — on la retire plutot que de la
   deformer. */
@media (max-width: 640px){
  .msl-bande__tout{ display: none }
  .msl-bande__points{ margin-left: auto }
}

/* =========================================================
   18. Page de prévision par commune
   ========================================================= */
.msl-prev{ --pv-bord: var(--wp--preset--color--bord) }
#msl-prev{ color: var(--wp--preset--color--texte) }
#msl-prev *{ box-sizing: border-box }

.msl-prev__hero{
  background: linear-gradient(170deg, var(--wp--preset--color--nuit) 0%, #16344a 100%);
  color: var(--wp--preset--color--brume);
  border-radius: var(--msl-rayon); padding: 1.05rem 1rem 1.1rem;
  position: relative; overflow: hidden;
}
.msl-prev__hero::after{
  content: ""; position: absolute; top: -90px; right: -70px; width: 250px; height: 250px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(233,160,41,.18), transparent 70%);
}
.msl-prev__lieu{ display: flex; align-items: baseline; gap: .55rem; position: relative }
.msl-prev__lieu b{ font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em }
.msl-prev__chg{
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .76rem; font-weight: 700; color: var(--wp--preset--color--ambre);
}
.msl-prev__maj{
  margin: .2rem 0 0; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: rgba(240,237,230,.42); position: relative;
}
.msl-prev__now{ display: flex; align-items: center; gap: .8rem; margin-top: .7rem; position: relative }
.msl-prev__ic{ flex: none; width: 72px; height: 72px }
.msl-prev__ic svg{ width: 100%; height: 100% }
.msl-prev__dg{ font-size: 3.4rem; font-weight: 800; letter-spacing: -.05em; line-height: .85 }
.msl-prev__mot{ font-size: .9rem; font-weight: 700; margin: .3rem 0 0 }

.msl-prev__mes{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem;
  margin-top: .8rem; position: relative;
}
.msl-prev__ms{ background: rgba(240,237,230,.07); border-radius: 9px; padding: .5rem .3rem; text-align: center }
.msl-prev__ms .i{ display: block; width: 17px; height: 17px; margin: 0 auto .25rem; color: var(--wp--preset--color--ambre) }
.msl-prev__ms .i svg{ width: 100%; height: 100% }
.msl-prev__ms b{ display: block; font-size: .82rem; font-weight: 800; letter-spacing: -.01em }
.msl-prev__ms .s{ display: block; font-size: .64rem; color: rgba(240,237,230,.5); margin-top: .1rem; line-height: 1.25 }

.msl-prev__recherche{ display: flex; gap: .45rem; margin-top: .7rem }
.msl-prev__recherche input{
  flex: 1; min-width: 0; padding: .7rem .9rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--pv-bord); border-radius: 999px; background: var(--wp--preset--color--gris);
}
.msl-prev__recherche button{
  padding: .7rem 1.2rem; font: inherit; font-size: .88rem; font-weight: 800; border: 0;
  border-radius: 999px; background: var(--wp--preset--color--ambre);
  color: var(--wp--preset--color--saone); cursor: pointer; min-height: 44px;
}

.msl-prev__sec{ padding: 1.1rem 0 0 }
.msl-prev__sec h3{ font-size: .95rem; font-weight: 800; margin: 0 0 .2rem }
.msl-prev__x{ font-size: .85rem; color: rgba(19,36,51,.6); margin: 0 0 .5rem }

.msl-prev__hrs{ display: flex; gap: 2px; overflow-x: auto; padding: 2px 0 3px; scrollbar-width: none }
.msl-prev__hrs::-webkit-scrollbar{ display: none }
.msl-prev__hr{
  flex: none; width: 54px; text-align: center; padding: .45rem 0 .25rem;
  border-radius: 10px; border: 1px solid transparent; background: none; cursor: pointer;
  font: inherit; color: inherit;
}
.msl-prev__hr.est-chaud{ background: rgba(233,160,41,.09) }
.msl-prev__hr.est-ouvert{
  background: var(--wp--preset--color--saone); border-color: var(--wp--preset--color--saone);
  color: var(--wp--preset--color--brume);
}
.msl-prev__hr.est-ouvert .ch{ color: var(--wp--preset--color--ambre); transform: rotate(180deg) }
.msl-prev__hr .h{ display: block; font-size: .7rem; font-weight: 700; color: rgba(19,36,51,.45) }
.msl-prev__hr.est-ouvert .h{ color: rgba(240,237,230,.6) }
.msl-prev__hr .i{ display: block; width: 27px; height: 27px; margin: .18rem auto }
.msl-prev__hr .i svg{ width: 100%; height: 100% }
.msl-prev__hr .t{ display: block; font-size: .88rem; font-weight: 800 }
.msl-prev__hr .mm{ display: block; font-size: .66rem; font-weight: 700; color: #5B9BC9; margin-top: .05rem }
.msl-prev__hr .ch{
  display: block; width: 11px; height: 11px; margin: .18rem auto 0;
  color: rgba(19,36,51,.28); transition: transform .2s ease;
}
.msl-prev__hr .ch svg{ width: 100%; height: 100% }

.msl-prev__pan{
  background: var(--wp--preset--color--saone); color: var(--wp--preset--color--brume);
  border-radius: 12px; padding: .8rem; margin-top: .5rem;
  animation: msl-entree .3s cubic-bezier(.2,.7,.2,1) both;
}
.msl-prev__tt{ display: flex; align-items: center; gap: .55rem; margin-bottom: .65rem }
.msl-prev__tt .i{ width: 34px; height: 34px; flex: none }
.msl-prev__tt .i svg{ width: 100%; height: 100% }
.msl-prev__tt b{ font-size: .88rem; font-weight: 800; display: block }
.msl-prev__tt span{ font-size: .76rem; color: rgba(240,237,230,.55); display: block }
.msl-prev__tt .fl{ margin-left: auto; width: 26px; height: 26px; color: var(--wp--preset--color--ambre) }
.msl-prev__tt .fl svg{ width: 100%; height: 100% }
.msl-prev__grille{ display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem }
@media (max-width: 480px){ .msl-prev__grille{ grid-template-columns: repeat(2, 1fr) } }
.msl-prev__dt{ background: rgba(240,237,230,.07); border-radius: 8px; padding: .5rem .35rem; text-align: center }
.msl-prev__dt .k{
  display: block; font-size: .62rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(240,237,230,.45);
}
.msl-prev__dt b{ display: block; font-size: .86rem; font-weight: 800; margin-top: .15rem }
.msl-prev__dt .u{ display: block; font-size: .64rem; color: rgba(240,237,230,.5); margin-top: .05rem }

.msl-prev__jr{ display: flex; align-items: center; gap: .5rem; padding: .42rem 0; border-bottom: 1px solid var(--pv-bord) }
.msl-prev__jr:last-child{ border-bottom: 0 }
.msl-prev__jr .jn{ width: 76px; font-size: .85rem; font-weight: 700 }
.msl-prev__jr .ji{ width: 24px; height: 24px; flex: none }
.msl-prev__jr .ji svg{ width: 100%; height: 100% }
.msl-prev__jr .jp{ width: 32px; font-size: .72rem; font-weight: 700; color: #5B9BC9; text-align: right }
.msl-prev__jr .jt{ width: 26px; font-size: .8rem; font-weight: 700; color: rgba(19,36,51,.45); text-align: right }
.msl-prev__jr .jb{ flex: 1; height: 5px; background: var(--wp--preset--color--gris); border-radius: 3px; position: relative }
.msl-prev__jr .jb s{
  position: absolute; top: 0; bottom: 0; border-radius: 3px; display: block;
  background: linear-gradient(90deg, #7FA8C9, var(--wp--preset--color--ambre));
}
.msl-prev__jr .jx{ width: 28px; font-size: .8rem; font-weight: 800; text-align: right }
.msl-prev__attrib{ font-size: .7rem; color: rgba(19,36,51,.42); margin: 1rem 0 0; line-height: 1.6 }

/* =========================================================
   19. Icones animees : ne bouger que ce qui compte
   =========================================================
   Le sprite est anime par CSS, mais il est pose par <use> : la page ne
   peut PAS atteindre ce qu'il y a dedans. Seules les variables CSS
   franchissent cette frontiere. Le sprite doit donc porter la ligne
   « * { animation-play-state: var(--m71-play, running) } », et la page
   pilote alors --m71-play depuis l'exterieur.

   Douze icones animees dans une frise donnent un air de jouet et vident
   la batterie. Une seule icone vivante au-dessus d'une frise figee donne
   l'impression d'un instrument — et attire vraiment l'oeil. */
.msl-prev__hr .i svg,
.msl-prev__jr .ji svg,
.m71-strip svg,
.m71-zone svg{ --m71-play: paused }

.msl-prev__ic svg,
.msl-prev__tt .i svg,
.msl-prev__hr.est-ouvert .i svg,
.msl-bande__ico svg{ --m71-play: running }

@media (prefers-reduced-motion: reduce){
  #msl-prev svg{ --m71-play: paused }
}

/* Une classe en display:flex l'emporte sur l'attribut hidden, qui vient de
   la feuille du navigateur. Le formulaire restait donc visible en
   permanence. Il faut le dire explicitement. */
.msl-prev__recherche[hidden],
.msl-prev__pan[hidden]{ display: none !important }

/* =========================================================
   20. Deux colonnes sur grand ecran
   =========================================================
   Sur un 27 pouces, une colonne unique oblige a faire defiler quatre
   ecrans pour voir ce qui tient en deux. On apparie donc les sections :
   a gauche ce qui se lit, a droite ce qui se regarde. Sur telephone,
   tout redevient une colonne — deux colonnes de 180 px seraient
   illisibles. */
.msl-grille{
  max-width: var(--wp--style--global--wide-size, 1140px);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--40);
}
.msl-grille__col > *{ margin-block: 0 }

@media (min-width: 1024px){
  .msl-grille{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--wp--preset--spacing--50);
    align-items: start;
  }
  /* Les compositions sont declarees en pleine largeur : dans une colonne,
     il faut les ramener a la largeur de cette colonne, sinon elles
     debordent du cadre. */
  .msl-grille .alignfull,
  .msl-grille .alignwide{
    max-width: 100%;
    margin-inline: 0;
    width: auto;
  }
  .msl-grille .wp-block-group{ padding-inline: 0 }
  /* Le rythme vertical se resserre : cote a cote, deux sections espacees
     de 5,5 rem creusent un trou au milieu de la page. */
  .msl-grille__col > .wp-block-group{
    padding-block: var(--wp--preset--spacing--40) !important;
  }
  .msl-grille__col > .wp-block-group:first-child{
    padding-top: var(--wp--preset--spacing--50) !important;
  }
  /* Le fond gris d'une section n'a plus de sens en colonne : il decouperait
     la page en damier. On le neutralise et on garde le filet. */
  .msl-grille .has-gris-background-color{
    background: transparent !important;
    border-top: 1px solid var(--wp--preset--color--bord);
  }
  .msl-grille__col > .wp-block-group:first-child{ border-top: 0 }
}

/* Sous 1024 px, la grille redevient une simple pile : rien a faire,
   c'est le comportement par defaut d'un div. */

/* =========================================================
   21. Rythme general
   =========================================================
   Une page qui garde le meme espacement du haut au bas parait plate meme
   quand chaque bloc est bien dimensionne. On alterne : sections de contenu
   resserrees, sections de donnees plus aerees, et un filet la ou le fond
   ne change pas. */
.wp-block-group.has-gris-background-color + .wp-block-group.has-gris-background-color{
  border-top: 1px solid rgba(19,36,51,.07);
}

/* Les titres de section respirent au-dessus, pas en dessous : le surtitre
   et le titre forment un bloc, la distance doit etre avant. */
.is-style-surtitre{ margin-top: 0 }
.wp-block-group > .wp-block-heading{ margin-top: .1em }

/* Un filet fin entre deux sections de meme fond, plutot qu'un grand vide :
   la separation se lit, la page reste compacte. */
main > .wp-block-group + .wp-block-group{
  border-top: 1px solid rgba(19,36,51,.06);
}
main > .msl-bloc-alertes + .wp-block-group{ border-top: 0 }

/* Sur grand ecran, le pied de page et le bandeau gagnent a etre pleins
   tandis que le contenu reste borne : c'est ce contraste qui donne de
   l'assise a la page. */
@media (min-width: 1024px){
  main > .wp-block-group{ padding-block: var(--wp--preset--spacing--60) }
  main > .msl-bloc-alertes{ padding-block: 0 }
}

/* Cible tactile et lisibilite des liens de contenu. */
.wp-block-post-title a:hover{ text-decoration: underline }

/* =========================================================
   22. Le bandeau sur grand ecran : tout sur une ligne
   =========================================================
   Empile sur un 27 pouces, le bandeau laissait un vide a droite et
   deux lignes de haut. A partir de 1024 px on met la frise A COTE du
   message plutot qu'en dessous : la largeur est occupee, la hauteur
   tombe de moitie, et rien n'est ajoute — on redispose ce qui existe. */
@media (min-width: 1024px){
  .msl-bande--frise{
    display: flex; align-items: center; gap: 1.6rem;
    padding-block: .55rem;
  }
  .msl-bande--frise .msl-bande__ligne{
    flex: none; min-height: 40px; gap: .8rem;
  }
  /* La frise prend la place restante et gagne en lisibilite : sur 600 px,
     chaque heure fait 25 px au lieu de 14. */
  .msl-bande--frise .msl-frise{
    flex: 1; min-width: 0; margin-top: 0;
  }
  .msl-bande--frise .msl-frise__barre{ height: 9px }
  .msl-bande--frise .msl-frise__reperes{ font-size: .68rem; margin-top: .3rem }

  /* Un appel a l'action en bout de ligne, la ou l'oeil termine sa lecture. */
  .msl-bande__cta{
    flex: none; display: inline-flex; align-items: center; gap: .4rem;
    background: var(--wp--preset--color--ambre);
    color: var(--wp--preset--color--saone);
    font-size: .82rem; font-weight: 800; text-decoration: none;
    padding: .5rem 1rem; border-radius: 999px; min-height: 36px;
    white-space: nowrap;
  }
  .msl-bande__cta:hover{ background: #D4901F }
  .msl-bande__cta--ok{
    background: transparent; color: rgba(143,191,159,.9);
    box-shadow: inset 0 0 0 1px rgba(143,191,159,.35);
  }
  .msl-bande__cta--ok:hover{ background: rgba(143,191,159,.1) }

  /* Le message perd son lien : le bouton le porte desormais. */
  .msl-bande--frise .msl-bande__suite{ display: none }
  .msl-bande--frise .msl-bande__ligne .msl-bande__txt strong{ font-size: .88rem }
}

/* Sous 1024 px, le bouton disparait : le message reste cliquable,
   et une pile de trois elements sur 390 px serait indigeste. */
.msl-bande__cta{ display: none }

/* =========================================================
   23. Telephone : rendre le haut de page a son contenu
   =========================================================
   En-tete sur deux lignes plus bandeau sur trois : cent cinquante pixels
   avant le premier mot. Sur un ecran de 800 px de haut, c'est un cinquieme
   de la page pour ne rien dire. On resserre les deux. */
@media (max-width: 640px){

  /* --- en-tete --- */
  .msl-entete{
    padding-top: .4rem; padding-bottom: .4rem;
    padding-inline: .7rem; gap: .5rem;
  }
  /* Le nom tient sur une ligne, et « SAÔNE-ET-LOIRE » disparait :
     il repete le nom juste au-dessus. */
  .msl-entete .wp-block-site-title{
    font-size: .81rem !important; line-height: 1.12; white-space: nowrap;
  }
  .msl-entete__sous{ display: none }
  .msl-entete .wp-block-site-logo img{ width: 30px !important; height: 30px !important }
  .msl-entete .wp-block-button__link{
    font-size: .75rem !important; white-space: nowrap;
    padding: .45rem .7rem !important;
  }
  .msl-compte__lien{ font-size: .75rem }

  /* --- bandeau --- */
  .msl-bande--frise{ padding: .45rem .7rem .5rem }
  .msl-bande__ligne{ min-height: 0; gap: .5rem; align-items: center }
  .msl-veille{ width: 26px; height: 26px }

  /* Le message revient sur une ligne : « Aucun risque · créez un compte ».
     La formule longue est reservee aux ecrans qui peuvent la porter. */
  .msl-bande--calme .msl-bande__txt strong{ display: inline; font-size: .76rem }
  .msl-bande__suite{
    display: inline; margin-left: .3rem; margin-top: 0;
    font-size: .8rem; border-bottom: 0;
  }
  .msl-bande__long{ display: none }

  /* La frise se resserre et ne garde que deux reperes : quatre libelles
     sur 390 px se touchent et deviennent illisibles. */
  .msl-frise{ margin-top: .35rem }
  .msl-frise__barre{ height: 6px }
  .msl-frise__reperes{ font-size: .61rem; margin-top: .18rem }
  .msl-frise__reperes span:nth-child(2),
  .msl-frise__reperes span:nth-child(3){ display: none }
}

/* =========================================================
   24. Correctif de specificite du bandeau sur telephone
   =========================================================
   Une regle ecrite plus tot — « .msl-bande--calme .msl-bande__txt span » —
   l'emportait sur « .msl-bande__long » et forcait « Soyez alerté : » a
   passer a la ligne. Le bandeau faisait donc trois lignes au lieu d'une.
   On reprend la main avec la meme specificite, et on resserre encore. */
@media (max-width: 640px){

  /* --- le message tient sur une ligne --- */
  .msl-bande--calme .msl-bande__txt{ display: block; line-height: 1.25 }
  .msl-bande--calme .msl-bande__txt strong{
    display: inline; font-size: .76rem;
  }
  .msl-bande--calme .msl-bande__txt .msl-bande__suite{
    display: inline; margin: 0 0 0 .3rem; font-size: .8rem;
  }
  .msl-bande--calme .msl-bande__txt .msl-bande__long{ display: none }

  /* --- en-tete au plus juste --- */
  .msl-entete{ padding-top: .3rem; padding-bottom: .3rem }
  .msl-entete .wp-block-site-logo img{ width: 28px !important; height: 28px !important }
  .msl-entete .wp-block-site-title{ font-size: .78rem !important }

  /* Le bandeau ne garde qu'un filet de marge : chaque pixel gagne ici
     est un pixel rendu au contenu. */
  .msl-bande--frise{ padding: .4rem .7rem .45rem }
  .msl-veille{ width: 24px; height: 24px }
  .msl-frise{ margin-top: .3rem }
  .msl-frise__barre{ height: 5px }
}

/* Sous 460 px, « Connexion » quitte l'en-tete : elle reste dans le menu,
   et le bouton d'abonnement a besoin de cette place pour respirer. */
@media (max-width: 460px){
  .msl-entete .msl-compte__lien:not(.msl-compte__lien--fort){ display: none }
  .msl-entete .msl-compte--connecte .msl-compte__nom{ font-size: .75rem }
}

/* =========================================================
   25. « Voir sur la carte » : dire ce qu'on peut faire
   =========================================================
   Sur telephone la pastille du nombre de risques est masquee et il ne
   reste qu'un chevron de 15 px. Personne ne devine qu'une ligne d'alerte
   est cliquable. Cette mention le dit — et s'efface des que la place
   permet a la fleche et a la pastille de faire le travail. */
.msl-bande__voir{
  display: none;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  color: var(--niveau, var(--wp--preset--color--ambre));
  margin-top: .12rem;
}
@media (max-width: 640px){
  .msl-bande__voir{ display: block }
  /* Le detail cede la place : les communes suffisent, l'intensite se lit
     sur la carte vers laquelle on invite. */
  .msl-bande--actif .msl-bande__txt span{ font-size: .76rem }
  .msl-bande__fleche{ display: none }
}
/* En alerte, le bouton de bout de ligne mene a la carte des risques. */
@media (min-width: 1024px){
  .msl-bande--actif .msl-bande__cta{
    background: transparent; color: var(--wp--preset--color--ambre);
    box-shadow: inset 0 0 0 1px rgba(233,160,41,.45);
  }
  .msl-bande--actif .msl-bande__cta:hover{ background: rgba(233,160,41,.12) }
}

/* =========================================================
   26. Colonnes : apparier ce qui a la meme hauteur
   =========================================================
   Deux colonnes se terminent rarement au meme endroit : la plus courte
   laisse un vide sous elle, et ce vide se voit. Le probleme n'est pas le
   NOMBRE de blocs mais leur HAUTEUR — un cadre de carte de 900 px en face
   d'un texte de 400 px creuse un trou de 500 px, quoi qu'on fasse.

   On n'apparie donc que ce qui se ressemble : la presentation et l'apercu
   radar, de hauteurs voisines. La carte de prevision, elle, prend toute la
   largeur — c'est aussi la ou elle est le plus lisible. */
@media (min-width: 1024px){
  .msl-grille{ align-items: stretch }
  .msl-grille__col{ display: flex; flex-direction: column }
  /* La derniere section de chaque colonne s'etire : les deux fonds et les
     deux filets se terminent alors a la meme hauteur, meme si le texte,
     lui, s'arrete plus tot. */
  .msl-grille__col > .wp-block-group:last-child{ flex: 1 }
}

/* =========================================================
   27. Carrousel des formules
   =========================================================
   La rangee defilait deja ; on ajoute l'avance automatique et des points
   de navigation. Le defilement reste NATIF — pas de transformation — ce
   qui preserve le glissement au doigt, le clavier et le lecteur d'ecran. */
.msl-tarifs[data-carrousel]{
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .3rem;
}
.msl-tarifs[data-carrousel] > *{ scroll-snap-align: center }

.msl-carrousel__points{
  display: flex; justify-content: center; gap: 7px; margin-top: .9rem;
}
.msl-carrousel__point{
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(19,36,51,.2); cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.msl-carrousel__point.est-actif{
  background: var(--wp--preset--color--ambre); width: 20px; border-radius: 4px;
}
.msl-carrousel__point:focus-visible{
  outline: 2px solid var(--wp--preset--color--ambre); outline-offset: 3px;
}

/* Sur grand ecran les quatre formules tiennent cote a cote : le carrousel
   n'a plus lieu d'etre, et un defilement automatique sur du contenu deja
   entierement visible serait une gene, pas un service. */
@media (min-width: 1180px){
  .msl-tarifs[data-carrousel]{
    display: grid; grid-template-columns: repeat(4, 1fr);
    overflow: visible; scroll-snap-type: none;
  }
  .msl-tarifs[data-carrousel] > *{ width: auto }
  .msl-carrousel__points{ display: none }
}

/* =========================================================
   28. Menu deplie sur ordinateur, hamburger sur telephone
   =========================================================
   Un en-tete de 1 900 px avec un logo a gauche et un bouton a droite est
   un couloir vide. Le menu comble cet espace et rend la navigation
   visible : sur ordinateur, un hamburger cache ce qu'on a de mieux a
   montrer. Sur telephone il n'y a pas la place, il reprend donc sa forme
   repliee — c'est le reglage « superposition sur mobile » du bloc. */
.msl-entete__marque{ flex: none }
.msl-entete__actions{ flex: none }

.msl-entete__nav{
  flex: 1; min-width: 0; justify-content: center;
}
.msl-entete__nav .wp-block-navigation__container{
  flex-wrap: nowrap; justify-content: center;
}
.msl-entete__nav .wp-block-navigation-item__content{
  color: var(--wp--preset--color--saone);
  text-decoration: none; white-space: nowrap;
  padding-block: .3rem; position: relative;
}
/* Un filet qui se deploie sous l'entree survolee : plus discret qu'un
   soulignement permanent, plus lisible qu'un simple changement de teinte. */
.msl-entete__nav .wp-block-navigation-item__content::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--wp--preset--color--ambre);
  transition: right .22s cubic-bezier(.2,.7,.2,1);
}
.msl-entete__nav .wp-block-navigation-item__content:hover::after{ right: 0 }
.msl-entete__nav .current-menu-item .wp-block-navigation-item__content::after{ right: 0 }

/* Sous 900 px, le menu redevient un hamburger et cesse de pousser
   la marque et les actions. */
@media (max-width: 900px){
  .msl-entete__nav{ flex: none }
  .msl-entete__nav .wp-block-navigation__container{ justify-content: flex-end }
}

/* =========================================================
   29. Colonnes inegales : donner a chacun ce qu'il demande
   =========================================================
   Deux colonnes de largeur egale forcent le texte a s'etaler et l'image
   a se serrer, alors qu'ils ont des besoins opposes : un paragraphe se lit
   mieux etroit, une carte se lit mieux large. On repartit donc 5/7 —
   environ 540 px pour le texte, 740 px pour le visuel.

   La largeur « large » passe par ailleurs de 1140 a 1320 px : sur les
   ecrans courants aujourd'hui, 1140 laissait des marges de 400 px de
   chaque cote. */
@media (min-width: 1024px){
  .msl-grille{
    grid-template-columns: 5fr 7fr;
    gap: 0 var(--wp--preset--spacing--60);
  }
  /* Le texte garde une longueur de ligne confortable meme si sa colonne
     s'elargit : au-dela de 75 caracteres, l'oeil perd la ligne suivante. */
  .msl-grille__col:first-child p{ max-width: 62ch }
}

/* Les quatre formules tiennent cote a cote plus tot, la largeur ayant
   augmente. */
@media (min-width: 1120px){
  .msl-tarifs[data-carrousel]{
    display: grid; grid-template-columns: repeat(4, 1fr);
    overflow: visible; scroll-snap-type: none;
  }
  .msl-tarifs[data-carrousel] > *{ width: auto }
  .msl-carrousel__points{ display: none }
}

/* =========================================================
   30. Panneau de prevision orageuse ICON-D2-RUC
   =========================================================
   Sept grandeurs sur vingt-cinq pas de quinze minutes. La difficulte est
   de rendre lisible une matrice de 175 valeurs sans la transformer en
   tableau de chiffres que personne ne lit.

   La reponse : une bande de couleur par grandeur, une synthese au-dessus,
   et le detail chiffre d'un seul pas a la fois. On voit QUAND d'un coup
   d'oeil, on lit COMBIEN quand on le demande. */
#msl-ruc{
  background: var(--wp--preset--color--nuit);
  color: var(--wp--preset--color--brume);
  border-radius: var(--msl-rayon);
  padding: 1.1rem 1.1rem 1.2rem;
}
#msl-ruc *{ box-sizing: border-box }

.msl-ruc__tete{ display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap }
.msl-ruc__tete b{ font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em }
.msl-ruc__chg{
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: .76rem; font-weight: 700; color: var(--wp--preset--color--ambre);
}
.msl-ruc__etat{
  margin: .2rem 0 0; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: rgba(240,237,230,.4); width: 100%;
}

/* --- echelle de gravite, commune a tout le panneau ---
   Quatre niveaux seulement. Une echelle continue serait plus « juste »
   mais illisible : l'oeil ne distingue pas douze teintes de jaune. */
#msl-ruc .n0{ background: rgba(240,237,230,.09) }
#msl-ruc .n1{ background: rgba(216,194,78,.75) }
#msl-ruc .n2{ background: rgba(233,160,41,.9) }
#msl-ruc .n3{ background: #D6543A }

/* --- bandeau de synthese : le pire de chaque pas --- */
.msl-ruc__synthese{ display: flex; gap: 2px; margin-top: .9rem }
.msl-ruc__pas{
  flex: 1; height: 26px; border: 0; padding: 0; cursor: pointer;
  border-radius: 3px; position: relative;
  transition: transform .12s ease;
}
.msl-ruc__pas:hover{ transform: scaleY(1.15) }
.msl-ruc__pas.est-ouvert::after{
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 0; height: 0;
  margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid var(--wp--preset--color--brume);
}
.msl-ruc__reperes{
  display: flex; justify-content: space-between; margin-top: .5rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(240,237,230,.35);
}

/* --- une bande par grandeur --- */
.msl-ruc__lignes{ margin-top: .9rem }
.msl-ruc__ligne{
  display: grid; grid-template-columns: 84px 1fr 78px;
  align-items: center; gap: .6rem; padding: .22rem 0;
}
.msl-ruc__nom{
  font-size: .76rem; font-weight: 700; color: rgba(240,237,230,.72);
}
.msl-ruc__bande{ display: flex; gap: 2px }
.msl-ruc__c{ flex: 1; height: 11px; border-radius: 2px; display: block }
.msl-ruc__max{
  font-size: .8rem; font-weight: 800; text-align: right;
  color: rgba(240,237,230,.85);
}
.msl-ruc__max em{
  font-style: normal; font-size: .66rem; font-weight: 600;
  color: rgba(240,237,230,.4);
}

/* --- detail d'un pas --- */
.msl-ruc__detail{
  margin-top: 1rem; background: rgba(240,237,230,.05);
  border-radius: 10px; padding: .8rem;
}
.msl-ruc__quand{
  margin: 0 0 .6rem; font-size: .95rem; font-weight: 800;
}
.msl-ruc__quand span{
  font-size: .74rem; font-weight: 600; color: rgba(240,237,230,.45);
  margin-left: .4rem;
}
.msl-ruc__grille{
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem;
}
@media (max-width: 760px){
  .msl-ruc__grille{ grid-template-columns: repeat(4, 1fr) }
  .msl-ruc__ligne{ grid-template-columns: 66px 1fr 62px }
}
@media (max-width: 460px){
  .msl-ruc__grille{ grid-template-columns: repeat(3, 1fr) }
}
/* La case du detail porte la couleur de gravite en filet, pas en aplat :
   sept aplats cote a cote donneraient un damier illisible. */
.msl-ruc__d{
  background: rgba(240,237,230,.06) !important;
  border-radius: 8px; padding: .5rem .35rem; text-align: center;
  border-top: 3px solid rgba(240,237,230,.12);
}
.msl-ruc__d.n1{ border-top-color: rgba(216,194,78,.9) }
.msl-ruc__d.n2{ border-top-color: rgba(233,160,41,.95) }
.msl-ruc__d.n3{ border-top-color: #D6543A }
.msl-ruc__d .k{
  display: block; font-size: .62rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(240,237,230,.45);
}
.msl-ruc__d b{ display: block; font-size: .95rem; font-weight: 800; margin-top: .15rem }
.msl-ruc__d .u{ display: block; font-size: .62rem; color: rgba(240,237,230,.4) }

.msl-ruc__note{
  margin: .7rem 0 0; font-size: .74rem; line-height: 1.5;
  color: rgba(240,237,230,.5);
  border-left: 2px solid var(--wp--preset--color--ambre); padding-left: .6rem;
}
.msl-ruc__pied{
  margin: .9rem 0 0; font-size: .7rem; line-height: 1.6;
  color: rgba(240,237,230,.38);
}

/* --- Repli quand il n'y a rien a dire ---
   Le panneau garde son en-tete et sa bande de synthese — qui prouve que la
   surveillance tourne — mais range les sept lignes de detail. Il passe de
   400 px a 120. */
#msl-ruc.est-calme .msl-ruc__lignes,
#msl-ruc.est-calme .msl-ruc__reperes,
#msl-ruc.est-calme .msl-ruc__pied{ display: none }
#msl-ruc.est-calme .msl-ruc__synthese{ margin-top: .7rem }
#msl-ruc.est-calme .msl-ruc__pas{ height: 8px; pointer-events: none }
#msl-ruc.est-calme .msl-ruc__detail{
  margin-top: .7rem; background: transparent; padding: 0;
}
.msl-ruc__calme{
  margin: 0; font-size: .9rem; font-weight: 700;
  color: rgba(143,191,159,.9);
}
.msl-ruc__calme span{
  display: block; font-size: .76rem; font-weight: 500;
  color: rgba(240,237,230,.4); margin-top: .15rem;
}

/* --- Acces reserve ---
   La bande de synthese reste visible pour tous : masquer l'approche d'un
   orage dangereux derriere un paiement serait indefendable. Seul le detail
   chiffre — calibre de grele, rotation, energie — est reserve. */
#msl-ruc.est-reserve .msl-ruc__lignes{ display: none }
.msl-ruc__reserve{
  margin: 0; font-size: .9rem; line-height: 1.5;
}
.msl-ruc__reserve b{ display: block; font-weight: 800; color: var(--wp--preset--color--ambre) }
.msl-ruc__reserve span{
  display: block; font-size: .82rem; color: rgba(240,237,230,.6); margin-top: .2rem;
}
.msl-ruc__reserve a{
  display: inline-flex; align-items: center; min-height: 40px; margin-top: .6rem;
  background: var(--wp--preset--color--ambre); color: var(--wp--preset--color--saone);
  text-decoration: none; padding: .5rem 1.1rem; border-radius: 999px;
  font-size: .85rem; font-weight: 800;
}

/* --- Lecture de la situation ---
   Le texte qui dit ce que les chiffres signifient ENSEMBLE. C'est la seule
   partie du panneau qu'un non-specialiste lira vraiment, et c'est ce qui
   distingue une source d'un afficheur de donnees. */
.msl-ruc__lecture{
  background: rgba(240,237,230,.05);
  border-left: 3px solid rgba(240,237,230,.2);
  border-radius: 0 8px 8px 0;
  padding: .7rem .85rem; margin: 0 0 .8rem;
}
.msl-ruc__lecture.g1{ border-left-color: rgba(216,194,78,.85) }
.msl-ruc__lecture.g2{ border-left-color: var(--wp--preset--color--ambre) }
.msl-ruc__lecture.g3{ border-left-color: #D6543A; background: rgba(214,84,58,.09) }
.msl-ruc__lecture b{
  display: block; font-size: .88rem; font-weight: 800; margin-bottom: .3rem;
}
.msl-ruc__lecture.g3 b{ color: #E4785F }
.msl-ruc__lecture p{
  margin: 0 0 .35rem; font-size: .85rem; line-height: 1.55;
  color: rgba(240,237,230,.75);
}
.msl-ruc__lecture p:last-child{ margin-bottom: 0 }

/* Les champs horaires portent un liseré : leur valeur vaut pour l'heure
   entière, on ne prétend pas au quart d'heure. */
.msl-ruc__c.est-horaire{ opacity: .82 }

/* Un pas deja ecoule : estompe, pas masque. Le run peut avoir une heure
   d'age, et savoir d'ou vient la cellule aide a lire ou elle va. */
.msl-ruc__pas.est-passe{ opacity: .35 }

/* =========================================================
   31. Module de prevision multimodele — accueil
   ========================================================= */
#msl-accueil{ color: var(--wp--preset--color--texte) }
#msl-accueil *{ box-sizing: border-box }

.msl-ac__resume{
  background: var(--wp--preset--color--gris);
  border-left: 3px solid var(--wp--preset--color--ambre);
  border-radius: 0 9px 9px 0;
  padding: .8rem .95rem; font-size: .88rem; line-height: 1.55; margin: 0 0 .9rem;
}
.msl-ac__resume b{ font-weight: 800 }

/* --- les cinq indicateurs --- */
.msl-ac__chiffres{
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-bottom: .9rem;
}
@media (max-width: 900px){ .msl-ac__chiffres{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 560px){ .msl-ac__chiffres{ grid-template-columns: repeat(2, 1fr) } }
.msl-ac__ch{ background: var(--wp--preset--color--gris); border-radius: 10px; padding: .65rem .7rem }
.msl-ac__ch .k{
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: rgba(19,36,51,.45);
}
.msl-ac__ch b{ display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin-top: .2rem }
.msl-ac__ch b em{
  font-style: normal; font-size: .74rem; font-weight: 700;
  color: rgba(19,36,51,.5); margin-left: .25rem;
}
.msl-ac__ch b i{ font-style: normal; color: #3E7A54; margin-left: .3rem }
.msl-ac__ch .s{ display: block; font-size: .72rem; color: rgba(19,36,51,.55); margin-top: .1rem }

/* --- selecteur de modeles --- */
.msl-ac__barre{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem }
.msl-ac__lbl{
  font-size: .68rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(19,36,51,.42);
}
.msl-ac__modeles{ display: flex; gap: .35rem; flex-wrap: wrap }
.msl-ac__md{
  font: inherit; font-size: .78rem; font-weight: 700; padding: .35rem .7rem;
  border-radius: 999px; border: 1px solid var(--wp--preset--color--bord);
  background: var(--wp--preset--color--blanc); color: rgba(19,36,51,.7); cursor: pointer;
}
.msl-ac__md.on{
  background: var(--wp--preset--color--saone); border-color: var(--wp--preset--color--saone);
  color: var(--wp--preset--color--brume);
}
.msl-ac__etat{
  margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(19,36,51,.4);
}

/* --- heures, au-dessus de la carte --- */
.msl-ac__heures{ display: flex; gap: 3px; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none }
.msl-ac__heures::-webkit-scrollbar{ display: none }
.msl-ac__hr{
  flex: 1; min-width: 62px; display: flex; flex-direction: column; align-items: center;
  gap: .1rem; background: var(--wp--preset--color--gris); border: 1px solid transparent;
  border-radius: 9px; padding: .4rem .2rem; cursor: pointer; font: inherit;
}
.msl-ac__hr:hover{ background: #E9EEF0 }
.msl-ac__hr.on{ background: var(--wp--preset--color--saone); border-color: var(--wp--preset--color--saone) }
.msl-ac__hr .h{ font-size: .72rem; font-weight: 700; color: rgba(19,36,51,.5) }
.msl-ac__hr.on .h{ color: rgba(240,237,230,.65) }
.msl-ac__hr .i svg{ width: 24px; height: 26px; display: block }
.msl-ac__hr .t{ font-size: .88rem; font-weight: 800; color: var(--wp--preset--color--saone) }
.msl-ac__hr.on .t{ color: var(--wp--preset--color--brume) }

/* --- carte --- */
.msl-ac__carte{ border-radius: var(--msl-rayon); overflow: hidden }
.msl-ac__carte svg{ width: 100%; height: auto; display: block }
.msl-ac__v{ cursor: pointer }
.msl-ac__v .halo{ fill: rgba(233,160,41,0); transition: fill .16s ease }
.msl-ac__v:hover .halo,
.msl-ac__v:focus .halo{ fill: rgba(233,160,41,.22) }
.msl-ac__v .pt{ fill: #7D8E98 }
.msl-ac__v .nm{ font-size: 3.2px; font-weight: 700; fill: var(--wp--preset--color--saone); text-anchor: middle }
.msl-ac__v .dg{ font-size: 4.2px; font-weight: 800; fill: #C07A12; text-anchor: middle }
/* Les icones de la carte sont figees : quinze animations sur un fond clair
   donnent un sapin de Noel. Seule celle de l'heure choisie pourrait bouger. */
.msl-ac__v svg{ --m71-play: paused }

.msl-ac__pied{ font-size: .74rem; color: rgba(19,36,51,.45); margin: .7rem 0 0; line-height: 1.6 }

/* --- Carte vectorielle de l'accueil ---
   Fond OpenFreeMap via MapLibre, comme la carte radar : memes tuiles, deja
   en cache pour qui vient de la page Observation. */
.msl-ac__carte{
  height: 460px; border-radius: var(--msl-rayon); overflow: hidden;
  background: var(--wp--preset--color--gris);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.msl-ac__carte.est-prete{ display: block }
@media (max-width: 700px){ .msl-ac__carte{ height: 340px } }
.msl-ac__repli{
  font-size: .86rem; color: rgba(19,36,51,.45); text-align: center; margin: 0; padding: 1rem;
}

/* Marqueur : pictogramme, temperature, nom. Le nom passe sous la barre des
   40 px de cible tactile en restant lisible. */
.msl-ac__pin{
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  min-width: 46px; min-height: 46px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(255,255,255,.9));
}
.msl-ac__pin svg{ display: block }
.msl-ac__pin .dg{
  font-size: .85rem; font-weight: 800; color: #A9630A; margin-top: -2px;
}
.msl-ac__pin .nm{
  font-size: .66rem; font-weight: 700; color: var(--wp--preset--color--saone);
  white-space: nowrap; margin-top: 1px;
}
.msl-ac__pin:hover .dg{ color: var(--wp--preset--color--lie) }

/* Les commandes de MapLibre reprennent le rayon du site. */
.msl-ac__carte .maplibregl-ctrl-group{ border-radius: 8px; overflow: hidden }
.msl-ac__carte .maplibregl-ctrl-attrib{ font-size: 10px }

/* =========================================================
   32. Pictogrammes animes
   =========================================================
   Les mouvements sont LENTS et de faible amplitude. Sur une carte qui
   porte quinze icones, une animation vive transforme la page en sapin de
   Noel et empeche de lire les temperatures. Le but est qu'on percoive le
   mouvement sans le regarder. */
.msl-ic{ overflow: visible }

/* Le soleil tourne en vingt secondes : assez pour se voir si on s'arrete,
   pas assez pour accrocher l'oeil qui passe. */
.msl-ic .ic-rayons{
  transform-origin: 12px 12px;
  animation: msl-tourne 20s linear infinite;
}
@keyframes msl-tourne{ to { transform: rotate(360deg) } }

.msl-ic .ic-disque{
  transform-origin: 12px 12px;
  animation: msl-respire 4s ease-in-out infinite;
}
@keyframes msl-respire{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.07) } }

.msl-ic .ic-lune{ animation: msl-eclat 5s ease-in-out infinite }
@keyframes msl-eclat{ 0%,100%{ opacity: 1 } 50%{ opacity: .78 } }

/* Le nuage derive de deux dixiemes de pixel : c'est presque rien, et c'est
   ce presque rien qui donne l'impression qu'il avance. */
.msl-ic .ic-nuage{ animation: msl-derive 7s ease-in-out infinite }
@keyframes msl-derive{
  0%,100%{ transform: translateX(0) } 50%{ transform: translateX(.8px) }
}

.msl-ic .ic-goutte{
  animation: msl-tombe 1.15s linear infinite;
  transform-origin: center;
}
@keyframes msl-tombe{
  0%{ transform: translateY(-2.5px); opacity: 0 }
  25%{ opacity: 1 }
  75%{ opacity: 1 }
  100%{ transform: translateY(3.5px); opacity: 0 }
}

.msl-ic .ic-flocon{ animation: msl-flotte 3.4s ease-in-out infinite }
@keyframes msl-flotte{
  0%{ transform: translate(0,-2px); opacity: 0 }
  30%{ opacity: 1 }
  70%{ opacity: 1 }
  100%{ transform: translate(1.4px,3.5px); opacity: 0 }
}

/* L'eclair frappe brievement et se fait attendre : un clignotement continu
   serait insupportable a cote d'un texte. */
.msl-ic .ic-eclair{ animation: msl-frappe 3.2s ease-out infinite }
@keyframes msl-frappe{
  0%, 62%, 100%{ opacity: .55 }
  66%{ opacity: 1 }
  70%{ opacity: .35 }
  74%{ opacity: 1 }
  80%{ opacity: .55 }
}

/* Sur la carte, seule l'icone survolee s'anime pleinement : quinze
   mouvements simultanes empechent de lire les valeurs. */
.msl-ac__pin .msl-ic *{ animation-duration: 30s }
.msl-ac__pin:hover .msl-ic .ic-rayons{ animation-duration: 8s }
.msl-ac__pin:hover .msl-ic .ic-goutte{ animation-duration: 1.15s }
.msl-ac__pin:hover .msl-ic .ic-eclair{ animation-duration: 3.2s }
.msl-ac__pin:hover .msl-ic .ic-flocon{ animation-duration: 3.4s }

/* Sans mouvement, les formes restent entieres et lisibles : on ne perd
   que l'animation, jamais l'information. */
@media (prefers-reduced-motion: reduce){
  .msl-ic *{ animation: none !important; opacity: 1 !important }
}

/* =========================================================
   33. Recherche de commune
   =========================================================
   La carte porte quinze villes, le departement en compte 574. Sans cette
   barre, un habitant de Cuiseaux ne trouve rien qui le concerne. */
.msl-ac__cherche{
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .9rem;
}
.msl-ac__champ{ position: relative; flex: 1; min-width: 240px; max-width: 420px }
.msl-ac__champ input{
  width: 100%; font: inherit; font-size: .9rem;
  padding: .7rem 1rem; min-height: 46px;
  border: 1px solid var(--wp--preset--color--bord);
  border-radius: 999px; background: var(--wp--preset--color--gris);
  color: var(--wp--preset--color--texte);
}
.msl-ac__champ input:focus{
  outline: none; border-color: var(--wp--preset--color--ambre);
  background: var(--wp--preset--color--blanc);
  box-shadow: 0 0 0 3px rgba(233,160,41,.18);
}
.msl-ac__champ input::placeholder{ color: rgba(19,36,51,.38) }
.msl-ac__aide{ font-size: .74rem; color: rgba(19,36,51,.45) }

/* La liste flotte au-dessus du reste : sans « position: absolute » elle
   pousserait la carte vers le bas a chaque frappe. */
.msl-ac__sugg{
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  margin: 0; padding: .3rem; list-style: none;
  background: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--bord);
  border-radius: 12px; box-shadow: 0 12px 28px rgba(14,42,58,.16);
  max-height: 300px; overflow-y: auto;
}
.msl-ac__sugg[hidden]{ display: none }
.msl-ac__sugg button{
  display: block; width: 100%; text-align: left; font: inherit; font-size: .9rem;
  padding: .55rem .75rem; min-height: 40px; border: 0; border-radius: 8px;
  background: none; color: var(--wp--preset--color--texte); cursor: pointer;
}
.msl-ac__sugg button:hover,
.msl-ac__sugg button.on{
  background: var(--wp--preset--color--saone); color: var(--wp--preset--color--brume);
}
.msl-ac__rien{ padding: .6rem .75rem; font-size: .85rem; color: rgba(19,36,51,.5) }

@media (max-width: 560px){
  .msl-ac__aide{ display: none }
  .msl-ac__champ{ max-width: none }
}

/* =========================================================
   34. Page de prevision complete
   =========================================================
   Une page dense, pour qui la consulte expres. Rien n'est cache derriere
   des onglets : on empile des sections qu'on peut parcourir ou lire. */
.msl-prev{ --p-bord: rgba(19,36,51,.1) }
#msl-prev *{ box-sizing: border-box }

.msl-p__tete{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.msl-p__sur{
  margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--wp--preset--color--lie);
}
.msl-p__nom{
  margin: .1rem 0 .1rem; font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
}
.msl-p__etat{
  margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(19,36,51,.42);
}
.msl-p__cherche{ display: flex; gap: .4rem }
.msl-p__cherche input{
  font: inherit; font-size: .9rem; padding: .6rem .9rem; min-height: 44px;
  border: 1px solid var(--wp--preset--color--bord); border-radius: 999px;
  background: var(--wp--preset--color--gris); width: 220px;
}
.msl-p__cherche input:focus{
  outline: none; border-color: var(--wp--preset--color--ambre);
  background: var(--wp--preset--color--blanc);
}
.msl-p__cherche button{
  font: inherit; font-size: .86rem; font-weight: 800; padding: .6rem 1.1rem;
  min-height: 44px; border: 0; border-radius: 999px;
  background: var(--wp--preset--color--ambre); color: var(--wp--preset--color--saone);
  cursor: pointer;
}

.msl-p__modeles{ display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1.1rem }
.msl-p__md{
  font: inherit; font-size: .8rem; font-weight: 700; padding: .4rem .8rem;
  border-radius: 999px; border: 1px solid var(--wp--preset--color--bord);
  background: var(--wp--preset--color--blanc); color: rgba(19,36,51,.7); cursor: pointer;
}
.msl-p__md.on{
  background: var(--wp--preset--color--saone); border-color: var(--wp--preset--color--saone);
  color: var(--wp--preset--color--brume);
}

.msl-p__bloc{ margin-bottom: 1.6rem }
.msl-p__bloc h2{
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5rem;
}
.msl-p__aide{ display: none }

/* --- risques --- */
.msl-p__risque{
  background: var(--wp--preset--color--gris); border-left: 3px solid var(--p-bord);
  border-radius: 0 9px 9px 0; padding: .7rem .9rem; margin-bottom: .5rem;
}
.msl-p__risque.g1{ border-left-color: #D8C24E }
.msl-p__risque.g2{ border-left-color: var(--wp--preset--color--ambre) }
.msl-p__risque.g3{ border-left-color: #C0392B; background: rgba(192,57,43,.06) }
.msl-p__risque b{ display: block; font-size: .88rem; font-weight: 800 }
.msl-p__risque p{ margin: .2rem 0 0; font-size: .85rem; line-height: 1.5; color: rgba(19,36,51,.72) }
.msl-p__calme{
  font-size: .9rem; color: #3E7A54; font-weight: 700; margin: 0;
  background: rgba(62,122,84,.07); border-radius: 9px; padding: .7rem .9rem;
}

/* --- heures --- */
.msl-p__jourmarque{
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--lie); margin: .9rem 0 .3rem;
}
.msl-p__h{ border-bottom: 1px solid var(--p-bord) }
.msl-p__hligne{
  display: grid; grid-template-columns: 46px 30px 52px 1fr 62px 20px;
  align-items: center; gap: .4rem; width: 100%; min-height: 46px;
  background: none; border: 0; padding: .3rem .2rem; font: inherit;
  cursor: pointer; text-align: left;
}
.msl-p__hligne:hover{ background: var(--wp--preset--color--gris) }
.msl-p__h.est-ouvert .msl-p__hligne{ background: var(--wp--preset--color--gris) }
.msl-p__hligne .hh{ font-size: .86rem; font-weight: 700; color: rgba(19,36,51,.6) }
.msl-p__hligne .tt{ font-size: 1rem; font-weight: 800 }
.msl-p__hligne .pp{ font-size: .8rem; color: #3E6C8E }
.msl-p__hligne .vv{ font-size: .8rem; color: rgba(19,36,51,.55); text-align: right }
.msl-p__hligne .ch{ font-size: .7rem; color: rgba(19,36,51,.35); text-align: right }

.msl-p__hdetail{ padding: .3rem .2rem 1rem }
.msl-p__hgrille{
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin-bottom: .8rem;
}
@media (max-width: 900px){ .msl-p__hgrille{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 520px){ .msl-p__hgrille{ grid-template-columns: repeat(2, 1fr) } }
.msl-p__hgrille > div{
  background: var(--wp--preset--color--blanc); border: 1px solid var(--p-bord);
  border-radius: 8px; padding: .45rem .5rem;
}
.msl-p__hgrille .k{
  display: block; font-size: .62rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(19,36,51,.42);
}
.msl-p__hgrille b{ display: block; font-size: .88rem; font-weight: 800; margin-top: .1rem }
.msl-p__hgrille .s{ display: block; font-size: .66rem; color: rgba(19,36,51,.45) }

/* --- comparaison des modeles --- */
.msl-p__cmp{
  background: var(--wp--preset--color--saone); color: var(--wp--preset--color--brume);
  border-radius: 10px; padding: .7rem .8rem;
}
.msl-p__cmp > p{
  margin: 0 0 .5rem; font-size: .66rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(240,237,230,.45);
}
.msl-p__scroll{ overflow-x: auto }
.msl-p__cmp table{ width: 100%; border-collapse: collapse; font-size: .82rem }
.msl-p__cmp th, .msl-p__cmp td{ padding: .3rem .4rem; text-align: right; white-space: nowrap }
.msl-p__cmp thead th{
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(240,237,230,.45); border-bottom: 1px solid rgba(240,237,230,.15);
}
.msl-p__cmp tbody th{
  text-align: left; font-weight: 700; color: rgba(240,237,230,.8); font-size: .78rem;
}
.msl-p__cmp tbody th em{ font-style: normal; color: rgba(240,237,230,.4); font-size: .7rem }
.msl-p__cmp th, .msl-p__cmp td{ background: transparent }
.msl-p__cmp td{ color: rgba(240,237,230,.7); font-variant-numeric: tabular-nums }
.msl-p__cmp .on{ color: var(--wp--preset--color--ambre); font-weight: 800 }
.msl-p__cmp .cons{ color: var(--wp--preset--color--brume); font-weight: 800 }
.msl-p__nomodele{
  font-size: .78rem; color: rgba(19,36,51,.45); margin: 0;
  background: var(--wp--preset--color--gris); border-radius: 8px; padding: .6rem .7rem;
}

/* --- les sept jours --- */
.msl-p__j{ border-bottom: 1px solid var(--p-bord) }
.msl-p__jligne{
  display: grid; grid-template-columns: 110px 34px 1fr 90px 74px 74px 20px;
  align-items: center; gap: .5rem; width: 100%; min-height: 52px;
  background: none; border: 0; padding: .35rem .2rem; font: inherit;
  cursor: pointer; text-align: left;
}
.msl-p__jligne:hover,
.msl-p__j.est-ouvert .msl-p__jligne{ background: var(--wp--preset--color--gris) }
.msl-p__jligne .jj{ font-size: .88rem; font-weight: 800 }
.msl-p__jligne .mm{ font-size: .81rem; color: rgba(19,36,51,.6) }
.msl-p__jligne .pl{ font-size: .8rem; color: #3E6C8E }
.msl-p__jligne .pl em{ font-style: normal; color: rgba(19,36,51,.4) }
.msl-p__jligne .rf{ font-size: .8rem; color: rgba(19,36,51,.5) }
.msl-p__jligne .tp{ font-size: .85rem; color: rgba(19,36,51,.5); text-align: right }
.msl-p__jligne .tp b{ font-size: 1rem; color: var(--wp--preset--color--texte) }
.msl-p__jligne .ch{ font-size: .7rem; color: rgba(19,36,51,.35); text-align: right }
@media (max-width: 820px){
  .msl-p__jligne{ grid-template-columns: 92px 30px 1fr 70px 20px }
  .msl-p__jligne .rf{ display: none }
}

.msl-p__jdetail{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding: .2rem .2rem 1rem;
}
@media (max-width: 700px){ .msl-p__jdetail{ grid-template-columns: repeat(2, 1fr) } }
.msl-p__tranche{
  background: var(--wp--preset--color--gris); border-radius: 10px;
  padding: .7rem .6rem; text-align: center;
}
.msl-p__tranche .k{
  display: block; font-size: .66rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: rgba(19,36,51,.42); margin-bottom: .2rem;
}
.msl-p__tranche svg{ margin: 0 auto }
.msl-p__tranche b{ display: block; font-size: .9rem; font-weight: 800; margin-top: .1rem }
.msl-p__tranche .s{ display: block; font-size: .7rem; color: rgba(19,36,51,.5) }

/* --- tendance --- */
.msl-p__tend p{
  margin: 0 0 .5rem; font-size: .9rem; line-height: 1.6; color: rgba(19,36,51,.78);
}
.msl-p__tend p:last-child{
  font-size: .8rem; color: rgba(19,36,51,.5);
  border-left: 2px solid var(--wp--preset--color--ambre); padding-left: .7rem;
}

/* --- Vue ICON-D2-RUC : le quart d'heure ---
   Une grille dense, sans pictogrammes : le RUC ne publie pas de code temps
   au quart d'heure, et inventer une icone a partir de la reflectivite
   serait de l'illustration, pas de l'information. */
.msl-p__ruchead{
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(19,36,51,.42); margin: 0 0 .5rem;
}
.msl-p__rgrille{
  border: 1px solid var(--p-bord); border-radius: 10px; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.msl-p__rline{
  display: grid; grid-template-columns: 58px repeat(var(--n), 1fr);
  align-items: center; gap: .3rem; padding: .32rem .5rem;
  border-top: 1px solid rgba(19,36,51,.06); font-size: .76rem;
}
.msl-p__rline:first-child{ border-top: 0 }
.msl-p__rtete{
  background: var(--wp--preset--color--saone); color: var(--wp--preset--color--brume);
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding-block: .5rem;
}
.msl-p__rtete em{
  display: block; font-style: normal; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: rgba(240,237,230,.45); font-size: .64rem;
}
.msl-p__rline .hh{ font-weight: 700; color: rgba(19,36,51,.55) }
.msl-p__rline .c{ text-align: right }
/* Une cellule reellement modelisee se distingue : sans elle, les autres
   colonnes ne decrivent qu'un potentiel. */
.msl-p__rline .c.est-actif{ color: #C0392B; font-weight: 800 }
.msl-p__rline.est-passe{ opacity: .42 }
.msl-p__rline:nth-child(even){ background: rgba(19,36,51,.02) }

@media (max-width: 700px){
  .msl-p__rgrille{ overflow-x: auto }
  .msl-p__rline{ min-width: 520px }
}

/* --- Le modele de reference ---
   Le RUC ouvre la liste et porte une pastille : c'est le modele auquel le
   site accorde le plus de confiance sur le court terme, et cela doit se
   voir avant meme de lire la note. */
.msl-p__md--phare{
  border-color: var(--wp--preset--color--ambre);
  color: var(--wp--preset--color--saone); font-weight: 800;
  display: inline-flex; align-items: center; gap: .35rem;
}
.msl-p__md--phare .pt{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wp--preset--color--ambre); flex: none;
}
.msl-p__md--phare.on{
  background: var(--wp--preset--color--ambre);
  border-color: var(--wp--preset--color--ambre);
  color: var(--wp--preset--color--saone);
}
.msl-p__md--phare.on .pt{ background: var(--wp--preset--color--saone) }

.msl-p__notemodele{
  margin: -.5rem 0 1.1rem; font-size: .82rem; line-height: 1.55;
  color: rgba(19,36,51,.6);
  border-left: 2px solid var(--wp--preset--color--ambre); padding-left: .7rem;
}
.msl-p__notemodele:empty{ display: none }
.msl-p__notemodele b{ color: var(--wp--preset--color--texte); font-weight: 800 }

/* --- Defilement des heures ---
   La barre de defilement reste masquee, mais deux fleches la remplacent :
   sur un ordinateur sans ecran tactile, il n'y avait aucun moyen de faire
   defiler la bande. */
.msl-ac__rail{ position: relative; display: flex; align-items: center }
.msl-ac__rail .msl-ac__heures{ flex: 1; min-width: 0; scroll-behavior: smooth }
.msl-ac__fl{
  position: absolute; z-index: 4; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--wp--preset--color--bord);
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--saone);
  font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(14,42,58,.16);
  display: flex; align-items: center; justify-content: center;
}
.msl-ac__fl[hidden]{ display: none }
.msl-ac__fl:hover{ background: var(--wp--preset--color--gris) }
.msl-ac__fl--g{ left: -6px }
.msl-ac__fl--d{ right: -6px }

/* Sur ecran tactile, le glissement suffit : les fleches masqueraient deux
   vignettes pour rien. */
@media (hover: none) and (pointer: coarse){
  .msl-ac__fl{ display: none !important }
}

/* =========================================================
   35. Tableau horaire
   =========================================================
   Une ligne par heure, onze colonnes. Le pari : tout montrer d'un coup
   plutot que d'obliger a deplier heure par heure. Les valeurs portent leur
   ecart entre modeles en petit, et trois points disent l'accord. */
.msl-p__tscroll{
  overflow-x: auto; border: 1px solid var(--p-bord); border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}
.msl-p__table{
  width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
  min-width: 760px;
}
.msl-p__table thead th{
  position: sticky; top: 0; z-index: 2;
  background: var(--wp--preset--color--saone); color: var(--wp--preset--color--brume);
  font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: .5rem .35rem; text-align: right; white-space: nowrap;
}
.msl-p__table thead th.hh{ text-align: left; padding-left: .7rem }
.msl-p__table thead th.ic{ width: 34px }
.msl-p__unites td{
  background: var(--wp--preset--color--saone); color: rgba(240,237,230,.4);
  font-size: .62rem; padding: 0 .35rem .4rem; text-align: right;
}

.msl-p__r{ border-top: 1px solid rgba(19,36,51,.06); cursor: pointer }
.msl-p__r:hover{ background: rgba(233,160,41,.07) }
.msl-p__r th{
  text-align: left; padding: .3rem .7rem; font-size: .85rem; font-weight: 700;
  color: rgba(19,36,51,.6); white-space: nowrap;
}
.msl-p__r > td{ padding: .3rem .35rem; text-align: right }
.msl-p__r td.ic{ text-align: center; padding: .15rem 0 }
.msl-p__r td.ic svg{ margin: 0 auto }
.msl-p__r td b{ display: block; font-size: .88rem; font-weight: 700 }
.msl-p__r td em{
  display: block; font-style: normal; font-size: .64rem;
  color: rgba(19,36,51,.42); line-height: 1.2;
}

/* La temperature porte sa teinte : on lit la journee d'un regard, sans
   parcourir la colonne chiffre par chiffre. */
.msl-p__r td.tt b{
  display: inline-block; min-width: 38px; padding: .12rem .3rem;
  border-radius: 5px; background: var(--fond); color: #12212B; font-weight: 800;
}
.msl-p__r td.est-pluie b{ color: #2C6B93 }

/* Trois points pour l'accord entre modeles. Une note sur dix serait plus
   precise et beaucoup moins lisible : ici on voit d'un coup ou la
   prevision tient et ou elle flotte. */
.msl-p__r td.fi{ white-space: nowrap; padding-right: .6rem }
.msl-p__r td.fi i{
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(19,36,51,.15); margin-left: 2px;
}
.msl-p__r td.fi i.on{ background: #3E7A54 }

.msl-p__sep > td{
  background: var(--wp--preset--color--gris);
  font-size: .68rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--wp--preset--color--lie);
  padding: .35rem .7rem;
}
.msl-p__dev > td{ padding: .5rem .7rem 1rem; background: var(--wp--preset--color--gris) }
.msl-p__legende{
  font-size: .74rem; line-height: 1.6; color: rgba(19,36,51,.45); margin: .6rem 0 0;
}

/* --- Titre du resume ---
   Cinq nombres sans legende ne disent pas de quoi ils parlent : sur quelle
   duree, sur quel territoire. Une ligne suffit. */
.msl-ac__titre-chiffres{
  margin: 0 0 .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: rgba(19,36,51,.45);
}

/* --- Cases compactes ---
   Elles faisaient deux fois la hauteur necessaire : trois lignes empilees
   la ou une suffit. On passe le libelle et la precision sur la meme ligne
   que la valeur. */
.msl-ac__ch{ padding: .45rem .55rem }
.msl-ac__ch .k{ font-size: .62rem; letter-spacing: .09em }
.msl-ac__ch b{ font-size: .98rem; margin-top: .05rem; line-height: 1.1 }
.msl-ac__ch b em{ font-size: .68rem; margin-left: .18rem }
.msl-ac__ch .s{ font-size: .66rem; margin-top: 0; line-height: 1.25 }

/* --- Recherche posee sur la carte ---
   Elle occupait une bande entiere en tete de bloc pour une fonction
   secondaire. Ici elle est a l'endroit ou l'on cherche sa commune : juste
   au-dessus de la carte ou l'on vient de ne pas la trouver. */
.msl-ac__surcarte{
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: .8rem 0 .4rem;
}
.msl-ac__surcarte .msl-ac__champ{ flex: 0 1 300px; min-width: 200px }
.msl-ac__surcarte input{
  padding: .5rem .9rem; min-height: 40px; font-size: .88rem;
}
.msl-ac__vers{
  font-size: .76rem; color: rgba(19,36,51,.45);
}
@media (max-width: 560px){ .msl-ac__vers{ display: none } }

/* --- Frise : lisibilite et mention ---
   Le vert n'est pas decoratif : il dit « surveille, rien a signaler ». Un
   gris laisserait croire a une absence de donnees, ce qui est exactement
   l'inverse du message. */
.msl-frise__s{ cursor: help; transition: transform .12s ease }
.msl-frise__s:hover{ transform: scaleY(1.6) }
.msl-frise__s.n0{ opacity: .8 }

.msl-frise__reperes{ align-items: baseline }
.msl-frise__mention{
  margin-left: auto; font-size: .62rem; letter-spacing: .04em;
  text-transform: none; color: rgba(240,237,230,.32);
  cursor: help; border-bottom: 1px dotted rgba(240,237,230,.25);
}
@media (max-width: 640px){ .msl-frise__mention{ display: none } }

/* La mention sort de la ligne des reperes : glissee dedans, elle prenait
   la place du dernier libelle et les quatre se collaient les uns aux
   autres — « MAINTENANT20 H2 H8 H ». */
.msl-frise .msl-frise__mention{
  display: block; margin: .2rem 0 0; text-align: right;
  font-size: .62rem; letter-spacing: .04em;
  color: rgba(240,237,230,.3); cursor: help;
  border-bottom: 0;
}
.msl-frise__reperes{ justify-content: space-between }
.msl-frise__reperes span{ flex: none }
.msl-bande__maj{ white-space: nowrap }

/* =========================================================
   36. Frise : infobulle, aide, signalement
   =========================================================
   L'infobulle native met une seconde a paraitre, n'existe pas au doigt et
   impose son style. On la remplace. */
.msl-frise{ position: relative }
.msl-frise__s{
  border: 0; padding: 0; font: inherit; cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.msl-frise__s:hover,
.msl-frise__s.est-ouvert{
  transform: scaleY(1.7);
  box-shadow: 0 0 0 1px rgba(240,237,230,.5);
}
.msl-frise__s:focus-visible{ outline: 2px solid var(--wp--preset--color--ambre) }

.msl-frise__bulle{
  position: absolute; z-index: 40; max-width: 280px;
  background: var(--wp--preset--color--brume); color: var(--wp--preset--color--saone);
  border-radius: 8px; padding: .5rem .65rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  font-size: .8rem; line-height: 1.45; pointer-events: none;
}
.msl-frise__bulle[hidden]{ display: none }
.msl-frise__bulle b{ display: block; font-weight: 800; font-size: .85rem }
.msl-frise__bulle span{ display: block; color: rgba(19,36,51,.7); margin-top: .1rem }

/* --- pied : la mention et le « i » --- */
.msl-frise__pied{
  display: flex; align-items: center; gap: .4rem; justify-content: flex-end;
  margin-top: .25rem;
}
.msl-frise__i{
  width: 16px; height: 16px; min-width: 16px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(240,237,230,.3); background: none;
  color: rgba(240,237,230,.55); font: inherit; font-size: .68rem;
  font-weight: 800; font-style: italic; cursor: pointer; line-height: 1;
}
.msl-frise__i:hover,
.msl-frise__i.on{
  background: var(--wp--preset--color--ambre);
  border-color: var(--wp--preset--color--ambre);
  color: var(--wp--preset--color--saone);
}
.msl-frise__mention{
  font-size: .62rem; letter-spacing: .04em; color: rgba(240,237,230,.3);
}

/* --- panneau d'aide --- */
.msl-frise__aide{
  margin-top: .6rem; background: rgba(240,237,230,.06);
  border-radius: 9px; padding: .7rem .85rem;
  font-size: .8rem; line-height: 1.55; color: rgba(240,237,230,.72);
}
.msl-frise__aide[hidden]{ display: none }
.msl-frise__aide p{ margin: 0 0 .5rem }
.msl-frise__aide b{ color: var(--wp--preset--color--brume) }
.msl-frise__echelle{ list-style: none; margin: 0 0 .6rem; padding: 0 }
.msl-frise__echelle li{
  display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .25rem;
  font-size: .76rem;
}
.msl-frise__echelle i{
  flex: none; width: 22px; height: 8px; border-radius: 3px; margin-top: .25rem;
}
.msl-frise__mf{
  border-left: 2px solid var(--wp--preset--color--ambre); padding-left: .6rem;
  color: rgba(240,237,230,.55); margin-bottom: 0 !important;
}
.msl-frise__mf a{ color: var(--wp--preset--color--ambre) }

/* --- signalement, une fois par jour ---
   Il flottait au-dessus du contenu et poussait la mise en page. Il se pose
   maintenant DANS le bandeau, en position absolue par rapport a lui, et ne
   deplace donc plus rien. */
.msl-frise__appel{
  position: absolute; z-index: 45; right: 0; top: calc(100% + 8px);
  width: min(320px, calc(100vw - 2rem));
  display: flex; align-items: flex-start; gap: .4rem;
  background: var(--wp--preset--color--ambre); color: var(--wp--preset--color--saone);
  border-radius: 10px; padding: .6rem .7rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  font-size: .81rem; line-height: 1.4;
  animation: msl-appel .35s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes msl-appel{
  from{ opacity: 0; transform: translateY(-6px) }
  to{ opacity: 1; transform: none }
}
.msl-frise__appel-txt{ flex: 1; min-width: 0 }
.msl-frise__appel b{ display: block; font-weight: 800 }
.msl-frise__appel span{
  display: block; font-size: .76rem; opacity: .78; margin-top: .05rem;
}
.msl-frise__appel a{
  display: inline-block; margin-top: .35rem; min-height: 32px; line-height: 32px;
  font-size: .76rem; font-weight: 800; color: var(--wp--preset--color--saone);
  text-decoration: underline;
}
.msl-frise__appel-x{
  flex: none; background: none; border: 0; padding: 0 .15rem;
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
  color: var(--wp--preset--color--saone);
}

/* Sur telephone, il occupe la largeur du bandeau plutot que de deborder. */
@media (max-width: 560px){
  .msl-frise__appel{ right: auto; left: 0; width: 100% }
}

@media (prefers-reduced-motion: reduce){
  .msl-frise__appel{ animation: none }
  .msl-frise__s:hover, .msl-frise__s.est-ouvert{ transform: none }
}

/* --- Le « i » doit rester rond ---
   Dans un conteneur en flex, un bouton de 16 px de large prend la HAUTEUR
   de la ligne : le border-radius de 50 % en fait alors une ellipse. Il faut
   figer les deux dimensions et l'empecher de s'etirer. */
.msl-frise__pied{ align-items: center }
.msl-frise__i{
  flex: 0 0 auto; align-self: center;
  width: 15px; height: 15px; min-width: 15px; max-width: 15px;
  min-height: 15px; max-height: 15px;
  box-sizing: border-box; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .66rem; line-height: 1;
}

/* =========================================================
   37. Haut de page : rendre les pixels au contenu
   =========================================================
   Entre le haut de l'ecran et le premier mot, il y avait l'en-tete, un
   filet, une bande blanche et les marges du bandeau. Quatre epaisseurs
   pour ne rien dire. */
.msl-bloc-alertes{
  padding-top: 0 !important; padding-bottom: 0 !important;
}
main > .msl-bloc-alertes + *{ margin-top: 0 }

@media (max-width: 780px){
  .msl-entete{ padding-top: .25rem !important; padding-bottom: .25rem !important }
  .msl-bande--frise{ padding: .4rem .7rem .45rem }
  .msl-frise{ margin-top: .3rem }
  .msl-frise__pied{ margin-top: .15rem }
  .msl-frise__mention{ font-size: .6rem }

  /* Le premier bloc de contenu n'a pas besoin d'un grand souffle : le
     bandeau au-dessus fait deja separation. */
  main > .wp-block-group:first-of-type,
  .msl-grille__col > .wp-block-group:first-child{
    padding-top: var(--wp--preset--spacing--30) !important;
  }
}

/* =========================================================
   38. Le departement qui bat
   =========================================================
   Le meme embleme dans tous les etats : en veille il se trace lentement,
   en alerte il bat. On reconnait la forme, la couleur dit l'etat — plutot
   qu'un pictogramme qui en remplace un autre.

   Le rythme est celui d'un coeur : deux battements rapproches puis une
   pause, un cycle par seconde et demie. C'est volontairement LENT.
   Au-dela de trois clignotements par seconde, une animation devient un
   risque pour les personnes photosensibles ; a 0,7 Hz on est tres loin du
   seuil, et le mouvement reste percu. */
.msl-bande__coeur{
  flex: none; width: 30px; height: 30px; display: block;
}
.msl-bande__coeur svg{ width: 100%; height: 100%; display: block; overflow: visible }

.msl-coeur__fond{ fill: currentColor; opacity: .12 }
.msl-coeur__trait{
  fill: none; stroke: currentColor; stroke-width: 7; stroke-linejoin: round;
}

.msl-bande__coeur.n-jaune{ color: #D8C24E }
.msl-bande__coeur.n-orange{ color: var(--wp--preset--color--ambre) }
.msl-bande__coeur.n-rouge{ color: #E4785F }

/* Le battement porte sur l'ECHELLE et l'opacite, pas sur la couleur : un
   changement de teinte accroche plus fort et fatigue plus vite. */
.msl-bande__coeur svg{
  transform-origin: 50% 50%;
  animation: msl-battement 1.5s ease-in-out infinite;
}
@keyframes msl-battement{
  0%   { transform: scale(1);    opacity: .78 }
  8%   { transform: scale(1.12); opacity: 1 }
  16%  { transform: scale(1.02); opacity: .9 }
  26%  { transform: scale(1.09); opacity: 1 }
  38%  { transform: scale(1);    opacity: .78 }
  100% { transform: scale(1);    opacity: .78 }
}

/* Le rouge bat un peu plus vite : la nuance se sent sans qu'on l'explique. */
.msl-bande__coeur.n-rouge svg{ animation-duration: 1.15s }

/* Sans mouvement, la couleur suffit : elle porte deja l'information. */
@media (prefers-reduced-motion: reduce){
  .msl-bande__coeur svg{ animation: none; opacity: 1 }
}

/* L'ancienne pastille disparait : le contour la remplace. */
.msl-bande--actif .msl-bande__pastille{ display: none }

@media (max-width: 640px){
  .msl-bande__coeur{ width: 24px; height: 24px }
}

/* --- Lisibilite du pied de frise ---
   Le « i » et la mention etaient trop discrets : a 0,5 rem et 30 % d'opacite
   sur fond nuit, la phrase la plus importante du bandeau — celle qui dit que
   ce n'est PAS une vigilance officielle — etait la moins lisible. */
.msl-frise__i{
  width: 19px; height: 19px; min-width: 19px; max-width: 19px;
  min-height: 19px; max-height: 19px;
  font-size: .76rem;
  border-color: rgba(240,237,230,.45);
  color: rgba(240,237,230,.8);
}
.msl-frise__mention{
  font-size: .72rem; letter-spacing: .02em;
  color: rgba(240,237,230,.62);
}
.msl-frise__pied{ gap: .5rem }

@media (max-width: 640px){
  .msl-frise__mention{ font-size: .66rem; display: inline }
  .msl-frise__i{ width: 17px; height: 17px; min-width: 17px; max-width: 17px;
                 min-height: 17px; max-height: 17px }
}

/* Le signalement passe au-dessus de tout le reste du bandeau : il chevauchait
   l'infobulle et le texte d'alerte. */
.msl-frise__appel{ z-index: 60 }
.msl-frise__bulle{ z-index: 55 }



/* =========================================================
   39. Bandeau : corrections ciblees
   =========================================================
   Le bandeau est un CARROUSEL : les risques sont empiles en position
   absolue et se relaient en fondu. Mes versions precedentes leur imposaient
   une grille, ce qui detruisait cette mecanique — d'ou le texte reduit a
   une colonne d'un mot par ligne.
   
   On ne touche donc plus a la structure. Trois corrections seulement. */

/* 1. Le contour du departement, a une taille lisible et a sa couleur. */
.msl-bande__coeur{
  flex: 0 0 auto; align-self: center;
  width: 34px; height: 34px;
  min-width: 34px; max-width: 34px; min-height: 34px; max-height: 34px;
  box-sizing: border-box;
}
.msl-bande__coeur svg{ width: 100%; height: 100%; display: block; overflow: visible }
.msl-bande__coeur .msl-coeur__fond{ fill: currentColor; opacity: .2; stroke: none }
.msl-bande__coeur .msl-coeur__trait{
  fill: none; stroke: currentColor; stroke-width: 8; stroke-linejoin: round;
}
.msl-bande__coeur.n-jaune{ color: #D8C24E }
.msl-bande__coeur.n-orange{ color: #E9A029 }
.msl-bande__coeur.n-rouge{ color: #E4785F }

/* 2. Les segments de frise sont devenus des BOUTONS en version 7.2 : sans
      hauteur explicite, un bouton se replie sur son contenu, qui est vide.
      La frise existait donc dans le HTML et mesurait zero pixel. */
.msl-frise__barre{ display: flex; gap: 2px; width: 100% }
.msl-frise__s{
  flex: 1 1 0; min-width: 0;
  height: 10px; padding: 0; border: 0; border-radius: 2px; display: block;
}

/* 3. La frise occupe toute la largeur, sous la ligne d'alerte. */
.msl-bande--frise .msl-frise{ width: 100%; margin-top: .6rem }

/* --- La piste garde sa largeur ---
   Le texte est present dans le HTML mais la piste etait reduite a quelques
   pixels : elle n'avait plus la place de l'afficher. En retirant mes
   sections 39 et 40, j'ai emporte la regle qui lui donnait sa largeur.

   Les elements a sa droite — pastilles, compteur, heure — sont fixes ; la
   piste prend tout le reste. */
.msl-bande--actif .msl-bande__ligne{
  display: flex; align-items: center; gap: .8rem;
}
.msl-bande--actif .msl-bande__piste{
  flex: 1 1 auto; min-width: 220px;
}
.msl-bande--actif .msl-bande__points,
.msl-bande--actif .msl-bande__tout,
.msl-bande--actif .msl-bande__maj{
  flex: 0 0 auto;
}
/* Les risques sont empiles en position absolue : sans largeur explicite
   sur leur conteneur, ils se replient sur rien. */
.msl-bande--actif .msl-bande__item{ width: 100% }

/* --- La frise sous le bandeau, meme sur grand ecran ---
   Une regle d'origine la placait en COLONNE a cote de la ligne d'alerte.
   C'etait tenable quand le bandeau portait peu de texte ; avec les noms de
   communes et le compteur, il ne reste que quelques dizaines de pixels et
   la frise devient illisible. Elle passe donc dessous, sur toute la
   largeur, a toutes les tailles d'ecran. */
@media (min-width: 780px){
  .msl-bande--frise{ display: block }
  .msl-bande--frise .msl-bande__ligne{ width: 100%; flex: none }
  .msl-bande--frise .msl-frise{
    flex: none; width: 100%; min-width: 0;
    margin-top: .7rem; padding-top: .6rem;
    border-top: 1px solid rgba(240,237,230,.1);
  }
  .msl-bande--frise .msl-frise__barre{ height: 11px }
  .msl-bande--frise .msl-frise__reperes{ font-size: .7rem; margin-top: .3rem }
}

/* La mention tient sur une ligne : coincee dans une colonne etroite, elle
   se decoupait en un mot par ligne et devenait illisible — c'est pourtant
   la phrase la plus importante du bandeau. */
.msl-frise__pied{
  display: flex; align-items: center; justify-content: flex-end;
  gap: .45rem; flex-wrap: nowrap;
}
.msl-frise .msl-frise__mention{
  white-space: nowrap; font-size: .72rem;
  color: rgba(240,237,230,.62); text-align: right;
}
@media (max-width: 520px){
  .msl-frise .msl-frise__mention{ font-size: .65rem; white-space: normal }
}

/* La croix passe au-dessus du reste de l'encart : sans cela, le lien
   « Voir le detail de la frise » la recouvrait et captait le clic. */
.msl-frise__appel{ position: absolute }
.msl-frise__appel-x{
  position: relative; z-index: 5;
  width: 30px; height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.msl-frise__appel a{ position: relative; z-index: 1 }

/* --- Le haut de page respire trop ---
   Entre le bord de l'ecran et le logo, puis entre le logo et le bandeau,
   deux bandes blanches ne portaient rien. Sur telephone, elles coutaient
   pres de cent pixels — le tiers de ce qu'on voit sans faire defiler. */
@media (max-width: 780px){
  .msl-entete{
    padding-top: .15rem !important;
    padding-bottom: .15rem !important;
  }
  .msl-entete__actions{ gap: .4rem }

  /* Le bandeau colle a l'en-tete : le filet de separation suffit. */
  .msl-bloc-alertes{
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .msl-bande{ border-radius: 0 }
}

/* =========================================================
   41. « Ce qui s'est passé » — la page d'archives
   =========================================================
   Une page de consultation, pas d'alerte : le ton est plus calme que celui
   du bandeau. Le recit ouvre sur fond nuit, tout le reste respire en clair.
   La couleur ne sert qu'a hierarchiser les phenomenes — lie-de-vin pour les
   cellules, ambre pour la reflectivite, bleu pour la grele. */

#msl-journee{ --j-bord: rgba(19,36,51,.1) }
#msl-journee *{ box-sizing: border-box }

.msl-j__tete{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.msl-j__nav{ display: flex; align-items: center; gap: .4rem }
.msl-j__nav input{
  font: inherit; font-size: .95rem; font-weight: 700;
  padding: .5rem .8rem; min-height: 46px;
  border: 1px solid var(--wp--preset--color--bord);
  border-radius: 10px; background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--texte);
}
.msl-j__pas{
  width: 44px; height: 44px; padding: 0; border-radius: 10px;
  border: 1px solid var(--wp--preset--color--bord);
  background: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--saone);
  font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.msl-j__pas:hover{ background: var(--wp--preset--color--gris) }
.msl-j__etat{
  margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(19,36,51,.42);
}

/* --- le recit --- */
.msl-j__recit{
  background: var(--wp--preset--color--nuit); color: var(--wp--preset--color--brume);
  border-radius: var(--msl-rayon); padding: 1.5rem 1.4rem; margin-bottom: 1.8rem;
}
.msl-j__jour{
  margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.1;
}
.msl-j__phrase{
  margin: .6rem 0 0; font-size: 1rem; line-height: 1.65;
  color: rgba(240,237,230,.82); max-width: 62ch;
}
.msl-j__chiffres{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: .6rem; margin-top: 1.3rem;
}
.msl-j__chiffre{
  background: rgba(240,237,230,.07); border-radius: 10px; padding: .7rem .8rem;
}
.msl-j__chiffre b{
  display: block; font-size: 1.5rem; font-weight: 800; line-height: 1;
  letter-spacing: -.02em;
}
.msl-j__chiffre .k{
  display: block; font-size: .72rem; font-weight: 700; margin-top: .3rem;
  color: rgba(240,237,230,.78);
}
.msl-j__chiffre .s{
  display: block; font-size: .66rem; color: rgba(240,237,230,.45); margin-top: .1rem;
}

.msl-j__bloc{ margin-bottom: 2rem }
.msl-j__bloc[hidden]{ display: none }
.msl-j__bloc h2{
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .7rem;
}
.msl-j__note{ font-size: .75rem; color: rgba(19,36,51,.5); margin: .5rem 0 0 }

/* --- les courbes --- */
.msl-j__courbe{ margin: 0 0 1rem }
.msl-j__courbe figcaption{
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .78rem; font-weight: 700; margin-bottom: .2rem;
}
.msl-j__courbe figcaption b{ font-size: .72rem; color: rgba(19,36,51,.5) }
.msl-j__courbe svg{ width: 100%; height: auto; display: block }
.msl-j__courbe .ax{
  font-size: 11px; fill: rgba(19,36,51,.42); font-family: inherit;
}
.msl-j__courbe .ax-l{ stroke: rgba(19,36,51,.15); stroke-width: 1 }
.msl-j__courbe rect{ transition: opacity .12s ease }
.msl-j__courbe rect:hover{ opacity: .75 }

/* --- la carte --- */
.msl-j__carte{
  height: 380px; border-radius: var(--msl-rayon); overflow: hidden;
  border: 1px solid var(--j-bord); margin-bottom: .9rem;
}
@media (max-width: 640px){ .msl-j__carte{ height: 300px } }

/* --- tableaux --- */
.msl-j__table{
  width: 100%; border-collapse: collapse; font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.msl-j__table thead th{
  font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(19,36,51,.45);
  text-align: right; padding: .35rem .5rem;
  border-bottom: 1px solid var(--j-bord);
}
.msl-j__table thead th:first-child{ text-align: left }
.msl-j__table tbody th{
  text-align: left; font-weight: 700; padding: .45rem .5rem; white-space: nowrap;
}
.msl-j__table td{
  text-align: right; padding: .45rem .5rem; color: rgba(19,36,51,.72);
}
.msl-j__table tbody tr{ border-top: 1px solid rgba(19,36,51,.05) }
.msl-j__table tbody tr:hover{ background: var(--wp--preset--color--gris) }
.msl-j__table .fort{ color: var(--wp--preset--color--lie); font-weight: 800 }

@media (max-width: 700px){
  .msl-j__table{ display: block; overflow-x: auto; white-space: nowrap }
}

/* --- le classement --- */
.msl-j__rang{ list-style: none; margin: 0; padding: 0 }
.msl-j__rang li{
  display: grid; grid-template-columns: 1fr 2fr 46px 92px;
  align-items: center; gap: .6rem; padding: .35rem 0;
  border-top: 1px solid rgba(19,36,51,.05); font-size: .82rem;
}
.msl-j__rang li:first-child{ border-top: 0 }
.msl-j__rang .n{ font-weight: 700 }
.msl-j__rang .b{
  height: 8px; background: rgba(19,36,51,.07); border-radius: 4px; overflow: hidden;
}
.msl-j__rang .b i{
  display: block; height: 100%; background: var(--wp--preset--color--ambre);
  border-radius: 4px;
}
.msl-j__rang .v{ text-align: right; font-weight: 800 }
.msl-j__rang .h{
  text-align: right; font-size: .72rem; color: rgba(19,36,51,.45);
}
@media (max-width: 620px){
  .msl-j__rang li{ grid-template-columns: 1fr 40px 78px }
  .msl-j__rang .b{ display: none }
}

/* --- comparaison --- */
.msl-j__compare{ display: flex; gap: .5rem; margin-bottom: .8rem; flex-wrap: wrap }
.msl-j__compare input{
  font: inherit; font-size: .88rem; padding: .5rem .8rem; min-height: 44px;
  border: 1px solid var(--wp--preset--color--bord); border-radius: 10px;
  background: var(--wp--preset--color--blanc);
}
.msl-j__compare button{
  font: inherit; font-size: .82rem; font-weight: 800; padding: .5rem 1.2rem;
  min-height: 44px; border: 0; border-radius: 10px;
  background: var(--wp--preset--color--ambre); color: var(--wp--preset--color--saone);
  cursor: pointer;
}
.msl-j__cmp thead th{ text-align: right }
.msl-j__cmp thead th:first-child{ width: 40% }

/* --- La fiche d'une cellule, au clic sur sa trace --- */
.msl-j__fiche{ font-family: inherit; font-size: .8rem; line-height: 1.4 }
.msl-j__fiche .t{
  margin: 0; font-size: .82rem; font-weight: 800;
  color: var(--wp--preset--color--saone);
}
.msl-j__fiche .c{
  margin: .15rem 0 .5rem; font-size: .72rem; color: rgba(19,36,51,.55);
}
.msl-j__fiche .g{ display: grid; gap: .3rem }
.msl-j__fiche .g > div{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .8rem; border-top: 1px solid rgba(19,36,51,.07); padding-top: .25rem;
}
.msl-j__fiche .g > div:first-child{ border-top: 0; padding-top: 0 }
.msl-j__fiche .k{ font-size: .7rem; color: rgba(19,36,51,.55) }
.msl-j__fiche b{ font-size: .8rem; font-weight: 800; white-space: nowrap }
.maplibregl-popup-content{ padding: .7rem .8rem; border-radius: 10px }

/* L'echelle de reflectivite, sous la carte : sans elle, les couleurs de la
   trace ne se lisent pas. */
.msl-j__echelle{
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
  margin: .5rem 0 .9rem; font-size: .68rem; color: rgba(19,36,51,.55);
}
.msl-j__echelle i{
  width: 26px; height: 8px; border-radius: 2px; display: inline-block;
}
.msl-j__echelle span{ margin-right: .5rem }

/* --- La nature du risque, lisible sur la frise ---
   Une case coloree dit qu'il se passe quelque chose, pas QUOI. Une alerte
   chaleur ressemblait a un orage, et l'on cherchait sur la carte radar un
   phenomene qui n'y sera jamais. Un glyphe suffit a les distinguer. */
.msl-frise__s{
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.msl-frise__s i{
  font-style: normal; font-size: 9px; line-height: 1;
  color: rgba(10,30,43,.7); pointer-events: none;
}
/* Sur les niveaux sombres, le glyphe passe en clair. */
.msl-frise__s.n3 i{ color: rgba(255,255,255,.9) }
.msl-frise__s.n0 i{ display: none }

/* Les barres portant un glyphe sont un peu plus hautes : sans cela le
   symbole deborde ou se rogne. */
.msl-frise__barre{ height: 14px }
.msl-frise__s{ height: 14px !important }

.msl-frise__legende{
  display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .3rem;
}
.msl-frise__legende span{
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  color: rgba(240,237,230,.62);
}
.msl-frise__legende i{
  font-style: normal; font-size: .78rem;
  color: var(--wp--preset--color--ambre);
}

@media (max-width: 520px){
  .msl-frise__s i{ font-size: 8px }
  .msl-frise__legende{ gap: .55rem }
  .msl-frise__legende span{ font-size: .56rem }
}

/* La croix reste au-dessus du reste de l'encart et offre une cible large :
   trente pixels de cote, le minimum confortable au doigt. */
.msl-frise__appel-x{
  position: relative; z-index: 6;
  width: 32px; height: 32px; min-width: 32px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; line-height: 1;
}
.msl-frise__appel-txt{ position: relative; z-index: 1 }

/* --- Le panneau de detail d'une case ---
   Une infobulle d'une ligne obligeait a decoder « demain 3 h — risque
   serieux · orage (grele) · Maconnais ». Les quatre informations sont
   desormais empilees et nommees. */
.msl-frise__bulle{
  max-width: 300px; padding: .6rem .7rem;
}
.msl-frise__bulle b{
  display: block; font-size: .82rem; font-weight: 800;
  color: var(--wp--preset--color--saone); margin-bottom: .25rem;
}
.msl-frise__bulle em{
  display: inline-block; font-style: normal; font-size: .66rem;
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: .12rem .45rem; border-radius: 999px; margin-bottom: .4rem;
}
.msl-frise__bulle em.g1{ background: rgba(216,194,78,.28); color: #6A5E12 }
.msl-frise__bulle em.g2{ background: rgba(233,160,41,.28); color: #7A4E08 }
.msl-frise__bulle em.g3{ background: rgba(192,57,43,.2); color: #8C2318 }
.msl-frise__bulle .d{ display: grid; gap: .25rem }
.msl-frise__bulle .d span{
  display: block; font-size: .74rem; line-height: 1.4;
  color: var(--wp--preset--color--texte);
}
.msl-frise__bulle .d i{
  display: block; font-style: normal; font-size: .62rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: rgba(19,36,51,.42);
}
.msl-frise__bulle .calme{
  font-size: .74rem; line-height: 1.45; color: rgba(19,36,51,.62);
}

/* --- Les reperes, tous les trois heures ---
   Quatre reperes laissaient six heures entre chacun : impossible de situer
   une case au milieu. Le changement de jour est marque, sinon « 2 h » peut
   aussi bien etre cette nuit que demain. */
.msl-frise__reperes{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .3rem; gap: .2rem;
}
.msl-frise__reperes span{
  flex: 1 1 0; text-align: center;
  font-size: .58rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(240,237,230,.38);
  white-space: nowrap;
}
.msl-frise__reperes span:first-child{ text-align: left; flex: 0 0 auto }
.msl-frise__reperes span:last-child{ text-align: right }
.msl-frise__reperes .est-jour{ color: rgba(240,237,230,.62) }
.msl-frise__reperes .est-jour b{
  color: var(--wp--preset--color--ambre); font-weight: 800;
}

/* Sur telephone, un repere sur deux : huit libelles sur 340 px se
   chevauchent, et un repere illisible ne repere rien. */
@media (max-width: 560px){
  .msl-frise__reperes span:nth-child(even){ display: none }
  .msl-frise__reperes span{ font-size: .55rem }
}

/* =========================================================
   42. En-tete : rendre l'espace au logo
   =========================================================
   L'en-tete fait 72 px de haut et le logo n'en occupait que 38 : la moitie
   de la hauteur ne servait a rien. On l'agrandit jusqu'a fraler les bords,
   et on recentre verticalement ce qui l'accompagne — le bouton
   d'abonnement paraissait pose trop bas. */

.msl-entete__marque{ align-items: center; gap: .6rem }
.msl-entete__marque .wp-block-site-logo img{
  width: 54px; height: 54px; display: block;
}

/* Le nom du site et son sous-titre se serrent : sur deux lignes de 54 px,
   l'interligne d'origine laissait un blanc au milieu. */
.msl-entete__marque .wp-block-site-title{ line-height: 1.1 }
.msl-entete__sous{ font-size: .62rem; letter-spacing: .14em; margin-top: -.1rem }

/* Tout ce qui borde le logo se cale sur son axe. */
.msl-entete,
.msl-entete > .wp-block-group{ align-items: center }
.msl-entete__actions{ align-items: center; align-self: center }
.msl-entete__actions .wp-block-buttons,
.msl-entete__actions .wp-block-button{ display: flex; align-items: center }
.msl-entete__actions .wp-block-button__link{ display: inline-flex; align-items: center }
.msl-entete__nav{ align-items: center }

@media (max-width: 780px){
  .msl-entete__marque .wp-block-site-logo img{ width: 46px; height: 46px }
}
@media (max-width: 400px){
  .msl-entete__marque .wp-block-site-logo img{ width: 40px; height: 40px }
}

/* --- L'en-tete, aligne sur un seul axe ---
   Le bloc de droite contient un PARAGRAPHE — celui qui porte « Connexion »
   et « Creer un compte ». WordPress lui donne ses marges par defaut, ce qui
   decalait tout le groupe de quelques pixels vers le bas. */
.msl-entete__actions p{ margin: 0 !important; line-height: 1 }
.msl-entete__actions{
  display: flex; align-items: center; gap: .7rem;
}
.msl-entete__actions .wp-block-buttons{ margin: 0 }
.msl-compte{ display: inline-flex; align-items: center; gap: .7rem }

/* Le groupe entier se centre sur la hauteur de l'en-tete. */
.msl-entete > .wp-block-group,
.msl-entete .wp-block-group.is-layout-flex{ align-items: center }
.msl-entete__marque{ display: flex; align-items: center }
.msl-entete__marque .wp-block-group{ align-items: center }

/* La marque tient sur deux lignes serrees : centree face a un logo de
   54 px, elle laissait un blanc au milieu. */
.msl-entete__marque > div,
.msl-entete__marque .wp-block-group.is-layout-flow{
  display: flex; flex-direction: column; justify-content: center;
}


/* --- 42. Origine des modeles ---------------------------------------
   D'ou vient une prevision est une vraie information : ICON est
   allemand, AROME francais, ECMWF europeen, GFS americain. Un liseré
   de 3 px aux couleurs du pays le dit d'un coup d'oeil.

   Pas de drapeau dessine ni de coq : a la taille d'un onglet, un
   embleme devient une tache illisible. Trois bandes se lisent. */
.msl-p__md{ position: relative; overflow: hidden }
.msl-p__md::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: rgba(19,36,51,.18);
}
/* Un liseré de 3 px se perdait sous la bordure de l'onglet. A 6 px les
   trois bandes se distinguent vraiment, et le blanc du drapeau francais
   ne se confond plus avec le fond de l'onglet. */
.msl-p__md[data-pays="fr"]::after{
  background: linear-gradient(90deg,
    #0055A4 0 33.33%, #FFFFFF 33.33% 66.66%, #EF4135 66.66% 100%);
}
.msl-p__md[data-pays="de"]::after{
  background: linear-gradient(90deg,
    #111111 0 33.33%, #DD0000 33.33% 66.66%, #FFCE00 66.66% 100%);
}
.msl-p__md[data-pays="us"]::after{
  background: linear-gradient(90deg,
    #3C3B6E 0 34%, #B22234 34% 56%, #FFFFFF 56% 78%, #B22234 78% 100%);
}
.msl-p__md[data-pays="eu"]::after{ background: #003399 }
.msl-p__md[data-pays="mix"]::after{
  background: linear-gradient(90deg,
    rgba(19,36,51,.25), rgba(19,36,51,.10), rgba(19,36,51,.25));
}
/* L'onglet actif garde son liseré pleinement lisible : c'est justement
   le moment ou l'on veut savoir quel modele on regarde. On le separe de
   l'ambre par un trait sombre plutot qu'en le delavant. */
.msl-p__md.on::after{ box-shadow: inset 0 1px 0 rgba(19,36,51,.45) }

/* Le blanc du drapeau francais a besoin d'etre borne, sinon il disparait
   sur un onglet clair. */
.msl-p__md[data-pays="fr"]::after,
.msl-p__md[data-pays="us"]::after{
  box-shadow: inset 0 0 0 1px rgba(19,36,51,.22);
}
.msl-p__md.on[data-pays="fr"]::after,
.msl-p__md.on[data-pays="us"]::after{
  box-shadow: inset 0 0 0 1px rgba(19,36,51,.45);
}

@media (prefers-contrast: more){
  .msl-p__md::after{ height: 8px }
}

/* =========================================================
   43. Les heures, deux modeles cote a cote
   =========================================================
   Le tableau a onze colonnes obligeait a faire glisser du doigt vers la
   droite. Sur un telephone ce geste entre en conflit avec le defilement
   de la page, et personne ne devine qu'il faut le faire : les colonnes de
   droite n'etaient jamais lues. Ici la ligne porte l'essentiel et le
   reste se deplie VERS LE BAS. */

/* --- La frise d'accord ---
   Vingt-quatre barres, une par heure. Calme quand les deux modeles
   disent la meme chose, allumee quand ils divergent. C'est la seule
   chose que ni Sencrop ni Weenat ne publient. */
.msl-d__accord{
  background: var(--wp--preset--color--saone); color: var(--wp--preset--color--brume);
  border-radius: 12px; padding: .85rem .95rem .7rem; margin-bottom: .8rem;
}
.msl-d__res{
  display: block; margin-top: .3rem; font-size: .76rem; font-weight: 600;
  color: rgba(240,237,230,.55);
}
.msl-d__phrase{ margin: 0 0 .7rem; font-size: .88rem; line-height: 1.4 }
.msl-d__phrase b{ color: #FFD08A; font-weight: 800 }
/* --- Une marque par heure ---
   Une frise de barres ressemblait trop a celle du risque sur la page
   d'accueil : on y aurait lu « danger » la ou il faut lire « les modeles
   ne s'entendent pas ». Une coche et une croix ne se confondent avec
   rien, et se lisent sans legende. */
.msl-d__marques{
  display: grid; grid-template-columns: repeat(var(--n, 24), 1fr);
  gap: 1px; align-items: center;
}
.msl-d__marques span{ display: flex; justify-content: center; color: #5E8A6E }
.msl-d__marques span svg{ width: 100%; max-width: 15px; height: auto }
.msl-d__marques span.mitige{ color: var(--wp--preset--color--ambre) }
.msl-d__marques span.non{ color: #E4655F }
.msl-d__bornes{
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  margin-top: .4rem; font-size: .66rem; color: rgba(240,237,230,.45);
}
.msl-d__quoi{ font-size: .6rem; letter-spacing: .04em; text-align: center }
@media (max-width: 400px){
  .msl-d__quoi{ display: none }
}

/* --- Le tableau --- */
.msl-d__table{
  border: 1px solid var(--p-bord); border-radius: 10px; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.msl-d__cols{
  display: grid; grid-template-columns: 46px 1fr 18px; gap: .5rem;
  align-items: end; padding: .55rem .7rem .45rem;
  background: var(--wp--preset--color--saone); color: var(--wp--preset--color--brume);
}
/* --- les trois modes de lecture ---------------------------------------
   Trois cartes plutôt qu'un menu : le choix se voit, et chaque icône
   dit le mode avant qu'on lise son nom. L'animation est discrète et
   s'arrête pour qui a demandé moins de mouvement. */
.msl-p__modes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem }
.msl-p__mode{
  display: flex; flex-direction: column; align-items: center; gap: .12rem;
  padding: .7rem .35rem .6rem; border-radius: 14px; cursor: pointer;
  font: inherit; text-align: center;
  background: var(--wp--preset--color--gris, #EFECE5);
  border: 1px solid var(--p-bord, rgba(19,36,51,.12));
  color: rgba(19,36,51,.58);
  transition: background var(--msl-transition), color var(--msl-transition),
              border-color var(--msl-transition);
}
.msl-p__mode b{ font-size: .88rem; font-weight: 800; color: var(--wp--preset--color--nuit, #132433) }
.msl-p__mode span{ font-size: .64rem; font-weight: 600; line-height: 1.25; opacity: .7 }
.msl-p__mode:hover{ background: rgba(233,160,41,.12) }
.msl-p__mode.on{
  background: var(--wp--preset--color--nuit, #132433);
  border-color: var(--wp--preset--color--nuit, #132433);
  color: var(--wp--preset--color--brume, #F0EDE6);
}
.msl-p__mode.on b{ color: var(--wp--preset--color--brume, #F0EDE6) }
.ic-md{ width: 40px; height: 33px; display: block; margin-bottom: .15rem }

/* Le soleil tourne lentement, la nuée glisse. */
.msl-p__mode.on .ic-md--std .rayons{
  transform-origin: 16px 16px; animation: msl-tourne 14s linear infinite;
}
.msl-p__mode.on .ic-md--std .nuee{ animation: msl-glisse 5s ease-in-out infinite }
@keyframes msl-tourne{ to{ transform: rotate(360deg) } }
@keyframes msl-glisse{ 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(-2.5px) } }

/* L'éclair claque, puis se tait : une boucle nerveuse fatiguerait. */
.msl-p__mode.on .ic-md--org .eclair{ animation: msl-eclair 3.2s steps(1) infinite }
@keyframes msl-eclair{
  0%,6%{ opacity: 1 } 8%{ opacity: .15 } 11%,17%{ opacity: 1 }
  19%{ opacity: .15 } 22%{ opacity: 1 } 60%,100%{ opacity: .35 }
}

/* Les trois branches s'écartent : c'est la dispersion d'un ensemble. */
.msl-p__mode.on .ic-md--lg .br{
  stroke-dasharray: 62; stroke-dashoffset: 62;
  animation: msl-trace 3.4s ease-in-out infinite;
}
.msl-p__mode.on .ic-md--lg .br2{ animation-delay: .35s }
.msl-p__mode.on .ic-md--lg .br3{ animation-delay: .7s }
@keyframes msl-trace{
  0%{ stroke-dashoffset: 62 } 45%,70%{ stroke-dashoffset: 0 }
  100%{ stroke-dashoffset: -62 }
}

@media (prefers-reduced-motion: reduce){
  .msl-p__mode .ic-md *{ animation: none !important }
}
@media (max-width: 380px){
  .msl-p__mode span{ display: none }
  .ic-md{ width: 34px; height: 28px }
}

/* --- le mode orage ----------------------------------------------------
   Le fond de ligne monte avec la sévérité. Trois teintes seulement :
   au-delà, on ne distingue plus rien d'un coup d'œil, et c'est d'un coup
   d'œil que se lit une page d'orage. */
.msl-d__l--o{ cursor: default; align-items: start; padding-top: .55rem }
.msl-d__l--o.o1{ background: rgba(233,160,41,.10) }
.msl-d__l--o.o2{ background: rgba(233,160,41,.22) }
.msl-d__l--o.o3{ background: rgba(180,71,46,.20) }
.msl-d__l--o.o3::after{
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: #B4472E;
}
.msl-d__l--o .mo{
  display: block; font-size: .7rem; font-weight: 700; line-height: 1.2;
  margin-top: .1rem; color: rgba(19,36,51,.72);
}
.msl-d__l--o.o3 .mo{ color: #8E3620 }
.msl-d__l--o .sl i{ font-style: normal }
.msl-d__l--o .sl .cp{ color: #B4472E }
.msl-d__l--o .sl .cs{ color: #2C6B93 }
.msl-d__l--o .sl .sr{ color: #6B4E8E }
.msl-d__l--o .sl .mm{ color: #2C6B93 }
.msl-d__l--o .sl .fort{ font-weight: 800; text-decoration: underline }
.msl-d__l--o .sl .abs{ color: rgba(19,36,51,.35); font-weight: 600 }
.msl-d__l--o .mo.flou{ color: rgba(19,36,51,.45) }
.msl-d__table--o .msl-d__unites{ text-align: right; line-height: 1.35 }

/* --- le mode long terme : quatre étages de dispersion ----------------
   Ce qu'on trace n'est pas une prévision mais la moyenne des membres,
   entourée d'un écart type. La bande dit l'incertitude ; la barre sous
   chaque étage dit où elle devient trop grande pour promettre. */
/* Fond clair : quatre-vingt-deux traits superposés sur du bleu nuit
   donnaient une brume. Sur blanc, l'accumulation des traits noirs se
   lit — c'est elle qui porte l'information. */
.msl-lt{
  background: #FFFFFF; color: #132433;
  border: 1px solid var(--p-bord, rgba(19,36,51,.12));
  border-radius: var(--msl-rayon); padding: .9rem .8rem 1rem;
}
.msl-lt__q{ margin: 0 0 .6rem; font-size: .8rem; line-height: 1.45;
  color: rgba(19,36,51,.72) }
.msl-lt__q b{ color: #B03070 }
.msl-lt__leg{ display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-bottom: .5rem }
.msl-lt__leg span{ display: flex; align-items: center; gap: .3rem; font-size: .72rem;
  font-weight: 600; color: rgba(19,36,51,.7) }
.msl-lt__leg i{ width: 14px; height: 3px; border-radius: 2px; display: block }
.msl-lt__leg i.tr{ height: 0; border-top: 2px dashed #1B5FBF; background: none !important }
.msl-lt__vue{ display: flex; gap: .25rem; margin-left: auto }
.msl-lt__vue button{
  font: inherit; font-size: .68rem; font-weight: 700; padding: .18rem .55rem;
  border-radius: 999px; cursor: pointer;
  background: var(--wp--preset--color--gris, #EFECE5);
  border: 1px solid var(--p-bord, rgba(19,36,51,.14));
  color: rgba(19,36,51,.6);
}
.msl-lt__vue button[aria-pressed="true"]{
  background: #132433; border-color: #132433; color: #F0EDE6;
}
.msl-lt__c svg{ width: 100%; height: auto; display: block }
/* --- la bande de lecture au survol ---
   Hauteur figée : sans cela, la page sautait d'une dizaine de pixels au
   premier passage du doigt, et le graphique se dérobait sous lui. */
.msl-lt__val{
  min-height: 58px; display: flex; flex-wrap: wrap; align-items: center;
  gap: .1rem .7rem; padding: .45rem .2rem .5rem;
  border-bottom: 1px solid rgba(19,36,51,.1); margin-bottom: .35rem;
}
.msl-lt__val .q{ font-size: .74rem; color: rgba(19,36,51,.4) }
.msl-lt__val .h{
  flex: 1 0 100%; font-size: .76rem; font-weight: 800; color: #132433;
  letter-spacing: .02em;
}
.msl-lt__val .c{ display: flex; align-items: baseline; gap: .25rem; font-size: .72rem }
.msl-lt__val .c b{ font-weight: 700; color: rgba(19,36,51,.5) }
.msl-lt__val .c i{ font-style: normal; font-weight: 800 }
.msl-lt__val .c i + i{ margin-left: .15rem }
.msl-lt__val .c u{
  text-decoration: none; font-size: .82em; font-weight: 600; opacity: .6;
  margin-left: .08em;
}
.msl-lt__val .c u.hs{ color: #B4472E; opacity: 1 }
.msl-lt__c{ touch-action: pan-y; cursor: crosshair }

.msl-lt__act{ margin-top: .7rem; display: flex; gap: .5rem }
.msl-lt__act .msl-d__b{ flex: 1 }
.msl-lt__n{
  margin: .6rem 0 0; font-size: .72rem; font-style: italic;
  color: rgba(19,36,51,.5);
}

/* --- ce qu'affiche un mode pas encore livré --- */
.msl-p__chantier{
  background: var(--wp--preset--color--gris, #EFECE5);
  border: 1px dashed var(--p-bord, rgba(19,36,51,.2));
  border-radius: var(--msl-rayon); padding: 1rem 1.05rem;
}
.msl-p__chantier h3{ margin: 0 0 .3rem; font-size: 1.02rem }
.msl-p__chantier .q{ margin: 0 0 .5rem; font-size: .82rem; color: rgba(19,36,51,.6) }
.msl-p__chantier ul{ margin: 0 0 .7rem; padding-left: 1.1rem }
.msl-p__chantier li{ font-size: .84rem; margin-bottom: .25rem }
.msl-p__chantier .n{
  margin: 0 0 .8rem; font-size: .74rem; font-style: italic;
  color: rgba(19,36,51,.5);
}

/* --- le compteur de colonnes et le choix par en-tête ------------------
   Les pastilles du haut obligeaient à relier un bouton à une colonne
   qu'on ne voyait plus en le pressant. On choisit là où on lit. */
.msl-d__nb{
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  margin: 0 0 .5rem; padding: 0 .2rem;
}
.msl-d__nb .k{
  font-size: .62rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(19,36,51,.45); margin-right: .15rem;
}
.msl-d__nb .u{ font-size: .74rem; font-weight: 600; color: rgba(19,36,51,.45) }
.msl-d__nb button{
  min-width: 30px; padding: .22rem .1rem; border-radius: 999px; font: inherit;
  font-size: .8rem; font-weight: 800; cursor: pointer;
  background: var(--wp--preset--color--gris, #EFECE5);
  border: 1px solid var(--p-bord, rgba(19,36,51,.12));
  color: rgba(19,36,51,.65);
}
.msl-d__nb button[aria-pressed="true"]{
  background: var(--wp--preset--color--nuit, #132433);
  border-color: var(--wp--preset--color--nuit, #132433);
  color: var(--wp--preset--color--brume, #F0EDE6);
}
.msl-d__par{
  flex: 1 0 100%; margin-top: .3rem; font-size: .72rem; font-weight: 600;
  color: #A8651A;
}

button.msl-d__mt{
  background: none; border: 0; padding: .1rem .15rem; cursor: pointer;
  font: inherit; color: inherit; border-radius: 7px;
}
button.msl-d__mt:hover{ background: rgba(240,237,230,.12) }
button.msl-d__mt svg{ width: 11px; height: 11px; opacity: .55; margin-left: .1rem }

/* --- le panneau de choix d'un modèle --- */
.msl-chx__l{ display: grid; gap: .4rem; padding: 0 .2rem .4rem }
.msl-chx__l button{
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center;
  gap: .5rem .6rem; padding: .55rem .7rem; border-radius: 12px; font: inherit;
  text-align: left; cursor: pointer;
  background: rgba(240,237,230,.06); border: 1px solid rgba(240,237,230,.14);
  color: var(--wp--preset--color--brume, #F0EDE6);
}
.msl-chx__l button[aria-pressed="true"]{
  background: rgba(233,160,41,.16); border-color: rgba(233,160,41,.5);
}
.msl-chx__l .dr{ width: 18px; height: 11px; border-radius: 2px; display: block }
.msl-chx__l .n{ font-size: .92rem; font-weight: 700 }
.msl-chx__l .d{
  grid-column: 2; font-size: .72rem; font-weight: 600;
  color: rgba(240,237,230,.5);
}
.msl-chx__l .u{
  grid-row: 1 / span 2; grid-column: 3; font-size: .64rem; font-weight: 700;
  color: rgba(233,160,41,.85);
}

.msl-d__cols .k{
  font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(240,237,230,.5);
}
.msl-d__duo{
  display: grid; grid-template-columns: repeat(var(--n, 2), 1fr);
  gap: .6rem; text-align: right;
}
/* A trois colonnes, les sous-lignes se touchaient : deux nombres colles
   se lisent comme un seul. On resserre le texte plutot que l'espace. */
.msl-d__table.n3 .sl{ font-size: .6rem }
.msl-d__table.n3 .t1 b{ font-size: .9rem }
.msl-d__table.n4 .t1 b{ font-size: .84rem }
@media (max-width: 420px){
  .msl-d__table.n2 .msl-d__duo{ gap: .45rem }
  .msl-d__table.n3 .sl{ font-size: .56rem }
}
.msl-d__mt{ position: relative; padding-bottom: 7px; display: block }
.msl-d__mt b{ font-size: .72rem; font-weight: 800; letter-spacing: -.01em }
.msl-d__mt i.dr{ position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px }

/* Le lisere d'origine : on voit d'ou vient le chiffre sans le lire. */
.dr--fr{ background: linear-gradient(90deg,#12428F 0 33.3%,#F2F0EA 33.3% 66.6%,#D8353A 66.6%) }
.dr--de{ background: linear-gradient(90deg,#111 0 33.3%,#D81E26 33.3% 66.6%,#F5C518 66.6%) }
.dr--eu{ background: #123A8F }
.dr--us{ background: linear-gradient(90deg,#3A4A8F 0 40%,#C0303A 40%) }
.dr--ch{ background: #D8353A }
.dr--nl{ background: linear-gradient(90deg,#C1352F 0 33.3%,#F2F0EA 33.3% 66.6%,#1B458F 66.6%) }
.dr--gb{ background: linear-gradient(90deg,#12306E 0 28%,#F2F0EA 28% 72%,#C8262C 72%) }
.dr--mix{ background: linear-gradient(90deg,#5D7385,#A9B6C1) }

.msl-d__sep{
  background: var(--wp--preset--color--gris); color: var(--wp--preset--color--lie);
  font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  padding: .35rem .7rem;
}
.msl-d__l{
  width: 100%; display: grid; grid-template-columns: 46px 1fr 18px;
  gap: .5rem; align-items: center; padding: .5rem .7rem; position: relative;
  background: transparent; border: 0; border-top: 1px solid rgba(19,36,51,.07);
  font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 46px;
}
.msl-d__l:hover{ background: rgba(233,160,41,.07) }
.msl-d__l:focus-visible{ outline: 2px solid var(--wp--preset--color--ambre); outline-offset: -3px }
.msl-d__l .hh{ font-size: .84rem; font-weight: 700; color: rgba(19,36,51,.6) }

/* --- l'heure en cours -----------------------------------------------
   Un liseré bleu nuit, pas ambré : l'ambre est déjà pris par le
   désaccord entre modèles, et une heure présente qui ressemblerait à
   une alerte serait un contresens. */
.msl-d__l.now{ background: rgba(19,36,51,.045) }
.msl-d__l.now::before{
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--wp--preset--color--nuit, #132433);
}
.msl-d__l.now .hh{ color: var(--wp--preset--color--nuit, #132433) }
.msl-d__l.now .hh em{
  display: block; font-style: normal; font-size: .58rem; font-weight: 700;
  margin-top: .05rem; white-space: nowrap; color: rgba(19,36,51,.45);
}
/* Le désaccord reste visible par-dessus : c'est l'information la plus
   forte des deux, et elle ne doit pas être effacée par le marquage. */
.msl-d__l.now.dv{ background: rgba(233,160,41,.13) }
/* Chaque modele porte SON ciel, colle a SA temperature. Un pictogramme
   unique au milieu de la ligne ne disait pas de quel modele il venait :
   si AROME voit une averse et ICON-D2 un ciel voile, montrer l'averse
   seule est une affirmation que rien ne soutient. */
/* Chaque modele porte desormais SA pluie et SES rafales, sous sa
   temperature. La colonne commune obligeait a n'afficher qu'une valeur
   pour deux sources : on ne savait plus de qui venait le chiffre. */
.msl-d__l .tv{ display: block; text-align: right }
.msl-d__l .t1{
  display: flex; align-items: center; justify-content: flex-end; gap: .3rem;
}
.msl-d__l .t1 svg{ flex: 0 0 auto }
.msl-d__l .t1 b{ font-size: 1.02rem; font-weight: 800 }
.msl-d__l .sl{
  display: block; margin-top: .08rem; font-size: .68rem; font-weight: 700;
  white-space: nowrap; letter-spacing: -.01em;
}
.msl-d__l .sl i{ font-style: normal }
/* Une couleur par famille, et une seule signification par couleur :
   bleu la pluie, vert les rafales, ardoise la pression. L'ambre reste
   reserve au desaccord entre modeles et prime sur les trois. */
/* --- les jours suivants, sur la grille du tableau horaire --- */
.msl-d__l--j{ cursor: default }
.msl-d__l--j .hh{ font-size: .8rem }
.msl-d__l .t1 u{
  text-decoration: none; font-size: .78rem; font-weight: 700;
  color: rgba(19,36,51,.4); margin-left: .12rem;
}
.msl-d__l .t1.hors{
  font-size: .68rem; font-weight: 700; color: rgba(19,36,51,.28);
  justify-content: flex-end;
}
.msl-d__l .sl .mm{ color: #2C6B93 }
.msl-d__l .sl .rf{ color: #3F7A5A }
.msl-d__l .sl .rf.fort{ color: #B4472E; font-weight: 800 }
.msl-d__l .sl .pr{ color: #6B7B87 }
.msl-d__l .sl i + i::before{ content: ' · '; color: rgba(19,36,51,.25) }
.msl-d__l .sl u{ text-decoration: none; margin-left: .1em; font-size: .9em }
.msl-d__l .sl u.bas{ color: #B4472E }
.msl-d__l .sl u.haut{ color: #3F7A5A }
.msl-d__l .sl .e{ color: #A8651A }
.msl-d__unites{
  padding: .3rem .7rem; text-align: right; font-size: .62rem;
  font-weight: 700; letter-spacing: .04em; color: rgba(19,36,51,.4);
  background: rgba(19,36,51,.035);
}
.msl-d__unites em{
  display: block; font-style: normal; font-weight: 700;
  color: rgba(19,36,51,.35);
}
@media (max-width: 400px){
  .msl-d__l .t1 b{ font-size: .94rem }
  .msl-d__l .t1{ gap: .18rem }
}

/* La ligne « Ciel » du depli porte des mots, pas des nombres : elle a
   besoin de plus de place et d'un alignement moins serre. */
.msl-d__p--ciel .v{ font-size: .78rem; line-height: 1.25 }
/* La valeur sur laquelle les deux modeles ne s'entendent pas. */

  background: var(--wp--preset--color--gris); border: 1px solid var(--p-bord);
  border-radius: 999px; padding: .3rem .68rem; font: inherit; font-size: .78rem;
  font-weight: 700; color: rgba(19,36,51,.7); cursor: pointer;
  transition: background var(--msl-transition), color var(--msl-transition);
}
  /* Repli en dur : une pastille active invisible ferait croire que le
     clic n'a pas pris. On ne depend pas d'une variable de theme ici. */
  background: var(--wp--preset--color--nuit, #132433);
  border-color: var(--wp--preset--color--nuit, #132433);
  color: var(--wp--preset--color--brume, #F0EDE6);
}
.msl-d__l .chev{ color: rgba(19,36,51,.3); transition: transform var(--msl-transition) }
.msl-d__l[aria-expanded="true"] .chev{ transform: rotate(180deg) }

/* Le desaccord se voit avant les valeurs : c'est lui l'information. */
.msl-d__l.dv{ background: rgba(233,160,41,.1) }
.msl-d__l.dv::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--wp--preset--color--ambre);
}
.msl-d__l.dv2::before{ background: #C4553D }

.msl-d__dev{
  max-height: 0; overflow: hidden; background: var(--wp--preset--color--gris);
  transition: max-height .28s ease;
}
.msl-d__dev.ouvert{ max-height: 900px }
.msl-d__dedans{ padding: .6rem .8rem 1rem }
.msl-d__ciel{
  margin: 0 0 .5rem; font-size: .8rem; font-weight: 700;
  color: var(--wp--preset--color--lie);
}
.msl-d__p{
  display: grid; grid-template-columns: 1.1fr repeat(var(--n, 2), 1fr); gap: .5rem;
  padding: .38rem 0; border-bottom: 1px solid rgba(19,36,51,.07);
}
.msl-d__p:last-of-type{ border-bottom: 0 }
.msl-d__p .n{ font-size: .78rem; color: rgba(19,36,51,.6) }
.msl-d__p .v{ font-size: .84rem; font-weight: 700; text-align: right }
.msl-d__p.e .v{ color: #9A5B12 }
.msl-d__p.e .n::after{ content: " ●"; font-size: .5rem; color: var(--wp--preset--color--ambre) }

.msl-d__mini{ display: flex; gap: .5rem; margin-top: .7rem }
.msl-d__mini button{
  flex: 1; font: inherit; font-size: .78rem; font-weight: 700; padding: .55rem;
  min-height: 40px; border: 1px solid var(--wp--preset--color--bord); border-radius: 9px;
  background: var(--wp--preset--color--blanc); cursor: pointer;
}
.msl-d__mini button:hover{ border-color: var(--wp--preset--color--ambre) }

.msl-d__actions{ display: flex; gap: .5rem; margin-top: .8rem }
.msl-d__b{
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .86rem; font-weight: 800; padding: .7rem 1rem; min-height: 46px;
  border: 1px solid var(--wp--preset--color--bord); border-radius: 12px;
  background: var(--wp--preset--color--blanc); cursor: pointer;
}
.msl-d__b:hover{ border-color: var(--wp--preset--color--ambre) }
.msl-d__b--plein{
  flex: 0 0 auto; border-color: transparent;
  background: var(--wp--preset--color--ambre); color: var(--wp--preset--color--saone);
}
.msl-d__b[disabled]{ opacity: .55; cursor: default }
/* Un SVG sans dimensions prend toute la place offerte par le flex :
   le pictogramme du bouton remplissait la moitié de l'écran. */
.msl-d__b svg{ flex: 0 0 auto; width: 18px; height: 18px }

/* =========================================================
   44. Le comparateur de modeles
   =========================================================
   Un panneau qui monte du bas. Le sélecteur reste replié : les curieux le
   trouvent, les autres ne sont pas noyés. Deux courbes plus une bande
   d'ecart valent mieux que six courbes illisibles. */
.msl-c{
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end;
  justify-content: center; background: rgba(5,11,17,.66);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.msl-c.ouvert{ opacity: 1; pointer-events: auto }
.msl-c__p{
  width: 100%; max-width: 760px; max-height: 93vh; display: flex; flex-direction: column;
  overflow: hidden; border-radius: 22px 22px 0 0;
  background: var(--wp--preset--color--saone); color: var(--wp--preset--color--brume);
  transform: translateY(26px); transition: transform .26s cubic-bezier(.22,.8,.3,1);
  box-shadow: 0 -18px 50px rgba(0,0,0,.5);
}
.msl-c.ouvert .msl-c__p{ transform: translateY(0) }
@media (min-width: 782px){
  .msl-c{ align-items: center }
  .msl-c__p{ border-radius: 20px; max-height: 88vh }
}
@media (prefers-reduced-motion: reduce){
  .msl-c, .msl-c__p, .msl-d__dev, .msl-d__l .chev{ transition: none }
}
.msl-c__poignee{ padding: .55rem 0 .2rem; display: flex; justify-content: center; touch-action: none }
.msl-c__poignee i{ display: block; width: 38px; height: 4px; border-radius: 2px; background: #3A5570 }
/* Titre et commune empiles : sur 390 px, les mettre sur une meme ligne
   coupait « Comparer les modeles » en deux. */
.msl-c__tete{
  display: grid; grid-template-columns: 1fr 34px; gap: 0 .7rem;
  align-items: center; padding: .1rem 1.1rem .75rem; touch-action: none;
}
.msl-c__tete h2{
  grid-column: 1; grid-row: 1; margin: 0;
  font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
}
.msl-c__tete span{
  grid-column: 1; grid-row: 2; font-size: .76rem; color: rgba(240,237,230,.55);
}
.msl-c__x{
  grid-column: 2; grid-row: 1 / 3; width: 34px; height: 34px; border: 0;
  border-radius: 50%; background: #24405A; color: var(--wp--preset--color--brume);
  font-size: 1rem; cursor: pointer;
}
.msl-c__reglages{ padding: 0 1.1rem .3rem }
.msl-c__g{ margin-bottom: .7rem }
.msl-c__g .k{
  display: block; margin-bottom: .4rem; font-size: .62rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(240,237,230,.42);
}
.msl-c__seg{ display: flex; gap: .5rem; flex-wrap: wrap }
.msl-c__puces{ display: flex; flex-wrap: wrap; gap: .4rem }
.msl-c__puce{
  position: relative; overflow: hidden; font: inherit; font-size: .78rem; font-weight: 700;
  padding: .45rem .8rem; min-height: 38px; border-radius: 999px; cursor: pointer;
  border: 1px solid #2E4A63; background: transparent; color: var(--wp--preset--color--brume);
}
.msl-c__puce[aria-pressed="true"]{ background: #21384E; border-color: transparent }
.msl-c__puce[aria-pressed="true"]::after{
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px;
  height: 3px; border-radius: 2px; background: var(--c, #fff);
}
.msl-c__puce i.dr{ position: absolute; left: 0; right: 0; bottom: 0; height: 5px; opacity: .5 }
.msl-c__puce[aria-pressed="true"] i.dr{ opacity: 1 }
.msl-c__sg{ display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #1B3145 }
.msl-c__sg button{
  font: inherit; font-size: .78rem; font-weight: 700; padding: .4rem .85rem; min-height: 36px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: rgba(240,237,230,.55);
}
.msl-c__sg button[aria-pressed="true"]{ background: #24405A; color: var(--wp--preset--color--brume) }
.msl-c__avis{
  display: none; margin: 0 0 .7rem; padding: .5rem .7rem; border-radius: 9px;
  font-size: .74rem; color: #FFD08A; background: rgba(233,160,41,.12);
}
.msl-c__avis.visible{ display: block }
.msl-c__zone{ flex: 1 1 auto; overflow-y: auto; padding: .2rem .4rem 0 }
.msl-c__vg{ padding: 0 .7rem 1rem }
.msl-c__vt{ display: flex; align-items: baseline; gap: .5rem; padding: 0 .2rem .2rem }
.msl-c__vt b{ font-size: .84rem; font-weight: 700 }
.msl-c__vt .ec{
  margin-left: auto; font-size: .68rem; font-weight: 700; padding: .15rem .55rem;
  border-radius: 999px; color: #FFD08A; background: rgba(233,160,41,.14);
  font-variant-numeric: tabular-nums;
}
.msl-c__vt .ec.calme{ color: rgba(240,237,230,.55); background: rgba(147,165,176,.12) }
.msl-c__svg{ display: block; width: 100%; touch-action: pan-y }
.msl-c__pied{
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .65rem 1.1rem calc(.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid #274056;
}
.msl-c__leg{ display: flex; flex-wrap: wrap; gap: .7rem }
.msl-c__leg span{
  display: flex; align-items: center; gap: .35rem;
  font-size: .74rem; color: rgba(240,237,230,.6);
}
.msl-c__leg i{ display: block; width: 14px; height: 3px; border-radius: 2px }
.msl-c__pied .msl-d__b{ margin-left: auto }