/* Assure que le box-sizing inclut le padding et la bordure dans les dimensions de tous les éléments */
* {
    box-sizing: border-box;
}
/* index.css */
body {
    width: 100%;
    background-color: #06071d; /* Couleur de fond modifiée */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

@font-face {
    font-family: 'Gliker';
    src: url('/fonts/Gliker-RegularExpanded.woff2') format('woff2'),
         url('/fonts/to/Gliker-RegularExpanded.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.italic-text {
    font-style: italic;
}


/* Styles pour la barre d'annonce */
.announcement-bar {
    background-color: #FFCA25; /* Couleur de fond accrocheuse */
    color: #000; /* Texte noir pour contraste */
    text-align: center; /* Centre le texte */
    padding: 10px 0; /* Espacement vertical */
    font-size: 0.9rem; /* Taille de texte lisible */
    font-weight: bold; /* Rend le texte plus visible */
    line-height: 1.5; /* Espace entre les lignes */
}

.announcement-bar p {
    margin: 0; /* Supprime les marges par défaut du paragraphe */
    transition: opacity 0.5s ease-in-out; /* Transition douce */
}


/* Header Styles */
header {
    background-color: #06071d;
    padding: 5px 20px;
    overflow-x: hidden;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #06071d;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.logo img {
    height: 100px;
    margin-right: 20px;
}

.mobile-logo {
    display: none;
}

.hamburger {
    display: none;
}

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

.header-nav a {
    color: #fff;
    text-decoration: none;
    margin-left: 20px;
}

/* Style pour le bouton dans le header */
.header-nav .btn.primary {
    background: transparent;
    color: #fff;
    border: 2px solid transparent;
    border-image: linear-gradient(45deg, #FF41C7, #FFCA25) 1;
    padding: 10px 20px;
    margin-left: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    overflow: hidden;
}

/* Assurez-vous que le `border-radius` est également appliqué sur le hover */
.header-nav .btn.primary:hover {
    background: linear-gradient(45deg, #FF41C7, #FFCA25);
    color: #000;
}


/* Section Titles */
.section-title {
    text-align: center;
    font-size: 36px;
    margin-bottom: 40px;
    padding-top: 20px; /* Ajout de padding au-dessus des titres */
}

.section-title-mobile {
    display: none;
}

/* Hero Section */
.hero {
    position: relative;
    width: 100%;
    min-height: 90vh; /* La section doit prendre au moins toute la hauteur de la fenêtre */
    display: flex;
    flex-direction: column; /* Aligner les éléments en colonne */
    justify-content: space-between; /* Espace entre le contenu principal et les logos */
    text-align: center;
    align-items: center;
    color: white;
    padding-top: 40px;
    padding-bottom: 20px; /* Ajouter un padding en bas pour espacement */
}

/* Centrer et agrandir l'image de la carte en arrière-plan */
.glow-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; /* Place la carte et la lueur derrière tout le contenu */
}

.background-card {
    width: 145%;
    max-width: 1200px;
    height: auto;
    position: relative;
    z-index: 0;
    top: 361px;
    right: 195%;
    margin: 0 auto;
    display: block;
}

.background-card-secondary {
    width: 196%;
    max-width: 1200px;
    height: auto;
    position: relative;
    z-index: 0;
    top: -76px;
    left: 124%;
    margin: 0 auto;
    display: block;
}

/* La lueur doit être derrière l'image, donc on conserve son z-index à -1 */
.glow-container::before {
    content: '';
    position: absolute;
    top: 65%;
    left: 236%;
    width: 220px;
    height: 100px;
    background-color: violet;
    border-radius: 50%;
    filter: blur(60px);
    animation: pulse 4s infinite;
    z-index: -1;
    transform: translate(-50%, -50%) rotate(15deg);
}

/* Définir la seconde lueur avec ::after */
.glow-container::after {
    content: '';
    position: absolute;
    top: 63%;
    right: 230%;
    width: 30px;
    height: 200px;
    background-color: violet;
    border-radius: 50%;
    filter: blur(50px);
    animation: pulse 3s infinite;
    z-index: -1;
    transform: translate(-50%, -50%);
}

/* Section Hero : Image sous le bouton "Commander ma carte" */
.hero .pp-users {
    display: flex;
    justify-content: center; /* Centre horizontalement l'image */
    margin-bottom: 10px; /* Ajoute un espacement entre le bouton et l'image */
}

.hero .pp-users img {
    max-width: 130px; /* Réduit la largeur maximale de l'image */
    height: auto; /* Conserve les proportions de l'image */
    margin: 0 auto; /* Centre l'image horizontalement */
    opacity: 0.8; /* Légère transparence pour un effet subtil */
    transition: opacity 0.3s ease; /* Transition fluide au survol */
}

.hero .pp-users img:hover {
    opacity: 1; /* Opacité maximale au survol */
}



/* Animation pulsante pour la lueur */
@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1) translate(-50%, -50%);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) translate(-50%, -50%);
    }
}



.hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Aligne le contenu en haut du conteneur */
}

.hero-content {
    position: relative;
    z-index: 1; /* Assure que le texte et le CTA sont devant la carte et la lueur */
}

.hero h1 {
    font-size: 4rem;
    line-height: 1.2;
    letter-spacing: -.1rem;
    margin: 0;
}

.text-gradient {
    background: linear-gradient(45deg, #FF41C7, #FFCA25);
    -webkit-background-clip: text; /* Support pour Chrome, Safari 3 */
    background-clip: text; /* Propriété standard */
    color: transparent;
    font-style: italic;
    padding-right: 2px;
    padding-left: 5px;
}

.hero p {
    font-size: 24px;
    line-height: 1.5;
    color: #a0a0a0;
}

.hero .btn.primary {
    position: relative;
    display: inline-block;
    margin: 40px 0 0 0;
    background: linear-gradient(45deg, #FF41C7, #FFCA25);
    color: #000;
    border: none;
    border-radius: 7px;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    overflow: visible; /* Permet à la traînée de déborder à l'extérieur */
}

/* Conteneur du champ input */
.link-input-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le conteneur */
    justify-content: center; /* Centre le contenu verticalement */
    margin: 20px auto; /* Centre horizontalement avec auto */
    width: 100%;
    max-width: 400px; /* Taille fixe pour éviter l'étirement */
    text-align: center; /* Centre le label */
}

/* Texte "Colle ton lien" */
.link-label {
    font-size: 16px;
    color: #fff;
    margin-bottom: 5px;
    text-align: center;
}

/* Champ input */
.link-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #4b0346;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    font-size: 16px;
    text-align: left; /* Alignement du texte saisi à gauche */
    outline: none;
    transition: all 0.3s ease-in-out;
}

/* Placeholder aligné à gauche */
.link-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    text-align: left; /* Force l'alignement du placeholder à gauche */
    padding-left: 5px; /* Ajoute un léger décalage pour éviter qu'il touche le bord */
}

/* Effet lors du focus */
.link-input:focus {
    border-color: #FFCA25;
    box-shadow: 0 0 10px rgba(255, 202, 37, 0.8);
}

#no-credit-card {
    font-size: 14px;
    color: #cecece; /* Jaune pour attirer l'attention */
    letter-spacing: 0.5px;
    margin-top: 5px;
}










.social-proof {
    overflow: hidden; /* Cache tout ce qui dépasse du conteneur */
    width: 100%;
    position: relative;
    margin: 75px 0px;
}

.logos {
    display: flex;
    align-items: center;
    animation: scroll-logos 50s linear infinite; /* Animation de défilement infinie */
}

.logo-set {
    display: flex;
}

.logos img {
    height: 70px; /* Hauteur des logos */
    margin: 0 20px; /* Espacement entre les logos */
}

.payment-methods {
    display: flex;
    justify-content: center; /* Centrer les icônes */
    align-items: center;
    gap: 10px; /* Espacement entre les icônes */
    margin: 10px 0; /* Marges pour espacement vertical */
}

.payment-methods img {
    height: 20px; /* Taille uniforme des icônes */
    width: auto; /* Conserver les proportions des images */
    transition: transform 0.3s ease; /* Effet de zoom sur hover */
}

.payment-methods img:hover {
    transform: scale(1.1); /* Zoom léger sur hover */
}

/* Animation de défilement infini */
@keyframes scroll-logos {
    0% {
        transform: translateX(0); /* Position de départ */
    }
    100% {
        transform: translateX(-100%); /* Déplace tout le conteneur de logos pour créer l'effet de défilement */
    }
}



.desktop-only {
    display: block; /* Affiche le sous-titre pour ordinateur */
}

.mobile-only {
    display: none; /* Cache le sous-titre spécifique pour mobile */
}




/* Alerte Section */
.alert-section {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(to bottom right, #2a2b38, #06071d); /* Dégradé sombre */
    color: white;
    border-radius: 12px;
    max-width: 1100px;
    margin: 40px auto;
    box-shadow: 0 0 20px rgba(255, 65, 199, 0.2);
    transition: transform 0.3s ease;
    width: 90%;
}

.alert-section:hover {
    transform: scale(1.02);
}

.alert-title {
    font-size: 28px;
    font-weight: bold;
    color: #FFCA25;
    margin-bottom: 15px;
}

.alert-content {
    font-size: 20px;
}

.alert-list {
    list-style: none;
    padding: 0;
    font-size: 18px;
    line-height: 1.6;
}

.alert-list li {
    margin-bottom: 10px;
}

.highlight-text {
    font-weight: bold;
    background: linear-gradient(90deg, #FF41C7, rgba(255, 65, 199, 0.4));
    -webkit-background-clip: text;
    background-clip: text;
    font-style: italic;
    color: transparent;
}





/* Comparaison Section */
.comparison-section {
    text-align: center;
    padding: 80px 20px;
    background-color: #06071d;
    color: white;
}

.comparison-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}

.comparison-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin: 0 auto 20px; /* Ajoute un espace sous les titres */
}

.comparison-box h3 {
    font-size: 22px;
    color: #FFCA25;
    margin: 0 20px;
}

.comparison-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}






/* Solutions Section */
.solutions-section {
    text-align: center;
    padding: 80px 20px;
    background-color: #06071d;
    color: white;
}

.solutions-scroll-container {
    overflow: hidden; /* Supprime les barres de scroll visibles */
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

.solutions-container {
    display: flex;
    width: max-content;
    gap: 20px;
    padding: 10px;
}

.solution-box {
    position: relative;
    background: linear-gradient(to bottom right, #1a1b29, #06071d); /* Dégradé vers le coin bas-droit */
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    width: 30%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Bordure dégradée */
.solution-box::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 14px; /* Légèrement plus grand que le box pour couvrir */
    padding: 1px;
    background: linear-gradient(45deg, #210018, #50003c); /* Dégradé de la bordure */
    -webkit-mask: 
        linear-gradient(white, white) content-box, 
        linear-gradient(white, white);
    mask: 
        linear-gradient(white, white) content-box, 
        linear-gradient(white, white);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Effet au survol */
.solution-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(80, 0, 60, 0.3); /* Ombre légère pour l'effet dynamique */
}

.solution-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
}

.solution-icon img {
    max-width: 100%;
}

.solution-box h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.solution-box p {
    font-size: 16px;
    color: #d3d3d3;
    margin-bottom: 20px;
}

.solution-box .btn.primary {
    padding: 10px 20px;
    font-size: 16px;
    display: inline-block;
    border-radius: 5px;
    background: linear-gradient(45deg, #210018, #50003c); /* Dégradé de la bordure */
    color: #fff;
}

/* Bouton CTA global */
.solution-cta {
    margin-top: 40px;
}

.solution-cta .btn.primary {
    font-size: 18px;
    padding: 15px 30px;
}







/* Pour Qui Section */
/* Pour Qui Section */
.pour-qui-section {
    text-align: center;
    padding: 60px 20px;
    background-color: #2a2b38; /* Couleur de fond sous la texture */
    color: white;
    position: relative;
    overflow: hidden;
}

/* Ajout de la texture en arrière-plan */
.pour-qui-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/images/texture2.png') no-repeat top center; /* Positionne en haut */
    background-size: 100% auto; /* Largeur complète, hauteur ajustée */
    opacity: 0.3; /* Ajuste l’opacité pour un effet subtil */
    z-index: 0;
}

/* Assurer que le contenu reste visible au-dessus de la texture */
.pour-qui-container {
    position: relative;
    z-index: 1;
    display: flex; /* Alignement horizontal */
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* Permet le passage à la ligne si l'écran est trop petit */
}

.pour-qui-box {
    background: linear-gradient(to bottom right, #1a1b29, #06071d); /* Dégradé vers le coin bas-droit */
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    width: 22%;
    min-width: 250px; /* Empêche les blocs de devenir trop petits */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

/* Bordure dégradée */
.pour-qui-box::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 14px;
    padding: 1px;
    background: linear-gradient(45deg, #6a5000, #181500);
    -webkit-mask: 
        linear-gradient(white, white) content-box, 
        linear-gradient(white, white);
    mask: 
        linear-gradient(white, white) content-box, 
        linear-gradient(white, white);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Effet hover */
.pour-qui-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(255, 202, 37, 0.3);
}

.pour-qui-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.pour-qui-box h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.pour-qui-box p {
    font-size: 16px;
    color: #d3d3d3;
}

/* Responsive: Empile les blocs sur mobile */
@media (max-width: 768px) {
    .pour-qui-container {
        flex-direction: column;
        align-items: center;
    }

    .pour-qui-box {
        width: 80%;
    }
}









/* Pricing Section */
/* Conteneur principal de la section pricing */
.pricing-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    max-width: 900px;
    margin: auto;
}


/* Bordure dégradée pour les blocs pricing */
.free-plan,
.pro-plan {
    position: relative;
    overflow: hidden;
}

/* ✅ Ajout d'une bordure dégradée */
.free-plan::before,
.pro-plan::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -1px;
    bottom: -1px;
    padding: 2px;
    -webkit-mask: 
        linear-gradient(white, white) content-box, 
        linear-gradient(white, white);
    mask: 
        linear-gradient(white, white) content-box, 
        linear-gradient(white, white);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.free-plan::before {
    border-radius: 15px 15px 0 0;
    background: linear-gradient(109deg, #414141, #000000);
}

.pro-plan::before {
    border-radius: 15px;
    background: linear-gradient(109deg, #d4d4d4, #000000);
}


/* Offre gratuite - carré */
.free-plan {
    background: linear-gradient(to bottom right, #1a1b29, #06071d);
    color: #939393;
    width: 300px;
    height: 300px;
    border-radius: 15px 0 0 15px;
    padding: 20px;
}

/* Offre Pro - rectangle */
.pro-plan {
    background: linear-gradient(to bottom right, #1a1b29, #06071d);
    color: #fff;
    width: 400px;
    height: 719px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 20px;
}

.free-pricing-divider {
    width: 100%;
    background: linear-gradient(to right, #181928, #666666, #101123);
    margin: 20px 0;
    padding: 0.2px;
}

.pro-pricing-divider {
    width: 100%;
    background: linear-gradient(to right, #181928, #d4d4d4, #101123);
    margin: 20px 0;
    padding: 0.3px;
}

/* ✅ Styles pour les icônes dans la section pricing */
.pricing-icon {
    height: 20px; /* Ajuste la hauteur des icônes */
    margin-right: 8px; /* Espacement entre les icônes et le texte */
    vertical-align: middle; /* Aligne les icônes avec le texte */
}

/* Alignement des icônes App Store et Play Store */
.pro-plan li {
    display: flex;
    align-items: center;
    gap: 8px; /* Ajoute un espace entre les icônes */
}


/* Alignement du texte et liste */
.pricing-box h3 {
    font-size: 28px;
    margin-bottom: 10px;
    text-align: left;
}

.pricing-box ul {
    list-style: none;
    padding: 0;
    font-size: 16px;
}

.pricing-box ul li {
    margin-bottom: 10px;
    font-size: 16px;
}

/* Style du prix */
.price {
    font-size: 36px;
    font-weight: bold;
    margin: 20px 0;
    text-align: center; /* Aligner le prix au centre */
}

#pricing-duration {
    font-size: 18px;
    font-weight: normal;
}

.annual-wrapper {
    position: relative;
    display: inline-block;
}

.discount-badge {
    position: absolute;
    top: -14px; /* Ajuste la hauteur au-dessus du bouton */
    left: 50%;
    transform: translateX(-50%);
    background: #FFCA25;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 12px;
    z-index: 10;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}


/* Bouton d'action */
.pro-plan .btn.primary {
    text-align: center;
}


/* Style du conteneur du toggle */
.pricing-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0; /* Ajoute un espace au-dessus et en dessous du toggle */
    overflow: visible; /* Autorise le dépassement */
}

/* Conteneur des boutons toggle */
.toggle-container {
    display: flex;
    border: 1px solid #ffffff;
    border-radius: 30px;
    overflow: visible; /* Permet aux enfants (étiquette) de dépasser */
    padding: 5px; /* Ajoute un espace intérieur autour des boutons */
}

/* Style des boutons */
.toggle-btn {
    flex: 1;
    padding: 15px 30px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    background: transparent;
    color: #ffffff;
    border-radius: 26px;
}

/* Style du bouton actif */
.toggle-btn.active {
    background: linear-gradient(45deg, #210018, #50003c);
    color: #FFF;
    border: 2px solid #4c2a43;
}

.toggle-btn.active:hover {
    background: linear-gradient(45deg, #360027, #64004b);
}



/* Styles pour la section des avis clients */
.textimonial {
    display: inline;
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0 0 10px;
}

.testimonials h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.testimonials-container {
    display: flex;
    justify-content: space-between; /* Espace entre les blocs */
    gap: 20px; /* Espacement entre les blocs */
    max-width: 100%; /* Utilise toute la largeur disponible */
    margin: 0 auto; /* Centre le conteneur */
    flex-wrap: wrap; /* Permet aux blocs de passer à la ligne si nécessaire */
    padding: 50px 20px; /* Ajoute un padding pour éviter le débordement */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}

/* Style pour chaque bloc d'avis client */
.testimonial-item {
    display: flex; /* Utilisation de Flexbox */
    flex-direction: column; /* Organisation des éléments verticalement */
    justify-content: center; /* Centre les éléments verticalement */
    align-items: flex-start; /* Centre les éléments horizontalement */
    flex: 0 0 22%; /* Chaque bloc prend environ 22% de la largeur pour rester sur une ligne */
    background-color: #2a2b38;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left; /* Aligne le texte au centre */
    margin-bottom: 20px;
    border: 1px solid #3d3e4b;
}

.testimonial-item p {
    margin: 0 0 10px; /* Espacement entre les paragraphes */
}

.testimonial-item p strong {
    display: block;
    margin-top: 10px; /* Espacement au-dessus du nom */
}

.see-more {
    background-color: transparent;
    border: none;
    color: #734179;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    margin-top: 5px;
}


/* Alignement sur la même ligne pour le prénom et la profession */
.testimonial-item h3, .testimonial-item .profession_testi {
    display: inline-block; /* Affiche les éléments sur la même ligne */
    margin: 10px 0 0; /* Supprime les marges par défaut */
    vertical-align: middle; /* Aligne verticalement au milieu */
    font-size: 1rem;
}

/* Couleur pour la profession dans les témoignages */
.testimonial-item .profession_testi {
    color: #d3d3d3; /* Gris clair */
    font-size: 0.9em; /* Ajuste légèrement la taille pour la différencier du prénom */
    margin-top: 0.2rem;
}

.testimonial-item p.textimonial {
    font-size: 0.8rem; /* Réduit la taille du texte à 90% de la taille par défaut */
    line-height: 1.5; /* Ajuste la hauteur de ligne pour plus de lisibilité */
    margin: 0 0 10px; /* Maintient l'espacement entre les paragraphes */
}

.testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.stars {
    display: flex;
    justify-content: flex-end;
    font-size: 1.2rem;
    color: #FFD700; /* Couleur or pour les étoiles */
}

.star {
    margin-left: 5px;
}





/* FAQ Section */
.faq-section {
    padding: 60px 20px;
    background-color: #f6f1fe;
    text-align: center;
    color: #000;
}

.faq-section .container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-question {
    background-color: #fff;
    color: #000;
    border: none;
    padding: 15px 20px;
    width: 100%;
    text-align: left;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    font-weight: normal; /* Assure que toutes les questions sont en texte normal par défaut */
    transition: font-weight 0.2s ease;
}

.faq-question .plus-icon {
    position: absolute;
    right: 20px;
    font-size: 20px;
}

.faq-answer {
    display: block; /* Assure que l'élément est toujours dans le flux du document pour le calcul de hauteur */
    max-height: 0; /* Hauteur maximale initiale pour l'effet de déroulement */
    overflow: hidden; /* Masque tout contenu qui dépasse */
    transition: max-height 0.5s ease, opacity 0.5s ease; /* Transition pour le déroulement et le fondu */
    margin-top: 10px;
    padding: 0 20px; /* Supprime le padding vertical initialement pour un effet de défilement naturel */
    background-color: #fff;
    border-radius: 5px;
    text-align: left;
    opacity: 0; /* Commence caché */
    color: #717171; /* Couleur de texte gris clair */
}

.faq-answer p {
    margin: 0;
    font-size: 16px;
}

/* Animation for FAQ toggle */
.faq-item.active .faq-answer {
    display: block; /* Affiche le bloc réponse */
    opacity: 1; /* Rendre complètement visible */
    padding-top: 10px;
    padding-bottom: 25px; 
    margin-top: 0;
}

.faq-item.active .faq-question .plus-icon {
    transform: rotate(45deg);
}






/* CTA Section */
.action-section {
    background-color: #2a2b38;
    color: #fff;
    text-align: center;
    margin: 120px 110px;
    border: 1px solid #3a3f47;
    border-radius: 40px;
    display: flex;
    flex-direction: column; /* Change de row à column pour aligner les éléments verticalement */
    align-items: center; /* Centre horizontalement tous les éléments */
    justify-content: center; /* Centre verticalement tous les éléments */
    padding: 20px 0; /* Ajouter du padding au-dessus et en-dessous pour espacement */
    overflow-x: hidden;
}

.action-section h2 {
    font-size: 32px;
    margin-bottom: 20px;
    margin-top: 0;
}

.action-section p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 25px;
    max-width: 730px; /* Limite la largeur pour une meilleure lisibilité */
    margin-top: 0;
}

.btn.primary {
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 7px;
    margin: 20px 0;
    background: linear-gradient(45deg, #FF41C7, #FFCA25); /* Dégradé de rose à jaune */
    color: #000; /* Couleur du texte noir pour contraster avec le dégradé */
}


/* Styles pour le logo dans la section CTA */
.cta-logo {
    text-align: center;
    margin-bottom: 20px; /* Espacement sous le logo */
}

.cta-logo img {
    max-width: 50px; /* Ajuste la largeur du logo */
    height: auto; /* Maintient les proportions */
    margin-top: 25px;
}

/* Conteneur de la barre de progression */
.progress-container {
    width: 35%;
    max-width: 600px;
    height: 7px;
    background-color: #3a3f47;
    border-radius: 10px;
    overflow: hidden;
    margin: 15px auto;
    position: relative;
    display: none;
}

/* Barre de progression animée */
.progress-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #FF41C7, #FFCA25);
    transition: width 2s ease-in-out;
    border-radius: 10px;
    display: none;
}







.reassurance-text {
    background: linear-gradient(45deg, #FF41C7, #FFCA25); /* Dégradé de rose à jaune */
    -webkit-background-clip: text; /* Pour Chrome, Safari, et les navigateurs basés sur WebKit */
    background-clip: text; /* Pour les autres navigateurs */
    color: transparent; /* Rend le texte transparent pour afficher le dégradé */
    font-weight: 500;
    font-size: 0.8rem !important;
}


.custom-footer {
    background-color: #06071d; /* Couleur de fond du footer */
    padding: 20px; /* Espacement autour du contenu */
    color: #fff; /* Couleur du texte */
    text-align: center; /* Centre le texte et les éléments */
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Aligne le logo à gauche et les liens légaux à droite */
    align-items: center;
    margin-bottom: 10px;
}

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo-img {
    height: 100px; /* Ajustez la taille du logo selon vos préférences */
    margin-right: 20px; /* Espacement entre le logo et les liens légaux */
}

.footer-legal-info {
    font-size: 0.8rem;
    display: flex;
    flex-direction: column; /* Affiche les éléments de manière verticale */
    gap: 5px; /* Espacement entre les liens */
    align-items: flex-start; /* Aligne les textes sur la gauche */
    margin-top: 10px; /* Espacement au-dessus des textes légaux */
}

.footer-link {
    color: #fff; /* Couleur des liens */
    text-decoration: none; /* Supprime le soulignement des liens */
    margin: 0 5px;
}

.footer-link:hover {
    text-decoration: underline; /* Souligne les liens au survol */
}

.footer-separator {
    border: none;
    border-top: 1px solid #2a2b38; /* Ligne de séparation grise */
    margin: 20px 0;
}

.footer-design {
    font-size: 0.6rem;
    color: #50545a !important;    
    margin-top: 10px;
}

.footer-catchline {
    font-size: 1rem; /* Taille de police */
    color: #fff; /* Couleur du texte */
    margin: 10px 0; /* Espacement vertical */
    text-align: left; /* Aligne le texte à gauche */
    font-style: italic; /* Optionnel : Texte en italique pour un effet distinct */
}

.footer-link {
    color: #fff; /* Couleur des liens */
    text-decoration: none; /* Supprime le soulignement des liens */
}

.footer-link:hover {
    text-decoration: underline; /* Souligne les liens au survol */
}

.footer-email {
    color: #fff;
    font-size: 0.8rem;
    margin-top: 10px;
}
.footer-email a {
    color: #FFCA25;
    text-decoration: none;
}
.footer-email a:hover {
    text-decoration: underline;
}

/* Masquer les flèches sur desktop */
@media (min-width: 769px) {
    .solutions-navigation {
        display: none;
    }
}

/* Media Queries pour la version mobile */
@media (max-width: 768px) {
    /* Masquer le logo de bureau et afficher le logo mobile */
    .desktop-logo {
        display: none; /* Masque le logo pour les écrans de bureau */
    }

    .mobile-logo {
        display: block; /* Assure que le conteneur du logo mobile est affiché */
    }

    .mobile-logo img {
        width: 120px; /* Réduit la largeur du logo mobile */
        height: auto; /* Maintient le ratio de l'image */
        margin: 0; /* Retire l'espacement par défaut */
    }

    header {
        padding: 15px 10px;
        overflow-x: visible;
        background-color: transparent; /* Rendre le header transparent */
        z-index: 1000; /* S'assure que le header est au-dessus des autres éléments */
    }

    .header-container {
        flex-direction: row; /* Met le header en ligne */
        justify-content: space-between; /* Espace entre le logo et le menu hamburger */
        align-items: center; /* Centre les éléments verticalement */
        position: relative; /* Position relative pour bien aligner les éléments */
        width: 100%; /* Utilise toute la largeur disponible */
    }

    .hamburger {
        display: flex; /* Affiche le bouton hamburger */
        flex-direction: column;
        justify-content: space-around;
        width: 33px;
        height: 21px;
        background: none;
        border: none;
        cursor: pointer;
        margin: 0;
        position: absolute;
        right: 10px; /* Place le menu hamburger dans le coin droit */
        z-index: 100; /* Assure que le bouton est au-dessus du menu */
    }
    
    .hamburger .bar {
        width: 100%;
        height: 1px; /* Réduit l'épaisseur des barres pour un aspect plus fin */
        background-color: #fff;
        border-radius: 10px;
        transition: all 0.3s ease;
    }
    
    .hamburger.active .bar:nth-child(1) {
        transform: rotate(45deg);
        transform-origin: 5% 50%;
    }
    
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active .bar:nth-child(3) {
        transform: rotate(-45deg);
        transform-origin: 5% 50%;
    }

    /* Menu déroulant caché par défaut */
    .header-nav {
        display: flex; /* Utilise flex pour l'affichage des éléments du menu */
        flex-direction: column; /* Aligne les éléments du menu verticalement */
        align-items: center;
        width: 100%;
        background-color: #06071d;
        position: absolute;
        top: 60px; /* Ajuste selon la hauteur du header */
        left: 0;
        max-height: 0; /* Hauteur à zéro pour cacher le menu */
        overflow: hidden; /* Cache le contenu qui dépasse */
        transition: max-height 0.5s ease-out; /* Transition fluide pour l'affichage du menu */
        visibility: hidden; /* Masque visuellement le menu */
        z-index: 90; /* Assure que le menu est en dessous du bouton hamburger */
    }
    
    /* Menu déroulant affiché */
    .header-nav.active {
        max-height: 300px; /* Hauteur maximale pour afficher les éléments du menu */
        visibility: visible; /* Rendre le menu visible */
        overflow: visible; /* Permettre l'affichage complet du menu */
    }

    .header-nav a {
        display: block; /* Chaque lien est un bloc, ce qui les aligne verticalement */
        color: #fff;
        text-decoration: none;
        margin: 10px 0; /* Espace entre les liens */
        padding: 10px 0;
        width: 100%;
        text-align: center; /* Centre les liens horizontalement */
    }

    /* Ajuster les sections pour mobile */
    .hero {
        min-height: 625px; /* Désactive le min-height sur mobile */
        height: auto; /* Hauteur automatique pour éviter les coupures */
        padding-top: 45px;
        padding-bottom: 20px;
        overflow: hidden; /* Cache le contenu qui dépasse */
    }

    .hero-audience-inner {
        font-size: 0.7rem;
    }

    .hero h1 {
        font-size: 2.5rem; /* Taille de police réduite pour les petits écrans */
    }

    .hero p {
        font-size: 18px; /* Taille de police réduite pour le texte de description */
        margin: 30px;
    }

    .hero .btn.primary {
        padding: 13px 30px;
        margin: 9px 15px;
        width: 90%;
    }


    .glow-container::after {
        top: 23%;
        right: 179%;
    }

    .social-proof {
        padding: 15px 0;
        margin: 20px 0px;
    }

    
    .link-input {
        width: 80%;
    }





    .comparison-section {
        padding: 80px 20px 0px;
    }



    .solutions-scroll-container {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .solutions-container {
        flex-wrap: nowrap;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        gap: 15px;
    }

    .solutions-section {
        padding: 80px 0px;
    }

    .solution-box {
        flex: 0 0 auto;
        width: 80%;
        min-width: 280px;
        scroll-snap-align: center;
        margin: 10px;
    }

    .solution-subtitle {
        font-size: 18px;
        color: #FFF;
        font-weight: 600;
        margin-bottom: 10px;
        margin-top: 0;
    }

    .solution-list {
        list-style: none;
        padding: 0;
        margin-top: 10px;
        text-align: left;
    }
    
    .solution-list li {
        font-size: 16px;
        color: #dddddd;
        margin: 5px 0;
        display: flex;
        align-items: center;
    }

    /* ✅ Affichage des flèches uniquement sur mobile */
    .solutions-navigation {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }









    
    

    /*--------------SECTION PRICING-------------*/
    .pricing-container {
        flex-direction: column;
        align-items: center;
    }

    .free-plan {
        width: 80%; /* Réduit la largeur du bloc "Gratuit" */
        border-radius: 15px 15px 0 0;
    }

    .pro-plan {
        width: 90%; /* "Pro" reste plus large */
        border-radius: 15px;
        height: 712px;
    }

    .pro-plan::before {
        bottom: 0px;
    }

    .desktop-only {
        display: none; /* Cache le sous-titre destiné à l'ordinateur sur mobile */
    }

    .mobile-only {
        display: block; /* Affiche le sous-titre spécifique pour mobile */
    }





    .testimonials .section-title {
        padding-left: 35px; /* Ajoute le même padding que le sous-titre */
        padding-right: 35px;
        margin-bottom: 20px; /* Réduit l'espacement en bas pour plus de cohérence */
    }

    .testimonials-container {
        display: block;
        position: relative; /* Nécessaire pour le positionnement absolu de l'élément de dégradé */
        overflow: hidden; /* Cache les éléments qui dépassent du conteneur */
    }

    .testimonials-container::after {
        content: '';
        position: absolute;
        bottom: 5%;
        left: 0;
        width: 100%;
        height: 150px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #06071d);
        pointer-events: none;
    }

    .testimonial-item {
        width: 100%; /* Prend toute la largeur disponible */
        margin-bottom: 20px; /* Espace entre chaque encadré */
    }

    .testimonial-item p.textimonial {
        font-size: 0.9rem;
    }

    
    .faq-item {
        width: 100%; /* Prend toute la largeur disponible */
    }














    .action-section {
        text-align: center;
        margin: 50px 20px;
        border: 1px solid #3a3f47;
        border-radius: 30px;
        display: flex;
        flex-direction: column; /* Change de row à column pour aligner les éléments verticalement */
        align-items: center; /* Centre horizontalement tous les éléments */
        justify-content: center; /* Centre verticalement tous les éléments */
        padding: 20px 0; /* Ajouter du padding au-dessus et en-dessous pour espacement */
        overflow-x: hidden;
    }


    .action-section p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 20px;
        max-width: 600px;
        padding: 0px 20px;
    }


    .reassurance-text {
        margin: 0;
        font-size: 16px !important;
    }

    /* Footer ajusté pour mobile */
    .footer-content {
        flex-direction: column; /* Affiche les éléments du footer en colonne */
        align-items: center; /* Centre les éléments horizontalement */
        text-align: center; /* Centre le texte à l'intérieur des éléments */
    }

    .footer-legal-info {
        align-items: center; /* Centre les textes légalement */
        text-align: center; /* Centre le texte des liens légaux */
        margin: 40px;
    }

    .footer-catchline {
        text-align: center; /* Centre la catchline */
        margin-top: -20px;
    }

    .footer-logo-img {
        height: 100px;
        margin: 0;    
    }

    .footer-link {
        color: #fff;
        text-decoration: none;
        margin: 5px;
    }
}









/* Style pour les icônes dans le hero */
.hero-icons {
  position: relative;
  width: 100%;
  height: 100px;
}

.hero-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* Positionnement de la première icône (icon_shortcut_pink.png) */
.hero-icon:nth-child(1) {
    top: -311px;
    left: 158px;
    transform: rotate(5deg);
  }

/* Positionnement de la deuxième icône (icon_action_pink.png) */
.hero-icon:nth-child(2) {
    top: -231px;
    right: 0px;
    transform: rotate(-5deg);
  }

/* Version responsive pour mobile */
@media (max-width: 768px) {
  .hero-icon {
    width: 50px;
    height: 50px;
  }

  .hero-icon:nth-child(1) {
    top: -244px;
    left: 102px;
    transform: rotate(5deg) scale(0.75);
    z-index: -1;
  }

  .hero-icon:nth-child(2) {
    top: -191px;
    right: 9px;
    transform: rotate(-8deg) scale(0.75);
    z-index: -1;
  }
}


/* Container pour l'image de fond en bas du hero */
.hero-background-bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  z-index: 0;
  pointer-events: none;
}

.hero-products-image {
  width: 80%;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0 auto;
}

.hero-products-image-mobile {
    display: none;
}

/* Version responsive pour mobile */
@media (max-width: 768px) {
  .hero-background-bottom {
    max-width: 100%;
    bottom: -20px;
  }

  .hero-products-image{
    display: none;
  }

  .hero-products-image-mobile {
    display: block;
    width: 100%;
  }
}




/* Products Section */
.products-section {
  padding: 75px 20px 200px 20px;
  background-color: #06071d;
  position: relative;
  overflow: hidden;
}

.products-title {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
  line-height: 1.2;
}

.products-subtitle {
  font-size: 1.2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 60px;
  line-height: 1.6;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 33px;
  max-width: 1400px;
  margin: 0 auto;
}

.product-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 30px 30px 18px 30px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 360px;
  flex-direction: column;
}

.product-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
}

.product-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.product-description {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.product-image-placeholder {
  flex: 1;
  min-height: 200px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(230, 129, 197, 0.2);
  border: 1px solid rgba(230, 129, 197, 0.4);
  border-radius: 8px;
  color: #E681C5;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 35%;
  text-decoration: none;
}

.product-btn:hover {
  background: rgba(230, 129, 197, 0.3);
  border-color: rgba(230, 129, 197, 0.6);
  transform: scale(1.02);
}

.product-btn svg {
  width: 20px;
  height: 20px;
}

/* Bloc résultats spécial */
.gradient-text {
  background: linear-gradient(135deg, #E681C5 0%, #9B51E0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2rem;
}

.results-visual {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.results-tagline {
  font-size: 0.9rem;
  color: #E681C5;
  font-weight: 600;
  text-align: center;
  position: relative;
  z-index: 3;
  top: 15px;
}

/* Responsive */
@media (max-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .products-section {
    padding: 60px 20px;
  }

  .products-title {
    font-size: 2rem;
  }

  .products-subtitle {
    font-size: 1rem;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .product-name {
    font-size: 1.3rem;
  }

  .gradient-text {
    font-size: 1.6rem;
  }
}


.product-image-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.product-btn-overlay:hover {
  background: rgba(230, 129, 197, 0.4);
  transform: scale(1.05);
}



/* Bordure dégradée pour tous les blocs produits */
.product-card {
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 26px;
  padding: 2px;
  background: linear-gradient(109deg, #414141, #000000);
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* Bordure dégradée uniforme pour tous les blocs produits */
.product-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -3px;
  bottom: -3px;
  border-radius: 26px;
  padding: 2px;
  background: linear-gradient(135deg, #b3b3b8, #3d4144, #3d4144);
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* S'assurer que le contenu reste au-dessus de la bordure */
.product-content {
  position: relative;
  z-index: 1;
}


/* Bordure dégradée spécifique pour le bloc Résultats */
.product-card-results::before {
  background: linear-gradient(109deg, #E681C5, #9B51E0, #000000);
}

/* S'assurer que le contenu reste au-dessus de la bordure */
.product-content {
  position: relative;
  z-index: 1;
}



.product-image-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

.product-btn-overlay:hover {
  background: rgba(230, 129, 197, 0.4);
  transform: scale(1.05);
}



.product-visual-wrapper {
  position: relative;
  flex: 1 1 auto;
  width: calc(100% + 60px); /* compense padding de 30px du .product-card */
  margin-left: -30px;
  margin-right: -30px;
  border-radius: 0; /* coin carré pour coller aux bords extérieurs du parent */
  overflow: visible; /* ✅ MODIFIÉ : permet à l'image de dépasser */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  min-height: 0;
  z-index: 5;
}


.product-image-full {
  position: absolute;
  bottom: 0; /* ✅ MODIFIÉ : ancre l'image en bas */
  left: 0;
  width: 100%;
  height: auto; /* ✅ MODIFIÉ : hauteur automatique pour respecter les proportions */
  max-height: 100%; /* limite la hauteur au conteneur */
  object-fit: contain; /* ✅ CONFIRMÉ : contain comme demandé */
  border-radius: 0;
  z-index: 1; /* ✅ derrière le bouton qui est à z-index: 10 */
  pointer-events: none;
}


.product-btn-overlay {
  position: relative;
  z-index: 10;
  margin-bottom: 0;
  background: linear-gradient(135deg, #64014b 0%, #360333 100%);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 0 2px #875d84 inset;
  backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: 8px; 
  color: #ffc2ed; /* Couleur de base */
  font-weight: 600;
  color: #ffc2ed; /* texte visible */
  background: linear-gradient(135deg, #64014b 0%, #360333 100%);
  font-weight: 600;
}


.product-btn-overlay:hover {
  background: linear-gradient(135deg, #7a0159 0%, #4a043d 100%);
  transform: scale(1.05);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 0 2px #a06d9e inset;
}




/* Paramètres spécifiques pour l'image Qcard */
.product-card[data-product="qcard"] .product-image-full {
  /* Ajoute d'autres propriétés spécifiques ici */
  object-position: center bottom;
  transform: scale(1.55);
  top: -10px;
}

/* Paramètres spécifiques pour l'image Qlink */
.product-card[data-product="qlink"] .product-image-full {
  object-position: center bottom;
  filter: brightness(1.1);
  top: 34px;
  /* Ajoute d'autres propriétés spécifiques ici */
}

/* Paramètres spécifiques pour l'image Ulink */
.product-card[data-product="ulink"] .product-image-full {
  object-position: center bottom;
  transform: scale(1.25);
  top: -1px;
  /* Ajoute d'autres propriétés spécifiques ici */
}

.product-card[data-product="3 outils un maximum de resultat"] .product-image-full {
  object-position: center bottom;
  transform: scale(1.25);
  top: -1px;
  /* Ajoute d'autres propriétés spécifiques ici */
}











.logo-qtm-wrapper {
    position: relative;
    width: 100%;
}

/* Divider pleine largeur */
.pro-pricing-divider {
    width: 100%;
    height: 2px;              /* exemple */
    background-color: #ccc;   /* exemple */
}

/* Logo centré + devant */
.logo-qtm-divider {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -37px;                   /* ajuste selon ton souhait */
    max-width: 75px;
    max-height: 75px;
    z-index: 2;
    display: block;
}



/* Who is Quaantum For Section */
.who-for-section {
  padding: 40px 20px 200px 20px;
  background-color: #06071d;
  position: relative;
  overflow: hidden;
}

.who-for-title {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
  line-height: 1.2;
  padding: 20px 0 0 0;
}

.who-for-subtitle {
  font-size: 1.1rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 60px;
  line-height: 1.6;
  font-style: italic;
}

.who-for-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  max-width: 1200px;
  margin: 0 auto;
}

.who-card {
  background: #292b35;
  border-radius: 24px;
  padding: 30px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-height: 235px;
  display: flex;
  flex-direction: column;
  height: 240px; /* ✅ AJOUTÉ : hauteur fixe comme .product-card */
}

/* Bordure dégradée standard */
.who-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -2px;
  bottom: -2px;
  border-radius: 26px;
  padding: 2px;
  background: linear-gradient(135deg, #b3b3b8, #3d4144, #3d4144);
  -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

.who-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  margin-bottom: 15px; /* ✅ AJOUTÉ : espace entre titre et image */
  position: relative;
  z-index: 2; /* ✅ AUGMENTÉ : au-dessus de l'image */
  flex-shrink: 0; /* ✅ AJOUTÉ : empêche le rétrécissement */
}

.who-card-visual {
  position: relative; /* ✅ MODIFIÉ : de flex à relative */
  flex: 1 1 auto;
  /* ✅ Déborde du padding de 30px de chaque côté */
  width: calc(100% + 60px);
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: -30px; /* ✅ AJOUTÉ : déborde aussi en bas */
  border-radius: 0 0 24px 24px; /* ✅ Arrondi uniquement en bas */
  overflow: hidden;
  display: flex;
  align-items: flex-end; /* ✅ Aligne l'image en bas */
  justify-content: center;
  z-index: 1;
}


/* Card spéciale "Toi" avec dégradé rose */
.who-card-special {
  background: linear-gradient(135deg, rgba(200, 68, 167, 0.15) 0%, rgba(200, 68, 167, 0.05) 100%);
}

.who-card-special::before {
  background: linear-gradient(135deg, #c844a7, #c844a7, #c844a7);
}

.who-card-username {
  font-size: 1.3rem;
  color: #c844a7;
  font-weight: 600;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.who-card-tagline {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  position: relative;
  z-index: 1;
}




.who-images {
  position: absolute; /* ✅ AJOUTÉ : positionnement absolu */
  bottom: 0; /* ✅ AJOUTÉ : ancré en bas */
  left: 0;
  width: 100%;
  height: auto; /* ✅ MODIFIÉ : hauteur automatique */
  max-height: 100%; /* ✅ AJOUTÉ : limite la hauteur */
  object-fit: contain;
  object-position: center bottom; /* ✅ AJOUTÉ : positionne en bas */
}





/* Responsive */
@media (max-width: 1024px) {
  .who-for-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .who-for-section {
    padding: 60px 20px;
  }

  .who-for-title {
    font-size: 2rem;
  }

  .who-for-subtitle {
    font-size: 1rem;
  }

  .who-for-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .who-card {
    min-height: 220px;
  }
}
    
.who-card-link {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10; /* Au-dessus de tout le contenu de la carte */
  text-decoration: none; /* Pas de soulignement */
  color: inherit; /* Garde la couleur du texte */
  display: block;
}


/* ================= HERO : dégradé noir EN DESSOUS du CTA ================= */

/* On garde l'image tout en bas */
.hero-background-bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  z-index: 0;           /* image tout au fond */
  pointer-events: none;
}

/* Le contenu texte + CTA du hero doit être AU-DESSUS de l'image + dégradé */
.hero-content {
  position: relative;
  z-index: 2;           /* > 1 du dégradé, > 0 de l’image */
}

/* Dégradé noir collé au bas du hero, DEVANT l’image mais DERRIÈRE le contenu */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;        /* ajuste la hauteur comme tu veux */
  background: linear-gradient(to bottom,
               rgba(6, 7, 29, 0) 0%,
               rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
  z-index: 1;    
  opacity: 0.75;
}


/* ================= PRODUCTS : bouton vraiment AU-DESSUS ================= */

/* La card sert de référence pour toutes les couches internes */
.product-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
              rgba(255, 255, 255, 0.05) 0%,
              rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 30px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  height: 360px;
}



/* Image de fond du produit : toute la largeur, derrière tout */
.product-visual-wrapper {
  position: relative;
  flex: 1 1 auto;
  width: calc(100% + 60px);
  margin-left: -30px;
  margin-right: -30px;
  border-radius: 0;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 30px 20px 30px;
  z-index: 1;          /* juste au-dessus du fond de la card */
}

.product-image-full {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
  z-index: 1;          /* même couche que le wrapper, sous le dégradé (2) */
  pointer-events: none;
}

/* ================= Bouton overlay : AU-DESSUS + texte visible ================= */

/* Style de base du bouton (garde ta classe .product-btn) */
.product-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Variante overlay qui doit passer DEVANT le dégradé */
.product-btn.product-btn-overlay {
  position: relative;
  z-index: 10;        /* > dégradé (2) > image (1) */
  margin-bottom: 0;
  background: linear-gradient(135deg, #64014b 0%, #360333 100%);
  border: 2px solid;
  border-image: linear-gradient(135deg, #875d84, #3a0737) 1;
  color: #ffc2ed;     /* ✅ texte lisible */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  right: 0px;
  top: 30px;
}

/* Hover */
.product-btn.product-btn-overlay:hover {
  background: linear-gradient(135deg, #7a0159 0%, #4a043d 100%);
  color: #e07fc4;
  transform: scale(1.05);
}

/* Icône = même couleur que le texte */
.product-btn.product-btn-overlay svg path {
  stroke: currentColor;
}




.product-visual-wrapper {
    position: relative;
    z-index: 0; /* crée un stacking context */
}

.product-visual-wrapper::after {
    content: "";
    position: absolute;
    inset: -30px;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 50%,
        rgba(0,0,0,0.6) 100%
    );
    z-index: 2; /* au-dessus de l'image */
    pointer-events: none; /* bouton cliquable */
    opacity: 1;
}


.product-image-full {
    z-index: 1;
}

.product-btn-overlay {
    position: absolute;
    bottom: 20px; /* ou ta valeur */
    right: 20px;
    z-index: 3; /* au-dessus du dégradé */
}


.product-card.product-card-results {
  background: #470035;                    /* ✅ nouveau fond */
}
.product-card-results::before {
  background: linear-gradient(135deg, #875d84, #3a0737, #3a0737);
}
/* 2) Texte du 4e bloc : même style que les autres cartes */
.product-card-results .product-name {
  font-size: 1.5rem;                      /* même taille que .product-name */
  font-weight: 600;
  color: #ffffff;                         /* ✅ texte blanc */
  margin: 0;
  line-height: 1;
}




.product-image-results {
  width: 83%;
  left: 50%;
  top: 39px;
  transform: translateX(-50%); /* ✅ Décale pour centrer */
}


.who-image-toi {
  width: 120%;              /* tu peux changer la largeur ici */
  left: -10%;               /* recentrer si tu dépasses en largeur */
  bottom: -5px;             /* la monter/descendre sans toucher les autres */
  transform: scale(1.2);    /* zoom propre, uniquement pour ce bloc */
}



@media (max-width: 768px) {
  .section-title-desktop {
    display: none;
  }

  .section-title-mobile {
    display: block;
    text-align: center;
    padding-top: 20px;
  }

  .hero-icons {
    position: relative;
    width: 100%;
    height: 5px; /* ✅ Réduit de 100px à 40px */
  }

  .hero-background-bottom {
    max-width: 100%;
    bottom: auto; /* ✅ On enlève bottom pour utiliser top */
    top: auto; /* va être défini sur l'image elle-même */
  }

  .hero-products-image-mobile {
    display: block;
    width: 135%; /* ✅ Largeur à 120% */
    position: absolute;
    left: 50%; /* ✅ Centre horizontalement */
    transform: translateX(-50%); /* ✅ Décale de -50% pour centrer */
    top: 400px; /* ✅ Ajuste cette valeur pour le positionner par rapport au bouton */
    z-index: 0; /* Reste derrière le contenu */
  }

  .hero::after {
    background: linear-gradient(to bottom,
               rgba(6, 7, 29, 0) 75%,
               rgba(0, 0, 0, 0.90) 100%);
  }

  .product-image-results {
    width: 85% !important;
    top: 10px;
  }

  .product-image-full {
    position: absolute;
    width: 100%;
    height: auto;
    max-height: 108%;
  }

  .product-card[data-product="qlink"] .product-image-full {
    top: 15px;
  }
}