/* ────────────────────────────────────────────────────────────────────────
   acf-theme.css — Thème unifié clair/sombre des formulaires ACF front
   (jsp-pro)

   Remplace la quadruple duplication des règles de thème ACF :
   • bloc #check + bloc [data-jsp-acf-theme] de check_festival.css
   • accueil-wizard.css (l.19-121)
   • <style> inline de tpl-edition-accueil.php (~270 l.)
   • bloc mort .dark .acf-* de check-shell.php

   Principe — un seul module scopé [data-jsp-acf-theme], deux blocs de
   variables seulement :
   • S0 (clair)   : valeurs par défaut, portées par [data-jsp-acf-theme]
   • S0b (sombre) : surcharges sous html[data-jsp-global-theme="dark"] (+
                    repli [data-theme="dark"] posé par acf-theme.js quand la
                    clé globale manque)
   Les règles de surface commune n'utilisent que des variables --jsp-acf-*
   (une seule écriture pour les deux thèmes). Les composants exclusivement
   sombres (table repeater, TinyMCE, iris, select2/datepicker hors zone)
   sont regroupés en fin de fichier, valeurs littérales — le clair les
   laisse natifs, comme les sources.

   Palettes : slate (gris) / emerald (vert) — norme accueil-wizard.css.
   Le clair sert aussi de « micro-reset » quand le CSS natif ACF
   (acf-input.css) n'est pas chargé sur la page (route profil).

   Guerre des !important : le build Tailwind porte !important, la stratégie
   est le retrait des classes par les JS (jsp-check-modal.js,
   check_festival.js, profil_intervenant.js) — pas le contre-!important.
   Liste blanche du module (courte) : fond du switch ON, fond des icônes
   de rangée (.acf-icon natif #ccc !important → miroir), .acf-spinner,
   pare-feu fond/bordure des .acf-fields.-border et inputs en sombre.
   ──────────────────────────────────────────────────────────────────────── */

/* ═══════ S0 — Variables (clair) ══════════════════════════════════════ */
[data-jsp-acf-theme] {
    /* textes */
    --jsp-acf-label: #1e293b;        /* slate-800  — labels            */
    --jsp-acf-desc: #64748b;         /* slate-500  — descriptions      */
    --jsp-acf-text: #0f172a;         /* slate-900  — inputs, table     */
    /* champs */
    --jsp-acf-input-bg: #fff;
    --jsp-acf-input-bg-focus: #fff;
    --jsp-acf-input-border: #cbd5e1; /* slate-300                     */
    --jsp-acf-input-focus-border: #10b981;  /* emerald-500            */
    --jsp-acf-input-focus-ring: rgba(16, 185, 129, 0.18);
    /* rythme vertical */
    --jsp-acf-field-sep: #e2e8f0;    /* slate-200 — filet dashed       */
    /* répéteur mode bloc */
    --jsp-acf-row-bg: #fafafa;
    --jsp-acf-row-border: #cbd5e1;
    /* panneaux .acf-fields.-border / groupes */
    --jsp-acf-panel-bg: #fff;
    --jsp-acf-panel-border: #ccd0d4; /* natif ACF                     */
    /* boutons ACF (add ligne, ajouter…) */
    --jsp-acf-btn-bg: #059669;       /* emerald-600                   */
    --jsp-acf-btn-bg-hover: #047857; /* emerald-700 (clair ET sombre) */
    --jsp-acf-btn-color: #fff;
    /* submit ACF */
    --jsp-acf-submit-bg: #15c39a;    /* menthe-500 (clair ET sombre)  */
    --jsp-acf-submit-bg-hover: #13ae8a; /* menthe-600                 */
    /* accent cases/radios */
    --jsp-acf-accent: #10b981;
}

/* ═══════ S0b — Variables (sombre) ════════════════════════════════════ */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme],
[data-jsp-acf-theme][data-theme="dark"] {
    --jsp-acf-label: #e2e8f0;        /* slate-200                     */
    --jsp-acf-desc: #94a3b8;         /* slate-400                     */
    --jsp-acf-text: #f1f5f9;         /* slate-100                     */
    --jsp-acf-input-bg: #1e293b;     /* slate-800                     */
    --jsp-acf-input-bg-focus: #0f172a; /* slate-900                   */
    --jsp-acf-input-border: #475569; /* slate-600                     */
    --jsp-acf-input-focus-border: #34d399; /* emerald-400             */
    --jsp-acf-input-focus-ring: rgba(52, 211, 153, 0.18);
    --jsp-acf-field-sep: #334155;    /* slate-700                     */
    --jsp-acf-row-bg: #1e293b;
    --jsp-acf-row-border: #475569;
    --jsp-acf-panel-bg: #0f172a;
    --jsp-acf-panel-border: #475569;
    --jsp-acf-btn-bg: #065f46;       /* emerald-800                   */
    --jsp-acf-btn-color: #d1fae5;    /* emerald-100                   */
    --jsp-acf-accent: #34d399;
}

/* ═══════ S1 — Rythme vertical des champs ═════════════════════════════
   Padding + filet dashed sous chaque champ (sauf le dernier) —
   source accueil-wizard.css (l.20-29) + inline wizard (l.160-164).   */
[data-jsp-acf-theme] .acf-field {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px dashed var(--jsp-acf-field-sep);
}
[data-jsp-acf-theme] .acf-field:last-child {
    border-bottom: none;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-field {
    border-color: var(--jsp-acf-field-sep);
    border-bottom-color: var(--jsp-acf-field-sep);
    border-top-color: var(--jsp-acf-field-sep);
}

/* ═══════ S2 — Labels / descriptions ══════════════════════════════════
   Source accueil-wizard.css (l.30-47). Le label du true_false est le
   même que celui des autres champs.                                 */
[data-jsp-acf-theme] .acf-label > label {
    color: var(--jsp-acf-label);
    font-weight: 600;
    font-size: 0.95rem;
}
[data-jsp-acf-theme] .acf-field .description,
[data-jsp-acf-theme] .acf-field p.description {
    color: var(--jsp-acf-desc);
    font-size: 0.82rem;
    margin-top: 0.35rem;
}

/* ═══════ S3 — Inputs / textarea / select ═════════════════════════════
   Source accueil-wizard.css (l.48-86) complété des types couverts par
   check_festival.css (password/date/search/tel). Le focus clair force
   le fond #fff, le focus sombre force #0f172a (inline wizard l.142-148).
   Ne combat pas le natif .acf-url input[type=url]{padding-left:27px!important}. */
[data-jsp-acf-theme] .acf-input input[type="text"],
[data-jsp-acf-theme] .acf-input input[type="url"],
[data-jsp-acf-theme] .acf-input input[type="number"],
[data-jsp-acf-theme] .acf-input input[type="email"],
[data-jsp-acf-theme] .acf-input input[type="password"],
[data-jsp-acf-theme] .acf-input input[type="date"],
[data-jsp-acf-theme] .acf-input input[type="search"],
[data-jsp-acf-theme] .acf-input input[type="tel"],
[data-jsp-acf-theme] .acf-input textarea,
[data-jsp-acf-theme] .acf-input select {
    width: 100%;
    border: 1px solid var(--jsp-acf-input-border);
    border-radius: 0.75rem;
    padding: 0.65rem 0.9rem;
    background: var(--jsp-acf-input-bg);
    color: var(--jsp-acf-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-jsp-acf-theme] .acf-input input:focus,
[data-jsp-acf-theme] .acf-input textarea:focus,
[data-jsp-acf-theme] .acf-input select:focus {
    outline: none;
    border-color: var(--jsp-acf-input-focus-border);
    box-shadow: 0 0 0 3px var(--jsp-acf-input-focus-ring);
    background: var(--jsp-acf-input-bg-focus);
}

/* Pare-feu sombre (classes Tailwind résiduelles portent !important ;
   voir l'en-tête — « guerre des !important »).                        */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-input input,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-input textarea,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-input select {
    background: var(--jsp-acf-input-bg) !important;
    border-color: var(--jsp-acf-input-border) !important;
    color: var(--jsp-acf-text) !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-input input:focus,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-input textarea:focus,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-input select:focus {
    background: var(--jsp-acf-input-bg-focus) !important;
    border-color: var(--jsp-acf-input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--jsp-acf-input-focus-ring) !important;
}

/* ═══════ S4 — Checkbox / radio : accent émeraude ═════════════════════
   Abandon du teal #0f766e des modales au profit de la norme wizard.  */
[data-jsp-acf-theme] input[type="checkbox"],
[data-jsp-acf-theme] input[type="radio"] {
    accent-color: var(--jsp-acf-accent);
}

/* ═══════ S5 — Switch (true_false) ════════════════════════════════════
   Reprise du bloc inline wizard (l.165-196) :
   • ON vert #10b981 dans les DEUX thèmes (texte noir, slider blanc) ;
   • OFF : natif ACF en clair (#f5f5f5), pill sombre en dark.        */
[data-jsp-acf-theme] .acf-switch.-on {
    background: #10b981 !important;
    border-color: #10b981 !important;
}
[data-jsp-acf-theme] .acf-switch.-on .acf-switch-on {
    color: #000000 !important;
}
[data-jsp-acf-theme] .acf-switch.-on .acf-switch-slider {
    background: #ffffff !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-switch {
    background: #334155 !important;
    border-color: #475569 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-switch .acf-switch-slider {
    background: #e2e8f0 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-switch .acf-switch-on,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-switch .acf-switch-off {
    color: #94a3b8 !important;
}
/* -on redondant en dark (l'état ON est identique au clair) */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-switch.-on {
    background: #10b981 !important;
    border-color: #10b981 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-switch.-on .acf-switch-on {
    color: #000000 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-switch.-on .acf-switch-slider {
    background: #ffffff !important;
}

/* ═══════ S6 — Range ═════════════════════════════════════════════════
   Source check_festival.css (l.391-393) : piste sombre en dark.      */
[data-jsp-acf-theme] input[type="range"] {
    accent-color: var(--jsp-acf-accent);
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] input[type="range"] {
    background-color: #334155;
}

/* ═══════ S7 — Color picker ═══════════════════════════════════════════
   Dark : inline wizard (l.361-394) + bouton du champ (check_festival
   l.387-390). Le clair reste natif (iris clair WordPress).           */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-color-picker button {
    background-color: #334155;
    color: #f1f5f9;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .wp-color-result {
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .wp-color-result .wp-color-result-text {
    color: #94a3b8;
    background: #1e293b;
    border-color: #475569;
    border-left-color: #475569;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .wp-color-result:hover .wp-color-result-text {
    color: #e2e8f0;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .wp-picker-input-wrap .button {
    background: #334155;
    color: #94a3b8;
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .wp-picker-input-wrap .button:hover {
    background: #475569;
    color: #e2e8f0;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .wp-picker-holder .iris-picker {
    background: #0f172a;
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .iris-border {
    background: #1e293b;
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .iris-picker .iris-slider,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .iris-picker .iris-square {
    border-color: #475569;
}

/* ═══════ S8 — Panneaux .acf-fields / groupes ═════════════════════════
   Clair = natif ACF (fond blanc + bord #ccd0d4), rendu explicite pour
   les pages sans CSS ACF. Sombre = #0f172a solide (visuellement
   identique au fond slate-900 des coquilles — inline wizard l.157-159
   qui forçait le transparent, équivalent une fois posé sur coquille
   #0f172a). Le fond des .acf-fields sans .-border reste transparent.
   La largeur d'1px ne porte QUE sur .acf-fields.-border : le natif ACF
   ne borde pas le .acf-input parent et l'inline wizard (l.354) n'y
   peignait que border-color — une largeur là doublerait le cadre du
   panneau et décalerait son contenu d'1px (vérifié par diff captures). */
[data-jsp-acf-theme] .acf-fields.-border {
    border: 1px solid var(--jsp-acf-panel-border);
    background: var(--jsp-acf-panel-bg);
}
/* Racine du formulaire (acf_form rend .acf-fields.-top.acf-form-fields) :
   fond panneau. La carte hôte du profil est GRISE (bg-gray-200 / gray-900),
   pas blanche comme la coquille du wizard — transparent y laisserait le gris
   transparaître. Sur coquilles blanches / slate-900 (wizard) : invisible. */
[data-jsp-acf-theme] .acf-form-fields {
    background: var(--jsp-acf-panel-bg);
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-form-fields {
    background: var(--jsp-acf-panel-bg) !important;
}
[data-jsp-acf-theme] .acf-field-group > .acf-input {
    border-color: var(--jsp-acf-panel-border);
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-fields.-border,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-field-group > .acf-input {
    background: var(--jsp-acf-panel-bg) !important;
    border-color: var(--jsp-acf-panel-border) !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-fields.-border > .acf-field:first-child {
    border-top-color: var(--jsp-acf-panel-border);
}

/* ═══════ S9 — Répéteurs ══════════════════════════════════════════════
   Mode bloc (source accueil-wizard.css l.87-96) + mode table sombre
   (source inline wizard l.274-352, complété par la peinture propre des
   poignées/icônes de check_festival.css — l'actuel wizard laisse les
   icônes #ccc du natif et le halo blanc des numéros : corrigé ici).  */

/* rows (bloc ET table — rendu du wizard) */
[data-jsp-acf-theme] .acf-repeater .acf-row {
    background: var(--jsp-acf-row-bg);
    border: 1px solid var(--jsp-acf-row-border);
    border-radius: 1rem;
    margin-bottom: 0.75rem;
}

/* le spinner ACF natif est remplacé par l'overlay maison (i.acf-loading) */
[data-jsp-acf-theme] .acf-spinner {
    display: none !important;
}

/* Bouton « Ajouter une ligne » (acf-actions) et boutons ACF génériques */
[data-jsp-acf-theme] .acf-repeater .acf-actions .acf-button,
[data-jsp-acf-theme] .acf-button {
    background: var(--jsp-acf-btn-bg);
    color: var(--jsp-acf-btn-color);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
[data-jsp-acf-theme] .acf-button:hover {
    background: var(--jsp-acf-btn-bg-hover);
}

/* ── Peinture sombre du répéteur (layout bloc ET table) ───────────── */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater {
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-table {
    border-color: #475569;
    background: #0f172a;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-row:not(.-collapsed) {
    border-color: #475569;
}
/* poignées : seul le halo blanc natif est à neutraliser en sombre
   (.acf-repeater .acf-row-handle.order, acf-pro-input.min.css). Le fond
   des th/td poignées de table est couvert par le bloc « layout table »
   ci-dessous (th #1e293b, td #0f172a, !important — calque wizard). */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-row-handle {
    text-shadow: none;
}
/* icônes des poignées : miroir !important du natif .acf-icon #ccc */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-row-handle .acf-icon {
    background-color: #334155 !important;
    border-color: #475569;
    color: #f1f5f9;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-row-handle .acf-icon:hover {
    background-color: #475569 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-row-handle .acf-row-number {
    color: #64748b;
}
/* contenu des cartes bloc */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-row .acf-fields,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-fields.-border {
    background: #0f172a;
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-fields.-border > .acf-field {
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-fields.-border > .acf-field:first-child {
    border-top-color: #475569;
}
/* pied du répéteur (table) + bouton add sombre */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-actions {
    background: #1e293b;
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-actions .acf-button {
    background: #065f46;
    color: #d1fae5;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-actions .acf-button:hover {
    background: #047857;
}
/* layout table : peinture sombre — les <th> ACF portent la classe
   acf-row-handle (sondé), ainsi que les td poignées : le sélecteur
   complet .acf-repeater .acf-table > … (0,4,4) + !important est requis
   pour défaire toute règle .acf-row-handle concurrente — valeurs à
   l'identique de l'inline wizard (tpl l.330-342) */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-table > thead > tr > th {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-table > tbody > tr > td {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater .acf-table > tbody > tr:hover > td {
    background: #1e293b !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-table .acf-row-handle .order {
    color: #64748b;
}
/* rangée vide */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-table .acf-empty {
    background: #0f172a;
    color: #64748b;
}
/* placeholder du glisser-réorganiser */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-repeater tr.ui-sortable-placeholder td {
    background: #334155;
}

/* ═══════ S10 — Uploaders image / fichier ═════════════════════════════
   Clair : coins arrondis (accueil-wizard.css l.117-121).
   Sombre : inline wizard (l.201-215).                                 */
[data-jsp-acf-theme] .acf-image-uploader .show-if-value,
[data-jsp-acf-theme] .acf-image-uploader .hide-if-value {
    border-radius: 0.75rem;
    overflow: hidden;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-image-uploader .image-wrap {
    background: #1e293b;
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-image-uploader .image-wrap img {
    background: #0f172a;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-file-uploader .file-wrap {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .acf-file-uploader .file-icon {
    background: #334155;
}

/* ═══════ S11 — TinyMCE / quicktags (sombre uniquement) ══════════════
   Copie à l'identique de l'inline wizard (l.217-273). Le clair reste
   natif (probe : bord #ccd0d4, rayon 0). Le contenu de l'iframe est
   couvert par editor-dark.css (hors module).                          */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .wp-editor-container {
    background: #1e293b !important;
    border-color: #475569 !important;
}
/* Conteneurs du skin TinyMCE injectés dans .wp-editor-container : le skin
   oxide les peint en blanc (mce-panel) — pare-feu sombre identique au
   container. L'iframe elle-même est couverte par editor-dark.css, injecté
   dans son <head> par watchEditorFrames() (jsp-check-modal.js /
   check_festival.js) quand le thème est sombre. */
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-tinymce,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-edit-area {
    background: #1e293b !important;
    border-color: #475569 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .wp-editor-tabs .wp-switch-editor {
    background: #334155 !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .wp-editor-tabs .wp-switch-editor:active,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .wp-editor-tabs .wp-switch-editor:focus {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-toolbar .mce-btn {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-toolbar .mce-btn button {
    color: #e2e8f0 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-toolbar .mce-btn:hover,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-toolbar .mce-btn.mce-active {
    background: #475569 !important;
    border-color: #64748b !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-toolbar .mce-btn i {
    color: #94a3b8 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-toolbar .mce-btn:hover i,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-toolbar .mce-btn.mce-active i {
    color: #e2e8f0 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-menubar,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-toolbar-grp,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-statusbar {
    background: #0f172a !important;
    border-color: #475569 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-menubar .mce-menubtn button,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .mce-statusbar .mce-path {
    color: #94a3b8 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .quicktags-toolbar {
    background: #0f172a !important;
    border-color: #475569 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .quicktags-toolbar .button {
    background: #334155 !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] .quicktags-toolbar .button:hover {
    background: #475569 !important;
    color: #e2e8f0 !important;
}

/* ═══════ S12 — Submit du formulaire ACF + message ════════════════════
   Source check_festival.css (l.796-848, route profil). Solide menthe
   clair = sombre (les modales passent du pâle menthe-50/#119e7d à la
   menthe-500 ; le wizard a son propre bouton ambre, hors module).
   Centrage/marge haute repris du profil.                              */
[data-jsp-acf-theme] .acf-form-submit {
    text-align: center;
    margin-top: 14px;
}
[data-jsp-acf-theme] .acf-form-submit input[type="submit"] {
    background-color: var(--jsp-acf-submit-bg);
    border: 1px solid var(--jsp-acf-submit-bg);
    color: #ffffff;
    padding: 0.65rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
[data-jsp-acf-theme] .acf-form-submit input[type="submit"]:hover,
[data-jsp-acf-theme] .acf-form-submit input[type="submit"]:focus {
    background-color: var(--jsp-acf-submit-bg-hover);
    border-color: var(--jsp-acf-submit-bg-hover);
}
/* message ACF de confirmation : texte noir en clair, clair en sombre */
[data-jsp-acf-theme] #message,
[data-jsp-acf-theme] p#message {
    color: #000000;
}
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] #message,
html[data-jsp-global-theme="dark"] [data-jsp-acf-theme] p#message {
    color: #e2e8f0;
}

/* ═══════ S13 — Hors zone : select2 + datepicker (appendés au body) ═══
   Sélecteurs globaux — reprise à l'identique des blocs globaux de
   check_festival.css (select2 l.137-250, datepicker l.312-384). En
   clair : défauts des librairies conservés (sauf aération du multiple
   et z-index, nécessaires dans les deux thèmes).                      */

/* select2 multiple — aération (clair et sombre) */
.select2-container--default .select2-selection--multiple {
    padding: 0.25rem 0.5rem;
    min-height: 2.75rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0.25rem 0.375rem 0.25rem 0;
}
/* le dropdown select2 et le datepicker passent AU-DESSUS de la modale */
.select2-container--open .select2-dropdown {
    z-index: 1000000;
}
#ui-datepicker-div {
    z-index: 1000000 !important;
}

/* ── select2 sombre ─────────────────────────────────────────────────── */
html[data-jsp-global-theme="dark"] .select2-container--default .select2-selection--single,
html[data-jsp-global-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: #1e293b;
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-jsp-global-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: #f1f5f9;
}
html[data-jsp-global-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #cbd5e1 transparent transparent transparent;
}
html[data-jsp-global-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #334155;
    border-color: #475569;
    color: #f1f5f9;
}
html[data-jsp-global-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #cbd5e1;
}
html[data-jsp-global-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff;
}
html[data-jsp-global-theme="dark"] .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    color: #f1f5f9;
}
html[data-jsp-global-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #94a3b8;
}
html[data-jsp-global-theme="dark"] .select2-dropdown {
    background-color: #1e293b;
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] .select2-container--default .select2-results__option {
    color: #f1f5f9;
}
html[data-jsp-global-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #334155;
    color: #ffffff;
}
html[data-jsp-global-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #0f766e;
    color: #f0fdfa;
}
html[data-jsp-global-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"]::before {
    content: "✓";
    margin-right: 0.5rem;
    color: #5eead4;
}
html[data-jsp-global-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: #0f172a;
    color: #f1f5f9;
    border-color: #475569;
}

/* ── Datepicker jQuery UI sombre ────────────────────────────────────── */
html[data-jsp-global-theme="dark"] #ui-datepicker-div {
    background: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
}
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-datepicker-header,
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-datepicker-title {
    background: #0f172a;
    color: #f1f5f9;
}
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-datepicker-calendar td a,
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-state-default {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-state-hover,
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-state-active {
    background: #334155;
    color: #ffffff;
}
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-datepicker-prev,
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-datepicker-next {
    color: #f1f5f9;
}
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-datepicker-prev:hover,
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-datepicker-next:hover {
    background: #334155;
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] #ui-datepicker-div th {
    color: #94a3b8;
}
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-state-highlight {
    background: #334155;
    color: #ffffff;
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-state-disabled {
    background: transparent;
    color: #64748b;
    opacity: 0.5;
}
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-datepicker-month,
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-datepicker-year {
    background-color: #0f172a;
    color: #f1f5f9;
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-datepicker-buttonpane {
    background: #0f172a;
    border-color: #475569;
}
html[data-jsp-global-theme="dark"] #ui-datepicker-div .ui-datepicker-buttonpane button {
    background: #334155;
    color: #f1f5f9;
    border-color: #475569;
}