/* ============================================================
   CARTE DISTRIBUTION — Feuille de style complète
   Cohérente avec le design doré / parchemin des filtres
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');

/* ── Variables ── */
:root {
  --gold:         #B8892A;
  --gold-light:   #D4A843;
  --gold-dim:     rgba(184,137,42,.10);
  --gold-focus:   rgba(184,137,42,.15);
  --gold-border:  rgba(184,137,42,.25);
  --bg:           #F5F2EC;
  --panel:        #FFFFFF;
  --border:       #E2D9C8;
  --text:         #1E1A14;
  --text-muted:   #9A8F7E;
  --text-soft:    #5C5245;
  --shadow-sm:    rgba(100,80,40,.08);
  --shadow-md:    rgba(100,80,40,.13);
  --radius:       14px;
  --radius-sm:    9px;
}

/* ── Reset minimal ── */
.views-element-container *,
.views-element-container *::before,
.views-element-container *::after {
  box-sizing: border-box;
}

/* ============================================================
   LAYOUT GÉNÉRAL
   ============================================================ */

.views-element-container {
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  background: var(--bg);
  padding: 1.5rem;
}

/* ============================================================
   FILTRES — reprise du style précédent
   ============================================================ */

.zakat-filters {
  width: 100%;
  margin-bottom: 1.5rem;
}

.filter-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.2rem;
}
.filter-header__icon {
  width: 34px; height: 34px;
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--gold);
  flex-shrink: 0;
}
.filter-header__title {
  font-family: 'Syne', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.filter-header__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}

.zakat-filters .views-exposed-form {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  box-shadow: 0 2px 4px var(--shadow-sm), 0 8px 32px rgba(100,80,40,.07),
              inset 0 1px 0 rgba(255,255,255,.9);
}

.zakat-filters .form--inline {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1rem 1.25rem;
  align-items: end;
}

.zakat-filters .form-item-field-livreur-target-id { grid-column: 1 / -1; }
.zakat-filters .form-item-field-a-ete-livre-value { grid-column: 1 / 2; align-self: center; }
.zakat-filters .form-actions                      { grid-column: 3 / 4; justify-self: end; }

.zakat-filters label:not(.form-check-label) {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .42rem;
}

.zakat-filters .form-control,
.zakat-filters input[type="text"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .62rem .85rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .875rem;
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.zakat-filters .form-control::placeholder,
.zakat-filters input[type="text"]::placeholder { color: #C4BAA8; }
.zakat-filters .form-control:focus,
.zakat-filters input[type="text"]:focus {
  background: #FFFDF8;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-focus);
}

.zakat-filters select.form-select {
  width: 100%;
  background: var(--bg);
  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='%23B8892A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .62rem 2.2rem .62rem .85rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .875rem;
  color: var(--text);
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.zakat-filters select.form-select:focus {
  background-color: #FFFDF8;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-focus);
}

.zakat-filters .form-check {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .52rem 3rem;
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
  width: fit-content;
}
.zakat-filters .form-check:hover {
  background: rgba(184,137,42,.16);
  border-color: var(--gold-light);
  box-shadow: 0 2px 8px rgba(184,137,42,.12);
}
.zakat-filters .form-check-input {
  appearance: none;
  width: 17px; height: 17px;
  border: 2px solid #C9A055;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background .18s, border-color .18s, transform .15s;
}
.zakat-filters .form-check-input:checked {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(.93);
}
.zakat-filters .form-check-input:checked::after {
  content: '';
  position: absolute;
  top: 1px; left: 4px;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.zakat-filters .form-check-label {
  font-size: .82rem;
  font-weight: 500;
  color: #7A5C1E;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.zakat-filters input[type="submit"] {
  appearance: none;
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: .65rem 1.5rem;
  font-family: 'Syne', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 3px 12px rgba(184,137,42,.35);
  white-space: nowrap;
}
.zakat-filters input[type="submit"]:hover {
  background: var(--gold-light);
  box-shadow: 0 5px 18px rgba(184,137,42,.45);
  transform: translateY(-1px);
}
.zakat-filters input[type="submit"]:active { transform: translateY(0); }

/* ============================================================
   BOUTON TOURNÉE
   ============================================================ */

.tournee-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  padding: .55rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Syne', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color .2s, color .2s, box-shadow .2s, transform .15s;
  box-shadow: 0 1px 4px var(--shadow-sm);
}
.tournee-button:hover {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 3px 10px rgba(184,137,42,.15);
  transform: translateY(-1px);
}

/* ============================================================
   MODAL TOURNÉE
   ============================================================ */

.tournee-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30,26,20,.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.tournee-modal.is-open { display: flex; }

.tournee-content {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  width: min(520px, 90vw);
  box-shadow: 0 20px 60px rgba(100,80,40,.2);
  animation: modalIn .25s cubic-bezier(.22,1,.36,1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tournee-content h3 {
  font-family: 'Syne', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}

.tournee-content textarea {
  width: 100%;
  min-height: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  color: var(--text);
  resize: vertical;
  outline: none;
  line-height: 1.6;
}
.tournee-content textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-focus);
}

.tournee-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
  justify-content: flex-end;
}

.tournee-actions button {
  padding: .55rem 1.2rem;
  border-radius: var(--radius-sm);
  font-family: 'Syne', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  border: 1px solid transparent;
}
#copy-tournee {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 3px 10px rgba(184,137,42,.3);
}
#copy-tournee:hover { background: var(--gold-light); }
#close-tournee {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
#close-tournee:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ============================================================
   CARTE LEAFLET
   ============================================================ */

#zakat-map {
  width: 100%;
  height: 520px !important;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px var(--shadow-md);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

/* Clusters Leaflet — teinte dorée */
.marker-cluster-small  { background-color: rgba(184,137,42,.25) !important; }
.marker-cluster-medium { background-color: rgba(184,137,42,.35) !important; }
.marker-cluster-large  { background-color: rgba(184,137,42,.45) !important; }

.marker-cluster-small  div,
.marker-cluster-medium div,
.marker-cluster-large  div {
  background-color: rgba(184,137,42,.85) !important;
  color: #fff !important;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: .8rem;
}

/* ============================================================
   LISTE — section header
   ============================================================ */

.zakat-list-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
}
.zakat-list-header__icon {
  width: 34px; height: 34px;
  background: var(--gold-dim);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--gold);
  flex-shrink: 0;
}
.zakat-list-header__title {
  font-family: 'Syne', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.zakat-list-header__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}

/* ============================================================
   LISTE — grille 2 colonnes
   ============================================================ */

.zakat-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.zakat-list .views-row {
  width: 100% !important;
}

/* ── Carte individuelle ── */
.views-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: .2rem .75rem;
  align-items: start;
  box-shadow: 0 1px 3px var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative;
  overflow: hidden;
}
.views-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--border);
  transition: background .2s;
}
.views-row:hover {
  border-color: var(--gold-border);
  box-shadow: 0 4px 16px rgba(184,137,42,.12);
  transform: translateY(-1px);
}
.views-row:hover::before {
  background: var(--gold);
}

/* Nom — ligne 1, col 1 */
.views-field-title {
  grid-column: 1; grid-row: 1;
}
.views-field-title .field-content {
  font-family: 'Syne', sans-serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

/* Adresse — ligne 2, col 1 */
.views-field-field-adresse,
.views-field-field-code-postal,
.views-field-field-ville {
  grid-column: 1;
}
.views-field-field-adresse .field-content {
  font-size: .78rem;
  color: var(--text-soft);
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.4;
}

/* Code postal + ville : sur une même ligne */
.views-field-field-code-postal,
.views-field-field-ville {
  display: inline;
}
.views-field-field-code-postal { margin-right: .25rem; }
.views-field-field-code-postal .field-content,
.views-field-field-ville .field-content {
  display: inline;
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: .02em;
}

/* Livreur (discret, si vide ne prend pas de place) */
.views-field-field-livreur .field-content:empty { display: none; }
.views-field-field-livreur .field-content {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: var(--gold);
  font-weight: 500;
  background: var(--gold-dim);
  padding: .15rem .5rem;
  border-radius: 20px;
  border: 1px solid var(--gold-border);
  margin-top: .25rem;
}

/* Téléphone — ligne 1, col 2 */
.views-field-field-telephone {
  grid-column: 2; grid-row: 1;
}
.views-field-field-telephone .field-content {
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Actions — ligne 3, col 1-2 */
.views-field-edit-node,
.views-field-nothing {
  grid-row: 3;
  align-self: end;
}
.views-field-edit-node { grid-column: 1; }
.views-field-nothing   { grid-column: 2; text-align: right; }

/* Liens */
.views-field-edit-node a,
.views-field-nothing a {
  font-size: .72rem;
  font-weight: 600;
  font-family: 'Syne', sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  padding: .28rem .65rem;
  border-radius: 6px;
  transition: background .18s, color .18s;
  white-space: nowrap;
}
.views-field-edit-node a {
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
}
.views-field-edit-node a:hover {
  color: var(--gold);
  border-color: var(--gold-border);
}
.views-field-nothing a {
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
}
.views-field-nothing a:hover {
  background: rgba(184,137,42,.18);
  border-color: var(--gold);
}

/* Séparateur visuel bas de carte */
.views-row::after {
  content: '';
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border);
  margin-top: .55rem;
  opacity: .5;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .zakat-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .views-element-container { padding: 1rem; }

  .zakat-filters .form--inline {
    grid-template-columns: 1fr;
  }
  .zakat-filters .form-item-field-livreur-target-id,
  .zakat-filters .form-item-field-a-ete-livre-value,
  .zakat-filters .form-actions { grid-column: 1 / -1; }
  .zakat-filters .form-actions { justify-self: stretch; }
  .zakat-filters input[type="submit"] { width: 100%; }

  #zakat-map { height: 360px !important; }

  .views-row {
    grid-template-columns: 1fr;
  }
  .views-field-telephone { grid-column: 1; grid-row: auto; }
  .views-field-nothing   { grid-column: 1; text-align: left; }
}