/*
 * Complements pour le mode sombre
 * Styles supplémentaires pour améliorer le confort visuel en mode sombre
 */

/* ---------- Titres de section (".section-title h1/h2/h3", utilisé sur home,
   services, gallery, blog...) ---------- */
/* .section-title h2 a une couleur foncée codée en dur dans style.css (#19191a,
   héritage du thème d'origine) et .section-title h3/h1 n'ont eux aucune couleur
   définie du tout : dans les deux cas le titre reste sombre et devient
   quasi-invisible sur fond sombre sans cette règle (ex: "Une sélection de nos
   meilleures offres" sur la page d'accueil). */
[data-theme="dark"] .section-title h1,
[data-theme="dark"] .section-title h2,
[data-theme="dark"] .section-title h3 {
    color: var(--color-text);
}

/* ---------- Footer ---------- */
[data-theme="dark"] .footer-section {
    background-color: var(--color-surface);
    color: var(--color-text);
}

[data-theme="dark"] .footer-text h6 {
    color: var(--color-text);
}

[data-theme="dark"] .footer-text a {
    color: var(--color-text-muted);
    transition: color 0.2s ease;
}

[data-theme="dark"] .footer-text a:hover {
    color: var(--color-accent);
}

[data-theme="dark"] .fa-social a {
    color: var(--color-text-muted);
    border-color: var(--color-text-muted);
}

[data-theme="dark"] .fa-social a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

[data-theme="dark"] .copyright-option {
    background-color: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
}

[data-theme="dark"] .copyright-option a {
    color: var(--color-text-muted);
}

[data-theme="dark"] .copyright-option a:hover {
    color: var(--color-accent);
}

/* ---------- Newsletter Section ---------- */
[data-theme="dark"] .newsletter-section {
    background-color: var(--color-surface);
}

[data-theme="dark"] .newsletter-section h2,
[data-theme="dark"] .newsletter-section p {
    color: var(--color-text);
}

[data-theme="dark"] .input-group-custom input {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .input-group-custom input::placeholder {
    color: var(--color-text-muted);
}

[data-theme="dark"] .input-group-custom input:focus {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 53, 128, 0.1);
}

/* ---------- Service Cards ---------- */
[data-theme="dark"] .service-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .service-item:hover {
    border-color: var(--color-primary);
    background-color: var(--color-surface-alt);
}

[data-theme="dark"] .service-item h5 {
    color: var(--color-text);
}

[data-theme="dark"] .service-item p {
    color: var(--color-text-muted);
}

/* .service-card : variante utilisée sur l'accueil et la page Services
   (distincte de .service-item ci-dessus, réutilisée sur plusieurs pages
   d'où sa présence ici plutôt que dans un <style> de page). */
[data-theme="dark"] .service-card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .service-card .service-title,
[data-theme="dark"] .service-card h5 {
    color: var(--color-text);
}

[data-theme="dark"] .service-card .service-desc-short,
[data-theme="dark"] .service-card p {
    color: var(--color-text-muted);
}

[data-theme="dark"] .category-tab {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
}

[data-theme="dark"] .services-section {
    background-color: var(--color-bg);
}

/* ---------- Booking Widget ---------- */
[data-theme="dark"] .booking-widget {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .booking-widget .form-control {
    background-color: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .booking-widget .form-control:focus {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-text);
    box-shadow: 0 0 0 0.2rem rgba(0, 53, 128, 0.15);
}

[data-theme="dark"] .booking-widget label {
    color: var(--color-text);
}

/* ---------- Testimonials ---------- */
[data-theme="dark"] .testimonial-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .testimonial-card-content {
    color: var(--color-text);
}

[data-theme="dark"] .testimonial-author-name {
    color: var(--color-text);
}

[data-theme="dark"] .testimonial-author-role {
    color: var(--color-text-muted);
}

/* ---------- Blog/Articles ---------- */
[data-theme="dark"] .article-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .article-card h3,
[data-theme="dark"] .article-card h4 {
    color: var(--color-text);
}

[data-theme="dark"] .article-card p {
    color: var(--color-text-muted);
}

[data-theme="dark"] .article-meta {
    color: var(--color-text-muted);
}

/* ---------- Admin Sections ---------- */
[data-theme="dark"] .admin-section-header {
    border-bottom: 1px solid var(--color-border);
}

[data-theme="dark"] .admin-filters {
    background-color: var(--color-surface-alt);
    border-radius: 8px;
    padding: 16px;
}

/* ---------- Search Boxes ---------- */
[data-theme="dark"] .search-box,
[data-theme="dark"] .search-input {
    background-color: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .search-box:focus,
[data-theme="dark"] .search-input:focus {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-text);
}

/* ---------- Breadcrumbs ---------- */
[data-theme="dark"] .breadcrumb {
    background-color: var(--color-surface-alt);
    border-color: var(--color-border);
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--color-link);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--color-text-muted);
}

/* ---------- Badges & Pills ---------- */
[data-theme="dark"] .badge-light {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
}

[data-theme="dark"] .badge-light:hover {
    background-color: var(--color-border);
}

/* ---------- Tooltips & Popovers ---------- */
[data-theme="dark"] .tooltip-inner {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .popover {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .popover-header {
    background-color: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .popover-body {
    color: var(--color-text);
}

/* ---------- Links & Text ---------- */
[data-theme="dark"] a {
    color: var(--color-link);
}

[data-theme="dark"] a:hover {
    color: var(--color-primary-hover);
}

[data-theme="dark"] .text-primary {
    color: var(--color-link) !important;
}

[data-theme="dark"] .text-secondary {
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] .text-success {
    color: var(--color-success) !important;
}

[data-theme="dark"] .text-danger {
    color: var(--color-danger) !important;
}

[data-theme="dark"] .text-warning {
    color: var(--color-warning) !important;
}

[data-theme="dark"] .text-info {
    color: var(--color-info) !important;
}

/* ---------- Scrollbar ---------- */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-surface);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* ---------- Menu mobile (offcanvas) ---------- */
/* .offcanvas-menu-wrapper joue le rôle de "sidebar" sur petit écran (<991px) ;
   ses couleurs sont codées en dur dans style.css et n'avaient jamais été
   couvertes par le thème sombre. */
[data-theme="dark"] .offcanvas-menu-wrapper {
    background: var(--color-surface);
}

[data-theme="dark"] .canvas-open,
[data-theme="dark"] .offcanvas-menu-wrapper .canvas-close,
[data-theme="dark"] .offcanvas-menu-wrapper .search-icon {
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] .offcanvas-menu-wrapper .header-configure-area .language-option span {
    color: var(--color-text);
}

[data-theme="dark"] .offcanvas-menu-wrapper .header-configure-area .language-option .flag-dropdown {
    background: var(--color-surface-alt);
}

[data-theme="dark"] .offcanvas-menu-wrapper .header-configure-area .language-option .flag-dropdown ul li a {
    color: var(--color-text);
}

[data-theme="dark"] .offcanvas-menu-wrapper .slicknav_menu .slicknav_nav ul li a {
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .offcanvas-menu-wrapper .slicknav_menu .slicknav_nav .slicknav_row span {
    color: var(--color-text);
}

[data-theme="dark"] .offcanvas-menu-wrapper .top-social a,
[data-theme="dark"] .offcanvas-menu-wrapper .top-widget li {
    color: var(--color-text);
}

/* ---------- Section "Des espaces modernes pour chaque occasion" ---------- */
/* .apg-s2 / .apg-s2-title / .apg-s2-content p utilisent des couleurs de marque
   codées en dur (--apg-light, --apg-dark, #4a5568) dans style-home.css, qui ne
   sont jamais redéfinies pour le thème sombre : la section restait donc figée
   en apparence claire (fond clair, texte foncé illisible) même une fois le
   mode sombre activé. */
[data-theme="dark"] .apg-s2 {
    background: var(--color-bg);
}

[data-theme="dark"] .apg-s2-title {
    color: var(--color-text);
}

[data-theme="dark"] .apg-s2-content p {
    color: var(--color-text-muted);
}

/* ---------- Boutons à texte forcé en blanc ---------- */
/* .view-all-btn ("Voir tous nos services") et .btn-review ("Connectez-vous
   pour donner votre avis" / "Donner mon avis") fixent color: #fff en CSS
   normal, mais la règle générique [data-theme="dark"] a ci-dessus est plus
   spécifique (attribut + balise vs simple classe) et la remplace par
   --color-link (bleu), rendant le texte de ces boutons pleins bleu sur fond
   bleu/or en mode sombre. */
[data-theme="dark"] .view-all-btn,
[data-theme="dark"] .view-all-btn:hover,
[data-theme="dark"] .btn-review,
[data-theme="dark"] .btn-review:hover {
    color: #ffffff;
}

/* ---------- Selection ---------- */
[data-theme="dark"] ::selection {
    background-color: var(--color-primary);
    color: white;
}

[data-theme="dark"] ::-moz-selection {
    background-color: var(--color-primary);
    color: white;
}