/* Mur des demandes (1 colonne + pagination) */

/*
  Compat variables
  ---------------
  Le thème global (styles.css) définit : --accent, --text, --muted.
  Ce fichier utilisait aussi des variables "dx" (ex: --dx-accent) sans les définir,
  ce qui pouvait rendre certains boutons (ex: 0,99€) illisibles (texte blanc sur fond quasi blanc).
*/
:root{
  --dx-accent: var(--accent, #ff3b0a);
  --dx-ink: var(--text, #111);
  --dx-ink2: var(--muted, #5d5d5d);
}
.heroTitle{ margin:0 0 6px 0; font-size:clamp(28px,3.2vw,44px); letter-spacing:-.02em; }
.heroSub{ margin:0 0 14px 0; color:var(--muted); font-weight:700; }

.filtersGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
@media (max-width: 900px){
  .filtersGrid{ grid-template-columns: 1fr 1fr; }
  .advBox{ grid-column: 1 / -1; }
}
@media (max-width: 520px){
  .filtersGrid{ grid-template-columns: 1fr; }
}

.advBox{
  grid-column: 1 / -1;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.6);
}
.advBox > summary{
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}
.advBox > summary::-webkit-details-marker{ display:none; }
.advGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-top: 12px;
}

#communeField.isHidden{ display:none; }

.notice.muted#countBox{ font-weight: 900; }

.listOneCol{ display:flex; flex-direction:column; gap:12px; margin-top: 12px; }

.demandeRow{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: var(--shadow);
}
.demandeTop{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.demandeTitle{ margin:0; font-size:18px; font-weight:1000; }
.demandeMeta{ margin:6px 0 0; color:rgba(0,0,0,0.65); font-weight:800; font-size:13px; }
.demandeDesc{ margin:10px 0 0; color:rgba(0,0,0,0.78); font-weight:700; line-height:1.35; }
.demandePills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}
.pillMuted{ opacity:.75; }
.pillAccent{ background: rgba(255,59,10,0.10); border-color: rgba(255,59,10,0.25); }
.pager{ margin-top: 14px; display:flex; justify-content:center; }
.empty{ margin-top: 12px; font-weight: 900; color: rgba(0,0,0,0.65); }



/* =========================
   DX Mur demandes — Plié / Déplié (v200)
   ========================= */

.dxPost{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.05);
}

.dxPostTop{ display:flex; flex-direction:column; gap:6px; }

.dxPostTitle{
  font-weight: 1000;
  letter-spacing: -0.01em;
  font-size: 16px;
  line-height: 1.2;
}

.dxPostMeta{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

.dxPostExcerpt{
  margin-top: 6px;
  font-weight: 800;
  color: var(--ink2);
  white-space: pre-line;
}

.dxPostActions{
  display:flex;
  justify-content:flex-end;
  margin-top: 10px;
}

.dxPostToggle{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  color: var(--dx-ink);
  font-weight: 1000;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  min-height: 44px;
}

.dxPostToggle:hover{ background: rgba(0,0,0,0.05); }

.dxPostExpand{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,0.16);
}

.dxLoadingMini{
  font-weight: 900;
  color: var(--muted);
  padding: 8px 0;
}

.dxPostDesc{
  white-space: pre-line;
  font-weight: 800;
  color: var(--dx-ink2);
}

.dxPostBudget{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  font-weight: 900;
}

.dxPostPhotos{ margin-top: 12px; }

.dxPostSubTitle{
  font-weight: 1000;
  margin: 6px 0 10px;
  letter-spacing: -0.01em;
}

.dxPhotoGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px){
  .dxPhotoGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px){
  .dxPhotoGrid{ grid-template-columns: 1fr; }
}

.dxPhotoItem{
  position: relative;
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: #f7f7f7;
  min-height: 120px;
  text-decoration:none;
}

.dxPhoto{
  width:100%;
  height: 140px;
  object-fit: cover;
  display:block;
}
@media (max-width: 440px){
  .dxPhoto{ height: 180px; }
}

.dxPhotoDl{
  position:absolute;
  left:10px;
  bottom:10px;
  background: rgba(0,0,0,0.55);
  color:#fff;
  font-weight: 1000;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}

.dxContact{
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.08);
}

.dxContactRow{ display:flex; flex-direction:column; gap: 2px; }

.dxContactLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.12);
}
.dxContactLine:last-child{ border-bottom:none; }

.dxLabel{ color: var(--muted); font-weight: 1000; font-size: 12px; }
.dxValue{ font-weight: 1000; }
.dxValue a{ color: inherit; }

.dxCtas{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 12px;
}

.dxUnlocked{
  font-weight: 1000;
  background: rgba(46,125,50,0.12);
  border: 1px solid rgba(46,125,50,0.25);
  color: #1b5e20;
  padding: 10px 12px;
  border-radius: 14px;
}

.dxHint{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  margin-top: -4px;
}

.dxNotice{
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
}
.dxNotice.warn{
  background: rgba(255,193,7,0.15);
  border-color: rgba(255,193,7,0.35);
}

.dxBtnPrimary,
.dxBtnGhost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 1000;
}

.dxBtnPrimary{
  background: var(--dx-accent);
  color: #fff;
  border: 1px solid rgba(0,0,0,0.08);
}

.dxBtnGhost{
  background: rgba(0,0,0,0.04);
  color: var(--dx-ink);
  border: 1px solid rgba(0,0,0,0.10);
}

.dxBtnPrimary:hover{ filter: brightness(0.98); }
.dxBtnGhost:hover{ background: rgba(0,0,0,0.06); }

/* Bottom sheet paiement */
.dxNoScroll{ overflow:hidden; }

.dxSheetOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1200;
}

.dxSheet{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1201;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 40px rgba(0,0,0,0.18);
  padding: 14px;
  max-height: 72vh;
  overflow: auto;
}

.dxSheetHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.dxSheetTitle{
  font-weight: 1100;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.dxSheetClose{
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  border-radius: 12px;
  min-width: 44px;
  min-height: 44px;
  cursor:pointer;
  font-weight: 1000;
}

.dxSheetText{ color: var(--muted); font-weight: 900; margin-bottom: 10px; }

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

.dxSheetBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 46px;
  border-radius: 16px;
  padding: 12px 14px;
  text-decoration:none;
  font-weight: 1000;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  color: var(--dx-ink);
}

.dxSheetBtnPrimary{
  background: var(--dx-accent);
  color: #fff;
  border-color: rgba(0,0,0,0.08);
}

.dxSheetSmall{
  margin-top: 10px;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}




/* Facebook-like inline toggle */
.dxInlineMore,
.dxInlineLess{
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.dxInlineMore{ font-weight: 900; }
.dxInlineLess{ font-weight: 900; }

.dxInlineLessWrap{
  margin-top: 10px;
}

/* If legacy action area exists, keep it hidden */
.dxPostActions{ display:none !important; }