/* ============================================================
   scene-grille.css — Boutique en grille produits directe
   Page /magasin/ (index.html). Remplace le showroom 3D par une
   grille e-commerce classique, mobile-first (95 % du trafic).
   Réutilise le header .maison-nav + les drawers panier/menu.
   ============================================================ */

/* ---- Header : sur la grille on passe le header de `fixed` à
   `sticky` pour que la barre catégories vienne se coller juste
   en dessous, sans jamais recouvrir un prix/CTA. ------------- */
body.grille-page .maison-nav {
  position: sticky;
  /* components.css force `.maison-nav{top:90px !important}` pour laisser place
     aux bandeaux slogan+réassurance des autres pages, absents ici : on remet 0. */
  top: 0 !important;
  transform: none;
  opacity: 1;
}

/* ---- Bandeau réassurance (neutre — aucune mention d'origine) - */
.grille-topbar {
  background: #12263A;
  color: var(--creme);
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  padding: 9px 14px;
  font-weight: 500;
}
.grille-topbar b { color: var(--ocre); font-weight: 700; }
.grille-topbar .sep { opacity: 0.45; margin: 0 0.55em; }
@media (max-width: 520px) {
  .grille-topbar .grille-topbar__extra { display: none; }
}

/* ---- Barre de catégories collante --------------------------- */
.grille-cats {
  position: sticky;
  top: 72px;              /* = hauteur header desktop */
  z-index: 90;            /* sous le header (z-sticky = 100) */
  background: rgba(255, 252, 247, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(214, 206, 194, 0.5);
}
.grille-cats__row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 11px clamp(16px, 5vw, 64px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.grille-cats__row::-webkit-scrollbar { display: none; }
.grille-chip {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gris);
  padding: 8px 16px;
  border: 1px solid var(--gris-cl);
  border-radius: var(--radius-pill);
  background: var(--blanc);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.grille-chip:hover { border-color: var(--taupe); color: var(--noir); }
.grille-chip.is-active {
  color: var(--blanc);
  background: var(--bleu);
  border-color: var(--bleu);
}
.grille-chip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ---- Sections par rayon ------------------------------------- */
.grille {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 64px);
}
.grille-sec {
  padding: 34px 0 6px;
  scroll-margin-top: 128px;   /* header + barre catégories */
}
.grille-sec__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.grille-sec__title {
  font-family: var(--font-section-title);
  font-weight: 600;
  font-size: clamp(20px, 3.4vw, 26px);
  color: var(--bleu);
  letter-spacing: -0.01em;
  margin: 0;
}
.grille-sec__count {
  font-size: 12.5px;
  color: var(--gris);
  letter-spacing: 0.03em;
}

/* ---- Grille de cartes (2 → 3 → 4 colonnes) ------------------ */
.grille-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 600px) { .grille-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 960px) { .grille-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

/* ---- Carte produit ------------------------------------------ */
.grille-card {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid #ece3d2;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.25s var(--ease-out-soft),
    box-shadow 0.25s var(--ease-out-soft);
}
.grille-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.grille-card:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.grille-card__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--creme);
}
.grille-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out-soft);
}
.grille-card:hover .grille-card__media img { transform: scale(1.05); }
.grille-card__body {
  padding: 12px 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.grille-card__name {
  font-family: var(--font-section-title);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--noir);
}
.grille-card__desc {
  font-size: 12.5px;
  color: var(--gris);
  line-height: 1.35;
}
.grille-card__price {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bleu);
}
.grille-card__price .from {
  font-weight: 500;
  color: var(--gris);
  font-size: 11.5px;
  margin-right: 3px;
}

/* ---- Footer léger ------------------------------------------- */
.grille-foot {
  margin-top: 44px;
  padding: 30px 16px 40px;
  background: var(--creme);
  border-top: 1px solid #ece3d2;
  text-align: center;
}
.grille-foot__brand {
  font-family: var(--font-section-title);
  font-weight: 600;
  color: var(--bleu);
  font-size: 18px;
  margin-bottom: 8px;
}
.grille-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  margin-bottom: 12px;
}
.grille-foot__links a { font-size: 13px; color: var(--gris); text-decoration: none; }
.grille-foot__links a:hover { color: var(--bleu); text-decoration: underline; }
.grille-foot__legal { font-size: 11.5px; color: var(--gris); letter-spacing: 0.04em; }

/* ---- Mobile : header 60 px → barre catégories collée à 60 --- */
@media (max-width: 900px) {
  .grille-cats { top: 60px; }
  .grille-sec { scroll-margin-top: 116px; }
}


/* ============================================================
   Boutique « vendeur » — bannière promo, vignettes, pastilles
   (chantier 2026-07-27). N'affecte que la grille /magasin/.
   ============================================================ */

/* --- Bannière promo (texte éditable dans index.html) --- */
.grille-promo{
  background: linear-gradient(100deg, var(--bleu) 0%, #14365f 58%, #8a6d3f 165%);
  color: var(--creme);
  text-align: center;
  padding: 13px 18px;
}
.grille-promo__in{ max-width: var(--container-wide); margin: 0 auto; }
.grille-promo__title{
  font-family: var(--font-section-title);
  font-weight: 700;
  font-size: clamp(15px, 3.4vw, 21px);
  letter-spacing: .015em;
  line-height: 1.25;
  margin: 0;
}
.grille-promo__title b{ color: #fff; }
.grille-promo__sub{
  font-size: 12.5px; letter-spacing: .05em; opacity: .82; margin: 3px 0 0;
}

/* --- Vignettes catégories (dans .grille, hérite du padding du main) --- */
.grille-tiles{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 6px;
}
@media (min-width: 760px){ .grille-tiles{ grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.grille-tile{
  position: relative; display: block; overflow: hidden;
  border-radius: 12px; aspect-ratio: 3 / 2;
  text-decoration: none; border: 1px solid #ece3d2; background: var(--creme);
}
.grille-tile img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease-out-soft);
}
.grille-tile:hover img{ transform: scale(1.06); }
.grille-tile::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,37,69,0) 34%, rgba(11,37,69,.6) 100%);
}
.grille-tile__label{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  color: var(--creme);
  font-family: var(--font-section-title);
  font-weight: 600; font-size: 15px; letter-spacing: .02em;
  padding: 10px 13px;
  text-shadow: 0 1px 3px rgba(11,37,69,.4);
}
.grille-tile:focus-visible{ outline: var(--focus-ring); outline-offset: 2px; }

/* --- Pastille SOLDES (cartes à prix barré : couettes + linge) --- */
.grille-card__media{ position: relative; }
.grille-badge{
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--rouge); color: var(--creme);
  font-family: var(--font-body);
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(26,23,20,.2);
  pointer-events: none;
}


/* --- Bandeau de confiance (accueil boutique-first, 2026-07-27) --- */
.grille-trust{ background: var(--creme); border-bottom: 1px solid #ece3d2; }
.grille-trust__in{
  max-width: var(--container-wide); margin: 0 auto;
  padding: 9px clamp(16px,5vw,64px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 22px;
}
.grille-trust__items{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 20px;
  list-style: none; margin: 0; padding: 0;
  font-size: 12px; color: var(--gris); letter-spacing: .01em;
}
.grille-trust__items li{ white-space: nowrap; }
.grille-trust__items b{ color: var(--bleu); font-weight: 700; }
.grille-trust__cta{ display: flex; gap: 8px; }
.grille-trust__btn{
  font-family: var(--font-body); font-size: 12px; font-weight: 600; text-decoration: none;
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--bleu); color: var(--bleu); white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.grille-trust__btn:hover{ background: var(--bleu); color: var(--creme); }
.grille-trust__btn--primary{ background: var(--bleu); color: var(--creme); }
.grille-trust__btn--primary:hover{ background: var(--bleu-cl); border-color: var(--bleu-cl); }
@media (max-width: 640px){
  .grille-trust__items{ font-size: 11px; gap: 2px 14px; }
  .grille-trust__in{ gap: 8px 22px; }
}


/* ============================================================
   Grille — slogan d'accroche + chaleur premium (bordeaux/laiton)
   + filet anti-scroll horizontal mobile (2026-07-27)
   ============================================================ */
:root{ --bordeaux: #7B2D3A; }   /* bordeaux velours — accent chaud premium */

/* Filet : empêche tout scroll horizontal de la page (ex. cart-drawer fixe hors-écran) */
html, body{ overflow-x: hidden; }

/* --- 1. Slogan d'accroche (compact, chaud) --- */
.grille-slogan{ background: var(--bordeaux); color: var(--creme); text-align: center; padding: 16px 20px; }
.grille-slogan__txt{
  font-family: var(--font-section-title);
  font-weight: 600;
  font-size: clamp(19px, 4.7vw, 30px);
  line-height: 1.18; letter-spacing: .005em; margin: 0;
}
.grille-slogan__txt::after{ content:""; display:block; width:46px; height:2px; background: var(--ocre); margin: 9px auto 0; border-radius: 2px; }

/* --- 2. Chaleur premium (bordeaux + laiton, jamais de rouge soldes) --- */
/* filet laiton sous les titres de rayon */
.grille-sec__title{ position: relative; }
.grille-sec__title::after{ content:""; display:block; width:34px; height:2px; background: var(--ocre); margin-top: 7px; border-radius: 2px; }
/* état actif des catégories -> bordeaux (au lieu de navy) */
.grille-chip.is-active{ background: var(--bordeaux); border-color: var(--bordeaux); color: var(--creme); }
/* survol des vignettes -> accent laiton */
.grille-tile{ transition: transform 0s, border-color .25s var(--ease-out-soft); }
.grille-tile:hover{ border-color: var(--ocre); }
.grille-tile:hover .grille-tile__label{ color: #fff; }
/* bouton secondaire du bandeau confiance -> survol bordeaux */
.grille-trust__btn:not(.grille-trust__btn--primary):hover{ background: var(--bordeaux); border-color: var(--bordeaux); color: var(--creme); }

/* --- 3. Barre catégories : resserrer les chips sur petit mobile pour tout faire tenir --- */
@media (max-width: 430px){
  .grille-cats__row{ gap: 6px; padding-left: 14px; padding-right: 14px; }
  .grille-chip{ padding: 7px 12px; font-size: 12.5px; }
}