/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* --------------------------------------------- CSS --------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------- IMPORT ------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Betania+Patmos&display=swap");

/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------- GLOBAL ------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
* {
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    background: linear-gradient(135deg, #e8e8e8 0%, #ddbcbc 100%);
}

h1 {
    font-size: 1.2em;
    text-align: center;
    color: white;
    margin: auto;
}

h2 {
    font-size: 1em;
    width: 90%;
    color: white;
}

p {
    font-size: 0.7em;
    width: 90%;
    color: #ececec;
    margin: auto;
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ------------------------------------------ KEYFRAMES ------------------------------------------ */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
@keyframes animOpaScale {
    0% {
        opacity: 0;
        scale: 0;
    }
    100% {
        opacity: 1;
        scale: 1;
    }
}
@keyframes animOpaScalTwo {
    0% {
        opacity: 0;
        scale: 0;
    }
    70% {
        scale: 1.05;
    }
    100% {
        opacity: 1;
        scale: 1;
    }
}
@keyframes slide-in {
    0% {
        width: 0;
    }
    100% {
        width: 85%;
    }
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------- HEADER ------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
header {
    width: 100vw;
    height: 10vh;
}
nav {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(356deg, #42ae66 0%, #58b276 100%);
}
#imgNavLogo {
    width: 8vh;
    height: 8vh;
    object-fit: contain;
    background: white;
    border-radius: 100%;
    margin-left: 5vw;
}
#svgNavDashBoard {
    width: 8vh;
    height: 8vh;
    margin-right: 4vw;
    fill: white;
}
#svgHomeNavDashBoard {
    width: 6vh;
    height: 6vh;
    margin-left: 5vw;
    fill: white;
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ------------------------------------------ HOME-PAGE ------------------------------------------ */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
#sectionBoard {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.divSectionBoard {
    height: 25vh;
    width: 90vw;
    border-radius: 15px;
}
#divSectionBoardWelcom {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 85%;
    color: white;
    background: #ef5f23c4;
    padding: 2.5%;
    animation-duration: 1s;
    animation-name: slide-in;
    animation-fill-mode: forwards;
    max-width: 350px;
}
#divSectionBoardActu,
.divUnitLunch,
.divSectionBoardDashBoardElements {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}
.divSectionBoardSingleUnit {
    width: 45%;
    height: 100%;
    border-radius: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
    flex-direction: column;
}
#divLunchUnit,
#divGreenSpaceUnit,
#divSectionBoardActu {
    background: linear-gradient(311deg, #ff9c75 0%, #ef5f23c4 100%);
    box-shadow: 0 0 0.5em 0px #2b2b2b61;
    border: 1px solid #dddddd;
    opacity: 0;
}
#divLunchUnit {
    animation-duration: 1.5s;
    animation-name: animOpaScalTwo;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}
#divGreenSpaceUnit {
    animation-duration: 1.5s;
    animation-name: animOpaScalTwo;
    animation-delay: 1.75s;
    animation-fill-mode: forwards;
}
#divSectionBoardActu {
    animation-duration: 1.5s;
    animation-name: animOpaScalTwo;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
#divSectionBoardDashBoard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    background-image: url(/images/fd_1.webp);
    background-size: cover;
}
#h1Welcom {
    opacity: 0;
    animation-duration: 1s;
    animation-name: animOpaScale;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    font-family: "Betania Patmos", cursive;
    font-style: italic;
}
#pWelcom {
    opacity: 0;
    overflow: auto;
    height: auto;
    animation-duration: 1s;
    animation-name: animOpaScale;
    animation-delay: 0.75s;
    animation-fill-mode: forwards;
    padding: 5px;
}
#divSvgSepare {
    display: flex;
    flex-direction: column;
    position: absolute;
    height: 100%;
    width: 100%;
}
#divBorder {
    background-image: url(/images/fd_2.webp);
    background-size: contain;
    position: relative;
    height: 38vh;
    width: 100%;
}
.divSectionBoard {
    height: 20vh;
    margin: 5vh auto auto auto;
}
#svgSepare {
    bottom: 0px;
    position: absolute;
    fill: #0099ff;
}
#svgSeparetwo {
    position: absolute;
    fill: #0099ff;
}
#divAllUnits {
    width: 100%;
    height: 100%;
    margin-top: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#divAllUnitsDashBoard {
    width: 100%;
    height: 100%;
    margin-top: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 5vh;
}
#divSectionBoardUnits {
    width: 100%;
    height: auto;
    padding-bottom: 30px;
    background-image: url(/images/fd_1.webp);
    background-size: cover;
    display: flex;
    justify-content: center;
    position: relative;
}
.divUnit {
    width: 75%;
    height: 20vh;
    display: flex;
    max-width: 350px;
    opacity: 0;
}
.divUnith2 {
    width: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0a1ec;
}

.divUnitImg {
    width: 50%;
    text-align: center;
    background: rebeccapurple;
}
.imgUnit {
    width: auto;
    height: 100%;
}
.imgStretch {
    width: stretch;
}
.animDivUnitDelivery {
    animation-duration: 1s;
    animation-delay: 1.75s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animDivUnitEV {
    animation-duration: 1s;
    animation-delay: 2.25s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animDivUnitActu {
    animation-duration: 1s;
    animation-delay: 2.75s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animDivUnitContact {
    animation-duration: 1s;
    animation-delay: 3.25s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animDivUnitDeliveryDashBoard {
    animation-duration: 1s;
    animation-delay: 0.25s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animDivUnitEVDashBoard {
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animDivUnitActuDashBoard {
    animation-duration: 1s;
    animation-delay: 0.75s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animDivUnitContactDashBoard {
    animation-duration: 1s;
    animation-delay: 1s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
#divUnitDeliveryh2 {
    border-radius: 15px 0 0 0;
    background-color: #de73ea;
}
#divUnitEvh2 {
    background: #efc817;
}
#divUnitActuh2 {
    background: #d96d3b;
}
#divUnitContacth2 {
    background: #12d9d9;
    border-radius: 0 0 15px 0;
}
#divUnitActuImg {
    background: #0f7b0f;
}
.h2Unit {
    font-family: "Betania Patmos", cursive;
    font-weight: 400;
    font-style: normal;
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ------------------------------------------ NAV-BOARD ------------------------------------------ */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
.divSectionBoardDashBoardElements {
    width: 80%;
    height: 30%;
    border-radius: 15px;
    background: linear-gradient(311deg, #ff9c75 0%, #ef5f23c4 100%);
    box-shadow: 0 0 0.5em 0px #2b2b2b61;
    border: 1px solid #dddddd;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#divSectionBoardDashBoardOne,
#divSectionBoardDashBoardTwo,
#divSectionBoardDashBoardThree {
    opacity: 0;
}
#divSectionBoardDashBoardOne {
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
#divSectionBoardDashBoardTwo {
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-delay: 0.25s;
    animation-fill-mode: forwards;
}
#divSectionBoardDashBoardThree {
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}
.divUnit:hover {
    cursor: pointer;
    scale: 1.02 !important;
}
.divUnit:hover .h2Unit {
    font-size: 1.1em !important;
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------- LUNCH-PAGE ------------------------------------------ */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
#divSectionBoardLunch {
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-image: url(/images/img_lunch3.webp);
    background-size: contain;
}
.divUnitLunch {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #de73eaed;
    box-shadow: 0 0 0.5em 0px #2b2b2b61;
    border: 1px solid #dddddd;
    opacity: 0;
    margin: 0 !important;
}
#divLunchMenu {
    width: 80%;
    max-width: 400px;
    animation-duration: 0.5s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
#divLunchContrat {
    animation-duration: 0.5s;
    animation-name: animOpaScalTwo;
    animation-delay: 0.25s;
    animation-fill-mode: forwards;
    width: 80%;
    max-width: 400px;
}
.liUlDivMenuSectionBoardLunch,
.divContratSectionBoardContrat {
    background: #e991fff2;
    box-shadow: 0 0 0.5em 0px #2b2b2b61;
    border: 1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 90vw;
    border-radius: 15px;
    color: white;
}
.liUlDivMenuSectionBoardLunch {
    height: 10%;
    opacity: 0;
    max-width: 400px;
}
.divContratSectionBoardContrat {
    height: 30%;
    max-width: 400px;
}
#divContratHorsP,
#divContratP {
    width: 80%;
    opacity: 0;
}
.svgUnitLunch {
    fill: #825ed6;
    width: 1.5em;
    height: 1.5em;
}
#divMenu {
    width: 100%;
    height: 90vh;
    background-image: url(/images/img_lunch2.webp);
    background-size: cover;
}
#divContrat {
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-image: url(/images/img_contrat.webp);
    background-size: cover;
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ------------------------------------------ ACTU-PAGE ------------------------------------------ */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
#divSectionBoardAllActu {
    width: 100%;
    height: 90vh !important;
    background-image: url(/images/img_actu.webp);
    background-size: cover;
}
.liUldivSectionBoardActu,
.divSectionBoardActuGrp {
    background: #f24a31d4;
    box-shadow: 0 0 0.5em 0px #2b2b2b61;
    border: 1px solid #dddddd;
    width: 90vw;
    height: 25vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    max-width: 350px;
}
.h2LiUlSectionBoardActu {
    margin: auto;
    color: white;
    font-family: "Betania Patmos", cursive;
    font-style: italic;
}
#imgActuOne,
#imgActuTwo {
    width: 90vw;
    border-radius: 15px;
}
#imgActuThree {
    border-radius: 15px;
    max-width: 150px;
}
.pActuSectionBoard {
    color: #4366d3;
    padding: 15px;
    font-weight: bolder;
    font-size: 0.8em;
}
#divSectionBoardActuOne,
#divSectionBoardActuTwo,
#divSectionBoardActuThree {
    display: flex;
    height: 90vh;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    text-align: center;
    background-image: url(/images/img_actu.webp);
    background-size: cover;
    width: 100%;
}
#liActuOne,
#liActuTwo,
#liActuThree {
    opacity: 0;
}
#liActuOne,
#liActuThree {
    border-radius: 15px 0 15px 0;
}
#liActuTwo {
    border-radius: 0px 15px 0px 15px;
}
.h2Actu {
    color: #4366d3;
}
.imgSectionBoardActu {
    opacity: 0;
    max-width: 300px;
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}
.pLiUlSectionBoardActu {
    overflow: auto;
    height: auto;
    color: white;
    font-weight: bold;
}
.divActu {
    margin: 0 !important;
    width: 80%;
    background: #ffafccd4;
    border-radius: 15px 15px 80px 30px;
    padding: 15px;
    max-width: 350px;
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* -------------------------------------- GREEN_SPACE-PAGE --------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */

#divSectionBoardGreenSpace {
    height: auto !important;
    background-image: url(/images/fd_3.webp);
    background-size: cover;
}
#uldivSectionBoardGreenSpace {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.liUldivSectionBoardGreenSpace {
    background: linear-gradient(311deg, #ff9c75 0%, #ef5f23c4 100%);
    width: 40%;
    height: 25%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: white;
    padding: 10px;
    opacity: 0;
}
.divElemEv {
    width: 80%;
    height: 150px;
    background: #e4b43ce6;
    display: flex;
    margin: 2.5vh;
    box-shadow: 0 0 7px #4f5506;
    padding: 10px;
    max-width: 350px;
    opacity: 0;
}
.pElemEv {
    text-align: center;
    width: 50%;
    font-size: 1em;
    color: #148e14;
    padding: 15px;
    font-weight: bolder;
    font-family: "Betania Patmos", cursive;
    font-style: italic;
}
.imgElemEv {
    width: 50%;
    object-fit: contain;
}
#divElemEvOne {
    border-radius: 10% 30% 50% 70%;
}
#divElemEvTwo {
    border-radius: 40% 70% 70% 50%;
}
#divElemEvThree {
    border-radius: 50% 30% 80% 40%;
}
#divElemEvFour {
    border-radius: 60% 20% 30% 70%;
}
#divElemEvFive {
    border-radius: 70% 50% 70% 20%;
    margin: 2.5vh 2.5vh 10vh 2.5vh;
}
.animDivElemEvOne {
    animation-duration: 0.5s;
    animation-delay: 0.75s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animDivElemEvTwo {
    animation-duration: 0.5s;
    animation-delay: 1s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animDivElemEvThree {
    animation-duration: 0.5s;
    animation-delay: 1.25s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animDivElemEvFour {
    animation-duration: 0.5s;
    animation-delay: 1.5s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
.animDivElemEvFive {
    animation-duration: 0.5s;
    animation-delay: 1.75s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* --------------------------------------- CONTACT-PAGE ------------------------------------------ */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
.sectionBoardContact {
    height: auto !important;
    background: center / cover no-repeat url(/images/img_contact.webp);
}
#divSectionBoardContact {
    width: 90vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
#formDivSectionBoardContact {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5vh;
    max-width: 400px;
}
.divInputFormContact,
#divTextareaFormContact {
    width: 100%;
    text-align: center;
    opacity: 0;
}
.inputFormContact,
#textareaFormContact {
    width: 90%;
    padding: 7px;
    margin-bottom: 5px;
    border: none;
    background: linear-gradient(311deg, #2fbcde 0%, #2fbcde 100%);
    box-shadow: 0 0 0.5em 0px #2b2b2b61;
    border: 1px solid #dddddd;
    border-radius: 10px;
    color: white;
}
.buttonFormContact {
    width: 50%;
    padding: 7px;
    margin-bottom: 10px;
    border: none;
    background: linear-gradient(311deg, #2fbcde 0%, #2fbcde 100%);
    box-shadow: 0 0 0.5em 0px #2b2b2b61;
    border: 1px solid #dddddd;
    border-radius: 10px;
    color: white;
    opacity: 0;
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}
.inputFormContact::placeholder,
#textareaFormContact::placeholder {
    color: rgb(250, 250, 250);
}
.inputFormContact:focus,
#textareaFormContact:focus {
    outline: none;
    box-shadow: none;
    scale: 0.99;
    background: #ef5f23c4;
}
#textareaFormContact {
    resize: none;
}
#map {
    width: 100%;
    border: none;
    border-radius: 15px;
}
.pErrorInputFormContact {
    display: none;
    margin-bottom: 7px;
    color: #bd3f27;
    font-weight: 900;
}
.divInputFormContact.error .pErrorInputFormContact {
    display: block;
}
#h2DivSectionBoardContact {
    background-color: #2fbcde !important;
    border-radius: 15px 20px 40% 20% !important;
    max-width: 350px;
}
.inputCheckedTrue {
    border: 2px solid #42ae66 !important;
    box-shadow: none !important;
}
#h2SendMailContact {
    text-align: center;
    width: 80%;
    color: white;
    background: #42ae66;
    border-radius: 15px;
    padding: 5%;
    margin-top: 5vh;
    margin-bottom: 5vh;
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
#infoAdress {
    width: 100%;
    background: #ffae15f0;
    padding: 50px 5px;
    margin: 5vh 0;
    border-radius: 20% 40% 30% 60%;
    max-width: 350px;
}
#pInfoAdress {
    text-align: right;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------- GROUPES ------------------------------------------ */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
#ulDivMenuSectionBoardLunch,
#divSectionBoardGreenSpace,
#uldivSectionBoardActu {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.svgHomePage,
.svgElemDashBoard {
    fill: #5ed65e;
}
#h2ActuSectionBoard,
.h2divUnitLunch,
.h2ElemDashBoard {
    margin-bottom: 20px;
}
.h2TittleSectionBoardGreenSpace,
#h2DivSectionBoardContact {
    width: 80%;
    color: white;
    background: #ef5f23c4;
    border-radius: 15px;
    padding: 5%;
    opacity: 0;
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
    margin: 5vh auto 5vh auto;
    max-width: 350px;
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* -------------------------------------- ANIMATION-CLASS ---------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
#liActuOne,
#liMenuOne,
#divContratHorsP {
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-fill-mode: forwards;
}
#liActuTwo,
#liMenuTwo,
#divContratP,
#liUlGreenSpaceOne,
#divInputNomFormContact {
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-delay: 0.25s;
    animation-fill-mode: forwards;
}
#liActuThree,
#liMenuThree,
#liUlGreenSpaceTwo,
#divInputPrenomFormContact {
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}
#liMenuFour,
#liUlGreenSpaceThree,
#divInputPhoneFormContact {
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-delay: 0.75s;
    animation-fill-mode: forwards;
}
#liMenuFive,
#liUlGreenSpaceFour,
#divInputEmailFormContact {
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
#liUlGreenSpaceFive,
#divTextareaFormContact {
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-delay: 1.25s;
    animation-fill-mode: forwards;
}
#liUlGreenSpaceSix {
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}
#divIframeSectionBoardContact {
    opacity: 0;
    animation-duration: 1s;
    animation-name: animOpaScalTwo;
    animation-delay: 1.75s;
    animation-fill-mode: forwards;
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------- FOOTER ------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
footer {
    width: 100vw;
    height: 5vh;
    display: flex;
    align-items: center;
    background: linear-gradient(356deg, #42ae66 0%, #58b276 100%);
    text-align: center;
}
.pFooter {
    font-size: 0.5em;
    text-decoration: none;
    color: white;
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ---------------------------------------- MEDIA QUERIES ---------------------------------------- */
/* -------------------------------------- TABLETTE - LAPTOP -------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
@media screen and (min-width: 649px) and (max-width: 1300px) {
    .divSectionBoard {
        height: 22vh;
    }
    #divBorder {
        background-size: cover;
        height: 45vh !important;
    }
    #pWelcom {
        font-size: 0.8em;
    }
    #divSectionBoardWelcom {
        padding: 0;
        max-width: 500px !important;
    }
    .divUnit {
        max-width: 400px;
    }
    #divSectionBoardDashBoard {
        width: 100%;
    }
    #divAllUnitsDashBoard {
        flex-direction: column;
        margin: 10vh 0;
    }
    #divAllUnits {
        flex-direction: column;
        margin-bottom: 50px;
        margin-top: 100px;
    }
    .liUldivSectionBoardActu,
    .divSectionBoardActuGrp {
        width: 500px;
    }
    #uldivSectionBoardGreenSpace,
    .liUlDivMenuSectionBoardLunch {
        width: 540px;
    }
    .liUldivSectionBoardGreenSpace {
        height: 20%;
    }
    #formDivSectionBoardContact {
        width: 70%;
    }
    #imgActuThree {
        max-width: 300px;
    }
    .h2TittleSectionBoardGreenSpace {
        padding: 30px;
    }
    #divSectionBoardLunch {
        background-size: cover;
    }
    /* ---HOVER--- */
    #imgNavLogo:hover,
    #svgNavDashBoard:hover,
    #divLunchUnit:hover,
    #divGreenSpaceUnit:hover,
    #divSectionBoardActu:hover,
    #pRealLeo:hover,
    #pMentionsLegales:hover,
    #divLunchMenu:hover,
    #divLunchContrat:hover,
    .liUlDivMenuSectionBoardLunch:hover,
    .divContratSectionBoardContrat:hover,
    .buttonFormContact:hover,
    .liUldivSectionBoardActu:hover,
    .divSectionBoardDashBoardElements:hover {
        cursor: pointer;
    }
    /**/
    #divLunchUnit:hover,
    #divGreenSpaceUnit:hover,
    #divSectionBoardActu:hover,
    #divLunchMenu:hover,
    #divLunchContrat:hover,
    .liUlDivMenuSectionBoardLunch:hover,
    .divContratSectionBoardContrat:hover,
    .liUldivSectionBoardActu:hover,
    .divSectionBoardDashBoardElements:hover {
        scale: 1.01 !important;
        box-shadow: 0 0 0.5em 0px #27673d;
        background: linear-gradient(135deg, #ff9c75 0%, #ef5f23c4 100%);
    }
    /**/
    .buttonFormContact:hover {
        scale: 1.02 !important;
    }
    /**/
    #svgNavDashBoard:hover {
        fill: #ff9c75;
    }
    .inputFormContact,
    #textareaFormContact {
        padding: 10px;
    }
    #pRealLeo:hover,
    #pMentionsLegales:hover {
        color: #ef5f23c4;
        font-size: 0.8em !important;
        font-weight: bold;
    }
    p {
        font-size: 0.9em;
    }
    .pFooter {
        font-size: 0.7em;
    }
    .h2Actu,
    .pActuSectionBoard {
        background: none;
        border-radius: 0;
        padding: 0;
    }
    .divSectionBoardActuGrp {
        background: #ef5f23c4;
        box-shadow: none;
    }

    #imgNavLogo:hover {
        scale: 1.05;
    }
    #displayWrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 80%;
    }
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ---------------------------------------- MEDIA QUERIES ---------------------------------------- */
/* ----------------------------------------- BIG-SCREEN ------------------------------------------ */
/* ----------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1300px) {
}
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* --------------------------------------------- END --------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------- */