/* ================================
   AFO – Projections Map/List UI (CURRENT)
   (ajustements : espacements uniquement)
   ================================ */

#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(4, 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 ---------- */

#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;
}

#proj-count {
  margin: 0;
  font-size: 16px;
  color: #111;
  font-weight: 600;
  flex: 0 0 auto;
}

#proj-toolbar .tabs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  gap: 16px;
}

@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 .tab-btn {
  position: relative;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
  box-shadow: none;
  padding: 5px;
  border-radius: 999px;
}

#proj-toolbar .tab-btn svg { display: block; width: 42px; height: auto; }
#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; }

#proj-toolbar .tab-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px #da237f; }
#proj-toolbar .tab-btn:focus-visible { box-shadow: 0 0 0 2px #da237f; outline: 2px solid var(--global-palette2);
    outline-offset: 5px;
}

/* ---------- 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; }
}

/* ---------- Cartes + contenu .pp-* ---------- */

.proj-card {
  position: relative;
  padding: 32px;
  background: #fff;
  color: #111;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20681%20830'%3E%3Cpath%20d='M0.5%200.5H680.5V774.397L625.72%20829.5H0.5Z'%20fill='none'%20stroke='%232a114a'%20stroke-width='1'%20stroke-opacity='0.4'/%3E%3C/svg%3E");
  border-image-slice: 60 fill;
  border-image-width: 50;
  border-image-repeat: stretch;
}

.proj-card .proj-panelcard {
  font: inherit;
  color: inherit;
  position: relative;
  /*padding-right: 56px;*/
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pp-row-12 { display: grid; grid-template-columns: 0.6fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 560px) { .pp-row-12 { grid-template-columns: 1fr; } }

.pp-film-thumb { display: block; height: 250px; width: auto; max-width: 100%; object-fit: contain; }
.pp-film-thumb--empty { height: 100px; width: 100%; background: #f2f2f2; }

.pp-h3 { margin: 0 0 4px; color: var(--Magenta, #c52073); font-family: Poppins, system-ui, sans-serif; font-size: 16px; font-weight: 700; }
.pp-h2 { margin: 0 0 6px !important; color: var(--global-palette1); font-family: "BBB Poppins TN", Poppins, system-ui, sans-serif; font-size: 30px; font-weight: 700; line-height: 1.4; }
.pp-title-link { text-decoration: none; }
.pp-title-link:hover { text-decoration: none; }

.pp-datetime { margin: 2px 0 6px 0; font-size: 18px; color: var(--global-palette1); font-weight: 600; }

.pp-lieu { margin: 4px 0 0 0; display: grid; gap: 0; }
.pp-lieu-name, .pp-lieu-addr { margin: 0; font-size: 18px; line-height: 1.5; }
.pp-lieu-name { font-weight: 600; margin-bottom: 0 !important; }

.pp-zone3 { margin-top: 12px; display: flex; flex-direction: column; flex: 1; }
.pp-excerpt { margin: 0; font-size: 18px; }

/* (spacing) rythme entre excerpt et metaLine */
.pp-row-taxline { margin-top: 12px; }

.pp-meta { margin: 0; font-size: 18px; color: var(--global-palette1); font-weight: 600; }

.pp-row-4 { margin-top: 12px; }
.pp-h4 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }

.pp-partners { display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; }
.pp-partner-thumb {
  max-height: 70px !important;
    height: auto !important;
    width: auto !important;
    max-width: 140px!important;
    object-fit: contain !important;
    background: #fff;
    filter: grayscale(1);
}

.pp-actions { display: flex; gap: 8px; align-items: center; margin-top: auto; }

.pp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #33224d;
  background: #fff;
  font-size: 18px;
  line-height: 18px;
  font-family: "BBB Poppins TN Display", Helvetica, Arial, sans-serif;
  font-weight: 600;
  border-radius: 80px;
  border: 2px solid #33224d;
  padding: 20px 40px;
  margin: 0;
  text-decoration: none;
}
.pp-cta:hover { color: var(--global-palette9); text-decoration: none; }

/* (spacing) partenaires après le CTA */
.pp-actions + .pp-partners { margin-top: 12px; }

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

#proj-map-wrap { position: relative; }
#proj-map { height: min(90vh, 860px); overflow: hidden; }

.proj-sidepanel {
  --cut: 58px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  max-width: 680px;
  background: #fff;
  color: #111;

  /* (spacing) aligné sur projection-map.css */
  padding: 30px;

  overflow: auto;
  z-index: 500;
  box-shadow: inset 0 0 0 2px #000000;
}

.proj-sidepanel[hidden] { display: none !important; }
aside.proj-sidepanel { --cut: 0px; }

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

.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;
  padding: 3px 0px 0px;
}

/* 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 + pagination ---------- */

.proj-active-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.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: 16px !important; font-weight: 600; cursor: pointer; }
.proj-pill--reset { border-style: dashed; opacity: 0.85; }

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

.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: #fff;
  color: #000;
  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;
}
.proj-pagination .is-active { background: var(--global-palette1); color: #fff; border-color: var(--global-palette1); }
.proj-pagination .ellipsis { min-width: auto; padding: 0 6px; border: 0; background: transparent; cursor: default; box-shadow: none; font-size: 18px; font-weight: 600; line-height: 1; }
.proj-pagination button:not(.ellipsis):hover,
.proj-pagination button:not(.ellipsis):focus-visible { background: var(--global-palette1); color: #fff; outline: none; }
.proj-pagination button.is-active:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

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

/* Ajout is past */
/* Projections passées – repère visuel discret */
.proj-card.is-past,
.proj-panelcard.is-past{
  opacity: .92;
}

/* Tag "Passée" (sans toucher au texte) */
.proj-card.is-past .pp-h3,
.proj-panelcard.is-past .pp-h3{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.proj-card.is-past .pp-h3::after,
.proj-panelcard.is-past .pp-h3::after{
  content: "Passée";
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid currentColor;
  line-height: 1;
}

/* ================================
   A11Y – Hardening carte non focusable
   (ne change rien visuellement, empêche juste les outlines/focus accidentels)
   ================================ */
#proj-map[tabindex="-1"]:focus { outline: none !important; }
/* ================================
   A11Y PATCH (Leaflet) – append-only
   Objectif : éviter focus/outline “fantôme” dans la carte
   Sans impact visuel normal (seulement si Leaflet injecte du focus)
   ================================ */

/* Si un navigateur force un focus sur le container Leaflet */
#proj-map-wrap .leaflet-container:focus,
#proj-map-wrap .leaflet-container:focus-visible {
  outline: none !important;
}

/* Si malgré tout un control Leaflet devient focusable */
#proj-map-wrap .leaflet-control a:focus,
#proj-map-wrap .leaflet-control a:focus-visible,
#proj-map-wrap .leaflet-control button:focus,
#proj-map-wrap .leaflet-control button:focus-visible,
#proj-map-wrap .leaflet-control-attribution a:focus,
#proj-map-wrap .leaflet-control-attribution a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Empêche un highlight “touche” sur mobile si Leaflet/UA l’ajoute */
#proj-map-wrap .leaflet-container,
#proj-map-wrap .leaflet-control a,
#proj-map-wrap .leaflet-control button {
  -webkit-tap-highlight-color: transparent;
}
/* ================================
   A11Y PATCH – Markers Leaflet non focusables (append-only)
   Objectif : si un tabindex apparaît malgré tout sur une icône marker,
   on supprime outline/box-shadow et évite tout “focus fantôme”.
   ================================ */
#proj-map-wrap .leaflet-marker-icon[tabindex],
#proj-map-wrap .leaflet-marker-icon[tabindex]:focus,
#proj-map-wrap .leaflet-marker-icon[tabindex]:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}