/* ============================================================================
 * MAYELA HUB - Thème clair
 *
 * Actif quand <html data-theme="light"> (le défaut, voir js/theme.js).
 * Tout est scopé sous html[data-theme="light"] : le thème sombre d'origine
 * (custom.css, index.css, geno-trace.css) n'est pas modifié et reste
 * disponible via le bouton soleil / lune.
 * ========================================================================== */

html[data-theme="light"] {
    --primary-color: #161A2B;          /* titres : bleu nuit */
    --secondary-color: #FFFFFF;        /* cartes */
    --text-color: #5B6072;             /* texte courant */
    --bg-color: #F6F3EF;               /* fond de page, blanc cassé chaud */
    --accent-color: #A93E17;           /* cuivre, inchangé */
    --accent-secondary-color: #15399A; /* bleu, inchangé */
    --divider-color: #161A2B12;
    --dark-divider-color: #161A2B26;
    --light-surface: #EFEBE6;          /* pied de page, zones en retrait */
    --card-shadow: 0 1px 2px #161A2B0A, 0 12px 32px -14px #161A2B24;
    color-scheme: light;
}

html[data-theme="light"] body {
    background: var(--bg-color);
    color: var(--text-color);
}

html[data-theme="light"] .preloader {
    background: var(--bg-color);
}

/* ---------- Cartes : fond blanc, bord fin, ombre douce ---------- */

html[data-theme="light"] .service-item,
html[data-theme="light"] .facts-item,
html[data-theme="light"] .how-work-item,
html[data-theme="light"] .how-work-step-item,
html[data-theme="light"] .what-we-do-box,
html[data-theme="light"] .testimonials-box,
html[data-theme="light"] .faq-accordion .accordion-item,
html[data-theme="light"] .contact-info-item,
html[data-theme="light"] .contact-us-form,
html[data-theme="light"] .about-item,
html[data-theme="light"] .post-item,
html[data-theme="light"] .team-item,
html[data-theme="light"] .service-impact-list,
html[data-theme="light"] .testimonial-item-box {
    border-color: var(--divider-color) !important;
    box-shadow: var(--card-shadow);
}

/* ---------- En-tête ---------- */

html[data-theme="light"] .logo-svg-animated path {
    stroke: var(--primary-color);
}

html[data-theme="light"] header.main-header .header-sticky.active {
    background: #F6F3EFE6;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 24px -14px #161A2B40;
}

html[data-theme="light"] .navbar-nav .language-switcher .nav-link,
html[data-theme="light"] .navbar-nav .language-switcher .nav-link:hover,
html[data-theme="light"] .language-switcher-desktop a.nav-link,
html[data-theme="light"] .slicknav_menu .language-switcher a,
html[data-theme="light"] .slicknav_menu .language-switcher-desktop a {
    -webkit-text-fill-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

html[data-theme="light"] .slicknav_btn {
    background: #161A2B0D;
    border-color: #161A2B26;
}

html[data-theme="light"] .slicknav_icon .slicknav_icon-bar,
html[data-theme="light"] .navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar {
    background-color: var(--primary-color);
}

html[data-theme="light"] .slicknav_menu {
    background: var(--secondary-color);
    box-shadow: var(--card-shadow);
}

/* ---------- Bandeau d'accueil (hélice ADN) ---------- */

html[data-theme="light"] .geno-hero {
    background: var(--bg-color);
}

html[data-theme="light"] .geno-hero-fade {
    background:
        radial-gradient(70% 55% at 12% 88%, rgba(246, 243, 239, 0.92) 0%, rgba(246, 243, 239, 0) 100%),
        linear-gradient(180deg, rgba(246, 243, 239, 0.55) 0%, rgba(246, 243, 239, 0) 22%, rgba(246, 243, 239, 0) 100%);
}

html[data-theme="light"] .geno-hero-content h1,
html[data-theme="light"] .geno-hero-content h1 span {
    color: var(--primary-color);
    -webkit-text-fill-color: var(--primary-color);
}

html[data-theme="light"] .geno-lead {
    color: var(--text-color);
}

html[data-theme="light"] .geno-lead strong {
    color: var(--primary-color);
}

html[data-theme="light"] .geno-btn,
html[data-theme="light"] .geno-btn:hover,
html[data-theme="light"] .geno-btn:focus-visible,
html[data-theme="light"] .geno-btn-ghost:hover,
html[data-theme="light"] .geno-btn-ghost:focus-visible {
    color: #FFFFFF;
}

html[data-theme="light"] .geno-btn-ghost {
    background: rgba(255, 255, 255, 0.7);
    color: var(--primary-color);
}

/* ---------- Bandeau titre des pages intérieures ---------- */

html[data-theme="light"] .page-header {
    background:
        radial-gradient(40% 70% at 20% 30%, #A93E1722, transparent 70%),
        radial-gradient(40% 70% at 80% 60%, #15399A1F, transparent 70%),
        var(--bg-color) !important;
}

/* ---------- Boutons sur dégradé : texte toujours blanc ---------- */

html[data-theme="light"] .btn-default,
html[data-theme="light"] .btn-default:hover,
html[data-theme="light"] .cookie-buttons .btn-default {
    color: #FFFFFF;
}

/* Le style inline des pages force le gris du thème sombre sur <strong> */
html[data-theme="light"] strong {
    color: var(--primary-color);
}

html[data-theme="light"] .service-item-content p a {
    color: var(--text-color) !important;
}

/* ---------- Produits ---------- */

/* Les noms restent blancs : ils sont posés sur l'image du produit. */
html[data-theme="light"] .project-item .project-content .mayela-product {
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

html[data-theme="light"] .project-content p {
    color: #FFFFFFCC;
}

/* ---------- Partenaires ---------- */

/* Même comportement qu'en sombre : gris au repos, vraie couleur au survol. */
html[data-theme="light"] .hero-company-slider .company-logo img {
    filter: grayscale(100%) opacity(0.75);
}

html[data-theme="light"] .hero-company-slider .company-logo img:hover {
    filter: none;
}

/* Wortis est un logo entièrement blanc : foncé au repos, et au survol il
   s'affiche dans sa vraie couleur sur une pastille bleu nuit. */
html[data-theme="light"] .hero-company-slider .company-logo img[src*="wortis"] {
    filter: brightness(0) opacity(0.7);
    padding: 6px 12px;
    border-radius: 8px;
    box-sizing: content-box;
    transition: all 0.3s ease;
}

html[data-theme="light"] .hero-company-slider .company-logo img[src*="wortis"]:hover {
    filter: none;
    background: var(--primary-color);
}

/* ---------- Témoignages, FAQ, pied de page : version apaisée ---------- */

/* Carte des témoignages : plus de halos colorés dans les coins. */
html[data-theme="light"] .testimonials-box {
    background: var(--secondary-color);
}

/* Carte de citation : blanche comme les autres cartes, sans aplat cuivre → bleu. */
html[data-theme="light"] .testimonial-slider .swiper {
    background: var(--secondary-color);
    border: 1px solid var(--divider-color);
    box-shadow: var(--card-shadow);
}


html[data-theme="light"] .testimonial-slider::before {
    background-color: #161A2B0A;
}

html[data-theme="light"] .testimonial-quotes-img img {
    filter: brightness(0) opacity(0.25);
}

html[data-theme="light"] .testimonial-content p {
    color: var(--text-color);
}

html[data-theme="light"] .testimonial-slider .testimonial-pagination .swiper-pagination-bullet {
    background: var(--primary-color);
}

/* FAQ */
html[data-theme="light"] .faq-accordion .accordion-item {
    background: var(--secondary-color);
}

html[data-theme="light"] .faq-accordion .accordion-header .accordion-button,
html[data-theme="light"] .faq-accordion .accordion-header .accordion-button .mayela-product,
html[data-theme="light"] .faq-accordion .accordion-item .accordion-button::after,
html[data-theme="light"] .faq-accordion .accordion-item .accordion-button.collapsed::after {
    color: var(--primary-color) !important;
    -webkit-text-fill-color: var(--primary-color) !important;
}

html[data-theme="light"] .faq-accordion .accordion-button .faq-number {
    border-color: var(--primary-color);
}

/* Bloc d'appel à l'action et pied de page : fond uni, sans les grands halos. */
html[data-theme="light"] .main-footer {
    background: var(--light-surface);
}

html[data-theme="light"] .cta-box-box {
    background-image: none;
}

/* ---------- Chatbot ---------- */

html[data-theme="light"] .chat-box {
    box-shadow: 0 20px 60px -20px #161A2B55;
    border: 1px solid var(--divider-color);
}

html[data-theme="light"] .chat-msg.self > .cm-msg-text {
    background: #161A2B0D;
    color: var(--primary-color);
}

html[data-theme="light"] .msg-speak-btn {
    color: var(--primary-color);
}

html[data-theme="light"] .msg-speak-btn:hover {
    background: #161A2B12;
}

html[data-theme="light"] .typing-indicator .dot {
    background: #ffffff;
}

/* ---------- Bouton soleil / lune ---------- */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: 12px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--divider-color);
    background: var(--divider-color);
    color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
    transform: rotate(-12deg);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 19px;
    height: 19px;
}

/* En sombre on propose le soleil, en clair la lune. */
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

@media (max-width: 991px) {
    .theme-toggle {
        margin-left: auto;
        margin-right: 12px;
        width: 38px;
        height: 38px;
    }
}

/* Icônes du pied de page (blanches dans le thème sombre) */
html[data-theme="light"] .main-footer .footer-links i {
    color: var(--accent-color);
}

/* Bouton à contour (Commencez, Refuser) : texte foncé, blanc au survol */
html[data-theme="light"] .btn-default.btn-highlighted {
    color: var(--primary-color);
}

html[data-theme="light"] .btn-default.btn-highlighted:hover {
    color: #FFFFFF;
}

/* Logo en image (pages intérieures, pied de page, préchargement) : blanc à l'origine */
html[data-theme="light"] .navbar-brand img,
html[data-theme="light"] .footer-logo img,
html[data-theme="light"] #loading-icon img {
    filter: brightness(0) opacity(0.8);
}

/* Petites icônes des chiffres (page À propos) */
html[data-theme="light"] .about-us-item .icon-box img {
    filter: brightness(0) opacity(0.55);
}

/* « Réserver un échange en visio » / « Book a video call » : même survol
   qu'en sombre (dégradé cuivre → bleu, texte blanc). Sans cette règle, le
   fond blanc du bouton en clair écrasait le dégradé du survol. */
html[data-theme="light"] .geno-btn-ghost:hover,
html[data-theme="light"] .geno-btn-ghost:focus-visible {
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    border-color: var(--accent-secondary-color);
    color: #FFFFFF;
}