@font-face {
                font-family: 'Baron Neue';
                src: url('../font/baron-neue/Baron\ Neue.otf') format('opentype');
            }
            
            @font-face {
                font-family: 'Ubuntu-Regular';
                src: url('../font/ubuntu/Ubuntu-MediumItalic.ttf') format('opentype');
            }
            
            * {
                margin: 0%;
                padding: 0%;
                font-family: 'Ubuntu-Medium';
            }
            
            h1,
            h2,
            h3 {
                font-family: 'Baron Neue';
            }
            
            * {
                font-size: 2.6vh;
            }
            
            h1,
            h2,
            h3 {
                margin-bottom: .5vh;
                font-size: 5vh;
            }
            /*Poster*/
            
            .deco {
                border: 1px solid #000;
                display: flex;
                position: relative;
                justify-content: space-between;
                width: 80vw;
                padding: 3vh;
            }
            
            .deco h1 {
                font-size: 2vw;
            }
            
            .deco aside:nth-child(2) {
                width: 70vw;
                border: 1px solid #000;
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                padding-top: 10px;
                padding-bottom: 10px;
                justify-content: center;
            }
            
            .suit div {
                background: #000;
                width: 20vw;
            }
            
            .poster div {
                width: 90%;
                height: 100%;
                border: 1px solid #000;
            }
            
            .suit div img {
                width: 100px;
                height: 100px;
            }
            
            .poster aside:nth-child(1) div {
                width: 20vw;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            /*Gallery*/
            
            #container-gallery {
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 80vw;
                height: fit-content!important;
                margin-left: 10vw;
                overflow: hidden;
            }
            
            #container-gallery aside:nth-child(1) {
                display: flex;
                height: 100%;
                width: 50%;
            }
            
            #container-gallery aside:nth-child(1) img {
                border-radius: 12px;
                height: 100%;
            }
            
            #container-gallery aside:nth-child(2) {
                display: flex;
                flex-direction: column;
                width: 50%;
                height: fit-content !important;
            }
            
            .gal2 {
                display: flex;
                flex-direction: column;
                justify-self: left;
                text-align: left;
                align-items: first baseline;
                margin-left: 20%;
            }
            
            .gal2 div h1 {
                margin-top: 10px;
                text-align: left;
            }
            
            .gal2 div {
                display: flex;
                flex-direction: column;
                width: 80%;
                height: 50%;
            }
            
            .gal2 div:nth-child(2) {
                margin-top: 4vh;
            }
            
            .gal2 div img {
                border-radius: 12px;
                width: 50% !important;
                height: 100%;
            }
            /*background: radial-gradient(circle at bottom right, #fbc600 30%, #fff 50%);*/
            
            #aes {
                backdrop-filter: blur(15px);
                overflow: hidden;
                padding-top: 70vh;
                width: 99vw;
            }
            
            .hidden {
                opacity: 0;
            }
            
            .message {
                position: absolute;
                left: 45vw;
                padding: 2vh;
                color: #fff;
                width: 25vw;
                height: 20vh;
                border-radius: 4px;
                border-bottom-left-radius: 40px;
                clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
                background: rgba(118, 118, 118, 0.347);
                backdrop-filter: blur(15px);
            }
            
            .intro {
                position: relative
            }
            
            .perso {
                position: absolute;
                left: -1vw;
                top: 20vh;
                height: 80vh;
                width: 90vw;
            }
            /*Entete*/
            /*box-shadow: inset 0px -300px 100px -30px #fbc600;*/
            /*header {
                position: relative;
                background: url('../images/Image develppeur/Image develppeur/renewable-energy-concept-solar-panels-forest-sunset-ecofriendly-posters-green-design.jpg') fixed no-repeat center;
                background-size: cover;
                height: 100vh;
                width: 100vw;
            }
            
            header h1 {
                margin-top: 50vh;
                margin-left: 10vw;
            }*/
            
            #second-sect {
                background: #fbc50039;
                backdrop-filter: blur(20px);
                padding-bottom: 5vh;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            }
            
            #second-sect h1 {
                font-size: 8em;
            }
            
            #second-sect h2 {
                text-align: center;
                font-size: 2vw;
            }
            
            .third {
                margin: auto;
                position: relative;
                display: flex;
                flex-wrap: wrap;
                padding-top: 15vh;
                padding-left: 10vh;
                padding-right: 10vh;
                margin-bottom: 15vh;
                justify-content: space-between;
            }
            
            .third aside {
                padding: 20px;
                display: flex;
                margin: 0 10px;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                text-align: justify;
                border-radius: 20px;
                box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.1);
                background: #fbc600;
                color: #000;
                backdrop-filter: blur(15px);
                width: 20vw;
            }
            
            #prev,
            #next {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background-color: #fbc600;
                color: white;
                border: none;
                padding: 10px 20px;
                cursor: pointer;
            }
            
            #prev,
            #next {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background-color: #3498db;
                color: white;
                border: none;
                padding: 10px 20px;
                cursor: pointer;
            }
            
            #prev {
                left: 10px;
            }
            
            #next {
                right: 10px;
            }
            
            .third h1 {
                font-size: 40px;
                font-weight: 400;
            }
            
            .etiquette_2,
            .etiquette_3 {
                margin-top: 10vh;
            }
            
            main {
                border-radius: 20px;
                background: url('../images/chaud.jpg') fixed no-repeat center;
                background-size: cover;
            }
            
            main h1 {
                text-align: center;
            }
            
            p {
                text-align: justify;
            }
            
            .index2 {
                width: 100vw;
                text-align: center;
            }
            
            .item-defilement img {
                width: 100vw;
            }
            
            .index {
                width: 100%;
                margin-bottom: -13vh;
                margin-top: 10vh;
            }
            
            #third p {
                text-align: right;
            }
            
            .third aside h1 {
                font-size: 22px;
            }
            
            @media (max-width:600px) {
                * {
                    font-size: x-small;
                }
                .menu li a {
                    font-size: x-small;
                }
                .menu li a:hover {
                    font-size: x-small;
                    color: rgb(4, 62, 149);
                }
                #container-gallery {
                    display: flex;
                    flex-direction: column;
                }
            }
            
            #cover {
                position: relative;
                width: 100vw;
            }
            
            .third aside:hover {
                background: #008eed;
                color: #fff;
                transform: translate(1.3);
                box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.1);
            }
            
            .perso {
                margin-top: -50vh;
                width: 100vw;
                border-radius: 20px;
                position: relative;
            }
            
            .perso img {
                position: absolute;
                border-radius: 20px;
                top: -20vh;
                left: 40vw;
                height: 80vh;
            }
            /*Temoignage*/
            
            .temoignage {
                padding: 20px;
                width: 97%;
                margin: 20px 0 0px 20px;
                height: 60vh;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
            }
            
            .temoignage aside {
                width: 40vw;
                height: 40vh;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: row;
            }
            
            .temoignage aside img {
                margin-left: 10px;
                border-radius: 20px;
                width: 50%;
                height: 100%;
            }
            
            .temoignage aside .content_temoignage {
                width: 40%;
                margin-left: 10px;
                height: 100%;
                display: flex;
                text-align: left;
                flex-direction: column;
                justify-content: space-around;
            }
            
            .temoignage aside .content_temoignage img {
                width: 30%;
                height: 30%;
            }
            
            .temoignage aside .content_temoignage h1 {
                text-align: left;
                font-size: large;
            }
            
            .temoignage aside .content_temoignage p {
                font-size: 1.2vw;
                width: 80%;
                text-align: left;
            }
            /*diaporama*/
            
            .sld {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100vw;
            }
            
            .slider-container {
                background: url('../images/DIGITAL PIK/abstract-smooth-brown-wall-background-layout-designstudioroomweb-templatebusiness-report-with-smooth-circle-gradient-color.jpg') no-repeat center;
                background-size: cover;
                width: 100vw;
                height: 70vh;
            }
            
            .Slider {
                position: relative;
                left: 40vw;
                top: 20%;
                background: transparent;
                width: 20vw;
                transform-style: preserve-3d;
                animation: rotate 30s linear infinite;
            }
            
            @keyframes rotate {
                0% {
                    transform: perspective(1000000px) rotateY(0deg);
                }
                100% {
                    transform: perspective(1000000px) rotateY(360deg);
                }
            }
            
            .Slider span {
                position: absolute;
                top: 0;
                left: 0;
                transform-origin: center;
                transform-style: preserve-3d;
                transform: rotateY(calc(var(--i)*45deg)) translateZ(350px);
            }
            
            .Slider span img {
                position: relative;
                top: 0;
                left: 0;
                border-radius: 25%;
                width: 20vw;
                aspect-ratio: 1;
                object-fit: cover;
                transition: 2s;
            }
            
            .Slider span:hover img {
                transform: translateY(-20px) scale(1.2);
            }
            
            @keyframes slide {
                0% {
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
                15% {
                    opacity: 1;
                }
                25% {
                    opacity: 0;
                }
            }
            
            .slider span {
                animation: slide 21s infinite;
            }
            
            .slider span:nth-child(1) {
                animation-delay: 0s;
            }
            
            .slider span:nth-child(2) {
                animation-delay: 3s;
            }
            
            .slider span:nth-child(3) {
                animation-delay: 6s;
            }
            
            .slider span:nth-child(4) {
                animation-delay: 9s;
            }
            
            .slider span:nth-child(5) {
                animation-delay: 12s;
            }
            
            .slider span:nth-child(6) {
                animation-delay: 15s;
            }
            
            .slider span:nth-child(7) {
                animation-delay: 18s;
            }
            /*Date*/
            
            .date {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                width: 99vw;
                margin-top: 5%;
                background: #fff;
            }
            
            .date div p {
                font-size: 40px;
                font-weight: 800;
                color: #fff;
                align-content: center;
                text-align: center;
                margin: 20px;
                width: 140px;
                height: 140px;
                border-radius: 50%;
                background: #0070a0;
            }
            /*Affiche*/
            
            .afc {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                width: 99vw;
                margin-top: 5%;
                margin-bottom: 5%;
                background: #fff;
            }
            
            .afc div img {
                width: 140px;
                height: 200px;
            }
            /* Courbe*/
            /*Banner*/
            
            #banner {
                padding-top: 5vh;
                color: #fff;
                width: 99vw;
                border-radius: 20px;
                height: 52vh;
                background: #008eed;
            }
            
            #banner .container {
                background: url('../images/IMG_1944.jpeg') scroll no-repeat center;
                background-size: cover;
            }
            
            @media (max-width:600px) {
                #toggle-btn {
                    display: block;
                    z-index: 1;
                    top: 4vh;
                    right: 2vw;
                    width: 10%;
                    position: absolute;
                }
                #second-sect h2 {
                    margin-top: 5vh;
                    font-size: 4vw;
                }
                .btn_icon {
                    display: none;
                }
                #fer h1 {
                    font-size: 5vw;
                }
                .menu {
                    width: 100%;
                    height: 50vh;
                }
                .menu li a {
                    font-size: 1.2vw;
                }
                .menu li a:hover {
                    color: rgb(4, 62, 149);
                }
                #container-gallery {
                    display: flex;
                    flex-direction: column;
                }
                #container-gallery aside:nth-child(1) {
                    width: 100%;
                }
                #container-gallery aside:nth-child(1) img {
                    width: 100%;
                }
                #container-gallery aside:nth-child(2) {
                    display: flex;
                    width: 100%;
                    margin: 0;
                    justify-content: space-around;
                    flex-direction: row;
                }
                .gal2 {
                    margin-top: -8vh;
                }
                .gal2 div p {
                    width: 70%;
                }
                .gal2 div:nth-child(2) img {
                    height: 50vh;
                    margin-left: 5%;
                }
                .third aside {
                    height: 30vh;
                    width: 70%;
                }
                .third aside p,
                .third aside h1 {
                    margin: 0;
                }
                .etiquette_4 {
                    margin-top: 10vh;
                }
            }
            /*.container {
    position: relative;
    width: 100%;
    height: 200px;
    /* Hauteur de la zone d'animation */
            /*
overflow: hidden;




}
.curve {
    position: absolute;
    width: 200%;
    height: 100px;
    background: transparent;
    border: 1px #FFD700;
    clip-path: polygon(0 100%, 50% 0%, 100% 100%);
    animation: move 4s ease-in-out infinite;
}
.curve:nth-child(1) {
    top: 20%;
    animation-delay: 0s;
}
.curve:nth-child(2) {
    top: 50%;
    animation-delay: 1s;
}
.curve:nth-child(3) {
    top: 80%;
    animation-delay: 2s;
}

/*@keyframes move {
    0% {
        transform: translateX(-100%)rotate(-45deg);
        
    }
    50% {
        transform: translateX(0)rotate(0deg);
        
    }
    100% {
        transform: translateX(100%)rotate(45deg);
        
    }
}*/