/* css/style.css */
:root {
    --bg-color: #F0F0F0;
    --dark-color: #212529;
    --accent-color: #FFC107;
    --text-color: #000000; /* Noir pour le texte comme demandé */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    /* font-family: 'Poppins', sans-serif; */
    /* Ajustement pour la navbar fixe si nécessaire, géré par le JS dans ce cas */
}

.navbar {
    background-color: var(--dark-color) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.navbar .navbar-brand, .navbar .nav-link {
    color: var(--bg-color) !important;
}
.navbar .nav-link:hover, .navbar .navbar-brand:hover {
    color: var(--accent-color) !important;
}
.navbar .navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
}
.navbar-toggler {
    border-color: var(--accent-color);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 193, 7, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--dark-color);
    font-weight: 600;
}
.btn-primary:hover {
    background-color: #e0a800;
    border-color: #e0a800;
    color: var(--dark-color);
}
.btn-outline-primary {
    color: var(--accent-color);
    border-color: var(--accent-color);
}
.btn-outline-primary:hover {
    background-color: var(--accent-color);
    color: var(--dark-color);
}


h1, h2, h3, h4, h5, h6 {
    color: var(--dark-color);
    font-weight: 700;
}

.section-title {
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}
.section-title::after {
    content: '';
    position: absolute;
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    bottom: 0;
    left: calc(50% - 30px);
}

/* Animations (simples) */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Style pour le bouton de démo fixe */
#fixed-demo-button {
    position: fixed; /* Position fixe par rapport à la fenêtre */
    bottom: 30px;    /* 30px du bas */
    right: 30px;     /* 30px de la droite */
    z-index: 1030;   /* S'assurer qu'il est au-dessus de la plupart des autres contenus
                       (les modals Bootstrap sont à 1050+, les dropdowns à 1000) */
    /* Les couleurs, padding, etc., sont gérés par .btn .btn-primary .btn-lg de Bootstrap */
    /* On peut ajouter une transition pour des effets de survol plus fluides si on ajoute des transform */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#fixed-demo-button:hover {
    transform: translateY(-3px); /* Léger soulèvement au survol */
    /* L'effet de couleur au survol est géré par .btn-primary:hover */
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.25)!important; /* Ombre un peu plus prononcée au survol */
}

/* Assurez-vous que les icônes Feather dans ce bouton sont bien rendues après ajout dynamique ou si elles ne le sont pas */
#fixed-demo-button i {
    width: 20px; /* Ajustez si besoin */
    height: 20px;/* Ajustez si besoin */
}

/* Hero Section */
#hero {
    background-image: url('../images/hero_background2.webp');
    background-color: rgba(0, 0, 0, 0.8);
    background-blend-mode: multiply;
    background-size: cover; /* 'cover' est souvent mieux que 100% 100% pour éviter la déformation */
    background-position: center;
    background-repeat: no-repeat;
    color: var(--bg-color);
    position: relative;
    padding: 120px 0;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/hero_background.png');
    background-size: cover; /* 'cover' est souvent mieux ici aussi */
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3; 
    z-index: -1; 
}

#hero .brand-highlight {
    /* Le titre va de 3.5rem (56px) à 6rem (96px) de manière fluide */
    font-size: clamp(3.5rem, 10vw, 6rem); 
    color: var(--accent-color);
    font-weight: 700;
}

#hero .hero-tagline {
    /* Le slogan va de 1.25rem (20px) à 2rem (32px) de manière fluide */
    font-size: clamp(1.25rem, 4vw, 2rem); 
    font-weight: 400; /* Un peu moins gras pour contraster avec le titre */
    color: var(--bg-color);
    line-height: 1.5; /* Améliore la lisibilité sur plusieurs lignes */
}

/* Contrôle de la taille du logo dans le titre */
#hero .hero-logo {
    max-width: 70px; /* Taille de base pour les grands écrans */
    height: auto;
    vertical-align: bottom; 
    margin-bottom: 0.2em; /* Ajustement fin de l'alignement vertical */
}

/* Suppression des anciennes règles qui sont maintenant gérées par les nouvelles classes */
#hero h1 {
    /* On garde uniquement les styles communs si besoin, mais clamp() gère la taille */
    font-weight: 700;
    color: var(--bg-color);
}

/* Aperçu du Logiciel Section */
#apercu-logiciel {
    /* background-color: var(--bg-color); ou #fff si #hero a déjà bg-light */
}

.software-carousel-inner img {
    max-height: 600px; /* Ajuste la hauteur maximale des images du carousel */
    object-fit: contain; /* Pour voir l'intégralité de la capture, ou 'cover' si tu préfères remplir */
    margin: 0 auto; /* Centrer l'image si elle est plus petite que le conteneur */
}

/* Style optionnel pour les contrôles du carousel s'ils ne sont pas assez visibles */
#softwareCarousel .carousel-control-prev-icon,
#softwareCarousel .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.3); /* Fond semi-transparent pour meilleure visibilité */
    border-radius: 50%;
    padding: 10px; /* Augmente la zone cliquable et la taille de l'icône visuelle */
}

#softwareCarousel .carousel-indicators button {
    background-color: var(--dark-color); /* Indicateurs plus visibles */
}
#softwareCarousel .carousel-indicators .active {
    background-color: var(--accent-color);
}

/* Légendes du carousel */
.carousel-caption {
    /* background-color: rgba(33, 37, 41, 0.7); /* Fond déjà appliqué via classes Bootstrap bg-dark bg-opacity-50 */
    /* padding: 1rem; */ /* Ajusté avec p-2 */
    /* border-radius: 0.25rem; */ /* Ajusté avec rounded */
    bottom: 1.25rem; /* Positionnement par défaut de Bootstrap, peut être ajusté */
}
.carousel-caption h5 {
    color: var(--bg-color); /* Texte blanc sur fond sombre */
}
.carousel-caption p {
     color: var(--bg-color);
     font-size: 0.9rem;
}

/* Ajout d'un petit espace en dessous de la section Hero si l'aperçu suit directement */
#hero + #apercu-logiciel {
    /* margin-top: -60px;  Ajuste si besoin de chevauchement ou d'espace spécifique */
}

/* Features Section */
#fonctionnalites .feature-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    margin-bottom: 20px;
}
#fonctionnalites .feature-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}
#fonctionnalites .feature-icon {
    width: 64px;
    height: 64px;
    color: var(--accent-color);
    margin-bottom: 20px;
}
#fonctionnalites .feature-item h4 {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 10px;
}

/* Pricing Section */
#tarifs .card {
    border: none;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
#tarifs .card:hover {
    transform: translateY(-5px);
}
#tarifs .card-header {
    background-color: var(--dark-color);
    color: var(--bg-color);
    font-weight: 600;
    padding: 1.5rem;
}
#tarifs .card-title {
    font-size: 1.75rem;
    color: var(--bg-color);
}
#tarifs .price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-color);
}
#tarifs .price .period {
    font-size: 1rem;
    font-weight: 400;
    color: #6c757d;
}
#tarifs .card-body ul li {
    padding-bottom: 0.5rem;
}
#tarifs .card-body ul li i {
    color: var(--accent-color);
    margin-right: 8px;
}
#tarifs .card.highlight {
    border: 2px solid var(--accent-color);
    box-shadow: 0 10px 30px rgba(255, 193, 7, 0.3);
}
#tarifs .card.highlight .card-header {
    background-color: var(--accent-color);
    color: var(--dark-color);
}
#tarifs .card.highlight .card-title {
     color: var(--dark-color);
}

/* Avis Clients Section */
#avis-clients {
    background-color: #fff; /* Ou var(--bg-color) si tu préfères le fond principal */
}

.testimonial-card {
    border: none;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.testimonial-card .card-body {
    padding: 30px;
}
.testimonial-card .stars i {
    color: var(--accent-color); /* Couleur de l'étoile vide/bordure */
    width: 20px;
    height: 20px;
}
.testimonial-card .stars i.filled {
    fill: var(--accent-color); /* Couleur de remplissage pour les étoiles pleines */
}

/* Pour une demi-étoile avec Feather (plus complexe, nécessite une superposition ou une icône SVG personnalisée)
   Une approche simple serait d'utiliser une icône spécifique si disponible ou de la simuler.
   Feather n'a pas nativement d'icône demi-étoile "facile" à styler.
   Voici une astuce si tu veux vraiment une demi-étoile (mais peut nécessiter des ajustements)
   Ou tu peux te contenter d'étoiles pleines et vides.
*/
.testimonial-card .stars i.half-filled {
    /* Ceci est une tentative de simulation, pourrait être amélioré avec un SVG */
    position: relative;
    fill: none; /* Bordure uniquement */
}
.testimonial-card .stars i.half-filled::before {
    content: "\f005"; /* Code unicode pour FontAwesome star, mais ici on utilise Feather.
                         Pour Feather, on pourrait superposer deux icônes ou utiliser un SVG.
                         Alternative plus simple : utiliser 4.5 étoiles comme 4 pleines et une vide.
                         Ou, pour une vraie demi-étoile, il faudrait une icône dédiée.
                         Pour l'instant, stylons-la comme une étoile vide pour la simplicité avec Feather.
                         Si tu as une icône SVG demi-étoile, tu peux l'intégrer ici.
                         Ou utiliser une bibliothèque d'icônes qui a des demi-étoiles (ex: Font Awesome).
                         Pour Feather, le plus simple est de ne pas avoir de demi-étoile ou de le gérer autrement.
                         Je vais la laisser comme une étoile vide pour l'instant avec ce code,
                         car remplir à moitié une icône Feather SVG via CSS pur est délicat sans modification du SVG.
                         Si tu souhaites absolument des demi-étoiles, on peut explorer des solutions SVG.
                      */
    /* Si tu utilises Font Awesome à la place de Feather pour les étoiles:
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; / Solid
    content: "\f089"; / fas fa-star-half-alt
    color: var(--accent-color);
    position: absolute;
    left: 0;
    width: 50%;
    overflow: hidden;
    */
}
/* Simplifions pour Feather: une étoile `half-filled` sera juste vide pour l'instant, ou tu peux la styler différemment */
.testimonial-card .stars i.half-filled {
   /*  color: var(--accent-color);  Garder la bordure jaune */
   /* Pas de fill pour l'instant */
}
/* Une approche plus simple pour la demi-étoile avec Feather est de ne pas la faire ou d'utiliser une autre icône.
   Pour l'exemple, je vais faire en sorte que .half-filled ait l'air d'une étoile vide pour l'instant.
   Si tu veux une vraie demi-étoile, la meilleure solution est un SVG personnalisé
   ou une bibliothèque d'icônes supportant les demi-étoiles (Font Awesome est bon pour ça).
*/
/* Par défaut, les icônes feather sont en stroke. Pour les remplir : */
.testimonial-card .stars i.filled {
    stroke: var(--accent-color); /* Couleur de la bordure */
    fill: var(--accent-color);   /* Couleur de remplissage */
}
.testimonial-card .stars i:not(.filled) { /* Étoiles vides */
    stroke: var(--accent-color);
    fill: none;
}

/* Contact Section */
#contact {
    background-color: #fff;
    padding: 60px 0;
}
#contact .form-control {
    border-radius: 5px;
    padding: 12px;
    border: 1px solid #ddd;
}
#contact .form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

/* Footer */
footer {
    background-color: var(--dark-color);
    color: var(--bg-color);
    padding: 40px 0;
    font-size: 0.9rem;
}
footer a {
    color: var(--accent-color);
    text-decoration: none;
}
footer a:hover {
    color: var(--bg-color);
    text-decoration: underline;
}
footer .social-icons a {
    color: var(--bg-color);
    margin: 0 10px;
    font-size: 1.2rem;
}
footer .social-icons a:hover {
    color: var(--accent-color);
}

/* Animations (simples) */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pour que le logo réduise sa taille sur les écrans plus petits, comme les mobiles */
@media (max-width: 767px) {
    #hero .hero-logo {
        max-width: 50px; /* Taille réduite pour les mobiles */
    }
}