/* ==========================================================================
   Géobéo — feuille de style publique (vitrine, inscription, connexion)
   Polices auto-hébergées (app/static/fonts/), aucune requête vers
   fonts.googleapis.com. Palette en variables CSS (ne pas coder les couleurs
   en dur dans les templates).
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/static/fonts/fraunces-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/static/fonts/inter-variable.woff2") format("woff2");
}

:root {
  /* Palette de marque */
  --vert-foret: #12201b;
  --fond-sombre: #0e1512;
  --vert-sauge: #4d7a5f;
  --vert-sauge-clair: #8fb89f;
  --vert-ligne-sombre: #5c7267;   /* décoratif sur fond clair */
  --vert-ligne-claire: #8a9990;   /* décoratif sur fond sombre */
  --or: #e3c15c;
  --terracotta: #c9683f;
  --fond-creme: #f6f4ee;

  /* Rôles sémantiques (dérivés de la palette ci-dessus) */
  --couleur-texte: var(--vert-foret);
  --couleur-texte-sur-sombre: var(--vert-sauge-clair);
  --couleur-fond: var(--fond-creme);
  --couleur-accent: var(--vert-sauge);
  --couleur-cta: var(--terracotta);
  --couleur-cta-texte: var(--fond-creme);

  --police-titres: "Fraunces", Georgia, serif;
  --police-corps: "Inter", system-ui, sans-serif;

  --largeur-contenu: 1120px;
  --rayon: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--police-corps);
  color: var(--couleur-texte);
  background: var(--couleur-fond);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--police-titres);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.2rem, 4vw + 1rem, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; max-width: 62ch; }

a { color: var(--couleur-accent); }

.conteneur {
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.bouton {
  display: inline-block;
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75em 1.6em;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton-cta {
  background: var(--couleur-cta);
  color: var(--couleur-cta-texte);
  box-shadow: 0 6px 20px -8px rgba(201, 104, 63, 0.55);
}
.bouton-cta:hover { box-shadow: 0 10px 24px -8px rgba(201, 104, 63, 0.65); }
.bouton-fantome {
  background: transparent;
  color: var(--vert-foret);
  border: 1.5px solid var(--vert-ligne-sombre);
}
.bouton-fantome-sombre {
  background: transparent;
  color: var(--fond-creme);
  border: 1.5px solid var(--vert-ligne-claire);
}
/* Variante compacte -- action secondaire dans une ligne d'en-tête (ex.
   bouton-export-pdf à côté d'un panneau-label), le pill CTA pleine
   taille (.bouton seul) est trop lourd visuellement à cet endroit. */
.bouton-petit {
  padding: 0.35em 0.9em;
  font-size: 0.78rem;
}
.bouton-petit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* ---------------------------------------------------------------------- */
/* En-tête                                                                 */
/* ---------------------------------------------------------------------- */
.entete {
  position: relative;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(18, 32, 27, 0.08);
}
.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.entete-logo { height: 34px; width: auto; }
.entete-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-weight: 500;
  font-size: 0.95rem;
}
.entete-nav a:not(.bouton) {
  color: var(--vert-foret);
  text-decoration: none;
}
.entete-nav a:not(.bouton):hover { color: var(--couleur-accent); }

.entete-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--vert-foret);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--fond-sombre);
  color: var(--couleur-texte-sur-sombre);
  overflow: hidden;
  padding: 5rem 0 6rem;
}
.hero .conteneur { position: relative; }
.hero-contenu { max-width: 640px; }
.hero h1 { color: var(--fond-creme); }
.hero p.hero-sous-titre {
  font-size: 1.15rem;
  color: var(--couleur-texte-sur-sombre);
  max-width: 48ch;
}
.hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------------- */
/* Grille des cartes (catalogue dynamique)                                 */
/* ---------------------------------------------------------------------- */
.section-cartes {
  padding: 4.5rem 0;
  background: color-mix(in srgb, var(--couleur-accent) 6%, var(--couleur-fond));
}
.cartes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.carte-teaser {
  background: var(--fond-creme);
  border: 1px solid rgba(18, 32, 27, 0.09);
  border-radius: var(--rayon);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.carte-teaser h3 { margin-bottom: 0; }
.carte-teaser p { font-size: 0.92rem; color: var(--vert-foret); opacity: 0.8; margin-bottom: 0; flex-grow: 1; }
.badge-palier {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3em 0.75em;
  border-radius: 999px;
}
.badge-palier.gratuit { background: color-mix(in srgb, var(--vert-sauge) 18%, transparent); color: var(--vert-sauge); }
.badge-palier.payant { background: color-mix(in srgb, var(--or) 25%, transparent); color: #8a6a1f; }
.cartes-grille-vide {
  padding: 2rem;
  text-align: center;
  color: var(--vert-foret);
  opacity: 0.7;
}

/* ---------------------------------------------------------------------- */
/* Les prestations — 4 étapes, chacune reperee par une puce de couleur     */
/* (rotation sauge/or/terracotta de la marque), sans tracé qui les relie.  */
/* ---------------------------------------------------------------------- */
.tracee { padding: 5rem 0; }
.tracee-intro { max-width: 56ch; opacity: 0.85; }
.tracee-etapes {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  padding-left: 4.5rem;
  margin-top: 3rem;
}
.tracee-etape { position: relative; max-width: 56ch; }
.tracee-etape-puce {
  position: absolute;
  left: -4.5rem;
  top: 0.15em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid;
}
.tracee-puce-1, .tracee-puce-4 { border-color: var(--vert-sauge); }
.tracee-puce-2 { border-color: var(--or); }
.tracee-puce-3 { border-color: var(--terracotta); }

/* ---------------------------------------------------------------------- */
/* Terradata — étude de cas                                                */
/* ---------------------------------------------------------------------- */
.terradata { padding: 5rem 0; background: color-mix(in srgb, var(--couleur-accent) 6%, var(--couleur-fond)); }
.terradata-grille {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.terradata-apercu img {
  border-radius: var(--rayon);
  border: 1.5px solid rgba(18, 32, 27, 0.12);
  box-shadow: 0 20px 50px -30px rgba(18, 32, 27, 0.4);
}

/* ---------------------------------------------------------------------- */
/* Teaser à propos (accueil) — extrait court, le texte complet vit sur     */
/* /a-propos (_bio_jules.html), jamais dupliqué ici.                      */
/* ---------------------------------------------------------------------- */
.section-a-propos-teaser { padding: 5rem 0; text-align: center; }
.section-a-propos-teaser p { max-width: 56ch; margin-left: auto; margin-right: auto; }
.lien-en-savoir-plus { font-weight: 600; text-decoration: none; }

/* ---------------------------------------------------------------------- */
/* À propos                                                                */
/* ---------------------------------------------------------------------- */
.section-a-propos { padding: 4.5rem 0; }

/* Grid plutôt que flex : deux colonnes proportionnelles explicites,
   robuste face aux pièges de dimensionnement d'un <picture> imbriqué
   (cause du bug précédent — <picture> n'héritait d'aucune taille, seul
   son <img> enfant en avait une). */
.bio {
  display: grid;
  grid-template-columns: minmax(160px, 38%) 1fr;
  gap: 48px;
  align-items: start;
}

.bio-media {
  position: relative;
  aspect-ratio: 1 / 1;
}
.bio-media picture { display: block; width: 100%; height: 100%; }

/* Filigrane décoratif — le même tracé que le hero de l'accueil, ici en
   halo derrière le portrait. Un seul geste, pas plusieurs effets
   superposés : ce SVG porte déjà le sauge/or/terracotta de la marque. */
.bio-filigrane {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 175%;
  height: auto;
  max-width: none;
  opacity: 0.22;
  /* width fixe + height:auto : le tracé (560x132, un rectangle large et
     plat) garde ses proportions natives — ne pas utiliser inset ici, ça
     étirerait le SVG de façon non uniforme dans le carré de .bio-media. */
  transform: translate(-50%, -50%) rotate(-6deg);
  pointer-events: none;
  z-index: 0;
}

.bio-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Radius asymétrique "organique" — écho volontaire aux courbes du tracé
     du logo, pas un simple radius uniforme discret. */
  border-radius: 63% 37% 54% 46% / 43% 65% 35% 57%;
  box-shadow:
    0 0 0 6px var(--fond-creme),
    0 0 0 9px var(--vert-sauge),
    0 20px 40px -18px rgba(18, 32, 27, 0.45);
}

.bio-texte { max-width: 680px; }
.bio-texte h1 { margin-bottom: 0.15em; }
.bio-titre {
  display: inline-block;
  font-family: var(--police-corps);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--vert-sauge);
  margin-bottom: 0.9em;
}
.bio-accroche {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--vert-foret);
}
.bio-formation {
  font-size: 0.85rem;
  opacity: 0.75;
  border-top: 1px solid rgba(18, 32, 27, 0.12);
  padding-top: 1.2rem;
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------- */
/* Mentions légales                                                        */
/* ---------------------------------------------------------------------- */
.section-mentions-legales { padding: 4.5rem 0; }
.texte-legal { max-width: 70ch; }
.texte-legal h2 { margin-top: 2.25rem; font-size: 1.3rem; }
.texte-legal h2:first-of-type { margin-top: 1.5rem; }

/* ---------------------------------------------------------------------- */
/* CTA final                                                               */
/* ---------------------------------------------------------------------- */
.cta-final {
  background: var(--vert-foret);
  color: var(--fond-creme);
  padding: 4rem 0;
  text-align: center;
}
.cta-final h2 { color: var(--fond-creme); }
.cta-final .conteneur { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }

/* ---------------------------------------------------------------------- */
/* Pied de page                                                            */
/* ---------------------------------------------------------------------- */
.pied {
  background: var(--fond-sombre);
  color: var(--vert-ligne-claire);
  padding: 3rem 0 2rem;
  font-size: 0.9rem;
}
.pied .conteneur {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.pied-logo { height: 28px; opacity: 0.9; }
.pied-liens { display: flex; gap: 1.5rem; }
.pied-liens a { color: var(--vert-ligne-claire); text-decoration: none; }
.pied-liens a:hover { color: var(--fond-creme); }

/* ---------------------------------------------------------------------- */
/* Bandeau cookies — position fixe, jamais dans le flux du document (ne     */
/* réserve aucun espace, ne pousse jamais le contenu ni le footer) donc ne  */
/* bloque jamais la navigation. Les deux boutons Accepter/Refuser partagent */
/* EXACTEMENT la même classe .bouton-cookies (même taille, même poids       */
/* visuel, aucun accent qui mettrait l'un en avant) — c'est une exigence    */
/* volontaire, pas un oubli de style : ne pas leur donner un traitement     */
/* différent (ex. .bouton-cta sur l'un des deux).                          */
/* ---------------------------------------------------------------------- */
.bandeau-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--vert-foret);
  color: var(--fond-creme);
  padding: 1.25rem 0;
  box-shadow: 0 -12px 30px -18px rgba(18, 32, 27, 0.5);
}
.bandeau-cookies[hidden] { display: none; }
.bandeau-cookies-interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.bandeau-cookies-texte {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9rem;
  color: var(--fond-creme);
  opacity: 0.92;
}
.bandeau-cookies-actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
.bouton-cookies {
  background: transparent;
  color: var(--fond-creme);
  border: 1.5px solid var(--vert-ligne-claire);
  min-width: 130px;
  text-align: center;
}
.bouton-cookies:hover { background: color-mix(in srgb, var(--fond-creme) 12%, transparent); }

/* ---------------------------------------------------------------------- */
/* Pages formulaire (inscription / connexion)                              */
/* ---------------------------------------------------------------------- */
.page-formulaire {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-formulaire main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}
.carte-formulaire {
  width: 100%;
  max-width: 420px;
  background: var(--fond-creme);
  border: 1px solid rgba(18, 32, 27, 0.09);
  border-radius: var(--rayon);
  padding: 2.5rem;
  box-shadow: 0 20px 50px -30px rgba(18, 32, 27, 0.4);
}
.carte-formulaire .entete-logo { margin: 0 auto 1.5rem; }
.carte-formulaire h1 { font-size: 1.6rem; text-align: center; }
.carte-formulaire p.intro { text-align: center; color: var(--vert-foret); opacity: 0.75; font-size: 0.92rem; }
.champ { margin-bottom: 1.1rem; }
.champ label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35em;
}
.champ input {
  width: 100%;
  padding: 0.65em 0.8em;
  border: 1.5px solid rgba(18, 32, 27, 0.18);
  border-radius: 6px;
  font-family: var(--police-corps);
  font-size: 0.95rem;
  background: #fff;
}
.champ input:focus {
  outline: none;
  border-color: var(--couleur-accent);
}
.bouton-large { width: 100%; text-align: center; margin-top: 0.5rem; }
.message-erreur {
  background: color-mix(in srgb, var(--terracotta) 12%, transparent);
  color: #8a3d20;
  border-radius: 6px;
  padding: 0.75em 1em;
  font-size: 0.88rem;
  margin-top: 1rem;
}
.message-succes {
  background: color-mix(in srgb, var(--vert-sauge) 15%, transparent);
  color: var(--vert-sauge);
  border-radius: 6px;
  padding: 0.75em 1em;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}
.lien-secondaire { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; }

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */
/* En dessous de 900px : rail de puces resserré, colonne unique. */
@media (max-width: 900px) {
  .tracee-etapes { padding-left: 2.5rem; gap: 2.5rem; }
  .tracee-etape-puce { left: -2.5rem; }
  .terradata-grille { grid-template-columns: 1fr; }
  .terradata-apercu { order: -1; }
}

@media (max-width: 768px) {
  .entete-nav { gap: 1rem; font-size: 0.85rem; }
  .entete-nav .bouton { padding: 0.6em 1em; }
  .hero { padding: 3.5rem 0 4rem; }
  .pied .conteneur { flex-direction: column; text-align: center; }
  .bio { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.75rem; }
  .bio-media { width: 200px; max-width: 60vw; }
  .bio-texte { max-width: 100%; }
  .bio p { margin-left: auto; margin-right: auto; }
  .bandeau-cookies-interieur { flex-direction: column; align-items: stretch; text-align: center; }
  .bandeau-cookies-actions { justify-content: center; }
  .bouton-cookies { flex: 1 1 0; }
}

@media (max-width: 520px) {
  .entete-hamburger { display: flex; }
  .entete-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--fond-creme);
    border-bottom: 1px solid rgba(18, 32, 27, 0.08);
    box-shadow: 0 12px 30px -18px rgba(18, 32, 27, 0.35);
    padding: 0.5rem 1.5rem 1.5rem;
    z-index: 10;
  }
  .entete-nav.ouvert { display: flex; }
  .entete-nav a:not(.bouton) {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(18, 32, 27, 0.08);
  }
  .entete-nav a.bouton { margin-top: 1rem; text-align: center; }
  .carte-formulaire { padding: 1.75rem; }
}

/* ---------------------------------------------------------------------- */
/* Visualisation cartographique (MapLibre) — panneau latéral partagé      */
/* par les 16 cartes (structure inspirée de carte-generique.html côté      */
/* terradata-france, habillage crème/sauge/or/terracotta du site)         */
/* ---------------------------------------------------------------------- */
.section-carte-visu { padding: 2rem 0 3rem; }
.conteneur-large { max-width: 1400px; }
.lien-retour { display: inline-block; margin-bottom: 1rem; font-size: 0.9rem; }

.carte-visu-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.carte-panneau {
  flex: 0 0 300px;
  background: #fff;
  border: 1.5px solid rgba(18, 32, 27, 0.12);
  border-radius: var(--rayon);
  padding: 1.5rem;
  box-shadow: 0 12px 30px -22px rgba(18, 32, 27, 0.35);
}
.carte-panneau h1 { font-size: 1.5rem; margin-bottom: 0.3em; }
.carte-panneau-description { font-size: 0.9rem; opacity: 0.8; margin-bottom: 1.25rem; }

.panneau-recherche { position: relative; margin-bottom: 1.5rem; }
.panneau-recherche input {
  width: 100%;
  padding: 0.65em 0.8em 0.65em 2.2em;
  border: 1.5px solid rgba(18, 32, 27, 0.18);
  border-radius: 6px;
  font-family: var(--police-corps);
  font-size: 0.9rem;
  background: var(--fond-creme);
}
.panneau-recherche input:focus { outline: none; border-color: var(--couleur-accent); }
.panneau-recherche .recherche-icone {
  position: absolute;
  left: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}
.recherche-resultats {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(18, 32, 27, 0.15);
  border-radius: 6px;
  box-shadow: 0 12px 30px -18px rgba(18, 32, 27, 0.4);
  max-height: 280px;
  overflow-y: auto;
  z-index: 5;
}
.recherche-resultats.visible { display: block; }
.recherche-section-titre {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--vert-sauge);
  padding: 0.5em 0.8em 0.2em;
}
.recherche-item { padding: 0.5em 0.8em; font-size: 0.88rem; cursor: pointer; }
.recherche-item:hover { background: var(--fond-creme); }
.recherche-vide { padding: 0.7em 0.8em; font-size: 0.85rem; opacity: 0.6; }

.selection-chips { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 1rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.3em 0.3em 0.7em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--couleur-accent) 12%, var(--fond-creme));
  font-size: 0.82rem;
}
.chip-retrait {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--vert-foret);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.chip-retrait:hover { background: color-mix(in srgb, var(--couleur-accent) 25%, transparent); }
.selection-vider {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--vert-foret);
  opacity: 0.7;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.3em 0.2em;
}
.selection-vider:hover { opacity: 1; }

.panneau-section { margin-bottom: 1.5rem; }
.panneau-section:last-child { margin-bottom: 0; }
.panneau-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--vert-sauge);
  margin-bottom: 0.6em;
}
.panneau-entete-rapport {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
.panneau-entete-rapport .panneau-label { margin-bottom: 0; }
.stat-ligne {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 0.3em 0;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(18, 32, 27, 0.08);
}
.stat-ligne:last-child { border-bottom: none; }
.stat-ligne span:last-child { font-weight: 600; }

/* Rapport complet (plan-ameliorations-dashboard.md §D) : un vrai vide
   apparaissait entre la carte et le rapport une fois l'aside devenue plus
   haute que la carte (beaucoup de contrôles accumulés) -- .carte-visu-
   conteneur et .carte-panneau étaient jusqu'ici des enfants flex DIRECTS
   de .carte-visu-layout, dont la hauteur de ligne s'aligne sur le plus
   grand des deux (l'aside) ; le rapport, placé après cette ligne entière,
   se retrouvait donc très bas, loin sous la carte. carte-colonne-droite
   regroupe carte + rapport dans leur PROPRE colonne verticale, indépendante
   de la hauteur de l'aside -- le rapport suit directement la carte, plus
   de vide, confirmé sur capture d'écran réelle avant correction. flex/
   min-width déplacés ici depuis .carte-visu-conteneur (c'est maintenant
   ce wrapper qui porte le partage de largeur avec l'aside dans la ligne). */
.carte-colonne-droite {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.carte-visu-conteneur {
  position: relative;
  height: 75vh;
  min-height: 420px;
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1.5px solid rgba(18, 32, 27, 0.12);
}
#carte { position: absolute; inset: 0; }
.carte-erreur {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: var(--fond-creme);
  color: #8a3d20;
}
.legende-item { display: flex; align-items: center; gap: 0.5em; margin: 0.3em 0; font-size: 0.88rem; }
.legende-pastille { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

/* Sélecteur d'échelle géographique — groupe de boutons façon
   bouton-secondaire/badge (admin.css), pas un <select> natif : le panneau
   latéral n'utilise nulle part le style du navigateur, et un <select>
   détonnerait à côté de la recherche/légende personnalisées. */
.echelle-onglets { display: flex; flex-wrap: wrap; gap: 0.4em; }
.echelle-bouton {
  font-family: var(--police-corps);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.4em 0.85em;
  border-radius: 999px;
  border: 1.5px solid var(--vert-sauge);
  background: transparent;
  color: var(--vert-foret);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.echelle-bouton:hover { background: color-mix(in srgb, var(--vert-sauge) 10%, transparent); }
.echelle-bouton.actif {
  background: var(--vert-sauge);
  border-color: var(--vert-sauge);
  color: var(--fond-creme);
}
.echelle-bouton.actif:hover { background: var(--vert-sauge); }
.popup-carte { font-family: var(--police-corps); font-size: 0.88rem; min-width: 160px; }
.popup-nom { font-weight: 700; margin-bottom: 0.35em; }
.popup-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.2em 0.7em;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.4em;
}
.popup-ligne { display: flex; justify-content: space-between; gap: 1em; padding: 0.15em 0; }
.popup-absence { color: var(--vert-foret); opacity: 0.7; font-size: 0.82rem; }
.maplibregl-popup-content { border-radius: 8px; }

/* Popup détaillée commune/IRIS (plan-interface-multi-echelle.md §5, étape
   5) -- sections dépliables par indicateur RP, pas un bloc dédié par
   statut (fiabilite_faible/qualite_non_calculee/aucune_donnee) : mêmes 3
   familles de couleur que le reste de l'appli (or/terracotta/gris neutre),
   jamais de teinte inventée pour ces statuts. */
.popup-detail { max-height: 340px; overflow-y: auto; min-width: 220px; max-width: 300px; }
.popup-detail-chargement { color: var(--vert-foret); opacity: 0.7; font-style: italic; }
.popup-detail-erreur { color: var(--terracotta); font-size: 0.85rem; }

/* Rapport complet (plan-ameliorations-dashboard.md §D) -- même contenu
   que l'ancien popup à plat (popup-nom/popup-ligne/popup-groupe-titre/
   popup-rp-section réutilisés tels quels), affiché sous la carte plutôt
   que dans une bulle MapLibre : aucune des contraintes de taille de
   popup-detail (max-height/min-width/max-width) n'a de sens ici.
   Aligné au bord gauche du panneau-section (même départ que son propre
   titre "Rapport complet" et que toutes les autres sections de la page)
   -- tentative précédente (margin-left calé sur le début de la carte)
   abandonnée : ça détachait visuellement le contenu de son titre, ET
   "sous la carte" n'a plus de position cohérente une fois l'aside plus
   haute que la carte (beaucoup de contrôles accumulés) -- confirmé sur
   capture d'écran réelle, pas une supposition. max-width retiré (retour
   d'usage) : le rapport vit maintenant dans carte-colonne-droite, la
   même colonne que la carte -- largeur pleine cohérente avec elle,
   plutôt qu'une colonne de lecture plus étroite. */
.rapport-detail { width: 100%; }
.popup-rp-section {
  margin-top: 0.5em;
  border-top: 1px solid color-mix(in srgb, var(--vert-sauge) 25%, transparent);
  padding-top: 0.35em;
}
.popup-rp-section summary {
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--vert-foret);
}
.popup-rp-section.popup-rp-statut-fiabilite_faible summary { color: color-mix(in srgb, var(--or) 70%, var(--vert-foret)); }
.popup-rp-section.popup-rp-statut-qualite_non_calculee summary { color: color-mix(in srgb, var(--terracotta) 60%, var(--vert-foret)); }
.popup-composition { font-size: 0.78rem; opacity: 0.75; margin: 0.3em 0; }

/* Titre de groupe (retour d'usage réel : popup à plat, aucune hiérarchie)
   -- même langage visuel que popup-marche-titre (label + bordure), pas de
   système inventé. Bordure supprimée sur un popup-rp-section qui suit
   immédiatement un titre de groupe (Profil socio-démographique) pour
   éviter une double bordure collée. */
.popup-groupe-titre {
  margin-top: 0.6em;
  margin-bottom: 0.3em;
  padding-top: 0.4em;
  border-top: 1px solid color-mix(in srgb, var(--vert-sauge) 25%, transparent);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--vert-foret);
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.popup-groupe-titre + .popup-rp-section { border-top: none; margin-top: 0; padding-top: 0; }
.popup-precision { font-size: 0.75rem; opacity: 0.7; font-style: italic; margin-top: 0.3em; }

/* Marché théorique pharmacie -- mise en avant en tête de popup (résumé,
   pas une section <details>), avec statut de fiabilité et notes de
   méthode aussi visibles que le montant (jamais en petit texte gris
   perdu, décision actée avant construction). popup-marche-statut réutilise
   la palette or/terracotta déjà en place pour les statuts de fiabilité --
   popup-marche-methode utilise délibérément un registre différent (sauge,
   encadré) : ce ne sont pas des avertissements sur CET IRIS, mais des
   notes de méthode qui s'appliquent partout -- jamais confondre les deux. */
.popup-marche-theorique {
  margin: 0.5em 0;
  padding: 0.5em 0;
  border-top: 1px solid color-mix(in srgb, var(--vert-sauge) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--vert-sauge) 25%, transparent);
}
.popup-marche-titre {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--vert-foret);
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.popup-marche-montant { font-weight: 700; font-size: 1.15rem; color: var(--vert-foret); margin: 0.15em 0; }
.popup-marche-statut { font-size: 0.82rem; font-weight: 600; margin: 0.2em 0; }
.popup-marche-statut.popup-rp-statut-fiabilite_faible { color: color-mix(in srgb, var(--or) 70%, var(--vert-foret)); }
.popup-marche-statut.popup-rp-statut-qualite_non_calculee { color: color-mix(in srgb, var(--terracotta) 60%, var(--vert-foret)); }
.popup-marche-methode {
  font-size: 0.8rem;
  color: var(--vert-foret);
  background: color-mix(in srgb, var(--vert-sauge) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--vert-sauge) 30%, transparent);
  border-radius: 6px;
  padding: 0.4em 0.6em;
  margin-top: 0.35em;
  line-height: 1.4;
}

/* Panneau tableau de bord multi-indicateurs (plan-dashboard-multi-
   indicateurs.md, pilote marché théorique) -- barres CSS pures, pas de
   bibliothèque de graphique (vérifié : aucune dépendance front dans ce
   projet). dashboard-barre-zone (sauge) vs dashboard-barre-moyenne (vert
   foncé) : même famille de teintes que le reste de l'appli, jamais
   or/terracotta ici (réservés aux statuts de fiabilité). */
.panneau-checkbox { display: flex; align-items: center; gap: 0.5em; font-size: 0.88rem; cursor: pointer; }
.dashboard-panneau { margin-top: 0.6em; }
.dashboard-indicateur { margin-bottom: 0.8em; }
.dashboard-indicateur-titre { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4em; color: var(--vert-foret); }
.dashboard-barre-ligne { display: flex; align-items: center; gap: 0.5em; margin: 0.3em 0; font-size: 0.8rem; }
/* flex-basis 96px + troncature (...) laissait des libellés de catégorie
   illisibles (ex. "Prof. intermédiaires", "Couple avec enfant(s)") --
   retour d'usage. Corrigé en élargissant .rapport-detail à la largeur de
   la carte (plus de place disponible) : 210px suffit pour tenir sur une
   seule ligne sans troncature, pas besoin d'un retour à la ligne. */
.dashboard-barre-label { flex: 0 0 210px; opacity: 0.8; white-space: nowrap; }
.dashboard-barre-piste {
  position: relative;
  flex: 1 1 auto;
  height: 10px;
  background: color-mix(in srgb, var(--vert-sauge) 15%, transparent);
  border-radius: 0;
  overflow: hidden;
}
/* border-radius retiré (rapport de tour) : les coins arrondis de la
   piste + overflow:hidden rognaient visuellement le repère médiane près
   des bords (signalé, cas Lille marché théorique -- repère proche du
   bord gauche). Uniformisé à toutes les barres partageant ces classes,
   y compris le panneau "Comparer au panneau" (construireBarreComparaison,
   pas de repère, jamais concerné jusqu'ici) -- décision explicite pour
   la cohérence visuelle, pas limitée aux seuls graphiques à repère. */
.dashboard-barre-remplissage { height: 100%; border-radius: 0; }
.dashboard-barre-zone { background: var(--vert-sauge); }
.dashboard-barre-moyenne { background: color-mix(in srgb, var(--vert-foret) 55%, transparent); }
.dashboard-barre-valeur { flex: 0 0 auto; font-weight: 600; font-size: 0.78rem; white-space: nowrap; }
/* Repère médiane HdF sur la barre correspondant à la facette de
   coloration (plan-ameliorations-dashboard.md, tour "repere sur
   graphique") -- remplace dashboard-barre-mediane en <div> séparé pour
   CSP/motorisation/famille/diplôme. --or (#e3c15c) : déjà la charte,
   vérifié distinct des 4 palettes d'indicateur (aucune n'a de teinte
   proche du gold) et du seul autre usage --or à proximité (couleur du
   texte de <summary> en fiabilite_faible -- zone et forme différentes,
   jamais superposé à ce repère). translateX(-50%) centre le trait sur
   la position exacte plutôt que de le faire démarrer à gauche de sa
   position (comportement natif de `left`). */
.dashboard-barre-repere {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--or);
  transform: translateX(-50%);
  border-radius: 0;
}
/* Légende en clair du repère (rapport de tour). --or PUR donne un
   contraste ~1,6:1 sur --fond-creme (illisible, très en dessous du
   minimum WCAG AA 4,5:1) -- écart signalé, pas appliqué tel quel.
   Repris le mélange DÉJÀ établi dans ce fichier pour ce même problème
   (texte de statut fiabilite_faible, ligne ~769) : color-mix(--or 70%,
   --vert-foret), ~2,8:1 -- même famille de teinte que le trait (donc
   cohérence visuelle avec le repère conservée), nettement plus lisible
   que le or pur sans être un nouveau choix arbitraire. */
.dashboard-barre-legende-mediane { color: color-mix(in srgb, var(--or) 70%, var(--vert-foret)); font-size: 0.75rem; margin-top: 0.3em; }
.dashboard-vide { font-size: 0.8rem; opacity: 0.75; font-style: italic; }

/* Pyramide des âges x sexe (plan-ameliorations-dashboard.md §E2) --
   barres miroir depuis le centre, complément visuel de la section
   "Pyramide des âges" existante (10 tranches en texte, inchangées). */
.pyramide-sexe { margin: 0.5em 0 0.8em; }
.pyramide-sexe-entete {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; font-weight: 600; margin-bottom: 0.3em;
}
.pyramide-sexe-ligne { display: flex; align-items: center; gap: 0.5em; margin: 0.25em 0; font-size: 0.75rem; }
.pyramide-sexe-piste-h, .pyramide-sexe-piste-f {
  position: relative;
  flex: 1 1 auto; height: 10px; display: flex;
  background: color-mix(in srgb, var(--vert-sauge) 8%, transparent);
}
/* border-radius retiré (rapport de tour, même correctif que
   .dashboard-barre-piste) -- rognait le repère près du centre du
   graphique (bord de piste côté ancrage). */
.pyramide-sexe-piste-h { justify-content: flex-end; border-radius: 0; overflow: hidden; }
.pyramide-sexe-piste-f { border-radius: 0; overflow: hidden; }
.pyramide-sexe-barre-h, .pyramide-sexe-barre-f { height: 100%; }
/* Repère médiane HdF (rapport de tour, généralisation à ce graphique
   bidirectionnel) -- réutilise .dashboard-barre-repere (même --or, même
   épaisseur) mais positionné avec `right` côté H (la piste grandit vers
   la GAUCHE depuis le centre, donc son ancrage 0% est à DROITE) et
   `left` côté F (grandit vers la droite, ancrage 0% à gauche déjà
   naturel) -- cf. commentaire JS pour le detail du calcul. */
.pyramide-sexe-piste-h .dashboard-barre-repere { left: auto; transform: translateX(50%); }
/* Valeur en clair de part et d'autre (permanent, plus une infobulle au
   survol -- redondante une fois affichée en texte). Largeur fixe courte
   ("100,0 %" = le cas le plus long), flex:1 1 auto sur les pistes
   ci-dessus absorbe le rétrécissement en priorité sur petit écran
   (même logique que .dashboard-barre-piste, pas de media query dédiée
   -- aucun des graphiques E1 n'en a, cohérent). */
.pyramide-sexe-valeur { flex: 0 0 44px; font-weight: 600; text-align: center; white-space: nowrap; }
.pyramide-sexe-label { flex: 0 0 76px; text-align: center; opacity: 0.8; white-space: nowrap; }

/* Classement des meilleures zones (plan-classement-zones.md) -- input
   numérique (rayon km) réutilise le langage visuel de .panneau-recherche
   input (bordure/rayon/police) sans le padding icône, pas un nouveau
   registre. Résultats : bloc cliquable réutilisant popup-marche-statut
   (déjà généraliste, pas scopé au popup) pour le badge de statut -- même
   couleurs or/terracotta que partout ailleurs, aucune nouvelle teinte. */
.classement-input {
  width: 100%;
  margin-top: 0.5em;
  padding: 0.65em 0.8em;
  border: 1.5px solid rgba(18, 32, 27, 0.18);
  border-radius: 6px;
  font-family: var(--police-corps);
  font-size: 0.9rem;
  background: var(--fond-creme);
}
.classement-input:focus { outline: none; border-color: var(--couleur-accent); }
.classement-resultat {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  padding: 0.5em 0.3em;
  border-bottom: 1px solid rgba(18, 32, 27, 0.08);
  cursor: pointer;
}
.classement-resultat:last-child { border-bottom: none; }
.classement-resultat:hover { background: var(--fond-creme); }
.classement-resultat-rang { font-weight: 700; font-size: 0.8rem; color: var(--vert-sauge); min-width: 1.4em; }
.classement-resultat-corps { flex: 1 1 auto; min-width: 0; }
.classement-resultat-nom { font-weight: 600; font-size: 0.9rem; }
.classement-resultat-montant { font-weight: 700; font-size: 0.95rem; color: var(--vert-foret); margin: 0.1em 0; }
.classement-resultat-contexte { font-size: 0.8rem; opacity: 0.75; }

@media (max-width: 900px) {
  .carte-visu-layout { flex-direction: column; }
  .carte-panneau { flex: 1 1 auto; width: 100%; }
  .carte-visu-conteneur { width: 100%; height: 60vh; }
}