/* ========================================
   DARK MODE STYLES - NOEMATA THEME
   ======================================== */

/* Fil d'ariane */
.bloglo-breadcrumbs {
    position: static;
    background: #ffffff;
    padding: 15px 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    z-index: 1;
    opacity: 1;
    visibility: visible;
    display: block !important;
}

.bloglo-breadcrumbs .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.bloglo-breadcrumbs .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bloglo-breadcrumbs .breadcrumb li {
    display: flex;
    align-items: center;
}

.bloglo-breadcrumbs .breadcrumb a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
    cursor: pointer;
}

.bloglo-breadcrumbs .breadcrumb a:hover {
    color: var(--bloglo-primary);
    text-decoration: underline;
}

.bloglo-breadcrumbs .breadcrumb .separator {
    color: var(--wp--preset--color--text);
    opacity: 0.5;
    margin: 0 8px;
}

.bloglo-breadcrumbs .breadcrumb .current {
    color: var(--wp--preset--color--text);
    opacity: 0.7;
    font-weight: normal;
}

/* ========================================
   DARK MODE GLOBAL
   ======================================== */

/* Transition globale du body */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body[data-theme="dark"] {
    --bloglo-white: var(--wp--preset--color--headings);
    --bloglo-secondary: #ffffff !important;
    background-color: #1a1a1a;
    color: #ffffff;
}

/* ========================================
   DARK MODE - HEADER
   ======================================== */

/* Headers en mode sombre */
html[data-theme="dark"] .header,
body[data-theme="dark"] .header,
html[data-theme="dark"] header.site-header,
body[data-theme="dark"] header.site-header,
html[data-theme="dark"] .wp-block-kubio-navigation__outer,
body[data-theme="dark"] .wp-block-kubio-navigation__outer,
html[data-theme="dark"] .wp-block-kubio-dropdown-menu,
html[data-theme="dark"] .wp-block-kubio-menu-items,
html[data-theme="dark"] .kubio-menu,
html[data-theme="dark"] .colibri-menu,
html[data-theme="dark"] .colibri-menu-container,
html[data-theme="dark"] .wp-block-kubio-menu-offscreen,
html[data-theme="dark"] .wp-block-kubio-accordion-menu,
html[data-theme="dark"] .dacnis-header__k__NO6zqmOlKh5-outer,
html[data-theme="dark"] .dacnis-header__k__VYBTN1JEwoH-outer,
html[data-theme="dark"] .dacnis-header__k__xwf1geT2mnR-nav,
html[data-theme="dark"] .dacnis-front-header__k__c6BbujDIAOY-outer,
html[data-theme="dark"] .dacnis-front-header__k__K5qy1wT2BoI-outer,
html[data-theme="dark"] .wp-block-kubio-navigation-section,
html[data-theme="dark"] .wp-block-kubio-navigation-section__nav-section,
html[data-theme="dark"] .background-wrapper,
html[data-theme="dark"] .background-layer,
html[data-theme="dark"] .background-layer-media-container-lg,
html[data-theme="dark"] .background-layer-media-container-md,
html[data-theme="dark"] .background-layer-media-container {
    background: #181818 !important;
    color: #fff !important;
    border-bottom: 1px solid #222 !important;
}

/* Liens dans les headers */
html[data-theme="dark"] .header a,
body[data-theme="dark"] .header a,
html[data-theme="dark"] header.site-header a,
body[data-theme="dark"] header.site-header a,
html[data-theme="dark"] .wp-block-kubio-navigation__outer a,
html[data-theme="dark"] .wp-block-kubio-dropdown-menu a,
html[data-theme="dark"] .wp-block-kubio-menu-items a,
html[data-theme="dark"] .kubio-menu a,
html[data-theme="dark"] .colibri-menu a,
html[data-theme="dark"] .colibri-menu-container a,
html[data-theme="dark"] .wp-block-kubio-menu-offscreen a,
html[data-theme="dark"] .wp-block-kubio-accordion-menu a,
html[data-theme="dark"] .dacnis-header__k__NO6zqmOlKh5-outer a,
html[data-theme="dark"] .dacnis-header__k__VYBTN1JEwoH-outer a,
html[data-theme="dark"] .dacnis-header__k__xwf1geT2mnR-nav a,
html[data-theme="dark"] .dacnis-front-header__k__c6BbujDIAOY-outer a,
html[data-theme="dark"] .dacnis-front-header__k__K5qy1wT2BoI-outer a {
    color: #fff !important;
}

/* ========================================
   DARK MODE - BREADCRUMB
   ======================================== */

body[data-theme="dark"] .bloglo-breadcrumbs {
    background: #2a2a2a;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

body[data-theme="dark"] .bloglo-breadcrumbs .breadcrumb a {
    color: var(--bloglo-primary);
}

body[data-theme="dark"] .bloglo-breadcrumbs .breadcrumb a:hover {
    color: #ffffff;
}

body[data-theme="dark"] .bloglo-breadcrumbs .breadcrumb .current {
    color: #ffffff;
    opacity: 0.7;
}

/* ========================================
   DARK MODE - CONTENU
   ======================================== */

/* Textes en mode sombre */
html[data-theme="dark"] body,
body[data-theme="dark"] {
    color: #fff !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6 {
    color: #fff !important;
}

html[data-theme="dark"] p,
body[data-theme="dark"] p {
    color: #e0e0e0 !important;
}

/* ========================================
   BOUTON DARK MODE - NOEMATA
   ======================================== */

/* Bouton principal */
.noemata-darkmode-toggle {
    background: none !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    margin-left: 1.5rem !important;
    z-index: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    /* Forcer la taille du bouton pour éviter les conflits avec le header */
    min-width: 24px !important;
    min-height: 24px !important;
    font-size: 16px !important;
}

/* Animation au clic - instantanée */
.noemata-darkmode-toggle:active {
    background: rgba(255,255,255,0.08);
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* ========================================
   ICÔNES DARK MODE
   ======================================== */

/* Affichage conditionnel des icônes */
#noemata-darkmode-toggle .feather-sun {
    display: none !important;
}

#noemata-darkmode-toggle .feather-moon {
    display: inline !important;
}

html[data-theme="dark"] #noemata-darkmode-toggle .feather-moon,
body[data-theme="dark"] #noemata-darkmode-toggle .feather-moon {
    display: none !important;
}

html[data-theme="dark"] #noemata-darkmode-toggle .feather-sun,
body[data-theme="dark"] #noemata-darkmode-toggle .feather-sun {
    display: inline !important;
}

/* Styles des icônes - couleur par défaut */
.noemata-darkmode-toggle .feather-moon,
.noemata-darkmode-toggle .feather-sun {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    background: none !important;
    color: #AEADD3 !important;
    transition: color 0.15s ease !important;
    /* Forcer la taille même si le header change */
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* Styles des SVG */
#noemata-darkmode-toggle svg,
#noemata-darkmode-toggle span,
#noemata-darkmode-toggle svg * {
    display: inline !important;
    visibility: visible !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    color: #AEADD3 !important;
    fill: none !important;
    stroke: currentColor !important;
    opacity: 1 !important;
    transition: color 0.15s ease !important;
    /* Forcer la taille même si le header change */
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

#noemata-darkmode-toggle {
    overflow: visible !important;
}

/* ========================================
   CORRECTION TAILLE BOUTON DARK MODE
   ======================================== */

/* Forcer la taille du bouton dans tous les contextes du header */
.wp-block-kubio-menu-items .noemata-darkmode-toggle,
.kubio-menu .noemata-darkmode-toggle,
.wp-block-kubio-dropdown-menu .noemata-darkmode-toggle,
.dacnis-header__k__NO6zqmOlKh5-outer .noemata-darkmode-toggle,
.dacnis-header__k__VYBTN1JEwoH-outer .noemata-darkmode-toggle,
.dacnis-front-header__k__c6BbujDIAOY-outer .noemata-darkmode-toggle,
.dacnis-front-header__k__K5qy1wT2BoI-outer .noemata-darkmode-toggle {
    min-width: 24px !important;
    min-height: 24px !important;
    width: auto !important;
    height: auto !important;
    font-size: 16px !important;
}

/* Forcer la taille des icônes dans tous les contextes */
.wp-block-kubio-menu-items .noemata-darkmode-toggle .feather-moon,
.wp-block-kubio-menu-items .noemata-darkmode-toggle .feather-sun,
.kubio-menu .noemata-darkmode-toggle .feather-moon,
.kubio-menu .noemata-darkmode-toggle .feather-sun,
.wp-block-kubio-dropdown-menu .noemata-darkmode-toggle .feather-moon,
.wp-block-kubio-dropdown-menu .noemata-darkmode-toggle .feather-sun,
.dacnis-header__k__NO6zqmOlKh5-outer .noemata-darkmode-toggle .feather-moon,
.dacnis-header__k__NO6zqmOlKh5-outer .noemata-darkmode-toggle .feather-sun,
.dacnis-header__k__VYBTN1JEwoH-outer .noemata-darkmode-toggle .feather-moon,
.dacnis-header__k__VYBTN1JEwoH-outer .noemata-darkmode-toggle .feather-sun {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex-shrink: 0 !important;
}

/* Forcer la taille des SVG dans tous les contextes */
.wp-block-kubio-menu-items .noemata-darkmode-toggle svg,
.kubio-menu .noemata-darkmode-toggle svg,
.wp-block-kubio-dropdown-menu .noemata-darkmode-toggle svg,
.dacnis-header__k__NO6zqmOlKh5-outer .noemata-darkmode-toggle svg,
.dacnis-header__k__VYBTN1JEwoH-outer .noemata-darkmode-toggle svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex-shrink: 0 !important;
}

/* ========================================
   ANIMATION AU CLIC - INSTANTANÉE
   ======================================== */

/* Animation de rotation et couleur au clic */
.noemata-darkmode-toggle.rotating .feather-moon,
.noemata-darkmode-toggle.rotating .feather-sun {
    transform: rotate(180deg);
    color: #8D0F0C !important;
    transition: transform 0.15s ease-out, color 0.15s ease !important;
}

.noemata-darkmode-toggle.rotating svg,
.noemata-darkmode-toggle.rotating svg * {
    color: #8D0F0C !important;
    transition: color 0.15s ease !important;
}

/* ========================================
   CORRECTIONS DIVERSES
   ======================================== */

/* Éviter les effets sur les images */
html[data-theme="dark"] .wp-block-kubio-column img,
html[data-theme="dark"] .wp-block-kubio-column figure,
html[data-theme="dark"] .wp-block-kubio-column [style*="background-image"],
html[data-theme="dark"] .background-wrapper img,
html[data-theme="dark"] .background-wrapper figure,
html[data-theme="dark"] .background-layer img,
html[data-theme="dark"] .background-layer figure {
    background: none !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* Wrappers avec images */
html[data-theme="dark"] .background-wrapper:has(img),
html[data-theme="dark"] .background-layer:has(img),
html[data-theme="dark"] .background-wrapper:has([style*="background-image"]),
html[data-theme="dark"] .background-layer:has([style*="background-image"]) {
    background: none !important;
}