/* ================================
   AFO – Projections Map/List UI
   ================================ */

#proj-wrap,
#proj-wrap * {
  box-sizing: border-box;
}

#proj-wrap img {
  max-width: 100%;
  /*height: auto;*/
  display: block;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Filtres ---------- */

.proj-filters {
  margin: 0 0 32px;
}

.proj-filters .f-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
  align-items: flex-end;
}

@media (max-width: 960px) {
  .proj-filters .f-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.proj-filters label {
  display: block;
}

.proj-filters label span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--global-heading-font-family);
  font-size: 16px;
  font-weight: 600;
}

/* Selects avec flèche custom */

.proj-filters select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  border: 1px solid #33224d;
  border-radius: 4px;
  padding: 0 44px 0 14px;
  background-color: #fff;
  font-family: var(--global-heading-font-family);
  font-size: 16px;
  line-height: 1.3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16' fill='none'><g clip-path='url(%23clip0)'><path d='M3.04706 4.61158C2.96814 4.55171 2.87531 4.5049 2.77386 4.47383C2.67241 4.44276 2.56433 4.42804 2.45579 4.43051C2.34725 4.43297 2.24038 4.45257 2.14128 4.4882C2.04218 4.52382 1.95279 4.57476 1.87822 4.63812C1.80364 4.70148 1.74534 4.77601 1.70664 4.85745C1.66794 4.9389 1.6496 5.02567 1.65267 5.1128C1.65574 5.19994 1.68016 5.28574 1.72454 5.36529C1.76891 5.44485 1.83236 5.51662 1.91128 5.57649L9.35088 11.2173C9.50436 11.3338 9.70756 11.3987 9.91877 11.3987C10.13 11.3987 10.3332 11.3338 10.4867 11.2173L17.9271 5.57649C18.0077 5.51701 18.0729 5.44526 18.1187 5.36541C18.1645 5.28556 18.1901 5.1992 18.194 5.11134C18.1979 5.02348 18.18 4.93587 18.1413 4.85361C18.1027 4.77135 18.0441 4.69607 17.9689 4.63215C17.8937 4.56823 17.8034 4.51694 17.7034 4.48126C17.6033 4.44558 17.4953 4.42622 17.3859 4.4243C17.2764 4.42239 17.1675 4.43796 17.0656 4.47011C16.9637 4.50226 16.8707 4.55034 16.7921 4.61158L9.91877 9.82237L3.04706 4.61158Z' fill='black'/></g><defs><clipPath id='clip0'><rect width='15.927' height='19.8389' fill='white' transform='translate(0 15.927) rotate(-90)'/></clipPath></defs></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 16px;
}

/* Boutons */

.proj-filters .f-actions {
  margin-top: 24px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.btn-primary,
.btn-ghost {
  border-radius: 999px;
  padding: 16px 64px;
  font-family: Poppins, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: #33224d;
  color: #fff;
}

.btn-ghost {
  background: #da237f;
  color: #fff;
}

/* Focus visibles */

#proj-wrap :where(a, button, [tabindex="0"], select) {
  outline: none;
}

#proj-wrap :where(a, button, [tabindex="0"], select):focus-visible {
  outline: 2px solid #da237f;
  outline-offset: 2px;
}

#proj-filters select:focus {
  outline: 2px solid var(--global-palette2);
  outline-offset: 2px;
}

/* ---------- Barre du haut ---------- */

/* ----- Toolbar : compteur à gauche, onglets centrés ----- */

#proj-toolbar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 0 8px;
  margin: 0 0 8px;
  min-height: 60px; /* pour laisser la place aux icônes centrées */
}

/* Compteur : juste à gauche */
#proj-count {
  margin: 0;
  font-size: 16px;
  color: #111;
  font-weight: 600;
  flex: 0 0 auto;
}

/* Onglets Liste / Carte : toujours centrés horizontalement */
#proj-toolbar .tabs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  gap: 16px;
}

/* ---------- Responsive : on repasse en colonne sur mobile ---------- */

@media (max-width: 768px) {
  #proj-toolbar {
    flex-direction: column;
    align-items: center;
    min-height: auto;
  }

  #proj-count {
    align-self: flex-start;
  }

  #proj-toolbar .tabs {
    position: static;
    transform: none;
    margin-left: auto;
    margin-right: auto;
  }
}


/* Tabs Liste / Carte */

#proj-toolbar .tabs {
  margin-left: auto;
  margin-right: auto;
  display: inline-flex;
  gap: 16px;
}

#proj-toolbar .tab-btn {
  appearance: none;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  box-shadow: none;
}

#proj-toolbar .tab-btn svg {
  display: block;
  width: 42px;
  height: auto;
}

/* Couleurs des icônes tabs */
#proj-toolbar .tab-btn svg path {
  fill: #33224d;
  transition: fill 0.15s ease;
}

#proj-toolbar .tab-btn:hover svg path,
#proj-toolbar .tab-btn:focus-visible svg path,
#proj-toolbar .tab-btn[aria-pressed="true"] svg path {
  fill: #da237f;
}

/* ---------- Toggle vues ---------- */

#proj-map[hidden],
#proj-list[hidden],
#proj-map-wrap[hidden] {
  display: none !important;
}

/* ---------- Grille Liste ---------- */

#proj-list {
  padding: 8px 0 18px;
}

.proj-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 960px) {
  .proj-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
}


/* ---------- Carte + panneau ---------- */

#proj-map-wrap {
  position: relative;
}

#proj-map {
  height: min(80vh, 860px);
  overflow: hidden;
}

.leaflet-container a {
  color: #005fcc;
  display:none;
}

/* Panneau latéral (coin coupé + bord noir) */
.proj-sidepanel {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  max-width: 680px;
  padding: 30px;
  background: #fff;
  color: #111;
  overflow: auto;
  z-index: 500;
  border: 1px solid var(--global-palette1); 
}


.proj-sidepanel[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .proj-sidepanel {
    width: 100%;
    max-width: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  }
}

/* Bouton fermeture */

.pp-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  appearance: none;
  border: none;
  background: var(--global-palette1);
  color: #fff;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* Marqueur sélectionné */

.leaflet-marker-icon {
  transition: transform 180ms ease, filter 180ms ease;
}

.leaflet-marker-icon.is-open {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
  transform: translateZ(0);
}

/* ---------- Pills de filtres actifs ---------- */

.proj-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.proj-active-filters.is-empty {
  display: none;
}

.proj-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid #33224d;
  padding: 6px 14px;
  background: #fff;
  color: #33224d;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.proj-pill .proj-pill-close {
  font-size: 14px;
  line-height: 1;
}

.proj-pill--reset {
  border-style: dashed;
  opacity: 0.85;
}

/* Inline filters summary (pills) */

.proj-filters-inline {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 16px;
  margin-bottom: 10px;
}

.proj-filters-inline-label {
  font-size: 16px;
  font-weight: 600;
}

.proj-filters-inline.is-visible {
  display: inline-flex;
}

/* Taille 16px sur les pills */
.proj-active-filters,
.proj-pill {
  font-size: 16px !important;
}

/* ---------- Pagination ---------- */

.proj-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 24px 0 10px;
  font-size: 0;
}

.proj-pagination button {
  appearance: none;
  border: 1px solid var(--global-palette1);
  background: #ffffff;
  color: #000000;

  min-width: 44px;
  height: 44px;
  padding: 0 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 4px;
  cursor: pointer;

  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

/* Page active */
.proj-pagination .is-active {
  background: var(--global-palette1);
  color: #ffffff;
  border-color: var(--global-palette1);
}

/* Ellipsis */
.proj-pagination .ellipsis,
.proj-pagination .dots {
  min-width: auto;
  padding: 0 6px;
  border: 0;
  background: transparent;
  cursor: default;
  box-shadow: none;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

/* Hover / focus */
.proj-pagination button:not(.ellipsis):hover,
.proj-pagination button:not(.ellipsis):focus-visible {
  background: var(--global-palette1);
  color: #ffffff;
  outline: none;
}

/* Focus clavier fort sur la page active */
.proj-pagination button.is-active:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Responsive pagination */
@media (max-width: 480px) {
  .proj-pagination button {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 16px;
    border-radius: 10px;
  }
}