/* ============================================================================
   urbizen-cadastre.css
   Styles du composant cadastre réutilisable (page d'accueil, DP, PCMI, espace client).
   Source de vérité unique — ce fichier ne doit exister qu'ici (voir D-008).
   Le composant génère lui-même son DOM (voir urbizen-cadastre.js).

   Tokens de charte : chaque var(--u-*) porte une valeur de repli, reprise de
   `frontend/assets/css/urbizen-tokens.css`. Le composant s'affiche donc
   correctement même sans les tokens du thème, et adopte automatiquement la
   charte dès que le thème enfant les déclarera (étape 6).

   Ce fichier ne déclare JAMAIS de token dans :root : le rendu global appartient
   au thème, pas à l'extension (D-002).
   ========================================================================== */

.uc-root { font-family: var(--u-font-body, "IBM Plex Sans", system-ui, sans-serif); color: var(--u-ink, #14233B); }
.uc-root *, .uc-root *::before, .uc-root *::after { box-sizing: border-box; }

/* --- Champ d'adresse + autocomplétion --- */
.uc-field { position: relative; }
.uc-label {
  display: block; font-size: 13px; font-weight: 500; color: var(--u-ink, #14233B);
  margin-bottom: 7px;
}
.uc-input {
  width: 100%; font-family: var(--u-font-body, "IBM Plex Sans", system-ui, sans-serif); font-size: 16px; color: var(--u-ink, #14233B);
  background: var(--u-surface, #FBFCFD); border: 1px solid var(--u-line-strong, #9FADBC);
  border-radius: var(--u-radius, 4px); padding: 13px 42px 13px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.uc-input:focus { outline: none; border-color: var(--u-brand, #128A5A); box-shadow: 0 0 0 3px var(--u-brand-sf, #E4F5EC); }
.uc-input::placeholder { color: var(--u-ink-faint, #8791A6); }

.uc-field .uc-spinner {
  position: absolute; right: 14px; top: 41px; width: 16px; height: 16px;
  border: 2px solid var(--u-line, #C9D3DD); border-top-color: var(--u-brand, #128A5A);
  border-radius: 50%; animation: uc-spin .7s linear infinite; display: none;
}
.uc-field.is-loading .uc-spinner { display: block; }
@keyframes uc-spin { to { transform: rotate(360deg); } }

.uc-suggest {
  list-style: none; margin: 6px 0 0; padding: 4px;
  position: absolute; left: 0; right: 0; z-index: 20;
  background: var(--u-surface, #FBFCFD); border: 1px solid var(--u-line-strong, #9FADBC);
  border-radius: var(--u-radius, 4px); box-shadow: var(--u-shadow-card, 0 1px 0 rgba(20,35,59,.03), 0 20px 40px -30px rgba(20,35,59,.5));
  max-height: 300px; overflow-y: auto;
}
.uc-suggest[hidden] { display: none; }
.uc-suggest li {
  padding: 10px 12px; font-size: 14px; cursor: pointer; border-radius: var(--u-radius-sm, 3px);
  display: flex; gap: 10px; align-items: baseline;
}
.uc-suggest li .uc-pin { color: var(--u-brand, #128A5A); flex: none; font-size: 12px; }
.uc-suggest li[aria-selected="true"], .uc-suggest li:hover { background: var(--u-brand-sf, #E4F5EC); }
.uc-suggest .uc-empty { color: var(--u-ink-faint, #8791A6); cursor: default; }
.uc-suggest .uc-empty:hover { background: transparent; }

/* --- Carte --- */
.uc-map-wrap { margin-top: 16px; }
.uc-map-wrap[hidden] { display: none; }
.uc-map-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.uc-status { font-size: 13px; color: var(--u-ink-soft, #55617A); display: flex; align-items: center; gap: 8px; }
.uc-status .uc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--u-mint, #54CF99); flex: none; }
.uc-toggle {
  font-family: var(--u-font-mono, "IBM Plex Mono", ui-monospace, monospace); font-size: 12px; cursor: pointer;
  border: 1px solid var(--u-line-strong, #9FADBC); background: var(--u-surface, #FBFCFD); color: var(--u-ink, #14233B);
  border-radius: var(--u-radius, 4px); padding: 6px 11px; white-space: nowrap;
}
.uc-toggle:hover { border-color: var(--u-brand, #128A5A); color: var(--u-brand-dk, #0E6E48); }

.uc-map {
  height: 380px; border: 1px solid var(--u-line-strong, #9FADBC); border-radius: var(--u-radius, 4px);
  z-index: 0; background: var(--u-surface-2, #F2F5F8);
}
.uc-map .leaflet-container { font: inherit; background: var(--u-surface-2, #F2F5F8); }

/* --- Cartouche parcelle --- */
.uc-parcel {
  margin-top: 12px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--u-line-strong, #9FADBC); border-left: 3px solid var(--u-brand, #128A5A);
  border-radius: var(--u-radius, 4px); background: var(--u-surface, #FBFCFD); padding: 14px 16px;
}
.uc-parcel[hidden] { display: none; }
.uc-parcel.is-confirmed { border-color: var(--u-brand, #128A5A); border-left-color: var(--u-brand, #128A5A); background: var(--u-brand-sf, #E4F5EC); }
.uc-parcel-head {
  font-family: var(--u-font-mono, "IBM Plex Mono", ui-monospace, monospace); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--u-ink-faint, #8791A6); margin-bottom: 6px;
}
.uc-parcel.is-confirmed .uc-parcel-head { color: var(--u-brand-dk, #0E6E48); }
.uc-parcel-body { font-size: 14px; color: var(--u-ink, #14233B); line-height: 1.5; }
.uc-parcel-body b { font-family: var(--u-font-mono, "IBM Plex Mono", ui-monospace, monospace); }
.uc-parcel-body .uc-area small { color: var(--u-ink-faint, #8791A6); font-family: var(--u-font-body, "IBM Plex Sans", system-ui, sans-serif); }
.uc-parcel-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

.uc-btn {
  font-family: var(--u-font-title, "Space Grotesk", system-ui, sans-serif); font-weight: 500; font-size: 14.5px;
  border-radius: var(--u-radius, 4px); padding: 10px 18px; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, border-color .15s, opacity .15s;
}
.uc-btn-confirm { background: var(--u-brand, #128A5A); color: #fff; }
.uc-btn-confirm:hover { background: var(--u-brand-dk, #0E6E48); }
.uc-parcel.is-confirmed .uc-btn-confirm { background: var(--u-ink, #14233B); pointer-events: none; }
.uc-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--u-font-body, "IBM Plex Sans", system-ui, sans-serif); font-size: 12.5px; color: var(--u-ink-soft, #55617A); text-decoration: underline;
}
.uc-link:hover { color: var(--u-brand-dk, #0E6E48); }

/* --- Bouton Continuer --- */
.uc-continue-row { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.uc-continue {
  font-family: var(--u-font-title, "Space Grotesk", system-ui, sans-serif); font-weight: 500; font-size: 15px;
  background: var(--u-brand, #128A5A); color: #fff; border: none; border-radius: var(--u-radius, 4px);
  padding: 12px 26px; cursor: pointer; transition: background .15s, opacity .15s;
}
.uc-continue:hover { background: var(--u-brand-dk, #0E6E48); }
.uc-continue:disabled { opacity: .45; cursor: not-allowed; }
.uc-continue-hint { font-size: 13px; color: var(--u-ink-faint, #8791A6); }

/* --- Erreur bloquante (carte indisponible, etc.) --- */
.uc-error {
  margin-top: 12px; font-size: 13.5px; color: var(--u-error, #C0392B);
  background: #FBEBE9; border: 1px solid #E8C4BF; border-radius: var(--u-radius, 4px); padding: 11px 14px;
}
.uc-error[hidden] { display: none; }

/* --- Focus visible partout --- */
.uc-root :focus-visible { outline: 2px solid var(--u-brand, #128A5A); outline-offset: 2px; }

/* --- Responsive --- */
@media (max-width: 520px) {
  .uc-map { height: 300px; }
  .uc-parcel { flex-direction: column; align-items: flex-start; }
  .uc-parcel-actions { align-items: flex-start; width: 100%; }
}

/* État "recherche en cours" : pulsation douce du repère de statut */
.uc-status.is-searching .uc-dot { animation: uc-pulse .9s ease-in-out infinite; }
@keyframes uc-pulse { 0%, 100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .uc-status.is-searching .uc-dot { animation: none; } }