body {
    font-size: 16px;

    strong {
        font-weight: bold;
    }

header {
    border-block: solid #cc5500 4px ;
    padding: 1rem;   
    
    img {
        width: 200px;
        height: auto;
        padding: 1rem;
    }

    h1 {
        text-align: center;
        font-family: 'Alex Brush', handwriting;
        font-size: 4rem;

        span {
            font-family: none;
            font-weight: 700;
            color: #cc5500;
            font-size: 1.7rem;
        }
    }

    nav {
        border-block: solid 4px #cc5500;
        background-color: #cc5500bb;

        .navNormal, navBoutton {
        display: flex;
        justify-content: center;
        justify-content: space-evenly;
        top: 10px;
        }

        .navBoutton {
            text-align: center;
        }

        a,.navBoutton {
            color: black;
            padding: 20px;
            font-size: 1.5em;
            text-decoration: none;
            border-radius: 30px;
        }
        
        a:hover {
            background-color: #cc5500;
        }
    }

    h2 {
        text-align: center;
        font-size: 1.5rem;
        background-color: #cc5500bb;
        border-block:solid #cc5500 4px ;
        padding: 20px;
    }

    .menu {
        display: flex;
        flex-direction: column;
        text-align: center;

        a {
            color: black;
            padding: 20px;
            font-size: 1.5em;
            text-decoration: none;
            border-radius: 30px;
        }
    }
}

@media  (max-width: 700px) {
    .navNormal a {
        display: none;
    }  

    .intro {
        display: flex;
        justify-content: center;
        align-items: end;
    }
}

@media (min-width: 701px) {
    .navBoutton {
        display: none;
    }

    .menu {
        display: none;
    }
    
    .intro {
        display: flex;
        justify-content:end;
        align-items: end;
    }  
}

@media (max-width: 800px) {
    .introduction {
        grid-template-rows: repeat(2, 1fr);
        text-align: center;

        .intro-image {
            padding-top: 20px;
        }
    }

    .logoh1 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }     

    .images4, .visions {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .art, .vision, .mission, .valeur {
            width: 60%; 
        }
    }

    .bienfaits {
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(6,1fr);
    }

    .prisedecontact {
        display: flex;
        flex-direction: column;

        img {
            margin-bottom: 20px;
        }
    }

    .legende {
        flex-direction: column;
    }

    footer {
        flex-direction: column;
        align-items: center;

        .logos {
            display: flex;
            justify-content: space-between;
        }
    }
}

@media  (min-width: 801px) {
    .introduction {
        grid-template-columns: repeat(2,1fr);

        .intro-image {
            padding-block: 20px;
        }
    }

    .logoh1 {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    } 

    .images4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);

        .art {
            width: 80%;
        }
    }  

    .visions {
        display: flex;
        justify-content: center;
        gap: 20px;
        padding-left: 20px;
        padding-right: 20px;
        
        .valeur, .mission, .vision {
            width: 25%; 
            padding-left: 20px;
            padding-right: 20px;
        }
    }
    
    .prisedecontact {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;

        .image {
            margin-right: 10px;
        }

        img {
            max-height: 600px;
        }

        form {
            margin-left: 80px;
            margin-right: 80px;
        }
    }

    .legende {
        flex-direction: row;
    }

    footer {
        flex-direction: row;

        .logos {
            display: flex;
            justify-content: space-evenly;
        }
    }

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

@media (min-width: 1100px) {
    .images4 {
        display: flex;
        justify-content: center;

        .art {
            width: 20%;
        }
    }

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

main {

    h2 {
        text-align: center;
        font-family: 'Dancing Script', handwriting;
        font-size: 50px;
        padding-bottom: 10px;
        border-bottom: solid 1px ;
        padding-top: 20px;
    }

    h3 {
        font-family: 'Dancing Script', handwriting;
        padding-block: 20px;
        font-size: 2em;
        font-weight: 500;
        border-bottom: #cc5500 solid 4px;
    }

    p {
        padding-top: 20px;
    }

    .intro {
        background-image: url(images/colibri-joli-min.jpg);
        height: 500px;
        background-size: cover;
        background-position-x: center;
        padding: 20px;
        margin: 20px;
        border-radius: 10px;
        
    }

    .introduction {
        display: grid;
        align-items: center;

        .intro-texte {
            display: flex;
            flex-direction: column;
            text-align: center;
            padding: 40px;
            margin-left: 40px;
            margin-right: 40px;
        }

        .intro-image {
            text-align: center;
            img {
                width: 90%;
                height: auto;
                border-radius: 10%;
            }
        }
        
    }

    .texteintro {
        background-color: #08121ea0;
        display: flex;
        flex-direction: column;
        width: 300px;
        min-height: 200px;
        color: white;
        border-radius: 15% 15% 0 0;
        padding: 1rem;


        p {
            text-align: center;
            padding: 20px;
            border-bottom: solid 1px ;
        }

        a {
            color: white;
            text-align: center;
            text-decoration: none;
            background-color: #cc5500;
            margin-top: 20px;
            padding: 5px;
        }

        a:hover {
            background-color: #cc550083;
        }

    }

    .images4, .visions {
        
        .art, .vision, .mission, .valeur {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 40px;

            img {
                width: 200px;
                height: 200px;
                border-radius: 100%;
                padding-top: 40px;
            }
        }
    }

    .prisedecontact {
        margin: 20px;
        gap: 20px;       

        img {
            border-radius: 10px;
            width: 100%;
            height: auto;
        }

        .formulaire {
            background-color: #cc5500bb;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            text-align: center;
            padding-bottom: 20px;
            border-radius: 10px;

            h2 {
                padding: 20px;
                font-family: 'Dancing Script', handwriting;
                font-size: 3rem;
                border-bottom: solid 1px ;
            }

            form {
                display: flex;
                flex-direction: column;
                padding-inline-start: 10px;
                margin-left: 10px;
                margin-right: 10px;

                    label {
                        padding: 10px;
                    }

                    .envoyer {
                        background-color: #cc5500;
                    }

                    .envoyer:hover {
                        background-color: #cc550083;
                    }
            }
        }
    }

    .coordonnees {
        min-width: 250px;
        max-width: 400px;
        margin: auto;
        margin-top: 20px;
        padding: 20px;
        text-align: center;
        border: #cc5500 solid 4px;
        border-radius: 10px;

        p {
            padding: 10px;
            font-size: 1.2rem;
            padding-top: 30px;
        }
    }

    .legende {
        display: flex;
        padding: 20px;
        align-items: center;

        .legende-texte {
            text-align: center;
            min-width: 300px;
            
            h2 {
                padding: 20px;
            }
        }

        .legende-image {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        img {
            width: 90%;
            border-radius: 10px;
        }
    }

    .bienfaits {
        display: grid;
        gap: 20px;
        text-align: center;
        padding: 20px;

        .box {
            border: #cc5500 solid 4px;
            border-radius: 15%;
            padding: 10px 0 10px 0;
            padding: 10px;
        }

        h3 {
            min-height: 90px;
        }
    }
}      

blockquote {
    background-color: #cc5500bb;
    text-align: center;
    font-style: italic;
    padding: 10px;
    border-block: solid 4px #cc5500;
    letter-spacing: 2px;
    font-size: 1.3em;
}

footer {
    display: flex;
    padding-bottom: 40px;
    border-bottom: solid #cc5500 5px;

    .gauche {
        text-align: center;
        width: 40%;

        img {
            width: 100px;
            padding: 20px;
        }

        h1 {
            text-align: center;
            font-family: 'Alex Brush', handwriting;
            font-size: 2em;
            font-weight: bold;
    
            span {
                font-family: none;
                font-weight: 700;
                color: #cc5500;
                font-size: 0.5em;
            }
        }
    }

    .droite {
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 60%;

        img {
            width: 50px;
            padding-block: 40px;
        }

        p {
            padding-bottom: 20px;
        }
    }
}
}