#overview {
	 margin-inline: auto;
}
 #overview h2 {
	 text-transform: capitalize;
	 letter-spacing: 0.025em;
	 font-size: clamp(2rem, 2.5625rem, 2.6rem);
}
 #overview a {
	 display: inline-block;
	 text-decoration: none;
}

#overview .container-card {
  margin-top: auto;
  margin-bottom: auto;
  opacity: 1;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#overview .container-card .card {
  background-color: var(--clr-btn);
  border-radius: 1.25rem;
  padding: 15px;
  color: white;
  width: 25rem;
}

 #overview .container-card .card ul {
	 margin: 0;
	 padding: 0;
	 list-style-type: none;
	 display: flex;
	 align-items: center;
	 flex-wrap: wrap;
	 gap: 0.625rem;
}
 #overview .container-card .card ul li {
	 text-transform: uppercase;
	 background: var(--clr-tag);
	 color: #282828;
	 font-weight: 700;
	 font-size: 0.8rem;
	 padding: 0.375rem 0.625rem;
	 border-radius: 0.188rem;
}
 #overview .container-card .card ul .Event {
	 color: #c0e4ff;
}
 #overview .container-card .card ul .Grow {
	 color: #D9B061;
}
 #overview .container-card .card ul .CBD {
	 color: #4A6000;
}
 #overview .container-card .card ul .Parafernalia {
	 color: #68593D;
}
 #overview .container-card .card .content {
	 padding: 0.938rem 0.625rem;
	 padding-bottom: 0;
}
 #overview .container-card .card .content h3 {
	 text-transform: capitalize;
	 color: white;
	 font-size: clamp(1.5rem, 1.8273rem, 1.8rem);
	 margin: 0!important;
	 font-weight: 500!important;
}
 #overview .container-card .card .content p {
	 margin: 0.625rem 0 1.25rem;
	 color: #ffffffd6;
}
 #overview .container-card .card-inner {
	 position: relative;
	 height: 18.75rem;
	 background: white;
	 border-radius: 1.25rem;
	 border-bottom-right-radius: 0;
	 overflow: hidden;
}
 #overview .container-card .card-inner .box {
	 width: 100%;
	 height: 100%;
	 background: #fff;
	 border-radius: 1.25rem;
	 overflow: hidden;
}
 #overview .container-card .card-inner .box .imgBox {
	 position: absolute;
	 inset: 0;
	 display: flex;
}
 #overview .container-card .card-inner .box .imgBox img {
	 width: 100%;
	 height: 100%;
	 object-fit: contain;
}
 #overview .container-card .card-inner .box .icon {
	 position: absolute;
	 bottom: -0.375rem;
	 right: -0.375rem;
	 width: 6rem;
	 height: 6rem;
	 background: var(--clr-btn);
	 border-top-left-radius: 50%;
}
 #overview .container-card .card-inner .box .icon:hover .iconBox {
	 transform: scale(1.1);
}
 #overview .container-card .card-inner .box .icon::before {
	 position: absolute;
	 content: "";
	 bottom: 0.375rem;
	 left: -1.25rem;
	 background: transparent;
	 width: 1.25rem;
	 height: 1.25rem;
	 border-bottom-right-radius: 1.25rem;
	 box-shadow: 0.313rem 0.313rem 0 0.313rem var(--clr-btn);
}
 #overview .container-card .card-inner .box .icon::after {
	 position: absolute;
	 content: "";
	 top: -1.25rem;
	 right: 0.375rem;
	 background: transparent;
	 width: 1.25rem;
	 height: 1.25rem;
	 border-bottom-right-radius: 1.25rem;
	 box-shadow: 0.313rem 0.313rem 0 0.313rem var(--clr-btn);
}
 #overview .container-card .card-inner .box .icon .iconBox {
	 position: absolute;
	 inset: 0.625rem;
	 background: #fff;
	 border-radius: 50%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 transition: 0.3s;
}
 #overview .container-card .card-inner .box .icon .iconBox span {
	 color: var(--clr-btn);
	 transform: scale(1.2);
}

.black-text{
	color: black!important;
}
.disp_none{
	display: none;
}



/*======================== SVG CSS ====================================*/
#overview svg{
    height: 50vh;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

#overview svg #Calque_Map {
	transition: ease 0.6s;
}
#overview svg #Calque_Map g {
    transform: scale(1);
    transition: 0.4s;
    transform-origin: center center;
	transition: ease 0.6s;
}

#overview g > text {
    pointer-events: none; /* Ignore les événements de la souris pour le texte */
}
/*----------*/

/* ---------------------- map legend ----------------------------- */
#overview .key {
    position:relative;
  }
/* #overview .key:before {
    content:"";
    position:absolute;
    top:0px;
	left:-30px;
	width:25px;
	height:25px;
    border: 1.5px solid #074e4f;
}
#overview .one:before{background:#b5db6f}
#overview .two:before{background:#61b57b}
#overview .three:before{background:#48594c}
#overview .four:before{background:#45bfa9}
#overview .five:before{background:#16778c}
#overview .six:before{background:#03455f} */

#overview .color-square {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 10px; /* Adjust spacing as needed */
    vertical-align: middle;
    border: 1.5px solid #074e4f;
}
#overview .color-square.one{background:#b5db6f}
#overview .color-square.two{background:#61b57b}
#overview .color-square.three{background:#48594c}
#overview .color-square.four{background:#45bfa9}
#overview .color-square.five{background:#16778c}
#overview .color-square.six{background:#03455f}

#overview .one{
    color: #b5db6f;
}
#overview .two{
    color: #61b57b;
}
#overview .three{
    color: #48594c;
}

#overview .four{
    color: #45bfa9;
}
#overview .five{
    color: #16778c;
}
#overview .six{
    color: #03455f;
}

#overview .container-legend {
	padding: 50px 0px 0px 0px;
}
#overview .parent {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 1vh;
	/* padding: 0 0 0 8%; */
}

#overview g rect, #overview g polyline, #overview g text {
    opacity: 1;
    transition: opacity 0.6s;
}
#Calque_Map.dimmed g rect, #Calque_Map.dimmed g polyline, #Calque_Map.dimmed g text {
    opacity: 0.2;
}
#Calque_Map.dimmed g.highlight rect, #Calque_Map.dimmed g.highlight polyline, #Calque_Map.dimmed g.highlight text {
    opacity: 1;
}

/*----------*/
/* grand écran */
@media screen and (min-width: 768px) {
	#overview .container-map {
		/* padding-top: 60px; */
        display: flex;
        justify-content: space-around;
        align-items: center;
	}
	#overview #map_svg{
		height: 80vh;
	}
}
/* petit écran */
@media screen and (max-width: 768px) {
	#overview #map_svg{
		margin-bottom: 4vh;
	}
	#overview .container-card .card {
		width: 20rem;
		margin: auto;
	}
	#overview .container-card .card-inner{
		height: 12.8rem;
	}

	#overview div .container-legend {
		padding-top: 0;
		padding-bottom: 30px;
	}
	
	#overview .container-map div:first-child {
		margin-bottom: 3rem;
	}
}