/* ═══════════════════════════════════════════════════════════════════════════
   COLLECTION — structure de la BOUTIQUE EN LIGNE (templates/Shopping/_structures/)
   Reprise de « Dense », gardée par Yacine le 2026-09-26, corrigée : titre centré et
   plus grand, bouton panier plus grand. Barre fine, filtres collants, grille serrée.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-structure="collection"] {
  --st-radius: 5px;
  --st-btn-radius: 4px;
  --st-navh: 46px;
  --st-cols: 4;
}

[data-structure="collection"] :is([data-st="nav"],nav#nav,nav) {
  position: sticky; top: 0; z-index: 130;
  display: flex; align-items: center; gap: .8rem;
  height: var(--st-navh); min-height: var(--st-navh);
  padding: 0 1rem;
  font-size: .84rem;
  border-bottom: 1px solid rgba(15,32,64,.14);
}
[data-structure="collection"] [data-st="navlogo"] {
  margin-right: auto; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 800;
}
[data-structure="collection"] [data-st="navtel"] { font-size: .78rem; opacity: .7; }
[data-structure="collection"] [data-st="navlinks"] { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
[data-structure="collection"] [data-st="navcta"] {
  border-radius: var(--st-btn-radius) !important;
  padding: .38rem .85rem !important; font-size: .78rem; font-weight: 700;
}

/* Hero réduit : deux lignes et on passe au stock. */
[data-structure="collection"] :is([data-st="hero"],#hero) {
  text-align: left; padding: 1.6rem 1.2rem 1.2rem; min-height: 0;
}
/* Hero dont le titre et la phrase sont enfants directs (boutique) : empilés à gauche,
   un petit écart entre eux. Les heros à conteneur intérieur ne sont pas touchés. */
[data-structure="collection"] :is([data-st="hero"],#hero):has(> [data-st="hero-title"]) {
  flex-direction: column; align-items: flex-start; gap: .45rem;
}
[data-structure="collection"] [data-st="hero-title"] {
  font-size: clamp(1.35rem, 3vw, 2.1rem); line-height: 1.16; margin-bottom: .25rem;
}
[data-structure="collection"] [data-st="hero-sub"] { font-size: .9rem; max-width: 64ch; }
[data-structure="collection"] [data-st="hero-media"] { display: none; }
/* …sauf la vitrine d'articles de la boutique (2026-10-01), réglée en bas de cette feuille. */
[data-structure="collection"] .hero-vitrine[data-st="hero-media"]:not([hidden]) { display: grid; }

/* Bandeau de filtres plein, collé juste sous la barre. */
/* Décor au panneau s'il existe, sinon aux filtres : deux cadres imbriqués
   annulaient le collant et empilaient deux fonds. */
[data-structure="collection"] [data-st="filterpanel"] [data-st="filters"] {
  background: none; border: 0; box-shadow: none; margin: 0; padding: 0;
}
[data-structure="collection"] :is([data-st="filterpanel"],
                             [data-st="filters"]:not([data-st="filterpanel"] *)) {
  position: sticky; top: var(--st-navh); z-index: 100;
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: 0 -1.2rem 1rem;
  padding: .6rem 1.2rem;
  background: rgba(248,250,253,.97);
  border-top: 1px solid rgba(15,32,64,.08);
  border-bottom: 1px solid rgba(15,32,64,.12);
  font-size: .8rem;
  border-radius: 0; max-width: none;
  backdrop-filter: blur(8px);
}
/* Seulement les BOUTONS posés directement dans la barre : un template qui y range un
   bloc de rangées et une recherche (boutique) recevait ce rembourrage partout. */
[data-structure="collection"] [data-st="filters"] > :is(button, a, .fpill) {
  border-radius: var(--st-btn-radius) !important; padding: .3rem .7rem !important;
}

/* Sur téléphone, une barre de filtres de plusieurs rangées collée en haut mangerait
   la moitié de l'écran pendant tout le défilement : elle reste à sa place. */
@media (max-width: 700px) {
  [data-structure="collection"] :is([data-st="filterpanel"],
                               [data-st="filters"]:not([data-st="filterpanel"] *)) { position: static; }
}

[data-structure="collection"] [data-st="section"] { padding: 1.6rem 1.2rem 2.6rem; }
[data-structure="collection"] [data-st="grid"] {
  display: grid; grid-template-columns: repeat(var(--st-cols), minmax(0, 1fr)); gap: .7rem;
}
[data-structure="collection"] [data-st="card"] {
  border-radius: var(--st-radius); overflow: hidden; font-size: .88rem;
  border: 1px solid rgba(15,32,64,.12);
}
[data-structure="collection"] [data-st="card"]:hover { border-color: currentColor; }
[data-structure="collection"] [data-st="cta"] {
  border-radius: var(--st-btn-radius); padding: .5rem .95rem; font-size: .84rem; font-weight: 700;
}
[data-structure="collection"] :is([data-st="footer"],footer#footer,footer) { padding-block: 1.8rem; font-size: .86rem; }

@media (max-width: 1100px) { [data-structure="collection"] { --st-cols: 3; } }
@media (max-width: 800px)  { [data-structure="collection"] { --st-cols: 2; } }
@media (max-width: 480px)  {
  [data-structure="collection"] { --st-cols: 1; }
  [data-structure="collection"] [data-st="navtel"] { display: none; }
}

/* Barre claire et fine : le nom reste lisible même si le template le voulait clair. */
[data-structure="collection"] :is([data-st="nav"],nav#nav,nav) { background: #fff; }
[data-structure="collection"] :is([data-st="nav"],nav#nav,nav) a:not([data-st="navcta"]),
[data-structure="collection"] [data-st="navlogo"],
[data-structure="collection"] [data-st="navtel"] { color: #11141a !important; }
[data-structure="collection"] [data-st="navlogo"] span { color: var(--accent, #e63946) !important; }
[data-structure="collection"] [data-st="navcta"] { color: #fff !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="collection"] [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="collection"] [data-st="navcta"]:is(#bn-cta#bn-lisible, [data-st="navcta"]) :is(svg, span, i) { color: #fff !important; }
[data-structure="collection"] [data-st="navcta"]:is(#bn-cta#bn-lisible, [data-st="navcta"]):hover { filter: brightness(1.08); }

/* ═══ Corrections demandées par Yacine (2026-09-26) ══════════════════════════ */
/* Titre centré et plus grand (« trop classique » à gauche). */
[data-structure="collection"] :is([data-st="hero"],#hero) { text-align: center; padding: 2.8rem 1.2rem 2.4rem; }
[data-structure="collection"] :is([data-st="hero"],#hero):has(> [data-st="hero-title"]) { align-items: center; gap: .7rem; }
[data-structure="collection"] [data-st="hero-title"] {
  font-size: clamp(2rem, 4.8vw, 3.6rem); line-height: 1.06; max-width: 22ch; margin: 0 auto;
}
[data-structure="collection"] [data-st="hero-sub"] { font-size: 1.02rem; max-width: 60ch; margin: 0 auto; }
/* Barre un peu plus haute, logo et boutons plus grands (le panier était petit). */
[data-structure="collection"] { --st-navh: 62px; }
[data-structure="collection"] [data-st="navlogo"] { font-size: 1.08rem; }
[data-structure="collection"] [data-st="navlinks"] .icon-btn { width: 46px; height: 46px; }
[data-structure="collection"] [data-st="navlinks"] .icon-btn .ic { width: 21px; height: 21px; }
/* Panier : bouton plein de la couleur sombre du site, bien visible (2026-09-26). */
[data-structure="collection"] [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="collection"] [data-st="navlinks"] .icon-btn:not([data-st="navcta"]) .ic { width: 22px; height: 22px; color: #fff; }
[data-structure="collection"] [data-st="navlinks"] .icon-btn:not([data-st="navcta"]):hover { filter: brightness(1.15); }
[data-structure="collection"] .cart-count { background: var(--accent-strong, var(--accent)); color: #fff; }
/* Titre en dégradé aux couleurs du client (2026-09-26) : de la couleur sombre à l'accent
   lisible, les deux assez foncées pour rester lisibles sur le fond clair du hero. */
[data-structure="collection"] [data-st="hero-title"] {
  background: linear-gradient(100deg, var(--dark) 10%, var(--accent-strong, var(--accent)) 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* La partie en italique suit le même dégradé (celui du titre, qui la traverse). */
[data-structure="collection"] [data-st="hero-title"] em {
  background: none; color: transparent; -webkit-text-fill-color: transparent;
}

/* ── Vitrine (2026-10-01) : grand format éditorial, celle du milieu surélevée. ── */
[data-structure="collection"] .hero-vitrine { width: min(760px, 100%); gap: 1.2rem; margin-top: 2.6rem; align-items: end; }
[data-structure="collection"] .vit-item { aspect-ratio: 3 / 4; border-radius: 4px; box-shadow: none; }
[data-structure="collection"] .vit-item:nth-child(2) { aspect-ratio: 3 / 4.6; }
[data-structure="collection"] .vit-txt { background: none; position: static; color: var(--ink); padding: .7rem 0 0; }
[data-structure="collection"] .vit-item { overflow: visible; background: transparent; }
[data-structure="collection"] .vit-item img { border-radius: 4px; height: auto; aspect-ratio: inherit; }
[data-structure="collection"] .vit-nom { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }