/*
|--------------------------------------------------------------------------
| FAJAR
| Plateforme Audio
|--------------------------------------------------------------------------
*/

:root{

    --fajar-bg:#0F172A;

    --fajar-card:#1E293B;

    --fajar-gold:#D4AF37;

    --fajar-green:#10B981;

    --fajar-white:#F8FAFC;

    --fajar-light:#CBD5E1;

}

/*
|--------------------------------------------------------------------------
| Application
|--------------------------------------------------------------------------
*/

.fajar-app{

    min-height:100vh;

    background:var(--fajar-bg);

    color:var(--fajar-white);

    padding:40px;

    box-sizing:border-box;

}

/*
|--------------------------------------------------------------------------
| Titres
|--------------------------------------------------------------------------
*/

.fajar-app h1,
.fajar-app h2,
.fajar-app h3,
.fajar-app h4,
.fajar-app h5{

    color:var(--fajar-white);

}

/*
|--------------------------------------------------------------------------
| Paragraphes
|--------------------------------------------------------------------------
*/

.fajar-app p{

    color:var(--fajar-light);

}
/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.fajar-hero{

    max-width:1200px;

    margin:0 auto;

    padding:120px 30px 80px;

    text-align:center;

}

.fajar-logo{

    display:inline-block;

    padding:12px 30px;

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

    color:var(--fajar-gold);

    font-size:34px;

    font-weight:700;

    letter-spacing:8px;

    border-radius:50px;

    margin-bottom:45px;

}

.fajar-hero h1{

    font-size:56px;

    line-height:1.2;

    max-width:850px;

    margin:0 auto;

}

.fajar-hero p{

    max-width:760px;

    margin:35px auto;

    font-size:22px;

    line-height:1.8;

    color:var(--fajar-light);

}

.fajar-button{

    display:inline-block;

    margin-top:20px;

    padding:18px 45px;

    background:var(--fajar-gold);

    color:#111827;

    text-decoration:none;

    border-radius:12px;

    font-weight:700;

    transition:.3s;

}

.fajar-button:hover{

    transform:translateY(-3px);

}

.fajar-stats{

    display:flex;

    justify-content:center;

    gap:30px;

    margin-top:90px;

    flex-wrap:wrap;

}

.fajar-stat{

    width:220px;

    padding:35px;

    background:var(--fajar-card);

    border-radius:18px;

}

.fajar-stat strong{

    display:block;

    font-size:36px;

    color:var(--fajar-gold);

}

.fajar-stat span{

    display:block;

    margin-top:10px;

    color:var(--fajar-light);

}

/*
|--------------------------------------------------------------------------
| Sections
|--------------------------------------------------------------------------
*/

.fajar-section{

    padding:90px 0;

}

.fajar-container{

    width:100%;

    max-width:1300px;

    margin:0 auto;

}

.fajar-section h2{

    text-align:center;

    font-size:42px;

    margin-bottom:15px;

}

.fajar-section> .fajar-container > p{

    text-align:center;

    color:var(--fajar-light);

    margin-bottom:50px;

}

/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.fajar-grid{

    display:grid;

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

    gap:35px;

}

/*
|--------------------------------------------------------------------------
| Audio Card
|--------------------------------------------------------------------------
*/

.fajar-audio-card{

    background:var(--fajar-card);

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

}

.fajar-audio-card:hover{

    transform:translateY(-8px);

}

.fajar-audio-cover{

    overflow:hidden;

}

.fajar-audio-cover img{

    width:100%;

    display:block;

    transition:.35s;

}

.fajar-audio-card:hover img{

    transform:scale(1.05);

}

.fajar-audio-content{

    padding:25px;

}

.fajar-audio-content h3{

    margin:0;

    font-size:22px;

}

.fajar-author{

    margin-top:10px;

    color:var(--fajar-light);

}

.fajar-meta{

    display:flex;

    justify-content:space-between;

    margin:25px 0;

    color:var(--fajar-light);

    font-size:14px;

}

/*
|--------------------------------------------------------------------------
| Catégories
|--------------------------------------------------------------------------
*/

.fajar-category-grid{

    display:grid;

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

    gap:25px;

    margin-top:40px;

}

.fajar-category-card{

    background:var(--fajar-card);

    border-radius:16px;

    padding:30px 20px;

    text-align:center;

    transition:.3s;

    cursor:pointer;

}

.fajar-category-card:hover{

    transform:translateY(-6px);

}

.fajar-category-icon{

    font-size:46px;

    margin-bottom:20px;

}

.fajar-category-card h3{

    margin:0;

    font-size:18px;

    color:var(--fajar-white);

}

/*
|--------------------------------------------------------------------------
| Pourquoi FAJAR
|--------------------------------------------------------------------------
*/

.fajar-benefits-grid{

    display:grid;

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

    gap:25px;

    margin-top:40px;

}

.fajar-benefit{

    background:var(--fajar-card);

    border-radius:16px;

    padding:30px;

    text-align:center;

    transition:.3s;

}

.fajar-benefit:hover{

    transform:translateY(-6px);

}

.fajar-benefit-icon{

    font-size:42px;

    margin-bottom:20px;

}

.fajar-benefit h3{

    margin:0 0 15px;

    font-size:22px;

    color:var(--fajar-white);

}

.fajar-benefit p{

    margin:0;

    font-size:15px;

    line-height:1.7;

    color:var(--fajar-light);

}

/*
|--------------------------------------------------------------------------
| Comment ça fonctionne
|--------------------------------------------------------------------------
*/

.fajar-steps{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.fajar-step{

    background:var(--fajar-card);

    border-radius:16px;

    padding:35px;

    text-align:center;

}

.fajar-step-number{

    width:60px;

    height:60px;

    margin:0 auto 25px;

    border-radius:50%;

    background:var(--fajar-gold);

    color:#111827;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

}

.fajar-step h3{

    margin-bottom:15px;

    color:var(--fajar-white);

}

.fajar-step p{

    color:var(--fajar-light);

    line-height:1.7;

}

@media(max-width:900px){

    .fajar-steps{

        grid-template-columns:1fr;

    }

}

/*
|--------------------------------------------------------------------------
| FAQ
|--------------------------------------------------------------------------
*/

.fajar-faq{

    max-width:900px;

    margin:50px auto 0;

}

.fajar-faq-item{

    background:var(--fajar-card);

    padding:30px;

    border-radius:16px;

    margin-bottom:20px;

}

.fajar-faq-item h3{

    margin:0 0 15px;

    color:var(--fajar-white);

    font-size:22px;

}

.fajar-faq-item p{

    margin:0;

    color:var(--fajar-light);

    line-height:1.8;

}

/*
|--------------------------------------------------------------------------
| Call To Action
|--------------------------------------------------------------------------
*/

.fajar-cta{

    max-width:900px;

    margin:0 auto;

    background:linear-gradient(135deg,#1E293B,#0F172A);

    border:1px solid rgba(212,175,55,.25);

    border-radius:20px;

    padding:70px 50px;

    text-align:center;

}

.fajar-cta h2{

    margin:0;

    font-size:42px;

    color:var(--fajar-white);

}

.fajar-cta p{

    max-width:650px;

    margin:25px auto 40px;

    font-size:19px;

    line-height:1.8;

    color:var(--fajar-light);

}

.fajar-cta .fajar-button{

    display:inline-flex;

    width:auto;

    padding:16px 40px;

}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.fajar-footer{

    margin-top:120px;

    padding:70px 30px 40px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

}

.fajar-footer-logo{

    font-size:36px;

    font-weight:700;

    letter-spacing:8px;

    color:var(--fajar-gold);

    margin-bottom:25px;

}

.fajar-footer-description{

    max-width:650px;

    margin:0 auto 40px;

    line-height:1.8;

    color:var(--fajar-light);

}

.fajar-footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

    margin-bottom:45px;

}

.fajar-footer-links a{

    color:var(--fajar-light);

    text-decoration:none;

    transition:.3s;

}

.fajar-footer-links a:hover{

    color:var(--fajar-gold);

}

.fajar-footer-bottom{

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.08);

    color:var(--fajar-light);

    font-size:14px;

}