/* ===== VARIABLES ===== */
:root{
  --c-txt:#1a1a1a; --c-mut:#6b7280; --c-line:#e5e7eb;
  --c-bg:#fff; --c-soft:#f9fafb;
  --c-main:#0057b8; --c-main-d:#00408a;
  --c-sale:#e11d48; --c-new:#059669;
  --r:10px;
  --sh:0 1px 3px rgba(0,0,0,.08);
  --sh-h:0 8px 24px rgba(0,0,0,.12);
}

/* ===== BASE ===== */
.collection-page{padding:20px 0 60px;color:var(--c-txt)}
.collection-page .container{max-width:1400px;margin:0 auto;padding:0 16px}
.collection-page *,.collection-page *::before,.collection-page *::after{box-sizing:border-box}

/* ===== FIL D'ARIANE ===== */
.breadcrumb{margin:0 0 16px}
.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:0;font-size:14px}
.breadcrumb__item{display:flex;align-items:center;gap:6px}
.breadcrumb__link{color:var(--c-mut);text-decoration:none}
.breadcrumb__link:hover{color:var(--c-main);text-decoration:underline}
.breadcrumb__sep{color:#c0c4cc}
.breadcrumb__current{color:var(--c-txt);font-weight:600}

/* ===== EN-TÊTE ===== */
.collection-header{margin:0 0 24px}
.collection-title{font-size:clamp(26px,4vw,38px);font-weight:800;margin:0 0 8px;letter-spacing:-.5px}
.collection-subtitle{color:var(--c-mut);margin:0;font-size:15px;line-height:1.6;max-width:680px}
.admin-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;padding:10px 14px;background:#fff7ed;border:1px solid #fed7aa;border-radius:var(--r)}
.admin-badge{font-weight:700;font-size:14px;color:#9a3412}
.admin-logout{color:#9a3412;font-size:13px}

/* ===== LAYOUT ===== */
.layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.layout__sidebar{position:sticky;top:20px}
.layout__main{min-width:0}
.layout__overlay{display:none}

/* ===== FILTRES ===== */
.filters{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.filters__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.filters__title{font-size:17px;font-weight:800;margin:0}
.filters__close{display:none;background:none;border:0;font-size:20px;cursor:pointer;color:var(--c-mut);line-height:1}
.filters__group{border:0;padding:0;margin:0 0 20px;border-top:1px solid var(--c-line);padding-top:16px}
.filters__group:first-of-type{border-top:0;padding-top:0}
.filters__label{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--c-mut);margin-bottom:10px;padding:0}
.filters__input{width:100%;padding:9px 12px;border:1px solid var(--c-line);border-radius:8px;font-size:14px;font-family:inherit}
.filters__input:focus{outline:0;border-color:var(--c-main);box-shadow:0 0 0 3px rgba(0,87,184,.12)}
.filters__range{width:100%;accent-color:var(--c-main);cursor:pointer}
.filters__range:disabled{opacity:.4;cursor:not-allowed}
.filters__list{list-style:none;margin:0;padding:0;max-height:230px;overflow-y:auto}
.filters__item{margin-bottom:2px}
.filters__item input{position:absolute;opacity:0;width:0;height:0}
.filters__item label{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;font-size:14px;cursor:pointer;transition:background .15s}
.filters__item label:hover{background:var(--c-soft)}
.filters__item input:checked + label{background:rgba(0,87,184,.09);color:var(--c-main);font-weight:600}
.filters__item input:focus-visible + label{outline:2px solid var(--c-main);outline-offset:1px}
.filters__count{font-size:12px;color:var(--c-mut);background:var(--c-soft);padding:1px 7px;border-radius:20px;flex-shrink:0}
.filters__actions{display:flex;flex-direction:column;gap:8px;margin-top:18px}

/* ===== BOUTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:.18s;font-family:inherit}
.btn--block{width:100%}
.btn--primary{background:var(--c-main);color:#fff}
.btn--primary:hover{background:var(--c-main-d)}
.btn--ghost{background:transparent;color:var(--c-txt);border-color:var(--c-line)}
.btn--ghost:hover{background:var(--c-soft)}

/* ===== TOOLBAR ===== */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:12px 0;margin-bottom:14px;border-bottom:1px solid var(--c-line)}
.toolbar__filters-btn{display:none;background:var(--c-bg);border:1px solid var(--c-line);border-radius:8px;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.toolbar__count{margin:0;font-size:14px;color:var(--c-mut);flex:1}
.toolbar__count strong{color:var(--c-txt)}
.toolbar__sort{display:flex;align-items:center;gap:8px;font-size:14px}
.toolbar__sort label{color:var(--c-mut);white-space:nowrap}
.toolbar__select{padding:8px 10px;border:1px solid var(--c-line);border-radius:8px;font-size:14px;background:var(--c-bg);cursor:pointer;font-family:inherit}

/* ===== CHIPS ===== */
.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--c-soft);border:1px solid var(--c-line);border-radius:20px;font-size:13px;text-decoration:none;color:var(--c-txt);transition:.15s}
.chip:hover{background:#eef2f7;border-color:#cbd5e1}
.chip--clear{background:transparent;color:var(--c-sale);border-color:transparent;text-decoration:underline}

/* ===== GRILLE ===== */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* ===== CARTE PRODUIT ===== */
.product-card{position:relative;background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:transform .22s,box-shadow .22s;animation:fadeUp .45s both}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--sh-h)}
.product-card.is-out{opacity:.65}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* LE LIEN — cliquable sur toute la carte */
.product-card__link{display:flex;flex-direction:column;height:100%;position:relative;z-index:1;text-decoration:none;color:inherit}

.product-card__media{position:relative;aspect-ratio:4/3;background:var(--c-soft);overflow:hidden}
.product-card__img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .3s}
.product-card:hover .product-card__img{transform:scale(1.05)}

/* Les badges NE DOIVENT PAS bloquer le clic */
.product-card__badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;pointer-events:none;z-index:2}
.badge{padding:3px 9px;border-radius:5px;font-size:11px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.3px}
.badge--sale{background:var(--c-sale)}
.badge--new{background:var(--c-new)}
.badge--out{background:#6b7280}

.product-card__body{padding:14px;display:flex;flex-direction:column;flex:1;gap:10px}
.product-card__title{font-size:15px;font-weight:700;margin:0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card__specs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--c-mut)}
.product-card__footer{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--c-line)}
.product-card__price{display:flex;flex-direction:column}
.price--now{font-size:17px;font-weight:800;color:var(--c-main)}
.price--old{font-size:12.5px;color:var(--c-mut);text-decoration:line-through}
.product-card__cta{font-size:13px;font-weight:700;color:var(--c-main);white-space:nowrap}

/* Boutons admin — AU-DESSUS du lien */
.product-card__admin{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:10}
.admin-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:var(--sh);cursor:pointer;font-size:14px}
.admin-btn:hover{background:#fff;transform:scale(1.08)}

/* ===== VIDE ===== */
.empty-state{text-align:center;padding:70px 20px;background:var(--c-soft);border-radius:var(--r)}
.empty-state__icon{font-size:48px;margin-bottom:12px}
.empty-state h2{margin:0 0 8px;font-size:20px}
.empty-state p{color:var(--c-mut);margin:0 0 20px}

/* ===== PAGINATION ===== */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:38px}
.pagination__link{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--c-line);border-radius:8px;text-decoration:none;color:var(--c-txt);font-size:14px;font-weight:600;transition:.15s}
.pagination__link:hover{background:var(--c-soft);border-color:var(--c-main)}
.pagination__link.is-active{background:var(--c-main);border-color:var(--c-main);color:#fff}

/* ===== TABLETTE ===== */
@media (max-width:1024px){
  .layout{grid-template-columns:230px 1fr;gap:20px}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:18px}
}

/* ===== MOBILE ===== */
@media (max-width:768px){
  .layout{display:block}
  .layout__sidebar{position:fixed;top:0;left:0;width:88%;max-width:330px;height:100%;z-index:9999;background:var(--c-bg);overflow-y:auto;transform:translateX(-100%);transition:transform .28s ease;box-shadow:4px 0 24px rgba(0,0,0,.18)}
  .layout__sidebar.is-open{transform:translateX(0)}
  .filters{border:0;border-radius:0;box-shadow:none;min-height:100%}
  .filters__close{display:block}
  .layout__overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.28s;z-index:9998}
  .layout__overlay.is-open{opacity:1;visibility:visible}
  .toolbar__filters-btn{display:inline-flex}
  .toolbar__count{width:100%;order:3;flex:none}
  body.no-scroll{overflow:hidden}
}

@media (max-width:480px){
  .product-grid{grid-template-columns:1fr;gap:14px}
  .toolbar__sort label{display:none}
}