section#pageContent {
background:var(--blanc) url("/download/images/vague_bas_presentation.png") bottom no-repeat;
background-size:100% 20px;
padding:50px 0 100px;
position:relative;
z-index:2;
}

section#pageContent:after {
z-index: 1000;
content: "";
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 100px;
background: url("/download/images/vague_bas_presentation.png");
background-size: 100% 100%;
animation: vague100px-inverse 10s infinite ease-in-out;
}


.vignetteCarousel {
height: 20vh; /* Fixe la hauteur du carousel */
overflow: hidden; /* Évite tout débordement */
}

.vignetteCarousel .carousel-inner {
height: 100%; /* Permet aux items d'occuper toute la hauteur */
}

.vignetteCarousel .carousel-item {
height: 100%; /* Assure que chaque slide prend toute la hauteur */
position: relative; /* Nécessaire pour que l'image s'y adapte */
}

.vignetteCarousel .carousel-item figure {
width:100%;
height:100%;
display:block;
position:relative;
}

.vignetteCarousel .carousel-item img {
width: 100%;
height: 100%;
object-fit: cover; /* Remplit le conteneur sans déformation */
object-position: center; /* Centre l’image */
}


#captionBox {
position:absolute;
top:0.5em;
bottom:0.5em;
left:0.5em;
right:0.5em;
background: rgba(0, 0, 0, 0.7);
padding: 1em 20%;
transition: background 0.3s ease-in-out, opacity 0.3s ease-in-out;
font-size:1.2em;
line-height:1.4em;
}


#captionBox.transparent {
background:rgba(0,0,0,0);
}

#captionBox #toggleCaption {
font-size:0.8em;
}
#captionBox #toggleCaption:hover {
box-shadow:none;
}


#galleryImage {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}

#galleryOverlay.show #galleryImage {
opacity: 1;
}

#galleryModal .modal-content {
background: rgba(0, 0, 0, 0.9); /* Fond semi-transparent */
}

#galleryImage {
opacity:1;
transition:opacity 0.3s ease-in-out;
max-height: 85vh; /* Évite que l'image soit trop grande */
object-fit: contain; /* Empêche la déformation */
}


#prevImage, #nextImage {
font-size: 2rem;
cursor: pointer;
transition: 0.3s;
opacity:0.8;
text-shadow:0 0 10px var(--noir);
}

#prevImage {
left: 10px;
}

#nextImage {
right: 10px;
}

.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
color: white;
cursor: pointer;
transition: background 0.3s;
}

.gallery-nav:hover {
background: rgba(0, 0, 0, 0.8);
}


.image-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
max-width:100%;
max-height: 80vh;
height:auto;
overflow: hidden;
}
.image-container .image-background {
max-width: 100%;
max-height: 80vh; /* S'assurer qu'elle prend toute la hauteur */
width: auto;
height: auto;
object-fit: contain;
border-radius:0 1em 1em 1em;
}
.overlay-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.overlay-svg rect {
fill: transparent;
stroke: var(--blanc);
stroke-width: 10;
cursor: pointer;
pointer-events: all;
transition: stroke 0.3s ease, box-shadow 0.3s ease;
animation: blink 1s ease-in-out infinite alternate-reverse both;
}
.overlay-svg rect:hover {
stroke-width: 20;
filter: drop-shadow(0px 0px 10px var(--blanc));
}


.legend-overlay {
position: absolute;
background:transparent;
color: white;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
display: none;
z-index: 10;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px;
cursor: pointer;
}
.legend-overlay-content {
max-width: 80%;
background: var(--couleur4);
padding: 15px;
border-radius: 0 1rem 1rem 1rem;
}
.legend-content {
display: none;
}

#legendContent h2 {
color:var(--couleur3);
margin:0 0 0.5em !important;
}

#legendContent p {
margin-bottom:0;
}

#legendContent .picto {
max-width:100px;
width:20%;
margin:0 auto;
display:block;
}


@media screen and (max-width:767px) {
#captionBox {
font-size:1.05em;
padding: 1em 15%;
}
#prevImage, #nextImage {
font-size: 1.5rem;
}
}

@media screen and (max-width:540px) {
#captionBox {
font-size:0.9em;
padding: 1em 10%;
}
#prevImage, #nextImage {
font-size: 1rem;
}
}

/* Pour les grands écrans (au-dessus de 1200px, comme lg et xl) */
@media (min-width: 1200px) {
.modal-xl {
max-width: 90%; /* Ajuste la largeur du modal */
}
}

/* Pour les écrans moyens (au-dessus de 768px, comme md) */
@media (min-width: 768px) and (max-width: 1199px) {
.modal-xl {
max-width: 80%; /* Ajuste la largeur du modal pour les écrans md */
}
.legend-overlay-content {
max-width: 90%;
}
}

/* Pour les petits écrans (inférieur à 768px, comme sm) */
@media (max-width: 767px) {
.modal-xl {
max-width: 95%; /* Ajuste la largeur du modal pour les petits écrans */
}
.legend-overlay-content {
max-width: 100%;
}
#legendContent h2 {
font-size:1.3em;
margin: 0 0 0.25em !important
}
#legendContent p {
line-height:1.1em;
}
}


.petit-cycle,
.grand-cycle {
position:relative;
}

.petit-cycle .copyright,
.grand-cycle .copyright {
padding: 2px 3px;
margin-right:0.5rem;
}


@media screen AND (max-width: 991px) {
section#pageContent:after {
height: 50px;
animation: vague50px-inverse 10s infinite ease-in-out;
}
.petit-cycle .copyright,
.grand-cycle .copyright {
font-size:0.5em;
margin-right:0;
}
}