/* ============================================================
   Thème "Noël" : construit sur le modèle de Metronic, comme le thème Bleu.
   Palette vert sapin, or et rouge houx. Activé par data-bs-theme="noel" sur <html>.
   Tout est limité à ce sélecteur : aucun autre thème n'est touché.
   ============================================================ */

[data-bs-theme="noel"] {
    /* === Échelle de gris → palette navy === */
    --bs-gray-100: #0b1f15;
    --bs-gray-100-rgb: 11, 31, 21;
    --bs-gray-200: #102a1d;
    --bs-gray-200-rgb: 16, 42, 29;
    --bs-gray-300: #17382a;
    --bs-gray-300-rgb: 23, 56, 42;
    --bs-gray-400: #21503a;
    --bs-gray-400-rgb: 33, 80, 58;
    --bs-gray-500: #4a8564;
    --bs-gray-500-rgb: 74, 133, 100;
    --bs-gray-600: #6aa585;
    --bs-gray-600-rgb: 106, 165, 133;
    --bs-gray-700: #c9bf9c;
    --bs-gray-700-rgb: 201, 191, 156;
    --bs-gray-800: #e6dab4;
    --bs-gray-800-rgb: 230, 218, 180;
    --bs-gray-900: #ffffff;
    --bs-gray-900-rgb: 255, 255, 255;

    /* === Couleurs sémantiques === */
    --bs-white: #ffffff;
    --bs-light: #102a1d;
    --bs-primary: #d9b45a;
    --bs-success: #50cd89;
    --bs-info: #7239ea;
    --bs-warning: #ffc700;
    --bs-danger: #d23a3a;
    --bs-dark: #ffffff;
    --bs-secondary: #17382a;

    --bs-primary-active: #c29d3f;
    --bs-secondary-active: #21503a;
    --bs-light-active: #17382a;
    --bs-success-active: #47be7d;
    --bs-info-active: #5014d0;
    --bs-warning-active: #f1bc00;
    --bs-danger-active: #b02a2a;
    --bs-dark-active: white;

    --bs-primary-light: #102a1d;
    --bs-success-light: #12352a;
    --bs-info-light: #2a2244;
    --bs-warning-light: #3a3420;
    --bs-danger-light: #3a1a1d;
    --bs-dark-light: #102a1d;
    --bs-secondary-light: #0b1f15;
    --bs-red-light: #3a2424;

    --bs-primary-inverse: #2d1e05;
    --bs-secondary-inverse: #c9bf9c;
    --bs-light-inverse: #6aa585;
    --bs-success-inverse: #ffffff;
    --bs-info-inverse: #ffffff;
    --bs-warning-inverse: #ffffff;
    --bs-danger-inverse: #ffffff;
    --bs-dark-inverse: #0b1f15;

    --bs-white-rgb: 255, 255, 255;
    --bs-light-rgb: 16, 42, 29;
    --bs-primary-rgb: 217, 180, 90;
    --bs-success-rgb: 80, 205, 137;
    --bs-info-rgb: 114, 57, 234;
    --bs-warning-rgb: 255, 199, 0;
    --bs-danger-rgb: 210, 58, 58;
    --bs-dark-rgb: 255, 255, 255;
    --bs-secondary-rgb: 23, 56, 42;

    /* === Textes === */
    --bs-text-muted: #4a8564;
    --bs-text-white: #ffffff;
    --bs-text-primary: #d9b45a;
    --bs-text-secondary: #17382a;
    --bs-text-light: #102a1d;
    --bs-text-success: #50cd89;
    --bs-text-info: #7239ea;
    --bs-text-warning: #ffc700;
    --bs-text-danger: #d23a3a;
    --bs-text-dark: #ffffff;
    --bs-text-purple: #812b9e;
    --bs-text-gold: #EFBF04;
    --bs-text-blue: #6ea8ff;
    --bs-text-orange: #d1714b;

    /* Échelle de texte recalibrée pour rester lisible sur body #102a1d.
       Les --bs-text-gray-N sont indépendantes des --bs-gray-N (backgrounds). */
    --bs-text-gray-100: #17382a;
    --bs-text-gray-200: #21503a;
    --bs-text-gray-300: #4a8564;
    --bs-text-gray-400: #5e9a7a;
    --bs-text-gray-500: #8fbf9f;
    --bs-text-gray-600: #c9bf9c;
    --bs-text-gray-700: #dccfa8;
    --bs-text-gray-800: #f2e8c8;
    --bs-text-gray-900: #ffffff;

    /* === Bordures === */
    --bs-border-color: #102a1d;
    --bs-border-dashed-color: #17382a;

    /* === Composants génériques === */
    --bs-component-active-color: #2d1e05;
    --bs-component-active-bg: #d9b45a;
    --bs-component-hover-color: #d9b45a;
    --bs-component-hover-bg: #0b1f15;
    --bs-component-checked-color: #2d1e05;
    --bs-component-checked-bg: #d9b45a;

    /* === Ombres === */
    --bs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.1);
    --bs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.1);
    --bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.2);

    /* === Inputs === */
    --bs-input-color: var(--bs-gray-700);
    --bs-input-bg: var(--bs-body-bg);
    --bs-input-solid-color: var(--bs-gray-700);
    --bs-input-solid-bg: var(--bs-gray-100);
    --bs-input-solid-bg-focus: var(--bs-gray-200);
    --bs-input-solid-placeholder-color: var(--bs-gray-500);

    /* === Tooltips, tables, dropdowns === */
    --bs-tooltip-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25);
    --bs-card-box-shadow: none;
    --bs-table-striped-bg: rgba(11, 31, 21, 0.75);
    --bs-table-loading-message-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
    --bs-dropdown-bg: #0c2217;
    --bs-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);

    /* === Code === */
    --bs-code-bg: #102a1d;
    --bs-code-box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.1);
    --bs-code-color: #d989ff;

    /* === Symbols, bullets === */
    --bs-symbol-label-color: #e6dab4;
    --bs-symbol-label-bg: #0b1f15;
    --bs-symbol-border-color: rgba(255, 255, 255, 0.5);
    --bs-bullet-bg-color: #21503a;

    /* === ScrollTop === */
    --bs-scrolltop-opacity: 0;
    --bs-scrolltop-opacity-on: 0.3;
    --bs-scrolltop-opacity-hover: 1;
    --bs-scrolltop-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.1);
    --bs-scrolltop-bg-color: #d9b45a;
    --bs-scrolltop-bg-color-hover: #c29d3f;
    --bs-scrolltop-icon-color: #2d1e05;
    --bs-scrolltop-icon-color-hover: #2d1e05;

    /* === Drawers === */
    --bs-drawer-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    --bs-drawer-bg-color: #0c2217;
    --bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.5);

    /* === Menus / sidebar === */
    --bs-menu-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
    --bs-menu-dropdown-bg-color: #0c2217;
    --bs-menu-heading-color: #4a8564;
    --bs-menu-link-color-hover: #d9b45a;
    --bs-menu-link-color-show: #d9b45a;
    --bs-menu-link-color-here: #d9b45a;
    --bs-menu-link-color-active: #d9b45a;
    --bs-menu-link-bg-color-hover: #0b1f15;
    --bs-menu-link-bg-color-show: #0b1f15;
    --bs-menu-link-bg-color-here: #0b1f15;
    --bs-menu-link-bg-color-active: #0b1f15;

    /* === Scrollbars, overlays === */
    --bs-scrollbar-color: #102a1d;
    --bs-scrollbar-hover-color: #17382a;
    --bs-overlay-bg: rgba(255, 255, 255, 0.05);
    --bs-blockui-overlay-bg: rgba(255, 255, 255, 0.05);

    /* === Rating, ribbon === */
    --bs-rating-color-default: #21503a;
    --bs-rating-color-active: #FFAD0F;
    --bs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(255, 255, 255, 0.1);
    --bs-ribbon-label-bg: #d9b45a;
    --bs-ribbon-label-border-color: #a98430;
    --bs-ribbon-clip-bg: #F9F9F9;

    /* === Engage button === */
    --bs-engage-btn-bg: #102a1d;
    --bs-engage-btn-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
    --bs-engage-btn-border-color: #102a1d;
    --bs-engage-btn-color: #e6dab4;
    --bs-engage-btn-icon-color: #6aa585;
    --bs-engage-btn-color-active: #e6dab4;

    /* === Body (fond global de la page) === */
    --bs-body-bg: #102a1d;
    --bs-body-bg-rgb: 16, 42, 29;
    --bs-body-color: #c9bf9c;
    --bs-body-color-rgb: 201, 191, 156;
    --bs-heading-color: #f7e2a1;

    /* === Optionnel : surfaces principales (cards, headers) ===
       Ajuste si tes cards apparaissent transparentes ou mal contrastées */
    --bs-card-bg: #194a33;
    --bs-card-border-color: #21503a;

    /* ============================================================
       Variables LAYOUT spécifiques à Metronic
       (sidebar, header, toolbar, footer, aside)
       ============================================================ */

    /* === Fond global de l'application === */
    --bs-app-bg-color: transparent;
    --bs-app-blank-bg-color: transparent;

    /* === Header (la barre du haut avec "Jeu", "Communauté") === */
    --bs-app-header-base-bg-color: #0c2217;
    --bs-app-header-base-box-shadow: none;
    --bs-app-header-minimize-bg-color: #0c2217;
    --bs-app-header-minimize-box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.1);
    --bs-app-header-light-separator-color: #102a1d;

    /* === Toolbar === */
    --bs-app-toolbar-base-bg-color: #0c2217;
    --bs-app-toolbar-base-box-shadow: none;
    --bs-app-toolbar-base-border-top: 1px dashed #17382a;

    /* === Aside (panneau latéral droit éventuel) === */
    --bs-app-aside-base-bg-color: #0c2217;

    /* === Footer === */
    --bs-app-footer-bg-color: transparent;
    --bs-app-footer-box-shadow: none;

    /* === Sidebar (la colonne de gauche avec OPRPG, avatar, menu) === */
    --bs-app-sidebar-base-toggle-btn-box-shadow: none;
    --bs-app-sidebar-base-toggle-btn-bg-color: #102a1d;
    --bs-app-sidebar-base-toggle-btn-border-color: none;
    --bs-app-sidebar-base-border-color: none;
    --bs-app-sidebar-light-bg-color: #0c2217;
    --bs-app-sidebar-light-box-shadow: none;
    --bs-app-sidebar-light-separator-color: #102a1d;
    --bs-app-sidebar-light-scrollbar-color-hover: #102a1d;
    --bs-app-sidebar-light-menu-heading-color: #4a8564;
    --bs-app-sidebar-light-menu-link-bg-color-active: #1d4531;
    --bs-app-sidebar-light-header-menu-link-bg-color-active: #1d4531;
    --bs-app-sidebar-light-menu-link-color: #e6dab4;
    --bs-app-sidebar-light-menu-link-icon-color: #6aa585;

    /* === Force le fond du body en navy === */
    background-color: var(--bs-body-bg) !important;
}

/* ============================================================
   Règles HORS du bloc principal — sélecteurs composés classiques.
   En thème "noel", on a un fond sombre → on cache les éléments
   destinés au fond clair (logos light, icônes light, etc.)
   et on laisse visibles ceux destinés au fond sombre.
   ============================================================ */

[data-bs-theme="noel"] .theme-light-show {
    display: none !important;
}

[data-bs-theme="noel"] .theme-dark-show {
    display: inline-block !important;
}

[data-bs-theme="noel"] .app-page,
[data-bs-theme="noel"] .app-wrapper {
    border-top: none !important;
}

/* ============================================================
   Force le fond des cards en bleu plus clair que le body.
   Nécessaire car Metronic redéfinit --bs-card-bg directement
   sur .card (style.bundle.css ligne 3806), ce qui écrase
   la valeur héritée du thème.
   ============================================================ */

[data-bs-theme="noel"] .card {
    --bs-card-bg: #194a33;
    background-color: #194a33;
}

/* ============================================================
   Décor de Noël (par-dessus la palette) : polices, fond tricoté, neige,
   liserés dorés, houx et neige sur les cartes, boutons dorés.
   ============================================================ */

[data-bs-theme="noel"] {
    --noel-or-1: #f7e2a1;
    --noel-or-2: #d9b45a;
    --noel-or-3: #9b7424;
    --noel-neige: #fbfdff;
    --noel-houx: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 70'><path d='M38 40C22 38 8 26 6 6c18 0 32 12 32 34z' fill='%232f7a3d' stroke='%23173d1e' stroke-width='2'/><path d='M40 42c18-6 34-2 38 16-20 8-36 0-38-16z' fill='%233a8f49' stroke='%23173d1e' stroke-width='2'/><path d='M36 44C34 56 24 66 8 68c-2-16 10-26 28-24z' fill='%232a6d36' stroke='%23173d1e' stroke-width='2'/><circle cx='38' cy='42' r='7.5' fill='%23c8202b' stroke='%236e0b14' stroke-width='1.5'/><circle cx='49' cy='46' r='6.5' fill='%23d92a35' stroke='%236e0b14' stroke-width='1.5'/><circle cx='42' cy='52' r='6' fill='%23bd1c27' stroke='%236e0b14' stroke-width='1.5'/></svg>");
}

/* Fond : tricot rouge et vert, halo doré en haut. Posé sur un calque fixe qui couvre toujours tout l'écran :
   un fond sur le body s'arrête à la hauteur du body et se coupe sur les pages longues (et `fixed` est ignoré sur iOS). */
[data-bs-theme="noel"]::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(255, 214, 120, 0.10), transparent 55%),
        repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 7px),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 7px),
        linear-gradient(115deg, #0b2418 0%, #123222 38%, #3a1118 52%, #0f2b1d 70%, #0a1f15 100%);
}
[data-bs-theme="noel"] body { background: transparent !important; }

/* Neige qui tombe (CSS seul, derrière le contenu) */
[data-bs-theme="noel"] body::before {
    content: ''; position: fixed; inset: -100px 0 0 0; z-index: 0; pointer-events: none; opacity: .8;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(1.6px 1.6px at 90px 120px, #fff, transparent),
        radial-gradient(2.4px 2.4px at 160px 60px, #fff, transparent),
        radial-gradient(1.4px 1.4px at 230px 180px, #fff, transparent),
        radial-gradient(2px 2px at 300px 100px, #fff, transparent);
    background-size: 340px 240px;
    animation: noel-neige 18s linear infinite;
}
@keyframes noel-neige { to { transform: translateY(240px); } }
@media (prefers-reduced-motion: reduce) { [data-bs-theme="noel"] body::before { animation: none; } }

/* Titres : mêmes polices que le thème classique, seule la couleur change */
[data-bs-theme="noel"] .card-header h1, [data-bs-theme="noel"] .card-header h2, [data-bs-theme="noel"] .card-header h3, [data-bs-theme="noel"] .card-header .card-label {
    color: var(--noel-or-1);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}

/* En-tête : liseré doré et neige en dessous */
[data-bs-theme="noel"] #kt_app_header {
    background: linear-gradient(180deg, rgba(8, 26, 18, .96), rgba(10, 32, 22, .92)) !important;
    border-bottom: 1px solid rgba(217, 180, 90, .4);
    box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .5);
}
[data-bs-theme="noel"] #kt_app_header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none; opacity: .85;
    background: radial-gradient(circle at 6px 0, var(--noel-neige) 4px, transparent 5px) 0 0 / 22px 6px repeat-x;
}

/* Menu latéral : liseré doré */
[data-bs-theme="noel"] #kt_app_sidebar { border-right: 1px solid rgba(217, 180, 90, .4); }

/* Cartes : cadre vert, liseré doré ; houx dans l'angle et neige en bas seulement sur les grandes cartes (classe noel-deco, src/lib/decorNoel.js) */
[data-bs-theme="noel"] .card {
    position: relative;
    border: 1px solid rgba(217, 180, 90, .45);
    background: linear-gradient(160deg, rgba(25, 70, 46, .93), rgba(11, 36, 24, .95)) !important;
    box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
}
[data-bs-theme="noel"] .card.noel-deco:not(.card-flush)::after {
    content: ''; position: absolute; left: -2px; right: -2px; bottom: -8px; height: 13px; pointer-events: none; z-index: 2;
    background:
        radial-gradient(ellipse 34px 10px at 7% 40%, var(--noel-neige) 70%, transparent 72%),
        radial-gradient(ellipse 22px 8px at 14% 55%, var(--noel-neige) 70%, transparent 72%),
        radial-gradient(ellipse 46px 10px at 93% 45%, var(--noel-neige) 70%, transparent 72%);
}
[data-bs-theme="noel"] .card.noel-deco:not(.card-flush)::before {
    content: ''; position: absolute; left: -10px; top: -14px; width: 56px; height: 50px; z-index: 3; pointer-events: none;
    background: var(--noel-houx) center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
}

/* Boutons principaux : or en relief */
[data-bs-theme="noel"] .btn.btn-primary {
    border: 1px solid var(--noel-or-3); color: #3a2606;
    background: linear-gradient(180deg, #f3d98f, #c79a3d 55%, #a87b25);
    box-shadow: 0 .2rem 0 #6c4c12, 0 .5rem .8rem rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55);
}
[data-bs-theme="noel"] .btn.btn-primary:hover, [data-bs-theme="noel"] .btn.btn-primary:focus { filter: brightness(1.06); color: #3a2606; }
[data-bs-theme="noel"] .btn.btn-primary:active { transform: translateY(2px); box-shadow: 0 .05rem 0 #6c4c12, 0 .3rem .6rem rgba(0, 0, 0, .45); }

/* Champs : fond sombre, liseré doré discret */
[data-bs-theme="noel"] .form-control, [data-bs-theme="noel"] .form-select {
    background-color: rgba(3, 14, 9, .7); border: 1px solid rgba(217, 180, 90, .25); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
}
[data-bs-theme="noel"] .form-control:focus, [data-bs-theme="noel"] .form-select:focus { border-color: var(--noel-or-2); }
[data-bs-theme="noel"] .form-label { color: var(--noel-or-2); font-weight: 700; }

/* Liens */
[data-bs-theme="noel"] a:not(.btn):not(.menu-link):not(.nav-link) { color: var(--noel-or-2); }