/* ============================================================
   Carte Interactive v5.3 - Styles
   Palette : #2D3F5B (navy), #4A7FA5 (bleu mer), #F5A623 (orange), #C4956A (beige)
   ============================================================ */

#ci-map, #ci-form-map { width:100%; height:500px; border-radius:10px; z-index:0; }
#ci-form-map { height:600px; }

.ci-wrap { font-family:system-ui,sans-serif; }

/* Filters */
.ci-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:12px; padding:12px; background:#f5f7fb; border-radius:8px; }
.ci-filters label { display:flex; flex-direction:column; font-size:13px; font-weight:600; color:#2D3F5B; gap:3px; }
.ci-filters select, .ci-filters input[type=date] { border:1px solid #c8d6e5; border-radius:6px; padding:6px 10px; font-size:13px; }
.ci-input-sm { border:1px solid #c8d6e5; border-radius:6px; padding:6px 10px; font-size:13px; }

/* View toggle */
.ci-view-toggle { display:flex; gap:8px; margin-bottom:12px; }

/* Legend */
.ci-legend { display:flex; gap:16px; margin-top:8px; font-size:13px; color:#2D3F5B; flex-wrap:wrap; }
.ci-dot { width:12px; height:12px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:4px; }
.ci-line-leg { width:22px; height:4px; background:#e74c3c; border-radius:2px; display:inline-block; vertical-align:middle; margin-right:4px; }

/* Popup */
.ci-popup { font-size:13px; min-width:180px; }
.ci-popup p { margin:4px 0; }
.ci-popup a { color:#4A7FA5; }

/* Boutons — texte blanc sur bleu */
.ci-btn { padding:8px 16px; border-radius:7px; border:none; background:#2D3F5B; color:#fff; font-weight:600; cursor:pointer; font-size:13px; transition:background .15s; }
.ci-btn:hover { background:#4A7FA5; }
.ci-btn-outline { background:#fff; color:#2D3F5B; border:1px solid #2D3F5B; }
.ci-btn-outline:hover { background:#f0f4f8; }
.ci-btn-active { background:#4A7FA5; color:#fff; }
.ci-btn-sm { padding:5px 12px; font-size:12px; }
.ci-btn-del { background:#e74c3c; color:#fff; border:none; }
.ci-btn-del:hover { background:#c0392b; }

/* Input */
.ci-input { width:100%; border:1px solid #c8d6e5; border-radius:6px; padding:7px 10px; font-size:13px; box-sizing:border-box; margin-top:2px; }

/* Login box */
.ci-login { max-width:340px; margin:40px auto; padding:24px; background:#f5f7fb; border-radius:12px; text-align:center; }
.ci-login input { margin:10px 0; }
.ci-error { color:#e74c3c; font-size:13px; }

/* Form */
.ci-form-wrap { font-family:system-ui,sans-serif; }

.ci-form-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:2px solid #e8edf3; margin-bottom:16px;
}
.ci-form-header h3 { margin:0; color:#2D3F5B; }

.ci-grid { display:grid; grid-template-columns:2fr 3fr; gap:24px; margin-top:16px; }
.ci-form-col label { display:flex; flex-direction:column; font-size:13px; font-weight:600; color:#2D3F5B; margin-bottom:10px; gap:3px; }
/* Dates sur une ligne */
.ci-dates-row { display:flex; gap:10px; margin-bottom:10px; }
.ci-dates-row label { flex:1; display:flex; flex-direction:column; font-size:13px; font-weight:600; color:#2D3F5B; gap:3px; }

/* Carte collée en haut de la colonne droite */
.ci-map-col { display:flex; flex-direction:column; gap:8px; position:sticky; top:0; }
.ci-actions { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.ci-hint { font-size:12px; color:#7a8fa6; margin:3px 0; }

/* Messages */
.ci-msg { padding:8px 12px; border-radius:6px; font-size:13px; margin-top:6px; }
.ci-msg-success { background:#d4edda; color:#155724; }
.ci-msg-error { background:#f8d7da; color:#721c24; }

/* Badge */
.ci-badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:12px; font-weight:600; }

/* Table */
.ci-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; }
.ci-table th { background:#2D3F5B; color:#fff; padding:8px 12px; text-align:left; }
.ci-table td { padding:8px 12px; border-bottom:1px solid #e8edf3; vertical-align:middle; }
.ci-table tr:hover td { background:#f5f7fb; }

/* Responsive */
@media(max-width:768px) {
  .ci-grid { grid-template-columns:1fr; }
  .ci-form-header { flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Panel choix adresse (rue vs avenue) */
.ci-choix-panel {
  margin-top: 8px;
  padding: 12px;
  background: #fff8e1;
  border: 1px solid #F5A623;
  border-radius: 8px;
  font-size: 13px;
}
.ci-choix-panel p { margin: 0 0 8px; color: #2D3F5B; }

/* Bouton supprimer point sélectionné */
#ci-delete-point-btn {
  background: #e74c3c;
  color: #fff;
  border: none;
  animation: ci-pulse 1s ease-in-out infinite alternate;
}
@keyframes ci-pulse {
  from { box-shadow: 0 0 0 0 rgba(231,76,60,.4); }
  to   { box-shadow: 0 0 0 6px rgba(231,76,60,0); }
}

/* ── Tri des tableaux ─────────────────────────────────────── */
.ci-table thead th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.ci-table thead th[data-sort]:hover {
  background: #e8f0f8;
  color: #2D3F5B;
}
.ci-sort-arrow {
  display: inline-block;
  width: 14px;
  font-size: 11px;
  color: #4A7FA5;
  margin-left: 2px;
}

/* ── Pagination ───────────────────────────────────────────── */
.ci-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 6px 0;
}
.ci-page-info {
  font-size: 13px;
  color: #2D3F5B;
  font-weight: 600;
}
.ci-pagination .ci-btn[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ── Tableau admin WP ─────────────────────────────────────── */
#ci-wp-table .ci-row-selected td {
  background: #fff8e1 !important;
}
#ci-wp-table th[data-sort]:hover {
  background: #e8f0f8;
}

/* ── Clignotement marqueur sélectionné ───────────────────── */
@keyframes ci-marker-flash {
  0%   { filter: drop-shadow(0 0 0px rgba(245,166,35,0)); transform: scale(1); }
  50%  { filter: drop-shadow(0 0 10px rgba(245,166,35,1)); transform: scale(1.45); }
  100% { filter: drop-shadow(0 0 0px rgba(245,166,35,0)); transform: scale(1); }
}
.ci-marker-flash {
  animation: ci-marker-flash 0.8s ease-in-out infinite;
  z-index: 9999 !important;
}

/* ── Import Word preview ──────────────────────────────────── */
#ci-word-table input, #ci-word-table select {
  font-size: 12px;
  padding: 2px 4px;
  height: auto;
}
#ci-word-table td { vertical-align: middle; padding: 4px 6px; }