body::-webkit-scrollbar {
    display: none;
}

/* pé-rotation svg mise a jour */
.rotate {
    transform: rotate(90deg);
}

/* rotation svg */
.accordion-header .bi {
    transition-duration: 0.5s;
}

.accordion-header .collapsed .bi {
    transform: rotate(90deg);
    transition-duration: 0.5s;
}

/* couleurs offcanvas */
.offcanvas-header {
    background-color: #054561;
}

.offcanvas-body {
    background-color: #076791;
}

/* XS */
@media (max-width:575.98px) {
    /* icone coupe modal */
    .taille {
        width: 38px;
        height: 38px;
        min-width: 35px;
        min-height: 35px;
    }

    .header-menu {
        position: absolute;
        width: 60px;
        top: 35px;
        right: 0px;
    }

    .header-logo {
        position: absolute;
        width: 90px;
        top: 5px;
        left: -9px;
    }

    .header-titre {
        position: absolute;
        top: 10px;
        left: 52%;
        transform: translateX(-50%);
    }

    .header-titre-texte {
        color: #ffab00;
        font-size: 21px;
        text-shadow: 1px 1px #141111;
        font-weight: bold;
    }

    .header-date {
        position: absolute;
        top: 90px;
        left: 50%;
        transform: translateX(-50%);
    }

    .header-date-texte {
        color: #efece7ef;
        font-size: 12px;
        text-shadow: 1px 1px #141111;
        font-weight: normal;
    }

    .sensor {
        position: absolute;
        top: 0px;
        z-index: 0;
    }

    .accordion-button {
        height: 30px;
        font-family: 'AR One Sans', sans-serif;
        font-size: 15px;
    }

    #background-video {
        height: 300px;
        width: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -2;
    }

    .menu-complet {
        position: relative;
        height: 495px;
        display: flex;
        justify-content: center;
        z-index: 1;
        top: 120px;
    }

    #taille-video {
        /* taille et position */
        width: 95vw;
        height: 54vw;
        position: relative;
        left: 0px;
        top: 0px;
    }

    #fond-video {
        position: relative;
        width: 95vw !important;
        height: 54vw !important;
        border-image-source: url('https://association590.fr/img-index/fond-video-rond.png');
        border-image-repeat: stretch;
        border-image-slice: 100;
        border-image-width: 15px;
        border-image-outset: 15px;
        background-color: #ededed;
        bottom: 1.8vh;
    }

    .accordion {
        /* position */
        position: relative;
        z-index: 1;
        left: 0px;
        top: -15px;
    }

    #fond-acordion {
        width: 680px;
        height: 280px;
        border-image-source: url('https://association590.fr/img-index/fond-acordion-rond.png');
        border-image-repeat: stretch;
        border-image-slice: 100;
        border-image-width: 100px;
        border-image-outset: 15px;
    }

    .footer-ligne {
        position: relative;
        top: 43vw;
    }

    .footer-social {
        position: relative;
        top: 39vw !important;
    }

    .social-svg {
        width: 2em;
    }

    .social-paypal {
        width: 2em;
    }

    .footer-logo {
        height: 23px;
        position: relative;
        top: 8px;
    }
}

/* SM */
@media (min-width:576px) and (max-width:767.98px) {
    .autre-que-xs {
        /* ajustement automatique en fonction de la hauteur de master-modal.png */
        height: 1242px;
        position: sticky;
    }

    .hauteur-boite-scroll {
        height: 981px;
    }

    .position-modal {
        position: relative;
        top: -810px;
    }

    .header-modal {
        position: relative;
        top: 17px;
        left: -73px;
        font-size: 17px;
        font-weight: bolder;
    }

    .copyright {
        position: absolute;
        top: 1px;
        right: 6vw;
    }

    .header-menu {
        position: absolute;
        width: 100px;
        top: 40px;
        right: 0px;
    }

    .header-logo {
        position: absolute;
        width: 130px;
        top: 10px;
        left: 0px;
    }

    .header-titre {
        position: absolute;
        top: 10px;
        left: 52%;
        transform: translateX(-50%);
    }

    .header-titre-texte {
        color: #ffab00;
        font-size: 35px;
        text-shadow: 1px 1px #141111;
        font-weight: bold;
    }

    .header-date {
        position: absolute;
        top: 160px;
        left: 50%;
        transform: translateX(-50%);
    }

    .header-date-texte {
        color: #efece7ef;
        font-size: 20px;
        text-shadow: 1px 1px #141111;
        font-weight: normal;
    }

    .sensor {
        position: absolute;
        top: 0px;
        z-index: 0;
    }

    .accordion-button {
        height: 40px;
        font-family: 'AR One Sans', sans-serif;
        font-size: 19px;
    }

    .social-svg {
        width: 3em;
        height: 3em;
    }

    .social-paypal {
        width: 3em;
        height: 3em;
    }

    #background-video {
        height: 300px;
        width: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -2;
    }

    .menu-complet {
        position: relative;
        height: 750px;
        display: flex;
        justify-content: center;
        z-index: 1;
        top: 210px;
    }

    #taille-video {
        /* taille et position */
        width: 93vw;
        height: 52vw;
        max-width: 644px;
        max-height: 364px;
        position: relative;
        left: 18px;
        top: 0px;
    }

    #fond-video {
        position: relative;
        top: -16px;
        width: 680px;
        height: 52vw;
        max-height: 364px;
        border-image-source: url('https://association590.fr/img-index/fond-video-rond.png');
        border-image-repeat: stretch;
        border-image-slice: 100;
        border-image-width: 100px;
        border-image-outset: 17px;
        background-color: #ededed;
    }

    .accordion {
        /* position */
        position: relative;
        z-index: 1;
        left: 0px;
        top: 0px;
    }

    #fond-acordion {
        width: 680px;
        height: 350px;
        border-image-source: url('https://association590.fr/img-index/fond-acordion-rond.png');
        border-image-repeat: stretch;
        border-image-slice: 100;
        border-image-width: 100px;
        border-image-outset: 17px;
    }

    .footer-ligne {
        position: relative;
        top: 208px;
    }

    .footer-social {
        position: relative;
        top: 199px;
    }

    .social-svg {
        width: 2em;
    }

    .social-paypal {
        width: 2em;
    }

    .footer-logo {
        height: 29px;
        position: relative;
        top: 6px;
    }
}

/* MD */
@media (min-width:768px) and (max-width:991.98px) {
    .autre-que-xs {
        /* ajustement automatique en fonction de la hauteur de master-modal.png */
        height: 1242px;
        position: sticky;
    }

    .hauteur-boite-scroll {
        height: 910px;
    }

    .position-modal {
        position: relative;
        top: -88px;
    }

    .header-modal {
        position: relative;
        top: 17px;
        left: -73px;
        font-size: 17px;
        font-weight: bolder;
    }

    .copyright {
        position: absolute;
        top: 0px;
        right: 3vw;
    }

    .header-menu {
        position: absolute;
        width: 110px;
        top: 70px;
        right: 50px;
    }

    .header-logo {
        position: absolute;
        width: 170px;
        top: 10px;
        left: 15px;
    }

    .header-titre {
        position: absolute;
        top: 10px;
        left: 52%;
        transform: translateX(-50%);
    }

    .header-titre-texte {
        color: #ffab00;
        font-size: 40px;
        text-shadow: 1px 1px #141111;
        font-weight: bold;
    }

    .header-date {
        position: absolute;
        top: 200px;
        left: 50%;
        transform: translateX(-50%);
    }

    .header-date-texte {
        color: #efece7ef;
        font-size: 25px;
        text-shadow: 1px 1px #141111;
        font-weight: normal;
    }

    .sensor {
        position: absolute;
        top: 0px;
        z-index: 0;
    }

    .accordion-button {
        height: 40px;
        font-family: 'AR One Sans', sans-serif;
        font-size: 19px;
    }

    #background-video {
        height: 300px;
        width: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -2;
    }

    .menu-complet {
        position: relative;
        height: 10px;
        display: flex;
        justify-content: center;
        z-index: 1;
        top: 250px;
    }

    #taille-video {
        /* taille et position */
        width: 680px;
        height: 382px;
        position: relative;
        left: 0px;
        top: -25px;
    }

    #fond-video {
        position: relative;
        top: 50px;
        width: 680px;
        height: 380px;
        border-image-source: url('https://association590.fr/img-index/fond-video-rond.png');
        border-image-repeat: stretch;
        border-image-slice: 100;
        border-image-width: 100px;
        border-image-outset: 15px;
        background-color: #ededed;
    }

    .accordion {
        /* position */
        position: relative;
        z-index: 1;
        left: 0px;
        top: -20px;
    }

    #fond-acordion {
        width: 680px;
        height: 350px;
        border-image-source: url('https://association590.fr/img-index/fond-acordion-rond.png');
        border-image-repeat: stretch;
        border-image-slice: 100;
        border-image-width: 100px;
        border-image-outset: 15px;
    }

    .footer-ligne {
        position: relative;
        top: 1070px;
    }

    .footer-social {
        position: relative;
        top: 1040px;
    }

    .social-svg {
        width: 3em;
        height: 2.5em;
    }

    .social-paypal {
        width: 2.5em;
        height: 2.5em;
    }

    .footer-logo {
        height: 29px;
        position: relative;
        top: 6px;
    }

    .footer-logo {
        height: 29px;
        position: relative;
        top: 6px;
    }
}

/* LG */
@media (min-width:992px) and (max-width:1199.98px) {
    .autre-que-xs {
        /* ajustement automatique en fonction de la hauteur de master-modal.png */
        height: 1242px;
        position: sticky;
    }

    .hauteur-boite-scroll {
        height: 815px;
    }

    .position-modal {
        position: relative;
        top: -87px;
    }

    .header-modal {
        position: relative;
        top: 17px;
        left: -73px;
        font-size: 17px;
        font-weight: bolder;
    }

    .copyright {
        position: absolute;
        top: 0px;
        right: 10px;
    }

    .header-menu {
        position: absolute;
        width: 110px;
        top: 70px;
        right: 50px;
    }

    .header-logo {
        position: absolute;
        width: 180px;
        top: 10px;
        left: 15px;
    }

    .header-titre {
        position: absolute;
        top: 10px;
        left: 52%;
        transform: translateX(-50%);
    }

    .header-titre-texte {
        color: #ffab00;
        font-size: 70px;
        text-shadow: 1px 1px #141111;
        font-weight: bold;
    }

    .header-date {
        position: absolute;
        top: 290px;
        left: 50%;
        transform: translateX(-50%);
    }

    .header-date-texte {
        color: #efece7ef;
        font-size: 25px;
        text-shadow: 1px 1px #141111;
        font-weight: normal;
    }

    .sensor {
        position: absolute;
        top: 0px;
        z-index: 0;
    }

    .accordion-button {
        height: 35px;
        font-family: 'AR One Sans', sans-serif;
        font-size: 20px;
    }

    #background-video {
        height: 400px;
        width: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -2;
    }

    .menu-complet {
        position: relative;
        height: 10px;
        display: flex;
        justify-content: center;
        z-index: 1;
        top: 350px;
    }

    #taille-video {
        /* taille et position */
        width: 480px;
        height: 270px;
        position: relative;
        left: 0px;
        top: -22px;
    }

    #fond-video {
        width: 400px;
        height: 320px;
        border-image-source: url('https://association590.fr/img-index/fond-video.png');
        border-image-repeat: stretch;
        border-image-slice: 180;
        border-image-width: 120px;
        border-image-outset: 15px;
        background-color: #ededed;
    }

    .accordion {
        /* position */
        position: relative;
        left: 97px;
        top: -24px;
    }

    #fond-acordion {
        width: 560px;
        height: 320px;
        border-image-source: url('https://association590.fr/img-index/fond-acordion.png');
        border-image-repeat: stretch;
        border-image-slice: 100;
        border-image-width: 120px;
        border-image-outset: 15px;
    }

    .footer-ligne {
        position: relative;
        top: 750px;
    }

    .footer-social {
        position: relative;
        top: 700px;
    }

    .social-svg {
        width: 2.5em;
        height: 2.5em;
    }

    .social-paypal {
        width: 2.5em;
        height: 2.5em;
    }

    .footer-logo {
        height: 29px;
        position: relative;
        top: 6px;
    }
}

/* XL */
@media (min-width:1200px) and (max-width:1399.98px) {
    .autre-que-xs {
        /* ajustement automatique en fonction de la hauteur de master-modal.png */
        height: 1242px;
        position: sticky;
    }

    .hauteur-boite-scroll {
        height: 821px;
    }

    .position-modal {
        position: relative;
        top: -96px;
    }

    .header-modal {
        position: relative;
        top: 17px;
        left: -73px;
        font-size: 17px;
        font-weight: bolder;
    }

    .footer-logo {
        width: 30px;
    }

    .copyright {
        position: absolute;
        top: 0px;
        right: 10px;
    }

    .header-menu {
        position: absolute;
        width: 110px;
        top: 70px;
        right: 50px;
    }

    .header-logo {
        position: absolute;
        width: 200px;
        top: 10px;
        left: 15px;
    }

    .header-titre {
        position: absolute;
        top: 10px;
        left: 52%;
        transform: translateX(-50%);
    }

    .header-titre-texte {
        color: #ffab00;
        font-size: 70px;
        text-shadow: 1px 1px #141111;
        font-weight: bold;
    }

    .header-date {
        position: absolute;
        top: 290px;
        left: 50%;
        transform: translateX(-50%);
    }

    .header-date-texte {
        color: #efece7ef;
        font-size: 25px;
        text-shadow: 1px 1px #141111;
        font-weight: normal;
    }

    .sensor {
        position: absolute;
        top: 0px;
        z-index: 0;
    }

    .accordion-button {
        height: 38px;
        font-family: 'AR One Sans', sans-serif;
        font-size: 20px;
    }

    .social-svg {
        width: 3em;
        height: 3em;
    }

    .social-paypal {
        width: 3em;
        height: 3em;
    }

    #background-video {
        height: 400px;
        width: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -2;
    }

    .menu-complet {
        position: relative;
        height: 10px;
        display: flex;
        justify-content: center;
        z-index: 1;
        top: 350px;
    }

    #taille-video {
        /* taille et position */
        width: 600px;
        height: 340px;
        position: relative;
        left: 0px;
        top: -22px;
    }

    #fond-video {
        width: 600px;
        height: 340px;
        border-image-source: url('https://association590.fr/img-index/fond-video.png');
        border-image-repeat: stretch;
        border-image-slice: 100;
        border-image-width: 100px;
        border-image-outset: 15px;
        background-color: #ededed;
    }

    .accordion {
        /* position */
        position: relative;
        left: 47px;
        top: -24px;
    }

    #fond-acordion {
        width: 550px;
        height: 340px;
        border-image-source: url('https://association590.fr/img-index/fond-acordion.png');
        border-image-repeat: stretch;
        border-image-slice: 100;
        border-image-width: 100px;
        border-image-outset: 15px;
    }

    .footer-ligne {
        position: relative;
        top: 750px;
    }

    .footer-social {
        position: relative;
        top: 700px;
    }
}

/* XXL */
@media (min-width:1400px) {
    .autre-que-xs {
        /* ajustement automatique en fonction de la hauteur de master-modal.png */
        height: 1242px;
        position: sticky;
    }

    .hauteur-boite-scroll {
        height: 970px;
    }

    .position-modal {
        position: relative;
        top: -96px;
    }

    .header-modal {
        position: relative;
        top: 17px;
        left: -73px;
        font-size: 17px;
        font-weight: bolder;
    }

    .footer-logo {
        width: 30px;
    }

    .copyright {
        position: absolute;
        top: 0px;
        right: 10px;
    }

    .header-menu {
        position: absolute;
        width: 110px;
        top: 70px;
        right: 50px;
    }

    .header-logo {
        position: absolute;
        width: 10vw !important;
        top: 10px;
        left: 15px;
        max-width: 9.486vw !important;
    }

    .header-titre {
        position: absolute;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
    }

    .header-titre-texte {
        color: #ffab00;
        font-size: 70px;
        text-shadow: 1px 1px #141111;
        font-weight: bold;
    }

    .header-date {
        position: absolute;
        top: 290px;
        left: 50%;
        transform: translateX(-50%);
    }

    .header-date-texte {
        color: #efece7ef;
        font-size: 25px;
        text-shadow: 1px 1px #141111;
        font-weight: normal;
    }

    .sensor {
        position: absolute;
        top: 0px;
        z-index: 0;
    }

    .accordion-button {
        height: 44px;
        font-family: 'AR One Sans', sans-serif;
        font-size: 20px;
    }

    .social-svg {
        width: 3em;
        height: 3em;
    }

    .social-paypal {
        width: 3em;
        height: 3em;
    }

    #background-video {
        height: 400px;
        width: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -2;
    }

    .menu-complet {
        position: relative;
        height: 10px;
        display: flex;
        justify-content: center;
        z-index: 1;
        top: 350px;
    }

    #taille-video {
        /* taille et position */
        width: 690px;
        height: 390px;
        position: relative;
        left: -15px;
        top: -15px;
    }

    #fond-video {
        width: 680px;
        height: 390px;
        border-image-source: url('https://association590.fr/img-index/fond-video.png');
        border-image-repeat: stretch;
        border-image-slice: 100;
        border-image-width: 100px;
        border-image-outset: 15px;
        background-color: #ededed;
    }

    .accordion {
        /* position */
        position: relative;
        left: 56px;
        top: -24px;
    }

    #fond-acordion {
        width: 690px;
        height: 390px;
        border-image-source: url('https://association590.fr/img-index/fond-acordion.png');
        border-image-repeat: stretch;
        border-image-slice: 100;
        border-image-width: 100px;
        border-image-outset: 15px;
    }

    .footer-ligne {
        position: relative;
        top: 890px;
    }

    .footer-social {
        position: relative;
        top: 780px;
    }
}