/* ===========================================================================
 * dark.css — apparence sombre du hub (Dashkit / Bootstrap 4.3.1).
 *
 * Dashkit 1.x (BS4) n'embarque PAS de dark mode natif (celui-ci n'existe qu'à
 * partir de Dashkit 2 / BS5, via data-bs-theme). Cette feuille rejoue donc les
 * règles de theme.min.css + custom3.css qui portent la palette claire, sous le
 * scope html[data-mc-theme="dark"].
 *
 * Pose de l'attribut : script inline de tpls/blocks/head.php (avant peinture,
 * pas de flash blanc) puis mcTheme.js (bouton + suivi de l'OS).
 *
 * Règle de maintenance : ici on ne fait QUE de la substitution de palette.
 * Les couleurs sont listées en commentaire en face de chaque token pour pouvoir
 * recroiser avec theme.min.css.
 * =========================================================================== */

html[data-mc-theme="dark"] {
	--mc-bg:            #0e1626; /* remplace #f9fbfd — fond de page */
	--mc-surface:       #16233a; /* remplace #fff     — cartes, modales, dropdowns, sidebar */
	--mc-surface-hover: #1d2e49; /* remplace #f9fbfd  — survol, lignes alternées, thead */
	--mc-surface-alt:   #24375a; /* remplace #edf2f9  — btn-light, badge-light, tags select2 */
	--mc-input-bg:      #101c30; /* fond des champs de saisie */
	--mc-border:        #24364f; /* remplace #e3ebf6 et #edf2f9 (bordures) */
	--mc-border-strong: #33496a; /* remplace #d2ddec  — bordures de champs */
	--mc-text:          #dce6f5; /* remplace #12263f  — texte principal */
	--mc-text-muted:    #8b9fbf; /* remplace #95aac9 et #6e84a3 */
	--mc-text-faint:    #788dad; /* remplace #b1c2d9  — placeholders */
	--mc-link:          #8b86f5; /* éclaircissement de #2721cd, illisible sur fond sombre */
	--mc-link-hover:    #aba7f9; /* survol : le thème ASSOMBRIT (#1a168b), on éclaircit */

	color-scheme: dark; /* scrollbars et contrôles natifs sombres */
}

/* --- Base ---------------------------------------------------------------- */

html[data-mc-theme="dark"] body {
	background-color: var(--mc-bg);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] hr {
	border-top-color: var(--mc-border);
}
html[data-mc-theme="dark"] pre,
html[data-mc-theme="dark"] .text-body,
html[data-mc-theme="dark"] .text-dark {
	color: var(--mc-text) !important;
}
html[data-mc-theme="dark"] .text-muted,
html[data-mc-theme="dark"] .text-secondary,
html[data-mc-theme="dark"] caption,
html[data-mc-theme="dark"] .blockquote-footer,
html[data-mc-theme="dark"] .figure-caption,
html[data-mc-theme="dark"] .header-pretitle,
html[data-mc-theme="dark"] .header-subtitle,
html[data-mc-theme="dark"] .chart-legend,
html[data-mc-theme="dark"] .comment-time {
	color: var(--mc-text-muted) !important;
}

/* Liens nus : :where() annule la spécificité pour ne PAS écraser les règles
 * de classe (.dropdown-item, .nav-link, .btn…) qui portent leur couleur. */
:where(html[data-mc-theme="dark"]) a {
	color: var(--mc-link);
}
/* Le thème assombrit les liens au survol (a:hover{color:#1a168b}), ce qui les rend
 * quasi invisibles sur fond sombre. On éclaircit au lieu d'assombrir. `:where()`
 * garde la spécificité à 0,1,1 — identique à la règle du thème, donc on gagne par
 * l'ordre — sans écraser les survols portés par une classe (.dropdown-item:hover…). */
:where(html[data-mc-theme="dark"]) a:hover,
:where(html[data-mc-theme="dark"]) a:focus {
	color: var(--mc-link-hover);
}
html[data-mc-theme="dark"] .text-primary,
html[data-mc-theme="dark"] .btn-link,
html[data-mc-theme="dark"] .badge-soft-primary {
	color: var(--mc-link) !important;
}
html[data-mc-theme="dark"] .btn-link.disabled,
html[data-mc-theme="dark"] .btn-link:disabled {
	color: var(--mc-text-faint) !important;
}

/* LIENS DES LISTES FABRIK. Ils portent des classes (`fabrik___rowlink`,
 * `fabrik_edit`) et vivent dans une cellule `td.fabrik_element`. La regle sur `a`
 * ci-dessus est volontairement a specificite NULLE (:where) pour ne pas ecraser
 * les liens porteurs d'une classe — elle ne les couvre donc pas de facon fiable.
 * On les vise explicitement, en 0-2-2, plutot que de relever la specificite de la
 * regle generale, ce qui casserait .dropdown-item, .nav-link et les boutons. */
html[data-mc-theme="dark"] td.fabrik_element a,
html[data-mc-theme="dark"] a.fabrik___rowlink,
html[data-mc-theme="dark"] table.dataTable tbody a {
	color: var(--mc-link);
}
html[data-mc-theme="dark"] td.fabrik_element a:hover,
html[data-mc-theme="dark"] td.fabrik_element a:focus,
html[data-mc-theme="dark"] a.fabrik___rowlink:hover,
html[data-mc-theme="dark"] a.fabrik___rowlink:focus,
html[data-mc-theme="dark"] table.dataTable tbody a:hover,
html[data-mc-theme="dark"] table.dataTable tbody a:focus {
	color: var(--mc-link-hover);
}

/* --- Sidebar / navbar ---------------------------------------------------- */

html[data-mc-theme="dark"] .navbar-light {
	background-color: var(--mc-surface);
	border-color: var(--mc-border);
}
html[data-mc-theme="dark"] .navbar-light .navbar-divider {
	border-color: var(--mc-border);
}
html[data-mc-theme="dark"] .navbar-light .navbar-user,
html[data-mc-theme="dark"] .navbar-light .navbar-collapse:before {
	border-top-color: var(--mc-border);
}
html[data-mc-theme="dark"] .navbar-light .navbar-brand,
html[data-mc-theme="dark"] .navbar-light .navbar-brand:focus,
html[data-mc-theme="dark"] .navbar-light .navbar-brand:hover,
html[data-mc-theme="dark"] .navbar-light .navbar-nav .nav-link:focus,
html[data-mc-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
html[data-mc-theme="dark"] .navbar-light .navbar-nav .active > .nav-link,
html[data-mc-theme="dark"] .navbar-light .navbar-nav .nav-link.active,
html[data-mc-theme="dark"] .navbar-light .navbar-nav .nav-link.show,
html[data-mc-theme="dark"] .navbar-light .navbar-nav .show > .nav-link,
html[data-mc-theme="dark"] .navbar-light .navbar-text a,
html[data-mc-theme="dark"] .navbar-light .navbar-user-link:focus,
html[data-mc-theme="dark"] .navbar-light .navbar-user-link:hover {
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .navbar-light .navbar-nav .nav-link,
html[data-mc-theme="dark"] .navbar-light .navbar-toggler,
html[data-mc-theme="dark"] .navbar-light .navbar-text,
html[data-mc-theme="dark"] .navbar-light .navbar-heading,
html[data-mc-theme="dark"] .navbar-light .navbar-user-link {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .avatar-title {
	background-color: var(--mc-surface-alt);
	color: var(--mc-text);
}

/* --- En-tête de page ----------------------------------------------------- */

html[data-mc-theme="dark"] .header-body {
	border-bottom-color: var(--mc-border);
}

/* SQUELETTES DE CHARGEMENT (.animated-background, custom3.css:781) — un degrade
 * bleu pale balaye par l'animation placeHolderShimmer. Sur fond sombre, c'etait
 * l'element le plus lumineux de la page, et il occupe tout l'ecran au chargement
 * du tableau de bord. 7 usages : tableau de bord, campagne, evenement, page
 * association, module reporting, liste Fabrik 161.
 * INVERSION ASSUMEE : en clair la bande qui balaye est plus SOMBRE que le fond ;
 * ici elle est plus CLAIRE. C'est la convention des squelettes sombres, et une
 * bande plus sombre que --mc-surface serait quasi invisible. */
html[data-mc-theme="dark"] .animated-background {
	background: var(--mc-surface);
	background: linear-gradient(90deg,
		var(--mc-surface) 10%,
		var(--mc-surface-hover) 18%,
		var(--mc-surface) 33%);
	background-size: 800px 104px;
}

/* --- Cartes et list-group ------------------------------------------------ */

html[data-mc-theme="dark"] .card {
	background-color: var(--mc-surface);
	border-color: var(--mc-border);
}
html[data-mc-theme="dark"] .card-header {
	border-bottom-color: var(--mc-border);
}
html[data-mc-theme="dark"] .card-footer {
	border-top-color: var(--mc-border);
}
html[data-mc-theme="dark"] .card-inactive {
	border-color: var(--mc-border);
}
html[data-mc-theme="dark"] .list-group-item {
	border-color: var(--mc-border);
}
html[data-mc-theme="dark"] .list-group-item-action {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .list-group-item-action:focus,
html[data-mc-theme="dark"] .list-group-item-action:hover {
	background-color: var(--mc-surface-hover);
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .list-group-item-action:active {
	background-color: var(--mc-surface-alt);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .list-group-item.disabled,
html[data-mc-theme="dark"] .list-group-item:disabled {
	color: var(--mc-text-faint);
}
html[data-mc-theme="dark"] .list-group-activity .list-group-item:not(:last-child):before {
	border-left-color: var(--mc-border);
}
html[data-mc-theme="dark"] .list-group-item-light,
html[data-mc-theme="dark"] .list-group-item-white {
	background-color: var(--mc-surface-alt);
	color: var(--mc-text);
}

/* custom3.css:883 colore les colonnes TRIABLES en bleu de marque (#2721cd) avec
 * !important : 1,9:1 sur fond sombre, donc illisible. Meme traitement que
 * .text-primary — on eclaircit sans toucher au mode clair. */
html[data-mc-theme="dark"] table.dataTable th.sorting,
html[data-mc-theme="dark"] table.dataTable th.sorting_asc,
html[data-mc-theme="dark"] table.dataTable th.sorting_desc {
	color: var(--mc-link) !important;
}

/* --- Tableaux (dont DataTables) ------------------------------------------ */

html[data-mc-theme="dark"] .table {
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .table td,
html[data-mc-theme="dark"] .table th {
	background-color: transparent !important; /* theme.min.css force #fff!important */
	border-top-color: var(--mc-border);
}
html[data-mc-theme="dark"] .table thead th {
	background-color: var(--mc-surface-hover);
	border-bottom-color: var(--mc-border);
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .table tbody + tbody {
	border-top-color: var(--mc-border);
}
html[data-mc-theme="dark"] .table-bordered,
html[data-mc-theme="dark"] .table-bordered td,
html[data-mc-theme="dark"] .table-bordered th {
	border-color: var(--mc-border) !important;
}
html[data-mc-theme="dark"] .table .thead-light th {
	background-color: var(--mc-surface-hover);
	border-color: var(--mc-border);
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td,
html[data-mc-theme="dark"] .table-striped tbody tr:nth-of-type(odd) th {
	background-color: var(--mc-surface-hover) !important;
}
html[data-mc-theme="dark"] .table-hover tbody tr:hover {
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .table-hover tbody tr:hover td,
html[data-mc-theme="dark"] .table-hover tbody tr:hover th,
html[data-mc-theme="dark"] .table-active > td,
html[data-mc-theme="dark"] .table-active > th {
	background-color: var(--mc-surface-hover) !important;
}
html[data-mc-theme="dark"] table.dataTable tfoot th {
	background-color: var(--mc-surface-hover);
}
html[data-mc-theme="dark"] .img-thumbnail {
	background-color: var(--mc-surface-hover);
	border-color: var(--mc-border);
}

/* --- Formulaires --------------------------------------------------------- */

html[data-mc-theme="dark"] .form-control,
html[data-mc-theme="dark"] input.inputbox,
html[data-mc-theme="dark"] select,
html[data-mc-theme="dark"] .custom-select,
html[data-mc-theme="dark"] .custom-file-label,
html[data-mc-theme="dark"] .custom-file-label:after,
html[data-mc-theme="dark"] .input-group-text {
	background-color: var(--mc-input-bg) !important; /* custom3.css force #fff!important sur select */
	border-color: var(--mc-border-strong);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .input-group-text {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .form-control:focus,
html[data-mc-theme="dark"] input.inputbox:focus,
html[data-mc-theme="dark"] select:focus {
	background-color: var(--mc-input-bg) !important;
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .form-control:disabled,
html[data-mc-theme="dark"] .form-control[readonly],
html[data-mc-theme="dark"] input.inputbox:disabled,
html[data-mc-theme="dark"] input.inputbox[readonly],
html[data-mc-theme="dark"] select:disabled,
html[data-mc-theme="dark"] select[readonly],
html[data-mc-theme="dark"] .custom-select:disabled,
html[data-mc-theme="dark"] .custom-file-input:disabled ~ .custom-file-label {
	background-color: var(--mc-surface-hover) !important;
	color: var(--mc-text-muted);
}
/* CHAMPS « FLUSH » : le theme les veut TRANSPARENTS, le fond venant du conteneur
 * (.input-group-flush > .form-control { background-color: transparent !important }).
 * La regle generale ci-dessus leur imposait un fond opaque : dans la barre de
 * recherche de la sidebar, l'input sombre flottait alors dans sa capsule claire. */
html[data-mc-theme="dark"] .input-group-flush > .form-control,
html[data-mc-theme="dark"] .input-group-flush > input.inputbox,
html[data-mc-theme="dark"] .input-group-flush > select,
html[data-mc-theme="dark"] .form-control-flush {
	background-color: transparent !important;
	border-color: transparent !important;
}
html[data-mc-theme="dark"] .input-group-flush > .input-group-prepend > .input-group-text,
html[data-mc-theme="dark"] .input-group-flush > .input-group-append > .input-group-text {
	background-color: transparent !important;
	border-width: 0;
}

/* Barre de recherche de la sidebar : son fond clair est ecrit EN DUR dans le markup
 * (style="background-color: #edf2f9" — tpls/blocks/mainbody/sidebar.php). Un style
 * inline ne se bat qu'avec !important. En clair la capsule est plus SOMBRE que la
 * sidebar blanche : l'analogue sombre est donc --mc-input-bg, plus sombre que la
 * surface, et non une surface plus claire. */
html[data-mc-theme="dark"] .form-inline .input-group-flush.input-group-merge {
	background-color: var(--mc-input-bg) !important;
}

/* LISTES DEROULANTES NATIVES. Les <option> ne suivent pas la couleur du champ :
 * la liste ouverte est peinte par le navigateur, qui reprend le fond du <select>
 * mais garde sa couleur de texte par defaut — d'ou des items illisibles. On les
 * style explicitement. La liste est une surface flottante, comme un .dropdown-menu :
 * elle prend --mc-surface, et non le fond de champ.
 * (color-scheme:dark, pose sur la racine, ne regle que l'habillage natif : cadre,
 * ascenseur, fleche — pas la couleur des items.) */
html[data-mc-theme="dark"] select option,
html[data-mc-theme="dark"] select optgroup,
html[data-mc-theme="dark"] .custom-select option,
html[data-mc-theme="dark"] .custom-select optgroup {
	background-color: var(--mc-surface);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] select option:disabled,
html[data-mc-theme="dark"] .custom-select option:disabled {
	color: var(--mc-text-faint);
}
html[data-mc-theme="dark"] select option:checked,
html[data-mc-theme="dark"] .custom-select option:checked {
	background-color: var(--mc-surface-hover);
}

/* COULEUR DU TEXTE DES <select>. custom3.css:349 pose
 * `color: #283e59 !important` sur `select`, `select.custom-select` et
 * `.select2-selection--single`. Ma regle de champ n'avait pas de !important :
 * elle perdait, et la valeur choisie restait en bleu ardoise sombre sur fond
 * sombre — ce qui la faisait paraitre grisee, comme un placeholder.
 * (Distinct des <option> traites plus bas : ici c'est le champ FERME.) */
html[data-mc-theme="dark"] select,
html[data-mc-theme="dark"] select.custom-select,
html[data-mc-theme="dark"] .custom-select,
html[data-mc-theme="dark"] .select2-selection--single {
	color: var(--mc-text) !important;
}
/* L'etat desactive doit rester distinct, donc lui aussi en !important. */
html[data-mc-theme="dark"] select:disabled,
html[data-mc-theme="dark"] .custom-select:disabled,
html[data-mc-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single {
	color: var(--mc-text-muted) !important;
}

/* REMPLISSAGE AUTOMATIQUE DU NAVIGATEUR.
 * Chrome peint les champs qu'il a pre-remplis avec SA propre couleur de fond,
 * qu'aucune declaration `background-color` ne reprend — sur la page de connexion,
 * les champs email et mot de passe ressortaient nettement plus CLAIRS que leur
 * bouton d'icone, qui lui suivait bien le theme. C'est l'ecart entre les deux qui
 * a trahi la cause : seul le champ est repeint, pas le .input-group-text.
 * Le seul levier est une ombre interne qui recouvre toute la surface, et
 * -webkit-text-fill-color pour le texte, que `color` ne touche pas non plus.
 * La transition de 9999s empeche le navigateur de revenir a sa couleur au focus. */
html[data-mc-theme="dark"] input:-webkit-autofill,
html[data-mc-theme="dark"] input:-webkit-autofill:hover,
html[data-mc-theme="dark"] input:-webkit-autofill:focus,
html[data-mc-theme="dark"] input:-webkit-autofill:active,
html[data-mc-theme="dark"] textarea:-webkit-autofill,
html[data-mc-theme="dark"] select:-webkit-autofill {
	-webkit-text-fill-color: var(--mc-text);
	-webkit-box-shadow: 0 0 0 1000px var(--mc-input-bg) inset;
	box-shadow: 0 0 0 1000px var(--mc-input-bg) inset;
	caret-color: var(--mc-text);
	transition: background-color 9999s ease-in-out 0s;
}

html[data-mc-theme="dark"] .form-control-plaintext {
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .form-control::placeholder,
html[data-mc-theme="dark"] input.inputbox::placeholder,
html[data-mc-theme="dark"] select::placeholder {
	color: var(--mc-text-faint);
}
html[data-mc-theme="dark"] .form-check-input:disabled ~ .form-check-label,
html[data-mc-theme="dark"] .custom-control-input:disabled ~ .custom-control-label {
	color: var(--mc-text-muted);
}
/* Cases a cocher et pistes de switch. Le !important est assume : Bootstrap et
 * Dashkit empilent plusieurs variantes d'etat sur .custom-control-label:before
 * (:active, :focus, :indeterminate, :disabled), certaines plus specifiques que
 * ce scope — sans lui, la case repassait en clair selon l'etat. */
html[data-mc-theme="dark"] .custom-control-label:before,
html[data-mc-theme="dark"] .custom-control-input:disabled ~ .custom-control-label:before {
	background-color: var(--mc-input-bg) !important;
	border-color: var(--mc-border-strong) !important;
}
html[data-mc-theme="dark"] .custom-range::-webkit-slider-runnable-track,
html[data-mc-theme="dark"] .custom-range::-moz-range-track {
	background-color: var(--mc-surface-alt);
}
html[data-mc-theme="dark"] .custom-control-input:checked ~ .custom-control-label:before {
	background-color: var(--mc-link) !important;
	border-color: var(--mc-link) !important;
}
/* SWITCH — on rejoue le rapport du mode clair, et non une couleur unique.
 * Eteint : piste #e3ebf6, bouton #b1c2d9, donc BOUTON PLUS SOMBRE QUE LA PISTE.
 * Allume : piste primaire, bouton pale pour ressortir dessus.
 * Mettre le bouton en quasi-blanc dans les deux etats effacait la distinction. */
html[data-mc-theme="dark"] .custom-switch .custom-control-label:before {
	background-color: var(--mc-surface-alt) !important;
	border-color: var(--mc-surface-alt) !important;
}
html[data-mc-theme="dark"] .custom-switch .custom-control-label:after {
	background-color: var(--mc-input-bg);
}
html[data-mc-theme="dark"] .custom-switch .custom-control-input:checked ~ .custom-control-label:before {
	background-color: var(--mc-link) !important;
	border-color: var(--mc-link) !important;
}
html[data-mc-theme="dark"] .custom-switch .custom-control-input:checked ~ .custom-control-label:after {
	background-color: var(--mc-text);
}
/* Le glyphe Feather pose dans la piste par custom3.css:931 (croix a l'arret). */
html[data-mc-theme="dark"] .custom-switch .custom-control-input:not(:checked) ~ .custom-control-label:before {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .dz-message {
	background-color: var(--mc-surface);
	border-color: var(--mc-border-strong);
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .dz-message:hover {
	color: var(--mc-text);
}

/* --- select2 ------------------------------------------------------------- */

html[data-mc-theme="dark"] .select2-container .select2-selection--single,
html[data-mc-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-mc-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple,
html[data-mc-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
	background-color: var(--mc-input-bg) !important;
	border-color: var(--mc-border-strong);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single {
	background-color: var(--mc-surface-hover) !important;
}
/* select2 pose ses propres couleurs sur le contenu du champ, plus specifiques
 * que la regle de conteneur ci-dessus : `color:#444` sur la valeur rendue (quasi
 * invisible sur fond sombre) et `color:#999` sur le placeholder. On les aligne
 * sur les champs classiques : meme couleur de texte, meme couleur de placeholder. */
html[data-mc-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-mc-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-mc-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
	color: var(--mc-text-faint);
}
html[data-mc-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-top-color: var(--mc-text-muted);
}

html[data-mc-theme="dark"] .select2-dropdown,
html[data-mc-theme="dark"] .select2-results__option {
	background-color: var(--mc-surface);
	border-color: var(--mc-border);
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: var(--mc-surface-hover);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .select2-container--default .select2-results__option[aria-disabled="true"] {
	background-color: var(--mc-surface-hover);
	color: var(--mc-text-faint);
}
html[data-mc-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--mc-surface-alt);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: var(--mc-text);
}

/* --- Boutons neutres ----------------------------------------------------- */

html[data-mc-theme="dark"] .btn {
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .btn-white,
html[data-mc-theme="dark"] .btn-white.disabled,
html[data-mc-theme="dark"] .btn-white:disabled {
	background-color: var(--mc-surface);
	border-color: var(--mc-border);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .btn-white:focus,
html[data-mc-theme="dark"] .btn-white:hover {
	background-color: var(--mc-surface-hover);
	border-color: var(--mc-border-strong);
}
html[data-mc-theme="dark"] .btn-light,
html[data-mc-theme="dark"] .btn-light.disabled,
html[data-mc-theme="dark"] .btn-light:disabled,
html[data-mc-theme="dark"] .btn-light:hover {
	background-color: var(--mc-surface-alt);
	border-color: var(--mc-surface-alt);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .btn-outline-light,
html[data-mc-theme="dark"] .btn-outline-white {
	border-color: var(--mc-border-strong);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .btn-outline-light:hover,
html[data-mc-theme="dark"] .btn-outline-white:hover {
	background-color: var(--mc-surface-alt);
	border-color: var(--mc-surface-alt);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .btn-outline-secondary,
html[data-mc-theme="dark"] .btn-outline-secondary.disabled,
html[data-mc-theme="dark"] .btn-outline-secondary:disabled {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .btn-outline-secondary:not(:hover):not([aria-expanded="true"]):not([aria-pressed="true"]) {
	border-color: var(--mc-border-strong);
}

/* BOUTONS DE CONNEXION SOCIALE (Akeeba). Le markup rendu porte
 * `btn btn-light … facebook|google` : c'est `.btn-light` qui les fait passer en
 * surface sombre ici, Facebook perdant son bleu et Google son blanc. Le rendu
 * sombre est coherent avec le reste de la page, mais les deux n'avaient pas le
 * meme contour : custom3.css pose `border: 1px solid #e3ebf6 !important` sur
 * `.btn.google` SEUL — un trait clair reste vif sur fond sombre — quand
 * `.btn.facebook` n'en a aucun. On leur donne le meme contour discret.
 * Le !important est requis pour reprendre celui de custom3. */
html[data-mc-theme="dark"] .btn.facebook,
html[data-mc-theme="dark"] .btn.google {
	border: 1px solid var(--mc-border) !important;
}

/* --- Dropdowns ----------------------------------------------------------- */

html[data-mc-theme="dark"] .dropdown-menu,
html[data-mc-theme="dark"] .dropdown-menu-card {
	background-color: var(--mc-surface);
	border-color: var(--mc-border);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .dropdown-item,
html[data-mc-theme="dark"] .dropdown-item-text {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .dropdown-item.active,
html[data-mc-theme="dark"] .dropdown-item:active,
html[data-mc-theme="dark"] .dropdown-item:focus,
html[data-mc-theme="dark"] .dropdown-item:hover,
html[data-mc-theme="dark"] .dropdown-menu > li > a:hover,
html[data-mc-theme="dark"] .dropdown-menu > li > a:focus {
	background-color: var(--mc-surface-hover);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .dropdown-item.disabled,
html[data-mc-theme="dark"] .dropdown-item:disabled {
	color: var(--mc-text-faint);
}
html[data-mc-theme="dark"] .dropdown-divider {
	border-top-color: var(--mc-border);
}

/* --- Modales, drawer, toasts, popovers ---------------------------------- */

html[data-mc-theme="dark"] .modal-content {
	background-color: var(--mc-surface);
}
html[data-mc-theme="dark"] .modal-header {
	border-bottom-color: var(--mc-border);
}
html[data-mc-theme="dark"] .modal-footer {
	border-top-color: var(--mc-border);
}
html[data-mc-theme="dark"] #mcModalDocument,
html[data-mc-theme="dark"] #mcModalVerticalRight {
	border-color: var(--mc-border);
}
html[data-mc-theme="dark"] .toast {
	background-color: var(--mc-surface);
	border-color: var(--mc-border);
}
html[data-mc-theme="dark"] .toast-header {
	background-color: var(--mc-surface);
	border-bottom-color: var(--mc-border);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .popover,
html[data-mc-theme="dark"] .popover-header {
	background-color: var(--mc-surface);
	border-color: var(--mc-border);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .popover-body {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .bs-popover-top > .arrow:after,
html[data-mc-theme="dark"] .bs-popover-auto[x-placement^="top"] > .arrow:after {
	border-top-color: var(--mc-surface);
}
html[data-mc-theme="dark"] .bs-popover-right > .arrow:after,
html[data-mc-theme="dark"] .bs-popover-auto[x-placement^="right"] > .arrow:after {
	border-right-color: var(--mc-surface);
}
html[data-mc-theme="dark"] .bs-popover-bottom > .arrow:after,
html[data-mc-theme="dark"] .bs-popover-auto[x-placement^="bottom"] > .arrow:after {
	border-bottom-color: var(--mc-surface);
}
html[data-mc-theme="dark"] .bs-popover-left > .arrow:after,
html[data-mc-theme="dark"] .bs-popover-auto[x-placement^="left"] > .arrow:after {
	border-left-color: var(--mc-surface);
}
html[data-mc-theme="dark"] .close,
html[data-mc-theme="dark"] .close:hover {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .close:hover {
	color: var(--mc-text);
}

/* --- Onglets, pagination, fil d'Ariane, barres de progression ----------- */

html[data-mc-theme="dark"] .nav-tabs {
	border-bottom-color: var(--mc-border);
}
html[data-mc-theme="dark"] .nav-tabs .nav-link:not(.active) {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .nav-tabs .nav-link:not(.active):hover {
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .nav-tabs .nav-item.show .nav-link,
html[data-mc-theme="dark"] .nav-tabs .nav-link.active {
	border-bottom-color: var(--mc-link);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .nav-link.disabled,
html[data-mc-theme="dark"] .nav-tabs .nav-link.disabled {
	color: var(--mc-text-faint);
}
html[data-mc-theme="dark"] .page-link {
	background-color: var(--mc-surface);
	border-color: var(--mc-border);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .page-link:hover {
	background-color: var(--mc-surface-hover);
	border-color: var(--mc-border);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .page-item.disabled .page-link {
	background-color: var(--mc-surface);
	border-color: var(--mc-border);
	color: var(--mc-text-faint);
}
html[data-mc-theme="dark"] .breadcrumb-item.active {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .breadcrumb-item + .breadcrumb-item:before {
	background: var(--mc-border-strong);
}
html[data-mc-theme="dark"] .progress {
	background-color: var(--mc-surface-alt);
}
html[data-mc-theme="dark"] .progress-bar {
	background-color: var(--mc-link);
}
html[data-mc-theme="dark"] .jumbotron {
	background-color: var(--mc-surface-alt);
}

/* --- Badges et alertes « soft » / claires ------------------------------- */

html[data-mc-theme="dark"] .badge-soft-primary   { background-color: rgba(139, 134, 245, .18) }
html[data-mc-theme="dark"] .badge-soft-secondary { background-color: rgba(139, 159, 191, .18); color: var(--mc-text-muted) }
html[data-mc-theme="dark"] .badge-soft-success   { background-color: rgba(0, 217, 126, .16);   color: #34e39b }
html[data-mc-theme="dark"] .badge-soft-info      { background-color: rgba(57, 175, 209, .16);  color: #63c4e0 }
html[data-mc-theme="dark"] .badge-soft-warning   { background-color: rgba(246, 195, 67, .16);  color: #f8cf68 }
html[data-mc-theme="dark"] .badge-soft-danger    { background-color: rgba(230, 55, 87, .18);   color: #f0687f }
html[data-mc-theme="dark"] .badge-soft-light,
html[data-mc-theme="dark"] .badge-soft-dark      { background-color: rgba(255, 255, 255, .08); color: var(--mc-text-muted) }
html[data-mc-theme="dark"] .badge-light,
html[data-mc-theme="dark"] .badge-white {
	background-color: var(--mc-surface-alt);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .alert-light,
html[data-mc-theme="dark"] .alert-white {
	background-color: var(--mc-surface-alt);
	border-color: var(--mc-surface-alt);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .alert-light .alert-link,
html[data-mc-theme="dark"] .alert-light .close,
html[data-mc-theme="dark"] .alert-white .alert-link,
html[data-mc-theme="dark"] .alert-white .close {
	color: var(--mc-text);
}

/* --- Utilitaires de fond / bordure -------------------------------------- */

html[data-mc-theme="dark"] .bg-white,
html[data-mc-theme="dark"] .bg-white-soft {
	background-color: var(--mc-surface) !important;
}
html[data-mc-theme="dark"] .bg-light {
	background-color: var(--mc-surface-alt) !important;
}
/* .bg-lighter vaut EXACTEMENT le fond de body en clair (#f9fbfd des deux cotes).
 * Tous ses usages sont des en-tetes `sticky-top` (formulaires Fabrik, campagne,
 * evenement) qui doivent se confondre avec la page pour que le contenu defile
 * invisiblement dessous. Le traduire en surface en faisait une dalle plus claire
 * que la page. */
html[data-mc-theme="dark"] .bg-lighter {
	background-color: var(--mc-bg) !important;
}
/* Famille .bg-*-soft : des aplats PALES (#e5e4f9, #fce7eb...) poses en !important,
 * 69 usages dans le projet — surtout des pastilles de comptage dans les onglets.
 * Laisses tels quels, ce sont les elements les plus lumineux d'une page sombre, et
 * sur l'onglet ACTIF le texte passe a --mc-text : quasi blanc sur lavande pale, la
 * pastille paraissait vide. Convertis en teintes TRANSLUCIDES de leur couleur :
 * le fond sombre transparait, et les textes herites redeviennent lisibles. */
html[data-mc-theme="dark"] .bg-primary-soft   { background-color: rgba(139, 134, 245, .20) !important }
html[data-mc-theme="dark"] .bg-secondary-soft { background-color: rgba(139, 159, 191, .18) !important }
html[data-mc-theme="dark"] .bg-success-soft   { background-color: rgba(0, 217, 126, .16)   !important }
html[data-mc-theme="dark"] .bg-info-soft      { background-color: rgba(57, 175, 209, .16)  !important }
html[data-mc-theme="dark"] .bg-warning-soft   { background-color: rgba(246, 195, 67, .16)  !important }
html[data-mc-theme="dark"] .bg-danger-soft    { background-color: rgba(230, 55, 87, .20)   !important }
html[data-mc-theme="dark"] .bg-light-soft     { background-color: var(--mc-surface-alt)    !important }
html[data-mc-theme="dark"] .bg-dark-soft      { background-color: rgba(255, 255, 255, .08) !important }

html[data-mc-theme="dark"] .bg-auth {
	background-color: var(--mc-surface);
}
html[data-mc-theme="dark"] .border,
html[data-mc-theme="dark"] .border-top,
html[data-mc-theme="dark"] .border-right,
html[data-mc-theme="dark"] .border-bottom,
html[data-mc-theme="dark"] .border-left,
html[data-mc-theme="dark"] .border-light,
html[data-mc-theme="dark"] .border-white,
html[data-mc-theme="dark"] .border-card,
html[data-mc-theme="dark"] .border-body {
	border-color: var(--mc-border) !important;
}
html[data-mc-theme="dark"] .bg-ellipses.bg-light {
	background-image: radial-gradient(var(--mc-surface-alt), var(--mc-surface-alt) 70%, transparent 70.1%);
}

/* --- Reprises de custom3.css ------------------------------------------- */

html[data-mc-theme="dark"] .contentpane,
html[data-mc-theme="dark"].component body.contentpane .mc-nav-sticky {
	background: var(--mc-bg) !important;
}
html[data-mc-theme="dark"] .mc-sticky-submit,
html[data-mc-theme="dark"] .text-divider span {
	background: var(--mc-bg);
}
html[data-mc-theme="dark"] .text-divider:before {
	border-top-color: var(--mc-border);
}
html[data-mc-theme="dark"] #mcCampaignProgress .progress {
	background-color: var(--mc-surface-alt);
}
html[data-mc-theme="dark"] .autocomplete-suggestions {
	background-color: var(--mc-surface);
	border-color: var(--mc-border);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .autocomplete-suggestion:hover,
html[data-mc-theme="dark"] .autocomplete-selected {
	background-color: var(--mc-surface-hover);
}
html[data-mc-theme="dark"] #fabrik-comment-list .comment-body {
	background-color: var(--mc-surface-hover);
}
html[data-mc-theme="dark"] #fabrik-comment-list .text-left .comment-body:before,
html[data-mc-theme="dark"] #fabrik-comment-list .text-right .comment-body:before {
	background-color: var(--mc-surface-hover);
	border-color: var(--mc-border) !important;
}
html[data-mc-theme="dark"] #sbox-window,
html[data-mc-theme="dark"] #sbox-content {
	background-color: var(--mc-bg);
}

/* --- Editeur JCE -------------------------------------------------------- */

/* Le skin sombre vient de JCE lui-meme (ui_dark.css, pose par mcTheme.js).
 * Reste a neutraliser custom3.css:1157, qui force `background: #fff !important`
 * sur la barre d'outils et la barre de statut : son !important ecraserait le
 * skin, dont la regle n'en porte pas. On rend la main au jeton de JCE, avec un
 * repli sur sa valeur, pour suivre ses evolutions de palette. */
html[data-mc-theme="dark"] .mceModernSkin .mceToolbar,
html[data-mc-theme="dark"] .mceDefaultSkin .mceStatusbar {
	background: var(--wfe-bg, #2b3035) !important;
}

/* --- Page de paiement donateur ------------------------------------------- */

/* Selecteur segmente « Une fois / Tous les mois » (custom3.css:1247).
 * Piste #edf2f9, option active en #fff : en sombre, l'option active ressortait
 * en blanc plein et l'inactive devenait illisible. */
html[data-mc-theme="dark"] .mc-segmented {
	background-color: var(--mc-surface-alt);
}
html[data-mc-theme="dark"] .mc-segmented > .btn {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .mc-segmented > .btn:hover {
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .mc-segmented > .btn.active,
html[data-mc-theme="dark"] .mc-segmented > .btn:not(:disabled):not(.disabled):active {
	background-color: var(--mc-surface);
	color: var(--mc-text);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* Bandeau de paiement fixe et ses elements (com_mcdonor/assets/mcpayment.css).
 * Les selecteurs de ce fichier sont en 0-1-0 : le scope suffit a les battre,
 * sans !important. */
html[data-mc-theme="dark"] .mc-paybar {
	background: var(--mc-surface);
	border-top-color: var(--mc-border);
}
/* J'avais traite les FONDS du bandeau sans ses couleurs de TEXTE : .mc-paybar__method
 * et .mc-paybar__amount portent `color: #12263f`, invisible une fois le bandeau passe
 * en sombre — « LA CARTE » et le total disparaissaient. Balayage complet de
 * mcpayment.css fait : ce sont les 2 dernieres couleurs sombres non couvertes, les
 * 2 autres (.mc-add-card, #mcPresets .btn.active) l'etaient deja. */
html[data-mc-theme="dark"] .mc-paybar__method {
	background: var(--mc-surface-hover);
	border-color: var(--mc-border);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .mc-paybar__amount {
	color: var(--mc-text);
}
/* Textes secondaires du bandeau : #95aac9 reste lisible sur fond sombre, mais on
 * l'aligne sur le jeton pour qu'il suive les evolutions de la palette. */
html[data-mc-theme="dark"] .mc-paybar__nature,
html[data-mc-theme="dark"] .mc-add-card__hint {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .mc-add-card {
	border-color: var(--mc-border-strong);
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .mc-add-card__icon {
	background: var(--mc-surface-alt);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .mc-express-sep::before,
html[data-mc-theme="dark"] .mc-express-sep::after {
	border-top-color: var(--mc-border);
}

/* Montants suggeres : aplat pale #e5e4f9 + texte #2721cd, illisible en sombre. */
html[data-mc-theme="dark"] #mcPresets .btn.active,
html[data-mc-theme="dark"] #mcDurationWrap [data-duree].active {
	background-color: rgba(139, 134, 245, .20);
	border-color: var(--mc-link);
	color: var(--mc-link);
}

/* NON TRAITE VOLONTAIREMENT : .paygreen-pan-frame / -cvv- / -exp-.
 * Le SDK PayGreen injecte une IFRAME dans ces conteneurs et y pose SA propre
 * couleur de texte, que nous ne controlons pas. Assombrir le fond donnerait un
 * numero de carte sombre sur fond sombre — sur un formulaire de paiement, le
 * risque est trop grand. Ils restent clairs, comme la zone de saisie de JCE.
 * Les boutons Apple Pay / Google Pay sont rendus par le navigateur : hors de
 * portee du CSS de la page. */

/* --- Reporting : widget PivotTable.js ------------------------------------- */
/* assets/custom/libs/pivot/pivot.css : 44 regles, aucune variable CSS, aucun
 * theme sombre livre — contrairement a JCE, tout est a reecrire ici.
 *
 * DEUX PARTICULARITES de cette feuille :
 *   - elle est chargee par mod_mycerfa_report dans le <body>, donc APRES les
 *     feuilles du template : a specificite egale, c'est elle qui gagne. Le scope
 *     `html[data-mc-theme]` suffit a repasser devant, sauf la ou elle pose
 *     elle-meme !important (les pastilles d'attribut).
 *   - elle style `select` et `button` NUS, donc toute la page du reporting. On
 *     les reprend dans le seul perimetre du widget. */

html[data-mc-theme="dark"] .pvtUi {
	color: var(--mc-text);
}

/* Grille : en-tetes, cellules, bordures */
html[data-mc-theme="dark"] table.pvtTable thead tr th,
html[data-mc-theme="dark"] table.pvtTable tbody tr th {
	background-color: var(--mc-surface-hover);
	border-color: var(--mc-border);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] table.pvtTable tbody tr td {
	background-color: var(--mc-surface);
	border-color: var(--mc-border);
	color: var(--mc-text);
}

/* Zones de depot des attributs */
html[data-mc-theme="dark"] .pvtAxisContainer,
html[data-mc-theme="dark"] .pvtVals {
	border-color: var(--mc-border);
}
html[data-mc-theme="dark"] .pvtAxisContainer li.pvtPlaceholder {
	border-color: var(--mc-border-strong);
}

/* Pastilles d'attribut. La feuille d'origine pose `color: #000 !important` et
 * `background: #fff` : il faut repasser en !important pour les reprendre. */
html[data-mc-theme="dark"] .pvtAxisContainer li span.pvtAttr {
	background: var(--mc-surface-alt) !important;
	border: 1px solid var(--mc-border-strong) !important;
	color: var(--mc-text) !important;
}
html[data-mc-theme="dark"] .pvtAxisContainer .pvtFilteredAttribute .pvtAttr,
html[data-mc-theme="dark"] .ui-sortable-helper > span.pvtAttr {
	background: rgba(139, 134, 245, .22) !important;
	border-color: var(--mc-link) !important;
	color: var(--mc-link) !important;
}
html[data-mc-theme="dark"] .pvtTriangle {
	color: var(--mc-text-muted);
}

/* Boite de filtre (fenetre flottante) */
html[data-mc-theme="dark"] .pvtFilterBox {
	background-color: var(--mc-surface);
	border-color: var(--mc-border);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .pvtFilterBox .count {
	color: var(--mc-text-muted);
}
html[data-mc-theme="dark"] .pvtCheckContainer {
	border-top-color: var(--mc-border);
	border-bottom-color: var(--mc-border);
}

/* Champs et boutons du widget */
html[data-mc-theme="dark"] .pvtUi select,
html[data-mc-theme="dark"] .pvtFilterBox select {
	background-color: var(--mc-input-bg) !important;
	border-color: var(--mc-border-strong);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .pvtUi button,
html[data-mc-theme="dark"] .pvtFilterBox button {
	background-color: var(--mc-surface-alt);
	border-color: var(--mc-surface-alt);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .pvtUi button:hover,
html[data-mc-theme="dark"] .pvtFilterBox button:hover {
	background-color: var(--mc-border-strong);
	border-color: var(--mc-border-strong);
	color: #fff;
}
/* Champ de recherche de la boite de filtre : un <input> NU, que pivot.css ne
 * style pas du tout — il restait au rendu par defaut du navigateur, donc clair. */
html[data-mc-theme="dark"] .pvtFilterBox input[type="text"],
html[data-mc-theme="dark"] .pvtUi input[type="text"],
html[data-mc-theme="dark"] .pvtSearch {
	background-color: var(--mc-input-bg);
	border: 1px solid var(--mc-border-strong);
	border-radius: .25rem;
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .pvtFilterBox input[type="text"]::placeholder,
html[data-mc-theme="dark"] .pvtSearch::placeholder {
	color: var(--mc-text-faint);
}
/* Cases a cocher de la liste de valeurs : natives, elles suivent color-scheme. */
html[data-mc-theme="dark"] .pvtCheckContainer p {
	color: var(--mc-text);
}

/* Bouton principal de la boite de filtre : reste primaire, eclairci. */
html[data-mc-theme="dark"] .pvtFilterBox p:last-child button:first-child {
	background-color: var(--mc-link);
	border-color: var(--mc-link);
	color: #fff;
}
/* --- Éditeur de plan de salle (com_mycerfa/views/plansalle) ---------------- */
/* Cas le plus propre de la série : l'éditeur porte son PROPRE jeu de jetons, 11
 * couleurs qui pilotent 55 usages, déclarées sur #mcSeatmap (CSS inline du
 * gabarit, ligne 286). On redéfinit les jetons — pas les règles — et tout
 * l'éditeur suit. Le scope html[data-mc-theme] + #mcSeatmap passe en 1-1-1,
 * devant la déclaration d'origine en 1-0-0. */
html[data-mc-theme="dark"] #mcSeatmap {
	--sm-ground: var(--mc-bg);
	--sm-panel:  var(--mc-surface);
	--sm-ink:    var(--mc-text);
	--sm-muted:  var(--mc-text-muted);
	--sm-faint:  var(--mc-text-faint);
	--sm-line:   var(--mc-border);
	--sm-line2:  var(--mc-border-strong);
	/* Le turquoise de l'éditeur, éclairci : #12776b tombe trop bas sur fond sombre. */
	--sm-accent:  #2bb3a3;
	--sm-accent2: #46c9b8;
	--sm-soft:    rgba(43, 179, 163, .18);
	--sm-danger:  #e0676e;
}

/* Les fonds blancs écrits EN DUR, que les jetons ne couvrent pas. */
/* `:not()` indispensable : sans lui cette regle (1-2-1) passe DEVANT
 * `.sm-btn.sm-primary` et `.sm-btn.sm-danger` (1-2-0) et leur retire leur
 * couleur — « Enregistrer » perdait son bleu, « Archiver » son rouge. */
html[data-mc-theme="dark"] #mcSeatmap .sm-ctl,
html[data-mc-theme="dark"] #mcSeatmap .sm-btn:not(.sm-primary):not(.sm-danger):not(.sm-danger-ghost),
html[data-mc-theme="dark"] #mcSeatmap .sm-seg button,
html[data-mc-theme="dark"] #mcSeatmap .sm-cat,
html[data-mc-theme="dark"] #mcSeatmap .sm-zoombar,
html[data-mc-theme="dark"] #mcSeatmap .sm-zoombar button,
html[data-mc-theme="dark"] #mcSeatmap .sm-lock-box {
	background: var(--mc-surface);
	color: var(--mc-text);
}
/* Les variantes gardent leur fond : on ne reprend que leur bordure. */
html[data-mc-theme="dark"] #mcSeatmap .sm-btn.sm-danger-ghost {
	background: transparent;
	color: var(--sm-danger);
}
html[data-mc-theme="dark"] #mcSeatmap .sm-btn:not(.sm-primary):not(.sm-danger):not(.sm-danger-ghost):hover,
html[data-mc-theme="dark"] #mcSeatmap .sm-btn.sm-ghost:hover,
html[data-mc-theme="dark"] #mcSeatmap .sm-tool:hover,
html[data-mc-theme="dark"] #mcSeatmap .sm-zoombar button:hover {
	background: var(--mc-surface-hover);
}
html[data-mc-theme="dark"] #mcSeatmap .sm-btn.sm-danger-ghost:hover {
	background: rgba(224, 103, 110, .16);
}
html[data-mc-theme="dark"] #mcSeatmap .sm-tool.sm-on {
	border-color: var(--sm-accent);
}
html[data-mc-theme="dark"] #mcSeatmap .sm-cat .sm-swatch {
	border-color: rgba(255, 255, 255, .18);
}

/* Scène : le quadrillage de points, assombri, sur le fond de page. */
html[data-mc-theme="dark"] #mcSeatmap .sm-stage {
	background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .10) 1px, transparent 0) 0 0/22px 22px,
	            var(--mc-bg);
}
/* Voile d'attente : clair à l'origine, il blanchissait tout l'éditeur. */
html[data-mc-theme="dark"] #mcSeatmap .sm-lock {
	background: rgba(14, 22, 38, .72);
}
html[data-mc-theme="dark"] #mcSeatmap .sm-canvas-wrap {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

/* NON TRAITÉS VOLONTAIREMENT : .sm-canvas-wrap et #smBoard (fond blanc), ainsi
 * que les étiquettes SVG posées dessus (.sm-itemlabel, .sm-tablelabel,
 * .sm-seatlabel) et les poignées de manipulation. C'est le PLAN lui-même, pas
 * l'interface : on y charge une photo de salle en fond, et les couleurs de
 * catégorie (or, argent, carré, réduit) ont été choisies sur blanc. L'assombrir
 * fausserait le rendu de ce que le public verra. Même raisonnement que la zone
 * de saisie de JCE et les champs carte PayGreen. */
/* --- flatpickr / quill -------------------------------------------------- */

html[data-mc-theme="dark"] .flatpickr-calendar {
	background-color: var(--mc-surface);
	border-color: var(--mc-border-strong);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .flatpickr-calendar.arrowTop:after {
	border-bottom-color: var(--mc-surface);
}
html[data-mc-theme="dark"] .flatpickr-calendar.arrowTop:before {
	border-bottom-color: var(--mc-border-strong);
}
html[data-mc-theme="dark"] .flatpickr-calendar .flatpickr-day.prevMonthDay,
html[data-mc-theme="dark"] .flatpickr-calendar .flatpickr-day.nextMonthDay {
	color: var(--mc-text-faint);
}
html[data-mc-theme="dark"] .flatpickr-calendar .flatpickr-day:hover,
html[data-mc-theme="dark"] .flatpickr-calendar .flatpickr-day.inRange {
	background-color: var(--mc-surface-hover);
	border-color: var(--mc-border-strong);
}
html[data-mc-theme="dark"] .flatpickr-calendar .flatpickr-day.inRange {
	box-shadow: -5px 0 0 var(--mc-surface-hover), 5px 0 0 var(--mc-surface-hover);
}
html[data-mc-theme="dark"] .flatpickr-calendar .flatpickr-day.today {
	border-color: var(--mc-border-strong);
}
html[data-mc-theme="dark"] .ql-toolbar,
html[data-mc-theme="dark"] .ql-editor,
html[data-mc-theme="dark"] .ql-editor:focus {
	background-color: var(--mc-input-bg);
	border-color: var(--mc-border-strong);
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .ql-toolbar button {
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .ql-editor.ql-blank:before {
	color: var(--mc-text-faint);
}
html[data-mc-theme="dark"] .ql-tooltip {
	background-color: var(--mc-surface);
}
html[data-mc-theme="dark"] .ql-tooltip input {
	color: var(--mc-text);
}
html[data-mc-theme="dark"] .ql-tooltip:after {
	border-bottom-color: var(--mc-surface);
}

/* --- Bascule d'apparence (menu avatar) ---------------------------------- */

html[data-mc-theme="dark"] .mcThemeSwitch .btn.active {
	color: #fff;
}