/* Observatoire de l'urbanisme de Gentilly — charte « Vert équilibré — Atlas urbain »
   Chargée après assets/style.css (et assets/releve.css) : elle redéfinit les variables et
   l'habillage, sans toucher au comportement. Polices auto-hébergées (aucun appel à Google).

   Palette de la charte : vert forêt #304E43 (titres, boutons, structure), vert sauge #658C79
   (pictogrammes, indicateurs ; trop clair pour du texte, d'où sa variante foncée #4F7463 pour
   les liens), vert clair #DFEADD (fonds de sections, survols), ivoire #FAFAF6 (fond général),
   blanc (cartes et panneaux), gris minéral #64736C (texte secondaire).
   Couleurs des données, distinctes de l'interface et vérifiées pour les daltonismes :
   bleu #2F6DB5 (habitat, créations), ocre #C98A1B (activités), brique #B5452B (démolitions,
   pertes), gris #7A847F (aménagement). */

@font-face { font-family: "Manrope"; src: url("polices/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("polices/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("polices/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("polices/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --foret: #304e43;
  --foret-fonce: #243b33;
  --sauge: #658c79;
  --sauge-texte: #4f7463;
  --vert-clair: #dfeadd;
  --vert-tres-clair: #eef4ec;
  --ivoire: #fafaf6;
  --mineral: #64736c;
  --mineral-fonce: #56645d; /* gris minéral sur fond vert clair (contraste AA) */

  /* Anciennes variables du site, redirigées vers la nouvelle charte */
  --bleu: var(--foret);
  --bleu-fonce: var(--foret-fonce);
  --bleu-pale: var(--vert-clair);
  --cyan: var(--sauge);
  --rouge: #b5452b;
  --fond: var(--ivoire);
  --surface: #ffffff;
  --surface-2: var(--vert-tres-clair);
  --encre: #1f2a25;
  --encre-2: var(--mineral);
  --encre-3: var(--mineral);
  --trait: #e3e8e1;
  --trait-fort: #c9d3cb;
  --accent: var(--foret);
  --accent-fond: var(--vert-clair);

  /* Données : couleurs fonctionnelles, sans lien avec la charte */
  --c-habitat: #2f6db5;
  --c-activites: #c98a1b;
  --c-demolition: #b5452b;
  --c-amenagement: #7a847f;
  --donnee-creation: #2f6db5;
  --donnee-suppression: #c98a1b;
  --donnee-perte: #b5452b;
  --donnee-gain: #2f6db5;

  --rayon: 10px;
  --rayon-petit: 8px;
  --ombre: 0 1px 2px rgba(31, 42, 37, .05), 0 2px 8px rgba(31, 42, 37, .05);
  --police: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --police-titre: Manrope, Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --police-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --oblique: 0px;
}

body { background: var(--ivoire); color: var(--encre); font-family: var(--police); }
a { color: var(--sauge-texte); }
a:hover { color: var(--foret); }
:focus-visible { outline: 3px solid var(--sauge); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 700; color: var(--foret); letter-spacing: -.01em; line-height: 1.15; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------ En-tête : ivoire, bordure fine */
.entete { background: rgba(250, 250, 246, .97); color: var(--encre); clip-path: none; padding-bottom: 0; border-bottom: 1px solid var(--trait); backdrop-filter: saturate(1.2) blur(4px); }
.entete-int { padding: 10px 16px; }
.marque { color: var(--encre); gap: 12px; }
.marque-picto { width: 38px; height: 38px; flex: none; }
.marque-titre { line-height: 1.15; }
.marque-titre strong { font-family: var(--police-titre); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; color: var(--foret); }
.marque-titre small { font-size: .74rem; letter-spacing: 0; }
.marque-titre .signature-entete { opacity: 1; color: var(--mineral); font-size: .72rem; margin-top: 2px; }
.nav a { color: var(--encre); font-weight: 500; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 10px; }
.nav a:hover { color: var(--foret); border-bottom-color: var(--vert-clair); background: none; }
.nav a[aria-current="page"] { color: var(--foret); font-weight: 600; border-bottom-color: var(--foret); background: none; }
@media (max-width: 1140px) {
  .menu-bouton { border: 1px solid var(--trait-fort); color: var(--foret); background: var(--surface); border-radius: var(--rayon-petit); font: 600 .95rem var(--police); }
  .nav { background: var(--ivoire); border-bottom: 1px solid var(--trait); box-shadow: var(--ombre); }
  .nav a { padding: 10px 4px; border-bottom: 1px solid var(--trait); }
  .nav a[aria-current="page"] { border-bottom-color: var(--trait); box-shadow: inset 3px 0 0 var(--foret); padding-left: 10px; }
}

/* ------------------------------------------------------------ Accueil et bandeaux : sobres, sans aplat ni oblique */
.heros, .bandeau { background: var(--vert-tres-clair); color: var(--encre); clip-path: none; margin-top: 0; border-bottom: 1px solid var(--trait); }
.heros-int { padding: 48px 16px 44px; }
.bandeau-int { padding: 36px 16px 30px; }
.heros h1, .bandeau h1 { color: var(--foret); }
.heros h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08; margin-bottom: 16px; font-weight: 700; }
.heros .avant { font-size: .55em; font-weight: 600; color: var(--sauge-texte); margin-bottom: .2em; }
.heros .ancre { text-transform: none; }
.surtitre { color: var(--mineral-fonce); font-weight: 600; font-size: .95rem; text-transform: none; }
.heros .sous-titre, .bandeau .sous-titre { color: var(--encre); font-size: 1.08rem; }
/* « POUR … » : affiché en casse naturelle (« Pour … »), sans effet de slogan */
.pour { display: inline-block; font-family: var(--police); font-weight: inherit; color: inherit; letter-spacing: 0; text-transform: lowercase; }
.pour::first-letter { text-transform: uppercase; }
.sous-heros { padding-top: 28px; }

/* Boutons */
.bouton { font-family: var(--police); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .95rem; border-radius: var(--rayon-petit); border: 1px solid var(--foret); background: var(--foret); color: #fff; padding: 10px 18px; }
.bouton:hover { background: var(--foret-fonce); border-color: var(--foret-fonce); filter: none; color: #fff; }
.bouton.blanc { background: var(--foret); border-color: var(--foret); color: #fff; }
.bouton.contour, .bouton.contour-bleu { background: var(--surface); border-color: var(--trait-fort); color: var(--foret); }
.bouton.contour:hover, .bouton.contour-bleu:hover { background: var(--vert-clair); color: var(--foret); }
button.bouton:disabled { opacity: .5; }

/* Chiffres clés et blocs */
.tuile { border: 1px solid var(--trait); border-top: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); position: relative; overflow: hidden; }
.tuile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sauge); }
.tuile .valeur { font-family: var(--police-titre); font-weight: 700; color: var(--foret); font-variant-numeric: tabular-nums; }
.tuile .libelle { color: var(--mineral); }
.bloc { border-radius: var(--rayon); box-shadow: var(--ombre); }
.bloc-theme, .complement { border-top: 1px solid var(--trait); }
.encadre { border-left: 4px solid var(--sauge); }
.focus-bloc { background: var(--surface); color: var(--encre); clip-path: none; border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.focus-bloc:hover { background: var(--vert-tres-clair); border-color: var(--trait-fort); }
.focus-titre { font-family: var(--police-titre); font-weight: 700; text-transform: none; font-size: 1.35rem; color: var(--foret); }
.focus-texte b { color: var(--foret); font-family: var(--police-titre); font-weight: 700; }
.focus-lien { color: var(--sauge-texte); font-weight: 600; }
.avertissement { color: var(--mineral); }
.chapeau { color: var(--mineral-fonce); }
.note { color: var(--mineral); }

/* Cartes de permis, pastilles */
.carte-permis { border-radius: var(--rayon); border: 1px solid var(--trait); border-left: 4px solid var(--c, var(--trait-fort)); box-shadow: none; }
.carte-permis:hover, .carte-permis:focus-visible, .carte-permis.actif { box-shadow: var(--ombre); background: #fff; }
.carte-permis .adresse { color: var(--foret); font-weight: 600; }
.liste-cartes.grille .adresse { font-family: var(--police-titre); font-weight: 700; }
.chiffre-cle { font-family: var(--police-titre); font-weight: 700; color: var(--foret); }
.pastille { border-radius: 999px; background: var(--vert-tres-clair); color: var(--mineral-fonce); font-weight: 600; }
.pastille .point { box-shadow: 0 0 0 1px rgba(31, 42, 37, .3); }
.pastille.gp { background: var(--foret); color: #fff; text-transform: none; letter-spacing: 0; }
.tableau .gp-marque { background: var(--vert-clair); color: var(--foret); border-radius: 999px; padding: 1px 7px; font-size: .7rem; }

/* Identifiants administratifs en chasse fixe */
.details td span[style*="monospace"], .num-admin, .tableau td.date { font-family: var(--police-mono) !important; font-size: .88em; }

/* Filtres, légendes */
.filtres-zone { background: var(--surface); border-bottom: 1px solid var(--trait); }
.filtres label { color: var(--mineral-fonce); font-weight: 600; }
.filtres input[type="search"], .filtres select { border-radius: var(--rayon-petit); border-color: var(--trait-fort); background: var(--surface); }
.filtres input[type="search"]:focus, .filtres select:focus { border-color: var(--sauge); }
.filtres .reinit { color: var(--sauge-texte); font-weight: 600; }
.bouton-filtres { border-radius: var(--rayon-petit); }
@media (max-width: 700px) { .bouton-filtres { background: var(--foret); color: #fff; } }
.legende i { box-shadow: 0 0 0 1px rgba(31, 42, 37, .45); }
.carte-liste { background: var(--ivoire); }
.compteur { color: var(--mineral-fonce); font-weight: 600; }

/* Tableau */
.table-defile { border-radius: var(--rayon); }
.tableau th { background: var(--vert-tres-clair); color: var(--foret); border-bottom: 1px solid var(--trait-fort); }
.tableau th button:focus-visible { outline: 2px solid var(--sauge); }
.tableau th[aria-sort="ascending"] button::after, .tableau th[aria-sort="descending"] button::after { color: var(--sauge-texte); }
.tableau tbody tr:hover { background: var(--vert-tres-clair); }
.tableau td a { color: var(--foret); font-weight: 600; }

/* Segments */
.segments { border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit); overflow: hidden; }
.segments button { color: var(--foret); font-weight: 600; }
.segments button + button { border-left: 1px solid var(--trait-fort); }
.segments button[aria-pressed="true"] { background: var(--foret); color: #fff; }

/* Graphiques : couleurs des données */
.graphique-zone .barre, .graphique-zone .barre-haut { fill: var(--donnee-creation); }
.graphique-zone .barre.partielle { stroke: var(--donnee-creation); }
.graphique-zone .barre.survol { fill: #245a96; }
.graphique-zone .barre-bas { fill: var(--donnee-suppression); }
.graphique-zone .barre-perte { fill: var(--donnee-perte); }
.graphique-zone .barre-gain { fill: var(--donnee-gain); }
.graphique-zone text { fill: var(--mineral); font-family: var(--police); }
.graphique-zone text.valeur-barre { fill: var(--encre); }
.graphique-zone .etiquette-projet { fill: var(--encre); }
.graphique-zone .ligne-projet:hover .cible { fill: var(--vert-tres-clair); }
.graphique-zone .ligne-projet:hover .etiquette-projet { fill: var(--foret); }
.legende-graphique i { border-radius: 3px; }
.infobulle { border-radius: var(--rayon-petit); border-color: var(--trait-fort); }
.infobulle strong { color: var(--foret); }
.perte, .txt-disparue { color: var(--donnee-perte); }
.gain, .txt-creee { color: var(--donnee-gain); }
.tableau td.perte { color: var(--donnee-perte); }

/* Fiche */
.etapes li.fait::before { background: var(--sauge); }
.etapes li.fait::after { background: var(--foret); border-color: var(--foret); }
.etapes li.fait b { color: var(--foret); }
.fiche-carte, .carte-photo { border-radius: var(--rayon-petit); }
.commentaire { border-left-color: var(--sauge); }
.form-commentaire textarea, .form-commentaire input { border-radius: var(--rayon-petit); }

/* Gentilly autrefois */
.autrefois-ligne span { background: var(--foret); }
#autrefois-curseur { accent-color: var(--foret); }
.lieux li { border-radius: var(--rayon); border-left: 4px solid var(--sauge); }
.lieu-adresse { font-family: var(--police-titre); font-weight: 700; color: var(--foret); }
.autrefois-etiquettes b { color: var(--foret); }
.carte-autrefois { border-radius: var(--rayon-petit); }

/* Cartes Leaflet */
.leaflet-container { font-family: var(--police); }
.leaflet-popup-content-wrapper { border-radius: var(--rayon); }
.popup-permis strong { color: var(--foret); }
.leaflet-bar, .leaflet-control-layers { border-radius: var(--rayon-petit) !important; }

/* Pied de page : ivoire, filet discret */
.pied { background: var(--surface); color: var(--mineral); clip-path: none; border-top: 1px solid var(--trait); margin-top: 40px; }
.pied-int { padding: 24px 16px 28px; }
.pied .signature { color: var(--foret); font-weight: 600; font-size: .95rem; }
.pied a { color: var(--sauge-texte); }

/* Relevé de la pleine terre (page releve-pleine-terre.html) */
.question { border-left-color: var(--sauge); border-radius: var(--rayon); }
.question.avis { border-left-color: #7a847f; }
.choix button { border: 1px solid var(--trait-fort); color: var(--foret); border-radius: var(--rayon-petit); font-weight: 600; background: var(--surface); }
.choix button:hover { background: var(--vert-tres-clair); }
.choix button[aria-pressed="true"] { background: var(--foret); border-color: var(--foret); color: #fff; }
.etiquette { font-family: var(--police); font-weight: 700; border-radius: 6px; font-size: .85rem; }
.etiquette.avant { background: var(--foret); }
.etiquette.apres { background: var(--sauge-texte); }
.bouton-dessin { border-radius: var(--rayon-petit); font-weight: 600; }
.bouton-dessin.disparue { background: var(--donnee-perte); }
.bouton-dessin.creee { background: var(--donnee-gain); }
.pastille-zone.disparue { background: var(--donnee-perte); }
.pastille-zone.creee { background: var(--donnee-gain); }
.carte-releve, .carte-mini { border-radius: var(--rayon-petit); }
.envoi-auto { background: var(--vert-tres-clair); border-radius: var(--rayon-petit); color: var(--encre); }
.terrain-quartier { color: var(--sauge-texte); }
.progression-entete { color: var(--foret); }
.lien-bouton { color: var(--sauge-texte); }
.navigation-terrain { background: var(--ivoire); }
.demarrage input[type="text"], .photo select, .choix-liste select, .question textarea { border-radius: var(--rayon-petit); }

@media (max-width: 480px) {
  .marque-picto { width: 32px; height: 32px; }
  .marque-titre strong { font-size: .98rem; }
  .marque-titre .signature-entete { font-size: .66rem; }
}