/* ==============================================
   HOMEPAGE STYLES - homepage-styles.css
   ============================================== */

/* Mise à jour des couleurs orange vers vert sauge */
:root {
    --primary-green: #7A9B7A;
    --primary-green-light: #8FAF8F;
    --primary-green-dark: #5F7A5F;
    --accent-green: #9DB99D;
}

/* SVG Icons personnalisés pour remplacer les logos orange */
.section-title h3::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23%237A9B7A'%3E%3Cpath d='M12 2L15.09 8.26L22 9L17 14L18.18 21L12 17.77L5.82 21L7 14L2 9L8.91 8.26L12 2Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Alternative: Icône de feuille pour certaines sections */
.about-us .section-title h3::before,
.what-we-do .section-title h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23%237A9B7A'%3E%3Cpath d='M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z'/%3E%3C/svg%3E");
}

/* Icône de diamant pour les services */
.our-services .section-title h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23%237A9B7A'%3E%3Cpath d='M6,2L2,8L12,22L22,8L18,2H6M6.5,4H17.5L20.5,8L12,18.5L3.5,8L6.5,4Z'/%3E%3C/svg%3E");
}

/* Icône de cœur pour les témoignages */
.our-testimonials .section-title h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23%237A9B7A'%3E%3Cpath d='M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z'/%3E%3C/svg%3E");
}

/* Icône d'engrenage pour le processus */
.how-it-work .section-title h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23%237A9B7A'%3E%3Cpath d='M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z'/%3E%3C/svg%3E");
}

/* Icône de couronne pour "Pourquoi nous choisir" */
.why-choose-us .section-title h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23%237A9B7A'%3E%3Cpath d='M5,16L3,5L8.5,12L12,4L15.5,12L21,5L19,16H5M19,19A1,1 0 0,1 18,20H6A1,1 0 0,1 5,19V18H19V19Z'/%3E%3C/svg%3E");
}

/* Icône de graphique pour les résultats */
.our-results .section-title h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23%237A9B7A'%3E%3Cpath d='M22,21H2V3H4V19H6V17H10V19H12V16H16V19H18V17H22V21Z'/%3E%3C/svg%3E");
}

/* Nouvelles cartes de service */
.service-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Espacement supplémentaire entre les rangées */
.our-services .row .col-lg-4,
.our-services .row .col-md-6 {
    margin-bottom: 20px;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(122, 155, 122, 0.15);
    border-color: var(--primary-green);
}

.service-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-card h3 {
    color: #4A4A4A;
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.service-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    flex: 1;
    font-size: 0.95rem;
}

.service-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: auto;
}

.btn-service {
    background: var(--primary-green);
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    display: inline-block;
    font-size: 0.9rem;
}

/* Pas de changement de couleur au hover - seulement animation */
.btn-service:hover {
    background: var(--primary-green) !important;
    color: white !important;
    transform: translateY(-3px) scale(1.05) !important;
    text-decoration: none !important;
    box-shadow: 0 8px 25px rgba(122, 155, 122, 0.4) !important;
}

.service-info {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

/* Pas de changement de couleur au hover - seulement animation */
.service-info:hover {
    color: var(--primary-green) !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
}

/* Responsive design pour les cartes */
@media (max-width: 768px) {
    .service-card {
        padding: 25px;
        margin-bottom: 25px;
    }

    .our-services .row .col-lg-4,
    .our-services .row .col-md-6 {
        margin-bottom: 15px;
    }

    .service-card-footer {
        flex-direction: column;
        gap: 10px;
    }

    .btn-service {
        width: 100%;
        text-align: center;
    }
}

/* Couleur spéciale pour le texte "Bienvenue chez GoDerme" - retour au blanc */
.hero-content .section-title h3 {
    color: var(--white-color) !important;
}

/* Boutons d'action principaux - SEULEMENT les boutons spécifiquement verts */
.btn-primary {
    background-color: var(--primary-green) !important;
    border-color: var(--primary-green) !important;
}

/* Style spécial pour le bouton principal du hero - copie exacte du btn-default */
.hero-btn .btn-primary {
    position: relative !important;
    display: inline-block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1em !important;
    text-transform: capitalize !important;
    background: var(--accent-color) !important;
    color: var(--white-color) !important;
    border-radius: 100px !important;
    padding: 17px 25px !important;
    margin-right: 50px !important;
    border: none !important;
    transition: all 0.4s ease !important;
    z-index: 1 !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1) !important;
    perspective: 1000px !important;
}

.hero-btn .btn-primary::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: -50px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background-color: var(--primary-color) !important;
    background-image: url('../images/arrow-white.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 14px auto !important;
    transform: translateY(-50%) !important;
    transition: all 0.4s ease !important;
    transform-style: preserve-3d !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
}

.hero-btn .btn-primary:hover::before {
    transform: translateY(-50%) rotate(45deg) translateZ(10px) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Pas de changement de couleur au hover - seulement animation */
.hero-btn .btn-primary:hover {
    background: var(--accent-color) !important;
    color: var(--white-color) !important;
    transform: rotateX(15deg) translateY(-10px) !important;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2) !important;
}

.hero-btn .btn-primary:active {
    transform: rotateX(5deg) translateY(-5px) !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.1s ease !important;
}

.hero-btn .btn-primary:hover span {
    transform: translateZ(10px) !important;
}

/* Style pour le bouton secondaire "Voir nos services" - version blanche/accent */
.hero-btn .btn-secondary {
    position: relative !important;
    display: inline-block !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1em !important;
    text-transform: capitalize !important;
    background: white !important;
    color: var(--accent-color) !important;
    border-radius: 100px !important;
    padding: 17px 25px !important;
    margin-right: 50px !important;
    border: 2px solid white !important;
    transition: all 0.4s ease !important;
    z-index: 1 !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1) !important;
    perspective: 1000px !important;
}

.hero-btn .btn-secondary::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: -50px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background-color: var(--accent-color) !important;
    background-image: url('../images/arrow-white.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 14px auto !important;
    transform: translateY(-50%) !important;
    transition: all 0.4s ease !important;
    transform-style: preserve-3d !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
}

.hero-btn .btn-secondary:hover::before {
    transform: translateY(-50%) rotate(45deg) translateZ(10px) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Pas de changement de couleur au hover - seulement animation */
.hero-btn .btn-secondary:hover {
    background: white !important;
    color: var(--accent-color) !important;
    border-color: white !important;
    transform: rotateX(15deg) translateY(-10px) !important;
    box-shadow: 0 15px 25px rgba(255, 255, 255, 0.3) !important;
}

.hero-btn .btn-secondary:active {
    transform: rotateX(5deg) translateY(-5px) !important;
    box-shadow: 0 8px 15px rgba(255, 255, 255, 0.2) !important;
    transition: all 0.1s ease !important;
}

.hero-btn .btn-secondary:hover span {
    transform: translateZ(10px) !important;
}

/* Boutons de lecture/navigation - animation seulement */
.service-content .readmore-btn {
    background-color: var(--primary-green) !important;
    transition: all 0.3s ease !important;
}

.service-content .readmore-btn:hover {
    background-color: var(--primary-green) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(122, 155, 122, 0.4) !important;
}

.footer-newsletter-form .readmore-btn {
    background-color: var(--primary-green) !important;
    transition: all 0.3s ease !important;
}

.footer-newsletter-form .readmore-btn:hover {
    background-color: var(--primary-green) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(122, 155, 122, 0.4) !important;
}

/* Boutons génériques - animation seulement */
.btn-default:hover {
    transform: rotateX(15deg) translateY(-10px) !important;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2) !important;
}

/* Étoiles d'évaluation */
.hero-review-box .fa-star {
    color: var(--primary-green) !important;
}

/* Icônes de contact et téléphone */
.about-contact-box .icon-box {
    background-color: var(--primary-green) !important;
    color: white !important;
}

.why-choose-contact-item .icon-box i {
    color: var(--primary-green) !important;
}

/* Éléments de process/étapes */
.how-work-step-item .icon-box {
    background-color: var(--primary-green) !important;
}

/* Compteurs et statistiques */
.facts-counter-item .icon-box {
    background-color: var(--primary-green) !important;
}

.counter {
    color: var(--primary-green) !important;
}

/* Navigation et liens actifs - pas de changement de couleur */
.nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-green) !important;
}

.header-contact-now:hover {
    color: var(--primary-green) !important;
}

/* Scroll fluide pour les liens d'ancre */
html {
    scroll-behavior: smooth;
}

/* Liens généraux au survol - enlever le changement de couleur */
a:hover {
    transform: translateY(-1px) !important;
    transition: all 0.3s ease !important;
}

/* Réseaux sociaux au survol - animation seulement */
.footer-social-links a:hover {
    transform: translateY(-3px) scale(1.1) !important;
    transition: all 0.3s ease !important;
}

/* Focus states pour l'accessibilité */
input:focus,
textarea:focus,
.btn-default:focus {
    border-color: var(--primary-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(122, 155, 122, 0.25) !important;
}

/* Styles pour la section À propos pleine largeur */
.about-us-content-full {
    padding: 80px 0;
}

.about-us-content-full .section-title {
    margin-bottom: 60px;
}

.about-us-content-full .section-title h2 {
    max-width: 800px;
    margin: 0 auto 30px;
}

.about-us-content-full .section-title p {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Features Grid */
.about-content-grid {
    margin-bottom: 80px;
}

.about-feature {
    text-align: center;
    padding: 40px 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    height: 100%;
    transition: all 0.3s ease;
}

.about-feature:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(122, 155, 122, 0.15);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2rem;
    color: white;
}

.about-feature h4 {
    color: #4A4A4A;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 1.3rem;
}

.about-feature p {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* CTA Section */
.about-cta-section {
    background: #f8f9fa;
    padding: 80px 0;
    border-radius: 20px;
}

.about-cta-content h3 {
    color: #4A4A4A;
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.about-cta-content p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 40px;
}

.contact-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.contact-phone {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contact-phone .icon-box {
    width: 60px;
    height: 60px;
    background: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.contact-info p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

.contact-info h4 {
    margin: 5px 0 0;
    color: var(--primary-green);
    font-weight: 600;
}

.contact-info h4 a {
    color: var(--primary-green);
    text-decoration: none;
}

.contact-button {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .about-us-content-full {
        padding: 60px 0;
    }

    .about-content-grid,
    .about-cta-section {
        margin-bottom: 60px;
    }

    .contact-actions {
        flex-direction: column;
        gap: 30px;
    }

    .contact-button {
        justify-content: center;
    }
}