/* Site client AVIS VERT : reprend le style de avis-vert.ch (vert #7eb61c,
   titres Oswald en capitales, bandeau sombre, boutons au trait). */

:root {
  --vert: #7eb61c;
  --vert-clair: #a7d641;
  --vert-pale: #f1f7e6;
  --noir: #151515;
  --sombre: #222;
  --texte: #333;
  --texte-doux: #6b6f68;
  --fond: #fff;
  --fond-teinte: #f6f7f4;
  --bord: #e3e6df;
  --orange: #ff6900;
  --nuit: #2c3e50;
  /* zones de l'echelle Watermark */
  --z0: #3f88c5;
  --z1: #7eb61c;
  --z2: #e5b100;
  --z3: #ff6900;
  --z4: #c0392b;
  --ombre: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .05);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
}
a { color: var(--vert); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ barre */
.barre {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--bord);
}
.logo {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .02em;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.logo-avis { color: #b5338a; }
.logo-vert { color: var(--vert); margin-left: .18em; }
.nav { display: flex; gap: 4px 18px; flex-wrap: wrap; justify-content: flex-end; }
.nav a {
  font-family: Oswald, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sombre);
}
.nav a:hover, .nav a:focus-visible { color: var(--vert); }

/* ------------------------------------------------------------ bandeau */
.hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding: 120px clamp(16px, 6vw, 96px) 72px;
  color: #fff;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 6px),
    radial-gradient(ellipse at 75% 30%, #33402a 0%, #1b2117 45%, #101210 100%);
}
.hero-contenu { max-width: 760px; }
.surtitre {
  display: inline-block;
  margin: 0 0 18px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--vert);
  font-family: Oswald, sans-serif;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.surtitre strong { font-weight: 700; }
.hero h1 {
  margin: 0 0 22px;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 9vw, 104px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.intro { max-width: 560px; margin: 0 0 28px; font-size: 16px; color: rgba(255, 255, 255, .85); }
.etat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .6);
  font-family: Oswald, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pastille { width: 9px; height: 9px; border-radius: 50%; background: #999; flex: none; }
.etat.direct .pastille { background: var(--vert-clair); box-shadow: 0 0 0 4px rgba(167, 214, 65, .25); }
.etat.coupe .pastille { background: var(--orange); }

/* ------------------------------------------------------------ rubriques */
main { display: block; }
.vide { text-align: center; padding: 72px 16px; color: var(--texte-doux); }
.rubrique { padding: 72px clamp(16px, 6vw, 96px); }
.rubrique-teinte { background: var(--fond-teinte); }
.titre-rubrique { max-width: 760px; margin: 0 0 36px; }
.surtitre-sombre {
  margin: 0 0 6px;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vert);
}
.titre-rubrique h2 {
  margin: 0 0 8px;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--noir);
}
.sous-titre { margin: 0; color: var(--texte-doux); }

.grille { display: grid; gap: 20px; margin-bottom: 20px; }
.grille-sondes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.carte, .carte-sonde {
  background: #fff;
  border: 1px solid var(--bord);
  padding: 22px 24px;
  box-shadow: var(--ombre);
  min-width: 0;
}
.carte h3, .carte-sonde h3 {
  margin: 0 0 10px;
  font-family: Oswald, sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.valeur {
  margin: 0;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.1;
  color: var(--noir);
  font-variant-numeric: tabular-nums;
}
.valeur small { font-size: .45em; font-weight: 400; color: var(--texte-doux); margin-left: 4px; }
.valeur-moyenne {
  margin: 0 0 4px;
  font-family: Oswald, sans-serif;
  font-size: 22px;
  line-height: 1.25;
  color: var(--noir);
}
.note { margin: 8px 0 0; font-size: 14px; color: var(--texte-doux); }

/* carte d'une sonde Watermark */
.carte-sonde { border-top: 4px solid var(--bord); }
.carte-sonde.z0 { border-top-color: var(--z0); }
.carte-sonde.z1 { border-top-color: var(--z1); }
.carte-sonde.z2 { border-top-color: var(--z2); }
.carte-sonde.z3 { border-top-color: var(--z3); }
.carte-sonde.z4 { border-top-color: var(--z4); }
.carte-sonde .verdict { margin: 4px 0 14px; font-weight: 700; color: var(--noir); }
.carte-sonde.absente { box-shadow: none; background: var(--fond-teinte); }
.carte-sonde.absente .valeur { color: var(--texte-doux); font-size: 26px; }
.echelle { position: relative; height: 8px; display: flex; border-radius: 4px; overflow: hidden; }
.echelle span { flex: 1; }
.echelle .e0 { background: var(--z0); flex: 10; }
.echelle .e1 { background: var(--z1); flex: 20; }
.echelle .e2 { background: var(--z2); flex: 30; }
.echelle .e3 { background: var(--z3); flex: 40; }
.echelle .e4 { background: var(--z4); flex: 100; }
.echelle-cadre { position: relative; margin-top: 6px; }
.curseur {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 18px;
  margin-left: -2px;
  background: var(--noir);
  border: 1px solid #fff;
}
.graduation { position: relative; height: 18px; margin-top: 6px; font-size: 12px; color: var(--texte-doux); }
.graduation span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.graduation span:first-child { transform: none; }
.graduation span:last-child { transform: translateX(-100%); }

/* jauge de batterie */
.jauge { height: 10px; margin-top: 10px; background: var(--bord); overflow: hidden; }
.jauge-remplie { height: 100%; width: 0; background: var(--vert); transition: width .4s; }
.jauge-remplie.basse { background: var(--orange); }
.jauge-remplie.indicatif {
  background: repeating-linear-gradient(-45deg, var(--vert) 0 6px, var(--vert-clair) 6px 12px);
}

.explication { max-width: 760px; margin-top: 8px; }
.explication summary {
  cursor: pointer;
  font-family: Oswald, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--vert);
}
.echelle-legende { list-style: none; padding: 0; margin: 12px 0 0; }
.echelle-legende li { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: 15px; }
.puce { width: 14px; height: 14px; flex: none; }
.puce.z0 { background: var(--z0); } .puce.z1 { background: var(--z1); } .puce.z2 { background: var(--z2); }
.puce.z3 { background: var(--z3); } .puce.z4 { background: var(--z4); }

/* listes de valeurs */
.liste { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 12px 0 0; font-size: 15px; }
.liste dt { color: var(--texte-doux); }
.liste dd { margin: 0; color: var(--noir); min-width: 0; overflow-wrap: anywhere; }

/* GPS */
.gps { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.gps-carte {
  height: 380px;
  background: var(--bord);
  border: 1px solid var(--bord);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gps-carte.leaflet-container { display: block; }
.gps-liste { margin: 0; background: #fff; border: 1px solid var(--bord); padding: 20px; }

/* graphiques et tableau */
.graphique { margin: 0 0 28px; }
.graphique figcaption {
  font-family: Oswald, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--texte-doux);
  margin-bottom: 6px;
}
.graphique svg { display: block; width: 100%; height: 260px; background: #fff; border: 1px solid var(--bord); }
.graphique svg.graph-bas { height: 160px; }
.graphique svg text { font-family: "Open Sans", sans-serif; font-size: 11px; fill: var(--texte-doux); }
.legende { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 16px; height: 3px; display: inline-block; }

.tableau-cadre { overflow-x: auto; border: 1px solid var(--bord); }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tableau th {
  text-align: left;
  font-family: Oswald, sans-serif;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--texte-doux);
  background: var(--fond-teinte);
  padding: 10px 12px;
  white-space: nowrap;
}
.tableau td { padding: 8px 12px; border-top: 1px solid var(--bord); white-space: nowrap; }
.centre { text-align: center; }
.bouton {
  margin-top: 18px;
  padding: 12px 26px;
  background: transparent;
  border: 1px solid var(--noir);
  color: var(--noir);
  font-family: Oswald, sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.bouton:hover, .bouton:focus-visible { background: var(--vert); border-color: var(--vert); color: #fff; }

/* pied */
.pied { background: var(--noir); color: rgba(255, 255, 255, .75); padding: 36px clamp(16px, 6vw, 96px); font-size: 14px; }
.pied p { margin: 0 0 4px; }
.pied .logo-avis, .pied .logo-vert { font-family: Oswald, sans-serif; font-weight: 700; }
.pied .note { color: rgba(255, 255, 255, .5); }

/* ------------------------------------------------------------ telephone */
@media (max-width: 900px) {
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-sondes { grid-template-columns: minmax(0, 1fr); }
  .gps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .barre { height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
  .nav { gap: 2px 12px; }
  .nav a { font-size: 12px; }
  .hero { padding-top: 140px; min-height: 0; }
  .grille-2, .grille-4 { grid-template-columns: minmax(0, 1fr); }
  .rubrique { padding-top: 56px; padding-bottom: 56px; }
  .valeur { font-size: 38px; }
  .gps-carte { height: 300px; }
}