/**************
RESET
**************/

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/**************
GENERAL
**************/

body {
    font-family:"Nunito", sans-serif;
    font-size:18px;
    color:#414141;
    background-color:#f9f9f9;
    text-align:center;
    line-height:1.5;
}

.container {
    max-width:1500px;
    margin:0 auto;
}

a {
    text-decoration:none;
}

ul {
    list-style-type:none;
}

h1 {
    font-size:20px;
}


h2 {
    font-size:30px;
}

.banner p {
    font-size:20px;
}

h3 {
    font-size:30px;
}

h4 {
    font-size:25px;
}

h5 {
    font-size:20px;
}

.aside ul, .aside p {
    font-size:16px;
}

.aside cite {
    font-size:14px;
}

/**************
FONTS
**************/

h1, h2, h3, h4, h5, nav, .banner p {
    font-family:"Fjalla One";
}

/**************
TITRES
**************/

/*** TITRES PAGES ***/

h3 {
    color:#CB8606;
    text-transform:uppercase;
    padding:2rem 0;
}

h3::before {
    content:" – ";
    color:#00748D;
}

h3::after {
    content:" – ";
    color:#00748D;
}

/*** SOUS-TITRES ***/

h4 {
    color:#00748D;
    padding:2rem 0;
}

h4::before {
    content:" – ";
    color:#CB8606;
}

h4::after {
    content:" – ";
    color:#CB8606;
}

/**************
HEADER & FOOTER
**************/

/*** GLOBAL ***/

header > .container, .footer > .container, nav ul, .footer ul {
    display:flex;
    flex-direction:row;
}

header, .footer {
    background-color:#00748D;
    position:relative;
}

header::after, .footer::after {
    content:"";
    width:100%;
    height:9px;
    background-color:red;
    left:0;
    bottom:0;
    position:absolute;
    background:url("../3.ressources/images/path.png");
}

header a, footer a, .footer a, .container .logo {
    color:#fff;
}

header, footer, .footer {
    padding:1rem;
}

header .container, .footer .container {
    justify-content:space-between;
    align-items:center;
}

header a, .footer a {
    padding:1rem;
}

/*** HEADER ***/

.logo {
    display:flex;
    flex-direction:row;
    align-items:center;
}

header .active {
    color:#00748D;
    background-color:#fff;
}

/*** FOOTER 3WA ***/

footer {
    background-color:#444444;
    
}

footer > * {
    color:#fff;
}

footer img {
    height:3rem;
}

/**************
MAIN
**************/

/*** BANNER ***/

.banner {
    background:url("../3.ressources/images/bg-header.jpg");
    background-size:cover;
    background-position:center center;
    height:30vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.banner > * {
    width:fit-content;
    margin:2rem 0;
    padding:1rem;
}

.banner h2 {
    color:#fff;
    background-color:#CB8606;
    text-transform:uppercase;
}

.banner p {
    color:#00748D;
    background-color:#fff;
    padding-inline:3rem;
    font-weight:bold;
}

/*** SECTION  ***/

/* GLOBAL */

.grid {
    display:grid;
    column-gap:1rem;
}

.grid img {
    width:100%;
    height:100%;
}

.grid [class*="card"] {
    height:80%;
    margin:2rem;
}

/* PRESTATIONS */

.grid .btn-more {
    width:80%;
}

.grid-prestations {
    grid-template-columns: repeat(4, 1fr);
}

.grid-prestations h5 {
    padding:1rem;
}

.grid-prestations p {
    text-align:justify;
}

.grid .icons-prestations {
    /*text-align:center;*/
    color:#fff;
    background-color:#CB8606;
    width:fit-content;
    padding:0.5rem 0.75rem;
    margin:auto;
}

/* PRESTATAIRES  */

.grid-prestataires {
    /*grid-template-columns: repeat(4, minmax(25%, 1fr));*/
    grid-template-columns: repeat(4, 1fr);
}

.grid-prestataires [class*="card"] {
    border:2px solid #00748D;
    object-fit:cover;
}

/**************
VARIOUS
**************/

/*** BOUTONS ***/

.btn-more {
    border:none;
    background-color:#00748D;
    color:#fff;
    padding:1rem;
    margin:0.75rem 0;
}


/************** TABLETTE **************/

@media screen and (max-width:1100px) {
    
    /**************
    HEADER & FOOTER
    **************/
    
    /*** HEADER ***/

    header > .container {
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        /*align-items:center;*/
    }
    
    .logo {
        display:flex;
        flex-direction:column;
        align-items:center;
    }
    
    
    header nav {
        margin:2rem 0;
    }

    header li {
        padding:0 4rem;
    }
        
    /**************
    MAIN
    **************/
    
    /*** GLOBAL ***/
    
    .container {
        max-width:90%;
    }

    /*** SECTION  ***/
    
    /* PRESTATIONS */
    
    .grid-prestations {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* PRESTATAIRES  */
    
    .grid-prestataires {
        grid-template-columns: repeat(2, 1fr);
    }


}

/************** MOBILE **************/

@media screen and (max-width:780px) {
    
    /**************
    MAIN
    **************/

    /*** SECTION  ***/
    
    /* PRESTATIONS */
    
    .grid-prestations {
        grid-template-columns: repeat(1, 1fr);
    }
    
    /* PRESTATAIRES  */
    
    .grid-prestataires {
        grid-template-columns: repeat(1, 1fr);
    }


}



/************** PETIT MOBILE **************/

@media screen and (max-width:630px) {
    
    /**************
    HEADER & FOOTER
    **************/
    
    /*** HEADER ***/

    header > .container {
        flex-direction:column;
    }
    
    .footer > .container {
        flex-direction:column-reverse;
    }
    
    header nav {
        width:100%;
    }
    
    header li {
        padding:0;
    }
    
    header ul {
        flex-direction:column;
    }

    header a {
        display:block;
    }
        
    /**************
    MAIN
    **************/

    /*** SECTION  ***/
    
    /* PRESTATIONS */
    
    .grid-prestations {
        grid-template-columns: repeat(1, 1fr);
    }
    
    /* PRESTATAIRES  */
    
    .grid-prestataires {
        grid-template-columns: repeat(1, 1fr);
    }


}