/* =====================================================================
   STYLES DU SITE
   1. Jetons (couleurs, ombres, rayons, courbes, espacements)
   2. Base et carte plein écran
   3. Étiquettes de zones, étiquettes groupées, noms de mer
   4. Bulles et regroupements
   5. Attribution de la carte
   6. Interface : règles communes, composants (boutons, puces, carrés)
   7. En-tête, recherche, autocomplétion
   8. Commandes du bas : compteur, légende repliée, « Toute l'île », zoom
   9. Feuilles du bas (téléphone) et panneaux (ordinateur)
   10. Carte de zone
   11. Fiche terrain
   12. Filtres
   13. Légende
   14. Message sur l'emplacement, toast
   15. Mouvement réduit
   ===================================================================== */

/* ---------- 1. Jetons ---------- */
:root{
  color-scheme: light;
  /* matières */
  --paras:      #E7E9E2;  /* terre du fond de carte, fond de l'appli (la mer #C3CFD0 est dans map.js) */
  --andesite:   #1F2B27;  /* encre : texte, bouton principal, puces actives (la bulle choisie est couleur d'eau) */
  --andesite-2: #56625C;  /* texte secondaire, unités, bulle consultée */
  --andesite-3: #6B756F;  /* indications, UNIQUEMENT sur blanc */
  --garis:      #D9DDD5;  /* filets, bords de puces, poignée */
  --garis-2:    #EEF0EA;  /* fonds de segments, bulle consultée */
  --photo:      #E8EBE4;  /* blocs photo */
  --photo-icone:#7D8580;
  --subak:      #2A5E82;  /* l'eau : rigole de la zone choisie, anneau de focus */
  --mer-texte:  #3E5859;  /* noms de mer */

  /* niveaux de prix (réécrits depuis config.js par ui.js : une seule source ; les contours des niveaux,
     liseré des bulles, sont posés par map.js) */
  --n1:#F7E39E; --n2:#B9C97E; --n3:#7FAD75; --n4:#4C8967; --n5:#276351;
  --neutre:#CDD0C8;

  /* ombres, toujours teintées andésite */
  --ombre-1: 0 0 0 1px rgba(31,43,39,.08), 0 1px 2px rgba(31,43,39,.10), 0 4px 14px rgba(31,43,39,.10);
  --ombre-2: 0 0 0 1px rgba(31,43,39,.06), 0 2px 6px rgba(31,43,39,.10), 0 12px 32px rgba(31,43,39,.14);
  --ombre-feuille: 0 -1px 0 rgba(31,43,39,.06), 0 -8px 32px rgba(31,43,39,.16);

  /* rayons */
  --r-pilule: 999px;
  --r-champ: 12px;
  --r-panneau: 20px;
  --r-photo: 10px;
  --r-pastille: 3px;
  --r-bulle: 8px;     /* bulles, regroupements, petite bulle de la recherche : un seul arrondi */

  /* courbes */
  --ease-sortie: cubic-bezier(.2,.8,.2,1);
  --ease-entree: cubic-bezier(.4,0,1,1);
  --ease-feuille: cubic-bezier(.32,.72,0,1);

  /* espacements : une échelle de 4 px (4, 8, 12, 16, 20, 24, 32), écrite en px dans les règles ;
     tailles de texte : 11 (pastille, attribution), 12, 13,5 (petit texte courant, bulles, noms de second
     niveau), 14 (interface : pilules, puces, boutons, libellés), 15, 16, 17, 20, 22, 24, 28 (titre de la fiche) */

  /* familles */
  --f-lieu: Piazzolla, Georgia, serif;
  --f-ui: 'Fira Sans', system-ui, sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; height:100%; }
body{
  background:var(--paras); color:var(--andesite);
  font:400 15px/1.45 var(--f-ui);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow:hidden; overscroll-behavior:none;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.num, .bulle, .compteur, .ref{ font-variant-numeric: tabular-nums lining-nums; }
.lieu{ font-family: var(--f-lieu); font-optical-sizing: auto; }
button{ font:inherit; color:inherit; }

.app{ position:fixed; inset:0; }
.carte{ position:absolute; inset:0; background:var(--paras); }
.carte .maplibregl-canvas{ outline:none; }
/* la carte elle-même reçoit le focus clavier (flèches, + et −) : un anneau d'eau à l'intérieur de l'écran */
.carte .maplibregl-canvas:focus-visible{ box-shadow:inset 0 0 0 3px var(--subak); }
.carte .maplibregl-canvas-container:has(.maplibregl-canvas:focus-visible)::after{ content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 3px var(--subak); pointer-events:none; z-index:5; }

/* Sonde invisible : sert à lire les zones sûres (encoche, barre d'accueil) depuis le JavaScript. */
#sonde-zone-sure{
  position:fixed; left:0; top:0; width:0; height:0; visibility:hidden; pointer-events:none;
  padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px);
}
/* Mesure des étiquettes, hors écran */
.mesureur{ position:fixed; left:-9999px; top:0; visibility:hidden; pointer-events:none; }
.mesureur > *{ position:absolute; left:0; top:0; transform:none !important; opacity:1 !important; }

/* Tous les marqueurs HTML : MapLibre place l'élément .mk (transform, opacity).
   On n'anime jamais .mk : seulement ce qu'il contient. */
.mk{ width:0; height:0; }

/* ---------- 3. Étiquettes ---------- */
.mk-etiquette{ z-index:10; pointer-events:none; }
.mk-groupe{ z-index:15; pointer-events:none; }
.mk-mer{ z-index:9; pointer-events:none; }

/* Halo net, façon atlas */
.zl{
  paint-order: stroke fill;
  -webkit-text-stroke: 3px rgba(255,255,255,.92);
  text-shadow: 0 0 6px rgba(255,255,255,.55);
}
@supports not (paint-order: stroke){
  .zl{ -webkit-text-stroke:0; text-shadow:0 0 2px #fff, 0 0 4px #fff, 0 0 8px rgba(255,255,255,.8); }
}
/* Noms de mer : l'italique espacé fait des pointes avec le contour, on garde un halo doux */
.mer{ text-shadow:0 0 2px rgba(255,255,255,.95), 0 0 5px rgba(255,255,255,.7); }

.zl{
  position:absolute; left:0; top:0;
  transform:translate(calc(-50% + var(--ax, 0px)), calc(-50% + var(--ay, 0px)));
  text-align:center; white-space:nowrap;
  color:var(--andesite);
  opacity:var(--o-etiquette, 1);          /* pas de transition : la variable suit le zoom image par image */
}
/* Le nom d'une zone est un bouton (map.js) : cliquable dès qu'il est affiché */
button.zl{ margin:0; padding:0; border:0; background:none; font:inherit; line-height:inherit; border-radius:8px;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.mk-etiquette > .zl:not(.cachee){ pointer-events:auto; cursor:pointer; }
@media (hover:hover){ .mk-etiquette > .zl:not(.cachee):hover .nom{ text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:rgba(31,43,39,.35); } }
.mk-etiquette > .zl:focus{ outline:none; }
.mk-etiquette > .zl:focus-visible{ box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px var(--subak); }
.zl.glisse{ transition:transform 180ms var(--ease-sortie); }
.zl .nom, .zl .l2{ transition:opacity 180ms ease-out; }      /* fondu des apparitions par collision */
.zl.cachee .nom, .zl.cachee .l2{ opacity:0; }
/* pendant un mouvement de carte : cachée tout de suite (pas de nom qui glisse sous la légende) */
.zl.vite .nom, .zl.vite .l2{ transition:none; }
/* groupe replié ou déplié : les noms entrent après la sortie de l'autre étiquette */
.zl.retard .nom, .zl.retard .l2{ transition-delay:160ms; }
/* vue zone : le nom seul (la couleur dit le niveau ; la fourchette de la zone lue est dans la pastille de lecture) */
.zl.sans-l2 .l2{ display:none; }
.zl .nom{ display:block; font:600 calc(15px * var(--k-etiq, 1))/1.05 var(--f-lieu); letter-spacing:.005em; font-variation-settings:"opsz" 14; }
.zl .l2{ display:grid; justify-items:center; margin-top:2px; font:500 calc(12px * var(--k-l2, 1))/1.2 var(--f-ui); font-variant-numeric: tabular-nums lining-nums; }
/* (--k-etiq, --k-l2 : les noms rapetissent un peu quand on dézoome sous l'arrivée, voir map.js, kEtiquettes) */
.zl .l2 > span{ grid-area:1 / 1; }        /* les deux lignes superposées, pour le fondu enchaîné */
.zl .nombre{ opacity:var(--o-nombre, 1); }
.vue-zone .zl .nombre{ display:none; }
/* Petite zone (moins de 5 terrains) : nom au second niveau (Renon, Nusa Dua, les îles de Nusa…) */
.zl.petite .nom{ font-size:calc(13.5px * var(--k-etiq, 1)); font-weight:500; font-variation-settings:"opsz" 13; }
.zl.petite .l2{ font-size:calc(12px * var(--k-l2, 1)); font-weight:400; color:var(--andesite-2); }
.zl.vide .nom, .zl.attenuee .nom{ color:var(--andesite-2); font-weight:500; }
.zl.vide .l2{ color:var(--andesite-2); font-weight:400; }
.zl.attenuee .l2{ display:none; }
.sans-etiquettes .mk-etiquette, .sans-etiquettes .mk-groupe{ visibility:hidden; }

/* Étiquettes groupées du secteur dense : pas de plaque, un filet et un point */
.grp{ position:absolute; left:0; top:0; opacity:var(--o-etiquette, 1); }
.grp-in{ transition:opacity 180ms ease-out, visibility 0s linear 0s; }
.grp-in.cachee{ opacity:0; visibility:hidden; transition:opacity 180ms ease-out, visibility 0s linear 180ms; }
.grp-in.retard{ transition:opacity 180ms ease-out 160ms, visibility 0s linear 160ms; }
.grp-in.vite.cachee{ transition:none; }
.grp svg{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.grp .filet{ stroke:var(--andesite); stroke-opacity:.55; stroke-width:1; fill:none; }
.grp .point{ fill:var(--andesite); fill-opacity:.8; }
.zg{
  position:absolute; left:0; top:0; transform:translate(-50%, -50%);
  display:flex; align-items:center; min-height:44px; padding:0 8px; margin:0;
  border:0; background:none; cursor:pointer; pointer-events:auto;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  border-radius:var(--r-champ);
}
.zg .zl{ position:static; transform:none; text-align:left; opacity:1; }
.zg .l2{ justify-items:start; }
.zg:hover .nom{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(31,43,39,.35); }
.zg:focus{ outline:none; }
.zg:focus-visible{ box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px var(--subak); }
.zl-g{ text-align:left; }
/* nom de groupe sur deux lignes (« \n » dans config.js : « Nusa Lembongan / et Ceningan ») */
.zg .nom, .zl-g .nom{ white-space:pre; }
/* Groupe dont aucun terrain ne correspond aux filtres : nom en retrait, compte gardé */
.zg .zl.attenuee .nom{ color:var(--andesite-2); font-weight:500; }
.zg .zl.attenuee:not(.sans-l2) .l2{ display:grid; color:var(--andesite-2); }

/* Noms de mer */
.mer{
  position:absolute; left:0; top:0; transform:translate(-50%, -50%);
  font:italic 400 calc(13.5px * var(--k-etiq, 1))/1.1 var(--f-lieu); letter-spacing:.12em; color:var(--mer-texte);
  white-space:nowrap; font-variation-settings:"opsz" 12;
  opacity:var(--o-mer, 1);
}
.mer-in{ transition:opacity 180ms ease-out; }
.mer-in.cachee{ opacity:0; }
.sans-mer .mk-mer{ visibility:hidden; }

/* ---------- 4. Bulles et regroupements ---------- */
.mk-bulle{ z-index:20; }
.mk-bulle.au-dessus{ z-index:25; }         /* survol, focus */
.mk-bulle.choisie{ z-index:30; }
.mk > .bulle{ position:absolute; left:0; top:0; transform:translate(-50%,-50%); }

.bulle{ display:grid; place-items:center; min-width:44px; height:44px; padding:0; border:0; background:none;
        cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
/* Liseré : le contour du niveau de LA ZONE (--niv-trait, posé par map.js ; gris neutre pour un
   terrain freehold). La bulle se rattache à sa parcelle, sans aucun prix de terrain. */
.bulle .p{ position:relative; display:inline-flex; align-items:baseline; gap:.24em; height:28px; padding:0 10px; border-radius:var(--r-bulle);
  background:#FFFFFF; color:#1F2B27; white-space:nowrap;
  font:600 13.5px/28px 'Fira Sans',system-ui,sans-serif; font-variant-numeric:tabular-nums lining-nums; letter-spacing:.005em;
  box-shadow:0 0 0 1px var(--niv-trait, rgba(31,43,39,.18)), 0 1px 2px rgba(31,43,39,.22), 0 4px 10px -4px rgba(31,43,39,.35);
  transition:transform 160ms var(--ease-sortie), box-shadow 160ms var(--ease-sortie),
             background-color 160ms linear, color 160ms linear, opacity 300ms ease-out; }
.bulle .u{ font-weight:400; font-size:12px; color:#56625C; transition:color 160ms linear; }

/* Survol : souris uniquement */
@media (hover:hover){
  .bulle:hover .p{ transform:translateY(-2px);
    box-shadow:0 0 0 1px var(--niv-trait, rgba(31,43,39,.32)), 0 2px 3px rgba(31,43,39,.18), 0 9px 18px -6px rgba(31,43,39,.45); }
}
/* Déjà consulté (mémorisé) : plus gris, sans relief, avec une petite coche posée sur le coin (hors du
   texte : la largeur de la bulle ne change pas, la carte ne se réorganise pas). Passage en 300 ms. */
.bulle.vu .p{ background:#EEF0EA; color:#56625C; font-weight:500;
  box-shadow:0 0 0 1px var(--niv-trait, rgba(31,43,39,.16)), 0 1px 1px rgba(31,43,39,.12);
  transition:transform 160ms var(--ease-sortie), box-shadow 300ms ease-out,
             background-color 300ms ease-out, color 300ms ease-out, opacity 300ms ease-out; }
.bulle.vu .u{ color:#56625C; }
.bulle.vu .p::after{ content:""; position:absolute; top:-4px; right:-4px; width:12px; height:12px; border-radius:50%;
  background:#56625C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.3 6.2l1.8 1.8 3.6-4' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  box-shadow:0 0 0 1.5px #FFFFFF; }
/* Choisi : l'eau de la rigole arrive jusqu'au terrain (la zone et le terrain choisis parlent la même
   langue ; l'encre reste réservée à ce qui engage : bouton WhatsApp, puces actives). Sans rebond. */
.bulle[aria-pressed="true"] .p{ background:var(--subak); color:#FFFFFF; transform:scale(1.08);
  box-shadow:0 0 0 2px #FFFFFF, 0 0 0 5px rgba(42,94,130,.22), 0 12px 24px -8px rgba(31,43,39,.55);
  transition:transform 220ms var(--ease-sortie), box-shadow 220ms var(--ease-sortie),
             background-color 180ms linear, color 180ms linear; }
.bulle[aria-pressed="true"] .u{ color:rgba(255,255,255,.8); }
.bulle.vu[aria-pressed="true"] .p::after{ background-color:var(--andesite); }
/* Focus clavier : l'eau (sur la bulle choisie, déjà couleur d'eau : un anneau d'encre) */
.bulle:focus{ outline:none; }
.bulle:focus-visible .p{ box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #2A5E82, 0 4px 10px -4px rgba(31,43,39,.35); }
.bulle[aria-pressed="true"]:focus-visible .p{ box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px var(--andesite); }
/* focus rendu à la bulle après la fermeture de la fiche au doigt ou à la souris : pas d'anneau */
.bulle.sans-anneau:focus-visible .p{ box-shadow:0 0 0 1px var(--niv-trait, rgba(31,43,39,.18)), 0 1px 2px rgba(31,43,39,.22), 0 4px 10px -4px rgba(31,43,39,.35); }
.bulle.vu.sans-anneau:focus-visible .p{ box-shadow:0 0 0 1px var(--niv-trait, rgba(31,43,39,.16)), 0 1px 1px rgba(31,43,39,.12); }
/* Hors de la zone choisie (vue rapprochée) : plus petite et translucide, sans ombre
   (bien distincte de « déjà consulté », qui reste pleine et porte une coche) */
.mk.hors-zone .p{ background:rgba(255,255,255,.6); color:var(--andesite-2); transform:scale(.92);
  box-shadow:0 0 0 1px rgba(31,43,39,.10); }
.mk.hors-zone .u{ color:var(--andesite-3); }
.mk.hors-zone .bulle:hover .p, .mk.hors-zone .bulle:focus-visible .p{ background:#FFFFFF; color:#1F2B27; transform:none; }
/* Vue rapprochée sans zone choisie : les bulles des zones autour de la zone lue arrivent en fondu
   avec le zoom (13,2 à 13,6), pas d'un coup ; pas touchables tant qu'elles sont très pâles. */
.mk.voisine .p{ opacity:var(--o-voisines, 1); }
.voisines-pales .mk.voisine > .bulle{ pointer-events:none; }
/* Sous un élément de l'interface (en-tête, recherche, colonne, feuille) : effacée, sans toucher */
.mk.masquee > .bulle{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity 120ms linear, visibility 0s linear 120ms; }
.mk-bulle > .bulle{ transition:opacity 120ms linear, visibility 0s linear 0s; }

/* Regroupements : même matière que les bulles (blanc, liseré, ombre, chiffres), mais RONDS, réduits au
   nombre (« 5 »), avec des gradins de rizière dessous qui deviennent des disques empilés. Le rond dit
   « plusieurs », le rectangle arrondi dit « un terrain » (un « 5 » rectangulaire se lisait « 5 ares »).
   Le mot « terrains » reste dans l'aria-label (« 5 terrains regroupés à Uluwatu »). À partir de 100 :
   une pilule (map.js calcule la même largeur). */
.bulle.grappe .p{ height:32px; min-width:32px; justify-content:center; gap:0; padding:0 8px; border-radius:16px; font-size:14px; line-height:32px;
  box-shadow:0 0 0 1px var(--niv-trait, rgba(31,43,39,.18)),
             0 5px 0 -2px #EEF0EA, 0 5px 0 -1px rgba(31,43,39,.20),
             0 2px 2px rgba(31,43,39,.16), 0 8px 14px -6px rgba(31,43,39,.35); }
.bulle.grappe .u{ display:none; }
.bulle.grappe.grande .p{   /* 10 terrains et plus : deux gradins */
  box-shadow:0 0 0 1px var(--niv-trait, rgba(31,43,39,.18)),
             0 5px 0 -2px #EEF0EA, 0 5px 0 -1px rgba(31,43,39,.20),
             0 10px 0 -5px #E2E6DE, 0 10px 0 -4px rgba(31,43,39,.16),
             0 2px 2px rgba(31,43,39,.16), 0 12px 16px -8px rgba(31,43,39,.35); }
@media (hover:hover){
  .bulle.grappe:hover .p{ box-shadow:0 0 0 1px var(--niv-trait, rgba(31,43,39,.32)),
             0 5px 0 -2px #EEF0EA, 0 5px 0 -1px rgba(31,43,39,.24),
             0 2px 3px rgba(31,43,39,.18), 0 9px 18px -6px rgba(31,43,39,.45); }
  .bulle.grappe.grande:hover .p{ box-shadow:0 0 0 1px var(--niv-trait, rgba(31,43,39,.32)),
             0 5px 0 -2px #EEF0EA, 0 5px 0 -1px rgba(31,43,39,.24),
             0 10px 0 -5px #E2E6DE, 0 10px 0 -4px rgba(31,43,39,.18),
             0 2px 3px rgba(31,43,39,.18), 0 12px 18px -8px rgba(31,43,39,.45); }
}

/* Apparition : la bulle pousse */
@keyframes pousse{ from{ opacity:0; transform:translate(-50%,-50%) translateY(5px) scale(.8); } to{ opacity:1; transform:translate(-50%,-50%); } }
.mk > .bulle.entre{ animation:pousse 240ms var(--ease-sortie) both; }
/* Disparition */
.mk > .bulle.sort{ opacity:0; transform:translate(-50%,-50%) scale(.9); pointer-events:none;
  transition:opacity var(--duree-sortie, 140ms) var(--ease-entree), transform var(--duree-sortie, 140ms) var(--ease-entree); }
/* Éclatement d'un regroupement : l'enfant part de la position écran du parent (--dx, --dy en px) */
@keyframes eclate{ from{ opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.9); } to{ opacity:1; transform:translate(-50%,-50%); } }
.mk > .bulle.eclate{ animation:eclate 280ms var(--ease-sortie) both; }
/* Fusion : l'enfant glisse vers le parent puis disparaît */
.mk > .bulle.fusionne{ transition:transform 200ms cubic-bezier(.4,0,.2,1), opacity 200ms cubic-bezier(.4,0,.2,1);
  transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.9); opacity:0; pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  .bulle .p, .bulle.vu .p, .bulle[aria-pressed="true"] .p{ transition:none; }
  .mk > .bulle.entre, .mk > .bulle.eclate{ animation:none; }
  .mk > .bulle.sort, .mk > .bulle.fusionne{ transition:opacity 120ms linear; transform:translate(-50%,-50%); }
  @media (hover:hover){ .bulle:hover .p{ transform:none; } }
  .bulle[aria-pressed="true"] .p{ transform:none; }
  .zl.glisse{ transition:none; }
}

/* ---------- 5. Attribution (bouton « i » discret) ---------- */
.carte .maplibregl-ctrl-bottom-right{ right:0; bottom:0; }
.carte .maplibregl-ctrl-attrib.maplibregl-compact{
  position:relative; margin:0 12px calc(12px + env(safe-area-inset-bottom, 0px)) 0;
  min-height:24px; padding:0 24px 0 0; border-radius:var(--r-pilule);
  background:transparent; box-shadow:none;
  font:400 11px/24px var(--f-ui); color:var(--andesite-2);
}
.carte .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button{
  position:absolute; right:0; top:0; width:24px; height:24px; border-radius:50%;
  background:#FFFFFF none; box-shadow:var(--ombre-1); border:0; cursor:pointer;
  display:grid; place-items:center; list-style:none;
}
.carte .maplibregl-ctrl-attrib-button::-webkit-details-marker{ display:none; }
.carte .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button::before{
  content:"©"; font:500 12px/1 var(--f-ui); color:var(--andesite-2);     /* crédits : pas un second « i » */
}
/* cible tactile de 44 px autour du petit rond */
.carte .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button::after{
  content:""; position:absolute; inset:-10px;
}
.carte .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button:focus-visible{
  outline:none; box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px var(--subak);
}
.carte .maplibregl-ctrl-attrib.maplibregl-compact[open]{
  background:#FFFFFF; box-shadow:var(--ombre-1); padding:0 30px 0 10px;
}
.carte .maplibregl-ctrl-attrib.maplibregl-compact[open] .maplibregl-ctrl-attrib-button{ box-shadow:none; background:var(--garis-2); }
.carte .maplibregl-ctrl-attrib.maplibregl-compact[open] .maplibregl-ctrl-attrib-button:focus-visible{ box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px var(--subak); }
.carte .maplibregl-ctrl-attrib-inner a{ color:var(--andesite-2); text-decoration:none; }
.carte .maplibregl-ctrl-attrib-inner a:hover{ text-decoration:underline; }


/* ---------- 6. Interface : règles communes ----------
   Deux mises en page, choisies par ui.js selon la taille de l'écran (même règle que map.js, estOrdi) :
   .ordi à partir de 1024 px de large, ou de 768 px quand l'écran est plus large que haut ; .tel sinon
   (téléphone, tablette tenue debout). Posées sur #app. */
[hidden]{ display:none !important; }
.app{
  --sat: env(safe-area-inset-top, 0px);      /* zone sûre du haut (encoche) */
  --sab: env(safe-area-inset-bottom, 0px);   /* zone sûre du bas (barre d'accueil) */
  --h-feuille: 0px;                          /* hauteur visible de la feuille ouverte (téléphone), écrite par ui.js */
  --droite: 16px;                            /* ordinateur : bord droit des commandes (glisse quand la fiche s'ouvre) */
  --droite-carte: 32px;
}
@media (min-width:768px){ .app{ --col: clamp(300px, 32vw, 360px); --fiche-l: clamp(340px, 36vw, 400px); } }
@media (min-width:1024px){ .app{ --col: 360px; --fiche-l: 400px; } }
.app.ordi.fiche-ouverte{ --droite: calc(var(--fiche-l) + 32px); --droite-carte: calc(var(--fiche-l) + 32px); }

.interface{ position:absolute; inset:0; pointer-events:none; }
.interface > *{ pointer-events:auto; }
.commandes{ display:contents; }
#entete, #colonne, #recherche, #lecture, .commandes-gauche, .commandes-droite{ z-index:40; }
#suggestions{ z-index:45; }
#carte-zone, #fiche{ z-index:50; }
#capture{ z-index:52; position:absolute; inset:0; background:transparent; }
/* feuille de filtres ou légende ouverte (téléphone) : langue et WhatsApp restent utilisables */
.tel.ouverte-feuille-filtres #entete, .tel.ouverte-feuille-legende #entete{ z-index:53; }
#feuille-filtres, #feuille-legende{ z-index:55; }
#message-emplacement{ z-index:60; }
#toast{ z-index:70; }

/* Remise à zéro des boutons et liens de l'interface */
:where(.interface) button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
:where(.interface) a{ -webkit-tap-highlight-color:transparent; }
:where(.interface) :is(h2, h3, p){ margin:0; }
/* pas de mot orphelin en fin de paragraphe (navigateurs récents ; ailleurs, sans effet) */
.interface{ text-wrap:pretty; }
/* Focus visible partout : l'eau */
.interface :focus{ outline:none; }
.interface :focus-visible{ outline:none; box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px var(--subak); }

/* Icônes */
.ico{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ico-plein{ fill:currentColor; stroke:none; }

/* Carrés de niveau de prix */
.carre{ display:inline-block; flex:none; width:12px; height:12px; border-radius:var(--r-pastille);
  background:var(--c, var(--neutre)); box-shadow:inset 0 0 0 1px rgba(31,43,39,.12); }
[data-n="1"]{ --c:var(--n1); } [data-n="2"]{ --c:var(--n2); } [data-n="3"]{ --c:var(--n3); }
[data-n="4"]{ --c:var(--n4); } [data-n="5"]{ --c:var(--n5); }
.carre.hachure{ background:repeating-linear-gradient(135deg, rgba(31,43,39,.34) 0 1px, transparent 1px 4px), var(--neutre); }
.carre.vide{ background:transparent; box-shadow:none; border:1px dashed rgba(31,43,39,.5); }

/* Boutons ronds 44 px (fermer, partager) */
.rond{ display:inline-grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; }
.rond-gris{ background:var(--garis-2); color:var(--andesite); transition:background-color 160ms linear; }
.rond-gris .ico{ width:18px; height:18px; }
@media (hover:hover){ .rond-gris:hover{ background:#E3E6DF; } }

/* Bouton principal (encre) et bouton secondaire (bordé) */
.bouton-principal{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px;
  padding:10px 16px; border-radius:var(--r-champ); background:var(--andesite); color:#FFFFFF;
  font:600 16px/1.25 var(--f-ui); text-align:center; text-decoration:none; text-wrap:balance; transition:background-color 160ms linear; }
.bouton-principal .ico{ flex:none; }
.bouton-principal .ico{ width:20px; height:20px; }
@media (hover:hover){ .bouton-principal:not(:disabled):hover{ background:#2E3D38; } }
.bouton-principal:disabled{ background:var(--garis-2); color:var(--andesite-2); cursor:default; }
.bouton-secondaire{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px;
  padding:0 16px; border-radius:var(--r-champ); background:#FFFFFF; color:var(--andesite);
  box-shadow:inset 0 0 0 1.5px var(--andesite); font:600 15px/1.2 var(--f-ui); text-align:center; text-decoration:none; }
.bouton-secondaire .ico{ width:20px; height:20px; }
@media (hover:hover){ .bouton-secondaire:hover{ background:var(--garis-2); } }
.interface .bouton-secondaire:focus-visible{ box-shadow:inset 0 0 0 1.5px var(--andesite), 0 0 0 2px #FFFFFF, 0 0 0 4px var(--subak); }

/* Liens d'action (soulignés) */
.lien{ display:inline-flex; align-items:center; min-height:44px; border-radius:8px; font:500 15px/1.3 var(--f-ui); color:var(--andesite);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:rgba(31,43,39,.45); }
.lien[aria-disabled="true"]{ color:var(--andesite-3); text-decoration-color:rgba(31,43,39,.2); cursor:default; }
.lien-texte{ display:inline; min-height:0; font:inherit; position:relative; }
.lien-texte::after{ content:""; position:absolute; left:-4px; right:-4px; top:-12px; bottom:-12px; }

/* Puces (filtres, zones proches) : 40 px de haut, cible de 44 px */
.puces{ display:flex; flex-wrap:wrap; gap:8px; }
.puce{ position:relative; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px;
  border-radius:var(--r-pilule); background:#FFFFFF; box-shadow:inset 0 0 0 1px var(--garis);
  font:500 14px/1 var(--f-ui); color:var(--andesite); white-space:nowrap;
  transition:background-color 140ms linear, color 140ms linear, box-shadow 140ms linear; }
.puce::after{ content:""; position:absolute; left:0; right:0; top:-2px; bottom:-2px; }
.puce .carre{ width:10px; height:10px; }
/* largeur fixe du nombre (--nb-ch chiffres, posé par filtres.js) : une puce ne change jamais de largeur
   quand son nombre change, et les puces suivantes ne bougent pas sous le doigt */
.puce .nb{ display:inline-block; min-width:calc(var(--nb-ch, 2) * 1ch); text-align:right; color:var(--andesite-2); font-variant-numeric:tabular-nums lining-nums; }
.puce.zero .nom, .puce.zero .nb{ color:var(--andesite-3); }
.puce[aria-pressed="true"]{ background:var(--andesite); color:#FFFFFF; box-shadow:none; }
.puce[aria-pressed="true"] .nom{ color:#FFFFFF; }
.puce[aria-pressed="true"] .nb{ color:rgba(255,255,255,.74); }
.puce[aria-pressed="true"] .carre{ box-shadow:0 0 0 1px #FFFFFF; }
.puce[aria-pressed="true"] .carre.hachure{ box-shadow:0 0 0 1px #FFFFFF; }
@media (hover:hover){ .puce:not([aria-pressed="true"]):not(:disabled):hover{ background:var(--garis-2); } }
.puce:disabled{ cursor:default; }
.interface .puce:focus-visible{ box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px var(--subak); }

/* Poignée des feuilles (téléphone seulement) */
.poignee{ display:none; }

/* ---------- 7. En-tête, recherche, autocomplétion ---------- */
#entete{ pointer-events:none; }
#entete > *{ pointer-events:auto; }
.tel #entete{ position:absolute; top:calc(8px + var(--sat)); left:12px; right:12px; height:44px;
  display:flex; align-items:center; justify-content:space-between; gap:8px; }
/* ordinateur : l'en-tête est rangé DANS la colonne (ordre de la touche Tab : juste après la recherche),
   mais affiché en haut à droite de l'écran (position fixe : l'appli occupe tout l'écran) */
.ordi #entete{ position:fixed; top:16px; right:var(--droite); display:flex; transition:right 280ms var(--ease-sortie); }
.entete-droite{ display:flex; align-items:center; gap:8px; }

.logo{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px;
  font:600 14px/1 var(--f-ui); color:var(--andesite); white-space:nowrap; }
.logo-marque{ flex:none; width:20px; height:20px; border:1.5px dashed var(--andesite-2); border-radius:var(--r-pastille); }
.badge-demo{ height:22px; padding:0 8px; border-radius:var(--r-pilule); background:var(--garis-2); color:var(--andesite-2);
  font:600 12px/22px var(--f-ui); }
.tel .logo{ background:#FFFFFF; border-radius:var(--r-pilule); box-shadow:var(--ombre-1); }
.ordi .logo{ height:32px; padding:0 2px; }

/* Langue : contrôle segmenté FR / EN */
.langue{ display:inline-flex; align-items:center; height:44px; padding:0; background:#FFFFFF;
  border-radius:var(--r-pilule); box-shadow:var(--ombre-1); }
.langue button{ position:relative; width:44px; height:44px; font:600 14px/1 var(--f-ui); color:var(--andesite-2); }
.langue button::before{ content:""; position:absolute; left:2px; right:2px; top:4px; bottom:4px; border-radius:var(--r-pilule);
  background:transparent; transition:background-color 160ms linear; }
.langue button span{ position:relative; }
.langue button[aria-pressed="true"]{ color:#FFFFFF; }
.langue button[aria-pressed="true"]::before{ background:var(--andesite); }
.interface .langue button:focus-visible{ box-shadow:none; }
.langue button:focus-visible::before{ box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px var(--subak); }

/* WhatsApp : rond sur téléphone, pilule sur ordinateur (glyphe encre, pas de vert) */
.bouton-wa{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px;
  background:#FFFFFF; border-radius:var(--r-pilule); box-shadow:var(--ombre-1); color:var(--andesite);
  font:600 14px/1 var(--f-ui); text-decoration:none; white-space:nowrap; }
.tel .bouton-wa{ width:44px; }
.tel .bouton-wa .ico{ width:22px; height:22px; }
.tel .bouton-wa .wa-texte{ display:none; }
.ordi .bouton-wa{ padding:0 16px; }
.ordi .bouton-wa .ico{ width:18px; height:18px; }
@media (hover:hover){ .bouton-wa:hover, .langue:hover{ box-shadow:0 0 0 1px rgba(31,43,39,.14), 0 1px 2px rgba(31,43,39,.12), 0 6px 16px rgba(31,43,39,.14); } }

/* Recherche */
.tel #recherche{ position:absolute; top:calc(60px + var(--sat)); left:12px; right:12px;
  transition:opacity 150ms linear, visibility 0s linear 0s; }
/* feuille presque plein écran : la recherche passerait dessous (ses coins dépasseraient) */
.tel.feuille-haute #recherche{ opacity:0; visibility:hidden; transition:opacity 150ms linear, visibility 0s linear 150ms; }
.champ{ position:relative; display:flex; align-items:center; height:48px; background:#FFFFFF;
  border-radius:var(--r-champ); box-shadow:var(--ombre-1); }
/* bord d'eau seulement quand on écrit (pas quand le focus revient au bouton des filtres) */
.champ:has(input:focus){ box-shadow:inset 0 0 0 2px var(--subak), var(--ombre-1); }
.ordi .champ{ box-shadow:inset 0 0 0 1px var(--garis); }
.ordi .champ:has(input:focus){ box-shadow:inset 0 0 0 2px var(--subak); }
.champ .loupe{ position:absolute; left:14px; top:14px; color:var(--andesite-2); pointer-events:none; }
.champ input{ flex:1 1 auto; min-width:0; height:48px; margin:0; padding:0 10px 0 44px; border:0; border-radius:var(--r-champ);
  background:transparent; color:var(--andesite); font:400 16px/1.2 var(--f-ui);
  -webkit-appearance:none; appearance:none; outline:none; text-overflow:ellipsis; }
.champ input::placeholder{ color:var(--andesite-3); opacity:1; }
.champ input::-webkit-search-cancel-button, .champ input::-webkit-search-decoration{ -webkit-appearance:none; display:none; }
.interface .champ input:focus-visible{ box-shadow:none; }
.filet-v{ flex:none; width:1px; height:24px; background:var(--garis); }
.bouton-filtres{ position:relative; display:grid; place-items:center; flex:none; width:48px; height:48px;
  border-radius:0 var(--r-champ) var(--r-champ) 0; color:var(--andesite); }
.pastille{ position:absolute; top:5px; right:4px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pilule);
  background:var(--andesite); color:#FFFFFF; font:600 11px/18px var(--f-ui); text-align:center; box-shadow:0 0 0 2px #FFFFFF; }
.ordi .filet-v, .ordi .bouton-filtres{ display:none; }

/* Liste d'autocomplétion */
#suggestions{ position:absolute; background:#FFFFFF; border-radius:var(--r-champ); box-shadow:var(--ombre-2);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transform:translateY(-4px); transition:opacity 160ms var(--ease-sortie), transform 160ms var(--ease-sortie); }
#suggestions.ouverte{ opacity:1; transform:none; }
.sugg-liste{ list-style:none; margin:0; padding:6px 0; }
.sugg{ display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 16px; cursor:pointer; }
.sugg[aria-selected="true"]{ background:var(--garis-2); }
.sugg .txt{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.sugg .nom{ font:600 17px/1.2 var(--f-lieu); font-variation-settings:"opsz" 17; color:var(--andesite);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sugg .ref-nom{ font:600 16px/1.2 var(--f-ui); letter-spacing:.02em; font-variant-numeric:tabular-nums lining-nums; }
.sugg mark{ background:none; color:inherit; text-decoration:underline; text-decoration-color:var(--subak);
  text-decoration-thickness:2px; text-underline-offset:2px; }
/* le nom coupe ce qui dépasse (ellipse) : 4 px de plus dessous, sinon le soulignement de la partie tapée
   était rogné sous les noms en Piazzolla (tour de contrôle 4) */
.sugg .nom{ padding-bottom:4px; margin-bottom:-4px; }
.sugg .l2{ font:400 13.5px/1.3 var(--f-ui); color:var(--andesite-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sugg .nb{ flex:none; font:500 14px/1 var(--f-ui); color:var(--andesite-2); }
/* Référence : petite bulle de surface, même dessin que sur la carte */
.sugg-bulle{ flex:none; display:inline-flex; align-items:baseline; gap:.24em; height:24px; padding:0 9px; border-radius:var(--r-bulle);
  background:#FFFFFF; color:var(--andesite); font:600 12px/24px var(--f-ui); white-space:nowrap;
  box-shadow:0 0 0 1px rgba(31,43,39,.18), 0 1px 2px rgba(31,43,39,.16); }
.sugg-bulle .u{ font-weight:400; font-size:12px; color:var(--andesite-2); }
.sugg-bulle.vu{ background:var(--garis-2); color:var(--andesite-2); font-weight:500; box-shadow:0 0 0 1px rgba(31,43,39,.14); }
.sugg-vide{ padding:16px; }
.sugg-vide p{ margin:0 0 12px; font:400 14px/1.45 var(--f-ui); color:var(--andesite); }
.sugg-vide .sugg-aide{ margin:0; color:var(--andesite-2); }
.sugg-pied{ padding:8px 16px 12px; border-top:1px solid var(--garis); font:400 12px/1.4 var(--f-ui); color:var(--andesite-2); }

/* ---------- 7 bis. Pastille de lecture (zone au centre de la carte, sans zone choisie) ---------- */
#lecture{ opacity:0; transform:translateY(-4px); transition:opacity 150ms linear, transform 150ms var(--ease-sortie); }
#lecture.visible{ opacity:1; transform:none; }
.tel #lecture{ position:absolute; top:calc(116px + var(--sat)); left:12px; right:12px; display:flex; pointer-events:none; }
.tel #lecture > *{ pointer-events:auto; }
.tel.feuille-haute #lecture{ visibility:hidden; }
.lecture-bouton{ position:relative; display:inline-flex; align-items:center; gap:8px; max-width:100%; min-width:0; height:40px;
  padding:0 8px 0 14px; background:#FFFFFF; border-radius:var(--r-pilule); box-shadow:var(--ombre-1); color:var(--andesite);
  white-space:nowrap; text-align:left; }
.lecture-bouton::after{ content:""; position:absolute; left:0; right:0; top:-2px; bottom:-2px; }   /* cible de 44 px */
.lecture-bouton .carre{ width:10px; height:10px; }
.lecture-nom{ flex:none; font:600 16px/1 var(--f-lieu); font-variation-settings:"opsz" 16; }
.lecture-prix{ min-width:0; overflow:hidden; text-overflow:ellipsis; font:500 13.5px/1.2 var(--f-ui); color:var(--andesite); }
.lecture-nb{ display:none; }
.lecture-fleche{ flex:none; width:16px; height:16px; transform:rotate(-90deg); color:var(--andesite-2); }
/* Téléphone : fourchette trop longue pour la ligne du nom (ui.js, ajusterLecture) : deux lignes, nom
   puis fourchette entière, jamais coupée avant l'unité */
.tel .lecture-bouton.deux-lignes{ display:grid; grid-template-columns:10px minmax(0, auto) 16px; column-gap:8px; row-gap:2px;
  height:auto; min-height:44px; padding:7px 10px 7px 14px; border-radius:var(--r-champ); white-space:normal; }
.tel .lecture-bouton.deux-lignes .carre{ grid-row:1; grid-column:1; }
.tel .lecture-bouton.deux-lignes .lecture-nom{ grid-row:1; grid-column:2; }
.tel .lecture-bouton.deux-lignes .lecture-prix{ grid-row:2; grid-column:2; overflow:visible; white-space:normal; }
.tel .lecture-bouton.deux-lignes .lecture-fleche{ grid-row:1 / 3; grid-column:3; }
@media (hover:hover){ .lecture-bouton:hover{ box-shadow:0 0 0 1px rgba(31,43,39,.14), 0 1px 2px rgba(31,43,39,.12), 0 6px 16px rgba(31,43,39,.14); } }
/* ordinateur : une carte légère dans la colonne, sous la recherche */
.ordi #lecture{ position:relative; }
.ordi .lecture-bouton{ display:grid; grid-template-columns:12px auto 1fr 16px; column-gap:10px; row-gap:6px; align-items:center;
  width:100%; height:auto; padding:14px 14px 14px 16px; border-radius:var(--r-panneau); box-shadow:none; background:none; white-space:normal; }
.ordi .lecture-bouton .carre{ grid-row:1; grid-column:1; width:12px; height:12px; }
.ordi .lecture-nom{ grid-row:1; grid-column:2; font-size:20px; font-variation-settings:"opsz" 20; }
.ordi .lecture-nb{ display:block; grid-row:1; grid-column:3; font:500 14px/1.2 var(--f-ui); color:var(--andesite-2); white-space:nowrap; }
.ordi .lecture-prix{ grid-row:2; grid-column:2 / 4; font-size:14px; white-space:normal; }
.ordi .lecture-fleche{ grid-row:1 / 3; grid-column:4; }
@media (hover:hover){ .ordi .lecture-bouton:hover{ box-shadow:none; background:var(--garis-2); } }
/* focus clavier : anneau d'eau à l'intérieur de la carte (le bouton la remplit entièrement) */
.ordi .lecture-bouton:focus-visible{ box-shadow:inset 0 0 0 2px var(--subak); }

/* Ordinateur : « Aller aux 23 terrains de la carte », lien d'évitement visible au focus seulement. Il se
   pose PAR-DESSUS le bas de la carte de tête (position absolue) : la colonne ne saute pas quand il
   reçoit ou perd le focus. */
.colonne-tete{ position:relative; }
.aller-bulles{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.aller-bulles:focus-visible{ left:16px; bottom:-22px; z-index:2; width:auto; height:44px; overflow:visible; clip-path:none;
  display:inline-flex; align-items:center; padding:0 16px; border-radius:var(--r-pilule); background:var(--andesite); color:#FFFFFF;
  font:600 14px/1 var(--f-ui); box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px var(--subak), var(--ombre-2); }

/* ---------- 8. Commandes du bas ---------- */
.commandes-gauche{ position:absolute; left:12px; bottom:calc(12px + var(--sab)); display:flex; flex-direction:column;
  align-items:flex-start; gap:12px; transition:opacity 150ms linear, visibility 0s linear 0s; }
.app.feuille-ouverte .commandes-gauche{ opacity:0; visibility:hidden; transition:opacity 150ms linear, visibility 0s linear 150ms; }
.ordi .commandes-gauche{ display:none; }
.commandes-droite{ position:absolute; right:12px; bottom:calc(68px + var(--sab) + var(--h-feuille)); display:flex;
  flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none;
  transition:bottom 300ms var(--ease-feuille), right 280ms var(--ease-sortie); }
.commandes-droite > *{ pointer-events:auto; }
.ordi .commandes-droite{ right:var(--droite); bottom:48px; }
.zoom-groupe{ display:flex; flex-direction:column; gap:8px; }
.tel .zoom-groupe{ display:none; }
.bouton-rond-blanc{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#FFFFFF;
  box-shadow:var(--ombre-1); color:var(--andesite); }
.bouton-rond-blanc[aria-disabled="true"]{ color:var(--garis); cursor:default; }
.toute-ile{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px; background:#FFFFFF;
  border-radius:var(--r-pilule); box-shadow:var(--ombre-1); font:500 14px/1 var(--f-ui); color:var(--andesite); white-space:nowrap;
  transition:opacity 150ms linear, visibility 0s linear 0s; }
.toute-ile .ico{ width:18px; height:18px; }
.toute-ile .ico-ile{ width:22px; height:12px; }
.toute-ile.cache{ opacity:0; visibility:hidden; transition:opacity 150ms linear, visibility 0s linear 150ms; }
/* Ordinateur, fiche ouverte : la carte visible est étroite, « Toute l'île » devient un bouton rond de 44 px
   (icône seule, son nom reste dans aria-label) : la pilule de 140 px effaçait les bulles du bas de la zone
   (tour de contrôle 4) */
.ordi.fiche-ouverte .toute-ile{ width:44px; padding:0; justify-content:center; }
.ordi.fiche-ouverte .toute-ile span{ display:none; }
@media (hover:hover){
  .toute-ile:hover, .bouton-rond-blanc:not([aria-disabled="true"]):hover, .legende-pilule:hover{
    box-shadow:0 0 0 1px rgba(31,43,39,.14), 0 1px 2px rgba(31,43,39,.12), 0 6px 16px rgba(31,43,39,.14); }
}

/* Compteur (téléphone) : pilule blanche sous le pouce, qui ouvre les filtres (« ⚟ 427 terrains
   disponibles ») ; pilule encre quand des filtres sont actifs, avec « Effacer ». Un fond plein :
   les bulles qui passent dessous ne se mêlent plus au texte. */
/* Téléphone : deux rangées de 44 px à 12 px l'une de l'autre (compteur et « Toute l'île » ; légende et ©) */
.compteur{ display:inline-flex; align-items:center; height:44px; border-radius:var(--r-pilule); background:#FFFFFF;
  box-shadow:var(--ombre-1); color:var(--andesite); font:500 14px/1 var(--f-ui); white-space:nowrap; }
.compteur-bouton{ position:relative; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px 0 14px;
  border-radius:var(--r-pilule); font:inherit; }
.compteur-bouton .ico{ width:16px; height:16px; color:var(--andesite-2); }
.compteur.filtre{ background:var(--andesite); color:#FFFFFF; font-weight:600; }
.compteur.filtre .compteur-bouton{ padding-right:8px; }
.compteur.filtre .compteur-bouton .ico{ color:rgba(255,255,255,.74); }
@media (hover:hover){ .compteur:not(.filtre):hover{ box-shadow:0 0 0 1px rgba(31,43,39,.14), 0 1px 2px rgba(31,43,39,.12), 0 6px 16px rgba(31,43,39,.14); } }
.compteur-effacer{ position:relative; height:28px; margin-right:4px; padding:0 10px; border-radius:var(--r-pilule); background:rgba(255,255,255,.14);
  color:#FFFFFF; font:600 14px/28px var(--f-ui); }
.compteur-effacer::after{ content:""; position:absolute; left:-4px; right:-4px; top:-8px; bottom:-8px; }

/* Légende repliée (pilule) et sa réglette */
.legende-pilule{ position:relative; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px;
  background:#FFFFFF; border-radius:var(--r-pilule); box-shadow:var(--ombre-1); font:500 14px/1 var(--f-ui);
  color:var(--andesite); white-space:nowrap; }
.parcelles{ display:inline-flex; align-items:flex-end; gap:2px; height:10px; }
.parcelle{ width:14px; height:10px; border-radius:2px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(31,43,39,.12);
  transition:height 200ms var(--ease-sortie); }
.parcelle.active{ height:16px; }
.legende-pilule .ico{ width:16px; height:16px; color:var(--andesite-2); }
.legende-pilule .carre{ width:14px; height:10px; border-radius:2px; }
.pilule-free, .legende-free{ display:none; }
/* Filtre « Freehold » : les couleurs de niveau ne s'appliquent pas, la légende le dit */
.filtre-freehold .legende-pilule .parcelles, .filtre-freehold .pilule-lease{ display:none; }
.filtre-freehold .legende-pilule .pilule-free{ display:inline-block; }
.filtre-freehold .legende-free{ display:block; margin:2px 0 6px; font:400 14px/1.45 var(--f-ui); color:var(--andesite); }
.filtre-freehold .legende-lignes li[data-n]{ opacity:.4; }
/* … et les puces de zone des filtres aussi : un seul code de couleur dans le panneau */
.filtre-freehold .puce-zone .carre[data-n]{ background:repeating-linear-gradient(135deg, rgba(31,43,39,.34) 0 1px, transparent 1px 4px), var(--neutre); }

/* Téléphone, feuille ouverte : « Toute l'île » et le bouton « i » se rangent sur une seule
   ligne, 12 px au-dessus de la feuille (la carte visible garde plus de hauteur). */
.tel.feuille-ouverte .commandes-droite{ right:44px; bottom:calc(12px + var(--h-feuille)); }
/* Fiche, filtres ou légende ouverts : la carte visible est étroite, « Toute l'île » s'efface
   (il revient avec la carte de zone ; Échap ou ✕ y ramènent). */
.tel.ouverte-fiche .toute-ile, .tel.ouverte-feuille-filtres .toute-ile, .tel.ouverte-feuille-legende .toute-ile{
  opacity:0; visibility:hidden; transition:opacity 150ms linear, visibility 0s linear 150ms; }
/* Téléphone : sources de la carte dépliées (bouton « i ») : ce qui est sur la même ligne s'efface
   le temps de les lire (sinon le texte passerait sous « Toute l'île » ou sous la légende). */
.tel.feuille-ouverte:has(.maplibregl-ctrl-attrib[open]) .toute-ile,
.tel:not(.feuille-ouverte):has(.maplibregl-ctrl-attrib[open]) .commandes-gauche{
  opacity:0; visibility:hidden; transition:opacity 150ms linear, visibility 0s linear 150ms; }
/* Feuille presque plein écran (téléphone) : les commandes de droite et l'attribution s'effacent */
.tel.feuille-haute .commandes-droite, .tel.feuille-haute .carte .maplibregl-ctrl-bottom-right{ opacity:0; visibility:hidden; }
/* Attribution : sans feuille, centrée sur la rangée de la légende (22 px du bas) ; monte au-dessus de
   la feuille (téléphone), glisse avec la fiche (ordinateur) */
.tel .carte .maplibregl-ctrl-bottom-right{ transform:translateY(calc(-10px - var(--h-feuille))); transition:transform 300ms var(--ease-feuille), opacity 150ms linear; }
/* avec une feuille : centré sur la ligne de « Toute l'île » (la zone sûre du bas est dans la feuille) */
.tel.feuille-ouverte .carte .maplibregl-ctrl-bottom-right{ transform:translateY(calc(var(--sab) - var(--h-feuille) - 10px)); }
.ordi .carte .maplibregl-ctrl-bottom-right{ transition:transform 280ms var(--ease-sortie); }
.ordi.fiche-ouverte .carte .maplibregl-ctrl-bottom-right{ transform:translateX(calc(-1 * (var(--fiche-l) + 16px))); }

/* ---------- 9. Feuilles du bas (téléphone) et panneaux (ordinateur) ---------- */
.tel .feuille{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column;
  background:#FFFFFF; border-radius:var(--r-panneau) var(--r-panneau) 0 0; box-shadow:var(--ombre-feuille);
  transform:translate3d(0,110%,0); will-change:transform; }
.tel .feuille::after{ content:""; position:absolute; left:0; right:0; top:100%; height:240px; background:#FFFFFF; }
.tel .feuille.auto{ max-height:min(92%, calc(100% - 64px - var(--sat))); }
.feuille-tete{ position:relative; flex:none; }
.feuille-tete::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--garis);
  opacity:0; transition:opacity 150ms linear; pointer-events:none; }
.corps-defile > .feuille-tete::after{ opacity:1; }
/* contenu qui défile sous la tête : il s'efface (comme au-dessus du pied) au lieu d'être tranché net */
.feuille-tete::before{ content:""; position:absolute; left:0; right:0; top:100%; height:40px; z-index:1; pointer-events:none;
  background:linear-gradient(#FFFFFF 0, #FFFFFF 12px, rgba(255,255,255,0)); opacity:0; transition:opacity 150ms linear; }
.corps-defile > .feuille-tete::before{ opacity:1; }
.tel .feuille-tete{ padding:20px 20px 0; touch-action:none; }
.tel .poignee{ display:block; position:absolute; z-index:1; top:0; left:50%; width:88px; height:24px; margin-left:-44px; }
.tel .poignee::before{ content:""; position:absolute; left:26px; top:8px; width:36px; height:4px; border-radius:2px; background:var(--garis); }
.tel .poignee::after{ content:""; position:absolute; left:0; right:0; top:0; bottom:-20px; }   /* cible de 44 px */
.interface .poignee:focus-visible{ box-shadow:none; }
.interface .poignee:focus-visible::before{ box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px var(--subak); }
.feuille-corps{ flex:1 1 auto; min-height:0; overflow:hidden; overscroll-behavior:contain; }
.tel .feuille-corps{ padding:0 20px; touch-action:none; }
.tel .feuille.defile .feuille-corps{ overflow-y:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
.tel .feuille.auto .feuille-corps{ padding-bottom:calc(20px + var(--sab)); }
.feuille-pied{ flex:none; position:relative; z-index:1; background:#FFFFFF; }
/* fondu au-dessus du pied : le contenu coupé s'efface au lieu d'être tranché net */
.feuille-pied::before{ content:""; position:absolute; left:0; right:0; bottom:calc(100% + 1px); height:12px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.6)); }
.tel #feuille-filtres .feuille-corps{ padding-bottom:28px; }
.tel .feuille-pied{ border-top:1px solid var(--garis); padding:12px 20px calc(12px + var(--sab)); }
.tete-ligne{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; }
.titre-feuille{ font:600 22px/1.2 var(--f-lieu); font-variation-settings:"opsz" 22; color:var(--andesite); }

/* Ordinateur : colonne de gauche (cartes empilées) */
.ordi #colonne{ position:absolute; left:16px; top:16px; width:var(--col); height:calc(100% - 32px);
  display:flex; flex-direction:column; gap:12px; pointer-events:none; }
.ordi #colonne > *{ pointer-events:auto; flex:none; }
.ordi #colonne > :not(#entete){ background:#FFFFFF; border-radius:var(--r-panneau); box-shadow:var(--ombre-2); }
.colonne-tete{ display:flex; flex-direction:column; gap:12px; padding:16px; }
.colonne-tete .logo{ align-self:flex-start; }

/* Ordinateur étroit (moins de 1100 px), fiche ouverte : colonne + fiche ne laisseraient presque
   plus de carte. La colonne, la légende, la langue et WhatsApp s'effacent le temps de la fiche
   (elle a son propre bouton WhatsApp) ; ils reviennent à sa fermeture. */
.ordi #colonne, .ordi #entete, .ordi #feuille-legende{ transition:opacity 150ms linear, visibility 0s linear 0s; }
.ordi #entete{ transition:right 280ms var(--ease-sortie), opacity 150ms linear, visibility 0s linear 0s; }
.ordi.compact.fiche-ouverte #colonne, .ordi.compact.fiche-ouverte #feuille-legende,
.ordi.compact.fiche-ouverte #entete, .ordi.compact.fiche-ouverte #suggestions{
  opacity:0; visibility:hidden; transition:opacity 150ms linear, visibility 0s linear 150ms; }
.ordi.compact.fiche-ouverte #toast{ left:16px; }

/* ---------- 10. Carte de zone ---------- */
/* Ordinateur : la liste de la recherche recouvrait à moitié la carte de zone (une ligne tranchée dépassait
   dessous, tour de contrôle 4) : le temps de la liste, la carte de zone et la pastille de lecture s'effacent */
.ordi:has(#suggestions.ouverte) #carte-zone, .ordi:has(#suggestions.ouverte) #lecture{
  opacity:0; visibility:hidden; transition:opacity 120ms linear, visibility 0s linear 120ms; }
.ordi #carte-zone{ transition:opacity 120ms linear, visibility 0s linear 0s; }
.ordi #lecture{ transition:opacity 150ms linear, transform 150ms var(--ease-sortie), visibility 0s linear 0s; }
.ordi #carte-zone{ position:relative; padding:16px; }
.ordi #carte-zone .feuille-tete{ display:none; }
.ordi #carte-zone.apparait{ animation:apparait 220ms var(--ease-sortie); }
@keyframes apparait{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.zc-haut{ display:flex; align-items:baseline; gap:10px; min-height:44px; }
.zc-nom{ font:600 24px/1.15 var(--f-lieu); font-variation-settings:"opsz" 24; color:var(--andesite); min-width:0; }
.zc-nb{ font:500 15px/1.2 var(--f-ui); color:var(--andesite-2); white-space:nowrap; }
.zc-haut .rond{ margin-left:auto; align-self:center; }
.zc-prix{ display:flex; align-items:baseline; flex-wrap:wrap; column-gap:8px; row-gap:2px; margin-top:4px; }
.zc-prix .carre{ align-self:center; }
.zc-prix b{ font:600 16px/1.3 var(--f-ui); }
.zc-prix span{ font:400 15px/1.3 var(--f-ui); color:var(--andesite-2); }
.zc-free{ margin-top:4px; font:400 13.5px/1.4 var(--f-ui); color:var(--andesite-2); }
.zc-aide{ margin-top:12px; font:400 13.5px/1.4 var(--f-ui); color:var(--andesite-2); }
.zc-vide-titre{ margin-top:6px; font:500 16px/1.35 var(--f-ui); }
.zc-vide-texte{ margin:6px 0 14px; font:400 14px/1.45 var(--f-ui); color:var(--andesite-2); }
.zc-proches-titre{ margin:16px 0 8px; font:600 15px/1.3 var(--f-ui); }

/* ---------- 11. Fiche terrain ---------- */
.ordi #fiche{ position:absolute; top:16px; right:16px; bottom:16px; width:var(--fiche-l); display:flex; flex-direction:column;
  background:#FFFFFF; border-radius:var(--r-panneau); box-shadow:var(--ombre-2); overflow:hidden;
  opacity:0; transform:translateX(24px); transition:opacity 280ms var(--ease-sortie), transform 280ms var(--ease-sortie); }
.ordi #fiche.ouverte{ opacity:1; transform:none; }
.ordi #fiche .feuille-tete{ padding:16px 16px 0 20px; }
.ordi #fiche .feuille-corps{ overflow-y:auto; padding:0 20px; }
.ordi #fiche .feuille-pied{ padding:12px 20px 16px; border-top:1px solid var(--garis); }
.fiche-haut{ display:flex; align-items:center; gap:8px; min-height:44px; }
/* Titre compact dans la tête : quand le contenu défile, il remplace la référence (le sujet reste visible) */
.fiche-titre-mini{ display:none; min-width:0; margin-right:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 17px/1.2 var(--f-lieu); font-variation-settings:"opsz" 17; color:var(--andesite); opacity:0; transition:opacity 150ms linear; }
.corps-defile .fiche-titre-mini{ display:block; opacity:1; }
.corps-defile .fiche-haut .ref{ display:none; }
/* Téléphone : surface, bail et prix de la zone AVANT les photos (au cran milieu d'un petit
   téléphone, la fourchette restait cachée sous le bouton) ; ordre du brief */
.tel #fiche .feuille-corps{ display:flex; flex-direction:column; }
.tel #fiche .feuille-corps > *{ flex:none; }
.tel #fiche .faits{ order:1; }
.tel #fiche .photos{ order:2; }
.tel #fiche .verifie{ order:3; }
.tel #fiche .emplacement{ order:4; }
.fiche-haut .ref{ margin-right:auto; font:600 14px/1 var(--f-ui); letter-spacing:.02em; color:var(--andesite-2); white-space:nowrap; }
.fiche-titre{ margin-top:8px; font:600 26px/1.15 var(--f-lieu); letter-spacing:-.005em; font-variation-settings:"opsz" 26; color:var(--andesite); }
.ordi .fiche-titre{ font-size:28px; font-variation-settings:"opsz" 28; }
/* séparateur des milliers (« 1 427 ») : l'espace de Piazzolla est étroite, elle se lisait « 1427 » */
.fiche-titre .titre-nombre{ word-spacing:.12em; }
/* le titre reçoit le focus à l'ouverture (lecteurs d'écran) : ce n'est pas une commande, pas d'anneau */
.interface .fiche-titre:focus-visible, .interface .titre-feuille:focus-visible{ box-shadow:none; }
.fiche-sous-titre{ margin-top:4px; font:400 15px/1.4 var(--f-ui); color:var(--andesite-2); }
.photos{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; margin-top:16px; }
.photo{ display:grid; place-items:center; height:96px; background:var(--photo); color:var(--photo-icone); }
.photo .ico{ width:24px; height:24px; stroke-width:1.5; }
.photos .photo:first-child{ border-radius:var(--r-photo) 0 0 var(--r-photo); }
.photos .photo:last-child{ border-radius:0 var(--r-photo) var(--r-photo) 0; }
/* Mosaïque (cran haut et ordinateur) : une grande à gauche, deux petites empilées */
.fiche.cran-haut .photos, .ordi .fiche .photos{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; height:200px; }
.ordi .fiche .photos{ height:220px; }
.fiche.cran-haut .photo, .ordi .fiche .photo{ height:auto; }
.fiche.cran-haut .photo:first-child, .ordi .fiche .photo:first-child{ grid-row:1 / 3; border-radius:var(--r-photo) 0 0 var(--r-photo); }
.fiche.cran-haut .photo:nth-child(2), .ordi .fiche .photo:nth-child(2){ border-radius:0 var(--r-photo) 0 0; }
.fiche.cran-haut .photo:nth-child(3), .ordi .fiche .photo:nth-child(3){ border-radius:0 0 var(--r-photo) 0; }
.faits{ display:grid; grid-template-columns:1fr 1fr; margin:16px 0 0; border-top:1px solid var(--garis); }
.fait{ padding:12px 0; border-bottom:1px solid var(--garis); min-width:0; }
.fait:nth-child(2){ padding-left:16px; border-left:1px solid var(--garis); }
.fait.large{ grid-column:1 / -1; }
.fait dt{ font:400 14px/1.3 var(--f-ui); color:var(--andesite-2); }
.fait dd{ margin:3px 0 0; font:600 16px/1.3 var(--f-ui); color:var(--andesite); }
.fait dd .m2{ margin-left:8px; font-weight:400; color:var(--andesite-2); white-space:nowrap; }
.fait.large dd{ display:flex; align-items:center; gap:8px; }
.verifie{ display:flex; align-items:flex-start; gap:12px; margin-top:16px; }
.rond-coche{ display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; background:var(--garis-2); color:var(--andesite); }
.rond-coche .ico{ width:18px; height:18px; }
.verifie b{ display:block; font:600 15px/1.35 var(--f-ui); }
/* sans date de vérification : un rond bordé avec « i », pas de coche (rien n'a été vérifié à une date connue) */
.verifie.sans-date .rond-coche{ background:transparent; box-shadow:inset 0 0 0 1px var(--garis); color:var(--andesite-2); }
.verifie div > span{ display:block; margin-top:1px; font:400 13.5px/1.4 var(--f-ui); color:var(--andesite-2); }
.emplacement{ margin-top:20px; padding-bottom:28px; }
.emplacement h3{ margin-bottom:12px; font:600 15px/1.3 var(--f-ui); }
.emplacement-ligne{ display:flex; align-items:flex-start; gap:16px; }
.silhouette{ flex:none; width:84px; height:84px; border-radius:var(--r-champ); background:var(--garis-2); }
.emplacement p{ font:400 13.5px/1.45 var(--f-ui); color:var(--andesite-2); }
.fiche-aide{ margin-top:8px; text-align:center; font:400 12px/1.3 var(--f-ui); color:var(--andesite-2); }
/* Petits téléphones : le bouton principal reste sur une ligne (le texte français est long) */
@media (max-width:389px){ .fiche-bouton{ font-size:15px; } }
@media (max-width:369px){ .fiche-bouton{ gap:8px; padding-left:12px; padding-right:12px; } }

/* ---------- 12. Filtres ---------- */
/* la carte Filtres occupe le reste de la colonne : son pied est aligné sur le bas de la légende (16 px du bas) */
.ordi #feuille-filtres{ position:relative; flex:1 1 auto !important; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.ordi #feuille-filtres .feuille-tete{ padding:12px 16px 0; }
.ordi #feuille-filtres .feuille-corps{ overflow-y:auto; padding:0 16px 28px; }
.ordi #feuille-filtres .feuille-pied{ padding:8px 16px 12px; border-top:1px solid var(--garis); }
.ordi .filtres-fermer{ display:none; }
.groupe-filtre{ padding:16px 0 8px; }
.groupe-filtre + .groupe-filtre{ margin-top:8px; border-top:1px solid var(--garis); }
.groupe-filtre h3{ margin-bottom:8px; font:600 15px/1.3 var(--f-ui); color:var(--andesite); }
.groupe-filtre .aide{ margin:-4px 0 12px; font:400 13.5px/1.4 var(--f-ui); color:var(--andesite-2); }
.groupe-filtre .aide-apres{ margin:8px 0 4px; white-space:pre-line; }      /* une définition par ligne */
.voir-toutes{ margin-top:4px; font-size:14px; }
.groupe-niveaux.desactive .puces{ opacity:.4; }
.segmente{ display:flex; height:44px; padding:3px; border-radius:var(--r-champ); background:var(--garis-2); }
.segmente button{ position:relative; flex:1 1 0; border-radius:calc(var(--r-champ) - 3px); font:500 14px/1 var(--f-ui); color:var(--andesite-2);
  transition:background-color 160ms linear, color 160ms linear, box-shadow 160ms linear; }
.segmente button::after{ content:""; position:absolute; left:0; right:0; top:-3px; bottom:-3px; }   /* cible de 44 px */
.segmente button[aria-pressed="true"]{ background:#FFFFFF; color:var(--andesite); box-shadow:var(--ombre-1); }
.interface .segmente button[aria-pressed="true"]:focus-visible{ box-shadow:var(--ombre-1), 0 0 0 2px #FFFFFF, 0 0 0 4px var(--subak); }
.filtres-suggestion{ margin-bottom:6px; font:400 13.5px/1.4 var(--f-ui); color:var(--andesite-2); }
.tel .filtres-suggestion{ display:none; }      /* téléphone : le bouton principal porte la proposition */
.filtres-suggestion .lien-texte{ color:var(--andesite); font-weight:500; }
.filtres-pied{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.filtres-effacer{ flex:none; white-space:nowrap; }
.filtres-pied .bouton-principal{ width:auto; flex:0 1 auto; min-width:180px; }
/* zéro résultat (téléphone) : « Retirer « Zone » et voir 24 terrains » sur toute la largeur, sur une ligne */
.tel .filtres-pied.zero{ flex-direction:column-reverse; align-items:stretch; gap:4px; }
.tel .filtres-pied.zero .bouton-principal{ width:100%; }
.tel .filtres-pied.zero .filtres-effacer{ align-self:center; }
.filtres-compteur{ font:600 14px/1.3 var(--f-ui); color:var(--andesite); text-align:right; }
.tel .filtres-compteur{ display:none; }
.ordi .filtres-voir{ display:none; }

/* ---------- 13. Légende ---------- */
.legende-lignes{ list-style:none; margin:0; padding:0; }
.legende-lignes li{ display:flex; align-items:center; gap:12px; min-height:44px; font:500 15px/1.3 var(--f-ui); color:var(--andesite); }
.legende-lignes .carre{ width:20px; height:14px; }
.legende-lignes li.active{ font-weight:600; }
.legende-lignes li.active::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--subak); margin-left:-4px; }
.legende-intro{ margin:2px 0 6px; font:400 14px/1.45 var(--f-ui); color:var(--andesite-2); }
.legende-filet{ height:0; margin:6px 0; border:0; border-top:1px solid var(--garis); }
.explications{ margin-top:14px; padding-top:14px; border-top:1px solid var(--garis); }
.explications p{ margin:0 0 10px; font:400 14px/1.5 var(--f-ui); color:var(--andesite); }
.explications b{ font-weight:600; }
.explications .legende-emplacement{ color:var(--andesite-2); }
/* Téléphone : la légende reste courte (les zones restent visibles au-dessus) : lignes de 36 px (elles ne
   se touchent pas), explications repliées derrière « Un are, un leasehold, c'est quoi ? » */
.tel .legende-replier{ display:none; }
.tel .legende-lignes li{ min-height:36px; }
.tel #feuille-legende:not(.explications-ouvertes) .explications{ display:none; }
.tel .lien-explications{ margin-top:4px; }
.ordi .legende-fermer, .ordi .legende-intro{ display:none; }
/* Ordinateur : carte discrète à côté de la colonne, repliable en pilule */
.ordi #feuille-legende{ z-index:42;      /* sous la fiche (50) : jamais par-dessus son pied */
  position:absolute; left:calc(var(--col) + 32px); bottom:16px; width:248px; max-height:calc(100% - 32px);
  display:flex; flex-direction:column; background:#FFFFFF; border-radius:var(--r-panneau); box-shadow:var(--ombre-2); }
.ordi #feuille-legende .feuille-tete{ padding:10px 8px 0 16px; }
.ordi #feuille-legende .titre-feuille{ font:600 14px/1.3 var(--f-ui); text-wrap:balance; }
.ordi #feuille-legende .feuille-corps{ overflow-y:auto; padding:0 16px 10px; }
.ordi #feuille-legende .legende-lignes li{ min-height:30px; font-size:14px; }
.ordi #feuille-legende .legende-lignes .carre{ width:18px; height:12px; }
.ordi #feuille-legende .explications{ display:none; margin-top:6px; padding-top:12px; }
.ordi #feuille-legende.explications-ouvertes .explications{ display:block; }
.ordi #feuille-legende .explications p{ font-size:13.5px; }
.ordi #feuille-legende .lien-explications{ font-size:13.5px; min-height:44px; text-align:left; }
.ordi #feuille-legende > .legende-pilule{ display:none; }
.ordi #feuille-legende.repliee{ width:auto; background:none; box-shadow:none; }
.ordi #feuille-legende.repliee > .legende-pilule{ display:inline-flex; }
.ordi #feuille-legende.repliee > .feuille-tete, .ordi #feuille-legende.repliee > .feuille-corps{ display:none; }

/* ---------- 14. Message sur l'emplacement, toast ---------- */
#message-emplacement{ position:absolute; left:12px; right:12px; bottom:calc(124px + var(--sab));
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-champ);
  background:var(--andesite); color:#FFFFFF; box-shadow:var(--ombre-2);
  opacity:0; transform:translateY(8px); transition:opacity 220ms var(--ease-sortie), transform 220ms var(--ease-sortie); }
#message-emplacement.visible{ opacity:1; transform:none; }
#message-emplacement p{ flex:1 1 auto; font:400 14px/1.4 var(--f-ui); }
.message-compris{ flex:none; height:44px; padding:0 16px; border-radius:var(--r-bulle); background:rgba(255,255,255,.14);
  color:#FFFFFF; font:600 14px/1 var(--f-ui); }
/* ordinateur : centré sur la carte, au-dessus de la ligne de la légende repliée (16 + 40 + 12 px) */
.ordi #message-emplacement{ left:calc(var(--col) + 32px); right:var(--droite-carte); bottom:68px; width:440px; max-width:calc(100% - var(--col) - 64px); margin:0 auto; }
#toast{ position:absolute; left:12px; right:12px; bottom:calc(124px + var(--sab));
  display:flex; justify-content:center; pointer-events:none; }
/* téléphone, feuille ouverte : juste au-dessus de la ligne « Toute l'île » (12 + 44 + 8 px) */
.tel.feuille-ouverte #message-emplacement, .tel.feuille-ouverte #toast{ bottom:calc(var(--h-feuille) + 64px); }
.ordi #toast{ left:calc(var(--col) + 32px); right:var(--droite-carte); bottom:68px; }
.toast-pilule{ max-width:100%; padding:12px 20px; border-radius:var(--r-pilule); background:var(--andesite); color:#FFFFFF;
  font:500 14px/1.35 var(--f-ui); text-align:center; box-shadow:var(--ombre-2);
  opacity:0; transform:translateY(8px); transition:opacity 200ms var(--ease-sortie), transform 200ms var(--ease-sortie); }
.toast-pilule.visible{ opacity:1; transform:none; }

/* ---------- 15. Mouvement réduit : fondus courts, aucun glissement ---------- */
@media (prefers-reduced-motion:reduce){
  #suggestions, .toast-pilule, #message-emplacement{ transform:none !important; transition:opacity 150ms linear; }
  .ordi #fiche{ transform:none !important; transition:opacity 150ms linear; }
  .ordi #carte-zone.apparait{ animation:none; }
  .parcelle, .puce, .segmente button, .rond-gris, .langue button::before, .bouton-principal{ transition:none; }
  .commandes-droite, .ordi #entete, .tel .carte .maplibregl-ctrl-bottom-right, .ordi .carte .maplibregl-ctrl-bottom-right{ transition:none; }
}