/* ============================================================
   BOUTIQUE.CSS — Page boutique RN-PERFORMANCE (boutique.html)
   Dépend de theme.css (tokens) et vitrine.css (header, footer, .reveal).
   Mobile-first, dark par défaut, thème clair géré par les tokens.
   ============================================================ */

/* ============================================================
   BANDEAU « EN DÉVELOPPEMENT »
   Permanent : il ne se ferme pas. La modale, elle, s'oublie une
   fois validée — le bandeau reste le rappel de fond.
   Placé DANS .site-header (déjà sticky) : inutile — et nuisible —
   de le rendre sticky lui-même, il se serait glissé sous le header.
   ============================================================ */
.shop-notice{
  background:var(--warning-soft);
  border-top:1px solid color-mix(in srgb, var(--warning) 24%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--warning) 42%, transparent);
}
.shop-notice-inner{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 20px; text-align:center;
  font-size:13px; font-weight:600; line-height:1.4;
  color:color-mix(in srgb, var(--warning) 72%, var(--text));
}
.shop-notice svg{width:17px; height:17px; flex-shrink:0; color:var(--warning);}
.shop-notice strong{color:var(--warning); font-weight:800;}

/* ============================================================
   OUTILS BOUTIQUE — panier + action admin
   Dans le hero de la page, PAS dans le header : le header porte
   déjà le logo, le compte et le burger, et deux boutons de plus
   y écrasaient le bandeau d'avertissement.
   ============================================================ */
.shop-tools{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px; margin:26px 0 0;
}
.shop-tools:empty{margin:0;}
.shop-tools .btn{padding:11px 20px; font-size:14px;}

.shop-cart-btn{position:relative;}
.shop-cart-count{
  position:absolute; top:-7px; right:-7px;
  min-width:21px; height:21px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill); background:var(--accent-grad); color:#fff;
  font-size:11px; font-weight:800; line-height:1;
  box-shadow:0 0 0 2px var(--bg);
}
.shop-cart-count[hidden]{display:none;}

@media (max-width:520px){
  /* Deux boutons pleine largeur plutôt qu'un retour à la ligne bancal. */
  .shop-tools{flex-direction:column; align-items:stretch;}
  .shop-tools .btn{width:100%; justify-content:center;}
}

/* ============================================================
   HERO BOUTIQUE
   ============================================================ */
.shop-hero{padding:44px 0 26px; text-align:center;}
.shop-hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--accent);
}
.shop-hero .eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--accent);
}
.shop-hero h1{
  font-size:32px; font-weight:800; letter-spacing:-.8px;
  margin:14px 0 0; line-height:1.15;
}
.shop-hero p{
  margin:14px auto 0; max-width:620px;
  color:var(--muted); font-size:16px;
}
@media (min-width:768px){ .shop-hero h1{font-size:42px;} }

/* ---------- Filtres par catégorie ---------- */
.shop-filters{
  display:flex; flex-wrap:wrap; justify-content:center; gap:9px;
  margin:26px 0 0;
}
.shop-filter{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--border);
  color:var(--muted); font-size:13px; font-weight:700; line-height:1;
  cursor:pointer; transition:var(--t-fast);
}
.shop-filter:hover{border-color:var(--accent); color:var(--accent);}
.shop-filter[aria-pressed="true"]{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent);
}
.shop-filter .n{
  font-size:11px; font-weight:800; opacity:.7;
  padding:1px 6px; border-radius:var(--r-pill); background:var(--surface-2);
}

/* ============================================================
   GRILLE PRODUITS
   ============================================================ */
.shop-section{padding:30px 0 80px;}
.shop-grid{display:grid; grid-template-columns:1fr; gap:22px;}
@media (min-width:600px){ .shop-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .shop-grid{grid-template-columns:repeat(3,1fr);} }

.shop-card{
  display:flex; flex-direction:column; text-align:left;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); overflow:hidden;
  padding:0; font:inherit; color:inherit; width:100%;
  cursor:pointer; transition:var(--t);
}
.shop-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:var(--shadow);
}
.shop-card:hover .shop-card-media img{transform:scale(1.04);}

/* ---------- Média ---------- */
.shop-card-media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.shop-card-media img,
.shop-card-media .shop-placeholder{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--t);
}

/* Visuel de repli quand aucune image n'est fournie (ou qu'elle casse). */
.shop-placeholder{
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-grad-soft);
}
.shop-placeholder svg{
  width:38%; max-width:120px; height:auto;
  color:color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Filigrane « fictif » : présent tant que la boutique n'est pas ouverte. */
.shop-card.is-fictive .shop-card-media::after{
  content:"Produit fictif";
  position:absolute; left:0; right:0; bottom:0;
  padding:6px 12px;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(4px);
  font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:var(--muted); text-align:center;
}

.shop-badge{
  position:absolute; top:12px; left:12px; z-index:1;
  padding:5px 11px; border-radius:var(--r-pill);
  background:var(--accent-grad); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  box-shadow:var(--glow);
}

/* ---------- Corps ---------- */
.shop-card-body{display:flex; flex-direction:column; flex:1; padding:20px;}
.shop-card-cat{
  font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--accent);
}
.shop-card h3{font-size:18px; font-weight:700; margin:7px 0 0;}
.shop-card .shop-card-sum{
  margin:8px 0 0; font-size:14px; color:var(--muted); flex:1;
}

.shop-price{display:flex; align-items:baseline; gap:9px; margin-top:16px;}
.shop-price .v{font-size:22px; font-weight:800; color:var(--text);}
.shop-price .old{font-size:14px; color:var(--muted-2); text-decoration:line-through;}
.shop-price .free{font-size:14px; color:var(--muted); font-weight:600;}

.shop-card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--border);
}
.shop-card-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:700; color:var(--accent);
}
.shop-card-link svg{width:16px; height:16px;}
.shop-soon{
  font-size:12px; font-weight:700; color:var(--muted-2);
  padding:5px 10px; border-radius:var(--r-pill); background:var(--surface-2);
  white-space:nowrap;
}

/* ---------- États de la grille ---------- */
.shop-loading,
.shop-empty,
.shop-error{
  grid-column:1/-1; text-align:center; padding:56px 20px;
  color:var(--muted); font-size:15px;
  border:1px dashed var(--border-strong); border-radius:var(--r-xl);
}
.shop-error{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, transparent);}
.shop-error code{
  display:block; margin-top:8px; font-family:var(--mono);
  font-size:12px; color:var(--muted);
}

/* ============================================================
   MODALES
   Les règles .modal vivent dans profile.css, qui n'est PAS chargé
   ici : on redéclare le strict nécessaire sous un nom dédié.
   ============================================================ */
.shop-modal{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,.62); backdrop-filter:blur(4px);
}
.shop-modal.open{display:flex;}
.shop-modal-card{
  position:relative;
  width:100%; max-width:440px; max-height:calc(100vh - 40px);
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:28px;
  box-shadow:var(--shadow-lg);
}
.shop-modal-card.wide{max-width:760px; padding:0;}

.shop-modal-close{
  position:absolute; top:14px; right:14px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid var(--border); color:var(--text);
  backdrop-filter:blur(6px); transition:var(--t-fast);
}
.shop-modal-close:hover{border-color:var(--accent); color:var(--accent);}
.shop-modal-close svg{width:17px; height:17px;}

/* ---------- Modale d'avertissement ---------- */
.shop-warn-ico{
  width:56px; height:56px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-lg);
  background:var(--warning-soft); color:var(--warning);
}
.shop-warn-ico svg{width:28px; height:28px;}
.shop-modal-card h2{
  margin:0; font-size:20px; font-weight:800; text-align:center; letter-spacing:-.3px;
}
.shop-warn-text{
  margin:12px 0 0; text-align:center; font-size:15px; color:var(--muted); line-height:1.6;
}
.shop-warn-text strong{color:var(--text);}
.shop-modal-card .actions{margin-top:22px;}
.shop-modal-card .actions .btn{width:100%; justify-content:center;}

/* ---------- Fiche produit ---------- */
.shop-detail-media{
  position:relative; aspect-ratio:16/10;
  background:var(--surface-2); border-bottom:1px solid var(--border);
}
.shop-detail-media img,
.shop-detail-media .shop-placeholder{width:100%; height:100%; object-fit:cover; display:block;}
.shop-detail-body{padding:26px;}
.shop-detail-body .shop-card-cat{display:block;}
.shop-detail-body h2{text-align:left; margin:7px 0 0; font-size:26px;}
.shop-detail-body .shop-price{margin-top:14px;}
.shop-detail-desc{margin:18px 0 0; color:var(--muted); font-size:15px;}
.shop-detail-desc p{margin:0 0 12px;}
.shop-detail-desc p:last-child{margin-bottom:0;}

.shop-detail-block{margin-top:22px;}
.shop-detail-block h4{
  margin:0 0 10px; font-size:12px; font-weight:800;
  letter-spacing:1px; text-transform:uppercase; color:var(--muted-2);
}
.shop-variants{display:flex; flex-wrap:wrap; gap:8px;}
.shop-variant{
  padding:7px 13px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--border);
  font-size:13px; font-weight:600; color:var(--text);
}
.shop-specs{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
.shop-specs li{display:flex; gap:10px; font-size:14px; color:var(--text);}
.shop-specs li svg{width:17px; height:17px; color:var(--accent); flex-shrink:0; margin-top:2px;}

/* Galerie : miniatures sous le visuel principal (ignorée si 1 seule image). */
.shop-thumbs{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px;}
.shop-thumb{
  width:64px; height:64px; padding:0; overflow:hidden;
  border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface-2); cursor:pointer; transition:var(--t-fast);
}
.shop-thumb img{width:100%; height:100%; object-fit:cover;}
.shop-thumb[aria-pressed="true"]{border-color:var(--accent);}
.shop-thumb:hover{border-color:var(--accent);}

.shop-detail-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--border);
}
.shop-detail-foot .btn[disabled]{
  opacity:.55; cursor:not-allowed; box-shadow:none; filter:none;
}
.shop-detail-foot .hint{font-size:13px; color:var(--muted-2); flex:1; min-width:180px;}

/* Variantes : ce sont des boutons, l'actif porte l'accent. */
.shop-variant{cursor:pointer; transition:var(--t-fast);}
.shop-variant:hover{border-color:var(--accent); color:var(--accent);}
.shop-variant[aria-pressed="true"]{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent);
}

/* Barre admin en pied de fiche produit. */
.shop-admin-bar{margin-top:18px; padding-top:16px; border-top:1px dashed var(--border-strong);}
.shop-admin-bar .btn{width:100%; justify-content:center;}
.btn-ghost.danger{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, transparent);}
.btn-ghost.danger:hover{background:var(--danger-soft); color:var(--danger); border-color:var(--danger);}

/* ============================================================
   PANIER
   ============================================================ */
.shop-lines{display:flex; flex-direction:column; gap:12px; margin-top:18px;}
.shop-line{
  display:grid; grid-template-columns:56px 1fr auto auto;
  align-items:center; gap:12px;
  padding:10px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--border);
}
.shop-line-media{
  width:56px; height:56px; border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface-3);
}
.shop-line-media img,
.shop-line-media .shop-placeholder{width:100%; height:100%; object-fit:cover;}
.shop-line-media .shop-placeholder svg{width:60%;}
.shop-line-info{display:flex; flex-direction:column; gap:2px; min-width:0;}
.shop-line-info strong{font-size:14px; font-weight:700;}
.shop-line-opts{font-size:12px; color:var(--accent); font-weight:600;}
.shop-line-unit{font-size:12px; color:var(--muted);}

.shop-line-qty{
  display:flex; align-items:center; gap:4px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill);
  padding:3px;
}
.shop-line-qty span{min-width:22px; text-align:center; font-size:13px; font-weight:800;}
.shop-qty{
  width:26px; height:26px; border-radius:50%;
  background:none; border:0; color:var(--text);
  font-size:16px; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:var(--t-fast);
}
.shop-qty:hover{background:var(--accent-soft); color:var(--accent);}

.shop-line-del{
  width:32px; height:32px; padding:0; border-radius:var(--r-sm);
  background:none; border:1px solid transparent; color:var(--muted-2);
  display:inline-flex; align-items:center; justify-content:center;
  transition:var(--t-fast);
}
.shop-line-del svg{width:16px; height:16px;}
.shop-line-del:hover{color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, transparent);}

.shop-cart-total{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border);
  font-size:14px; color:var(--muted); font-weight:600;
}
.shop-cart-total strong{font-size:24px; font-weight:800; color:var(--text);}

.shop-cart-note{
  display:flex; gap:10px; margin-top:14px; padding:12px 14px;
  border-radius:var(--r-md);
  background:var(--warning-soft);
  border:1px solid color-mix(in srgb, var(--warning) 32%, transparent);
  font-size:13px; line-height:1.5;
  color:color-mix(in srgb, var(--warning) 68%, var(--text));
}
.shop-cart-note svg{width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--warning);}

.shop-modal-card .actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
.shop-modal-card .actions .btn{flex:1; min-width:150px; justify-content:center;}
.shop-modal-card .actions .btn[disabled]{opacity:.55; cursor:not-allowed; box-shadow:none; filter:none;}

/* ============================================================
   FORMULAIRE « NOUVEAU PRODUIT » (admin)
   ============================================================ */
.shop-modal-card.form{max-width:620px;}
.shop-form-sub{margin:6px 0 0; font-size:13px; color:var(--muted); text-align:center;}
.shop-form-sub code{font-family:var(--mono); color:var(--accent);}

.shop-form{display:flex; flex-direction:column; gap:14px; margin-top:20px;}
.shop-form label{
  display:flex; flex-direction:column; gap:6px;
  font-size:13px; font-weight:700; color:var(--text);
}
.shop-form .hint{font-size:12px; font-weight:500; color:var(--muted-2);}
.shop-form input,
.shop-form textarea{
  width:100%; padding:11px 13px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md);
  color:var(--text); font-family:inherit; font-size:14px; font-weight:500;
  transition:var(--t-fast);
}
.shop-form textarea{resize:vertical; line-height:1.5;}
.shop-form input:focus,
.shop-form textarea:focus{outline:none; border-color:var(--accent); background:var(--surface);}
.shop-form input[type="file"]{padding:9px; font-size:13px; cursor:pointer;}
.shop-form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

.shop-form-preview{display:flex; flex-wrap:wrap; gap:8px;}
.shop-form-thumb{
  width:60px; height:60px; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--border); background:var(--surface-2);
}
.shop-form-thumb img{width:100%; height:100%; object-fit:cover;}

.shop-form-msg{font-size:13px; font-weight:600; color:var(--muted); min-height:1px;}
.shop-form-msg.error{color:var(--danger);}
.shop-form-msg.ok{color:var(--success);}

@media (max-width:600px){
  .shop-modal{padding:12px;}
  .shop-modal-card{padding:22px;}
  .shop-modal-card.wide{padding:0;}
  .shop-detail-body{padding:20px;}
  .shop-detail-body h2{font-size:21px;}
  .shop-form-row{grid-template-columns:1fr;}
  /* Le panier passe sur deux rangs : visuel + infos, puis quantité. */
  .shop-line{grid-template-columns:52px 1fr auto;}
  .shop-line-qty{grid-column:2; justify-self:start;}
  .shop-line-del{grid-column:3; grid-row:2;}
}

/* Le fond ne défile pas derrière une modale ouverte. */
body.shop-modal-open{overflow:hidden;}