/* =====================================================
   VARIABLES DE STYLE
   À adapter après analyse du logo
   ===================================================== */

:root {

    --main-color: #234567;
    --secondary-color: #f3f5f7;
    --accent-color: #d98b2b;
    --text-color: #333333;
    --light-text: #ffffff;
    --section-color: #00cab1;
    --subsection-color: #023e8a;
    --max-width: 1100px;

}




/* =====================================================
   RESET ET BASE
   ===================================================== */


* {
    box-sizing: border-box;
}



body {

    margin: 0;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    color: var(--text-color);

    background:
        var(--secondary-color); 

    line-height: 1.6;

}



img {

    max-width: 100%;
    display: block;

}




a {

    color: var(--main-color);

    text-decoration: none;

}



a:hover {

    text-decoration: underline;

}




/* =====================================================
   BANNIÈRE TYPE PROFIL FACEBOOK
   ===================================================== */


.cover {

    position: relative;

}



.banner {

    width: 100%;

    height: 360px;

    object-fit: cover;

}






.profile-logo {


    position: absolute;


    width: 190px;

    height: 190px;


    left: 45px;


    bottom: -95px;


    background: white;


    border: 7px solid white;


    border-radius: 20px;


    object-fit: contain;



    box-shadow:

        0 5px 18px rgba(0,0,0,0.25);


}





/* =====================================================
   CONTENU PRINCIPAL
   ===================================================== */



main {


    max-width: var(--max-width);


    margin:

        130px auto 40px;



    padding:

        0 25px;


}





section {


    background:

        white;


    margin:

        30px 0;



    padding:

        35px;



    border-radius:

        14px;



    box-shadow:

        0 2px 10px rgba(0,0,0,0.05);


}





h1 {
    color:
        var(--section-color);
    font-size:
        2.4rem;
}



h2 {
    color:
        var(--subsection-color);
    margin-top:

        0;


}





/* =====================================================
   INTRODUCTION
   ===================================================== */



.hero {


    text-align:

        center;


}



.hero p {


    font-size:

        1.2rem;


}







/* =====================================================
   PRESENTATION 25 / 75
   ===================================================== */


.about {


    display:

        grid;


    grid-template-columns:

        1fr 3fr;


    gap:

        35px;


    align-items:

        center;


}





.photo-column img {
    border-radius:
        12px;
}

/* =====================================================
   TROIS SERVICES
   ===================================================== */



.services-icons {
    display:
        grid;
    grid-template-columns:
        repeat(3,1fr);
    gap:
        25px;
    background:
        transparent;
    box-shadow:
        none;
    padding:
        0;
}



.service-card {
    background:
        white;
    padding:
        8px;
    text-align:
        justify;
    border-radius:
        1px;
    box-shadow:
        0 2px 10px rgba(0,0,0,0.05);
}

.service-card img {
    height:
        180px;
    margin:
        0 auto 2px;
}

.service-card h3 {
    color:
        var(--main-color);
		text-align : center;		
}

/* =====================================================
   OFFRE COMMERCIALE 75 / 25
   ===================================================== */



.offer {


    display:

        grid;


    grid-template-columns:

        3fr 1fr;


    gap:

        35px;


    align-items:

        center;


}




.offer-image img {


    margin:

        auto;


}







.price {


    font-size:

        2rem;


    font-weight:

        bold;


    color:

        var(--accent-color);


}







.button {


    display:

        inline-block;


    background:

        var(--accent-color);


    color:

        white;


    padding:

        14px 25px;


    border-radius:

        8px;


    font-weight:

        bold;


}



.button:hover {


    text-decoration:

        none;


    opacity:

        0.85;


}






/* =====================================================
   FORMULAIRE
   ===================================================== */


form {


    max-width:

        650px;


}



input,
textarea {


    width:

        100%;


    padding:

        12px;


    margin-bottom:

        15px;


    border:

        1px solid #ccc;


    border-radius:

        6px;


    font-size:

        1rem;


}




textarea {


    min-height:

        150px;


}



button {


    background:

        var(--main-color);


    color:

        white;


    border:

        none;


    padding:

        13px 25px;


    border-radius:

        8px;


    cursor:

        pointer;


}








/* =====================================================
   PIED DE PAGE
   ===================================================== */


footer {


    text-align:

        center;


    padding:

        25px;


    color:

        #777;


}






/* =====================================================
   VERSION MOBILE
   ===================================================== */


@media(max-width:800px) {


    .banner {

        height:

            250px;

    }



    .profile-logo {


        width:

            140px;


        height:

            140px;


        left:

            50%;


        transform:

            translateX(-50%);



        bottom:

            -70px;

    }



    main {


        margin-top:

            100px;

    }



    .about,
    .offer,
    .services-icons {


        grid-template-columns:

            1fr;


    }
}


.language-switch {
    position: absolute;
    top: 380px;
    right: 35px;

    background: rgba(255,255,255,0.92);

    padding: 10px 18px;

    border-radius: 25px;

    font-weight: bold;

    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.language-switch a {
    font-weight: bold;
    margin-left: 0.5em;
}

.language-switch .active {
    color: var(--accent-color);
}