/* Un seul style pour toute l'application : celui de la topographie LiDAR, direction « Instrument »
   (Henri, 30/09/2026 : « actualise toute l'app avec le style de l'interface LiDAR (...) il faut un
   seul style dans l'app »). Référence : src/topo3d.css.
   Les règles d'Henri, que cette feuille applique partout :
     - la typographie système du site, AUCUNE couleur d'accent : noir, blanc, gris (« une couleur
       qui ressort = signature IA ») ; les couleurs ne restent qu'aux DONNÉES (classes de prix,
       zones, hauteurs), jamais à l'interface ;
     - des panneaux en verre fumé posés sur la carte (voile 62 %, flou 18 px, filet intérieur d'un
       pixel à 7 %, arrondi 14 px) ;
     - des contrôles de 34 px de haut, arrondis à 8 px ; des segments à 2 px de jeu ;
     - les valeurs clés en grands chiffres fins (graisse 300), leurs libellés en gris 12 px ;
     - des interrupteurs plutôt que des cases ; une colonne d'icônes avec son infobulle.
   Chargée EN DERNIER (scripts/modules.json) : à spécificité égale, elle l'emporte. Elle ne fait que
   poser des jetons (--i-*) et les appliquer par des surcharges ciblées ; les autres feuilles gardent
   leur mise en page. Deux thèmes : sombre (celui de la topo) et clair (celui d'Henri). */

/* ══ 1. Jetons ══════════════════════════════════════════════════════════════════════════════ */
html[data-theme] .page-app {
  --i-fond: #0B0C0E;                         /* le fond derrière les panneaux (fenêtres plein écran) */
  --i-panneau: #141518;                      /* panneau opaque : il porte des en-têtes collants */
  --i-verre: rgba(14, 14, 14, 0.62);         /* le verre fumé de la topo */
  --i-verre-dense: rgba(20, 21, 24, 0.96);   /* le même, pour un panneau chargé de texte (menus) : presque plein, un menu passe souvent sur du texte */
  --i-flou: var(--verre-flou);
  --i-filet: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --i-trait: var(--filet);                   /* séparateurs */
  --i-ombre: 0 10px 30px rgba(0, 0, 0, 0.35);
  --i-encre: var(--plein);                   /* le blanc et le noir d'Instrument sont ceux du « plein » D2 (jamais var(--encre) : style.css la redéfinit sur .page-app) */
  --i-encre-2: rgba(255, 255, 255, 0.72);
  --i-lib: rgba(255, 255, 255, 0.5);         /* libellés 12 px */
  --i-plein: var(--plein);                   /* l'état « choisi » fort */
  --i-sur-plein: var(--plein-texte);
  --i-seg: var(--champ);                     /* piste d'un segment, fond d'un contrôle */
  --i-seg-actif: var(--actif);               /* segment choisi */
  --i-survol: rgba(255, 255, 255, 0.06);
  --i-piste: rgba(255, 255, 255, 0.16);      /* piste de curseur, interrupteur éteint */
  --i-bouton-eteint: rgba(255, 255, 255, 0.55);
  --i-rayon: var(--r-panneau);               /* panneau */
  --i-rayon-ctrl: var(--r-bouton);           /* contrôle */
  --i-ctrl: var(--h-bouton, 30px);           /* hauteur d'un contrôle : celle d'un bouton D2 (lot 3, 28/10/2026) */
  /* Les jetons des autres feuilles, ramenés à l'Instrument : tout ce qui les lit suit */
  --panneau: var(--i-verre);
  --surface-panneau: var(--i-panneau);
  --rayon-panneau: 14px;
  --rayon-carte: 10px;
  --ombre-flottant: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 10px 30px rgba(0, 0, 0, 0.35);
  --accent: #F2F2F2; --accent-fort: #F2F2F2; --sur-accent: #0B0C0E; --anneau: rgba(255, 255, 255, 0.18);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
html[data-theme="clair"] .page-app {
  --i-fond: #ECECEA;
  --i-panneau: #FBFBFA;
  --i-verre: rgba(252, 252, 251, 0.72);
  --i-verre-dense: rgba(252, 252, 251, 0.97);
  --i-filet: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  --i-ombre: 0 8px 24px rgba(0, 0, 0, 0.12);
  --i-encre-2: rgba(0, 0, 0, 0.68);
  --i-lib: rgba(0, 0, 0, 0.5);
  --i-survol: rgba(0, 0, 0, 0.04);
  --i-piste: rgba(0, 0, 0, 0.14);
  --i-bouton-eteint: #FFFFFF;
  --ombre-flottant: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
  --accent: #111112; --accent-fort: #111112; --sur-accent: #FFFFFF; --anneau: rgba(0, 0, 0, 0.14);
}

/* ══ 2. Briques communes ════════════════════════════════════════════════════════════════════ */
/* (Les boutons, tous, sont en section 5 : une seule main.) */
/* Le verre : tout panneau flottant sur une carte */
.page-app :is(.verre, .recherche-carte, .commandes, .info-zone, .fc-legende, .fc-seg, .maplibregl-ctrl-group, .outil-mesure) {
  background: var(--i-verre); -webkit-backdrop-filter: var(--i-flou); backdrop-filter: var(--i-flou); box-shadow: var(--i-filet), var(--i-ombre);
}
/* Les menus et panneaux chargés de texte : le même verre, plus dense pour se lire */
.page-app :is(.menu-flottant, .suggestions, .fc-menu, .cc-panneau, .legende-carte.cc-en-ligne) {
  background: var(--i-verre-dense); -webkit-backdrop-filter: var(--i-flou); backdrop-filter: var(--i-flou); box-shadow: var(--i-filet), var(--i-ombre); border-radius: var(--r-carte);
}
/* leurs en-têtes collants : du verre eux aussi (le texte qui passe dessous se floute) */
.page-app :is(.cc-panneau, .legende-carte.cc-en-ligne) .cc-tete { background: transparent; -webkit-backdrop-filter: var(--i-flou); backdrop-filter: var(--i-flou); }
.page-app :is(.cc-panneau, .legende-carte.cc-en-ligne) .cc-couche { background: transparent; }


/* Champs et menus natifs : 34 px, arrondi 8, fond de contrôle, sans cadre ; le focus = un filet */
.page-app .pg :is(.pg-champ input, .pg-champ select, .pm-champ-soc, .pg-reglages select, .fc-menu-cherche input, .pm-pages select, .rf-tri select),
.page-app .pg .fc-declencheur.fc-large {
  height: var(--i-ctrl); border: 0; border-radius: var(--r-bouton); background-color: var(--champ); box-shadow: inset 0 0 0 1px var(--filet); color: var(--i-encre); font-size: var(--t-13);
}
.page-app .pg .fc-declencheur.fc-large { -webkit-backdrop-filter: none; backdrop-filter: none; font-weight: 400; }
.page-app .pg .fc-declencheur.fc-large span { color: var(--i-encre); }
.page-app .pg :is(input, select):focus { outline: none; box-shadow: inset 0 0 0 1px var(--i-encre-2); }
.page-app .fc-declencheur b { background: var(--i-plein); color: var(--i-sur-plein); }
.page-app .fc-declencheur { border-radius: var(--i-rayon-ctrl); }

/* Interrupteurs plutôt que cases (ceux des calques de la topo) : 28 × 16, le bouton glisse à droite.
   1) les cases dessinées (span .fc-case-v après un input caché) */
.page-app .fc-case-v { position: relative; width: 28px; height: 16px; border-radius: var(--r-rond); background: var(--i-piste); box-shadow: none; transition: background 0.15s; }
.page-app .fc-case-v::after,
.page-app :is(.fc-option, .fc-case, .compte-cgu) input:checked + .fc-case-v::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--i-bouton-eteint); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transform: none; transition: left 0.15s, background 0.15s; }
.page-app :is(.fc-option, .fc-case, .compte-cgu) input:checked + .fc-case-v { background: var(--i-plein); box-shadow: none; }
.page-app :is(.fc-option, .fc-case, .compte-cgu) input:checked + .fc-case-v::after { left: 14px; background: var(--i-sur-plein); box-shadow: none; }
.page-app :is(.fc-option, .fc-case) input:disabled + .fc-case-v { opacity: 0.4; }
.page-app :is(.fc-option, .fc-case, .compte-cgu) input:focus-visible + .fc-case-v { outline: 2px solid var(--i-encre-2); outline-offset: 2px; }
/* 2) les cases natives des listes (bailleurs, rôles, zones, pièces) */
.page-app :is(.pm-types, .pg-calques, .pg-piece) input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 28px; height: 16px; margin: 0; border-radius: var(--r-rond); background: var(--i-piste); cursor: pointer; transition: background 0.15s;
}
.page-app :is(.pm-types, .pg-calques, .pg-piece) input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--i-bouton-eteint); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: left 0.15s, background 0.15s; }
.page-app :is(.pm-types, .pg-calques, .pg-piece) input[type="checkbox"]:checked { background: var(--i-plein); }
.page-app :is(.pm-types, .pg-calques, .pg-piece) input[type="checkbox"]:checked::after { left: 14px; background: var(--i-sur-plein); box-shadow: none; }
.page-app :is(.pm-types, .pg-calques, .pg-piece) input[type="checkbox"]:disabled { opacity: 0.4; }
.page-app :is(.pm-types, .pg-calques, .pg-piece) input[type="checkbox"]:focus-visible { outline: 2px solid var(--i-encre-2); outline-offset: 2px; }
.page-app .pm-types label { min-height: 30px; padding: 0 6px; margin: 0 -6px; border-radius: var(--r-bouton); gap: 10px; }
.page-app .pm-types label:hover { background: var(--i-survol); }
.page-app .fc-option { gap: 10px; }

/* Curseurs (recherches, opacité des couches) : piste de 3 px remplie d'encre, bouton blanc de 16 px */
.page-app .cs-piste::before, .page-app .cs-plein { top: 11.5px; height: 3px; }
.page-app .cs-piste::before { background: var(--i-piste); box-shadow: none; }
.page-app .cs-plein { background: var(--i-plein); }
.page-app .cs-tete output { font-weight: 500; }
.page-app .cs-bornes { color: var(--i-lib); }
@media (pointer: coarse) { .page-app .cs-piste::before, .page-app .cs-plein { top: 16.5px; } }
.page-app .cc-opacite input::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(to right, var(--i-plein) var(--cc-op, 100%), var(--i-piste) var(--cc-op, 100%)); box-shadow: none; }
.page-app .cc-opacite input::-moz-range-track { height: 3px; background: var(--i-piste); }
.page-app .cc-opacite input::-moz-range-progress { height: 3px; background: var(--i-plein); }
.page-app .cc-opacite input::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5.5px; }

/* Libellés : gris 12 px, casse normale */
.page-app .pg .pg-reglages h2 { font-size: var(--t-12); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--i-lib); }
.page-app :is(.pm-aide, .fc-aide, .fc-synthese-note) { color: var(--i-lib); font-size: var(--t-12); }

/* Les états : un chargement ou un message seul se centre dans son panneau */
.page-app .fc-resultats:has(> .note:only-child) { display: grid; place-items: center; }
.page-app .fc-resultats > .note:only-child { max-width: 360px; margin: 0; padding: 12px 16px; border-radius: var(--r-carte); background: var(--i-seg); color: var(--i-encre-2); font-size: var(--t-13); text-align: center; }
.page-app .fc-resultats > .pc-vide { margin: 12px auto 0; }

/* ══ 3. Carte d'accueil ═════════════════════════════════════════════════════════════════════ */
.page-app .recherche-carte { border-radius: var(--i-rayon); }
@media (min-width: 701px) { .page-app .recherche-carte input { height: 40px; } }
.page-app .recherche-carte:focus-within { box-shadow: var(--i-filet), inset 0 0 0 1px var(--i-encre-2), var(--i-ombre); }
.page-app .recherche-carte .raccourci { border: 0; background: var(--i-seg); color: var(--i-lib); }
.page-app .puce-compte { background: var(--i-plein); color: var(--i-sur-plein); }
.page-app .menu-flottant [aria-checked="true"]::after { border-color: var(--i-encre); }

/* La colonne de commandes : les outils de la topo (40 px, arrondi 9, 2 px de jeu), l'infobulle au
   survol (src/instrument.js retire le title natif, qui doublait l'infobulle) */
.page-app .commandes { gap: 2px; padding: 5px; border-radius: var(--i-rayon); overflow: visible; }
.page-app .commande-connecte { color: var(--i-encre); }
.page-app .commande-connecte::after { top: 7px; right: 7px; width: 6px; height: 6px; background: var(--i-encre); box-shadow: none; }
@media (hover: hover) {
  .page-app .commande[data-l]::before { content: attr(data-l); position: absolute; right: 48px; top: 50%; transform: translateY(-50%); padding: 5px 8px; border-radius: var(--r-pastille); background: var(--i-verre-dense); -webkit-backdrop-filter: var(--i-flou); backdrop-filter: var(--i-flou); box-shadow: var(--i-filet); color: var(--i-encre); font-size: var(--t-12); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
  .page-app .commande[data-l]:hover::before { opacity: 1; }
}

/* Boutons de zoom de la carte */

/* L'infobulle d'une zone : un grand chiffre fin */
.page-app .info-zone { padding: 10px 12px; border-radius: var(--r-carte); }
.page-app .iz-titre { color: var(--i-lib); font-weight: 400; }
.page-app .iz-titre span { color: var(--i-lib); }
.page-app .iz-valeur { margin-top: 4px !important; font-size: var(--t-22); font-weight: 500; letter-spacing: -0.02em; }
.page-app .info-zone .fiab, .page-app .info-zone .fiab b { color: var(--i-lib); }

/* La bulle d'une parcelle (téléphone) : du verre, sans pointe (la topo n'en a aucune), puces en segments */
.page-app .bulle-parcelle { border-radius: var(--r-carte); background: var(--i-verre-dense); -webkit-backdrop-filter: var(--i-flou); backdrop-filter: var(--i-flou); box-shadow: var(--i-filet), var(--i-ombre); }
.page-app .bulle-parcelle::after { display: none; }
.page-app .bp-puce { height: 22px; border-radius: var(--r-pastille); background: var(--i-seg); font-weight: 500; }
.page-app .bp-rouge { color: var(--i-encre); }

/* Message passager : la pastille claire de la topo (sombre sur le thème clair) */
.page-app .toast { border-radius: var(--r-moyen); background: var(--i-plein); color: var(--i-sur-plein); box-shadow: var(--i-ombre); }

/* La feuille (prix, commune, section, parcelle) : panneau opaque (ses en-têtes sont collants),
   arrondi et filet de l'Instrument */
.page-app .feuille { background: var(--i-panneau); box-shadow: var(--i-filet), var(--i-ombre); }
@media (min-width: 900px) { .page-app .feuille { border-radius: var(--i-rayon); } }
.page-app .feuille .actions-pied, .page-app .barre-fiche { background: var(--i-panneau); box-shadow: 0 -1px 0 var(--i-trait); }
/* Chiffres clés : grands et fins, libellé gris au-dessus ; plus d'encadré */
.page-app .vue-live { padding: 12px 0 2px; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--i-trait); }
.page-app .feuille-corps .vue-live .vl-valeur { font-size: var(--t-22); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.page-app .feuille-corps .bande .bande-valeur { font-size: var(--t-22); font-weight: 500; letter-spacing: -0.02em; }
.page-app .feuille-corps .fiche-parcelle .bande .bande-valeur { font-size: 1.25rem; }
.page-app .feuille-corps .bande-cellule.choisie .bande-valeur { text-decoration: none; font-weight: 400; }
/* Les bandes de chiffres et les listes de la feuille : plus d'encadré, des filets (comme les quatre
   chiffres de la topo) */
.page-app .feuille .bande { gap: 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--i-trait); border-bottom: 1px solid var(--i-trait); }
.page-app .feuille .bande-cellule, .page-app .feuille .bande-cellule + .bande-cellule { padding: 10px 12px 10px 0; background: none; }
.page-app .feuille .bande-cellule + .bande-cellule { padding-left: 12px; border-left: 1px solid var(--i-trait); }
.page-app .feuille-corps .bande-titre { color: var(--i-lib); }
.page-app .feuille :is(.liste-communes, .liste-ventes) { border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--i-trait); }
.page-app .feuille :is(.liste-communes, .liste-ventes) li { border-bottom-color: var(--i-trait); }
/* Les boutons de l'accueil (Classements, Transactions…) : une barre d'outils segmentée */
.page-app .actions-accueil { gap: 2px; padding: 2px; border-radius: var(--r-moyen); background: var(--i-seg); }
/* Les volets de la fiche (Prix, Règles, Bilan…) : un segment sur deux lignes de trois */
.page-app .volets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; border-radius: var(--r-moyen); background: var(--i-seg); }
/* « Étudier cette parcelle » passait sur deux lignes dans un tiers de panneau : chaque bouton prend
   la largeur de son texte, le reste se partage */
.page-app .actions-pied { grid-auto-columns: auto; }
.page-app .chiffres-plu { border-radius: var(--r-moyen); }

/* Couches (accueil et cartes du compte) */
.page-app .legende-carte.cc-en-ligne { border-radius: var(--i-rayon); }
.page-app .cc-tiree { box-shadow: inset 0 0 0 1px var(--i-encre-2), var(--i-ombre) !important; }
.page-app .cc-ajout:hover i { background: var(--i-plein); color: var(--i-sur-plein); }

/* Comptes (src/compte.js) : la fenêtre de connexion et son menu, dans le verre */
.page-app .compte-fenetre { border-radius: var(--i-rayon); background: var(--i-panneau); box-shadow: var(--i-filet), 0 24px 60px rgba(0, 0, 0, 0.35); }

/* ══ 4. Fenêtres plein écran (recherche foncière et ses onglets, pièces, division) ═════════ */
.page-app .pg { background: var(--i-fond); --surface: var(--i-panneau); --fond: var(--i-panneau); }
.page-app .pg .og-barre, .page-app .pg .pg-barre-haut { background: var(--i-fond); border-bottom: 0; }
.page-app .og-onglets { box-shadow: none; }
.page-app .fc-menu { border-radius: var(--r-carte); }


/* Au bureau : des panneaux posés sur le fond, séparés par 8 px (filtres, carte, résultats), comme
   les panneaux de la topo. On garde la grille (la carte ne passe PAS sous les panneaux : ses
   cadrages et « Suivre la carte » voient exactement ce qui est à l'écran) ; les poignées de
   src/fenetres.js se logent dans la gouttière. */
@media (min-width: 900px) {
  .page-app .pg > .pg-appli { gap: 8px; padding: 0 8px 8px; }
  .page-app .pg .pg-reglages { scrollbar-width: thin; scrollbar-color: var(--i-piste) transparent; border-right: 0; border-radius: var(--i-rayon); background: var(--i-panneau); box-shadow: var(--i-filet); padding: 16px 16px 40px; }
  .page-app .pg .pg-plateau { border-radius: var(--i-rayon); box-shadow: var(--i-filet); }
  .page-app .pg .fc-plateau { gap: 8px; }
  .page-app .pg .fc-carte { border-radius: var(--i-rayon); overflow: hidden; box-shadow: var(--i-filet); }
  .page-app .pg .fc-resultats { scrollbar-width: thin; scrollbar-color: var(--i-piste) transparent; border-top: 0; border-radius: var(--i-rayon); background: var(--i-panneau); box-shadow: var(--i-filet); padding: 14px 16px 24px; }
  .page-app .pg .pg-poignee-x { margin-left: 12px; }
  .page-app .pg .pg-poignee-y { margin-top: 4px; }
  .page-app .pg .rf-fiche { border-left: 0; border-radius: var(--i-rayon); box-shadow: var(--i-filet), var(--i-ombre); }
}
.page-app .pg .pg-poignee:hover::after, .page-app .pg .pg-poignee:focus-visible::after, .page-app .pg-tire-x .pg-poignee-x::after, .page-app .pg-tire-y .pg-poignee-y::after { background: var(--i-lib); }
/* Au téléphone, les panneaux s'empilent bord à bord : la couleur seulement */
@media (max-width: 899px) {
  .page-app .pg .pg-reglages, .page-app .pg .fc-resultats { background: var(--i-panneau); }
}

/* La synthèse au-dessus du tableau : quatre grands chiffres fins, libellés gris 12 px, sans cases */
.page-app .fc-synthese { gap: 0; border-radius: 0; background: none; box-shadow: none; padding-bottom: 12px; border-bottom: 1px solid var(--i-trait); }
.page-app .fc-synthese > div { padding: 0 16px 0 0; background: none; }
.page-app .fc-synthese > div + div { padding-left: 16px; border-left: 1px solid var(--i-trait); }
.page-app .fc-synthese dt { color: var(--i-lib); font-size: var(--t-12); }
.page-app .fc-synthese dd { margin-top: 4px; font-size: var(--t-22); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.page-app .fc-synthese dd small { margin-left: 3px; color: var(--i-lib); font-size: var(--t-12); font-weight: 400; letter-spacing: 0; }
.page-app .fc-synthese-note { margin: 8px 0 12px; }
@media (max-width: 480px) {
  .page-app .fc-synthese { row-gap: 12px; }
  .page-app .fc-synthese > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .page-app .fc-synthese dd { font-size: 1.5rem; }
}

/* Les tableaux (parcelles, permis, parc) : denses, sans cadre, en-têtes gris collants, chiffres
   alignés ; la ligne choisie se marque d'un trait d'encre */
.page-app .fc-table-cadre { border: 0; border-top: 1px solid var(--i-trait); border-radius: 0; background: transparent; }
.page-app .fc-table { font-size: var(--t-13); }
.page-app .fc-table th, .page-app .fc-table td { height: 32px; border-bottom-color: var(--i-trait); }
.page-app .fc .fc-table th, .page-app .fc .fc-table td { height: 32px; }
.page-app .fc-table thead th { height: 30px; color: var(--i-lib); font-weight: 400; }
.page-app .fc-table thead button i { color: var(--i-encre); }
.page-app .fc-table thead th[aria-sort], .page-app .fc-table thead button:hover { color: var(--i-encre); }
.page-app .fc-table tbody th { font-weight: 500; }
.page-app .fc-table tbody tr.fc-choisie > :first-child { box-shadow: inset 2px 0 0 var(--i-encre); }
.page-app .fc-table tbody tr:focus-visible { outline-color: var(--i-encre-2); }
/* Zone rouge du PPRN : l'encre du tableau et une pastille, plus un texte rouge qui crie */
.page-app .fc-t-rouge { color: var(--i-encre); font-weight: 500; }
.page-app .fc-t-rouge::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #B23A2E; vertical-align: 1px; }
.page-app .fc-t-exclu { background: var(--i-seg); color: var(--i-encre-2); }
.page-app :is(.pm-table, .rf-table) a, .page-app .pc-identite a, .page-app :is(.pm-lien, .pm-reprendre, .fc-groupe-tete button) { color: var(--i-encre); }
.page-app .pm-table a { text-decoration: underline; text-decoration-color: var(--i-trait); text-underline-offset: 2px; }
.page-app .pm-liste-soc { border-radius: var(--r-moyen); box-shadow: inset 0 0 0 1px var(--i-trait); }
.page-app :is(.pm-masquees, .pc-identite, .pg-info) { border-radius: var(--r-moyen); background: var(--i-seg); }
.page-app .fc-sz { background: var(--i-seg); color: var(--i-lib); }

/* La liste des références : des lignes, pas des cartes */
.page-app .rf-liste { gap: 0; }
.page-app .rf-liste > li .rf-ligne.actif { background: var(--i-seg-actif); box-shadow: inset 2px 0 0 var(--i-encre); }
.page-app .rf-silhouette { border-radius: var(--r-bouton); background: var(--i-seg); }
.page-app .rf-nom em { color: var(--i-lib); }
.page-app .rf-strip { border-top: 1px solid var(--i-trait); background: none; }
.page-app .rf-strip b { font-size: var(--t-22); font-weight: 500; }
.page-app .rf-strip span { font-size: var(--t-12); color: var(--i-lib); }

/* La légende d'une carte du compte : verre, une ligne */
.page-app .pg .fc-legende { border-radius: var(--r-moyen); color: var(--i-encre-2); }

/* Pièces graphiques et division : la vignette choisie, la pièce choisie */
.page-app .pg-vignette[aria-current="true"] span { outline-color: var(--i-encre); }
.page-app .pg-piece { grid-template-columns: 28px 1fr auto; gap: 10px; border-radius: var(--i-rayon-ctrl); }
.page-app .pg-piece[aria-current="true"] { background: var(--i-seg-actif); box-shadow: none; }

/* ══ 5. Les boutons : une seule main ════════════════════════════════════════════════════════
   Henri, 30/09 : « tous les boutons avec le même style », « une unique signature de dev ». Tout
   bouton de l'application appartient à UNE de ces familles, et à aucune autre :
     1. standard      34 px (36 au téléphone), arrondi 8, 13 px graisse 500, voile neutre + filet
                      d'un pixel, texte encre. Un bouton d'icône seul est un standard carré ;
     2. principal     le même gabarit, encre pleine (blanc en sombre, noir en clair), texte inverse ;
                      une seule action par écran ;
     3. discret       le même gabarit SANS fond : icônes dans une barre ou un panneau (couches,
                      fermer, replier, zoom) et lignes de menu ; 40 px dans la colonne d'outils ;
     4. segment       piste de 34 px, 2 px de jeu, boutons de 30 px arrondis 6 ; le choisi prend un
                      voile plus clair (onglets, volets, précision, périodes, catégories, formes) ;
     5. lien          texte seul, souligné fin, pour les actions tertiaires.
   Mêmes états partout : survol, appuyé, désactivé à 30 %, focus clavier = anneau neutre de 2 px.
   Aucune ombre portée sur un bouton, aucun dégradé, aucune pastille colorée.
   Les rapports PDF (.rapport), la topographie (.tp) et sa coupe (.cp) ont leur propre dessin : exclus. */
html[data-theme] .page-app { --i-bouton: var(--h-bouton, 30px); --i-fermer: 28px; --i-outil: 40px; --i-anneau: rgba(255, 255, 255, 0.4); }
html[data-theme="clair"] .page-app { --i-anneau: rgba(0, 0, 0, 0.35); }

/* Ce qui est commun aux cinq : le corps, la graisse, pas de bordure, pas d'ombre, pas de dégradé */
html[data-theme] .page-app :is(.bouton, .puce-filtre, .fc-declencheur, .compte-google, .rplu-bouton, .tri, .fermer, .feuille-replier, .compte-fermer, .recherche-avancee, .dv-suppr, .fc-icone, .rf-fleche,
  .cc-poignee, .cc-oeil, .cc-x, .commande, .maplibregl-ctrl-group button, .menu-flottant button, .cc-ajout, .compte-menu > button, .compte-historique button, .rplu-item, .fc-item, .fc-table thead button,
  .pg-seg button, .fc-seg button, .og-onglets button, .volet, .mesure, .pm-puces button, .pc-cats button, .rf-forme, .menu-grille button, .pm-nav button, .rf-points button, .segment button,
  .lien, .pm-lien, .visite-lien, .pm-reprendre, .fc-groupe-tete button, .fc-leg-titre, .pm-fiche, .rf-ligne, .pg-vignette, .pm-puce):not(.rapport *, .tp *, .cp *) {
  border: 0; font-family: inherit; font-size: var(--t-13); font-weight: 500; letter-spacing: 0; background-image: none; transform: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html[data-theme] .page-app :is(.bouton, .puce-filtre, .fc-declencheur, .compte-google, .rplu-bouton, .tri, .fermer, .feuille-replier, .compte-fermer, .recherche-avancee, .dv-suppr, .fc-icone, .rf-fleche,
  .cc-poignee, .cc-oeil, .cc-x, .commande, .maplibregl-ctrl-group button, .menu-flottant button, .cc-ajout, .compte-menu > button, .compte-historique button, .rplu-item, .fc-item, .fc-table thead button,
  .pg-seg button, .fc-seg button, .og-onglets button, .volet, .mesure, .pm-puces button, .pc-cats button, .rf-forme, .menu-grille button, .pm-nav button, .rf-points button, .segment button,
  .lien, .pm-lien, .visite-lien, .pm-reprendre, .fc-groupe-tete button, .fc-leg-titre, .pm-fiche, .rf-ligne, .pg-vignette, .pm-puce):not(.rapport *, .tp *, .cp *):focus-visible {
  outline: 2px solid var(--i-anneau); outline-offset: 2px;
}
html[data-theme] .page-app :is(.bouton, .puce-filtre, .fc-declencheur, .compte-google, .rplu-bouton, .tri, .fermer, .feuille-replier, .compte-fermer, .recherche-avancee, .dv-suppr, .fc-icone, .rf-fleche,
  .cc-poignee, .cc-oeil, .cc-x, .commande, .maplibregl-ctrl-group button, .menu-flottant button, .cc-ajout, .compte-menu > button, .rplu-item, .fc-item,
  .pg-seg button, .fc-seg button, .og-onglets button, .volet, .mesure, .pm-puces button, .pc-cats button, .rf-forme, .menu-grille button, .pm-nav button, .rf-points button, .segment button):not(.rapport *, .tp *, .cp *):disabled {
  opacity: 0.3; cursor: default;
}

/* 1. Standard (et bouton d'icône seul, carré) */
html[data-theme] .page-app :is(.bouton:not(.bouton-primaire), .puce-filtre, .fc-declencheur, .compte-google, .rplu-bouton, .tri, .rf-fleche, .pm-bouton-filtres):not(.rapport *, .tp *, .cp *) {
  align-items: center; justify-content: center; gap: 7px; height: var(--i-bouton); min-height: var(--i-bouton); margin: 0; padding: 0 14px;
  border-radius: var(--r-bouton); background-color: var(--champ); box-shadow: none; color: var(--i-encre); line-height: 1.2; white-space: nowrap;
}
html[data-theme] .page-app :is(.bouton:not(.bouton-primaire), .puce-filtre, .fc-declencheur, .compte-google, .rplu-bouton, .tri, .rf-fleche, .pm-bouton-filtres):not(.rapport *, .tp *, .cp *):is(:hover, [aria-expanded="true"], [aria-pressed="true"], .actif) { background-color: var(--actif); }
html[data-theme] .page-app :is(.bouton:not(.bouton-primaire), .puce-filtre, .fc-declencheur, .compte-google, .rplu-bouton, .tri, .rf-fleche, .pm-bouton-filtres):not(.rapport *, .tp *, .cp *):active { background-color: var(--actif); opacity: 0.85; }
/* posés sur une carte ou une photo : le même bouton, en verre (le voile seul ne se lirait pas) */
html[data-theme] .page-app :is(.puce-filtre, .fc-outils .fc-declencheur, .fc-outils > .bouton, .rf-fleche):not(.rapport *, .tp *, .cp *) { background-color: var(--i-verre); -webkit-backdrop-filter: var(--i-flou); backdrop-filter: var(--i-flou); }
html[data-theme] .page-app :is(.puce-filtre, .fc-outils .fc-declencheur, .fc-outils > .bouton, .rf-fleche):not(.rapport *, .tp *, .cp *):is(:hover, [aria-expanded="true"]) { background-color: var(--i-verre); box-shadow: inset 0 0 0 1px var(--i-encre-2); }
html[data-theme] .page-app .puce-filtre[aria-pressed="true"]:not(.rapport *) { background-color: var(--i-plein); color: var(--i-sur-plein); }
/* carrés : une icône seule */
html[data-theme] .page-app .rf-fleche:not(.rapport *, .tp *, .cp *) { width: var(--i-bouton); padding: 0; }
/* Fermer : la croix nue de D2 (.d2-btn-ic, d2-carte.css), 28 px au bureau, 44 au doigt ; jamais un mot ni un cadre.
   Elle vaut aussi dans les rapports et les fenêtres plein écran (lot 1 de l'étude de cohérence du 28/10/2026). */
html[data-theme] :is(.page-app, body) :is(.fermer, .compte-fermer):not(.tp *, .cp *) {
  place-items: center; flex: none; width: var(--i-fermer, 28px); height: var(--i-fermer, 28px); min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: var(--r-bouton); background: none; box-shadow: none; color: var(--attenue); cursor: pointer;
}
html[data-theme] :is(.page-app, body) :is(.fermer, .compte-fermer):not(.tp *, .cp *):is(:hover, :focus-visible) { background: var(--survol); color: var(--encre); }
html[data-theme] :is(.page-app, body) :is(.fermer, .compte-fermer) svg { width: 15px; height: 15px; }
/* le menu déroulant qui a l'air d'un champ (communes, zones) : texte à gauche */
html[data-theme] .page-app .fc-declencheur.fc-large { justify-content: flex-start; width: 100%; padding: 0 10px 0 12px; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme] .page-app .fc-declencheur.fc-large span { color: var(--i-encre); font-weight: 400; }
/* un bouton de panneau étroit (« Centrer la parcelle ») garde sa hauteur : son texte s'abrège */
html[data-theme] .page-app :is(.pg-reglages, .dv-lot) .bouton:not(.bouton-primaire) { min-width: 0; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; }
/* les compteurs et pastilles d'un bouton : encre pleine, jamais une couleur */
html[data-theme] .page-app :is(.fc-declencheur b, .puce-compte) { background: var(--i-plein); color: var(--i-sur-plein); }
html[data-theme] .page-app .puce-filtre[aria-pressed="true"] .puce-compte { background: var(--i-sur-plein); color: var(--i-plein); }

/* 2. Principal */
html[data-theme] .page-app .bouton-primaire:not(.rapport *, .tp *, .cp *) {
  align-items: center; justify-content: center; gap: 7px; height: var(--i-bouton); min-height: var(--i-bouton); margin: 0; padding: 0 14px;
  border-radius: var(--r-bouton); background-color: var(--plein); box-shadow: none; color: var(--plein-texte); font-size: var(--t-13); font-weight: 500; line-height: 1.2; white-space: nowrap;
}
html[data-theme] .page-app .bouton-primaire:not(.rapport *, .tp *, .cp *):hover { background-color: var(--plein); opacity: 0.88; }
html[data-theme] .page-app .bouton-primaire:not(.rapport *, .tp *, .cp *):active { opacity: 0.75; }

/* 3. Discret : icônes d'une barre ou d'un panneau, lignes de menu */
html[data-theme] .page-app :is(.feuille-replier, .recherche-avancee, .dv-suppr, .fc-icone, .cc-poignee, .cc-oeil, .cc-x, .maplibregl-ctrl-group button, .commande) {
  place-items: center; width: var(--i-bouton); height: var(--i-bouton); min-height: 0; margin: 0; padding: 0; border-radius: var(--r-bouton); background: none; box-shadow: none; color: var(--i-encre-2);
}
/* (l'affichage reste celui de chaque module : certains de ces boutons sont cachés au bureau ou au téléphone) */
html[data-theme] .page-app :is(.maplibregl-ctrl-group button, .cc-poignee, .cc-oeil, .cc-x) { display: grid; }
html[data-theme] .page-app :is(.menu-flottant button, .cc-ajout, .compte-menu > button, .compte-historique button, .rplu-item, .fc-item) {
  min-height: var(--i-bouton); margin: 0; border-radius: var(--r-bouton); background: none; box-shadow: none; color: var(--i-encre);
}
html[data-theme] .page-app :is(.feuille-replier, .recherche-avancee, .dv-suppr, .fc-icone, .cc-poignee, .cc-oeil, .cc-x, .maplibregl-ctrl-group button, .commande,
  .menu-flottant button, .cc-ajout, .compte-menu > button, .compte-historique button, .rplu-item, .fc-item):is(:hover, [aria-expanded="true"]) { background: var(--i-survol); color: var(--i-encre); }
html[data-theme] .page-app .commandes > .commande[aria-pressed="true"] { background: var(--i-seg-actif); box-shadow: var(--i-filet); color: var(--i-encre); }
html[data-theme] .page-app .commandes > .commande { position: relative; width: var(--i-outil); height: var(--i-outil); }
html[data-theme] .page-app .commande + .commande { border-top: 0; }
html[data-theme] .page-app .maplibregl-ctrl-group { display: grid; gap: 2px; padding: 3px; border-radius: var(--r-moyen); }
html[data-theme] .page-app .maplibregl-ctrl-group button + button { border-top: 0; }
html[data-theme] .page-app .maplibregl-ctrl-group button .maplibregl-ctrl-icon { width: 100%; height: 100%; }
/* la ligne d'une couche : poignée, œil, nom, croix, à la hauteur d'un contrôle */
html[data-theme] .page-app .cc-ligne { gap: 0; min-height: var(--i-bouton); }
html[data-theme] .page-app .cc-poignee { width: 24px; }
html[data-theme] .page-app :is(.cc-opacite, .cc-leg, .cc-leg-carte) { padding-left: 62px; }
html[data-theme] .page-app .cc-ajout i { border-radius: var(--r-pastille); box-shadow: var(--i-filet); }
html[data-theme] .page-app .cc-ajout:hover i { background: var(--i-seg-actif); color: var(--i-encre); }
/* la ligne du compte qui détruit : l'encre, pas le rouge */
html[data-theme] .page-app .compte-menu > .compte-danger { color: var(--i-encre-2); }
html[data-theme] .page-app .compte-menu > .compte-foncier { box-shadow: var(--i-filet); font-weight: 500; }

/* 4. Segments : la piste, puis ses boutons */
html[data-theme] .page-app :is(.pg-seg, .fc-seg, .og-onglets, .volets, .actions-accueil, .mesures, .pm-puces, .pc-cats, .rf-formes, .menu-grille, .pm-nav, .rf-points, .segment):not(.rapport *, .tp *, .cp *) {
  gap: 2px; padding: 2px; border-radius: var(--r-bouton); background-color: var(--i-seg); box-shadow: none;
}
html[data-theme] .page-app :is(.fc-seg) { background-color: var(--i-verre); box-shadow: var(--i-filet); }
html[data-theme] .page-app :is(.pg-seg, .fc-seg, .og-onglets, .volets, .actions-accueil, .mesures, .pm-puces, .pc-cats, .rf-formes, .menu-grille, .pm-nav, .rf-points, .segment):not(.rapport *, .tp *, .cp *) > :is(button, .bouton) {
  height: 30px; min-height: 0; margin: 0; padding: 0 10px; border-radius: var(--r-pastille); background: none; box-shadow: none; color: var(--i-lib); line-height: 1.2; white-space: nowrap;
}
html[data-theme] .page-app :is(.pg-seg, .fc-seg, .og-onglets, .volets, .actions-accueil, .mesures, .pm-puces, .pc-cats, .rf-formes, .menu-grille, .pm-nav, .rf-points, .segment):not(.rapport *, .tp *, .cp *) > :is(button, .bouton):hover { background: none; color: var(--i-encre); }
html[data-theme] .page-app :is(.pg-seg, .fc-seg, .og-onglets, .volets, .actions-accueil, .mesures, .pm-puces, .pc-cats, .rf-formes, .menu-grille, .pm-nav, .rf-points, .segment):not(.rapport *, .tp *, .cp *) > :is(button, .bouton):is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="page"], [aria-current="true"], .actif) {
  background: var(--i-seg-actif); box-shadow: none; color: var(--i-encre);
}
html[data-theme] .page-app .menu-grille > button::after { display: none; }
/* les pistes qui passent à la ligne (catégories, formes, périodes) */
html[data-theme] .page-app :is(.pm-puces, .pc-cats) { display: flex; flex-wrap: wrap; }
html[data-theme] .page-app .rf-formes { display: grid; grid-template-columns: minmax(0, 1fr); }
html[data-theme] .page-app .rf-formes > .rf-forme { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; justify-content: stretch; text-align: left; }
html[data-theme] .page-app .rf-forme svg { width: 20px; height: 16px; color: currentColor; }
html[data-theme] .page-app .pm-nav { margin-left: auto; }
html[data-theme] .page-app .volets > .volet { padding: 0 4px; }
html[data-theme] .page-app .pg-nords > button svg { height: 22px; }

/* 5. Lien : texte seul */
html[data-theme] .page-app :is(.lien, .pm-lien, .visite-lien, .pm-reprendre, .fc-groupe-tete button, .fc-leg-titre, .pm-fiche):not(.rapport *, .tp *, .cp *) {
  height: auto; min-height: 0; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--i-encre);
  line-height: 18px; text-decoration: underline; text-decoration-color: var(--i-trait); text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap;
}
html[data-theme] .page-app :is(.lien, .pm-lien, .visite-lien, .pm-reprendre, .fc-groupe-tete button, .fc-leg-titre, .pm-fiche):not(.rapport *, .tp *, .cp *):hover { background: none; text-decoration-color: currentColor; }
html[data-theme] .page-app :is(.pm-lien, .visite-lien, .lien) { white-space: normal; }
html[data-theme] .page-app .visite-lien { color: var(--i-lib); }
html[data-theme] .page-app .fc-leg-titre { display: inline-flex; text-decoration: none; }
html[data-theme] .page-app .fc-leg-titre::after { margin-left: 2px; }

/* Les en-têtes de tableau triables : du texte, la hauteur d'une ligne */
html[data-theme] .page-app .fc-table thead button { height: var(--i-bouton); min-height: 0; margin: 0; border-radius: var(--r-bouton); background: none; box-shadow: none; color: inherit; }
html[data-theme] .page-app .fc-table thead button:hover { background: var(--i-survol); }
html[data-theme] .page-app .fc-table thead th { height: var(--i-bouton); }
/* une ligne du tableau porte ses deux boutons d'icône (fiche, rapport) : elle a leur hauteur */
html[data-theme] .page-app .fc-table tbody :is(th, td) { height: var(--i-bouton); }
html[data-theme] .page-app .fc-table .fc-t-actions { white-space: nowrap; }
/* Les lignes-boutons (références, vignettes des pièces, sociétés choisies) : sans fond ni ombre */
html[data-theme] .page-app :is(.rf-ligne, .pg-vignette, .pm-puce) { border-radius: var(--r-bouton); background: none; box-shadow: none; }
html[data-theme] .page-app .rf-ligne:hover { background: var(--i-survol); }
html[data-theme] .page-app .rf-liste > li + li { border-top: 1px solid var(--i-trait); }
html[data-theme] .page-app .rf-liste > li .rf-ligne.actif { background: var(--i-seg-actif); box-shadow: none; }
html[data-theme] .page-app .pm-puce { height: var(--i-bouton); padding: 0 10px; background: var(--i-seg); box-shadow: var(--i-filet); color: var(--i-encre); }

/* Une seule famille d'icônes : 16 px, trait de 1,4 px quelle que soit la grille du dessin */
html[data-theme] .page-app :is(.bouton, .puce-filtre, .fc-declencheur, .rplu-bouton, .fermer, .feuille-replier, .compte-fermer, .recherche-avancee, .dv-suppr, .fc-icone, .cc-oeil, .commande):not(.rapport *, .tp *, .cp *) > svg {
  width: 16px; height: 16px; flex: none;
}
html[data-theme] .page-app :is(.bouton, .puce-filtre, .fc-declencheur, .rplu-bouton, .fermer, .feuille-replier, .compte-fermer, .recherche-avancee, .dv-suppr, .fc-icone, .cc-oeil, .commande):not(.rapport *, .tp *, .cp *) > svg * {
  vector-effect: non-scaling-stroke; stroke-width: 1.4px;
}

/* Les champs et les menus natifs : le gabarit d'un bouton (34 px, 36 au téléphone, arrondi 8) */
html[data-theme] .page-app :is(.pg, .feuille, .compte-fenetre, .fc-menu, .outil-mesure) :is(input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="date"], select):not(.rapport *, .tp *, .cp *, .cs *) {
  height: var(--i-bouton); border: 0; border-radius: var(--r-bouton); background-color: var(--i-seg); box-shadow: var(--i-filet); color: var(--i-encre); font-family: inherit; font-size: var(--t-13);
}
html[data-theme] .page-app :is(.pg, .feuille, .compte-fenetre, .fc-menu, .outil-mesure) :is(input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="date"], select):not(.rapport *, .tp *, .cp *, .cs *):focus {
  outline: none; box-shadow: inset 0 0 0 1px var(--i-encre-2);
}
/* au téléphone, 16 px : sous 16 px, Safari iOS zoome la page quand un champ prend le focus */
@media (max-width: 899px) {
  html[data-theme] .page-app :is(.pg, .feuille, .compte-fenetre, .fc-menu, .outil-mesure) :is(input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="date"], select):not(.rapport *, .tp *, .cp *, .cs *) { font-size: 1rem; }
}
/* le champ « Rechercher dans le règlement » est un cadre qui porte son champ */
html[data-theme] .page-app .rplu-champ { height: var(--i-bouton); border-radius: var(--r-bouton); background: var(--i-seg); box-shadow: var(--i-filet); }
html[data-theme] .page-app .rplu-champ input { height: 100%; background: none; box-shadow: none; }
html[data-theme] .page-app .rplu-item mark { background: var(--i-seg-actif); color: var(--i-encre); }

/* ══ 6. Les pastilles des données (types de biens, familles de permis) ══════════════════════
   La gamme est sobre (anthracite, pierre, sable, blanc cassé : carte.js, IMMO_COULEURS_TYPES) :
   un point clair sur un panneau clair, ou sombre sur un panneau sombre, disparaîtrait ; chaque
   pastille porte donc un filet de contraste. Le rond cerclé (aménagement, démolition) est vide. */
html[data-theme] .page-app { --i-contour-point: rgba(255, 255, 255, 0.28); }
html[data-theme="clair"] .page-app { --i-contour-point: rgba(0, 0, 0, 0.45); }
html[data-theme] .page-app :is(.lg-types i, .pastille, .pk-point, .fc-legende i.rond.plein, .bande-titre .pastille) { box-shadow: 0 0 0 1px var(--i-contour-point); }
html[data-theme] .page-app .pk-point { flex: none; width: 9px; height: 9px; border-radius: 50%; }
html[data-theme] .page-app .pk-carre { border-radius: 1.5px; } /* le permis est un carré sur la carte, la vente un rond */
html[data-theme] .page-app .pk-cercle { background: none !important; box-shadow: inset 0 0 0 2px var(--i-encre); }
html[data-theme] .page-app .lg-types i { width: 9px; height: 9px; border-radius: 50%; }
/* « ma position » : un point d'encre, plus le bleu du système */
html[data-theme] .page-app .point-ici { background: var(--i-plein); border-color: var(--i-sur-plein); box-shadow: 0 0 0 7px var(--i-seg-actif); }

/* ══ 7. Superpositions au téléphone (simulateur iPhone, 30/09) ══════════════════════════════ */
/* Pendant la saisie, la barre de recherche et ses suggestions passent devant la feuille levée
   (la liste s'ouvrait dessous, invisible) */
html[data-theme] .page-app .haut:focus-within { z-index: 7; }
/* Les trois actions de la fiche (Étudier cette parcelle, Rapport PDF, Voir la topo) tiennent dans
   390 px : chacune peut céder un peu de largeur, son texte s'abrège plutôt que de sortir de l'écran */
@media (max-width: 899px) {
  html[data-theme] .page-app :is(.feuille .actions-pied, .barre-fiche .actions-pied) { grid-auto-columns: minmax(0, auto); gap: 6px; }
  html[data-theme] .page-app :is(.feuille .actions-pied, .barre-fiche .actions-pied) .bouton { min-width: 0; padding: 0 9px; overflow: hidden; text-overflow: ellipsis; }
}

/* La poignée de la feuille (un bouton au clavier) : la cible d'un contrôle, sans pousser le contenu ;
   la bulle d'une parcelle (un bouton) : le corps et l'arrondi des autres */
@media (max-width: 899px) {
  html[data-theme] .page-app .feuille-poignee { height: var(--i-bouton); margin-bottom: -14px; position: relative; z-index: 1; font-size: var(--t-13); font-weight: 500; }
}
html[data-theme] .page-app .bulle-parcelle { border-radius: var(--r-bouton); font-size: var(--t-13); font-weight: 500; }
/* La liste des suggestions et les menus de la carte passent sur du texte : pleins */
html[data-theme] .page-app :is(.recherche-carte .suggestions, .menu-flottant) { background: var(--i-panneau); }
/* La feuille levée passait par-dessus la colonne d'outils (et, tout en haut, par-dessus Filtres) :
   ils s'effacent tant qu'elle est levée, comme la légende (style.css) ; on les retrouve en la baissant */
@media (max-width: 899px) {
  html[data-theme] .page-app :is(.commandes, .puces) { transition: opacity 0.2s; }
  html[data-theme] .page-app:has(.feuille:is([data-cran="mi"], [data-cran="haut"])) .commandes,
  html[data-theme] .page-app:has(.feuille[data-cran="haut"]) .puces { opacity: 0; pointer-events: none; }
  html[data-theme] .page-app .feuille-poignee { border-radius: var(--r-bouton); }
}

/* ══ 7. La feuille de détail en liste groupée (audit Apple HIG du 02/10/2026, piste A choisie par Henri) ══
   Mesuré avant : 30 contrôles sur 59 sous 44 pt, 3 onglets d'Explorer coupés, 34 textes sous 4,5:1 en clair,
   le titre (17 px) plus petit que la valeur clé. Ici : cibles de 44 pt au toucher et 36 à la souris, un gros
   titre, des listes groupées à lignes de 52 px, un contraste relevé, un seul retour clair. */
html[data-theme] .page-app :is(.feuille, .barre-fiche) { --i-bouton: 44px; --i-ctrl: 44px; }
@media (min-width: 900px) and (pointer: fine) { html[data-theme] .page-app :is(.feuille, .barre-fiche) { --i-bouton: 36px; --i-ctrl: 36px; } }
/* contraste : les gris de la feuille passent à 4,5:1 au moins, sur le panneau */
html[data-theme] .page-app .feuille { --encre-3: #A6AAB2; --encre-4: #9096A0; --i-lib: rgba(255, 255, 255, 0.66); }
html[data-theme="clair"] .page-app .feuille { --encre-3: #565B62; --encre-4: #565B62; --i-lib: rgba(0, 0, 0, 0.68); }
/* segments (onglets, volets) : la hauteur d'un contrôle, libellés sur une ligne, jamais coupés */
html[data-theme] .page-app .feuille :is(.volets, .segment) > :is(button, .bouton) { height: var(--i-ctrl); font-size: var(--t-14); font-weight: 500; overflow: visible; text-overflow: clip; }
/* cinq segments : chacun prend la largeur de son texte (aucun n'est coupé), le reste se répartit entre eux */
html[data-theme] .page-app .feuille .segment.segment-large:has(> button:nth-child(5)) { grid-template-columns: repeat(5, minmax(max-content, 1fr)); }
html[data-theme] .page-app .feuille .segment.segment-large > button { padding: 0; font-size: var(--t-12); font-weight: 500; letter-spacing: -0.015em; overflow: visible; white-space: nowrap; }
html[data-theme] .page-app .feuille .segment.segment-large > button[aria-selected="true"] { font-weight: 500; }
html[data-theme] .page-app .feuille .volets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* titre large, sous-titre lisible */
html[data-theme] .page-app .feuille :is(.fiche-titre, .feuille-titre) { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
html[data-theme] .page-app .feuille .fiche-sous-titre { margin-top: 4px; font-size: var(--t-14); line-height: 1.35; }
html[data-theme] .page-app .feuille .fiche-tete { align-items: flex-start; gap: 8px; }
html[data-theme] .page-app .feuille .bande-titre, html[data-theme] .page-app .feuille .bande-note { font-size: var(--t-13); }
/* sorties : « replier » a sa propre icône (un panneau), le retour garde le chevron */
html[data-theme] .page-app .feuille-replier { width: var(--i-bouton); height: var(--i-bouton); }
/* listes groupées : un bloc arrondi, des lignes de 52 px séparées d'un filet, sans cadre double */
html[data-theme] .page-app .feuille :is(.liste-rang, .liste-ventes) { border-radius: var(--r-carte); background: var(--i-seg); box-shadow: none; }
html[data-theme] .page-app .feuille :is(.liste-rang, .liste-ventes) li + li { border-top: 1px solid var(--i-trait); }
html[data-theme] .page-app .feuille :is(.liste-rang, .liste-ventes) button { min-height: 52px; padding: 8px 16px; align-content: center; }
html[data-theme] .page-app .feuille :is(.liste-rang, .liste-ventes) :is(.tx-detail, .tx-lieu) { font-size: var(--t-13); }
html[data-theme] .page-app .feuille .liste-rang .tx-prix, html[data-theme] .page-app .feuille .liste-rang .tx-m2 { font-size: 1rem; }
/* petites commandes : la hauteur d'un contrôle */
html[data-theme] .page-app .feuille :is(.tri, .puce-filtre, .champ-expl, .ent-suivre) { min-height: var(--i-ctrl); }
html[data-theme] .page-app .feuille .feuille-section { font-size: var(--t-15); font-weight: 600; }
html[data-theme] .page-app .feuille .feuille-section-note { font-size: var(--t-13); }
html[data-theme] .page-app .feuille .table :is(td, th) { color: var(--encre-2); }
html[data-theme] .page-app .feuille .table th { font-size: var(--t-12); }
html[data-theme] .page-app .feuille :is(a.lien, button.lien, .actions-bas a, summary, .estim-comment) { display: inline-flex; align-items: center; min-height: var(--i-ctrl); }

/* ══ 8. Fiche de commune en défilement unique (src/defilement-commune.js) ══ */
html[data-theme] .page-app .volets-defil { position: sticky; top: 0; z-index: 3; margin: 10px 0 0; background-color: var(--i-panneau); box-shadow: 0 6px 10px -8px rgba(0, 0, 0, 0.5); }
html[data-theme] .page-app [data-volet-corps^="commune:"][hidden] { display: block; }
html[data-theme] .page-app [data-volet-corps^="commune:"] { scroll-margin-top: 84px; }
html[data-theme] .page-app [data-volet-corps^="commune:"] + [data-volet-corps^="commune:"] { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--i-trait); }

/* ══ 9. Toucher : 44 pt partout où l'on appuie (audit Apple HIG du 02/10/2026, 55 % des contrôles étaient sous 44 pt sur iPhone) ══
   Un seul réglage pour tout écran tactile ou étroit : la hauteur d'un contrôle passe à 44 px, par les mêmes jetons que le reste
   (--i-bouton, --i-ctrl, --i-outil). Les icônes qui doivent rester petites à l'œil (logo, attribution, croix) gardent leur dessin
   et gagnent une zone d'appui par un pseudo-élément. Les liens au milieu d'un texte restent à la hauteur de leur ligne
   (Apple admet un lien dans une phrase). */
@media (pointer: coarse), (max-width: 899px) {
  html[data-theme] .page-app { --i-bouton: 44px; --i-fermer: 44px; --i-ctrl: 44px; --i-outil: 44px; }
  html[data-theme] .page-app :is(.marque-mini, .marque, .maplibregl-ctrl-attrib-button, .ent-x, .tp-x, .cc-x, .cc-oeil, .cc-pli, .cc-poignee) { position: relative; }
  html[data-theme] .page-app :is(.marque-mini, .marque, .maplibregl-ctrl-attrib-button, .ent-x, .tp-x, .cc-x, .cc-oeil, .cc-pli, .cc-poignee)::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  html[data-theme] .page-app :is(.maplibregl-ctrl-group button, .tpi-rond, .tpi-outil, .mcp-copier, .ca-bouton, .compte-danger, .fc-declencheur, .fc-icone, .recherche-avancee, .puce-filtre, .commande) { min-width: 44px; min-height: 44px; }
  html[data-theme] .page-app :is(.fc-leg-titre, .pm-fiche, .pm-lien, .lien, button.lien, summary, .rf-forme, .cc-ajout) { min-height: 44px; }
  html[data-theme] .page-app :is(.tp-x) { width: 44px; height: 44px; }
  html[data-theme] .page-app :is(.liste-rang li, .fc-table tr, .rf-table tr, .pm-table tr, table.table tbody tr) { min-height: 44px; }
  html[data-theme] .page-app :is(input[type="range"], .cs-poignee) { min-height: 44px; }
  html[data-theme] .page-app :is(input[type="search"], input[type="text"], input[type="number"], input[type="email"], input[type="password"], select) { min-height: 44px; }
  html[data-theme] .page-app .fc-menu :is(label, .fc-option) { min-height: 44px; display: flex; align-items: center; }
  html[data-theme] .page-app .bouton { min-height: 44px; }
}
/* Anneau de focus sur les champs, qui le retiraient (audit : 74 contrôles sur 2 007 sans repère au clavier) */
html[data-theme] .page-app :is(input, select, textarea):focus-visible { outline: 2px solid var(--i-anneau, currentColor); outline-offset: 2px; }

/* ── 10. Cibles restantes de l'audit HIG complet (02/10/2026) ──
 * Bureau : 28 pt au minimum pour tout contrôle propre à l'application (les liens courants dans une phrase restent exempts).
 * Toucher : 44 pt, y compris les boutons de la topo, la croix des volets, les segments et les pages statiques.
 * Dernier mot sur des règles plus anciennes à `min-height: 0` : d'où `!important`, limité à ces seuls minimums. */
html[data-theme] :is(.pm-fiche, .pm-lien, .fc-leg-titre, .pm-reprendre, .fc-groupe-tete button, .fc-seg > button, .ent-onglets button, .pg-seg button) { min-height: 28px !important; }
html[data-theme] .marque-mini { min-width: 28px; display: inline-flex; align-items: center; justify-content: center; }
html[data-theme] .pm-fiche, html[data-theme] .pm-lien, html[data-theme] .fc-leg-titre { display: inline-flex; align-items: center; }
html[data-theme] .cc-pli { width: 28px; }
html[data-theme] .maplibregl-ctrl-attrib-button { min-width: 28px; min-height: 28px; }
html[data-theme] .ent-x { width: 36px; height: 36px; }
@media (pointer: coarse), (max-width: 899px) {
  html[data-theme] :is(.ent-x, .pg-seg button, .pm-tete button, .tp button, .bouton, .marque-mini, .pm-fiche, .pm-lien, .fc-leg-titre, .fc-groupe-tete button, .ent-onglets button, .suggestions a, .suggestions li, .ent input:not([type="checkbox"], [type="radio"]), .ent select) { min-width: 44px !important; min-height: 44px !important; }
  html[data-theme] .ent-x { width: 44px; height: 44px; }
  html[data-theme] input[type="range"] { min-height: 44px; }
  html[data-theme] .maplibregl-ctrl-attrib-button { min-width: 44px; }
}
html[data-theme] :is(.og-onglets button, .fc input:not([type="checkbox"], [type="radio"], [type="range"]), .fc select) { min-height: 28px !important; }
html[data-theme] input[type="range"] { min-height: 28px; }
html[data-theme] .pied a, html[data-theme] .fc summary, html[data-theme] .pg summary { display: inline-flex; align-items: center; min-height: 28px; }
/* poignées de redimensionnement : le trait reste fin, la zone saisissable déborde de 10 pt de chaque côté */
html[data-theme] .pg-poignee-x::before { content: ''; position: absolute; top: 0; bottom: 0; left: -10px; right: -10px; }
html[data-theme] .pg-poignee-y::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
@media (pointer: coarse), (max-width: 899px) {
  html[data-theme] :is(.og-onglets button, .fc input:not([type="checkbox"], [type="radio"], [type="range"]), .fc select) { min-height: 44px !important; }
  html[data-theme] :is(.pied a, .fc summary, .pg summary) { min-height: 44px; }
}
/* derniers contrôles de l'audit : onglets de la recherche, années, segments de mesure, lien par e-mail, questions de la page outil */
@media (pointer: coarse), (max-width: 899px) {
  html[data-theme] :is(.og-onglets button, .fc-seg > button, .pm-nav button) { min-width: 44px !important; min-height: 44px !important; }
  html[data-theme] :is(.menu-grille > button, .segment > button, .compte-facons > button) { min-height: 44px !important; }
}

/* ── Topo : fond clair (réglage « Fond clair ou sombre » de la colonne d'outils) ── */
.tp.tp-clair [data-tp-scene] { background: #E9E6DF; }

/* ── Fiche parcelle : la topo en tête (Henri, 06/10 : « on ne voit pas Voir la topo, il faut valoriser plutôt la topo
   et les pièces graphiques ne sont pas visibles ») : Voir la topo 3D en bouton principal sur toute la largeur, puis
   Pièces graphiques et Rapport PDF côte à côte, le contact en lien discret ; plus rien ne déborde ── */
html[data-theme] .page-app :is(.feuille .actions-pied, .barre-fiche .actions-pied):has(.act-topo) { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 8px; }
html[data-theme] .page-app :is(.feuille .actions-pied, .barre-fiche .actions-pied) .act-topo { grid-column: 1 / -1; }
html[data-theme] .page-app :is(.feuille .actions-pied, .barre-fiche .actions-pied) .bouton { padding: 0 10px; }
html[data-theme] .page-app .act-etudier { grid-column: 1 / -1; justify-self: center; padding: 2px 4px; color: var(--i-lib); font-size: var(--t-13); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme] .page-app .act-etudier:hover { color: var(--i-encre); }

/* les types de la couche Ventes, cochables (src/ventes-types.js) */
html[data-theme] .page-app .lg-types .vt-type { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 9px; border: 0; border-radius: var(--r-panneau); background: var(--survol); color: var(--encre); font: inherit; font-size: var(--t-13); cursor: pointer; }
html[data-theme] .page-app .lg-types .vt-type[aria-pressed="false"] { background: transparent; color: var(--encre-3); box-shadow: inset 0 0 0 1px var(--filet-2); }
html[data-theme] .page-app .lg-types .vt-type[aria-pressed="false"] i { opacity: .25; }
html[data-theme] .page-app .lg-types { display: flex; flex-wrap: wrap; gap: 6px; }