/* SPSA — Styles 2/3 : annuaire (filtres, adresse, vue divisée, cartes partenaires, footer).
   Se charge APRÈS style.base.css et AVANT style.carte.css. */

/* ===== Section Annuaire ===== */
.annuaire {
  padding: 24px 0 80px;
  background: var(--surface);
}

/* ===== Section Header ===== */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 14px;
}

/* Diamant CSS */
.section-tag::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  background: var(--coral);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.section-header h2 {
  font-size: 1.7rem;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.section-header p {
  font-size: 0.95rem;
  color: var(--text-soft);
  max-width: 520px;
  margin: 0 auto;
  font-weight: 400;
}

/* ===== Barre de filtres ===== */
.filters__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--white);
  padding: 12px;
  border-radius: var(--r-xl);
  border: 1.5px solid var(--border);
  box-shadow: var(--sh-md);
  margin-bottom: 16px;
  position: sticky;
  top: calc(var(--header-h) + 8px);
  z-index: 40;
}

.filters__input-wrap {
  position: relative;
  flex: 2;
  min-width: 240px;
}

.filters__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}

.filters__bar input {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 11px 12px 11px 42px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  min-height: 46px;
  transition: border-color var(--ease);
  width: 100%;
}

.filters__bar input:focus {
  border-color: var(--ocean-light);
  background: var(--white);
  outline: none;
}

.filters__bar select {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 11px 36px 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  min-height: 46px;
  transition: border-color var(--ease);
  flex: 1;
  min-width: 180px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23747782' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.filters__bar select:focus {
  border-color: var(--ocean-light);
  background-color: var(--white);
  outline: none;
}

.filters__count {
  font-size: 0.8rem;
  color: var(--text-soft);
  font-weight: 600;
  white-space: nowrap;
  padding: 0 6px;
}

/* ===== Barre « Votre adresse » (partenaires autour d'un point) ===== */
.geo-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.geo-bar__input-wrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
}

.geo-bar__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}

.geo-bar input {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 11px 12px 11px 42px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--text);
  min-height: 46px;
  width: 100%;
  transition: border-color var(--ease);
}

.geo-bar input:focus {
  border-color: var(--ocean-light);
  outline: none;
}

.geo-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ocean);
  color: var(--white);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 20px;
  min-height: 46px;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease), box-shadow var(--ease);
}

.geo-bar__btn:hover { background: var(--ocean-mid); }

.geo-bar__btn.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

.geo-bar__btn.is-loading svg {
  animation: locate-spin 0.8s linear infinite;
}

.geo-bar__reset {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-mid);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 16px;
  min-height: 46px;
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--ease), color var(--ease);
}

.geo-bar__reset:hover {
  border-color: var(--ocean);
  color: var(--ocean);
}

/* Liste d'autocomplétion (API Adresse / BAN) */
.geo-bar__suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  max-height: 280px;
  overflow-y: auto;
}

.geo-suggestion {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--text-mid);
  border-radius: var(--r);
  cursor: pointer;
}

.geo-suggestion svg {
  flex-shrink: 0;
  color: var(--text-soft);
}

.geo-suggestion:hover,
.geo-suggestion.is-active {
  background: var(--surface-mid);
  color: var(--text);
}

/* ===== Vue divisée ===== */
.split-view {
  display: flex;
  gap: 20px;
  height: calc(100vh - 240px);
  min-height: 600px;
}

.split-view__list {
  width: 40%;
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
}

.split-view__list::-webkit-scrollbar {
  width: 4px;
}

.split-view__list::-webkit-scrollbar-track {
  background: var(--surface-mid);
  border-radius: 2px;
}

.split-view__list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.split-view__map {
  flex: 1;
  height: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1.5px solid var(--border);
  box-shadow: var(--sh-md);
  /* Isole les z-index internes de Leaflet (panes 400, contrôles 1000) sous la
     barre de filtres sticky (z-index 40), sinon la carte passe par-dessus. */
  position: relative;
  z-index: 1;
}

#map {
  width: 100%;
  height: 100%;
}

/* ===== Grille partenaires ===== */
.partners-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 32px;
}

/* ===== Carte partenaire ===== */
.card {
  background: var(--white);
  border: 1.5px solid var(--border-light);
  border-top: 3px solid transparent; /* remplacé au hover sans layout shift */
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--ease), border-color var(--ease);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Barre corail en haut, animée au hover */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ease);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.card:hover {
  box-shadow: var(--sh-md);
  border-color: var(--border);
}

.card:hover::before {
  transform: scaleX(1);
}

.card__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 7px;
}

/* Étiquette catégorie en haut, poussée à droite ; nom en dessous en pleine largeur.
   On empile pour laisser au nom toute la largeur (sinon l'étiquette `nowrap` le
   condense sur plusieurs lignes). Passer à `flex-start` pour l'aligner à gauche. */
.card__badge {
  order: -1;
  align-self: flex-end;
}

.card__name {
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ocean);
  letter-spacing: -0.01em;
}

.card__badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 4px 9px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1.5px solid;
  border-radius: var(--r-sm);
}

.card__badge--garage {
  border-color: var(--ocean-pale);
  color: var(--ocean);
  background: var(--surface-mid);
}

.card__badge--vendeur {
  border-color: var(--gold);
  color: var(--gold-dark);
  background: var(--gold-tint);
}

.card__address,
.card__phone {
  font-size: 0.83rem;
  color: var(--text-soft);
  margin-bottom: 5px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.card__address svg,
.card__phone svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.45;
}

.card__links {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 8px 13px;
  min-height: 38px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}

/* Maps — bleu océan */
.card__link--maps {
  background: var(--ocean);
  color: var(--white);
  border-color: var(--ocean);
}

.card__link--maps:hover {
  background: var(--ocean-mid);
  border-color: var(--ocean-mid);
  color: var(--white);
}

/* Waze — or signature */
.card__link--waze {
  background: var(--gold);
  color: var(--ocean);
  border-color: var(--gold);
}

.card__link--waze:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--ocean);
}

/* Tel — ghost */
.card__link--tel {
  background: transparent;
  color: var(--ocean);
  border-color: var(--border);
}

.card__link--tel:hover {
  border-color: var(--ocean);
  background: var(--surface);
  color: var(--ocean);
}

/* Bouton « Appeler » (fiches à deux numéros) — reset des styles natifs <button> */
button.card__link {
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}

/* Menu de choix entre les deux numéros */
.card__call {
  position: relative;
  display: inline-flex;
}

.card__call-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  min-width: 160px;
  padding: 6px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 31, 82, 0.16);
}

.card__call.is-open .card__call-menu {
  display: flex;
}

.card__call-option {
  padding: 9px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ocean);
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.card__call-option:hover {
  background: var(--surface);
}

/* Site web — puce dorée : tint discret au repos, dégradé or + soulèvement au survol */
.card__link--web {
  background: var(--gold-tint);
  color: var(--gold-dark);
  border-color: var(--gold);
  transition: background var(--ease), color var(--ease),
              box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}

.card__link--web:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: var(--gold);
  color: var(--ocean);
  box-shadow: 0 5px 14px rgba(233, 181, 68, 0.4);
  transform: translateY(-1px);
}

.card__link--web:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(233, 181, 68, 0.35);
}

/* ===== Aucun résultat ===== */
.no-results {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-soft);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-xl);
  background: var(--white);
}

.no-results p {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.no-results span { font-size: 0.88rem; }

/* ===== Bouton « Voir plus » (liste mobile) ===== */
.list-more {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 14px 16px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ocean);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.list-more:hover {
  background: var(--ocean);
  border-color: var(--ocean);
  color: var(--white);
}

/* ===== Badge distance (géoloc active) ===== */
.card__distance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--coral-tint);
  border: 1.5px solid var(--coral);
  border-radius: 9999px;
  padding: 3px 10px;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}

.card__distance svg { opacity: 0.8; }

/* Fiche mise en avant (clic marqueur / popup) */
.card--active {
  border-color: var(--ocean-light) !important;
  box-shadow: 0 0 0 3px rgba(10, 52, 120, 0.18), var(--sh-md) !important;
}

/* ===== Bouton géolocalisation (contrôle Leaflet) ===== */
.locate-btn {
  width: 34px;
  height: 34px;
  background: var(--white);
  border: none;
  border-radius: var(--r);
  color: var(--ocean);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  transition: background var(--ease), color var(--ease);
}

.locate-btn:hover { background: var(--surface); color: var(--coral); }

.locate-btn--loading {
  pointer-events: none;
  opacity: 0.6;
}

.locate-btn--loading svg {
  animation: locate-spin 0.8s linear infinite;
}

@keyframes locate-spin {
  to { transform: rotate(360deg); }
}

/* ===== Footer ===== */
.footer {
  background: var(--border-light);
  color: var(--text-mid);
  padding: 60px 0 32px;
  border-top: 3px solid var(--coral);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

.footer__brand { max-width: 320px; }

.footer__name {
  font-family: 'Manrope', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ocean);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer__desc {
  font-size: 0.83rem;
  line-height: 1.75;
}

.footer__contact-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ocean);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.footer__contact-title::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.footer__contact p { font-size: 0.83rem; line-height: 1.9; }

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__links a {
  color: var(--text-mid);
  font-size: 0.83rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color var(--ease);
}

.footer__links a:hover { color: var(--ocean); }

.footer a { color: var(--ocean); }
.footer a:hover { color: var(--accent-ink); }

.footer__bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer__copy {
  font-size: 0.7rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}