/* ============================================================
   dark-mode.css — Thème sombre IAP Bénin  v3
   Noir doux (pas de noir pur), tout est lisible.
   À placer APRÈS <script src="https://cdn.tailwindcss.com"></script>
   ============================================================ */

/* ── Palette sombre IAP ─────────────────────────────────────
   Fond principal   #1c1c1e  (noir Apple-style, pas du noir pur)
   Cartes / panels  #2e2e32
   Sections alt     #1a1a1c
   Séparateurs      #3a3a3e
   Texte principal  #e8e8ea
   Texte secondaire #9a9aa0
   Accent vert      #3dd68c
   Vert doux hover  #86efac
   ────────────────────────────────────────────────────────── */

/* ============================================================
   0. TRANSITIONS DOUCES
   ============================================================ */
html.dark * {
    transition: background-color .22s ease, color .18s ease, border-color .18s ease !important;
}
html.dark ::selection { background: #155D44; color: #fff; }


/* ============================================================
   1. BASE
   ============================================================ */
html.dark,
html.dark body {
    background-color: #1c1c1e !important;
    color: #e8e8ea !important;
}


/* ============================================================
   2. SWIPER — fix fond blanc/bleu parasite
   ============================================================ */
.swiper,
.swiper-wrapper,
.swiper-slide,
.heroSwiper,
.heroSwiper .swiper-slide {
    background-color: #1c1c1e !important;
}
html.dark .heroSwiper .swiper-slide::before     { background: rgba(0,0,0,.5) !important; }
html.dark .heroSwiper .swiper-pagination-bullet { background: #888 !important; opacity:.7; }
html.dark .heroSwiper .swiper-pagination-bullet-active { background: #3dd68c !important; opacity:1; }


/* ============================================================
   3. HEADER
   ============================================================ */
html.dark header,
html.dark header.bg-white,
html.dark header.shadow-sm {
    background-color: #252528 !important;
    border-bottom: 1px solid #3a3a3e !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.4) !important;
}
html.dark header nav a              { color: #b0b0b8 !important; }
html.dark header nav a:hover        { color: #3dd68c !important; }
html.dark header nav a.active       { color: #3dd68c !important; border-bottom-color: #3dd68c !important; }
html.dark header a.bg-green-600     { background-color: #16a34a !important; color: #fff !important; }
html.dark header a.bg-green-600:hover { background-color: #15803d !important; }
html.dark header img                { filter: brightness(1.1); }


/* ============================================================
   4. FONDS DE SECTIONS — règle universelle large
   ============================================================ */

/* Blanc → surface sombre */
html.dark .bg-white,
html.dark section.bg-white,
html.dark div.bg-white {
    background-color: #252528 !important;
}

/* #f4f4f4 → fond alterné */
html.dark .bg-\[#f4f4f4\],
html.dark section.bg-\[#f4f4f4\],
html.dark div.bg-\[#f4f4f4\] {
    background-color: #1a1a1c !important;
}

/* #f0f0f0 → fond galerie */
html.dark .bg-\[#f0f0f0\],
html.dark section.bg-\[#f0f0f0\],
html.dark div.bg-\[#f0f0f0\] {
    background-color: #1a1a1c !important;
}

/* Gris Tailwind */
html.dark .bg-gray-50  { background-color: #252528 !important; }
html.dark .bg-gray-100 { background-color: #222224 !important; }
html.dark .bg-gray-200 { background-color: #2a2a2e !important; }
html.dark .bg-gray-300 { background-color: #323236 !important; }

/* Vert foncé IAP — reste vert mais plus profond */
html.dark .bg-\[#0B3D2E\],
html.dark section.bg-\[#0B3D2E\],
html.dark div.bg-\[#0B3D2E\] {
    background-color: #0c2e20 !important;
}
html.dark .bg-\[#155D44\] { background-color: #0d3d27 !important; }

/* Vert Tailwind */
html.dark .bg-green-50   { background-color: #0f1f17 !important; }
html.dark .bg-green-100  { background-color: #1a3a25 !important; }
html.dark .bg-green-600  { background-color: #16a34a !important; }
html.dark .bg-green-700  { background-color: #15803d !important; }


/* ============================================================
   5. CARTES — spécificité renforcée
   ============================================================ */

/* Toute carte blanche avec rounded ou shadow */
html.dark [class*="rounded"][class*="bg-white"],
html.dark .bg-white[class*="rounded"],
html.dark .bg-white[class*="shadow"],
html.dark .bg-white.p-6,
html.dark .bg-white.p-8,
html.dark .bg-white.p-10,
html.dark .bg-white.p-12 {
    background-color: #2e2e32 !important;
}

/* Cartes grille (formations, valeurs…) */
html.dark .grid .bg-white {
    background-color: #2e2e32 !important;
}

/* Cartes équipe */
html.dark .bg-white.rounded-2xl {
    background-color: #2e2e32 !important;
}
html.dark .bg-white.rounded-3xl {
    background-color: #2e2e32 !important;
}


/* ============================================================
   6. TYPOGRAPHIE — tout le texte visible
   ============================================================ */
html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 {
    color: #f0f0f2 !important;
}

/* Titres sur fond vert IAP → blanc */
html.dark .bg-\[#0B3D2E\] h1,
html.dark .bg-\[#0B3D2E\] h2,
html.dark .bg-\[#0B3D2E\] h3 {
    color: #ffffff !important;
}

html.dark p { color: #c4c4cc !important; }

/* Paragraphes sur fond vert → vert pâle lisible */
html.dark .bg-\[#0B3D2E\] p      { color: #a8d8b8 !important; }
html.dark .bg-\[#0B3D2E\] .italic { color: #c8dcd0 !important; }

html.dark span { color: inherit; }

/* Classes texte Tailwind */
html.dark .text-white      { color: #ffffff !important; }
html.dark .text-gray-100   { color: #f0f0f2 !important; }
html.dark .text-gray-200   { color: #d0d0d8 !important; }
html.dark .text-gray-300   { color: #b0b0b8 !important; }
html.dark .text-gray-400   { color: #909098 !important; }
html.dark .text-gray-500   { color: #808088 !important; }
html.dark .text-gray-600   { color: #aaaab2 !important; }
html.dark .text-gray-700   { color: #c0c0c8 !important; }
html.dark .text-gray-800   { color: #d8d8e0 !important; }
html.dark .text-gray-900   { color: #e8e8ea !important; }

/* Couleurs IAP vertes */
html.dark .text-\[#0B3D2E\]  { color: #3dd68c !important; }
html.dark .text-\[#155D44\]  { color: #3dd68c !important; }
html.dark .text-green-700    { color: #3dd68c !important; }
html.dark .text-green-600    { color: #3dd68c !important; }
html.dark .text-green-500    { color: #3dd68c !important; }
html.dark .text-green-400    { color: #86efac !important; }
html.dark .text-green-300    { color: #bbf7d0 !important; }

/* Labels uppercase tracking-widest */
html.dark .tracking-widest  { color: #3dd68c !important; }

/* Sur fond vert IAP, les spans/divs avec text-gray-* restent lisibles */
html.dark .bg-\[#0B3D2E\] .text-gray-200   { color: #d0e8d8 !important; }
html.dark .bg-\[#0B3D2E\] .text-gray-300   { color: #a8c8b0 !important; }
html.dark .bg-\[#0B3D2E\] .text-white      { color: #ffffff !important; }
html.dark .bg-\[#0B3D2E\] .text-green-400  { color: #86efac !important; }
html.dark .bg-\[#0B3D2E\] .font-bold       { color: #ffffff !important; }
html.dark .bg-\[#0B3D2E\] .text-xs         { color: #a8c8b0 !important; }

/* Liens */
html.dark a:not([class])         { color: #3dd68c; }
html.dark a:not([class]):hover   { color: #86efac; }
html.dark a.text-\[#0B3D2E\]    { color: #3dd68c !important; }
html.dark a.hover\:text-green-700:hover { color: #86efac !important; }
html.dark .italic                { color: #d0d8d0 !important; }

/* Strong dans prose */
html.dark .prose strong          { color: #f0f0f2 !important; }
html.dark .prose p               { color: #c4c4cc !important; }
html.dark .prose .text-\[#0B3D2E\] { color: #3dd68c !important; }

/* Texte secondaire xs */
html.dark .text-xs.text-gray-500 { color: #707078 !important; }
html.dark .text-xs.text-gray-300 { color: #a8c8b0 !important; }
html.dark .text-sm.text-gray-500 { color: #808088 !important; }


/* ============================================================
   7. COMPOSANTS SPÉCIFIQUES
   ============================================================ */

/* Cercle icône vert */
html.dark .bg-green-100 {
    background-color: #1a3a25 !important;
}
html.dark .bg-green-100 i,
html.dark .bg-green-100 .fas { color: #3dd68c !important; }

/* Cercle avatar blanc/20 */
html.dark .bg-white\/20.rounded-full { background-color: rgba(255,255,255,.15) !important; }

/* Gradient bas de photo */
html.dark .from-black\/50 { --tw-gradient-from: rgba(0,0,0,.7); }

/* Bordures colorées */
html.dark .border-t-4.border-green-600  { border-top-color: #3dd68c !important; }
html.dark .border-green-500             { border-color: #3dd68c !important; }
html.dark .border-l-4.border-green-500  { border-color: #3dd68c !important; }
html.dark .border-green-400             { border-color: #86efac !important; }
html.dark .hover\:border-green-600:hover { border-color: #3dd68c !important; }

/* Barre décorative verte h-1 */
html.dark .h-1.bg-green-600,
html.dark .w-20.h-1.bg-green-600,
html.dark .bg-green-600.rounded-full    { background-color: #16a34a !important; }

/* Ombres */
html.dark .shadow-sm   { box-shadow: 0 1px 4px rgba(0,0,0,.6) !important; }
html.dark .shadow-md   { box-shadow: 0 4px 16px rgba(0,0,0,.55) !important; }
html.dark .shadow-lg   { box-shadow: 0 6px 24px rgba(0,0,0,.6) !important; }
html.dark .shadow-xl   { box-shadow: 0 10px 36px rgba(0,0,0,.65) !important; }
html.dark .hover\:shadow-lg:hover { box-shadow: 0 10px 28px rgba(0,0,0,.7) !important; }
html.dark .hover\:shadow-md:hover { box-shadow: 0 4px 16px rgba(0,0,0,.6) !important; }


/* ============================================================
   8. BOUTONS
   ============================================================ */
/* Outline vert */
html.dark .border-\[#0B3D2E\],
html.dark .border-2.border-\[#0B3D2E\]  { border-color: #3dd68c !important; }
html.dark .text-\[#0B3D2E\]             { color: #3dd68c !important; }
html.dark .hover\:bg-\[#0B3D2E\]:hover  { background-color: #155D44 !important; color: #ffffff !important; }
html.dark .hover\:text-white:hover      { color: #ffffff !important; }

/* Plein vert */
html.dark .bg-green-600               { background-color: #16a34a !important; }
html.dark .hover\:bg-green-700:hover  { background-color: #15803d !important; }
html.dark a.bg-green-600              { background-color: #16a34a !important; color: #fff !important; }
html.dark a.bg-green-600:hover        { background-color: #15803d !important; }

/* Glass hero */
html.dark .bg-white\/10               { background-color: rgba(255,255,255,.08) !important; }
html.dark .bg-white\/20               { background-color: rgba(255,255,255,.12) !important; }
html.dark .border-white\/40           { border-color: rgba(255,255,255,.28) !important; }
html.dark .hover\:bg-white\/20:hover  { background-color: rgba(255,255,255,.16) !important; }

/* Bouton blanc dans section verte */
html.dark section.bg-\[#0B3D2E\] a.bg-white  { background-color: #f0f0f2 !important; color: #0c2e20 !important; }
html.dark section.bg-\[#0B3D2E\] a:hover.hover\:bg-gray-100 { background-color: #e0e0e2 !important; }


/* ============================================================
   9. GALERIE
   ============================================================ */
html.dark .gallery-cover {
    background: #2e2e32 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.5) !important;
}
html.dark .gallery-cover .card-caption {
    background: #2e2e32 !important;
    color: #c0c0c8 !important;
    border-top-color: #3a3a3e !important;
}
html.dark .atelier-title { color: #3dd68c !important; }
html.dark .cover-badge   { background: rgba(20,55,38,.9) !important; color: #a8f0c0 !important; }


/* ============================================================
   10. FORMULAIRES
   ============================================================ */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #2a2a2e !important;
    color: #e8e8ea !important;
    border-color: #3a3a3e !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #606068 !important; }
html.dark input:focus,
html.dark textarea:focus        { border-color: #3dd68c !important; box-shadow: 0 0 0 3px rgba(61,214,140,.18) !important; }
html.dark label                 { color: #c0c0c8 !important; }
html.dark select option         { background: #2a2a2e; color: #e8e8ea; }


/* ============================================================
   11. BORDURES & SÉPARATEURS
   ============================================================ */
html.dark hr                    { border-color: #3a3a3e !important; }
html.dark .border               { border-color: #3a3a3e !important; }
html.dark .border-b, html.dark .border-t,
html.dark .border-l, html.dark .border-r { border-color: #3a3a3e !important; }
html.dark .border-gray-100      { border-color: #2a2a2e !important; }
html.dark .border-gray-200      { border-color: #3a3a3e !important; }
html.dark .divide-y > * + *     { border-top-color: #3a3a3e !important; }


/* ============================================================
   12. MENU MOBILE
   ============================================================ */
html.dark .mobile-menu              { background-color: #252528 !important; }
html.dark .mobile-menu-header       { border-bottom-color: #3a3a3e !important; }
html.dark .mobile-menu-close        { background: #3a3a3e !important; color: #e8e8ea !important; }
html.dark .mobile-menu-close:hover  { background: #444448 !important; }
html.dark .mobile-menu-theme        { border-bottom-color: #3a3a3e !important; }
html.dark .mobile-menu-theme span   { color: #606068 !important; }
html.dark .mobile-menu-nav a        { color: #d0d0d8 !important; border-bottom-color: #2e2e32 !important; }
html.dark .mobile-menu-nav a:hover  { background: #2e2e32 !important; color: #3dd68c !important; }
html.dark .mobile-menu-nav a.active {
    background: #1a2e23 !important;
    color: #3dd68c !important;
    border-left-color: #3dd68c !important;
}
html.dark .mobile-menu-nav a .nav-dot            { background: #444448 !important; }
html.dark .mobile-menu-nav a.active .nav-dot,
html.dark .mobile-menu-nav a:hover .nav-dot      { background: #3dd68c !important; }
html.dark .mobile-menu-footer       { border-top-color: #3a3a3e !important; }
html.dark .menu-overlay             { background: rgba(0,0,0,.7) !important; }
html.dark .iap-theme-btn            { background: #2e2e32 !important; border-color: #444448 !important; }
html.dark .iap-toggle-pill.on       { background: #3dd68c !important; }


/* ============================================================
   13. CHATBOT ROSA
   ============================================================ */
html.dark [id*="rosa"],
html.dark [class*="rosa"] {
    background-color: #252528 !important;
    border-color: #3a3a3e !important;
    color: #e8e8ea !important;
}
html.dark [class*="rosa"] input       { background: #2e2e32 !important; color: #e8e8ea !important; border-color: #444 !important; }
html.dark [class*="chat-header"],
html.dark [class*="rosa-header"]      { background-color: #0c2e20 !important; color: #3dd68c !important; }
html.dark [class*="message-bot"]      { background-color: #2e2e32 !important; color: #e8e8ea !important; }
html.dark [class*="message-user"]     { background-color: #0c2e20 !important; color: #a8f0c0 !important; }


/* ============================================================
   14. FOOTER
   ============================================================ */
html.dark footer                 { background-color: #141416 !important; border-top: 1px solid #2a2a2e !important; }
html.dark footer p               { color: #808088 !important; }
html.dark footer a               { color: #808088 !important; }
html.dark footer a:hover         { color: #3dd68c !important; }
html.dark footer h3, html.dark footer h4,
html.dark footer strong          { color: #e8e8ea !important; }
html.dark footer small           { color: #606068 !important; }
html.dark footer .fab,
html.dark footer .fas            { color: #808088 !important; }
html.dark footer a:hover .fab,
html.dark footer a:hover .fas    { color: #3dd68c !important; }


/* ============================================================
   15. SCROLLBAR
   ============================================================ */
html.dark ::-webkit-scrollbar              { width: 8px; height: 8px; }
html.dark ::-webkit-scrollbar-track       { background: #1c1c1e; }
html.dark ::-webkit-scrollbar-thumb       { background: #3a3a3e; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #4a4a4e; }


/* ============================================================
   16. ICÔNES FONT AWESOME
   ============================================================ */
html.dark .fas, html.dark .far, html.dark .fab { color: inherit; }
html.dark .text-green-700 i,
html.dark .text-green-600 i { color: #3dd68c !important; }

/* Icône quote-left décorative */
html.dark .fa-quote-left { color: rgba(61,214,140,.25) !important; }


/* ============================================================
   17. TABLEAUX
   ============================================================ */
html.dark table             { color: #e8e8ea !important; }
html.dark thead             { background-color: #1a3a25 !important; }
html.dark thead th          { color: #86efac !important; }
html.dark tbody tr:nth-child(even) { background-color: #252528 !important; }
html.dark tbody tr:nth-child(odd)  { background-color: #1e1e20 !important; }
html.dark tbody td          { color: #c4c4cc !important; border-color: #3a3a3e !important; }
html.dark tbody tr:hover    { background-color: #1e2e24 !important; }