* {
    /*la taille des elements inclus les margin et padding*/
box-sizing: border-box;}

@font-face {
    font-family: 'Times New Roman';
    src: local('Times New Roman Bold'), local('Times-New-Roman-Bold'),
        url('font/TimesNewRomanMTStd-Bold.woff2') format('woff2'),
        url('font/TimesNewRomanMTStd-Bold.woff') format('woff'),
        url('font/TimesNewRomanMTStd-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }

body 

{display: flex;
    flex-direction: column; justify-content: space-between; margin: 0; font-family: Arial; color: #000; font-size: 16px; height: 100vh; /*Pour voir agir justify-content sur la verticale, il 
faut donner une hauteur au body. vh (pour viewport height) permet de s'assurer que le body fera bien toute la hauteur de la surface d'affichage du navigateur*/}

header {background-color: #000; width: 100%; position: sticky; top:0; height: 50px; z-index:1;}
header a {text-decoration: none; color: white;}

#scrollUp {position: fixed; bottom : 10px; right: -100px; opacity: 0.5;}

/* menu */

	.sidenav {
		 height: 100%; /*100% Full-height 100% pour que le menu occupe toute la hauteur de l'ecran, si supprimé la hauteur s'arrête après le dernier lien*/
		width: 0; 	/*  a conserver sinon menu ouvert */
		position: fixed; /* Stay in place */
		top: 0;
		left: 0;
		background-color: #000; /* couleur du fond du menu*/
		overflow-x: hidden; /* Disable horizontal scroll */
		padding-top: 100px; /* Place content 60px from the top padding du menu initial 60*/
		}

	/* The navigation menu links */

	.sidenav a {
    padding: 10px 8px 10px 30px;
    text-decoration: none;
    font-size: 20px; /* si on augmente la taille il faut augmenter la largeur du menu dans le JS en bas de page pour que ça reste sur une ligne*/
    color: #fff; /* couleur des liens et de la croix */
    display: block;
}

/* When you mouse over the navigation links, change their color */

.sidenav a:hover, .offcanvas a:focus{
    color: red; /*couleur du hover au survol des lines du menu y compris de la croix de fermtutre*/
			  
			 
}

/* Position et style de la croix de fermeture du menu */

.sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 50px; /*initial 36px*/}

.topnav a {
    float: left; /* si supprimé le hamburger se colle au top*/
    padding: 10px 15px; /* autour du hamburger*/
}

/* Add a color to the active/current link */

.topnav a.active {  color: red;}

@media screen and (max-width: 450px) {
    .topnav a {padding: 10px 10px;}
}
.membre	 {color:#fff; padding:10px 20px;
	/*border: 2px solid yellow;}*/
	}
div.liste_c{display:flex; justify-content:space-between}

div.lig1 { width: 100%; height:0; padding-bottom:16%; position:relative; background-color: #fff;}
div.lig1_texte {position:absolute;	width:100%; height:100%; top:0; left:0; 
background:url('images/bandeau2.jpg') no-repeat; background-size:contain; 
display: flex; align-items: center; justify-content: center;}
	
h1 {color: #FFF; font-family: Times New Roman; letter-spacing: 3vw;
	/*font-size: clamp(3rem, 2vw, 1.2rem);*/
	font-size: clamp(14px, 12px + 5vw, 90px);
	/*border: 2px solid yellow;*/}

/*.majuscule {font-size:3.5vw;}*/

.majuscule {font-size:clamp(26px, 22px + 6vw, 98px)}

main {max-width: 1000px; margin-left: auto; margin-right: auto;  padding:100px 10px;}

p {line-height:150%; padding:0px 5px;}

.liens { color:#000;} /*mentions legales;*/
a:hover.liens {color:red; text-decoration: none;}

.lien { text-decoration: none; color:#000;}
a:hover.lien {color:red; text-decoration: none;}

h2 {text-align:center; color:red; font-size:20px; margin-top:-40px;}

.pagination {font-size:18px; text-align:center;}

table {
margin: auto;
vertical-align: middle;
}

table.liste { margin-top: 1em; border-collapse: collapse; border: 1px solid silver;}

td,th {
border-collapse: collapse;
border: 1px solid silver;
padding: 5px;
}

th {
border-color: black;
background-color: #84898F;
color: white;
}

th.liste {border-color: silver; background-color: #f7f7f3; color: black; text-align:left; }

th.table {border:0; border-left:1px solid silver; text-align:center; padding: 5px; background-color: #f7f7f3; color: #000; font-weight: 500;}
.tabletitreeve { width:25%; border:0; border-left:1px solid silver; text-align:center; padding: 5px; background-color: #f7f7f3; color: #000; font-weight: 500;}
.table_nom5 {width:15%; border:0; border-left:1px solid silver; text-align:center; padding: 5px; background-color: #f7f7f3; color: #000; font-weight: 500;  }
.table_nom4 {width:15%; border:0; border-left:1px solid silver; text-align:center; padding: 5px; background-color: #f7f7f3; color: #000; font-weight: 500;  }
.table_nom3 {width:15%; border:0; border-left:1px solid silver; text-align:center; padding: 5px; background-color: #f7f7f3; color: #000; font-weight: 500;  }
.table_nom2 {width:15%; border:0; border-left:1px solid silver; text-align:center; padding: 5px; background-color: #f7f7f3; color: #000; font-weight: 500;  }
.table_nom1 {width:15%; border:0; border-left:1px solid silver; text-align:center; padding: 5px; background-color: #f7f7f3; color: #000; font-weight: 500;  }

.classlistet1 {margin-top: 1em; border-collapse: collapse; border: 1px solid silver; font-size:100%;}
.classlistet2 {margin-top: 1em; border-collapse: collapse; border: 1px solid silver; font-size:100%;}
.classlistet3 {margin-top: 1em; border-collapse: collapse; border: 1px solid silver; font-size:100%;}
.classlistet4 {margin-top: 1em; border-collapse: collapse; border: 1px solid silver; font-size:100%;}
.classlistet5 {margin-top: 1em; border-collapse: collapse; border: 1px solid silver; font-size:100%;}


fieldset {max-width:600px; margin-left: auto; margin-right: auto; padding:20px 20px;} /* les formulaires*/
fieldset.rgpd {max-width:990px; margin-left: auto; margin-right: auto; }

table.contact {width:100%; margin-top: 1em; border: 0px; /*border-width: 2px; border-style: solid; border-color: green;*/}

td.contact,th.contact {

border: 0px; width:50%; 
padding: 2px;
}

.pagination {font-size:18px; text-align:center;}

footer{ background: #000; padding:30px 0px;}

div.flex_footer {display:flex; justify-content: center; width:100%;
/*border-width: 2px; border-style: solid; border-color: green; padding:20px;*/}

div.texte_footer { text-align:center; padding:0px 10px;
/*border-width: 2px; border-style: solid; border-color: red; */ }
.lien_footer{ text-decoration: none; color:#fff;}
a:hover.lien_footer {color:red; text-decoration: none;}


.nav-ul {
    display: flex;
	align-items: center;
    justify-content: center;
	margin: 0;
    padding: 0;
    list-style: none;
	/*border: 2px solid red;*/
}

.nav-ul a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
	height: 50px;
    font-size: 1rem;
	font-weight:bold;
}

.nav-ul a:hover {
    background-color: rgba(192, 127, 6, 0.4);
    border-radius: 5px;
    animation: flou 0.5s;
}



div.nav {text-align:center; margin-top:30px; padding-bottom:20px;}

.nav { color: #fff; font-size: 14px; text-decoration: none; text-align:center;}/* fin*/
a:hover.nav {color: red; text-decoration: none;}
.nav2 { color: #f8d306; font-size: 14px; text-decoration: none; text-align:center;}
a:hover.nav2 {color: #f8d306; text-decoration: none;}


.fond1 {background-color: #fff;} /* pour fond table index */
.fond2 {	background-color: #f7f7f3;}
.center {text-align:center;}

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

div.flex {display: block; justify-content: center; margin-top: 50px;}
img {max-width: 98%;}	 /*obligatoire ici*/

/*fin */
div.flex_footer {display:block;}
div.texte_footer {padding:10px;}



}

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

table {width:100%;}
td {padding: 3px 1px;}
th.table { padding: 3 1px; }
/*.table_nom5 {width:85px  }
.table_nom4 {width:100px  }
.table_nom3 {width:115px  }
.table_nom2 {width:130px  }
.table_nom1 {width:150px  }*/

.classlistet1 { font-size:100%;}
.classlistet2 {font-size:80%;}
.classlistet3 { font-size:66%;}
.classlistet4 { font-size:55%;}
.classlistet5 { font-size:43%;}

h2 { font-size:16px; margin-top:-60px; }

fieldset {max-width:99%; margin-left: auto; margin-right: auto; padding:20px 5px;}

.salle,.evenement,.organisateur {display:none;}

.nav-ul {
        position: fixed;
        top: 50px;
        left: -100%;
        width: 100%;
        height: 100%;
        flex-direction: column;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        background-color: rgba(0, 0, 0, 0.7);
        transition: transform 0.5s ease-out;
    }
    .slide {
        transform: translate(100%);
    }
    .nav-ul a {
        justify-content: left;
        padding-left: 5px;
        width: 100%;
        border-bottom: 1px solid rgba(192, 127, 6, 0.9);
    }
    .nav-ul a:hover {
        border-radius: 0;
        animation: none;
    }
div.j_n {width:100%; background-color: #FFF; color:#7d0c1c; margin-bottom:-30px;}
div.flex_menu {display:flex;  flex-wrap: wrap-reverse; }
div.menu { width:25%; }

.h3 { font-size: 18px; letter-spacing: 3pt; color: #7d0c1c; font-weight: bold; margin-left:30px;}


div.formulaire {max-width: 98%;}
div.contact_texte { width: 92%; }
.copy { margin-top:20px;}


}

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



div.menu { padding: 8px;}
.menu {font-size:15px; font-weight:bold;}

}

@keyframes flou {
    from {
        transform: translateX(-20px);
        filter: blur(2px);
    }
    to {
        transform: translateX(0);
        filter: blur(0);
    }