/* Styles additionnels pour pousser l'identité gaming */

:root {
  --ring: 0 0 0 3px rgba(34, 211, 238, .35);
}

/* cards */
.feature-card {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: 18px;
  padding: 20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(124, 58, 237, .25), 0 0 0 1px rgba(34,211,238,.2) inset;
  border-color: rgba(34,211,238,.25);
}
.feature-card h3 { font-weight: 700; margin: 6px 0 6px; }
.feature-card p { color: rgba(255,255,255,.75); font-size: 14px; }
.feature-icon { font-size: 22px; opacity: .9; }

/* feature showcase as cards with screenshots */
.feature-screen { position: relative; padding: 14px; max-width: 78%; margin-inline: auto; }
.feature-screen .feature-media { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 9/19.5; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.feature-screen .feature-media img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.feature-screen .feature-overlay { position: static; margin-top: 10px; padding: 0; background: transparent; border: 0; backdrop-filter: none; }
.feature-screen .feature-overlay h3 { margin: 0 0 4px; font-weight: 800; font-size: 16px; }
.feature-screen .feature-overlay p { margin: 0; font-size: 13px; color: rgba(255,255,255,.8); }

/* harmoniser les effets hover entre cartes et captures */
.feature-screen:hover { border-color: rgba(34,211,238,.25); }

/* responsive sizing to keep screenshots smaller */
@media (min-width: 640px) {
  .feature-screen { max-width: 72%; }
}
@media (min-width: 1024px) {
  .feature-screen { max-width: 58%; }
}

/* grid item sizing to keep cards compact */
.screen-card { width: 100%; max-width: 320px; }

/* iPhone-like phone frame */
.feature-screen .feature-media.phone-frame { 
  border-radius: 34px; 
  background: #0b0b12; 
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.08), 0 10px 40px rgba(124,58,237,.18);
}
.feature-screen .feature-media.phone-frame::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 42%; max-width: 170px; height: 18px; background: #0b0b12; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
}
.feature-screen .feature-media.phone-frame img { 
  position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
  border-radius: 26px; object-fit: contain; 
}

/* caption sous la capture */
.feature-caption { margin-top: 10px; }
.feature-caption h4 { margin: 0; font-weight: 800; font-size: 16px; }
.feature-caption p { margin: 2px 0 0; font-size: 13px; color: rgba(255,255,255,.8); }

/* buttons */
.btn-store {
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
  padding: 10px 18px; border-radius: 12px; font-weight: 700;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 30px rgba(124,58,237,.35);
}
.btn-store:hover { filter: brightness(1.05); box-shadow: 0 12px 36px rgba(6,182,212,.35); }
.btn-store.secondary { background: linear-gradient(135deg, #22D3EE 0%, #06B6D4 100%); }

/* mockup tilt */
.mockup { position: relative; }
.mockup img { display:block; }

/* screenshot grid */
.shot { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.shot img { width:100%; height:100%; object-fit: cover; display:block; transition: transform .35s ease; }
.shot:before { content:''; position:absolute; inset:0; background: radial-gradient(120% 120% at 50% 100%, rgba(124,58,237,.25), transparent 60%); opacity:0; transition: opacity .35s ease; }
.shot:hover img { transform: scale(1.04); }
.shot:hover:before { opacity:1; }

/* faq */
details.faq { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px 16px; background: rgba(255,255,255,.03); }
details.faq + details.faq { margin-top: 10px; }
details.faq[open] { box-shadow: 0 10px 30px rgba(124,58,237,.18); }
details.faq summary { cursor: pointer; font-weight: 600; }
details.faq p { color: rgba(255,255,255,.75); margin-top: 8px; }

/* Lightbox transitions */
#lightbox { opacity: 0; transition: opacity .25s ease; }
#lightbox.active { opacity: 1; }

/* focus-visible */
:where(a,button,input,summary):focus-visible { outline: none; box-shadow: var(--ring); }