/* LinkTrust — feuille de style
 *
 * Les polices sont chargées par next/font dans layout.tsx et exposées ici
 * en variables. Aucune requête vers un tiers : elles sont servies depuis
 * notre propre domaine, ce qui vaut aussi pour la vie privée.
 *
 * La mise en page est une colonne flexible : le bandeau prend ce qu'il lui
 * faut, le reste remplit l'écran. La carte n'a donc jamais besoin de deviner
 * la hauteur de l'en-tête.
 */

:root {
  --fond: #f5f7f5;
  --surface: #ffffff;
  --surface-2: #edf1ee;
  --encre: #16201c;
  --encre-2: #52605a;
  --encre-3: #7c8a82;
  --bord: #e1e6e2;
  --bord-fort: #c9d1cb;
  --accent: #0e9d62;
  --accent-fonce: #0b7d4e;
  --accent-voile: #e7f4ee;
  --alerte: #b0761a;
  --alerte-voile: #f8f1e3;
  /* Réservé à l'irréversible : supprimer son compte, et rien d'autre. */
  --peril: #b3261e;
  --ombre: 0 1px 2px rgb(20 32 26 / 5%), 0 8px 24px -16px rgb(20 32 26 / 18%);
  --rayon: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0b1210;
    --surface: #121c18;
    --surface-2: #18241f;
    --encre: #e8efe9;
    --encre-2: #a3b1a9;
    --encre-3: #7b8a82;
    --bord: #253129;
    --bord-fort: #32403a;
    --accent: #3fd694;
    --accent-fonce: #7ee6b8;
    --accent-voile: #11301f;
    --alerte: #e0ac57;
    --alerte-voile: #2b2210;
    --peril: #f2837a;
    --ombre: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 28px -18px rgb(0 0 0 / 70%);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-texte, "IBM Plex Sans"), system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-fonce); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- bandeau ---------- */

.bandeau {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: .65rem clamp(.9rem, 3vw, 1.6rem);
  border-bottom: 1px solid var(--bord);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.bandeau > strong {
  font-family: var(--police-titre, "Fraunces"), Georgia, "Times New Roman", serif;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.bandeau nav {
  display: flex;
  gap: .15rem;
  font-size: .87rem;
}

.bandeau nav a {
  color: var(--encre-2);
  text-decoration: none;
  padding: .3rem .6rem;
  border-radius: 7px;
}

.bandeau nav a:hover {
  background: var(--surface-2);
  color: var(--encre);
}

.persona {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
}

.persona span {
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-3);
  white-space: nowrap;
}

.persona select { width: auto; padding: .3rem .5rem; font-size: .84rem; }
.persona button { padding: .3rem .6rem; font-size: .8rem; }

/* ---------- structure ---------- */

.contenu {
  flex: 1 1 auto;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 2rem clamp(.9rem, 3vw, 1.6rem) 5rem;
}

h1 {
  font-family: var(--police-titre, "Fraunces"), Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 3.4vw, 1.85rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.015em;
  margin: 0 0 .45rem;
  text-wrap: balance;
}

.sous {
  color: var(--encre-2);
  margin: 0 0 2rem;
  max-width: 62ch;
}

h2.section {
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--encre-3);
  font-weight: 600;
  margin: 2.4rem 0 .9rem;
}

section:first-of-type h2.section { margin-top: 0; }

/* ---------- tuiles de comptage ---------- */

.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .7rem;
  margin-bottom: 1.8rem;
}

.tuile {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: .8rem 1rem;
  background: var(--surface);
}

.tuile .k {
  display: block;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-bottom: .15rem;
}

.tuile .v {
  font-family: var(--police-titre, "Fraunces"), Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ---------- formulaires ---------- */

label { display: block; margin-bottom: 1.1rem; }

label span {
  display: block;
  font-size: .81rem;
  color: var(--encre-2);
  margin-bottom: .3rem;
}

input, textarea, select, button {
  font: inherit;
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--bord-fort);
  border-radius: 8px;
  background: var(--surface);
  color: var(--encre);
}

textarea { resize: vertical; }

input:hover, textarea:hover, select:hover { border-color: var(--encre-3); }

button {
  width: auto;
  cursor: pointer;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  transition: filter .12s ease;
}

button:hover { filter: brightness(1.07); }
button:active { filter: brightness(.94); }

button.discret {
  background: transparent;
  color: var(--encre-2);
  border-color: var(--bord-fort);
}

button.discret:hover {
  background: var(--surface-2);
  color: var(--encre);
  filter: none;
}

/* L'irréversible se signale, sans crier : contour seul, plein au survol. */
button.danger {
  background: transparent;
  color: var(--peril);
  border-color: var(--peril);
}

button.danger:hover {
  background: var(--peril);
  color: var(--surface);
  filter: none;
}

.gestes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0; }
.gestes form { display: inline; margin: 0; }

.connexion hr {
  border: 0;
  border-top: 1px solid var(--bord);
  margin: 1.8rem 0 1.2rem;
}

.connexion .suppression {
  border: 1px solid var(--peril);
  border-radius: var(--rayon);
  padding: 1rem;
}

.connexion .suppression .boutons { display: flex; flex-wrap: wrap; gap: .6rem; }

a.bouton {
  display: inline-block;
  padding: .55rem .95rem;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}

a.bouton:hover { filter: brightness(1.07); }

/* ---------- compte ---------- */

.compte {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  font-size: .86rem;
}

.compte .qui { color: var(--encre-2); white-space: nowrap; }
.compte button { padding: .3rem .6rem; font-size: .8rem; }
.compte a { white-space: nowrap; }
.persona + .compte { margin-left: .6rem; }
.compte form { margin: 0; }
.compte .court { display: none; }
.compte a.inviter {
  font-weight: 600; text-decoration: none; color: var(--accent-fonce);
  padding: .3rem .6rem; border: 1px solid var(--accent); border-radius: 8px;
}
.compte a.inviter:hover { background: var(--accent-voile); }

/* Sur téléphone, le bandeau n'a la place que pour l'essentiel : le prénom
   disparaît (il est rappelé ailleurs) et « Se déconnecter » devient « Sortir ».
   Sans cela le bouton débordait sur la droite de l'écran. */
@media (max-width: 720px) {
  .compte { gap: .4rem; font-size: .82rem; }
  .compte .qui, .compte .long { display: none; }
  .compte .court { display: inline; }
  .compte button { min-height: 36px; padding: .25rem .55rem; }
  .compte a.inviter { padding: .25rem .55rem; }
}

.connexion form { display: grid; gap: .8rem; margin: 1.2rem 0; }
.connexion .envoye {
  border: 1px solid var(--bord);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon);
  background: var(--accent-voile);
  padding: .9rem 1rem;
}
.connexion .refus { color: var(--alerte); }

/* ---------- tableaux ---------- */

table {
  border-collapse: collapse;
  width: 100%;
  font-size: .9rem;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
}

th {
  text-align: left;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre-3);
  font-weight: 600;
  padding: .6rem .8rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--bord);
  white-space: nowrap;
}

td {
  padding: .62rem .8rem;
  border-bottom: 1px solid var(--bord);
  color: var(--encre-2);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
td.nom { color: var(--encre); font-weight: 500; }

.etiq {
  display: inline-block;
  font-size: .71rem;
  font-weight: 500;
  padding: .12rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--bord-fort);
  color: var(--encre-2);
  white-space: nowrap;
}

.etiq.publie { color: var(--accent-fonce); border-color: var(--accent); background: var(--accent-voile); }
.etiq.brouillon { color: var(--alerte); border-color: var(--alerte); background: var(--alerte-voile); }

.vide {
  color: var(--encre-3);
  font-family: var(--police-titre, "Fraunces"), Georgia, "Times New Roman", serif;
  font-style: italic;
  padding: 2.5rem 0;
  text-align: center;
}

/* ---------- la carte ---------- */

/* Elle remplit ce que le bandeau laisse. La hauteur minimale est un filet de
 * sécurité : si cette feuille ne se charge pas, le conteneur garde malgré
 * tout une hauteur grâce au style en ligne du composant. */
.carte {
  flex: 1 1 auto;
  width: 100%;
  min-height: 60vh;
}

.maplibregl-popup-content {
  border-radius: 10px;
  box-shadow: var(--ombre);
  padding: .8rem .9rem;
}

/* ---------- autocomplétion d'adresse ---------- */

.suggestion {
  border: 1px solid var(--bord-fort);
  border-top: 0;
  background: var(--surface);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  box-shadow: var(--ombre);
}

.suggestion button {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--encre);
  border: 0;
  border-bottom: 1px solid var(--bord);
  border-radius: 0;
  font-weight: 400;
  padding: .55rem .75rem;
}

.suggestion button:last-child { border-bottom: 0; }
.suggestion button:hover { background: var(--surface-2); filter: none; }

/* ---------- couche humaine ---------- */

.personnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
}

.personne {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
}

.personne header {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: .55rem;
}

.personne h2,
.personne h3 {
  font-family: var(--police-titre, "Fraunces"), Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.01em;
}

.personne .creneau {
  margin-left: auto;
  font-size: .79rem;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--surface-2);
  padding: .1rem .45rem;
  border-radius: 6px;
}

.personne .activite { margin: 0 0 .45rem; font-weight: 500; }

.personne .bio,
.personne .note { margin: 0 0 .45rem; font-size: .88rem; color: var(--encre-2); }

.personne .note {
  font-family: var(--police-titre, "Fraunces"), Georgia, "Times New Roman", serif;
  font-style: italic;
}

.flou {
  margin: .7rem 0 .9rem;
  font-size: .79rem;
  color: var(--encre-3);
  padding: .45rem .7rem;
  border-left: 2px solid var(--bord-fort);
  background: var(--surface-2);
  border-radius: 0 7px 7px 0;
}

.aide { font-size: .79rem; color: var(--encre-3); margin: .35rem 0 0; }

.demande { margin-top: auto; }
.demande label { margin-bottom: .65rem; }
.demande textarea { font-size: .88rem; }

.ouvert, .attente {
  margin-top: auto;
  padding: .7rem .85rem;
  border-radius: 0 8px 8px 0;
}

.ouvert {
  border-left: 3px solid var(--accent);
  background: var(--accent-voile);
}

.attente {
  border-left: 3px solid var(--bord-fort);
  background: var(--surface-2);
}

.ouvert b, .attente b {
  display: block;
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: .3rem;
}

.ouvert b { color: var(--accent-fonce); }
.attente b { color: var(--encre-2); }
.ouvert p { margin: .3rem 0 0; font-size: .9rem; }

.reponses { display: flex; gap: .55rem; margin-top: .9rem; }
.reponses form { display: inline; }

@media (max-width: 620px) {
  .bandeau { flex-wrap: wrap; gap: .5rem .8rem; }
  .persona { margin-left: 0; width: 100%; }
  .persona + .compte { margin-left: 0; }
  .personnes { grid-template-columns: 1fr; }
}

/* ---------- se rendre disponible ---------- */

.ma-dispo {
  border: 1px solid var(--bord);
  border-radius: 14px;
  background: var(--surface);
  padding: 1rem 1.15rem 1.15rem;
  margin-bottom: 2.2rem;
  box-shadow: var(--ombre);
}
.ma-dispo h2.section { margin-top: 0; }

.dispos-en-cours { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.dispos-en-cours li {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .5rem .75rem; border-radius: 9px;
  background: var(--accent-voile); font-size: .88rem;
}
.dispos-en-cours form { margin-left: auto; }
.dispos-en-cours button { padding: .25rem .7rem; font-size: .82rem; }

.declaration { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.declaration label { margin-bottom: .9rem; }
.declaration label.large { grid-column: 1 / -1; }
.declaration .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.declaration .actions .aide { margin: 0; flex: 1 1 18rem; }

.ouvert form { margin-top: .6rem; }
.ouvert form button { font-size: .84rem; padding: .3rem .8rem; }

/* ---------- Trust Map : fonds, légende, pings ---------- */

.carte-cadre { position: relative; flex: 1 1 auto; min-height: 60vh; }
.carte-cadre .carte { position: absolute; inset: 0; min-height: 0; }

.carte-fonds {
  position: absolute; top: .8rem; left: .8rem; z-index: 5;
  display: flex; padding: 3px; gap: 2px;
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: 9px; box-shadow: var(--ombre);
}
.carte-fonds button {
  background: transparent; color: var(--encre-2); border: 0;
  padding: .35rem .8rem; font-size: .84rem; border-radius: 6px;
}
.carte-fonds button[aria-pressed="true"] { background: var(--encre); color: var(--surface); }
.carte-fonds button:hover { filter: none; background: var(--surface-2); }
.carte-fonds button[aria-pressed="true"]:hover { background: var(--encre); }

.carte-legende {
  position: absolute; left: .8rem; bottom: 2.4rem; z-index: 5;
  width: min(19rem, calc(100% - 1.6rem));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--bord); border-radius: 12px;
  box-shadow: var(--ombre); padding: .7rem .7rem .6rem;
}
.legende-titre {
  margin: 0 .3rem .45rem; font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--encre-3);
}
.legende-titre strong { color: var(--encre); letter-spacing: normal; text-transform: none; font-size: .82rem; }
.carte-legende ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.carte-legende li button {
  width: 100%; display: flex; align-items: center; gap: .6rem;
  background: transparent; border: 0; color: var(--encre);
  padding: .38rem .35rem; border-radius: 7px; text-align: left; font-weight: 400;
}
.carte-legende li button:hover { background: var(--surface-2); filter: none; }
.carte-legende li button[aria-pressed="false"] { opacity: .42; }
.pastille { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.pastille-lieu { border-radius: 3px; }
.legende-texte { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.legende-libelle { font-size: .86rem; font-weight: 500; }
.legende-detail { font-size: .72rem; color: var(--encre-3); }
.legende-compte {
  margin-left: auto; font-size: .78rem; font-variant-numeric: tabular-nums;
  color: var(--encre-2); background: var(--surface-2); border-radius: 6px; padding: 0 .4rem;
}
.legende-note { margin: .5rem .3rem 0; font-size: .7rem; color: var(--encre-3); line-height: 1.4; }

/* Les lieux : un carré sombre, fixe. */
.repere-lieu {
  width: 13px; height: 13px; border-radius: 3px; background: #334155;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 40%); cursor: pointer;
}

/* Les personnes : un ping qui pulse, dans la couleur de la relation. */
.ping {
  position: relative; width: 16px; height: 16px; border-radius: 50%;
  background: var(--teinte); border: 2.5px solid #fff;
  box-shadow: 0 1px 5px rgb(0 0 0 / 45%); cursor: pointer;
}
.ping::after {
  content: ""; position: absolute; inset: -2.5px; border-radius: 50%;
  border: 2px solid var(--teinte); animation: ping-onde 2.2s ease-out infinite;
}
/* Ce qui attend une action pulse plus vite. */
.ping-recue::after { animation-duration: 1.3s; }
.ping-connecte { width: 18px; height: 18px; }

@keyframes ping-onde {
  0%   { transform: scale(1);   opacity: .85; }
  100% { transform: scale(3.2); opacity: 0; }
}

.popup { font-size: .88rem; line-height: 1.45; max-width: 16rem; color: #16201c; }
.popup > div + div { margin-top: .2rem; }
.popup-titre { font-family: var(--police-titre, "Fraunces"), Georgia, serif; font-weight: 600; font-size: 1rem; }
.popup-sous { color: #5b6760; font-size: .8rem; }
.popup-statut { font-size: .76rem; font-weight: 600; }
.statut-connecte { color: #15803d; }
.statut-recue { color: #b45309; }
.statut-envoyee { color: #7e22ce; }
.statut-disponible { color: #1d4ed8; }
.popup-lien { display: inline-block; margin-top: .5rem; font-size: .82rem; font-weight: 600; color: #0b7d4e; }

@media (max-width: 620px) {
  .carte-legende { bottom: 2.2rem; }
  .legende-detail { display: none; }
}

/* ---------- chercher : l'intention d'abord ---------- */

.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.chercher { max-width: 48rem; }
.intention label { margin-bottom: 0; }

.intention textarea {
  font-size: 1.06rem; line-height: 1.5; padding: .85rem 1rem;
  border-radius: 14px; min-height: 5.5rem; box-shadow: var(--ombre);
}

.intention-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .7rem; }
.intention-pied .aide { margin: 0; flex: 1 1 18rem; }
.intention-boutons { display: flex; gap: .5rem; align-items: center; }
.micro {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--surface); color: var(--encre-2); border-color: var(--bord-fort);
}
.micro.ecoute { background: var(--peril); border-color: var(--peril); color: #fff; animation: micro-pouls 1.4s ease-in-out infinite; }
@keyframes micro-pouls { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--peril) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .micro.ecoute { animation: none; } }
.micro-erreur { flex-basis: 100%; margin: 0; }
.etiquette-demo {
  display: inline-block; margin: .2rem 0 .35rem; padding: .12rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; color: var(--alerte); background: var(--alerte-voile);
}
button:disabled { opacity: .55; cursor: not-allowed; filter: none; }

.exemples { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.exemples button {
  background: var(--surface); color: var(--encre-2); border-color: var(--bord-fort);
  font-weight: 400; font-size: .84rem; padding: .3rem .75rem; border-radius: 999px; text-align: left;
}
.exemples button:hover { background: var(--surface-2); color: var(--encre); filter: none; }

.message {
  margin: 1.4rem 0 0; padding: .75rem 1rem; border-radius: 0 10px 10px 0;
  border-left: 3px solid var(--bord-fort); background: var(--surface-2); max-width: 62ch;
}
.message.alerte { border-left-color: var(--alerte); background: var(--alerte-voile); }
.resume .message { margin: 0 0 1rem; }

.resume {
  margin-top: 1.8rem; border: 1px solid var(--bord); background: var(--surface);
  border-radius: 16px; padding: 1.15rem 1.25rem 1.25rem; box-shadow: var(--ombre);
}
.resume-titre {
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--encre-3); font-weight: 600; margin: 0 0 .25rem;
}
.reformulation {
  font-family: var(--police-titre, "Fraunces"), Georgia, "Times New Roman", serif;
  font-size: 1.14rem; line-height: 1.4; margin: 0 0 1.1rem; text-wrap: pretty;
}
.resume-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1rem; }
.resume label small { display: block; font-size: .75rem; color: var(--accent-fonce); margin-top: .25rem; line-height: 1.35; }
.resume label.manquant input { border-color: var(--alerte); background: var(--alerte-voile); }
.resume label.manquant small { color: var(--alerte); }

.liste-modifiable { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.liste-modifiable legend { font-size: .81rem; color: var(--encre-2); margin-bottom: .35rem; padding: 0; }
.liste-modifiable .puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.liste-modifiable input { width: auto; flex: 1 1 9rem; font-size: .88rem; padding: .35rem .7rem; border-radius: 999px; }

.resume .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.resume .actions .aide { margin: 0; }

.resultats { margin-top: 2.2rem; }
.creneau-retenu { margin: 0 0 .8rem; font-size: .9rem; color: var(--encre-2); }
.creneau-retenu b { color: var(--encre); font-weight: 600; }
.resultats h2.section { margin-top: 1.6rem; }

.notes { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-direction: column; gap: .35rem; }
.notes li { font-size: .82rem; color: var(--encre-2); padding: .45rem .75rem; background: var(--surface-2); border-radius: 8px; }

.cartes-resultats { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: .8rem; }

.resultat {
  border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface);
  padding: .9rem 1rem 1rem; display: flex; flex-direction: column; align-items: flex-start;
}
.resultat h3 {
  font-family: var(--police-titre, "Fraunces"), Georgia, "Times New Roman", serif;
  font-size: 1.04rem; font-weight: 600; margin: .45rem 0 0; letter-spacing: -.01em;
}
.resultat .sous-titre { font-size: .8rem; color: var(--encre-3); margin: .1rem 0 0; }
.resultat .lien { margin-top: .7rem; font-size: .86rem; font-weight: 600; }

.pourquoi { margin-top: .7rem; padding-top: .55rem; border-top: 1px dashed var(--bord-fort); width: 100%; }
.pourquoi b { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); font-weight: 600; }
.pourquoi ul { margin: .25rem 0 0; padding-left: 1.05rem; font-size: .84rem; color: var(--encre-2); line-height: 1.45; }
.pourquoi li + li { margin-top: .2rem; }

@media (max-width: 620px) {
  .intention-boutons { width: 100%; }
  .intention-boutons button[type="submit"] { flex: 1; }
  .resume .actions button { width: 100%; }
  .resume { padding: .95rem .9rem 1rem; border-radius: 14px; }
}

/* ---------- l'application sur téléphone ----------
 *
 * Même code, même adresse : sous 720 px, la navigation passe en bas, à
 * portée de pouce, le bandeau se réduit à la marque et au profil, et la carte
 * prend tout l'écran. Les marges env(safe-area-inset-*) tiennent compte de
 * l'encoche et de la barre d'accueil une fois l'app installée.
 */

.onglets, .legende-bascule, .legende-fermer, .si-toucher { display: none; }
.legende-bascule[hidden] { display: none !important; }

/* Pas de survol sur un écran tactile : le texte dit « touchez ». */
@media (hover: none) {
  .si-survol { display: none; }
  .si-toucher { display: inline; }
}

/* Des cibles qu'un doigt atteint sans viser. */
@media (pointer: coarse) {
  button, select, input:not([type="hidden"]) { min-height: 44px; }
  .ping::before, .repere-lieu::before { content: ""; position: absolute; inset: -14px; }
}

@media (max-width: 720px) {
  body { padding-bottom: calc(4.1rem + env(safe-area-inset-bottom)); }

  .bandeau {
    flex-wrap: nowrap; gap: .6rem;
    padding: max(.4rem, env(safe-area-inset-top)) max(.9rem, env(safe-area-inset-right)) .4rem max(.9rem, env(safe-area-inset-left));
  }
  /* Sélecteur à deux classes : `.bandeau nav` (plus haut) l'emporterait sinon,
     le menu resterait affiché et élargirait toute la page. */
  .bandeau .nav-bureau, .persona span { display: none; }
  .persona { width: auto; margin-left: auto; }
  .persona select { width: auto; max-width: 8.5rem; }

  .onglets {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: .25rem max(.4rem, env(safe-area-inset-right)) calc(.3rem + env(safe-area-inset-bottom)) max(.4rem, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--bord);
  }
  .onglet {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .12rem; min-height: 3.3rem; color: var(--encre-3); text-decoration: none;
    font-size: .7rem; font-weight: 500; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
  }
  .onglet svg { width: 24px; height: 24px; }
  .onglet[aria-current="page"] { color: var(--accent-fonce); }
  .onglet[aria-current="page"]::before {
    content: ""; position: absolute; top: .22rem; left: 50%; transform: translateX(-50%);
    width: 3.2rem; height: 1.95rem; border-radius: 999px; background: var(--accent-voile); z-index: -1;
  }
  .pastille-onglet {
    position: absolute; top: .2rem; left: calc(50% + .5rem);
    min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px;
    background: #f59e0b; color: #1c1405; font-size: .66rem; font-weight: 700; line-height: 1.15rem; text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
  }

  .contenu { padding-top: 1.3rem; padding-bottom: 2rem; }
  h2.section { margin-top: 1.8rem; }
  table { display: block; overflow-x: auto; }

  /* La carte : légende repliée en un bouton, ouverte en feuille au-dessus des onglets. */
  .maplibregl-ctrl-top-right { display: none; }
  .carte-fonds { top: .6rem; left: .6rem; }
  .legende-bascule {
    display: inline-flex; align-items: center; gap: .55rem;
    position: absolute; left: .6rem; bottom: 2.3rem; z-index: 6;
    background: var(--surface); color: var(--encre); border: 1px solid var(--bord);
    border-radius: 999px; box-shadow: var(--ombre); padding: .45rem .9rem; font-size: .88rem; font-weight: 500;
  }
  .legende-bascule:hover { filter: none; background: var(--surface-2); }
  .legende-bascule .pastilles { display: inline-flex; padding-left: 4px; }
  .legende-bascule .pastille { width: 11px; height: 11px; margin-left: -4px; }
  .carte-legende { display: none; left: .6rem; right: .6rem; bottom: .6rem; width: auto; border-radius: 18px; padding: .8rem .7rem .7rem; }
  .carte-legende[data-ouverte="true"] { display: block; }
  .legende-titre { display: flex; align-items: center; }
  .legende-fermer { display: inline-block; margin-left: auto; font-size: .8rem; padding: .25rem .7rem; text-transform: none; letter-spacing: normal; }
  .legende-detail { display: none; }
}

/* ---------- sûreté : signaler, bloquer ---------- */

.surete { margin-top: .9rem; border-top: 1px dashed var(--bord); padding-top: .55rem; }
.surete summary {
  cursor: pointer; font-size: .8rem; color: var(--encre-3); list-style: none;
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem 0;
}
.surete summary::-webkit-details-marker { display: none; }
.surete summary::before { content: "⚑"; font-size: .85rem; }
.surete summary:hover { color: var(--encre); }
.surete[open] summary { color: var(--encre-2); margin-bottom: .6rem; }
.surete-form label { margin-bottom: .7rem; }
.surete-form textarea { font-size: .88rem; }
label.case { display: flex; align-items: center; gap: .5rem; }
label.case input { width: auto; min-height: 0; margin: 0; }
label.case span { margin: 0; font-size: .88rem; color: var(--encre); }

/* ---------- journal ---------- */

.journal { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; }
.journal li {
  display: grid; grid-template-columns: 9.5rem 1fr auto; grid-template-areas: "quand phrase etat" "quand regle regle";
  gap: .1rem .9rem; padding: .6rem 0; border-bottom: 1px solid var(--bord); align-items: baseline;
}
.journal time { grid-area: quand; font-size: .78rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.journal p { grid-area: phrase; margin: 0; font-size: .92rem; }
.journal .etiq { grid-area: etat; }
.journal small { grid-area: regle; font-size: .72rem; color: var(--encre-3); cursor: help; }
.journal .fois { color: var(--encre-3); font-size: .8rem; }
.defilement { overflow-x: auto; }

@media (max-width: 620px) {
  .journal li { grid-template-columns: 1fr auto; grid-template-areas: "quand etat" "phrase phrase" "regle regle"; }
}

/* ---------- résultats : la liste et la carte ensemble ---------- */

.resultats-disposition { display: grid; gap: 1rem; }

.resultats-carte {
  position: sticky; top: 64px; z-index: 5; order: -1;
  height: 36vh; min-height: 230px;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--bord); box-shadow: var(--ombre);
  background: #1d3a4a;
}
.carte-resultats { position: absolute; inset: 0; }

@media (min-width: 1100px) {
  /* Sur ordinateur, la liste à gauche, la carte à droite, qui reste à l'écran. */
  .resultats-disposition {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start;
    width: min(78rem, calc(100vw - 3rem)); position: relative; left: 50%; transform: translateX(-50%);
  }
  .resultats-carte { order: 0; top: 76px; height: calc(100vh - 110px); }
  .resultats-liste .cartes-resultats { grid-template-columns: 1fr; }
}

.resultats-liste h2.section:first-child { margin-top: 0; }
.resultat { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.resultat:hover { border-color: var(--bord-fort); }
.resultat.choisi { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-voile), var(--ombre); }
.fiche-haut { display: flex; align-items: center; gap: .5rem; }
.fiche-haut .numero {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-size: .8rem; font-weight: 600; color: #fff; background: #334155;
}
.personne-resultat .fiche-haut .numero { background: #3b82f6; }
.resultat.choisi .fiche-haut .numero { background: var(--accent); }
.fiche-actions { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin-top: .7rem; }
.fiche-actions .lien { margin-top: 0; }
.voir-carte {
  margin-top: .6rem; background: transparent; color: var(--encre-2); border: 1px solid var(--bord-fort);
  font-size: .8rem; font-weight: 500; padding: .25rem .7rem; border-radius: 999px;
}
.fiche-actions .voir-carte { margin-top: 0; }
.voir-carte:hover { background: var(--surface-2); filter: none; color: var(--encre); }

/* Les repères numérotés de la carte des résultats. MapLibre positionne
   l'élément par transform : l'agrandissement se fait sur la pastille intérieure. */
.repere-resultat { cursor: pointer; }
.repere-resultat span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 600 13px/1 var(--police-texte, "IBM Plex Sans"), system-ui, sans-serif; color: #fff;
  background: #3b82f6; border: 2px solid #fff; box-shadow: 0 1px 5px rgb(0 0 0 / 40%);
  transition: transform .15s ease, background .15s ease;
}
.repere-resultat.genre-lieu span { background: #334155; border-radius: 8px; }
.repere-resultat.choisi span { transform: scale(1.3); background: var(--accent); box-shadow: 0 0 0 4px rgb(14 157 98 / 30%), 0 1px 5px rgb(0 0 0 / 40%); }
.repere-resultat:focus-visible { outline: none; }
.repere-resultat:focus-visible span { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) {
  .repere-resultat::before { content: ""; position: absolute; inset: -10px; }
}

/* ---------- échanges et conversation ---------- */

.conversations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.conversations a {
  display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; text-decoration: none; color: var(--encre);
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.conversations a:hover { border-color: var(--bord-fort); }
.conversations b { font-family: var(--police-titre, "Fraunces"), Georgia, serif; font-size: 1.02rem; font-weight: 600; }
.conversations .apercu { flex: 1; min-width: 0; color: var(--encre-2); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pastille-non-lu {
  min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: #f59e0b; color: #1c1405;
  font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center;
}

.conversation { max-width: 44rem; }
.retour { display: inline-block; margin-bottom: 1rem; font-size: .9rem; text-decoration: none; }
.conv-entete h1 { margin-bottom: .2rem; }
.conv-entete .aide { margin: 0 0 1rem; }
.conv-accord { margin: 0 0 1.4rem; }
.conv-accord .aide { margin-top: .2rem; }

.fil { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.fil li { max-width: 78%; padding: .6rem .85rem .45rem; border-radius: 16px; }
.fil li p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fil li time { display: block; margin-top: .2rem; font-size: .7rem; opacity: .7; }
.fil .de-l-autre { align-self: flex-start; background: var(--surface); border: 1px solid var(--bord); border-bottom-left-radius: 5px; }
.fil .de-moi { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.fil .de-moi time { text-align: right; }
.fil .fil-vide { max-width: none; align-self: stretch; text-align: center; color: var(--encre-3); font-style: italic; background: transparent; }

.envoi { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; position: sticky; bottom: .5rem; }
.envoi textarea { flex: 1 1 16rem; border-radius: 14px; resize: none; }
.envoi .message { flex-basis: 100%; margin: 0; }
.conversation .conseil { margin-top: 1rem; }

@media (max-width: 720px) {
  .envoi { bottom: calc(4.6rem + env(safe-area-inset-bottom)); background: var(--fond); padding-top: .4rem; }
  .fil li { max-width: 88%; }
}

/* ---------- « Je viens d'arriver à Nice » ---------- */

.arrivee {
  margin-top: 1.8rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 16px;
  background: var(--accent-voile); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.arrivee-titre {
  font-family: var(--police-titre, "Fraunces"), Georgia, serif; font-size: 1.3rem; font-weight: 600;
  margin: 0 0 .9rem; letter-spacing: -.01em;
}
.arrivee-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.choix-arrivee {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left;
  background: var(--surface); color: var(--encre); border: 1px solid var(--bord); border-radius: 12px;
  padding: .75rem .9rem; font-weight: 400; box-shadow: var(--ombre);
}
.choix-arrivee:hover { filter: none; border-color: var(--accent); }
.choix-arrivee b { font-size: .98rem; font-weight: 600; }
.choix-arrivee span { font-size: .8rem; color: var(--encre-2); }
.arrivee-quartier { margin-bottom: 0; max-width: 24rem; }
.arrivee-quartier small { display: block; font-size: .75rem; color: var(--encre-3); margin-top: .3rem; line-height: 1.35; }
.resultats { scroll-margin-top: 70px; }

/* Événements de l'agenda : la séance retenue, les conditions, la fiche d'origine. */
.resultat .quand { font-size: .85rem; font-weight: 600; color: var(--encre); margin: .45rem 0 0; }
.resultat .quand .conditions { font-weight: 400; color: var(--accent-fonce); }
.fiche-source { font-size: .8rem; color: var(--encre-2); text-decoration: underline; text-underline-offset: 2px; }
.fiche-source:hover { color: var(--encre); }

/* Proposer un événement, et la relecture par l'équipe. */
.contenu.etroit { max-width: 40rem; }
.message-erreur, .message-succes { padding: .7rem .9rem; border-radius: var(--rayon); margin: 0 0 1.1rem; font-size: .9rem; }
.message-erreur { color: #a3372c; background: #fbeceb; border: 1px solid #efc4bf; }
.message-succes { color: var(--accent-fonce); background: var(--accent-voile); border: 1px solid var(--accent); }
label span small { font-weight: 400; color: var(--encre-3); }
.ligne-horaires { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .7rem; }
.aide-bouton { margin-left: .7rem; font-size: .82rem; color: var(--encre-3); }
.mes-propositions { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.mes-propositions li, .proposition-a-relire {
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .8rem 1rem;
}
.ligne-titre { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; }
.mes-propositions .sous-titre, .proposition-a-relire .sous-titre { font-size: .82rem; color: var(--encre-3); margin: .2rem 0 0; }
.motif { font-size: .85rem; color: var(--encre-2); margin: .5rem 0 0; padding-left: .7rem; border-left: 3px solid var(--bord-fort); }
.note-bas { font-size: .8rem; color: var(--encre-3); margin-top: 1rem; }
.etiq.retire { color: var(--encre-2); background: var(--surface-2); }
.proposition-a-relire { margin-bottom: .9rem; }
.proposition-a-relire h3 { margin: .1rem 0 0; }
.proposition-a-relire .recu { font-size: .75rem; color: var(--encre-3); margin: 0; }
.decision { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--bord); }
.decision .refus { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 16rem; min-width: 0; }
.decision .refus select { flex: 1 1 100%; width: 100%; min-width: 0; text-overflow: ellipsis; }
.decision .refus input { flex: 1 1 10rem; width: auto; min-width: 0; }
.resultat .provenance { font-size: .78rem; color: var(--encre-3); margin: .5rem 0 0; }
.appel-proposer { margin-top: 2rem; font-size: .9rem; color: var(--encre-2); text-align: center; }
@media (max-width: 480px) {
  .ligne-horaires { grid-template-columns: 1fr 1fr; }
  .ligne-horaires label:first-child { grid-column: 1 / -1; }
}

/* ---------- accueil : la carte en fond, le panneau par-dessus ---------- */

.explorer { position: fixed; inset: 0; z-index: 0; }
.explorer-carte { position: absolute; inset: 0; background: #1d3a4a; }

.nappe {
  position: fixed; z-index: 30; display: flex; flex-direction: column;
  background: var(--surface); box-shadow: 0 -6px 30px -12px rgb(15 30 25 / 35%);
}
.nappe-contenu { overflow-y: auto; overscroll-behavior: contain; padding: .2rem 1.1rem 1.4rem; }
.nappe-titre { font-size: 1.45rem; margin: .1rem 0 .25rem; }
.autour { font-size: .85rem; color: var(--encre-2); margin: 0 0 .8rem; }
.nappe .intention { margin-top: .4rem; }
.nappe .appel-proposer { margin-top: 1.4rem; }
.nappe-poignee {
  flex: 0 0 auto; display: grid; place-items: center; width: 100%; height: 1.6rem; padding: 0;
  background: transparent; border: 0; cursor: grab; touch-action: none;
}
.nappe-poignee span { width: 2.6rem; height: .3rem; border-radius: 999px; background: var(--bord-fort); }
.nappe-poignee:hover { filter: none; }
.nappe-poignee:hover span { background: var(--encre-3); }

/* Téléphone : le panneau glisse du bas, au-dessus des onglets, à trois hauteurs. */
@media (max-width: 899px) {
  .nappe {
    left: 0; right: 0; bottom: calc(4.1rem + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0; transition: height .25s ease;
  }
  .nappe.en-glisse { transition: none; }
  /* Replié : rien que la poignée ; la ville occupe tout l'écran. */
  .nappe.hauteur-replie { height: 2.4rem; }
  .nappe.hauteur-replie .nappe-contenu { display: none; }
  .nappe.hauteur-moitie { height: 55dvh; }
  .nappe.hauteur-plein { height: calc(90dvh - 4.1rem); }
}
@media (max-width: 720px) {
  .nappe { bottom: calc(4.1rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 721px) and (max-width: 899px) {
  .nappe { bottom: 0; }
  .nappe.hauteur-plein { height: 82dvh; }
}
/* Ordinateur : un panneau à gauche, la carte occupe le reste. */
@media (min-width: 900px) {
  .nappe {
    top: 76px; left: 1rem; bottom: 1rem; width: min(30rem, 42vw);
    border-radius: 16px; border: 1px solid var(--bord);
  }
  .nappe-poignee { display: none; }
  .nappe-contenu { padding-top: 1.2rem; }
}

/* La liste dans le panneau : une colonne, la carte est derrière. */
.nappe .resultats-liste .cartes-resultats { grid-template-columns: 1fr; }
.compte-resultats { font-size: .85rem; font-weight: 600; color: var(--encre-2); margin: 0 0 .4rem; }

/* Repères d'ambiance : ce qui existe autour, sans numéro. */
.repere-resultat.genre-evenement span { background: #ea580c; }
.repere-resultat.genre-communaute span { background: #0f766e; }
.bulle-ambiance .maplibregl-popup-tip { border-top-color: var(--surface); border-bottom-color: var(--surface); }

/* Les boutons de zoom passent sous le bandeau, pas dessous. */
@media (max-width: 899px) { .explorer .maplibregl-ctrl-top-right { display: none; } }

/* ---------- bulles des repères d'ambiance (maquette et carte) ---------- */

/* Sobre, photographique : une pastille ronde cerclée de blanc, une ombre douce ;
   la relation se lit à une petite pastille de couleur, pas à un halo. La boîte a
   la taille de la pastille pour se centrer sur le point ; le nom déborde à droite. */
.bulle-repere {
  --relation: #3b82f6; --taille: 46px;
  position: relative; width: var(--taille); height: var(--taille); padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
  /* Safari sur iPhone impose une hauteur minimale aux boutons : sans cela, un point
     de 14 px s'étire en ovale de 44 px de haut. */
  -webkit-appearance: none; appearance: none; min-width: 0; min-height: 0; line-height: 0; flex: none;
}
.bulle-visuel {
  display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden;
  border-radius: 50%; border: 2.5px solid #fff; background: #fff; color: #334155;
  box-shadow: 0 2px 6px rgb(0 0 0 / 28%), 0 8px 18px -6px rgb(0 0 0 / 35%);
  transition: transform .15s ease;
}
.bulle-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bulle-visuel svg { width: 20px; height: 20px; }
.bulle-visuel.initiale {
  background: linear-gradient(160deg, #8fa3b5, #5d7285); color: #fff;
  font: 600 1.05rem/1 var(--police-texte, "IBM Plex Sans"), system-ui, sans-serif;
}
.bulle-statut {
  position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--relation); border: 2.5px solid #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}
.bulle-repere:hover .bulle-visuel, .bulle-repere:focus-visible .bulle-visuel, .bulle-repere.choisie .bulle-visuel { transform: scale(1.1); }
.bulle-repere:focus-visible { outline: none; }
.bulle-repere:focus-visible .bulle-visuel { outline: 3px solid var(--accent); outline-offset: 3px; }
.bulle-nom {
  position: absolute; left: calc(100% + 5px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; padding: .16rem .5rem; border-radius: 6px;
  font: 500 .74rem/1.25 var(--police-texte, "IBM Plex Sans"), system-ui, sans-serif;
  /* Toujours sombre sur blanc, en thème clair comme sombre : l'étiquette est posée sur la ville. */
  color: #1c2622; background: rgb(255 255 255 / 92%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%); pointer-events: none;
}
.bulle-nom.cache { visibility: hidden; }
/* Lieux et événements : un point discret, cliquable, sans nom. */
.bulle-repere.genre-lieu, .bulle-repere.genre-evenement, .bulle-repere.genre-communaute { --taille: 14px; }
.bulle-point {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: #475569; border: 2px solid rgb(255 255 255 / 92%);
  box-shadow: 0 1px 4px rgb(0 0 0 / 40%); transition: transform .15s ease;
}
.bulle-repere.genre-evenement .bulle-point { background: #ea580c; }
.bulle-repere.genre-communaute .bulle-point { background: #0f766e; }
.bulle-repere:hover .bulle-point, .bulle-repere.choisie .bulle-point { transform: scale(1.35); }
.bulle-repere:focus-visible .bulle-point { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Une personne prime : sa bulle est plus grande que tout le reste. */
.bulle-repere.genre-personne { --taille: 52px; }
.fiche-repere.genre-lieu .bulle-visuel { color: #334155; }
.fiche-repere.genre-evenement .bulle-visuel { color: #d9480f; }
.fiche-repere.genre-communaute .bulle-visuel { color: #0f766e; }
.bulle-repere.relation-connecte { --relation: #16a34a; }
.bulle-repere.relation-recue { --relation: #f59e0b; }
.bulle-repere.relation-envoyee { --relation: #a855f7; }
@media (pointer: coarse) { .bulle-repere::before { content: ""; position: absolute; inset: -8px; } }
/* Sur la maquette, la bulle est posée par une translation : on la recentre. */
.bulle-repere.sur-maquette { position: absolute; left: 0; top: 0; margin: calc(var(--taille) / -2) 0 0 calc(var(--taille) / -2); will-change: transform; }
.bulle-repere[hidden], .fiche-repere[hidden] { display: none; }

/* La fiche d'un repère, ouverte au toucher. */
.fiche-repere {
  display: grid; grid-template-columns: 52px 1fr auto; gap: .7rem; align-items: center;
  width: max-content; max-width: min(17rem, calc(100vw - 2rem)); padding: .6rem .5rem .6rem .6rem;
  border-radius: 14px; background: #fff; color: #1c2622;
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%), 0 14px 32px -12px rgb(0 0 0 / 40%);
  font: .84rem/1.35 var(--police-texte, "IBM Plex Sans"), system-ui, sans-serif;
}
.fiche-repere .bulle-visuel { width: 52px; height: 52px; box-shadow: none; border: 0; background: #eef1f3; }
.fiche-repere.genre-lieu .bulle-visuel, .fiche-repere.genre-evenement .bulle-visuel, .fiche-repere.genre-communaute .bulle-visuel { border-radius: 12px; }
.fiche-texte { display: grid; gap: .1rem; min-width: 0; }
.fiche-texte b { font-size: .92rem; }
.fiche-genre { font-size: .76rem; font-weight: 600; color: #3b82f6; }
.fiche-repere.relation-connecte .fiche-genre { color: #15803d; }
.fiche-repere.relation-recue .fiche-genre { color: #b45309; }
.fiche-repere.relation-envoyee .fiche-genre { color: #7e22ce; }
.fiche-repere.genre-lieu .fiche-genre { color: #475569; }
.fiche-repere.genre-evenement .fiche-genre { color: #c2410c; }
.fiche-repere.genre-communaute .fiche-genre { color: #0f766e; }
.fiche-detail { color: #52605a; }
.fiche-fermer { align-self: start; padding: 0 .3rem; border: 0; background: none; color: #7c8a82; font-size: 1.2rem; line-height: 1; }
/* Sur la maquette : au-dessus de sa bulle, avec une pointe. */
.fiche-repere.sur-maquette { position: absolute; left: 0; top: 0; z-index: 3; margin: 0; }
.fiche-repere.sur-maquette::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px;
  background: #fff; transform: rotate(45deg); box-shadow: 3px 3px 5px -2px rgb(0 0 0 / 15%);
}
.fiche-repere.sur-maquette { translate: -50% calc(-100% - 36px); }
.fiche-repere.sur-maquette::after { margin-left: calc(-7px + var(--pointe, 0px)); }
.fiche-repere.sur-maquette.dessous { translate: -50% 36px; }
.fiche-repere.sur-maquette.dessous::after { bottom: auto; top: -7px; box-shadow: -3px -3px 5px -2px rgb(0 0 0 / 12%); }
/* Sur la carte : la fiche remplit la bulle de MapLibre. */
.bulle-ambiance .maplibregl-popup-content { padding: 0; background: none; box-shadow: none; }

/* ---------- la maquette 3D, fond de l'accueil ---------- */

.maquette { position: absolute; inset: 0; background: #cfe6ef; overflow: hidden; }
.maquette-toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.maquette-calque { position: absolute; inset: 0; pointer-events: none; }
.maquette-attente, .maquette-credit { position: absolute; margin: 0; pointer-events: none; }
.maquette-attente { inset: 45% 0 auto; text-align: center; color: #3a5560; font-size: .95rem; }
.maquette-credit { right: .5rem; bottom: .35rem; font-size: .68rem; color: #3a5560; opacity: .8; }
.maquette-indisponible {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem;
  text-align: center; color: var(--encre-2); background: var(--fond);
}
.bascule-fond {
  position: fixed; right: .8rem; z-index: 20;
  display: flex; padding: 3px; gap: 2px;
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: 9px; box-shadow: var(--ombre);
}
.bascule-fond button {
  background: transparent; color: var(--encre-2); border: 0;
  padding: .35rem .75rem; font-size: .84rem; border-radius: 6px;
}
.bascule-fond button[aria-pressed="true"] { background: var(--encre); color: var(--surface); }
.bascule-fond button:hover { filter: none; background: var(--surface-2); }
.bascule-fond button[aria-pressed="true"]:hover { background: var(--encre); }
/* Sur la carte, la bascule prend la place des boutons de zoom : ils descendent. */
.explorer .maplibregl-ctrl-top-right { margin-top: 110px; }

/* ---------- quand la carte ne peut pas s'afficher ---------- */

/* Une zone vide et muette laisserait croire à une panne. On dit ce qui manque,
   et ce qui reste utilisable sans elle. */
.carte-indisponible {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6rem;
  padding: 1.5rem;
  background: var(--surface-2);
  border-radius: var(--rayon);
  color: var(--encre-2);
}

.carte-indisponible p { margin: 0; max-width: 34rem; }
.carte-indisponible .aide { font-size: .88rem; color: var(--encre-3); }

/* ---------- pages légales et pied de page ---------- */

.pied {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
  padding: 2rem 1rem 5.5rem; /* la barre d'onglets occupe le bas sur téléphone */
  font-size: .85rem;
}

.pied a { color: var(--encre-3); }
.pied a:hover { color: var(--encre); }

.legal h2 { margin-top: 2.2rem; }
.legal h3 { margin-top: 1.4rem; font-size: 1rem; }
.legal li { margin-bottom: .5rem; }
.legal table { margin: 1rem 0; }
.legal .aide { font-size: .88rem; color: var(--encre-3); }

/* ---------- déposer sa recherche ---------- */

/* Le geste qui lève la contrainte de simultanéité : il se voit, sans crier. */
.depot {
  border: 1px solid var(--bord);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon);
  background: var(--accent-voile);
  padding: 1rem;
  margin: 1.2rem 0;
  display: grid;
  gap: .7rem;
}

.depot p { margin: 0; }
.depot.fait { border-left-color: var(--accent-fonce); }
.depot .boutons { display: flex; flex-wrap: wrap; gap: .6rem; }
.depot .sous { font-size: .88rem; color: var(--encre-2); }

/* Avec qui : des cases à cocher qui se lisent comme des étiquettes. Ni menu
   déroulant — on veut tout voir d'un coup d'œil —, ni saisie libre : le
   vocabulaire est fermé, et c'est ce qui l'empêche de redevenir un profil. */
.affinites { border: 0; padding: 0; margin: 0; min-width: 0; }
.affinites legend { padding: 0; font-size: .92rem; color: var(--encre-2); margin-bottom: .45rem; }
.affinites .choix { display: flex; flex-wrap: wrap; gap: .4rem; }
.affinites .choix label {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  padding: .32rem .7rem; font-size: .86rem;
  border: 1px solid var(--bord); border-radius: 999px; background: var(--surface);
  cursor: pointer;
}
.affinites .choix label:has(input:checked) {
  border-color: var(--accent); background: var(--accent-voile); color: var(--encre);
}
.affinites .choix label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Les règles globales des champs (largeur 100 %, marges intérieures, 44 px
   de haut au doigt) sont faites pour du texte : appliquées à une case à
   cocher, elles la rendaient géante et poussaient le libellé hors de la
   pastille. Même correction que label.case. */
.affinites .choix input {
  width: 1.05rem; height: 1.05rem; min-height: 0; flex: none;
  margin: 0; padding: 0; border: 0; accent-color: var(--accent);
}
.affinites .choix span {
  display: inline; margin: 0; font-size: .86rem; line-height: 1.25; color: var(--encre);
}
.affinites .aide { margin: .5rem 0 0; font-size: .82rem; color: var(--encre-2); }

.mes-recherches .personne,
.ils-cherchent .personne { border-left: 3px solid var(--accent); }

.ils-cherchent .activite { font-weight: 600; }

/* ---------- inviter ---------- */

.invitation { display: grid; gap: .2rem; margin: 1.2rem 0; }
.invitation button { justify-self: start; }
/* Le message à envoyer, tel qu'il partira : lisible, et facile à sélectionner
   à la main si le partage et le presse-papiers sont refusés. */
.message-invitation {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  font: inherit; font-size: .88rem; color: var(--encre);
  background: var(--surface); border: 1px solid var(--bord); border-radius: 8px;
  padding: .7rem .8rem; user-select: all;
}
.invitations { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.invitations li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem;
  padding: .6rem .8rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--surface);
}
.invitations .qui { font-weight: 600; word-break: break-all; }
.invitations .etat { font-size: .8rem; color: var(--encre-3); }
.invitations .etat.venu { color: var(--accent-fonce); }
.invitations .note { font-size: .8rem; color: var(--encre-2); flex-basis: 100%; }
.invitations form { margin: 0 0 0 auto; }
.invitations button { padding: .25rem .6rem; font-size: .8rem; min-height: 0; }

/* La maquette 3D n'a pas pu s'afficher : une phrase sous la bascule, qui dit
   pourquoi l'accueil montre la carte. Discrète, fermable, jamais alarmante. */
.note-fond {
  position: fixed; right: .8rem; left: auto; z-index: 20; max-width: min(22rem, calc(100vw - 1.6rem));
  margin: 0; padding: .55rem 2rem .55rem .75rem;
  background: var(--surface); border: 1px solid var(--bord); border-radius: 9px; box-shadow: var(--ombre);
  font-size: .82rem; line-height: 1.4; color: var(--encre);
}
.note-fond small { display: block; margin-top: .2rem; color: var(--encre-3); font-size: .74rem; }
.note-fond button {
  position: absolute; top: .25rem; right: .25rem; min-height: 0;
  width: 1.6rem; height: 1.6rem; padding: 0; border: 0; line-height: 1; font-size: 1.1rem;
}

/* ---------- événements ---------- */

.agenda-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 0 0 1.4rem; }
.evenements { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.evenement {
  padding: .8rem .95rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface);
}
.evenement h3 { margin: 0 0 .2rem; font-size: .98rem; font-weight: 600; line-height: 1.35; }
.evenement h3 a { color: var(--encre); text-decoration: none; }
.evenement h3 a:hover { text-decoration: underline; }
.evenement p { margin: .1rem 0 0; font-size: .86rem; }
.evenement .quand { color: var(--accent-fonce); font-weight: 500; }
.evenement .autres { color: var(--encre-3); font-weight: 400; }
.evenement .ou, .evenement .conditions { color: var(--encre-2); }
.evenement .extrait { color: var(--encre-2); margin-top: .35rem; }
.evenement .provenance { color: var(--encre-3); font-size: .76rem; margin-top: .35rem; }

/* ---------- profil ---------- */

.profil-tete h1 { margin-bottom: .1rem; }
.profil-tete .sous { margin-bottom: 1.4rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.profil section { margin-bottom: .4rem; }
.profil .aide { margin: 0 0 .7rem; }
.profil-liste { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .35rem; font-size: .9rem; }
.profil-liste li { padding: .5rem .75rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--surface); }
.profil-pied { margin-top: 2.4rem; font-size: .84rem; color: var(--encre-3); }
/* Dans le tableau de bord, un vide est une ligne, pas une page. */
.profil .vide { padding: .2rem 0 .4rem; margin: 0; text-align: left; font-size: .9rem; }

/* ---------- mesures ---------- */

.mesures .tuile-detail { display: block; margin-top: .25rem; font-size: .74rem; line-height: 1.35; color: var(--encre-3); }
.mesures .periode { margin-left: .5rem; font-size: .84rem; }
.mesures .periode[aria-current="page"] { font-weight: 700; text-decoration: none; color: var(--encre); }
.mesures ul.aide { padding-left: 1.1rem; }

/* Qui peut voir : des boutons radio, que les règles globales des champs
   (largeur 100 %, 44 px de haut au doigt) rendraient géants — comme les cases
   d'affinités avant correction. */
.visibilite { border: 0; padding: 0; margin: .6rem 0 0; min-width: 0; }
.visibilite legend { padding: 0; font-size: .92rem; color: var(--encre-2); margin-bottom: .4rem; }
.visibilite label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-size: .9rem; cursor: pointer; }
.visibilite input { width: 1.05rem; height: 1.05rem; min-height: 0; flex: none; margin: 0; padding: 0; border: 0; accent-color: var(--accent); }
.visibilite span { display: inline; margin: 0; font-size: .9rem; color: var(--encre); }
.visibilite .aide { margin: .2rem 0 0; font-size: .8rem; color: var(--encre-3); }

/* « Qui est disponible ? » : des pastilles pour le moment, des boutons pour
   l'activité. Mêmes précautions que les cases d'affinités : les règles
   globales des champs ne doivent pas s'appliquer aux boutons radio. */
.disponibles { margin: 1.2rem 0 0; padding: 1rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); }
.disponibles .quand { border: 0; padding: 0; margin: .5rem 0 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.disponibles .quand label {
  display: inline-flex; align-items: center; margin: 0; cursor: pointer;
  padding: .32rem .8rem; border: 1px solid var(--bord); border-radius: 999px; font-size: .88rem;
}
.disponibles .quand label:has(input:checked) { border-color: var(--accent); background: var(--accent-voile); font-weight: 600; }
.disponibles .quand label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Le bouton radio lui-même disparaît : la pastille entière est la cible. */
.disponibles .quand input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; }
.disponibles .quand span { display: inline; margin: 0; font-size: .88rem; color: var(--encre); }
.disponibles .pour-quoi { margin: .8rem 0 .4rem; font-size: .88rem; color: var(--encre-2); }
.disponibles .quoi { display: flex; flex-wrap: wrap; gap: .4rem; }
.disponibles .quoi button { padding: .38rem .85rem; font-size: .88rem; border-radius: 999px; }