/* ═══════════════════════════════════════════════════════════════════════════
   MAGASIN — structure de la BOUTIQUE EN LIGNE (templates/Shopping/_structures/)
   Reprise de « Boutique », gardée par Yacine le 2026-09-26, corrigée : panneau de
   filtres centré dans la colonne de gauche (au milieu de l'écran quand on défile),
   rien ne dépasse du panneau, bouton panier plus grand.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-structure="magasin"] {
  --st-radius: 10px;
  --st-btn-radius: 100px;
  --st-bar: 30px;
  --st-aside: 220px;
  --st-cols: 3;
}

/* ── Bandeau d'annonce + barre ───────────────────────────────────────────── */
[data-structure="magasin"] :is([data-st="nav"],nav#nav,nav) {
  position: sticky; top: 0; z-index: 120;
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1.4rem;
  padding-top: calc(.75rem + var(--st-bar));
  background: #fff;
  border-bottom: 1px solid rgba(15,32,64,.08);
}
[data-structure="magasin"] :is([data-st="nav"],nav#nav,nav)::before {
  content: "Livraison partout en Algérie · Paiement à la livraison";
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--st-bar);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-strong, var(--accent, #e63946)); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
[data-structure="magasin"] [data-st="navlogo"] {
  margin-right: auto; font-size: 1.15rem; letter-spacing: -.01em;
}
[data-structure="magasin"] [data-st="navtel"] { font-size: .82rem; opacity: .75; }
[data-structure="magasin"] [data-st="navlinks"] {
  display: flex; align-items: center; gap: .5rem; margin-left: auto;
}
/* Actions en pastilles rondes. */
[data-structure="magasin"] [data-st="navlinks"] button,
[data-structure="magasin"] [data-st="navcta"] {
  border-radius: 50% !important;
  width: 38px; height: 38px; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Hero court : la marchandise d'abord ─────────────────────────────────── */
[data-structure="magasin"] :is([data-st="hero"],#hero) {
  text-align: center; padding: 2.6rem 1.4rem 2rem; min-height: 0;
}
[data-structure="magasin"] [data-st="hero-title"] {
  font-size: clamp(1.8rem, 4.6vw, 3.2rem); line-height: 1.08;
  max-width: 20ch; margin-inline: auto;
}
[data-structure="magasin"] [data-st="hero-sub"] { max-width: 52ch; margin-inline: auto; }

/* ── Filtres en colonne, la grille à côté ────────────────────────────────── */
@media (min-width: 981px) {
  [data-structure="magasin"] [data-st="section"] {
    display: grid;
    grid-template-columns: var(--st-aside) minmax(0, 1fr);
    grid-template-areas: "head head" "aside grid";
    column-gap: 2rem;
    align-items: start;
    padding: 2.4rem 1.6rem 3.4rem;
  }
  [data-structure="magasin"] [data-st="section"] > :is([data-st="filters"],[data-st="filterpanel"]) { grid-area: aside; }
  [data-structure="magasin"] [data-st="section"] > [data-st="grid"]    { grid-area: grid; }
  [data-structure="magasin"] [data-st="section"] > *:not([data-st="filters"]):not([data-st="grid"]) {
    grid-area: head;
  }
  /* Décor au panneau quand le template en a un, sinon aux filtres. */
  [data-structure="magasin"] :is([data-st="filterpanel"],
                                  [data-st="filters"]:not([data-st="filterpanel"] *)) {
    position: sticky; top: calc(var(--st-bar) + 64px);
    display: flex; flex-direction: column; align-items: stretch; gap: .5rem;
    padding: 1rem; border: 1px solid rgba(15,32,64,.10);
    border-radius: var(--st-radius); background: #fff; max-width: none; margin: 0;
  }
  [data-structure="magasin"] [data-st="filterpanel"] [data-st="filters"] {
    background: none; border: 0; box-shadow: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: .5rem;
  }
}
[data-structure="magasin"] [data-st="grid"] {
  display: grid; grid-template-columns: repeat(var(--st-cols), minmax(0, 1fr)); gap: 1.1rem;
}
[data-structure="magasin"] [data-st="card"] {
  border-radius: var(--st-radius); overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
[data-structure="magasin"] [data-st="card"]:hover {
  transform: translateY(-5px); box-shadow: 0 16px 30px rgba(15,32,64,.13);
}
[data-structure="magasin"] [data-st="cta"] {
  border-radius: var(--st-btn-radius); padding: .85rem 1.9rem; font-weight: 700;
}

/* ── Bas de page : large, colonnes, fin de page discrète ─────────────────── */
[data-structure="magasin"] :is([data-st="footer"],footer#footer,footer) { padding-block: 3.2rem 1.6rem; }

@media (max-width: 980px) { [data-structure="magasin"] { --st-cols: 2; } }
@media (max-width: 560px) {
  [data-structure="magasin"] { --st-cols: 1; }
  [data-structure="magasin"] [data-st="navtel"] { display: none; }
  [data-structure="magasin"] :is([data-st="nav"],nav#nav,nav)::before { font-size: .66rem; }
}

/* Barre blanche sous le bandeau d'annonce : texte en encre. */
[data-structure="magasin"] :is([data-st="nav"],nav#nav,nav) a:not([data-st="navcta"]),
[data-structure="magasin"] [data-st="navlogo"],
[data-structure="magasin"] [data-st="navtel"] { color: #11141a !important; }
[data-structure="magasin"] [data-st="navlogo"] span { color: var(--accent, #e63946) !important; }

/* ── Lisibilité du bouton de la barre (2026-09-25) ─────────────────────────────
   Ce bouton est, selon le template, un bouton plein, un lien texte ou une icône
   seule sur fond blanc (boutique). Les règles plus haut ne posaient que la couleur
   du texte (blanc) : sur un bouton sans fond, il devenait blanc sur blanc. Il porte
   donc TOUJOURS un fond à l'accent lisible du client, avec texte et icône blancs.
   :is(#a#b, …) : deux identifiants de spécificité (sans rien cibler de plus), pour passer
   devant les règles « nav#nav » plus haut et celles des templates, même !important. */
[data-structure="magasin"] [data-st="navcta"]:is(#bn-cta#bn-lisible, [data-st="navcta"]) {
  background: var(--accent-strong, var(--accent, #c8102e)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
[data-structure="magasin"] [data-st="navcta"]:is(#bn-cta#bn-lisible, [data-st="navcta"]) :is(svg, span, i) { color: #fff !important; }
[data-structure="magasin"] [data-st="navcta"]:is(#bn-cta#bn-lisible, [data-st="navcta"]):hover { filter: brightness(1.08); }

/* ═══ Corrections demandées par Yacine (2026-09-26) ══════════════════════════ */
/* Panneau de filtres : plus d'air entre lui et les articles, centré dans la colonne
   de gauche, et tenu au milieu de l'écran pendant qu'on fait défiler les articles. */
@media (min-width: 981px) {
  [data-structure="magasin"] { --st-aside: 270px; }
  [data-structure="magasin"] [data-st="section"] {
    column-gap: clamp(2.4rem, 4vw, 4rem); max-width: 1500px; margin-inline: auto;
    padding-inline: clamp(1.4rem, 3vw, 2.6rem);
  }
  [data-structure="magasin"] :is([data-st="filterpanel"],
                                 [data-st="filters"]:not([data-st="filterpanel"] *)) {
    top: max(calc(var(--st-bar) + 84px), calc(50vh - 170px));
    width: 100%; box-sizing: border-box; padding: 1.2rem;
    box-shadow: 0 18px 40px -30px rgba(15,32,64,.45);
  }
}
/* Rien ne dépasse du panneau : les pastilles passent à la ligne, la recherche prend
   la largeur du panneau (avant : « Femme » et la recherche sortaient du cadre). */
[data-structure="magasin"] [data-st="filters"] .filter-rows { width: 100%; min-width: 0; }
[data-structure="magasin"] [data-st="filters"] .frow-pills { flex-wrap: wrap; overflow: visible; }
[data-structure="magasin"] [data-st="filters"] .search-box { width: 100%; min-width: 0; box-sizing: border-box; flex: 1 1 auto; }
[data-structure="magasin"] [data-st="filters"] .search-box input { min-width: 0; }
/* Boutons de la barre plus grands (le panier était petit). */
[data-structure="magasin"] [data-st="navlinks"] button[data-st="navcta"],
[data-structure="magasin"] [data-st="navlinks"] button { width: 46px; height: 46px; }
[data-structure="magasin"] [data-st="navlinks"] button .ic { width: 21px; height: 21px; }
/* Panier : bouton plein de la couleur sombre du site, bien visible (2026-09-26). */
[data-structure="magasin"] [data-st="navlinks"] .icon-btn:not([data-st="navcta"]) {
  width: 48px !important; height: 48px !important; border-radius: 14px !important;
  background: var(--dark); border-color: var(--dark); color: #fff;
}
[data-structure="magasin"] [data-st="navlinks"] .icon-btn:not([data-st="navcta"]) .ic { width: 22px; height: 22px; color: #fff; }
[data-structure="magasin"] [data-st="navlinks"] .icon-btn:not([data-st="navcta"]):hover { filter: brightness(1.15); }
[data-structure="magasin"] .cart-count { background: var(--accent-strong, var(--accent)); color: #fff; }

/* ── Vitrine (2026-10-01) : trois vignettes carrées, sobres, sous le bouton. ── */
[data-structure="magasin"] .hero-vitrine { width: min(640px, 100%); margin-top: 1.8rem; }
[data-structure="magasin"] .vit-item { aspect-ratio: 1 / 1; border-radius: 14px; }