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

body
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    position: absolute;
}



    /*              HEADER               */
    #header
    {
        background-image: url("images/desktop/header/image-header.jpg");
        background-repeat: no-repeat;
        background-position: center;
        
        height: 1000px;
        max-width: 1440px;
        width: 96%;

        display: flex;
        justify-content: center;
    }

        /*          _Arrow_           */

        .btn
        {
            font-size: 1.1em;
            height: 15em;
            width: 5em;

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

            position: absolute;
            top: 420px;

            margin: 0;
            padding: 0;
        }
        
        .arrow
        {
            background:rgb(255, 255, 255);
            height: 10em;
            width: 0.5em;
            margin-right: 0em;
            position: relative;
            transition: all 0.2s;
            
            border-radius: 10px;
        }

        .arrow::before,
        .arrow::after
        {
            position: absolute;
            content: "";
            background:rgb(255, 255, 255);
            height: 2em;
            width: 0.5em;
            bottom: 0;
            
            border-radius: 10px;
        }

        .arrow::before
        {
            transform: rotate(45deg);
            transform-origin: left bottom;
            right: 0.1em;
        }

        .arrow::after
        {
            transform: rotate(-45deg);
            transform-origin:  right bottom;
            right: -0.1em;
        }


        .btn:hover .arrow
        {
            height: 15em;
        }






    #header h1
    {
        color:rgb(255, 255, 255);
        font-weight: bold;
        font-size: 3.5em;
        font-family: 'Fraunces', serif;
        /* mettre en majuscule */ 
        text-transform: uppercase;

        margin-top: 180px;
    }



        /*      _Menu de navigation (nav)_      */

        nav ul
        {
            display: flex;
            align-items: center;

            position: absolute;
            right: 60px;
            top: 15px;
        }


        nav li 
        {
            list-style-type: none;
            margin-right: 25px;
        }


        nav a
        {
            display: flex;
            list-style-type: none;
            text-decoration: none;
            
            
            font-size: 1em;
            padding-bottom: 3px;
            font-family: 'Roboto', sans-serif;
        }

        .boutons /* nav a sans contact*/
        {            
            color: rgb(255, 255, 255);
        }


        .contact
        {   
            color: rgb(0, 0, 0);
            background-color: white;
            text-transform: uppercase;

            padding: 7px 23px;
            border-radius: 100px;
        }


        .boutons:hover
        {
            color: #696965d3;
        }

        .contact:hover
        {
            color: #ffffff;
            background-color: rgba(255, 255, 255, 0.342);
        }



        
    #header p
    {
        font-family: 'Roboto', sans-serif;
        color:rgb(255, 255, 255);
        font-size: 1.8em;
        font-weight: bold;

        position:absolute;
        left: 80px;
        top: 25px;
    }

    #header .icon
    {
        display:none;
    }







    /*              SECTION               */


        /*      _Main_         */
        #section
        {
            display: flex;
            flex-wrap: wrap;
            justify-content: center 
        }

        .element
        {
            text-align: left;
            
            display: flex;
            flex-direction: column;
            justify-content: center;

            height: 600px;
            width: 720px;
        }


        .element:nth-child(1)
        {
            background-color:rgb(253, 253, 253);


            box-sizing: border-box; /* Permet de ne pas agrandir la box avec padding*/
            padding: 100px;

            
        }
        .element:nth-child(1) h2, p{
            margin: 12px;    /* Marges entre les texts*/
            padding: 0 45px;
        }

        .element:nth-child(2)
        {
            background-image: url("images/desktop/section/image-transform.jpg");
        }

        .element:nth-child(3)
        {
            background-image: url("images/desktop/section/image-stand-out.jpg");
        }
        


        .element:nth-child(4)
        {
            background-color:rgb(255, 255, 255);

            box-sizing: border-box; /* Permet de ne pas agrandir la box avec padding*/
            padding: 100px;
        }

        .element:nth-child(4) *{
            margin:12px;    /* Marges entre les texts*/
            padding: 0 45px;
        }
        .element:nth-child(4) h2
        {
            padding: 0 180px 0 45px;
        }


        .element:nth-child(5)
        {
            background-image: url("images/desktop/section/image-graphic-design.jpg");
        }
        .element:nth-child(5) .text *
        {
            position: relative;
            top: 150px;

            margin: 12px 140px;
            text-align: center;
        }


        .element:nth-child(6)
        {
            background-image: url("images/desktop/section/image-photography.jpg");
        }
        .element:nth-child(6) .text *
        {
            position: relative;
            top: 150px;

            margin: 12px 140px;
            text-align: center;
        }




    #section h2
    {
        font-family: 'Fraunces', serif;

        color: hsl(167, 40%, 24%); /*Dark desaturated cyan (graphic design text)*/
    }



    #section a
    {
        font-family: 'Fraunces', serif;
        font-size: 1em;
        text-transform: uppercase;
        color: hsl(167, 40%, 24%);

        text-decoration: none;
        display: inline;

        padding: 6px 10px;
        border-radius: 10px;
    }
    #learn1 a
    {
        background: linear-gradient(to top, transparent 10%, hsla(51, 100%, 49%, 0.3) 10.01%, hsla(51, 100%, 49%, 0.3) 40%, transparent 40.01%) no-repeat;
    }
    #learn1 a:hover
    {
        background: linear-gradient(to top, transparent 10%, hsla(51, 100%, 49%, 0.425) 10.01%, hsl(51, 100%, 49%) 40%, transparent 40.01%) no-repeat;
    }


    #learn2 a
    {
        background: linear-gradient(to top, transparent 10%, hsla(7, 99%, 70%, 0.3) 10.01%, hsla(7, 99%, 70%, 0.3) 40%, transparent 40.01%) no-repeat;
    }
    #learn2 a:hover
    {
        background: linear-gradient(to top, transparent 10%, hsl(7, 99%, 70%) 10.01%, hsl(7, 99%, 70%) 40%, transparent 40.01%) no-repeat;
    }



    #section p
    {
        font-family: 'Roboto', sans-serif;
        
        color:  hsl(213, 9%, 39%);
    }






    /*      _testimonials_    */
    .testimonials
    {
        height: 600px;
        max-width: 1440px;
        width: 96%;

        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }


    .testimonials h3
    {
        text-align: center;
        position: relative;
        top: 10px;

        max-width: 1440px;
        width: 96%;

        text-transform: uppercase;
        font-family: 'Fraunces', serif;
        color: hsl(210, 4%, 67%);
    }



    .testimonials img
    {
        border-radius: 110px;
        width: 50px;
        margin-bottom: 35px;
    }


    .testimonials p
    {
        font-family: "Roboto", sans-serif;
    }

    .testimonials .commentary
    {
        margin-bottom: 35px;
        color: hsl(212, 27%, 19%);
        padding: 0 14px;
    }

    .testimonials .name
    {
        margin-bottom: 7px;
        font-weight: bold;
        
    }

    .testimonials .position
    {
        color: hsl(210, 4%, 67%);
    }


    .people:nth-child(2) 
    {
        width: 320px;
    }

    .people:nth-child(3) 
    {
        width: 320px;
    }
    .people:nth-child(4) 
    {
        width: 320px;
    }







    /*              FOOTER               */

    #footer
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        max-width: 1440px;
        width: 96%;
    }

    #pictures-footer
    {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    #pictures-footer img
    {
        width: 25%; 
    }


    #bottom-footer
    {
        background-color:hsla(168, 34%, 41%, 0.774);
        height: 190px;

        width: 100%;

        display: flex;
        flex-direction: column;
    }

    #bottom-footer h2
    {
        margin-top:30px;
        margin-bottom: 20px;
        color: hsl(167, 40%, 24%);
    }

    #data-footer
    {
        margin-bottom: 45px;
    }

    #data-footer a
    {
        text-decoration: none;
        color:black;

        margin: 20px;
    }

    #data-footer a:hover
    {
        color:white;
    }


    #social a
    {
        margin: 7px;
    }

    

    #social a:hover
    {
        filter: invert(98%) sepia(1%) saturate(2%) hue-rotate(137deg) brightness(150%) contrast(100%);  /*Modification des images svg en blanc*/
    }

    /*Tuto :            https://qastack.fr/programming/22252472/how-to-change-the-color-of-an-svg-element#:~:text=Si%20vous%20chargez%20SVG%20en,aide%20en%20ligne.*/
    /*Convertiseur:     https://codepen.io/sosuke/pen/Pjoqqp*/








    @media screen and (max-width: 750px)
    {/* vertion mobile ou inférieur à max-width */

        body
        {
            left: 50%; /* à 50%/50% du parent référent */
            transform: translate(-50%); /* décalage de 50% de sa propre taille */
        }





        /*              HEADER               */

        #header
        {
            max-width: 375px;
            width: 100%;
            background-image: url("images/mobile/header/image-header.jpg");

            /*remonte l'orange*/
            background-size: cover; /*indique à l’image en arrière plan de s’étendre jusqu’à ce qu’elle recouvre l’intégralité du block.*/
            height: 700px;
        }

        #header h1
        {
            position: absolute;
        }


        /**********_Menu_***********/
            header ul
            {
                display: none;
                position: relative;  
            }


            #header .icon
            {
                display: block;
                position: absolute;
                right: 30px;
                top: 30px;
                cursor: pointer;
            }



            /*Lors de l'appui sur le bouton*/
            #header.responsive #mobile_menu
            {
                display: block;
            }
            #header.responsive ul
            {
                display: flex;
                flex-direction: column;
                align-content: center;

                right: 0;
                top: 0;
            }

            #header.responsive h1,
            #header.responsive .btn
            {
                display: none;
            }

            

            nav 
            {
                display: flex;
                justify-content: center;
                position: absolute;

                top: 165px;
            }
            #header ul li
            {
                padding-top: 22px;
                font-size: 1.6em;

                margin-right: 0;
            }
            #header ul .boutons
            {
                color: hsl(213, 9%, 39%);
            }
            #header ul .boutons:hover
            {
                color: rgb(199, 194, 194);
            }
            
            #header ul .contact
            {
                background-color:hsl(51, 100%, 49%);
                padding: 11px 23px;
            }
            #header ul .contact:hover
            {
                background-color:hsla(51, 100%, 49%, 0.637);
                color: rgb(199, 194, 194);
            }


            #mobile_menu
            {
                display: none;
                height: 350px;
                width: 300px;
                background-color:rgb(255, 255, 255);
                position: absolute;
                top: 125px
            }

            #mobile_menu #triangle
            {
                display : inline-block;
                height : 0;
                width : 0;
                border-bottom : 30px solid rgb(255, 255, 255);
                border-left : 30px solid transparent;

                position: absolute;
                top: -29px;
                right: 0px;
            }

        /*********************/
    

        #header p
        {
            left: 4px;
        }

        .btn
        {
            font-size: 0.8em;
            height: 15em;
            width: 5em;

            top: 360px;

            margin: 0;
            padding: 0;
        }







        /*              SECTION               */

        #section
        {
            max-width: 375px;
            width: 100%;
        }



        
        .element:nth-child(1)
        {
            width: 375px;
            height: 390px;
            padding: 0 7px;
            text-align: center;
        }
        .element:nth-child(1) h2, p
        {
            margin: 12px;    /* Marges entre les texts*/
            padding: 0 10px;
        }


        .element:nth-child(2)
        {
            background-image: url("images/mobile/section/image-transform.jpg");
            background-size: cover;
            background-position: center;
            order: -1;
            height: 375px;
        }


        .element:nth-child(3)
        {
            background-image: url("images/mobile/section/image-stand-out.jpg");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            height: 312px;
        }
        

        .element:nth-child(4)
        {
            width: 375px;
            height: 390px;
            padding: 0;
            text-align: center;
        }
        .element:nth-child(4) *
        {
            padding: 0 30px;
        }
        .element:nth-child(4) h2
        {
            padding: 0 50px;
        }


        .element:nth-child(5)
        {
            background-image: url("images/mobile/section/image-graphic-design.jpg");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
        .element:nth-child(5) .text *
        {
            position: relative;
            top: 150px;
    
            margin: 25px 0;
            padding: 20px 20px;
            text-align: center;
            
        }
        .element:nth-child(5) p
        {
            padding: 9px;
            line-height: 170%;
            font-weight: bold;
            font-size: 0.9em;
        }
        

        .element:nth-child(6)
        {
            background-image: url("images/mobile/section/image-photography.jpg");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
        .element:nth-child(6) .text *
        {
            position: relative;
            top: 150px;
    
            margin: 25px 0;
            padding: 20px O;
            text-align: center;
            
        }
        .element:nth-child(6) p
        {
            padding: 9px;
            line-height: 170%;  /*Modifi l'écartemment entre les lignes*/
            font-weight: bold;
            font-size: 0.9em;
        }


        .testimonials
        {
            background-color: rgb(255, 255, 255);
            flex-direction: column;
            padding-bottom: 170px;
            width: 100%;
            height: auto;
        }

        .testimonials h3
        {
            position: relative;
            top: 70px;
        }

        .testimonials .people
        {
            position: relative;
            top: 130px;
            margin: 20px 0;
            padding: 0 25px;
        }

        .testimonials img
        {
            margin-bottom: 2px;
        }

        .testimonials .commentary
        {
            margin-bottom: 15px;
        }






        /*              FOOTER               */


        #footer
        {
            width: 100%;
        }

        #pictures-footer img
        {
            width: 50%;
        }

        #data-footer
        {
            margin-top: 10px;
            margin-bottom: 60px;  
        }
        #bottom-footer
        {
            height: 250px;
        }
        
    }