/* Harmonisation des variables */
:root {
    --tg-primary-color: #0D6EFD;      /* bleu marque */
    --tg-heading-font-color: #0A2E6B; /* titres */
    --tg-accent-color: #E83E8C;       /* accent vivant (rose) */
    --tg-accent-dark: #C2185B;        /* hover accent */
    --tg-body-font-color: #6B7280;    /* texte secondaire */
    --tg-section-background: #F3F4F6; /* fonds alternés */
}

/* 1) Header aéré et navigable */
.menu-area { background: #fff !important; box-shadow: 0 2px 12px rgba(2, 6, 23, 0.06); }
.navbar-wrap > ul > li > a { color: var(--tg-heading-font-color) !important; }
.navbar-wrap > ul > li > a:hover { color: var(--tg-accent-dark) !important; }
.navbar-wrap > ul > li > a::before { background: var(--tg-accent-color) !important; }
.header-action .header-btn .btn { background: var(--tg-accent-color) !important; border-color: var(--tg-accent-color) !important; color:#fff !important; }
.header-action .header-btn .btn:hover { background: var(--tg-primary-color) !important; border-color: var(--tg-primary-color) !important; color:#fff !important; }

/* Topbar: petites touches d’accent */
.header-top-right span i, .header-top-left span i { color: var(--tg-accent-color) !important; }
.contact-info-item .icon { color: var(--tg-primary-color) !important; }

/* 2) Boutons & états (rythme visuel) */
.btn { background: var(--tg-accent-color) !important; border-color: var(--tg-accent-color) !important; color:#fff !important; }
.btn:hover, .btn:focus, .btn:active { background: var(--tg-primary-color) !important; border-color: var(--tg-primary-color) !important; color:#fff !important; }
.btn::before { background: var(--tg-primary-color) !important; }
/* Variante secondaire (accent) */
.btn.btn-two, .button-secondary { background: var(--tg-accent-color) !important; border-color: var(--tg-accent-color) !important; color:#fff !important; }
.btn.btn-two:hover, .button-secondary:hover { background: var(--tg-primary-color) !important; border-color: var(--tg-primary-color) !important; color:#fff !important; }

/* 3) Liens & hovers */
a:not(.btn):hover, .navbar-wrap ul li .sub-menu li a:hover { color: var(--tg-accent-dark) !important; }
.navbar-wrap ul li .sub-menu li a { color: var(--tg-primary-color) !important; }

/* 4) Tags, onglets, puces actives, badges */
.section-title-two .sub-title { color: var(--tg-accent-color) !important; }
.blog-content-two .tag,
.project-nav-wrap .nav-tabs .nav-link.active,
.services-active .slick-dots li.slick-active button,
.slick-dots li.slick-active button,
.badge,
.nav-tabs .nav-link.active {
    background: var(--tg-accent-color) !important;
    border-color: var(--tg-accent-color) !important;
    color: #fff !important;
}

/* 5) FAQ et micro-éléments */
.faq-content .accordion-button { color: var(--tg-primary-color) !important; }
.faq-content .accordion-button:not(.collapsed)::after { background: var(--tg-accent-color) !important; }
.faq-content .accordion-button:not(.collapsed) { color: var(--tg-accent-dark) !important; }

/* 6) Services / cartes: feedback au survol */
.services-icon-two:hover { border-color: var(--tg-accent-color) !important; box-shadow: 0 8px 20px rgba(232, 62, 140, 0.25); }

/* 7) Footer: lisible + accents sur hover */
.footer-area .fw-title .title { color: #fff; }
.footer-area p, .footer-content, .footer-content p, .footer-contact a, .footer-bottom, .footer-bottom p { color: #E5E7EB; }
.footer-area a { color: #E5E7EB; }
.footer-area a:hover { color: #fff; text-decoration: underline; }
.footer-social-menu a { color: #fff; border: 1px solid rgba(255,255,255,0.25); padding: 6px 12px; border-radius: 999px; }
.footer-social-menu a:hover { background: var(--tg-accent-color); border-color: var(--tg-accent-color); }
/* Optionnel: léger voile pour améliorer le contraste du footer */
.footer-bg { position: relative; }
.footer-bg::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(9,14,37,0.45), rgba(9,14,37,0.75)); pointer-events:none; }
.footer-bg > * { position: relative; }

/* 8) Texte de succès en vert accentué ou rose selon choix */
.text-success { color: var(--tg-accent-color) !important; }

/* 9) Accessibilité: focus visible */
:focus { outline: 2px solid var(--tg-accent-color); outline-offset: 2px; }


/* 10) Contraste automatique pour fonds colorés */
.bg-primary { background: var(--tg-primary-color) !important; color: #fff !important; }
.bg-accent { background: var(--tg-accent-color) !important; color: #fff !important; }
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary p, .bg-primary .title, .bg-primary .section-title .title,
.bg-accent h1, .bg-accent h2, .bg-accent h3, .bg-accent h4, .bg-accent h5, .bg-accent h6,
.bg-accent p, .bg-accent .title, .bg-accent .section-title .title,
.text-on-dark { color: #fff !important; }
.bg-primary a, .bg-accent a { color: #FDFEFF !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.6); }
.bg-primary a:hover, .bg-accent a:hover { color: #ffffff !important; text-decoration-color: #ffffff; }

/* 11) Etats de focus et disabled accessibles */
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 0.25rem rgba(232, 62, 140, 0.35); outline: none; }
.btn:disabled, .btn.disabled { opacity: .65; cursor: not-allowed; }

/* 12) Champs de formulaire: focus contrasté */
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--tg-accent-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(232, 62, 140, 0.2) !important;
}

/* Harmonisation des variables */
:root {
    --tg-primary-color: #0D6EFD;      /* bleu marque */
    --tg-heading-font-color: #0A2E6B; /* titres */
    --tg-accent-color: #E83E8C;       /* accent vivant (rose) */
    --tg-accent-dark: #C2185B;        /* hover accent */
    --tg-body-font-color: #6B7280;    /* texte secondaire */
    --tg-section-background: #F3F4F6; /* fonds alternés */
}

/* 1) Header aéré et navigable */
.menu-area { background: #fff !important; box-shadow: 0 2px 12px rgba(2, 6, 23, 0.06); }
.navbar-wrap > ul > li > a { color: var(--tg-heading-font-color) !important; }
.navbar-wrap > ul > li > a:hover { color: var(--tg-accent-dark) !important; }
.navbar-wrap > ul > li > a::before { background: var(--tg-accent-color) !important; }
.header-action .header-btn .btn { background: var(--tg-accent-color) !important; border-color: var(--tg-accent-color) !important; color:#fff !important; }
.header-action .header-btn .btn:hover { background: var(--tg-primary-color) !important; border-color: var(--tg-primary-color) !important; color:#fff !important; }

/* Topbar: petites touches d’accent */
.header-top-right span i, .header-top-left span i { color: var(--tg-accent-color) !important; }
.contact-info-item .icon { color: var(--tg-primary-color) !important; }

/* 2) Boutons & états (rythme visuel) */
.btn { background: var(--tg-accent-color) !important; border-color: var(--tg-accent-color) !important; color:#fff !important; }
.btn:hover, .btn:focus, .btn:active { background: var(--tg-primary-color) !important; border-color: var(--tg-primary-color) !important; color:#fff !important; }
.btn::before { background: var(--tg-primary-color) !important; }
/* Variante secondaire (accent) */
.btn.btn-two, .button-secondary { background: var(--tg-accent-color) !important; border-color: var(--tg-accent-color) !important; color:#fff !important; }
.btn.btn-two:hover, .button-secondary:hover { background: var(--tg-primary-color) !important; border-color: var(--tg-primary-color) !important; color:#fff !important; }

/* 3) Liens & hovers */
a:not(.btn):hover, .navbar-wrap ul li .sub-menu li a:hover { color: var(--tg-accent-dark) !important; }
.navbar-wrap ul li .sub-menu li a { color: var(--tg-primary-color) !important; }

/* 4) Tags, onglets, puces actives, badges */
.section-title-two .sub-title { color: var(--tg-accent-color) !important; }
.blog-content-two .tag,
.project-nav-wrap .nav-tabs .nav-link.active,
.services-active .slick-dots li.slick-active button,
.slick-dots li.slick-active button,
.badge,
.nav-tabs .nav-link.active {
    background: var(--tg-accent-color) !important;
    border-color: var(--tg-accent-color) !important;
    color: #fff !important;
}

/* 5) FAQ et micro-éléments */
.faq-content .accordion-button { color: var(--tg-primary-color) !important; }
.faq-content .accordion-button:not(.collapsed)::after { background: var(--tg-accent-color) !important; }
.faq-content .accordion-button:not(.collapsed) { color: var(--tg-accent-dark) !important; }

/* 6) Services / cartes: feedback au survol */
.services-icon-two:hover { border-color: var(--tg-accent-color) !important; box-shadow: 0 8px 20px rgba(232, 62, 140, 0.25); }

/* 7) Footer: lisible + accents sur hover */
.footer-area .fw-title .title { color: #fff; }
.footer-area p, .footer-content, .footer-content p, .footer-contact a, .footer-bottom, .footer-bottom p { color: #E5E7EB; }
.footer-area a { color: #E5E7EB; }
.footer-area a:hover { color: #fff; text-decoration: underline; }
.footer-social-menu a { color: #fff; border: 1px solid rgba(255,255,255,0.25); padding: 6px 12px; border-radius: 999px; }
.footer-social-menu a:hover { background: var(--tg-accent-color); border-color: var(--tg-accent-color); }
/* Optionnel: léger voile pour améliorer le contraste du footer */
.footer-bg { position: relative; }
.footer-bg::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(9,14,37,0.45), rgba(9,14,37,0.75)); pointer-events:none; }
.footer-bg > * { position: relative; }

/* 8) Texte de succès en vert accentué ou rose selon choix */
.text-success { color: var(--tg-accent-color) !important; }

/* 9) Accessibilité: focus visible */
:focus { outline: 2px solid var(--tg-accent-color); outline-offset: 2px; }


/* 10) Contraste automatique pour fonds colorés */
.bg-primary { background: var(--tg-primary-color) !important; color: #fff !important; }
.bg-accent { background: var(--tg-accent-color) !important; color: #fff !important; }
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary p, .bg-primary .title, .bg-primary .section-title .title,
.bg-accent h1, .bg-accent h2, .bg-accent h3, .bg-accent h4, .bg-accent h5, .bg-accent h6,
.bg-accent p, .bg-accent .title, .bg-accent .section-title .title,
.text-on-dark { color: #fff !important; }
.bg-primary a, .bg-accent a { color: #FDFEFF !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.6); }
.bg-primary a:hover, .bg-accent a:hover { color: #ffffff !important; text-decoration-color: #ffffff; }

/* 11) Etats de focus et disabled accessibles */
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 0.25rem rgba(232, 62, 140, 0.35); outline: none; }
.btn:disabled, .btn.disabled { opacity: .65; cursor: not-allowed; }

/* 12) Champs de formulaire: focus contrasté */
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--tg-accent-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(232, 62, 140, 0.2) !important;
}

/* 13) Couleur du hamburger (mobile) */
.mobile-nav-toggler, .mobile-nav-toggler i { color: var(--tg-primary-color) !important; }