/* Éléments généraux */
    .section-Num-Urgence-tel,
    .retour-a-la-ligne{
        display: none;
    }

    .ApparitionFooter{
		display: none;
    }

    body{
        margin: 0;
        position: relative;
        z-index: 0;
        min-width: 375px;
        max-width: calc(100vw - 15px);
        overflow-x: hidden;
    }

    video{
        border-radius: 25px;
    }

    header{
        position: relative;
        z-index: 5;
    }

    #app{
        width: 100vw;
        min-width: 375px;
        z-index: 5;
    }

    .flex,
    .flex-footer{
        display: flex;
    }

    .tablette,
    .telephone{
        display: none;
    }

    .corps-texte>section{
        margin-top: 25px;
    }

    iframe{
        border: none;
    }

    .banniere-cookie{
        width: 80vw;
        height: 70px;
        position: fixed;
        left: 0;
        bottom: 0;
    }

    .LogoErreur{
        width: 350px;
        height: auto;
        margin: 0 calc((100vw - 350px)/2);
        box-shadow: none;
        border-radius: 0;
    }

/* Footer */
    footer.tel{
        display: none;
    }

    footer{
        width: 100vw;
        position: relative;
        padding: 20px 0 0;
        overflow: hidden;
        min-width: 375px;
        bottom: 0;
    }
    
    .footer{
        width: 100vw;
        height: max-content;
        width: 80%;
        margin: 0 10% 20px;
        display: flex;
    }

    .footer-copyright{
        width: 100vw;
        height: 20px;
        position: relative;
        padding: 10px 0;
    }

    .contact-footer,
    .liens-utiles-footer{
        position: relative;
        width: 50%;
    }

    .contact-footer>div>svg{
        margin: 10px;
    }

    .logo.footer{
        position: absolute;
        width: auto;
        height: 300px;
        margin: 0;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        filter: opacity(66%);
    }

    .Numeros-Enedis{
        position: relative;
        width: max-content;
        margin: 0 auto;
    }

    .Numeros-Enedis>div{
        margin: 0 20px;
    }

    .section-Num-Urgence p{
        margin: 15px 0 15px;
        
    }

    .logo-FS{
        width: 36px;
        height: auto;
    }

/* APP */

        #app{
            position: relative;
            z-index: 1;
        }

        .fond-page{
            width: 100vw;
            position: relative;
            min-width: 375px;
            margin-top: 33vh;

        }

        .corps-texte{
            min-width: 375px;
            width: 100%;
            height: max-content;
            padding-bottom: 25px;
        }

        .fond-page.pages{
            margin-top: 33vh;
            height: max-content;
        }

    /* Alerte */
        .section-alerte{
            display: flex;
            gap: 20px;
            width: max-content;
            max-width: calc(100% - 30px);
            margin: 20px auto;
        }

        .section-logo-alerte{
            width: calc(250px * 2 + 15px);
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .iframe-carte{
            width: 100%;
            height: 100%;
        }

        .alerte svg{
            width: 100px;
            height: auto;
            margin: 0 10px ;
        }

        .alerte h4{
            text-align: center;
        }

    /* Encadré */
        .encadre{
            width: 350px;
            height: max-content;
            border-radius: 25px 0 0 25px;
            position: relative;
        }

        .encadre>div{
            width: 350px;
            height: 550px;
            border-radius: 25px 0 0 0;
            position: relative;
        }

        .CalendarAccueil{
            width: 100%;
            max-width: 780px;
            min-width: 490px;
            height: 490px;
            margin: 30px auto;
            border-radius: 15px;
            overflow: hidden;
        }

        .encadre>div{
            overflow: hidden;
            position: absolute;
        }

        .encadre>*{
            position: relative;
            z-index: 3;
        }

        .encadre>div>img,
        .AED>div>img{
            height: 100%;
            width: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            filter:brightness(0.6);
            z-index: 2;
        }

        .button{
            width: 226px;
            height: max-content;
            border: #0F2D93 4px solid;
            padding: 10px;
            border-radius: 30px;
            text-align: center;
            margin: 0 auto;
        }

        .button>*{
            color: #0F2D93;
        }
    /* Section Carte */
        .section-cartes.grid-carte{
            display: grid;
            grid-template-columns: repeat(3, 250px);
            grid-gap: 15px;
            grid-auto-rows: minmax(100px, auto);
        }

        .section-cartes{
            text-align: center;
            width: calc(250px * 3 + 30px);
            position: relative;
            margin: 0 calc((100vw - 250px * 3 - 30px)/2);
            padding: 20px 0;
        }

        .section-Livre-Or{
            margin-top: 30px;
            transform: translateX(-15px);
        }

        .Livre-Or{
            overflow-x: scroll;
            width: 100vw;
            min-width: 375px;
        }

        .section-cartes-scroll{
            display: flex;
            text-align: center;
            width: max-content;
            padding: 20px 30px;
        }

        .fiche-livre-or{
            width: 250px;
            height: 350px;
            border-radius: 25px;
            position: relative;
            margin: 0 10px;
        }

        .contenu-fiche-or{
            position: relative;
            left: 10px;
            top: 20px;
        }

        .etoiles{
            display: flex;
            text-align: left;
            margin: 5px 0 10px;
        }

        .contenu-fiche-or{
            text-align: left;
        }

        .form-avis{
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: minmax(max-content);
            grid-gap: 25px 0;
            width: 66%;
            min-width: 375px;

            height: max-content;
            margin: 20px auto;
        }

        .input{
            width: calc(100% - 40px);
            border-radius: 25px;
            height: 30px;
            padding: 10px 20px;
            border: hidden;
        }

        .input.note{
            display: flex;
            padding: 0;
            width: 100%;
            height: 50px;
            grid-column: 1/3;
        }

        .input.note>p{
            width: 100%;
            margin: 0;
            padding: 17px 20px;
        }

        .input.note>.etoiles{
            width: max-content;
            margin: auto 20px;
        }

        .input-text-area{
            width: calc(100% - 40px);
            height: 150px;
            border-radius: 25px;
            border: hidden;
            grid-column: 1/3;
            padding: 20px;
            max-width: 100%;
        }

        form button{
            position: relative;
            width: max-content;
            height: max-content;
            margin: 0 calc((250px - 180px)/2);
            border-radius: 35px;
            padding: 10px 60px;
            margin: auto;
            grid-column: 1/3;
        }

        form button:hover{
            cursor: pointer;
        }

        form button>span{
            font-size: 30px;
            font-weight: 800;
        }

        /* Cartes*/
            .carte{
                width: 250px;
                height: 350px;
                overflow: hidden;
                border-radius: 25px;
                position: relative;
                margin: 0;
                transform: translateX(0);
            }
            
            .carte>div,
            .fiche-livre-or>div{
                height: 350px;
                width: 250px;
            }

            .carte>section,
            .fiche-livre-or>section{
                position: absolute;
                width: 220px;
                height: max-content;
                bottom: 20px;
                left: 15px;
            }
            
            .button-carte{
                position: relative;
                width: max-content;
                height: max-content;
                margin: 0 calc((250px - 180px)/2);
                border-radius: 20px;
                padding: 7px 25px;
            }
            
            .section-cartes>iframe{
                transform: translateY(-7px) translateX(-7px);
            }

    /* Image haut de page */
        .DivImageHautPage{
            width: 100vw;
            height: 33vh;
            overflow: hidden;
            position: fixed;
            z-index: 0;
            top: 0;
            left: 0;
            border-radius: 0;
        }

        .imageHautPage{
            border-radius: 0;
            width: 100%;
            height: auto;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);

        }

    /* Message important */
        .svg-fond-message-important{
            width: 60px;
            height: 60px;
            border-radius: 30px;
            margin: 0;
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 9999999;
        }

        .message-important>div>svg{
            position: relative;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            z-index: 9999999;
        }



        .message-important-accueil{
            width: 100vw;
            min-width: 375px;
            height: 60px;
            position: relative;
            z-index: 4;
        }

        .SVG-Important{
            transform: translateY(5px);
            margin-right: 10px;
        }

        marquee{
            width: 100vw;

            padding: 4px 0;
            height: calc(100% - 8px);
        }

   

        /* Accueil */
            /* Accueil-Mot du maire */
                .mot-Maire{
                    width: calc(100% - 30px);
                    padding: 0;
                }
                .accueil-MotMaire{
                    width: 100%;
                    height: max-content;
                    position: relative;
                }

                .accueil-MotMaire>div.paragraphe{
                    width: 100%;
                }

                .div-auteur{
                    width: 100%;
                }

                /* Images-Mairie */
                    .images-mairie{
                        width: 300px;
                        height: 100%;
                        position: relative;
                        float: right;
                        margin-left: 10px;
                        z-index: 2;

                    }

                    .image-mairie-1{
                        width: 280px;
                        height: auto;
                        position: relative;
                        left: 50%;
                        transform: translateX(-50%);
                        z-index: 5;
                    }

                    .image-mairie-2{
                        width: 250px;
                        height: auto;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-100px) translateY(120px);
                        z-index: 6;
                    }

                    .image-mairie-3{
                        width: 275px;
                        height: auto;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-150px) translateY(240px);
                        z-index: 6;
                    }

                    .image-mairie-4{
                        width: 180px;
                        height: auto;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-20%) translateY(390px);
                        z-index: 7;
                    }
                    

                /* Encadre Accueil */
                    .Info-Mairie{
                        position: relative;
                    }

                    table{
                        width: calc(100% - 30px);
                        margin: 15px;            
                    }

                    .titre-section-encadre,
                    .text-encadre{
                        margin: 20px 15px 12px;
                        width: calc(100% - 30px);
                    }

                    tbody>tr>th:first-of-type{
                        width: 100px;
                    }

                    .map-encadre{
                        position: relative;
                        width: 350px;
                        height: 300px;
                        border-radius: 0 0 0 25px;
                        border: hidden;
                    }

                /* Numéros Urgence */
                    .section-Num-Urgence{
                        width: 100%;
                        max-width: 780px;
                        min-width: 490px;
                        height: max-content;
                        border-radius: 15px;
                        border-radius: 25px;
                        display: grid;
                        overflow: hidden;
                        transform: translateX(0);
                        grid-template-columns: repeat(2, 1fr);
                        grid-gap: 0;
                        grid-template-rows: repeat(1, 550px);
                        margin: 0 auto 20px;
                    }  
                

                    .numeros{
                        text-align: center;
                        margin: 20px 0 40px;
                        width: calc(100% - 30px);
                        padding: 0;
                    }


                    .numero-flex{
                        display: flex;
                        text-align: center;
                        width: 100%;
                    }

                    .numero-urgence{
                        border-radius: 15px;
                        padding: 7px 15px;
                        height: max-content;
                        margin-left: 10px;
                    }

                    @media (min-width: 1081px){
                        .displayNums{
                            display: flex;
                        }

                        .numeros.gauche{
                            margin: 10px 15px;
                        }

                        .numeros.droite{
                            margin: 10px 15px;
                        }
                    }

                    .AED{
                        position: relative;
                        width: 350px;
                        height: max-content;
                        overflow: hidden;
                    }

                    .AED>div{
                        width: 350px;
                        height: 80%;
                        position: absolute;
                        z-index: 0;
                        overflow: hidden;
                        border-radius:  0 25px 0 0 ;
                    }

                    .Info-AED{
                        height: calc(50% - 40px);
                        padding: 20px;
                        position: relative;
                        z-index: 1;
                        backdrop-filter: brightness(0.7);
                        border-radius:  0 25px 0 0 ;
                    }

                    .AED>div>img{
                        height: 100%;
                        width: auto;
                        position: relative;
                        top: 50%;
                        left: 50%;
                        transform: translateX(-50%) translateY(-50%);
                    }

                    .map-aed{
                        position: relative;
                        width: 100%;
                        height: 100%;
                        border-radius: 0;
                        border: hidden;
                    }
                    

                /* Carte horaires */
                    .TableHoraire{
                        margin: 10px 0 20px;
                        width: 100%;
                    }

                    .TableHoraire.TableHoraireDechet{
                        width: 100%;
                        margin: 0;
                    }
                    
                    .TableHoraire div{
                        width: 100%;
                    }

        /* Autres pages */
            /* En-tête */
                .en-tete-page{
                    width: 100%;
                    height: max-content;
                    min-width: 375px;
                }

                h6{
                    margin: 0;
                }

                h6.titre-page{
                    margin: 20px 0;
                }

                h6.type-contact{
                    width: max-content;
                    margin: 5px 15px;
                    font-size: 25px;

                }

                .paragraphe-en-tete{
                    margin: 0 15px 20px;
                    width: calc(100% - 30px);
                    height: auto;
                }

                .Section-pages{
                    margin: 0 15px 0;
                    padding-bottom: 40px;
                }

                div.type-contact{
                    margin-top: 25px;
                }

                .Fiche,
                .Fiche-emplacement{
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-auto-rows: minmax(max-content);
                    margin: 40px 0 0;
                }


                .Fiche>*,
                .Fiche-emplacement>*{
                    width: 100%;
                    position: relative;
                }
                
                .Fiche-emplacement{
                    transform: translateX(-15px);
                }

                .contenu-droit-page{
                    position: relative;
                    width: 50vw;
                    height: calc((50vw * 3)/4);
                    margin: 0 0 0 auto;
                    transform: translateX(15px);
                    border-radius: 25px 0 0 25px;
                    overflow: hidden;
                }

                .AgendaSdFDiv{
                    width: 100vw;
                    height: 500px;
                    transform: translateX(0);
                }

                .Tableau-Fiche{
                    position: relative;
                    height: max-content;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    margin: 0;
                    width: 100%;
                }

                .Tableau-Fiche>tbody>tr>th:last-of-type{
                    padding: 20px 0;
                }

                .Tableau-Fiche>tbody>tr>th{
                    width: max-content;
                    padding-right: 75px;
                }

                .Tableau-Fiche>tbody>tr>th:first-of-type{
                    text-align: center;
                    width: 100px;
                }

                .logo-type-contact{
                    width: auto;
                    height: 50px;
                }

                .contenu-droit-page>img{
                    width: auto;
                    height: 100%;
                    position: relative;
                    top: 50%;
                    left: 50%;
                    transform: translateX(-50%) translateY(-50%);
                }

                .Info-Emplacement{
                    width: 50vw;
                    height: calc(56.25vw / 2);
                    border-radius: 0 0 0 0;
                    overflow: hidden;
                }

                .Info-Emplacement>img{
                    width: 100%;
                    height: auto;
                    position: relative;
                    top: 50%;
                    left: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    border-radius: 0;
                }
                
                    
                .section-pages-cartes{
                    width: max-content;
                    display: grid;
                    grid-template-columns: repeat(4, 350px);
                    grid-gap: 25px;
                    grid-template-rows: auto;  
                    margin: auto;
                }

                .section-carte-scroll{
                    width: calc(100vw - 15px);
                    height: max-content;
                    overflow-x: scroll;
                    display: flex;
                    flex-wrap: nowrap;
                    flex-direction: row;
                }

                .section-carte-scroll>div{
                    margin: 40px calc(75px / 2);
                }

                /* .section-carte-scroll>div:first-of-type{
                    margin-left: calc(((100vw - 15px) - 3 * 350px + 2 * 25px) / 2);
                } */


                
                .carte-conseiller{
                    width: 300px;
                    height: 420px;
                    overflow: hidden;
                    border-radius: 25px;
                    position: relative;
                    margin: 0 auto;
                }

                .carteconseillerliste{
                    width: 350px;
                    height: 490px;
                    overflow: hidden;
                    border-radius: 25px;
                    position: relative;
                    margin: 0 auto;
                }

                .carteconseillerliste>div{
                    width: 350px;
                    height: 490px;
                    position: absolute;
                }

                .carteconseillerliste>section{
                    position: absolute;
                    width: calc(100% - 40px);
                    height: max-content;
                    bottom: 20px;
                    left: 15px;
                }

                .carte-conseiller>div{
                    width: 300px;
                    height: 420px;
                    position: absolute;

                }
                
                .portrait-conseiller{
                    width: auto;
                    height: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    filter: brightness(0.7);
                }
    
                .carte-conseiller>section{
                    position: absolute;
                    width: calc(100% - 40px);
                    height: max-content;
                    bottom: 20px;
                    left: 15px;
                }

                .formalite{
                    padding: 15px;
                    width: calc(100% - 30px);
                }

                .inter-titre{
                    margin: 15px;
                }

                .docuPDF{
                    width: 280px;
                    height: 450px;
                }

                .arret-bus{
                    border-radius: 25px 0 0 25px;
                    overflow: hidden;
                    transform: translateX(15px);
                    width: 50vw;
                    height: max-content;
                }

                .arret-bus>.contenu-droit-page{
                    border-radius: 0;
                    transform: translateX(0);
                }

                .mentions-legales{
                    padding: 20px;
                    width: calc(100vw - 40px);
                }

                .mentions-legales>h1{
                    padding: 20px 0;
                }

                .mentions-legales ul{
                    padding-left: 15px;
                }
                .mentions-legales li{
                    list-style-type: circle;
                }

        /* Page images */
        
            .sectionFiltres{
                margin: 20px;
                width: calc(100% - 40px);
                height: max-content;
                border-bottom: 2px solid #0F2D93;
                padding: 20px 0;
            }
        
            .filtres{
                width: 100%;
                display: flex;
            }



            .filtres>*{
                width: 100%;
            }

            .filtres>svg{
                text-align: left;
            }

            .filtres>h4{
                text-align: right;
            }

            .input-recherche{
                width: calc(100% - 40px);
                min-width: 310px;
                border-radius: 25px;
                height: 30px;
                padding: 10px 20px;
                border: hidden;
                display: flex;
            }

            .input-date{
                padding: 7px 0 7px 7px;
                width: max-content;
            }

            .input-centre{
                margin: 0 auto;
            }

            .input-recherche>input,
            .input-recherche>select{
                background-color: #0F2D9300;
                border:none;
                width: 100%;
                margin-left: 10px;
            }

            .menu-filtres{
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-gap: 25px;
                grid-template-rows: auto;
                margin: 40px auto;
                width: 100%;
            }

            .flecheImg.fGauche{
                position: absolute;
                z-index: 40px;
                top: 50%;
                transform: translateY(-50%);
                left: 40px;
            }
        
            .flecheImg.fDroite{
                position: absolute;
                z-index: 40px;
                top: 50%;
                transform: translateY(-50%);
                right: 40px;
            }

        @media (min-width: 1066px){
            .menu-classification{
                width: 100%;
                display: flex;
            }

            .menu-classification.affichage{
                width: max-content;
            }
            .menu-classification.affichage>.button-classification{
                margin: 0 20px 0 0;
            }


            .menu-classification.Tri{
                text-align: right;
                width: max-content;
            }

            .menu-classification.Tri>.button-classification{
                margin: 0 0 0 20px;
            }
        

            .h4gauche{
                width: 100%;
                text-align: left;
                margin-bottom: 10px;
            }

            .h4droite{
                width: 100%;
                text-align: right;
                margin-bottom: 10px;
            }
        }
            
        .button-classification,
        .buttonActif{
            width: max-content;
            border-radius: 25px;
            height: 30px;
            padding: 10px 20px;
            border: hidden;
            display: flex;
        }
        

        .button-classification>h4{
            margin-left: 10px;
        }



        .liste{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 25px;
            grid-template-rows: auto;
            margin: 20px 20px 0;
            padding: 0 0 25px;
            width: calc(100% - 40px);
        }

        .liste-Albums{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 25px 25px;
            grid-template-rows: auto;
            margin: 20px auto 0;
            padding: 0 0 25px;
            width: max-content;
        }

        .buttonReini{
            margin: 0 auto;
        }

        .images-qei{
            width: calc(((100vw - 40px) - 25 * 2)/3);
            height: calc(((((100vw - 40px) - 25px * 2)/3) * 1080px)/1920);
            overflow: hidden;
            border-radius: 25px;
        }

        .images-qei>img{
            width: 100%;
            height: auto;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
        

        .pochette-Album{
            width: 500px;
            height: 281px;
            position: relative; 
            padding-top: 50px;  
        }

        .pochette-Album>.premiereSlide{
            width: 100%;
            height: 100%;
            border-radius: 25px;
            overflow: hidden;
        }

        .pochette-Album>div>img{
            width: auto;
            min-width: 100%;
            height: auto;
            max-height: 130%;
            min-height: 100%;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }


        .secondeSlide,
        .derniereSlide{
            width: 100%;
            height: calc(100% - 40px);
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            border-radius: 25px;
        }

        .secondeSlide{
            transform: translateY(25px) scaleX(0.9) scaleY(0.9);
        }

        .derniereSlide{
            transform: scaleX(0.8) scaleY(0.8);
        }

        .Titre-Album{
            position: absolute;
            bottom: 0;
            left: 0;
            backdrop-filter: brightness(0.7);
            width: 460px;
            height: max-content;
            border-radius: 0 0 25px 25px;
            padding: 20px;
        }

        .ImageGrde{
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(200, 200, 200, 0.2);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            z-index: 99999;
        }

        .ImgGdeDiv{
            width: auto;
            max-width: 90vw;
            max-height: 66%;
            position: relative;
            top: 50%;
            left: 50%;
            padding: 0;
            margin: 0;
            transform: translateX(-50%) translateY(-54%);
        }

        .ImgsPetitediv{
            width: 100vw;
            height: max-content;
            overflow-x: scroll;
            position: absolute;
            bottom: 0;
            transform: translateY(-10px);
            padding-bottom: 10px;
        }

        .ImgsPetitediv>div{
            display: flex;
            min-width: 0;
            width: max-content;                
            overflow-x: overflow;
        }

        .ImgsPetitediv>div>div{
            width: 150px;
            position: relative;
            height: 105px;
            overflow: hidden;
            border-radius: 10px;
            margin: 0 10px;
        }

        .ImgsPetitediv>div>div>img{
            min-width: 100%;
            max-width: 130%;
            height: auto;
            min-height: 100%;
            border-radius: 0;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        .divFermeture{
            width: 100vw;
            height: 100%;
            position: absolute;
        }

        .croix-fermeture-Img{
            position: absolute;
            top: 40px;
            left: 40px;
            width: 40px;
            height: 40px;
            transform: rotate(45deg);
        }

        .InfoImage{
            position: absolute;
            left:40px;
            top: 100px;
            width: 40px;
            height: 40px;
        }

        .InfoImageDiv{
            position: absolute;
            left: 40px; 
            top: 100px;
            border-radius: 20px;
            background-color: #0F2D93;
       }


        .TableContactBiblio{
            margin: 10px;
        }

        .TableContactBiblio i{
            display: inline;
            vertical-align: middle;
            margin: 10px 5px;
        }



            


@media (max-width:1525px) {
    .section-pages-cartes{
        display: grid;
        grid-template-columns: repeat(3, 350px);
        grid-gap: 25px;
        grid-template-rows: auto;
        margin: 40px auto 0;
        padding-bottom: 40px;
    }
}

@media(min-width:1440px){
    .flex-Carte{
        display: flex;
    }
}

@media (max-width:1150px) {
    .section-pages-cartes{
        display: grid;
        grid-template-columns: repeat(2, 350px);
        grid-gap: 25px;
        grid-template-rows: auto;
        margin: 40px auto 0;
        padding-bottom: 40px;
    }

    .liste{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 25px;
        grid-template-rows: auto;
        margin: 20px 20px 0;
        padding: 0 0 25px;
        width: calc(100% - 40px);
    }

    .menu-filtres{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 25px;
        grid-template-rows: auto;
        margin: 40px auto;
        width: 100%;
    }

    .input-recherche.loupe{
        grid-column: 1/3;
        grid-row: 1/2;
    }

    .ImgGdeDiv{
        max-width: 80vw;
        width: max-content;
        height: auto;
        max-height: calc(100vh - 100px - 125px);
    }
}

@media (max-width: 1590px) {
    .liste-Albums{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap:  25px;
        grid-template-rows: auto;
        margin: 20px auto 0;
        padding: 0 0 25px;
        width: max-content;
    }

    .flexContact{
        display: block;
    }
}

@media(max-width: 1080px){
    .AED,
    .AED>div{
        width: 100%;
    }

    .AED>div,
    .Info-AED{
        border-radius: 0;
    }

    .map-aed{
        border-radius: 0;
    }
}

@media(max-width: 1065px){
    .liste-Albums{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 25px;
        grid-template-rows: auto;
        margin: 20px auto 0;
        padding: 0 0 25px;
        width: max-content;
    }


    .pochette-Album{
        width: 350px;
        height: 197px;
        position: relative; 
        padding-top: 50px;  
    }

    .Titre-Album{
        position: absolute;
        bottom: 0;
        left: 0;
        backdrop-filter: brightness(0.7);
        width: 310px;
        height: max-content;
        border-radius: 0 0 25px 25px;
        padding: 20px;
    }

    .sectionFiltres.ordi{
        display: none;
    }

    .sectionFiltres.tablette{
        display: block;
    }

    .FiltresTris.tablette{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        height: calc(100vh - 40px);
        width: calc(100vw - 40px);
        background-color: rgba(200, 200, 200, 0.2);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        z-index: 99999;
        padding: 70px 20px 0;
    }

    .menu-filtres{
        width: 100%;
    }

    .input-recherche{
        width: calc(100% - 40px);
        min-width: 310px;
        border-radius: 25px;
        height: 30px;
        padding: 10px 20px;
        border: hidden;
        display: flex;
    }

    .input-date{
        padding: 7px 0 7px 7px;
        width: max-content;
    }

    .input-centre{
        margin: 0 auto;
    }

    .input-recherche>input,
    .input-recherche>select{
        background-color: #0F2D9300;
        border:none;
        width: 100%;
        margin-left: 10px;
    }

    .menu-classification,
    .h4droite,
    .h4gauche{
        text-align: center;
        width: 100%;
    }

    .button-classification,
    .buttonActif{
        margin: 10px auto;
    }

    .buttonReini{
        margin-top: 50px;
    }
}

@media (max-width: 775px) {
    .section-alerte{
        display: block;
    }
    .section-pages-cartes,
    .liste-Albums{
        display: grid;
        grid-template-columns: repeat(1, 350px);
        grid-gap: 25px;
        grid-template-rows: auto;
        margin: 40px auto 0;
        padding-bottom: 40px;
    }

    .menu-filtres{
        display: block;
        margin: 40px auto;
        width: 100%;
    }

    .input-recherche{
        margin: 13px 0;
    }
}

@media(max-width:675px){
    .liste{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 25px;
        grid-template-rows: auto;
        margin: 20px 20px 0;
        padding: 0 0 25px;
        width: calc(100% - 40px);
    }

    .images-mairie{
        float: none;
        margin: 0 auto;
    }

    .CalendarAccueil{
        width: 350px;
        min-width: 350px;
        margin: 30px auto;
        height: 490px;
        padding: 0;

    }


}



@media (min-width: 741px){
    .encadre-Mairie{
        width: 100%;
        max-width: 780px;
        min-width: 490px;
        height: max-content;
        border-radius: 15px;
        border-radius: 25px;
        display: grid;
        overflow: hidden;
        transform: translateX(0);
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0;
        grid-template-rows: repeat(1, 550px);
        margin: 0 auto 20px;
    }

    .Info-Mairie,
    .encadre.encadre-Mairie>div{
        width: 100%;
        border-radius: 25px 0 0 25px;
    }

    .encadre iframe{
        width: 100%;
        height: 550px;
        border-radius: 0 25px 25px 0;
    }

    .encadre iframe.map-aed{
        border-radius: 0;
    }
} 





                    
/* Tablette */
@media(max-width : 1081px){
    .flex{
        display: block;
    }


    .flex.Numeros-Enedis{
        display: flex;
    }

    
}

@media (max-width: 800px){
    .section-cartes{
        width: calc(100% - 40px);
        margin: 0;
        overflow-x: scroll;
        padding: 0 20px 30px;
    }

    .Fiche{
        display: block;
        margin: 40px 0 ;
    }

    .Fiche>*{
        width: 100%;
        position: relative;
    }
    

    .contenu-droit-page{
        position: relative;
        width: 80vw;
        height: 45vw;
        margin: 10px 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 25px;
        overflow: hidden;
    }

    .contenu-droit-page>img{
        position: relative;
        width: 100%;
        max-width: 120%;
        height: auto;
        min-height: 100%;
        margin: 0;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 25px;
        overflow: hidden;
    }

    .Tableau-Fiche{
        position: relative;
        height: max-content;
        top: 0;
        left: 0;
        transform: translateY(0);
        margin: 0;
        width: max-content;
        margin: 0 auto;
    }

}

@media (max-width: 730px){
    .encadre.encadre-Mairie{
        border-radius: 25px;
        overflow: hidden;
        margin: 0 auto 20px;
        transform: translateX(0) translateY(0);
    }

    
    .encadre.encadre-Mairie>div{
        border-radius: 25px 25px 0 0;
    }

    .encadre.encadre-Mairie>iframe{
        border-radius: 0 0 25px 25px;
    }

    .section-Num-Urgence{
        width: 350px;
        margin: 10px auto;
        min-width: 320px;
    }

    .retour-a-la-ligne{
        display: block;
    }

    .Tableau-Fiche.Contact{
        width: 100%;
        margin: 0;
    }

    .Tableau-Fiche.Contact>tbody>tr>th:first-of-type{
        width: 20%;
    }
    .Tableau-Fiche.Contact>tbody>tr>th:last-of-type{
        width: 75%;
    }

    .imageHautPage{
        width: auto;
        height: 100%;
    }


    
    /* Footer */
        footer.ordi{
            display: none;
        }

        footer.tel{
            display: block;
        }
    
        footer{
            width: 100vw;
            position: relative;
            bottom: 0;
            padding: 20px 0 0;
            overflow: hidden;
        }
        
        .footer{
            width: 100vw;
            height: max-content;
            width: 80%;
            margin: 0 10% 20px;
            display: flex;
        }

        .flex-footer{
            display: flex;
            width: max-content;
            margin: 10px auto;
        }
    
        .footer-copyright{
            width: 100vw;
            height: 20px;
            position: relative;
            z-index: 2;
            padding: 10px 0;
        }
    
        .contact-footer,
        .liens-utiles-footer{
            position: relative;
            z-index: 2;
            width: 100%;
            text-align: center;
        } 

        .liens-utiles-footer>h5{
            margin: 20px 0 0;
            font-size: 25px;
            text-align: center;
        }
    
        .contact-footer>div>svg{
            margin: 10px;
        }
    
        .logo.footer{
            position: absolute;
            width: auto;
            height: 300px;
            margin: 0;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            filter: opacity(66%);
            z-index: 1;
        }
    
        .logo-FS{
            width: 36px;
            height: auto;
        }

        .liens-utiles-footer>table>tbody>tr>th:first-of-type,
        .liens-utiles-footer>table>tbody>tr>th:last-of-type{
            width: 50%;
        }

        .liens-utiles-footer>table>tbody>tr>th:last-of-type{
            text-align: left;
        }

        .liens-footer-utiles{
            margin: 7px 10px;
        }

        .form-avis{
            width: 100%;
            height: max-content;
            margin: 20px auto;
            display: block;
            text-align: center;
            min-width: 350px;
        }

        .form-tel{
            display: none;
        }

        .input,
        .input-text-area{
            margin: 10px 0;
            position: relative;
            z-index: 3;
        }

        .form-tel{
            display: block;
        }

        form button{
            position: relative;
            z-index: 3;
            margin: 20px 0;
        }         
}

@media (max-width: 400px){
    .sectionFiltres{
        width: 330px;
        margin: 0 auto;
        padding: 0 10px;
    }

    .input-recherche{
        width: calc(100% - 60px);
        min-width: 290px;
        border-radius: 25px;
        height: 30px;
        padding: 10px 20px;
        border: hidden;
        display: flex;
        margin: 10px 0;
    }

    .Fiche{
        margin:40px 0 0;
    }

    .Tableau-Fiche{
        margin: 40px 0 0;
    }
}

@media(hover:none){
    .carte-hover,
    .message-important.hover{
        display: none;
    }

    .message-important.non-hover{
        display: block;
    }


    .message-important{
        transform-origin: 20px 20px;
        overflow: hidden;
        width: 60px;
        height: 30px;
        position: fixed;
        z-index: 4;
        right: 40px;
        bottom: 40px;
        border-radius: 30px;
        padding: 15px 0;
        margin: 0;
    }

    .message-important>marquee{
        transform-origin: 20px 20px;
        overflow: hidden;
        width: 300px;
        height: 30px;
        position: fixed;
        z-index: 4;
        right: 40px;
        bottom: 40px;
        border-radius: 30px;
        padding: 15px 0;
        margin: 0;
    }
}

#photos {
    /* Prevent vertical gaps */
    line-height: 0;
  
    -webkit-column-count: 5;
    -webkit-column-gap: 0px;
    -moz-column-count: 5;
    -moz-column-gap: 0px;
    column-count: 5;
    column-gap: 10px;
    margin: 0 20px;
  }
  
  #photos img {
    /* Just in case there are inline attributes */
    width: 100% !important;
    height: auto !important;
    margin-bottom: 10px;
    box-shadow: none;
  }
  
  @media (max-width: 1200px) {
    #photos {
      -moz-column-count: 4;
      -webkit-column-count: 4;
      column-count: 4;
    }
  }
  @media (max-width: 1000px) {
    #photos {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
    }
  }
  @media (max-width: 800px) {
    #photos {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
    }
  }
  @media (max-width: 400px) {
    #photos {
      -moz-column-count: 1;
      -webkit-column-count: 1;
      column-count: 1;
    }
  }

@media(hover:hover){   
    .message-important.hover{
        display: block;
    }

    .carte-hover,
    .carte-non-hover,
    .message-important.non-hover{
        display: none;
    }

    .ButtonOuvertureFiltre:hover,
    .pochette-Album:hover,
    .croix-fermeture-Img:hover,
    .divFermeture:hover,
    .ImgsPetitediv>div>div:hover,
    .pointer{
        cursor: pointer;
    }

    .flecheImg.fDroite:hover{
        cursor: e-resize;
    }

    .flecheImg.fGauche:hover{
        cursor: w-resize;
    }
    
    .carte-conseiller:hover .carte-hover{
        display: block;
        margin: 0;
    }

    .message-important>marquee{
        width: 100%;
        height: 60px;
        border-radius: 0;
        transform: translateY(0) translateX(0);
    }

    .message-important>marquee{
        width: 58px;
        height: 58px;
        border-radius: 30px;
        transform: translateX(1px) translateY(1px);
    }

    .message-important:hover>marquee{
        width: 100%;
        height: 60px;
        border-radius: 0;
        transform: translateY(0) translateX(0);
    }

    .message-important:hover{
        display: block;
        transition: ease-in-out 0.5s;
        transform-origin: 20px 20px;
        overflow: hidden;
        width: 300px;
        height: 30px;
        position: fixed;
        z-index: 9999998;
        right: 40px;
        bottom: 40px;
        border-radius: 30px;
        padding: 15px 0;
        margin: 0;
        overflow: hidden;
    }

    .message-important{
        transform-origin: 20px 20px;
        overflow: hidden;
        width: 60px;
        height: 30px;
        position: fixed;
        z-index: 4;
        right: 40px;
        bottom: 40px;
        border-radius: 30px;
        padding: 15px 0;
        margin: 0;
    }
}