/* =====================================================================
   SIG ProCaR – feuille de style unique (espace public et espace gestion)
   Les jetons de conception sont en tête : couleurs et polices ne se modifient qu'ici.
   ===================================================================== */
@font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap; src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 600; font-display: swap; src: url("../fonts/public-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 700; font-display: swap; src: url("../fonts/public-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --vert: #2B7B31;            /* vert du logo ProCaR */
  --vert-fonce: #1F5E24;
  --vert-pale: #E6F1E2;       /* corridors sur les cartes */
  --jaune: #F6EA3B;           /* jaune du logo ProCaR */
  --rouge: #E74E3B;           /* rouge du logo ProCaR */
  --sable: #FBF6C4;
  --encre: #2F3A2B;
  --gris: #4E5B48;            /* gris-vert du texte « ProCaR » */
  --trait: #DCE3D6;
  --surface: #F6F8F3;
  --blanc: #FFFFFF;
  --alerte: #8A2A12;
  --succes: #1F6F4A;
  --focus: #D4B000;
  --rayon: 4px;
  --police: "Public Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --largeur: 90rem;        /* contenu : plus large qu'avant, les textes gardent une longueur de ligne lisible (ch) */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--police); font-size: 1rem; line-height: 1.55; color: var(--encre); background: var(--blanc); }
img { max-width: 100%; height: auto; }
a { color: var(--vert); text-underline-offset: 2px; }
a:hover { color: var(--vert-fonce); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; color: var(--vert-fonce); }
code { font-size: .9em; background: var(--surface); padding: .1rem .3rem; border-radius: 3px; word-break: break-all; }
.lien-evitement { position: absolute; left: -999px; top: 0; background: var(--vert); color: var(--blanc); padding: .5rem 1rem; z-index: 1000; }
.lien-evitement:focus { left: .5rem; top: .5rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pastille { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: none; background: var(--c, var(--gris)); }
.nb { font-variant-numeric: tabular-nums; color: var(--gris); font-size: .9em; }

/* ---------- En-tête : bandeau vert, menu à sous-menus (Projets, Thématiques) ---------- */
.entete { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 1.25rem; min-height: 64px; padding: 0 1.25rem;
  background: linear-gradient(180deg, #2F8436 0%, #276F2C 100%); color: var(--blanc);
  border-bottom: 3px solid var(--jaune); box-shadow: 0 2px 0 var(--rouge), 0 8px 24px rgba(20, 45, 20, .10); }
.entete a { color: inherit; text-decoration: none; }
.marque { display: flex; align-items: center; gap: .7rem; flex: none; }
.marque img { width: auto; height: 42px; border-radius: 8px; background: var(--blanc); padding: 3px; object-fit: contain;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.marque .nom { font-weight: 700; font-size: 1.05rem; line-height: 1.15; letter-spacing: -.005em; }
.marque .nom small { display: block; font-weight: 400; font-size: .78rem; opacity: .82; letter-spacing: 0; }
.nav-principale { margin-left: .5rem; }
.nav-liste { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.nav-liste > li { position: relative; }
.nav-lien { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .8rem; border: 0; border-radius: 8px; background: none;
  color: rgba(255, 255, 255, .92); font: inherit; font-size: .95rem; font-weight: 500; line-height: 1.2; cursor: pointer; position: relative;
  transition: background-color .15s, color .15s; white-space: nowrap; }
.nav-lien:hover, .nav-lien[aria-expanded="true"] { background: rgba(255, 255, 255, .13); color: #fff; }
.nav-lien[aria-current="page"], .nav-lien[data-courant] { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }
.nav-lien[aria-current="page"]::after, .nav-lien[data-courant]::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 18px; height: 3px;
  margin-left: -9px; border-radius: 3px; background: var(--jaune); }
.nav-lien:focus-visible, .acces-gestion:focus-visible, .bouton-menu:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; }
.chevron { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.nav-lien[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* Sous-menus */
.sous-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 10; min-width: 330px; padding: .45rem; border-radius: 12px;
  background: var(--blanc); color: var(--encre); border: 1px solid #E1E6DB; box-shadow: 0 16px 40px rgba(20, 40, 20, .20);
  visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .14s, transform .14s, visibility 0s .14s; }
.sous-menu::before { content: ""; position: absolute; top: -6px; left: 24px; width: 10px; height: 10px; background: var(--blanc);
  border-left: 1px solid #E1E6DB; border-top: 1px solid #E1E6DB; transform: rotate(45deg); }
.nav-lien[aria-expanded="true"] + .sous-menu { visibility: visible; opacity: 1; transform: none; transition: opacity .14s, transform .14s; }
.sous-menu ul { margin: 0; padding: 0; list-style: none; }
.sous-menu a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: 8px;
  color: var(--encre) !important; }
.sous-menu a:hover, .sous-menu a:focus-visible { background: #F1F6EE; outline: none; }
.sous-menu a[aria-current="page"] { background: #E8F1E3; }
.sm-pastille { width: 12px; height: 12px; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.sm-barre { width: 4px; height: 28px; border-radius: 2px; }
.sm-programme { background: conic-gradient(#D4B000 0 33%, #2B7B31 0 66%, #E74E3B 0); border-radius: 50%; }
.sm-texte { display: flex; flex-direction: column; min-width: 0; }
.sm-texte strong { font-size: .93rem; font-weight: 650; line-height: 1.25; }
.sm-texte small { font-size: .78rem; color: var(--gris); line-height: 1.3; max-width: 290px; }
#sm-projets { min-width: 390px; }
.sm-nb { font-size: .75rem; color: var(--gris); font-variant-numeric: tabular-nums; background: #F2F4EF; border-radius: 999px; padding: .1rem .5rem; white-space: nowrap; }
.sm-sep { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid #E9EDE5; }

/* Espace gestion : bouton blanc */
.acces-gestion { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .95rem .4rem .45rem; border-radius: 999px;
  background: var(--blanc); color: var(--vert-fonce) !important; font-size: .88rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transition: background-color .15s; }
.acces-gestion:hover { background: #F1F6EE; }
.acces-gestion svg { width: 26px; height: 26px; padding: 3px; border-radius: 50%; background: #E6F1E2; fill: none; stroke: var(--vert); stroke-width: 1.8; stroke-linecap: round; }
.acces-gestion .avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vert); color: #fff; font-size: .7rem; font-weight: 700; }

/* Menu mobile */
.bouton-menu { display: none; margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.bouton-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 1100px) {
  .marque .nom small { display: none; }
  .nav-lien { padding: .5rem .6rem; font-size: .9rem; }
}
@media (max-width: 960px) {
  .entete { flex-wrap: wrap; padding: .5rem 1rem; gap: .5rem 1rem; }
  .bouton-menu { display: grid; place-items: center; }
  .acces-gestion { margin-left: auto; order: 2; }
  .acces-gestion span:last-child { display: none; }
  .acces-gestion { padding: .3rem; }
  .bouton-menu { order: 3; margin-left: 0; }
  #sm-projets { min-width: 0; }
  .nav-principale { display: none; order: 4; width: 100%; margin: 0; padding: .25rem 0 .5rem; border-top: 1px solid rgba(255, 255, 255, .18); }
  .entete.menu-ouvert .nav-principale { display: block; }
  .nav-liste { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav-lien { width: 100%; justify-content: space-between; padding: .7rem .75rem; font-size: 1rem; }
  .nav-lien[aria-current="page"]::after, .nav-lien[data-courant]::after { display: none; }
  .sous-menu { position: static; min-width: 0; margin: .2rem 0 .4rem; box-shadow: none; display: none; visibility: visible; opacity: 1; transform: none; }
  .sous-menu::before { display: none; }
  .nav-lien[aria-expanded="true"] + .sous-menu { display: block; }
}

/* ---------- Messages ---------- */
.messages { max-width: var(--largeur); margin: 1rem auto 0; padding: 0 1.25rem; }
.message { margin: 0 0 .5rem; padding: .6rem .9rem; border-left: 4px solid var(--vert); background: var(--surface); }
.message-success { border-color: var(--succes); }
.message-error { border-color: var(--alerte); background: #FBEFEB; }

/* ---------- Accueil : ouverture sur la carte de la zone ---------- */
/* Ouverture pleine largeur : texte aligné sur le contenu de la page, carte jusqu'au bord droit de l'écran */
.ouverture { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch;
  min-height: min(44rem, calc(100vh - 74px)); background: var(--blanc); border-bottom: 1px solid var(--trait); }
.ouverture-texte { align-self: center; padding: 3rem 3rem 3rem max(1.25rem, calc((100vw - var(--largeur)) / 2 + 1.25rem)); }
.ouverture h1 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.015em; margin: 0 0 1rem; max-width: 16ch; }
.chapeau { font-size: 1.1rem; color: var(--gris); max-width: 46ch; margin: 0 0 1.75rem; }
.recherche label { display: block; font-weight: 600; margin-bottom: .35rem; }
.recherche-champ { display: flex; gap: .5rem; max-width: 30rem; }
.recherche-champ input { flex: 1; min-width: 0; font: inherit; padding: .65rem .8rem; border: 1px solid #9AA394; border-radius: var(--rayon); }
.acces-regions { margin-top: 1.75rem; }
.acces-regions p { margin: 0 0 .4rem; font-size: .9rem; color: var(--gris); }
.acces-regions ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.acces-regions a { display: inline-flex; gap: .4rem; padding: .3rem .75rem; border: 1px solid var(--trait); border-radius: 999px; text-decoration: none; color: var(--encre); }
.acces-regions a:hover { border-color: var(--vert); color: var(--vert); }
.ouverture-carte { margin: 0; position: relative; min-height: 32rem; }
.carte-accueil { position: absolute; inset: 0; background: #EEF1EA; }
.carte-accueil .ol-attribution { font-size: .7rem; }
.carte-accueil.indisponible::after { content: "La carte de la zone n'a pas pu être chargée depuis le serveur cartographique."; position: absolute; top: 40%; left: 2rem; right: 2rem;
  text-align: center; color: var(--gris); z-index: 2; }
.ouverture-carte figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center;
  font-size: .85rem; color: var(--encre); background: rgba(255,255,255,.94); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: .55rem .9rem; box-shadow: 0 2px 10px rgba(47,58,43,.10); max-width: 40rem; }
.cle { display: inline-flex; align-items: center; gap: .4rem; }
.cle span { width: 1rem; height: .75rem; border: 1px solid var(--vert-fonce); }
.cle-concentration { background: rgba(43,123,49,.25); border-color: var(--vert) !important; }
.cle-extension { background: var(--gris); border-color: #FFFFFF !important; border-radius: 0; }
.ouverture-carte figcaption a { margin-left: auto; font-weight: 600; }

/* ---------- Blocs de page ---------- */
.bloc { padding: 3rem 1.25rem; }
.bloc-gris { background: var(--surface); }
.bloc-int { max-width: var(--largeur); margin: 0 auto; }
.bloc h2 { font-size: 1.6rem; margin: 0 0 1.25rem; }
.bloc-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

/* Thématiques : six lignes, la couleur de la thématique en filet */
.thematiques { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
.thematiques a { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: 1rem 0 1rem 1rem; border-left: 4px solid var(--c);
  border-bottom: 1px solid var(--trait); text-decoration: none; color: var(--encre); }
.thematiques a:hover .th-nom { color: var(--c); text-decoration: underline; }
.th-nom { font-weight: 700; font-size: 1.1rem; }
.th-desc { grid-column: 1; color: var(--gris); font-size: .92rem; }
.th-nb { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .85rem; color: var(--gris); font-variant-numeric: tabular-nums; }

/* ---------- Pages intérieures ---------- */
.page { max-width: var(--largeur); margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.page > h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 1.25rem; }
.page-texte { max-width: 46rem; }
.page-texte h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
.liste-def dt { font-weight: 700; display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
.liste-def dd { margin: 0 0 0 1.2rem; color: var(--gris); }
.fil { margin: 0 0 .3rem; font-size: .9rem; }
.entete-thematique { border-left: 6px solid var(--c); padding: .25rem 0 .25rem 1.1rem; margin-bottom: 1.5rem; }
.entete-thematique h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 .4rem; }
.entete-thematique p:last-child { margin: 0; color: var(--gris); max-width: 60ch; }
.autres-thematiques { margin-top: 3rem; border-top: 1px solid var(--trait); padding-top: 1rem; }
.autres-thematiques h2 { font-size: 1rem; }
.autres-thematiques ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.autres-thematiques a { display: inline-flex; align-items: center; gap: .4rem; }

/* Filtres de la cartothèque */
.filtres-form { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; padding: 1rem; background: var(--surface); border-radius: var(--rayon); }
.filtres-form .champ { display: flex; flex-direction: column; gap: .25rem; }
.filtres-form .champ-large { flex: 1 1 16rem; }
.filtres-form label { font-size: .85rem; font-weight: 600; }
.filtres-form input, .filtres-form select { font: inherit; padding: .5rem .6rem; border: 1px solid #9AA394; border-radius: var(--rayon); background: var(--blanc); }
.effacer { font-size: .9rem; align-self: center; }
.compte { color: var(--gris); font-size: .9rem; margin: 1.25rem 0 .25rem; }

/* Fiches de carte */
.liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.fiche { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--trait); }
/* Listes de cartes : deux colonnes sur grand écran (plus d'espace vide à droite) */
@media (min-width: 1100px) {
  ul.liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}
.fiche img, .sans-apercu { display: block; width: 220px; height: 160px; object-fit: cover; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.sans-apercu { background: repeating-linear-gradient(135deg, var(--surface) 0 10px, #fff 10px 20px); border-left: 4px solid var(--c); }
.fiche .theme { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--gris); margin: 0 0 .3rem; }
.fiche h3 { font-size: 1.2rem; margin: 0 0 .35rem; }
.fiche h3 a { text-decoration: none; color: var(--encre); }
.fiche h3 a:hover { color: var(--vert); text-decoration: underline; }
.fiche .lieu { margin: 0 0 .5rem; font-weight: 600; }
.fiche .resume { margin: 0 0 .6rem; color: var(--gris); max-width: 65ch; }
.fiche .details { font-size: .85rem; color: var(--gris); margin: 0; }
.vide { padding: 1.5rem 0; color: var(--gris); max-width: 60ch; }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--trait); padding: 2rem 1.25rem; font-size: .85rem; color: var(--gris); }
.pied-int { max-width: var(--largeur); margin: 0 auto; }
.pied p { max-width: 80ch; margin: 0 0 .5rem; }

/* ---------- Boutons ---------- */
.bouton { font: inherit; font-size: .92rem; display: inline-block; padding: .5rem .9rem; border: 1px solid var(--vert); color: var(--vert);
  background: var(--blanc); border-radius: var(--rayon); cursor: pointer; text-decoration: none; line-height: 1.3; }
.bouton:hover { background: var(--surface); color: var(--vert-fonce); }
.bouton-plein { background: var(--vert); color: var(--blanc); }
.bouton-plein:hover { background: var(--vert-fonce); color: var(--blanc); }
.bouton-danger { border-color: var(--alerte); color: var(--alerte); }
.bouton-lien { border: 0; background: none; padding: 0; color: var(--vert); text-decoration: underline; cursor: pointer; font: inherit; }

/* ---------- Visionneuse ---------- */
.page-carte { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.page-carte .messages { display: none; }
.visionneuse { flex: 1; display: grid; grid-template-columns: 1fr 380px; min-height: 0; }
#carte { position: relative; min-height: 0; background: #EDF1EA; }
#carte:focus-visible { outline-offset: -3px; }
.panneau { overflow-y: auto; border-left: 1px solid var(--trait); background: var(--blanc); padding: 1.25rem 1.25rem 2rem; }
.panneau h1 { font-size: 1.3rem; margin: .2rem 0 .3rem; }
.panneau .theme { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--gris); margin: 0; }
.panneau .lieu { margin: 0 0 1rem; font-weight: 600; }
.panneau h2 { font-size: .95rem; margin: 1.5rem 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
.panneau p { margin: 0 0 .75rem; }
.bandeau-apercu { background: #FFF4E5; border: 1px solid #E8B97E; color: var(--alerte); padding: .5rem .7rem; border-radius: var(--rayon); font-size: .9rem; }
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.chiffres li { border-left: 3px solid var(--vert); padding-left: .55rem; }
.chiffres strong { display: block; font-size: 1.35rem; line-height: 1.1; color: var(--vert-fonce); font-variant-numeric: tabular-nums; }
.chiffres span { font-size: .8rem; color: var(--gris); }
.legende figure { margin: 0 0 .6rem; }
.legende figcaption { font-size: .85rem; font-weight: 600; margin-bottom: .2rem; }
.legende img { display: block; max-width: 100%; }
.couches { list-style: none; margin: 0; padding: 0; }
.couches li { padding: .2rem 0; }
.couches label { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.couches input { width: 1.05rem; height: 1.05rem; accent-color: var(--vert); }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; margin: 0; font-size: .9rem; }
.meta dt { color: var(--gris); }
.meta dd { margin: 0; }
.telechargements { list-style: none; padding: 0; margin: 0; }
.telechargements li { margin: .3rem 0; }
.notes { font-size: .85rem; color: var(--gris); padding-left: 1.1rem; margin: 0; }
.retour { font-size: .9rem; }
.alerte { position: absolute; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 5; max-width: min(90%, 34rem);
  background: #FFF4E5; color: var(--alerte); border: 1px solid #E8B97E; border-radius: var(--rayon); padding: .6rem .9rem; font-size: .9rem; }
.alerte[hidden] { display: none; }
.chargement { position: absolute; bottom: 2.6rem; left: 50%; transform: translateX(-50%); z-index: 5; margin: 0;
  background: rgba(255,255,255,.92); border: 1px solid #CDD5C8; border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; color: var(--gris);
  box-shadow: 0 1px 4px rgba(31,58,31,.15); }
.chargement::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .5em; vertical-align: -.1em;
  border: 2px solid #A3AC9E; border-top-color: transparent; border-radius: 50%; animation: tourne .9s linear infinite; }
.chargement[hidden] { display: none; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Projets du ProCaR (une couleur par projet, charte du logo) ---------- */
.cle-projet { background: color-mix(in srgb, var(--c) 35%, transparent); border-color: var(--c) !important; }
/* Pastilles de légende identiques au style GeoServer procar_zone_projet */
.cle-padaam { background: color-mix(in srgb, var(--c) 45%, transparent); }
.cle-padmar { background: repeating-linear-gradient(135deg, var(--c) 0 1.2px, transparent 1.2px 4px); }
.cle span.cle-prima { background: color-mix(in srgb, var(--c) 18%, transparent); border: 2px solid var(--c) !important; }
.projets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.projets a { display: flex; flex-direction: column; gap: .35rem; height: 100%; box-sizing: border-box; padding: 1.1rem 1.2rem;
  border: 1px solid var(--trait); border-top: 6px solid var(--c); border-radius: var(--rayon); background: var(--blanc);
  text-decoration: none; color: var(--encre); }
.projets a:hover { border-color: var(--c); box-shadow: 0 4px 14px rgba(47, 58, 43, .08); }
.projets a:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.pj-sigle { font-weight: 700; font-size: 1.35rem; letter-spacing: .02em; color: color-mix(in srgb, var(--c) 75%, var(--encre)); }
.pj-nom { font-weight: 600; line-height: 1.3; }
.pj-desc { font-size: .9rem; color: var(--gris); flex: 1; }
.pj-nb { font-size: .85rem; font-weight: 600; color: color-mix(in srgb, var(--c) 70%, var(--encre)); }
/* filet de la couleur du projet le long du texte (sans décaler l'alignement sur le contenu de la page) */
.ouverture-projet .ouverture-texte { background: linear-gradient(var(--c), var(--c)) no-repeat; background-origin: content-box; background-clip: padding-box;
  background-size: 6px 100%; background-position: -1.4rem 0; }
.ouverture-projet h1 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); max-width: 24ch; }
.ouverture-projet .meta { margin-top: 1rem; }
.pj-sigle-grand { margin: 0; font-weight: 700; font-size: 1rem; letter-spacing: .08em; color: color-mix(in srgb, var(--c) 75%, var(--encre)); }
.etiquette-projet { display: inline-block; padding: .05rem .45rem; border-radius: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .03em;
  color: var(--blanc); background: color-mix(in srgb, var(--c) 85%, var(--encre)); text-decoration: none; margin-right: .25rem; }
a.etiquette-projet:hover { text-decoration: underline; color: var(--blanc); }
.puces-filtre { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
.puces-filtre a { display: inline-flex; gap: .35rem; align-items: center; padding: .3rem .8rem; border: 1px solid var(--trait); border-radius: 999px;
  background: var(--blanc); text-decoration: none; color: var(--encre); font-size: .9rem; }
.puces-filtre a[aria-current="true"] { background: var(--encre); color: var(--blanc); border-color: var(--encre); }

@media (prefers-reduced-motion: reduce) { .chargement::before { animation: none; } }
.bulle { position: relative; background: var(--blanc); border: 1px solid #A3AC9E; border-radius: var(--rayon); box-shadow: 0 2px 10px rgba(31,58,31,.25);
  padding: .7rem .9rem .8rem; min-width: 220px; max-width: 300px; font-size: .9rem; }
.bulle::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--blanc); }
.bulle .type { margin: 0; font-size: .8rem; color: var(--gris); }
.bulle h3 { margin: 0 1.5rem .35rem 0; font-size: 1rem; color: var(--encre); }
.bulle table { border-collapse: collapse; width: 100%; }
.bulle th { text-align: left; font-weight: 400; color: var(--gris); padding: .1rem .6rem .1rem 0; vertical-align: top; }
.bulle td { text-align: right; font-variant-numeric: tabular-nums; padding: .1rem 0; }
.bulle .entite + .entite { border-top: 1px solid var(--trait); margin-top: .5rem; padding-top: .5rem; }
.bulle .fermer { position: absolute; top: .3rem; right: .35rem; border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--gris); padding: .2rem .4rem; }
.bascule-panneau { display: none; }
.ol-control button { background: var(--vert) !important; color: var(--blanc) !important; }
.ol-scale-line { background: rgba(31,58,31,.7); }
.ol-scale-line-inner { color: #fff; border-color: #fff; }

/* =====================================================================
   Espace gestion
   ===================================================================== */
.gestion { background: var(--surface); min-height: 100vh; }
.gestion .entete { background: var(--vert-fonce); }
.nav-gestion { background: var(--blanc); border-bottom: 1px solid var(--trait); }
.nav-gestion ul { max-width: var(--largeur); margin: 0 auto; padding: 0 1.25rem; display: flex; gap: 1.5rem; list-style: none; overflow-x: auto; }
.nav-gestion a { display: block; padding: .75rem 0; text-decoration: none; color: var(--encre); border-bottom: 3px solid transparent; white-space: nowrap; }
.nav-gestion a[aria-current="page"] { border-bottom-color: var(--vert); color: var(--vert); font-weight: 600; }
.compte-utilisateur { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: .85rem; }
.compte-utilisateur form { margin: 0; }
.compte-utilisateur button { font: inherit; color: var(--blanc); background: none; border: 1px solid rgba(255,255,255,.6); border-radius: var(--rayon); padding: .25rem .6rem; cursor: pointer; }
.zone-gestion { max-width: var(--largeur); margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
.zone-gestion > h1 { font-size: 1.6rem; margin: 0 0 1rem; }
.entete-zone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.entete-zone h1 { margin: 0; font-size: 1.6rem; }
.boite { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.25rem; margin-bottom: 1.25rem; }
.boite > h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
.boite > p.aide { margin-top: -.4rem; color: var(--gris); font-size: .9rem; }
.compteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.compteurs a { display: block; background: var(--blanc); border: 1px solid var(--trait); border-top: 4px solid var(--c, var(--vert)); border-radius: var(--rayon); padding: 1rem 1.1rem; text-decoration: none; color: var(--encre); }
.compteurs strong { display: block; font-size: 2rem; line-height: 1.1; color: var(--vert-fonce); font-variant-numeric: tabular-nums; }
.deux-colonnes { display: grid; grid-template-columns: 3fr 2fr; gap: 1.25rem; align-items: start; }
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tableau th, .tableau td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau th { font-size: .82rem; color: var(--gris); font-weight: 600; background: var(--surface); }
.tableau td.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau .secondaire { display: block; color: var(--gris); font-size: .82rem; }
.statut { display: inline-block; font-size: .78rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.statut-publiee { color: var(--succes); border-color: #9CC9B2; background: #EEF7F2; }
.statut-brouillon { color: #7A5A00; border-color: #E1C66F; background: #FFF8E1; }
.statut-archivee { color: var(--gris); border-color: var(--trait); background: var(--surface); }
.onglets { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0; list-style: none; }
.onglets a { display: inline-block; padding: .3rem .8rem; border: 1px solid var(--trait); border-radius: 999px; background: var(--blanc); text-decoration: none; color: var(--encre); font-size: .9rem; }
.onglets a[aria-current="true"] { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.pagination { display: flex; gap: 1rem; justify-content: center; margin-top: 1rem; font-size: .9rem; }

/* Formulaires */
.formulaire .grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.formulaire .grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.formulaire .plein { grid-column: 1 / -1; }
.formulaire .champ { display: flex; flex-direction: column; gap: .3rem; }
.formulaire label, .formulaire legend { font-weight: 600; font-size: .92rem; }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=password], .formulaire input[type=number], .formulaire input[type=date],
.formulaire input[type=search], .formulaire select, .formulaire textarea, .formulaire input:not([type]) {
  font: inherit; padding: .5rem .6rem; border: 1px solid #9AA394; border-radius: var(--rayon); background: var(--blanc); width: 100%; }
.formulaire input[type=color] { width: 4rem; height: 2.4rem; padding: .15rem; border: 1px solid #9AA394; border-radius: var(--rayon); }
.formulaire textarea { resize: vertical; }
.formulaire .aide { font-size: .82rem; color: var(--gris); margin: 0; }
.formulaire .erreur { font-size: .85rem; color: var(--alerte); margin: 0; }
.formulaire .avec-erreur input, .formulaire .avec-erreur select, .formulaire .avec-erreur textarea { border-color: var(--alerte); }
.formulaire .case { flex-direction: row; align-items: center; gap: .5rem; }
.formulaire .case input { width: 1.1rem; height: 1.1rem; accent-color: var(--vert); }
.formulaire fieldset { border: 0; margin: 0; padding: 0; }
.formulaire .radio-liste { list-style: none; margin: .3rem 0 0; padding: 0; }
.formulaire .radio-liste li { margin: .3rem 0; }
.formulaire .radio-liste label { font-weight: 400; display: flex; gap: .5rem; align-items: baseline; }
.erreurs-generales { border-left: 4px solid var(--alerte); background: #FBEFEB; padding: .6rem .9rem; margin-bottom: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; position: sticky; bottom: 0; z-index: 2; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: 0 -2px 8px rgba(31,58,31,.08); padding: .9rem 1.25rem; }
.boite .actions { position: static; box-shadow: none; border-width: 1px 0 0; border-radius: 0; margin: 1.25rem -1.25rem -1.25rem; }
.actions .droite { margin-left: auto; display: flex; gap: .75rem; }
.bandeau-statut { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.bandeau-statut form { margin: 0; }

/* Éditeur de couches */
.ligne-couche { border: 1px solid var(--trait); border-radius: var(--rayon); padding: .9rem; margin-bottom: .75rem; background: #FBFCFA; }
.ligne-couche .grille-couche { display: grid; grid-template-columns: 4.5rem minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.6fr); gap: .75rem; }
.ligne-couche .cases { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .6rem 0; }
.ligne-couche .attributs { font-size: .82rem; color: var(--gris); }
.ligne-couche .attributs button { font: inherit; font-size: .8rem; margin: .15rem .2rem 0 0; padding: .05rem .4rem; border: 1px solid var(--trait); background: var(--blanc); border-radius: 3px; cursor: pointer; }
.ligne-simple { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 2fr) auto; gap: .75rem; align-items: end; margin-bottom: .6rem; }
input.court { max-width: 4.5rem; }
.supprimer { font-size: .85rem; color: var(--alerte); }
.etat-geoserver { font-size: .85rem; color: var(--gris); }
.etat-geoserver.ko { color: var(--alerte); }
.connexion-boite { max-width: 24rem; margin: 4rem auto; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .ouverture { grid-template-columns: 1fr; min-height: 0; }
  .ouverture-texte { padding: 1.75rem 1.25rem 1.5rem; }
  .ouverture-carte { min-height: 62vh; }
  .thematiques { grid-template-columns: 1fr; }
  .deux-colonnes, .formulaire .grille, .compteurs { grid-template-columns: 1fr; }
  .formulaire .grille-4 { grid-template-columns: 1fr 1fr; }
  .ligne-couche .grille-couche { grid-template-columns: 1fr 1fr; }
  .ligne-simple { grid-template-columns: 4rem 1fr; }
}
@media (max-width: 760px) {
  .fiche { grid-template-columns: 1fr; gap: .75rem; }
  .fiche img, .sans-apercu { width: 100%; height: 180px; }
  .visionneuse { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .panneau { border-left: 0; border-top: 1px solid var(--trait); max-height: 45dvh; }
  .panneau.replie { max-height: 3.2rem; overflow: hidden; }
  .bascule-panneau { display: block; margin: 0 0 .5rem; }
  .tableau .masquable { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  .entete nav, .acces-gestion, .bascule-panneau, .ol-control { display: none; }
  .visionneuse { grid-template-columns: 1fr; }
}
.legende .aide, .gestion .aide { font-size: .85rem; color: var(--gris); }

.export-attente { color: var(--gris); font-size: .9rem; list-style: none; }