/* ═══════════════════════════════════════════════════════════════
   COMPONENTS.CSS — Éléments réutilisés sur plusieurs pages
   Cartes produit, tiroir panier/formulaire, champs de saisie.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   CARTE PRODUIT (grille catalogue, sections promo, similaires)
   ───────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;}
.card{position:relative;background:var(--surface);border:none;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease);}
.card:hover{transform:translateY(-3px);}
.card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--teal-100);display:flex;align-items:center;justify-content:center;border-radius:16px;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.card:hover .card-media img{transform:scale(1.045);}
.card-media .no-photo{font-size:34px;color:var(--ink-faint);opacity:.5;}
.badge{position:absolute;top:12px;font-size:10px;font-weight:700;letter-spacing:.01em;padding:5px 11px;border-radius:var(--radius-pill);z-index:2;}
.badge.promo{left:12px;background:var(--clay-600);color:#fff;}
/* Prix en pastille posée sur la photo — inspiré de la référence donnée par le client */
.price-row{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;background:var(--surface);padding:6px 12px;border-radius:var(--radius-pill);box-shadow:0 3px 10px rgba(43,38,32,.14);}
.price{font-weight:700;font-size:13.5px;letter-spacing:-.01em;color:var(--ink);}
.price.on-sale{color:var(--clay-600);}
.old-price{text-decoration:line-through;color:var(--ink-faint);font-size:11px;}
.card-body{padding:12px 2px 4px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card h3{font-size:13.5px;line-height:1.35;font-weight:600;font-family:var(--font-body);min-height:36px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rating{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-faint);}
.rating .stars{color:var(--gold-600);font-size:11px;letter-spacing:1px;}
.stock{font-size:10.5px;color:var(--ink-faint);display:flex;align-items:center;gap:4px;}
.stock.low{color:var(--crimson-600);font-weight:600;}
.stock.out{color:var(--ink-faint);text-decoration:line-through;}

/* ── Bouton favori — coin haut-droit de la photo ── */
.fav-btn{position:absolute;top:10px;right:10px;z-index:3;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(2px);border:none;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:15px;transition:color .2s,transform .15s,background .2s;}
.fav-btn:hover{transform:scale(1.08);background:#fff;}
.fav-btn.active{color:var(--clay-600);}

/* ── Barre de tri / filtre au-dessus de la grille ── */
.cat-controls{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.cat-check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-muted);cursor:pointer;}
.cat-select{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-pill);padding:8px 14px;font-size:12.5px;color:var(--ink);font-family:inherit;cursor:pointer;}

/* ── Pagination numérotée ── */
.pagination-row{display:flex;align-items:center;justify-content:center;gap:6px;padding:36px 0 8px;}
.page-btn{min-width:36px;height:36px;padding:0 10px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;font-family:var(--font-mono);transition:background .2s,color .2s,border-color .2s;}
.page-btn:hover:not(:disabled){border-color:var(--teal-700);}
.page-btn.active{background:var(--teal-700);border-color:var(--teal-700);color:#fff;}
.page-btn:disabled{opacity:.35;cursor:not-allowed;}
.page-dots{color:var(--ink-faint);padding:0 2px;}
.qty-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-pill);}
.stepper button{background:none;border:none;width:28px;height:28px;font-size:15px;color:var(--ink);}
.stepper span{width:20px;text-align:center;font-size:13px;font-weight:600;}
.add-btn{flex:1;background:var(--teal-700);color:#fff;border:none;border-radius:var(--radius-pill);padding:10px 12px;font-size:12.5px;font-weight:600;transition:background .2s;}
.add-btn:hover{background:var(--teal-600);}
.add-btn:disabled{background:var(--border);color:var(--ink-faint);cursor:not-allowed;}

/* Bouton "Charger plus" — pagination du catalogue */
.load-more-row{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 0 8px;}
.load-more-btn{background:var(--surface);border:1.5px solid var(--teal-700);color:var(--teal-700);border-radius:var(--radius-pill);padding:13px 32px;font-size:13.5px;font-weight:600;transition:background .2s,color .2s;}
.load-more-btn:hover{background:var(--teal-700);color:#fff;}
.load-more-count{font-size:12px;color:var(--ink-faint);}

/* ─────────────────────────────────────────────────────────────
   FILTRES / CHIPS — en pilule
   ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   TIROIR (panier / formulaire) — coins arrondis nets, plus de zigzag
   ───────────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0);display:flex;align-items:stretch;justify-content:flex-end;z-index:30;pointer-events:none;transition:background .35s var(--ease);}
.overlay.open{background:rgba(0,0,0,.35);pointer-events:auto;}
.drawer{width:420px;max-width:92vw;background:var(--surface);display:flex;flex-direction:column;position:relative;transform:translateX(100%);transition:transform .38s var(--ease);
  border-radius:24px 0 0 24px;box-shadow:-20px 0 60px rgba(0,0,0,.12);}
.overlay.open .drawer{transform:translateX(0);}
.drawer-head{padding:26px 24px 14px;border-bottom:1px solid var(--border);}
.drawer-head h2{font-size:18px;}
.drawer-body{flex:1;overflow-y:auto;padding:16px 24px;}
.drawer-foot{padding:18px 24px 24px;border-top:1px solid var(--border);}
.close-x{position:absolute;top:20px;right:20px;background:var(--teal-100);border:none;width:32px;height:32px;border-radius:50%;font-size:16px;color:var(--ink-muted);z-index:2;}
.line{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;padding:10px 0;border-bottom:1px dashed var(--border);gap:10px;}
.line .meta{color:var(--ink-faint);font-size:11.5px;}
.line .amt{white-space:nowrap;font-weight:600;font-family:var(--font-mono);}
.line .rm{background:none;border:none;color:var(--crimson-600);font-size:12px;margin-left:8px;}
.total-row{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;font-size:19px;font-weight:700;font-family:var(--font-mono);}
.fine{font-size:11.5px;color:var(--ink-faint);margin-top:8px;line-height:1.5;}
.empty{text-align:center;padding:60px 20px;color:var(--ink-faint);font-size:13.5px;}

.connecte-bandeau{display:flex;align-items:center;gap:8px;background:var(--teal-100);color:var(--ink);font-size:12.5px;padding:12px 14px;border-radius:var(--radius);margin-bottom:18px;flex-wrap:wrap;}
.connecte-bandeau i{color:var(--ink);}
.connecte-bandeau a{color:var(--ink);font-weight:700;text-decoration:underline;margin-left:auto;}
.connecte-bandeau.invite{background:var(--gold-100);}
.connecte-bandeau.invite i{color:var(--gold-700);}

/* ─────────────────────────────────────────────────────────────
   CHAMPS DE FORMULAIRE
   ───────────────────────────────────────────────────────────── */
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;color:var(--ink-muted);margin-bottom:6px;font-weight:500;}
.field input,.field textarea,.field select{width:100%;height:44px;border:1px solid var(--border);border-radius:12px;padding:0 14px;font-size:14px;font-family:inherit;background:var(--teal-100);color:var(--ink);transition:border-color .2s,background .2s;}
.field textarea{height:auto;padding:12px 14px;resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--teal-700);background:#fff;}
.err{color:var(--crimson-600);font-size:12px;margin-top:5px;display:none;}
.toggle-row{display:flex;gap:8px;}
.toggle-opt{flex:1;border:1px solid var(--border);border-radius:12px;padding:11px;text-align:center;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;}
.toggle-opt.active{border-color:var(--teal-700);background:var(--teal-100);color:var(--ink);font-weight:700;}

/* ─────────────────────────────────────────────────────────────
   TOAST (confirmation légère, ex: ajout panier)
   ───────────────────────────────────────────────────────────── */
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--teal-700);color:#fff;padding:14px 22px;border-radius:var(--radius-pill);font-size:13.5px;display:flex;align-items:center;gap:8px;box-shadow:0 12px 32px rgba(0,0,0,.2);z-index:40;animation:toastIn .3s var(--ease);}
.toast i{color:var(--gold-600);}
.toast a{color:var(--gold-600);font-weight:600;margin-left:6px;}

@media (max-width:560px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));}
}
@media (max-width:420px){
  /* En dessous de ~380-390px réels, même minmax(155px) ne laisse tenir
     qu'une seule colonne (155*2 + le gap dépasse la largeur dispo) — on
     force 2 colonnes fixes avec un gap réduit plutôt qu'une seule carte
     pleine largeur par ligne. */
  .grid{grid-template-columns:repeat(2,1fr);gap:12px;}
}

/* ─────────────────────────────────────────────────────────────
   VISUEL HÉRO PARTAGÉ — photo dans une forme organique en fond de
   couleur, inspiré de la référence donnée par le client (accueil
   boutique ET page vitrine).
   ───────────────────────────────────────────────────────────── */
.shop-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;}
.shop-hero-blob{position:absolute;inset:6% 4%;background:var(--clay-100);border-radius:52% 48% 44% 56%/48% 44% 56% 52%;z-index:0;}
.shop-hero-blob.blob-alt{background:var(--teal-100);border-radius:44% 56% 52% 48%/56% 48% 52% 44%;}
.shop-hero-photo{position:relative;z-index:1;width:88%;aspect-ratio:1/1;object-fit:cover;border-radius:50% 50% 46% 54%/54% 46% 50% 50%;box-shadow:0 24px 50px rgba(43,38,32,.14);}

@media (max-width:900px){
  .shop-hero-photo{width:76%;}
}