/* ================================
   QUARTIERS — UI/UX (hero + filtres + recherche + cartes)
   Structure & design uniquement. Couleurs globales conservées.
   ================================ */

/* Tokens basiques (non intrusifs) */
:root{
  --light-gray: #f6f7f8;
  --medium-gray: #e6e8ec;
  --dark-gray: #6b7280;

  --brand-grad: var(--gold-gradient, linear-gradient(135deg,#F9A312,#F895AC));
  --brand-shadow: 0 10px 26px rgba(249,163,18,.28);

  --radius-xxl: 26px;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.06);
  --shadow-md: 0 12px 28px rgba(0,0,0,.08);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.12);
}


/* ---------- HERO (aligné sur le blog) ---------- */
.q-hero{ padding: 3.5rem 0 20px; text-align:center; }
.q-hero h1{ margin:0 0 var(--spacing-md) 0; text-transform:uppercase; font-family: var(--font-heading, "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial); font-weight:900; font-size: 40px; line-height:1.12; letter-spacing:-0.5px; }
.q-hero-sub{ margin:0 auto var(--spacing-lg); max-width:920px; color: var(--dark-gray); line-height:1.7; }

/* ---------- FILTRES (une ligne, largeur grille) ---------- */
.q-filters{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin: var(--spacing-md) 0 var(--spacing-lg);
  overflow:auto;
  white-space:nowrap;
  -webkit-overflow-scrolling: touch;
  padding-inline: 8px;
  padding-bottom: 2px;
}
.q-filters::-webkit-scrollbar{ height:8px; }
.q-filters::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:999px; }

.q-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:.5rem 1rem;
  background: var(--secondary-color);
  border:1px solid var(--medium-gray);
  border-radius:999px;
  color: var(--dark-gray);
  font-weight:600;
  transition: var(--transition);
  cursor:pointer;
}
.q-chip i{ width:18px; height:18px; flex:0 0 18px; }
.q-chip:hover{ background: var(--primary-color); color:#fff; border-color: var(--primary-color); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.q-chip.is-active{
  background: linear-gradient(135deg, #F9A312, #F895AC);
  color:#fff;
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.q-chip.is-active i{ color:#fff; }
.q-chip:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(249,163,18,.35); }

/* ---------- RECHERCHE (pleine largeur) ---------- */
.q-controls{ margin: 0; margin-top: var(--spacing-sm); display:flex; justify-content:center; }
.q-search{
  position:relative;
  width:100%;
  max-width:520px;
  background: var(--secondary-color);
  border:2px solid var(--medium-gray);
  border-radius: var(--radius-md);
  padding:.9rem 1.1rem;
  box-shadow: none;
  transition: var(--transition);
}
.q-search::before{ display:none; }
.q-search input{ width:100%; border:0; outline:0; background:transparent; font-size:15px; color:#111; }
.q-search:focus-within{ outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(249, 163, 18, 0.1); }

/* ---------- GRID ---------- */
.q-grid{
  display:grid; gap:32px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (min-width:1260px){ .q-grid{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:900px){ .q-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .q-grid{ grid-template-columns:1fr;} }

/* ==================== CARTES ==================== */
.q-card{
  position:relative;
  display:flex; flex-direction:column;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--brand-grad) border-box;
  border:1px solid transparent;
  border-radius: var(--radius-xxl);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  transform:translateZ(0);
  transition:transform .18s ease, box-shadow .18s ease;
  content-visibility:auto;
  contain-intrinsic-size: 260px 180px;
}
.q-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

.q-card-media{ position:relative; aspect-ratio:16/9; background:#f0f2f4; overflow:hidden; }
.q-card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform .35s ease;
}
.q-card:hover .q-card-media img{ transform:scale(1.06); }
.q-card-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.06) 100%),
    radial-gradient(120% 70% at -10% -40%, rgba(249,163,18,.18) 0%, transparent 60%),
    radial-gradient(120% 70% at 110% -40%, rgba(248,149,172,.14) 0%, transparent 60%);
}

/* Prix/m² */
.q-price{
  position:absolute; top:12px; right:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.1px; color:#111;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.q-price .dot{
  width:8px; height:8px; border-radius:999px;
  background:var(--brand-grad);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);
}

/* Corps + CTA fixé en bas-droite */
.q-card-body{ position:relative; padding:16px 16px 64px; display:flex; flex-direction:column; flex:1; }
.q-card-title{
margin:2px 0 6px 0;
font-size:19px;
font-weight:800;
letter-spacing:.2px;
color:#111;
line-height:1.25;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
hyphens:auto;
word-break:normal;
}
.q-card-subtitle{
  margin:0 0 14px 0; font-size:14px; line-height:1.55; color:var(--dark-gray);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

.q-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.q-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; font-size:12px; font-weight:600; line-height:1;
  color:#2f3a45; background:#f1f3f5; border:1px solid #e2e6ea; border-radius:999px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.q-pill:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.06); border-color:#d7dce1; }

.q-card-actions{
  position:absolute; right:16px; bottom:16px;
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:0; margin:0;
}
.q-btn-explorer{ display:inline-flex; align-items:center; white-space:nowrap; min-height:40px; padding-inline:14px; }

/* Apparition douce */
@keyframes fade-up-soft{
  from{ opacity:0; transform:translateY(6px) scale(.995); }
  to  { opacity:1; transform:translateY(0)  scale(1); }
}
.q-grid .q-card{ animation: fade-up-soft .35s ease both; }
.q-grid .q-card:nth-child(2){ animation-delay:.03s; }
.q-grid .q-card:nth-child(3){ animation-delay:.06s; }
.q-grid .q-card:nth-child(4){ animation-delay:.09s; }

@media (prefers-reduced-motion:reduce){
  .q-grid .q-card{ animation:none !important; }
}

/* ---------- Load more ---------- */
.q-loadmore{ display:flex; justify-content:center; margin: 26px 0 64px; }


/* --- Sticky filtres (mobile) --- */
@media (max-width: 900px){
.q-filters.is-sticky{
  position: sticky; top: 68px; z-index: 20;
  background: #fff; padding-block: 8px;
}
.q-filters{ scroll-snap-type: x mandatory; }
.q-chip{ scroll-snap-align: start; }
}

/* --- Skeleton cards --- */
.q-skeleton{
background: linear-gradient(#fff,#fff) padding-box, var(--brand-grad) border-box;
border:1px solid transparent; border-radius: var(--radius-xxl);
box-shadow: var(--shadow-sm); overflow: hidden;
}
.q-skel-media{ aspect-ratio:16/9; background:#eceff3; }
.q-skel-row{
height:12px; margin:10px 16px; border-radius:8px;
background: linear-gradient(90deg,#eceff3 0,#f5f7fa 50%,#eceff3 100%);
background-size:200% 100%; animation:q-shimmer 1.2s linear infinite;
}
@keyframes q-shimmer{ from{background-position:200% 0} to{background-position:-200% 0} }

/* --- Highlight de recherche --- */
mark.q-hl{ background: rgba(249,163,18,.2); padding:0 .06em; border-radius:3px; }

/* --- Carte entière cliquable (sans masquer le bouton) --- */
.q-card .q-cover-link{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.q-card-actions .btn{ position:relative; z-index:2; }

/* --- Bouton effacer dans la barre de recherche --- */
.q-search{ position:relative; }
.q-clear{
position:absolute; right:10px; width:28px; height:28px;
border-radius:999px; border:1px solid var(--medium-gray);
background:#fff; display:none; place-items:center; cursor:pointer;
}
.q-search.has-value .q-clear{ display:grid; }
.q-clear svg{ width:14px; height:14px; }

/* Mobile spacing & title sizing */
@media (max-width:560px){
.q-hero{ padding: 3.5rem 0 20px; text-align:center; }
.q-controls{ margin: 0; margin-top: var(--spacing-sm); }
.q-filters{ margin:8px 0 14px; }
.q-grid{ gap:24px; }
.q-card-title{ font-size:18px; -webkit-line-clamp:2; }
}

/* --- Pin fixe centré pour la page Quartiers --- */
.q-pin-fixed{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index: 1000; /* toujours au-dessus des tuiles */
  width: 36px; height: 36px;
}

/* Dot central — même taille que sur quartier */
.q-pin-fixed .q-pin-dot{
  position:absolute; left:50%; top:50%;
  width: 16px; height: 16px;           /* cohérent avec quartier */
  transform:translate(-50%,-50%);
  border-radius:50%;
  background: linear-gradient(135deg, #F9A312 0%, #F895AC 100%);
  border: 2px solid #fff;
  box-shadow:
    0 0 0 5px rgba(249,163,18,.28),
    0 10px 24px rgba(0,0,0,.40);
}

/* Ondes pulsantes (3 vagues déphasées) */
.q-pin-fixed .q-pin-wave,
.q-pin-fixed .q-pin-wave::before,
.q-pin-fixed .q-pin-wave::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width: 20px; height: 20px;           /* légèrement > au dot */
  transform:translate(-50%,-50%);
  border-radius:50%;
  border: 3px solid rgba(248,149,172,.55);
  box-shadow: 0 0 18px rgba(248,149,172,.45);
  animation: qpin-fixed-pulse 2.2s ease-out infinite;
}

.q-pin-fixed .q-pin-wave::before{
  border-color: rgba(249,163,18,.45);
  animation-delay: .5s;
}
.q-pin-fixed .q-pin-wave::after{
  border-color: rgba(249,163,18,.30);
  animation-delay: 1s;
}

@keyframes qpin-fixed-pulse{
  0%   { opacity:.95; transform:translate(-50%,-50%) scale(0.7); }
  70%  { opacity:0;   transform:translate(-50%,-50%) scale(2.8); }
  100% { opacity:0;   transform:translate(-50%,-50%) scale(2.8); }
}

@media (prefers-reduced-motion: reduce){
  .q-pin-fixed .q-pin-wave,
  .q-pin-fixed .q-pin-wave::before,
  .q-pin-fixed .q-pin-wave::after{
    animation:none !important; opacity:.55;
  }
}




/* Bouton "btnlike" identique aux cartes collections */
.q-card-actions .btnlike {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-radius: var(--radius-md);
  background: var(--gold-gradient);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  position: relative; /* pour passer au-dessus du lien de couverture */
  z-index: 2;         /* cf. règle .q-cover-link */
}
.q-card-actions .btnlike:hover {
  box-shadow: var(--gold-shadow);
  transform: translateY(-2px);
}
.q-card-actions .collection-link { 
  position: relative; 
  z-index: 2; 
}

/* === HERO quartiers : mêmes styles que le hero Collections === */
.filters-wrap{
  display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap;
  margin-top: var(--spacing-sm);
}
.filter-btn{
  border:1px solid var(--medium-gray);
  background: var(--secondary-color);
  padding:.5rem 1rem; border-radius:999px;
  cursor:pointer; transition:var(--transition); font-weight:600;
}
.filter-btn.active{
  background: linear-gradient(135deg, #F9A312, #F895AC);
  color:#fff; border-color: transparent; box-shadow: var(--shadow-md);
}
.search-wrap{ margin-top: var(--spacing-sm); display:flex; justify-content:center; }
.search-input{
  width:100%; max-width:520px; padding:.9rem 1.1rem;
  border:2px solid var(--medium-gray); border-radius: var(--radius-md);
  font-size:.95rem; background:#fff;
}

.container .q-page {
  padding-top: 96px !important;
}

/* --- Result count: subtle e-commerce style --- */
.q-count{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  margin: 6px 0 18px;           /* ↓ espace avant la grille */
  font-size:.9rem;
  line-height:1;
  color: var(--dark-gray);       /* gris, pas noir */
  border:1px solid var(--medium-gray);
  border-radius:999px;
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
@media (max-width:560px){
  .q-count{ font-size:.85rem; margin:6px 0 16px; padding:3px 9px; }
}