/* Polices d'écriture */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');




/* Paramètres généraux */
* {
    font-size: 16px;
    font-family: "Inter";
    margin: 0;
    box-sizing: border-box;
    transition-duration: 0.4s;
    scroll-behavior: smooth;
}
body, html {
    background-color: whitesmoke;

    
}
body {
    -webkit-text-size-adjust:none;

}
html {
    overflow-x: hidden;

}

i.mobile-only, .mobile-only, #bouton-rdv-mobile, p.mobile-only {
    display: none;
}
/* couleur du texte surligné */
*::-moz-selection{
    background-color : rgba(116, 191, 79, 0.8);
    color : #fff
  }
  *::selection{
    background-color : rgba(117,191,79,0.8);
    color : #fff
  }


/* styles de texte */
h1.grand-titre {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    padding: 24px 0;

    color: #000000;

}

h2.titre-section {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    color: #000000;
    padding: 20px 0;
    padding-bottom:24px;

}
p.texte-normal {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 180%;
    padding-bottom:16px;
    color: #000000;
    padding-left:20px;
}
.texte-normal {
    font-size: 18px;
    line-height: 130%;


}
p.legende {
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    color: #595959;
}
h3.titre-soussection {
    font-family: 'Inter';
    font-weight: 600;
    font-size: 24px;
    color: #70BF4F;
    padding: 16px 0;
    /* padding-bottom:2px; */

}




/* Balises régulières */
a,b,i,span,sup,u {
    font-size: inherit;
    font-family: inherit;
}
sup {
    font-size: 12px;
}

/* liens */ 
a {
    color:rgb(117,191,79);
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-decoration: none;
}
a:hover {
    color:rgb(117,191,79);
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-decoration: underline;
}
a.lien-sans-style {
    text-decoration: none;
    color:inherit;
    font-size: inherit;
    font-size: inherit;
    font-weight: inherit;
}


/* images */
img {
    border-radius: 12px;
    max-width: 100%;
    margin:10px;
}


/* boutons */
button, a.bouton, input.bouton, div#menu-navigation-droite a.bouton {
    box-sizing: content-box;
    background-color: rgb(117,191,79);
    border-radius:8px;
    display:inline-block;
    height:unset;
    width: unset;
    padding: 12px 24px;
    color:white;
    margin: 0 8px;
    border:none;
    cursor: pointer;
    align-items: center;
    -webkit-appearance: unset;
    appearance: unset;
}

button:hover, a.bouton:hover, input.bouton:hover, div#menu-navigation-droite a.bouton:hover {
    background-color: rgb(125, 215, 80);
    border-radius:8px;
    /* display:block; */
    height:unset;
    width: unset;
    padding: 12px 24px;
    color:white;
    margin: 0 8px;
    /* box-shadow: rgb(143, 232, 99) 1px 1px 10px ; */
    text-decoration: none;
}
button:active, a.bouton:active, input.bouton:active, div#menu-navigation-droite a.bouton:active, button:focus, a.bouton:focus, input.bouton:focus, div#menu-navigation-droite a.bouton:focus {
    background-color: rgb(93, 149, 65);
    border-radius:8px;
    /* display:block; */
    height:unset;
    width: unset;
    padding: 12px 24px;
    color:white;
    margin: 0 8px;
    box-shadow: none;
}

/* boutons ADMIN */
button.admin, a.bouton.admin, input.bouton.admin, div#menu-navigation-droite a.bouton.admin {
    box-sizing: content-box;
    background-color: orange;
    border-radius:8px;
    display:inline;
    height:unset;
    width: unset;
    padding: 12px 24px;
    color:white;
    margin: 0 8px;
    border:none;
    cursor: pointer;
    align-items: center;
    -webkit-appearance: unset;
    appearance: unset;
}

button.admin:hover, a.bouton.admin:hover, input.bouton.admin:hover, div#menu-navigation-droite a.bouton.admin:hover {
    background-color: rgb(255, 191, 73);
    border-radius:8px;
    /* display:block; */
    height:unset;
    width: unset;
    padding: 12px 24px;
    color:white;
    margin: 0 8px;
    /* box-shadow: rgb(143, 232, 99) 1px 1px 10px ; */
    text-decoration: none;
}
button.admin:active, a.bouton.admin:active, input.bouton.admin:active, div#menu-navigation-droite a.bouton.admin:active, button.admin:focus, a.bouton.admin:focus, input.bouton.admin:focus, div#menu-navigation-droite a.bouton.admin:focus {
    background-color: darkorange;
    border-radius:8px;
    /* display:block; */
    height:unset;
    width: unset;
    padding: 12px 24px;
    color:white;
    margin: 0 8px;
    box-shadow: none;
}


/* input */
input[type='text'], input[type='password'], input[type="email"], textarea {
    padding: 4px;
    border-radius: 10px;
    border: solid 3px grey;
    width: 100%;
    font-size: 18px;
    margin: 8px 0;
    resize: none;
}





/* icones  */

.text-icon {
    font-size: inherit;
    color: inherit;
    padding: 0 8px;
}









    /* test animation */
    @keyframes grossir-logo {
        0% {
            transform: scale(1);
        }
        
        /* 40% {
            transform: scale(1.05);
        } */

        60% {
            transform: scale(1.1);
        }
        80% {
            transform: scale(1.08);
        }
        
        100% {
            transform: scale(1.07)

        }
    }










/* MENU DE NAVIGATION */

div#menu-navigation {
    position:-webkit-sticky;
    position:sticky;
    top:0px;
    width:100%;
    background-color: white;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    height:70px;
    padding-left: max(20px,env(safe-area-inset-left));
    padding-right: max(20px,env(safe-area-inset-right));
    align-items: center;
    box-shadow: 0px 10px 60px rgba(112, 191, 79, 0.15);
    z-index:10;

}

a#menu-navigation-gauche {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: left;
    min-width: 220px;
}
a#menu-navigation-gauche:hover img#menu-navigation-logo{
    animation-name: grossir-logo;
    animation-duration: 0.4s;
    transform: scale(1.05);
}

a#menu-navigation-gauche img#menu-navigation-logo {
    height: 50px;
    transition-duration: 0.2s;
}

a#menu-navigation-gauche div#menu-navigation-nom-site {
     display: flex;
     flex-direction:column;
     flex-wrap: nowrap;
}

a#menu-navigation-gauche div#menu-navigation-nom-site p#nom-site {
    font-size: 24px;
    font-weight: 700;
}
a#menu-navigation-gauche div#menu-navigation-nom-site p#nom-professionnel {
    font-size: 14px;
    font-weight: 300;
}


div#menu-navigation-droite {
    display: flex;
    justify-content: right;
    height: 100%;
    align-items: center;
}
div#menu-navigation-droite a {
    padding: 0 min(20px,2vw);
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
    color:inherit;
    font-weight: 500;
    font-size: 16px;
    border-top: solid 4px transparent;
    border-bottom: solid 4px transparent;
    text-align: center;

}
div#menu-navigation-droite a:hover {
    background-color:rgba(117,191,79,0.1)
}






/* mise en forme des pages */
#page-content {
    padding-left: max(env(safe-area-inset-left), 8vw); 
    padding-right: max(env(safe-area-inset-right), 8vw);
}
#page-content *,#article * {
    scroll-margin-top: 70px;

}
#article {
    width: 100%;
}



/* footer */
section#footer {
    background-color: rgb(117,191,79);
    color:white;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding-left: max(16px,env(safe-area-inset-left));
    padding-right: max(16px,env(safe-area-inset-right));
    padding-bottom: max(16px,env(safe-area-inset-top));
    /* padding-top: 16px; */
    text-align: center;
}
section#footer div#footer-flex {
    text-align: left;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:24px;
    padding-bottom: 24px;

}
section#footer div#footer-flex div {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex:1;
    min-width: min(250px, 100%);
}
section#footer div#footer-flex div#site-map {
    flex:2;
}
section#footer div#footer-flex div a.lien-sans-style{
    padding: 4px;
    margin:4px 0;
    font-size: 18px;
    font-weight:300;
}
section#footer div#footer-flex div a.lien-sans-style:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}



p#credits-site, p#titre-reseaux {
    font-size: 18px;
    font-weight: 600;
    padding: 12px 0;
}






/* AFFICHAGE POUR tablettes */
@media (max-width:1000px) {
    /* MENU DE NAVIGATION */

    div#menu-navigation {
        height:70px;
        padding-left: max(8px,env(safe-area-inset-left));
        padding-right: max(8px,env(safe-area-inset-right));
    }


    a#menu-navigation-gauche div#menu-navigation-nom-site p#nom-site {
        font-size: 24px;
        font-weight: 700;
    }
    a#menu-navigation-gauche div#menu-navigation-nom-site p#nom-professionnel {
        font-size: 14px;
        font-weight: 300;
    }


    div#menu-navigation-droite {
        display: flex;
        justify-content: right;
        height: 100%;
        align-items: center;
    }
    div#menu-navigation-droite a {
        padding: 0 8px;
        font-size: 16px;

   }


}




/* AFFICHAGE POUR LES MOBILES */
@media (max-width:900px) {
    /* general */
    * {
        /* font-size: 14px; */
    }

    /* mise en forme des pages */
    #page-content {
        padding-left: max(env(safe-area-inset-left), 20px); 
        padding-right: max(env(safe-area-inset-right), 20px);
    }


    .mobile-only, i.mobile-only, #bouton-rdv-mobile {
        display: unset;
    }
    i.computer-only, .computer-only, p.computer-only {
        display: none;
    }
    h1.grand-titre {
        font-size: 30px;
    }
    h2.titre-section {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        color: #000000;
        padding: 20px 0;
        padding-bottom:16px;
    
    }
    p.texte-normal {
        font-size: 18px;
        padding-bottom:16px;
        line-height:180%;
        padding-left:unset;
    }
    .texte-normal {
        font-size: 18px;
        line-height:180%;


    }

    /* test animation */
    @keyframes ouvrir-menu {
        0% {
            visibility: hidden;
            /* bottom: calc(100%-70px); */
            height: 0;
            padding: 0 20px;
            border-bottom-left-radius: 0px;
            overflow:hidden
        }
      
        100% {
            height:361.6px;
            visibility: visible;
            /* max-height: calc(100vh - 70px); */
            /* overflow: auto; */
            box-shadow: 0px 40px 40px rgb(112 191 79 / 15%);
            border-bottom-left-radius: 64px;
            overflow:hidden;
            padding:40px 20px;

        }
    }
    @keyframes fermer-menu {
        0% {
            height:361.6px;
            visibility: visible;
            /* max-height: calc(100vh - 70px); */
            /* overflow: auto; */
            box-shadow: 0px 40px 40px rgb(112 191 79 / 15%);
            border-bottom-left-radius: 64px;
            overflow:hidden;
            padding:40px 20px;

        }        

        100% {
            visibility: hidden;
            /* bottom: calc(100%-70px); */
            height: 0px;
            padding: 0 20px;
            box-shadow: 0px 40px 40px rgb(112 191 79 / 0%);

            border-bottom-left-radius: 0px;
            overflow:hidden
        }
      

    }

    /* MENU DE NAVIGATION */
    i#bouton-menu-hamburger {
        font-size: 30px;
        min-width:50px;
        cursor: pointer;
    }

    a#menu-navigation-gauche img#menu-navigation-logo {
        height: 40px;
    }
    div#menu-navigation {
        height:70px;
        padding-left: max(8px,env(safe-area-inset-left));
        padding-right: max(8px,env(safe-area-inset-right));
    }
    a#menu-navigation-gauche {
        min-width: unset;
        flex: 1;
    }
    div#menu-navigation div.mobile-only a.bouton  {
        font-size: 14px;
        padding: 8px 8px;
    }

    a#menu-navigation-gauche div#menu-navigation-nom-site p#nom-site {
        font-size: 20px;
        font-weight: 700;
    }
    a#menu-navigation-gauche div#menu-navigation-nom-site p#nom-professionnel {
        display: none;
    }


    div#menu-navigation-droite {
        position: absolute;
        top:70px;
        right: 0px;
        width: 100%;
        height: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        height: 100vh;
        padding:40px 20px;
        /* padding-bottom: calc(70px + 40px); */
        background-color: white;
        color: black;
        justify-content:unset;
        /* align-content:space-around; */
        align-items:start;
        border-top: solid rgb(117,191,79) 2px;
        overflow:auto;
        transition-duration: 0s;
        visibility: hidden;
        height: 0;
        /* padding: 0 20px; */
    }
    div#menu-navigation-droite a {
        padding: 8px;
        /* margin:16px 0; */
        height: unset;
        font-size:20px;

   }
   div#menu-navigation-droite a.bouton {
        align-self: center;
        margin: 20px 0;
   }
    div#menu-navigation-droite.ferme {
        animation-duration: 0.5s;
        animation-name: fermer-menu;
        transition-duration: 0s;
        visibility: hidden;
        /* bottom: calc(100%-70px); */
        height: 0;
        padding: 0 20px;

    }    
    div#menu-navigation-droite.ouvert {
        animation-duration: 0.5s;
        animation-name: ouvrir-menu;
        /* top: 70px; */
        transition-duration: 0s;
        height:unset;
        visibility: visible;
        max-height: calc(100vh - 70px);
        overflow: auto;
        box-shadow: 0px 40px 40px rgb(112 191 79 / 15%);
        border-bottom-left-radius: 64px;
    }




}



/* AFFICHAGE POUR LES TOUUUUT PETITS ECRANS */
@media (max-width:300px) {
    div#menu-navigation div.mobile-only a.bouton {
        display: none;
    }
    span#span-nav-menu {
        display: none;
    }
}