/*style de la page index*/

/*RESET*/

h1, h2, h3, h4, h5, h6, p, ul, li, a, ul li a *, ul li a *, div ul li a *, body, html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{  
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

ul li ul li *{
    text-decoration: none;
    color: grey;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, div {display: block;}

body {line-height: 1;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


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

/***CONDITIONS typo **************************************/

h1, h2, h3, h4, h5, h6, p, a{
    font-family: "Montserrat", sans-serif;
    font-size: grey;
}

#entete * h4{font-size: 15px;}
#entete * h1{font-size: 15px;}
#entete * h2{font-size: 15px;}
#entete ol * h2{font-size: 15px;}
#entete * h3{font-size: 10px;}
#entete * h5{}
#entete * h6{}

#menu * h4{font-size: 15px;}
#menu * h2{font-size: 15px;}
#menu * h3{font-size: 15px;}
#menu * h5{}
#menu * h6{}


ul.links-navbar li a h3{color: white;}

h1.titre{
    font-size: 2rem;
    color:white;
}





/***CONTENU **************************************/


header{
    position: relative;
    padding: 0 2rem;
    background-color: rgba(0, 0, 0, 0.238);
    height:;
}

.navbar{
    width: 100%;
    max-width: 1200px;
    height: ;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.links-navbar{
    display: flex;
    gap:  3rem;
}


ul.links-navbar li ul{padding: 5px;}


ul.links-navbar li ul li{
    padding: 5px;
    margin: 5px;
    background: white;
}

ul.links-navbar li ul li{display: none;}
ul.links-navbar li:hover ul li{display: block;}

ul.links-navbar li ul li:hover{
    border-bottom: lightblue solid 4px;
}

.navbar .burger-menu-button{
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
}

/* BURGER MENU************/



.burger-menu{
    display: none;
    width: 100%;
    height:0;
    position: absolute;
    right: 0rem;
    top:50px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    overflow: hidden;
    transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


.open{height: 100vh;}/*class ajouté avec du JS*/


.burger-menu li a{
    padding: 15px;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.links-burger-menu li ul li{display: none;}
ul.links-burger-menu li:hover ul li{display: block;}

ul.links-burger-menu li ul li:hover{
    border-bottom: lightblue solid 4px;
}
ul.links-burger-menu li a h3{
    color: white;
}
ul.links-burger-menu li ul li{
    padding: 5px;
    margin: 5px;
    background: white;
}



/**CONTENU***************************************/


#corps section{
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

section#descriptif{
    background: lightblue;
    width: 100%;
    padding: 50px;
}

#formulaire{
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    
}

form{
    width:  60%;
    padding: 15px;
    margin-top: 20px;
}

form input, form textarea{
    width: 100%;
    margin: 5px auto 5px auto;
    padding: 10px;
    border: solid 1px;
    border-radius: 5%;
    border-color: lightblue;
}

label h4{color: white;}

label.label h4{margin-top: 10px;}

form textarea{min-height: 150px;}
 
.titremessage h4{
    width: ;
    margin-bottom: 0px;
}

/***RESPONSIVE********************************************/

@media only screen and (max-width: 700px) {

.navbar .links-navbar, .sous-links-navbar{display: none;}
.navbar .burger-menu-button{display: block;}
.burger-menu{display: block;}

header{width: 100%;}

div.burger-menu-button{width: 100%;}

div.burger-menu-button *{justify-content: flex-end;}

section#descriptif{width: 80%;}


}