@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
#background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

    @import url('https://fonts.cdnfonts.com/css/sixpack');
    .presentation {
        color: #f8f4f4a8;
        text-decoration: none;
        text-transform: uppercase;
        /* font-family: 'Brownist'; */
        padding: 15px;
        font-weight: 2px;
        line-height: 10px;
        font-size: 10px;
        font-family: 'sixpack', sans-serif;
        text-align: center;
    }
    
    .titre1 {
        /* background: linear-gradient(rgba(255, 255, 255, 0.037), rgba(0, 0, 0, .5)), url(https://www.youtube.com/embed/uclgRkozGDY?si=Kl3XU8ywYai7f-lI); */
        font-family: system-ui, 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
        background-attachment: fixed;
        background-position: center;
        font-weight: 1;
        line-height: 30px;
        width: 100%;
        height: 100%;
        align-items: center;
        left: 50%;
        padding: 8px;
        color: #c4cfde;
    }

    .tabs {
        width: 100%;
        height: 100%;
        margin: auto;
        margin-top: 65px;
        display: flex;
        align-items: center;
        box-shadow: 10px 10px 19px #000000, -10px -10px 19px #000000;
        overflow: hidden;
        -o-border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
        font-size: 25px;
        background-color: #0704048f;
    }
    
    .tabs li {
        /* background-color: #000000; */
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-family: 'Poppins', sans-serif;
        -o-transition: .5s;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -ms-transition: .5s;
        transition: .5s;
        cursor: pointer;
        font-size: 17px;
    }
    
    .tabs li:hover {
        background: linear-gradient(145deg, #010103, #000000);
        box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
        color: #e90505e3;
        position: relative;
        z-index: 1;
        border-radius: 10px;
    }
    
    .active {
        background: linear-gradient(145deg, #1e2024, #23272b);
        box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
        color: #e90505e3 !important;
        position: relative;
        z-index: 1;
        border-radius: 10px;
    }
    
    .contents {
        width: 100%;
        margin: auto;
        margin-top: 50px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 60px;
    }
    
    .box {
        gap: 20px;
        background: linear-gradient(145deg, #1e2024, #23272b);
        box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
        -o-border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
        padding: 20px;
        width: 100%;
        -webkit-animation: moving 1s ease;
        animation: moving 1s ease;
    }
    
    .box img {
        width: 400px;
        -o-border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }
    
    .box h3 {
        color: #c4cfde;
        font-family: 'Poppins', sans-serif;
        font-size: 2rem;
        margin-bottom: 15px;
        font-size: medium;
    }
    
    .box p {
        color: #c4cfde;
        opacity: .5;
        font-family: 'Poppins', sans-serif;
        font-size: 1rem;
    }
    
    .show {
        display: flex;
    }
    
    .hide {
        display: none;
    }
    
    @keyframes moving {
        from {
            -o-transform: translateX(-50px);
            -webkit-transform: translateX(-50px);
            -moz-transform: translateX(-50px);
            -ms-transform: translateX(-50px);
            transform: translateX(-50px);
            opacity: 0;
        }
        to {
            -o-transform: translateX(0px);
            -webkit-transform: translateX(0px);
            -moz-transform: translateX(0px);
            -ms-transform: translateX(0px);
            transform: translateX(0px);
            opacity: 1;
        }
    }
    /* galerie photo */
    .gallery {
        position: relative;
        perspective: 1500px;
        transform-style: preserve-3d;
        width: 200px;
        aspect-ratio: 1;
        /* background: rgba(10, 0, 0, 0.52); */
        transform: rotate(45deg);
    }
    
    .gallery .image {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 4px solid rgba(248, 6, 6, 0.703);
        box-sizing: border-box;
        transition: 1s ease;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: calc(var(--total) - var(--i));
        overflow: hidden;
    }
    
    .gallery .image img {
        --rotate: rotate(-45deg);
        transform: var(--rotate);
        transition: .3s ease;
    }
    
    .gallery .image:nth-of-type(odd) {
        --hovermove: -100px, 100px;
        --translate: calc((var(--i) - 1) * -70px), calc((var(--i) - 1) * 70px);
        --tZ: calc((var(--i) - 1) * -350px);
        animation: deploy 1.5s ease forwards;
    }
    
    .gallery .image:nth-of-type(even) {
        --hovermove: 100px, -100px;
        --translate: calc(var(--i) * 70px), calc(var(--i) * -70px);
        --tZ: calc(var(--i) * -350px);
        animation: deploy 1.5s ease forwards;
    }
    
    .gallery .image:hover img,
    .gallery .image.only-hover img {
        transform: var(--rotate) scale(1.1);
    }
    
    .gallery .image.only-hover {
        animation: clickAnimation 1s ease;
        z-index: 9;
    }
    
    .gallery.hidden-gallery .image {
        animation: close 1.5s ease forwards;
    }
    
    @keyframes deploy {
        from {
            transform: translate(0px, 0px) translateZ(0px);
        }
        to {
            transform: translate(var(--translate)) translateZ(var(--tZ));
        }
    }
    
    @keyframes close {
        from {
            transform: translate(var(--translate)) translateZ(var(--tZ));
        }
        to {
            transform: translate(0px, 0px) translateZ(0px);
        }
    }
    
    @keyframes clickAnimation {
        0% {
            transform: translate(var(--translate)) translateZ(var(--tZ));
        }
        20% {
            transform: translate(var(--hovermove)) translateZ(0px);
        }
        100% {
            transform: translate(calc(var(--i) * 0px), calc(var(--i) * 0px));
        }
    }
    .img {
        position: relative;
        cursor: pointer;
        transition: transform 0.3s ease, z-index 0.3s ease;
      }
      
      .img.active {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1.5);
        z-index: 999;
        box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
        border-radius: 15px;
      }
      .image.active-first img {
        border: 3px solid red;
        box-shadow: 0 0 15px red;
        transition: border 0.3s ease, box-shadow 0.3s ease;
      }
      
    /* fin galerie photo */
    /* Pourqui debut*/
    
    .TITRE-OBJECTIFS {
        color: #e3311dc8;
        text-decoration: none;
        text-transform: uppercase;
        font-family: 'Courier New', Courier, monospace;
        /* font-family: "Fira Sans", Arial, sans-serif; */
        width: 100%;
        /* box-shadow: 0 50px 50px rgba(243, 5, 5, 0.356); */
        padding: 30px;
        font-family: 'Inner Vintage', sans-serif;
        align-items: center;
        text-align: center;
        font-size: 25px;
    }
    

    /* pourquifin */
  
    /* cadre lien */
    
    .accueil2 {
        display: flex;
        height: 80%
    }
    
    html {
        height: 100%;
        scroll-padding-top: calc(4.5rem - 1px);
    }
    
    .carousel-caption {
        background-color: rgba(0, 0, 0, 0.693);
        padding: 20px;
        border-radius: .5rem;
    }
 
    
    /* 🔹 Bannière de cookies */
    .cookie-banner {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: #222;
        color: rgb(254, 250, 250);
        padding: 15px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        max-width: 600px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1000;
    }
    
    .cookie-banner p {
        margin: 0;
        font-size: 14px;
    }
    
    .cookie-buttons {
        display: flex;
        gap: 10px;
    }
    
    .cookie-buttons button {
        border: none;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
    }
    
    #accept-cookies {
        background: #28a745;
        color: white;
    }
    
    #customize-cookies {
        background: #130f05d3;
        color: rgb(247, 244, 244);
    }
    
    #reject-cookies {
        background: #ff041d;
        color: white;
    }
    
    .cookie-buttons button:hover {
        opacity: 0.8;
    }
    
    /* 🔹 Popup de personnalisation */
    .cookie-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(7, 7, 7, 0.88);
        padding: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        width: 90%;
        max-width: 400px;
        z-index: 1001;
    }
    
    .cookie-modal h2 {
        margin-top: 0;
        font-size: 18px;
    }
    
    .cookie-modal label {
        display: block;
        margin: 10px 0;
        font-size: 14px;
    }
    
    .cookie-modal-buttons {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
    }
    
    .cookie-modal-buttons button {
        padding: 8px 12px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
    }
    
    #save-cookies {
        background: #28a745;
        color: white;
    }
    
    #close-modal {
        background: #6c757d;
        color: rgb(6, 6, 6);
    }
    
    /* 🔹 Bouton "Gérer mes cookies" */
    #manage-cookies {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }
    
    #manage-cookies button {
        background: #ff1e00;
        color: rgb(16, 13, 13);
        padding: 8px 12px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
    }
    
    /* 🔹 Masquer les éléments */
    .hidden {
        display: none;
    }
/* fin cookies */
/* Réinitialisation */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
background-color: #070404;
color: #f5f1f1;
padding: 20px;
}
/* navbar */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
font-size: 16px;
}

/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #131313;
padding: 15px 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar .logo {
font-size: 22px;
font-weight: bold;
color: #333;
}

.nav-links {
display: flex;
list-style: none;
}

.nav-links li {
margin: 0 15px;
}

.nav-links a {
text-decoration: none;
color: #faf6f6;
font-weight: bold;
padding: 5px 10px;
transition: color 0.3s;
}

.nav-links a:hover {
color: #e60000;
}

.menu-toggle {
display: none;
font-size: 24px;
cursor: pointer;
}

@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
width: 100%;
background-color: #f8f8f8;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nav-links.active {
display: flex;
}

.nav-links li {
margin: 10px 0;
}

.menu-toggle {
display: block;
}
}

/* Section Nos Services */
.services {
text-align: center;
padding: 50px 20px;

background-size: cover;  /* L'image couvre toute la section */
background-position: center; /* Centrage */
background-repeat: no-repeat; /* Ne pas répéter */
color: white; /* Texte en blanc pour la lisibilité */
background-image: url(/image/conseil.png);
}

.services h2 {
font-size: 28px;
margin-bottom: 20px;
}

.services-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}

.service-box {
background: #f8f8f8;
padding: 20px;
width: 250px;
text-align: center;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.service-box img {
width: 50px;
margin-bottom: 10px;
}

.service-box h3 {
color: #e60000;
}