/* ===================================
   Agri-Credo de Pala - Custom Colors
   Palette de couleurs personnalisée
====================================== */

:root {
    /* Couleurs Agri-Credo */
    --primary-light: #CCF5AA;
    --primary: #59A61B;
    --accent: #9A93F4;
    --white: #FFFFFF;
    --black: #101010;
    --gray: #5C5C5C;
    
    /* Override des variables du template */
    --base-color: var(--primary);
    --dark-gray: var(--black);
    --medium-gray: var(--gray);
    --light-gray: var(--gray);
}

/* ===================================
   Couleurs de base
====================================== */

/* Couleur principale (remplace base-color) */
.text-base-color,
a.text-base-color,
.text-base-color-hover:hover {
    color: var(--primary) !important;
}

.bg-base-color,
.bg-base-color-hover:hover {
    background-color: var(--primary) !important;
}

.border-base-color,
.border-color-base-color {
    border-color: var(--primary) !important;
}

/* Boutons principaux */
.btn-base-color,
.btn.btn-base-color {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}

.btn-base-color:hover,
.btn.btn-base-color:hover {
    background-color: #4a8a15 !important;
    border-color: #4a8a15 !important;
    color: var(--white) !important;
}

.btn-outline-base-color {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background-color: transparent !important;
}

.btn-outline-base-color:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

/* ===================================
   Fonds et sections
====================================== */

/* Fond primary-light pour sections alternées */
.bg-primary-light,
.section-primary-light {
    background-color: var(--primary-light) !important;
}

.bg-very-light-gray {
    background-color: var(--primary-light) !important;
}

/* Cartes avec survol primary-light */
.card:hover,
.services-box:hover,
.blog-box:hover {
    background-color: var(--primary-light) !important;
    transition: background-color 0.3s ease;
}

/* ===================================
   Badges et tags
====================================== */

.badge {
    background-color: var(--accent) !important;
    color: var(--white) !important;
}

.badge.bg-base-color {
    background-color: var(--primary) !important;
}

/* Tags de formation */
.tag-formation {
    background-color: var(--accent) !important;
    color: var(--white) !important;
}

/* ===================================
   Typographie
====================================== */

/* Titres en noir (sauf si text-white est appliqué) */
h1:not(.text-white):not(.swiper-slide h1),
h2:not(.text-white):not(.swiper-slide h2),
h3:not(.text-white):not(.swiper-slide h3),
h4:not(.text-white):not(.swiper-slide h4),
h5:not(.text-white):not(.swiper-slide h5),
h6:not(.text-white):not(.swiper-slide h6),
.text-dark-gray,
.text-black {
    color: var(--black) !important;
}

/* Assurer que text-white fonctionne même sur les titres */
h1.text-white,
h2.text-white,
h3.text-white,
h4.text-white,
h5.text-white,
h6.text-white,
.swiper-slide h1,
.swiper-slide h2,
.swiper-slide h3,
.swiper-slide h4,
.swiper-slide h5,
.swiper-slide h6 {
    color: var(--white) !important;
}

/* Textes secondaires en gris */
.text-light-gray,
.text-gray,
.text-medium-gray {
    color: var(--gray) !important;
}

/* Liens importants en primary */
a.text-primary,
a.text-base-color {
    color: var(--primary) !important;
}

a.text-primary:hover,
a.text-base-color:hover {
    color: #4a8a15 !important;
}

/* ===================================
   Header et Navigation
====================================== */

.navbar .navbar-nav .nav-link {
    color: var(--black) !important;
}

.navbar .navbar-nav .nav-link:hover {
    color: var(--primary) !important;
}

.navbar .navbar-nav .nav-link.active {
    color: var(--primary) !important;
}

/* Dropdown menu */
.navbar .navbar-nav .dropdown .dropdown-menu {
    background-color: var(--white) !important;
    border-color: var(--primary-light) !important;
}

.navbar .navbar-nav .dropdown .dropdown-menu a {
    color: var(--black) !important;
}

.navbar .navbar-nav .dropdown .dropdown-menu a:hover {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
}

/* ===================================
   Footer
====================================== */

.footer-dark,
.bg-dark-gray {
    background-color: var(--black) !important;
}

.footer-dark .text-white,
.footer-dark a {
    color: var(--white) !important;
}

.footer-dark a:hover {
    color: var(--primary-light) !important;
}

/* ===================================
   Formulaires
====================================== */

.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(89, 166, 27, 0.25) !important;
}

.form-control::placeholder {
    color: var(--gray) !important;
}

/* ===================================
   Icônes et éléments visuels
====================================== */

/* Icônes en primary */
.icon-base-color,
.feather.icon-feather-phone-call.text-base-color,
.feather.icon-feather-mail.text-base-color {
    color: var(--primary) !important;
}

/* Éléments d'appel visuel en accent */
.call-to-action-accent {
    background-color: var(--accent) !important;
    color: var(--white) !important;
}

/* ===================================
   Slider et carrousels
====================================== */

.swiper-pagination-bullet-active {
    background-color: var(--primary) !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--primary) !important;
}



/* ===================================
   Sections spécifiques
====================================== */

/* Section hero */
.hero-section {
    background-color: var(--primary-light) !important;
}

/* Section chiffres clés */
.stats-section .stat-number {
    color: var(--primary) !important;
}

.stats-section .stat-description {
    color: var(--gray) !important;
}

/* ===================================
   Override spécifique pour le template logistics
====================================== */

/* Header top bar */
.header-top-bar.top-bar-dark.bg-dark {
    background-color: var(--black) !important;
}

.header-top-bar .text-light-gray {
    color: var(--gray) !important;
}

/* Bouton "S'inscrire" dans le header */
.header-button .btn-base-color {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

/* Cartes de services */
.services-box-style-01,
.services-box-style-02 {
    background-color: var(--white) !important;
    border-color: var(--primary-light) !important;
}

.services-box-style-01:hover,
.services-box-style-02:hover {
    background-color: var(--primary-light) !important;
    border-color: var(--primary) !important;
}

/* Cartes de blog */
.blog-box-style-01 {
    background-color: var(--white) !important;
}

.blog-box-style-01:hover {
    background-color: var(--primary-light) !important;
}

/* Pagination */
.pagination .page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.pagination .page-link {
    color: var(--primary) !important;
}

.pagination .page-link:hover {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
}

/* Alertes et messages */
.alert-success {
    background-color: var(--primary-light) !important;
    border-color: var(--primary) !important;
    color: var(--black) !important;
}

/* ===================================
   Responsive et ajustements
====================================== */

@media (max-width: 991px) {
    .navbar-collapse {
        background-color: var(--white) !important;
    }
    
    .navbar-nav .nav-link {
        color: var(--black) !important;
    }
    
    .navbar-nav .nav-link:hover {
        color: var(--primary) !important;
        background-color: var(--primary-light) !important;
    }
}

/* ===================================
   Animations et transitions
====================================== */

.btn-base-color,
.btn.btn-base-color {
    transition: all 0.3s ease !important;
}

.btn-base-color:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(89, 166, 27, 0.3) !important;
}

/* ===================================
   Utilitaires supplémentaires
====================================== */

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

.bg-primary {
    background-color: var(--primary) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.bg-accent {
    background-color: var(--accent) !important;
}

.text-primary-light {
    color: var(--primary-light) !important;
}

.bg-primary-light {
    background-color: var(--primary-light) !important;
}

/* ===================================
   Google Maps Section
====================================== */

.google-map-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.map-iframe-wrapper {
    position: relative;
    width: 100%;
}

.google-map-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.1);
    transition: filter 0.3s ease;
}

.google-map-iframe:hover {
    filter: grayscale(0);
}

.map-overlay-info {
    z-index: 10;
    padding: 20px;
}

.map-info-card {
    max-width: 400px;
    width: 100%;
    animation: fadeInUp 0.6s ease;
}

.map-info-icon {
    transition: transform 0.3s ease;
}

.map-info-card:hover .map-info-icon {
    transform: scale(1.1);
}

.max-w-400px {
    max-width: 400px;
}

/* Responsive pour la carte Google Maps */
@media (max-width: 991px) {
    .map-iframe-wrapper {
        height: 400px !important;
    }
    
    .google-map-iframe {
        height: 400px !important;
    }
    
    .map-overlay-info {
        padding: 15px;
    }
    
    .map-info-card {
        max-width: 100%;
        padding: 20px !important;
    }
}

@media (max-width: 767px) {
    .map-iframe-wrapper {
        height: 350px !important;
    }
    
    .google-map-iframe {
        height: 350px !important;
    }
    
    .map-info-card {
        padding: 15px !important;
    }
    
    .map-info-icon .w-80px {
        width: 60px !important;
        height: 60px !important;
    }
    
    .map-info-card h4 {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 575px) {
    .map-iframe-wrapper {
        height: 300px !important;
    }
    
    .google-map-iframe {
        height: 300px !important;
    }
    
    .map-overlay-info {
        padding: 10px;
    }
}

/* Animation pour la carte d'information */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================
   Brand Text (Logo + Nom)
====================================== */

.navbar-brand.d-flex {
    display: flex !important;
    align-items: center !important;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
}

.brand-text span:first-child {
    font-weight: 700;
    color: var(--black) !important;
    font-size: 20px;
    line-height: 1.1;
}

.brand-text span:last-child {
    font-weight: 500;
    color: var(--primary) !important;
    font-size: 14px;
    line-height: 1.2;
}

/* Responsive pour le brand text */
@media (max-width: 1199px) {
    .brand-text {
        margin-left: 10px !important;
    }
    
    .brand-text span:first-child {
        font-size: 18px;
    }
    
    .brand-text span:last-child {
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    .brand-text {
        margin-left: 8px !important;
    }
    
    .brand-text span:first-child {
        font-size: 16px;
    }
    
    .brand-text span:last-child {
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .brand-text {
        margin-left: 6px !important;
    }
    
    .brand-text span:first-child {
        font-size: 14px;
    }
    
    .brand-text span:last-child {
        font-size: 11px;
    }
}