/* ==========================================================================
   Mode nuit — expérimental & réutilisable
   Palette dérivée de l'off-canvas de la charte (fond espresso, titres or,
   liens en vert Bo). Activé par l'attribut  html[data-theme="dark"].

   PORTABILITÉ : le switch et le JS sont universels. Seul le mapping des
   sélecteurs ci-dessous (§3) est propre au site — à adapter par site.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Palette nuit — les seules valeurs à retoucher d'un site à l'autre
   ------------------------------------------------------------------------- */
html[data-theme="dark"] {
	--bo-green:   #34a233; /* vert du logo Bo — liens (éclaircir si contraste juste) */
	--n-bg:       #1f1608; /* fond principal (off-canvas) */
	--n-surface:  #2a1f10; /* header, cartes, encarts */
	--n-footer:   #16100a; /* footer — un ton plus sombre pour le démarquer */
	--n-field:    #211c14; /* champs de formulaire */
	--n-text:     #ece2d0; /* texte courant (crème) */
	--n-muted:    #b79a63; /* titres de section, méta (or) */
	--n-line:     #3a2c16; /* bordures */
	--n-link:     var(--bo-green);
	--n-link-hov: #48c246;

	color-scheme: dark; /* barres de défilement / champs natifs en sombre */
}

/* ---------------------------------------------------------------------------
   2. Le switch (position fixe, haut-gauche) — universel
   ------------------------------------------------------------------------- */
.bo-theme-switch {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 9999;
}
.bo-theme-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.bo-theme-switch label {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: .4rem;
	width: 58px;
	height: 30px;
	padding: 0 7px;
	border-radius: 999px;
	background: #d9ccae;                 /* piste claire (mode jour) */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
	cursor: pointer;
	position: relative;
	transition: background .25s ease;
}
.bo-theme-switch label::after {          /* le curseur */
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	transition: transform .25s ease;
	z-index: 2;
}
.bo-theme-switch__sun,
.bo-theme-switch__moon {
	font-size: 13px;
	line-height: 1;
	z-index: 1;
}
.bo-theme-switch__sun  { color: #c9891a; }
.bo-theme-switch__moon { color: #e8dcc0; opacity: .45; }

/* État nuit */
html[data-theme="dark"] .bo-theme-switch label { background: #3a2c16; }
html[data-theme="dark"] .bo-theme-switch label::after { transform: translateX(28px); }
html[data-theme="dark"] .bo-theme-switch__moon { opacity: 1; }
html[data-theme="dark"] .bo-theme-switch__sun  { opacity: .45; }

/* Confort : respecter les utilisateurs qui coupent les animations */
@media (prefers-reduced-motion: reduce) {
	.bo-theme-switch label,
	.bo-theme-switch label::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   3. Application de la palette au site — PARTIE À ADAPTER PAR SITE
      (ajoute/retire des sélecteurs selon la structure de chaque thème)
   ------------------------------------------------------------------------- */

/* Fonds généraux */
html[data-theme="dark"],
html[data-theme="dark"] body {
	background-color: var(--n-bg);
	color: var(--n-text);
}

/* Surfaces à fond clair de la charte → surface sombre */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] footer,
html[data-theme="dark"] .bo-breadcrumb {
	background-color: var(--n-surface) !important;
	color: var(--n-text);
}

/* Titres courants */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 { color: var(--n-text); }

/* Titres « de section » façon off-canvas → or */
html[data-theme="dark"] .widget-title,
html[data-theme="dark"] .bo-related__title,
html[data-theme="dark"] .bo-membre__title { color: var(--n-muted); }

/* Liens : vert Bo (inchangé) */
html[data-theme="dark"] a { color: var(--n-link); }
html[data-theme="dark"] a:hover { color: var(--n-link-hov); }

/* Contenu + cartes */
html[data-theme="dark"] .bo-single-content,
html[data-theme="dark"] .bo-post,
html[data-theme="dark"] .entry-content { color: var(--n-text); }

html[data-theme="dark"] .bo-related__item,
html[data-theme="dark"] .bo-membre__form {
	background: var(--n-surface);
	border-color: var(--n-line);
}

/* Champs de formulaire */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
	background: var(--n-field);
	color: var(--n-text);
	border-color: var(--n-line);
}

/* Bordures & séparateurs */
html[data-theme="dark"] hr,
html[data-theme="dark"] .bo-post__tags,
html[data-theme="dark"] .bo-related,
html[data-theme="dark"] .widget-title { border-color: var(--n-line); }

/* ---------------------------------------------------------------------------
   4. Conteneurs — mode « CARTES EN RELIEF »
      La page reste espresso (§1) ; les conteneurs de 1er niveau restent
      transparents ; les conteneurs IMBRIQUÉS deviennent des cartes.
      On n'agit que sur la couleur de fond → les fonds-IMAGE (hero) sont préservés.
   ------------------------------------------------------------------------- */

/* 4a. Conteneurs de 1er niveau → transparents (l'espresso de la page reste). */
html[data-theme="dark"] .elementor-section:not(.elementor-inner-section),
html[data-theme="dark"] .e-con.e-parent {
	background-color: transparent !important;
}

/* 4b. Conteneurs imbriqués Elementor = CARTES (fond + bordure).
       Si l'auto « sur-cartonne » (chaque colonne devient une carte), commente
       ces deux lignes et n'utilise que .bo-card, posé à la main. */
html[data-theme="dark"] .elementor-inner-section,
html[data-theme="dark"] .e-con.e-child {
	background-color: var(--n-surface) !important;
	border: 1px solid var(--n-line) !important;
	border-radius: 8px;
}

/* 4b-bis. .bo-card — HOOK DE SCOPE explicite, à poser sur n'importe quel
   conteneur (Elementor, Gutenberg, ou carte lexique à custom fields).
   Thème COMPLET et confiné à la carte : fond, bordure, texte (custom fields
   noirs → crème) ET liens. C'est LUI qui cible les `a` et le reste, au lieu
   des règles globales qui débordent.
   → Pour les cartes lexique : ajoute leur classe existante à la liste ci-dessous
     (une seule fois, elles héritent alors du thème sans re-tagger chaque entrée). */
html[data-theme="dark"] .bo-card {
	background-color: var(--n-surface) !important;
	border: 1px solid var(--n-line) !important;
	border-radius: 8px;
}
html[data-theme="dark"] .bo-card,
html[data-theme="dark"] .bo-card *:not(a):not(.elementor-button) {
	color: var(--n-text) !important; /* custom fields noirs → crème lisible */
}
html[data-theme="dark"] .bo-card a:not(.elementor-button) {
	color: var(--n-link) !important; /* liens verts, confinés à la carte */
}

/* 4c. En-tête → surface. */
html[data-theme="dark"] .elementor-location-header,
html[data-theme="dark"] .ehf-header,
html[data-theme="dark"] .site-header {
	background-color: var(--n-surface) !important;
}

/* 4d. MENU : liens lisibles en crème ; page active / survol en vert Bo.
       « header a » est le filet de sécurité : il attrape TOUT lien dans la
       balise <header>, quelles que soient les classes (donc même si ton menu
       n'est ni .site-header ni .elementor-location-header). */
html[data-theme="dark"] header a:not(.elementor-button):not(.wp-block-button__link),
html[data-theme="dark"] #site-header a:not(.elementor-button),
html[data-theme="dark"] .elementor-location-header a:not(.elementor-button),
html[data-theme="dark"] .ehf-header a:not(.elementor-button),
html[data-theme="dark"] .elementor-nav-menu a,
html[data-theme="dark"] #site-navigation a,
html[data-theme="dark"] .main-navigation a {
	color: var(--n-text) !important;
}
html[data-theme="dark"] header a:hover,
html[data-theme="dark"] .elementor-item.elementor-item-active,
html[data-theme="dark"] .current-menu-item > a,
html[data-theme="dark"] .elementor-nav-menu a:hover {
	color: var(--n-link) !important;
}

/* 4e. FOOTER démarqué : un ton plus sombre que la page + filet supérieur.
       Ses conteneurs internes ne doivent PAS être creusés en cartes. */
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] footer.site-footer,
html[data-theme="dark"] .elementor-location-footer {
	background-color: var(--n-footer) !important;
	border-top: 2px solid var(--n-line);
}
html[data-theme="dark"] .site-footer .e-con.e-child,
html[data-theme="dark"] .site-footer .elementor-inner-section,
html[data-theme="dark"] .elementor-location-footer .e-con.e-child,
html[data-theme="dark"] .elementor-location-footer .elementor-inner-section {
	background-color: transparent !important;
	border: 0 !important;
}

/* 4f. Liens de CONTENU en vert Bo (hors menu, hors boutons).
       (Plus de .entry-content a : il débordait sur tous les liens, y compris
       les cartes lexique. Le vert par défaut vient déjà de la règle `a` du §3.) */
html[data-theme="dark"] .elementor-widget-text-editor a:not(.elementor-button),
html[data-theme="dark"] .elementor-widget-heading a:not(.elementor-button),
html[data-theme="dark"] .elementor-widget-icon-list a:not(.elementor-button),
html[data-theme="dark"] .bo-card a:not(.elementor-button) {
	color: var(--n-link) !important;
}

/* NB : les légendes en couleurs (rouge/bleu/vert/brun, surlignés) sont
   volontairement PRÉSERVÉES — on ne force jamais la couleur du texte des widgets. */

/* ---------------------------------------------------------------------------
   5. Cartes du LEXIQUE bibleorale (.bo-carte) — spécifique au site
      Ciblage précis par élément (pas de « tout en crème ») pour garder la
      hiérarchie : mot en clair, étiquettes en or, valeurs en crème, PDF en vert.
   ------------------------------------------------------------------------- */

/* La carte : surface + bordure. */
html[data-theme="dark"] .bo-carte {
	background-color: var(--n-surface) !important;
	border: 1px solid var(--n-line) !important;
}

/* Titre (mot grec/hébreu) en crème ; sa glose grise (#888 en ligne) éclaircie. */
html[data-theme="dark"] .bo-carte .bo-carte__titre { color: var(--n-text) !important; }
html[data-theme="dark"] .bo-carte .bo-carte__titre span { color: var(--n-muted) !important; }

/* Étiquettes de champ en or, valeurs en crème. */
html[data-theme="dark"] .bo-carte__label { color: var(--n-muted) !important; }
html[data-theme="dark"] .bo-carte__val   { color: var(--n-text) !important; }

/* Liens PDF en vert + icône SVG qui suit la couleur (sinon noire = invisible). */
html[data-theme="dark"] .bo-carte .bo-carte__pdf { color: var(--n-link) !important; }
html[data-theme="dark"] .bo-carte .bo-carte__pdf svg { fill: currentColor; }
html[data-theme="dark"] .bo-carte .bo-carte__pdf:hover { color: var(--n-link-hov) !important; }

/* Total d'entrées + pagination. */
html[data-theme="dark"] .bo-liste__total { color: var(--n-muted) !important; }
html[data-theme="dark"] .bo-pagination a { color: var(--n-text) !important; }
html[data-theme="dark"] .bo-pagination a:hover,
html[data-theme="dark"] .bo-pagination .current { color: var(--n-link) !important; }

/* ---------------------------------------------------------------------------
   6. Autres composants du LEXIQUE bibleorale — spécifique au site
   ------------------------------------------------------------------------- */

/* 6a. Index alphabétique (.bibleorale-index) : pastilles surface, actif en vert. */
html[data-theme="dark"] .bibleorale-index__item a {
	background-color: var(--n-surface) !important;
	border: 1px solid var(--n-line) !important;
	color: var(--n-text) !important;
}
html[data-theme="dark"] .bibleorale-index__item a:hover,
html[data-theme="dark"] .bibleorale-index__item--actif a {
	background-color: var(--n-link) !important;
	border-color: var(--n-link) !important;
	color: var(--n-footer) !important; /* texte sombre sur pastille verte */
}
html[data-theme="dark"] .bibleorale-index__count { color: var(--n-muted) !important; }
html[data-theme="dark"] .bibleorale-index__item--actif a .bibleorale-index__count { color: inherit !important; }

/* 6b. Cartes « Essais de lecture » (.bo-essai-carte). Même piège SVG que .bo-carte. */
html[data-theme="dark"] .bo-essai-carte {
	background-color: var(--n-surface) !important;
	border: 1px solid var(--n-line) !important;
}
html[data-theme="dark"] .bo-essai-carte__titre { color: var(--n-text) !important; }
html[data-theme="dark"] .bo-essai-carte__intro { color: var(--n-muted) !important; }
html[data-theme="dark"] .bo-essai-carte__pdf {
	background-color: var(--n-footer) !important; /* bouton foncé sur la carte */
	color: var(--n-link) !important;
	border: 1px solid var(--n-line) !important;
}
html[data-theme="dark"] .bo-essai-carte__pdf svg { fill: currentColor; }
html[data-theme="dark"] .bo-essai-carte__pdf:hover { color: var(--n-link-hov) !important; }

/* 6c. Bloc des essais : conteneur, sections, titres, nav, cartes. */
html[data-theme="dark"] .bo-essais,
html[data-theme="dark"] .bo-essais__section {
	background-color: transparent !important; /* retire le fond blanc du bloc */
}
html[data-theme="dark"] .bo-essais__section-titre { color: var(--n-muted) !important; }
html[data-theme="dark"] .bo-essais__nav a {
	background-color: var(--n-surface) !important;
	border: 1px solid var(--n-line) !important;
	color: var(--n-text) !important;
}
html[data-theme="dark"] .bo-essais__nav a:hover {
	background-color: var(--n-link) !important;
	border-color: var(--n-link) !important;
	color: var(--n-footer) !important;
}
html[data-theme="dark"] .bo-essais__count { color: var(--n-muted) !important; }

/* Lien « Voir les détails → » à style inline (color/border/background posés en
   ligne) : il faut !important pour repasser devant. */
html[data-theme="dark"] .bo-essai-carte__pdf[style] {
	background-color: var(--n-footer) !important;
	color: var(--n-link) !important;
	border-color: var(--n-line) !important;
}
html[data-theme="dark"] .bo-essais__corpus-label {
	color: var(--n-footer) !important;
	background-color: var(--n-muted) !important; /* badge or « AT » / « NT » */
}

/* 6d. Formulaire de recherche du lexique (.bibleorale-recherche). */
html[data-theme="dark"] .bibleorale-recherche {
	background-color: var(--n-surface) !important; /* écrase le fond crème en dur */
	border-color: var(--n-line) !important;
}
html[data-theme="dark"] .bibleorale-recherche__champ {
	background-color: var(--n-field) !important;
	color: var(--n-text) !important;
	border-color: var(--n-line) !important;
}
html[data-theme="dark"] .bibleorale-recherche__bouton {
	background-color: var(--n-link) !important;
	color: var(--n-footer) !important;
	border: 0 !important;
}
html[data-theme="dark"] .bibleorale-recherche__fieldset { border-color: var(--n-line) !important; }
html[data-theme="dark"] .bibleorale-recherche legend,
html[data-theme="dark"] .bibleorale-recherche__radio,
html[data-theme="dark"] .bibleorale-recherche__checkbox { color: var(--n-text) !important; }

/* 6e. Recherche de l'en-tête (Header-Footer Elementor, .hfe-search-form). */
html[data-theme="dark"] .hfe-search-form__input {
	background-color: var(--n-field) !important;
	color: var(--n-text) !important;
	border-color: var(--n-line) !important;
}
html[data-theme="dark"] .hfe-search-form__container .fas,
html[data-theme="dark"] .hfe-search-form__container button { color: var(--n-text) !important; }

/* 6f. Placeholders lisibles sur fond sombre. */
html[data-theme="dark"] .bibleorale-recherche__champ::placeholder,
html[data-theme="dark"] .hfe-search-form__input::placeholder { color: #9a8f7a; }

/* 6g. Cartes du GLOSSAIRE (.bo-gloss-carte) — même schéma que .bo-carte. */
html[data-theme="dark"] .bo-gloss-carte {
	background-color: var(--n-surface) !important;
	border: 1px solid var(--n-line) !important;
}
html[data-theme="dark"] .bo-gloss-carte__titre { color: var(--n-text) !important; }
html[data-theme="dark"] .bo-gloss-carte__pdf {
	background-color: var(--n-footer) !important;
	color: var(--n-link) !important;
	border: 1px solid var(--n-line) !important;
}
html[data-theme="dark"] .bo-gloss-carte__pdf svg { fill: currentColor; }
html[data-theme="dark"] .bo-gloss-carte__pdf:hover { color: var(--n-link-hov) !important; }

/* 6h. Index alphabétique du GLOSSAIRE (.bo-gloss-index).
       Les lettres .vide (sans entrée) sont atténuées, pas masquées. */
html[data-theme="dark"] .bo-gloss-index a {
	background-color: var(--n-surface) !important;
	border: 1px solid var(--n-line) !important;
	color: var(--n-text) !important;
}
html[data-theme="dark"] .bo-gloss-index a:hover {
	background-color: var(--n-link) !important;
	border-color: var(--n-link) !important;
	color: var(--n-footer) !important;
}
html[data-theme="dark"] .bo-gloss-index a.vide {
	color: var(--n-muted) !important;
	opacity: .4;
}

/* ---------------------------------------------------------------------------
   7. Page « TEXTE DE MARC » (Gutenberg, classes .bo-marc-*) — spécifique
      IMPORTANT : les couleurs de légende (.bo-verbe, .bo-nom, .bo-modif,
      .bo-remarque, .bo-remarque-leg) NE sont PAS touchées — elles portent le
      sens. On ne thème que fonds, bordures, boutons et texte de base.
   ------------------------------------------------------------------------- */

/* Intro : carte. Texte de base en crème ; les spans colorés gardent leur teinte
   (une couleur posée directement sur l'élément l'emporte sur l'héritée). */
html[data-theme="dark"] .bo-marc-intro {
	background-color: var(--n-surface) !important;
	border: 1px solid var(--n-line) !important;
	border-radius: 8px;
}
html[data-theme="dark"] .bo-marc-intro,
html[data-theme="dark"] .bo-marc-intro p { color: var(--n-text) !important; }

/* Boutons de l'intro (format carnet / texte commenté) : bouton foncé. */
html[data-theme="dark"] .bo-marc-btn {
	background-color: var(--n-footer) !important;
	color: var(--n-text) !important;
	border: 1px solid var(--n-line) !important;
}

/* Légende (barre verbe/nom/modification/note + bouton « Couleurs on/off »). */
html[data-theme="dark"] .bo-marc-legende {
	background-color: var(--n-surface) !important;
	border: 1px solid var(--n-line) !important;
	border-radius: 8px;
}
html[data-theme="dark"] .bo-marc-toggle {
	background-color: var(--n-footer) !important;
	color: var(--n-link) !important;
	border: 1px solid var(--n-line) !important;
}

/* Sommaire : carte, titre en or, étapes en vert, chapitres en crème. */
html[data-theme="dark"] .bo-marc-sommaire {
	background-color: var(--n-surface) !important;
	border: 1px solid var(--n-line) !important;
	border-radius: 8px;
}
html[data-theme="dark"] .bo-marc-sommaire__titre { color: var(--n-muted) !important; }
html[data-theme="dark"] .bo-marc-som-etape { color: var(--n-link) !important; }
html[data-theme="dark"] .bo-marc-som-chapitres a { color: var(--n-text) !important; }
html[data-theme="dark"] .bo-marc-som-chapitres a:hover { color: var(--n-link) !important; }

/* Le logo Bo reste vert — on ne le touche pas.
   Astuce images : atténuer légèrement les visuels trop lumineux la nuit.
   (Décommenter si souhaité, en excluant logos/icônes au besoin.) */
/*
html[data-theme="dark"] img:not(.no-dim) { filter: brightness(.85); }
*/