@font-face{
	font-family:"Sherman";
	src:  url('police/Sherman-Display.ttf')  format('truetype');
}


/* LAYOUT PROPERTIES*/ 
body{
    background-color: none;
    margin: 0px;
    height: auto;
    font-size: 0.85vmax;
}

layout{
    margin: 0px;
    display: grid;
    grid-template-columns: 15vw 1fr; 
    grid-template-rows: auto auto; 
    min-height: 100vh;
}

.bgimage{
    grid-area: 1 / 2 / 2 / 3;
    z-index: -1;
    width: auto;
    background-color: black;
    background-image: url(background/BackgroundWebAMUA.png);
    background-size:100%;
    background-repeat: repeat-y;
}

.bgimage::before { 
    grid-area: 1 / 2 / 2 / 3;
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
}


.menu-toggle{
    display: none;
}

#menu{
    position: sticky;
    top: 0;
    height: 100vh; /* Toujours la hauteur de la fenêtre */
    overflow-y: auto; /* Active le scroll uniquement sur le menu */
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(18,18,13,0.99);
    font-family:"Sherman";
    font-size:1.7vmax;
	letter-spacing: 1px;
    overflow: hidden;
}

#contenu{
    grid-area: 1 / 2 / 2 / 3;
    overflow-x: hidden;
    margin : 50px 0vw;
    display: flex;
    flex-direction: column;
    height: fit-content;
}

.footer{
    grid-area: 2 / 2 / 3 / 3;
    background: url(background/background_noise_white.png);
    height: 20vh; /* Hauteur fixe */
    max-height: 10vw;
    overflow: hidden;
    padding: 0.5%;
    display: block;
    justify-content: center;
    align-items: center;
}

#img_footer{
	max-width:20%;
    max-height:60%;

}

.p_footer{
    height: 100%;
    width: 100%;
	margin: initial;
    text-align: center;
    align-content: center;
}



#menu, #contenu, .footer {
    box-sizing: border-box; /* S'assure que les bordures et padding ne causent pas de débordement */
}

#logo_img{
    width: 100%;
    max-height: 30%;
    display: block;
    object-fit: contain;
    padding-top: 5%;
    padding-bottom: 5%;
}

#divmenu{
    text-align: center;
    align-content: center;
    width: 100%;
    min-height: 6%;
    /*padding:5px;*/
    color:gray;
    text-decoration:none;
    border: solid transparent;
	border-width:1px;
    transition: 0.25s cubic-bezier(.76,.7,.6,1.02);
}
#divmenu:hover{
    color:white;
    border:solid;
    padding-top: -1px;
	padding-bottom: -1px;
    border-width:1px;
}

#cont_reseau{
    width: 100%;
    max-height: 4.5%;
    object-fit: contain;
    margin-top: 6%;
    margin-bottom: 5%;
    
    display: flex;
    justify-content: center;
}

#cont_reseau > #img_reseau{
    max-width: 50%;
    max-height: 100%;
    object-fit: contain;
    filter: saturate(60%);
    transition: 0.25s cubic-bezier(.76,.7,.6,1.02);
}
#cont_reseau > #img_reseau:hover{
    transform: scale(1.15);
	filter: unset;
}
  
 
  

h1
{
	font-family:"Sherman";
	letter-spacing: 0.1vmax;
	word-spacing: 0.1vmax;
	font-size: 1.7vmax;
	margin:unset;
}
h2
{
	font-family:"Sherman";
	letter-spacing: 0.1vmax;
	word-spacing: 0.1vmax;
	font-size: 1.2vw;
	margin:unset;
}

p
{
	font-family: 'Oswald', sans-serif;
	font-size: 0.85vmax;
	letter-spacing: 0px;
	word-spacing: 0px;
	font-weight:bolder;
	text-decoration: none;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
}

.paragraphe > p {
	text-align: justify;
}

img 
{
  vertical-align: middle;
}

table{
	width: 100%;
	border-collapse: collapse;
	border-radius: 1px;
    overflow: scroll;
}

th, td {
	font-family: Arial, sans-serif;
	padding: 5px;
	text-align: left;
	
  }

th{
	background-color:rgb(172, 169, 165);
}

tr{
	border-bottom: #474747;
	border-top: none;	
	background-color:rgb(245, 226, 199);
}

tr:nth-child(even){
	background-color:rgb(241, 237, 230);
}

#contenu > .divcontenu
{
    margin-top: 2%;
    min-height: 25%;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    box-shadow: 4px 4px 4px rgb(26, 25, 25);
	transition: 1s;
	-webkit-font-smoothing: subpixel-antialiased;
	backface-visibility: hidden;
    overflow: hidden;
}

#contenu > .divcontenu_vert{
	margin-top: 2%;
    min-height: 25%;
    display: flex;
    flex-direction:column;
    justify-content: stretch;
    box-shadow: 4px 4px 4px rgb(26, 25, 25);
	transition: 1s;
	backface-visibility: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
}

.no_zoom{
	transform:none !important; 
}

.wrap{
	flex-wrap: wrap;	
}

#contenu > .colonne{
	flex-direction:column;
}

.wrap > .paragraphe{
	display: flex;
    flex-direction: column;
    overflow-wrap: break-word;
	margin-bottom: 1%;
	margin-top: 1%;
	margin-right: 1%;
	margin-left: 1%;
    padding-bottom: 4%;
	padding-top: 4%;
	padding-right: 4%;
	padding-left: 4%;
	max-width: 40%;
	flex: 1 1 auto;
}
.paragraphe{
	display: flex;
    flex-direction: column;
	justify-content: center;
    overflow-wrap: break-word;
    padding-bottom: 4%;
	padding-left: 4%;
	padding-top: 4%;
	padding-right: 4%;
	flex: 1 1 auto;
    overflow: hidden;
}

date{
	font-family:"Sherman";
	letter-spacing: 0.08vmax;
	word-spacing: 0.08vmax;
	text-decoration: overline underline cadetblue;
	font-size: 1.4vmax;;
	margin:unset;
}

.video{
	aspect-ratio: 16/9;
	min-width: 50%;
	max-height: 350px;
	max-width: 520px;
}

.image{
	max-width:50%;	
	max-height: 50vh;	
}

#img_footer{
	width:18%;
}

select{
	border: 1px solid var(--select-border);
	border-radius: 0.25em;
	padding: 0.25em 0.5em;
	font: caption;
	font-weight: bold;
	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}

.paragraphe > button{
	margin-top: 8px;
	margin-bottom: 8px;
	margin-right: 10px;
	font-family: 'Oswald', sans-serif;
	font-size: 0.85vmax;
	font-weight: bold;
    cursor: pointer;
	color: rgb(0, 0, 0);
	border-style: solid;
	border-width: 1px;
	background-color:beige;
	box-shadow: 5px 5px 0px 0px;
	width:max-content; 
	padding: 10px 20px;
	text-decoration: unset;
	transition: background-color 0.3s, box-shadow 0.3s, border-width 0.3s   , color 0.3s ;
	border-radius: 3px;
}

.paragraphe > button:hover{
	box-shadow: -5px -5px 0px 0px;	
	color: #474747 ;
}

.youtube-button{
	margin-top: 8px;
	margin-bottom: 8px;	
	margin-right: 10px;
	font-family: 'Oswald', sans-serif;
	font-size: 0.85vmax;
	font-weight: bold;
    cursor: pointer;
	color: rgb(0, 0, 0);
	border-style: solid;
	border-width: 1px;
	background-color:#fd8080;
	box-shadow: 5px 5px 0px 0px;
	width:max-content; 
	padding: 10px 20px;
	text-decoration: unset;
	transition: background-color 0.3s, box-shadow 0.3s, border-width 0.3s   , color 0.3s ;
	border-radius: 3px;
}

.youtube-button:hover{
	box-shadow: -5px -5px 0px 0px;	
	background-color: beige;
	color: #fd8080;
}


.discord-button {
	margin-top: 8px;
	margin-bottom: 8px;
	margin-right: 10px;
	font-family: 'Oswald', sans-serif;
	font-size: 0.85vmax;
	font-weight: bold;
    cursor: pointer;
	color: rgb(0, 0, 0);
	border-style: solid;
	border-width: 1px;
	background-color:beige;
	box-shadow: 5px 5px 0px 0px;
	width:max-content; 
	padding: 10px 20px;
	text-decoration: unset;
	transition: background-color 0.3s, box-shadow 0.3s, border-width 0.3s   , color 0.3s ;
	border-radius: 3px;
  }

  .general-button {
	margin-top: 8px;
	margin-bottom: 8px;
	margin-right: 10px;
	font-family: 'Oswald', sans-serif;
	font-size: 0.85vmax;
	font-weight: bold;
    cursor: pointer;
	color: rgb(0, 0, 0);
	border-style: solid;
	border-width: 1px;
	background-color:beige;
	box-shadow: 5px 5px 0px 0px;
	width:max-content; 
	padding: 10px 20px;
	text-decoration: unset;
	transition: background-color 0.3s, box-shadow 0.3s, border-width 0.3s   , color 0.3s ;
	border-radius: 3px;
  }

  .general-button:hover {
	box-shadow: -5px -5px 0px 0px;	
	color: #474747 ;
  }

  .discord-button:hover {
	box-shadow: -5px -5px 0px 0px;	
    color: #7289DA;
  }

  .google-forms-button {
	margin-top: 8px;
	margin-bottom: 8px;
	margin-right: 10px;
	font-family: 'Oswald', sans-serif;
	font-size: 0.85vmax;
	font-weight: bold;
    cursor: pointer;
	color: rgb(0, 0, 0);
	border-style: solid;
	border-width: 1px;
	background-color:beige;
	box-shadow: 5px 5px 0px 0px;
	width:max-content; 
	padding: 10px 20px;
	text-decoration: unset;
	transition: background-color 0.3s, box-shadow 0.3s, border-width 0.3s   , color 0.3s ;
	border-radius: 3px;
  }

  .google-forms-button:hover {
	box-shadow: -5px -5px 0px 0px;	
	color: #b983ce;
  }


  .FondNoir{
	background-color:rgba(18,18,13,1);
	color:white;
}
.FondBlanc{
	background:url(background/background_noise_white.png) repeat; 
	background-size: 100px;
	color : rgb(25, 26, 22);
	
}
.FondBlanc2{
	background:url(background/FondBlanc.jpeg) repeat; 
	color : rgb(25, 26, 22)
}
.FondRose{
	background:url(background/background_noise_pink.png) repeat; 
	background-size: 100px;
	color : rgb(25, 26, 22)
}
.FondMarron{
	background:url(background/background_noise_brown.png); 
	background-size: 100px;
	color:rgb(25, 26, 22)
}

.FondVert{
	background:url(background/background_noise_green.png) repeat; 
	background-size: 100px;
	color:rgb(25, 26, 22)
}

.FondJaune{
	background:url(background/background_noise_yellow.png) repeat; 
	background-size: 100px;
	color:rgb(25, 26, 22)
}

.FondTransparant{
	background-color: rgba(0,0,0,0);
}

.VignetteBlanc{
	background:url(background/background_noise_white.png) repeat; 
	background-size: 100px;
	color : rgba(18,18,13,1);
	box-shadow: 2px 3px 3px rgb(26, 25, 25);
	justify-content:flex-start;
}

.VignetteBlanc>img{
	max-width: 100%;
}


.left{
	margin-right: 15%;  /*15*/
    margin-left: 5%; 	/*5*/
    width: 80%;			/*80*/
	
}
.right{
	margin-left: 15%;
    margin-right: 5%;
    width: 80%;
}
.middle{
	margin-left: 10%;
    margin-right: 10%;
    width: 80%;
}


.slideshow-container {
	position: relative;
	margin: auto;
	max-width: 75%;
	box-shadow: 4px 4px 4px rgb(26, 25, 25);
}

.mySlides {
	display: none;
}

.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}

@keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}

.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

.text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom	: 8px;
	width: 100%;
	text-align: center;
	text-shadow: 2px 2px 2px #1d1d1d;
}

.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
}