/*==================================================
ABOUT SINGLE
Grande page À propos
==================================================*/

.about-page{

    padding:90px 0;

    background:#fff;

}

.about-page .container{

    max-width:1200px;

    margin:auto;

    padding:0 25px;

}

/*==================================================
TITRE
==================================================*/

.about-title{

    text-align:center;

    font-size:3rem;

    color:#4f46e5;

    margin-bottom:70px;

    line-height:1.2;

}

/*==================================================
LAYOUT
==================================================*/

.about-grid{

    display:grid;

    grid-template-columns:360px 1fr;

    gap:60px;

    align-items:start;

}

/*==================================================
PHOTO
==================================================*/

.about-image{

    position:sticky;

    top:120px;

}

.about-image img{

    width:100%;

    display:block;

    border-radius:22px;

    box-shadow:0 18px 50px rgba(0,0,0,.12);

}

/*==================================================
TEXTE
==================================================*/

.about-content{

    color:#555;

    font-size:1.05rem;

    line-height:1.75;

}

.about-content h2{

    color:#241c44;

    font-size:2rem;

    margin-bottom:20px;

}

.about-content h3{

    color:#4f46e5;

    font-size:1.45rem;

    margin:45px 0 18px;

}

.about-content p{

    margin:0 0 14px;

}

.about-content strong{

    color:#241c44;

}

/*==================================================
LISTES
==================================================*/

.about-content ul{

    margin:18px 0 25px;

    padding-left:22px;

}

.about-content li{

    margin-bottom:10px;

}

/*==================================================
MISSION
==================================================*/

.mission-box{

    margin:40px 0;

    padding:30px;

    background:#faf8ff;

    border-left:5px solid #6d28d9;

    border-radius:18px;

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

}

.mission-box h3{

    margin-top:0;

}

/*==================================================
CITATIONS
==================================================*/

.citation{

    text-align:center;

    font-size:1.2rem;

    font-style:italic;

    color:#6d28d9;

    margin:30px 0;

}

/*==================================================
SEPARATEUR
==================================================*/

.about-separator{

    width:90px;

    height:4px;

    background:#ffd700;

    border:none;

    border-radius:50px;

    margin:45px auto;

}

/*==================================================
ENGAGEMENT
==================================================*/

.about-conclusion{

    margin-top:45px;

    padding:35px;

    background:#4f46e5;

    color:#fff;

    border-radius:22px;

    box-shadow:0 15px 45px rgba(79,70,229,.18);

}

.about-conclusion h3{

    color:#fff;

    margin-top:0;

}

.about-conclusion p{

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

}

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

@media(max-width:992px){

.about-grid{

    grid-template-columns:1fr;

    gap:40px;

}

.about-image{

    position:relative;

    top:auto;

    max-width:420px;

    margin:auto;

}

.about-title{

    font-size:2.4rem;

}

}

@media(max-width:768px){

.about-page{

    padding:70px 0;

}

.about-title{

    font-size:2rem;

    margin-bottom:45px;

}

.about-content{

    font-size:1rem;

}

.mission-box,
.about-conclusion{

    padding:25px;

}

.citation{

    font-size:1.05rem;

}

}