/* ==========================================
ACADEMIE LABOCOMPTA
========================================== */

:root{
    --primary:#004aad;
    --primary-dark:#00337a;
    --secondary:#eaf3ff;
    --text:#2d3748;
    --gray:#6b7280;
    --border:#dce8f8;
    --white:#fff;
}

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

.resources-section{
    padding:80px 20px 40px;
    background:linear-gradient(135deg,#f7fbff,#eef6ff);
    text-align:center;
}

.resources-section h2{
    font-size:2.4rem;
    color:var(--primary);
    margin-bottom:10px;
}

.resources-section h4{
    color:var(--gray);
    font-weight:500;
    margin-bottom:30px;
}

.resources-intro{

    max-width:850px;
    margin:auto;
    line-height:1.9;
    color:var(--text);
    font-size:1.08rem;

}

/* ==========================================
IMAGE
========================================== */

.page-image{

    padding:40px 20px;
    text-align:center;

}

.page-image img{

    width:100%;
    max-width:850px;
    border-radius:18px;
    box-shadow:0 20px 50px rgba(0,0,0,.10);

}

/* ==========================================
SECTION
========================================== */

.section{

    padding:70px 20px;

}

.section h2{

    text-align:center;
    color:var(--primary);
    margin-bottom:45px;
    font-size:2rem;

}

/* ==========================================
CARDS
========================================== */

.cards{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;

}

.card{

    background:white;
    border-radius:18px;
    padding:35px;
    box-shadow:0 12px 30px rgba(0,0,0,.07);
    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

}

.card h3{

    color:var(--primary);
    margin-bottom:15px;

}

.card p{

    color:var(--text);
    line-height:1.8;

}

/* ==========================================
PARCOURS
========================================== */

.parcours-section{

    padding:90px 20px;
    background:#f8fbff;

}

.section-header{

    text-align:center;
    max-width:850px;
    margin:auto auto 60px;

}

.section-badge{

    display:inline-block;
    padding:8px 18px;
    background:#dcecff;
    color:var(--primary);
    border-radius:30px;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:18px;

}

.section-header h1{

    color:var(--primary);
    margin-bottom:20px;
    font-size:2.5rem;

}

.section-header p{

    color:var(--text);
    line-height:1.9;

}

/* ==========================================
MODULE
========================================== */

.module-card{

    display:flex;
    align-items:center;
    gap:30px;

    background:white;
    border-radius:18px;

    padding:30px;

    margin-bottom:25px;

    border-left:6px solid var(--primary);

    box-shadow:0 12px 30px rgba(0,0,0,.07);

    transition:.35s;

}

.module-card:hover{

    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(0,74,173,.15);

}

.module-number{

    width:80px;
    height:80px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.8rem;
    font-weight:bold;

    flex-shrink:0;

}

.module-content{

    flex:1;

}

.module-info{

    display:inline-block;
    margin-bottom:10px;
    color:var(--gray);
    font-size:.95rem;

}

.module-content h2{

    margin-bottom:12px;
    color:var(--primary);

}

.module-content p{

    color:var(--text);
    line-height:1.8;

}

.module-action{

    flex-shrink:0;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:900px){

.module-card{

    flex-direction:column;
    text-align:center;

}

.module-action{

    width:100%;

}

.module-action .btn{

    width:100%;

}

.section-header h1{

    font-size:2rem;

}

.resources-section h2{

    font-size:2rem;

}

}