/* ═══════════════════════════════════════════════════════════════════════
   RECHERCHE — la pilule et le panneau
   ═══════════════════════════════════════════════════════════════════════

   Le panneau ne montre jamais les trois champs à la fois : il se DÉPLIE.
   Une étape ouverte, les autres repliées en une ligne qui affiche déjà sa
   valeur. Le calendrier a donc toute la place quand c'est son tour, et
   aucune le reste du temps.

   Trois raisons :
     · un calendrier tassé sous un champ texte est illisible sur téléphone ;
     · le panneau reste petit à l'ouverture, donc la pilule peut encore s'y
       transformer sans que le mouvement devienne absurde ;
     · chaque étape repliée montre ce qu'on a déjà choisi — on voit sa
       progression, et une progression entamée se termine.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Le curseur du champ auto-rempli ─────────────────────────────────
   C'est lui qui transforme une barre en champ qui attend d'être complété. */
.lvs-caret{display:inline-block;width:1.5px;height:1em;background:#C68F45;
  vertical-align:-.13em;margin-left:2px;animation:lvs-blink 1.05s step-end infinite}
@keyframes lvs-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.lvs-ghost{color:#9A8875;font-weight:600}

/* ── Le panneau ──────────────────────────────────────────────────── */
#lvs-scrim{position:fixed;inset:0;background:rgba(28,22,20,.34);opacity:0;
  pointer-events:none;transition:opacity .4s ease;z-index:190;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#lvs-scrim.on{opacity:1;pointer-events:auto}

#lvs-panel{position:fixed;z-index:200;background:#fff;border-radius:26px;
  box-shadow:0 24px 70px rgba(31,25,20,.28);will-change:transform;
  overflow:hidden;display:none;flex-direction:column;
  font-family:Inter,-apple-system,system-ui,sans-serif;color:#1C1614}
#lvs-panel.show{display:flex}
#lvs-body{opacity:0;transition:opacity .22s ease .16s;overflow-y:auto;flex:1;
  -webkit-overflow-scrolling:touch}
#lvs-panel.open #lvs-body{opacity:1}

/* L'en-tête reste, le corps se déplie. grid-template-rows 0fr → 1fr anime
   une hauteur inconnue sans mesure JS et sans casser le défilement interne. */
.lvs-step{border-bottom:1px solid #F1EBE5}
.lvs-step:last-of-type{border-bottom:0}
.lvs-head{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:15px 18px;background:none;border:0;font-family:inherit;
  cursor:pointer;text-align:left}
.lvs-head>span:first-child{min-width:0}
.lvs-head .t{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#A79383}
.lvs-head .v{display:block;font-size:14.5px;font-weight:700;color:#1C1614;
  margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvs-head .v.vide{color:#C3B3A2;font-weight:600}
.lvs-head .chev{color:#C3B3A2;flex:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.lvs-step.on .lvs-head .chev{transform:rotate(180deg)}
.lvs-step.on .lvs-head .t{color:#C68F45}
.lvs-cont{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.2,.85,.25,1)}
.lvs-step.on .lvs-cont{grid-template-rows:1fr}
.lvs-cont>div{overflow:hidden;min-height:0}
.lvs-inner{padding:0 18px 18px}

/* L'input garde l'id attendu par les scripts historiques ; le style, lui,
   est le nôtre — sans bordure, la ligne fait partie du panneau. */
#lvs-panel #mobile-destination{width:100%;border:0;outline:none;font-size:19px;
  font-weight:700;font-family:inherit;color:#1C1614;padding:0 0 4px;background:none;
  border-radius:0;box-shadow:none;-webkit-appearance:none;appearance:none}
#lvs-panel #mobile-destination::placeholder{color:#C9BBAC}

.lvs-sugg{list-style:none;margin:10px 0 0;padding:0}
.lvs-sugg li{display:flex;align-items:center;gap:12px;padding:9px 0;cursor:pointer}
.lvs-step.on .lvs-sugg li{opacity:0;transform:translateY(7px);
  animation:lvs-rise .34s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes lvs-rise{to{opacity:1;transform:none}}
.lvs-sugg .pin{width:34px;height:34px;border-radius:11px;flex:none;display:flex;
  align-items:center;justify-content:center;background:#FBF3EA;color:#C68F45}
.lvs-sugg .n{flex:1;min-width:0}
.lvs-sugg .n b{display:block;font-size:14.5px;font-weight:700}
.lvs-sugg .n span{display:block;font-size:12px;color:#9A8875;margin-top:1px}
.lvs-sugg .p{font-size:13px;font-weight:700;white-space:nowrap}

/* ── Nuit ou journée ─────────────────────────────────────────────────
   Le curseur glisse au lieu de sauter : c'est ce glissement qui fait
   comprendre qu'on bascule entre deux modes du MÊME calendrier. */
.lvs-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;
  background:#F5F0EA;border-radius:99px;padding:3px;margin:0 0 14px}
.lvs-seg .glis{position:absolute;top:3px;left:3px;width:calc(50% - 3px);
  height:calc(100% - 6px);background:#fff;border-radius:99px;
  box-shadow:0 2px 8px rgba(31,25,20,.10);
  transition:transform .34s cubic-bezier(.2,.85,.25,1)}
.lvs-seg.jour .glis{transform:translateX(100%)}
.lvs-seg button{position:relative;z-index:1;border:0;background:none;
  font-family:inherit;font-size:13.5px;font-weight:700;padding:9px 0;
  cursor:pointer;color:#9A8875;transition:color .22s ease}
.lvs-seg button[aria-selected="true"]{color:#1C1614}
.lvs-dispo{display:flex;align-items:flex-start;gap:7px;font-size:12px;
  color:#9A8875;margin:10px 0 0;padding:9px 11px;background:#FBF6F0;
  border-radius:11px;line-height:1.45}
.lvs-dispo b{color:#1C1614;font-weight:700}

/* ── Le calendrier ───────────────────────────────────────────────── */
.lvs-cal{max-height:330px;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
.lvs-mois{padding:0 4px 14px}
.lvs-mois h4{font-size:14px;font-weight:800;margin:6px 0 8px;text-transform:capitalize}
.lvs-dows,.lvs-days{display:grid;grid-template-columns:repeat(7,1fr)}
.lvs-dows span{text-align:center;font-size:10.5px;font-weight:700;color:#B9A896;
  padding-bottom:5px}
.lvs-days button{position:relative;aspect-ratio:1;border:0;background:none;
  font-family:inherit;font-size:13.5px;font-weight:600;color:#1C1614;
  cursor:pointer;border-radius:50%;display:flex;align-items:center;
  justify-content:center;transition:background .16s,color .16s}
.lvs-days button:disabled{color:#D8CCBE;cursor:default}
/* Une love room se réserve surtout le week-end : autant que l'œil les trouve. */
.lvs-days button.we:not(:disabled):not(.sel):not(.in){color:#C68F45}
.lvs-days button.in{background:#FAF1E7;border-radius:0}
.lvs-days button.sel{background:#1C1614;color:#fff;z-index:1}
.lvs-days button.sel.a{border-radius:50% 0 0 50%}
.lvs-days button.sel.b{border-radius:0 50% 50% 0}
.lvs-days button.sel.a.b{border-radius:50%}
.lvs-days .vide{visibility:hidden}
.lvs-note{font-size:12px;color:#9A8875;margin:2px 0 0;text-align:center}

.lvs-rows{display:flex;align-items:center;justify-content:space-between}
.lvs-stepper{display:flex;align-items:center;gap:14px}
.lvs-stepper button{width:34px;height:34px;border-radius:50%;border:1px solid #E2D8CE;
  background:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#1C1614;transition:transform .16s ease,border-color .16s ease}
.lvs-stepper button:active{transform:scale(.9);border-color:#C68F45}
#lvs-gcount{min-width:22px;text-align:center;font-size:16px;font-weight:800;
  font-variant-numeric:tabular-nums}

.lvs-foot{display:flex;gap:10px;padding:13px 18px;border-top:1px solid #F1EBE5;
  background:#fff;flex:none}
.lvs-foot button{border-radius:99px;padding:13px;font-size:14.5px;font-weight:800;
  font-family:inherit;cursor:pointer;border:1px solid #E2D8CE;background:#fff;
  color:#1C1614;flex:1}
.lvs-foot .go{border:0;color:#fff;background:#1C1614;flex:1.7}

/* ── Grand écran ─────────────────────────────────────────────────────
   Le même panneau, pas un second écran : seule la mise en page change.
   Le calendrier passe en deux colonnes — c'est le vrai gain du desktop,
   voir deux mois d'un coup au lieu de faire défiler. */
.lvs-dows-m{display:none}
@media (min-width:760px){
  .lvs-inner{padding:0 22px 22px}
  .lvs-head{padding:17px 22px}
  .lvs-dows{display:none}      /* le bandeau unique laisse la place... */
  .lvs-dows-m{display:grid}    /* ...à un bandeau par mois */
  .lvs-cal{max-height:none;overflow:visible;display:grid;
    grid-template-columns:1fr 1fr;gap:0 26px;margin:0}
  .lvs-mois{padding:0 0 10px}
  .lvs-days button{font-size:14px}
  .lvs-foot{padding:15px 22px}
}

@media (prefers-reduced-motion:reduce){
  .lvs-cont{transition:none}
  .lvs-step.on .lvs-sugg li{animation:none;opacity:1;transform:none}
  .lvs-caret{animation:none}
}

/* Le panneau flottant du widget Google natif : on rend ses résultats
   nous-mêmes dans .lvs-sugg, il ne doit plus jamais apparaître par-dessus. */
.pac-container{display:none !important}

/* ═══ Squelettes de chargement ═══════════════════════════════════════
   Un spinner dit « attends ». Un squelette dit « voilà ce qui arrive »,
   et il occupe déjà la place exacte des cartes : rien ne saute quand
   elles se posent. C'est ce décalage de mise en page qui donne
   l'impression qu'une page rame alors qu'elle est rapide.

   Le balayage lumineux fait la différence entre « ça charge » et
   « c'est cassé » : un rectangle gris immobile se lit comme une erreur. */
.lvsk{background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 2px 12px rgba(31,38,60,.06)}
.lvsk-ph{aspect-ratio:4/3;background:#EFE8E1;position:relative;overflow:hidden}
.lvsk-ph::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);
  animation:lvsk-sweep 1.25s ease-in-out infinite}
@keyframes lvsk-sweep{to{transform:translateX(100%)}}
.lvsk-t{padding:14px 16px 16px}
.lvsk-b{height:11px;border-radius:6px;background:#EFE8E1;margin-bottom:9px}
.lvsk-b.w1{width:64%}
.lvsk-b.w2{width:40%}
.lvsk-b.w3{width:26%;height:13px;margin-bottom:0}
/* Les deux dernières ne servent qu'à remplir l'écran : sur téléphone elles
   sont sous la ligne de flottaison et ne font que consommer de la peinture. */
@media (max-width:767px){ .lvsk:nth-child(n+3){display:none} }
@media (prefers-reduced-motion:reduce){ .lvsk-ph::after{animation:none} }