/* Ported from src/pages/magasins.astro */
.stores-section { padding: var(--space-16) 0; background: var(--color-bg); }
.stores-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-10); align-items: start; }
.stores-panel { display: flex; flex-direction: column; gap: var(--space-6); }

.store-search { position: relative; width: 100%; }
.store-search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.store-search input {
  width: 100%; height: 56px; padding: 10px 20px 10px 52px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: #fff; font-size: var(--text-sm);
  outline: none; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s;
}
.store-search input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(224, 0, 26, 0.1); }

.stores-title { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-text); border-bottom: 2px solid var(--color-primary); padding-bottom: var(--space-2); width: fit-content; }
.stores-cards { display: flex; flex-direction: column; gap: var(--space-6); }

.store-card {
  position: relative; background: #fff; border-radius: var(--radius-md); padding: var(--space-6);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  gap: var(--space-5); overflow: hidden; transition: border-color .2s, box-shadow .2s;
}
.store-card:hover { border-color: #cbd5e1; box-shadow: var(--shadow-md); }
.store-card-bg { position: absolute; right: -20px; bottom: -20px; opacity: 0.04; pointer-events: none; }

.store-header-info { display: flex; flex-direction: column; gap: 4px; }
.store-card-nom { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-text); }
.store-card-addr { font-size: var(--text-sm); color: var(--color-text-body); }
.store-card-tel { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--fw-semibold); }

.store-hours-block, .store-categories-block { display: flex; flex-direction: column; gap: var(--space-2); }
.block-title { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text); display: flex; align-items: center; gap: var(--space-2); }

.hours-list {
  list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px var(--space-4);
  font-size: var(--text-xs); color: var(--color-text-body); background: var(--color-bg);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
}
.hours-list li { display: flex; justify-content: space-between; }
.day-name { font-weight: var(--fw-semibold); }

.categories-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cat-tag {
  background: rgba(0, 168, 80, 0.08); color: #00a850; font-size: var(--text-xs); font-weight: var(--fw-semibold);
  padding: 4px var(--space-3); border-radius: var(--radius-full); border: 1px solid rgba(0, 168, 80, 0.15);
}

.app-sync-link { font-size: var(--text-xs); color: var(--color-accent-blue); font-weight: var(--fw-semibold); transition: color 0.15s; }
.app-sync-link:hover { color: var(--color-primary); }

.store-actions { margin-top: var(--space-2); }
.store-card-itineraire {
  display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-primary); color: #fff;
  font-weight: var(--fw-bold); font-size: var(--text-xs); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full); transition: background .2s;
}
.store-card-itineraire:hover { background: var(--color-primary-dark); }

/* ── Section Carte interactive ────────────────────────────── */
.stores-map-section { position: sticky; top: 110px; }
.map-container-wrap { background: #fff; border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.map-title-bar { font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--color-text); border-bottom: 2px solid var(--color-accent-green); padding-bottom: var(--space-2); }
.map-frame-wrapper { width: 100%; height: 480px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); }
.google-map-iframe { width: 100%; height: 100%; }
.map-instruction-card { background: rgba(26, 26, 46, 0.03); padding: var(--space-4); border-radius: var(--radius-sm); border-left: 4px solid var(--color-accent-green); }
.map-instruction-card h4 { font-size: var(--text-sm); font-weight: var(--fw-bold); margin-bottom: 4px; }
.map-instruction-card p { font-size: var(--text-xs); color: var(--color-text-body); line-height: 1.5; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  .stores-layout { grid-template-columns: 1fr; }
  .stores-map-section { position: static; }
}
@media (max-width: 767px) {
  .hours-list { grid-template-columns: 1fr; }
  .map-frame-wrapper { height: 320px; }
}