/* ==========================================================
   AB1 Config Grid — Glass premium (3 colonnes)
========================================================== */

.ab1cg-wrap{ width:100%; }

.ab1cg-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}

@media (max-width:1024px){
  .ab1cg-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .ab1cg-grid{ grid-template-columns: 1fr; }
}

.ab1cg-card{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  text-decoration:none;
  isolation:isolate;

  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,10,14,.34);
  box-shadow: 0 14px 40px rgba(0,0,0,.38);

  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;

  /* rendu texte plus net */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ab1cg-glass{
  position:absolute; inset:0;
  z-index:0;

  background:
    radial-gradient(1000px 420px at 18% 0%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(900px 520px at 90% 24%, rgba(140,90,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ab1cg-sheen{
  position:absolute;
  inset:-40%;
  z-index:1;
  pointer-events:none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
  transform: translateX(-35%) rotate(8deg);
  opacity:0;
  transition: opacity .25s ease, transform .5s ease;
}

.ab1cg-img{
  position:relative;
  z-index:2;
  aspect-ratio: 1/1;
  overflow:hidden;
}

.ab1cg-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.01);
  filter: saturate(1.05) contrast(1.02);
  transition: transform .35s ease, filter .35s ease;
}

.ab1cg-imgfade{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.00) 45%,
    rgba(0,0,0,.55) 100%
  );
}

/* ==========================================================
   PRIX : bandeau en haut, pleine largeur + alignement parfait
========================================================== */
.ab1cg-priceHero{
  position:absolute;
  left:0; right:0; top:0;
  z-index:4;

  display:flex;
  justify-content:space-between;
  align-items:baseline;      /* ✅ baseline parfaite */
  gap:12px;

  padding: 14px 16px;

  /* arrondis cohérents (haut + bas) */
  background: rgba(18,16,26,.55);
  border-bottom: 1px solid rgba(255,255,255,.14);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* même typo / mêmes bases */
  font-family: inherit;
  line-height: 1;
  letter-spacing: .15px;

  color: rgba(255,255,255,.95);
}

.ab1cg-priceHero span{
  font-size: 14px;          /* ✅ même taille */
  font-weight: 650;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}

.ab1cg-priceHero strong{
  font-size: 14px;          /* ✅ même taille */
  font-weight: 850;
  color: #ffffff;
  white-space: nowrap;
}

/* ==========================================================
   Zone composants : sombre premium (pas noir brut)
========================================================== */
.ab1cg-body{
  position:relative;
  z-index:2;
  padding: 14px 14px 16px;

  background: rgba(12,12,16,.78);           /* ✅ sombre premium */
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

/* Specs : sans catégories (que la valeur) */
.ab1cg-specs{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ab1cg-specs li{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  padding: 12px 14px;

  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);

  /* micro effet glass */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Valeur premium */
.ab1cg-v{
  width: 100%;
  font-size: 13px;
  font-weight: 850;
  text-align: right;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ab1cg-specsEmpty{
  padding:12px 12px;
  background: rgba(255,255,255,.05);
  border: 1px dashed rgba(255,255,255,.14);
  font-size:12px;
  opacity:.8;
}

/* CTA */
.ab1cg-cta{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding: 13px 14px;

  background: rgba(140,90,255,.16);
  border: 1px solid rgba(140,90,255,.26);

  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ab1cg-cta span{
  font-weight: 900;
  font-size: 14px;
  letter-spacing:.2px;
}

.ab1cg-cta svg{
  width: 18px;
  height: 18px;
  opacity:.92;
}

/* Hover premium */
.ab1cg-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}

.ab1cg-card:hover .ab1cg-img img{
  transform: scale(1.07);
  filter: saturate(1.12) contrast(1.05);
}

.ab1cg-card:hover .ab1cg-sheen{
  opacity:.9;
  transform: translateX(20%) rotate(8deg);
}

.ab1cg-card:hover .ab1cg-cta{
  transform: translateY(-1px);
  background: rgba(140,90,255,.20);
  border-color: rgba(140,90,255,.34);
  box-shadow: 0 10px 28px rgba(140,90,255,.10);
}

/* Empty */
.ab1cg-empty{
  padding:14px 16px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.15);
  color: rgba(255,255,255,.88);
}