/* ============================================================ 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 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; } }