/**
 * mode_sombre.css
 * Mode sombre — palette navy inspirée de landing-modern.css
 * Activé par html[data-theme="dark"]
 */

/* ================================================================
   1. VARIABLES CSS
   ================================================================ */
html[data-theme="dark"] body {

    /* Fonds */
    --bg-color:             #131829;
    --bg-fond-color:        #0a0e27;
    --bg:                   #0a0e27;
    --surface:              rgba(255, 255, 255, 0.05);
    --bg-description-color: #1e2a42;
    --bg-color-hover:       #1e2a42;

    /* Couleurs principales */
    --main-color:           #ffffff;
    --accent:               #10c2a6;

    /* Couleurs secondaires */
    --green:   #22c55e;
    --orange:  #fb923c;
    --purple:  #a78bfa;
    --red:     #f87171;

    /* ============================================================
       Cloche de notifications — voir le bloc jumeau dans
       public/css/base/_variables.css pour le pourquoi de ces tokens.
       Le fond du panneau est OPAQUE volontairement : --surface vaut
       rgba(255,255,255,.05) en sombre, le contenu de la page se lirait
       derrière le panneau.
       ============================================================ */
    --notif-panel-bg:        #131829;
    --notif-panel-border:    rgba(255, 255, 255, 0.14);
    --notif-panel-shadow:    0 14px 55px rgba(0, 0, 0, 0.55);
    --notif-item-hover-bg:   #1e2a42;
    --notif-unread-marker:   #60a5fa;
    --notif-badge-bg:        #f87171;
    --notif-badge-ink:       #131829;
    --notif-text:            #f1f5f9;
    --notif-text-muted:      #94a3b8;
    --notif-icon:            #cbd5e1;

    /* Navigation */
    --nav-text-color:       white;
    --logo-letter-color:    #3b82f6;
    --nav-bg-hover:         rgba(59, 130, 246, 0.15);
    --nav-user-color:       #3b82f6;
    --nav-user-color-hover: #1e3a6e;

    /* Texte */
    --text-color-main:           #f1f5f9;
    --ink:                       #f1f5f9;
    --text-color-primary:        #60a5fa;
    --text-color-primary-hover:  #93c5fd;
    --text-color-secondary:      #f1f5f9;
    --text-color-menu-active:    white;
    --muted:                     #f1f5f9;

    /* Titres */
    --main-color-hover:   #60a5fa;
    --main-title-color:   #60a5fa;
    --text-title-color:   #f1f5f9;

    /* Liens */
    --link-color-main:  #93c5fd;
    --link-color-hover: #bfdbfe;

    /* Cartes */
    --card-bg-color:         rgba(255, 255, 255, 0.05);
    --card-border-color:     rgba(255, 255, 255, 0.10);
    --card-main-color-hover: #3b82f6;
    --card-shadow:           0 0 40px rgba(59, 130, 246, 0.12);
    --card-hover-bg-color:   rgba(255, 255, 255, 0.08);

    /* Bordures */
    --border-color: rgba(255, 255, 255, 0.10);
    --line:         rgba(255, 255, 255, 0.06);
    --stroke:       rgba(59, 130, 246, 0.20);

    /* Labels & divers */
    --label-color:   #93c5fd;
    --first-choice:  #c3a56a;
    --second-choice: #1e2a42;
    --second-color:  white;
    --favoris-color: #fbbf24;
    --date-color:    #f1f5f9;

    /* Boutons */
    --bouton-color:       #3b82f6;
    --bouton-color-hover: #60a5fa;

    /* Danger — nom canonique --danger-border-color aligné avec
       --warning/success/info-border-color. L'ancien --danger-color-border
       reste défini comme alias pour ne pas casser commun.css. */
    --danger-color:              #dc2626;
    --danger-color-text:         #fecaca;
    --danger-border-color:       #7f1d1d;
    --danger-color-border:       var(--danger-border-color); /* alias legacy */
    --danger-color-pastel:       #d14141;
    --danger-color-hover:        #b91c1c;
    --danger-bg-color:           #450a0a;
    --danger-border-color-hover: #dc2626;
    --danger-highlighted:        #f87171;

    /* Success */
    --success-color:        #bbf7d0;
    --success-bg-color:     #14532d;
    --success-border-color: #15803d;
    --success-highlighted:  #22c55e;

    /* Warning */
    --alerte-color:         #fbbf24;
    --warning-color:        #fde047;
    --warning-bg-color:     #451a03;
    --warning-border-color: #f59e0b;
    --warning-highlighted:  #fbbf24;

    /* Info */
    --info-color:        #7dd3fc;
    --info-bg-color:     #0c4a6e;
    --info-border-color: #0284c7;
    --info-highlighted:  #38bdf8;

    /* IGH */
    --igh-color:    #fca5a5;
    --igh-bg-color: #7f1d1d;

    /* Aliases utilitaires (builder, composants) */
    --text-primary: #f1f5f9;
    --card-bg:      rgba(255,255,255,.07);
    --text-muted:   #94a3b8;

    /* Palette PRIMARY — jamais redéfinie avant, hérite désormais du
       ton bleu clair de la landing pour rester lisible sur fond navy. */
    --primary:         hsl(217 91% 60%);      /* #3b82f6 */
    --primary-dark:    hsl(from var(--primary) h s calc(l - 15));
    --primary-darker:  hsl(from var(--primary) h s calc(l - 30));
    --primary-lighter: hsl(from var(--primary) h s calc(l + 10));

    /* Dégradé call-to-action — version dark, plus contrastée. */
    --grad-cta: linear-gradient(90deg, #3b82f6 0%, #10c2a6 100%);

    /* Ombres — plus profondes en dark, jamais définies avant. */
    --shadow-1:              0 6px 26px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.24);
    --shadow-2:              0 14px 55px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.30);
    --shadow-focus-primary:  0 0 0 3px rgba(96,165,250,0.28);
    --shadow-focus-danger:   0 0 0 3px rgba(248,113,113,0.28);
}

/* Îlots de variables locales — jamais redéfinis en dark avant 2.1.
   `questions.css` et `blog.css` les déclarent sur :root (mode clair
   par défaut) ; on les surcharge ici pour que les cartes de la page
   Questions et le blog restent lisibles sur fond sombre. */

html[data-theme="dark"] {
    /* Cartes ERP / questions guidées (public/css/questions.css) */
    --nb-blue:     #60a5fa;
    --nb-blue-600: #3b82f6;
    --nb-blue-100: rgba(96,165,250,.14);
    --nb-gray-100: rgba(255,255,255,.05);
    --nb-gray-200: rgba(255,255,255,.10);
    --nb-gray-400: rgba(255,255,255,.22);
    --nb-text:     #f1f5f9;
    --nb-muted:    #94a3b8;
    --nb-shadow:   0 6px 22px rgba(0,0,0,.35);

    /* Blog NORESA (public/css/blog.css) — palette réchauffée sur navy */
    --blog-fire:       #fb923c;
    --blog-fire-lt:    rgba(251,146,60,.10);
    --blog-fire-bd:    rgba(251,146,60,.32);
    --blog-access:     #a78bfa;
    --blog-access-lt:  rgba(167,139,250,.10);
    --blog-info:       var(--primary);
    --blog-info-lt:    rgba(96,165,250,.12);
    --blog-success:    #34d399;
    --blog-success-lt: rgba(52,211,153,.12);
}

/* ================================================================
   2. STRUCTURE GLOBALE — FOND NAVY DÉGRADÉ
   ================================================================ */
html[data-theme="dark"] body {
    background: linear-gradient(135deg, #0a0e27 0%, #131829 100%);
    color: #f1f5f9;
    position: relative;
}

/* Overlay de particules inspiré landing */
html[data-theme="dark"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(59,130,246,0.07) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(37,99,235,0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(96,165,250,0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ================================================================
   3. SIDEBAR / HEADER
   ================================================================ */
html[data-theme="dark"] header[role="banner"] {
    background: rgba(10, 14, 39, 0.95);
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #f1f5f9;
}

html[data-theme="dark"] header[role="banner"] a {
    color: #f1f5f9;
}

/* Logo image ? version dark */
html[data-theme="dark"] .logo__image img {
    content: url('../images/logo_dark_mode.png');
}

html[data-theme="dark"] .logo__nom h3 {
    color: #f1f5f9;
}

html[data-theme="dark"] .logo__nom h3::first-letter {
    color: #3b82f6;
}

/* ================================================================
   4. NAVIGATION LATÉRALE
   ================================================================ */
html[data-theme="dark"] nav {
    background: transparent;
    color: #f1f5f9;
}

html[data-theme="dark"] nav a,
html[data-theme="dark"] .menu__user a,
html[data-theme="dark"] #toggle_conteneur {
    color: #f1f5f9;
}

html[data-theme="dark"] .menu__item a:hover,
html[data-theme="dark"] .menu__item a.active,
html[data-theme="dark"] .menu__user .sous a:hover {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

html[data-theme="dark"] .menu__item a.active:hover {
    color: #93c5fd;
}

/* Dropdown utilisateur */
html[data-theme="dark"] .menu__user ul .sous {
    background-color: #131829;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .menu__user a.initiales {
    background-color: #1e3a6e;
    color: #93c5fd;
}

html[data-theme="dark"] .menu__user li.deroulant:hover a.initiales {
    background-color: rgba(59, 130, 246, 0.25);
}

html[data-theme="dark"] #toggle_menu,
html[data-theme="dark"] #open_menu {
    color: #60a5fa;
}

/* ================================================================
   5. ZONE PRINCIPALE & CONTENU
   ================================================================ */
html[data-theme="dark"] main {
    background: transparent;
    color: #f1f5f9;
    position: relative;
    z-index: 0;
}

html[data-theme="dark"] .contenu {
    background: transparent;
}

html[data-theme="dark"] .contenu__bloc {
    color: #f1f5f9;
}

/* ================================================================
   6. EN-TÊTE DE PAGE (contenu__header)
   ================================================================ */
html[data-theme="dark"] .contenu__header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    color: #f1f5f9;
}

html[data-theme="dark"] .contenu__header__title h1 {
    color: #f1f5f9;
}

html[data-theme="dark"] .contenu__header__title p {
    color: #f1f5f9;
}

html[data-theme="dark"] .contenu__header h1 {
    color: #60a5fa;
}

html[data-theme="dark"] .contenu__header h2 {
    color: #f1f5f9;
}

/* ================================================================
   7. FIL D'ARIANE
   ================================================================ */
html[data-theme="dark"] .fil-ariane,
html[data-theme="dark"] .breadcrumb {
    color: #f1f5f9;
}

html[data-theme="dark"] .fil-ariane a,
html[data-theme="dark"] .breadcrumb a {
    color: #60a5fa;
}

/* ================================================================
   8. CARTES — GLASSMORPHISME
   ================================================================ */
html[data-theme="dark"] .card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    color: #f1f5f9;
}

html[data-theme="dark"] .card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.12);
}

html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3 {
    color: #f1f5f9;
}

html[data-theme="dark"] .card p {
    color: #f1f5f9;
}

html[data-theme="dark"] .card--gradient {
    background: linear-gradient(135deg, rgba(59,130,246,0.12) 0%, rgba(255,255,255,0.04) 100%);
}

html[data-theme="dark"] .stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    color: #f1f5f9;
}

html[data-theme="dark"] .stat-card.stat-card--alert {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(252, 165, 165, 0.3);
}

html[data-theme="dark"] .stat-card__value,
html[data-theme="dark"] .stat-card__label,
html[data-theme="dark"] .stat-card__title {
    color: #f1f5f9;
}

/* ================================================================
   9. FORMULAIRES
   ================================================================ */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    background: rgba(255, 255, 255, 0.09);
    border-color: #3b82f6;
    outline-color: rgba(59, 130, 246, 0.3);
}

/* Options de liste déroulante */
html[data-theme="dark"] select option {
    background-color: #1e293b;
    color: #f1f5f9;
}
html[data-theme="dark"] select option:hover,
html[data-theme="dark"] select option:checked {
    background-color: #1d4ed8;
    color: #fff;
}

html[data-theme="dark"] select:disabled,
html[data-theme="dark"] select.select-readonly {
    background-color: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    opacity: 0.7;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #f1f5f9;
}

html[data-theme="dark"] label {
    color: #f1f5f9;
}

/* ================================================================
   10. TABLEAUX
   ================================================================ */
html[data-theme="dark"] table {
    background: rgba(255, 255, 255, 0.03);
    color: #f1f5f9;
}

html[data-theme="dark"] th {
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] td {
    border-color: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
}

html[data-theme="dark"] tr:hover td {
    background: rgba(59, 130, 246, 0.07);
}

/* ================================================================
   11. ALERTES ET MESSAGES
   ================================================================ */
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .message--success {
    background: #14532d;
    border-color: #15803d;
    color: #bbf7d0;
}

html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .message--danger {
    background: #450a0a;
    border-color: #dc2626;
    color: #fecaca;
}

html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .message--warning {
    background: #451a03;
    border-color: #f59e0b;
    color: #fde047;
}

html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .message--info {
    background: #0c4a6e;
    border-color: #0284c7;
    color: #7dd3fc;
}

/* ================================================================
   12. MODALES
   ================================================================ */
html[data-theme="dark"] .modal__content,
html[data-theme="dark"] .modal-content {
    background: #131829;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    color: #f1f5f9;
}

html[data-theme="dark"] .modal__header,
html[data-theme="dark"] .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .modal__footer,
html[data-theme="dark"] .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ================================================================
   13. SÉPARATEURS
   ================================================================ */
html[data-theme="dark"] hr {
    border-color: rgba(255, 255, 255, 0.08);
}

/* ================================================================
   14. SCROLLBAR (Webkit)
   ================================================================ */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0a0e27;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.4);
    border-radius: 4px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.6);
}

/* ================================================================
   15. BLOG (cards, index-bar)
   ================================================================ */
html[data-theme="dark"] .blog-index-bar {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .blog-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
    color: #f1f5f9;
}

html[data-theme="dark"] .blog-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(59, 130, 246, 0.30);
}

html[data-theme="dark"] .blog-card h2,
html[data-theme="dark"] .blog-card h3,
html[data-theme="dark"] .blog-card__title {
    color: #f1f5f9;
}

/* ================================================================
   16. SOMMAIRE / STYLEGUIDE
   ================================================================ */
html[data-theme="dark"] .sommaire {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .sommaire h2 {
    color: #f1f5f9;
}

html[data-theme="dark"] .sommaire a {
    color: #f1f5f9;
}

html[data-theme="dark"] .sommaire a:hover,
html[data-theme="dark"] .sommaire a.active {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

/* ================================================================
   17. CARTES STATISTIQUES (.stat-card)
   ================================================================ */
html[data-theme="dark"] .stat-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    color: #f1f5f9;
}
html[data-theme="dark"] .stat-card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}
html[data-theme="dark"] .stat-card.stat-card--alert {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
}
html[data-theme="dark"] .stat-card__label {
    color: #f1f5f9;
}
html[data-theme="dark"] .stat-card__description {
    color: #f1f5f9;
}
html[data-theme="dark"] .stat-card__detail {
    color: #f1f5f9;
}
html[data-theme="dark"] .stat-card__footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ================================================================
   18. ÉTAT VIDE (.empty-state)
   ================================================================ */
html[data-theme="dark"] .empty-state {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9;
}
html[data-theme="dark"] .empty-state h3 {
    color: #f1f5f9;
}
html[data-theme="dark"] .empty-state p,
html[data-theme="dark"] .empty-state__text {
    color: #f1f5f9;
}
html[data-theme="dark"] .empty-state__icon,
html[data-theme="dark"] .empty-state > .material-symbols-outlined {
    color: #475569;
}

/* ================================================================
   19. TABLEAUX COMPOSANT (.table)
   ================================================================ */
html[data-theme="dark"] .table thead {
    background: rgba(59, 130, 246, 0.10) !important;
}
html[data-theme="dark"] .table thead tr {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .table td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
}
html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(59, 130, 246, 0.07) !important;
}
html[data-theme="dark"] .table tbody tr.clickable:hover {
    background: rgba(59, 130, 246, 0.10) !important;
}
html[data-theme="dark"] .table-light {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ================================================================
   20. MESSAGES / ALERTES (.message--*)
   ================================================================ */
html[data-theme="dark"] .message--info {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border-color: #3b82f6 !important;
}
html[data-theme="dark"] .message--info .message__title {
    color: #93c5fd !important;
}
html[data-theme="dark"] .message--info .message__text {
    color: #bfdbfe !important;
}

html[data-theme="dark"] .message--success {
    background-color: rgba(34, 197, 94, 0.12) !important;
    border-color: #22c55e !important;
}
html[data-theme="dark"] .message--success .message__title {
    color: #86efac !important;
}
html[data-theme="dark"] .message--success .message__text {
    color: #bbf7d0 !important;
}

html[data-theme="dark"] .message--warning {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: #f59e0b !important;
}
html[data-theme="dark"] .message--warning .message__title {
    color: #fcd34d !important;
}
html[data-theme="dark"] .message--warning .message__text {
    color: #fde68a !important;
}

html[data-theme="dark"] .message--error {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: #ef4444 !important;
}
html[data-theme="dark"] .message--error .message__title {
    color: #fca5a5 !important;
}
html[data-theme="dark"] .message--error .message__text {
    color: #fecaca !important;
}

html[data-theme="dark"] .message--help {
    background-color: rgba(168, 85, 247, 0.12) !important;
    border-color: #a855f7 !important;
}
html[data-theme="dark"] .message--help .message__title {
    color: #d8b4fe !important;
}
html[data-theme="dark"] .message--help .message__text {
    color: #e9d5ff !important;
}

html[data-theme="dark"] .message {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .message__title {
    color: #f1f5f9;
}
html[data-theme="dark"] .message__text {
    color: #f1f5f9;
}

/* ================================================================
   21. ONGLETS (.tab-list / .tab-item)
   ================================================================ */
html[data-theme="dark"] .tab-list {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.20);
}
html[data-theme="dark"] .tab-item {
    color: #f1f5f9;
    background: transparent;
}
html[data-theme="dark"] .tab-item.active {
    background: #3b82f6 !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .tab-item:not(.active):hover {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #60a5fa !important;
}

/* ================================================================
   22. TOM SELECT
   ================================================================ */
html[data-theme="dark"] .ts-wrapper .ts-control,
html[data-theme="dark"] .ts-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .ts-control input {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .ts-dropdown {
    background: #1e2a42 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .ts-dropdown .option {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .ts-dropdown .option:hover,
html[data-theme="dark"] .ts-dropdown .option.active {
    background: rgba(59, 130, 246, 0.20) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .ts-dropdown .optgroup-header {
    color: #f1f5f9 !important;
    background: rgba(255, 255, 255, 0.03) !important;
}
html[data-theme="dark"] .ts-dropdown .selected {
    background: rgba(59, 130, 246, 0.15) !important;
}
html[data-theme="dark"] .ts-wrapper.focus .ts-control {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

/* ================================================================
   23. CARTES VARIANTES (.card--gradient, borders)
   ================================================================ */
html[data-theme="dark"] .card--gradient {
    background: linear-gradient(135deg, rgba(59,130,246,0.10) 0%, rgba(255,255,255,0.04) 100%) !important;
}
html[data-theme="dark"] .card__header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .card__footer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .card__alert {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* ================================================================
   24. TARIFICATION (.pricing-card)
   ================================================================ */
html[data-theme="dark"] .pricing-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9;
}
html[data-theme="dark"] .pricing-card.premium {
    background: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(59,130,246,0.10) 100%) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
}
html[data-theme="dark"] .pricing-card.default {
    border-color: rgba(107, 114, 128, 0.40) !important;
}
html[data-theme="dark"] .pricing-header h3 {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .pricing-note {
    background: rgba(59, 130, 246, 0.08) !important;
}

/* ================================================================
   25. FEEDBACK / MESSAGES BULLES
   ================================================================ */
html[data-theme="dark"] .feedback-discussion {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .feedback-header {
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(59,130,246,0.05) 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .feedback-messages {
    background-color: rgba(255, 255, 255, 0.02) !important;
}
html[data-theme="dark"] .message-bubble--admin .message-bubble__content {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .message-date-divider__text {
    background-color: #1e2a42 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .message-date-divider::before,
html[data-theme="dark"] .message-date-divider::after {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .feedback-status--en-attente {
    background-color: rgba(251, 191, 36, 0.15) !important;
    color: #fde68a !important;
}
html[data-theme="dark"] .feedback-status--en-cours {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .feedback-status--termine {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
}

/* ================================================================
   26. RÉFÉRENTIEL
   ================================================================ */
html[data-theme="dark"] .referentiel {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* ================================================================
   27. POPUPS & DIVERS
   ================================================================ */
html[data-theme="dark"] #popup_copie_tableau {
    background-color: #1e2a42 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .progress {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ================================================================
   28. BARRE DE RECHERCHE / ACTIONS
   ================================================================ */
html[data-theme="dark"] #actions form input[type="text"] {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] #actions form input[type="text"]:focus {
    background-color: rgba(255, 255, 255, 0.09) !important;
    border-color: #3b82f6 !important;
}

/* ================================================================
   29. HOVER FILTRE (.filters-grid)
   ================================================================ */
html[data-theme="dark"] .filters-grid .form-field:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="dark"] .filters-form .form-actions {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ================================================================
   30. MODAL (générale)
   ================================================================ */
html[data-theme="dark"] .modal,
html[data-theme="dark"] [class*="modal"] {
    color: #f1f5f9;
}
html[data-theme="dark"] .modal__overlay,
html[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* ================================================================
   31. ACCORDÉONS & EN-TÊTES DE NOTICE
   ================================================================ */
html[data-theme="dark"] .notice-header {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f1f5f9;
}

/* ================================================================
   32. CARDS QUESTIONS (génération guidée)
   ================================================================ */
html[data-theme="dark"] .question-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9;
}
html[data-theme="dark"] .question-header {
    background: rgba(59, 130, 246, 0.08) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .question-header h4 {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .phrases-types-section {
    background: rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="dark"] .phrases-types-header h6 {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .phrase-item {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    color: #f1f5f9;
}
html[data-theme="dark"] .phrase-item:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd;
}
html[data-theme="dark"] .phrase-item.selected {
    background: rgba(59, 130, 246, 0.25) !important;
    color: #bfdbfe;
}
html[data-theme="dark"] .chapter-info {
    background: rgba(33, 150, 243, 0.10) !important;
    border-left-color: #3b82f6 !important;
    color: #bfdbfe;
}
html[data-theme="dark"] .progress-indicator {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9;
}
html[data-theme="dark"] .progress-bar-custom {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ── Navigation multi-questions & mode minimal & textarea globale ──
   Retiré : multi-questions.css définit désormais --mq-* (surfaces,
   bordures, textes, phrase-item et ses états) surchargés en dark,
   qui produisent le même rendu sans !important. La seule règle qui
   reste ici est celle du .selected-response-tag, dont la teinte bleue
   spécifique en dark ne mappait pas sur --mq-surface-alt neutre. */
html[data-theme="dark"] .selected-response-tag {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.30) !important;
    color: #93c5fd;
}
/* ── Barre de transformation IA ────────────────────────────────── */
html[data-theme="dark"] .ia-toolbar {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="dark"] .ia-toolbar__label {
    color: #94a3b8 !important;
}
/* Retiré : multi-questions.css définit --mq-warn-text (#fbbf24 en dark),
   qui produit la même couleur ambre sans !important. */
html[data-theme="dark"] .ia-toolbar .ia-transform-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .ia-toolbar .ia-transform-btn:hover:not(:disabled) {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}
html[data-theme="dark"] .ia-toolbar .ia-reset-btn {
    border-left-color: rgba(255, 255, 255, 0.15) !important;
}
html[data-theme="dark"] .ia-toolbar .ia-reset-btn:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.25) !important;
    border-color: rgba(220, 53, 69, 0.5) !important;
    color: #fca5a5 !important;
}

/* ── Éditeur riche ─────────────────────────────────────────────── */
/* Retiré : `rich-editor.css` définit désormais ses propres tokens
   `--re-*` redéfinis en dark. Plus aucune règle nécessaire ici. */

/* ── Navigation sous-chapitres ─────────────────────────────────── */
html[data-theme="dark"] .sub-chapter-navigation {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .sub-chapter-header h6 {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .sub-chapter-tab {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #94a3b8 !important;
}
html[data-theme="dark"] .sub-chapter-tab:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .sub-chapter-tab.active {
    background: rgba(59, 130, 246, 0.20) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .mini-progress-bar {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* ── Zone sauvegarde ───────────────────────────────────────────── */
html[data-theme="dark"] .save-actions {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px;
}

/* ── Navigation prev/next ──────────────────────────────────────── */
html[data-theme="dark"] .nav-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .nav-btn:hover {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .nav-text small {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .nav-info {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .chapter-select {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
}

/* ── Accordéon & info-box ──────────────────────────────────────── */
html[data-theme="dark"] .accordion-header {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .accordion-item {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .info-box--reglementation {
    background: rgba(59, 130, 246, 0.10) !important;
    border-left-color: rgba(59, 130, 246, 0.50) !important;
}
html[data-theme="dark"] .info-box-content {
    color: #f1f5f9 !important;
}

/* ── Réponses sélectionnables ──────────────────────────────────── */
html[data-theme="dark"] .responses-group {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .responses-group-toggle {
    color: #f1f5f9 !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="dark"] .response-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9;
}
html[data-theme="dark"] .response-item:hover {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .responses-list input[type="radio"]:checked + label,
html[data-theme="dark"] .responses-list input[type="checkbox"]:checked + label {
    background: rgba(59, 130, 246, 0.20) !important;
    border-color: #3b82f6 !important;
    color: #bfdbfe !important;
}

/* ── Sommaire chapitres ─────────────────────────────────────────── */
html[data-theme="dark"] .chapter-summary-section {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .subchapter-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}
html[data-theme="dark"] .subchapter-item:hover {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .subchapter-item.active {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .subchapter-title {
    color: inherit;
}
html[data-theme="dark"] .subchapter-number {
    color: #64748b !important;
}

/* ================================================================
   33. PREMIUM ONLY
   ================================================================ */
html[data-theme="dark"] .premium-only {
    background: linear-gradient(90deg, rgba(255,215,0,0.10) 0%, rgba(255,215,0,0.06) 100%) !important;
    border-color: rgba(255, 215, 0, 0.25) !important;
}
html[data-theme="dark"] .premium-message {
    color: #fcd34d !important;
}
html[data-theme="dark"] .premium-icon {
    color: #fcd34d !important;
}

/* ================================================================
   34. COMMUN — SEPARATOR & MISC
   ================================================================ */
html[data-theme="dark"] .separator {
    background-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .choice .CTS-icones span:first-child {
    background-color: transparent !important;
}
html[data-theme="dark"] #actions form input[type="text"] {
    background-color: rgba(241, 241, 241, 0.06) !important;
}
html[data-theme="dark"] .pricing-description {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .price {
    color: #93c5fd !important;
}
html[data-theme="dark"] .pricing-card.premium .price {
    color: #c4b5fd !important;
}

/* ================================================================
   35. DROPDOWN MENU (.dropdown-menu)
   ================================================================ */
html[data-theme="dark"] .dropdown-menu {
    background-color: #1e2a42 !important;
    border-color: rgba(59, 130, 246, 0.30) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    color: #f1f5f9;
}
html[data-theme="dark"] .dropdown-menu li:hover {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd;
}
html[data-theme="dark"] .dropdown-menu li.disabled:hover {
    background-color: transparent !important;
}

/* ================================================================
   36. ACCESS GRID (outils & profil — grandes cartes blanches)
   ================================================================ */
html[data-theme="dark"] .access-grid__category {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] .access-grid__category h3 {
    color: #f1f5f9 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .access-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .access-card:hover {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: #3b82f6 !important;
}
html[data-theme="dark"] .access-card__content h4 {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .access-card__content p {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .access-card .arrow {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .access-card:hover .arrow {
    color: #60a5fa !important;
}
html[data-theme="dark"] .access-card.danger {
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: rgba(220, 38, 38, 0.20) !important;
}
html[data-theme="dark"] .access-card.danger:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(220, 38, 38, 0.40) !important;
}

/* ================================================================
   37. INFO ROW (paramètres, profil — lignes blanches)
   ================================================================ */
html[data-theme="dark"] .info-row {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: #f1f5f9;
}
html[data-theme="dark"] .info-row:hover {
    border-color: rgba(59, 130, 246, 0.40) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .info-row__label {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .info-row__value {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .info-row__description {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .info-row.highlighted {
    background: linear-gradient(135deg, rgba(59,130,246,0.12) 0%, rgba(59,130,246,0.06) 100%) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

/* ================================================================
   46. ENVOI GROUPÉ — SÉLECTEUR TEMPLATE ET LISTE DESTINATAIRES
   ================================================================ */
html[data-theme="dark"] #bulk_template {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] #bulk_list_container {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* En-tête sticky (total + bouton sélectionner) */
html[data-theme="dark"] #bulk_list_body > div:not([data-key]) {
    background: #1e293b !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}

/* Barre de sélection en masse prospects */
html[data-theme="dark"] #prospect-bulk-bar {
    background: #7c2d12 !important;
    border-color: #b45309 !important;
}

/* Sélecteur de filtre (source, statut, etc.) dans formulaires */
html[data-theme="dark"] .filter-select,
html[data-theme="dark"] .form-select {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ================================================================
   38. MODAL GN10 (Type de travaux — cartes radio blanches)
   ================================================================ */
html[data-theme="dark"] #gn10Modal .form-group {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] #gn10Modal .form-group:hover {
    border-color: rgba(59, 130, 246, 0.40) !important;
}
html[data-theme="dark"] #gn10Modal .form-group.selected {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: #3b82f6 !important;
}
html[data-theme="dark"] #gn10Modal .radio-label > div > div > span:last-child,
html[data-theme="dark"] #gn10Modal .radio-label {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] #gn10Modal .modal-close:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] #gn9ClassementField label,
html[data-theme="dark"] #gn9ClassementField .form-hint {
    color: #f1f5f9 !important;
}

/* ── Section chapitres GN10 ─────────────────────────────────────── */
html[data-theme="dark"] #gn10ChapitresField {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] #gn10ChapitresField > div:first-child label {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] #gn10ChapitresField > p:first-of-type,
html[data-theme="dark"] .form-hint-info {
    background: rgba(59, 130, 246, 0.12) !important;
    border-left-color: #3b82f6 !important;
    color: #bfdbfe !important;
}

/* ── Grille de chapitres ─────────────────────────────────────────── */
html[data-theme="dark"] .chapitre-group {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .chapitre-group:hover {
    border-color: rgba(59, 130, 246, 0.40) !important;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.12) !important;
}
html[data-theme="dark"] .chapitre-group .checkbox-label {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .chapitre-group .checkbox-label > div > span:last-child {
    color: #f1f5f9 !important;
}

/* ── Sous-chapitres container ────────────────────────────────────── */
html[data-theme="dark"] .souschapitres-container {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .souschapitres-container .checkbox-label {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .souschapitres-container .checkbox-label:hover {
    background: rgba(59, 130, 246, 0.10) !important;
    color: #93c5fd !important;
}

/* ── Chapitres simples ───────────────────────────────────────────── */
html[data-theme="dark"] .chapitre-simple {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .chapitre-simple:hover {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .chapitre-simple > span {
    color: #f1f5f9 !important;
}

/* ── Tarification GN10 ───────────────────────────────────────────── */
html[data-theme="dark"] .gn10-pricing-info {
    background: rgba(59, 130, 246, 0.10) !important;
    border-color: rgba(59, 130, 246, 0.30) !important;
}
html[data-theme="dark"] .gn10-pricing-info p {
    color: #93c5fd !important;
}

/* ── Header chapitres GN10 ───────────────────────────────────────── */
html[data-theme="dark"] .gn10-chapitres-header label {
    color: #f1f5f9 !important;
}

/* ================================================================
   38b. MODAL CONFIRMATION GÉNÉRATION GUIDÉE (credits-info)
   ================================================================ */

/* Bloc jaune tarification → fond ambre/navy */
html[data-theme="dark"] .credits-info {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.40) !important;
}

/* Cards blanches internes */
html[data-theme="dark"] .pricing-details {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="dark"] .pricing-details h4 {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .pricing-details p {
    color: #e2e8f0 !important;
}

/* Ligne de détail de prix */
html[data-theme="dark"] .pricing-breakdown {
    background: rgba(59, 130, 246, 0.10) !important;
    border-left-color: #3b82f6 !important;
    color: #93c5fd !important;
}

/* Solde actuel */
html[data-theme="dark"] .current-balance {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="dark"] .balance-label {
    color: #94a3b8 !important;
}

/* Solde après génération */
html[data-theme="dark"] .balance-after {
    background: rgba(16, 185, 129, 0.08) !important;
    border-left-color: #10b981 !important;
}

/* Crédits insuffisants */
html[data-theme="dark"] .insufficient-credits {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.30) !important;
    color: #fca5a5 !important;
}

/* ================================================================
   39. FORM GROUP CARD (hover states)
   ================================================================ */
html[data-theme="dark"] .form-group-card .form-field:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ================================================================
   40. NAV DROPDOWN (.sous) — visibilité renforcée
   ================================================================ */
html[data-theme="dark"] .menu__user ul .sous {
    background-color: #1e2a42 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 8px 8px 32px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .menu__user .sous a {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .menu__user .sous a:hover {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

/* ================================================================
   41. TEXTE GLOBAL — forcer les couleurs par défaut en dark
   ================================================================ */
html[data-theme="dark"] p,
html[data-theme="dark"] span:not([class*="material"]),
html[data-theme="dark"] li {
    color: inherit;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: #f1f5f9;
}
html[data-theme="dark"] a:not(.btn):not([class*="badge"]):not([class*="menu"]):not([class*="nav"]) {
    color: #93c5fd;
}
html[data-theme="dark"] a:not(.btn):not([class*="badge"]):not([class*="menu"]):not([class*="nav"]):hover {
    color: #bfdbfe;
}

/* ================================================================
   42a. TOKENS ADMIN — redéfinition dark
   Contrepartie sombre des variables --admin-* déclarées dans
   base/_variables.css. La grande majorité des règles admin
   n'a plus besoin de ses propres surcharges html[data-theme=dark]
   grâce à ces jetons.
   ================================================================ */
html[data-theme="dark"] {
    /* Surfaces */
    --admin-surface:             #1e2a42;
    --admin-surface-alt:         rgba(255, 255, 255, 0.04);
    --admin-surface-inset:       rgba(255, 255, 255, 0.03);
    --admin-surface-strong:      rgba(255, 255, 255, 0.07);

    /* Bordures */
    --admin-border:              rgba(255, 255, 255, 0.09);
    --admin-border-soft:         rgba(255, 255, 255, 0.08);
    --admin-border-strong:       rgba(255, 255, 255, 0.15);
    --admin-border-medium:       rgba(255, 255, 255, 0.18);

    /* Textes */
    --admin-text:                #e2e8f0;
    --admin-text-strong:         #f1f5f9;
    --admin-text-muted:          #94a3b8;
    --admin-text-faint:          #94a3b8;

    /* Accents bleus */
    --admin-accent:              #60a5fa;
    --admin-accent-hover:        #93c5fd;
    --admin-accent-strong:       #93c5fd;
    --admin-accent-ink:          #bfdbfe;
    --admin-accent-ink-strong:   #bfdbfe;
    --admin-accent-bg:           rgba(59, 130, 246, 0.15);
    --admin-accent-bg-soft:      rgba(59, 130, 246, 0.08);
    --admin-accent-border:       rgba(59, 130, 246, 0.35);
    --admin-accent-border-hover: rgba(59, 130, 246, 0.60);

    /* Indigo & Google */
    --admin-indigo:              #818cf8;
    --admin-blue-google:         #60a5fa;
    --admin-blue-google-hover:   #3b82f6;

    /* Warning / RGPD */
    --admin-warn-bg:             rgba(245, 158, 11, 0.15);
    --admin-warn-bg-soft:        rgba(245, 158, 11, 0.08);
    --admin-warn-border:         rgba(245, 158, 11, 0.40);
    --admin-warn-border-hover:   #f59e0b;
    --admin-warn-ink:            #fcd34d;
    --admin-warn-icon:           #fbbf24;

    /* Danger */
    --admin-danger-bg:           rgba(220, 38, 38, 0.12);
    --admin-danger-bg-strong:    rgba(220, 38, 38, 0.20);
    --admin-danger-border:       rgba(220, 38, 38, 0.35);
    --admin-danger-border-hover: rgba(220, 38, 38, 0.50);
    --admin-danger-ink:          #fca5a5;
    --admin-danger-title:        #fca5a5;
    --admin-danger-icon:         #f87171;

    /* Success */
    --admin-success:             #34d399;
    --admin-success-strong:      #22c55e;
    --admin-success-bg:          rgba(34, 197, 94, 0.10);
    --admin-success-bg-alt:      rgba(34, 197, 94, 0.15);
    --admin-success-border:      rgba(34, 197, 94, 0.35);
    --admin-success-ink:         #86efac;
    --admin-success-icon:        #22c55e;

    /* Hiérarchie doc réglementaire (index admin) */
    --admin-hier-cat-bg:         rgba(59, 130, 246, 0.35);
    --admin-hier-cat-border:     rgba(167, 139, 250, 0.50);
    --admin-hier-livre-bg:       rgba(59, 130, 246, 0.25);
    --admin-hier-livre-border:   rgba(59, 130, 246, 0.40);
    --admin-hier-titre-bg:       rgba(59, 130, 246, 0.18);
    --admin-hier-onblue-text:    #ffffff;
    --admin-hier-section-bg:     rgba(59, 130, 246, 0.10);
    --admin-hier-section-ink:    #7dd3fc;
    --admin-hier-section-border: rgba(59, 130, 246, 0.20);
}

/* ================================================================
   42. ADMIN BDD — en-têtes de groupe & lignes totaux (inline styles)
   ================================================================ */
html[data-theme="dark"] tr.notice-header td {
    background-color: #1e3a5f !important;
    color: #93c5fd !important;
    border-color: #1e4a7a !important;
}
html[data-theme="dark"] tr.template-header td {
    background-color: #1e2a42 !important;
    color: #f1f5f9 !important;
    border-color: #2d3f5e !important;
}
/* Finance — ligne total */
html[data-theme="dark"] tr.table-row-total {
    background-color: #1e2a42 !important;
    color: #f1f5f9 !important;
    border-top-color: #334155 !important;
}
/* Phrase logs — barre de progression */
html[data-theme="dark"] .phrase-log-bar-bg {
    background: #1e2a42 !important;
}

/* ================================================================
   43. OUTIL SOUS-SOL — table niveaux_seuils & input number
   ================================================================ */
html[data-theme="dark"] #niveaux_seuils {
    border-color: #334155 !important;
}
html[data-theme="dark"] #niveaux_seuils th {
    border-color: #334155 !important;
}
html[data-theme="dark"] #niveaux_seuils td {
    border-color: #334155 !important;
    background-color: #1e2a42 !important;
}
html[data-theme="dark"] #nb_niveaux {
    background-color: #1e2a42 !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}


/* ================================================================
   44. BETA BANNER — texte blanc en dark mode
   ================================================================ */
html[data-theme="dark"] #beta-banner p,
html[data-theme="dark"] #beta-banner span:not([class*="material"]) {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] #beta-banner strong {
    color: #ffffff !important;
}

/* ================================================================
   45. BLOG TEASER (bandeau app) — dark mode
   ================================================================ */
html[data-theme="dark"] .blog-teaser {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}
html[data-theme="dark"] .blog-teaser__title {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .blog-teaser__label {
    color: #f97316 !important;
}
html[data-theme="dark"] .blog-teaser__desc {
    color: #f1f5f9 !important;
}

/* ================================================================
   47-49. PAGE RÉGLEMENTATION
   Retiré : `reglementation.css` gère désormais les deux modes via ses
   propres tokens `--regl-*` (mêmes valeurs finales qu'ici, mais sans
   !important — voir ce fichier). La classe .reglementation-coming-soon
   qui restait ici en surcharge dark n'est référencée nulle part dans
   les templates ni dans le reste des CSS — retirée aussi.
   ================================================================ */

/* ================================================================
   50. INFO-BOX VARIANTS — PAGE QUESTIONS
   ================================================================ */
html[data-theme="dark"] .info-box-regl-titre {
    color: #94a3b8 !important;
}

/* Section variant */
html[data-theme="dark"] .info-box--section {
    background: rgba(16, 185, 129, 0.10) !important;
    border-left-color: rgba(16, 185, 129, 0.50) !important;
}
html[data-theme="dark"] .info-box--section .info-box-regl-code {
    color: #6ee7b7 !important;
}
html[data-theme="dark"] .info-box--section .info-box-regl-link {
    color: #6ee7b7 !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.30) !important;
}
html[data-theme="dark"] .info-box--section .info-box-regl-link:hover {
    background: rgba(16, 185, 129, 0.22) !important;
    border-color: rgba(16, 185, 129, 0.55) !important;
    color: #a7f3d0 !important;
}

/* Definition variant */
html[data-theme="dark"] .info-box--definition {
    background: rgba(23, 162, 184, 0.10) !important;
    border-left-color: rgba(23, 162, 184, 0.50) !important;
}
html[data-theme="dark"] .info-box--definition .info-box-header {
    color: #67e8f9 !important;
}
html[data-theme="dark"] .info-box--definition .material-symbols-outlined {
    color: #22d3ee !important;
}

/* Commentaire variant */
html[data-theme="dark"] .info-box--commentaire {
    background: rgba(40, 167, 69, 0.10) !important;
    border-left-color: rgba(40, 167, 69, 0.50) !important;
}
html[data-theme="dark"] .info-box--commentaire .info-box-header {
    color: #86efac !important;
}
html[data-theme="dark"] .info-box--commentaire .material-symbols-outlined {
    color: #4ade80 !important;
}

/* Séparateur interne */
html[data-theme="dark"] .info-box-sub {
    border-top-color: rgba(255, 255, 255, 0.10) !important;
}

/* ================================================================
   51. RAPPEL-INFOS & SOMMAIRE GUIDÉ
   ================================================================ */
html[data-theme="dark"] .rappel-infos {
    background-color: rgba(59, 130, 246, 0.10) !important;
    border-color: rgba(59, 130, 246, 0.30) !important;
}
html[data-theme="dark"] .rappel-infos-icon {
    background-color: rgba(59, 130, 246, 0.20) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .rappel-infos-content p {
    color: #f1f5f9 !important;
}

/* Cartes du sommaire guidé */
html[data-theme="dark"] .sommaire-card {
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .sommaire-card:hover {
    border-color: rgba(59, 130, 246, 0.40) !important;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.15) !important;
}
html[data-theme="dark"] .sommaire-card.disabled {
    background-color: rgba(255, 255, 255, 0.03) !important;
}
html[data-theme="dark"] .sommaire-number {
    background-color: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}
html[data-theme="dark"] .sommaire-content h3 {
    color: #93c5fd !important;
}
html[data-theme="dark"] .sommaire-content p {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .sommaire-progression p {
    color: #64748b !important;
}

/* Barres de progression (track hardcodé rgba(0,0,0,0.2) invisible sur fond navy) */
html[data-theme="dark"] .sommaire-progression .progression-bar,
html[data-theme="dark"] .recap-sommaire-progression .progression-bar {
    background-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="dark"] .progression-bar-fill {
    background-color: #3b82f6 !important;
}
html[data-theme="dark"] .recap-sommaire p {
    color: #f1f5f9 !important;
}
html[data-theme="dark"] .progression-infos p {
    color: #94a3b8 !important;
}

/* ================================================================
   39b. EDITEUR RICHE - zones placeholder/choix (dark mode)
   ================================================================ */
/* Retiré : `rich-editor.css` gère désormais les deux modes via ses
   propres tokens `--re-*` (voir ce fichier). */

/* ================================================================
   39c. SOMMAIRE CHAPITRES - elements manquants (dark mode)
   ================================================================ */

/* Header du sommaire */
html[data-theme="dark"] .summary-header {
    background: linear-gradient(135deg, rgba(59,130,246,0.25) 0%, rgba(37,99,235,0.20) 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

/* Navigation principale - fond gris clair -> transparent */
html[data-theme="dark"] .main-navigation {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Compteurs position / completion */
html[data-theme="dark"] .current-position {
    color: #60a5fa !important;
}
html[data-theme="dark"] .completion-status {
    color: #86efac !important;
}

/* ================================================================
   phrase-used - phrase deja incorporee dans le textarea
   ================================================================ */
html[data-theme="dark"] .global-phrases-types .phrase-item.phrase-used {
    background: rgba(59, 130, 246, 0.22) !important;
    border-color: rgba(59, 130, 246, 0.60) !important;
    color: #bfdbfe !important;
}
html[data-theme="dark"] .global-phrases-types .phrase-item.phrase-used .phrase-content {
    color: #bfdbfe !important;
}
html[data-theme="dark"] .global-phrases-types .phrase-item.phrase-used .phrase-content::after {
    background: #60a5fa !important;
    opacity: 0.9 !important;
}
/* ================================================================
   phrase--masquee - phrase deconseillée car une autre phrase masque celle-ci
   ================================================================ */
html[data-theme="dark"] .global-phrases-types .phrase-item.phrase--masquee {
    opacity: 0.4 !important;
}
html[data-theme="dark"] .global-phrases-types .phrase-item.phrase--masquee:hover {
    opacity: 0.65 !important;
}
html[data-theme="dark"] .global-phrases-types .phrase-item.phrase--masquee .phrase-content::after {
    color: #fbbf24 !important;
}