body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(13, 0, 33);
    background-size: 50px 50px;
    font-family: 'Montserrat', sans-serif;
}

h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

h2 {
    font-size: 20px;
    margin-bottom: 12px;
}

img {
    max-width: 500px;
    width: 100%;
}

.wrapper {
    display: flex;
    flex-wrap: wrap; /* Permet d'ajuster les sections pour le mobile */
    width: 100%;
    height: 100vh;
    scroll-snap-type: y mandatory; /* y pour le défilement vertical, mandatory pour forcer le snap */
    overflow-y: scroll; /* pour permettre le défilement */
    height: 100vh; /* pour s'assurer qu'il occupe toute la hauteur de la fenêtre de visualisation */
}

.section {
    flex: 1; /* Prend la moitié de l'espace disponible sur les écrans de bureau */
    min-height: 100vh; /* Assurez-vous que chaque section occupe au moins la hauteur de la fenêtre de visualisation */
    max-height: 100vh;
    scroll-snap-align: start; /* snap au début de chaque élément */
}

.section-left {
    background-color: #0d0021; /* Votre couleur de fond bleu */
    box-shadow: 10px 0 30px rgba(0, 0, 0, 1);
    z-index: 1; /* Placez cette section au-dessus de .section-right */
    position: relative; /* nécessaire pour que z-index fonctionne */
    display: flex;
    justify-content: center;
}


.section-right {
    background-image: 
        linear-gradient(rgba(13, 0, 33, 0.8), rgba(13, 0, 33, 0.8)), 
        url("Part2_background_7.png"); /* Ou n'importe quelle autre couleur ou image de fond que vous souhaitez */
    display: flex;
    flex-direction: column;
    align-items: center;
    background-size: cover;  /* Ajuste la taille de l'image pour qu'elle couvre toute la section */
    background-position: center;  /* Centre l'image */
    background-repeat: no-repeat;  /* Empêche l'image de se répéter */
    overflow-y: auto; /* Permet le défilement vertical si nécessaire */
    position: relative; /* Pour l'overlay */
}


/* * * * * * * * * * * * */
/* * * REGLES MOBILE * * */
/* * * * * * * * * * * * */

/* Style général pour le chevron */
.chevron {
    display: none; /* Par défaut, le chevron est caché */
    cursor: pointer;
    width: 30px;
    height: 30px;
    background: url('chevron.svg') no-repeat center center;
    background-size: contain;
    opacity: 0.6;
}

/* Pour les écrans mobiles */
@media (max-width: 768px) { /* Changer 768px selon vos besoins */
    .section {
        flex: 100%; /* Occupe toute la largeur sur mobile */
    }
    .copyright {
        display: none; /* Cache le copyright sur mobile */
    }
    .chevron {
        display: block;
        animation: bounce 2s infinite;
    }
    .section-right {
        padding: 20px 20px 0 20px;
    }
    .product-card a {
        width: 300px;
    }
}

.copyright {
    position: absolute;    /* Permet de positionner le copyright par rapport à .section-left */
    bottom: 20px;          /* Espace du bas */
    left: 50%;             /* Centre le copyright horizontalement */
    transform: translateX(-50%);  /* Ajuste pour un centrage parfait */
    color: #ffffff44;           /* Couleur du texte */
    font-size: 12px;       /* Taille du texte */
    z-index: 2;            /* Assure que le copyright est au-dessus des autres éléments */
}



.chevron-container {
    position: absolute; /* Fixe le conteneur en bas de la section */
    bottom: 130px; /* Marge depuis le bas de l'écran */
    left: 50%; /* Centrer le chevron */
    transform: translateX(-50%); /* Pour le centrage parfait */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

/* Animation simple pour attirer l'attention sur le chevron */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}



/* * * * * * * * * * * * */
/* * * LOGO CSS * * * * */
/* * * * * * * * * * * */

.triangle-container {
    position: relative;
    width: 240px;
    height: 240px;
}

.triangle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 180px;
    height: 180px;
}

.side {
    position: absolute;
    background-color: rgb(255, 0, 115);
}

.side-vertical {
    width: 8px;
    height: 180px;
    left: 0;
}

.side-horizontal {
    width: 180px;
    height: 8px;
    bottom: 0;
}

.side-diagonal {
    width: 248px;  /* Calculé avec le théorème de Pythagore */
    height: 8px;
    top: 0;
    left: 8px;
    transform: rotateZ(45deg);
    transform-origin: top left;
}

.neon {
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 6px currentColor) drop-shadow(0 0 24px currentColor);
    background-color: currentColor; 
    animation: pulsate 0.11s ease-in-out infinite alternate;
}


@keyframes pulsate {
    100% {
        filter: 
            drop-shadow(0 0 4px currentColor) 
            drop-shadow(0 0 6px currentColor) 
            drop-shadow(0 0 24px currentColor);
    }
    0% {
        filter: 
            drop-shadow(0 0 4px currentColor) 
            drop-shadow(0 0 6px currentColor) 
            drop-shadow(0 0 22px currentColor);
    }
}



.triangle-1 .neon { color: rgb(0, 204, 255); }
.triangle-2 .neon { color: rgb(255, 255, 255); }
.triangle-3 .neon { color: rgb(255, 0, 115); }

.triangle-2 {
    transform: translate(40px, -40px); /* Ajusté pour les nouvelles dimensions */
}

.triangle-3 {
    transform: translate(80px, -80px); /* Ajusté pour les nouvelles dimensions */
}


/* * * * * * * * * * * * */
/* * * SOCIAL ICONS * * */
/* * * * * * * * * * * */

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* espace entre les icônes */
    margin-top: 70px; /* espace entre les triangles et les icônes */
}

.icon {
    display: block;
    width: 32px; /* ajustez selon la taille souhaitée */
    height: 32px; /* ajustez selon la taille souhaitée */
    background-size: cover;
    opacity: 0.4;
    transition: opacity 0.8s;
}

.icon:hover {
    opacity: 1; /* Effet au survol */
}

.icon.linkedin {
    background-image: url('linkedin.svg');
}

.icon.twitter {
    background-image: url('twitter.svg');
}

.icon.tiktok {
    background-image: url('tiktok.svg');
}

.icon.youtube {
    background-image: url('youtube.svg');
}

.icon.email {
    background-image: url('email.svg');
}

/* * * * * * * * * * * * */
/* * * PRODUCT CARDS * * */
/* * * * * * * * * * * * */

.header-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligner le contenu à gauche */
    justify-content: center; /* Centrer le conteneur lui-même verticalement */
    width: 100%;
    max-width: 370px; /* Ajustez cette valeur en fonction de la largeur souhaitée. C'est la même que celle des cartes produit dans votre code actuel. */
    margin: 0 auto; /* Cela permet de centrer le conteneur horizontalement */
    padding: 30px 0; /* Un peu d'espace au-dessus et en dessous du titre/sous-titre */
}

.header-container h2,
.header-container .subtitle {
    margin-left: 0;
    margin-right: 0;
}

/* Styling pour le titre */
.section-right h2 {
    font-size: 36px; /* Ajustez selon vos préférences */
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    color: #fff;
    margin-top: 50px;
    margin-bottom: 0px; /* Espace entre le titre et le sous-titre */
    z-index: 2;
    position: relative;
}

/* Styling pour le sous-titre */
.section-right .subtitle {
    font-size: 32px; /* Ajustez selon vos préférences */
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.8); /* Une couleur plus claire que le titre pour le sous-titre */
    margin-top: 0px;
    margin-bottom: 20px; /* Espace entre le sous-titre et le début de la liste des produits */
    z-index: 2;
    position: relative;
}

.product-card {
    background: rgba(255, 255, 255, 0.23);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.6px);
    -webkit-backdrop-filter: blur(9.6px);
    border: 1px solid rgba(255, 255, 255, 0.44);
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
    transition: transform 0.8s ease, box-shadow 0.8s ease;
}

ul.products-list {
    margin: 0 0 100px 0;
    padding: 0;
}

li.product-card {
    list-style-type: none;
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
}

  
.product-card a {
display: flex;
align-items: center;
text-decoration: none;
color: #fff;
/*width: 350px;*/
padding: 15px 15px 15px 20px
}

.product-icon {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin-right: 20px;
}

.product-info .product-header {
    display: flex;
    align-items: center;
}

.icon-text {
font-size: 24px;
}

.product-info h3 {
margin: 0;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
}

/* Ajustements pour les tags sous le titre du produit */
.tags {
    display: flex;
    gap: 10px; /* Espacement entre les tags */
    margin-top: 5px; /* Espace entre le titre et les tags */
}

/* Styles de base pour le tag de statut */
.status-tag {
    background-color: #ffffff44;
    color: #DDDDDD;
    padding: 4px 10px;
    border-radius: 5px;
    font-weight: 500;
    font-size: x-small;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Styles spécifiques pour chaque statut */
.status-tag[status="En développement"] {
    background-color: rgba(255, 196, 0, 0.133); /* orange */
    border-color: rgba(255, 196, 0, 0.667);
    color: #ffc400AA;
}

.status-tag[status="Exploration"] {
    background-color: rgba(0, 217, 255, 0.133); /* orange */
    border-color: rgba(0, 217, 255, 0.667);
    color: rgba(0, 217, 255, 0.667);
}

.status-tag[status="A venir"] {
    background-color: rgba(255, 157, 0, 0.133); /* orange */
    border-color: rgba(255, 157, 0, 0.667);
    color: rgba(255, 157, 0, 0.667);
}


.year-tag {
    background-color: #ffffff44;
    color: #DDDDDD;
    padding: 4px 10px;
    margin-left: 0px;
    border-radius: 5px;
    font-weight: 500;
    font-size: x-small;
}

.product-description {
color: #ddddddaa;
font-size: 12px;
margin-top: 5px;
margin-bottom: 8px;
font-style: italic;
}

.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 50px rgba(0, 0, 0, 0.2);
}

/* * * * * * * * * * * * */
/* * * *  OVERLAY  * * * */
/* * * * * * * * * * * * */

#helpIcon {
    cursor: pointer;
    background-color: #eee;
    padding: 5px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 10px; /* ajuster selon vos besoins */
    width: 15px;
    height: 15px;
    font-weight: 800;
    text-align: center;
    opacity: 0.7;
    border: 2px;
    border-color: #FFFFFF;
    position: absolute;
    top: 35px;
    right: 35px;
}

#overlay {
    position: absolute; /* Changez de absolute à fixed */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(4, 0, 10, 0.90);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 60px;
}


#overlay p {
    text-align: justify;
    max-width: 80%; /* Cela empêche le paragraphe d'être trop large sur les grands écrans */
    color: white; /* Pour rendre le texte blanc sur fond sombre */
    font-size: 16px; /* Ajustez selon vos préférences */
    padding: 7px;
}

#closeOverlay {
    position: absolute;
    top: 20px;
    right: 30px;
    font-weight: 100;
    font-size: 48px; /* Ajustez selon vos préférences */
    color: white; /* Pour rendre la croix blanche */
    cursor: pointer; /* Pour montrer qu'il s'agit d'un élément cliquable */
}

.hidden {
    display: none;
}