/* =====================================================================
   Patrimoine communal — feuille de style
   Univers : l'atlas et le plan cadastral (courbes de niveau, parcelles, emprises), à la couleur de la marque.
   Polices : Bricolage Grotesque (titres, chiffres) et Instrument Sans (interface), licence SIL OFL, servies localement.
   ===================================================================== */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/static/vendor/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url("/static/vendor/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations"); }

:root {
  --nuit: #10292F;            /* barre latérale, vitrine de connexion */
  --encre: #17262B;           /* texte */
  --encre-2: #3E5157;         /* texte secondaire */
  --gris: #66787D;            /* légendes, aides */
  --trait: #D8E2DF;           /* bordures */
  --trait-doux: #E7EEEC;
  --lichen: #EEF2F0;          /* fond de page : gris-vert de carte */
  --surface: #FFFFFF;
  --surface-2: #F5F8F7;
  --sarcelle: #0E5A64;        /* couleur de la marque, actions principales */
  --sarcelle-fonce: #0A454D;
  --sarcelle-pale: #E1EEEC;
  --ocre: #C9821F;            /* attention */
  --ocre-pale: #FBF1E1;
  --brique: #A8321F;          /* danger, échec */
  --brique-pale: #F9E8E4;
  --vert: #2D7A4E;
  --vert-pale: #E3F2E8;
  --violet: #7A3BA8;           /* locaux communaux à confirmer (carte : #9B4DCA) */
  --violet-pale: #F2E9F8;
  --courbe: #C7D6D1;
  --rayon-s: 8px; --rayon: 12px; --rayon-l: 18px;
  --ombre: 0 1px 2px rgba(16, 41, 47, .06), 0 2px 8px rgba(16, 41, 47, .05);
  --ombre-haute: 0 12px 40px rgba(16, 41, 47, .18), 0 2px 8px rgba(16, 41, 47, .08);
  --titre: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --texte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--texte); font-size: 15px; line-height: 1.45; color: var(--encre);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--lichen); }
h1, h2, h3, h4 { font-family: var(--titre); margin: 0 0 .5em; line-height: 1.15; letter-spacing: -0.01em; font-optical-sizing: auto; }
h2 { font-size: 1.35rem; font-weight: 650; }
h3 { font-size: 1.05rem; font-weight: 650; color: var(--encre); }
h4 { font-size: .95rem; font-weight: 600; color: var(--encre-2); }
a { color: var(--sarcelle); text-underline-offset: 2px; }
a:hover { color: var(--sarcelle-fonce); }
p { margin: .4em 0; }
code { font-size: .9em; }
.petit { font-size: .82rem; color: var(--gris); }
.chargement { padding: 3em; color: var(--gris); text-align: center; }
:focus-visible { outline: 2px solid var(--ocre); outline-offset: 2px; }

/* ---------------------------------------------------------------- icônes */
svg.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- boutons */
button { font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: .5em; padding: .58em 1.05em; border-radius: var(--rayon); border: 1px solid transparent; background: var(--sarcelle); color: #fff;
  line-height: 1.2; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .08s; white-space: nowrap; }
button:hover:not(:disabled) { background: var(--sarcelle-fonce); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
/* étiquette d'un champ fichier présentée comme un bouton (le champ reste accessible au clavier) */
label.bouton { position: relative; font-weight: 600; font-size: .9rem; cursor: pointer; display: inline-flex; align-items: center;
  padding: .58em 1.05em; border-radius: var(--rayon); background: var(--sarcelle); color: #fff; line-height: 1.2; white-space: nowrap; }
label.bouton:hover { background: var(--sarcelle-fonce); }
label.bouton:focus-within { outline: 2px solid var(--ocre); outline-offset: 2px; }
input.cache { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
button.secondaire { background: var(--sarcelle-pale); color: var(--sarcelle); }
button.secondaire:hover:not(:disabled) { background: #D0E5E1; }
button.discret, button.fantome { background: transparent; color: var(--encre-2); padding: .5em .75em; }
button.discret:hover:not(:disabled), button.fantome:hover:not(:disabled) { background: rgba(14, 90, 100, .08); color: var(--sarcelle); }
button.danger { background: var(--brique-pale); color: var(--brique); }
button.danger:hover:not(:disabled) { background: #F3D6CF; }
button.danger.plein { background: var(--brique); color: #fff; }
button.danger.plein:hover:not(:disabled) { background: #8C2918; }
/* boutons à icône seule (actions des lignes de tableau) */
.icones { display: flex; gap: .3em; align-items: center; flex-wrap: nowrap; }
button.icone { width: 36px; height: 36px; padding: 0; background: var(--surface); color: var(--sarcelle); border: 1px solid var(--trait); border-radius: 10px; }
button.icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button.icone:hover:not(:disabled) { background: var(--sarcelle-pale); border-color: var(--sarcelle); }
button.icone.accent { background: var(--sarcelle); color: #fff; border-color: var(--sarcelle); }
button.icone.accent:hover:not(:disabled) { background: var(--sarcelle-fonce); }
button.icone.danger { color: var(--brique); background: var(--surface); }
button.icone.danger:hover:not(:disabled) { background: var(--brique-pale); border-color: var(--brique); }
button.icone:disabled { opacity: .28; }
.separateur { width: 1px; height: 22px; background: var(--trait); margin: 0 .25em; }
.boutons { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; margin: .6em 0; }

/* ---------------------------------------------------------------- champs */
input, select, textarea { font: inherit; font-size: .92rem; color: var(--encre); padding: .55em .75em; border: 1px solid var(--trait);
  border-radius: 10px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sarcelle); box-shadow: 0 0 0 3px rgba(14, 90, 100, .16); }
select { padding-right: 2em; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366787D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .55em center; background-size: 16px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--sarcelle); }
label { display: block; font-size: .84rem; font-weight: 600; color: var(--encre-2); margin: .7em 0 .3em; }
.ligne-form { display: flex; gap: .7em; flex-wrap: wrap; align-items: flex-end; }
.ligne-form > div { display: flex; flex-direction: column; }
.ligne-form label { margin-top: 0; }

/* ---------------------------------------------------------------- structure */
.coque { display: grid; grid-template-columns: 92px minmax(0, 1fr); height: 100vh; }
.rail { background: var(--nuit); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 18px; position: relative; overflow: hidden; }
.rail::after { content: ""; position: absolute; inset: auto -40px -60px -40px; height: 260px; pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(ellipse at 50% 120%, transparent 0 16px, rgba(199, 214, 209, .07) 16px 17px); }
.rail-marque { width: 52px; height: 52px; border-radius: 14px; background: #fff; display: grid; place-items: center; }
.rail-marque img { width: 36px; height: 36px; object-fit: contain; object-position: left; }
.rail-liens { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 10px; position: relative; z-index: 1; }
button.rail-lien { flex-direction: column; gap: 6px; background: transparent; color: rgba(255, 255, 255, .72); padding: 11px 4px 9px;
  border-radius: 14px; font-size: .72rem; font-weight: 600; line-height: 1.15; white-space: normal; text-align: center; width: 100%; }
button.rail-lien svg.ic { width: 22px; height: 22px; }
button.rail-lien:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: #fff; }
button.rail-lien.actif { background: #DCEDE9; color: var(--nuit); }
button.rail-lien.actif:hover { background: #DCEDE9; color: var(--nuit); }
.principal { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.bandeau-demo { display: flex; align-items: center; justify-content: center; gap: .5em; background: var(--ocre-pale); color: #7A4C0C;
  font-size: .82rem; font-weight: 600; padding: .45em 1em; border-bottom: 1px solid #F1DEB9; }
.entete { display: flex; align-items: center; gap: 12px; padding: 10px 24px; min-height: 68px; background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait-doux); position: relative; z-index: 5; }
.entete-commune { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pastille-commune { width: 40px; height: 40px; border-radius: 12px; background: var(--sarcelle-pale); color: var(--sarcelle); display: grid; place-items: center; flex-shrink: 0; }
.pastille-commune svg.ic { width: 21px; height: 21px; }
.titre-page { font-family: var(--titre); font-size: 1.2rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.1; }
.entete-commune .petit { display: block; margin-top: 2px; }
select.choix-commune { margin-top: 3px; padding: .25em 2em .25em .6em; font-size: .82rem; font-weight: 600; color: var(--sarcelle);
  background-color: var(--sarcelle-pale); border-color: transparent; border-radius: 999px; }
.entete .espace { flex: 1; }
.qui { display: flex; align-items: center; gap: 10px; margin-right: 6px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--nuit); color: #fff; display: grid; place-items: center;
  font-family: var(--titre); font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.qui-texte { display: flex; flex-direction: column; line-height: 1.2; font-size: .84rem; }
.qui-texte span { color: var(--gris); font-size: .78rem; }
.page { flex: 1; overflow-y: auto; padding: 26px 28px 40px; }
.page > * { max-width: 1320px; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- blocs, statistiques, tableaux */
.bloc { background: var(--surface); border: 1px solid var(--trait-doux); border-radius: var(--rayon-l); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--ombre); }
.bloc > h3:first-child { display: flex; align-items: center; gap: .5em; }
.cartes-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--surface-2); border-radius: var(--rayon); padding: 12px 14px; }
.stat b { display: block; font-family: var(--titre); font-size: 1.9rem; font-weight: 700; line-height: 1.05; color: var(--sarcelle); letter-spacing: -0.02em; }
table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--surface); }
th, td { text-align: left; padding: .6em .75em; border-bottom: 1px solid var(--trait-doux); vertical-align: top; font-size: .88rem; }
th { background: var(--surface-2); color: var(--encre-2); font-weight: 600; font-size: .8rem; position: sticky; top: 0; z-index: 1; }
th:first-child { border-top-left-radius: 10px; } th:last-child { border-top-right-radius: 10px; }
tr:hover td { background: #F8FBFA; }
.bloc table { border: 1px solid var(--trait-doux); border-radius: var(--rayon); overflow: hidden; }
.badge { display: inline-flex; align-items: center; padding: .15em .6em; border-radius: 999px; font-size: .76rem; font-weight: 650; margin-right: .3em; }
.badge.commune { background: var(--sarcelle-pale); color: var(--sarcelle); }
.badge.partiel { background: var(--ocre-pale); color: #8A560E; }
.badge.autre { background: #ECF0EF; color: var(--gris); }
.badge.a-confirmer { background: var(--violet-pale); color: var(--violet); }
/* ownership to confirm (schema.sql v_building_owner): sheet of the building, page of the municipality */
.bloc.propriete-a-confirmer { border-left: 4px solid var(--violet); background: linear-gradient(90deg, var(--violet-pale), var(--surface) 40%); }
.bloc.propriete-a-confirmer .ligne-form input[type=text] { flex: 1 1 14em; }
.bloc.propriete-dite { padding: 10px 16px; }
.liste-a-confirmer { margin: .4em 0 0; padding-left: 1.2em; }
.liste-a-confirmer li { margin: .2em 0; }
.propriete-corriger { margin: 0 0 12px; }
.propriete-corriger > summary { cursor: pointer; color: var(--gris); }
.propriete-corriger .ligne-form { margin-top: .4em; }
.note-a-confirmer { color: var(--violet); }
/* the other buildings of the parcel (sheet): their ownership, and one answer to reject those still to confirm */
.parcelle-propriete { margin-top: .6em; padding-top: .5em; border-top: 1px solid var(--violet-pale); }
.parcelle-propriete > button { margin-top: .4em; }
.fiab-officielle { color: var(--vert); } .fiab-mesurée { color: #1B6F80; } .fiab-saisie { color: #2F52B8; }
.fiab-estimée { color: #9A5D0B; } .fiab-manquante { color: var(--brique); }

/* pastilles d'état (tâches, contrôles) */
.puce { display: inline-flex; align-items: center; gap: .4em; padding: .2em .65em; border-radius: 999px; font-size: .78rem; font-weight: 650;
  background: #ECF0EF; color: var(--encre-2); white-space: nowrap; }
.puce::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.etat-running { background: var(--sarcelle-pale); color: var(--sarcelle); }
.etat-running::before { animation: battement 1.6s ease-in-out infinite; }
.etat-pending { background: #E9EDFB; color: #3A4FA5; }
.etat-paused { background: var(--ocre-pale); color: #8A560E; }
.etat-done, .controle-ok { background: var(--vert-pale); color: var(--vert); }
.etat-failed, .controle-failed { background: var(--brique-pale); color: var(--brique); }
.controle-watch { background: var(--ocre-pale); color: #8A560E; }
@keyframes battement { 50% { opacity: .25; } }

/* messages */
.message { display: block; padding: .7em .9em; border-radius: var(--rayon); margin: .6em 0; font-size: .9rem; border: 1px solid transparent; }
.message.erreur { background: var(--brique-pale); color: var(--brique); border-color: #F0CFC7; }
.message.ok { background: var(--vert-pale); color: var(--vert); border-color: #CBE5D4; }
.message.attention { background: var(--ocre-pale); color: #8A5A0D; border-color: #EBD3A6; }
.secret code { background: #fff; border: 1px solid var(--trait); padding: .15em .45em; border-radius: 6px; font-size: 1rem; user-select: all; }
.identifiants { margin-top: .6em; line-height: 2.1; }

/* état vide */
.empty { text-align: center; padding: 70px 20px; max-width: 520px; }
.vide-icone { width: 64px; height: 64px; border-radius: 20px; background: var(--sarcelle-pale); color: var(--sarcelle); display: inline-grid; place-items: center; margin-bottom: 14px; }
.vide-icone svg.ic { width: 30px; height: 30px; }

/* sélecteur segmenté (sous-onglets de l'administration) */
.segments { display: flex; gap: 4px; padding: 4px; background: #E3EBE8; border-radius: 14px; width: fit-content; max-width: 100%; overflow-x: auto; margin: 0 0 18px; }
button.segment { background: transparent; color: var(--encre-2); padding: .5em .95em; border-radius: 10px; font-size: .86rem; }
button.segment:hover:not(:disabled) { background: rgba(255, 255, 255, .6); color: var(--encre); }
button.segment.actif { background: var(--surface); color: var(--encre); box-shadow: var(--ombre); }

/* fenêtres */
.modale-fond { position: fixed; inset: 0; background: rgba(16, 41, 47, .42); backdrop-filter: blur(3px); display: flex; align-items: center;
  justify-content: center; z-index: 50; padding: 16px; animation: apparaitre .16s ease-out; }
.modale { background: var(--surface); border-radius: 22px; padding: 24px 26px; width: min(900px, 94vw); max-height: 90vh; overflow: auto; box-shadow: var(--ombre-haute);
  animation: monter .2s ease-out; }
.modale.confirmation { max-width: 520px; }
.modale .option { display: flex; gap: .5em; align-items: center; color: var(--encre); font-size: .9rem; margin: .6em 0; font-weight: 500; }
.actions-modale { display: flex; justify-content: flex-end; gap: .6em; margin-top: 1.2em; }
/* Relance d'étapes : étapes, puis sources des compléments en retrait */
.modale.relance { max-width: 640px; }
.etapes-relance { margin: .6em 0 .2em; }
.modale .etapes-relance .option { margin: .3em 0; flex-wrap: wrap; }
.sources-relance { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 1em;
  margin: 0 0 .4em 1.7em; padding-left: .8em; border-left: 2px solid var(--trait-doux); }
.modale .sources-relance .option { margin: .2em 0; font-size: .84rem; font-weight: 450; }
.relance .statut-donnee { margin-left: .2em; }
pre.audit { max-height: 55vh; overflow: auto; background: var(--nuit); color: #D7E4E1; padding: 1em 1.1em; border-radius: var(--rayon); font-size: .78rem; white-space: pre-wrap; }
@keyframes apparaitre { from { opacity: 0; } }
@keyframes monter { from { opacity: 0; transform: translateY(8px) scale(.985); } }

/* ---------------------------------------------------------------- carte */
.carte-page { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto var(--largeur-panneau, 450px);
  position: relative; padding: 0; overflow: hidden; }
/* poignée entre la carte et le panneau : glisser pour changer la largeur, bouton pour élargir d'un coup */
.poignee-panneau { width: 12px; position: relative; z-index: 2; cursor: col-resize; touch-action: none; background: var(--trait-doux);
  border-left: 1px solid var(--trait); display: flex; align-items: center; justify-content: center; }
.poignee-panneau::after { content: ""; width: 0; height: 40px; border-left: 2px dotted var(--gris); opacity: .6; }
.poignee-panneau:hover, .poignee-panneau.actif, .poignee-panneau:focus-visible { background: var(--sarcelle-pale); outline: none; }
.poignee-panneau:focus-visible::after, .poignee-panneau.actif::after { border-left-color: var(--sarcelle); opacity: 1; }
.poignee-panneau button.icone { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px;
  border-radius: 50%; box-shadow: 0 1px 4px rgba(16, 41, 47, .18); cursor: pointer; }
.poignee-panneau button.icone svg { width: 15px; height: 15px; }
.carte-page > * { max-width: none; margin: 0; }
.conteneur-carte { position: relative; min-height: 0; }
#carte { position: absolute; inset: 0; background-color: #E4EBE8;
  background-image: repeating-radial-gradient(ellipse at 30% 40%, transparent 0 34px, rgba(14, 90, 100, .07) 34px 35px); }
.panneau { overflow-y: auto; background: var(--lichen); padding: 14px 14px 30px; border-left: 1px solid var(--trait-doux); }
.panneau .bloc { padding: 16px 18px; }
.panneau > h2 { padding: 4px 4px 0; }
.outils-carte { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-radius: 16px;
  padding: 12px 14px; box-shadow: var(--ombre-haute); font-size: .85rem; display: flex; flex-direction: column; gap: 8px; max-width: 280px; }
.outils-carte label { display: flex; gap: .55em; align-items: center; margin: 0; color: var(--encre); font-weight: 500; font-size: .85rem; }
.outils-carte select { width: 100%; font-size: .84rem; padding: .4em 2em .4em .6em; }
.legende { display: flex; flex-wrap: wrap; align-items: center; gap: .15em .3em; }
.legende span { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .2em; vertical-align: -1px; }
/* interrupteurs */
label.interrupteur { cursor: pointer; user-select: none; }
.interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.glissiere { width: 34px; height: 20px; border-radius: 999px; background: #C6D3CF; position: relative; flex-shrink: 0; transition: background .15s; }
.glissiere::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .18s ease; }
.interrupteur input:checked + .glissiere { background: var(--sarcelle); }
.interrupteur input:checked + .glissiere::after { transform: translateX(14px); }
.interrupteur input:focus-visible + .glissiere { outline: 2px solid var(--ocre); outline-offset: 2px; }
.maplibregl-ctrl-group { border-radius: 12px !important; box-shadow: var(--ombre-haute) !important; overflow: hidden; }
.photo img { max-width: 100%; border-radius: var(--rayon); }

/* ---------------------------------------------------------------- ingestions */
.avancement { margin-top: .4em; min-width: 180px; max-width: 320px; }
.avancement .barre { height: 6px; background: #E1E9E6; border-radius: 999px; overflow: hidden; }
.avancement .barre span { display: block; height: 100%; background: linear-gradient(90deg, var(--sarcelle), #2A8C93); border-radius: 999px; transition: width .6s ease; }
.avancement .petit { margin-top: .25em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ol.etapes { list-style: none; padding: 0; margin: .6em 0; columns: 2; column-gap: 1.5em; font-size: .86rem; }
ol.etapes li { display: flex; justify-content: space-between; gap: .8em; padding: .2em 0; break-inside: avoid; }
ol.etapes li.faite::before { content: "✓"; color: var(--vert); margin-right: .3em; font-weight: 700; }
ol.etapes li.courante { font-weight: 650; color: var(--sarcelle); }
ol.etapes li.courante::before { content: "●"; margin-right: .35em; font-size: .7em; animation: battement 1.6s ease-in-out infinite; }
ol.etapes li span:first-child { flex: 1; }
ol.etapes li.interrompue { font-weight: 650; color: var(--brique); }
ol.etapes li.interrompue::before { content: "✗"; margin-right: .3em; font-weight: 700; }
.avancement.interrompue .barre span { background: var(--brique); }

/* ---------------------------------------------------------------- risque propre, assurance, climat */
.risque-propre h4 { margin: .9em 0 .35em; }
.jauge { display: grid; grid-template-columns: 8.5em 1fr 3.4em; align-items: center; gap: .7em; margin: .45em 0; font-size: .9rem; }
.jauge .piste { height: 10px; background: #E3EAE7; border-radius: 999px; overflow: hidden; }
.jauge .piste span { display: block; height: 100%; border-radius: 999px; }
.jauge b { text-align: right; font-family: var(--titre); font-weight: 700; }
.niveau-faible .piste span { background: #3E9A61; } .niveau-modere .piste span { background: #9DC36B; }
.niveau-notable .piste span { background: #E2A33A; } .niveau-eleve .piste span { background: var(--brique); }
.niveau-eleve b { color: var(--brique); }
.risque-propre details, .bloc details { margin-top: .6em; font-size: .88rem; }
summary { cursor: pointer; color: var(--sarcelle); font-weight: 650; padding: .2em 0; }
/* Patrimoine et documents sources : familles et sous-sections repliées, liens à droite de chaque entrée ; une entrée
   avec des détails (historique, description…) se déplie à son tour */
/* Pièces jointes : une ligne par fichier (lien, taille, auteur, date ; partage, suppression) */
.pieces-jointes ul { list-style: none; padding: 0; margin: .3em 0 .6em; }
.pieces-jointes li { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .6em; padding: .35em 0; border-bottom: 1px solid var(--trait-doux); }
.pieces-jointes li:last-child { border-bottom: none; }
.pieces-jointes li a { font-weight: 600; overflow-wrap: anywhere; }
.pieces-jointes .partage { display: inline-flex; align-items: center; gap: .3em; }
.pieces-jointes .position-photo { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .2em .6em; }
.pieces-jointes .position-photo svg { width: 14px; height: 14px; color: #C2185B; }
.pieces-jointes .position-photo.sans-position { color: var(--gris); }
.pieces-jointes .sur-carte { display: inline-flex; align-items: center; gap: .3em; }
.pieces-jointes .localiser { font-weight: 600; }
.modale .options-modale { max-height: 40vh; overflow-y: auto; margin: .4em 0 .2em; }
.compte-photos { color: var(--gris); margin-left: .25em; }
.popup-photos { font-size: .86rem; max-height: 360px; overflow-y: auto; }
.popup-photo { margin: .3em 0 .7em; }
.popup-photo img { display: block; width: 100%; max-height: 200px; object-fit: contain; border-radius: 6px; background: var(--lichen); }
.popup-photo figcaption { margin-top: .3em; overflow-wrap: anywhere; }
.popup-photo .liens { display: flex; gap: .8em; margin-top: .2em; }
.popup-photo .liens a { font-weight: 600; }
/* Analyse des pièces jointes : résultat sous chaque fichier, consentement de la commune, propositions, faits connus */
.pieces-jointes li .analyse-faite, .pieces-jointes li .analyse-echec { flex-basis: 100%; }
.pieces-jointes li .analyse-echec { color: var(--brique); }
.pieces-jointes .analyse { margin-top: .6em; padding-top: .5em; border-top: 1px dashed var(--trait); }
.consentement { background: var(--surface-2); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .5em .7em; margin-bottom: .5em; }
.consentement label.option { font-weight: 600; display: flex; gap: .4em; align-items: flex-start; }
.propositions { border-left: 3px solid var(--ocre); }
.propositions h4 { margin: .7em 0 .2em; font-size: .9rem; }
.liste-propositions { list-style: none; padding: 0; margin: .2em 0; }
.liste-propositions li { padding: .45em 0; border-bottom: 1px solid var(--trait-doux); }
.liste-propositions li:last-child { border-bottom: none; }
.liste-propositions .valeur-proposee { width: 12em; max-width: 100%; }
.extrait { margin: .3em 0; padding: .2em .6em; border-left: 2px solid var(--trait); font-style: italic; overflow-wrap: anywhere; }
.table-faits { width: 100%; }
.table-faits td.nombre { white-space: nowrap; text-align: right; }
.table-faits tr.retire td { color: var(--gris); text-decoration: line-through; }
.table-faits tr.retire td .petit { text-decoration: none; }
.formulaire-fait { display: grid; gap: .4em; margin: .4em 0; }
.formulaire-fait .description-fait { width: 100%; }
.marches .liens { margin-left: .5em; }
.marches .liens a, .marches ul.liens-sources a { font-size: .82rem; font-weight: 600; }
.marches .liens a::after, .marches ul.liens-sources a::after { content: " ↗"; font-weight: 400; }
.marches ul.liens-sources { padding-left: 1.1em; margin: .2em 0 .5em; }
.marches .sources-marches { padding-left: 1.1em; margin: .5em 0; }
.table-marches { width: 100%; }
.table-marches td { vertical-align: top; }
.table-marches td.nombre { white-space: nowrap; text-align: right; }
/* point du dernier import : lien vers le bâtiment, fiche ouverte avec la valeur à contrôler surlignée */
.lien-controle { font-weight: 600; }
.bandeau-controle { margin: 0 0 10px; }
.fiche-infos tr.a-controler td { background: #FFF1D6; box-shadow: inset 0 0 0 9999px rgba(232, 131, 12, .08); }
.fiche-infos tr.a-controler td:first-child { border-left: 4px solid #E8830C; }
/* en-tête de la page de la commune (.chiffres-commune) : les six chiffres du rapport PDF sur deux lignes de trois, puis
   l'exposition aux risques en dessous, pleine largeur */
.tuiles-rapport { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; border-left: 4px solid #0E5A64;
  margin: .5em 0 1em; }
.tuiles-rapport .tuile { background: #EEF2F5; padding: 12px 10px 10px; min-height: 76px; display: flex; flex-direction: column;
  justify-content: center; gap: 2px; }
.tuiles-rapport .tuile b { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tuiles-rapport .tuile span { font-size: .78rem; color: #5B6B76; line-height: 1.25; }
.exposition .graphe-risques { display: grid; gap: 5px; margin: .6em 0 .2em; }
.exposition .risque-ligne { display: grid; grid-template-columns: minmax(8em, 44%) minmax(0, 1fr); align-items: center; gap: 8px;
  font-size: .8rem; }
.exposition .risque-nom { text-align: right; color: var(--encre); line-height: 1.2; }
.exposition .risque-barres { display: flex; align-items: center; gap: 2px; min-height: 12px; border-left: 1px solid var(--encre); }
.exposition .barre-exposes, .exposition .barre-indisponible { display: inline-block; height: 10px; flex: none; }
.exposition .barre-exposes { background: #C62828; }
.exposition .barre-indisponible, .exposition .cle-indisponible { background: repeating-linear-gradient(135deg, #BDBDBD 0 3px, #FFFFFF 3px 5px); }
.exposition .bout { border-radius: 0 4px 4px 0; }
.exposition .risque-valeur { margin-left: 4px; color: var(--encre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exposition .graphe-axe { text-align: center; margin-left: 44%; }
.exposition .graphe-legende { text-align: center; margin: .3em 0 .5em; }
.exposition .cle { display: inline-block; width: 14px; height: 10px; margin: 0 5px 0 12px; vertical-align: middle; }
.exposition .cle-exposes { background: #C62828; }
.table-depenses { width: 100%; }
.table-depenses td { vertical-align: top; }
.table-depenses td.nombre { text-align: right; white-space: nowrap; }
.depenses .liens a, .equipements-sportifs .liens a { font-size: .82rem; font-weight: 600; }
.depenses .liens a::after, .equipements-sportifs .liens a::after { content: " ↗"; font-weight: 400; }
.equipements-sportifs .liens { margin-left: .5em; }
.equipements-sportifs .installation h5 { margin: .6em 0 .2em; font-size: .9rem; }
.equipements-sportifs ul { padding-left: 1.1em; margin: .1em 0 .4em; }
.espace-public details.espace-categorie { margin: .35em 0; }
.espace-public details.espace-categorie > summary { font-weight: 600; cursor: pointer; }
.espace-public .pastille { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .45em; vertical-align: baseline; }
.espace-public .espace-genre { padding-left: 1.2em; }
.espace-public .espace-genre h5 { margin: .5em 0 .2em; font-size: .9rem; }
.espace-public ul { padding-left: 1.1em; margin: .1em 0 .4em; }
.espace-public .liens, .popup-espace .liens { margin-left: .5em; }
.espace-public .liens a, .popup-espace .liens a { font-size: .82rem; font-weight: 600; }
.espace-public .liens a::after, .popup-espace .liens a::after { content: " ↗"; font-weight: 400; }
.popup-espace { font-size: .86rem; }
.popup-espace .liens { margin-left: 0; }
.table-marches .duree { color: var(--encre-2); margin: .15em 0; }
.table-marches .puce-encours { margin-left: .5em; padding: 0 .5em; border-radius: 999px; background: var(--vert-pale); color: var(--vert);
  font-weight: 600; font-size: .78rem; }
.table-marches details.lots { margin: .2em 0; font-size: .86rem; }
.table-marches .deja { color: var(--vert, #2e7d32); }
.marches ul.avis { padding-left: 1.1em; margin: .3em 0 .6em; }
.documents .doc-famille .doc-famille { margin: .25em 0 .25em .9em; }
.documents .doc-note { margin-left: .6em; font-size: .78rem; font-weight: 600; color: var(--brique); }
.documents details.doc-entree { margin: 0; font-size: inherit; }
.documents .doc-entree > summary { color: inherit; font-weight: inherit; padding: 0; }
.documents .doc-details p { margin: .3em 0 .3em 1.1em; font-size: .86rem; }
.documents ul { list-style: none; padding: 0; margin: .3em 0 .5em; }
.documents li { padding: .35em 0; border-bottom: 1px solid var(--trait-doux); line-height: 1.4; }
.documents li:last-child { border-bottom: none; }
.documents .doc-titre { font-weight: 600; color: var(--encre); }
.documents .liens { display: inline-flex; flex-wrap: wrap; gap: .2em .8em; margin-left: .6em; }
.documents .liens a { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.documents .liens a::after { content: " ↗"; font-weight: 400; }
.documents p.liens { margin: .2em 0 .4em; display: flex; }
.risque-propre ul { margin: .3em 0; padding-left: 1.2em; }
ul.actions { padding-left: 0; list-style: none; }
ul.actions li { margin: .35em 0; padding: .55em .7em; background: var(--surface-2); border-radius: 10px; font-size: .88rem; }
/* min-height, not height: on a narrow screen a label may wrap before its unit, and the chart then grows instead of
   spilling onto the text above */
.histogramme { display: flex; align-items: flex-end; gap: .45em; min-height: 110px; margin: .8em 0; }
.histogramme .colonne { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; min-width: 0; }
.histogramme .barre { width: 100%; max-width: 38px; background: var(--sarcelle); border-radius: 6px 6px 2px 2px; }
.histogramme .value { font-size: .7rem; line-height: 1.15; text-align: center; margin-bottom: .25em; color: var(--encre-2);
  font-variant-numeric: tabular-nums; }
.histogramme .year { font-size: .74rem; margin-top: .25em; color: var(--encre-2); }
.indice-bt01 { margin-top: .9em; border-top: 1px solid var(--trait-doux); padding-top: .7em; }
.petit-histo { min-height: 72px; } .petit-histo .barre { max-width: 22px; background: #8DBDB7; }

/* ---------------------------------------------------------------- console de diagnostic */
.diag-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: .7em 0 1.1em; }
.diag-carte { border-radius: var(--rayon); padding: 12px 14px; border: 1px solid var(--trait-doux); background: var(--surface-2); color: var(--encre); }
.diag-carte b { display: block; margin-top: .25em; font-family: var(--titre); font-size: 1.02rem; }
.diag-carte.controle-ok { background: #F1F8F3; } .diag-carte.controle-watch { background: #FDF6EA; } .diag-carte.controle-failed { background: #FCEFEC; }
.diag-grille { display: grid; grid-template-columns: minmax(230px, 1fr) 3fr; gap: 16px; align-items: start; }
.diag-pretes { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: .9em; }
.diag-pretes button { font-size: .8rem; padding: .4em .8em; border-radius: 999px; }
.diag-sql { width: 100%; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85rem; tab-size: 2; background: var(--surface-2); }
.diag-statut { margin: .5em 0; display: flex; gap: .8em; align-items: center; flex-wrap: wrap; }
.diag-resultats { max-height: 60vh; overflow: auto; border: 1px solid var(--trait-doux); border-radius: var(--rayon); }
.diag-resultats table { font-size: .8rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.diag-resultats th { white-space: nowrap; border-radius: 0; }
.diag-resultats th .type { display: block; font-weight: 400; color: var(--gris); font-size: .7rem; }
.diag-resultats td { max-width: 28em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diag-resultats td.nombre { text-align: right; } .diag-resultats td.nul { color: #A2ADB0; font-style: italic; }
.diag-catalogue input[type=search] { width: 100%; margin-bottom: .6em; }
.diag-catalogue ul { list-style: none; padding-left: .4em; margin: .3em 0; max-height: 40vh; overflow: auto; font-size: .86rem; }
.diag-catalogue li { padding: .15em 0; }
.diag-detail { margin-top: .9em; border-top: 1px solid var(--trait-doux); padding-top: .6em; }
.diag-colonnes { font-size: .8rem; border: none !important; } .diag-colonnes td { padding: .15em .5em .15em 0; border: none; }

/* ---------------------------------------------------------------- connexion */
.ecran-connexion { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr); min-height: 100vh; }
.vitrine { position: relative; background: var(--nuit); color: #fff; overflow: hidden; display: flex; align-items: flex-end; }
.vitrine-plan { position: absolute; inset: 0; }
.vitrine-plan svg { width: 100%; height: 100%; display: block; }
.plan .courbes path { fill: none; stroke: rgba(199, 214, 209, .26); stroke-width: 1.3; stroke-dasharray: 900; stroke-dashoffset: 900; animation: tracer 2.4s ease-out forwards; }
.plan .courbes path:nth-child(2) { animation-delay: .1s; } .plan .courbes path:nth-child(3) { animation-delay: .2s; }
.plan .courbes path:nth-child(4) { animation-delay: .3s; } .plan .courbes path:nth-child(5) { animation-delay: .15s; }
.plan .courbes path:nth-child(6) { animation-delay: .25s; } .plan .courbes path:nth-child(7) { animation-delay: .35s; }
.plan .riviere { fill: none; stroke: #4F9AA4; stroke-width: 7; stroke-linecap: round; opacity: .55; stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: tracer 2.2s .4s ease-out forwards; }
.plan .parcelles path { fill: rgba(255, 255, 255, .025); stroke: rgba(255, 255, 255, .32); stroke-width: 1; stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: tracer 1.4s 1.1s ease-out forwards; }
.plan .batiments rect { fill: #8CC8C0; opacity: 0; animation: poser .45s ease-out forwards; }
.plan .batiments rect:nth-child(1) { animation-delay: 1.9s; } .plan .batiments rect:nth-child(2) { animation-delay: 2s; }
.plan .batiments rect:nth-child(3) { animation-delay: 2.1s; } .plan .batiments rect:nth-child(4) { animation-delay: 2.2s; }
.plan .batiments rect:nth-child(5) { animation-delay: 2.3s; } .plan .batiments rect:nth-child(6) { animation-delay: 2.4s; }
.plan .batiments rect.phare { fill: #F0B44C; animation-delay: 2.65s; }
.plan .onde { fill: none; stroke: #F0B44C; stroke-width: 2; opacity: 0; transform-origin: 356px 245px; animation: onde 1.6s 2.9s ease-out 2; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes poser { from { opacity: 0; transform: translateY(-6px); } to { opacity: .92; transform: none; } }
@keyframes onde { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.5); } }
.vitrine-texte { position: relative; z-index: 1; padding: 0 56px 56px; max-width: 640px;
  background: linear-gradient(0deg, var(--nuit) 55%, rgba(16, 41, 47, 0)); padding-top: 120px; }
.vitrine-texte h1 { font-size: clamp(2rem, 3.4vw, 3.15rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; margin-bottom: .45em; }
.chapeau { font-size: 1.05rem; color: rgba(255, 255, 255, .78); max-width: 36em; line-height: 1.5; }
ul.atouts { list-style: none; padding: 0; margin: 1.4em 0 0; display: grid; gap: .7em; }
ul.atouts li { display: flex; align-items: center; gap: .8em; color: rgba(255, 255, 255, .9); font-size: .95rem; }
.atout-icone { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .09); display: grid; place-items: center; color: #F0B44C; flex-shrink: 0; }
.cote-connexion { display: grid; place-items: center; padding: 32px 20px; background: var(--lichen); }
.connexion { width: min(420px, 100%); background: var(--surface); border-radius: 24px; padding: 34px 34px 28px; box-shadow: var(--ombre-haute); }
.connexion .logo-connexion, .connexion img { height: 46px; margin-bottom: 18px; }
.connexion h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: .2em; }
.connexion form input, .formulaire-connexion input { width: 100%; padding: .7em .85em; font-size: .95rem; }
.valider-connexion { margin-top: 1.3em; }
.valider-connexion button { width: 100%; padding: .78em 1em; font-size: .95rem; }
.demo { margin-top: 1.4em; padding-top: 1.1em; border-top: 1px solid var(--trait-doux); }
.puces-demo { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .5em; }
button.puce-demo { background: var(--surface-2); color: var(--encre-2); border: 1px solid var(--trait); border-radius: 999px; padding: .35em .85em; font-size: .82rem; }
button.puce-demo:hover:not(:disabled) { background: var(--sarcelle-pale); color: var(--sarcelle); border-color: transparent; }

/* ---------------------------------------------------------------- mobile et tablette */
@media (max-width: 900px) {
  .coque { grid-template-columns: 1fr; height: auto; min-height: 100vh; padding-bottom: 72px; }
  .principal { height: auto; }
  .page { overflow: visible; padding: 18px 14px 30px; }
  .rail { position: fixed; bottom: 0; left: 0; right: 0; height: 68px; flex-direction: row; padding: 6px 8px; z-index: 40; gap: 0;
    box-shadow: 0 -4px 20px rgba(16, 41, 47, .18); }
  .rail::after, .rail-marque { display: none; }
  .rail-liens { flex-direction: row; padding: 0; gap: 4px; justify-content: space-around; }
  button.rail-lien { padding: 7px 2px 6px; font-size: .66rem; border-radius: 12px; }
  .entete { padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .qui-texte, .qui { display: none; }
  .entete button.fantome { padding: .5em; font-size: 0; gap: 0; }          /* icône seule ; le texte reste lu par les lecteurs d'écran */
  .entete button.fantome svg.ic { width: 20px; height: 20px; }
  .entete { flex-wrap: nowrap; }
  .titre-page { font-size: 1.05rem; }
  .carte-page { grid-template-columns: 1fr; overflow: visible; }
  .poignee-panneau { display: none; }
  .conteneur-carte { height: 56vh; }
  .panneau { border-left: none; }
  .outils-carte { max-width: calc(100% - 70px); font-size: .8rem; padding: 10px 12px; }
  .ecran-connexion { grid-template-columns: 1fr; }
  .vitrine { min-height: 330px; }
  .vitrine-texte { padding: 90px 22px 26px; }
  .vitrine-texte h1 { font-size: 1.8rem; }
  ul.atouts { display: none; }
  .connexion { padding: 26px 22px; }
  .diag-grille { grid-template-columns: 1fr; }
  ol.etapes { columns: 1; }
}

/* animations réduites à la demande de l'utilisateur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .plan .courbes path, .plan .riviere, .plan .parcelles path { stroke-dashoffset: 0; }
  .plan .batiments rect { opacity: .92; }
}

/* ---------------------------------------------------------------- fiche de bâtiment */
.tete-fiche { padding: 6px 4px 4px; }
.tete-fiche h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: .3em; }
.titre-section { margin: 1.1em 4px .55em; }
table.fiche-infos, table.fiche-infos tbody { display: block; background: transparent; border: none; }
.fiche-infos tr.entete-fiche { display: none; }
.fiche-infos tr { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; grid-template-areas: "lib src act" "val fiab act";
  align-items: center; column-gap: 10px; row-gap: 2px; padding: 9px 10px 9px 14px; background: var(--surface); border-radius: 12px; margin-bottom: 6px;
  border: 1px solid var(--trait-doux); }
.fiche-infos tr:hover td { background: transparent; }
.fiche-infos td { border: none; padding: 0; font-size: .9rem; }
.fiche-infos .f-libelle { grid-area: lib; font-size: .76rem; color: var(--gris); font-weight: 600; }
.fiche-infos .f-valeur { grid-area: val; font-weight: 650; overflow-wrap: anywhere; }
.fiche-infos .f-vide { color: #A9B4B6; font-weight: 500; }
.fiche-infos .f-source { grid-area: src; justify-self: end; font-size: .72rem; color: var(--gris); }
.fiche-infos .f-fiab { grid-area: fiab; justify-self: end; font-size: .72rem; font-weight: 650; padding: .1em .6em; border-radius: 999px; background: #EEF2F1; }
.fiche-infos .f-fiab.fiab-officielle { background: var(--vert-pale); } .fiche-infos .f-fiab.fiab-mesurée { background: #E0F0F2; }
.fiche-infos .f-fiab.fiab-saisie { background: #E7ECFA; } .fiche-infos .f-fiab.fiab-estimée { background: var(--ocre-pale); }
.fiche-infos .f-fiab.fiab-manquante { background: var(--brique-pale); }
.fiche-infos .f-action { grid-area: act; }
.fiche-infos .f-action button.icone { width: 32px; height: 32px; border-color: transparent; background: transparent; }
.fiche-infos .f-action button.icone:hover { background: var(--sarcelle-pale); }
.fiche-infos td[colspan] { grid-column: 1 / -1; grid-row: 1 / -1; }
.fiche-infos td[colspan] .ligne-form { margin-top: .5em; }
table.fiche-risques { border: 1px solid var(--trait-doux); border-radius: var(--rayon); overflow: hidden; }
table.fiche-risques td:first-child { color: var(--encre-2); font-weight: 600; text-transform: none; width: 38%; }
/* logo de la barre latérale : le symbole seul */
.rail-marque { overflow: hidden; place-items: center start; padding-left: 8px; }
.rail-marque img { height: 36px; width: auto; max-width: none; object-fit: initial; }

/* ---------------------------------------------------------------- registre des risques */
.registre-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.registre-tete h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: .2em; }
.registre-tete p { max-width: 60ch; }
.tuiles-risques { display: flex; gap: 10px; }
.tuile-risque { background: var(--surface); border: 1px solid var(--trait-doux); border-radius: var(--rayon); padding: 10px 16px; min-width: 120px; box-shadow: var(--ombre); }
.tuile-risque b { display: block; font-family: var(--titre); font-size: 1.8rem; line-height: 1; font-weight: 700; color: var(--encre); }
.tuile-risque span { font-size: .8rem; color: var(--gris); }
.tuile-risque.watch b { color: #A5640D; } .tuile-risque.manque b { color: var(--brique); }
.puces-reconnus { display: flex; flex-wrap: wrap; gap: .4em; }
.puce-reconnu { background: var(--ocre-pale); color: #7A4C0C; border-radius: 999px; padding: .3em .8em; font-size: .84rem; font-weight: 600; }
.famille-risques h3, .reconnus h3 { display: flex; align-items: center; gap: .55em; }
.famille-risques h3 svg.ic, .reconnus h3 svg.ic { color: var(--sarcelle); width: 20px; height: 20px; }
.entete-risques, .ligne-risque { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.7fr) minmax(130px, 1fr) minmax(150px, 1fr); gap: 14px; align-items: center; }
.entete-risques { padding: 0 12px 6px; font-weight: 600; }
.ligne-risque { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--trait-doux); margin-bottom: 6px; position: relative; background: var(--surface); }
.ligne-risque::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: transparent; }
.ligne-risque.niveau-watch::before { background: var(--ocre); }
.ligne-risque.niveau-unknown::before { background: var(--brique); }
.ligne-risque.niveau-watch { background: #FFFCF6; }
.lr-nom b { display: block; font-size: .92rem; } .lr-nom .petit { display: block; margin-top: 2px; }
.lr-commune { font-size: .86rem; color: var(--encre-2); }
.lr-batiments { display: flex; flex-direction: column; gap: 4px; }
.lr-compte { font-family: var(--titre); font-weight: 700; font-size: .95rem; }
.lr-piste { height: 6px; background: #E6ECEA; border-radius: 999px; overflow: hidden; }
.lr-piste span { display: block; height: 100%; background: var(--ocre); border-radius: 999px; }
.niveau-neutral .lr-piste span { background: #9DB8B2; }
.lr-statut { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.statut-donnee { font-size: .75rem; font-weight: 650; padding: .15em .6em; border-radius: 999px; }
.statut-ok { background: var(--vert-pale); color: var(--vert); } .statut-neutral { background: #ECF0EF; color: var(--encre-2); }
.statut-manque { background: var(--brique-pale); color: var(--brique); }
@media (max-width: 900px) {
  .entete-risques { display: none; }
  .ligne-risque { grid-template-columns: 1fr 1fr; }
  .lr-nom { grid-column: 1 / -1; }
  .tuiles-risques { width: 100%; } .tuile-risque { flex: 1; min-width: 0; }
}

.connexion .version { margin-top: 1.2em; font-size: .74rem; color: #9AA8AB; text-align: right; }

/* compte 616 par sous-compte : barres empilées (6161 en bas), légende, tableau de la dernière année et détail par année */
.histogramme .barre.empilee { display: flex; flex-direction: column-reverse; gap: 2px; overflow: hidden; background: transparent; }
.histogramme .barre.empilee span { display: block; min-height: 2px; }
.table-616 { width: 100%; margin: .4em 0; }
.table-616 caption { text-align: left; caption-side: top; padding-bottom: .2em; }
.table-616 td.nombre, .table-616 th.nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-616 .pastille { display: inline-block; width: .7em; height: .7em; border-radius: 3px; vertical-align: baseline; }
.detail-616 { margin: .3em 0 .6em; }

/* façades plaquées : ligne de la liste des pièces jointes et éditeur (coins sur la photo, côté du bâtiment, aperçu) */
.facade-photo { display: flex; align-items: center; gap: .35em; flex-wrap: wrap; }
.facade-photo svg.ic { width: 14px; height: 14px; color: var(--sarcelle); }
.modale.editeur-facade { width: min(1100px, 96vw); max-width: 96vw; max-height: 94vh; overflow: auto; }
.corps-facade { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); gap: 16px; align-items: start; margin: .6em 0; }
.cadre-photo-facade { position: relative; display: inline-block; max-width: 100%; line-height: 0; user-select: none; touch-action: none;
  justify-self: center; }
.cadre-photo-facade img { display: block; max-width: 100%; max-height: 64vh; }
.trace-facade { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.contour-facade { fill: rgba(194, 24, 91, .14); stroke: #C2185B; stroke-width: 2; vector-effect: non-scaling-stroke; }
.coin-facade { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; min-height: 0; padding: 0;
  border-radius: 50%; background: #C2185B; color: #fff; border: 2px solid #fff; font-size: .62rem; font-weight: 700; line-height: 1;
  cursor: grab; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); touch-action: none; display: grid; place-items: center; }
.coin-facade:active { cursor: grabbing; }
.coin-facade:focus-visible { outline: 3px solid #F4A63A; outline-offset: 1px; }
.choix-facade { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.plan-facade { width: 100%; height: 220px; background: #fff; border: 1px solid var(--trait-doux); border-radius: 8px; }
.plan-emprise { fill: rgba(14, 90, 100, .12); stroke: none; }
.plan-cote { stroke: #6B7C86; stroke-linecap: round; }
.plan-cote.choisi { stroke: #C2185B; }
.plan-cote-clic { stroke: transparent; cursor: pointer; }
.plan-cote-clic:hover { stroke: rgba(194, 24, 91, .25); }
.plan-photo { fill: #C2185B; stroke: #fff; }
.plan-visee { stroke: #C2185B; stroke-linecap: round; }
.apercu-facade { display: block; max-width: 100%; border: 1px solid var(--trait-doux); background: var(--lichen); min-height: 40px; }
@media (max-width: 760px) { .corps-facade { grid-template-columns: 1fr; } }

/* note de risque de la commune : chiffre, quatre piliers (jauge et fourchette), principaux facteurs, détail */
.note-risque .tete-note { display: flex; align-items: center; gap: 12px; margin: .3em 0 .7em; }
.note-risque .chiffre-note { font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.note-risque .sur-dix { font-size: 1rem; color: #5B6B76; margin-left: -8px; align-self: flex-end; padding-bottom: .35em; }
.piliers-note { display: grid; gap: 7px; margin: .4em 0 .9em; }
.pilier-note { display: grid; grid-template-columns: minmax(9em, 46%) minmax(0, 1fr) 3.8em; gap: 8px; align-items: center; font-size: .82rem; }
.pilier-note .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.jauge-note { position: relative; display: block; height: 12px; background: #EEF2F5; border-radius: 6px; overflow: hidden; }
.jauge-note .fourchette-note { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, #BDBDBD 0 3px, transparent 3px 5px); }
.jauge-note .valeur-note { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 0 4px 4px 0; }
.facteurs-note { margin: .2em 0 .7em; padding-left: 1.1em; font-size: .84rem; }
.facteurs-note li { margin: .15em 0; }
.detail-note h4 { margin: .7em 0 .2em; font-size: .86rem; }
.detail-pilier table { width: 100%; font-size: .8rem; }
.detail-pilier td.nombre { text-align: right; white-space: nowrap; }
.detail-pilier tr.inconnu td { color: #8A5A00; }

/* valeur de reconstruction à neuf : fiche du bâtiment et page de la commune */
.tete-valeur { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: .2em 0 .4em; }
.montant-valeur { font-family: var(--titre); font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--encre); }
.puce-valeur { display: inline-block; border-radius: 999px; padding: .1em .65em; font-size: .76rem; font-weight: 650; }
.puce-valeur.ok { background: #E6F4EA; color: #2E7D32; } .puce-valeur.attention { background: var(--ocre-pale); color: #8A5A0D; }
.puce-valeur.erreur { background: var(--brique-pale); color: var(--brique); }
.methode-valeur table { width: 100%; font-size: .8rem; } .methode-valeur td:first-child { width: 7em; color: #5B6B76; vertical-align: top; }
.saisie-valeur { margin-top: .5em; border-top: 1px solid var(--trait-doux); padding-top: .5em; }
.saisie-valeur input[type=number] { width: 10em; } .saisie-valeur input[type=text] { width: 13em; }
.table-valeurs { width: 100%; font-size: .82rem; } .table-valeurs .nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* contrats d'assurance et échéances (page de la commune) */
.calendrier-assurance { list-style: none; padding: 0; margin: .4em 0; } .calendrier-assurance li { margin: .3em 0; font-size: .86rem; }
.table-contrats { width: 100%; font-size: .82rem; } .table-contrats .nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-contrats td:last-child { white-space: nowrap; }
.formulaire-contrat { border-top: 1px solid var(--trait-doux); margin-top: .5em; padding-top: .5em; }
.formulaire-contrat input.large { flex: 1 1 18em; } .formulaire-contrat input[type=number] { width: 11em; }
.candidats-contrats li { margin: .4em 0; }
.import-sinistres input[type=file] { max-width: 18em; } .liste-sinistres table { margin-top: .4em; }
/* flotte de véhicules (onglet « Assurance », étape 2) : réponses de la commune, formulaire, registre */
.flotte-vehicules h4 { font-size: .92rem; margin: 1em 0 .4em; }
.resume-flotte { margin: .3em 0; } .contrat-flotte { margin: .3em 0 .6em; } .contrat-flotte .puce-valeur { margin-right: .3em; }
.reponses-flotte .table-generales select { max-width: 8em; }
.formulaire-flotte .champ-flotte { display: inline-flex; flex-direction: column; gap: 2px; }
.formulaire-flotte .champ-flotte input.large { min-width: 18em; } .formulaire-flotte .champ-flotte input[type=number] { width: 10em; }
.formulaire-flotte .case-flotte { align-self: flex-end; padding-bottom: .35em; }
.deduit-flotte { display: inline-flex; align-items: center; gap: 6px; } .deduit-flotte label { color: #8A5A0D; }
.table-flotte td { vertical-align: top; } .table-flotte .puce-valeur { white-space: nowrap; }
.resume-annexes li.resume-flotte { margin: 0; }
/* véhicules probables (étape 2) : bloc violet « à confirmer », une ligne par source, valider (nombre) ou écarter (motif), décisions */
.etape-assurance .bloc.vehicules-probables { border-left: 4px solid var(--violet); border-radius: 10px; padding: 10px 14px; margin: .8em 0;
  background: linear-gradient(90deg, var(--violet-pale), var(--surface) 40%); }
.vehicules-probables h4 { margin: .2em 0 .4em; color: var(--violet); }
.sources-probables { margin: .3em 0 .5em; padding-left: 1.2em; } .sources-probables li.source-incomplete { color: #8A5A0D; }
.liste-probables { list-style: none; margin: .4em 0; padding: 0; }
.liste-probables > li { padding: .5em 0; border-top: 1px solid var(--violet-pale); } .liste-probables > li:first-child { border-top: none; }
.puce-valeur.a-confirmer { background: var(--violet-pale); color: var(--violet); }
.saisie-decision { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.saisie-decision input[type=number] { width: 6em; } .saisie-decision input[type=text] { min-width: 16em; }
.recherche-incomplete { color: #8A5A0D; } .decisions-probables { margin: .2em 0; padding-left: 1.2em; }
.decisions-probables li { margin: .35em 0; } .indices-probables { margin-top: .4em; }
/* import de l'onglet « Flottes » : compte rendu ligne par ligne, fichiers importés et leur retrait */
.import-flotte { margin-top: .8em; } .resultat-import-flotte .liste-import { margin-top: .4em; }
.resultat-import-flotte ul { margin: .2em 0 .2em 1.2em; padding: 0; } .imports-flotte { margin-top: .5em; }
.avertissement-retrait { margin: .2em 0 .3em; color: #8A5A0D; }
/* adresse postale sous le nom du bâtiment (fiche) */
.adresse-fiche { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: .1em 0 .3em; color: var(--encre-2); }
.adresse-fiche svg { width: 15px; height: 15px; flex: none; } .adresse-fiche.inconnue { color: #8A5A0D; }

/* onglet « Assurance » : avancement du dossier, étapes */
.page-assurance { max-width: 1180px; margin: 0 auto; padding: 18px 22px 40px; }
.dossier-assurance { display: flex; flex-direction: column; gap: 18px; }
.intro-assurance { color: var(--encre-2); margin: 0; }
.etape-assurance { background: var(--surface); border: 1px solid var(--trait-doux); border-radius: 14px; padding: 14px 18px; }
.etape-assurance > h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 0 0 .6em; }
.numero-etape { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sarcelle); color: #fff;
  font-size: .9rem; font-weight: 700; flex: none; }
.puce-annexe { margin-left: auto; font-size: .75rem; font-weight: 650; padding: .15em .7em; border-radius: 999px; background: var(--sarcelle-pale); color: var(--sarcelle); }
.etape-assurance .bloc { border: none; box-shadow: none; padding: 0; margin: 0 0 1em; background: transparent; }
.annexes-avancement { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin: .6em 0; }
.annexe-avancement { border: 1px solid var(--trait-doux); border-radius: 12px; padding: 12px 14px; }
.annexe-avancement h3 { margin: 0 0 .5em; font-size: 1rem; }
.chiffres-avancement { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: .4em; }
.chiffre-avancement { display: flex; flex-direction: column; } .chiffre-avancement b { font-family: var(--titre); font-size: 1.6rem; line-height: 1.1; }
.chiffre-avancement span { font-size: .76rem; color: var(--encre-2); }
.barre-progression { height: 8px; border-radius: 999px; background: var(--trait-doux); overflow: hidden; margin: .3em 0 .5em; }
.barre-progression span { display: block; height: 100%; background: var(--vert); border-radius: 999px; }
.table-completude { width: 100%; font-size: .82rem; } .table-completude th { text-align: left; font-weight: 600; width: 40%; }
.table-completude tr.optionnel th { font-weight: 500; color: var(--encre-2); } .cellule-barre { width: 34%; }
.barre-completude { display: flex; gap: 2px; height: 10px; border-radius: 4px; overflow: hidden; background: var(--trait-doux); }
.segment { display: inline-block; min-width: 4px; } .barre-completude .segment { height: 100%; }
.segment.official { background: #2A7F8E; } .segment.entered { background: #2E7D32; } .segment.estimated { background: #E8A33A; } .segment.missing { background: #C9CED3; }
.legende-completude { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: .2em 0 1em; color: var(--encre-2); }
.item-legende { display: inline-flex; align-items: center; gap: 6px; } .item-legende b { font-weight: 650; color: var(--encre); }
.item-legende i.segment { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.reste-a-faire { margin: .3em 0 .8em; padding-left: 1.2em; font-size: .86rem; } .reste-a-faire li { margin: .2em 0; }
.table-manques td:last-child { line-height: 1.9; }
.puce-manque { display: inline-block; margin: 0 4px 2px 0; padding: 0 .55em; border-radius: 999px; font-size: .74rem; text-decoration: none; }
.puce-manque.estimated { background: var(--ocre-pale); color: #8A5A0D; } .puce-manque.missing { background: var(--brique-pale); color: var(--brique); }
.table-generales { width: 100%; font-size: .84rem; } .table-generales th { text-align: left; font-weight: 600; width: 38%; }
.table-generales input[type=text] { width: 100%; max-width: 18em; }
.resume-annexes { margin: .2em 0 .4em; padding-left: 1.1em; font-size: .86rem; }