body, html {
  height: 100%;
  font-family: "Inconsolata", sans-serif;
  background-color: #1c1c1c
}

footer{
  /*background-color: #1c1c1c; géré par la couleur arriere plan body, le reste est dans un grand div*/
  color: #eeeeee;
}

.bgimg {
  background-position: center;
  background-size: cover;
  background-image: url("top.jpg");
  min-height: 75%;
  filter:  blur(0px) brightness(100%);
}

.site-title {
font-family: 'Kaushan Script', handwriting;
font-weight: 400;
line-height: 1.25;
color: #ffffff;
font-size:100px;
text-shadow: 10px 10px 10px #000;
}

.

.section-centre {
    display: flex;
    align-items: center;
}

.section-centre {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-img-centre {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Ajusté pour centrer verticalement */
    align-items: center; /* Ajouté pour centrer horizontalement */
    height: 100%; /* Assurer que la hauteur prend tout l'espace disponible */
}

.w3-row {
    display: flex;
}

.w3-half {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.filter-img {
    filter:  brightness(100%) grayscale(0%);
}

.section-title {
font-family: 'Kaushan Script', handwriting;
font-weight: 400;
line-height: 1.25;
color: #000000;
font-size:60px;
text-shadow: 5px 5px 5px #818181;
text-align: center;
margin-top: 1rem;
margin-bottom: 1rem;
}

.section-sub-title {
font-family: 'Kaushan Script', handwriting;
font-weight: 400;
line-height: 1.25;
color: #970000;
font-size:30px;
text-shadow: 5px 5px 5px #e0dfdf;
text-align: center;
margin-top: 10px;
margin-bottom: 15px;
}

.section-sub-sub-title {
    font-family: 'Kaushan Script', handwriting;
    text-shadow: 1px 1px 1px #818181;
    margin-top: 0px;
    font-size:25px;
    margin-bottom: 0px;
}

.menu {
  display: none;
}

.w3-container img {
    margin-top: 40px;
    margin-bottom: 40px;
    max-width: 100%;
    height: auto;
    filter: none;
}

.w3-sand {
    filter: none !important;
}

.bloc{
  background-color: #eeeeee;
  border-radius: 1rem;
  width: 30vw;
  max-width: 600px;
  min-width: 400px;
  margin: 2rem;
  padding: 0.5rem;
}

.bloc_large{
  background-color: #eeeeee;
  border-radius: 1rem;
  width: 80vw;
  max-width: 800px;
  min-width: 400px;
  margin: 1rem;
  padding: 1rem;
}

.evenements{
  padding-left: 10vw;
  padding-right: 10vw;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.²galerie{
  border-radius: 1rem;
  width: 100%;
  height: 500px;
  min-width: 300px;
  max-width: 500px;
  height: 500px;
	object-fit: cover;
  margin:1rem;
}

.lignegalerieimg{
  height: auto;
  width: 100%;
  margin: 1rem;
  padding: 1rem;
  height: 500px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

input[type="radio"]{position:absolute;left:-100vw}

label{cursor:pointer}


.slideshow {

display: grid;
overflow: hidden;
max-width: 500px;
border-radius: 0.75rem;
margin:3rem auto;

	}


.slideshow> * {

grid-area: 1/1;
}


.slideshow  ul {

list-style-type: none;
padding: 0;
margin: 0;
display: flex;

}


.slideshow  ul li{
flex: 0 0 100%;
transition: transform .4s;
will-change: transform
}

.slideshow  ul  li img {

/*aspect-ratio:3/2;
object-fit: cover;*/

width: 100%;
display: block;
height:auto;
user-select: none;
}


.slide_2:checked ~  ul > li{transform: translate3d(-100%,0,0)}
.slide_3:checked ~  ul > li{transform: translate3d(-200%,0,0)}
.slide_4:checked ~  ul > li {transform: translate3d(-300%,0,0)}



/******************fleches**************************/


.precedent{place-self: center left;	z-index: 1}
.suivant{place-self: center right; z-index: 1}



.slideshow > .precedent > label,
.slideshow > .suivant > label{
z-index: 1;
display: none;
background-color:hsl(0,0%,15%);
justify-content: center;
align-content: center

}

.slideshow > .precedent > label:after{content:'←'; z-index: 1}
.slideshow > .suivant > label:after{content:'→'; z-index: 1}

.slideshow > .precedent > label:after,
.slideshow > .suivant > label:after {
z-index: 1;
display: flex;
align-items: center;
font-size:2rem;
font-size:clamp(2rem, 2vw, 4rem);
color:hsl(0, 0%, 100%);

	}

	.slide_1:checked ~ .precedent > label.img4,
	.slide_1:checked ~ .suivant > label.img2,
	.slide_2:checked ~ .precedent > label.img1,
	.slide_2:checked ~ .suivant > label.img3,
	.slide_3:checked ~ .precedent > label.img2,
	.slide_3:checked ~ .suivant > label.img4,
	.slide_4:checked ~ .precedent > label.img3,
	.slide_4:checked ~ .suivant > label.img1{

  z-index: 1;
	display:flex;
	width:2rem;
	height:2rem;
	width:clamp(3rem, 8vw, 4rem);
	height:clamp(3rem, 8vw, 4rem);

		}


/***************************navigation puces bas********************************/
.puces {
z-index: 1;
display: flex;
gap: 1rem;
padding: 1rem;
place-self: end center;

	}

.puces label{
z-index: 1;

background-color: white;
border-radius: 50%;
width: 1rem;
height: 1rem;
width:clamp(1rem, 2vw, 1.5rem);
height:clamp(1rem, 2vw, 1.5rem);
	}

/********************simulation lien actif sur les puces******************************/


.slide_1:checked ~ .puces > label.img1> .actif_puces,
.slide_2:checked ~ .puces > label.img2 > .actif_puces,
.slide_3:checked ~ .puces > label.img3 > .actif_puces,
.slide_4:checked ~ .puces > label.img4 > .actif_puces{

border-radius: inherit;
display: flex;
height: inherit;
width: inherit;
background-color: black;

	}