/* ============================================================
   MÉRIDIAN — Page Magasins (localisateur)
   Chargée via stylesheets.tpl uniquement sur page_name == 'stores'.
   Markup natif (cms/stores.tpl) : #content.page-stores > .row > .map
   puis .row > article.store-item (grille Bootstrap neutralisée ici)
   > .store-item-container > .store-name + .store-info (adresse /
   téléphone / e-mail / horaires / note, chacun svg + .store-info-txt).

   NB : le <body> porte lui aussi la classe `page-stores` → on scope les
   règles de grille sur `#content.page-stores` (la section) pour ne PAS
   toucher le .row de layout externe (sinon le contenu est bridé à 1/3).
   ============================================================ */

#main { padding-block: clamp(32px, 5vw, 64px); }
#main > .container, #content-wrapper { min-width: 0; }

/* ---------- En-tête de page ---------- */
#main .page-header { margin-bottom: clamp(24px, 3.5vw, 44px); padding-bottom: 22px; border-bottom: 1px solid var(--line); }
#main .page-header h1,
#main .page-header .title-all {
  font-family: var(--font-display); font-weight: 500; line-height: 1;
  font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -0.01em; margin: 0;
}

/* ---------- Carte (placeholder Google Maps) ---------- */
/* Le thème n'injecte pas de carte : le conteneur est vide → on masque la
   ligne pour ne pas laisser un bloc fantôme. */
#content.page-stores .map { display: none; }
#content.page-stores .row:has(> .map) { display: none; }

/* ---------- Grille des magasins ---------- */
/* Neutralise les colonnes Bootstrap (col-md-6 / col-lg-4) au profit d'une
   grille responsive régulière. */
#content.page-stores .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: clamp(18px, 2vw, 28px); margin: 0; }
#content.page-stores .store-item { width: auto; max-width: none; flex: none; padding: 0; margin: 0; }

.store-item-container {
  --pad: clamp(22px, 2.4vw, 30px);
  height: 100%; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: var(--pad);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.store-item-container:hover { border-color: var(--ink); box-shadow: var(--shadow-soft); transform: translateY(-3px); }

/* ---------- Photo du magasin (bannière en haut de carte, facultative) ---------- */
/* Full-bleed : compense le padding du conteneur. */
.store-picture { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad); background: var(--bg-2); border-bottom: 1px solid var(--line-soft); }
.store-picture, .store-picture picture { display: block; }
.store-picture img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Nom du magasin ---------- */
.store-name { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.store-name .card-title,
.store-name .h3 {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em;
  font-size: clamp(20px, 2vw, 24px); line-height: 1.1; color: var(--ink); margin: 0;
}

/* ---------- Bloc informations ---------- */
.store-info { display: flex; flex-direction: column; gap: 15px; font-size: 14.5px; color: var(--ink-soft); }
.store-info > div { display: flex; align-items: flex-start; gap: 12px; }

/* icône : la couleur inline #e3e3e3 du SVG est surchargée par la propriété CSS `fill` */
.store-info svg { flex-shrink: 0; width: 19px; height: 19px; margin-top: 2px; fill: var(--accent); }

.store-info-txt { min-width: 0; line-height: 1.6; }
.store-info-txt address { font-style: normal; margin: 0; }
.store-address .store-info-txt { color: var(--ink); }

/* horaires : une ligne par plage regroupée */
.store-hour .store-info-txt { display: flex; flex-direction: column; gap: 2px; }
.store-hour .store-info-txt span { display: block; }

/* note : légèrement mise en retrait */
.store-note { padding-top: 15px; border-top: 1px solid var(--line-soft); }
.store-note .store-info-txt { font-style: italic; color: var(--ink-faint); }
.store-note svg { fill: var(--ink-faint); }

@media (max-width: 480px) {
  .store-item-container { padding: 20px; }
}
