.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    /* Supprime l'espace des marges externes */
}

[class*="col-"] {
    min-height: 80px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 0, 0, 0);
    background-color: rgba(255, 0, 0, 0);
}

/* Largeur des colonnes */

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

img {
    max-width: 100%;
}



/* Variables */


@font-face {
    font-family: clashdisplay;
    /* set name */
    src: url(FONT/ClashDisplay-Bold.ttf);
    /* url of the font */
}

:root {
    --Brown: rgba(73, 26, 8, 1);
    --White: rgb(255, 255, 255);
    --Purple: rgba(155, 162, 255, 1);

    --Titre-font: "clashdisplay";
    --Titre-size: 64px;
    --Titre-weight: 800;
    --Titre-margin: 0;
    --Titre-color: var(--Brown);


    --Sous-titre-font: "clashdisplay";
    --Sous-titre-size: 20px;
    --Sous-titre-weight: 800;
    --Sous-titre-margin: 0;
    --Sous-titre-color: var(--Brown);

    --Text-font: "Akshar";
    --Text-size: 16px;
    --Text-weight: 700;
    --Text-margin: 0;
    --Text-color: var(--Brown);

    --headline-5-font: "Akshar";
    ---headline-5-size: 16px;
    --headline-5-weight: 700;
    --headerline-5-margin: 0;
    --Titre-color: var(--Brown);
}



.body {
    background-color: var(--white);
}


/* Header */



h4 {
    font-family: var(--Headline-4-font);
    font-size: var(--Headline-4-size);
    font-weight: var(--Headline-4-weight);
    margin: var(--Headline-4-margin);
    color: var(--white)
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
    padding: 0px 50px;


}



nav ul {
    display: flex;
    list-style: none;
    gap: 50px;
    display: flex;
    align-items: center;


}

nav .btn-text {
    text-decoration: none;
    font-family: var(--Text-font);
    color: var(--Text-color);
    font-weight: 900;
    padding-bottom: 5px;
    padding-top: 5px;
}


nav .btn-text:hover {
    text-decoration: none;
    font-family: var(--Text-font);
    color: var(--Brown);
    font-weight: 900;
    text-decoration: underline;
}





/* Burger caché desktop */
.burger {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

/* Mobile */
@media (max-width: 768px) {

    .burger {
        display: block;
    }

    nav {
        position: absolute;
        top: 70px;
        right: 0;
        background: white;
        width: 100%;
        display: none;
        flex-direction: column;
        text-align: center;
    }

    nav ul {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
    }

    nav.active {
        display: flex;
    }


}





/* Hero */

.hero {
    padding-top: 0px;
    padding-bottom: 0px;
    background-image: url(IMG/fond\ violet\ grain.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}

.hero-histoire {
    padding-top: 0px;
    padding-bottom: 0px;
    background-image: url(IMG/fond\ violet\ grain\ seul.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}



.vid {
    background-image: url(IMG/video\ 1.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 140px;
    padding-bottom: 150px;

}


.hero-main {
    padding-top: 140px;
    padding-bottom: 150px;
    padding-left: 80px;

}



.hero-index {

    background-image: url(IMG/photo\ hero.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 240px;
    padding-bottom: 350px;

}


@media (max-width : 768px) {
    .hero {
        padding-left: 40px;
        padding-right: 40px;
    }
}


.sticker-sac {
    display: flex;
    justify-content: end;
    align-items: end;
}




.btn-1 {
    display: inline-block;
    text-decoration: none;
    color: var(--White);
    background-color: var(--Brown);
    font-family: var(--Text-font);
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 8px;

}

.btn-1:hover {
    background-color: var(--Purple);
    color: var(--White);

}




h1 {
    font-family: var(--Titre-font);
    font-size: var(--Titre-size);
    font-weight: var(--Titre-weight);
    margin: var(--Titre-margin);
    line-height: 60px;
    margin-bottom: 10px;
    color: var(--Brown);

}



h2 {
    font-family: var(--Sous-titre-font);
    font-size: var(--Sous-titre-size);
    font-weight: var(--Sous-titre-weight);
    margin: var(--Sous-titre-margin);
    line-height: 44px;
    margin-bottom: 10px;

    color: var(--Brown);
}

@media (max-width : 768px) {
    h2 {
        font-size: 26px;
        line-height: 30px;
    }
}



p {
    font-family: var(--Text-font);
}

@media (max-width : 768px) {
    p {
        font-size: 11px;
    }
}

h3 {

    font-family: var(--Sous-titre-font);
    font-size: var(--Sous-titre-size);
    color: var(--Brown);

}


.produit {
    padding-bottom: 90px;
    padding-top: 90px;

    background-color: var(--white);
    border-bottom: 2px solid var(--Black);

}

@media (max-width : 768px) {
    .produit {
        padding-left: 40px;
        padding-right: 60px;
        padding-bottom: 60px;
        padding-top: 60px;
    }
}

.faq {
    padding-bottom: 90px;
    padding-top: 90px;

    background-color: var(--white);
    border-bottom: 2px solid var(--Black);

}

.histoire {
    padding-bottom: 90px;
    padding-top: 90px;
    background-color: var(--white);
    border-bottom: 2px solid var(--Black);

}

.pourquoi {
    padding-bottom: 90px;
    padding-top: 120px;

    background-color: var(--white);
    border-bottom: 2px solid var(--Black);

}

@media (max-width : 768px) {
    .faq {
        padding-left: 40px;
        padding-right: 60px;
        padding-bottom: 60px;
        padding-top: 60px;
    }
}

.produit1 {
    padding-bottom: 100px;
    padding-top: 20px;
    background-color: var(--White);
}




/* cards */

.info-cards {
    padding-bottom: 100px;
    padding-top: 44px;
    background-color: var(--White);
    border-bottom: 2px solid var(--Black);

}

@media (max-width : 768px) {
    .photo-cards {
        padding-left: 40px;
        padding-right: 60px;
        padding-bottom: 60px;
        padding-top: 60px;
    }
}

.card {
    position: relative;
    width: 320px;
    background: var(--White);
    border: 1px solid var(--Brown);
    border-radius: 12px;
    overflow: hidden;
    padding: 20px;
    align-content: stretch;

    margin: 30px;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px var(--Purple);

}





.card-body {
    padding: 0px 28px;

}




    .titre-deco>h1,
    .titre-deco>h3 {
        display: flex;
        flex-direction: column;
        text-align: center;

    }

    .deco {
        padding-bottom: 100px;
        padding-top: 100px;
        padding-left: 110px;
        padding-right: 110px;
       

    }
     .elements-deco {
       display: flex;
        flex-direction: column;
        text-align: center;

    }



    /* exposition */


    .section-photo {
        padding-bottom: 0px;

    }

    .a-propos {

        padding-bottom: 50px;
        padding-top: 50px;
        padding-left: 110px;
        padding-right: 110px;
        margin: 0px;
    }

    @media (max-width : 768px) {
        .a-propos {
            padding: 10px;
            padding-top: 10px;
            padding-left: 30px;
            padding-right: 60px;
        }

    }

    .photo-expo {
        display: block;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @media (max-width : 768px) {
        .photo-expo {
            padding: 10px;
            padding-top: 10px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
    }

    .sous-titre {
        display: inline-block;
        background-color: var(--Beige);
        color: var(--Green-1);
        padding: 8px 16px;
        border-radius: 6px;
        font-weight: bold;
        font-size: 14px;


    }

    /* On cache ce qui dépasse */
    .track {
        overflow: hidden;
        padding: 12px 0;
        background-color: var(--White);
    }

    .track span {
        font-family: var(--Titre-font);
        font-size: var(--Titre-size);
        color: var(--Purple);
        font-weight: var(--Titre-weight);
    }

    /* La liste défile grâce à l'animation */
    .items {
        display: flex;
        gap: 2rem;
        white-space: nowrap;
        width: max-content;
        animation: scroll 30s linear infinite;
    }

    /* On met l'animation en pause au survol */
    .items:hover {
        animation-play-state: paused;
    }

    /* L'animation : on translate de -50% car le conten est dupliqué */
    @keyframes scroll {
        from {
            transform: translateX(0%);
        }

        to {
            transform: translateX(-50%);
        }
    }





    /* footer */

    .photo-footer {
        background-image: url(IMG/Footer\ fond.png);
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
        min-height: 85vh;

    }

    .footer {
        background-color: var(--Purple);
        padding-bottom: 44px;
        padding-left: 160px;
        padding-right: 160px;

    }

    @media (max-width : 768px) {
        .footer {
            padding-left: 40px;
            padding-right: 40px;
        }
    }


    .info-footer {
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .footer ul {
        list-style: none;
        padding: 0;
        color: var(--Brown);

    }

    .footer a:not(.btn-1) {
        font-family: var(--Text-font);
        text-decoration: none;
        color: var(--Brown);

    }

    .footer a:hover {

        color: var(--White);

    }

    .footer p {
        color: var(--Brown);
    }






    .reseaux {
        padding-left: 10px;
        padding-right: 30px;
    }

    .contact {
        padding-left: 60px;
        padding-right: 20px;
    }

    .sommaire {
        padding-left: 20px;
        padding-right: 50px;

    }



    .newsletter label {
        display: block;
        margin-bottom: 8px;
        color: #5a2300;
        font-size: 24px;
    }

    .newsletter input[type="email"] {
        width: 100%;
        padding: 10px;
        border: none;
        color: var(--Brown);



    }

    .newsletter input[type="email"]::placeholder {
        color: #999;
        font-family: var(--Text-font);
    }

    .checkbox-group {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
    }

    .checkbox-group input[type="radio"] {
        width: 15px;
        height: 20px;
        accent-color: var(--Brown)
    }

    .checkbox-group label {
        margin: 0;
        font-size: 22px;
    }







    @media (max-width: 768px) {
        h1 {
            font-size: 48px;
            line-height: 60px;

        }
    }


    /* MEDIA QUERIES - Toujours les mettre en bas */

    @media (max-width: 1024px) {

        .col-4,
        .col-3,
        .col-2,
        .col-1 {
            flex-basis: 50%;
            max-width: 50%;
        }

        .col-5,
        .col-6,
        .col-7,
        .col-8,
        .col-9,
        .col-10,
        .col-11,
        .col-12 {
            flex-basis: 100%;
            max-width: 100%;
        }
    }

    @media (max-width: 768px) {
        .container {
            padding: 0px 8%;
        }

        .col-6,
        .col-4,
        .col-3 {
            flex-basis: 100%;
            max-width: 100%;
            margin: 16px 0px;
        }
    }