/* style.css */

/*
   Directives de base de Tailwind CSS.
   Ces règles sont traitées par le script Tailwind CSS chargé dans le HTML.
*/
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Styles de base pour le corps du document */
body {
    background-color: #FFFFFF;
    /* Le fond de page est blanc */
    color: #020329;
    /* Le texte principal est bleu foncé */
    font-family: 'Open Sans', sans-serif;
}

.chicle-regular {
    font-family: "Chicle", serif;
    font-weight: 400;
    font-style: normal;
}

/* Styles pour les titres */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    color: #020329;
    /* Les titres sur fond blanc sont de couleur primaire */
}

/* Styles pour les sections avec un fond primaire (navbar, footer, cartes) */
.bg-zenivia-primary {
    background-color: #020329;
    color: #FFFFFF;
}

/* Styles pour les dropdowns */
.dropdown-menu {
    display: none;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.dropdown-menu.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Styles pour la section de l'interface mobile */
.superimposed-content {
    pointer-events: none;
}

.superimposed-content>* {
    pointer-events: auto;
}

/* Styles pour les cartes de fonctionnalités */
.feature-card {
    display: inline-block;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    color: #020329;
    /* Le texte des cartes est de couleur primaire */
    height: 360px;
    /* Ajout d'une hauteur fixe pour éviter le chevauchement */
    padding: 1.5rem;
    /* Ajout d'un padding pour l'esthétique */
}

.feature-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Styles pour le carrousel à défilement horizontal */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Définition de l'animation pour le défilement horizontal automatique */
@keyframes auto-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - 1.5rem * 10));
        /* Ajusté pour 10 cartes + espacement */
    }
}

#features-container {
    animation: auto-scroll 45s linear infinite;
    /* Animation plus lente pour plus de fluidité */
    animation-play-state: running;
}

#features-container:hover {
    animation-play-state: paused;
}



/* Styles pour le bouton de remontée de page */
#scrollToTopBtn {
    transition: opacity 0.3s ease-in-out;
}

/* Styles pour le toggle switch */
.toggle-switch .toggle-bg {
    left: 0;
}

.toggle-switch.on .toggle-bg {
    background-color: #088395;
}

.toggle-switch .toggle-circle {
    left: 4px;
}

.toggle-switch.on .toggle-circle {
    transform: translateX(40px);
    background-color: #ffffff;
}



/* Animation d'apparition avec rebondissement */
@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    60% {
        opacity: 1;
        transform: translateY(-20px);
    }

    80% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.feature-card-item {
    opacity: 0;
    transform: translateY(100%);
}

.feature-card-item.in-view {
    animation: bounceInUp 1s forwards;
}


/* Effet de survol */
.feature-card-item:hover {
    transform: scale(1.05);
    /* Léger zoom */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

/* Styles pour la section FAQ */
.faq-toggle.active .fa-plus-circle {
    transform: rotate(45deg);
}


/* Effet pour la section "Un service ininterrompu" */
/* Applique des transitions fluides sur les cartes pour éviter les changements brusques */
.card-hover-effect {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Applique un effet d'ombre plus prononcé et un léger soulèvement UNIQUEMENT sur la carte survolée */
.card-hover-effect:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* Ombre plus grande */
    transform: translateY(-5px);
    /* Soulève légèrement l'élément */
}


/* Effet pour la section de CTA "Notre logiciel" */
/* Applique une opacité plus forte à l'image de fond au survol de la section */
.cta-hover-effect:hover .cta-background-img {
    opacity: 0.5;
    /* Opacité de 50% */
    transition: opacity 0.3s ease-in-out;
    /* Ajoute une transition fluide */
}


/* Styles personnalisés pour l'accordéon */
details summary {
    list-style: none;
    /* Cache la flèche par défaut */
    cursor: pointer;
    padding: 1.5rem;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Style de la bordure du dernier élément */
details:last-of-type summary {
    border-bottom: none;
}

/* Icône +/x pour l'accordéon */
.icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease-in-out;
}

details[open] .icon {
    transform: rotate(45deg);
    /* Fait pivoter l'icône + en x */
}

/* Styles pour les boutons de catégorie */
.faq-category-btn.active {
    background-color: var(--zenivia-cta);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.faq-category-btn {
    transition: all 0.2s ease-in-out;
}