@font-face {
    font-family: "Geomanist";
    src: url("../font/geomanist-book.otf") format("woff2"),
         url("../font/Geomanist-Book.otf") format("woff");
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: "Geomanist", sans-serif;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 70px;
    height: 100%;
    margin: 0;
    flex-direction: column;
    position: relative;
}

a {
    text-decoration: none !important; /* Force la suppression */
}

span {
    text-decoration: none !important; /* Force la suppression */
}

.bestcat {
    text-decoration: linear-gradient(90deg, #581D74, #d676ad);
}
/* Conteneur du background */
.background-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
}

/* Image violette avec découpage */
.bg-image {
    position: absolute;
    width: 100%;
    height: 190%;
    background: url("../image/image-reunion-bpce-it-si.webp") no-repeat center/cover;
    background-position: center;
}

@media screen and (max-width: 768px) {
    .bg-image {
        width: 100%;
        height: 55%;
        bottom: -100px;
        background: url("../image/ImageFilter_BPCE_phone.webp") no-repeat center/cover;
    }
}

/* Pattern SVG avec découpage */
.bg-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../image/pattern.svg") repeat;
    top: 0;
    left: 0;
    clip-path: polygon(100% 0%, 100% 80%, 0% 70%,0% 0%);
    opacity: 0.15; 
}

.bg-fond {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../image/Fond.svg") repeat;
    top: 0;
    left: 0;
    clip-path: polygon(100% 0%, 100% 80%, 0% 70%,0% 0%);
}

/* Contenu principal */
#form-box {
    text-align: center;
    position: relative;
    z-index: 2;
}

.section-titre {
    margin-top: -200px;
}

.btn {
    background: linear-gradient(90deg, #581D74, #d676ad);
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1.2em;
    border-radius: 30px;
    display: inline-block;
    cursor: pointer;
}

.quiz {
    display: flex;
    flex-direction: column; /* Si tu veux que les éléments s'empilent */
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 500px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
}
.next {
    display: flex;
    justify-content: flex-end; /* Aligne les éléments à gauche et à droite */
    width: 100%; /* Pour que l'espace entre les éléments soit complet */
    align-items: center; /* Centrer verticalement les éléments */
    margin-top: 20px; /* Un peu d'espace au-dessus */
    
}

#next-btn {
    align-self: flex-end; /* Aligne le bouton à droite */
    margin-top: 20px;
    background: linear-gradient(90deg, #581D74, #d676ad);
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1.3em;
    font-family: 'Geomanist', sans-serif;
    border-radius: 30px;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.3s;
    height: 48px;
}


#ques-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Ajustement dynamique du SVG à la largeur du texte */
#ques-view {
    width: 100%;
     /* Ajuste la largeur pour s'adapter au conteneur */
    padding: 0 10px; /* Ajoute un peu d'espace sur les côtés */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#question {
    display: inline-flexbox;
    position: relative;
    font-size: 1.8em; /* Ajuste selon la mise en page */
    text-align: center;
    padding-bottom: 10px;
}

.soulignement {
    display: block;
    width: 60%;
    max-width: 80%; /* Pour éviter qu'il ne déborde trop */
    margin-top: -20px; /* Ajuste la position */
    margin-bottom: 20px;
}

/* Ajustement pour mobile */
@media (max-width: 768px) {
    #question {
        font-size: 1.4em;
    }

    .soulignement {
        max-width: 80%;
    }
}

#ques-left {
    font-size: 1.2em;
    color: #333; /* Violet personnalisé */
    margin-top: 30px;
    margin-right: 20px;
}

#ques-view h1 {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: #333;

}

.choice {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.final-result {
    text-align: center;
    padding: 20px;

}

#restart {
    background: darkgrey;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1.2em;
    border-radius: 30px;
    display: inline-block;
    cursor: pointer;
    border: none;
    font-family: 'Geomanist', sans-serif;
    margin-bottom: 10px;
}

#restart:hover{
    filter: brightness(1.1);
  
}

.offres {
    background: linear-gradient(90deg, #581D74, #d676ad);
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1.2em;
    border-radius: 30px;
    display: inline-block;
    cursor: pointer;
    border: none;
    font-family: 'Geomanist', sans-serif;
    margin-bottom: 10px;
}

.offres:hover {
    filter: brightness(1.1);
}


#next-btn::after {
    content: "";
    background-image: url('../image/fleche-cta.svg'); /* Chemin vers ton fichier SVG */
    background-size: 15px 15px; /* Pour que l'icône s'ajuste bien */
    background-repeat: no-repeat;
    width: 15px; /* Ajuste la taille de la flèche */
    height: 20px;
    margin-left: 10px; /* Espace entre le texte et la flèche */
    display: inline-block;
    vertical-align: middle;
}

#next-btn:hover {
    filter: brightness(1.1);
}

.answer-btn {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    height: 60px;
    font-size: 0.9em;
    color: black; /* Texte noir */
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s;
    text-align: left;
    width: 100%;
    position: relative;
    box-shadow: 0px 4px 21px rgba(0, 0, 0, 0.05);
    background: #ffffff; /* Fond blanc pour la partie texte */
    overflow: hidden; /* Empêche le débordement du pseudo-élément */
}

/* Partie violette en dégradé avec séparation diagonale */
.answer-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 65px; /* Ajuste la largeur de la partie violette */
    height: 100%;
    background: linear-gradient(90deg, #d676ad, #581D74); /* Dégradé violet */
    clip-path: polygon(0 0, 90% 0, 75% 100%, 0% 100%); /* Séparation diagonale */
}

/* Ajustement de l'icône */
.answer-btn .icon {
    position: relative;
    width: 20px;
    height: 25px;
    padding-right: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Pour que l'icône reste visible au-dessus du pseudo-élément */
}

.answer-btn .icon img {
    width: 60%;
    height: auto;
}

/* Texte du bouton */
.answer-btn .text {
    flex-grow: 1;
    padding-left: 15px;
    position: relative;
    z-index: 1; /* Met le texte au-dessus du fond blanc */
}

.answer-btn:hover::before {
    filter: brightness(1.2); /* Effet léger sur le dégradé au survol */
}

.answer-btn.selected {
    background: linear-gradient(105deg, #581D74 , #b377bc 0%); /* Remplace #f0f0f0 par la couleur voulue */
    color: white;
}



.logo-img {
    width: 300px; /* Ajuste la largeur */
    height: auto; /* Garde les proportions */
    display: block; /* Empêche tout comportement d'alignement indésirable */
    margin: 0 auto; /* Centre l'image horizontalement */
    margin-bottom: 10px;
    max-height: 150px
}

/* Conteneur de l'image statique */
.image-static {
    position: absolute;
    top: 65%;  /* Positionner à 20% du haut de la page */
    left: 10%;  /* Positionner à 10% de la largeur de la page */
    width: 10vw;  /* La largeur de l'image sera 30% de la largeur de la fenêtre */
    height: auto;  /* Laisser la hauteur s'ajuster automatiquement pour maintenir les proportions */
    z-index: 2;  /* Mettre l'image au-dessus du contenu */
    pointer-events: none;  /* Pour que l'image ne gêne pas les interactions */
}

.image-static img {
    width: 100%;  /* Faire en sorte que l'image remplisse son conteneur */
    height: auto;  /* Ajuster la hauteur pour maintenir les proportions */
}

/* S'assurer que l'image reste responsive et se positionne correctement en fonction de la fenêtre */
@media (max-width: 768px) {
    .image-static {
        top: 65%;  /* Positionner l'image à un autre endroit sur les petits écrans */
        left: 10%;
        width: 20vw;  /* Ajuster la taille en fonction de la largeur de la fenêtre */
    }
}
.footer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-bottom-container {
    display: flex;
    align-items: center; /* Alignement vertical parfait */
    gap: 20px; /* Espacement entre les éléments */
}

/* Style pour les icônes Web */
.web {
    width: 30px; /* Ajuste la taille */
    height: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Effet hover : changement de couleur en bleu */
.web:hover {
    filter: brightness(0) saturate(100%) invert(33%) sepia(96%) saturate(748%) hue-rotate(185deg) brightness(95%) contrast(89%);
    transform: scale(1.1); /* Légère animation de zoom */
}

/* Ajustement de l’espacement pour que les icônes soient bien placées */
.logo-bottom {
    max-height: 50px;
    width: auto;
}

/* Responsive pour mobile */
@media screen and (max-width: 768px) {
    .logo-bottom {
        max-height: 30px;
        align-items: center;
    }

    .footer {
        bottom: 10px;
        right: 10px;
        gap: 10px;
    }

    .web {
        width: 25px; /* Réduction de la taille sur mobile */
    }
}

/* Titre au-dessus des icônes */
.linkedin-header {
    text-align: center; /* Centrer le titre */
    margin-bottom: 20px; /* Ajouter un espace en dessous du titre */
    margin-top: 30px;
}

.linkedin-header h2 {
    font-size: 1.5em;
    font-weight: bold;
    color: #333; /* Couleur du titre */
    margin: 0;
}


/* Effet au survol de l'icône LinkedIn */
.linkedin-icon img:hover {
    filter: brightness(1.2); /* Effet au survol de l'icône */
}

.linkedin-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px; /* Ajuste l'espace entre l'icône et le texte */
    text-align: center; /* Assure que tout le contenu est centré */
}

.linkedin-icon img {
    display: block; /* Évite les marges indésirables sous l'image */
    width: 50px;
    height: 50px;
}

.linkedin-text {
    display: block; /* Évite les soucis d'alignement avec les spans */
    font-family: "Geomanist", sans-serif;
    font-size: 1em;
    color: #333;
    font-weight: bold;
    text-align: center;
    line-height: 2.2; /* Ajuste l'espacement vertical */
    text-decoration: none;
    margin: 0px;
}