/* ---- Signalements de personnages (voir signalements.js) ------------------------
   Couleur dediee validee : magenta. Feuille a part pour ne pas alourdir
   styles.css ; reprend les jetons de l'app (--paper, --paper-card, --ui...). */
:root{
  --signal:#ff3fa4;
  --signal-doux: rgba(255,63,164,0.18);
  --signal-ok:#7fe0a3;
}

.plan-filter-chip__dot--signalement{ background: var(--signal); }

/* le plan libere le bas pour le bouton flottant */
.plan-hint{ bottom: calc(132px * var(--ui)); }

/* --- puces magenta ---
   Le bouton est une ancre de taille nulle placee sur le point (translate calcule
   par signalements.js) ; photo et etiquette sont centrees autour. */
.plan-signalements{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.plan-signal{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  padding:0;
  border:none;
  background:none;
  pointer-events:auto;
  cursor:pointer;
}
.plan-signal[hidden]{ display:none; }
.plan-signal__rond{
  position:absolute;
  left:-23px;
  top:-23px;
  width:46px;
  height:46px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid var(--signal);
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,0.5);
  background: var(--paper-card);
}
.plan-signal__rond img{ width:100%; height:100%; object-fit:cover; display:block; }
.plan-signal__etiq{
  position:absolute;
  top:28px;
  left:0;
  transform:translateX(-50%);
  padding:3px 8px;
  border-radius:999px;
  background: var(--signal);
  color:#fff;
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.plan-signal__halo{
  position:absolute;
  left:-38px;
  top:-38px;
  width:76px;
  height:76px;
  border-radius:50%;
  border:2px solid var(--signal);
  opacity:0;
}
.plan-signal.is-frais .plan-signal__halo{ animation: signal-halo 2s ease-out infinite; }
@keyframes signal-halo{
  from{ transform:scale(0.6); opacity:0.7; }
  to{ transform:scale(1.15); opacity:0; }
}
.plan-signal.is-ancien{ opacity:0.6; }
.plan-signal.is-ancien .plan-signal__rond{ left:-18px; top:-18px; width:36px; height:36px; }
.plan-signal.is-ancien .plan-signal__etiq{ top:22px; }

/* --- position de l'utilisateur --- */
.plan-moi{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  pointer-events:none;
}
.plan-moi[hidden]{ display:none; }
.plan-moi__halo{
  position:absolute;
  left: calc(var(--rayon, 20px) * -1);
  top: calc(var(--rayon, 20px) * -1);
  width: calc(var(--rayon, 20px) * 2);
  height: calc(var(--rayon, 20px) * 2);
  border-radius:50%;
  background: rgba(79,168,255,0.18);
  border:1px solid rgba(79,168,255,0.55);
}
.plan-moi__point{
  position:absolute;
  left:-9px;
  top:-9px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#4fa8ff;
  border:3px solid #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.plan-locate-btn{ display:flex; align-items:center; justify-content:center; }

/* --- bouton flottant --- */
.signal-fab{
  position:absolute;
  left:50%;
  bottom: calc(72px * var(--ui));
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  align-items:center;
  gap:8px;
  padding: calc(12px * var(--ui)) calc(18px * var(--ui));
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.25);
  background: var(--signal);
  color:#fff;
  font-family:inherit;
  font-size: calc(14px * var(--ui));
  font-weight:800;
  white-space:nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  cursor:pointer;
}
.signal-fab:active{ transform:translateX(-50%) scale(0.97); }
.signal-fab:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* --- feuilles (signaler / fiche) --- */
.signal-backdrop{ z-index:55; }
.signal-carte,
.signal-fiche{
  max-height: calc(100% - 24px);
  overflow-y:auto;
}
.signal-formulaire{ display:flex; flex-direction:column; gap:12px; }
.signal-formulaire[hidden],
.signal-connexion[hidden]{ display:none; }
.signal-connexion{ display:flex; flex-direction:column; gap:12px; }
.signal-etape{
  margin:4px 0 0;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--text-dim);
}
.signal-etape b,
.signal-etape em{ color: var(--signal); font-style:normal; }
.signal-etape span{ text-transform:none; letter-spacing:0; font-weight:600; }

.signal-choix{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding: 2px 2px 6px;
  -webkit-overflow-scrolling:touch;
}
.signal-choix__item{
  flex:0 0 auto;
  width:64px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:0;
  border:none;
  background:none;
  color: var(--text-dim);
  font-family:inherit;
  font-size:10.5px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
}
.signal-choix__rond{
  width:54px;
  height:54px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--hairline);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background: rgba(255,255,255,0.05);
}
.signal-choix__rond img{ width:100%; height:100%; object-fit:cover; display:block; }
.signal-choix__item--autres .signal-choix__rond{ background: var(--brand-blue); }
.signal-choix__item--autres .signal-choix__rond img{ object-fit:contain; padding:9px; }
.signal-choix__item.is-actif{ color: var(--text); }
.signal-choix__item.is-actif .signal-choix__rond{ border:3px solid var(--signal); }
.signal-choix__item:focus-visible .signal-choix__rond{ outline:2px solid var(--signal); outline-offset:2px; }

.signal-libre{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--signal);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-family:inherit;
  font-size:15px;
}
.signal-libre[hidden]{ display:none; }

.signal-photo{
  position:relative;
  width:100%;
  min-height:120px;
  padding:0;
  border-radius:16px;
  border:2px dashed var(--signal);
  background: var(--signal-doux);
  color:#fff;
  font-family:inherit;
  overflow:hidden;
  cursor:pointer;
}
.signal-photo__vide{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:120px;
  font-size:15px;
  font-weight:800;
}
.signal-photo__vide small{ font-size:11.5px; font-weight:600; color: var(--text-dim); }
.signal-photo.is-pleine{ border-style:solid; height:180px; }
.signal-photo.is-pleine img{ width:100%; height:100%; object-fit:cover; display:block; }
.signal-photo__refaire{
  position:absolute;
  right:8px;
  bottom:8px;
  padding:5px 10px;
  border-radius:999px;
  background: rgba(6,10,30,0.75);
  font-size:12px;
  font-weight:800;
}

.signal-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.signal-tags--centre{ justify-content:center; }
.signal-tags:empty{ display:none; }
.signal-tag{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:none;
  color: var(--text-dim);
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.signal-tag.is-on{ border-color: var(--signal); color:#fff; background: var(--signal-doux); }

.signal-pseudo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color: var(--text-dim);
}
.signal-pseudo input{ width:18px; height:18px; accent-color: var(--signal); }

.signal-gps{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.signal-gps__texte{ font-size:12.5px; font-weight:700; color: var(--text-dim); }
.signal-gps__texte.is-ok{ color: var(--signal-ok); }
.signal-gps__texte.is-attention{ color:#ffc267; }
.signal-gps__carte{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--signal);
  background:none;
  color: var(--signal);
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.signal-gps__carte[hidden]{ display:none; }

.signal-envoyer{ background: var(--signal); }
.signal-envoyer:disabled{ background: rgba(255,63,164,0.28); color: rgba(255,255,255,0.6); cursor:default; }
.signal-aide{ margin:-4px 0 0; min-height:1em; font-size:11.5px; color: var(--text-dim); text-align:center; }

/* choix de l'endroit sur le plan */
.signal-choix-plan{
  position:absolute;
  left:10px;
  right:10px;
  top: calc(60px * var(--ui));
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  background: var(--signal);
  color:#fff;
  font-size:13.5px;
  font-weight:800;
}
.signal-choix-plan[hidden]{ display:none; }
.signal-choix-plan button{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.6);
  background:none;
  color:#fff;
  font-family:inherit;
  font-weight:800;
}

/* --- fiche --- */
.signal-fiche__photo{
  position:relative;
  width:100%;
  height:200px;
  padding:0;
  border-radius:16px;
  overflow:hidden;
  border:3px solid var(--signal);
  background: var(--paper);
  cursor:zoom-in;
}
.signal-fiche__photo img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
.signal-fiche__vu,
.signal-fiche__loupe{
  position:absolute;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}
.signal-fiche__vu{ left:8px; top:8px; background: var(--signal); color:#fff; }
.signal-fiche__loupe{ right:8px; bottom:8px; background: rgba(6,10,30,0.72); color:#fff; font-weight:700; }
.signal-confirme{
  align-self:center;
  padding:5px 11px;
  border-radius:999px;
  background: rgba(111,207,143,0.16);
  color: var(--signal-ok);
  font-size:12px;
  font-weight:800;
}
.signal-confirme[hidden]{ display:none; }

.signal-waze{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.signal-waze[hidden]{ display:none; }
.signal-waze button{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:14px 8px;
  border-radius:16px;
  font-family:inherit;
  font-size:14.5px;
  cursor:pointer;
}
.signal-waze button span{ font-size:26px; line-height:1; }
.signal-waze button small{ font-size:11px; font-weight:600; color: var(--text-dim); }
.signal-waze__la{ background: rgba(111,207,143,0.18); color: var(--signal-ok); border:2px solid rgba(127,224,163,0.5); }
.signal-waze__parti{ background: rgba(255,255,255,0.06); color: var(--text); border:2px solid var(--hairline); }
.signal-waze button:active{ transform:scale(0.98); }
.signal-merci{ margin:0; font-size:13px; font-weight:700; color: var(--signal-ok); }
.signal-merci[hidden]{ display:none; }
.signal-liens{ display:flex; justify-content:space-between; gap:10px; width:100%; }
.signal-liens button{
  padding:0;
  border:none;
  background:none;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.signal-liens button[hidden]{ display:none; }
.signal-liens__photo{ color: var(--signal); }
.signal-liens__signaler{ margin-left:auto; color: var(--text-dim); }
.signal-liens__signaler:disabled{ cursor:default; opacity:0.7; }

.signal-visionneuse{
  position:fixed;
  inset:0;
  z-index:80;
  padding:0;
  border:none;
  background: rgba(0,0,0,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:zoom-out;
}
.signal-visionneuse[hidden]{ display:none; }
.signal-visionneuse img{ max-width:100%; max-height:100%; object-fit:contain; }

/* --- bandeau de proximite --- */
.signal-bandeau{
  position:absolute;
  left:10px;
  right:10px;
  top: calc(96px * var(--ui));
  z-index:6;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:18px;
  background: var(--paper-card);
  border:2px solid var(--signal);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.signal-bandeau[hidden]{ display:none; }
.signal-bandeau__mini{ flex:0 0 auto; width:52px; height:52px; border-radius:12px; overflow:hidden; }
.signal-bandeau__mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.signal-bandeau__texte{ flex:1 1 auto; min-width:0; }
.signal-bandeau__texte p{ margin:0; font-size:13.5px; font-weight:800; color: var(--text); }
.signal-bandeau__texte small{ font-size:11.5px; color: var(--text-dim); }
.signal-bandeau__boutons{ display:flex; flex-direction:column; gap:5px; }
.signal-bandeau__boutons button{
  padding:6px 9px;
  border-radius:10px;
  border:none;
  font-family:inherit;
  font-size:11.5px;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}
.signal-bandeau__boutons [data-vote="la"]{ background: rgba(111,207,143,0.18); color: var(--signal-ok); }
.signal-bandeau__boutons [data-vote="parti"]{ background: rgba(255,255,255,0.08); color: var(--text); }
.signal-bandeau__fermer{
  position:absolute;
  top:-9px;
  right:-6px;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid var(--hairline);
  background: var(--paper);
  color: var(--text-dim);
  font-size:12px;
  cursor:pointer;
}

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

@media (prefers-reduced-motion: reduce){
  .plan-signal.is-frais .plan-signal__halo{ animation:none; opacity:0.45; }
}

/* ---- 0.9.0 · proposition de design 8 : reflet qui balaie le bouton Signaler ---- */
.signal-fab{ overflow:hidden; }
.signal-fab::after{
  content:"";
  position:absolute;
  top:-30%;
  bottom:-30%;
  left:-40%;
  width:40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-120%) skewX(-18deg);
  animation: signal-balayage 3s ease-in-out infinite;
  pointer-events:none;
}
.signal-fab:not(:focus-visible){
  outline: 0 solid color-mix(in srgb, var(--signal) 35%, transparent);
  animation: signal-halo 3s ease-in-out infinite;
}
@keyframes signal-balayage{
  0%{ transform: translateX(-120%) skewX(-18deg); }
  55%, 100%{ transform: translateX(420%) skewX(-18deg); }
}
@keyframes signal-halo{
  0%, 100%{ outline-width:0; }
  50%{ outline-width:7px; }
}
@media (prefers-reduced-motion: reduce){
  .signal-fab:not(:focus-visible){ animation:none; }
  .signal-fab::after{ display:none; }
}