/* ==========================================================
   APROPOS.CSS — page à propos uniquement
   ========================================================== */

#about-hero{

    /* Le fil d'Ariane a été retiré : ce bloc suit directement
       la navbar fixe, il doit donc reprendre lui-même le
       décalage qu'elle mesure en JS. */
    margin-top:var(--header-height, 84px);

    min-height:50vh;

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

    text-align:center;
    color:white;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    position:relative;
    overflow:hidden;

}

#about-hero::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

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

    border-radius:50%;

    top:-120px;
    right:-100px;

}

#about-hero::after{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

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

    border-radius:50%;

    bottom:-80px;
    left:-80px;

}

#about-hero .hero-content{

    position:relative;
    z-index:2;

}

.badge{

    display:inline-block;

    padding:10px 20px;

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

    backdrop-filter:blur(10px);

    border-radius:30px;

    margin-bottom:20px;

}

#mission,
#about-stats,
#values{

    padding:70px 8% 0;

}

/* ==========================
        MISSION / VISION / OBJECTIFS
========================== */

.mission-grid{

    display:grid;

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

    gap:30px;

    margin-top:45px;

}

.mission-card{

    background:white;

    padding:35px 30px;

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

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:.4s;

}

.mission-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}

.mission-icon{

    width:60px;
    height:60px;

    margin:0 auto 20px;

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

    background:var(--primary-light);

    border-radius:50%;

    color:var(--primary);

    font-size:26px;

}

.mission-card h3{

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

}

.mission-card p{

    color:var(--gray-500);
    line-height:1.7;
    font-size:.95rem;

}

@media(max-width:800px){

    .mission-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================
        STATISTIQUES
========================== */

.stats-grid{

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

    gap:35px;

}

.stat-card{

    background:white;

    padding:40px;

    border-radius:25px;

    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}

/* ==========================
        NOS VALEURS
========================== */

.values-grid{

    display:grid;

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

    gap:30px;

}

.value-card{

    background:white;

    padding:40px;

    border-radius:25px;

    text-align:center;

    transition:.4s;

}

.value-card:hover{

    transform:
    translateY(-10px);

}

.value-card i{

    font-size:40px;

    color:var(--secondary);

    margin-bottom:20px;

}

/* ==========================
        FONDATEUR
========================== */

.founder-card{

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

    background:white;

    padding:50px;

    border-radius:35px;

    text-align:left;

    width:84%;
    max-width:700px;

    margin:80px auto 0;

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

}

.founder-card img{

    width:150px;
    height:150px;

    flex-shrink:0;

    object-fit:cover;

    border-radius:50%;

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

    box-shadow:
    0 15px 35px rgba(20,92,61,.20);

    transition:.4s;

}

.founder-card img:hover{

    transform:scale(1.05);

}

.founder-info h3{

    color:var(--primary);
    font-size:1.4rem;
    margin-bottom:6px;

}

.founder-role{

    display:block;

    color:var(--secondary);
    font-weight:600;

    margin-bottom:14px;

}

.founder-info p{

    color:var(--gray-500);
    line-height:1.7;

}

@media(max-width:640px){

    .founder-card{

        flex-direction:column;
        text-align:center;
        padding:40px 30px;

    }

}

/* ==========================
        FOND DE PAGE
========================== */

body{

    background:

    radial-gradient(
    circle at top left,
    rgba(20,92,61,.08),
    transparent 40%),

    #F8FAFC;

}