/* ======================================================
   GAME TRAINING CLUB
   COMPONENTS SYSTEM
   Composants réutilisables UI
   ====================================================== */


/* ======================================================
   CARD SYSTEM
   ====================================================== */

.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
gap:clamp(20px,2.5vw,30px);
}

.card-link{
display:block;
text-decoration:none;
color:inherit;
}

.card{

position:relative;

aspect-ratio:16/9;

overflow:hidden;

background:var(--color-dark);

border:2px solid var(--color-gold);

transition:
transform var(--transition-smooth),
box-shadow var(--transition-smooth),
border-color var(--transition-fast);

will-change:transform;

}

@media (hover:hover){

.card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-strong);
}

}

.card-image{

position:absolute;

inset:0;

background-size:cover;
background-position:center;
background-repeat:no-repeat;

filter:brightness(.75) contrast(1.05);

transition:
transform 1.2s cubic-bezier(.16,1,.3,1),
filter .6s ease;

}

@media (hover:hover){

.card:hover .card-image{
transform:scale(1.05);
filter:brightness(.9);
}

}

.card-content{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:clamp(20px,3vw,30px);

background:
linear-gradient(
to top,
rgba(0,0,0,.9),
rgba(0,0,0,.2),
transparent
);

}

.category{

font-size:.75rem;

letter-spacing:3px;

text-transform:uppercase;

color:var(--color-gold);

margin-bottom:6px;

font-weight:600;

}

.card-content h3{

font-family:var(--font-title);

font-size:1.6rem;

letter-spacing:1px;

text-transform:uppercase;

color:var(--color-white);

line-height:1.2;

text-shadow:0 4px 12px rgba(0,0,0,.8);

}

.card-content p{
display:none;
}


/* ======================================================
   BUTTON SYSTEM
   ====================================================== */

.btn,
.btn-primary,
.btn-glass,
.btn-outline{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

text-decoration:none;

cursor:pointer;

font-weight:600;

letter-spacing:.5px;

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

}

.btn-primary{

background:var(--color-gold);

color:var(--color-black);

padding:14px 32px;

border-radius:var(--radius-pill);

border:1px solid var(--color-gold);

font-size:.9rem;

text-transform:uppercase;

letter-spacing:1px;

}

.btn-primary:hover{

background:var(--color-white);

color:var(--color-black);

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,0,0,.4);

}

.btn-glass{

background:rgba(255,255,255,.08);

color:var(--color-white);

padding:14px 32px;

border-radius:var(--radius-pill);

border:1px solid rgba(255,255,255,.25);

backdrop-filter:blur(10px);

font-size:.9rem;

}

.btn-glass:hover{

background:rgba(255,255,255,.18);

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,0,0,.4);

}

.btn-outline{

background:transparent;

color:var(--color-gold);

border:1px solid var(--color-gold);

padding:12px 28px;

border-radius:var(--radius-pill);

font-size:.85rem;

text-transform:uppercase;

letter-spacing:1px;

}

.btn-outline:hover{

background:var(--color-gold);

color:var(--color-black);

transform:translateY(-2px);

}

.btn-icon{

display:inline-flex;

align-items:center;

justify-content:center;

width:38px;

height:38px;

border-radius:50%;

background:rgba(255,255,255,.08);

transition:.25s;

}

.btn-icon:hover{

background:rgba(255,255,255,.2);

}


/* ======================================================
   CTA BUTTONS HERO
   ====================================================== */

.cta-primary,
.cta-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:12px;

font-weight:600;

font-size:.95rem;

letter-spacing:.5px;

text-decoration:none;

transition:.25s;

min-width:200px;

}

.cta-primary{

background:#E10600;

color:white;

border:1px solid #E10600;

}

.cta-primary:hover{

background:#ff1e1e;

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,0,0,.5);

}

.cta-secondary{

background:transparent;

border:1px solid var(--color-gold);

color:var(--color-gold);

}

.cta-secondary:hover{

background:var(--color-gold);

color:black;

transform:translateY(-2px);

}


/* ======================================================
   PRICING SYSTEM
   ====================================================== */

.pricing-page{
background:var(--color-black);
}

.pricing-card{

position:relative;

background:linear-gradient(145deg,#111,#1a1a1a);

padding:22px;

display:flex;

flex-direction:column;

border-radius:14px;

border:2px solid var(--color-gold);

transition:
transform .35s cubic-bezier(.2,.8,.2,1),
box-shadow .35s ease,
background .35s ease;

box-shadow:0 15px 35px rgba(0,0,0,.45);

overflow:hidden;

}

.pricing-card:hover{

transform:translateY(-8px);

box-shadow:
0 25px 55px rgba(0,0,0,.65),
0 0 0 1px rgba(212,175,55,.25);

}

.amount{
font-size:2rem;
font-weight:700;
color:var(--color-gold);
}

.unit{
font-size:.85rem;
color:var(--color-silver);
}


/* ======================================================
   GALLERY SYSTEM
   ====================================================== */

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:18px;

width:min(1400px,95%);

margin:auto;

}

.gallery-item{

position:relative;

overflow:hidden;

aspect-ratio:4/3;

cursor:pointer;

background:#111;

border-radius:6px;

transition:transform .3s ease;

}

.gallery-item:hover{
transform:translateY(-4px);
}

.gallery-image{

width:100%;

height:100%;

object-fit:cover;

filter:brightness(.85);

transition:
transform .8s cubic-bezier(.16,1,.3,1),
filter .4s ease;

}

.gallery-item:hover .gallery-image{

transform:scale(1.08);

filter:brightness(1);

}


/* ======================================================
   LIGHTBOX
   ====================================================== */

.lightbox{

position:fixed;

inset:0;

background:rgba(0,0,0,.96);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

transition:.4s;

z-index:var(--z-lightbox);

}

.lightbox.active{

opacity:1;

visibility:visible;

}

.lightbox-image{

max-width:92%;

max-height:92vh;

border-radius:4px;

box-shadow:0 40px 80px rgba(0,0,0,.8);

}


/* ======================================================
   FOOTER
   ====================================================== */

.site-footer{

background:linear-gradient(180deg,#0a0a0a 0%,#080808 100%);

border-top:1px solid rgba(212,175,55,.15);

margin-top:80px;

padding-block:60px 40px;

position:relative;

}

.footer-inner{

display:grid;

grid-template-columns:1.2fr 1fr 1fr;

gap:60px;

}

.footer-nav{
display:flex;
flex-direction:column;
gap:14px;
}

.footer-nav a:hover{
color:var(--color-gold);
}