html, body { margin: 0; padding: 0; height: 100%; overflow: hidden;
font-family: "Source Sans Pro", system-ui, -apple-system, sans-serif;
/* La carte capte tous les gestes : laisser le navigateur croire qu'il peut
defiler ou zoomer la page introduit un retard de 300 ms sur chaque
glissement, et c'est exactement ce qu'on cherche a eviter au doigt. */
-webkit-text-size-adjust: 100%; }
#carte { position: absolute; inset: 0; touch-action: none; }
/* Les controles vivent dans la carte : les sortir dans la barre laterale les
ferait passer par le serveur, et c'est precisement ce qu'on evite ici. */
.controle { position: absolute; z-index: 5; background: rgba(255,255,255,.94);
border: 1px solid #c9c9c9; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.25);
font-size: 11px; color: #222; }
#mode { top: 10px; left: 10px; display: flex; overflow: hidden; padding: 0; }
/* `display: flex` l'emporte sur la feuille de style du navigateur : sans cette
regle, l'attribut `hidden` ne masquerait pas le selecteur. */
#mode[hidden] { display: none; }
#mode button { border: 0; background: transparent; padding: 7px 12px; cursor: pointer;
font: inherit; color: #444; border-right: 1px solid #ddd; white-space: nowrap; }
#mode button:last-child { border-right: 0; }
#mode button[aria-pressed="true"] { background: #bd0026; color: #fff; font-weight: 600; }
/* Metrique et fond de carte : sous le selecteur de maille, dans le meme coin,
parce que ce sont les trois memes questions — quoi lire, comment, sur quoi. */
#reglages { top: 48px; left: 10px; display: flex; flex-direction: column; gap: 4px;
padding: 6px 8px; max-width: 46vw; }
#reglages .reglage { display: flex; align-items: center; gap: 6px; }
#reglages .reglage span { color: #666; font-size: 10px; text-transform: uppercase;
letter-spacing: .04em; flex: none; width: 52px; }
#reglages select { font: inherit; font-size: 11px; color: #222; background: #fff;
border: 1px solid #c9c9c9; border-radius: 4px; padding: 3px 4px; max-width: 100%;
cursor: pointer; }
#legende { bottom: 58px; right: 12px; width: 220px; padding: 8px 10px; }
#legende .titre { font-weight: 600; margin-bottom: 6px; }
#legende .degrade { height: 12px; border: 1px solid #b0b0b0; }
#legende .graduations { display: flex; justify-content: space-between; margin-top: 3px;
font-size: 10px; font-variant-numeric: tabular-nums; }
/* La legende se replie, sur tous les ecrans : ouverte par defaut sur grand
ecran, repliee sur telephone, ou elle mangeait le quart de la carte. */
#legende-bascule { bottom: 24px; right: 12px; padding: 7px 11px; cursor: pointer;
font: inherit; font-size: 11px; color: #444; display: block; }
#legende-bascule::before { content: "▾ "; }
#legende-bascule[aria-expanded="false"]::before { content: "▸ "; }
/* Infobulle. Elle est cliquable — sur telephone c'est le seul moyen de la
fermer — mais ne doit pas avaler les gestes destines a la carte : seuls
son bouton de fermeture et son contenu recoivent les evenements. */
#infobulle { position: absolute; z-index: 6; max-width: 420px;
background: rgba(255,255,255,.97); border: 1px solid #999; border-radius: 6px;
padding: 8px; font-size: 12px; line-height: 1.45; box-shadow: 0 2px 8px rgba(0,0,0,.22);
/* Un emplacement peut porter des dizaines de ventes : elles y sont toutes,
et c'est la hauteur qui est bornee, pas leur nombre. Survolee, la bulle
se contente de couper — elle n'est pas cliquable ; epinglee, elle defile. */
max-height: 52vh; overflow: hidden; pointer-events: none; }
#infobulle.fixee { pointer-events: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#infobulle b { display: inline-block; min-width: 128px; }
#infobulle .projet { color: #7b4fa8; font-weight: 600; }
#infobulle .entete { font-weight: 600; margin-bottom: 2px; padding-right: 22px; }
#infobulle .ico { vertical-align: -2px; margin-right: 5px; }
/* Voies dominantes de la zone : le cadastre ne nommant pas ses sections,
c'est le seul repere parlant disponible. */
#infobulle .repere { color: #555; font-style: italic; margin-bottom: 5px; }
#infobulle .fermer { position: absolute; top: 2px; right: 4px; border: 0;
background: transparent; font: inherit; font-size: 18px; line-height: 1;
color: #777; cursor: pointer; padding: 4px 6px; display: none; }
#infobulle.fixee .fermer { display: block; }
#infobulle .ventes { margin-top: 4px; }
#infobulle .vente { padding: 2px 0; border-top: 1px solid #eee; }
/* Infobulle ancree : celle d'une gare touchee au doigt. Elle se pose juste
au-dessus de la gare (`ancrerInfobulle`), et sa pointe la designe — y
compris quand la bulle bute contre un bord de l'ecran (`--pointe`). */
#infobulle.ancree { max-width: min(300px, calc(100vw - 16px)); border-radius: 8px;
overflow: visible; }
#infobulle.ancree::after { content: ""; position: absolute; left: var(--pointe, 50%);
bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
background: inherit; border: inherit; border-top: 0; border-left: 0;
transform: rotate(45deg); }
#infobulle.ancree.dessous::after { bottom: auto; top: -7px; transform: rotate(225deg); }
#infobulle.ancree .entete { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#attente { position: absolute; z-index: 7; top: 10px; left: 50%; transform: translateX(-50%);
background: rgba(255,255,255,.94); border: 1px solid #c9c9c9; border-radius: 6px;
padding: 6px 12px; font-size: 11px; color: #444; }
/* Noms de communes. MapLibre ne sait ecrire du texte qu'a partir d'un serveur
de glyphes : ce sont donc de simples `div`, positionnes par `transform` et
transparents aux evenements pour ne rien intercepter. */
#etiquettes { position: absolute; inset: 0; z-index: 4; pointer-events: none;
overflow: hidden; }
#etiquettes .etiquette { position: absolute; top: 0; left: 0; white-space: nowrap;
font-size: 11px; font-weight: 600; color: #1f1f1f; letter-spacing: .1px;
text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #fff; }
/* ------------------------------------------------------------------ Mobile
Un telephone n'a ni survol ni place perdue : les cibles grossissent, la
legende se replie, et l'infobulle d'une zone ou d'une vente devient un
bandeau au bas de l'ecran plutot qu'une bulle qui suivrait un doigt qui la
masque. Celle d'une gare, courte, reste ancree au-dessus d'elle. */
@media (max-width: 640px), (pointer: coarse) {
#mode button { padding: 9px 14px; font-size: 12px; }
/* Deux lignes, pas quatre : sur un ecran de telephone, chaque ligne prise au
coin superieur est une ligne de carte en moins. Les libelles restent a
gauche, juste assez lisibles, et les champs grossissent pour le pouce. */
#reglages { top: 52px; max-width: 64vw; padding: 5px 7px; gap: 3px; }
#reglages .reglage { gap: 5px; }
#reglages .reglage span { width: 50px; font-size: 9px; letter-spacing: 0; }
#reglages select { font-size: 12px; padding: 5px 4px; min-width: 0; }
#legende-bascule { display: block; padding: 9px 12px; font-size: 12px; }
#legende { bottom: 58px; right: 8px; left: 8px; width: auto; max-width: none;
padding: 10px 12px; font-size: 12px; }
#infobulle:not(.ancree) { left: 0 !important; right: 0; bottom: 0; top: auto !important;
max-width: none; border-radius: 12px 12px 0 0; border-bottom: 0;
padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
box-shadow: 0 -2px 14px rgba(0,0,0,.25); }
#infobulle { font-size: 13px; }
#infobulle.ancree { padding: 9px 12px; box-shadow: 0 2px 12px rgba(0,0,0,.28); }
/* Au doigt, la liste des ventes d'un immeuble se fait longue : on lui donne
un peu plus de la moitie de l'ecran, et elle defile pour le reste. */
#infobulle:not(.ancree), #infobulle.fixee:not(.ancree) { max-height: 55vh; }
#infobulle b { min-width: 112px; }
#infobulle .entete { padding-right: 34px; }
#infobulle .fermer { font-size: 22px; padding: 6px 10px; top: 4px; right: 6px; }
/* L'echelle graphique et la boussole prennent une place qu'on n'a pas. */
.maplibregl-ctrl-scale { display: none; }
.maplibregl-ctrl-bottom-right { bottom: 0; }
.maplibregl-ctrl-group button { width: 34px; height: 34px; }
}