/*
 * Quark 2 — user customizations
 * Basé sur la structure réelle du thème (confirmée via humartsys.com)
 */

/* ============================================
   COULEUR D'ACCENT GLOBALE (titres, tags, focus, boutons)
   Filet de sécurité en plus du réglage "Accent color" dans
   l'admin (Configuration -> Site / Thème Quark2)
   ============================================ */
:root,
html[data-theme='dark'],
html[data-theme='light'] {
    --q2-accent: #EF4444 !important;
    --pico-primary: #EF4444 !important;
    --pico-primary-background: #EF4444 !important;
    --pico-primary-hover: #dc2626 !important;
    --pico-primary-underline: #EF4444 !important;
}

/* ============================================
   NEUTRALISER LE FOND CLAIR/SOMBRE AUTOMATIQUE
   .section pose sa propre couleur de fond selon le thème choisi.
   On la rend transparente partout, puis header/footer/main
   reprennent la main juste en dessous (sélecteurs plus spécifiques).
   ============================================ */
.section,
html[data-theme='dark'] .section,
html[data-theme='light'] .section {
    background-color: transparent !important;
}

#page-wrapper {
    background-color: transparent !important;
}

/* ============================================
   FOND GÉNÉRAL : noir sur toute la page (les bords)
   ============================================ */
html,
body {
    background-color: #000000 !important;
}

/* ============================================
   CONTENU PRINCIPAL : fond blanc
   ============================================ */
main#start {
    background-color: #ffffff !important;
    color: #111111 !important;

    max-width: 1100px;
    margin: 3rem auto !important;
    padding: 2.5rem 3rem !important;
    border-radius: 24px !important;
}

main#start h1,
main#start h2,
main#start h3,
main#start h4,
main#start h5,
main#start h6,
main#start p,
main#start li,
main#start span {
    color: #111111 !important;
}

main#start a {
    color: #EF4444 !important;
}

/* ============================================
   SIDEBAR / WIDGETS (ex: "Archives") : texte illisible
   sur fond sombre -> on éclaircit le texte.
   Ciblage structurel : dans .columns.has-sidebar, tout ce qui
   n'est pas #item (le contenu principal) est forcément la sidebar.
   ============================================ */
.columns.has-sidebar > *:not(#item) {
    color: #ffffff !important;
}

.columns.has-sidebar > *:not(#item) * {
    color: #ffffff !important;
}

.columns.has-sidebar > *:not(#item) a {
    color: #EF4444 !important;
}

/* Sélecteur EXACT confirmé via l'inspecteur (aside#sidebar > .sidebar-content) */
#sidebar,
#sidebar .sidebar-content,
#sidebar .sidebar-content h4,
#sidebar .sidebar-content ul.archives,
#sidebar .sidebar-content ul.archives li,
#sidebar .sidebar-content ul.archives li a,
#sidebar .sidebar-content ul.archives a {
    color: #ffffff !important;
}

/* Filet de sécurité (au cas où) avec les noms usuels */
aside,
.sidebar,
#sidebar,
.widget {
    color: #ffffff !important;
}

aside *,
.sidebar *,
#sidebar *,
.widget * {
    color: #ffffff !important;
}

aside a,
.sidebar a,
#sidebar a,
.widget a {
    color: #EF4444 !important;
}

/* ============================================
   MASQUER LE BOUTON CLAIR/SOMBRE
   ============================================ */
[data-theme-toggle],
.theme-toggle,
#theme-toggle,
.appearance-toggle {
    display: none !important;
}

/* ============================================
   HEADER : noir
   ============================================ */
header#header {
    background-color: #000000 !important;
    color: #ffffff !important;
}

header#header a {
    color: #ffffff !important;
}

/* ============================================
   FOOTER : noir
   ============================================ */
footer#footer,
#footer {
    background-color: #000000 !important;
    color: #ffffff !important;
}

footer#footer a,
#footer a {
    color: #ffffff !important;
}

/* ============================================
   GALERIE LIGHTBOX
   ============================================ */
.glightbox-container .gslide-description {
    background: #1a1a1a !important;
    width: 300px !important;
    padding: 30px !important;
    border-right: 1px solid #333 !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

.glightbox-container .gslide-title {
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    margin-bottom: 10px !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

.glightbox-container .gslide-description * {
    pointer-events: auto !important;
}