/* ========================================================================
   Boutique — grille catalogue + fiche produit.
   Réutilise les tokens PATCH (--ink, --paper, --line, --font-display…).
   Préfixe `shop-` pour ne jamais entrer en collision avec le CSS existant.
   ======================================================================== */

/* L'attribut hidden doit gagner sur nos `display:flex/grid`, sinon un
   élément masqué en JS reste visible. À garder en tête de fichier. */
[hidden]{ display:none !important; }

/* Fallback si style.css PATCH n'est pas servi */
:root{
  --ink:   #0A0A0A;
  --mute:  #6B6B6B;
  --line:  #E4DFD4;
  --cream: #F4F0E8;
  --paper: #FAF7F1;
  --font-display: 'Anton', Impact, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --pad-x: clamp(20px, 5vw, 80px);
  --gap:   clamp(20px, 3vw, 40px);
  --tx:    200ms cubic-bezier(.2,.7,.2,1);
}

/* ---------- Nav ---------- */
.shop-nav{
  display:flex; align-items:center; gap:var(--gap);
  padding:18px var(--pad-x);
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky; top:0; z-index:20;
}
.shop-nav__logo{ font-family:var(--font-display); font-size:24px; letter-spacing:.04em; }
.shop-nav__links{ display:flex; gap:24px; margin-left:auto; font-size:14px; }
.shop-nav__links a:hover{ opacity:.6; }
.shop-nav__cart{ font-size:14px; border:1px solid var(--ink); padding:8px 16px; }
.shop-nav__cart:hover{ background:var(--ink); color:var(--paper); }

/* ---------- Catalogue ---------- */
.shop-cat{ padding:clamp(40px,6vw,80px) var(--pad-x); }
.shop-cat__head{ max-width:60ch; margin-bottom:var(--gap); }
.shop-cat__head .display{ font-size:clamp(36px,6vw,72px); margin:.1em 0 .3em; }

.shop-cat__filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:calc(var(--gap) * 1.4); }
.shop-chip{
  border:1px solid var(--line); background:transparent;
  padding:8px 18px; font-size:13px; letter-spacing:.03em; text-transform:capitalize;
  transition:background var(--tx), color var(--tx), border-color var(--tx);
}
.shop-chip:hover{ border-color:var(--ink); }
.shop-chip.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.shop-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.shop-card__media{
  aspect-ratio:4/5; background:var(--cream); overflow:hidden; margin-bottom:14px;
}
.shop-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--tx); }
.shop-card__link:hover .shop-card__media img{ transform:scale(1.04); }
.shop-card__name{ font-size:15px; font-weight:500; margin:0 0 4px; line-height:1.35; }
.shop-card__price{ font-size:15px; margin:0 0 4px; }
.shop-card__sizes{ font-size:12px; color:var(--mute); margin:0; letter-spacing:.06em; }
.shop-card[hidden]{ display:none; }

/* ---------- Fiche produit ---------- */
.shop-pdp{
  display:grid; gap:var(--gap);
  grid-template-columns:1fr;
  padding:0 0 clamp(40px,6vw,80px);
}
@media (min-width:900px){
  .shop-pdp{ grid-template-columns:1.15fr 1fr; align-items:start; }
  .shop-pdp__info{ position:sticky; top:90px; padding:clamp(40px,5vw,72px) var(--pad-x) 0 0; }
}
.shop-pdp__media{ display:grid; gap:4px; background:var(--cream); }
.shop-pdp__media img{ width:100%; height:auto; object-fit:cover; }

.shop-pdp__info{ padding:32px var(--pad-x) 0; max-width:56ch; }
.shop-crumb{ font-size:12px; color:var(--mute); margin-bottom:20px; letter-spacing:.04em; }
.shop-crumb a:hover{ color:var(--ink); }
.shop-pdp__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px,4vw,44px); line-height:1.05; letter-spacing:.01em;
  margin:0 0 12px;
}
.shop-pdp__price{ font-size:20px; margin:0 0 32px; }
.shop-pdp__vat{ font-size:13px; color:var(--mute); }

.shop-pdp__sizes{ margin-bottom:24px; }
.shop-sizes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.shop-size{
  min-width:52px; padding:12px 14px; font-size:13px; letter-spacing:.06em;
  border:1px solid var(--line); background:transparent;
  transition:border-color var(--tx), background var(--tx), color var(--tx);
}
.shop-size:hover{ border-color:var(--ink); }
.shop-size[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.shop-pdp__add{ width:100%; margin-bottom:36px; }

.shop-pdp__desc p{ margin:0 0 14px; }
.shop-pdp__desc p:first-child{ font-size:17px; }

.shop-spec{
  display:grid; grid-template-columns:auto 1fr; gap:10px 24px;
  margin:32px 0 0; padding-top:24px; border-top:1px solid var(--line);
  font-size:14px;
}
.shop-spec dt{ color:var(--mute); }
.shop-spec dd{ margin:0; }

/* ---------- Footer ---------- */
.shop-foot{
  border-top:1px solid var(--line); padding:48px var(--pad-x) 32px;
  background:var(--cream); font-size:14px;
}
.shop-foot__cols{ display:flex; flex-wrap:wrap; gap:var(--gap) 80px; margin-bottom:32px; }
.shop-foot__cols div{ display:flex; flex-direction:column; gap:6px; }
.shop-foot__cols a:hover{ opacity:.6; }
.shop-foot__cols p{ margin:0; }
.shop-foot__fine{ color:var(--mute); font-size:13px; }
.shop-foot__base{ color:var(--mute); font-size:12px; }

/* ---------- Toast panier ---------- */
.shop-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 12px);
  background:var(--ink); color:var(--paper); padding:12px 22px; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity var(--tx), transform var(--tx); z-index:60;
}
.shop-toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:1ms !important; animation-duration:1ms !important; }
}

/* ---------- Panier ---------- */
.shop-cart{ padding:clamp(40px,6vw,80px) var(--pad-x); }
.shop-cart__head{ margin-bottom:var(--gap); }
.shop-cart__head .display{ font-size:clamp(30px,5vw,56px); margin:.1em 0 0; }
.shop-cart__empty{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }

.shop-cart__layout{ display:grid; gap:var(--gap); align-items:start; }
@media (min-width:860px){ .shop-cart__layout{ grid-template-columns:1fr 340px; } }

.shop-cart__lines{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.shop-line{
  display:grid; grid-template-columns:1fr auto auto; gap:20px; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.shop-line__title{ margin:0 0 2px; font-weight:500; }
.shop-line__size{ margin:0; font-size:13px; color:var(--mute); }
.shop-line__remove{
  margin-top:6px; padding:0; background:none; border:0;
  font-size:12px; color:var(--mute); text-decoration:underline;
}
.shop-line__remove:hover{ color:var(--ink); }
.shop-line__qty{ display:flex; align-items:center; gap:4px; border:1px solid var(--line); }
.shop-line__qty button{ width:34px; height:34px; background:none; border:0; font-size:16px; }
.shop-line__qty button:hover{ background:var(--cream); }
.shop-line__qty span{ min-width:24px; text-align:center; font-size:14px; }
.shop-line__price{ margin:0; font-size:15px; min-width:80px; text-align:right; }

.shop-cart__summary{ background:var(--cream); padding:28px; }
.shop-sum{ display:grid; grid-template-columns:1fr auto; gap:10px 16px; margin:0 0 22px; font-size:14px; }
.shop-sum dd{ margin:0; text-align:right; }
.shop-sum__total{ font-size:17px; font-weight:500; padding-top:12px; border-top:1px solid var(--line); }
.shop-cart__free{ margin:0 0 16px; font-size:13px; color:var(--mute); }
.shop-cart__error{ margin:14px 0 0; font-size:13px; color:#B23A2F; }
.shop-cart__fine{ margin:18px 0 0; font-size:12px; color:var(--mute); line-height:1.6; }

/* ---------- Confirmation ---------- */
.shop-success{ padding:clamp(48px,8vw,110px) var(--pad-x); }
.shop-success__inner{ max-width:620px; }
.shop-success__inner .display{ font-size:clamp(40px,7vw,80px); margin:.1em 0 .25em; }
.shop-success__recap{ margin-top:44px; padding:28px; background:var(--cream); }
.shop-success__recap-title{ margin:0 0 8px; font-size:15px; font-weight:500; }
.shop-success__recap .shop-cart__lines{ border-top:0; margin-bottom:20px; }
.shop-success__recap .shop-line{ grid-template-columns:1fr auto; }
.shop-success__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }

/* ---------- Accueil ---------- */
.shop-hero{ position:relative; min-height:min(78vh,720px); display:grid; }
.shop-hero__img{ grid-area:1/1; width:100%; height:100%; object-fit:cover; }
.shop-hero__overlay{
  grid-area:1/1; position:relative; align-self:end;
  padding:var(--pad-x); padding-bottom:clamp(40px,6vw,80px);
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 70%);
  color:#fff;
}
.shop-hero__title{ font-family:var(--font-display); font-size:clamp(52px,11vw,140px); line-height:.9; margin:0; letter-spacing:.02em; }
.shop-hero__tag{ font-size:clamp(15px,2vw,19px); margin:12px 0 24px; max-width:34ch; }

.shop-trust{
  display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding:clamp(28px,4vw,44px) var(--pad-x); border-bottom:1px solid var(--line); background:var(--cream);
}
.shop-trust p{ margin:6px 0 0; font-size:14px; }

.shop-featured{ padding:clamp(48px,7vw,90px) var(--pad-x); }
.shop-featured__more{ margin-top:var(--gap); display:inline-block; }

.shop-cats{ display:grid; gap:2px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.shop-cats__item{
  display:grid; place-items:center; min-height:180px; background:var(--cream);
  font-family:var(--font-display); font-size:clamp(24px,3vw,38px); letter-spacing:.03em;
  transition:background var(--tx), color var(--tx);
}
.shop-cats__item:hover{ background:var(--ink); color:var(--paper); }

/* ========================================================================
   Variantes couleur, galerie et fiche longue.
   ======================================================================== */

/* ---------- Pastilles dans la grille ---------- */
.shop-card__colors{ display:flex; align-items:center; gap:5px; margin:0 0 6px; }
.shop-card__dot{
  width:11px; height:11px; border-radius:50%;
  border:1px solid rgba(0,0,0,.18);
}
.shop-card__more{ font-size:11px; color:var(--mute); letter-spacing:.04em; }

/* ---------- Galerie fiche produit ---------- */
.p-gallery{ display:grid; gap:8px; }
.p-gallery__main{ background:var(--cream); overflow:hidden; }
.p-gallery__main img{ width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover; }

/* Bande de miniatures scrollable : à 13 visuels, une grille fixe pousse la
   fiche hors de l'écran et la colonne d'achat passe sous la ligne de flottaison. */
.p-gallery__thumbs{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:thin;
}
.p-thumb{
  flex:0 0 72px; padding:0; border:1px solid transparent; background:var(--cream);
  cursor:pointer; transition:border-color var(--tx);
}
.p-thumb img{ width:100%; height:90px; object-fit:cover; display:block; }
.p-thumb:hover{ border-color:var(--line); }
.p-thumb.is-active{ border-color:var(--ink); }

@media (min-width:900px){
  .p-gallery{ grid-template-columns:72px 1fr; align-items:start; }
  .p-gallery__thumbs{ flex-direction:column; overflow-x:visible; overflow-y:auto; max-height:80vh; order:-1; }
}

/* ---------- Pastilles de couleur ---------- */
.shop-pdp__colors{ margin-bottom:22px; }
.shop-pdp__colors b{ font-weight:500; text-transform:none; letter-spacing:0; }
.p-swatches{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.p-swatch{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; font-size:13px; line-height:1;
  border:1px solid var(--line); background:transparent; cursor:pointer;
  transition:border-color var(--tx), background var(--tx);
}
.p-swatch:hover{ border-color:var(--ink); }
.p-swatch.is-active{ border-color:var(--ink); background:var(--cream); }
.p-swatch__dot{
  width:14px; height:14px; border-radius:50%;
  border:1px solid rgba(0,0,0,.18); flex:0 0 auto;
}
/* Rupture : barré plutôt que masqué. Retirer le coloris ferait croire qu'il
   n'existe pas ; le barrer dit qu'il reviendra. */
.p-swatch.is-out{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.shop-size.is-out{ opacity:.35; cursor:not-allowed; text-decoration:line-through; }

/* ---------- Fiche longue ---------- */
.p-copy{ margin:32px 0; border-top:1px solid var(--line); padding-top:28px; }
.p-copy__lead{ font-size:15px; line-height:1.7; margin:0 0 24px; }
.p-copy__benefits{ list-style:none; padding:0; margin:0 0 28px; display:grid; gap:18px; }
.p-copy__benefits li{ display:grid; gap:5px; }
.p-copy__benefits strong{ font-size:14px; font-weight:600; letter-spacing:.01em; }
.p-copy__benefits span{ font-size:14px; line-height:1.65; color:var(--mute); }
.p-copy__specs{
  display:grid; grid-template-columns:auto 1fr; gap:8px 20px;
  font-size:13px; margin:0; padding-top:20px; border-top:1px solid var(--line);
}
.p-copy__specs dt{ color:var(--mute); letter-spacing:.04em; }
.p-copy__specs dd{ margin:0; }
.shop-pdp__hook{
  font-size:15px; color:var(--mute); margin:-8px 0 18px; line-height:1.5;
}