/* Blue Explore interactive diagram section for EcoAzur. */
#ecoazur,
#netzerohood,
#confort {
    .section-bleuexplore {
        position: relative;
        background-color: black;
        margin-top: -20px;

        .schemaContainer {
            text-align: center;
            position: relative;

            .schemaMap {
                display: inline-block;
                width: 80%;
                position: relative;
            }

            .schema {
                display: block;
                width: 100%;
                height: auto;
            }

            #plus1 {
                position: absolute;
                top: 53%;
                left: 44.5%;
                transform: translate(-50%, -50%);
                width: 1.5%;
                height: auto;
                min-width: 24px;
                z-index: 2;
            }

            #plus1.rotated {
                transform: translate(-50%, -50%) rotate(45deg);
            }

            #plus2 {
                position: absolute;
                top: 66%;
                left: 66.25%;
                transform: translate(-50%, -50%);
                width: 1.5%;
                height: auto;
                min-width: 24px;
                z-index: 2;
            }

             #plus2.rotated {
                transform: translate(-50%, -50%) rotate(45deg);
            }

            #plus3 {
                position: absolute;
                top: 42%;
                left: 17.5%;
                transform: translate(-50%, -50%);
                width: 1.5%;
                height: auto;
                min-width: 24px;
                z-index: 2;
            }

            .schemaPlus {
                position: absolute;
                cursor: pointer;
                width: 1.5%;
                height: auto;
                min-width: 24px;
                z-index: 2;
                transform: translate(-50%, -50%);
                color-scheme: only light;
                forced-color-adjust: none;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                filter: none !important;
                -webkit-filter: none !important;
            }

            .schemaPlus path {
                fill: #E8EAED !important;
                forced-color-adjust: none;
            }

            /* Explicitly override theme SVG rules when a page excludes a point. */
            .schemaPlus[hidden] {
                display: none !important;
            }

            .schemaPlus.rotated {
                transform: translate(-50%, -50%) rotate(45deg);
            }

            #plus4 { top: 14%; left: 37.5%; }
            #plus5 { top: 43%; left: 67.5%; }
            #plus6 { top: 46%; left: 77.5%; }
            #plus7 { top: 57%; left: 17.5%; }
            #plus8 { top: 20%; left: 19%; }

            @media screen and (max-width: 700px) {
                .schemaMap {
                    width: 96%;
                }

                #plus1,
                #plus2,
                #plus3,
                .schemaPlus {
                    width: 30px;
                    min-width: 30px;
                }

            }

             #plus3.rotated {
                transform: translate(-50%, -50%) rotate(45deg);
            }
			.indicatifPlus{
				width: 517px;
                min-height: 104px;
                background-color: #4698CB;
                position: absolute;
                right: 0;
                bottom: 15%;
                display: flex;
                align-items: center;
                padding-left: 38px;
				color-scheme: only light;
				forced-color-adjust: none;
				-webkit-print-color-adjust: exact;
				print-color-adjust: exact;
				filter: none !important;
				-webkit-filter: none !important;
				.dessinPlus,
				.ligne {
					forced-color-adjust: none;
					filter: none !important;
					-webkit-filter: none !important;
				}
				.dessinPlus path { fill: #ffffff !important; }
				.ligne path { stroke: #ffffff !important; }
				.groupe{
					display:flex;
					align-items:center;
					gap: 12px;
					h5{
						color: #FFF;
						font-size: 16px;
						font-style: normal;
						font-weight: 600;
						line-height: 20px;
						text-transform: uppercase;
						text-align:left;
					}
				}
				
			}
			@media screen and (max-width: 1600px) {
                .indicatifPlus {
                    width: 25%;
               }
        	}
			@media screen and (max-width: 900px) {
                .indicatifPlus {
                    width: 100%;
					max-width: 100%;
					box-sizing: border-box;
					min-height:auto;
					position:relative;
					bottom:unset;
					right:unset;
					padding:20px;
               }
        	}
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 30;
            left: 50%;
            top: 50%;
            width: min(1180px, 90vw);
            height: min(760px, 86vh);
            max-height: 86vh;
            background-color: var(--gris-blanc);
            border-radius: 16px;
            transform: translate(-50%, -50%);
            overflow: hidden;

                .modalContainer {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    padding: 80px 60px 100px 60px;
                    box-sizing: border-box;
                }

                .close {
                    position: absolute;
                    right: 28px;
                    top: 28px;
                    cursor: pointer;
                    z-index: 40;
                    pointer-events: auto;
                }

                .close:hover,
                .close:focus {
                    color: black;
                    text-decoration: none;
                    cursor: pointer;
                }

                .iris-bleue {
                    position: absolute;
                    left: 8%;
                    top: 80px;
                    width: 22%;
                    height: calc(100% - 180px);
                    max-width: 260px;
                    object-fit: contain;
                }

             
             

                .carousel {
                    position: absolute;
                    left: -3%;
                    top: 80px;
                    width: 100%;
                    height: calc(100% - 180px);
                    max-width: 500px;
                    isolation: isolate;
                }

                .carousel-slide {
                    display: none;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: calc(100% - 40px);
                    object-fit: contain;
                }

                .carousel-slide.is-active {
                    display: block;
                }

              
                .carousel-dots {
                    display: flex;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    justify-content: center;
                    align-items: center;
                    gap: 12px;
                    width: 100%;
                    height: 40px;
                }

                .carousel-dot {
                    width: 10px;
                    height: 10px;
                    padding: 0;
                    border: 0;
                    border-radius: 50%;
                    background: #b7b7b7;
                    border: 1px solid #9a9a9a;
                    cursor: pointer;
                    transition: transform 150ms ease, background-color 150ms ease;
                }

                .carousel-dot.is-active {
                    background: var(--bleu);
                    border-color: var(--bleu);
                    transform: scale(1.5);
                }

                .modal2-image-1 {
                    top: -150px;
                    left:-130px;
                    width: 150%;
                    height: 150%;
                }

                .modal3-image {
                    position: absolute;
                    left: -3%;
                    top: 80px;
                    width: 100%;
                    height: calc(100% - 180px);
                    max-width: 500px;
                    object-fit: contain;
                }

                .modal4-image {
                    position: absolute;
                    top: 0%;
                    left: -1%;
                    right: auto;
                    width: 39%;
                    height: calc(100% - 50px);
                    max-width: none;
                    object-fit: contain;
                    object-position: center;
                    transform: none;
                }

                .modal5-image {
                    position: absolute;
                    top: 0%;
                    left: -1%;
                    width: 35%;
                    height: calc(100% - 50px);
                    max-width: none;
                    object-fit: contain;
                    object-position: center;
                    transform: none;
                }

                .modal7-image3 {
                    top: 11%;
                    left: 8%;
                    width: 85%;
                    height: 85%;
                }

                .modal8-image {
                    position: absolute;
                    top: 0%;
                    left: -2%;
                    width: 45%;
                    height: calc(100% - 50px);
                    max-width: none;
                    object-fit: contain;
                    object-position: center;
                    transform: none;
                }
              

   

                .textContainer {
                    position: absolute;
                    top: 80px;
                    left: 38%;
                    width: 50%;
                    bottom: 40px;
                    display: flex;
                    flex-direction: column;

                    h2 {
                        color: var(--bleu);
                        flex: 0 0 auto;
                        margin: 0 0 32px;
                    }

                    .modalTextBody {
                        flex: 1 1 auto;
                        min-height: 0;
                        overflow-y: auto;
                    }

                    ul {
                        list-style-position: inside;
                    }

                    p,
                    li {
                        color: var(--gris);
                    }
                }

                .modalCloseButton {
                    border: 0;
                    background: transparent;
                    color: #4698CB;
                    font-size: 40px;
                    line-height: 1;
                }

                @media screen and (max-width: 1200px) {
                    .modalContainer {
                        padding: 72px 40px 80px 40px;
                    }

                    .textContainer {
                        left: 40%;
                        width: 47%;
                        top: 72px;
                        bottom: 80px;
                    }

                    .carousel {
                        top: 72px;
                    }

                   

                    .iris-bleue,
                    .control,
                    .modal4-image,
                    .modal5-image,
                    .modal6-image{
                        top: 72px;
                        height: calc(100% - 152px);
                    }

                    
                }

                @media screen and (max-width: 900px) {
                    left: 0;
                    top: 0;
                    width: 100vw;
                    height: 100vh;
                    max-height: 100vh;
                    border-radius: 0;
                    transform: none;

                    .modalContainer {
                        height: 100vh;
                        padding: 72px 16px 96px 16px;
                        overflow-y: auto;
                        -webkit-overflow-scrolling: touch;
                    }

                    .carousel {
                        position: relative;
                        left: auto;
                        top: auto;
                        width: 100%;
                        height: 220px;
                        max-width: 100%;
                        margin: 0 auto 20px;
                    }

                    .iris-bleue,
                    .carousel-slide,
                    .modal3-image,
                    .modal4-image,
                    .modal5-image,
                    .modal6-image {
                        position: relative;
                        left: auto;
                        right: auto;
                        top: auto;
                        bottom: auto;
                        height: 180px;
                        width: 100%;
                        max-width: 100%;
                        margin: 0 auto 20px auto;
                    }

                    .volet-rect,
                    .volet-oval,
                    .modal7-image-1,
                    .modal7-image-2 {
                        position: relative;
                        left: auto;
                        top: auto;
                        bottom: auto;
                        height: 130px;
                        width: 100%;
                        max-width: 100%;
                        margin: 0 auto 16px auto;
                    }


                    .textContainer {
                        position: relative;
                        width: 100%;
                        left: auto;
                        top: auto;
                        bottom: auto;
                        padding-bottom: 96px;
                    }

                    .textContainer h2 {
                        margin-bottom: 20px;
                    }

                    .textContainer p,
                    .textContainer li {
                        font-size: 15px;
                        line-height: 1.5;
                    }

                    .close {
                        right: 14px;
                        top: 14px;
                    }
                }

            }
        }

  


}

@media screen and (min-width: 901px) {
    #ecoazur .bloc3 .modal#modal4 .modal4-image,
    #netzerohood .bloc3 .modal#modal4 .modal4-image,
    #confort .bloc3 .modal#modal4 .modal4-image {
        position: absolute;
        top: 0;
        left: -2%;
        right: auto;
        width: 45%;
        height: calc(100% - 50px);
        max-width: none;
        object-fit: contain;
        object-position: center;
    }

    /* Shared visual stage: all single-image modal visuals use the same bounds. */
    #ecoazur .bloc3 .modal .iris-bleue,
    #ecoazur .bloc3 .modal .carousel,
    #ecoazur .bloc3 .modal .modal3-image,
    #ecoazur .bloc3 .modal .modal4-image,
    #ecoazur .bloc3 .modal .modal5-image,
    #ecoazur .bloc3 .modal .modal6-image,
    #netzerohood .bloc3 .modal .iris-bleue,
    #netzerohood .bloc3 .modal .carousel,
    #netzerohood .bloc3 .modal .modal3-image,
    #netzerohood .bloc3 .modal .modal4-image,
    #netzerohood .bloc3 .modal .modal5-image,
    #netzerohood .bloc3 .modal .modal6-image,
    #confort .bloc3 .modal .iris-bleue,
    #confort .bloc3 .modal .carousel,
    #confort .bloc3 .modal .modal3-image,
    #confort .bloc3 .modal .modal4-image,
    #confort .bloc3 .modal .modal5-image,
    #confort .bloc3 .modal .modal6-image {
        position: absolute;
        top: 80px;
        left: 3%;
        width: 32%;
        height: calc(100% - 180px);
        max-width: none;
        object-fit: cover;
        object-position: center;
        transform: none;
    }

    /* Carousel slides fill the same stage as the single-image modals. */
    #ecoazur .bloc3 .modal .carousel-slide,
    #netzerohood .bloc3 .modal .carousel-slide,
    #confort .bloc3 .modal .carousel-slide {
        width: 100%;
        height: calc(100% - 40px);
        object-fit: cover;
        object-position: center;
    }

  

}