/* ============================================================
   TTC STICKS — Thème sombre noir & argent
   Chargé APRÈS tous les styles inline : ces règles gagnent
   la cascade. Ne jamais renommer ce fichier (pas d'accent).
   ============================================================ */

/* ---------- 1. Variables : bleu/violet -> argent ---------- */
:root {
    --primary-600: #d9d9e3;
    --primary-700: #a9a9b6;
    --primary: #d9d9e3;
    --primary-dark: #a9a9b6;
    --primary-light: #1d1d25;
    --secondary: #16161d;
    --secondary-600: #26262e;
    --accent-600: #d9d9e3;
    --neutral-50: #101015;
    --neutral-100: #16161d;
    --neutral-200: #26262e;
    --neutral-300: #2e2e38;
    --neutral-400: #8e8e9b;
    --neutral-500: #8e8e9b;
    --neutral-600: #8e8e9b;
    --neutral-700: #b4b4c0;
    --neutral-800: #1e1e24;
}

/* ---------- 2. Socle ---------- */
html, body { background: #0a0a0d !important; }
body { color: #c9c9d4 !important; }

/* ---------- 3. Surfaces (fonds clairs -> sombres) ---------- */
.bg-white, .bg-gray-50, .bg-slate-50 { background-color: #101015 !important; }
.bg-gray-100, .bg-gray-200,
.bg-blue-50, .bg-blue-100, .bg-indigo-100,
.bg-purple-50, .bg-purple-100,
.bg-yellow-100 { background-color: #1d1d25 !important; }
.bg-gray-300 { background-color: #26262e !important; }
.bg-gray-900 { background-color: #16161d !important; }

/* Navbar translucide */
nav, .bg-white\/80, .bg-white\/90, .bg-white\/95 { background: rgba(10, 10, 13, .92) !important; }
.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-md { backdrop-filter: blur(12px); }

/* ---------- 4. Textes ---------- */
.text-gray-900, .text-slate-900,
.text-blue-900, .text-purple-900,
.text-gray-800, .text-gray-700, .text-slate-700 { color: #ececf2 !important; }
.text-gray-700 { color: #cfcfda !important; }
.text-gray-600, .text-slate-600 { color: #b4b4c0 !important; }
.text-gray-500, .text-gray-400, .text-slate-500 { color: #8e8e9b !important; }
.text-gray-300 { color: #9a9aa6 !important; }
.text-white { color: #ececf2 !important; }

/* Bleus / violets -> argent */
.text-blue-600, .text-blue-700, .text-blue-800, .text-blue-500,
.text-indigo-600, .text-indigo-700,
.text-purple-600, .text-purple-700, .text-purple-800,
.hover\:text-blue-600:hover, .hover\:text-blue-700:hover,
.hover\:text-blue-800:hover, .hover\:text-purple-600:hover { color: #d9d9e3 !important; }

/* Jaunes -> argent clair */
.text-yellow-300, .text-yellow-400, .text-yellow-600, .text-yellow-800 { color: #e8e8ee !important; }

::placeholder, .placeholder-gray-400::placeholder { color: #6f6f7c !important; }

/* ---------- 5. Dégradés bleu/violet -> noir profond ---------- */
[class*="bg-gradient"], .bg-gradient-primary, .bg-gradient-to-r, .bg-gradient-to-t,
.hero-gradient {
    background: linear-gradient(135deg, #000 0%, #16161d 100%) !important;
}
.from-blue-600, .to-purple-600, .from-blue-500, .to-purple-500,
.from-blue-700, .to-purple-700 {
    --tw-gradient-from: transparent !important;
    --tw-gradient-to: transparent !important;
}

/* Dégradés de TEXTE -> argent (titres) */
.text-gradient, .bg-clip-text, .stats-counter, [data-target] {
    background: linear-gradient(135deg, #f5f5f8 0%, #9d9dab 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* ---------- 6. Boutons ---------- */
.btn-primary,
.bg-blue-600, .bg-blue-700, .bg-purple-600, .bg-purple-700,
.bg-primary-600, .bg-indigo-600 {
    background: linear-gradient(135deg, #e8e8ee 0%, #a9a9b6 100%) !important;
    color: #0a0a0d !important;
    border-color: transparent !important;
}
.btn-primary:hover,
.hover\:bg-blue-700:hover, .hover\:bg-blue-600:hover, .hover\:bg-purple-700:hover {
    background: #9d9dab !important;
    color: #0a0a0d !important;
}
.hover\:bg-blue-50:hover, .hover\:bg-blue-100:hover,
.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover {
    background-color: #1d1d25 !important;
}
/* Bouton "blanc" du hero (Explorer nos solutions) : garder clair sur fond sombre.
   Scopé à .text-gray-900 pour ne pas toucher aux cartes <a class="bg-white">. */
a.bg-white.text-gray-900, button.bg-white.text-gray-900 {
    background: linear-gradient(135deg, #e8e8ee 0%, #a9a9b6 100%) !important;
    color: #0a0a0d !important;
}
a.bg-white.text-gray-900:hover, button.bg-white.text-gray-900:hover { background: #9d9dab !important; }

/* ---------- 7. Bordures & anneaux ---------- */
.border, .border-gray-100, .border-gray-200, .border-gray-300,
.divide-gray-100 > * + *, .divide-gray-200 > * + * { border-color: #26262e !important; }
.border-blue-500, .border-purple-500,
.ring-blue-600, .ring-blue-500, .focus\:ring-blue-500:focus,
.focus\:border-blue-500:focus { border-color: #d9d9e3 !important; --tw-ring-color: #d9d9e3 !important; }
.ring-2 { --tw-ring-color: #d9d9e3 !important; }

/* ---------- 8. Ombres ---------- */
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .65) !important;
}

/* ---------- 9. Composants custom ---------- */
.nav-link { color: #b4b4c0 !important; }
.nav-link:hover, .nav-link.active { color: #d9d9e3 !important; }

.hero-badge, .service-tag {
    background: #1d1d25 !important;
    color: #d9d9e3 !important;
    border: 1px solid #2e2e38;
}

.service-icon, .feature-icon, .contact-icon, .process-number {
    background: rgba(217, 217, 227, .12) !important;
    color: #d9d9e3 !important;
}

.service-card, .card-service, .material-card, .faq-item,
.blog-card, .article-full, .featured-article,
.contact-info, .gallery-item {
    background: #101015 !important;
    border-color: #26262e !important;
}
.service-card:hover, .card-service:hover, .material-card:hover, .gallery-item:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, .75) !important;
    border-color: #3a3a46 !important;
}

.filter-btn, .category-btn {
    background: #101015 !important;
    border-color: #26262e !important;
    color: #b4b4c0 !important;
}
.filter-btn:hover, .category-btn:hover,
.filter-btn.active, .category-btn.active {
    background: linear-gradient(135deg, #e8e8ee 0%, #a9a9b6 100%) !important;
    color: #0a0a0d !important;
    border-color: transparent !important;
}

/* Blog */
.toc {
    background: #101015 !important;
    border-left-color: #d9d9e3 !important;
    color: #b4b4c0 !important;
}
.toc a { color: #b4b4c0 !important; }
.toc a:hover { color: #ececf2 !important; }
.blog-card-category {
    background: linear-gradient(135deg, #e8e8ee 0%, #a9a9b6 100%) !important;
    color: #0a0a0d !important;
}
.blog-card-meta { color: #8e8e9b !important; }
.tag {
    background: #1d1d25 !important;
    color: #d9d9e3 !important;
    border: 1px solid #2e2e38;
}
.read-more { color: #d9d9e3 !important; }
.read-more:hover { color: #ececf2 !important; }
.breadcrumb { color: rgba(255, 255, 255, .6) !important; }
.breadcrumb a { color: #b4b4c0 !important; }
.article-full p, .article-full li { color: #c9c9d4 !important; }
.article-full h2, .article-full h3 { color: #ececf2 !important; }
.article-full strong { color: #ececf2 !important; }

/* Contact / formulaires */
.form-input, input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], textarea, select {
    background: #101015 !important;
    border-color: #26262e !important;
    color: #ececf2 !important;
}
.form-input:focus, textarea:focus, select:focus {
    border-color: #d9d9e3 !important;
    --tw-ring-color: rgba(217, 217, 227, .35) !important;
}
.radio-option label, .checkbox-option label {
    background: #101015 !important;
    border-color: #26262e !important;
    color: #b4b4c0 !important;
}
.radio-option input:checked + label, .checkbox-option input:checked + label {
    border-color: #d9d9e3 !important;
    background: #1d1d25 !important;
    color: #ececf2 !important;
}
/* .success-message reste vert (validation) */

/* Footer */
footer { background: #0d0d11 !important; }
.footer, .footer a { color: #8e8e9b !important; }
.footer a:hover { color: #ececf2 !important; }
footer .text-gray-400, footer .text-gray-300 { color: #8e8e9b !important; }

/* Icônes SVG héritant de la couleur texte */
svg[class*="text-blue-600"], svg[class*="text-blue-500"], svg[class*="text-blue-700"],
svg[class*="text-purple-600"], svg[class*="text-indigo-600"] { color: #d9d9e3 !important; }

/* CTA section : le dégradé argent avec texte sombre */
.cta-section, .cta-section * { color: #0a0a0d !important; }
.cta-section a, .cta-section .btn-primary {
    background: #0a0a0d !important;
    color: #ececf2 !important;
}

/* Séparateurs hr */
hr { border-color: #26262e !important; }

/* Anti-flash : les sections animées GSAP restent visibles même sans JS */
.gsap-ready .hero-animation, .gsap-ready .service-card,
.gsap-ready .stats-section, .gsap-ready .service-tag {
    opacity: 1 !important; transform: none !important; visibility: visible !important;
}

/* Logo : fond clair d'origine, on le pose sur une pastille argentée */
img[src*="logo-ttc-sticks"] { border-radius: 12px; }

/* ---------- 10. Corrections QA ---------- */

/* Hero du blog : bande sombre, texte argenté */
.hero-blog { background: linear-gradient(135deg, #000 0%, #16161d 100%) !important; }
.hero-blog .text-white { color: #ececf2 !important; }
.hero-blog .text-white\/80 { color: #b4b4c0 !important; }
.hero-blog .breadcrumb, .hero-blog .breadcrumb a { color: #8e8e9b !important; }
.hero-blog .breadcrumb a:hover { color: #ececf2 !important; }

/* Familles colorées résiduelles -> argent (galerie, signalétique, icônes) */
.bg-green-100, .bg-red-100, .bg-orange-100, .bg-pink-100, .bg-teal-100,
.bg-cyan-100, .bg-emerald-100, .bg-amber-100, .bg-rose-100, .bg-violet-100,
.bg-sky-100, .bg-lime-100, .bg-fuchsia-100 {
    background-color: #1d1d25 !important;
}
.text-green-600, .text-red-600, .text-orange-600, .text-pink-600, .text-teal-600,
.text-cyan-600, .text-emerald-600, .text-amber-600, .text-rose-600, .text-violet-600,
.text-sky-600, .text-lime-600, .text-fuchsia-600 {
    color: #d9d9e3 !important;
}
.text-green-800, .text-red-800, .text-orange-800, .text-pink-800, .text-teal-800,
.text-cyan-800, .text-emerald-800, .text-amber-800, .text-rose-800, .text-violet-800,
.text-sky-800, .text-lime-800, .text-fuchsia-800 {
    color: #c9c9d4 !important;
}
.bg-green-500, .bg-red-500, .bg-orange-500, .bg-teal-500, .bg-cyan-500,
.bg-emerald-500, .bg-amber-500, .bg-rose-500 {
    background-color: #8e8e9b !important;
}
.bg-green-600, .bg-red-600, .bg-orange-600, .bg-teal-600 {
    background: linear-gradient(135deg, #e8e8ee 0%, #a9a9b6 100%) !important;
    color: #0a0a0d !important;
}
svg[class*="text-green-600"], svg[class*="text-red-600"], svg[class*="text-orange-600"],
svg[class*="text-teal-600"], svg[class*="text-pink-600"], svg[class*="text-cyan-600"] {
    color: #d9d9e3 !important;
}
.hover\:bg-pink-600:hover, .hover\:bg-green-600:hover, .hover\:bg-red-600:hover {
    background: #9d9dab !important;
}

/* Contenu masqué par les animations GSAP (signaletique, galerie) :
   forcer l'affichage pour que le site reste lisible même sans JS. */
.section-reveal, .fade-in, .slide-up, .stagger-item, .gallery-item {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Hero galerie : gsap.from() fige parfois l'opacité en inline -> forcer l'affichage */
.hero-gradient h1, .hero-gradient p { opacity: 1 !important; transform: none !important; }