/**
 * CardCarousel — config-gamer.fr
 * Scoped under .cg-cc to avoid leaking into other modules.
 */
.cg-cc { --cg-bg:#0a0a0d; --cg-bg-soft:#14141a; --cg-fg:#f5f5f7; --cg-fg-dim:#b8b8c4; --cg-accent:#ec2569; --cg-radius:14px; --cg-ease:cubic-bezier(.22,.61,.36,1);
  position:relative; width:100%; box-sizing:border-box; color:var(--cg-fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-bottom:36px;
}
@media (max-width: 640px) { .cg-cc { padding-bottom:24px; } }
.cg-cc *, .cg-cc *::before, .cg-cc *::after { box-sizing:border-box; }

.cg-cc__head { display:flex; justify-content:flex-end; gap:16px; padding:0 0 10px; min-height:40px; }
.cg-cc__head:empty { display:none; }
.cg-cc__arrows { display:flex; gap:8px; }
.cg-cc__arrow { width:40px; height:40px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#fff;
  border-radius:50%; cursor:pointer; transition:background .2s var(--cg-ease), border-color .2s var(--cg-ease), opacity .2s var(--cg-ease);
}
.cg-cc__arrow:hover { background:var(--cg-accent); border-color:var(--cg-accent); }
.cg-cc__arrow:focus-visible { outline:2px solid var(--cg-accent); outline-offset:3px; }
.cg-cc__arrow:disabled { opacity:.3; cursor:not-allowed; }
@media (max-width: 640px) { .cg-cc__arrows { display:none; } }

.cg-cc__strip-wrap { position:relative; }
.cg-cc__strip-wrap::before, .cg-cc__strip-wrap::after { content:""; position:absolute; top:0; bottom:0; width:32px; pointer-events:none; z-index:2; }
.cg-cc__strip-wrap::before { left:0;  background:linear-gradient(90deg, var(--cg-bg) 0%, transparent 100%); }
.cg-cc__strip-wrap::after  { right:0; background:linear-gradient(-90deg, var(--cg-bg) 0%, transparent 100%); }

.cg-cc__strip { display:flex; gap:16px; padding:6px 4px 18px; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; scroll-padding:4px;
}
.cg-cc__strip::-webkit-scrollbar { display:none; }
.cg-cc__strip:focus-visible { outline:2px solid var(--cg-accent); outline-offset:4px; border-radius:6px; }

.cg-cc__card { flex:0 0 calc(78% - 8px); aspect-ratio:4/3; position:relative;
  border-radius:var(--cg-radius); overflow:hidden; scroll-snap-align:start;
  background:var(--cg-bg-soft); box-shadow:0 20px 40px -15px rgba(0,0,0,.5);
  text-decoration:none; color:var(--cg-fg);
  transition:transform .3s var(--cg-ease), box-shadow .3s var(--cg-ease);
}
.cg-cc__card:hover, .cg-cc__card:focus-visible { transform:translateY(-4px); box-shadow:0 28px 50px -18px rgba(0,0,0,.6); outline:none; }

@media (min-width: 600px)  { .cg-cc__card { flex-basis:calc(58% - 8px); } }
@media (min-width: 820px)  { .cg-cc__card { flex-basis:calc(46% - 11px); aspect-ratio:5/4; } }
@media (min-width: 1024px) { .cg-cc__card { flex-basis:calc(36% - 11px); aspect-ratio:4/3; } }

.cg-cc__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--cg-ease);
}
.cg-cc__card:hover .cg-cc__img { transform:scale(1.06); }

.cg-cc__overlay { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,13,0) 30%, rgba(10,10,13,.6) 70%, rgba(10,10,13,.95) 100%);
}

.cg-cc__content { position:absolute; left:0; right:0; bottom:0; padding:18px 18px 20px; z-index:2; display:block; }
.cg-cc__badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 8px; border-radius:5px; background:var(--cg-accent); color:#fff; margin-bottom:8px;
}
.cg-cc__cardtitle { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin:0; font-weight:800; font-size:18px; line-height:1.2; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}

.cg-cc__dots { display:flex; gap:6px; justify-content:center; padding:6px 0 0; }
.cg-cc__dot { width:24px; height:3px; border-radius:999px; background:rgba(255,255,255,.18);
  transition:background .25s var(--cg-ease), width .25s var(--cg-ease);
}
.cg-cc__dot.is-active { width:40px; background:var(--cg-accent); }

@media (prefers-reduced-motion: reduce) {
  .cg-cc__strip { scroll-behavior:auto; }
  .cg-cc__card, .cg-cc__img, .cg-cc__arrow, .cg-cc__dot { transition:none; }
}