/* =========================================================================
   annuaire.css — Chargé uniquement sur le template `annuaire`.
   Deux vues : .map-tab (carte, desktop) et .list-tab (liste, mobile/onglet),
   basculées par .switch-tab (cf. assets/js/annuaire-list.js).
   ========================================================================= */

/* Le H1 est dans le hero (cf. comprendre.css) : la section carte/liste
   démarre directement sous le bandeau, d'où ce padding-top court. */
.annuaire .section {
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter) var(--space-section);
}

/* --- Bascule des deux vues -------------------------------------------------
   Défaut piloté par le viewport : desktop → carte, mobile → liste (AmCharts
   est inutilisable sur petit écran). Les classes .view-map / .view-list,
   posées par annuaire-list.js, forcent une vue quel que soit le viewport.
   Les blocs responsive plus bas définissent le défaut par breakpoint. */
.annuaire .is-hidden { display: none !important; }

/* Forçage manuel via le bouton « Rechercher par carte / liste ». */
.annuaire.view-list .map-tab  { display: none; }
.annuaire.view-list .list-tab { display: flex; }
.annuaire.view-map  .map-tab  { display: block; }
.annuaire.view-map  .list-tab { display: none; }

/* --- Filtres par type (pastilles) ----------------------------------------- */
.filters {
  overflow: auto;
  margin-bottom: 1rem;
  padding: 0;
  list-style: none;
}
.filters li {
  list-style: none;
  float: left;
}
.filters li button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem;
  border: 1px solid #282478;
  border-radius: var(--radius-pill);
  height: 2.25rem;
  padding: 0 1.1rem;
  background-color: #edecff;
  color: var(--c-purple-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.filters li button .text {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-transform: capitalize;
  /* League Spartan place le glyphe haut dans sa boîte : on décale le texte
     vers le bas pour le recentrer optiquement avec l'icône. */
  padding-top: 0.18em;
}
/* Icône de type, portée par le span (.gyn / .sag-fem / .med-gen / …) */
.filters li button .text.gyn::before,
.filters li button .text.sag-fem::before,
.filters li button .text.med-gen::before,
.filters li button .text.centre-spe::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  /* compense le padding-top du texte pour garder l'icône centrée */
  margin-top: -0.18em;
}
.filters li button .text.gyn::before {
  background-image: url("../img/map/icon_gynecologue.svg");
}
.filters li button .text.sag-fem::before {
  background-image: url("../img/map/icon_sage_femme.svg");
}
.filters li button .text.med-gen::before {
  background-image: url("../img/map/icon_docteur.svg");
}
.filters li button .text.centre-spe::before {
  background-image: url("../img/map/icon_centre_specialise.svg");
}
.filters li:hover button,
.filters li.active button {
  border: 1px solid #282478;
  background: #d8d6ff;
  color: var(--c-purple-dark);
  outline: none;
  box-shadow: none;
}

/* --- En-tête de la vue carte (filtres + résultats + switch) --------------- */
.map-tab__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}
/* Largeurs calquées sur .map-tab__body (carte 60% | liste) pour que la colonne
   droite démarre au niveau de la liste. */
.map-tab .filters {
  flex: 0 0 60%;
}
.map-tab__results {
  flex: 1;
  text-align: right;
}
.map-tab__switch { margin-bottom: 0.5rem; }

.switch-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--c-white);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  padding: 0.6rem 1.4rem;
  cursor: pointer;
}
/* Recentrage optique : League Spartan a une métrique haute. */
.switch-tab .text {
  padding-top: 0.18em;
}
.switch-tab:hover { background-color: var(--c-purple); }

/* Fil d'Ariane des résultats (région / dépt / ville actifs). Hauteur figée à
   celle d'un bouton actif : les boutons passent de masqué à visible selon le
   drill-down, sans quoi tout le .map-tab__body se décalerait verticalement. */
#listFilters {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  min-height: 2.25rem;
  /* Aligne la barre sur le bord gauche des cartes de la liste. */
  padding-left: 1.3rem;
  color: var(--c-purple-dark);
}
#listFilters #activeResults {
  display: inline-flex;
  align-items: center;
}
#listFilters button {
  visibility: hidden; /* masqué tant qu'inactif (drill-down) */
  margin: 0 0 0 0.4rem;
  border: none;
  border-radius: var(--radius-pill);
  height: 2.25rem;
  /* Croix d'annulation : cliquer remonte d'un cran dans le drill-down. */
  padding: 0 1.9rem 0 1rem;
  background: url("../img/map/icon_close.svg") right 0.6rem center / 12px 12px no-repeat var(--c-purple-light);
  color: var(--c-purple-dark);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
#listFilters .active {
  color: #282478;
  visibility: visible;
}

/* --- Corps de la vue carte : carte + liste latérale ----------------------- */
.map-tab__body {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
}
#chartdiv {
  flex: 0 0 60%;
  height: 65vh;
  padding-top: 1rem;
}
.pro-list {
  flex: 1;
  padding: 0 1rem;
  margin: 0;
  overflow: auto;
  height: 65vh;
  list-style: none;
}

/* --- Cartes pro (liste latérale + liste mobile) --------------------------- */
.pro-list li,
#list-pro li {
  list-style: none !important;
  margin: 0.3rem;
  border-radius: var(--radius-sm);
  background-color: var(--c-white);
  color: var(--c-purple);
}

.user-card {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}
.profile-image {
  width: 100px;
  height: 100px;
  margin: 1.875rem;
  flex: 0 0 auto;
}
.user-info { flex: 1; }
.user-info .name {
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--c-purple-dark);
  margin-bottom: 10px;
}
.user-info .type {
  font-weight: var(--fw-medium);
  color: var(--c-coral);
}
.user-info .type,
.user-info .address,
.user-info .phone {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.user-info .type img,
.user-info .address img,
.user-info .phone img {
  margin-right: 0.5rem;
}

/* --- Vue liste (mobile / onglet) ------------------------------------------ */
.list-tab {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 1.5rem;
}
#list-display { flex: 1 1 60%; }
#list-display > p {
  color: var(--c-purple-dark);
  font-weight: var(--fw-medium);
  margin-bottom: 1rem;
}
#list-pro { padding: 0; margin: 0; list-style: none; }

.list-filters { flex: 1 1 35%; }
.list-filters__switch {
  text-align: right;
  margin-bottom: 1rem;
}
.list-filters .select { width: 100%; }
#listFilters-dep {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--c-purple-dark);
  background: var(--c-white);
  padding: 10px;
  font-family: var(--font-sans);
  font-size: large;
  color: var(--c-purple-dark);
}
#listFilters-dep option { padding: 10px; font-size: large; }

.filter-no-result {
  color: var(--c-coral);
  font-weight: var(--fw-medium);
  margin: 0.5rem;
}

/* --- FAQ de bas de page ---------------------------------------------------
   Composant partagé (.faq, components.css). Ici sans titre, les questions
   arrivent directement sous la carte. */
.an-faq {
  padding-top: 0;
}

/* --- Responsive ----------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  /* Desktop : vue carte par défaut, liste masquée (sauf forçage .view-list). */
  .annuaire:not(.view-list) .map-tab  { display: block; }
  .annuaire:not(.view-list) .list-tab { display: none; }
  .list-tab { flex-direction: row; justify-content: flex-start; }
}

@media screen and (max-width: 1023px) {
  /* Mobile : vue liste par défaut, carte masquée (sauf forçage .view-map).
     La carte + sa liste latérale 60/40 sont illisibles sous 1024px. */
  .annuaire:not(.view-map) .map-tab  { display: none; }
  .annuaire:not(.view-map) .list-tab { display: flex; }

  /* La carte n'est pas navigable au doigt : on masque le bouton qui y mène. */
  .list-filters__switch { display: none; }

  /* Le --gutter de section et le padding latéral des items se cumulaient et
     rétrécissaient trop les cartes : on réduit les deux. */
  .an-faq { padding-inline: 1rem; }
  .an-faq .faq__item { padding-inline: 10px; }

  .annuaire .section { padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem var(--space-section); }
  #list-pro .user-card { padding: 1rem; }
  #list-pro .user-card .profile-image { margin: 0 1rem 0 0; }
  #list-pro .user-card .user-info { align-self: flex-start; }

  /* Vue carte forcée en mobile : on empile tout en une colonne pleine largeur,
     sinon la carte et sa liste se partagent 60/40 et deviennent illisibles. */
  .map-tab__head { flex-direction: column; gap: 1rem; }
  .map-tab .filters { flex: 0 0 auto; }
  .map-tab__results { width: 100%; text-align: left; }
  /* Switch à gauche et fil d'Ariane en dessous : on annule le calage droit
     hérité du desktop. */
  .map-tab__switch { margin-bottom: 0; }
  #listFilters { padding-left: 0; margin-top: 0.75rem; }

  .map-tab__body { flex-direction: column; gap: 1.5rem; }
  #chartdiv { flex: 0 0 auto; width: 100%; height: 55vh; }
  .pro-list { flex: 0 0 auto; width: 100%; height: auto; max-height: 60vh; padding: 0; }
}

@media (max-width: 600px) {
  .user-card { flex-direction: row; }
  .user-card .profile-image {
    width: 4.375rem;
    height: auto;
    margin: 0 1rem 15px 0 !important;
  }
  .user-card .address { line-height: 1.3rem; }
}