/* VeryGoodMap : feuille de style globale */
:root{
  --ocean:#0E7490; --ocean-dark:#155E75; --ocean-soft:#ECFEFF;
  --coral:#E76F51; --coral-soft:#FFF1EC;
  --sand:#FAF6EF; --ink:#1E293B; --muted:#64748B;
  --line:#E8E0D3; --ok:#166534; --ok-soft:#DCFCE7;
  --warn:#9A3412; --warn-soft:#FFF7ED;
  /* haut de site, direction 3a */
  --sable-champ:#F6F1E7; --segment-fond:#F1ECE1; --segment-survol:#E7E0D2;
  --texte-2:#475569; --texte-3:#94A3B8; --bordure-champ:#E2D9C9;
  --corail-survol:#D95F41; --filet:#EFE7D8;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent}
body{background:var(--sand);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--ocean);}
/* tactile : réaction immédiate au doigt, sans rectangle gris ni délai de double-tap */
a,button,input,select,textarea,summary,label{touch-action:manipulation}
main{flex:1}

/* ---------- haut de site : 2 etages + rangee flottante (direction 3a) ---------- */
/* en-tête au-dessus des éléments flottants de la carte (champ lieu à 1001, zoom
   Leaflet à 1000) : sinon son menu déroulant (compte, publier) passe DESSOUS. */
.vgm-head{position:sticky;top:0;z-index:1100;background:#fff;flex-shrink:0}

/* etage 1 : la marque, discret, ne bouge jamais */
.etage1{display:flex;align-items:center;gap:18px;height:52px;padding:0 20px;
  border-bottom:1px solid var(--filet);background:#fff}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo img{display:block}
.logo .mot{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1}
.logo .mot b{color:var(--ocean-dark);font-weight:800}
.logo .mot i{color:var(--coral);font-style:normal;font-weight:800}
.e1-droite{display:flex;align-items:center;gap:18px;margin-left:auto}
.lien-doux{font-size:13px;color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap}
.lien-doux:hover{color:var(--ocean);text-decoration:underline}
.lien-fort{font-size:13px;font-weight:700;color:var(--ocean);text-decoration:none;white-space:nowrap}
.lien-fort:hover{text-decoration:underline}
/* connexion / inscription : UN bloc, deux zones cliquables bien distinctes */
.auth-duo{display:inline-flex;align-items:stretch;border:1.5px solid var(--ocean-dark);
  border-radius:999px;overflow:hidden;flex-shrink:0}
.auth-duo a{display:inline-flex;align-items:center;font-size:13px;font-weight:800;
  color:var(--ocean-dark);text-decoration:none;padding:7px 13px;white-space:nowrap}
.auth-duo a:hover{background:var(--segment-fond)}
.auth-duo .ad-inscr{background:var(--ocean-dark);color:#fff}
.auth-duo .ad-inscr:hover{background:var(--ocean)}
.pilule-contour{font-size:13px;font-weight:800;color:var(--ocean-dark);text-decoration:none;
  border:1.5px solid var(--ocean-dark);border-radius:999px;padding:5px 14px;white-space:nowrap}
.pilule-contour:hover{background:var(--ocean-dark);color:#fff}

/* menus deroulants (details/summary : ils marchent sans JavaScript) */
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;user-select:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::marker{content:""}
.menu-langue>summary{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap}
.menu-langue>summary:hover{color:var(--ocean)}
.chev{font-size:9px;vertical-align:middle;opacity:.75}
.menu-pop{position:absolute;top:calc(100% + 8px);left:0;min-width:190px;background:#fff;
  border:1px solid var(--filet);border-radius:14px;box-shadow:0 12px 34px rgba(30,41,59,.16);
  padding:6px;z-index:1200}
.menu-pop.droite{left:auto;right:0}
.menu-pop.large{min-width:290px}
.menu-pop a{display:block;text-decoration:none;color:var(--ink);font-size:13.5px;
  padding:9px 12px;border-radius:9px;font-weight:600}
.menu-pop a:hover{background:var(--sand)}
.menu-pop a.on{color:var(--ocean);font-weight:800}
.menu-pop a b{display:block;font-size:13.5px;font-weight:800}
.menu-pop a small{display:block;color:var(--muted);font-size:11.5px;line-height:1.4;
  font-weight:500;margin-top:2px}
.menu-pop a.mis-en-avant{background:var(--sand);border:1px solid var(--filet);margin-bottom:4px}
.menu-pop a.mis-en-avant:hover{background:var(--coral-soft);border-color:#FBD5C4}
.menu-pop a.sortie{color:var(--muted);border-top:1px solid var(--filet);border-radius:0;
  margin-top:4px;padding-top:10px}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--ocean);color:#fff;font-weight:800;font-size:13px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}

/* barre d'icônes du haut (alertes, favoris, messages), façon leboncoin */
.ico-nav{display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  text-decoration:none;color:var(--texte-2);min-width:44px;line-height:1}
.ico-nav:hover{color:var(--ocean)}
.ico-nav .ico{position:relative;font-size:19px;display:inline-flex}
.ico-nav .ico svg{width:21px;height:21px}
.ico-nav .ico-lbl{font-size:10.5px;font-weight:600;white-space:nowrap}
.ico-badge{position:absolute;top:-6px;left:11px;min-width:15px;height:15px;padding:0 3px;
  border-radius:999px;background:var(--ocean);color:#fff;font-size:10px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;border:1.5px solid #fff}
.ico-badge.rouge{background:#DC2626}

/* photo de profil du membre, sur la page compte */
.avatar-box{display:flex;gap:16px;align-items:center}
.avatar-grand{width:84px;height:84px;flex-shrink:0;border-radius:50%;overflow:hidden;
  background:var(--ocean);color:#fff;font-weight:800;font-size:32px;
  display:flex;align-items:center;justify-content:center}
.avatar-grand img{width:100%;height:100%;object-fit:cover}
.avatar-actions{display:flex;flex-direction:column;gap:6px}
.avatar-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:2px}
.menu-compte{position:relative}
.pastille{position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-radius:50%;
  background:var(--coral);border:2px solid #fff}

/* le seul bouton corail de l'ecran */
.btn-publier{display:inline-flex;align-items:center;gap:6px;background:var(--coral);color:#fff;
  font-size:13.5px;font-weight:800;border-radius:999px;padding:9px 18px;white-space:nowrap}
.btn-publier:hover{background:var(--corail-survol)}
.menu-publier>summary:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(231,111,81,.35)}

/* etage 2 : l'outil de travail */
.etage2{display:flex;align-items:center;gap:14px;min-height:62px;padding:8px 20px;background:#fff;
  border-bottom:1px solid var(--filet);flex-wrap:wrap}
.segments{display:flex;background:var(--segment-fond);border-radius:999px;padding:3px;gap:2px;
  max-width:100%;overflow-x:auto;scrollbar-width:none}
.segments::-webkit-scrollbar{display:none}
.segments a{text-decoration:none;font-size:13.5px;font-weight:700;color:var(--texte-2);
  padding:7px 16px;border-radius:999px;white-space:nowrap;flex:0 0 auto}
.segments a:hover{background:var(--segment-survol)}
.segments a.on{background:var(--ocean);color:#fff;font-weight:800}
.segments.bascule{margin-left:auto}
.segments.bascule a{padding:7px 14px;font-size:13px}
.segments.bascule a.on{background:var(--ocean-dark)}

/* étage marché : barre contextuelle qui n'apparaît que pour les univers à
   plusieurs marchés (Immobilier, Emploi, Divers). Elle sépare le choix du marché
   du choix de la catégorie, qui reste sur la carte. Fond légèrement teinté pour
   la distinguer de l'étage des univers, juste au-dessus. */
.etage-marche{display:flex;align-items:center;gap:12px;padding:7px 20px;
  background:var(--sable-champ);border-bottom:1px solid var(--filet)}
.marche-label{font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--texte-3);flex-shrink:0}
.segments-marche{background:#fff;border:1px solid var(--bordure-champ)}
.segments-marche a{font-size:13px;padding:6px 14px;font-weight:700}
.segments-marche a.on{background:var(--ocean-dark);color:#fff}

.champ-rech{display:flex;align-items:center;gap:8px;flex:1;max-width:460px;min-width:230px;
  background:var(--sable-champ);border:1.5px solid var(--bordure-champ);border-radius:999px;
  padding:0 14px 0 16px}
.champ-rech:focus-within{border-color:var(--ocean);box-shadow:0 0 0 3px rgba(14,116,144,.15)}
.champ-rech .loupe{font-size:14px;opacity:.7;border:0;background:transparent;cursor:pointer;
  padding:6px 2px 6px 0;line-height:1}
.champ-rech .loupe:hover{opacity:1}
.champ-rech input{flex:1;border:0;background:transparent;padding:9px 0;font-size:14px;outline:none}
.champ-rech input::placeholder{color:var(--texte-3)}
.champ-rech .q-clear{border:0;background:transparent;color:var(--texte-3);font-size:14px;
  cursor:pointer;padding:6px 0 6px 6px;line-height:1}
.champ-rech .q-clear:hover{color:var(--coral)}
/* champ LIEU : barre posée AU-DESSUS de la carte (toujours accessible, ne masque
   jamais la carte ni un aperçu). Elle ne filtre pas, elle recadre la carte sur la
   ville choisie. z-index au-dessus de la carte pour que les suggestions passent
   par-dessus les tuiles et les boutons + / − du zoom. */
.carte-lieu-bar{position:relative;z-index:5;flex:0 0 auto;display:flex;align-items:center;
  background:#fff;border-bottom:1px solid var(--bordure-champ);padding:8px 10px}
.carte-lieu{position:relative;display:flex;align-items:center;gap:6px;width:360px;max-width:100%;
  background:var(--sable-champ);border:1px solid var(--bordure-champ);
  border-radius:999px;padding:0 6px 0 12px}
.carte-lieu:focus-within{border-color:var(--ocean);box-shadow:0 0 0 3px rgba(14,116,144,.18)}
.carte-lieu .cl-ico{font-size:13px;opacity:.6}
.carte-lieu input{flex:1;min-width:0;border:0;background:transparent;padding:9px 0;font-size:13.5px;outline:none}
.carte-lieu input::placeholder{color:var(--texte-3)}
.carte-lieu .cl-clear{flex:0 0 auto;border:0;background:transparent;color:var(--texte-3);
  font-size:14px;cursor:pointer;padding:5px 2px;line-height:1}
.carte-lieu .cl-clear:hover{color:var(--coral)}
.carte-lieu .cl-geo{flex:0 0 auto;border:0;background:transparent;font-size:15px;cursor:pointer;
  padding:5px 4px;border-radius:999px;line-height:1}
.carte-lieu .cl-geo:hover{background:var(--segment-fond)}
.carte-lieu .cl-geo.on{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}
.carte-lieu .suggests{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:70}
.carte-lieu .suggests .sug:first-child{border-top:1px solid var(--ocean)}
/* (le champ lieu vit désormais dans sa propre barre au-dessus de la carte :
   plus besoin de le masquer quand un panneau Critères ou un aperçu s'ouvre.) */
/* pastilles permanentes façon Airbnb : petite étiquette prix/label posée sur le point,
   centrée dessus, visible quand on est assez zoomé et que la zone n'est pas trop dense */
.vgm-pastille{background:transparent;border:0}
.vgm-pastille span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  white-space:nowrap;background:#fff;color:var(--ink);border:1.5px solid var(--pc,#E11D48);
  font-size:12px;font-weight:800;line-height:1;padding:5px 9px;border-radius:999px;cursor:pointer;
  box-shadow:0 2px 8px rgba(30,41,59,.28)}
.vgm-pastille:hover span{background:var(--pc,#E11D48);color:#fff}
.vgm-pastille.profil span{border-style:dashed}
/* Mini-carte sur la carte (zone clairsemée, 10 annonces ou moins à l'écran) :
   la pastille s'élargit et montre la photo, le prix et le début du titre.
   Le survol ne l'inverse pas comme la petite pastille : avec une photo dedans,
   passer le fond en couleur rendrait le texte illisible. */
.vgm-pastille.mini span.mc{display:flex;align-items:center;gap:7px;
  padding:4px 11px 4px 5px;border-radius:13px;max-width:216px}
.vgm-pastille.mini span.mc:hover,.vgm-pastille.mini:hover span.mc{background:#fff;color:var(--ink);
  border-width:2px;box-shadow:0 4px 14px rgba(30,41,59,.38)}
.vgm-pastille.mini .mc-ph{width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  background-size:cover;background-position:center;background-color:#F6F1E7}
.vgm-pastille.mini .mc-tx{display:flex;flex-direction:column;gap:2px;min-width:0;font-style:normal}
.vgm-pastille.mini .mc-tx b{font-size:12px;line-height:1.1}
.vgm-pastille.mini .mc-tx em{font-style:normal;font-weight:600;font-size:10.5px;line-height:1.15;
  color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:168px}
/* bande « aussi sur le site » : le mot cherché appliqué aux autres rayons */
.rech-univers{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:8px 14px 2px}
.rech-univers .ru-lbl{font-size:13px;font-weight:800;color:var(--ink);margin-right:2px}
.rech-univers .ru-chip{display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  background:#fff;border:1px solid var(--bordure-champ);color:#334155;font-size:12px;
  font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.rech-univers .ru-chip b{color:var(--ocean-dark);font-weight:800}
.rech-univers .ru-chip:hover{border-color:var(--ocean);color:var(--ocean-dark)}
.rech-univers .ru-chip.on{background:var(--ocean);border-color:var(--ocean);color:#fff}
.rech-univers .ru-chip.on b{color:#fff}
.rech-univers .ru-clear{margin-left:auto;font-size:12px;color:var(--texte-3);text-decoration:none;
  white-space:nowrap}
.rech-univers .ru-clear:hover{color:var(--coral)}
/* page /publier : deux grands choix (proposer une annonce / annonce de recherche) */
.pub-choix{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.pub-carte{display:flex;flex-direction:column;text-decoration:none;background:#fff;
  border:1.5px solid var(--bordure-champ);border-radius:18px;padding:26px 24px;color:var(--ink);
  transition:transform .12s,box-shadow .12s,border-color .12s}
.pub-carte:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(30,41,59,.14)}
.pub-carte .pub-ico{font-size:40px;line-height:1;margin-bottom:12px}
.pub-carte h2{font-size:1.25rem;margin:0 0 8px;color:var(--ocean-dark)}
.pub-carte p{margin:0 0 18px;color:var(--texte-2);font-size:.95rem;line-height:1.5;flex:1}
.pub-carte .pub-cta{align-self:flex-start;font-weight:800;font-size:.95rem;color:#fff;
  padding:9px 16px;border-radius:999px}
.pub-carte.offre{border-top:4px solid var(--coral)}
.pub-carte.offre:hover{border-color:var(--coral)}
.pub-carte.offre h2{color:var(--coral)}
.pub-carte.offre .pub-cta{background:var(--coral)}
.pub-carte.recherche{border-top:4px solid var(--ocean)}
.pub-carte.recherche:hover{border-color:var(--ocean)}
.pub-carte.recherche .pub-cta{background:var(--ocean)}
@media (max-width:640px){.pub-choix{grid-template-columns:1fr}}

/* rangee de categories, posee SUR la carte et seulement sur elle */
.carte-zone{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.map-wrap{flex:1.1;position:relative;min-height:0;display:flex;flex-direction:column}
.map-inner{flex:1;min-height:0;position:relative;z-index:1;display:flex}
.map-inner #map{flex:1;min-height:0}
/* les commandes de zoom descendent sous la rangee de pilules */
.map-wrap .leaflet-top .leaflet-control{margin-top:52px;transition:margin-top .15s}
/* panneau de critères déplié : le zoom descend sous lui au lieu de passer dessous */
.map-wrap.criteres-ouverts .leaflet-top .leaflet-control{margin-top:150px}
/* la rangée s'arrête avant « Critères », qui vit dans son propre coin */
.pilules{position:absolute;top:10px;left:14px;right:14px;z-index:600;display:flex;gap:7px;
  overflow-x:auto;scrollbar-width:none;padding-bottom:2px;cursor:grab;
  overscroll-behavior-x:contain}
.pilules::-webkit-scrollbar{display:none}
/* pas de bouton Critères pour ce marché : la rangée prend toute la largeur */
.pilules.pleine{right:14px}
.pilules.tire{cursor:grabbing;scroll-behavior:auto;user-select:none}
/* la rangée dépasse presque toujours : elle se fond du côté où il reste
   quelque chose à voir, au lieu de couper une catégorie en deux */
.pilules.fondu-d{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 38px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 38px),transparent)}
.pilules.fondu-g{-webkit-mask-image:linear-gradient(90deg,transparent,#000 38px);
  mask-image:linear-gradient(90deg,transparent,#000 38px)}
.pilules.fondu-g.fondu-d{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38px,#000 calc(100% - 38px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 38px,#000 calc(100% - 38px),transparent)}
/* et deux flèches, posées sur ses bords, pour y aller au clic */
.pil-fleche{position:absolute;top:10px;z-index:602;width:30px;height:30px;padding:0;border:0;
  border-radius:999px;background:#fff;color:var(--ink);font-size:17px;font-weight:700;
  line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(30,41,59,.24)}
.pil-fleche.visible{display:flex}
.pil-fleche:hover{color:var(--ocean-dark)}
.pil-fleche.gauche{left:11px}
.pil-fleche.droite{right:123px}
/* quand il n'y a pas de bouton Critères, la flèche droite revient au bord */
.pilules.pleine ~ .pil-fleche.droite{right:11px}
.pilules-fin{position:absolute;top:10px;right:14px;z-index:601}
.pilule{flex-shrink:0;text-decoration:none;background:#fff;color:#334155;font-size:12.5px;
  font-weight:700;padding:6px 13px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 2px 8px rgba(30,41,59,.14);white-space:nowrap}
.pilule:hover{color:var(--ocean-dark)}
.pilule.on{background:var(--ink);color:#fff;font-weight:800;box-shadow:0 2px 8px rgba(30,41,59,.25)}
.pilule.criteres{flex-shrink:0}
.advcount{background:var(--coral);color:#fff;border-radius:999px;padding:0 6px;
  font-size:11px;margin-left:4px;display:none}
.advcount.on{display:inline-block}

/* panneau de criteres avances, ouvert par la pilule */
/* le panneau s'ouvre sous son bouton, à droite : à gauche il recouvrait les
   commandes de zoom de la carte */
#advPanel{display:none;position:absolute;top:10px;right:14px;left:auto;z-index:700;
  max-width:min(620px, calc(100% - 100px));
  background:#fff;border:1px solid var(--filet);border-radius:14px;padding:12px 14px;
  box-shadow:0 12px 34px rgba(30,41,59,.16);gap:8px;align-items:center;flex-wrap:wrap}
#advPanel.open{display:flex}
.filtres{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.83rem}
.filtres select,.filtres input[type=number]{width:auto;padding:7px 9px;font-size:.83rem;border-radius:999px}
.filtres label.inline{display:flex;align-items:center;gap:6px;margin:0;font-size:.83rem;font-weight:600}
.filtres label.inline input{width:auto}

/* mobile : 2 lignes utiles, et Publier devient un bouton flottant sous le pouce */
@media (max-width:768px){
  .etage1{gap:10px;padding:0 12px}
  /* le nom reste visible sur téléphone : c'est notre marque */
  .logo .mot{font-size:15px}
  .e1-droite{gap:10px}
  .lien-doux{display:none}
  /* la langue se choisit dans le pied de page sur téléphone : le haut respire */
  .menu-langue{display:none}
  .auth-duo a{font-size:12px;padding:7px 10px}
  /* icônes seules sur téléphone : le libellé prend trop de place */
  .ico-nav{min-width:0}
  .ico-nav .ico-lbl{display:none}
  .ico-nav .ico{font-size:21px}
  .ico-nav .ico svg{width:23px;height:23px}

  .etage2{padding:8px 12px;gap:8px;min-height:0}
  .segments:not(.bascule){width:100%;order:1}
  .segments:not(.bascule) a{flex:1;text-align:center;padding:11px 6px;font-size:13px}
  .champ-rech{order:2;flex:1 1 120px;min-width:0;max-width:none;padding:0 10px 0 12px}
  .champ-rech input{min-width:0;width:100%}
  .champ-rech .autour{font-size:0}
  .champ-rech .autour::before{content:"📍";font-size:15px}
  .segments.bascule{order:3;margin-left:0;flex-shrink:0}
  .segments.bascule a{padding:8px 11px;font-size:12px}

  /* barre marché : compacte, et elle défile au doigt si beaucoup de marchés */
  .etage-marche{padding:6px 10px;gap:8px}
  .segments-marche{overflow-x:auto;scrollbar-width:none}
  .segments-marche::-webkit-scrollbar{display:none}
  .segments-marche a{padding:8px 12px;white-space:nowrap}

  /* aucun menu ne doit sortir de l'écran par la droite */
  .menu-pop{max-width:calc(100vw - 24px)}
  /* les onglets des formulaires défilent au doigt au lieu de déborder */
  .mtabs,.ctabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
    padding-bottom:4px;flex-wrap:nowrap}
  .mtabs::-webkit-scrollbar,.ctabs::-webkit-scrollbar{display:none}
  .mtabs a,.ctabs a{flex-shrink:0;white-space:nowrap}
  /* cases à cocher : c'est le libellé entier qui devient la cible */
  .legalbox label,.checks label,label.inline{min-height:44px;align-items:center}
  .legalbox input[type=checkbox],.checks input[type=checkbox]{min-width:20px;min-height:20px}

  /* relevé au-dessus de la barre système Android (boutons retour / accueil) */
  .menu-publier{position:fixed;right:14px;bottom:calc(30px + env(safe-area-inset-bottom, 0px));z-index:900}
  .btn-publier{width:56px;height:56px;border-radius:50%;padding:0;justify-content:center;
    font-size:24px;box-shadow:0 6px 20px rgba(231,111,81,.42)}
  .btn-publier .pub-txt,.btn-publier .chev{display:none}
  .menu-publier .menu-pop{top:auto;bottom:calc(100% + 10px);right:0;min-width:270px}

  /* la rangée s'arrête avant « Critères », et se fond au lieu d'être coupée net.
     Pilules plus hautes : au doigt, 28 px ne suffisent pas. */
  .pilules{top:8px;left:8px;right:8px;cursor:auto;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  /* au doigt on fait glisser la rangée directement : pas besoin de flèches */
  .pil-fleche{display:none !important}
  /* pilules compactes : on doit VOIR qu'il y a d'autres catégories à droite
     (« Outillage & bricolage » mangeait presque toute la largeur de l'écran) */
  .pilules{gap:6px}
  .pilules .pilule{padding:9px 11px;font-size:12px}
  .pilules-fin{top:8px;right:8px}
  .pilule.criteres{padding:10px 12px;font-size:13px}
  #advPanel{top:8px;left:8px;right:8px;max-width:none}
  .carte-lieu{width:100%}
  .map-wrap .leaflet-top .leaflet-control{margin-top:56px}
  /* panneau ouvert : on efface les boutons de zoom au lieu de les pousser
     indéfiniment. Sur téléphone on zoome au doigt, ils ne manquent pas. */
  .map-wrap.criteres-ouverts .leaflet-control-zoom{opacity:0;pointer-events:none}
}

/* ---------- liste en deux blocs : autour de vous, puis partout ---------- */
.bloc-local,.bloc-loin{grid-column:1/-1;display:flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);margin:4px 0 2px}
.bloc-loin{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);color:var(--ocean-dark)}
.bloc-local span,.bloc-loin span{background:var(--segment-fond);color:var(--texte-2);
  border-radius:999px;padding:1px 9px;font-size:.72rem;letter-spacing:0}
.bloc-loin span{background:var(--ocean-soft);color:var(--ocean-dark)}
.tag-loin{display:inline-block;margin-top:6px;background:var(--ocean-soft);color:var(--ocean-dark);
  border-radius:999px;padding:3px 9px;font-size:.72rem;font-weight:700}

/* ---------- import d'annonce ---------- */
.etapes-collage{padding-left:20px;font-size:.92rem;line-height:1.9;margin-bottom:14px}
.etapes-collage b{background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:1px 7px;font-size:.85rem;font-family:ui-monospace,Consolas,monospace}
.zone-collage{min-height:150px;max-height:320px;overflow-y:auto;background:#fff;
  border:2px dashed #FBD5C4;border-radius:14px;padding:16px;font-size:.88rem;line-height:1.55;
  color:var(--ink);white-space:pre-wrap;cursor:text}
.zone-collage:focus{outline:0;border-color:var(--coral);border-style:solid;
  box-shadow:0 0 0 3px rgba(231,111,81,.15)}
.zone-collage:empty::before{content:attr(data-vide);color:var(--muted);font-style:italic}
.zone-collage.rempli{border-style:solid;border-color:#BBF7D0;background:#F8FFFB}
.resume-collage{margin-top:10px;font-size:.85rem;font-weight:700;color:var(--muted)}
.resume-collage.ok{color:var(--ok)}
.resume-collage.ok::before{content:"✅ "}

.bookmarklet{display:inline-block;background:linear-gradient(135deg,var(--coral),#F4A261);
  color:#fff;text-decoration:none;font-weight:800;border-radius:999px;padding:12px 24px;
  font-size:.95rem;cursor:grab;box-shadow:0 3px 12px rgba(231,111,81,.32);user-select:none}
.bookmarklet:active{cursor:grabbing}
.bookmarklet:hover{color:#fff;filter:brightness(1.06)}

.importbar{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);
  background:linear-gradient(135deg,#FFF7ED,var(--coral-soft));border:1px solid #FBD5C4;
  border-radius:16px;padding:14px 18px;margin-bottom:18px;transition:transform .12s}
.importbar:hover{transform:translateY(-2px)}
.importbar .ib-emo{font-size:1.7rem;flex-shrink:0}
.importbar b{display:block;font-size:.95rem}
.importbar small{color:var(--muted);font-size:.83rem;line-height:1.4}
.importbar .ib-go{margin-left:auto;background:var(--coral);color:#fff;font-weight:800;
  border-radius:999px;padding:9px 18px;font-size:.86rem;white-space:nowrap;flex-shrink:0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:#fff;padding:22px;margin-top:40px;
  font-size:.83rem;color:var(--muted);text-align:center}
footer .links{margin-bottom:8px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
footer .langs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:8px;font-size:.82rem}
footer .langs a.on{color:var(--ocean-dark);font-weight:800}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ocean-dark)}

/* ---------- éléments communs ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:24px 22px}
.wrap.narrow{max-width:760px}
h1.page{font-size:1.5rem;color:var(--ocean-dark);margin-bottom:6px}
.sub{color:var(--muted);font-size:.95rem;margin-bottom:22px}
.btn{display:inline-block;text-decoration:none;text-align:center;font-weight:800;
  border-radius:12px;padding:12px 20px;font-size:.95rem;border:0;cursor:pointer}
.btn.blue{background:var(--ocean);color:#fff}
.btn.coral{background:var(--coral);color:#fff}
.btn.ghost{background:#fff;border:2px solid var(--ocean);color:var(--ocean)}
.btn.danger{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.btn.small{padding:7px 13px;font-size:.83rem;border-radius:9px}
.flash{background:var(--ok-soft);border:1px solid #BBF7D0;color:var(--ok);
  border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:.92rem;font-weight:600}
.flash.err{background:#FEF2F2;border-color:#FECACA;color:#991B1B}
/* Bandeau montré au visiteur arrivé d'un moteur de recherche sur une page
   réservée aux membres : il doit inviter, pas barrer la route. Le texte reste
   en poids normal, seul le bouton attire l'oeil. */
.btn-flash{display:inline-block;background:var(--coral);color:#fff;border-radius:999px;
  padding:7px 16px;margin:8px 10px 0 0;font-weight:700;text-decoration:none}
.btn-flash:hover{filter:brightness(.94)}
.lien-flash{font-weight:600;text-decoration:underline;white-space:nowrap}
.tagline{font-size:.8rem;color:var(--muted)}

/* ---------- formulaires ---------- */
section.formbox{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px;margin-bottom:16px}
section.formbox h2{font-size:.8rem;letter-spacing:1.5px;color:var(--coral);margin-bottom:12px}
label{display:block;font-size:.86rem;font-weight:700;margin:12px 0 5px}
/* fond BLANC (et non sable) : sinon le champ se confond avec le fond de page.
   La bordure le délimite aussi bien sur fond sable que sur une carte blanche. */
input,select,textarea{width:100%;border:1.5px solid var(--bordure-champ);border-radius:10px;
  padding:10px 12px;font-size:.92rem;background:#fff;color:var(--ink);font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ocean);border-color:var(--ocean)}
.ct-ligne{display:flex;gap:9px;align-items:flex-start;font-weight:600;margin:0}
.ct-ligne input{width:auto;margin-top:3px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.checks label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.85rem;
  margin:0;background:var(--sand);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;cursor:pointer}
.checks input{width:auto}
.hint{font-size:.78rem;color:var(--muted);margin-top:4px;line-height:1.45}
.legalbox{background:var(--warn-soft);border:1px solid #FED7AA;border-radius:12px;
  padding:14px;font-size:.83rem;color:#7C2D12;line-height:1.55}
.legalbox label{display:flex;gap:9px;align-items:flex-start;font-size:.83rem;margin-top:10px}
.legalbox input{width:auto;margin-top:2px}
.hp{position:absolute;left:-9999px;opacity:0}

/* ---------- accueil ---------- */
.hero{position:relative;padding:56px 22px 36px;text-align:center;
  background:linear-gradient(180deg,#E0F2FE 0%,var(--sand) 90%)}
.hero h1{font-size:2.15rem;max-width:780px;margin:0 auto 12px;color:var(--ocean-dark);line-height:1.2}
.hero p.lead{max-width:640px;margin:0 auto;color:var(--muted);font-size:1.05rem}
.badges{display:flex;gap:10px;justify-content:center;margin:20px 0 6px;flex-wrap:wrap}
.badge{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-size:.86rem;font-weight:700;color:var(--ocean-dark)}
.badge b{color:var(--coral)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:940px;margin:32px auto 0;padding:0 22px}
.doorway{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px;
  text-align:left;box-shadow:0 8px 28px rgba(14,116,144,.08);transition:transform .15s}
.doorway:hover{transform:translateY(-3px)}
.doorway .emo{font-size:2.1rem}
.doorway h2{margin:10px 0 8px;font-size:1.3rem}
.doorway p{color:var(--muted);font-size:.93rem;line-height:1.55;margin-bottom:16px}
.steps{max-width:940px;margin:48px auto 0;padding:0 22px;display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.step .n{width:30px;height:30px;border-radius:50%;background:var(--ocean);color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.step h3{font-size:.98rem;margin-bottom:6px}
.step p{font-size:.87rem;color:var(--muted);line-height:1.5}
.secu{max-width:940px;margin:48px auto 8px;padding:26px 28px;background:var(--warn-soft);
  border:1px solid #FED7AA;border-radius:18px}
.secu h2{color:var(--warn);font-size:1.15rem;margin-bottom:10px}
.secu ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.secu li{font-size:.9rem;color:#7C2D12;padding-left:26px;position:relative;line-height:1.45}
.secu li::before{content:"🛡️";position:absolute;left:0;top:0;font-size:.85rem}
.sectitle{text-align:center;margin-top:48px;font-size:1.35rem;color:var(--ocean-dark)}
.counts{display:flex;gap:26px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.count{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 26px;text-align:center}
.count b{display:block;font-size:1.5rem;color:var(--coral)}
.count small{color:var(--muted);font-size:.8rem}

/* ---------- piliers accueil ---------- */
.uni-bloc{max-width:1020px;margin:26px auto 0;padding:0 22px}
.uni-titre{text-align:left;font-weight:800;font-size:.92rem;color:var(--ocean-dark);
  letter-spacing:.5px;margin-bottom:9px;padding-left:2px}
.piliers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1020px;
  margin:0 auto;padding:0}
.pilier{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 16px;
  text-decoration:none;color:var(--ink);text-align:center;transition:transform .13s,box-shadow .13s}
.pilier:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(14,116,144,.14)}
.pilier .p-emo{font-size:1.9rem}
.pilier h2{font-size:1.02rem;margin:8px 0 5px;color:var(--ocean-dark)}
.pilier p{font-size:.8rem;color:var(--muted);line-height:1.45;min-height:46px}
.pilier .p-counts{margin-top:9px;font-size:.75rem;font-weight:700;color:var(--coral)}
/* bandeau large (univers à un seul marché : emploi, objets) */
.bandeau{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  transition:transform .13s,box-shadow .13s}
.bandeau:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(14,116,144,.13)}
.bandeau-tete{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink);
  flex:1;min-width:280px;text-align:left}
.bandeau-tete .p-emo{font-size:2.1rem}
.bandeau-tete h2{font-size:1.02rem;color:var(--ocean-dark);margin-bottom:4px}
.bandeau-tete p{font-size:.83rem;color:var(--muted);line-height:1.45;margin:0}
.bandeau-cats{display:flex;gap:6px;flex-wrap:wrap;flex:1.1;min-width:280px}
.bandeau-cats a{text-decoration:none;font-size:.79rem;font-weight:700;color:var(--muted);
  background:var(--sand);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.bandeau-cats a:hover{border-color:var(--ocean);color:var(--ocean-dark);background:var(--ocean-soft)}

/* ---------- onglets marché ---------- */
.mtabs{display:flex;gap:5px;background:var(--sand);border:1px solid var(--line);
  border-radius:999px;padding:3px;flex-wrap:wrap;width:fit-content}
.mtabs a{text-decoration:none;padding:7px 13px;border-radius:999px;font-weight:700;
  font-size:.84rem;color:var(--muted);white-space:nowrap}
.mtabs a.on{background:var(--ocean-dark);color:#fff}
/* sélecteur de sous-marché (Emploi / Coup de main, les 4 immobiliers, les 5 divers) :
   de vrais boutons, choix obligatoire posé au-dessus du formulaire */
.marche-choix{margin:2px 0 20px}
.marche-choix .mc-lbl{display:block;font-weight:800;font-size:.92rem;margin-bottom:9px;color:var(--ink)}
.marche-choix .mc-lbl i{color:var(--coral);font-style:normal}
.ctabs{display:flex;flex-wrap:wrap;gap:9px}
.ctabs a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;background:#fff;
  border:1.5px solid var(--bordure-champ);color:var(--ink);font-size:.94rem;font-weight:700;
  padding:10px 17px;border-radius:13px;
  transition:border-color .12s,background .12s,transform .1s,box-shadow .12s}
.ctabs a:hover{border-color:var(--ocean);transform:translateY(-1px);box-shadow:0 6px 16px rgba(30,41,59,.1)}
.ctabs a.on{background:var(--ocean);border-color:var(--ocean);color:#fff}

/* ---------- barre de carte à 3 lignes ---------- */
/* ---------- suggestions d'adresse ---------- */
.suggests{display:none;position:relative;z-index:60}
.suggests.open{display:block}
.suggests .sug{background:#fff;border:1px solid var(--line);border-top:0;padding:9px 12px;
  font-size:.88rem;cursor:pointer;color:var(--ink)}
.suggests .sug:first-child{border-top:1px solid var(--ocean);border-radius:10px 10px 0 0}
.suggests .sug:last-child{border-radius:0 0 10px 10px}
.suggests .sug span{color:var(--muted);font-size:.82rem}
.suggests .sug:hover,.suggests .sug.on{background:var(--ocean-soft)}

/* ---------- favoris ---------- */
.card-wrap{position:relative}
.favbtn{position:absolute;top:8px;right:8px;z-index:5;height:32px;min-width:32px;padding:0 9px;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:16px;
  border:0;background:rgba(255,255,255,.94);color:var(--muted);font-size:1.05rem;line-height:1;
  cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .12s}
.favbtn:hover{transform:scale(1.1);color:var(--coral)}
.favbtn.on{color:var(--coral)}
.favbtn .favn{font-size:.8rem;font-weight:800;color:var(--ink)}
.favbtn.on .favn{color:var(--coral)}
.favform{position:absolute;top:8px;right:8px;z-index:5;margin:0}
/* compteur de favoris sur la fiche : la preuve sociale, facon leboncoin */
.favcount{display:flex;align-items:center;gap:7px;font-size:.95rem}
.favcount .fc-h{color:var(--coral);font-size:1.2rem;line-height:1}
.favcount .fc-n{font-size:1.05rem;font-weight:800;color:var(--coral)}
.favcount .fc-l{color:var(--muted)}
.favcount.vide .fc-h{color:var(--muted)}

/* accueil : la carte occupe l'écran, le bandeau SEO vit dessous.
   Sélecteurs doublés pour passer devant la règle body.page-carte (hauteur figée). */
body.page-carte.page-accueil{height:auto;overflow:auto}
body.page-carte.page-accueil main{min-height:0;flex:none}
body.page-carte.page-accueil .carte-zone{height:calc(100svh - var(--haut-header, 114px));
  min-height:480px;flex:none}
@supports not (height: 100svh){
  body.page-carte.page-accueil .carte-zone{height:calc(100vh - var(--haut-header, 114px))}
}
.seoband{background:#fff;border-top:1px solid var(--line);padding:26px 22px 34px}
.seoband-in{max-width:1080px;margin:0 auto}
.seoband p{font-size:.9rem;color:var(--muted);line-height:1.6;max-width:820px;margin-bottom:18px}
.seoband p b{color:var(--ocean-dark)}
.seoband-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.seoband h2{font-size:.82rem;letter-spacing:1.2px;color:var(--coral);margin-bottom:9px;
  text-transform:uppercase}
.seoband ul{list-style:none;margin:0}
.seoband li{font-size:.84rem;color:var(--muted);line-height:1.7}
.seoband a{color:var(--ocean-dark);text-decoration:none;font-weight:600}
.seoband a:hover{text-decoration:underline}

.advtoggle{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  font-weight:700;font-size:.83rem;color:var(--muted);cursor:pointer;white-space:nowrap}
.advtoggle:hover{border-color:var(--ocean);color:var(--ocean-dark)}
.advcount{background:var(--coral);color:#fff;border-radius:999px;padding:0 7px;
  font-size:.72rem;margin-left:5px;display:none}
.advcount.on{display:inline-block}
#advPanel{display:none;gap:8px;align-items:center;flex-wrap:wrap}
#advPanel.open{display:flex}
.tag.dpe{background:#ECFDF5;border-color:#A7F3D0;color:#065F46}

/* ---------- page carte ---------- */
/* La carte est une vue outil : elle occupe l'écran. Le pied de page reste sur
   l'accueil, sous le bandeau, et sur toutes les pages de contenu. */
body.page-carte{height:100vh;overflow:hidden}
body.page-carte:not(.page-accueil) footer{display:none}
body.page-carte main{display:flex;flex-direction:column;min-height:0}
body.page-carte .carte-main{flex:1;min-height:0}
.carte-tools{display:flex;gap:10px;align-items:center;padding:8px 18px;background:#fff;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.searchbox{display:flex;background:var(--sand);border:1px solid var(--line);
  border-radius:999px;overflow:hidden;min-width:230px;flex:1;max-width:340px}
.searchbox input{flex:1;border:0;background:transparent;padding:8px 15px;font-size:.88rem;outline:none}
.searchbox button{border:0;background:var(--ocean);color:#fff;padding:0 15px;cursor:pointer}
.switch{display:flex;background:var(--sand);border:1px solid var(--line);border-radius:999px;
  padding:3px;margin-left:auto}
.switch a{text-decoration:none;padding:7px 15px;border-radius:999px;font-weight:700;
  font-size:.86rem;color:var(--muted)}
.switch a.on{background:var(--ocean);color:#fff}
.filtres{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.83rem}
.filtres select,.filtres input[type=number]{width:auto;padding:7px 9px;font-size:.83rem;border-radius:999px}
.filtres label.inline{display:flex;align-items:center;gap:6px;margin:0;font-size:.83rem;font-weight:600}
.filtres label.inline input{width:auto}
.carte-main{flex:1;display:flex;min-height:0}
#map{min-height:200px;position:relative}
/* pastilles carte : ronds colorés (circleMarker Leaflet) + popup compacte */
.leaflet-interactive{cursor:pointer;transition:r .12s}
.mpop{min-width:180px;font-family:'Segoe UI',system-ui,sans-serif}
.mpop b{color:var(--ocean-dark);font-size:.95rem}
.mpop-t{font-weight:700;font-size:.86rem;margin:4px 0 2px}
.mpop-m{font-size:.79rem;color:var(--muted);line-height:1.45}
.mpop-btn{display:inline-block;margin-top:8px;background:var(--ocean);color:#fff !important;
  text-decoration:none;font-weight:700;font-size:.8rem;padding:6px 12px;border-radius:8px}
.leaflet-popup-content{margin:12px 14px}
/* légende des couleurs de marché */
.maplegend2{position:absolute;left:10px;bottom:22px;z-index:500;background:rgba(255,255,255,.94);
  border:1px solid var(--line);border-radius:10px;padding:7px 11px;font-size:.75rem;color:var(--muted)}
.maplegend2 i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.listpane{flex:1;overflow-y:auto;padding:14px;background:var(--sand)}
.listhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
.listhead .count-lbl{font-weight:800;color:var(--ocean-dark);font-size:.92rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:13px}
.card{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;
  text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .12s;display:block}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(14,116,144,.13)}
.card .ph{height:118px;display:flex;align-items:center;justify-content:center;
  font-size:2.1rem;position:relative;background:linear-gradient(135deg,#A7D8EA,#5FA8C7);
  background-size:cover;background-position:center}
.card .ph .tbadge{position:absolute;left:9px;bottom:8px;background:rgba(30,41,59,.82);
  color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.4px;padding:4px 9px;border-radius:999px}
.card .cb{padding:11px 13px}
.card .price{font-weight:800;color:var(--ocean-dark);font-size:1rem}
.card .price small{color:var(--muted);font-weight:600}
.card .tt{font-size:.88rem;font-weight:700;margin:3px 0 2px}
.card .meta{font-size:.78rem;color:var(--muted)}
.card .avail{display:inline-block;margin-top:6px;font-size:.73rem;font-weight:700;
  color:var(--ok);background:var(--ok-soft);border-radius:999px;padding:3px 9px}
/* carte profil vacancier */
.vcard{background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px;
  text-decoration:none;color:var(--ink);display:block;transition:transform .12s}
.vcard:hover{transform:translateY(-2px)}
.vtop{display:flex;gap:10px;align-items:center;margin-bottom:7px}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--coral),#F4A261);
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;flex-shrink:0}
.avatar.blue{background:linear-gradient(135deg,var(--ocean),#22B8CF)}
.vname{font-weight:800;font-size:.92rem}
.vsub{font-size:.76rem;color:var(--muted)}
.vbudget{font-size:.82rem;font-weight:800;color:var(--warn);background:var(--warn-soft);
  border-radius:8px;padding:4px 8px;display:inline-block;margin:3px 0 5px}
.vbio{font-size:.8rem;color:var(--muted);line-height:1.45;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* photo d'illustration d'une annonce de recherche (ce que la personne cherche) */
.vphoto{height:92px;border-radius:10px;background-size:cover;background-position:center;
  margin:7px 0 5px;background-color:var(--sable-champ)}
.online{font-size:.72rem;color:#16A34A;font-weight:700;margin-top:7px}
.online::before{content:"●";margin-right:5px}
.alerte-inline{margin-top:16px;background:#fff;border:1px dashed var(--line);border-radius:13px;padding:13px}
.alerte-inline b{font-size:.86rem}
.alerte-inline form{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.alerte-inline input{flex:1;min-width:130px}
.alerte-inline button{white-space:nowrap}

/* ---------- fiche annonce / profil ---------- */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:150px;gap:8px;
  border-radius:16px;overflow:hidden;margin-bottom:20px}
.gallery .g{background:linear-gradient(135deg,#A7D8EA,#4E8FB0);background-size:cover;
  background-position:center;display:flex;align-items:center;justify-content:center;
  font-size:2rem;color:#fff;cursor:pointer}
.gallery .g.main{grid-row:span 2;font-size:3rem}
.gallery .g:focus-visible{outline:3px solid var(--ocean);outline-offset:-3px}
.gallery .g .g-plus{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.55);color:#fff;font-size:1.5rem;font-weight:800}
/* visionneuse photos (lightbox) : images dans la page, flèches + swipe */
.vgm-lb{position:fixed;inset:0;z-index:3000;background:rgba(15,23,42,.93);display:none;
  align-items:center;justify-content:center;padding:16px}
.vgm-lb.open{display:flex}
.vgm-lb-img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:8px;
  box-shadow:0 12px 44px rgba(0,0,0,.55);user-select:none;-webkit-user-drag:none}
.vgm-lb button{position:absolute;border:0;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;
  border-radius:999px;display:flex;align-items:center;justify-content:center;line-height:1}
.vgm-lb button:hover{background:rgba(255,255,255,.3)}
.vgm-lb-x{top:16px;right:16px;width:44px;height:44px;font-size:19px}
.vgm-lb-prev,.vgm-lb-next{top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:36px}
.vgm-lb-prev{left:14px}
.vgm-lb-next{right:14px}
.vgm-lb-n{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;
  background:rgba(0,0,0,.45);padding:5px 13px;border-radius:999px;font-size:13px;font-weight:700}
@media(max-width:640px){
  .vgm-lb-prev,.vgm-lb-next{width:44px;height:44px;font-size:28px}
  .vgm-lb-prev{left:6px}.vgm-lb-next{right:6px}
}
.cols{display:grid;grid-template-columns:1.7fr 1fr;gap:26px;align-items:start}
.fiche h1{font-size:1.45rem;margin-bottom:4px}
.loc{color:var(--muted);font-size:.9rem;margin-bottom:13px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tag{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  font-size:.82rem;font-weight:700}
.fiche h2{font-size:1.02rem;margin:20px 0 9px;color:var(--ocean-dark)}
.desc{font-size:.92rem;line-height:1.65;color:#334155;white-space:pre-line}
.amen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.amen span{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:.84rem}
.rules span{display:inline-block;background:var(--ok-soft);border:1px solid #BBF7D0;
  color:var(--ok);border-radius:999px;padding:6px 13px;font-size:.82rem;font-weight:700;margin:0 8px 8px 0}
.reg{margin-top:16px;background:#fff;border:1px dashed var(--line);border-radius:12px;
  padding:12px 16px;font-size:.82rem;color:var(--muted)}
.reg b{color:var(--ink)}
.contact{position:sticky;top:74px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(14,116,144,.1)}
.pricebig{font-size:1.45rem;font-weight:800;color:var(--ocean-dark)}
.pricebig small{font-size:.88rem;color:var(--muted);font-weight:600}
.week{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.owner{display:flex;gap:11px;align-items:center;padding:11px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:13px}
.contact .btn{display:block;width:100%;margin-bottom:8px}
.btn.wa{background:var(--ok-soft);color:var(--ok)}
.note{font-size:.74rem;color:var(--muted);text-align:center;line-height:1.5}
.warnbox{margin-top:13px;background:var(--warn-soft);border:1px solid #FED7AA;border-radius:12px;
  padding:11px;font-size:.77rem;color:#7C2D12;line-height:1.5}
.contact textarea{margin-top:4px}
#minimap{height:210px;border-radius:14px;margin-top:10px;border:1px solid var(--line)}
.revealed{background:var(--ocean-soft);border:1px solid #A5F3FC;border-radius:12px;
  padding:12px;font-size:.9rem;margin-bottom:10px}
.revealed div{margin:4px 0}

/* ---------- compte / messages / admin ---------- */
.status-b{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.4px;
  border-radius:999px;padding:3px 10px;text-transform:uppercase}
.status-b.active{background:var(--ok-soft);color:var(--ok)}
.status-b.pending{background:#FEF9C3;color:#854D0E}
.status-b.paused{background:#E2E8F0;color:#475569}
.status-b.rejected{background:#FEE2E2;color:#991B1B}
.status-b.expired{background:#FFEDD5;color:#9A3412}
.itemrow{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;
  margin-bottom:12px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.itemrow .grow{flex:1;min-width:180px}
.itemrow .actions{display:flex;gap:7px;flex-wrap:wrap}
.itemrow form{display:inline}
.convrow{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px;margin-bottom:10px;text-decoration:none;color:var(--ink)}
.convrow:hover{border-color:var(--ocean)}
.convrow .grow{flex:1;min-width:0}
.convrow .last{font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:420px}
.bubbles{display:flex;flex-direction:column;gap:10px;margin:18px 0}
/* chaque message : un petit avatar rond à côté de la bulle */
.bubble-row{display:flex;align-items:flex-end;gap:8px;max-width:82%}
.bubble-row.them{align-self:flex-start}
.bubble-row.me{align-self:flex-end;flex-direction:row-reverse}
.bubble{padding:10px 14px;border-radius:15px;font-size:.9rem;line-height:1.5;white-space:pre-line}
.bubble.me{background:var(--ocean);color:#fff;border-bottom-right-radius:4px}
.bubble.them{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.bubble time{display:block;font-size:.68rem;opacity:.7;margin-top:4px}
.avatar.mini{width:28px;height:28px;font-size:12px;flex-shrink:0}
.replybar{display:flex;gap:8px}

/* en-tête de conversation : photo de l'annonce + interlocuteur + menu ⋯ */
.conv-tete{display:flex;align-items:center;gap:12px;margin:10px 0 6px}
.conv-photo{width:56px;height:56px;flex-shrink:0;border-radius:12px;overflow:hidden;
  background:var(--sand);display:flex;align-items:center;justify-content:center;
  font-size:22px;text-decoration:none}
.conv-photo img{width:100%;height:100%;object-fit:cover}
.conv-menu>summary{list-style:none}
.conv-menu>summary::-webkit-details-marker{display:none}
.lien-menu{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  color:var(--ink);font-size:13.5px;padding:9px 12px;border-radius:9px;font-weight:600}
.lien-menu:hover{background:var(--sand)}

/* boîte de réception : vignette de l'annonce avec l'avatar en pastille */
.conv-vign{position:relative;width:52px;height:52px;flex-shrink:0;border-radius:12px;
  overflow:visible;background:var(--sand)}
.conv-vign>img{width:52px;height:52px;border-radius:12px;object-fit:cover}
.conv-vign>span:first-child{display:flex;width:52px;height:52px;align-items:center;
  justify-content:center;font-size:20px}
.pastille-av{position:absolute;bottom:-3px;right:-3px;border:2px solid #fff;width:26px;height:26px;font-size:11px}

/* éditeur de photos d'une annonce (glisser pour réordonner, ✕ pour retirer) */
.photos-editor{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.pe-item{position:relative;width:104px;height:104px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);cursor:grab;background:var(--sand)}
.pe-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pe-item.pe-traine{opacity:.4}
.pe-del{position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:50%;
  background:rgba(15,23,42,.72);color:#fff;font-size:13px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center}
.pe-del:hover{background:#DC2626}
.pe-principale{position:absolute;bottom:0;left:0;right:0;background:var(--ocean);color:#fff;
  font-size:10.5px;font-weight:800;text-align:center;padding:2px;display:none}
.pe-item.est-principale .pe-principale{display:block}

/* bouton « Continuer avec Google » + séparateur « ou » */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px;
  font-size:.95rem;font-weight:700;color:var(--ink);text-decoration:none;cursor:pointer}
.btn-google:hover{background:var(--sand);border-color:var(--bordure-champ)}
.ou-sep{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:.82rem}
.ou-sep::before,.ou-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.replybar textarea{flex:1;min-height:52px}
.statrow{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 20px;text-align:center}
.stat b{display:block;font-size:1.3rem;color:var(--ocean-dark)}
.stat small{color:var(--muted);font-size:.76rem}
.adminblock{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;margin-bottom:20px}
.adminblock h2{font-size:1rem;color:var(--ocean-dark);margin-bottom:12px}
/* ---------- admin : navigation, tableaux, messagerie ---------- */
.admin-nav{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}
.admin-nav a{text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:.86rem;font-weight:700;color:var(--ocean-dark)}
.admin-nav a:hover{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.admin-nav a.sortie{margin-left:auto;color:var(--muted)}
.admin-scroll{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff;
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.admin-table th,.admin-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.admin-table th{background:var(--sable-champ);font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:var(--texte-3)}
.admin-table tr:last-child td{border-bottom:0}
.admin-table tr.ligne-banni{background:#FEF2F2}
.tag-banni{display:inline-block;background:#991B1B;color:#fff;font-size:.66rem;font-weight:800;
  padding:2px 7px;border-radius:999px;vertical-align:middle}
.lienrouge{border:0;background:transparent;color:#B91C1C;font-weight:700;font-size:.82rem;cursor:pointer;padding:0}
.lienrouge:hover{text-decoration:underline}
.admin-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.admin-item:last-child{border-bottom:0}
.admin-msg{padding:10px 0;border-bottom:1px solid var(--line)}
.admin-msg:last-child{border-bottom:0}
.admin-msg-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-msg-body{margin-top:4px;white-space:pre-wrap;word-break:break-word}
/* ---------- admin : panneau à menu latéral (façon WordPress) ---------- */
.admin-body{background:var(--sand);margin:0}
.admin-shell{display:flex;align-items:stretch;min-height:100vh}
.admin-side{flex:0 0 236px;background:var(--ocean-dark);color:#fff;padding:14px 0;
  position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto}
.admin-logo{display:block;color:#fff;text-decoration:none;font-weight:800;font-size:1.06rem;padding:6px 20px 16px}
.admin-logo span{display:block;font-size:.66rem;font-weight:700;opacity:.6;letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.admin-side nav{display:flex;flex-direction:column;gap:1px}
.admin-side nav a{display:flex;align-items:center;gap:9px;color:#DBEAFE;text-decoration:none;
  padding:11px 20px;font-size:.93rem;font-weight:600}
.admin-side nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.admin-side nav a.on{background:rgba(255,255,255,.15);color:#fff;box-shadow:inset 4px 0 0 var(--coral)}
.admin-side nav a.admin-quit{color:#94A3B8;font-size:.84rem;font-weight:600}
.admin-side nav a.admin-quit:first-of-type{margin-top:14px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.admin-badge{margin-left:auto;background:#E11D48;color:#fff;font-size:.7rem;font-weight:800;
  min-width:20px;height:20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.admin-main{flex:1;min-width:0;padding:26px 32px;max-width:1120px}
.admin-main .wrap,.admin-main .wrap.narrow{max-width:none;padding:0;margin:0}
@media(max-width:820px){
  .admin-shell{flex-direction:column}
  .admin-side{position:static;height:auto;flex-basis:auto;padding:10px 0}
  .admin-side nav{flex-direction:row;flex-wrap:wrap;gap:4px;padding:0 12px}
  .admin-side nav a{padding:8px 12px;border-radius:8px}
  .admin-side nav a.on{box-shadow:none;background:var(--coral)}
  .admin-side nav a.admin-quit:first-of-type{margin-top:0;border-top:0;padding-top:8px}
  .admin-logo{padding:4px 14px 10px}
  .admin-main{padding:16px 14px}
}
.admin-actions{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.admin-actions form{display:inline;margin:0}
.lienbleu{border:0;background:transparent;color:var(--ocean);font-weight:700;font-size:.82rem;cursor:pointer;padding:0}
.lienbleu:hover{text-decoration:underline}
.st{display:inline-block;font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.st-active{background:#DCFCE7;color:#166534}
.st-pending{background:#FEF9C3;color:#854D0E}
.st-paused{background:#FEE2E2;color:#991B1B}
.st-rejected{background:#E5E7EB;color:#374151}
.st-expired{background:#FFEDD5;color:#9A3412}
.ref-annonce{font-size:.78rem;color:var(--texte-3);margin:3px 0 8px}
.ref-id{font-size:.72rem;font-weight:800;color:var(--texte-3);background:var(--sable-champ);padding:1px 7px;border-radius:999px;white-space:nowrap}
.apercu{border-radius:12px;padding:14px 18px;margin:0 0 20px;font-size:.95rem;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.apercu-ok{background:#DCFCE7;color:#166534;font-weight:700}
.apercu-warn{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.apercu a{color:inherit;font-weight:800;text-decoration:none;background:rgba(255,255,255,.65);padding:5px 11px;border-radius:999px}
.apercu a:hover{text-decoration:underline}
.barchart{display:flex;align-items:flex-end;gap:3px;height:160px;padding:4px 0;border-bottom:2px solid var(--line)}
.bc-col{flex:1;height:100%;display:flex;align-items:flex-end;min-width:0}
.bc-bar{width:100%;background:var(--ocean);border-radius:3px 3px 0 0;min-height:2px}
.bc-col:hover .bc-bar{background:var(--coral)}
.bc-axe{display:flex;justify-content:space-between;font-size:.72rem;color:var(--texte-3);margin-top:5px}
/* visiteurs du jour (sessions) */
.sess{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff}
.sess>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:.9rem;flex-wrap:wrap}
.sess>summary::-webkit-details-marker{display:none}
.sess-ico{font-size:1.1rem}
.sess-h{font-weight:800;color:var(--ocean-dark);white-space:nowrap}
.sess-app{font-weight:700}
.sess-robot{opacity:.55}
.sess-robot .sess-app{color:var(--muted)}
.sess[open]>summary{border-bottom:1px solid var(--line)}
.sess-parcours{padding:8px 14px 12px}
.sess-p{padding:5px 0;font-size:.86rem;border-bottom:1px dashed var(--line)}
.sess-p:last-child{border-bottom:0}
.sess-ph{display:inline-block;min-width:46px;color:var(--texte-3);font-weight:700;font-size:.78rem}
.adminitem{border-top:1px solid var(--line);padding:13px 0}
.adminitem:first-of-type{border-top:0}
.adminitem .meta{font-size:.82rem;color:var(--muted);margin:4px 0}
.adminitem .desc-mini{font-size:.84rem;color:#334155;margin:6px 0;max-height:80px;overflow:auto;
  background:var(--sand);border-radius:8px;padding:8px}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.thumbs img{width:84px;height:62px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}

/* ---------- pages texte ---------- */
.prose{font-size:.93rem;line-height:1.7;color:#334155}
.prose h2{font-size:1.1rem;color:var(--ocean-dark);margin:24px 0 8px}
.prose h3{font-size:.98rem;margin:16px 0 6px}
.prose p{margin-bottom:10px}
.prose ul{margin:0 0 12px 20px}
.prose li{margin-bottom:5px}
.prose .mt{margin-top:22px}

/* groupage entre voisins : compteur de parts, et sa mise à jour par l'organisateur */
.parts-box{background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:11px 13px;
  font-size:.92rem;line-height:1.6;color:#7c2d12;margin-bottom:10px}
.parts-maj{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:11px 13px;
  margin-bottom:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.parts-maj label{font-weight:600;font-size:.9rem;margin:0}
.parts-maj input{width:90px;margin:0}
.parts-maj span{font-size:.9rem;color:#475569}
.parts-maj .hint{flex-basis:100%;margin:0}
@media(max-width:520px){.parts-maj input{width:72px}}

/* tableau d'attribution des sources ouvertes */
.src-table{width:100%;border-collapse:collapse;margin:10px 0 4px;font-size:.9rem}
.src-table th{text-align:left;padding:7px 10px;background:#f1f5f9;color:var(--ocean-dark);
  font-weight:600;border-bottom:1px solid #e2e8f0}
.src-table td{padding:7px 10px;border-bottom:1px solid #eef2f7;vertical-align:top}
.src-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.src-table tr:last-child td{border-bottom:0}
@media(max-width:520px){.src-table{font-size:.84rem}.src-table th,.src-table td{padding:6px}}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .duo,.steps,.cols{grid-template-columns:1fr}
  .piliers{grid-template-columns:1fr 1fr}
  .secu ul{grid-template-columns:1fr}
  /* Sur téléphone, c'est la PAGE qui défile, pas un panneau interne : sinon on
     fait glisser les annonces dans une lucarne de quelques centimètres sans
     jamais dégager la carte. La carte occupe le premier écran, puis les annonces
     déroulent normalement sous le pouce. */
  body.page-carte{height:auto;overflow:visible}
  body.page-carte main{min-height:0}
  body.page-carte .carte-zone,
  body.page-carte.page-accueil .carte-zone{height:auto;min-height:0;flex:none}
  body.page-carte:not(.page-accueil) footer{display:block}
  .carte-main{flex-direction:column}
  .map-wrap{flex:none;height:46vh;min-height:240px}
  #map{min-height:0;flex:1}
  .listpane{flex:none;height:auto;overflow:visible;padding-bottom:80px}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:120px}
  .gallery .g.main{grid-row:auto}
  .row,.row3,.checks,.amen{grid-template-columns:1fr 1fr}
  .contact{position:static}
  nav.mainnav{gap:10px;font-size:.85rem}
}
@media(max-width:520px){
  .row,.row3,.checks,.amen{grid-template-columns:1fr}
  .hero h1{font-size:1.6rem}
}

/* signalement : présent, repérable, jamais criard. Le corail est déjà pris par le
   bouton Publier : un rectangle rouge à côté du favori transformerait la fiche en
   tribunal. La couleur n'apparaît donc qu'au survol et au focus clavier. */
.signal-lien{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:100%;margin-top:14px;padding:8px 10px;border:1px solid transparent;
  border-radius:10px;background:transparent;color:var(--muted);
  font-size:.76rem;font-weight:600;text-decoration:none;cursor:pointer;
  transition:color .12s,background .12s,border-color .12s}
.signal-lien:hover,.signal-lien:focus-visible{color:#991B1B;background:#FEF2F2;
  border-color:#FECACA;text-decoration:none}
.signal-lien:focus-visible{outline:2px solid #991B1B;outline-offset:2px}

/* le piège à robots doit être invisible à l'œil mais pas caché par display:none,
   que certains automates savent détecter */
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cible-signal{background:#fff;border:1px solid var(--filet);border-radius:12px;
  padding:10px 14px;margin-bottom:14px;font-size:.9rem}
.cible-signal .cible-quoi{display:block;color:var(--muted);font-size:.74rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
.ref-signal{font-size:1.05rem}
.warnbox.petite{font-size:.84rem;margin-top:14px}
.tbl{width:100%;border-collapse:collapse;margin-top:10px;font-size:.9rem}
.tbl th{text-align:left;padding:7px 10px 7px 0;color:var(--muted);font-weight:600;
  vertical-align:top;white-space:nowrap}
.tbl td{padding:7px 0;border-bottom:1px solid var(--filet)}

/* file de signalements, espace admin */
.filtres-sig{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}
.filtres-sig .pilule{display:inline-block;text-decoration:none}
.sig-carte{margin-bottom:16px}
.sig-carte.urgent{border-left:4px solid #991B1B}
.sig-tete{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.sig-ref{font-weight:800;font-size:.86rem}
.sig-date,.sig-echeance{color:var(--muted);font-size:.8rem}
.sig-echeance{margin-left:auto;font-weight:700}
.sig-explication{background:var(--sand);border-radius:10px;padding:10px 12px;margin:10px 0;
  font-size:.92rem;white-space:pre-wrap}
.sig-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0}
.sig-colonnes h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);margin-bottom:4px}
.alerte-modif{background:var(--warn-soft);color:var(--warn);border-radius:8px;
  padding:7px 10px;font-size:.84rem;font-weight:700}
.sig-contexte{margin:8px 0}
.sig-journal{margin:8px 0;font-size:.84rem}
.sig-journal ul{margin:6px 0 0 18px;color:var(--muted)}
.sig-actions textarea{width:100%;margin-bottom:8px;font-size:.88rem}
.sig-actions .boutons{display:flex;gap:7px;flex-wrap:wrap}
.sig-decision{background:var(--ok-soft);color:var(--ok);border-radius:8px;padding:8px 11px;
  font-size:.87rem}
.encart-rouge{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;border-radius:10px;
  padding:11px 13px;margin:10px 0;font-size:.88rem;display:flex;gap:10px;
  align-items:center;flex-wrap:wrap}
.encart-rouge a{color:#991B1B;font-weight:700}
.en-ligne{display:inline}
@media (max-width:768px){ .sig-colonnes{grid-template-columns:1fr} }

/* rangée hybride : marchés de l'univers, séparateur, puis catégories. Sur un
   univers à plusieurs marchés (Objets, Emploi), la pilule de marché est plus
   marquée que les catégories, pour qu'on la distingue au premier coup d'œil. */
.pilule.marche-pil{background:var(--ocean-soft);color:var(--ocean-dark);font-weight:800}
.pilule.marche-pil.on{background:var(--ocean);color:#fff}
.pil-sep{flex:0 0 auto;width:1px;align-self:stretch;margin:4px 3px;
  background:var(--filet)}

/* ---------- partage d'une fiche ---------- */
.partage{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 4px}
.pg-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--bordure-champ);
  background:#fff;color:var(--ink);font-size:.78rem;font-weight:700;border-radius:999px;
  padding:6px 12px;cursor:pointer;text-decoration:none;white-space:nowrap}
.pg-btn:hover{border-color:var(--ocean);color:var(--ocean-dark)}

/* coeur dans l'aperçu (popup) de la carte */
.mpop{position:relative}
.mpop-fav{position:absolute;top:-2px;right:0;border:0;background:transparent;font-size:19px;
  line-height:1;cursor:pointer;color:var(--texte-3);padding:2px}
.mpop-fav.on,.mpop-fav:hover{color:var(--coral)}
/* aperçu ouvert : les pilules de catégories s'effacent pour ne pas le chevaucher */
.map-wrap.popup-ouvert .pilules,.map-wrap.popup-ouvert .pilules-fin{opacity:0;pointer-events:none}

/* ---------- bouton Critères au-dessus de la carte (à droite du lieu) ---------- */
.criteres-bar{flex:0 0 auto;margin-left:10px}
.adv-fermer{position:absolute;top:7px;right:9px;border:0;background:transparent;
  color:var(--texte-3);font-size:1rem;cursor:pointer;padding:3px 6px;line-height:1}
.adv-fermer:hover{color:var(--coral)}
#advPanel{padding-right:34px}

/* ---------- mobile : les critères choisis se replient en pastilles ----------
   Chaque niveau (univers, type, catégorie, annonces/chercheurs, mot-clé, lieu)
   n'affiche que CE QUI EST CHOISI, en pastille foncée sur 2 lignes maximum.
   Taper une pastille rouvre la rangée correspondante pour re-choisir. */
.chipbar{display:none}
@media (max-width:768px){
  .chipbar{display:flex;flex-wrap:wrap;gap:6px;width:100%;order:0;padding:2px 0}
  .chip{border:1px solid var(--bordure-champ);background:#fff;color:var(--ink);
    font-size:.78rem;font-weight:700;border-radius:999px;padding:7px 12px;cursor:pointer;
    max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chip.on{background:var(--ocean-dark);border-color:var(--ocean-dark);color:#fff}
  .chip.dep{border-color:var(--coral);box-shadow:0 0 0 2px rgba(231,111,81,.3)}
  /* fil d'Ariane entre les niveaux : univers › catégorie › sous-catégorie */
  .chip-sep{align-self:center;color:var(--texte-3);font-weight:800;font-size:.95rem;
    padding:0 1px;user-select:none}
  body.chips-actives .etage2 > .segments[role="tablist"],
  body.chips-actives .etage2 .champ-rech,
  body.chips-actives .etage2 .segments.bascule,
  body.chips-actives .etage-marche,
  body.chips-actives .pilules,
  body.chips-actives .carte-lieu-bar{display:none}
  body.chips-actives .etage2 > .segments[role="tablist"].ouvert,
  body.chips-actives .etage2 .champ-rech.ouvert,
  body.chips-actives .etage2 .segments.bascule.ouvert,
  body.chips-actives .etage-marche.ouvert,
  body.chips-actives .pilules.ouvert,
  body.chips-actives .carte-lieu-bar.ouvert{display:flex}
  /* la rangée d'univers rouverte s'étale en grille lisible plutôt qu'en ligne écrasée */
  body.chips-actives .etage2 > .segments[role="tablist"].ouvert{flex-wrap:wrap;border-radius:16px}
  body.chips-actives .etage2 > .segments[role="tablist"].ouvert a{flex:1 1 44%}
  /* menu Catégorie (marchés de l'univers) : même panneau en grille de 2 colonnes */
  body.chips-actives .etage-marche.ouvert{display:block;padding:8px 12px}
  body.chips-actives .etage-marche.ouvert .marche-label{display:none}
  body.chips-actives .etage-marche.ouvert .segments-marche{display:flex;flex-wrap:wrap;
    gap:4px;overflow:visible;border-radius:16px}
  body.chips-actives .etage-marche.ouvert .segments-marche a{flex:1 1 44%;text-align:center;
    padding:11px 6px;white-space:normal}
  /* menu Sous-catégorie : panneau statique en grille, plus de bande défilante sur la carte */
  body.chips-actives .pilules.ouvert{position:static;flex-wrap:wrap;overflow:visible;
    -webkit-mask-image:none;mask-image:none;padding:8px 10px;gap:6px;cursor:auto}
  body.chips-actives .pilules.ouvert .pilule{flex:1 1 44%;text-align:center;white-space:normal}
}

/* ---------- tri de la liste d'annonces ---------- */
.tri-sel{border:1px solid var(--bordure-champ);border-radius:9px;background:#fff;
  color:var(--ink);font-size:.78rem;font-weight:700;padding:5px 7px;max-width:46%}

/* ---------- bandeau discret de géolocalisation (posé sur la carte) ---------- */
.geo-bandeau{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:940;
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 9px 7px 14px;box-shadow:0 8px 24px rgba(15,23,42,.18);
  font-size:.82rem;font-weight:700;max-width:calc(100% - 18px);white-space:nowrap}
.geo-bandeau span{overflow:hidden;text-overflow:ellipsis}
.geo-bandeau .gb-oui{border:0;background:var(--ocean);color:#fff;font-weight:800;
  font-size:.8rem;border-radius:999px;padding:7px 13px;cursor:pointer;white-space:nowrap}
.geo-bandeau .gb-oui:hover{background:var(--ocean-dark)}
.geo-bandeau .gb-non{border:0;background:transparent;color:var(--texte-3);
  font-size:.95rem;cursor:pointer;padding:2px 6px;line-height:1}

/* ---------- liste d'annonces : grille 2 par ligne, COMPACTE, sur téléphone.
   Même seuil que les pastilles (768px) : un écran qui a les pastilles a
   forcément la grille compacte, jamais les grandes cartes du bureau. ---------- */
@media(max-width:768px){
  .cards{grid-template-columns:1fr 1fr;gap:8px}
  /* min-width:0 : sans lui, les textes en nowrap forcent la largeur des colonnes
     de la grille et la page déborde de l'écran (il fallait dézoomer pour tout voir) */
  .cards .card-wrap,.cards .card,.card .cb{min-width:0;max-width:100%}
  .card .ph{height:78px;font-size:1.5rem}
  .card .ph .tbadge{left:6px;bottom:5px;font-size:.56rem;padding:2px 6px;max-width:calc(100% - 12px);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card .cb{padding:6px 8px 7px}
  .card .price{font-size:.82rem}
  .card .price small{font-size:.68rem}
  .card .tt{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 1px}
  .card .meta{font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card .avail,.card .tag-loin{max-width:100%;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:.62rem;margin-top:3px;padding:2px 6px}
  /* les fiches de chercheurs (texte long) et les titres de blocs gardent la pleine largeur */
  .card-wrap:has(.vcard),.bloc-local,.bloc-loin{grid-column:1/-1}
  .favbtn{transform:scale(.85);right:2px;top:2px}
}

/* ---------- calendrier de disponibilités (immobilier) ---------- */
.cal-saisie{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-saisie input[type=date]{width:auto;padding:8px 10px}
.cal-liste{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.cal-per{display:inline-flex;align-items:center;gap:6px;background:#FEF2F2;
  border:1px solid #FECACA;color:#991B1B;font-size:.8rem;font-weight:700;
  border-radius:999px;padding:5px 10px}
.cal-per button{border:0;background:transparent;color:#991B1B;cursor:pointer;
  font-size:.85rem;padding:0 2px}
.cal-fiche{display:flex;flex-wrap:wrap;gap:16px;margin:6px 0 4px}
.cal-mois{flex:0 0 auto}
.cal-titre{font-size:.82rem;font-weight:800;color:var(--ocean-dark);margin-bottom:5px}
.cal-grille{display:grid;grid-template-columns:repeat(7,26px);gap:2px}
.cal-jn{font-size:.66rem;font-weight:800;color:var(--texte-3);text-align:center}
.cal-j{display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;
  font-size:.72rem;font-weight:600;border-radius:6px;background:#ECFDF5;color:#065F46}
.cal-j.off{background:#FEE2E2;color:#991B1B;text-decoration:line-through}
.cal-j.passe{opacity:.35;background:var(--sable-champ);color:var(--texte-3);text-decoration:none}
.cal-legende{width:100%;font-size:.76rem;color:var(--muted);display:flex;
  align-items:center;gap:6px;margin-top:2px}
.avail.cal-libre{background:#DCFCE7;color:#166534}
.avail.cal-conf{background:#FEF9C3;color:#854D0E}

/* ---------- achats groupés : offres de gros + prise de parts ---------- */
.ag-st.ag-reduc{background:#F3E8FF;color:#6B21A8}
.ag-card-offre{border-left:3px solid #7C3AED}
.ag-parts{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:7px}
.ag-parts select,.ag-parts input{width:auto;padding:7px 9px;font-size:.83rem;border-radius:9px}

/* ---------- univers Achats groupés ---------- */
.ag-explique{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px;margin:8px 14px 4px;font-size:.85rem}
.ag-explique p{margin:6px 0 0;color:var(--muted);line-height:1.5}
.ag-cards{display:flex;flex-direction:column;gap:10px;padding:10px 14px}
.ag-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px;text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .12s}
.ag-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,41,59,.12)}
.ag-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.ag-st{font-size:.68rem;font-weight:800;background:var(--ok-soft);color:var(--ok);border-radius:999px;padding:3px 9px;white-space:nowrap}
.ag-card-sub{font-size:.8rem;color:var(--muted);margin-top:3px}
.ag-card-point{border-left:4px solid #0F766E}
.ag-jauge{height:8px;background:var(--segment-fond);border-radius:999px;margin:8px 0 4px;overflow:hidden}
.ag-jauge-fill{height:100%;background:linear-gradient(90deg,#0F766E,#14B8A6);border-radius:999px}
.ag-vide{background:#fff;border:1px dashed var(--line);border-radius:14px;padding:20px;margin:10px 14px;text-align:center}
.ag-vide p{color:var(--muted);font-size:.88rem;margin:8px 0 14px}
.ag-membres{display:flex;flex-wrap:wrap;gap:8px}
.ag-membre{display:inline-flex;align-items:center;gap:6px;background:var(--sable-champ);border-radius:999px;padding:4px 10px 4px 4px;font-size:.82rem;font-weight:600}
.ag-membre i{color:var(--muted);font-style:normal;font-size:.72rem}

/* Provenance des fiches collectées dans une base ouverte (origine=collectee).
   Volontairement visible : le visiteur doit savoir que la fiche n'a pas été
   déposée par un membre, et la licence ouverte impose de citer le producteur. */
.src-ligne{margin:14px 0 4px;font-size:.78rem;color:#94a3b8;line-height:1.5}
.src-ligne a{color:#94a3b8;text-decoration:underline}
.src-ligne a:hover{color:var(--ocean-dark)}
/* Bandeau des fiches collectées sans photo : un seul visuel sobre, jamais présenté
   comme une photographie du lieu. */
.gal-vide{height:190px;border-radius:16px;margin-bottom:18px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(135deg,#0E7490,#155E75);color:#fff}
.gal-vide .gv-emo{font-size:3.2rem;line-height:1}
.gal-vide .gv-txt{font-weight:700;letter-spacing:.02em;opacity:.95}
.gal-vide.m-videgrenier{background:linear-gradient(135deg,#B45309,#92400E)}
.gal-vide.m-fermier{background:linear-gradient(135deg,#15803D,#166534)}
.gal-vide.m-foodtruck{background:linear-gradient(135deg,#BE123C,#9F1239)}
.gal-vide.m-cueillette{background:linear-gradient(135deg,#65A30D,#4D7C0F)}
@media(max-width:768px){.gal-vide{height:140px}.gal-vide .gv-emo{font-size:2.4rem}}
/* Compteur d'annonces en ligne dans la barre de marque */
.tete-compteur{margin-left:auto;margin-right:18px;font-size:.86rem;color:var(--ocean-dark);
  background:var(--ocean-soft);border:1px solid #A5F3FC;border-radius:999px;
  padding:4px 12px;white-space:nowrap}
.tete-compteur b{font-weight:800}
@media(max-width:900px){.tete-compteur{display:none}}