/*  FONT  */
@font-face {
	font-family: 'Poppins';
	src: url("/public/css/fonts/Poppins-Light.ttf") format("truetype");
    font-size: 18px;
}
@font-face {
	font-family: 'Open Sans Condensed' ;
	src: url("/public/css/fonts/OpenSans-CondLight.ttf") format("truetype");
    font-size: 18px;
}
@font-face {
	font-family: 'Poppins-ExtraLight';
	src: url("/public/css/fonts/Poppins-ExtraLight.ttf") format("truetype");
    font-size: 18px;
}
@font-face {
	font-family: 'OpenSans-Light' ;
	src: url("/public/css/fonts/OpenSans-Light.ttf") format("truetype");
    font-size: 18px;
}
@font-face {
	font-family: 'Poppins-Thin';
	src: url("/public/css/fonts/Poppins-Thin.ttf") format("truetype");
    font-size: 18px;
}



body {
    margin:0;
    background-color: rgb(251, 206, 26);
    color:#000;
    font-size: 20px;
    font-family: 'OpenSans-Light';
}
/*
*{
    border:1px solid white;
    margin:0;
    padding:0;
}
*/
/* HEADER */
header {
    height:300px;
    background-image: url("../imagesABD/bandeau.png");
    background-position:center;
    background-size:contain;
    background-repeat: no-repeat;
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    margin: 0;
    font-family: 'arial';

}
.headerG{
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    
}
.headerD {
    width:35%;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items:flex-end;
}
.headerD p{
    font-size: 70px;
    color:rgb(240, 235, 235);
    text-align: center;
    margin-right: 10px;
}
#imMenuNav{display:none;margin:5px;background-color: rgba(63, 64, 66 , 0.7);}
.reseauxSociauxG{
    height:min-content;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
}
.reseauxSociauxG img{
    padding:4px;
    margin:10px;
    border-radius: 10px;
}
.reseauxSociauxG img:hover{
    background-color: rgba(150,150,150,0.5);
    width:42px;
}

@media screen and (max-width: 850px) {
    .headerD p{font-size: 55px; }
}
@media screen and (max-width: 750px) {
    #imMenuNav{display:inline-block;}
    nav{display:none;}
    .headerG{ 
        justify-content:space-between;       
    }
    .headerD{
        height:100%;
        justify-content: flex-end;
    }
}
@media screen and (max-width: 600px) {
    header{ align-items:flex-end;}
    .headerD {width:100%;margin: 0 10px 0px 0;align-items:flex-end;}
    .headerD p{font-size: 60px;text-align: right;margin:10px 0 10px 0;background-color: rgba(63, 64, 66 , 0.5);}
}
@media screen and (max-width: 400px) {
   
    .headerD p{font-size: 50px;text-align: right;margin:10px 0 10px 0;  }
    
}
@media screen and (max-width: 560px) {
    header {height:200px ;  }
}
@media screen and (max-width: 380px) {
    header {height:150px ;  }
}


/* NAV */ 
nav {
    margin:0;
    background-color: rgb(48, 46, 46);
    z-index: 3;
}
nav ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin:0;
    
}
nav li{
    list-style: none;
    color: rgb(240, 235, 235);
    font-size: 40px;
    margin:5px 0;
    font-family: "Open Sans Condensed";
}
.menuSouligne {
    background: linear-gradient(to top, rgb(240, 235, 235) 0%, rgb(240, 235, 235) 2px, transparent 10%) no-repeat left top / 0 100%;
    transition: background-size .5s;
    border-right:0px solid rgb(240, 235, 235);
}
nav a{
    text-decoration: none;
}
.menuSouligne:hover {
    background-size: 100% 100%;
    border-right:0px solid rgb(240, 235, 235);
}
#repere {
    background: linear-gradient(to top, rgb(240, 235, 235) 0%, rgb(240, 235, 235) 2px, transparent 10%) no-repeat left top / 100% 100%;
    transition: background-size .5s;
    border-right:0px solid rgb(240, 235, 235);
}
.ulSubMenu{
    position:absolute;
    width:max-content;
    display:none;
    background-color: rgb(48, 46, 46);   
    padding:10px 0 0 15px; 
    border-radius: 5px;
    z-index: 4;
}

.ulSubMenu li {
    padding: 5px;
    margin: 0 0 0 20px;
    list-style:square;
    font-size: smaller;
}
.ulSubMenu a {
    color:rgb(240, 235, 235);;
    width:100%;
}

.liSubMenu:hover .ulSubMenu{
    display:block;
}
@media screen and (max-width: 1000px) {
    nav li{font-size: 35px; }
}
@media screen and (max-width: 850px) {
    nav li{font-size: 30px; }
}
@media screen and (max-width: 750px) {
    nav {
        position:absolute;
        width:250px;
        height:revert;
        left:0;
        top:300px;
        margin:0;
    }
    nav ul{display:block;margin:2px;}
    nav li{
        padding:10px;
        font-size: 40px; 
    }
    #repere {
        background: linear-gradient(to top, rgb(240, 235, 235) 0%, rgb(240, 235, 235) 2px, transparent 10%) no-repeat left top / 0% 100%;
        transition: background-size .5s;
        border-right:0px solid rgb(240, 235, 235);
    }
}

/*  FOOTER */
footer{
    height:200px;
    background-color: #302e2e;
    color: rgb(240, 235, 235);
    font-size: x-large;
}
footer>div{
    text-align: center;
}

/*  GENERAUX */
legend {
    font-family: "Poppins-ExtraLight";
    font-size: 36px;
    text-transform:uppercase;
    color:black;
}
fieldset {
    margin:2%;
    border-radius: 10px;
    padding:0 5px 5px 10px;
    border-width: 0px;
    border-top: 1px solid #dac391;
}
.flexRow{
    display:flex;
    flex-direction: row;
}
.flexColumn{
    display:flex;
    flex-direction: column;
}
.flexAlignCenter{
    align-items: center;
}
.flexAlignStart{
    align-items:flex-start;
}
.flexJustifyStart{
    justify-content:flex-start;
}
.flexJustifySpace{
    justify-content:space-around;
}
.flexJustifySpaceBetween{
    justify-content:space-between;
}
.flexWrap{
    flex-wrap: wrap;
}
.margin0{
    margin:0px;
}
.margin20{
    margin:20px;
}
.margin10{
    margin:10px;
}
.margin20L{
    margin-left:20px;
}
.margin10L{
    margin-left:10px;
}
.margin20B{
    margin-bottom: 20px;
}