.container *,
.container_carroussel *,
.card-wrapper *,
.card-list *,
.card-item *,
.card-link *,
.card-info *,
.card-image {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body::before {
    content: "";
    position: fixed; /* Fixe le pseudo-élément pour simuler l'effet */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../Images/background.png") no-repeat center center;
    background-size: cover; /* Ajuste la taille de l'image */
    z-index: -1; /* Place derrière le contenu */
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    z-index: 0; /* Garde un z-index neutre pour le contenu */
}


.imagePrincipal {
    position: relative;
    height: 100vh;
    overflow: hidden;
}



.imagePrincipal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), linear-gradient(to bottom, transparent 80%, black 100%);
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.imageEntiere {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("../Images/principal.jpg");
    animation: zoomEffect 10s infinite alternate;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

@keyframes zoomEffect {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}


.textePrincipal h1 {
    display: block;
    font-size: 80px;
    font-weight: 900;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.textePrincipal hr {
    display: block;
    border: none;
    height: 2px;
    width: 10%;
    background-color: #fff;
    margin-top: 10px;
    margin-left: 0;
    margin-bottom: 40px;
}

.textePrincipal {
    position: absolute;
    color: #fff;
    font-size: 20px;
    width: 70%;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.fondu {
    position: absolute;
    top: 100vh;
    left: 0;
    width: 100%;
    height: 50vh;
    background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)), linear-gradient(to top, transparent 100%, black 100%);
    background-size: cover;
    z-index: -1;
}

.News {
    position: relative;
    width: 90%; /* Limiter la largeur à 90% de l'écran */
    max-width: 1200px; /* Largeur maximale pour éviter les débordements */
    z-index: 1000;
    overflow: hidden;
    margin: -30vh auto 0 auto;
}


.News h2 {
    font-size: 50px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 50px;
}

.CaseNews {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start; /* Aligne le contenu en haut */
    background-color: white;
    border-left: 8px solid #00bbff; /* Bordure à gauche pour mettre en avant */
    border-radius: 4px 0 50px 4px;
    box-sizing: border-box;
    width: 100%; /* Prendre toute la largeur disponible dans le conteneur */
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.imageNews {
    position: relative;
    width: 100%; /* La largeur du conteneur */
    max-width: 800px; /* Limite la largeur pour éviter qu'elle devienne trop grande */
    margin: 0 auto; /* Centrer horizontalement */
    aspect-ratio: 16 / 9;
    padding: 0;
    background-color: #f0f0f0; /* Fond neutre si l'image n'est pas chargée */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre pour un effet esthétique */
    overflow: hidden; /* Cache le contenu qui dépasse */
}

.imageNews img {
    width: 100%;
    height: 100%;
    display: block; /* Élimine la ligne blanche sous l'image */
    object-fit: cover; /* Remplit le conteneur en respectant les proportions */
    object-position: center; /* Centre l'image */
    transition: transform 0.3s ease-in-out; /* Ajoute un effet au survol */
}

.imageNews img:hover {
    transform: scale(1.05);
}

.header .logo .a {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.texteNews {
    flex: 1; /* Ajuster pour équilibrer le texte et l'image */
    color: #333;
    display: flex;
    flex-direction: column; /* Organiser le contenu verticalement */
    align-items: flex-start; /* Aligne le contenu en haut */
    gap: 10px;
    min-width: 400px; /* Largeur minimale pour éviter les débordements */
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
}

.texteNews ajout {
    font-size: 14px;
    font-weight: bold;
    color: #00bbff;
    margin-top: 10px;
    margin-bottom: 10px;
    text-transform: uppercase; /* Mettre en valeur la date d'ajout */
}

.texteNews h3 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0;
    transition: color 0.3s;
}

.CaseNews:hover .texteNews h3 {
    color: #00bbff; /* Mettre en avant le titre au survol */
}

.texteNews p {
    font-size: 16px;
    color: #555; /* Couleur subtile pour le contenu */
    margin: 10px 0 0 0;
    line-height: 1.5; /* Meilleure lisibilité */
}

.Promotion {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
}

.Promotion prix {
    font-weight: 700;
    font-size: 30px;
    color: #00bbff; /* Mettre en valeur le prix */
}

.Promotion promo {
    font-size: 16px;
    text-decoration: line-through;
    color: #cc1d1d;
}


.idee {
    margin: 100px auto 0 auto;
    width: 80%;
    max-width: 1500px;
    z-index: 3;
}

.idee h2 {
    font-family: 'Chewy', cursive;
    font-size: 60px;
    font-weight: 900;
    margin-bottom: 60px;
    color: #fff;
    text-align: center;
}

.container-idee {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1500px;
    gap: 20px;
    flex-wrap: wrap;
}

.imageIdee {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
    min-width: 200px;
}

.imageIdee:hover {
    transform: scale(1.05);
}

.imageIdee::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 2; /* Ensure it covers the image but is below the text */
}

.imageIdee:hover::before {
    opacity: 1;
}

.imageIdee img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    z-index: 1;
}

.imageIdee p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    margin: 0;
    padding: 10px;
    color: #fff;
    font-size: 60px;
    font-family: 'Chewy', cursive;
    text-align: center;
    z-index: 3; /* Ensure the text is above everything */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.imageIdee:hover p {
    opacity: 1;
}

.imageIdee a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
}

.decouverteIdee {
    max-width: 1500px;
    width: 80%;
    margin: 50px auto 50px auto;
}

.decouverteIdee img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

.slogan-container {
    width: 80%;
    max-width: 1500px;
    margin: auto;
    text-align: center;
}

.slogan-container h2 {
    font-family: 'Chewy', cursive;
    font-size: 60px;
    margin: 60px 0;
    color: #fff;
}

.slogan {
    width: 80%;
    display: flex;
    justify-content: center;
    margin: 40px auto 40px auto;
}

.slogan img {
    width: 100%;
    max-width: 1100px;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

.caroussel {
    width: 100%;
    max-width: 1500px;
    margin: 100px auto 50px auto;
}

.caroussel h2 {
    font-family: 'Chewy', cursive;
    font-size: 60px;
    margin-bottom: 60px;
    color: #fff;
    text-align: center;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 100px;

}

.card-wrapper {
    max-width: 1300px;
    margin: 0 60px 35px;
    padding: 20px 10px;
    overflow: hidden;
}

.card-list .card-item {
    list-style: none;
    width: 100%; /* S'assure que les cartes occupent toute la largeur disponible */
}

.card-list .card-item .card-link {
    user-select: none;
    display: block;
    position: relative;
    background: #181818;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Important pour que l'image reste dans les limites de la carte */
    padding-top: 100%; /* Force la hauteur de la carte à être égale à sa largeur (carré) */
    transition: 0.2s ease;
}

.card-list .card-item .card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.card-list .card-item .card-link:hover .card-image {
    transform: scale(1.05);
}

.card-list .card-item .card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #ffffff;
    padding: 5px 10px;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(15, 21, 44, 0.8);
    width: 100%;
}

.card-list .card-link .card-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: 600;
    margin: 0;
}

.card-wrapper .swiper-pagination-bullet {
    height: 13px;
    width: 13px;
    opacity: 0.5;
    background: #5372F0;
}

.card-wrapper .swiper-pagination-bullet-active {
    opacity: 1;
}

.card-wrapper .swiper-slide-button {
    color: #5372F0;
    margin-top: -35px;
}

@media screen and (max-width: 1024px) {
    .textePrincipal {
        top: 37.5%;
        width: 80%;
    }

    .textePrincipal h1 {
        font-size: 50px;
    }

    .News h2 {
        font-size: 40px;
    }

    .CaseNews {
        flex-direction: column;
        width: fit-content;
    }

    .texteNews {
        min-width: 0;
    }

    .imageIdee::before {
        opacity: 1; /* Toujours afficher le fondu */
        background-color: rgba(0, 0, 0, 0.4);
    }

    .imageIdee p {
        opacity: 1; /* Toujours afficher le texte */
        font-size: 20px;
    }

    .imageIdee:hover p,
    .imageIdee:hover::before {
        opacity: 1; /* S'assurer que rien ne change au survol */
    }

    .container {
        padding: 0 50px;
    }
}

@media screen and (max-width: 768px) {
    .textePrincipal {
        top: 40%;
        width: 90%;
    }

    .textePrincipal h1 {
        font-size: 40px;
    }

    .textePrincipal hr {
        width: 20%;
        margin-bottom: 20px;
    }

    .textePrincipal p {
        font-size: 16px;
    }

    .News h2 {
        font-size: 30px;
    }

    .idee h2 {
        font-size: 30px;
    }

    .caroussel h2 {
        font-size: 30px;
    }

    .slogan-container h2 {
        font-size: 30px;
    }

    .imageIdee {
        height: 200px; /* Permet de s'adapter au contenu */
        flex: 1 1 auto;
    }

    .imageIdee img {
        width: 100%;
        height: 100%; /* S'assurer que l'image ne déborde pas */
        object-fit: cover;
    }

    .decouverteIdee {
        width: 100%;
    }

    .slogan {
        width: 100%;
    }

    .container {
        padding: 0 20px;
    }

    .card-wrapper {
        margin: 0 10px 25px;
    }

    .card-wrapper .swiper-slide-button {
        display: none;
    }
}