/* /assets/css/home-demande-map.css */

/* ---------- Map card ---------- */
.apx-mapcard{
  margin-top:18px;
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  animation: apxGlow 6.5s ease-in-out infinite;
}

@keyframes apxGlow {
  0%{ box-shadow:0 10px 30px rgba(0,0,0,.08); }
  50%{ box-shadow:0 12px 34px rgba(20,143,160,.10); }
  100%{ box-shadow:0 10px 30px rgba(0,0,0,.08); }
}

.apx-maphead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.apx-maptitle{
  font-size:16px;
  font-weight:800;
  color:#0b1220;
  line-height:1.1;
}

.apx-mapsub{
  margin-top:6px;
  font-size:13px;
  color:#667085;
  line-height:1.3;
}

.apx-mapbtn{
  appearance:none;
  border:1px solid rgba(20,143,160,.25);
  background:rgba(20,143,160,.06);
  color:#148fa0;
  font-weight:700;
  font-size:13px;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
  white-space:nowrap;
}
.apx-mapbtn:hover{ transform:translateY(-1px); background:rgba(20,143,160,.10); }
.apx-mapbtn:active{ transform:translateY(0); }

.apx-mapwrap{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
}

.apx-map{
  height:600px;
  width:100%;
  background:#f5f7fb;
}

/* Hint overlay */
.apx-maphint{
  position:absolute;
  left:12px;
  bottom:12px;
  right:12px;
  background:rgba(11,18,32,.72);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  line-height:1.25;
  backdrop-filter: blur(6px);
  opacity:.95;
}

/* Status under map */
.apx-mapstatus{
  margin-top:10px;
  font-size:13px;
  color:#667085;
  min-height:18px;
}

/* Marker pulse (custom div icon) */
.apx-pulse{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#148fa0;
  position:relative;
}
.apx-pulse::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(20,143,160,.25);
  animation: apxPulse 1.6s ease-out infinite;
}
@keyframes apxPulse{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:.7; }
  100%{ transform:translate(-50%,-50%) scale(3.2); opacity:0; }
}

/* ---------- Form highlight (global) ---------- */
.form-highlight{
  animation: apxFormPulse 1.6s ease-out;
}
@keyframes apxFormPulse{
  0%   { box-shadow:0 0 0 rgba(20,143,160,0); transform:scale(1); }
  30%  { box-shadow:0 0 0 8px rgba(20,143,160,0.15); }
  100% { box-shadow:0 0 0 rgba(20,143,160,0); transform:scale(1); }
}

/* ---------- Input highlight (Ville + CP) ---------- */
.apx-input-flash{
  animation: apxInputFlash 0.95s ease-out;
}

/* =====================================================
   AMORPLANX – FORMULAIRE DEMANDE PUBLIQUE (UX PREMIUM)
   Amélioration visuelle uniquement – aucune logique modifiée
===================================================== */

/* ----- TITRES ----- */
.home-demande h2,
.home-demande .form-title {
  font-size: 22px;
  font-weight: 800;
  color: #0b1220;
  margin-bottom: 6px;
}

.home-demande .form-subtitle {
  font-size: 14px;
  color: #667085;
  margin-bottom: 18px;
  line-height: 1.45;
}

/* ----- LABELS ----- */
.demande-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #475467;
  margin-bottom: 6px;
  margin-top: 16px;
}

/* ----- INPUTS / SELECT / TEXTAREA ----- */
.demande-form input,
.demande-form select,
.demande-form textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid #d0d5dd;
  font-size: 14px;
  background: #ffffff;
  color: #0b1220;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.demande-form textarea {
  min-height: 90px;
  resize: vertical;
}

.demande-form input::placeholder,
.demande-form textarea::placeholder {
  color: #98a2b3;
}

/* ----- FOCUS (CONFORT VISUEL) ----- */
.demande-form input:focus,
.demande-form select:focus,
.demande-form textarea:focus {
  outline: none;
  border-color: #148fa0;
  box-shadow: 0 0 0 4px rgba(20,143,160,.12);
}

/* ----- GROUPES EN LIGNE ----- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ----- DISPONIBILITÉS ----- */
.dispo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

.dispo-row small {
  display: block;
  font-size: 11px;
  color: #667085;
  margin-bottom: 4px;
}

/* ----- MESSAGE ERREUR ----- */
.form-error {
  background: rgba(220, 53, 69, 0.08);
  color: #b42318;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(220, 53, 69, 0.2);
}

/* ----- BOUTON PRINCIPAL ----- */
.btn-primary {
  margin-top: 22px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #148fa0, #0b1220);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.15);
}

/* ----- RESPONSIVE ----- */
@media (max-width: 640px) {
  .form-row,
  .dispo-row {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   AMORPLANX – TEXTES D’AIDE / INDICATIONS FORMULAIRE
===================================================== */

/* Texte d’aide sous un champ */
.form-hint,
.form-help,
.form-note,
.demande-form .hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #667085; /* gris bleuté lisible */
}

/* Variante info importante (ex : RDV) */
.form-hint.info,
.form-note.info {
  color: #148fa0;
  font-weight: 500;
}

/* Variante attention (sans être une erreur) */
.form-hint.warn,
.form-note.warn {
  color: #b54708;
}

/* Exemple spécifique : message "RDV = service obligatoire" */
.demande-form .rdv-info {
  margin-top: 6px;
  font-size: 12px;
  color: #148fa0;
  font-weight: 500;
}

/* Disponibilités : aide légère */
.demande-form .dispo-hint {
  font-size: 12px;
  color: #667085;
  margin-bottom: 8px;
}

/* Séparation visuelle aide / champ */
.demande-form .field-group {
  margin-bottom: 18px;
}


@keyframes apxInputFlash{
  0%{
    box-shadow:0 0 0 0 rgba(20,143,160,0);
    border-color: rgba(20,143,160,.25);
  }
  35%{
    box-shadow:0 0 0 6px rgba(20,143,160,0.16);
    border-color:#148fa0;
  }
  100%{
    box-shadow:0 0 0 0 rgba(20,143,160,0);
    border-color: rgba(0,0,0,.12);
  }
}

/* Responsive */
@media (max-width: 720px){
  .apx-map{ height:220px; }
  .apx-mapbtn{ padding:7px 9px; }
}