/*media up to @1920px**/

body {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-areas:
        "header    header    header"
        "nav       nav       nav"
        "main       main    main"
        "process          process          process"
        "footer    footer   footer"
        "rightsReserved    rightsReserved   rightsReserved";
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-template-rows: auto auto auto auto auto auto;

    &>header {
        grid-area: header;
        padding-top: 30px;
        padding-bottom: 20px;
    }

    &>nav {
        grid-area: nav;
    }

    &>main {
        grid-area: main;
        grid-template-areas:
            "textIntro textIntro textIntro"
            "sectionwhy sectionwhy sectionwhy"
            "sectionService sectionService sectionService"
            "choseHyper choseHyper choseHyper"
            "process process process";
        grid-template-columns: 33.3% 33.3% 33.3%;
        grid-template-rows: auto auto auto auto auto;


        &>.textIntro {
            grid-area: textIntro;
            padding-top: 30px;
            padding-left: 30px;
            padding-right: 30px;
        }

        &>.justification {
            padding-left: 30px;
            padding-right: 30px;
            background-color: var(--couleurBlanc);
            grid-area: sectionwhy;
            display: grid;
            grid-template-areas:
                "titleWhy titleWhy titleWhy"
                "why1  why2  why3"
                "why4  why5  why5";
            grid-template-columns: 40% 30% 30%;
            grid-template-rows: auto auto auto;

            &>.titleWhy {
                grid-area: titleWhy;
                margin-top: 35px;
            }

            &>.why1 {
                grid-area: why1;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin-left: 25px;
                margin-right: 25px;
            }

            &>.why2 {
                grid-area: why2;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin-left: 25px;
                margin-right: 25px;
            }

            &>.why3 {
                grid-area: why3;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin-left: 25px;
                margin-right: 25px;
            }

            &>.why4 {
                grid-area: why4;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin-left: 25px;
                margin-right: 25px;
            }

            &>.why5 {
                grid-area: why5;
                display: flex;
                flex-direction: column;
                text-align: center;
                margin-left: 25px;
                margin-right: 25px;
            }
        }

        &>.services {
            grid-area: sectionService;
            display: grid;
            grid-template-areas:
                "titleServices titleServices titleServices"
                "typePro1  typePro2  typePro3";
            grid-template-columns: 33.3% 33.3% 33.3%;
            grid-template-rows: auto auto;

            &>.titleServices {
                grid-area: titleServices;
            }

            &>.typePro1 {
                grid-area: typePro1;
                text-align: center;

                & .overlay {
                    margin-left: 50px;
                    margin-right: 60px;
                }
            }

            &>.typePro2 {
                grid-area: typePro2;
                text-align: center;

                & .overlay {
                    margin-left: 50px;
                    margin-right: 60px;
                }
            }

            &>.typePro3 {
                grid-area: typePro3;
                text-align: center;

                & .overlay {
                    margin-left: 50px;
                    margin-right: 60px;
                }
            }
        }

        &>.chose {
            grid-area: choseHyper;
            background-color: var(--couleurBlanc);
            display: grid;
            grid-template-areas:
                "titleChose        titleChose"
                "choseOne           choseTwo";
            grid-template-columns: 50% 50%;
            grid-template-rows: auto auto;

            &>.titleChose {
                grid-area: titleChose;
                margin-top: 35px;
            }

            &>.choseOne {
                grid-area: choseOne;
                padding: 30px;
            }

            &>.choseTwo {
                grid-area: choseTwo;
                padding: 30px;
            }
        }

        &>.process {
            grid-area: process;
            display: grid;
            grid-template-areas:
                "titleProcess titleProcess titleProcess"
                "concept concept concept"
                "design design design"
                "develop develop develop"
                "frame frame frame"
                "lunch lunch lunch";

            grid-template-columns: 33.3% 33.3% 33.3%;
            grid-template-rows: auto auto auto auto auto auto;
            margin-right: 50px;

            &>.titleProcess {
                grid-area: titleProcess;
            }

            & .concept {
                grid-area: concept;
                display: grid;
                grid-template-areas: "conception1 conception2 conception3";
                grid-template-columns: 33.3% 33.3% 33.3%;
                grid-template-rows: auto;

                &>.conception1 {
                    grid-area: conception1;
                    align-content: center;
                }

                &>.conception2 {
                    grid-area: conception2;
                    align-content: center;
                }

                &>.conception3 {
                    grid-area: conception3;
                    align-content: center;
                }
            }

            & .design {
                grid-area: design;
                display: grid;
                grid-template-areas: "design1 design2 design3";
                grid-template-columns: 33.3% 33.3% 33.3%;
                grid-template-rows: auto;

                &>.design1 {
                    grid-area: design1;
                    align-content: center;
                }

                &>.design2 {
                    grid-area: design2;
                    align-content: center;
                }

                &>.design3 {
                    grid-area: design3;
                    align-content: center;
                }
            }

            & .develop {
                grid-area: develop;
                display: grid;
                grid-template-areas: "dev1 dev2 dev3";
                grid-template-columns: 33.3% 33.3% 33.3%;
                grid-template-rows: auto;

                &>.dev1 {
                    grid-area: dev1;
                    align-content: center;
                }

                &>.dev2 {
                    grid-area: dev2;
                    align-content: center;
                }

                &>.dev3 {
                    grid-area: dev3;
                    align-content: center;
                }
            }

            & .frame {
                grid-area: frame;
                display: grid;
                grid-template-areas: "framework1 framework2 framework3";
                grid-template-columns: 33.3% 33.3% 33.3%;
                grid-template-rows: auto;

                &>.framework1 {
                    grid-area: framework1;
                    align-content: center;
                }

                &>.framework2 {
                    grid-area: framework2;
                    align-content: center;
                }

                &>.framework3 {
                    grid-area: framework3;
                    align-content: center;
                }
            }

            & .lunch {
                grid-area: lunch;
                display: grid;
                grid-template-areas: "lunch1 lunch2 lunch3";
                grid-template-columns: 33.3% 33.3% 33.3%;
                grid-template-rows: auto;

                &>.lunch1 {
                    grid-area: lunch1;
                    align-content: center;
                }

                &>.lunch2 {
                    grid-area: lunch2;
                    align-content: center;
                }

                &>.lunch3 {
                    grid-area: lunch3;
                    align-content: center;
                }
            }
        }


    }

    & footer {
        grid-area: footer;
        display: grid;
        grid-template-areas:
            "hyperSocial hyperSocial hyperSocial"
            "contact     contact     contact";
        grid-template-columns: 40% 20% 40%;
        grid-template-rows: auto auto;


        &>.hyperSocial {
            grid-area: hyperSocial;
            padding: 30px;

        }

        &>.contact {
            background-color: var(--couleurVerte);
            grid-area: contact;
            display: grid;
            grid-template-areas:
                "submit  contactDetails socialmedia ";
            grid-template-columns: 40% 20% 40%;
            grid-template-rows: auto;
            padding-top: 40px;
            padding-bottom: 20px;

            &>.socialmedia {
                grid-area: socialmedia;
            }

            &>.contactDetails {
                grid-area: contactDetails;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            &>.submit {
                grid-area: submit;
            }

        }

    }

    &>.rightsReserved {
        background-color: var(--couleurGris);
        grid-area: rightsReserved;
        padding: 15px;
        text-align: center;
    }
}

/*media @1920px-1200px*/
@media (min-width: 825px) and (max-width: 1200px) {
    body {
        background-color: var(--couleurGris);
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-areas:
            "header header "
            "nav    nav "
            "main   main"
            "footer footer"
            "rightsReserved  rightsReserved";
        grid-template-columns: 50% 50%;
        grid-template-rows: auto auto auto auto auto;

        &>header {
            grid-area: header;
        }

        &>nav {
            grid-area: nav;
            background-color: var(--couleurVerte);
        }

        &>main {
            grid-area: main;
            display: grid;
            grid-template-areas:
                "textIntro textIntro"
                "sectionwhy sectionwhy"
                "sectionService sectionService"
                "choseHyper choseHyper"
                "process process";
            grid-template-columns: 50% 50%;
            grid-template-rows: auto auto auto auto auto;

            &>.textIntro {
                grid-area: textIntro;
            }

            &>.justification {
                margin-left: 40px;
                margin-right: 40px;
                border-radius: 10px;
                grid-area: sectionwhy;
                display: grid;
                grid-template-areas:
                    "titleWhy titleWhy"
                    "why1  why2"
                    "why3  why4"
                    "why5  why5";
                grid-template-columns: 50% 50%;
                grid-template-rows: auto auto auto auto;

                &>.titleWhy {
                    grid-area: titleWhy;
                    margin-top: 35px;
                }

                &>.why1 {
                    grid-area: why1;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                &>.why2 {
                    grid-area: why2;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                &>.why3 {
                    grid-area: why3;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                &>.why4 {
                    grid-area: why4;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                &>.why5 {
                    grid-area: why5;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }
            }

            &>.services {
                grid-area: sectionService;
                display: grid;
                grid-template-areas:
                    "titleServices titleServices"
                    "typePro1  typePro2"
                    "typePro3  typePro3";
                grid-template-columns: 50% 50%;
                grid-template-rows: auto auto auto;

                &>.titleServices {
                    grid-area: titleServices;
                }

                &>.typePro1 {
                    grid-area: typePro1;
                    text-align: center;
                }

                &>.typePro2 {
                    grid-area: typePro2;
                    text-align: center;
                }

                &>.typePro3 {
                    grid-area: typePro3;
                    text-align: center;

                    & img {
                        max-width: 53%;
                        display: block;
                        margin: 0 auto;
                    }

                    & .overlay {
                        max-width: 45%;
                        padding-top: 90px;
                        margin-left: 30px;
                        margin: 30px;
                        margin: 0 auto;
                    }
                }
            }

            &>.chose {
                grid-area: choseHyper;
                display: grid;
                grid-template-areas:
                    "titleChose        titleChose"
                    "choseOne           choseTwo";
                grid-template-columns: 50% 50%;
                grid-template-rows: auto auto;
                margin-left: 40px;
                margin-right: 40px;
                border-radius: 10px;

                &>.titleChose {
                    grid-area: titleChose;
                    margin-top: 35px;
                }

                &>.choseOne {
                    grid-area: choseOne;
                    padding: 30px;
                }

                &>.choseTwo {
                    grid-area: choseTwo;
                    padding: 30px;
                }
            }

            &>.process {
                grid-area: process;
                display: grid;
                grid-template-areas:
                    "titleProcess titleProcess"
                    "concept concept"
                    "design design"
                    "develop develop"
                    "frame frame"
                    "lunch lunch";

                grid-template-columns: 50% 50%;
                grid-template-rows: auto auto auto auto auto auto;
                margin-left: 40px;
                margin-right: 40px;

                &>.titleProcess {
                    grid-area: titleProcess;
                }

                & .concept {
                    grid-area: concept;
                    display: grid;
                    grid-template-areas:
                        "conception1    conception2"
                        "empty    conception3";
                    grid-template-columns: 30% 70%;
                    grid-template-rows: auto auto;

                    &>.conception1 {
                        grid-area: conception1;
                    }

                    &>.conception2 {
                        grid-area: conception2;
                    }

                    &>.conception3 {
                        grid-area: conception3;
                    }

                    &>.empty {
                        grid-area: empty;
                    }
                }

                & .design {
                    grid-area: design;
                    display: grid;
                    grid-template-areas:
                        "design1 design2"
                        "empty  design3";
                    grid-template-columns: 30% 70%;
                    grid-template-rows: auto auto;

                    &>.design1 {
                        grid-area: design1;
                    }

                    &>.design2 {
                        grid-area: design2;
                    }

                    &>.design3 {
                        grid-area: design3;
                    }

                    &>.empty {
                        grid-area: empty;
                    }
                }

                & .develop {
                    grid-area: develop;
                    display: grid;
                    grid-template-areas:
                        "dev1 dev2"
                        "empty dev3";
                    grid-template-columns: 30% 70%;
                    grid-template-rows: auto auto;

                    &>.dev1 {
                        grid-area: dev1;
                    }

                    &>.dev2 {
                        grid-area: dev2;
                    }

                    &>.dev3 {
                        grid-area: dev3;
                    }

                    &>.empty {
                        grid-area: empty;
                    }
                }

                & .frame {
                    grid-area: frame;
                    display: grid;
                    grid-template-areas:
                        "framework1 framework2"
                        "empty framework3 ";
                    grid-template-columns: 30% 70%;
                    grid-template-rows: auto auto;

                    &>.framework1 {
                        grid-area: framework1;
                    }

                    &>.framework2 {
                        grid-area: framework2;
                    }

                    &>.framework3 {
                        grid-area: framework3;
                    }

                    &>.empty {
                        grid-area: empty;
                    }
                }

                & .lunch {
                    grid-area: lunch;
                    display: grid;
                    grid-template-areas:
                        "lunch1 lunch2 "
                        "empty lunch3";
                    grid-template-columns: 30% 70%;
                    grid-template-rows: auto auto;

                    &>.lunch1 {
                        grid-area: lunch1;
                    }

                    &>.lunch2 {
                        grid-area: lunch2;
                    }

                    &>.lunch3 {
                        grid-area: lunch3;
                    }

                    &>.empty {
                        grid-area: empty;
                    }
                }
            }
        }


        & footer {
            grid-area: footer;

            display: grid;
            grid-template-areas:
                "hyperSocial hyperSocial hyperSocial"
                "contact contact contact";
            grid-template-columns: 33.3% 33.3% 33.3%;
            grid-template-rows: auto auto;

            &>.hyperSocial {
                grid-area: hyperSocial;


            }

            &>.contact {
                background-color: var(--couleurVerte);
                grid-area: contact;
                display: grid;
                grid-template-areas:
                    "submit  contactDetails socialmedia ";
                grid-template-columns: 33.3% 33.3% 33.3%;
                grid-template-rows: auto;
                padding-top: 40px;
                padding-bottom: 20px;


                &>.socialmedia {
                    grid-area: socialmedia;
                }

                &>.contactDetails {
                    grid-area: contactDetails;
                    display: flex;
                    flex-direction: column;
                    gap: 30px;
                }

                &>.submit {
                    grid-area: submit;
                }

            }

        }

        &>.rightsReserved {
            background-color: var(--couleurGris);
            grid-area: rightsReserved;
            padding: 15px;
            text-align: center;
        }
    }
}

/*media up to @825px et @400px**/
@media (min-width: 400px) and (max-width: 824px) {
    body {
        background-color: var(--couleurGris);
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-areas:
            "header"
            "nav "
            "main"
            "footer"
            "rightsReserved";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;

        &>header {
            grid-area: header;
            padding-top: 30px;
            padding-bottom: 20px;
        }

        &>nav {
            grid-area: nav;
            background-color: var(--couleurVerte);
        }

        &>main {
            display: grid;
            grid-area: main;
            grid-template-areas:
                "textIntro"
                "sectionwhy"
                "sectionService"
                "choseHyper"
                "process ";
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto auto auto;


            &>.textIntro {
                grid-area: textIntro;
                padding-top: 30px;
                padding-left: 30px;
                padding-right: 30px;
            }

            .textIntro>h2 {
                padding-bottom: 20px;
            }

            &>.justification {
                margin-left: 25px;
                margin-right: 25px;
                border-radius: 10px;
                grid-area: sectionwhy;
                display: grid;
                grid-template-areas:
                    "titleWhy"
                    "why1"
                    "why2"
                    "why3"
                    "why4"
                    "why5";
                grid-template-columns: 100%;
                grid-template-rows: auto auto auto auto auto auto;

                &>.titleWhy {
                    grid-area: titleWhy;
                    margin-top: 35px;
                }

                &>.why1 {
                    grid-area: why1;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                &>.why2 {
                    grid-area: why2;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                &>.why3 {
                    grid-area: why3;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                &>.why4 {
                    grid-area: why4;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                &>.why5 {
                    grid-area: why5;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }
            }

            &>.services {
                grid-area: sectionService;
                display: grid;
                grid-template-areas:
                    "titleServices"
                    "typePro1"
                    "typePro2"
                    "typePro3";
                grid-template-columns: 100%;
                grid-template-rows: auto auto auto auto;

                &>.titleServices {
                    grid-area: titleServices;
                }

                &>.typePro1 {
                    grid-area: typePro1;
                    text-align: center;

                    & .overlay {
                        padding-left: 40px;
                        padding-right: 55px;
                    }
                }

                &>.typePro2 {
                    grid-area: typePro2;
                    text-align: center;

                    & .overlay {

                        padding-left: 40px;
                        padding-right: 55px;

                    }
                }

                &>.typePro3 {
                    grid-area: typePro3;
                    text-align: center;

                    & .overlay {

                        padding-left: 40px;
                        padding-right: 55px;
                    }
                }
            }

            &>.chose {
                grid-area: choseHyper;
                display: grid;
                grid-template-areas:
                    "titleChose"
                    "choseOne"
                    "choseTwo";
                grid-template-columns: 100%;
                grid-template-rows: auto auto auto;
                margin-left: 25px;
                margin-right: 25px;
                border-radius: 10px;

                &>.titleChose {
                    grid-area: titleChose;
                    margin-top: 35px;
                }

                &>.choseOne {
                    grid-area: choseOne;
                    padding: 30px;
                }

                &>.choseTwo {
                    grid-area: choseTwo;
                    padding: 30px;
                }
            }

            &>.process {
                grid-area: process;
                display: grid;
                grid-template-areas:
                    "titleProcess titleProcess titleProcess"
                    "concept concept concept"
                    "design design design"
                    "develop develop develop"
                    "frame frame frame"
                    "lunch lunch lunch";

                grid-template-columns: 33.3% 33.3% 33.3%;
                grid-template-rows: auto auto auto auto auto auto;
                margin-left: 50px;
                margin-right: 50px;

                &>.titleProcess {
                    grid-area: titleProcess;
                }

                & .concept {
                    grid-area: concept;
                    display: grid;
                    grid-template-areas:
                        "conception1"
                        "conception2"
                        "conception3";
                    grid-template-columns: 100%;
                    grid-template-rows: auto auto auto;

                    &>.conception1 {
                        grid-area: conception1;
                    }

                    &>.conception2 {
                        grid-area: conception2;
                    }

                    &>.conception3 {
                        grid-area: conception3;
                    }
                }

                & .design {
                    grid-area: design;
                    display: grid;
                    grid-template-areas:
                        "design1"
                        "design2"
                        "design3";
                    grid-template-columns: 100%;
                    grid-template-rows: auto auto auto;

                    &>.design1 {
                        grid-area: design1;
                    }

                    &>.design2 {
                        grid-area: design2;
                    }

                    &>.design3 {
                        grid-area: design3;
                    }
                }

                & .develop {
                    grid-area: develop;
                    display: grid;
                    grid-template-areas:
                        "dev1"
                        "dev2"
                        "dev3";
                    grid-template-columns: 100%;
                    grid-template-rows: auto auto auto;

                    &>.dev1 {
                        grid-area: dev1;
                    }

                    &>.dev2 {
                        grid-area: dev2;
                    }

                    &>.dev3 {
                        grid-area: dev3;
                    }
                }

                & .frame {
                    grid-area: frame;
                    display: grid;
                    grid-template-areas:
                        "framework1"
                        "framework2"
                        "framework3";
                    grid-template-columns: 100%;
                    grid-template-rows: auto auto auto;

                    &>.framework1 {
                        grid-area: framework1;
                    }

                    &>.framework2 {
                        grid-area: framework2;
                    }

                    &>.framework3 {
                        grid-area: framework3;
                    }
                }

                & .lunch {
                    grid-area: lunch;
                    display: grid;
                    grid-template-areas:
                        "lunch1"
                        "lunch2"
                        "lunch3";
                    grid-template-columns: 100%;
                    grid-template-rows: auto auto auto;

                    &>.lunch1 {
                        grid-area: lunch1;
                    }

                    &>.lunch2 {
                        grid-area: lunch2;
                    }

                    &>.lunch3 {
                        grid-area: lunch3;
                    }
                }
            }


        }

        & footer {
            grid-area: footer;
            display: grid;
            grid-template-areas:
                "hyperSocial"
                "contact";
            grid-template-columns: 1fr;
            grid-template-rows: auto auto;

            &>.hyperSocial {
                grid-area: hyperSocial;

            }

            &>.contact {
                background-color: var(--couleurVerte);
                grid-area: contact;
                display: grid;
                grid-template-areas:
                    "submit"
                    "contactDetails"
                    "socialmedia";
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
                padding-top: 40px;

                &>.submit {
                    grid-area: submit;
                    margin-bottom: 40px;
                }

                &>.contactDetails {
                    grid-area: contactDetails;
                    margin-bottom: 40px;
                }

                &>.socialmedia {
                    grid-area: socialmedia;
                    margin-bottom: 20px;
                }


            }

        }

        &>.rightsReserved {
            grid-area: rightsReserved;
            background-color: var(--couleurGris);
            padding: 15px;
            text-align: center;
        }
    }
}


/*media up to @424px**/
@media (max-width: 424px) {
    body {
        background-color: var(--couleurGris);
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-areas:
            "header"
            "nav "
            "main"
            "footer"
            "rightsReserved";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;

        &>header {
            grid-area: header;
            padding-top: 30px;
            padding-bottom: 20px;
        }

        &>nav {
            grid-area: nav;
            background-color: var(--couleurVerte);
        }

        &>main {
            display: grid;
            grid-area: main;
            grid-template-areas:
                "textIntro"
                "sectionwhy"
                "sectionService"
                "choseHyper"
                "process ";
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto auto auto;


            &>.textIntro {
                grid-area: textIntro;
                padding-top: 30px;
                padding-left: 30px;
                padding-right: 30px;
            }

            .textIntro>h2 {
                padding-bottom: 20px;
            }

            &>.justification {
                margin-left: 25px;
                margin-right: 25px;
                border-radius: 10px;
                grid-area: sectionwhy;
                display: grid;
                grid-template-areas:
                    "titleWhy"
                    "why1"
                    "why2"
                    "why3"
                    "why4"
                    "why5";
                grid-template-columns: 100%;
                grid-template-rows: auto auto auto auto auto auto;

                &>.titleWhy {
                    grid-area: titleWhy;
                    margin-top: 35px;
                }

                &>.why1 {
                    grid-area: why1;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                &>.why2 {
                    grid-area: why2;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                &>.why3 {
                    grid-area: why3;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                &>.why4 {
                    grid-area: why4;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }

                &>.why5 {
                    grid-area: why5;
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                }
            }

            &>.services {
                grid-area: sectionService;
                display: grid;
                grid-template-areas:
                    "titleServices"
                    "typePro1"
                    "typePro2"
                    "typePro3";
                grid-template-columns: 100%;
                grid-template-rows: auto auto auto auto;

                &>.titleServices {
                    grid-area: titleServices;
                }

                &>.typePro1 {
                    grid-area: typePro1;
                    text-align: center;

                    & .overlay {
                        font-size: 14px;
                        padding-left: 10px;
                        padding-right: 10px;
                    }
                }

                &>.typePro2 {
                    grid-area: typePro2;
                    text-align: center;

                    & .overlay {
                        font-size: 14px;
                        padding-left: 10px;
                        padding-right: 10px;

                    }
                }

                &>.typePro3 {
                    grid-area: typePro3;
                    text-align: center;

                    & .overlay {
                        font-size: 14px;
                        padding-left: 10px;
                        padding-right: 10px;
                    }
                }
            }

            &>.chose {
                grid-area: choseHyper;
                display: grid;
                grid-template-areas:
                    "titleChose"
                    "choseOne"
                    "choseTwo";
                grid-template-columns: 100%;
                grid-template-rows: auto auto auto;
                margin-left: 25px;
                margin-right: 25px;
                border-radius: 10px;

                &>.titleChose {
                    grid-area: titleChose;
                    margin-top: 35px;
                }

                &>.choseOne {
                    grid-area: choseOne;
                    padding: 30px;
                }

                &>.choseTwo {
                    grid-area: choseTwo;
                    padding: 30px;
                }
            }

            &>.process {
                grid-area: process;
                display: grid;
                grid-template-areas:
                    "titleProcess titleProcess titleProcess"
                    "concept concept concept"
                    "design design design"
                    "develop develop develop"
                    "frame frame frame"
                    "lunch lunch lunch";

                grid-template-columns: 33.3% 33.3% 33.3%;
                grid-template-rows: auto auto auto auto auto auto;
                margin-left: 50px;
                margin-right: 50px;

                &>.titleProcess {
                    grid-area: titleProcess;
                }

                & .concept {
                    grid-area: concept;
                    display: grid;
                    grid-template-areas:
                        "conception1"
                        "conception2"
                        "conception3";
                    grid-template-columns: 100%;
                    grid-template-rows: auto auto auto;

                    &>.conception1 {
                        grid-area: conception1;
                    }

                    &>.conception2 {
                        grid-area: conception2;
                    }

                    &>.conception3 {
                        grid-area: conception3;
                    }
                }

                & .design {
                    grid-area: design;
                    display: grid;
                    grid-template-areas:
                        "design1"
                        "design2"
                        "design3";
                    grid-template-columns: 100%;
                    grid-template-rows: auto auto auto;

                    &>.design1 {
                        grid-area: design1;
                    }

                    &>.design2 {
                        grid-area: design2;
                    }

                    &>.design3 {
                        grid-area: design3;
                    }
                }

                & .develop {
                    grid-area: develop;
                    display: grid;
                    grid-template-areas:
                        "dev1"
                        "dev2"
                        "dev3";
                    grid-template-columns: 100%;
                    grid-template-rows: auto auto auto;

                    &>.dev1 {
                        grid-area: dev1;
                    }

                    &>.dev2 {
                        grid-area: dev2;
                    }

                    &>.dev3 {
                        grid-area: dev3;
                    }
                }

                & .frame {
                    grid-area: frame;
                    display: grid;
                    grid-template-areas:
                        "framework1"
                        "framework2"
                        "framework3";
                    grid-template-columns: 100%;
                    grid-template-rows: auto auto auto;

                    &>.framework1 {
                        grid-area: framework1;
                    }

                    &>.framework2 {
                        grid-area: framework2;
                    }

                    &>.framework3 {
                        grid-area: framework3;
                    }
                }

                & .lunch {
                    grid-area: lunch;
                    display: grid;
                    grid-template-areas:
                        "lunch1"
                        "lunch2"
                        "lunch3";
                    grid-template-columns: 100%;
                    grid-template-rows: auto auto auto;

                    &>.lunch1 {
                        grid-area: lunch1;
                    }

                    &>.lunch2 {
                        grid-area: lunch2;
                    }

                    &>.lunch3 {
                        grid-area: lunch3;
                    }
                }
            }


        }

        & footer {
            grid-area: footer;
            display: grid;
            grid-template-areas:
                "hyperSocial"
                "contact";
            grid-template-columns: 1fr;
            grid-template-rows: auto auto;

            &>.hyperSocial {
                grid-area: hyperSocial;

            }

            &>.contact {
                background-color: var(--couleurVerte);
                grid-area: contact;
                display: grid;
                grid-template-areas:
                    "submit"
                    "contactDetails"
                    "socialmedia";
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto;
                padding-top: 40px;

                &>.submit {
                    grid-area: submit;
                    margin-bottom: 40px;
                }

                &>.contactDetails {
                    grid-area: contactDetails;
                    margin-bottom: 40px;
                }

                &>.socialmedia {
                    grid-area: socialmedia;
                    margin-bottom: 20px;
                }


            }

        }

        &>.rightsReserved {
            grid-area: rightsReserved;
            background-color: var(--couleurGris);
            padding: 15px;
            text-align: center;
        }
    }
}