/* ============================================================
   AQUA PRODUITS — Grille de cartes filtrable
   Charte Aqua Center (Sora + DM Sans, teal)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

.aqp-wrap{
  --accent:#007f7f;--light:#b9dcdc;--mid:#73b9b9;--deep:#004646;
  --bg-card:rgba(0,40,40,.35);--border:rgba(185,220,220,.12);
  --display:'Sora',sans-serif;--body:'DM Sans',sans-serif;
  font-family:var(--body);
  max-width:1300px;margin:0 auto;
}
.aqp-wrap *{box-sizing:border-box;}

/* ---- Barre d'outils ---- */
.aqp-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-bottom:16px;
}
.aqp-search{
  position:relative;display:flex;align-items:center;flex:1;min-width:220px;
}
.aqp-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--mid);pointer-events:none;z-index:1;}
.aqp-search-input{
  width:100%;padding:13px 16px 13px 46px;
  background:rgba(0,40,40,.4);border:1px solid var(--border);border-radius:8px;
  color:#fff;font-family:var(--body);font-size:14px;outline:none;
  transition:border-color .3s ease,background .3s ease;
}
.aqp-search-input::placeholder{color:rgba(185,220,220,.4);}
.aqp-search-input:focus{border-color:var(--accent);background:rgba(0,60,60,.5);}

.aqp-filter-cats{display:flex;flex-wrap:wrap;gap:8px;}
.aqp-cat-btn{
  padding:9px 16px;border-radius:100px;cursor:pointer;
  background:rgba(0,40,40,.4);border:1px solid var(--border);
  color:rgba(185,220,220,.7);font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.3px;transition:all .3s ease;
}
.aqp-cat-btn:hover{border-color:var(--mid);color:var(--light);}
.aqp-cat-btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}

.aqp-sort-select{
  padding:12px 16px;border-radius:8px;cursor:pointer;
  background:rgba(0,40,40,.4);border:1px solid var(--border);
  color:#fff;font-family:var(--body);font-size:13px;outline:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b9dcdc' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
.aqp-sort-select:focus{border-color:var(--accent);}

.aqp-count{font-size:12px;color:rgba(185,220,220,.5);margin-bottom:24px;letter-spacing:.3px;}
.aqp-count-num{color:var(--light);font-weight:600;}

/* ---- Grille ---- */
.aqp-grid-items{
  display:grid;gap:24px;
  grid-template-columns:repeat(3,1fr);
}
.aqp-wrap[data-cols="2"] .aqp-grid-items{grid-template-columns:repeat(2,1fr);}
.aqp-wrap[data-cols="4"] .aqp-grid-items{grid-template-columns:repeat(4,1fr);gap:20px;}

/* ---- Carte ---- */
.aqp-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease;
}
.aqp-card:hover{
  transform:translateY(-6px);border-color:rgba(115,185,185,.45);
  box-shadow:0 24px 48px -24px rgba(0,127,127,.55);
}
.aqp-card-media{
  position:relative;display:block;height:300px;overflow:hidden;
  background:#0d3333;
}
.aqp-card-media img{
  width:100%;height:100%;object-fit:contain;object-position:center center;filter:brightness(1.02);
  transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s ease;
}
.aqp-card:hover .aqp-card-media img{transform:scale(1.04);filter:brightness(1);}
.aqp-card-badge{
  position:absolute;top:14px;left:14px;
  font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:#fff;padding:6px 14px;border-radius:100px;
  background:var(--accent);box-shadow:0 4px 12px rgba(0,127,127,.5);
}

.aqp-card-body{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1;}
.aqp-card-subtitle{
  font-size:12px;font-weight:400;color:rgba(185,220,220,.55);
  margin:0 0 6px;letter-spacing:.2px;
}
.aqp-card-title{
  font-family:var(--display);font-size:19px;font-weight:600;
  margin:0 0 14px;line-height:1.3;letter-spacing:.2px;
}
.aqp-card-title a{color:#fff;text-decoration:none;transition:color .3s ease;}
.aqp-card-title a:hover{color:var(--light);}

.aqp-card-specs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;}
.aqp-spec{
  font-size:11px;font-weight:500;color:var(--light);
  padding:5px 11px;border-radius:6px;
  background:rgba(0,127,127,.12);border:1px solid rgba(0,127,127,.25);
}

.aqp-card-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--border);
}
.aqp-card-price{display:flex;flex-direction:column;line-height:1.2;}
.aqp-price-old{
  font-size:12px;color:rgba(185,220,220,.4);text-decoration:line-through;
}
.aqp-price-now{
  font-family:var(--display);font-size:20px;font-weight:700;color:#fff;
}
.aqp-card-cta{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:8px;flex-shrink:0;
  color:#fff;background:var(--accent);border:1px solid rgba(0,127,127,.5);
  transition:background .35s ease,transform .3s ease,box-shadow .35s ease;
}
.aqp-card-cta:hover{
  background:var(--deep);transform:translateX(2px);
  box-shadow:0 8px 20px -6px rgba(0,127,127,.6);
}

/* ---- États vides ---- */
.aqp-empty,.aqp-no-result{
  text-align:center;color:rgba(185,220,220,.55);
  font-size:15px;padding:40px 20px;
}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .aqp-grid-items,
  .aqp-wrap[data-cols="4"] .aqp-grid-items{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .aqp-toolbar{flex-direction:column;align-items:stretch;}
  .aqp-grid-items,
  .aqp-wrap[data-cols="2"] .aqp-grid-items,
  .aqp-wrap[data-cols="4"] .aqp-grid-items{grid-template-columns:1fr;}
}

/* ---- Animation d'apparition ---- */
.aqp-card{opacity:0;transform:translateY(20px);animation:aqpIn .5s ease forwards;}
@keyframes aqpIn{to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){
  .aqp-card{animation:none;opacity:1;transform:none;transition:none;}
}