/* ==========================================
   HERO
========================================== */

.formations-hero{
    padding:1rem 0 4rem;
    text-align:center;
}

.formations-hero h1{
    margin-bottom:1rem;
	margin-top: 1rem;
}

.hero-text{
    max-width:700px;
    margin:auto;
    opacity:.8;
}
 .content { padding: 2rem; 24px 15px; }
/* HERO spécifique formations */

.formations-page .formations-hero h1{
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: .95;
    margin-bottom: .75rem;
}

.formations-page .formations-hero{

    padding: 1rem 0 1rem;

}

.formations-page .hero-text{
    max-width: 700px;
    margin: 20px auto;
}





/* ==========================================
   INTRO
========================================== */

.formations-intro{

    padding:2rem 0 4rem;

}

.formations-intro h2{

    text-align:center;

    margin:1rem auto 3rem;

    max-width:900px;

}

.intro-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:2rem;

}

.intro-card{

    background:#fff;

    border-top:8px solid var(--accent);

    padding:2.2rem;

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

    transition:.3s ease;

}

.intro-card:hover{

    transform:translateY(-6px);

}

.intro-card h3{

    margin:0 0 1rem;

    font-size:1.4rem;

    line-height:1.2;

}

.intro-card p{

    margin:0;

    line-height:1.7;

    color:#666;

}
/* ==========================================
   RECHERCHE
========================================== */


.formations-toolbar{

    padding:1rem 0;
	margin:0;

}
.formation-search{
    width:100%;
    max-width:700px;

    padding:1rem 1.25rem;

    border:none;
    border-radius:999px;

    font-size:1rem;
}


/* ==========================================
   FILTRES
========================================== */

.formations-filters{

    padding:0 0 1rem;

}

.filter-group{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
}

.filter-btn{
    border:none;

    padding:.75rem 1rem;

    border-radius:999px;

    cursor:pointer;

    transition:.3s;
}

.filter-btn.active{
    background:var(--color-accent);
    color:white;
}


/* ==========================================
   GRILLE
========================================== */

.formations-results{
    padding-bottom:6rem;
}

.formations-grid{

    display:grid;

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

    gap:2rem;

}

/* ==========================================
   CARTE
========================================== */

.formation-card{

    display:flex;
    flex-direction:column;

    background:#323232;
    color:#fff;

    border-radius:24px;

    overflow:hidden;

    text-decoration:none;

    transition:.35s ease;

}

.formation-card:hover{

    transform:translateY(-8px);

}

.formation-card-image{

    aspect-ratio:4/5;

    background-size:cover;

    background-position:center;

}

.formation-card-content{

    display:flex;
    flex-direction:column;
    height:100%;

    padding:1.75rem;

}

.formation-card-title{

    margin:0;

    font-size:2rem;

    font-weight:800;

    text-transform:uppercase;

    line-height:.95;

    color:#fff;

}

.formation-card-subtitle{

    margin:.45rem 0 1rem;

    font-size:1rem;

    font-weight:700;

    color:var(--aes-orange);
 text-transform:uppercase;

    letter-spacing:.04em;
}

.formation-card-finalite{

    margin:0 0 1.75rem;

    font-size:1.05rem;

    line-height:1.45;

    color:rgba(255,255,255,.9);

}

.formation-card-tags{

    display:flex;

    flex-wrap:wrap;

    gap:.5rem;

    margin-top:auto;

    padding-top:2rem;

}

.formation-card-tags span{

    padding:.45rem .8rem;

    border-radius:999px;

    background:#1a1a1a;

    color:#fff;

    font-size:.8rem;

    font-weight:600;

}
.capfootball-card{
    background-image:url("../IMG/foot2.png");
}

.apsa-card{
    background-image:url("../IMG/apsa.png");
}

.combat-card{
    background-image:url("../IMG/combat.png");
}

.fitness-card{
    background-image:url("../IMG/fitness.png");
}

.als-card{
    background-image:url("../IMG/als.png");
}

.esport-card{
    background-image:url("../IMG/esport.png");
}
.surf-card{
    background-image:url("../IMG/surf.png");
}
.padel-card{
    background-image:url("../IMG/padel.png");
}
.fes-card{
    background-image:url("../IMG/fes.png");
}
.mediation-card{
    background-image:url("../IMG/mediation.png");
}