body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #000; /* Couleur de fond noire */
    color: #fff; /* Couleur de texte blanche pour contraste */
    font-family: Arial, sans-serif;
}

body {
  margin: 0;
  padding: 0;
 
  background-attachment: fixed;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  
  background: #424242;
  background: -moz-radial-gradient(center,ellipse cover,#424242 10%,#000 68%);
  background: -webkit-radial-gradient(center,ellipse cover,#424242 10%,#000 68%);
  background: radial-gradient(ellipse at center,#424242 10%,#000 68%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424242',endColorstr='#000000',GradientType=1 );
  color: #fff;
  font-family: unset;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
}

#app {
	position: absolute;
    top: 0;
    justify-content: center;
    align-items: center;
    height: 100%;
    opacity: 1;
    transition: opacity 1s ease-in-out;
    overflow: hidden;
    bottom: 0;
    right: 0;
	left:0px;
    display: block;
	margin: 0;
    padding: 0;

}


/* Classe pour rendre l'élément visible */
.visible {
    opacity: 1;
}

.fullscreen-event {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 1;
    bottom: 0;
    right: 0;
}


img {
	display:block;
	position: absolute;
    left: 6%;
    top: 6%;
    bottom: 6%;
    background-attachment: fixed;
    height: 88%;
    border: 1px solid #e5e4d5;
    box-shadow: 2px 2px 7px 7px #0000009e;
	opacity:1;
	transition-property: left, top, filter,transform, opacity ;
	transition-duration: 400ms;
	transition: opacity 0.3s linear 2s;
}

.texte {
    position: absolute;
    right: 6%;
    top: 2vh;
    bottom: 2vh;
    overflow: hidden;
    left: 45%;
    font-size: 22pt;
    margin: 13px;
    font-family: system-ui,p22-underground-pc,sans-serif;
    font-weight: 100;
    background-color: #000000cf;
    padding: 0px 48px;
    border-radius: 12px;
    backdrop-filter: blur(5px);
    padding-top: 4vh;
}

.countdown-event {
    text-align: center;
}

.slideshow-event {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 1;
    bottom: 0;
    right: 0;
	overflow:hidden;
}

.slideshow-event img {
	position:absolute;
	left:2vh;
	top:2vh;
	height:96vh;
    margin: 0px;
	padding:0px;
   /* object-fit: cover; /* Pour s'assurer que l'image couvre la hauteur sans être déformée */
	opacity:1;
}




h1 {
	font-size: 4vh;
}

p {
    font-size: 2.5vh;
}

.slideshow-event h1 {
    margin-top: 0;
		color:#FFF;
}

.slideshow-event p {
    margin-bottom: 0;
		color:#FFF;
}


/* Ajoutez des styles supplémentaires pour personnaliser l'affichage */