/* VigiOLD — feuille de styles de l'application */
:root {
  --fond: #f3f5f1;
  --carte: #ffffff;
  --encre: #1d2a1f;
  --doux: #5f6d62;
  --trait: #dde3dc;
  --vert: #2f7d4a;
  --vert-fonce: #1f3a2a;
  --vert-clair: #e3f2e7;
  --rouge: #c0392b;
  --rouge-clair: #fbe5e2;
  --orange: #d9821b;
  --orange-clair: #fdf0dc;
  --bleu: #2a5d9f;
  --bleu-clair: #e3ecf8;
  --gris: #8a948c;
  --gris-clair: #eef1ec;
  --violet: #7a3e9d;
  --violet-clair: #f1e6f7;
  --rayon: 12px;
  --ombre: 0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05);
  --entete: 56px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fond); color: var(--encre); font-size: 14px; line-height: 1.45; }
a { color: var(--vert); }
h1, h2, h3 { margin: 0 0 10px; line-height: 1.25; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; }
.icone { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.cache { display: none !important; }
.doux { color: var(--doux); }
.petit { font-size: 12px; }
.centre { text-align: center; }

/* ---------- En-tête et navigation ---------- */
.entete { position: sticky; top: 0; z-index: 1000; height: var(--entete); background: var(--vert-fonce); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 14px; }
.marque { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: #fff; text-decoration: none; letter-spacing: .2px; }
.marque img { width: 32px; height: 32px; flex: none; }
.marque span, .titre-marque { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -0.02em; }
.marque em, .titre-marque em { font-style: normal; color: #f0a04b; }
.titre-marque em { color: #d9821b; }
.titre-marque img { width: 46px; height: 46px; }
.nav { display: flex; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.nav a { color: #d6e6da; text-decoration: none; padding: 8px 11px; border-radius: 8px; white-space: nowrap; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.nav a:hover { background: rgba(255,255,255,.08); }
.nav a.actif { background: rgba(255,255,255,.16); color: #fff; }
.utilisateur { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d6e6da; white-space: nowrap; }
.utilisateur strong { color: #fff; display: block; font-size: 13px; }
.bouton-icone { border: 0; background: transparent; color: inherit; padding: 6px; border-radius: 8px; cursor: pointer; display: inline-flex; }
.bouton-icone:hover { background: rgba(0,0,0,.06); }
.entete .bouton-icone:hover { background: rgba(255,255,255,.12); }
@media (max-width: 760px) {
  .utilisateur .texte { display: none; }
  .nav a { flex-direction: column; gap: 2px; padding: 5px 7px; font-size: 10px; font-weight: 600; }
  .nav a span { display: block; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
  .entete { gap: 6px; padding: 0 8px; }
  .marque span { display: none; }
}

/* ---------- Mise en page ---------- */
main.vue { padding: 16px; max-width: 1280px; margin: 0 auto; }
.grille { display: grid; gap: 14px; }
@media (min-width: 900px) { .grille.deux { grid-template-columns: 1fr 1fr; } .grille.trois { grid-template-columns: repeat(3, 1fr); } }
.bloc { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px; margin-bottom: 14px; }
.bloc > h2 { display: flex; align-items: center; gap: 8px; }
.bloc > h2 .icone { color: var(--vert); }
.ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ligne.entre { justify-content: space-between; }
.titre-page { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.titre-page h1 { font-size: 20px; margin: 0; }

/* ---------- Boutons et formulaires ---------- */
.bouton { border: 0; border-radius: 8px; padding: 9px 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; background: var(--vert); color: #fff; text-decoration: none; white-space: nowrap; }
.bouton:hover { filter: brightness(1.07); }
.bouton:disabled { opacity: .55; cursor: wait; }
.bouton.secondaire { background: var(--gris-clair); color: var(--encre); }
.bouton.danger { background: var(--rouge); }
.bouton.alerte { background: var(--orange); }
.bouton.petit { padding: 6px 10px; font-size: 12px; }
.bouton.plein { width: 100%; justify-content: center; }
.bouton .icone { width: 16px; height: 16px; }
.formulaire { display: grid; gap: 10px; }
.formulaire label, label.champ { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--doux); }
.formulaire .aide, .aide { font-weight: 400; font-size: 12px; color: var(--doux); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], input:not([type]), select, textarea {
  border: 1px solid var(--trait); border-radius: 8px; padding: 9px 10px; background: #fff; width: 100%; font-weight: 400; color: var(--encre);
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #9fd0ac; border-color: var(--vert); }
.case { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 8px; font-weight: 500 !important; color: var(--encre) !important; font-size: 13px !important; }
.case input { width: auto; }
.deux-col { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .deux-col { grid-template-columns: 1fr; } }

/* ---------- Badges et indicateurs ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.s-a_realiser, .s-non_conforme { background: var(--rouge-clair); color: var(--rouge); }
.s-mise_en_demeure { background: var(--violet-clair); color: var(--violet); }
.s-declare { background: var(--orange-clair); color: #9a5a0c; }
.s-verifie { background: var(--vert-clair); color: var(--vert); }
.s-exempte, .s-gris { background: var(--gris-clair); color: #555; }
.s-public { background: var(--bleu-clair); color: var(--bleu); }
.s-valide, .s-acceptee { background: var(--vert-clair); color: var(--vert); }
.s-en_attente, .s-ouverte { background: var(--orange-clair); color: #9a5a0c; }
.s-refuse, .s-refusee, .s-suspendu, .s-annulee { background: var(--rouge-clair); color: var(--rouge); }
.s-close, .s-attribuee { background: var(--gris-clair); color: #555; }
.n-urgence { background: var(--orange-clair); color: #9a5a0c; }
.n-requisition { background: var(--rouge-clair); color: var(--rouge); }
.n-sollicitation { background: var(--bleu-clair); color: var(--bleu); }
.indicateurs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.indicateur { background: var(--gris-clair); border-radius: 10px; padding: 10px; }
.indicateur .v { font-size: 22px; font-weight: 700; line-height: 1.1; }
.indicateur .l { font-size: 11px; color: var(--doux); }
.indicateur.ok .v { color: var(--vert); }
.indicateur.at .v { color: var(--orange); }
.indicateur.ko .v { color: var(--rouge); }
.progression { height: 8px; background: var(--gris-clair); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.progression > div { height: 100%; background: var(--vert); transition: width .3s; }

/* ---------- Tableaux ---------- */
.tableau { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { color: var(--doux); font-weight: 600; font-size: 12px; }
tr.cliquable { cursor: pointer; }
tr.cliquable:hover { background: #f7f9f6; }
table.infos th { width: 42%; font-weight: 500; }
table.infos td, table.infos th { padding: 7px 4px; }

/* ---------- Vue carte ---------- */
.vue-carte { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - var(--entete)); height: calc(100dvh - var(--entete)); }
.panneau { background: var(--carte); border-right: 1px solid var(--trait); display: flex; flex-direction: column; min-height: 0; }
.panneau .haut { padding: 14px; border-bottom: 1px solid var(--trait); display: grid; gap: 10px; }
.panneau .liste { overflow-y: auto; flex: 1; }
.element { padding: 10px 14px; border-bottom: 1px solid var(--trait); cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.element:hover { background: #f7f9f6; }
.element.selection { background: var(--vert-clair); }
.element .pastille { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; }
.element .titre { font-weight: 600; }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtre { border: 1px solid var(--trait); background: #fff; border-radius: 99px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.filtre.actif { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }
.zone-carte { position: relative; min-height: 0; }
#carte { position: absolute; inset: 0; z-index: 0; }
.legende { position: absolute; left: 10px; bottom: 22px; z-index: 500; background: rgba(255,255,255,.95); border-radius: 10px; padding: 8px 10px; font-size: 11px; display: grid; gap: 4px; box-shadow: var(--ombre); }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.detail { position: absolute; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; z-index: 600; background: var(--carte); box-shadow: -6px 0 24px rgba(0,0,0,.12); overflow-y: auto; transform: translateX(105%); transition: transform .25s; }
.detail.ouvert { transform: none; }
.detail .entete-detail { position: sticky; top: 0; background: var(--carte); padding: 14px 16px 10px; border-bottom: 1px solid var(--trait); z-index: 2; }
.detail .corps { padding: 14px 16px 30px; display: grid; gap: 14px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions .bouton { justify-content: center; white-space: normal; text-align: center; }
.chronologie { list-style: none; padding: 0; margin: 0; }
.chronologie li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--trait); }
.chronologie li:last-child { border: 0; }
.chronologie .point { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--gris); }
.vignettes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.vignettes img { width: 72px; height: 56px; object-fit: cover; border-radius: 6px; cursor: zoom-in; background: var(--gris-clair); }
.bascule-panneau { display: none; }
@media (max-width: 900px) {
  /* Téléphone : la carte occupe l'écran ; la liste s'ouvre par-dessus avec le bouton « Liste » */
  .vue-carte { grid-template-columns: 1fr; grid-template-rows: auto 1fr; position: relative; }
  .panneau { border-right: 0; border-bottom: 1px solid var(--trait); grid-row: 1; }
  .zone-carte { grid-row: 2; }
  .panneau:not(.replie) { position: absolute; left: 0; right: 0; top: 0; height: 78%; z-index: 900; box-shadow: 0 12px 30px rgba(0,0,0,.25); border-radius: 0 0 16px 16px; }
  .panneau.replie .liste, .panneau.replie .masquable, .panneau.replie .infos-commune, .panneau.replie .progression { display: none; }
  .panneau.replie .haut { gap: 6px; padding: 8px 10px; border-bottom: 0; }
  .panneau.replie .indicateurs.compacts .indicateur { padding: 3px 4px; }
  .panneau.replie .indicateurs.compacts .v { font-size: 15px; }
  .bascule-panneau { display: inline-flex; gap: 4px; }
  .bouton-calques span { display: none; }
  .leaflet-control.bouton-calques { padding: 9px 11px; }
  .detail { width: 100%; top: 30%; border-radius: 16px 16px 0 0; transform: translateY(105%); }
  .detail.ouvert { transform: none; }
}

/* ---------- Fenêtres, notifications ---------- */
.voile { position: fixed; inset: 0; background: rgba(20,30,22,.45); z-index: 3000; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 12px; overflow-y: auto; }
.fenetre { background: #fff; border-radius: 14px; width: 560px; max-width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.fenetre.large { width: 860px; }
.fenetre header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--trait); }
.fenetre header h2 { margin: 0; }
.fenetre .contenu { padding: 16px; }
.fenetre footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--trait); }
.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 4000; display: grid; gap: 8px; }
.toast { background: var(--vert-fonce); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; box-shadow: var(--ombre); }
.toast.erreur { background: var(--rouge); }
.message { border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 10px 0; }
.message.succes { background: var(--vert-clair); color: #1d5a33; }
.message.erreur { background: var(--rouge-clair); color: #8c2a1f; }
.message.info { background: var(--bleu-clair); color: #1f4777; }
.message.avertissement { background: var(--orange-clair); color: #7a4a0c; }
.vide { padding: 30px 16px; text-align: center; color: var(--doux); }
.chargement { padding: 30px; text-align: center; color: var(--doux); }
.secret { font-family: ui-monospace, Menlo, monospace; background: var(--gris-clair); padding: 8px 10px; border-radius: 8px; font-size: 15px; user-select: all; }
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--trait); margin-bottom: 14px; overflow-x: auto; }
.onglets a { padding: 9px 12px; text-decoration: none; color: var(--doux); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.onglets a.actif { color: var(--vert); border-color: var(--vert); }
.lignes-moyens { display: grid; gap: 6px; }
.ligne-moyen { display: grid; grid-template-columns: 1fr 80px 110px 34px; gap: 6px; align-items: center; }
.suggestions { border: 1px solid var(--trait); border-radius: 8px; margin-top: 4px; background: #fff; overflow: hidden; }
.suggestions div { padding: 8px 10px; cursor: pointer; font-size: 13px; }
.suggestions div:hover { background: var(--vert-clair); }

/* ---------- Pages simples (connexion, installation) ---------- */
.page-simple > #app { width: 100%; min-width: 0; display: flex; justify-content: center; }
.page-simple { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 14px; background: linear-gradient(160deg, #1f3a2a 0, #2f5d3f 50%, #f3f5f1 50%); }
.carte-simple { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.18); padding: 26px; width: 520px; max-width: 100%; min-width: 0; }
@media (max-width: 560px) { .carte-simple { padding: 26px 22px; } .page-simple { padding: 5vh 18px; } }
.titre-marque { display: flex; align-items: center; gap: 10px; font-size: 24px; color: var(--vert-fonce); }
.titre-marque small { font-size: 14px; color: var(--doux); font-weight: 500; }
.verifs { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.verifs li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.verifs .pastille { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; flex: none; }
.verifs .ok .pastille { background: var(--vert); }
.verifs .ko .pastille { background: var(--rouge); }
.verifs .detail { color: #8c2a1f; font-size: 12px; margin-top: 3px; position: static; transform: none; box-shadow: none; width: auto; background: none; }

/* ---------- Courrier (impression A4) ---------- */
.feuille { background: #fff; width: 210mm; min-height: 297mm; margin: 0 auto 20px; padding: 18mm 18mm 16mm; box-shadow: var(--ombre); font-family: Georgia, "Times New Roman", serif; font-size: 11.5pt; line-height: 1.45; color: #111; }
.feuille .expediteur { font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.feuille .destinataire { margin: 14mm 0 10mm 95mm; }
.feuille .objet { font-weight: 700; margin: 6mm 0; }
.feuille h4 { font-family: Inter, sans-serif; font-size: 10pt; text-transform: uppercase; letter-spacing: .6px; margin: 6mm 0 2mm; color: #1f3a2a; }
.feuille ul { margin: 0; padding-left: 5mm; }
.feuille .carte-courrier { height: 80mm; border: 1px solid #bbb; margin: 4mm 0; }
.feuille .acces { display: flex; gap: 6mm; align-items: center; border: 1px solid #ccc; border-radius: 3mm; padding: 4mm; margin-top: 4mm; }
.feuille .acces .qr { width: 28mm; height: 28mm; flex: none; }
.feuille .acces .qr img, .feuille .acces .qr canvas { width: 100%; height: 100%; }
.feuille .signature { margin: 10mm 0 0 95mm; }
.feuille [contenteditable]:hover { outline: 1px dashed #9fd0ac; }
.barre-courrier { position: sticky; top: var(--entete); z-index: 50; background: var(--fond); padding: 10px 0; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .entete, .barre-courrier, .toasts, .nav, .pas-impression { display: none !important; }
  main.vue { padding: 0; max-width: none; }
  .feuille { box-shadow: none; margin: 0; width: auto; min-height: auto; }
  .feuille [contenteditable]:hover { outline: none; }
}

/* ---------- Leaflet ---------- */
.leaflet-container { font-family: inherit; }
.etiquette-zone { background: rgba(255,255,255,.9); border: 0; box-shadow: none; font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 4px; }
.etiquette-zone::before { display: none; }

/* ---------- Téléphones ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
@media (max-width: 760px) {
  /* 16 px minimum : évite le zoom automatique de l'iPhone sur les champs */
  input, select, textarea { font-size: 16px !important; }
  /* marges confortables : le texte ne doit jamais coller au bord de l'écran */
  main.vue { padding: 18px 18px 28px; }
  .bloc { padding: 18px 16px; }
  .panneau .haut { padding: 16px 18px; }
  .element { padding: 12px 18px; }
  .detail .entete-detail { padding: 16px 18px 12px; }
  .detail .corps { padding: 16px 18px 34px; }
  .fenetre .contenu { padding: 18px; }
  .fenetre header, .fenetre footer { padding-left: 18px; padding-right: 18px; }
  .entete { padding: 0 12px; }
  .vide { padding: 30px 20px; }
  .titre-page h1 { font-size: 18px; }
  .actions { grid-template-columns: 1fr 1fr; }
  .fenetre { border-radius: 14px; }
  .voile { padding: 12px 8px; }
  .ligne-moyen { grid-template-columns: 1fr 64px 90px 30px; }
  .feuille { width: 100%; min-height: 0; padding: 16px; font-size: 13px; }
  .feuille .destinataire, .feuille .signature { margin-left: 30%; }
}

#suggestions-commune { position: absolute; left: 0; right: 0; z-index: 20; box-shadow: var(--ombre); max-height: 320px; overflow-y: auto; }

.nouveautes { position: relative; }
.pastille-nouveau { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #f0a04b; box-shadow: 0 0 0 2px var(--vert-fonce); }

[hidden] { display: none !important; }

/* Vue « comme un autre utilisateur » */
.bandeau-incarnation { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; background: #fff4e5; color: #7a3e00; border-bottom: 1px solid #f3c98b; font-size: 14px; }
.bandeau-incarnation .icone { width: 18px; height: 18px; flex: none; }
.bandeau-incarnation span { flex: 1; min-width: 200px; }

/* Assistant */
.assistant { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.assistant .fil { display: flex; flex-direction: column; gap: 12px; }
.assistant .bulle { padding: 12px 14px; border-radius: 12px; line-height: 1.5; max-width: 92%; }
.assistant .bulle.user { align-self: flex-end; background: var(--vert, #2f7d4a); color: #fff; }
.assistant .bulle.assistant { align-self: flex-start; background: #fff; border: 1px solid var(--trait, #e3e6e0); }
.assistant .bulle ul { margin: 6px 0; padding-left: 18px; }
.assistant .bulle p { margin: 0 0 6px; }
.assistant .bulle p:last-child { margin: 0; }
.assistant .suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.assistant .suggestions button { font-size: 13px; }
.assistant form { display: flex; gap: 8px; position: sticky; bottom: 0; background: var(--fond, #f4f5f1); padding: 8px 0; }
.assistant textarea { flex: 1; min-height: 46px; max-height: 160px; resize: vertical; }
.assistant form .bouton { flex: none; width: auto; padding: 0 18px; }
.assistant form textarea { width: auto; min-width: 0; }
.assistant h1 .icone { margin-right: 8px; vertical-align: -3px; }

/* ---------- Navigation téléphone : barre en bas + menu « Plus » ---------- */
:root { --barre: 0px; }
.barre-mobile, .quitter-admin, .retour-sommaire { display: none; }
.quitter-admin { color: #fff; text-decoration: none; align-items: center; gap: 6px; font-weight: 600; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.1); white-space: nowrap; }
body.mode-admin .nav { visibility: hidden; }
body.mode-admin .quitter-admin { display: inline-flex; }
.vue-carte { height: calc(100dvh - var(--entete) - var(--barre)); }

@media (max-width: 760px) {
  :root { --bas-ecran: max(env(safe-area-inset-bottom, 0px), 12px); --barre: calc(60px + var(--bas-ecran)); }
  .entete .nav { display: none; }
  .entete .utilisateur .bouton-icone:not(#nouveautes) { display: none; }
  .entete .marque { margin-right: auto; }
  #vue { padding-bottom: var(--barre); }
  .barre-mobile { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; height: var(--barre);
    padding-bottom: var(--bas-ecran); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); background: #fff; border-top: 1px solid var(--trait); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
  .barre-mobile a, .barre-mobile button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--doux); text-decoration: none; font-size: 11px; font-weight: 600; background: none; border: 0; font-family: inherit; padding: 0; }
  .barre-mobile .icone { width: 22px; height: 22px; }
  .barre-mobile a.actif { color: var(--vert); }
  .toasts { bottom: calc(var(--barre) + 12px); }
  body.mode-admin .barre-mobile { display: none; }
  body.mode-admin { --barre: 0px; }
  body.mode-admin .quitter-admin span { font-size: 13px; }
}
.voile-feuille { align-items: flex-end; padding: 0; }
.feuille { background: #fff; width: 100%; max-width: 520px; border-radius: 18px 18px 0 0; padding: 8px 0 calc(14px + max(env(safe-area-inset-bottom, 0px), 12px)); animation: monte .2s ease-out; }
@keyframes monte { from { transform: translateY(40px); opacity: .5; } to { transform: none; opacity: 1; } }
.feuille .poignee { width: 40px; height: 4px; border-radius: 4px; background: var(--trait); margin: 4px auto 10px; }
.feuille-entete { display: flex; flex-direction: column; padding: 4px 20px 12px; border-bottom: 1px solid var(--trait); }
.feuille a, .feuille button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 20px; color: var(--texte, #1d2a21); text-decoration: none;
  background: none; border: 0; border-bottom: 1px solid var(--gris-clair, #f0f1ee); font: inherit; font-size: 15px; text-align: left; }
.feuille a span, .feuille button span { flex: 1; }
.feuille .icone { width: 20px; height: 20px; color: var(--vert); }
.feuille .icone:last-child { color: var(--doux); width: 16px; }
.feuille .danger, .feuille .danger .icone { color: var(--rouge); border-bottom: 0; }

/* ---------- Espace administration ---------- */
.admin-cadre { display: grid; grid-template-columns: 230px 1fr; min-height: calc(100dvh - var(--entete)); }
.admin-menu { background: #fff; border-right: 1px solid var(--trait); padding: 18px 10px; display: flex; flex-direction: column; gap: 2px; }
.admin-menu-titre { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); font-weight: 700; padding: 0 12px 10px; }
.admin-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--texte, #1d2a21); text-decoration: none; font-weight: 500; }
.admin-menu a:hover { background: var(--gris-clair, #f0f1ee); }
.admin-menu a.actif { background: var(--vert-clair); color: var(--vert); }
.admin-menu .icone { width: 18px; height: 18px; }
.admin-cadre > main.vue { min-width: 0; }
.admin-sommaire { display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--trait); }
.admin-sommaire a { display: flex; align-items: center; gap: 14px; padding: 16px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--trait); }
.admin-sommaire a:last-child { border-bottom: 0; }
.admin-sommaire a > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.admin-sommaire .icone { width: 22px; height: 22px; color: var(--vert); }
.admin-sommaire .icone:last-child { width: 16px; color: var(--doux); }
@media (max-width: 760px) {
  .admin-cadre { display: block; }
  .admin-menu { display: none; }
  .retour-sommaire { display: inline-flex; align-items: center; gap: 4px; color: var(--vert); text-decoration: none; font-weight: 600; margin-bottom: 6px; }
}
.feuille, .feuille a, .feuille button { font-family: Inter, system-ui, -apple-system, sans-serif; }
.admin-cadre > main.vue { margin: 0; max-width: 1240px; width: 100%; }
@media (max-width: 760px) {
  /* Tableaux d'administration en fiches lisibles sur téléphone */
  .admin .tableau table, .admin .tableau tbody, .admin .tableau tr, .admin .tableau td { display: block; width: 100%; }
  .admin .tableau thead { display: none; }
  .admin .tableau tr { border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
  .admin .tableau td { border: 0 !important; padding: 3px 0 !important; }
  .admin .tableau td.ligne, .admin .tableau td:last-child { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px !important; }
  .admin .tableau select { width: 100% !important; }
}

@media (max-width: 760px) { .barre-mobile a, .barre-mobile button { padding-top: 6px; justify-content: flex-start; } }
.indic-repartition { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 700; background: #fff; border-radius: 999px; padding: 7px 14px; box-shadow: var(--ombre); font-size: 13px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.indic-repartition .icone { width: 16px; height: 16px; color: var(--vert); }
.bouton-puce { border: 0; cursor: pointer; font: inherit; font-size: 13px; color: inherit; }

/* ---------- Assistant en panneau latéral ---------- */
.panneau-assistant { position: fixed; top: var(--entete); right: 0; bottom: 0; width: 400px; z-index: 1400; background: #fff;
  border-left: 1px solid var(--trait); box-shadow: -8px 0 24px rgba(0,0,0,.08); display: flex; flex-direction: column; }
body.avec-assistant #vue { margin-right: 400px; }
.panneau-assistant header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--trait); }
.panneau-assistant header h2 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.panneau-assistant header h2 .icone { color: var(--vert); }
.panneau-assistant .bouton-icone { color: var(--doux); }
.panneau-assistant .bouton-icone[aria-pressed="true"] { color: var(--vert); background: var(--vert-clair); }
.as-fil { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.as-fil .bulle { padding: 10px 12px; border-radius: 12px; line-height: 1.5; max-width: 94%; font-size: 14px; }
.as-fil .bulle.user { align-self: flex-end; background: var(--vert, #2f7d4a); color: #fff; }
.as-fil .bulle.assistant { align-self: flex-start; background: var(--fond, #f4f5f1); }
.as-fil .bulle p { margin: 0 0 6px; } .as-fil .bulle p:last-child { margin: 0; }
.as-fil .bulle ul { margin: 6px 0; padding-left: 18px; }
.as-fil .bulle .bouton { margin-top: 8px; }
.as-sugg { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 10px; }
.as-sugg button { text-align: left; background: var(--fond, #f4f5f1); border: 1px solid var(--trait); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.as-saisie { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--trait); }
.as-saisie textarea { flex: 1; resize: none; min-height: 44px; max-height: 140px; }
.bouton-rond { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--vert, #2f7d4a); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.bouton-rond.secondaire { background: var(--fond, #f0f1ee); color: var(--vert, #2f7d4a); border: 1px solid var(--trait); }
.bouton-rond.ecoute { background: #c2410c; color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(194,65,12,.5); } 70% { box-shadow: 0 0 0 12px rgba(194,65,12,0); } 100% { box-shadow: 0 0 0 0 rgba(194,65,12,0); } }
@media (max-width: 1100px) { .panneau-assistant { width: 360px; } body.avec-assistant #vue { margin-right: 360px; } }
@media (max-width: 760px) {
  .panneau-assistant { width: 100%; top: var(--entete); bottom: 0; z-index: 1600; }
  body.avec-assistant #vue { margin-right: 0; }
}

/* ---------- Menu contextuel et informations d'un point ---------- */
.menu-carte { position: absolute; z-index: 800; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; min-width: 240px; border: 1px solid var(--trait); }
.menu-carte button { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 9px 10px; border-radius: 8px; font: inherit; font-size: 14px; text-align: left; cursor: pointer; color: inherit; }
.menu-carte button:hover { background: var(--fond, #f0f1ee); }
.menu-carte .icone { width: 17px; height: 17px; color: var(--vert); flex: none; }
.info-point h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 15px; }
.info-point h3 .icone { width: 16px; height: 16px; color: var(--vert); }
.info-point table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.info-point th { text-align: left; font-weight: 500; color: var(--doux); padding: 3px 8px 3px 0; vertical-align: top; white-space: nowrap; }
.info-point td { padding: 3px 0; }
.info-point p { margin: 8px 0 0; font-size: 13px; }

/* ---------- Export de la carte ---------- */
.zone-carte { position: relative; }
.leaflet-control.bouton-export { box-shadow: var(--ombre); clear: both; }
@media (max-width: 760px) { .bouton-export span { display: none; } .leaflet-control.bouton-export { padding: 9px 11px; } }
.vue-export { max-width: none; }
.barre-export { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.barre-export label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.barre-export select { width: auto; }
.scene-export { overflow: auto; padding: 10px 0 30px; }
.feuille-export { position: relative; background: #fff; box-shadow: 0 6px 30px rgba(0,0,0,.18); display: flex; flex-direction: column; padding: 8mm 10mm; margin: 0 auto; color: #1d2a21; }
.ex-entete { display: flex; align-items: center; gap: 5mm; padding-bottom: 3mm; border-bottom: 0.6mm solid #1f3a2a; }
.ex-logo { width: 14mm; height: 14mm; }
.ex-titres h1 { margin: 0; font-size: 16pt; line-height: 1.15; }
.ex-titres p { margin: 1mm 0 0; font-size: 10pt; color: #5f6d62; }
.ex-carte-cadre { position: relative; flex: 1; margin: 4mm 0 3mm; border: 0.3mm solid #b9c2b9; }
#ex-carte { position: absolute; inset: 0; }
.ex-nord { position: absolute; top: 4mm; right: 4mm; z-index: 500; background: #fff; border-radius: 2mm; padding: 1.5mm 2mm; display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: 9pt; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.ex-nord .icone { width: 6mm; height: 6mm; fill: #1f3a2a; stroke: none; }
.ex-legende { position: absolute; left: 4mm; bottom: 9mm; z-index: 500; background: rgba(255,255,255,.95); border-radius: 2mm; padding: 2mm 3mm; font-size: 8pt; box-shadow: 0 1px 4px rgba(0,0,0,.2); display: grid; gap: 1mm; }
.ex-legende i { display: inline-block; width: 3.5mm; height: 3.5mm; border-radius: 0.8mm; margin-right: 1.5mm; vertical-align: -0.6mm; }
.ex-pied { display: flex; justify-content: space-between; gap: 6mm; font-size: 8pt; color: #5f6d62; padding-top: 2mm; border-top: 0.3mm solid #d6ddd6; }
.feuille-export [contenteditable]:hover { outline: 1px dashed #9fb7a5; outline-offset: 2px; }
.feuille-export [contenteditable]:focus { outline: 2px solid var(--vert); outline-offset: 2px; }
.ex-texte { position: absolute; z-index: 700; min-width: 30mm; max-width: 120mm; background: rgba(255,255,255,.96); border: 0.3mm solid #1f3a2a; border-radius: 2mm; padding: 2.5mm 3mm; font-size: 10pt; box-shadow: 0 1px 6px rgba(0,0,0,.2); resize: both; overflow: hidden; }
.ex-texte .ex-contenu { outline: none; min-height: 5mm; }
.ex-poignee { position: absolute; top: -4mm; left: -4mm; width: 7mm; height: 7mm; border-radius: 50%; background: var(--vert); color: #fff; display: flex; align-items: center; justify-content: center; cursor: move; touch-action: none; }
.ex-poignee .icone { width: 4mm; height: 4mm; }
.ex-suppr { position: absolute; top: -4mm; right: -4mm; width: 7mm; height: 7mm; border-radius: 50%; border: 0; background: #c0392b; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ex-suppr .icone { width: 3.5mm; height: 3.5mm; }
@media print {
  body.page-export-active, body:has(.feuille-export) { background: #fff; }
  body:has(.feuille-export) .entete, body:has(.feuille-export) .barre-mobile, body:has(.feuille-export) .panneau-assistant,
  body:has(.feuille-export) .bandeau-incarnation, body:has(.feuille-export) .pas-impression { display: none !important; }
  body:has(.feuille-export) #vue { margin: 0 !important; padding: 0 !important; }
  body:has(.feuille-export) main.vue { padding: 0 !important; margin: 0 !important; }
  .scene-export { padding: 0; overflow: visible; }
  .feuille-export { box-shadow: none; margin: 0; page-break-after: avoid; break-inside: avoid; }
  .feuille-export [contenteditable] { outline: none !important; }
  .ex-texte { resize: none; }
}

/* ---------- Familles d'organisations ---------- */
.badge-type { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px 3px 7px; border-radius: 999px; white-space: nowrap; }
.badge-type .icone { width: 13px; height: 13px; }
.f-collectivite { background: #e3f2e7; color: #1d5a33; }
.f-etat { background: #e4edf8; color: #1f4777; }
.f-entreprise { background: #fdf0e1; color: #8a4b0c; }
.f-plateforme { background: #efe9f8; color: #5b3c8c; }
.filtres-admin { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.filtres-admin .filtre { display: inline-flex; align-items: center; gap: 6px; }
.filtres-admin .filtre .icone { width: 14px; height: 14px; }

/* ---------- Logos des organisations ---------- */
.logo-organisation { height: 34px; max-width: 120px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px 5px; }
@media (max-width: 760px) { .logo-organisation { height: 30px; max-width: 90px; } }
.bloc-logo { display: grid; gap: 10px; margin-top: 8px; }
.apercu-logo { min-height: 70px; border: 1px dashed var(--trait); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 10px; background: #fff; }
.apercu-logo img { max-height: 90px; max-width: 100%; object-fit: contain; }
.bandeau-commune { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; box-shadow: var(--ombre); }
.bandeau-commune img { max-height: 54px; max-width: 220px; object-fit: contain; }
.bandeau-commune span { font-weight: 700; }
.logo-courrier { max-height: 24mm; max-width: 70mm; object-fit: contain; display: block; margin-bottom: 3mm; }
.ex-logo-commune { max-height: 18mm; max-width: 60mm; object-fit: contain; }
.ex-logo-discret { width: 9mm !important; height: 9mm !important; margin-left: auto; order: 3; opacity: .85; }
.etat-repartition { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: var(--orange-clair, #fdf0e1); font-size: 12.5px; }
.etat-repartition.ok { background: var(--vert-clair); }
.etat-repartition .icone { width: 15px; height: 15px; flex: none; }
.etat-repartition span { flex: 1; }
.bandeau-dessin { position: absolute; z-index: 801; top: 10px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; background: #fff; border: 1px solid var(--trait); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 8px 10px; font-size: 14px; max-width: calc(100% - 20px); }
.bandeau-dessin > span { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.leaflet-container.dessin-actif { cursor: crosshair; }
.ligne-arrete { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; }
.ligne-arrete > span { flex: 1; }
.tableau-arrete { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
.tableau-arrete th { text-align: left; vertical-align: top; width: 38%; padding: 6px 8px 6px 0; color: var(--doux, #666); font-weight: 600; }
.tableau-arrete td { padding: 6px 0; }
.tableau-arrete tr + tr { border-top: 1px solid var(--trait); }
.pdf-arrete { width: 100%; height: 65vh; border: 1px solid var(--trait); border-radius: 8px; background: #f4f4f2; }
.pastille-arrete { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pastille-arrete.ok { background: #e3f3e6; color: #1f7a35; }
.pastille-arrete.at { background: #fff3d6; color: #8a5a00; }
.pastille-arrete.ko { background: #fde4e1; color: #b3261e; }
.pastille-arrete.gris { background: #eee; color: #666; }
.source-ia { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #5b4a99; background: #f0edfa; border-radius: 6px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.source-ia svg { width: 11px; height: 11px; }
.barre-ia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.resume-ia { background: #faf9f6; border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 14px; }
.resume-ia p { margin: 4px 0 8px; }
.resume-ia ul, .points-arrete { margin: 4px 0 8px 18px; padding: 0; font-size: 14px; }
.points-arrete li { margin-bottom: 6px; }
.arrete-vue details { margin: 8px 0; }
.arrete-vue summary { cursor: pointer; font-weight: 600; }

/* ---------- Bandeau gauche compact (v0.9.6) ---------- */
.panneau .haut { gap: 8px; padding: 10px 12px; }
.indicateurs.compacts { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.indicateurs.compacts .indicateur { padding: 6px 6px 5px; border-radius: 8px; text-align: center; }
.indicateurs.compacts .v { font-size: 17px; }
.indicateurs.compacts .l { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#indicateurs { display: grid; gap: 7px; }
.panneau .progression { margin: 0; height: 5px; }
.infos-commune > summary { padding: 1px 0; line-height: 1.5; }
.infos-commune { font-size: 12.5px; }
.infos-commune > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: pointer; color: var(--doux); }
.infos-commune > summary::-webkit-details-marker { display: none; }
.infos-commune > summary span { background: var(--gris-clair); border-radius: 99px; padding: 2px 8px; color: var(--texte, #222); }
.infos-commune > summary span.ok { background: var(--vert-clair); color: var(--vert); }
.infos-commune > summary span.at { background: var(--orange-clair, #fdf0e1); color: #9a5a0c; }
.infos-commune > summary em { margin-left: auto; font-style: normal; font-size: 11.5px; text-decoration: underline; }
.infos-commune[open] > summary em { visibility: hidden; }
.filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.filtres .filtre { white-space: nowrap; flex: none; }
.panneau .element { padding: 8px 12px; }
.legende { padding: 6px 10px; gap: 3px; max-height: calc(100% - 60px); overflow: auto; }
.legende > summary { cursor: pointer; font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 6px; list-style: none; }
.legende > summary::-webkit-details-marker { display: none; }
.legende > summary .icone { width: 14px; height: 14px; }
.legende[open] > summary { margin-bottom: 4px; }

/* ---------- Panneau des calques ---------- */
.bouton-calques { box-shadow: var(--ombre); gap: 6px; }
.panneau-calques { position: absolute; z-index: 700; top: 110px; right: 10px; width: 310px; max-height: calc(100% - 124px); display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); font-size: 13px; }
.panneau-calques[hidden] { display: none; }
.pc-tete { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border-bottom: 1px solid var(--trait); cursor: grab; user-select: none; touch-action: none; }
.pc-tete:active { cursor: grabbing; }
.pc-tete strong { flex: 1; }
.pc-tete .icone { width: 16px; height: 16px; }
.pc-fermer { border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 6px; display: flex; }
.pc-fermer:hover { background: var(--gris-clair); }
.pc-corps { overflow-y: auto; padding: 4px 0 8px; }
.pc-titre { width: 100%; display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; text-align: left; color: var(--vert-fonce); }
.pc-titre .icone { width: 13px; height: 13px; transition: transform .15s; }
.pc-groupe.ouvert .pc-titre .icone { transform: rotate(90deg); }
.pc-titre span { flex: 1; }
.pc-titre em { font-style: normal; font-size: 11px; background: var(--vert-clair); color: var(--vert); border-radius: 99px; padding: 0 7px; }
.pc-liste { display: none; padding: 0 12px 4px 16px; }
.pc-groupe.ouvert .pc-liste { display: block; }
.pc-calque { padding: 4px 0; }
.pc-calque label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pc-calque input[type=checkbox], .pc-calque input[type=radio] { margin: 0; flex: none; }
.pc-pastille { width: 16px; height: 12px; border-radius: 3px; flex: none; box-sizing: border-box; }
.pc-aide { margin: 3px 0 2px 24px; font-size: 11.5px; color: var(--doux); display: grid; gap: 2px; }
.pc-statut i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; box-sizing: border-box; }
.pc-opacite { display: flex; align-items: center; gap: 8px; margin: 3px 0 2px 24px; font-size: 11px; color: var(--doux); }
.pc-opacite[hidden] { display: none; }
.pc-opacite input { flex: 1; accent-color: var(--vert-fonce); }
.pc-termine { display: none; }
.pc-voile { position: absolute; inset: 0; z-index: 699; background: rgba(15,25,18,.35); }
.pc-voile[hidden] { display: none; }
@media (max-width: 700px) {
  /* Téléphone : feuille qui monte du bas, grandes zones à toucher */
  .panneau-calques { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 82%; border-radius: 18px 18px 0 0; font-size: 15px; }
  .pc-tete { cursor: default; padding: 14px 12px 12px 16px; position: relative; }
  .pc-tete::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 4px; background: #d5d9d3; }
  .pc-fermer { gap: 4px; align-items: center; font-weight: 700; color: var(--vert-fonce); font-size: 15px; padding: 6px 8px; }
  .pc-fermer .icone { display: none; }
  .pc-termine { display: inline; }
  .pc-corps { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .pc-titre { padding: 13px 16px; font-size: 14px; border-top: 1px solid var(--trait); }
  .pc-groupe:first-child .pc-titre { border-top: 0; }
  .pc-liste { padding: 0 16px 8px; }
  .pc-calque { padding: 2px 0; }
  .pc-calque label { min-height: 44px; gap: 12px; }
  .pc-calque input[type=checkbox], .pc-calque input[type=radio] { width: 22px; height: 22px; accent-color: var(--vert-fonce); }
  .pc-pastille { width: 20px; height: 14px; }
  .pc-aide, .pc-opacite { margin-left: 34px; font-size: 12.5px; }
  .pc-opacite { min-height: 36px; }
  .pc-opacite input { height: 28px; }
}
.pc-titre em[hidden] { display: none; }

/* ---------- Téléphone : fiche en feuille, barre terrain, mini-carte, localisation (v0.10) ---------- */
.poignee-fiche, .barre-terrain, .resume-fiche { display: none; }
.bouton-localiser { width: 34px; height: 34px; border-radius: 6px; border: 2px solid rgba(0,0,0,.2); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--vert-fonce); }
.bouton-localiser .icone { width: 19px; height: 19px; }
.bouton-localiser.attente { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.puce-autour { position: absolute; z-index: 650; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; border: 0; border-radius: 99px; padding: 10px 16px; background: #2563eb; color: #fff; font: inherit; font-weight: 700; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; white-space: nowrap; }
.puce-autour .icone { width: 17px; height: 17px; }
.liste-autour { max-height: 62vh; overflow-y: auto; }
.liste-autour button { align-items: center; }
.liste-autour button span { display: grid; gap: 2px; min-width: 0; }
.liste-autour button small { color: var(--doux); font-size: 13px; }
.liste-autour button em { font-style: normal; font-weight: 700; color: var(--vert-fonce); white-space: nowrap; }
.liste-autour .pastille { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.mini-carte { display: none; }

@media (max-width: 899px) {
  /* La fiche : feuille fixée au-dessus de la barre du bas, trois hauteurs */
  .detail { position: fixed; left: 0; right: 0; top: auto; bottom: var(--barre); width: 100%; z-index: 1200; border-radius: 18px 18px 0 0;
    height: 58%; max-height: calc(100dvh - var(--entete) - var(--barre)); transform: translateY(110%); transition: transform .25s, height .25s;
    box-shadow: 0 -8px 30px rgba(0,0,0,.18); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; overflow: hidden; }
  .detail.ouvert { transform: none; }
  .detail.glisse { transition: none; }
  .detail[data-h="apercu"] { height: 168px; }
  .detail[data-h="moitie"] { height: 58%; }
  .detail[data-h="plein"] { height: calc(100dvh - var(--entete) - var(--barre)); border-radius: 0; }
  .detail > .corps { overflow-y: auto; flex: 1; min-height: 0; font-size: 15.5px; padding-bottom: 20px; }
  .detail[data-h="apercu"] > .corps { overflow: hidden; }
  .detail .entete-detail { position: static; flex: none; padding: 8px 16px 10px; touch-action: none; cursor: grab; }
  .detail .entete-detail h2 { font-size: 18px; line-height: 1.25; }
  .poignee-fiche { display: block; width: 42px; height: 5px; border-radius: 5px; background: #cfd5cc; margin: 0 auto 8px; }
  .resume-fiche { display: inline-flex; font-size: 13px; color: var(--doux); font-weight: 600; }
  .detail table.infos { font-size: 15px; }
  .detail table.infos th { width: 45%; }
  .detail .actions { grid-template-columns: 1fr 1fr; }
  /* Sur téléphone : d'abord les informations, puis les autres actions (les principales sont dans la barre du bas) */
  .detail > .corps > * { order: 3; }
  .detail > .corps > table.infos { order: 1; }
  .detail > .corps > .actions { order: 2; }
  .detail .actions .bouton { min-height: 46px; font-size: 14px; }
  /* Barre d'actions de terrain, toujours visible en bas de la fiche */
  .barre-terrain { display: flex; flex: none; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--trait); background: #fff; }
  .barre-terrain a, .barre-terrain button { flex: 1; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 1px solid var(--trait); border-radius: 12px; background: #fff; color: var(--vert-fonce); font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; padding: 4px; }
  .barre-terrain .icone { width: 22px; height: 22px; }
  .barre-terrain .principal { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }
  .barre-terrain [disabled] { opacity: .4; }
  .detail[data-h="apercu"] .barre-terrain { display: none; }
  /* Mini-carte flottante (fiche en plein écran) */
  .mini-carte { display: block; position: fixed; z-index: 1300; width: 132px; height: 132px; border-radius: 14px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3); background: #e8ebe6; touch-action: none; transition: top .2s, left .2s, right .2s, bottom .2s; }
  .mini-carte[hidden] { display: none; }
  .mini-carte[data-coin="hd"] { top: calc(var(--entete) + 64px); right: 12px; }
  .mini-carte[data-coin="hg"] { top: calc(var(--entete) + 64px); left: 12px; }
  .mini-carte[data-coin="bd"] { bottom: calc(var(--barre) + 86px); right: 12px; }
  .mini-carte[data-coin="bg"] { bottom: calc(var(--barre) + 86px); left: 12px; }
  .mini-fond { position: absolute; inset: 0; }
  .mini-agrandir { position: absolute; right: 5px; bottom: 5px; z-index: 500; width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; padding: 0; color: var(--vert-fonce); pointer-events: none; }
  .mini-agrandir .icone { width: 17px; height: 17px; }
  .puce-autour { bottom: 20px; }
  .detail.ouvert ~ .puce-autour, body:has(.detail.ouvert) .puce-autour { display: none; }
}
.page-ordinateur { max-width: 460px; margin: 30px auto; text-align: center; display: grid; gap: 12px; justify-items: center; }
.page-ordinateur .pictogramme { width: 64px; height: 64px; border-radius: 18px; background: var(--vert-clair); color: var(--vert-fonce); display: flex; align-items: center; justify-content: center; }
.page-ordinateur .pictogramme .icone { width: 32px; height: 32px; }
.page-ordinateur .bouton { width: 100%; justify-content: center; min-height: 48px; }
/* Version ordinateur forcée sur téléphone : textes un peu plus grands pour rester lisibles une fois dézoomés */
body.version-ordinateur { font-size: 15px; }
.retour-telephone { position: fixed; z-index: 2500; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 99px; border: 0;
  background: var(--vert-fonce); color: #fff; font: inherit; font-size: 22px; font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.3); cursor: pointer; }
.retour-telephone .icone { width: 24px; height: 24px; }
/* ---------- Hors connexion ---------- */
.bandeau-hors-ligne { position: fixed; z-index: 2600; left: 50%; transform: translateX(-50%); top: calc(var(--entete) - 40px); display: flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 99px; background: #3f3f46; color: #fff; font-size: 12.5px; font-weight: 700; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.bandeau-hors-ligne .icone { width: 16px; height: 16px; flex: none; }
.pastille-attente { position: fixed; z-index: 2600; right: 12px; bottom: calc(var(--barre) + 12px); display: flex; align-items: center; gap: 6px; border: 0; border-radius: 99px; padding: 9px 14px; background: #b45309; color: #fff; font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; }
.pastille-attente .icone { width: 16px; height: 16px; }
.progression.grande { height: 12px; margin: 12px 0 6px; }
.lien { background: none; border: 0; padding: 0; color: var(--vert); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.qr-totp { width: 210px; height: 210px; margin: 8px 0; background: #fff; border: 1px solid var(--trait); border-radius: 10px; padding: 6px; }
.qr-totp svg { width: 100%; height: 100%; display: block; }
.etapes-totp { padding-left: 18px; margin: 0 0 8px; display: grid; gap: 8px; }
.bloc-totp code { font-size: 12px; background: var(--gris-clair); padding: 2px 5px; border-radius: 4px; word-break: break-all; }