/* ---- Y aller : itineraire a pied depuis la position GPS (yaller.js) ----------
   Trace "Poussiere de fee" dessine sur un calque canvas entre le plan et les
   puces ; option "Nuit enchantee" (plan assombri, seul le chemin reste eclaire). */

.yaller-calque{
  position:absolute;
  left:0;
  top:0;
  display:block;
  pointer-events:none;
}

/* bouton flottant, au-dessus des boutons de zoom */
.yaller-fab{
  position:absolute;
  right:14px;
  bottom: calc(70px * var(--ui) + 142px);
  z-index:5;
  display:flex;
  align-items:center;
  gap:6px;
  padding: calc(10px * var(--ui)) calc(14px * var(--ui));
  border-radius:999px;
  border:2px solid rgba(255,212,121,0.65);
  background: linear-gradient(135deg, #1b2766, #0a63d6);
  color:#fff;
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
  cursor:pointer;
}
.yaller-fab span{ color: var(--gold); }
.yaller-fab:active{ transform:scale(0.97); }
.yaller-fab:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.plan-panel.yaller-actif .yaller-fab,
.plan-panel.yaller-actif .signal-fab{ display:none; }

/* bouton ajoute a la popup d'un lieu */
.map-popup .yaller-popup-btn{
  background: linear-gradient(135deg, #1b2766, #0a63d6);
  border:1px solid rgba(255,212,121,0.65);
}
.map-popup .yaller-popup-btn span{ color: var(--gold); }

/* carte du trajet en cours */
.yaller-carte{
  position:absolute;
  left:10px;
  right:62px;
  bottom: calc(70px * var(--ui));
  z-index:6;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:18px;
  background: var(--paper-card);
  border:2px solid rgba(255,212,121,0.6);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.yaller-carte[hidden]{ display:none; }
.yaller-carte.is-arrive{ border-color:#7fe0a3; }
.yaller-rond{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--gold);
  background: rgba(255,212,121,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:23px;
  line-height:1;
}
.yaller-rond img{ width:100%; height:100%; object-fit:cover; display:block; }
.yaller-carte__texte{ flex:1 1 auto; min-width:0; }
.yaller-carte__texte p{
  margin:0;
  font-size:13.5px;
  font-weight:800;
  color: var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.yaller-carte__texte strong{
  display:block;
  margin-top:1px;
  font-size:19px;
  font-weight:900;
  line-height:1.15;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.yaller-carte.is-arrive .yaller-carte__texte strong{ color:#7fe0a3; }
.yaller-carte__texte small{ display:block; font-size:11.5px; color: var(--text-dim); }
.yaller-carte__texte small.is-attention{ color:#ffd9a0; }
.yaller-carte__boutons{ display:flex; flex-direction:column; gap:5px; }
.yaller-carte__boutons button{
  width:36px;
  height:31px;
  border-radius:10px;
  border:1px solid var(--hairline);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-family:inherit;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.yaller-carte__boutons button[aria-pressed="true"]{ background: rgba(255,212,121,0.18); border-color: var(--gold); }

/* feuille "Ou aller ?" */
.yaller-backdrop{ z-index:56; }
.yaller-feuille{
  max-height: calc(100% - 24px);
  overflow-y:auto;
  gap:10px;
}
.yaller-feuille__tete{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.yaller-feuille__tete .modal-card__title span{ color: var(--gold); }
.yaller-fermer{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--hairline);
  background:transparent;
  color: var(--text-dim);
  font-family:inherit;
  font-size:15px;
  cursor:pointer;
}
.yaller-gps{
  margin:0;
  padding:8px 11px;
  border-radius:12px;
  font-size:12.5px;
  font-weight:700;
  line-height:1.4;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
}
.yaller-gps.is-ok{ color:#b5efca; background: rgba(127,224,163,0.12); }
.yaller-gps.is-attention{ color:#ffd9a0; background: rgba(255,194,103,0.13); }
.yaller-gps.is-erreur{ color:#ffb1ab; background: rgba(255,90,90,0.14); }
.yaller-recherche{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--hairline);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-family:inherit;
  font-size:16px;
}
.yaller-recherche:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.yaller-section{
  margin:4px 0 -2px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--text-dim);
}
.yaller-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.yaller-suggestion{ display:flex; flex-direction:column; gap:6px; }
.yaller-lieu{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--hairline);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
}
.yaller-lieu:disabled{ opacity:0.55; cursor:default; }
.yaller-lieu:not(:disabled):active{ background: rgba(255,212,121,0.08); }
.yaller-lieu .yaller-rond{ width:40px; height:40px; font-size:20px; border-width:1.5px; }
.yaller-lieu__texte{ flex:1 1 auto; min-width:0; }
.yaller-lieu__eti{
  display:block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color: var(--gold);
}
.yaller-lieu__texte b{
  display:block;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.yaller-lieu__texte small{ display:block; font-size:12px; color: var(--text-dim); }
.yaller-lieu__fleche{ flex:none; color: var(--gold); font-size:18px; font-weight:800; }
.yaller-perimetre{ display:flex; gap:6px; }
.yaller-perimetre button{
  flex:1;
  padding:6px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:transparent;
  color: var(--text-dim);
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.yaller-perimetre button[aria-pressed="true"]{ background: rgba(255,212,121,0.16); border-color: var(--gold); color: var(--gold); }
.yaller-vide{ margin:0; padding:4px 2px; font-size:12.5px; color: var(--text-dim); }
.yaller-nuit{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border-radius:14px;
  background: linear-gradient(90deg, rgba(6,10,42,0.95), rgba(40,32,80,0.7));
  border:1px solid var(--hairline);
  font-size:13.5px;
  font-weight:800;
  color: var(--text);
  cursor:pointer;
}
.yaller-nuit small{ display:block; font-weight:600; font-size:11.5px; color: var(--text-dim); }
.yaller-nuit input{ width:20px; height:20px; flex:none; accent-color: var(--gold); }
.yaller-astuce{ margin:0; font-size:12px; color: var(--text-dim); text-align:center; }

.yaller-toast{
  position:absolute;
  left:50%;
  top: calc(100px * var(--ui));
  transform:translateX(-50%);
  z-index:7;
  width:max-content;
  max-width: calc(100% - 32px);
  padding:10px 14px;
  border-radius:14px;
  background: rgba(6,10,30,0.92);
  border:1px solid rgba(255,212,121,0.6);
  color:#fff;
  font-size:13px;
  font-weight:700;
  text-align:center;
}
.yaller-toast[hidden]{ display:none; }

/* ---- 0.9.0 : propositions de design (etape 1) ---- */

/* 7 · bordure lumineuse : un reflet dore fait le tour du bouton Y aller */
@property --yaller-angle{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.yaller-fab{
  border:2.5px solid transparent;
  background:
    linear-gradient(135deg, #1b2766, #0a63d6) padding-box,
    conic-gradient(from var(--yaller-angle), rgba(255,212,121,0.2) 0deg, rgba(255,212,121,0.2) 230deg, #ffb300 300deg, #fff6d0 335deg, rgba(255,212,121,0.2) 360deg) border-box;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 18px rgba(255,190,60,0.22);
  animation: yaller-beam 2.6s linear infinite;
}
@keyframes yaller-beam{ to{ --yaller-angle:360deg; } }

/* 2 · pluie d'etoiles a l'arrivee */
.yaller-eclats{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:4; }
.yaller-eclat{ position:absolute; left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px; }
.yaller-eclat svg{ display:block; width:100%; height:100%; }

@media (prefers-reduced-motion: reduce){
  .yaller-fab{ animation:none; }
}


/* ---- 0.22.0 : apercu, validation et mode trajet plein ecran (cf. definirMode) ---- */
.yaller-carte{ flex-wrap:wrap; }
.yaller-carte__valider{ display:none; flex:1 0 100%; gap:8px; }
.yaller-carte__valider .btn-secondary,
.yaller-carte__valider .btn-primary{ flex:1; margin:0; }
.yaller-carte__valider .btn-primary span{ color: var(--gold); }
.plan-panel.yaller-apercu .yaller-carte__valider{ display:flex; }
.plan-panel.yaller-apercu .yaller-carte__boutons,
.plan-panel.yaller-route .yaller-carte__boutons{ display:none; }

/* mode trajet : on range tout, il ne reste que la route */
body.yaller-plein-ecran .app-header,
body.yaller-plein-ecran .tab-bar{ display:none; }
.plan-panel.yaller-route .plan-filters,
.plan-panel.yaller-route .plan-hint,
.plan-panel.yaller-route #plan-zoom-in,
.plan-panel.yaller-route #plan-zoom-out{ display:none; }
.plan-panel.yaller-route .plan-zoom-controls{ bottom: max(16px, var(--safe-bottom, env(safe-area-inset-bottom))); }
.plan-panel.yaller-route .yaller-carte{
  top: max(10px, env(safe-area-inset-top));
  bottom:auto;
  left:10px;
  right:62px;
  padding:6px 14px 6px 6px;
  gap:8px;
  border-radius:999px;
  animation: yaller-pastille 0.35s ease-out;
}
.plan-panel.yaller-route .yaller-rond{ width:34px; height:34px; font-size:17px; }
.plan-panel.yaller-route .yaller-carte__texte p{ font-size:11.5px; }
.plan-panel.yaller-route .yaller-carte__texte strong{ font-size:15px; }
.plan-panel.yaller-route .yaller-carte__texte small{ display:none; }
@keyframes yaller-pastille{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } }

.yaller-options-btn{ display:none; }
.plan-panel.yaller-route .yaller-options-btn{
  position:absolute;
  top: max(10px, env(safe-area-inset-top));
  right:10px;
  z-index:6;
  width:44px;
  height:44px;
  border-radius:50%;
  border:2px solid rgba(255,212,121,0.6);
  background: var(--paper-card);
  color: var(--text);
  font-size:22px;
  font-weight:800;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  cursor:pointer;
}

.yaller-options .modal-card__title{ margin-bottom:6px; }
.yaller-options__ligne{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 2px;
  border:0;
  border-top:1px solid var(--hairline);
  background:none;
  color: var(--text);
  font-family:inherit;
  font-size:14.5px;
  text-align:left;
  cursor:pointer;
}
.yaller-options__ligne > span + span{ color: var(--text-dim); }
.yaller-options__ligne.is-danger{ color:#ff6b6b; }
.yaller-options .modal-card__actions{ margin-top:10px; }