.section-hotspot {position: relative; background-color: #fff; padding: 3rem 2rem;}
.section-hotspot .bloc-left {border-radius: 0; margin-bottom: 30px; flex-direction: column;}
.section-hotspot h2 {margin: 0 0 15px;}

.bloc-hotspot .points-interet {position: absolute;top: 0; width: 100%;height: 100%;z-index: 999;max-width: 520px;}

.bloc-hotspot .point-interet.general {position: absolute; width: 2.6rem; height: 2.6rem; cursor: pointer; pointer-events: auto; border: 2px solid #fff; border-radius: 100%; }
.bloc-hotspot .point-interet.general::after {top: 4px; left: 4px; width: 14px; height: 14px; position: absolute; background-color: #fff; border-radius: 50%; animation: 2s pulse 300ms infinite;content: "+";font-weight: bold; display: flex; justify-content: center; color: #fff;}

.bloc-hotspot .point-interet.info {position: absolute; width: 2rem; height: 2rem; cursor: pointer; pointer-events: auto; border: 2px solid #fff; background-color: #fff;transform: translate(-70px, -8px); }
.bloc-hotspot .point-interet.info::after {top: -3px; left: -3px; width: 2.2rem; height: 2.2rem; position: absolute; animation: 2s pulse 300ms infinite; content: url(https://ellona.iwegodev.fr/wp-content/uploads/2024/06/motif-logo-ellona.svg); border-radius: 2px;}

.bloc-hotspot .point-interet.danger {position: absolute; width: 2.6rem; height: 2.6rem; cursor: pointer; pointer-events: auto; border: 2px solid rgb(192, 51, 51); border-radius: 100%; }
.bloc-hotspot .point-interet.danger::after {top: 4px; left: 4px; width: 14px; height: 14px; position: absolute; background-color: rgb(192, 51, 51); border-radius: 50%; animation: 2s pulse 300ms infinite;content: "+";font-weight: bold; display: flex; justify-content: center; color: #fff;}


.bloc-hotspot .point-interet:first-of-type::after { animation: 2s pulse 0ms infinite;}
.bloc-hotspot .point-interet:last-of-type::after { animation: 2s pulse 600ms infinite;}
.bloc-slider-hotspot {margin-bottom:  0 !important;}
.bloc-slider-hotspot .slick-track {display: flex;}

.bloc-hotspot-img {margin: auto;}
.bloc-hotspot-img img {object-fit: contain; height: 200px; }
/*.section-hotspot .bloc-right, .section-hotspot .bloc-right .slick-list {overflow: visible;}*/
.section-hotspot .bloc-right:not(.bloc-text), .section-hotspot .bloc-left:not(.bloc-text) {max-height: 100%;}
.section-hotspot .slick-list {overflow: visible;}

#dots-carrousel-hotspots .slick-dots {text-align: left; position: inherit;}
#dots-carrousel-hotspots .slick-dots li {width: initial; height: initial;}
#dots-carrousel-hotspots .slick-dots li button::before{opacity: 1; font-family: inherit; content: "Vue "; background:transparent; position:inherit; width:inherit; line-height:initial; color: var(--couleur-principale) !important; text-transform: uppercase;  }
#dots-carrousel-hotspots .slick-dots li button{display: block;  font-size: 12px; color: var(--couleur-principale);  height: initial; width: initial; padding: 0.5rem 1rem; border:2px solid var(--couleur-secondaire-light); border-radius: var(--border-radius);}
#dots-carrousel-hotspots .slick-dots li.slick-active button {background-color: var(--couleur-secondaire-light);}

.point-interet-txt h3 {margin: 0 0 8px; font-size: 1.6rem}
.point-interet-txt p {font-size: 14px; margin: 0;}
/*.point-interet-txt a {border: 1px solid var(--couleur-principale); background-color: var(--couleur-principale); font-size: 14px; display: inline-block; padding: 5px 10px; margin-top: 15px;}*/
/*.point-interet-txt a:hover {background-color: #fff; color: var(--couleur-secondaire);}*/


.description-point .toggle-full-text-hotspot{cursor: pointer;font-size: 1.5rem;display: inline-block;position: relative;vertical-align: middle; transition: font-weight 0.3s ease; }
.description-point .excerpt-hotspot{display: inline;font-size:1.2rem;}
.description-point .full-text-hotspot p{display: inline;font-size:1.2rem;}
.description-point .toggle-full-text-hotspot:hover{font-weight: bold;}


.point-interet-txt .lexique-term {font-size: 1.2rem;}
.point-interet-txt .lexique-term .lexique-tooltip {background: #fff; color: var(--couleur-principale); }
.lexique-tooltip a {color: var(--couleur-principale);text-decoration: none;}



@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
	}
	
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

.bloc-hotspot .point-interet-info { display: none; position: absolute; background-color: var(--couleur-secondaire-light); width: 250px; color: var(--couleur-principale); transform: translateX(calc(-50% + 10px)); margin-top: 10px;z-index: 999; border-radius: var(--border-radius) ;max-height: 300px !important;overflow-y: auto;}
.bloc-hotspot .point-interet-img {margin-bottom: 0;}
.bloc-hotspot .point-interet-img img {height: 175px; width: 100%; object-fit: cover;}
.bloc-hotspot .point-interet-txt {padding: 20px 25px;}
.bloc-hotspot .point-interet-info ul {padding-left: 2rem;}


@media (max-width: 768px) {

.bloc-hotspot .point-interet-info{left: 25px !important;transform: none;top: 0 !important;position: fixed; top:initial;}
.bloc-hotspot .point-interet-img img{height: 100px;}
.bloc-slider-hotspot {padding: 0;}

}


@media (min-width: 768px) {
	.section-hotspot {padding: 50px 40px; }
	.section-hotspot h2 {font-size: 2.5rem; line-height: 3rem;}
	.bloc-hotspot-img { max-width: max-content; height: 100%;}
	.bloc-hotspot-img img { height: 420px; }
	.bloc-slider-hotspot .bloc-hotspot {height: inherit;}
	.infographie-dechets .bloc-hotspot .point-interet-info {width: 45rem;}
	.section-hotspot .slick-list {overflow: hidden;}
	.bloc-hotspot .point-interet.info {width: 28px;height: 28px; transform: none; }
	.bloc-hotspot .point-interet.info::after {top: -3px; left: -3px; width: 30px; height: 30px;}
	.bloc-hotspot .point-interet.general {width: 28px;height: 28px; transform: none; }
	.bloc-hotspot .point-interet.general::after {top: 3px; left: 3px; width: 18px; height: 18px; background-color: #fff;}
	.bloc-hotspot .point-interet.danger {width: 28px;height: 28px; transform: none; }
	.bloc-hotspot .point-interet.danger::after {top: 3px; left: 3px; width: 18px; height: 18px; background-color: rgb(192, 51, 51); color: rgb(192, 51, 51);}


}

@media (min-width: 900px) {
	.section-hotspot {min-height: 30rem;}
	.section-hotspot .bloc-left {width:40%; margin-bottom: 0;}
	/*.section-hotspot .bloc-right {position: absolute; right: -40px; width: 60%; top: 0;}*/
	.section-hotspot .bloc-right:not(.bloc-text), .section-hotspot .bloc-left:not(.bloc-text) {max-height: none;}

}

@media (min-width: 1100px) {
	/*.section-hotspot .bloc-right {top: -25px; right: -70px;}*/
	.section-hotspot {column-gap: 6rem;}
	.section-hotspot .bloc-right .bloc-hotspot, .section-hotspot .bloc-right .slick-track, .section-hotspot .bloc-right .slick-list, .section-hotspot .bloc-right .bloc-slider-hotspot {height: 100%; max-height: 100%;}
	.section-hotspot .bloc-left, .section-hotspot .bloc-right {width: calc(50% - 30px);}
	.section-hotspot.border-radius {border-radius: var(--border-radius); }
}