/* ============================================================
   ollo — vitrine publique
   Feuille autonome : elle ne charge pas ollo.css, seulement le
   thème commun (theme.css), parce que l'espace
   gestionnaire est un outil de travail dense, la vitrine est une
   interface de recherche, vue une fois, souvent depuis un
   téléphone, par quelqu'un qui n'a pas de compte et n'en veut pas.

   Deux gabarits cohabitent ici :

     .v-app         la recherche — pleine hauteur, deux colonnes,
                    rien qui déborde, la page ne défile pas
     (par défaut)   le formulaire de demande — page classique qui
                    défile, centrée, lisible

   Les composants communs (en-tête, champs, boutons, messages)
   servent aux deux.
   ============================================================ */
@import url('theme.css');


:root {
  /* Couleurs : theme.css. Les jetons --v-* y sont définis comme alias
     des jetons canoniques. */
  --v-ui: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --v-ombre: 0 1px 2px rgba(26,31,54,.05), 0 8px 24px rgba(26,31,54,.07);
  --v-ombre-flottant: 0 4px 16px rgba(26,31,54,.14);
  --v-barre-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--v-ui);
  color: var(--v-encre);
  background: var(--v-page);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--v-bleu); }

/* ============================================================
   1. Gabarit de recherche (.v-app)
   ============================================================ */

/* La page ne défile pas : c'est la colonne de gauche qui défile,
   et la carte reste entière en face. 100dvh plutôt que 100vh —
   sur iOS, vh compte la barre d'adresse qui n'est pas là. */
body.v-app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--v-craie);
}

/* --- Barre de recherche -------------------------------------- */
.v-barre {
  flex: none;
  height: var(--v-barre-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  background: var(--v-craie);
  border-bottom: 1px solid var(--v-ligne);
  /* Au-dessus des tuiles Leaflet (400) et de ses commandes (1000) :
     la liste de suggestions descend par-dessus la carte. */
  z-index: 1200;
}

.v-marque { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.v-marque img { height: 22px; display: block; }
.v-marque span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--v-encre-3);
  padding-top: 2px;
}

/* Le nom du bailleur, sur sa carte dédiée. Même graisse que « stationnement »
   dont il n'est que la suite : c'est un cadre, pas une enseigne. La casse
   d'origine est gardée — « Reims Habitat » en capitales espacées se lirait
   comme une marque. */
.v-marque-parc {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  color: var(--v-encre-2);
}

.v-recherche {
  flex: 1 1 auto;
  max-width: 560px;
  display: flex;
  gap: 8px;
  position: relative;
  /* Un élément flex ne rétrécit pas sous la largeur intrinsèque de son
     contenu tant que min-width vaut auto — et un <input> revendique une
     vingtaine de caractères. Sans ces min-width:0, le champ refusait de se
     réduire et poussait le bouton « Rechercher » hors de l'écran sur
     téléphone. */
  min-width: 0;
}

.v-recherche-champ { position: relative; flex: 1 1 auto; min-width: 0; }

.v-recherche-champ svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--v-encre-3);
  pointer-events: none;
}

.v-recherche-champ input {
  width: 100%;
  height: 42px;
  /* 16 px : en dessous, Safari iOS zoome sur le champ au focus. */
  font: inherit;
  font-size: 16px;
  padding: 0 36px 0 38px;
  border: 1px solid var(--v-ligne-forte);
  border-radius: 10px;
  background: var(--v-craie);
  color: var(--v-encre);
}
.v-recherche-champ input:focus {
  outline: none;
  border-color: var(--v-bleu);
  box-shadow: 0 0 0 3px rgba(31, 94, 255, .12);
}

/* Croix d'effacement : rendue par le script quand le champ est rempli. */
.v-effacer {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--v-encre-3);
  cursor: pointer;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
}
.v-effacer:hover { background: var(--v-page); color: var(--v-encre); }
.v-recherche.est-remplie .v-effacer { display: flex; }

/* --- Suggestions d'adresse ----------------------------------- */
.v-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--v-craie);
  border: 1px solid var(--v-ligne);
  border-radius: 10px;
  box-shadow: var(--v-ombre-flottant);
  overflow: hidden;
  z-index: 1300;
  display: none;
}
.v-suggestions.ouverte { display: block; }

.v-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 10px 14px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--v-encre);
  border-bottom: 1px solid var(--v-ligne);
}
.v-suggestion:last-child { border-bottom: none; }
.v-suggestion:hover, .v-suggestion.survol { background: var(--v-bleu-pale); }
.v-suggestion b { font-weight: 500; display: block; font-size: 14px; }
.v-suggestion span { font-size: 12px; color: var(--v-encre-2); }
.v-suggestion-vide { padding: 12px 14px; font-size: 13px; color: var(--v-encre-2); }

.v-barre-fin { margin-left: auto; font-size: 13px; flex: none; }
.v-barre-fin a { color: var(--v-encre-2); text-decoration: none; white-space: nowrap; }
.v-barre-fin a:hover { color: var(--v-bleu); }

/* --- Onglets mobile ------------------------------------------ */
.v-onglets { display: none; }

/* --- Les deux colonnes --------------------------------------- */
.v-split {
  flex: 1 1 auto;
  display: flex;
  /* Sans min-height:0, une colonne au contenu long pousse le
     conteneur flex au-delà de l'écran et le défilement interne
     ne s'active jamais. */
  min-height: 0;
}

.v-colonne-liste {
  flex: 0 0 40%;
  max-width: 40%;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--v-ligne);
  background: var(--v-page);
  scroll-behavior: smooth;
}

.v-colonne-carte {
  flex: 1 1 60%;
  position: relative;
  min-width: 0;
}

#carte {
  position: absolute;
  inset: 0;
  /* Le doigt déplace la carte sans que la page glisse dessous. */
  touch-action: none;
}

/* --- Liste --------------------------------------------------- */
.v-liste-tete {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--v-page);
  padding: 14px 18px 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--v-encre-3);
  border-bottom: 1px solid var(--v-ligne);
}

.v-liste { padding: 12px 14px 28px; display: flex; flex-direction: column; gap: 10px; }

.v-parking {
  background: var(--v-craie);
  border: 1px solid var(--v-ligne);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  display: block;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.v-parking:hover, .v-parking:focus-visible {
  border-color: var(--v-bleu);
  box-shadow: var(--v-ombre);
  outline: none;
}

/* Parking désigné depuis la carte : il faut le retrouver d'un
   coup d'œil après que la liste a défilé jusqu'à lui. */
.v-parking.actif {
  border-color: var(--v-bleu);
  background: var(--v-bleu-pale);
  box-shadow: var(--v-ombre);
}

.v-parking-nom { font-weight: 600; font-size: 15px; letter-spacing: -0.2px; }
.v-parking-adresse { color: var(--v-encre-2); font-size: 13px; margin-top: 2px; }

.v-distance {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--v-bleu);
  background: var(--v-bleu-pale);
  border-radius: 999px;
  padding: 2px 9px;
  margin-top: 8px;
}

/* Caractéristiques du parc — hauteur, emplacement, sécurité, accès.
   La hauteur porte .v-atout-fort : c'est le critère qu'on cherche en
   premier, et sur une liste de trente fiches il doit se trouver sans se
   chercher. Les autres restent des mentions discrètes. */
.v-atouts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

.v-atout {
  font-size: 12px;
  color: var(--v-encre-2);
  background: var(--v-page);
  border: 1px solid var(--v-ligne);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}

.v-atout-fort {
  font-size: 13px;
  font-weight: 600;
  color: var(--v-encre);
  background: var(--v-bleu-pale);
  border-color: var(--bleu-bord);
  padding: 2px 9px;
}

/* La flèche verticale qui précède la hauteur : elle dit « c'est une
   hauteur » sans le mot, et fait tenir l'information en trois caractères. */
.v-atout-fort::before {
  content: '↕';
  margin-right: 5px;
  color: var(--v-bleu);
  font-weight: 500;
}

.v-types { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.v-type {
  font-size: 12px;
  color: var(--v-encre-2);
  background: var(--v-page);
  border: 1px solid var(--v-ligne);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
.v-type b { color: var(--v-encre); font-weight: 600; }

.v-parking-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--v-ligne);
}

.v-prix { font-size: 13px; color: var(--v-encre-2); }
.v-prix b { color: var(--v-encre); font-weight: 600; font-size: 16px; }
.v-prix-absent { font-size: 13px; color: var(--v-encre-3); }

.v-dispo {
  font-size: 13px;
  font-weight: 600;
  color: var(--v-vert);
  background: var(--v-vert-pale);
  border-radius: 999px;
  padding: 3px 10px;
}
.v-dispo-vide { color: var(--v-encre-2); background: var(--gris-tableau-2); }

.v-liste-pied {
  padding: 18px;
  text-align: center;
  font-size: 12px;
  color: var(--v-encre-3);
}
.v-liste-pied a { color: var(--v-encre-2); text-decoration: none; }
.v-liste-pied a:hover { text-decoration: underline; }

/* --- Pastilles de prix sur la carte -------------------------- */
/* iconSize:null côté Leaflet : le conteneur n'est ni dimensionné
   ni décalé, c'est la pastille qui se centre elle-même sur le
   point. Une pastille « 1 250 € » et une pastille « 85 € » n'ont
   pas la même largeur — les mesurer d'avance serait faux. */
.v-marqueur { background: none; border: none; }

.v-pastille {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: var(--v-craie);
  color: var(--v-encre);
  border: 1px solid var(--v-ligne-forte);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(26, 31, 54, .22);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.v-pastille::after {
  /* La pointe qui rattache la pastille à son point exact. */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 7px;
  height: 7px;
  background: inherit;
  border-right: 1px solid var(--v-ligne-forte);
  border-bottom: 1px solid var(--v-ligne-forte);
  transform: translateX(-50%) rotate(45deg);
}

.v-marqueur:hover .v-pastille,
.v-marqueur.est-active .v-pastille {
  background: var(--v-bleu);
  color: var(--craie);
  border-color: var(--v-bleu-fonce);
}
.v-marqueur:hover .v-pastille::after,
.v-marqueur.est-active .v-pastille::after { border-color: var(--v-bleu-fonce); }

.v-pastille-complet { color: var(--v-encre-2); }

/* Point de l'adresse cherchée : un repère, pas une offre. */
.v-cible {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--v-bleu);
  border: 3px solid var(--craie);
  box-shadow: 0 0 0 2px rgba(31, 94, 255, .35), 0 2px 6px rgba(26, 31, 54, .3);
  transform: translate(-50%, -50%);
  position: absolute;
}

/* --- Messages ------------------------------------------------ */
.v-message {
  padding: 12px 18px;
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-bottom: 1px solid transparent;
}
.v-message-ok {
  background: var(--v-vert-pale);
  color: var(--v-vert);
  border-bottom-color: rgba(14, 98, 69, .18);
}
.v-message-erreur {
  background: var(--rouge-pale);
  color: var(--rouge);
  border-bottom-color: rgba(176, 35, 24, .18);
}
.v-message strong { font-weight: 600; }
.v-message-fermer {
  margin-left: auto;
  border: none;
  background: none;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  flex: none;
}
.v-message-fermer:hover { opacity: 1; }

body.v-app .v-message { flex: none; }

/* --- Page vide ------------------------------------------------ */
.v-vide {
  background: var(--v-craie);
  border: 1px dashed var(--v-ligne);
  border-radius: 14px;
  padding: 40px 24px;
  text-align: center;
  color: var(--v-encre-2);
  margin: 14px;
}
.v-vide b { display: block; color: var(--v-encre); font-size: 16px; margin-bottom: 6px; }

/* ============================================================
   2. Composants communs
   ============================================================ */

.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 44 px : la cible tactile minimale, sur un écran tenu d'une main */
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--v-bleu);
  color: var(--craie);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.v-btn:hover { background: var(--v-bleu-fonce); }
.v-btn-large { width: 100%; margin-top: 12px; }
.v-btn-sm { min-height: 36px; padding: 7px 14px; font-size: 13px; border-radius: 8px; }
.v-btn-fantome {
  background: transparent;
  color: var(--v-encre);
  border-color: var(--v-ligne);
}
.v-btn-fantome:hover { background: var(--v-page); border-color: var(--v-encre-3); }
.v-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ============================================================
   3. Gabarit du formulaire de demande
   ============================================================ */

.v-entete {
  background: var(--v-craie);
  border-bottom: 1px solid var(--v-ligne);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 500;
}
.v-entete-fin { margin-left: auto; font-size: 13px; color: var(--v-encre-2); }

.v-titre-zone {
  padding: 26px 20px 18px;
  max-width: 1180px;
  margin: 0 auto;
}
.v-titre { font-size: 26px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.2; }
.v-sous-titre { color: var(--v-encre-2); font-size: 15px; margin-top: 6px; max-width: 62ch; }

.v-form-page { max-width: 620px; margin: 0 auto; padding: 0 20px 48px; }

.v-fil { font-size: 13px; color: var(--v-encre-2); margin-bottom: 14px; }
.v-fil a { text-decoration: none; }
.v-fil a:hover { text-decoration: underline; }

.v-panneau {
  background: var(--v-craie);
  border: 1px solid var(--v-ligne);
  border-radius: 14px;
  box-shadow: var(--v-ombre);
  padding: 24px;
}
.v-panneau-tete { margin-bottom: 20px; }
.v-panneau-tete h1 { font-size: 21px; font-weight: 600; letter-spacing: -0.4px; }
.v-panneau-tete p { color: var(--v-encre-2); font-size: 14px; margin-top: 4px; }

.v-rappel {
  background: var(--v-bleu-pale);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--v-encre-2);
}
.v-rappel b { color: var(--v-encre); font-weight: 600; }
.v-rappel-ligne { display: flex; justify-content: space-between; gap: 12px; }
.v-rappel-ligne + .v-rappel-ligne { margin-top: 4px; }

.v-champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v-champ { display: block; margin-bottom: 14px; }
.v-champ-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.v-champ-aide { display: block; font-size: 12px; color: var(--v-encre-3); margin-top: 5px; }

.v-saisie {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 11px 13px;
  min-height: 46px;
  border: 1px solid var(--v-ligne);
  border-radius: 9px;
  background: var(--v-craie);
  color: var(--v-encre);
}
.v-saisie:focus {
  outline: none;
  border-color: var(--v-bleu);
  box-shadow: 0 0 0 3px rgba(31, 94, 255, .12);
}
textarea.v-saisie { min-height: 110px; resize: vertical; }

/* Le piège à robots. Invisible et hors du flux de tabulation ;
   aria-hidden pour qu'un lecteur d'écran ne l'annonce jamais. */
.v-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.v-mentions { font-size: 12px; color: var(--v-encre-3); margin-top: 14px; line-height: 1.5; }

.v-pied {
  border-top: 1px solid var(--v-ligne);
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--v-encre-3);
}
.v-pied a { color: var(--v-encre-2); text-decoration: none; }
.v-pied a:hover { text-decoration: underline; }

/* Sur la page de formulaire, les messages gardent leur mise en page
   de bloc centré. */
body:not(.v-app) .v-message {
  max-width: 620px;
  margin: 0 auto 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 18px;
}
body:not(.v-app) .v-message-ok { border-color: rgba(14, 98, 69, .18); }
body:not(.v-app) .v-message-erreur { border-color: rgba(176, 35, 24, .18); }
body:not(.v-app) .v-vide { max-width: 1180px; margin: 0 auto; padding: 56px 24px; }

/* ============================================================
   4. Mobile
   ============================================================ */

@media (max-width: 900px) {
  /* La barre garde le champ ; le logo et le lien gestionnaire
     cèdent la place — sur 375 px, ils prendraient la moitié du
     champ de recherche. */
  .v-barre { gap: 10px; padding: 0 12px; }
  .v-marque span, .v-barre-fin { display: none; }
  .v-recherche { max-width: none; }

  /* Onglets : chaque vue prend toute la hauteur. Une demi-carte et
     une demi-liste ne servent bien ni l'une ni l'autre. */
  .v-onglets {
    display: flex;
    flex: none;
    background: var(--v-craie);
    border-bottom: 1px solid var(--v-ligne);
    padding: 6px 12px;
    gap: 6px;
    z-index: 1100;
  }
  .v-onglet {
    flex: 1;
    min-height: 38px;
    border: 1px solid var(--v-ligne);
    border-radius: 9px;
    background: var(--v-craie);
    color: var(--v-encre-2);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
  }
  .v-onglet.actif {
    background: var(--v-bleu-pale);
    border-color: var(--v-bleu);
    color: var(--v-bleu);
    font-weight: 600;
  }

  .v-split { display: block; position: relative; }
  .v-colonne-liste, .v-colonne-carte {
    flex: none;
    max-width: none;
    width: 100%;
    height: 100%;
    border-right: none;
  }
  /* Une seule colonne montée à la fois : la carte cachée garderait
     une taille nulle et Leaflet dessinerait de travers au retour —
     le script appelle invalidateSize à chaque bascule. */
  body.v-vue-carte .v-colonne-liste { display: none; }
  body.v-vue-liste .v-colonne-carte { display: none; }

  .v-liste { padding: 10px 12px 24px; }
}

@media (max-width: 480px) {
  .v-parking-pied { flex-wrap: wrap; }
  .v-parking-pied .v-btn { width: 100%; }
  .v-champs-2 { grid-template-columns: 1fr; gap: 0; }
}

/* L'attribut hidden ne pose que display:none, à la spécificité la plus
   faible : la règle .v-distance ci-dessus le battait, et le badge vide
   s'affichait en pastille bleue de quelques pixels avant toute recherche. */
.v-distance[hidden] { display: none; }

@media (max-width: 420px) {
  /* Sous 420 px, « Rechercher » écrit en toutes lettres ne laisse plus
     assez de champ pour lire ce qu'on tape. La loupe du champ dit déjà
     de quoi il s'agit ; le bouton se réduit à sa flèche. */
  #v-chercher { padding-left: 12px; padding-right: 12px; font-size: 0; }
  #v-chercher::after { content: '→'; font-size: 17px; line-height: 1; }
}

/* ── Bulle d'un parking sur la carte ──────────────────────────
   Leaflet habille ses popups d'un cadre blanc à coins arrondis et d'une
   ombre qui lui sont propres. On les remplace par ceux de la vitrine :
   la bulle est une fiche de la liste posée sur la carte, elle doit s'en
   distinguer le moins possible. */
.v-bulle-cadre .leaflet-popup-content-wrapper {
  background: var(--v-craie);
  border: 1px solid var(--v-ligne);
  border-radius: 10px;
  box-shadow: var(--v-ombre-flottant);
  padding: 0;
}

.v-bulle-cadre .leaflet-popup-content {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--v-ui);
  color: var(--v-encre);
  line-height: 1.45;
}

.v-bulle-cadre .leaflet-popup-tip {
  background: var(--v-craie);
  border: 1px solid var(--v-ligne);
  box-shadow: none;
}

.v-bulle-cadre .leaflet-popup-close-button {
  color: var(--v-encre-3);
  padding: 6px 7px 0 0;
}
.v-bulle-cadre .leaflet-popup-close-button:hover { color: var(--v-encre); }

.v-bulle-nom { font-weight: 600; font-size: 15px; padding-right: 14px; }
.v-bulle-adresse { color: var(--v-encre-2); font-size: 13px; margin-top: 2px; }

/* La description publique du parc. Bornée en hauteur : un bailleur bavard
   ne doit pas pousser le bouton « Demander » hors de la bulle. */
.v-bulle-mot {
  font-size: 13px;
  color: var(--v-encre-2);
  margin-top: 10px;
  max-height: 5.8em;
  overflow: hidden;
}

.v-bulle-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--v-ligne);
}
.v-bulle-pied .v-btn { margin-left: auto; }