/*
  compact-mobile.css, Mon Eau Nette
  ----------------------------------
  Rend l'écran au visiteur sur petit écran. Le haut (menu + « Pour vous » +
  « Reprendre » + « Développer ») empilait 4 barres et mangeait la moitié de
  l'écran avant le premier mot utile. Ici on RESSERRE, sans rien retirer :
  puces plus basses, marges réduites, bandeaux compactés. Aucun JS touché.

  Ne s'active qu'en dessous de 640px (mobile). Sur ordinateur : rien ne change.
*/
@media (max-width: 640px){

  /*, Barre de navigation (les puces Mon robinet, Alertes, etc.), */
  .menu, nav.menu{
    padding-top:6px !important;
    padding-bottom:6px !important;
    gap:5px !important;
    row-gap:5px !important;
  }
  .menu a, nav.menu a, .menu button, .menu .puce, .menu [class*="chip"]{
    padding:6px 11px !important;
    font-size:12.5px !important;
    line-height:1.15 !important;
  }

  /*, Bandeau « Pour vous : Santé / Environnement », */
  .men-pour-vous{
    padding-top:5px !important;
    padding-bottom:5px !important;
    font-size:12.5px !important;
  }

  /*, Barre bleue « Reprendre où vous en étiez », */
  .men-reprise{
    padding-top:5px !important;
    padding-bottom:5px !important;
    font-size:12px !important;
  }

  /*, Barre « Développer · commune · pages explorées », */
  .men-tableau-bord, .men-raccourcis{
    padding-top:5px !important;
    padding-bottom:5px !important;
    font-size:12px !important;
  }

  /*, Les gros titres de section : un cran plus bas sur mobile, */
  h1{ font-size:1.5rem !important; line-height:1.2 !important; }

  /*, La numérotation ronde des étapes : garantir l'espace après le chiffre,
       même si un style mobile l'avait écrasé (« 1Votre commune » → « 1  Votre »), */
  h2 .num{ margin-right:10px !important; flex:none !important; }
}

/* ============================================================
   REVISITE DE LA FICHE COMMUNE (popup + résultats) sur mobile
   Objectif : rendre chaque paramètre lisible d'un coup d'œil.
   Le nom + la valeur (verte/rouge) passent devant ; le seuil et
   la date deviennent une ligne secondaire, plus petite et grise.
   ============================================================ */
@media (max-width: 640px){

  /* Chaque paramètre : nom à gauche, bloc valeur à droite, qui
     peut passer à la ligne proprement au lieu de déborder. */
  .param{
    align-items:flex-start !important;
    padding:9px 0 !important;
    font-size:13.5px !important;
  }
  /* Le nom du paramètre garde sa place, ne se fait pas écraser. */
  .param > span:first-child{
    flex:1 1 55% !important;
    min-width:9em !important;
    font-weight:600 !important;
  }
  /* Le bloc valeur+seuil s'aligne à droite et s'empile. */
  .param > span:last-child{
    flex:1 1 auto !important;
    text-align:right !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:1px !important;
  }
  /* La valeur (verte ou rouge) est mise en avant. */
  .param .v-ok, .param .v-ko{ font-size:15px !important; }
  /* Le seuil + la date : discrets, sur leur propre ligne. */
  .param > span:last-child > span[style*="gris"]{
    font-size:11px !important;
    line-height:1.3 !important;
  }

  /* Cartouche réseau un peu plus aéré, titre plus lisible. */
  .reseau{ padding:12px 12px !important; }
  .reseau h3{ font-size:15px !important; letter-spacing:.3px !important; }

  /* Conclusion officielle : confortable à lire. */
  .conclusion{ font-size:13px !important; line-height:1.55 !important; padding:12px 14px !important; }
}

/* ============================================================
   BOUTON LANGUE 🌍 (traduction.js), visible et bien posé
   C'est le SEUL accès à la traduction du site : on ne le cache
   pas, on s'assure qu'il ne soit plus coupé au bord de l'écran.
   Position nette en bas à gauche, au-dessus du bord, toujours
   entièrement dans le cadre.
   ============================================================ */
#tr-btn{
  left:16px !important;
  bottom:16px !important;
  width:48px !important;
  height:48px !important;
  z-index:9999 !important;
  /* petit halo pour qu'on le repère comme "langue" */
  box-shadow:0 6px 18px rgba(0,0,0,.45), 0 0 0 3px rgba(79,179,232,.18) !important;
}
/* Le panneau de choix de langue s'ouvre bien dans l'écran, pas hors-champ. */
#tr-panel{
  left:16px !important;
  bottom:74px !important;
  max-width:calc(100vw - 32px) !important;
}
/* Sur mobile, on décale légèrement pour ne pas gêner le pouce sur le bord. */
@media (max-width: 640px){
  #tr-btn{ left:12px !important; bottom:12px !important; }
  #tr-panel{ left:12px !important; bottom:68px !important; }
}

/* ============================================================
   RANGEMENT DES BOUTONS FLOTTANTS, coin bas-droite
   Problème : partage 📤, alerte ⚠️, agrandir A+ et aide ?
   se posaient tous au même endroit et se chevauchaient,
   coupés au bord. Ici on les ÉCHELONNE en une colonne nette,
   chacun à sa hauteur, aucun par-dessus l'autre. Aucun JS touché.
   Ordre de bas en haut : partage, alerte, A+, aide.
   ============================================================ */

/* Le partage 📤 : tout en bas, ancré au coin. */
#ptg-btn{ right:16px !important; bottom:16px !important; z-index:9996 !important; }
#ptg-bulle{ right:16px !important; bottom:72px !important; }

/* L'alerte ⚠️ rouge (alertes-config.js) : un cran au-dessus du partage. */
[title*="ARS"], [title*="ARS de votre région"]{
  right:16px !important;
  bottom:74px !important;
  left:auto !important;
  z-index:9997 !important;
}

/* Le bloc "feu" s'il existe : encore au-dessus. */
#feu-tricolore{ right:16px !important; bottom:132px !important; }

/* Filet de sécurité : tout bouton rond flottant collé au bord droit
   reste dans l'écran (jamais coupé), taille homogène. */
[id$="-btn"][style*="fixed"], .flottant-droite{
  max-width:52px;
}

/* Sur mobile : on resserre l'échelonnement pour ne pas dépasser en hauteur. */
@media (max-width: 640px){
  #ptg-btn{ right:12px !important; bottom:12px !important; }
  #ptg-bulle{ right:12px !important; bottom:66px !important; }
  [title*="ARS"]{ right:12px !important; bottom:68px !important; }
  #feu-tricolore{ right:12px !important; bottom:122px !important; }
}

/* ============================================================
   CASE DE RECHERCHE en 2 COLONNES « Quelle eau coule… ? »
   Avant : le champ s'étirait à moitié puis laissait un grand
   vide blanc à droite, avec les boutons perdus au loin.
   Maintenant : une grille équilibrée, champ à gauche (large),
   actions à droite (Voir mon eau + Ma position empilés). Plus
   de vide, plus joli, plus accrocheur. Centré et borné.
   ============================================================ */
#robinet .recherche{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap:14px !important;
  align-items:start !important;
  max-width:820px !important;
  margin:0 auto !important;
  background:linear-gradient(135deg, rgba(99,179,237,.07), rgba(212,169,56,.05)) !important;
  border:1px solid rgba(99,179,237,.22) !important;
  border-radius:16px !important;
  padding:18px 20px !important;
  box-shadow:0 6px 22px rgba(10,27,42,.06) !important;
}

/* Colonne gauche : le champ + ses infos, prend toute sa colonne. */
#robinet .recherche .cc-bloc{
  flex:unset !important;
  min-width:0 !important;
  margin-bottom:0 !important;
  grid-column:1 !important;
}
#robinet .recherche .cc-bloc > input{
  font-size:16px !important;
  padding:10px 40px 10px 16px !important;
  border:1.5px solid #A9C6DE !important;
  border-radius:11px !important;
}

/* Colonne droite : les deux boutons d'action, empilés et alignés. */
#robinet .recherche > .btn-eau{
  grid-column:2 !important;
  align-self:start !important;
  white-space:nowrap !important;
  padding:14px 22px !important;
  border-radius:11px !important;
  font-weight:700 !important;
}
/* « Voir mon eau » : bouton principal, dégradé bleu accrocheur. */
#robinet .recherche > .btn-eau:first-of-type{
  background:linear-gradient(135deg,#1D7FBF,#4FB3E8) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 4px 12px rgba(29,127,191,.3) !important;
}
#robinet .recherche > .btn-eau:first-of-type:hover{ filter:brightness(1.07) !important; }

/* Le titre au-dessus, bien centré pour accrocher l'œil. */
#robinet > h2, #robinet h2:first-child{
  text-align:center !important;
}

/*, Sur mobile : on repasse en une seule colonne, tout empilé, centré., */
@media (max-width: 680px){
  #robinet .recherche{
    grid-template-columns: 1fr !important;
    padding:16px 14px !important;
  }
  #robinet .recherche .cc-bloc{ grid-column:1 !important; }
  #robinet .recherche > .btn-eau{
    grid-column:1 !important;
    width:100% !important;
  }
}

/* ============================================================
   GAIN D'ESPACE RÉEL EN HAUT (tous écrans), demande "on ne gagne
   pas de place". On réduit la hauteur de chaque barre empilée et
   on démarre le tableau de bord REPLIÉ (les stats s'ouvrent au clic).
   ============================================================ */

/* Barres plus fines : on récupère quelques pixels sur chacune. */
.menu{ padding-top:6px !important; padding-bottom:6px !important; }
.men-pour-vous{ padding-top:4px !important; padding-bottom:4px !important; font-size:12.5px !important; }
.men-reprise{ padding-top:4px !important; padding-bottom:4px !important; font-size:12px !important; }
.men-raccourcis{ padding-top:4px !important; padding-bottom:4px !important; }
.men-tableau-bord{ padding-top:4px !important; padding-bottom:4px !important; }

/* Le tableau de bord démarre REPLIÉ : seule la ligne-titre reste,
   les stats détaillées s'affichent au clic sur "Développer".
   → gain d'une ligne entière au chargement. */
.men-tableau-bord:not(.men-bord-ouvert) .men-bord-resume{
  display:none !important;
}
.men-tableau-bord:not(.men-bord-ouvert){
  padding-bottom:5px !important;
}

/* L'entête « Mon eau, ma commune » : moins d'air vertical. */
header{ padding-top:14px !important; padding-bottom:14px !important; }
@media (max-width:640px){
  header{ padding-top:10px !important; padding-bottom:10px !important; }
}

/* ============================================================
   RÈGLE ABSOLUE : OPTIMISATION DE L'ESPACE (tous écrans)
   Chaque ligne d'écran doit servir. On réduit les espacements
   les plus coûteux sans nuire à la lisibilité.
   ============================================================ */

/* L'entête « Mon eau, ma commune » : 34px → 16px de padding vertical.
   C'était le plus gros poste de hauteur perdue. */
header{ padding-top:16px !important; padding-bottom:16px !important; }

/* Les cartes de contenu : 22px → 16px, un peu moins d'air interne. */
.carte{ padding:16px !important; }

/* Marge entre cartes resserrée. */
.carte + .carte, .carte{ margin-bottom:12px !important; }

/* Les titres de section : interligne resserré, pas d'excès vertical. */
h1{ line-height:1.15 !important; margin-bottom:8px !important; }
h2{ line-height:1.2 !important; margin-bottom:6px !important; }

/* Paragraphes pédagogiques : interligne lisible mais compact. */
.pedagogie, .source{ margin-top:4px !important; margin-bottom:4px !important; }

/* Sur mobile, on pousse un cran plus loin. */
@media (max-width:640px){
  header{ padding-top:11px !important; padding-bottom:11px !important; }
  .carte{ padding:13px !important; }
  h1{ font-size:1.45rem !important; }
}

/* ============================================================
   OPTIMISATION : bloc « 1 · Votre commune » plus compact
   Le titre + le paragraphe explicatif prenaient 3 lignes.
   On resserre : titre compact, explication en petit juste dessous,
   champ de saisie rapproché. Gain net sans perdre l'information.
   ============================================================ */
.carte h2 .num{ margin-right:8px !important; }
/* Le titre de section : compact, pas d'excès. */
.carte h2{ font-size:1.15rem !important; margin-bottom:4px !important; line-height:1.15 !important; }
/* Le paragraphe explicatif juste sous un titre numéroté : plus petit,
   interligne serré, marge minimale, il informe sans occuper 2 lignes d'air. */
.carte h2 + .pedagogie{
  font-size:13px !important;
  line-height:1.4 !important;
  margin-top:2px !important;
  margin-bottom:8px !important;
}
/* Le champ de saisie remonte, collé à son explication. */
.carte h2 + .pedagogie + input,
.carte .pedagogie + input{ margin-top:2px !important; }

/* ============================================================
   RÈGLE ABSOLUE, passe d'optimisation #2 : marges verticales
   On réduit les marges les plus grosses (14-20px → 8-10px) qui
   ajoutaient de l'air entre les éléments, sans toucher aux
   hauteurs fonctionnelles (listes déroulantes, zones de chargement).
   ============================================================ */

/* Marges entre blocs de contenu : resserrées. */
.carte p, .carte > div{ margin-top:8px !important; }
.pedagogie{ margin-top:6px !important; margin-bottom:6px !important; }

/* Les encadrés pédagogiques colorés (fond bleu/jaune) : padding réduit. */
.pedagogie[style*="background"]{ padding:10px 13px !important; margin:8px 0 !important; }

/* Les listes et tableaux : interligne compact. */
.carte ul, .carte ol{ margin:6px 0 6px 18px !important; }
.carte li{ margin-bottom:3px !important; }
.carte table td, .carte table th{ padding:6px 8px !important; }

/* Section suivante : moins d'écart entre deux cartes. */
.carte{ margin-bottom:10px !important; }

/* Titres h3/h4 internes : compacts. */
.carte h3, .carte h4{ margin-top:8px !important; margin-bottom:4px !important; }

/* Le pied de page : ramené à l'essentiel vertical. */
footer{ padding-top:14px !important; padding-bottom:14px !important; }

/* ============================================================
   COMPOSANT « ⓘ » CLIQUABLE, pour gagner des lignes partout
   Texte court visible + ⓘ qui déplie le détail au clic.
   Généralise le mécanisme INFO+ déjà présent sur le site.
   ============================================================ */
.info-plus{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--eau,#1D7FBF); color:#fff;
  font-size:11px; font-weight:700; font-style:normal;
  cursor:pointer; margin-left:5px; vertical-align:middle;
  font-family:'Poppins',sans-serif; flex:none;
  transition:background .15s;
}
.info-plus:hover{ background:var(--or,#C9A227); color:var(--abysse,#0A1B2A); }
.info-plus:focus-visible{ outline:2px solid var(--or,#C9A227); outline-offset:2px; }