@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

body {
    background-size: cover;
    background-position: center;
    height: 100vh; 
}


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 20px 5%; */
    box-shadow: rgba(0,0,0,0.1) 0 0 10px;
    background-color: #cfd0d2;
/*	margin-top:-17px; /* pas trouvé pourqoui bande au dessus */
  
}

.menu {
	font-size:1.3em;
	background-color:#d1d1d1; 
	padding-right:50px;
}


.logo {
    font-size: 45px;
}
ul {

    list-style: none;
    display: flex;
}
ul li {
    margin: 0 10px;
}

ul li ul{  /* effacer les ssmenus */
display:none;	/*pour faire apparaitre pour eglages*/
}

li:hover ul { /*ajoute pour ssmenus */
 display:block;
  background-color:#cfd0d2;
 }
li:hover ul li { /*ajoute pour ssmenus */
 float:none;
 /* background-color:blue; */
 }
li ul { /*ajoute pour ssmenus */
 position:absolute;
 }

li a {
    text-decoration: none;
   color: rgb(87, 87, 87);
    font-weight: bold;
    padding: 2px 2px;
    transition: 0.5s;
    border-radius: 3px;
	border: 1px #938f8ff0 solid;
	width: auto;
	display: inline-block;
	text-align: center;
}

li a:hover {
    background-color:grey;
    /* color: black; */
	color: white;
	/* margin:1px; */
}


.petite, .petitev, .grande, .grandev {
    cursor: pointer;
	z-index:50;
}

.grande, .grandev {
    position: fixed;
    top: 15px; /*etait -80 */
    left: 0;
    width: 100vw;
    /* height: 100vh; */
	height: auto;

    /*background-color: rgba(0, 0, 0, 0.08);*/
    display: none;
    align-items: center;
    justify-content: center;
}

.grande img {
   /* width: 100%; /*etait 65 */ */
    border: 2px white solid;
   /* border-radius: 5px; */
    height:650px; /*pour limiter l'affichage des photos récupérées sur site FPF suite concours interne*/ */
}

.grandev img {
   /* width: 100%; /*etait 65 */ 
    width: auto;

    border: 2px white solid;
   /* border-radius: 5px; */
    height:650px; /*pour limiter l'affichage des photos récupérées sur site FPF suite concours interne*/ */
}






@media screen and (max-width: 1025px) {
    body {
        position: relative;
    }

    ul {
        flex-direction: column;
        position: absolute;
        top: 0;
        left: -1500px;
        /* height: 100vh; */
        /* width: 100%; */
        display: flex;
        align-items: center;
        /* justify-content: center; */
        /* background-color: rgba(255, 255, 255, 0.8); */
        transition: 0.5s;
        backdrop-filter: blur(8px);
        
    }
    ul li {
        margin: 10px 0;
    }
	
    ul li a{
        text-transform: uppercase;
    }
	
    ul li a:hover{
        color: black;
		background-image: linear-gradient(#908c75, #d8d1ab);
    }
	
	li liste-items:hover {
				/* background-image: linear-gradient(#908c75, #d8d1ab); */

	}

/* ul li ul li a { */
	        /* color: color:red; */
			/* right:200px; */
			/* display:block; */
/* } */
	
ul li ul{  /* effacer les ssmenus */
/* display:none;	 */
display:block;
}

ul li:hover ul { /*ajoute pour ssmenus */
 display:block;
 color:blue;
 }
li:hover ul li { /*ajoute pour ssmenus */
 float:none;
 }
li ul { /*ajoute pour ssmenus */
 position:absolute;
 }
 

	
	
#global {
min-height:1400px;
height:100%;
}	


table{' /* pour présentation table adhérent */
background-color:red;
}

	
	
#photomois img {
width:100%; /*pour adapter img au contenant */
max-height:500px;
}	

#photosemaine img {
/* width:100%; /*pour adapter img au contenant */
}	

.menu {
	width:100%;
	/* height:100%; /*prendre toute la hauteur*/
	/* background-color:blue; */
	top:153px;
	height:600px ;
}

.grande, .grandev {
    position: fixed;
    /* top: 175px; */
 }

.grande img {
width:100%; /*pour adapter img au contenant */
height:auto;
	
}

.grandev img {
   /* width: 100%; /*etait 65 */ 
    width: auto;

    border: 2px white solid;
   /* border-radius: 5px; */
    height:500px; /*pour limiter l'affichage des photos récupérées sur site FPF suite concours interne*/ */
}
	
    .button{
        z-index: 100;
        width: 50px;
        height: 50px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .button::after{
        content: "";
        position: absolute;
        width: 35px;
        height: 2px;
        background-color: #000;
        transform: translateY(-10px);
        box-shadow: 0 10px 0 #000 ;
        transition: 0.5s;
    }
    .button.active::after{
        transform: rotate(45deg);
        box-shadow: 0 0 0 #000 ;
    }
    .button::before{
        content: "";
        position: absolute;
        width: 35px;
        height: 2px;
        background-color: #000;
        transform: translateY(10px);
        transition: 0.5s;
    }
    .button.active::before{
        transform: rotate(-45deg);
    }
    ul.active {
        left :0 ;
    }
   
	.infobar {
	top:600px; /* pour placer info bar sous image diminuée*/
	}
    
	
	
	
	
	.items {
    height: 50px; /*hauteur item*/
    /* width: 100%; */
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
	/* background-image: linear-gradient(#908c75, #d8d1ab); */
}
.items:nth-child(1) {
    /* height: 100px; */
}
.icone {
    width: 30px;
}
.txt-liste {
    color: #fff;
    margin-top: 10px;
}

/* sous liste */

.sous-liste {
    position: relative;
    height: auto;
    width: 150px;
   left:50px; 
	background: rgb(30,30,30);
    list-style-type: none;
    color: #f1f1f1;
    display: none;
}

ul sous-liste li a{
	background-image: linear-gradient(#908c75, #d8d1ab);
	
}
.titre-sous-liste {
    text-align: center;
    font-size: 18px;
    /* padding-bottom: 40px; */
}
.t1 {
    color: violet;
}
.t2 {
    color: lightblue;
}
.t3 {
    color: lightseagreen;
}
.t4 {
    color: antiquewhite;
}
.t5 {
    color: orangered;
}
.liste-items {
    font-size: 13px;

/*     margin: 1px 0;
    text-align: center;
 */
 }

.items:hover > ul {
    /* display: block; */
}
	
	

}