/* ============================================================
   AlterShops — Homepage section "Notre réseau"
   Port pixel-equivalent de homepage-stores.css (Storelocator AS handoff).
   Variables aliasées vers les tokens existants du child theme (alter-tokens.css).
   ============================================================ */

.hp-section {
  /* Token aliases — bridge handoff vars → existing theme tokens */
  --as-red:        var(--as-amaranth, #E62249);
  --as-red-hover:  #C51F41;
  --as-ink:        var(--as-grey-900, #0F0F0F);
  --as-graphite:   var(--as-grey-500, #353535);
  --as-mute:       var(--as-grey-300, #777777);
  --as-line:       var(--as-grey-200, #DDE1E3);
  --as-surface:    var(--as-grey-100, #EDEDF3);
  --as-cream:      var(--as-papaya, #FFEFD0);
  --as-mint:       var(--as-success, #D0FFD9);
  --fg-primary:    var(--as-grey-900, #0F0F0F);
  --fg-secondary:  var(--as-grey-500, #353535);
  --fg-mute:       var(--as-grey-300, #777777);
  --r-sm: 3px;
  --r-lg: var(--as-radius-main, 8px);
  --shadow-pop:   0 12px 40px rgba(15,15,15,0.12);
  --shadow-cover: 4px 4px 15px 0 rgba(0,0,0,0.05);
  --ease-std:     cubic-bezier(.25,.8,.25,1);
  --dur-base:     .25s;
  --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-22: 22px; --fs-32: 32px;
  --ls-label: 0.05rem;
  --ls-btn:   1px;
  --ls-heading: 0.05rem;
  --lh-snug: 1.3;
  --lh-body: 1.5;
  --fw-medium: 500;
  --as-gradient-card: linear-gradient(159deg, #000 20.53%, #202020 85.89%);

  background: var(--as-surface);
  color: var(--fg-primary);
  padding: clamp(40px, 5vw, 64px) var(--as-container-home-pad, clamp(16px, 3.5vw, 64px));
  position: relative;
}
.hp-inner {
  margin: 0 auto;
  max-width: var(--as-container-home-width, min(100%, 1900px));
  position: relative;
}

/* Section header */
.hp-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin: 0 0 32px;
  gap: 32px; flex-wrap: wrap;
}
.hp-head__l { max-width: 640px; }
.hp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-14); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--as-red);
  margin: 0 0 12px;
}
.hp-eyebrow::before {
  content: ''; width: 24px; height: 2px; background: var(--as-red);
}
.hp-title {
  font-size: var(--fs-32); font-weight: var(--fw-medium);
  line-height: 1.15; letter-spacing: var(--ls-heading);
  margin: 0 0 12px; color: var(--fg-primary);
  text-transform: none;
}
.hp-title .red { color: var(--as-red); }
.hp-lead {
  font-size: var(--fs-16); line-height: var(--lh-body);
  color: var(--fg-secondary); margin: 0;
}
.hp-head__cta {
  display: flex; gap: 12px; flex-shrink: 0;
}

/* GRID */
.hp-grid {
  /* Map flexible (prend toute la largeur restante) + colonne magasin préféré
     à largeur fixe : la photo carrée ne grandit plus à l'infini sur grand écran
     (elle plafonne ~445px au lieu de ~800px). minmax(0,1fr) laisse la map
     rétrécir proprement. */
  display: grid; grid-template-columns: minmax(0, 1fr) 445px; gap: 20px;
  align-items: stretch;
}

/* MAP CARD */
.hp-map-card {
  background: #fff; border: 1px solid var(--as-line);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.hp-map-card__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--as-line);
  display: flex; justify-content: space-between; align-items: center;
}
.hp-map-card__title {
  font-size: var(--fs-14); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--fg-primary); margin: 0;
}
.hp-map-card__stats { font-size: var(--fs-13); color: var(--fg-mute); }
.hp-map-card__stats strong { color: var(--fg-primary); }

.hp-map-wrap {
  position: relative;
  flex: 1;
  background: var(--as-surface);
  min-height: 460px;
  overflow: hidden;
}
.hp-map { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 460px; }

/* Loading placeholder shown until MapLibre is ready */
.hp-map__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 12px;
  background:
    radial-gradient(circle at 50% 40%, rgba(230,34,73,0.04), transparent 60%),
    #fff;
  color: var(--fg-mute); font-size: 13px;
  pointer-events: none;
}
.hp-map__placeholder a { pointer-events: auto; }
.hp-map__placeholder-pulse {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--as-red);
  animation: hp-pulse 1.6s ease-out infinite;
  opacity: .8;
}
@keyframes hp-pulse {
  0%   { transform: scale(.8); opacity: .9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* DOM marker fallback (utilisé seulement si marker.svg fail) */
.hp-mapmarker {
  width: 32px; height: 40px;
  border: 0; padding: 0;
  background: transparent center / contain no-repeat;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform .15s ease-out, filter .15s ease-out;
}
.hp-mapmarker:hover, .hp-mapmarker.is-active {
  transform: scale(1.15);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
  z-index: 5;
}
.hp-mapmarker.is-preferred {
  filter: drop-shadow(0 0 8px rgba(230,34,73,.65));
}

/* MapLibre popup — design ink avec photo + actions */
.hp-mappopup .maplibregl-popup-content {
  background: #fff; color: var(--fg-primary);
  padding: 0; border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  font-size: 13px; font-family: inherit;
  overflow: hidden; min-width: 220px; max-width: 260px;
}
.hp-mappopup .maplibregl-popup-tip { border-top-color: #fff !important; border-bottom-color: #fff !important; }
.hp-mappopup__inner { display: flex; flex-direction: column; }
.hp-mappopup__img {
  width: 100%; height: 110px;
  background-size: cover; background-position: center;
  background-color: var(--as-surface);
}
.hp-mappopup__name {
  font-size: 14px; font-weight: var(--fw-medium); color: var(--fg-primary);
  padding: 12px 14px 2px; line-height: 1.3;
}
.hp-mappopup__meta { color: var(--fg-mute); font-size: 12px; padding: 0 14px 8px; }
.hp-mappopup__rating { color: var(--fg-secondary); font-size: 12px; padding: 0 14px 10px; }
.hp-mappopup__rating::first-letter { color: #FFC83C; }
.hp-mappopup__pick {
  margin: 0; border: 0;
  background: var(--as-red); color: #fff;
  padding: 10px 14px;
  font-family: inherit; font-size: 12px; font-weight: var(--fw-medium);
  letter-spacing: var(--ls-btn); text-transform: uppercase;
  cursor: pointer; transition: background .2s var(--ease-std);
}
.hp-mappopup__pick:hover { background: var(--as-red-hover); }
.hp-mappopup .maplibregl-popup-close-button {
  font-size: 22px; padding: 4px 8px; color: rgba(255,255,255,.9);
  background: rgba(15,15,15,.4); border-radius: 50%;
  width: 24px; height: 24px; line-height: 16px;
  top: 8px; right: 8px;
}

/* MapLibre controls — discreet */
.hp-map-wrap .maplibregl-ctrl-group { box-shadow: var(--shadow-cover); border: 1px solid var(--as-line); }
.hp-map-wrap .maplibregl-ctrl-attrib { display: none; } /* attribution servie en .hp-map-attribution */

/* Map footer (cities + attribution) */
.hp-map-card__foot {
  border-top: 1px solid var(--as-line);
  padding: 14px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.hp-map-card__cities {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
}
.hp-city {
  font-size: var(--fs-13); color: var(--fg-secondary);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-sm);
  transition: background var(--dur-base);
  text-decoration: none;
}
.hp-city:hover { background: var(--as-surface); color: var(--fg-primary); text-decoration: none; }
.hp-city sup { color: var(--as-red); font-size: 9px; font-weight: var(--fw-medium); }
.hp-map-attribution {
  font-size: 10px; color: var(--fg-mute);
  text-decoration: none; align-self: flex-end;
}
.hp-map-attribution:hover { color: var(--fg-primary); text-decoration: underline; }

/* PREFERRED STORE PANEL */
.hp-pref {
  background: #fff; border: 1px solid var(--as-line);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.hp-pref__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--as-line);
}
.hp-pref__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-14); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--as-red);
}
.hp-pref__change {
  font-size: var(--fs-13); color: var(--fg-mute);
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; padding: 4px 8px;
  border-radius: var(--r-sm);
}
.hp-pref__change:hover { color: var(--fg-primary); text-decoration: underline; text-decoration-color: var(--as-red); text-underline-offset: 3px; }

.hp-pref__photo {
  position: relative; aspect-ratio: 1/1;
  background: var(--as-gradient-card);
  display: grid; place-items: center;
}
.hp-pref__photo:not([style*="background-image"])::after {
  content: 'ALTER SMOKE';
  font-family: inherit; font-weight: 600;
  letter-spacing: 4px; font-size: 13px;
  color: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 8px 16px;
}
.hp-pref__status {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-label);
}
.hp-pref__status.is-open { background: var(--as-mint); color: #0F6E2A; }
.hp-pref__status.is-closed { background: var(--as-line); color: var(--fg-secondary); }
.hp-pref__status .dot { width:6px; height:6px; border-radius:50%; background: currentColor; }

.hp-pref__body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.hp-pref__name {
  font-size: var(--fs-22); font-weight: var(--fw-medium);
  margin: 0; color: var(--fg-primary); line-height: var(--lh-snug);
}
.hp-pref__addr { font-size: var(--fs-14); color: var(--fg-secondary); margin: 0; }

.hp-pref__hours {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--as-surface);
  font-size: var(--fs-13);
}
.hp-pref__hours .label {
  color: var(--fg-mute); font-size: 11px;
  text-transform: uppercase; letter-spacing: var(--ls-label);
  font-weight: var(--fw-medium);
  text-align: left;
}
.hp-pref__hours .val {
  color: var(--fg-primary); font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums; font-size: var(--fs-14); margin-top: 4px;
}

.hp-pref__rating {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-13); color: var(--fg-secondary);
}
.hp-pref__rating strong { color: var(--fg-primary); }
.hp-pref__rating .stars { display:inline-flex; gap: 1px; margin-right: 4px; }

.hp-pref__actions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: auto;
}
.hp-action {
  background: #fff; border: 1px solid var(--as-line);
  color: var(--fg-primary); padding: 12px 8px; border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-13); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-btn);
  cursor: pointer; transition: all var(--dur-base) var(--ease-std);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none;
}
.hp-action:hover { background: var(--as-ink); color: #fff; border-color: var(--as-ink); text-decoration: none; }
.hp-action:hover svg { stroke: #fff; }
.hp-action.is-primary {
  background: var(--as-red); border-color: var(--as-red); color: #fff;
}
.hp-action.is-primary:hover { background: var(--as-red-hover); border-color: var(--as-red-hover); }
.hp-action.is-primary svg { stroke: #fff; }

/* EMPTY STATE */
.hp-empty {
  background: #fff; border: 1px solid var(--as-line);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
}
.hp-empty__head {
  padding: 14px 20px; border-bottom: 1px solid var(--as-line);
  font-size: var(--fs-14); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--as-red);
  display: inline-flex; align-items: center; gap: 8px;
}
.hp-empty__body { padding: 24px 20px; flex: 1; display: flex; flex-direction: column; gap: 20px; }
.hp-empty h3 {
  font-size: var(--fs-22); font-weight: var(--fw-medium);
  margin: 0; color: var(--fg-primary); line-height: var(--lh-snug);
}
.hp-empty p {
  font-size: var(--fs-14); color: var(--fg-secondary);
  margin: 0; line-height: var(--lh-body);
}
.hp-empty__suggest {
  background: var(--as-surface);
  border-radius: var(--r-sm); padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.hp-empty__suggest .head {
  font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-label);
  color: var(--fg-mute); font-weight: var(--fw-medium);
  padding: 8px 8px 4px;
}
.hp-suggest-row {
  display: flex; gap: 12px; align-items: center;
  padding: 10px; border-radius: var(--r-sm);
  cursor: pointer; transition: background var(--dur-base), box-shadow var(--dur-base);
  background: #fff;
  border: 0; width: 100%; text-align: left;
  font-family: inherit;
}
.hp-suggest-row:hover, .hp-suggest-row.is-active {
  background: #fff; box-shadow: var(--shadow-cover);
}
.hp-suggest-row.is-active { outline: 1px solid var(--as-red); }
.hp-suggest-row__txt { flex: 1; min-width: 0; }
.hp-suggest-row__name {
  font-size: var(--fs-14); color: var(--fg-primary); font-weight: var(--fw-medium);
}
.hp-suggest-row__addr { font-size: 12px; color: var(--fg-mute); }
.hp-suggest-row__rating {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px;
  font-size: 11px; color: var(--fg-secondary); font-weight: var(--fw-medium);
}
.hp-suggest-row__rating strong { color: var(--fg-primary); }
.hp-suggest-row__rating span { color: var(--fg-mute); font-weight: 400; }
.hp-suggest-row__pin {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--as-cream) center / cover no-repeat;
  color: var(--as-ink);
  display: grid; place-items: center; flex-shrink: 0;
  overflow: hidden;
}
.hp-suggest-row__status { font-size: 11px; font-weight: 500; }
.hp-suggest-row__status.is-open { color: #16A34A; }
.hp-suggest-row__status.is-closed { color: var(--as-mute); }

/* Region chips (filtre EmptyState) */
.hp-region-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.hp-region-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--as-line);
  color: var(--fg-secondary);
  font-family: inherit; font-size: 12px; font-weight: var(--fw-medium);
  cursor: pointer; transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.hp-region-chip:hover {
  background: var(--as-surface); color: var(--fg-primary);
}
.hp-region-chip.is-active {
  background: var(--as-red); border-color: var(--as-red); color: #fff;
}
.hp-region-chip sup {
  font-size: 10px; font-weight: 400; opacity: 0.75;
  margin-left: 2px;
}
.hp-region-chip.is-active sup { opacity: 0.95; }

/* Voir toutes les boutiques (CTA bas EmptyState) */
.hp-empty__see-all {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-size: var(--fs-14); font-weight: var(--fw-medium);
  color: var(--as-red); text-decoration: none;
  padding-top: 4px;
}
.hp-empty__see-all:hover {
  color: var(--as-red-hover); text-decoration: underline;
  text-underline-offset: 3px;
}
.hp-empty__see-all svg { transition: transform var(--dur-base); }
.hp-empty__see-all:hover svg { transform: translateX(2px); }

/* CTAs (top-right) */
.hp-cta-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-14); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-btn);
  color: var(--fg-primary);
  padding: 12px 18px; border-radius: var(--r-sm);
  text-transform: uppercase;
  border: 1px solid var(--as-line); background: #fff;
  transition: all var(--dur-base);
  text-decoration: none;
  font-family: inherit; cursor: pointer;
}
.hp-cta-link:hover { background: var(--as-ink); color: #fff; border-color: var(--as-ink); text-decoration: none; }
.hp-cta-link.is-primary { background: var(--as-red); color: #fff; border-color: var(--as-red); }
.hp-cta-link.is-primary:hover { background: var(--as-red-hover); border-color: var(--as-red-hover); }

/* ───── Map markers (DOM `as-finder-marker`, unifiés avec le storefinder) ─────
   Les règles canoniques vivent dans altershops-storefinder.css (non chargé sur
   la home) : on les reporte ici, scopées .hp-map-wrap, pour servir le MÊME pin
   AS noir (goutte + « AS », hover rouge, ouvert/fermé). Ajout d'un état
   « préféré » (anneau doré, rappel de l'étoile « magasin préféré »). */
.hp-map-wrap .as-finder-marker {
  width: 32px; height: 32px;
  background: var(--as-grey-900, #0F0F0F);
  color: #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg) translateY(-2px);
  display: grid; place-items: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transform-origin: center bottom;
  transition: background 0.18s ease, transform 0.18s ease;
}
.hp-map-wrap .as-finder-marker__inner {
  transform: rotate(45deg);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.5px; color: #fff;
  font-family: var(--as-font-family, 'Brockmann', sans-serif);
}
.hp-map-wrap .as-finder-marker:hover,
.hp-map-wrap .as-finder-marker.is-active {
  background: var(--as-amaranth, #E62249);
  transform: rotate(-45deg) translateY(-2px) scale(1.15);
}
.hp-map-wrap .as-finder-marker.is-closed { opacity: 0.6; }
.hp-map-wrap .as-finder-marker--pref {
  border-color: var(--as-star-yellow, #FFC83C);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(255, 200, 60, 0.4);
}

@media (max-width: 1100px) {
  .hp-grid { grid-template-columns: 1fr; }
  .hp-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .hp-section { padding: 40px 16px; }
  .hp-pref__actions { grid-template-columns: 1fr; }
}