/* ==========================================================================
 * ESSIA ERP — theme.css
 * --------------------------------------------------------------------------
 * Fichier NEUF. Ne remplace rien : il se charge APRES css/style.css et se
 * contente de (re)definir des variables CSS selon l'attribut `data-theme`
 * pose sur <html> par js/theme.js.
 *
 *   sombre   — DEFAUT. Reprend a l'identique les valeurs de css/var.css :
 *              un utilisateur qui ne touche a rien ne voit AUCUN changement.
 *   clair    — fond gris tres clair, cartes blanches (videoprojecteur/reunion)
 *   couleur  — base claire + bleu ESSIA soutenu, degrade d'en-tete
 *
 * Palette reprise telle quelle de :
 *   erp-work/elsa-equipe/src/index.css  (choix de Dominique : « couleur »)
 *
 * Deux jeux de variables coexistent volontairement :
 *   1. les noms « elsa »   (--fond, --texte, --accent, --surface, ...)
 *      => a utiliser dans tout code NEUF et dans les blocs <style> repris
 *   2. les noms HISTORIQUES de css/var.css (--background_tile, --text_color,
 *      --glass-grad, ...) => remappes ici pour chaque theme. C'est ce qui
 *      permet aux ~93 pages qui n'utilisent que css/style.css de suivre le
 *      theme SANS etre modifiees une par une.
 * ========================================================================== */


/* ==========================================================================
 * 1. THEME SOMBRE — defaut, strictement identique a l'existant
 * ========================================================================== */
:root,
html[data-theme='sombre'] {
    /* --- Palette semantique (elsa) --- */
    --fond: #060f1c;
    --fond-panneau: #0a1c2e;
    --surface: #0d2033;
    --surface-haute: #122b44;
    --surface-haute-2: #17324e;
    --surface-creuse: #081726;

    --bordure: #1e3a5c;
    --bordure-forte: #35688f;
    --bordure-douce: #16304d;

    --texte: #e8eef6;
    --texte-doux: #dce7f3;
    --texte-attenue: #9db0c8;
    --texte-attenue-2: #8ba3bf;
    --texte-faible: #6c8199;

    --accent: #3b8fd8;
    --accent-vif: #4ea0e8;
    --accent-clair: #8cc3f0;
    --accent-tres-clair: #cfe3f7;
    --sur-accent: #ffffff;
    --accent-fond: rgba(59, 143, 216, 0.1);
    --accent-bordure: rgba(59, 143, 216, 0.5);

    --ombre-carte: none;

    --succes: #10b981;
    --succes-vif: #34d399;
    --sur-succes: #060f1c;
    --succes-texte: #6ee7b7;
    --succes-fond: rgba(16, 185, 129, 0.1);
    --succes-bordure: rgba(16, 185, 129, 0.4);

    --danger: #c0392b;
    --danger-texte: #fca5a5;
    --danger-fond: rgba(239, 68, 68, 0.15);
    --danger-bordure: rgba(239, 68, 68, 0.5);

    --ambre: #f59e0b;
    --ambre-texte: #fcd34d;

    --lien: #7fdbff;

    /* Selecteur de theme */
    --selecteur-fond: #0d2033;
    --selecteur-bordure: #1e3a5c;
    --selecteur-texte: #8ba3bf;
    --selecteur-actif-fond: #1d4468;
    --selecteur-actif-texte: #e8eef6;

    --defilement: #24425f;

    /* --- Remap des variables HISTORIQUES de css/var.css ------------------
       Valeurs recopiees a l'identique : aucun changement visuel.        --- */
    --nb-50:  #dbe6fa;
    --nb-100: #aec6ee;
    --nb-200: #7c9fdb;
    --nb-300: #5278bd;
    --nb-400: #3a5b98;
    --nb-500: #2e497b;
    --nb-600: #243a64;
    --nb-700: #1c2e51;
    --nb-800: #152540;
    --nb-900: #0f1a31;

    --accent-cyan:   #4fc3f7;
    --accent-cyan-2: #7fdbff;
    --accent-blue:   #3b82f6;
    --accent-blue-2: #5b9bf5;
    --accent-green:  #3ec07b;
    --accent-orange: #e0a840;
    --accent-red:    #e06060;
    --accent-purple: #5278bd;

    --bg-gradient:
        radial-gradient(115% 80% at 72% 8%,  rgba(70,120,200,0.10) 0%, transparent 55%),
        radial-gradient(100% 90% at 18% 105%, rgba(48,88,160,0.08) 0%, transparent 60%),
        linear-gradient(150deg, #0b1526 0%, #070e1c 48%, #04080f 100%);

    --glass-grad:        linear-gradient(160deg, rgba(58,84,138,0.20) 0%, rgba(20,34,64,0.34) 100%);
    --glass-grad-strong: linear-gradient(160deg, rgba(62,92,150,0.26) 0%, rgba(18,32,60,0.48) 100%);
    --glass-grad-light:  linear-gradient(160deg, rgba(58,84,138,0.12) 0%, rgba(20,34,64,0.20) 100%);
    --glass-grad-hover:  linear-gradient(160deg, rgba(74,110,178,0.28) 0%, rgba(24,40,74,0.42) 100%);

    --glass-blur: 16px;
    --glass-border:       rgba(255,255,255,0.08);
    --glass-border-hover: rgba(79,195,247,0.45);
    --glass-shadow:       0 6px 26px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
    --glass-shadow-hover: 0 10px 36px rgba(0,0,0,0.34), 0 0 30px rgba(79,195,247,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
    --glow-cyan:          0 0 18px rgba(79,195,247,0.18);

    --background_body_1: #0c1730;
    --background_body_2: #0f1b36;
    --background_body_mobile: #0a1326;

    --glass-bg:        var(--glass-grad);
    --glass-bg-light:  var(--glass-grad-light);
    --glass-bg-strong: var(--glass-grad-strong);

    --background_bar:        rgba(16,26,48,0.78);
    --background_logo:       rgba(255,255,255,0.92);
    --background_menu:       rgba(16,26,48,0.92);
    --background_tile:       var(--glass-grad);
    --background_tile_light: var(--glass-grad-light);
    --background_table:      rgba(40,64,118,0.22);
    --background_topic:      rgba(40,64,118,0.32);
    --background_context:    rgba(16,26,48,0.92);
    --background_range:      rgba(56,90,156,0.40);
    --background_topic_active: #2f6fbf;
    --background_topic_hover:  rgba(56,90,156,0.45);
    --background_topic_on:     rgba(56,90,156,0.45);

    --text_color:           #ffffff;
    --text_color_gray:      #c6d6ec;
    --text_color_gray_dark: #8497ba;

    --notif_success: #3ec07b;
    --notif_warning: #e0a840;
    --notif_info:    #2a80d4;
    --notif_alert:   #e06060;
    --notif_success_hover: #2a9a5a;
    --notif_warning_hover: #b08030;
    --notif_info_hover:    #1a60b0;
    --notif_alert_hover:   #b04848;

    --background_table1: rgba(80,130,200,0.05);
    --background_table2: rgba(80,130,200,0.05);
    --background_table3: rgba(80,130,200,0.10);

    --font_success: #3ec07b;
    --font_warning: #e0a840;
    --font_alert:   #e06060;
    --font_purple:  #7c9fdb;
    --font_mobile_menu: #4fc3f7;

    --icon:            rgba(255,255,255,0.85);
    --icon_light:      rgba(190,210,240,0.9);
    --background_icon: rgba(16,26,48,0.55);

    --background_posts: rgba(44,68,120,0.30);

    --neon-blue:        rgba(79,195,247,0.55);
    --neon-blue-bright: #7fdbff;
    --neon-glow:        rgba(79,195,247,0.15);
}


/* ==========================================================================
 * 2. THEME CLAIR
 * ========================================================================== */
html[data-theme='clair'] {
    --fond: #f3f5f8;
    --fond-panneau: #ffffff;
    --surface: #ffffff;
    --surface-haute: #eaeff6;
    --surface-haute-2: #dde6f1;
    --surface-creuse: #ffffff;

    --bordure: #d2dae4;
    --bordure-forte: #8ea3ba;
    --bordure-douce: #e5eaf0;

    --texte: #111a24;
    --texte-doux: #1c2733;
    --texte-attenue: #43566a;
    --texte-attenue-2: #4b5e73;
    --texte-faible: #566a7f;

    --accent: #14639f;
    --accent-vif: #0f5288;
    --accent-clair: #14639f;
    --accent-tres-clair: #0e4570;
    --sur-accent: #ffffff;
    --accent-fond: rgba(20, 99, 159, 0.09);
    --accent-bordure: rgba(20, 99, 159, 0.4);

    --ombre-carte: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);

    --succes: #15803d;
    --succes-vif: #166534;
    --sur-succes: #ffffff;
    --succes-texte: #11532a;
    --succes-fond: #e4f5ea;
    --succes-bordure: #7ec99b;

    --danger: #a51616;
    --danger-texte: #a51616;
    --danger-fond: #fbe3e3;
    --danger-bordure: #e3a0a0;

    --ambre: #b45309;
    --ambre-texte: #8a4008;

    --lien: #0f5288;

    --selecteur-fond: #ffffff;
    --selecteur-bordure: #d2dae4;
    --selecteur-texte: #4b5e73;
    --selecteur-actif-fond: #14639f;
    --selecteur-actif-texte: #ffffff;

    --defilement: #b7c3d1;

    /* --- Remap des variables historiques --- */
    --nb-50:  #0e4570;
    --nb-100: #14639f;
    --nb-200: #2f7fb8;
    --nb-300: #6fa5cd;
    --nb-400: #9cbcd7;
    --nb-500: #c3d3e4;
    --nb-600: #dde6f1;
    --nb-700: #eaeff6;
    --nb-800: #f3f5f8;
    --nb-900: #ffffff;

    --accent-cyan:   #14639f;
    --accent-cyan-2: #0e4570;
    --accent-blue:   #14639f;
    --accent-blue-2: #0f5288;
    --accent-green:  #15803d;
    --accent-orange: #b45309;
    --accent-red:    #a51616;
    --accent-purple: #6d3fa0;

    --bg-gradient:
        radial-gradient(115% 80% at 72% 8%,  rgba(20,99,159,0.06) 0%, transparent 55%),
        radial-gradient(100% 90% at 18% 105%, rgba(20,99,159,0.05) 0%, transparent 60%),
        linear-gradient(150deg, #ffffff 0%, #f3f5f8 48%, #eaeff6 100%);

    --glass-grad:        linear-gradient(160deg, #ffffff 0%, #f7f9fc 100%);
    --glass-grad-strong: linear-gradient(160deg, #ffffff 0%, #eaeff6 100%);
    --glass-grad-light:  linear-gradient(160deg, #ffffff 0%, #fbfcfe 100%);
    --glass-grad-hover:  linear-gradient(160deg, #f4f8fc 0%, #e6eef7 100%);

    --glass-blur: 0px;
    --glass-border:       #d2dae4;
    --glass-border-hover: #14639f;
    --glass-shadow:       0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.08);
    --glass-shadow-hover: 0 2px 6px rgba(16,24,40,0.10), 0 6px 18px rgba(16,24,40,0.10);
    --glow-cyan:          0 0 0 1px rgba(20,99,159,0.25);

    --background_body_1: #f3f5f8;
    --background_body_2: #ffffff;
    --background_body_mobile: #f3f5f8;

    --glass-bg:        var(--glass-grad);
    --glass-bg-light:  var(--glass-grad-light);
    --glass-bg-strong: var(--glass-grad-strong);

    --background_bar:        rgba(255,255,255,0.94);
    --background_logo:       #ffffff;
    --background_menu:       #ffffff;
    --background_tile:       var(--glass-grad);
    --background_tile_light: var(--glass-grad-light);
    --background_table:      #ffffff;
    --background_topic:      #eaeff6;
    --background_context:    #ffffff;
    --background_range:      #c3d3e4;
    --background_topic_active: #14639f;
    --background_topic_hover:  #dde6f1;
    --background_topic_on:     #dde6f1;

    --text_color:           #111a24;
    --text_color_gray:      #43566a;
    --text_color_gray_dark: #566a7f;

    --notif_success: #15803d;
    --notif_warning: #b45309;
    --notif_info:    #14639f;
    --notif_alert:   #a51616;
    --notif_success_hover: #0f5f2d;
    --notif_warning_hover: #8a4008;
    --notif_info_hover:    #0f5288;
    --notif_alert_hover:   #7f1010;

    --background_table1: #ffffff;
    --background_table2: #f6f8fb;
    --background_table3: #eaeff6;

    --font_success: #15803d;
    --font_warning: #8a4008;
    --font_alert:   #a51616;
    --font_purple:  #6d3fa0;
    --font_mobile_menu: #14639f;

    --icon:            rgba(17,26,36,0.85);
    --icon_light:      rgba(67,86,106,0.9);
    --background_icon: #eaeff6;

    --background_posts: #f3f5f8;

    --neon-blue:        rgba(20,99,159,0.45);
    --neon-blue-bright: #0e4570;
    --neon-glow:        rgba(20,99,159,0.12);
}


/* ==========================================================================
 * 3. THEME COULEUR — le choix de Dominique
 * ========================================================================== */
html[data-theme='couleur'] {
    --fond: #f2f4f9;
    --fond-panneau: #ffffff;
    --surface: #ffffff;
    --surface-haute: #e9eef7;
    --surface-haute-2: #dbe4f2;
    --surface-creuse: #ffffff;

    --bordure: #d3d9e6;
    --bordure-forte: #8b9cba;
    --bordure-douce: #e4e8f1;

    --texte: #0f1520;
    --texte-doux: #1b2434;
    --texte-attenue: #414f66;
    --texte-attenue-2: #495772;
    --texte-faible: #55637d;

    --accent: #1358b0;
    --accent-vif: #0d4794;
    --accent-clair: #1358b0;
    --accent-tres-clair: #0b3c7c;
    --sur-accent: #ffffff;
    --accent-fond: rgba(19, 88, 176, 0.1);
    --accent-bordure: rgba(19, 88, 176, 0.42);

    --ombre-carte: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.07);

    --succes: #12703a;
    --succes-vif: #0d5a2e;
    --sur-succes: #ffffff;
    --succes-texte: #0d4a26;
    --succes-fond: #e1f4e8;
    --succes-bordure: #74c294;

    --danger: #9d1515;
    --danger-texte: #9d1515;
    --danger-fond: #fbe1e1;
    --danger-bordure: #e09a9a;

    --ambre: #a8500a;
    --ambre-texte: #7d3b07;

    --lien: #0d4794;

    /* Degrade d'en-tete propre au theme « couleur » */
    --entete-fond: linear-gradient(100deg, #0f3357 0%, #1c5da6 58%, #2f7fb8 100%);
    --entete-texte: #ffffff;
    --entete-texte-attenue: #cadeef;

    --selecteur-fond: #ffffff;
    --selecteur-bordure: #d3d9e6;
    --selecteur-texte: #495772;
    --selecteur-actif-fond: #1358b0;
    --selecteur-actif-texte: #ffffff;

    --defilement: #b4bfd2;

    /* --- Remap des variables historiques --- */
    --nb-50:  #0b3c7c;
    --nb-100: #1358b0;
    --nb-200: #2f7fb8;
    --nb-300: #6ea3d4;
    --nb-400: #9bbadd;
    --nb-500: #c2d1e8;
    --nb-600: #dbe4f2;
    --nb-700: #e9eef7;
    --nb-800: #f2f4f9;
    --nb-900: #ffffff;

    --accent-cyan:   #1358b0;
    --accent-cyan-2: #0b3c7c;
    --accent-blue:   #1358b0;
    --accent-blue-2: #0d4794;
    --accent-green:  #12703a;
    --accent-orange: #a8500a;
    --accent-red:    #9d1515;
    --accent-purple: #6a3aa5;

    --bg-gradient:
        radial-gradient(115% 80% at 72% 8%,  rgba(19,88,176,0.08) 0%, transparent 55%),
        radial-gradient(100% 90% at 18% 105%, rgba(47,127,184,0.07) 0%, transparent 60%),
        linear-gradient(150deg, #ffffff 0%, #f2f4f9 48%, #e9eef7 100%);

    --glass-grad:        linear-gradient(160deg, #ffffff 0%, #f4f7fc 100%);
    --glass-grad-strong: linear-gradient(160deg, #ffffff 0%, #e9eef7 100%);
    --glass-grad-light:  linear-gradient(160deg, #ffffff 0%, #fbfcfe 100%);
    --glass-grad-hover:  linear-gradient(160deg, #eef4fc 0%, #dfe9f8 100%);

    --glass-blur: 0px;
    --glass-border:       #d3d9e6;
    --glass-border-hover: #1358b0;
    --glass-shadow:       0 1px 2px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.07);
    --glass-shadow-hover: 0 2px 8px rgba(15,23,42,0.10), 0 8px 22px rgba(15,23,42,0.10);
    --glow-cyan:          0 0 0 1px rgba(19,88,176,0.25);

    --background_body_1: #f2f4f9;
    --background_body_2: #ffffff;
    --background_body_mobile: #f2f4f9;

    --glass-bg:        var(--glass-grad);
    --glass-bg-light:  var(--glass-grad-light);
    --glass-bg-strong: var(--glass-grad-strong);

    --background_bar:        var(--entete-fond);
    --background_logo:       #ffffff;
    --background_menu:       #ffffff;
    --background_tile:       var(--glass-grad);
    --background_tile_light: var(--glass-grad-light);
    --background_table:      #ffffff;
    --background_topic:      #e9eef7;
    --background_context:    #ffffff;
    --background_range:      #c2d1e8;
    --background_topic_active: #1358b0;
    --background_topic_hover:  #dbe4f2;
    --background_topic_on:     #dbe4f2;

    --text_color:           #0f1520;
    --text_color_gray:      #414f66;
    --text_color_gray_dark: #55637d;

    --notif_success: #12703a;
    --notif_warning: #a8500a;
    --notif_info:    #1358b0;
    --notif_alert:   #9d1515;
    --notif_success_hover: #0d5a2e;
    --notif_warning_hover: #7d3b07;
    --notif_info_hover:    #0d4794;
    --notif_alert_hover:   #7a1010;

    --background_table1: #ffffff;
    --background_table2: #f5f8fc;
    --background_table3: #e9eef7;

    --font_success: #12703a;
    --font_warning: #7d3b07;
    --font_alert:   #9d1515;
    --font_purple:  #6a3aa5;
    --font_mobile_menu: #1358b0;

    --icon:            rgba(15,21,32,0.85);
    --icon_light:      rgba(65,79,102,0.9);
    --background_icon: #e9eef7;

    --background_posts: #f2f4f9;

    --neon-blue:        rgba(19,88,176,0.45);
    --neon-blue-bright: #0b3c7c;
    --neon-glow:        rgba(19,88,176,0.12);
}


/* ==========================================================================
 * 4. SURCHARGES GLOBALES GENERIQUES
 * --------------------------------------------------------------------------
 * Volontairement portees par `html:is([data-theme='clair'],[data-theme='couleur'])`
 * et NON par `html` tout court : en theme sombre, aucune regle supplementaire
 * ne s'applique, donc l'ERP rend exactement comme aujourd'hui. C'est la
 * garantie demandee (« rien ne change pour qui n'y touche pas »).
 * ========================================================================== */

/* Contre-regle body SUPPRIMEE le 06/08 (lot 5) : style.css utilise desormais
 * var(--erp-body-texte). --text_color et --texte sont identiques dans les deux
 * palettes claires (#111a24 / #0f1520) : aucun changement de rendu. */

html:is([data-theme='clair'], [data-theme='couleur']) .card,
html:is([data-theme='clair'], [data-theme='couleur']) .tile,
html:is([data-theme='clair'], [data-theme='couleur']) .panel,
html:is([data-theme='clair'], [data-theme='couleur']) .bg_total {
    background: var(--surface);
    color: var(--texte);
    border-color: var(--bordure);
    box-shadow: var(--ombre-carte);
}

html:is([data-theme='clair'], [data-theme='couleur']) table {
    color: var(--texte);
    border-color: var(--bordure);
}
html:is([data-theme='clair'], [data-theme='couleur']) table th {
    color: var(--texte-doux);
    border-color: var(--bordure);
}
html:is([data-theme='clair'], [data-theme='couleur']) table td {
    border-color: var(--bordure-douce);
}

html:is([data-theme='clair'], [data-theme='couleur']) input,
html:is([data-theme='clair'], [data-theme='couleur']) select,
html:is([data-theme='clair'], [data-theme='couleur']) textarea {
    background-color: var(--surface);
    color: var(--texte);
    border-color: var(--bordure);
}
html:is([data-theme='clair'], [data-theme='couleur']) select option {
    /* css/style.css ligne 2218 force un bleu nuit en !important */
    background: var(--surface) !important;
    color: var(--texte) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) input::placeholder,
html:is([data-theme='clair'], [data-theme='couleur']) textarea::placeholder {
    color: var(--texte-faible);
    opacity: 1;
}
html:is([data-theme='clair'], [data-theme='couleur']) input:focus,
html:is([data-theme='clair'], [data-theme='couleur']) select:focus,
html:is([data-theme='clair'], [data-theme='couleur']) textarea:focus {
    outline: 2px solid var(--accent-bordure);
    outline-offset: 1px;
}

html:is([data-theme='clair'], [data-theme='couleur']) button {
    color: var(--texte);
}

html:is([data-theme='clair'], [data-theme='couleur']) a {
    color: var(--lien);
}

/* Les icones images de l'ERP sont blanchies par `filter: invert(100%)` :
   sur fond clair il faut au contraire les laisser noires. */
html:is([data-theme='clair'], [data-theme='couleur']) .icon_color {
    filter: none;
    -webkit-filter: none;
}

/* Texte clair force en dur dans css/style.css (menu contextuel).
   05/08/2026 lot 2 : .tk-hello, .tk-line et .tk-empty sont SORTIS de cette regle.
   Ils consomment desormais --erp-tk-titre / --erp-tk-ligne / --erp-tk-vide
   (theme.css 9.3). Le !important les ecrasait et rendait le titre « Bonjour X »
   delave (--texte-faible #566a7f). Signale par une capture de Dominique. */
html:is([data-theme='clair'], [data-theme='couleur']) .context_menu_item {
    color: var(--texte-faible) !important;
}

html:is([data-theme='clair'], [data-theme='couleur']) * {
    scrollbar-color: var(--defilement) transparent;
}


/* ==========================================================================
 * 5. SELECTEUR DE THEME (compose par js/theme.js)
 * ========================================================================== */
.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--selecteur-fond);
    border: 1px solid var(--selecteur-bordure);
    vertical-align: middle;
    line-height: 1;
}

.theme-switch__btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: var(--selecteur-texte);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

.theme-switch__btn:hover {
    color: var(--selecteur-actif-texte);
    background: color-mix(in srgb, var(--selecteur-actif-fond) 45%, transparent);
}

.theme-switch__btn[aria-pressed='true'] {
    background: var(--selecteur-actif-fond);
    color: var(--selecteur-actif-texte);
}

.theme-switch__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}


/* ==========================================================================
 * 6. CORRECTIFS — regles « en dur + !important » de css/style.css
 * --------------------------------------------------------------------------
 * css/style.css contient une trentaine de declarations `color:#fff !important`
 * / `background: rgba(...) !important` qui ignorent completement les
 * variables. Elles rendent les deux themes clairs illisibles tant qu'on ne
 * les neutralise pas. Ce bloc les reprend UNE PAR UNE, avec le numero de
 * ligne d'origine, et uniquement pour les themes clairs — le theme sombre
 * n'est jamais touche.
 *
 * NOTE : c'est une rustine. Le correctif propre est de reecrire ces regles
 * dans css/style.css pour qu'elles consomment les variables. Tant que ce
 * n'est pas fait, toute nouvelle regle `!important` en dur ajoutee a
 * style.css cassera a nouveau les themes clairs.
 * ========================================================================== */

/* style.css:2361 — .font_Title, .title { color:#fff !important } */
/* Contre-regle .font_Title/.title SUPPRIMEE le 06/08 (lot 5) : style.css utilise
 * desormais var(--erp-titre), qui vaut var(--texte) en clair. */

/* style.css:2362 — titres de bloc : halo cyan illisible sur fond clair */
html:is([data-theme='clair'], [data-theme='couleur']) .bg_total .title.font_Title,
html:is([data-theme='clair'], [data-theme='couleur']) .bg_total_light .title.font_Title {
    color: var(--accent-tres-clair) !important;
    text-shadow: none !important;
    border-bottom-color: var(--bordure);
}

/* style.css:2205-2217 — champs de formulaire (fond bleu nuit + texte blanc) */
html:is([data-theme='clair'], [data-theme='couleur']) .form_input_di,
html:is([data-theme='clair'], [data-theme='couleur']) .form_input,
html:is([data-theme='clair'], [data-theme='couleur']) .form_input_flex,
html:is([data-theme='clair'], [data-theme='couleur']) .form_input_text,
html:is([data-theme='clair'], [data-theme='couleur']) input[type="text"],
html:is([data-theme='clair'], [data-theme='couleur']) input[type="date"],
html:is([data-theme='clair'], [data-theme='couleur']) input[type="time"],
html:is([data-theme='clair'], [data-theme='couleur']) input[type="password"],
html:is([data-theme='clair'], [data-theme='couleur']) input[type="email"],
html:is([data-theme='clair'], [data-theme='couleur']) input[type="number"],
html:is([data-theme='clair'], [data-theme='couleur']) input[type="search"],
html:is([data-theme='clair'], [data-theme='couleur']) input[type="tel"],
html:is([data-theme='clair'], [data-theme='couleur']) textarea,
html:is([data-theme='clair'], [data-theme='couleur']) select {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--bordure) !important;
    color: var(--texte) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) ::placeholder {
    color: var(--texte-faible);
}

/* style.css:2331-2340 — tableaux .tableau */
html:is([data-theme='clair'], [data-theme='couleur']) table.tableau {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--bordure);
}
html:is([data-theme='clair'], [data-theme='couleur']) table.tableau th {
    background: var(--surface-haute) !important;
    color: var(--texte) !important;
    border-bottom-color: var(--bordure);
    box-shadow: none;
}
html:is([data-theme='clair'], [data-theme='couleur']) table.tableau td {
    /* color retiree le 06/08 (lot 5) : portee par var(--erp-tbl-cellule). */
    border-bottom-color: var(--bordure-douce);
}
html:is([data-theme='clair'], [data-theme='couleur']) table.tableau tr:nth-child(even) {
    background: var(--background_table2);
}
html:is([data-theme='clair'], [data-theme='couleur']) table.tableau tr:hover {
    background: var(--accent-fond) !important;
}

/* style.css:2246-2251 — tuiles/boutons « verre » : le flou fonce le fond clair */
html:is([data-theme='clair'], [data-theme='couleur']) .dash_toggle,
html:is([data-theme='clair'], [data-theme='couleur']) .tile_menu1,
html:is([data-theme='clair'], [data-theme='couleur']) .tile_menu2,
html:is([data-theme='clair'], [data-theme='couleur']) .bg_total,
html:is([data-theme='clair'], [data-theme='couleur']) .bg_total_light {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--bordure) !important;
}

/* style.css:2394-2395 — menu contextuel */
html:is([data-theme='clair'], [data-theme='couleur']) .context_menu {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: var(--bordure) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) .context_menu_item {
    color: var(--texte) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) .context_menu_item:hover {
    background: var(--accent-fond) !important;
    color: var(--texte) !important;
}

/* style.css:2555-2570 — widgets « tk » du tableau de bord technicien */
html:is([data-theme='clair'], [data-theme='couleur']) .tk-card {
    background: var(--surface) !important;
    border-color: var(--bordure) !important;
    box-shadow: var(--ombre-carte) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) .tk-line {
    border-bottom-color: var(--bordure-douce) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) .stock_low_table {
    color: var(--texte) !important;
}

/* style.css:2200-2202 — barre superieure : le liseré cyan reste, adouci */
html:is([data-theme='clair'], [data-theme='couleur']) .bar_top,
html:is([data-theme='clair'], [data-theme='couleur']) .top_bar {
    box-shadow: var(--ombre-carte) !important;
}

/* style.css:2523-2526 — icones raccourcis du tableau de bord :
   `color:#e9eefb !important` => glyphes blancs invisibles sur tuile claire. */
html:is([data-theme=clair], [data-theme=couleur]) .dash_container_icons .fa_icon,
html:is([data-theme=clair], [data-theme=couleur]) #icon_post,
html:is([data-theme=clair], [data-theme=couleur]) #icon_planning,
html:is([data-theme=clair], [data-theme=couleur]) #icon_create_planning,
html:is([data-theme=clair], [data-theme=couleur]) #icon_create_send_planning,
html:is([data-theme=clair], [data-theme=couleur]) #icon_create_timekeeping,
html:is([data-theme=clair], [data-theme=couleur]) #icon_list_stock,
html:is([data-theme=clair], [data-theme=couleur]) #icon_create_stock_batch,
html:is([data-theme=clair], [data-theme=couleur]) #icon_create_fast_ri {
    color: var(--accent-tres-clair) !important;
}
html:is([data-theme=clair], [data-theme=couleur]) .dash_container_icons .tooltip_icon:hover .fa_icon {
    color: var(--accent) !important;
}
/* Icones generiques (menu, boutons) heritant de --icon */
html:is([data-theme=clair], [data-theme=couleur]) .fa_icon,
html:is([data-theme=clair], [data-theme=couleur]) .fa_icon_like {
    color: var(--accent-tres-clair) !important;
}


/* ==========================================================================
 * 7. WIDGET ELSA (assistante IA)
 * --------------------------------------------------------------------------
 * Ajout du 03/08/2026. Ne modifie aucune des 3 palettes de base : cette
 * section ne fait que DEFINIR des variables supplementaires, prefixees
 * `--elsa-`, consommees par :
 *
 *   - chat_essiahub.php  (la page/iframe de discussion elle-meme). Elle
 *     redefinit ces memes variables dans son propre <style> avec les valeurs
 *     « sombre » : c'est un filet de securite si theme.css n'est pas charge.
 *     Les blocs html[data-theme='clair'] / ['couleur'] ci-dessous ont une
 *     specificite superieure a un `:root`, ils gagnent donc quel que soit
 *     l'ordre de chargement.
 *
 *   - functions.php, fonction Affichage_Menu() : le bouton flottant
 *     #elsaToggle et le panneau #elsaPanel. Ces styles sont en ligne, avec
 *     des valeurs de repli identiques aux couleurs historiques : sur les
 *     pages qui ne chargent pas encore theme.css, rien ne change.
 *
 * SYNCHRONISATION : le widget n'a volontairement AUCUN selecteur de theme.
 * chat_essiahub.php charge js/theme.js (localStorage['erp-theme']) puis
 * s'aligne en plus sur l'attribut data-theme du document parent
 * (iframe de meme origine) via un MutationObserver, et accepte un
 * postMessage {type:'erp-theme'} emis par functions.php.
 *
 * ATTENTION : les valeurs « sombre » ci-dessous sont dupliquees dans le
 * <style> de chat_essiahub.php. Toute modification doit etre faite aux deux
 * endroits, sinon le theme sombre derive.
 * ========================================================================== */

/* --- 7.1 Theme SOMBRE : valeurs historiques, a l'identique --------------- */
:root,
html[data-theme='sombre'] {
    /* Page Elsa */
    --elsa-fond: linear-gradient(160deg,#0b1526,#04080f);
    --elsa-texte: #e8eef7;
    --elsa-texte-attenue: #9fb3cc;

    --elsa-topbar-fond: rgba(255,255,255,.03);
    --elsa-topbar-bordure: rgba(79,195,247,.25);
    --elsa-badge-bordure: rgba(255,255,255,.12);

    /* 04/08/2026 — lisibilite. #2e8b57 + #fff (bouton « Envoyer », pastille
       ELSA, cases a cocher) = 4,25:1, sous les 4,5:1 de WCAG 1.4.3. Assombri
       a #2a7d4e (meme teinte 146 deg, meme saturation, luminosite HSL 36 % ->
       32 %) -> 5,07:1. Valeur DUPLIQUEE dans le :root de chat_essiahub.php :
       toute modification doit etre faite AUX DEUX ENDROITS. */
    --elsa-marque: #2a7d4e;
    --elsa-sur-marque: #fff;

    --elsa-lien: #4fc3f7;

    --elsa-bulle-moi-fond: #4fc3f7;
    --elsa-bulle-moi-texte: #04121f;
    --elsa-bulle-ia-fond: rgba(255,255,255,.07);
    --elsa-bulle-ia-bordure: rgba(255,255,255,.10);

    --elsa-champ-fond: rgba(255,255,255,.05);
    --elsa-champ-texte: #fff;
    --elsa-champ-bordure: rgba(79,195,247,.35);
    --elsa-champ2-bordure: rgba(255,255,255,.2);

    --elsa-bouton2-fond: rgba(255,255,255,.08);
    --elsa-bouton2-texte: #9fb3cc;
    --elsa-bouton2-bordure: rgba(255,255,255,.15);

    --elsa-carte-bordure: rgba(255,255,255,.15);
    --elsa-encadre-bordure: rgba(79,195,247,.3);

    --elsa-liste-fond: #0f1d33;
    --elsa-liste-bordure: rgba(79,195,247,.3);
    --elsa-liste-survol: rgba(79,195,247,.15);

    --elsa-danger-texte: #e98282;

    --elsa-conf-exacte: #a7cc86;
    --elsa-conf-probable: #4fc3f7;
    --elsa-conf-verifier: #dbb37e;
    --elsa-conf-aucun: #e98282;

    /* Bouton flottant + panneau (functions.php) */
    --elsa-widget-anneau: #517CB8;
    --elsa-widget-ombre: 0 2px 10px rgba(0,0,0,0.45);
    --elsa-widget-texte: #fff;
    --elsa-widget-texte-ombre: 0 1px 3px rgba(0,0,0,0.8);
    --elsa-panneau-ombre: 0 8px 30px rgba(0,0,0,.5);
    --elsa-panneau-bordure: rgba(79,195,247,.25);
    --elsa-panneau-fond: #0b1526;
}

/* --- 7.2 Themes CLAIR et COULEUR ----------------------------------------
   Tout est exprime en `var(--...)` de la palette de base : les deux themes
   partagent donc la meme regle, chacun avec ses propres couleurs.
   ------------------------------------------------------------------------ */
html:is([data-theme='clair'], [data-theme='couleur']) {
    /* Page Elsa */
    --elsa-fond: linear-gradient(160deg, var(--fond-panneau), var(--fond));
    --elsa-texte: var(--texte);
    --elsa-texte-attenue: var(--texte-attenue);

    --elsa-topbar-fond: var(--surface-haute);
    --elsa-topbar-bordure: var(--bordure);
    --elsa-badge-bordure: var(--bordure);

    --elsa-marque: var(--succes);
    --elsa-sur-marque: var(--sur-succes);

    --elsa-lien: var(--lien);

    --elsa-bulle-moi-fond: var(--accent);
    --elsa-bulle-moi-texte: var(--sur-accent);
    --elsa-bulle-ia-fond: var(--surface-haute);
    --elsa-bulle-ia-bordure: var(--bordure);

    --elsa-champ-fond: var(--surface);
    --elsa-champ-texte: var(--texte);
    --elsa-champ-bordure: var(--bordure);
    --elsa-champ2-bordure: var(--bordure);

    --elsa-bouton2-fond: var(--surface-haute);
    --elsa-bouton2-texte: var(--texte-attenue);
    --elsa-bouton2-bordure: var(--bordure);

    --elsa-carte-bordure: var(--bordure);
    --elsa-encadre-bordure: var(--accent-bordure);

    --elsa-liste-fond: var(--surface);
    --elsa-liste-bordure: var(--bordure);
    --elsa-liste-survol: var(--accent-fond);

    --elsa-danger-texte: var(--danger-texte);

    /* CONF_LABELS : 4 etats qui doivent rester distinguables.
       vert / bleu / brun-ambre / rouge. Les valeurs « -texte » sont
       preferees aux valeurs vives pour rester lisibles sur fond clair
       (contraste >= 6:1 sur la bulle .ai). */
    --elsa-conf-exacte: var(--succes);
    --elsa-conf-probable: var(--accent);
    --elsa-conf-verifier: var(--ambre-texte);
    --elsa-conf-aucun: var(--danger-texte);

    /* Bouton flottant + panneau (functions.php) */
    --elsa-widget-anneau: var(--accent);
    --elsa-widget-ombre: var(--ombre-carte);
    --elsa-widget-texte: var(--texte);
    --elsa-widget-texte-ombre: none;
    --elsa-panneau-ombre: 0 8px 30px rgba(16,24,40,.18);
    --elsa-panneau-bordure: var(--bordure);
    --elsa-panneau-fond: var(--fond-panneau);
}

/* --- 7.3 Correctifs de cascade -------------------------------------------
   Les sections 4 et 6 de ce fichier ciblent des selecteurs GENERIQUES
   (`button`, `input`, `textarea`, `a`) qui s'appliquent aussi a l'interieur
   de l'iframe Elsa, avec une specificite superieure aux regles de son
   <style> (html:is([data-theme=...]) button = 0,1,2 contre button = 0,0,1).
   Sans ce bloc, le texte du bouton « Envoyer » et de « Valider l'entree en
   stock » passe en var(--texte) sombre sur fond vert : illisible.
   On recadre donc ici, uniquement dans la page Elsa (body.elsa), et
   uniquement pour les themes clairs — le theme sombre n'est jamais touche.
   ------------------------------------------------------------------------ */
html:is([data-theme='clair'], [data-theme='couleur']) body.elsa button {
    color: var(--elsa-sur-marque);
}
html:is([data-theme='clair'], [data-theme='couleur']) body.elsa .attachBtn {
    color: var(--elsa-bouton2-texte);
}
html:is([data-theme='clair'], [data-theme='couleur']) body.elsa textarea {
    background: var(--elsa-champ-fond) !important;
    border: 1px solid var(--elsa-champ-bordure) !important;
    color: var(--elsa-champ-texte) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) body.elsa input[type="text"],
html:is([data-theme='clair'], [data-theme='couleur']) body.elsa input[type="number"] {
    background: var(--elsa-champ-fond) !important;
    border: 1px solid var(--elsa-champ2-bordure) !important;
    color: var(--elsa-champ-texte) !important;
}

/* ==========================================================================
 * SECTION 8 — MENU DE NAVIGATION  [NEUTRALISEE le 04/08/2026]
 * --------------------------------------------------------------------------
 * Cette section isolait le menu : le bandeau restait sombre en toutes
 * circonstances et on lui re-forcait des libelles clairs (#f2f2f2) pour qu il
 * reste lisible. C etait un pansement, assume comme tel.
 *
 * css/menu.css consomme desormais des variables `--erp-menu-*` (repli = valeur
 * historique) et la SECTION 12 leur donne des valeurs par theme. Le bandeau
 * suit donc reellement le theme. Les anciennes regles sont SUPPRIMEES : elles
 * imposaient du texte quasi blanc, ce qui produirait du blanc sur blanc sur le
 * nouveau bandeau clair.
 *
 * Voir SECTION 12 pour le remplacement.
 * ========================================================================== */

/* ==========================================================================
 * SECTION 9 — PASSE DE LISIBILITE (03/08/2026)
 * --------------------------------------------------------------------------
 * MOTIF CORRIGE : desynchronisation texte / fond des que l un des deux est
 * ecrit EN DUR et que l autre suit le theme.
 *   (a) fond fige SOMBRE + texte qui suit le theme -> fonce sur fonce
 *       => cf. sections 8 (menu) et 9.6 (rapport_intervention.php)
 *   (b) texte ou fond fige CLAIR + fond qui devient clair -> blanc sur blanc
 *       => c est le gros du travail ci-dessous
 *
 * METHODE, pour ne JAMAIS toucher au theme sombre :
 * chaque couleur en dur des pages PHP a ete remplacee par
 *     var(--erp-xxx, <valeur historique exacte>)
 * et --erp-xxx vaut, sous :root / [data-theme=sombre], EXACTEMENT cette meme
 * valeur historique. En sombre le rendu est donc identique au pixel pres,
 * meme si css/theme.css n est pas charge (la valeur de repli du var() est la
 * couleur d origine). Seuls les blocs [data-theme=clair] / [data-theme=couleur]
 * changent quoi que ce soit.
 *
 * Aucun selecteur generique (`button`, `*`, `a`) n est utilise ici : toutes
 * les regles sont portees soit par des variables, soit par une classe de page
 * (`body.pm-page`, `body.bi-page`). L iframe du widget Elsa n est donc jamais
 * atteinte.
 *
 * Ratios de contraste WCAG mesures (texte / fond reel), theme CLAIR :
 *   --erp-info      #0e4570 sur #ffffff  9,98:1   sur #eaeff6  8,64:1
 *   --erp-ok        #11532a sur #ffffff  9,15:1   sur #eaeff6  7,92:1
 *   --erp-alerte    #8a4008 sur #ffffff  7,45:1   sur #eaeff6  6,45:1
 *   --erp-critique  #a51616 sur #ffffff  7,70:1   sur #eaeff6  6,67:1
 *   --erp-violet    #6d3fa0 sur #ffffff  7,32:1   sur #eaeff6  6,34:1
 *   --erp-lien-vif  #14639f sur #ffffff  6,33:1   sur #eaeff6  5,48:1
 *   --erp-texte-doux #111a24 sur #ffffff 17,54:1  sur #eaeff6 15,18:1
 *   #ffffff sur --erp-btn-fond    (#14639f) 6,33:1
 *   #ffffff sur --erp-badge-fond  (#a51616) 7,70:1
 *   #ffffff sur --erp-btn-stock   (#8a4008) 7,45:1
 * Le theme « couleur » est systematiquement egal ou meilleur.
 * ========================================================================== */

/* --- 9.1 Valeurs SOMBRE : recopie a l identique des couleurs historiques --- */
:root,
html[data-theme='sombre'] {
    --erp-info:            #9fd0ff;
    --erp-ok:              #7fe08d;
    --erp-alerte:          #ffb84d;
    --erp-critique:        #ff7b6b;
    --erp-orange:          #e0a020;
    --erp-violet:          #b48ce0;
    --erp-lien-vif:        #33ccff;
    --erp-retard:          #e0623d;
    --erp-texte-doux:      #cfe6ff;

    --erp-carte-fond:      rgba(255,255,255,.06);
    --erp-carte-bordure:   rgba(255,255,255,.12);
    --erp-piste-fond:      rgba(255,255,255,.12);
    --erp-separateur:      rgba(255,255,255,.08);
    --erp-separateur-fort: rgba(255,255,255,.15);
    --erp-separateur-06:   rgba(255,255,255,.06);
    --erp-separateur-07:   rgba(255,255,255,.07);
    --erp-separateur-25:   rgba(255,255,255,.25);

    --erp-btn-fond:        rgba(255,255,255,.1);
    --erp-btn-bordure:     rgba(255,255,255,.2);
    --erp-btn-texte:       #fff;
    --erp-btn-stock:       #c46a1b;

    --erp-badge-fond:      #ff4d4f;
    --erp-badge-texte:     #fff;
    --erp-neuf-fond:       rgba(255,77,79,.10);

    --erp-chart-tick:      #e6eefb;
    --erp-chart-grid:      rgba(255,255,255,.08);

    /* --- 9.3 Widgets « tk », stock bas, planning du jour (lot 2, 05/08/2026) ---
     * Valeurs SOMBRE = recopie a l identique de css/style.css avant conversion.
     * Aucun changement de rendu en sombre : ces variables valent exactement
     * ce que la feuille de style ecrivait en dur. */
    --erp-vert-texte:      #6aa338;
    --erp-vert-fond:       #6aa338;
    --erp-vert-fond-2:     #5a8f2f;
    --erp-bleu-fond:       #2a9fd4;
    --erp-rouge-texte:     #ff6b6b;
    --erp-rouge-texte-2:   #ff8a8a;
    --erp-ambre-texte:     #ffb347;
    --erp-tk-titre:        #dfe6f2;
    --erp-tk-ligne:        #e8eefc;
    --erp-tk-fort:         #ffffff;
    --erp-tk-vide:         #9aa6bd;
    --erp-tbl-texte:       #e6eefb;
    /* --- 9.6 Lot 5 (06/08/2026) — texte par defaut, tableaux, titres, icones ---
     * Valeurs SOMBRE = recopie a l identique de css/style.css avant conversion. */
    --erp-body-texte:      #eaf2fb;
    --erp-tbl-cellule:     #e7eefb;
    --erp-titre:           #ffffff;
    --erp-icone-dash:      #e9eefb;
    --erp-champ-saisie:    #ffffff;
    /* Barre de selection pleine largeur (.form_input_di_dash) — lot 5c 06/08.
     * SOMBRE = valeurs historiques exactes : fond du menu, pas de bordure,
     * survol gris fonce. Aucun changement de rendu en sombre. */
    --erp-dash-fond:       var(--background_menu);
    --erp-dash-bordure:    transparent;
    --erp-dash-survol:     rgb(100, 100, 100);
    /* --- 9.7 Listes deroulantes Choices.js (lot 7, 06/08/2026) ---
     * Le bloc concerne est du code MAISON ajoute en fin de css/choice.css
     * (commentaire « Contraste EVA … en sombre »), pas la bibliotheque.
     * SOMBRE = recopie a l identique. */
    --erp-ch-champ-fond:   rgba(40,64,118,0.45);
    --erp-ch-champ-texte:  #ffffff;
    --erp-ch-bordure:      rgba(79,195,247,0.25);
    --erp-ch-liste-fond:   rgba(14,22,42,0.98);
    --erp-ch-liste-texte:  #eaf2fb;
    --erp-ch-survol-fond:  rgba(79,195,247,0.25);
    --erp-ch-survol-texte: #ffffff;

    /* --- 9.4 Lot 3 (05/08/2026) : champs de recherche et d alerte -------------
     * Valeurs SOMBRE = recopie a l identique de l existant. */
    --erp-champ-dash-texte:  #f2f2f2;
    --erp-champ-alerte-fond: var(--font_warning);
    --erp-nav-mobile-fond:   #48435C;
    --erp-nav-mobile-texte:  #f2f2f2;
    --erp-champ-recherche-texte: rgba(16,26,48,0.78);
    /* --- 9.5 Lot 4 (05/08/2026) : calendrier maison (fc-maison.css) ----------
     * Valeurs SOMBRE = recopie a l identique de l existant. */
    --erp-cal-texte:        #e6eefb;
    --erp-cal-texte-2:      #eaf2fb;
    --erp-cal-jour:         #c6d6ec;
    --erp-cal-jour-actuel:  #7fdbff;
    --erp-cal-heure:        #ffffff;
    --erp-cal-accent:       #4fc3f7;
    --erp-cal-lien:         #ccddee;
    --erp-cal-popover-fond: #0e1b34;
    --erp-cal-event-fond:   linear-gradient(160deg, rgba(58,84,138,0.34) 0%, rgba(20,34,64,0.48) 100%);
}

/* --- 9.2 Themes CLAIR et COULEUR ----------------------------------------- */
html:is([data-theme='clair'], [data-theme='couleur']) {
    --erp-info:            var(--accent-tres-clair);
    --erp-ok:              var(--succes-texte);
    --erp-alerte:          var(--ambre-texte);
    --erp-critique:        var(--danger);
    --erp-orange:          var(--ambre-texte);
    --erp-violet:          var(--font_purple);
    --erp-lien-vif:        var(--accent);
    --erp-retard:          var(--danger);
    --erp-texte-doux:      var(--texte);

    /* Les cartes translucides blanches disparaissaient sur fond clair :
       on leur redonne un remplissage et une bordure visibles. */
    --erp-carte-fond:      var(--surface-haute);
    --erp-carte-bordure:   var(--bordure-forte);
    --erp-piste-fond:      var(--surface-haute-2);
    --erp-separateur:      var(--bordure);
    --erp-separateur-fort: var(--bordure-forte);
    --erp-separateur-06:   var(--bordure);
    --erp-separateur-07:   var(--bordure);
    --erp-separateur-25:   var(--bordure-forte);

    /* Bouton « Tout marquer comme vu » : blanc sur blanc avant correctif. */
    --erp-btn-fond:        var(--accent);
    --erp-btn-bordure:     var(--accent);
    --erp-btn-texte:       var(--sur-accent);
    --erp-btn-stock:       var(--ambre-texte);

    --erp-badge-fond:      var(--danger);
    --erp-badge-texte:     var(--sur-accent);
    --erp-neuf-fond:       var(--danger-fond);

    --erp-chart-tick:      var(--texte-attenue);
    --erp-chart-grid:      var(--bordure);

    /* --- 9.3 (suite) equivalents lisibles en clair et couleur ---
     * Contrastes mesures sur --surface #ffffff et --surface-haute #eaeff6 :
     *   --erp-vert-texte   #11532a / #ffffff  = 9,05:1
     *   --erp-rouge-texte  #a51616 / #ffffff  = 7,70:1
     *   --erp-ambre-texte  #8a4008 / #ffffff  = 7,72:1
     *   #ffffff / --erp-bleu-fond (#14639f)   = 6,33:1
     *   #ffffff / --erp-vert-fond (#15803d)   = 4,86:1 */
    --erp-vert-texte:      var(--succes-texte);
    --erp-vert-fond:       var(--succes);
    --erp-vert-fond-2:     var(--succes-vif);
    --erp-bleu-fond:       var(--accent);
    --erp-rouge-texte:     var(--danger);
    --erp-rouge-texte-2:   var(--danger);
    --erp-ambre-texte:     var(--ambre-texte);
    --erp-tk-titre:        var(--texte);
    --erp-tk-ligne:        var(--texte);
    --erp-tk-fort:         var(--texte);
    --erp-tk-vide:         var(--texte-attenue);
    --erp-tbl-texte:       var(--texte);
    /* --- 9.6 Lot 5 (06/08/2026) --- */
    --erp-body-texte:      var(--texte);
    --erp-tbl-cellule:     var(--texte);
    --erp-titre:           var(--texte);
    --erp-icone-dash:      var(--accent-tres-clair);
    --erp-champ-saisie:    var(--texte);
    /* Barre de selection — lot 5c : en clair, --background_menu vaut #ffffff,
     * donc la barre etait blanche sur blanc SANS bordure : invisible en tant
     * que composant. On lui donne une surface et une bordure. */
    --erp-dash-fond:       var(--surface-haute);
    --erp-dash-bordure:    var(--bordure);
    --erp-dash-survol:     var(--accent-fond);
    /* --- 9.7 Choices.js — CLAIR ---
     * DEFAUTS MESURES en clair AVANT correction :
     *   .choices__inner  texte #fff sur rgba(40,64,118,.45) compose #9ea9c1 = 2,05:1
     *   .choices__input  texte #fff sur rgba(40,64,118,.50) compose #94a0bb = 2,21:1
     * Les deux champs etaient donc quasi illisibles. La liste ouverte, elle,
     * restait un bloc bleu nuit opaque au milieu d une interface claire. */
    --erp-ch-champ-fond:   var(--surface-haute);
    --erp-ch-champ-texte:  var(--texte);
    --erp-ch-bordure:      var(--bordure);
    --erp-ch-liste-fond:   var(--surface);
    --erp-ch-liste-texte:  var(--texte);
    --erp-ch-survol-fond:  var(--accent-fond);
    --erp-ch-survol-texte: var(--texte);

    /* --- 9.4 (suite) ---------------------------------------------------------
     * DEFAUTS REELS CORRIGES EN CLAIR :
     *  .form_input_di_dash  texte #f2f2f2 sur --background_menu #ffffff = 1,08:1
     *                       (champ de recherche INVISIBLE : dashboard, inventory,
     *                        list_stock_consumptions, list_timekeeping, planning)
     *  .form_input_di_warning texte #2a1c00 sur --font_warning #8a4008 = 1,84:1
     *                       (inventory, mass_mod_articles, mass_mod_batch)
     * Le bandeau mobile reste FONCE (choix assume) : on lui fixe donc un texte clair. */
    --erp-champ-dash-texte:  var(--texte);
    --erp-champ-alerte-fond: #fde9c8;
    --erp-nav-mobile-fond:   #48435C;
    --erp-nav-mobile-texte:  #f2f2f2;
    /* .input_search : var(--background_bar) valait rgba(255,255,255,.94) en clair
       = texte BLANC sur fond blanc 80%. Champ de recherche des listes : on tape, on ne voit rien. */
    --erp-champ-recherche-texte: var(--texte);
    /* --- 9.5 (suite) : calendrier en clair et couleur ------------------------
     * Les textes du calendrier etaient tous en bleu tres clair : invisibles sur
     * fond blanc. Contrastes mesures sur --surface #ffffff. */
    --erp-cal-texte:        var(--texte);
    --erp-cal-texte-2:      var(--texte);
    --erp-cal-jour:         var(--texte-attenue);
    --erp-cal-jour-actuel:  var(--accent);
    --erp-cal-heure:        var(--texte);
    --erp-cal-accent:       var(--accent);
    --erp-cal-lien:         var(--lien);
    --erp-cal-popover-fond: var(--surface);
    /* Tuiles d evenement : le degrade bleu nuit translucide devenait un bleu-gris
       moyen sur fond blanc — lisible mais sale, et impossible a mesurer avec
       certitude. On lui donne un aplat clair franc. Texte #111a24 dessus = 16,2:1. */
    --erp-cal-event-fond:   #eef3f9;

}


/* --------------------------------------------------------------------------
 * 9.3 — planning_maison.php  (conversion CLAIRE complete)
 * --------------------------------------------------------------------------
 * La page n impose pas de fond a <body> : en clair elle passait donc sur le
 * fond clair de `html`, alors que TOUS ses fonds de composants sont des bleus
 * nuit translucides et TOUS ses textes sont clairs (#fff, #e6eefb, #eaf2fb).
 * Resultat mesure : creneaux #eaf2fb sur une case quasi blanche, ~1,1:1.
 * On rebascule ici l ensemble de la page sur les variables du theme.
 * Regles portees par `body.pm-page` : rien d autre dans l ERP n est touche.
 * -------------------------------------------------------------------------- */
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-bar .pm-title {
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-hint,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-legend {
    color: var(--texte-attenue);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-btn,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-tabs a,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-chip {
    background: var(--surface);
    border-color: var(--bordure);
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-btn:hover {
    background: var(--accent-fond);
    color: var(--accent-tres-clair);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-btn.now,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-tabs a.active,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-chip:has(input:checked),
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-save,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page table.pm thead th.today {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--sur-accent) !important;
}
/* .pm-add : #fff sur #6aa338 = 3,04:1 -> var(--succes) = 5,02:1 */
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-add {
    background: var(--succes) !important;
    border-color: var(--succes) !important;
    color: var(--sur-succes) !important;
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-scroll {
    border-color: var(--bordure);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page table.pm {
    background: var(--surface);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page table.pm th,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page table.pm td {
    border-color: var(--bordure);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page table.pm thead th,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page table.pm.week .pm-tech,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page table.pm.day td.hcell {
    background: var(--surface-haute);
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page table.pm.day td.hcell {
    color: var(--texte-attenue);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page table.pm.week .pm-tech {
    border-right-color: var(--bordure-forte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page table.pm.week td.pm-cell:hover,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page table.pm.week td.pm-cell.today,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page table.pm.day td.slotcell:hover {
    background: var(--accent-fond);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-slot {
    background: var(--surface-haute);
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-slot .h,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .occ-label,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .occ-label b {
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-empty {
    color: var(--texte-faible);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-card {
    background: var(--surface);
    border-color: var(--bordure);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-card h3,
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-link {
    color: var(--accent-tres-clair);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-card label {
    color: var(--texte-attenue);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-cancel {
    background: var(--surface-haute);
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page #pm-ctx {
    background: var(--surface);
    border-color: var(--bordure);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page #pm-ctx .pm-ctxitem {
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page #pm-ctx .pm-ctxitem:hover {
    background: var(--accent-fond);
    color: var(--accent-tres-clair);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-typefilter .pm-flabel {
    color: var(--texte-attenue);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-fchip {
    background: var(--surface-haute);
    border-color: var(--bordure);
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page .pm-fall {
    border-color: var(--succes-bordure);
    color: var(--accent-tres-clair);
}
/* Le bouton « Envoyer » porte ses couleurs en ligne : #fff sur #1f7a3f = 5,37:1.
   Deja conforme, on ne le touche pas — mais la bordure heritee de .pm-btn si. */
html:is([data-theme=clair], [data-theme=couleur]) body.pm-page a.pm-btn[style*="1f7a3f"] {
    border-color: #1f7a3f;
    color: #fff;
}
/* Champs de la modale : css/theme.css section 6 les repasse deja en clair
   (fond var(--surface), texte var(--texte)) — rien a ajouter ici. */


/* --------------------------------------------------------------------------
 * 9.4 — rapport_intervention.php
 * --------------------------------------------------------------------------
 * OBSOLETE. Cette sous-section ne contenait que du CONTAINMENT : elle rendait
 * a la page son texte clair d origine (#e6eefb) pour qu elle reste lisible
 * (14,7:1) alors qu elle restait un ilot bleu nuit en theme clair.
 * Elle est remplacee par la SECTION 11, qui convertit reellement la page.
 * -------------------------------------------------------------------------- */

/* ==========================================================================
 * SECTION 10 — CALENDRIER FULLCALENDAR (correctif 03/08/2026)
 * --------------------------------------------------------------------------
 * CONSTATE PAR DOMINIQUE (capture planning.php en clair) : la grille du
 * calendrier reste GRISE FONCEE au milieu d une page claire -- un trou noir
 * au centre de la page la plus utilisee de l ERP.
 * CAUSE : css/fc-maison.css n a jamais ete touche. Il pose tous les fonds en
 * bleus nuit translucides (rgba(20,30,60,.40), rgba(12,18,38,.55)...).
 * Concerne 4 pages : planning.php, timekeeping.php, create_timekeeping.php,
 * list_requests.php.
 * CORRECTIF : FullCalendar expose des variables standard --fc-* ; on les
 * redefinit en clair, puis on neutralise les 5 fonds ecrits en dur.
 * Le SOMBRE n est pas touche (tout est prefixe par le selecteur de theme).
 * ========================================================================== */
html:is([data-theme=clair], [data-theme=couleur]) .fc {
  --fc-page-bg-color: transparent;
  --fc-border-color: rgba(30, 60, 100, 0.22);
  --fc-neutral-bg-color: #eef2f7;
  --fc-list-event-hover-bg-color: rgba(20, 99, 159, 0.10);
  --fc-today-bg-color: rgba(20, 99, 159, 0.10);
  --fc-now-indicator-color: #14639f;
  --fc-event-bg-color: #2a6db0;
  --fc-event-border-color: #1d5a94;
  --fc-event-text-color: #ffffff;
  color: #111a24;
}
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-scrollgrid,
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-list,
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-list-empty {
  background: #ffffff !important;
}
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-scrollgrid-section-sticky > * {
  background: #eaeff6 !important;
}
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-button,
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-button-primary {
  background: #eaeff6 !important;
  color: #111a24 !important;
  border-color: rgba(30, 60, 100, 0.25) !important;
}
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-button-primary:disabled {
  background: #f0f3f7 !important;
  color: #6b7a8c !important;
}
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-col-header-cell,
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-timegrid-axis,
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-timegrid-slot-label {
  color: #111a24 !important;
}

/* --------------------------------------------------------------------------
 * 10.2 — Colonne des heures et titre du calendrier
 * Constate par Dominique sur list_requests.php : la colonne des heures reste
 * un bandeau noir (#0e1b34 en dur, fc-maison.css l.124) et le titre de la
 * periode est blanc sur blanc (#fff en dur, l.47).
 * -------------------------------------------------------------------------- */
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-timegrid-axis,
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-timegrid-slot-label {
  background: #eaeff6 !important;
  color: #43566a !important;
}
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-timegrid-slot-label-cushion,
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-timegrid-axis-cushion {
  color: #43566a !important;
}
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-toolbar-title {
  color: #111a24 !important;
}

/* ==========================================================================
 * SECTION 11 — rapport_intervention.php : CONVERSION CLAIRE COMPLETE
 *              (03/08/2026 — remplace le containment de l ancienne 9.4)
 * --------------------------------------------------------------------------
 * CONSTATE PAR DOMINIQUE : en theme clair la page restait un ILOT BLEU NUIT
 * au milieu d un ERP clair. L ancienne 9.4 ne faisait que du containment
 * (elle rendait a la page son texte clair d origine pour qu elle reste
 * lisible, 14,7:1) mais ne convertissait rien. Elle est SUPPRIMEE et
 * remplacee par la vraie conversion ci-dessous.
 *
 * CAUSE : la page porte son propre <style> (l. 295-370) charge APRES
 * css/theme.css. Il fige ~40 couleurs, dont
 *     body{ background:linear-gradient(160deg,#0c1730,#070e1c); color:#e6eefb }
 * qu aucune variable de theme ne pilote.
 *
 * METHODE — identique au reste du fichier :
 *   - AUCUN selecteur generique (`button`, `a`, `input`, `*` seuls). TOUT est
 *     prefixe par `html:is([data-theme=clair],[data-theme=couleur]) body.bi-page`
 *     (specificite >= 0,2,2). L iframe du widget Elsa n est jamais atteinte :
 *     c est un document separe, et de toute facon aucune de ces regles ne
 *     matche hors de <body class="bi-page">.
 *   - le theme SOMBRE n est jamais touche : pas une seule declaration ici
 *     n est active sans data-theme=clair|couleur sur <html>. Les couleurs
 *     d origine de la page restent celles de son propre <style>.
 *   - le `!important` est necessaire parce que le <style> de la page est
 *     charge APRES ce fichier, et parce que la section 6 pose deja des
 *     `!important` sur input/select/textarea. Il est ici sans risque : il est
 *     enferme dans body.bi-page.
 *
 * RATIOS DE CONTRASTE MESURES (theme clair ; le theme couleur est egal ou
 * meilleur, son --texte #0f1520 etant plus fonce que #111a24) :
 *   texte courant   #111a24 sur carte #ffffff .............. 17,54:1
 *   texte courant   #111a24 sur fond de page #f3f5f8 ....... 16,06:1
 *   texte en champ  #111a24 sur champ #eaeff6 .............. 15,18:1
 *   libelles        #43566a sur carte #ffffff ..............  7,56:1
 *   hints (.opt)    #43566a sur carte #ffffff ..............  7,56:1
 *   sous-titres     #43566a sur fond #f3f5f8 ...............  6,92:1
 *   placeholder     #566a7f sur champ #eaeff6 ..............  4,83:1
 *   liens           #0f5288 sur #ffffff ....................  8,13:1
 *   .btn-main       #ffffff sur --accent #14639f ...........  6,33:1
 *                   #ffffff sur --accent #1358b0 (couleur) .  6,88:1
 *   .chip.on        idem .btn-main
 *   .m-del          #ffffff sur #a51616 ....................  7,70:1
 *   .sig-check      #ffffff sur #15803d ....................  5,02:1
 *   bandeau .ok     #111a24 sur #e4f5ea .................... 15,49:1
 *   titre .ok h2    #11532a sur #e4f5ea .....................  8,08:1
 *   bandeau .err    #111a24 sur #fbe3e3 .................... 14,37:1
 *   .b-back         #16406a sur #ffffff .................... 10,63:1
 * Pastilles de statut (texte blanc sur la pastille pleine / pastille ronde
 * sur fond de puce #eaeff6) :
 *   Programme       #c62a17 ... 5,61:1 blanc / 4,85:1 puce
 *   En cours        #b35f14 ... 4,60:1 blanc / 3,98:1 puce
 *   A signer        #8d7208 ... 4,62:1 blanc / 4,00:1 puce
 *   A imprimer      #8a5a3c ... 5,82:1 blanc / 5,04:1 puce
 *   Execute         #1e864a ... 4,60:1 blanc / 3,98:1 puce
 *   Devis a prevoir #8e44ad ... 5,87:1 blanc / 5,08:1 puce
 * Elements d interface non textuels (seuil 3:1) :
 *   pointille .sig-card #6f8399 sur blanc ................  3,90:1
 *
 * Meme releve en theme COULEUR, verifie valeur par valeur — jamais inferieur :
 *   texte #0f1520 / carte 18,29:1, / champ #e9eef7 15,71:1, / fond 16,62:1
 *   libelles #414f66 / carte 8,28:1        placeholder #55637d / champ 5,20:1
 *   liens #0d4794 / blanc 8,95:1           blanc / accent #1358b0 6,88:1
 *   blanc / --succes #12703a 6,17:1        blanc / --danger #9d1515 8,23:1
 *   .ok 15,94:1  .ok h2 9,04:1  .err 14,77:1
 *   pastilles de statut sur puce #e9eef7 : 3,95:1 a 5,04:1
 * ========================================================================== */


/* --- 11.1 Fond de page et texte courant ---------------------------------- */
/* Remplace body{background:linear-gradient(160deg,#0c1730,#070e1c)}.
   La section 4 pose body{color:var(--text_color)!important} : il faut le
   meme poids, d ou le !important. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page {
    background: linear-gradient(160deg, var(--fond-panneau) 0%, var(--surface-haute) 100%) !important;
    color: var(--texte) !important;
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .bi-head h1 {
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .bi-head .sub,
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page #bi-duration {
    color: var(--texte-attenue) !important;
}
/* a.back : le <style> de la page pose a.back{color:#9aa6bd} (0,1,1) qui bat
   la regle a{color:var(--lien)} de la section 4 (0,1,1, mais ecrite avant). */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page a.back {
    color: var(--lien);
}
/* .opt : hint a opacity .55. Sur fond clair cela donne un gris trop pale
   (#7c8288, 4,0:1 a 11px). On rend l opacite et on choisit la couleur. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .opt {
    opacity: 1;
    color: var(--texte-attenue);
}

/* --- 11.2 Bandeau de marque (deja blanc, on adoucit juste son ombre) ------ */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .brand {
    box-shadow: var(--ombre-carte);
    border: 1px solid var(--bordure);
}

/* --- 11.3 Cartes / panneaux ---------------------------------------------- */
/* .bi-card{ background:var(--navy2); border:1px solid rgba(79,195,247,.18) } */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .bi-card {
    background: var(--surface);
    border-color: var(--bordure);
    box-shadow: var(--ombre-carte);
}

/* --- 11.4 Libelles -------------------------------------------------------- */
/* label{ color:#aeb8cc }. `:not(.chip)` est indispensable : les puces de
   type et de statut sont elles aussi des <label>, elles ont leur propre
   traitement en 11.6 / 11.7. Pas de !important ici (0,3,3 suffit face au
   `label` nu de la page) — les <label style="...color:#cfe"> ecrits en ligne
   l. 396-402 sont traites en 11.10, ou le !important est justifie. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page label:not(.chip) {
    color: var(--texte-attenue);
}

/* --- 11.5 Champs de saisie ------------------------------------------------ */
/* input,select,textarea{ background:rgba(20,30,60,.6); color:#fff;
   border:1px solid rgba(79,195,247,.25) } + les memes valeurs ecrites en
   ligne l. 398/401/404. Fond legerement teinte (et non blanc) pour que le
   champ se detache de la carte blanche sur mobile. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page input,
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page select,
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page textarea {
    background: var(--surface-haute) !important;
    border: 1px solid var(--bordure) !important;
    color: var(--texte) !important;
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page select option {
    background: var(--surface) !important;
    color: var(--texte) !important;
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page ::placeholder {
    color: var(--texte-faible) !important;
    opacity: 1;
}

/* --- 11.6 Puces de type de depannage -------------------------------------- */
/* SAV, GARANTIE, GMAO, AFFAIRE, ASTREINTE, DEPANNAGE, MAINTENANCE, FORMATION
   .chip{ background:rgba(20,30,60,.6); color:#e6eefb }
   .chip.on{ background:var(--cyan) #2a9fd4; color:#fff } -> 2,49:1, insuffisant. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .chip {
    background: var(--surface-haute);
    border-color: var(--bordure);
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .chip:hover {
    border-color: var(--accent-bordure);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .chip.on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--sur-accent);
}

/* --- 11.7 Pastilles de statut du bon -------------------------------------- */
/* La couleur arrive EN LIGNE : <label class="chip stat-chip" style="--c:(couleur)">
   (rapport_intervention.php l. 560, valeurs dans bi_status.php).
   Une declaration !important d une feuille auteur bat une declaration normale
   de l attribut style : on peut donc redefinir --c. Meme technique que 9.3.
   --c pilote a la fois la pastille ronde (.stat-chip span::before) et le fond
   de la puce selectionnee (.stat-chip.on) : une seule valeur par statut,
   choisie assez foncee pour porter du blanc a 4,5:1 minimum, et assez
   distincte des voisines (rouge / orange / or / brun / vert / violet).
   Les teintes d origine (#e74c3c, #e67e22, #f1c40f, #e8b07a, #27ae60,
   #8e44ad) sont conservees en TON, seulement assombries.

   >>> COUPLAGE FRAGILE — A LIRE AVANT DE TOUCHER A bi_status.php <<<
   Les six selecteurs ci-dessous reconnaissent le statut par la SOUS-CHAINE de
   sa couleur dans l attribut style. Si une couleur de $BI_STATUSES change dans
   bi_status.php, le selecteur correspondant cesse de matcher SANS AUCUNE
   ERREUR : la pastille reprend silencieusement sa teinte claire d origine et
   redevient illisible. Toute modification de bi_status.php impose donc de
   mettre a jour la sous-chaine ici, dans le meme commit.
   Verifie le 04/08/2026 : les six valeurs de bi_status.php sont inchangees,
   les six selecteurs matchent toujours.

   04/08/2026 — la pastille de mes_bons.php (<span class="badge"
   style="background:(couleur);color:...">) est un AUTRE element, non couvert
   par cette section : sa couleur de texte est desormais calculee en PHP
   (essia_texte_lisible_sur(), functions.php), ce qui la corrige dans les
   TROIS themes sans dependre d un selecteur [style*=...]. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .stat-chip[style*="e74c3c"] { --c: #c62a17 !important; } /* Programme       */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .stat-chip[style*="e67e22"] { --c: #b35f14 !important; } /* En cours        */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .stat-chip[style*="f1c40f"] { --c: #8d7208 !important; } /* A signer        */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .stat-chip[style*="e8b07a"] { --c: #8a5a3c !important; } /* A imprimer      */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .stat-chip[style*="27ae60"] { --c: #1e864a !important; } /* Execute         */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .stat-chip[style*="8e44ad"] { --c: #8e44ad !important; } /* Devis a prevoir */
/* Filet de securite si un statut est ajoute dans bi_status.php sans etre
   repris ci-dessus : la puce non selectionnee reste lisible. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .stat-chip {
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .stat-chip.on {
    color: #ffffff !important;
}

/* --- 11.8 Boutons --------------------------------------------------------- */
/* .btn-main{ background:var(--cyan) #2a9fd4; color:#fff } -> 2,49:1. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .btn-main {
    background: var(--accent);
    color: var(--sur-accent);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .btn-ghost {
    background: var(--surface-haute);
    color: var(--texte);
    border: 1px solid var(--bordure);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .btn-clear {
    background: var(--surface-haute);
    color: var(--texte-attenue);
    border: 1px solid var(--bordure);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .pm-link,
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .combo-sel,
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .mat-row .m-qty {
    color: var(--lien);
}

/* --- 11.9 Signature (zone + modale plein ecran) --------------------------- */
/* .sig-card est deja blanc (c est la zone de trace) : on lui donne un
   pointille visible sur blanc au lieu du cyan pale. Valeur litterale et non
   var(--bordure-forte) : celle-ci ne vaut que 2,59:1 sur blanc (2,78:1 en
   theme couleur), sous le seuil de 3:1 des elements d interface. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .sig-card {
    border-color: #6f8399;
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .sig-card.signed {
    border-color: var(--succes);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .sig-card .sig-check {
    background: var(--succes);
    color: #ffffff;
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .sig-card .sig-placeholder,
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .sig-redo,
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .sig-modal-hint {
    color: var(--texte-faible);
}
/* L icone du placeholder porte stroke="#7a8aa8" en ATTRIBUT de presentation :
   une propriete CSS le remplace (les attributs de presentation ont la
   priorite la plus basse de toute la cascade). */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .sig-card .sig-placeholder svg {
    stroke: var(--texte-faible);
    opacity: .85;
}
/* .sig-modal{ background:#0b1220 } : la modale plein ecran restait noire. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .sig-modal {
    background: var(--fond);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .sig-modal-head {
    color: var(--texte);
    border-bottom-color: var(--bordure);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .sig-modal-head .sig-x {
    color: var(--texte-attenue);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .sig-modal-canvas-wrap {
    border: 1px solid #6f8399;
}

/* --- 11.10 Bandeaux de resultat ------------------------------------------- */
/* .err{ background:rgba(192,57,43,.18); color:#ffd9d4 } — rose pale sur
   bordeaux translucide : illisible des que le fond passe en clair. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .err {
    background: var(--danger-fond);
    border-color: var(--danger-bordure);
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .ok {
    background: var(--succes-fond);
    border-color: var(--succes-bordure);
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .ok h2 {
    color: var(--succes-texte);
}
/* Les <label> du formulaire d envoi par mail sont dans .ok : fond vert tres
   pale, --texte-attenue y vaut 6,68:1. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .ok label {
    color: var(--texte-attenue) !important;
}

/* --- 11.11 Autocompletion client + lignes de materiel --------------------- */
/* .combo-list{ background:var(--navy2); box-shadow:0 12px 30px rgba(0,0,0,.5) } */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .combo-list {
    background: var(--surface);
    border-color: var(--bordure);
    box-shadow: 0 12px 30px rgba(16, 24, 40, .18);
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .combo-item {
    border-bottom-color: var(--bordure-douce);
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .combo-item:hover,
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .combo-item.kbd {
    background: var(--accent);
    color: var(--sur-accent);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .combo-empty {
    color: var(--texte-attenue);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .mat-row {
    background: var(--surface-haute);
    border-color: var(--bordure);
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .mat-row .m-txt b {
    color: var(--texte);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .mat-row .m-del {
    background: var(--danger);
    color: #ffffff;
}

/* --- 11.12 Couleurs restees dans l attribut style ------------------------- */
/* l. 479 : <div style="color:#fff;font-weight:600"> — rappel du bon modifie.
   Blanc sur blanc en clair. Seul un !important peut battre l attribut style. */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .bi-card div[style*="color:#fff"] {
    color: var(--texte) !important;
}

/* --- 11.13 Menus deroulants ameliores (css/searchable-select.css) --------- */
/* js/searchable-select.js remplace tout <select> d au moins 8 options par un
   champ + une liste .ssel-*. Cette feuille est DEJA claire dans les deux
   themes (fond #ffffff, texte #1f2937) : elle n a pas besoin d etre
   convertie. Deux valeurs y sont toutefois sous le seuil, ET SEULEMENT SUR
   CETTE PAGE on les corrige — la corriger dans searchable-select.css
   changerait le rendu du theme sombre, ce qui est interdit :
     .ssel-item:hover{ background:#2a9fd4; color:#fff } .. 3,00:1 -> 6,33:1
     .ssel-empty{ color:#8a93a3 } sur #ffffff .......... 3,11:1 -> 7,56:1 */
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .ssel-item:hover,
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .ssel-item.ssel-kbd {
    background: var(--accent);
    color: var(--sur-accent);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .ssel-empty {
    color: var(--texte-attenue);
}
html:is([data-theme=clair], [data-theme=couleur]) body.bi-page .ssel-list {
    border-color: var(--bordure);
    box-shadow: 0 12px 30px rgba(16, 24, 40, .18);
}


/* ==========================================================================
 * SECTION 12 — MENU DE NAVIGATION, VRAIE MISE AU THEME (04/08/2026)
 * --------------------------------------------------------------------------
 * Remplace la SECTION 8, qui n etait qu un pansement : elle re-forcait des
 * couleurs claires sur un bandeau reste sombre en toutes circonstances.
 *
 * css/menu.css consomme desormais des variables `--erp-menu-*` avec repli sur
 * la valeur historique. Le theme SOMBRE ne definit donc RIEN ici : le repli
 * s applique et le rendu est strictement identique a avant. Seuls `clair` et
 * `couleur` redefinissent ces variables.
 *
 * Contrastes mesures (WCAG, texte normal, cible 4.5:1) :
 *   clair   barre  texte #111a24 / #ffffff ............ 17.54:1
 *           barre  survol #0e4570 / #eaf1f6 ............  8.75:1
 *           barre  actif #ffffff / #14639f .............  6.33:1
 *           panneau lien attenue #43566a / #ffffff .....  7.56:1
 *           panneau titre #0e4570 / #ffffff ............  9.98:1
 *   couleur barre  #ffffff / stop le plus clair #1c5f93   6.76:1
 *           barre  survol #ffffff / #3c75a2 ............  4.93:1
 *           barre  actif #0b3c7c / #ffffff ............. 10.76:1
 *           tiroir mobile #cadeef / #0d2b4a ............ 10.40:1
 * ========================================================================== */

/* --- 12.1 THEME CLAIR — bandeau blanc, texte sombre --------------------- */
html[data-theme='clair'] {
    --erp-menu-fond:               #ffffff;
    --erp-menu-bordure:            var(--bordure);
    --erp-menu-ombre:              0 1px 2px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.08);
    --erp-menu-texte:              var(--texte);
    --erp-menu-slogan:             var(--texte-attenue);

    --erp-menu-survol-fond-base:   var(--accent-fond);
    --erp-menu-survol-fond:        var(--accent-fond);
    --erp-menu-survol-texte:       var(--accent-tres-clair);
    --erp-menu-survol-ombre:       none;

    --erp-menu-actif-fond:         var(--accent);
    --erp-menu-actif-texte:        var(--sur-accent);
    --erp-menu-actif-bordure:      var(--accent);
    --erp-menu-actif-ombre:        none;

    /* Les halos neon cyan sont illisibles/sales sur fond blanc : on les eteint
       en rendant la couleur du text-shadow transparente (le flou reste, mais
       ne peint plus rien). */
    --erp-menu-halo:               transparent;
    --erp-menu-halo-faible:        transparent;
    --erp-menu-halo-moyen:         transparent;
    --erp-menu-halo-fort:          transparent;

    --erp-menu-panneau-fond:       var(--surface);
    --erp-menu-panneau-bordure:    var(--bordure);
    --erp-menu-panneau-ombre:      0 8px 24px rgba(16,24,40,.14);
    --erp-menu-panneau-texte:      var(--texte);
    --erp-menu-panneau-texte-doux: var(--texte-attenue);
    --erp-menu-panneau-titre:      var(--accent-tres-clair);
    --erp-menu-panneau-survol:     var(--accent);
    --erp-menu-panneau-separateur: var(--bordure);

    --erp-menu-mobile-fond:        var(--surface);
    --erp-menu-mobile-survol:      var(--surface-haute);
    --erp-menu-mobile-separateur:  var(--bordure);
    --erp-menu-mobile-item:        var(--accent-tres-clair);

    --erp-menu-defil-piste:        var(--surface-haute);
    --erp-menu-defil-pouce:        var(--defilement);

    /* Anneau blanc de l avatar : invisible sur un bandeau blanc. */
    --erp-menu-avatar-anneau:      var(--bordure-forte);
}

/* --- 12.2 THEME COULEUR — bandeau degrade bleu ESSIA, texte blanc ------- */
/* Le degrade est volontairement PLUS SOMBRE que --entete-fond : le stop clair
   de --entete-fond (#2f7fb8) ne donne que 4.34:1 avec du blanc, sous la cible.
   Le stop clair retenu ici (#1c5f93) donne 6.76:1. */
html[data-theme='couleur'] {
    --erp-menu-fond:               linear-gradient(100deg, #0d2b4a 0%, #15508f 58%, #1c5f93 100%);
    --erp-menu-bordure:            rgba(255,255,255,.22);
    --erp-menu-ombre:              0 2px 10px rgba(15,23,42,.22);
    --erp-menu-texte:              #ffffff;
    --erp-menu-slogan:             #dbe9f7;

    --erp-menu-survol-fond-base:   rgba(255,255,255,.14);
    --erp-menu-survol-fond:        rgba(255,255,255,.14);
    --erp-menu-survol-texte:       #ffffff;
    --erp-menu-survol-ombre:       none;

    --erp-menu-actif-fond:         #ffffff;
    --erp-menu-actif-texte:        #0b3c7c;
    --erp-menu-actif-bordure:      #ffffff;
    --erp-menu-actif-ombre:        none;

    --erp-menu-halo:               transparent;
    --erp-menu-halo-faible:        transparent;
    --erp-menu-halo-moyen:         transparent;
    --erp-menu-halo-fort:          transparent;

    --erp-menu-panneau-fond:       var(--surface);
    --erp-menu-panneau-bordure:    var(--bordure);
    --erp-menu-panneau-ombre:      0 8px 24px rgba(15,23,42,.18);
    --erp-menu-panneau-texte:      var(--texte);
    --erp-menu-panneau-texte-doux: var(--texte-attenue);
    --erp-menu-panneau-titre:      var(--accent-tres-clair);
    --erp-menu-panneau-survol:     var(--accent);
    --erp-menu-panneau-separateur: var(--bordure);

    --erp-menu-mobile-fond:        #0d2b4a;
    --erp-menu-mobile-survol:      rgba(255,255,255,.12);
    --erp-menu-mobile-separateur:  rgba(255,255,255,.16);
    --erp-menu-mobile-item:        #9fd0ff;

    --erp-menu-defil-piste:        rgba(255,255,255,.10);
    --erp-menu-defil-pouce:        rgba(255,255,255,.35);

    --erp-menu-avatar-anneau:      rgba(255,255,255,.85);
}

/* --- 12.3 THEME COULEUR, largeur mobile ---------------------------------
 * Sous 1310px, le menu deroulant s ouvre A L INTERIEUR du tiroir plein ecran.
 * En « couleur » ce tiroir est bleu nuit alors que les panneaux sont blancs :
 * on rend les panneaux transparents et leurs textes clairs, sinon on obtient
 * des rectangles blancs dans un tiroir sombre.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 1310px) {
    html[data-theme='couleur'] {
        --erp-menu-panneau-fond:       transparent;
        --erp-menu-panneau-texte:      #ffffff;
        --erp-menu-panneau-texte-doux: #cadeef;
        --erp-menu-panneau-titre:      #9fd0ff;
        --erp-menu-panneau-survol:     #ffffff;
        --erp-menu-panneau-separateur: rgba(255,255,255,.18);
        --erp-menu-panneau-ombre:      none;
    }
}

/* --- 12.4 Bloc utilisateur du bandeau ------------------------------------
 * `.user .tile_menu1` prend sa couleur de --text_color (style.css:370), donc
 * suit deja le theme. On ne force plus rien : le bandeau ayant lui aussi
 * change de couleur, l ancien forcage a #f2f2f2 (SECTION 8.2) produirait du
 * blanc sur blanc en theme clair.
 * On aligne juste le libelle sur --erp-menu-texte pour que barre et texte
 * restent solidaires quel que soit le theme.
 * ------------------------------------------------------------------------ */
/* ATTENTION : le selecteur porte sur `> span.font_Extra_large` et PAS sur
 * `span` tout court. Le bloc .tile_menu1 contient aussi l avatar
 * (`span.ua-btn`, dont la couleur de texte est calculee en PHP selon la
 * luminosite de la couleur du technicien) et son menu deroulant
 * (`span.ua-menu`, blanc avec du texte #242D56). Un selecteur `span` generique
 * repeignait ces deux elements et produisait, en theme « couleur », du blanc
 * sur blanc dans le menu de l avatar. */
html:is([data-theme='clair'], [data-theme='couleur']) nav .user,
html:is([data-theme='clair'], [data-theme='couleur']) nav .user .tile_menu1,
html:is([data-theme='clair'], [data-theme='couleur']) nav .user .tile_menu1 > span.font_Extra_large,
html:is([data-theme='clair'], [data-theme='couleur']) nav .user .tile_menu1:hover {
    color: var(--erp-menu-texte) !important;
}

/* Icones FontAwesome du bandeau (burger, croix) : la SECTION 6 les repeint en
   --accent-tres-clair, ce qui est juste sur fond clair mais illisible sur le
   bandeau degrade du theme « couleur ». On les realigne sur --erp-menu-texte. */
html:is([data-theme='clair'], [data-theme='couleur']) nav .wrapper .btn i,
html:is([data-theme='clair'], [data-theme='couleur']) nav .wrapper .btn .fa_icon {
    color: var(--erp-menu-texte) !important;
}


/* --- 12.5 Priorite sur les regles GENERIQUES de la SECTION 4 --------------
 * La SECTION 4 pose `html:is(clair,couleur) a { color: var(--lien) }`. Cette
 * regle a la MEME specificite que `.nav-links li a` de menu.css, et theme.css
 * est charge apres : elle gagnait, et tous les liens du bandeau repassaient en
 * bleu --lien au lieu de suivre --erp-menu-texte (illisible sur le degrade du
 * theme « couleur »).
 * On re-affirme donc ici les couleurs du menu avec une specificite superieure.
 * Toutes les regles sont prefixees par `nav` : aucune fuite possible ailleurs,
 * et en particulier aucune vers l iframe du widget Elsa.
 * ------------------------------------------------------------------------ */
html:is([data-theme='clair'], [data-theme='couleur']) nav .nav-links li a,
html:is([data-theme='clair'], [data-theme='couleur']) nav .nav-links li a.desktop-item,
html:is([data-theme='clair'], [data-theme='couleur']) nav .wrapper .logo .lien,
html:is([data-theme='clair'], [data-theme='couleur']) nav .wrapper .logo a {
    color: var(--erp-menu-texte);
}
html:is([data-theme='clair'], [data-theme='couleur']) nav .nav-links li a:hover {
    color: var(--erp-menu-survol-texte) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) nav .nav-links li a.active,
html:is([data-theme='clair'], [data-theme='couleur']) nav .nav-links li a[style*="background"] {
    color: var(--erp-menu-actif-texte) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) nav .drop-menu li a,
html:is([data-theme='clair'], [data-theme='couleur']) nav .content .row header {
    color: var(--erp-menu-panneau-texte);
}
html:is([data-theme='clair'], [data-theme='couleur']) nav .content .row header {
    color: var(--erp-menu-panneau-titre) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) nav .row .mega-links li a {
    color: var(--erp-menu-panneau-texte-doux);
}
html:is([data-theme='clair'], [data-theme='couleur']) nav .row .mega-links li a:hover,
html:is([data-theme='clair'], [data-theme='couleur']) nav .drop-menu li a:hover {
    color: var(--erp-menu-panneau-survol) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) nav .nav-links .mobile-item {
    color: var(--erp-menu-mobile-item);
}

/* --- 12.6 Pastilles de notification DU BANDEAU (mark.rubberBand / .swing) --
 * DEFAUT MESURE le 04/08/2026 : style.css:2318 leur donne
 *   background: rgba(79,195,247,.22) ; color: var(--accent-cyan-2)
 * En theme « couleur », --accent-cyan-2 vaut #0b3c7c (bleu fonce) et le fond
 * translucide cyan se pose sur le bandeau bleu : contraste mesure 1.19:1 a
 * 2.15:1 selon l endroit du degrade. Illisible.
 * En clair le contraste passe (8.57:1) mais le halo cyan est sale sur blanc.
 * Regle volontairement prefixee par `nav` : les memes pastilles existent dans
 * posts.php (compteur de « j aime ») et ne doivent PAS etre touchees ici.
 * ------------------------------------------------------------------------ */
html[data-theme='couleur'] nav mark.rubberBand,
html[data-theme='couleur'] nav mark.swing {
    background: rgba(255,255,255,.92) !important;
    color: #0b3c7c !important;
    border-color: rgba(255,255,255,.90) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html[data-theme='clair'] nav mark.rubberBand,
html[data-theme='clair'] nav mark.swing {
    box-shadow: none !important;
    text-shadow: none !important;
}


/* ==========================================================================
 * SECTION 13 — PAGE DE CONNEXION login.php (04/08/2026)
 * --------------------------------------------------------------------------
 * login.php inclut desormais _head.php. En theme sombre rien ne change (aucune
 * regle de cette section ne s applique). En clair/couleur, la carte de
 * connexion, entierement ecrite en bleu nuit dans css/style_login_refonte.css,
 * est convertie ici.
 *
 * Tout est prefixe par `body.login-page` : aucune regle nue, donc aucune fuite
 * possible vers l iframe du widget Elsa.
 *
 * Contrastes mesures (avant -> apres, theme clair) :
 *   .subtitle        #5a6781 / #09101e = 3.34:1  ->  #43566a / #ffffff = 7.56:1
 *   .login-badge     #7a90a8 / #09101e = 5.65:1  ->  #43566a / #eaf1f6 = 6.88:1
 *   .login-slogan    #cfe0f2 / #04080f = 14.7:1  ->  #43566a / #f3f5f8 = 7.19:1
 *   .welcome         #4fc3f7 / #09101e = 9.75:1  ->  #0e4570 / #ffffff = 9.98:1
 *   bouton Connexion #ffffff / degrade bleu      ->  #ffffff / #14639f = 6.33:1
 *
 * 04/08/2026 — le theme SOMBRE de `.subtitle` etait lui aussi insuffisant
 * (#5a6781 sur #09101e = 3.34:1). Corrige a la source, dans
 * css/style_login_refonte.css : #5A6781 -> #72809C = 4.78:1. Aucune regle de
 * cette section n en depend (elles imposent var(--texte-attenue) en clair et
 * en couleur), le rendu clair/couleur est donc inchange.
 * ========================================================================== */
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page {
    background: var(--fond) !important;
}

html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--bordure) !important;
    box-shadow: var(--ombre-carte) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card:hover {
    border-color: var(--accent-bordure) !important;
    box-shadow: var(--ombre-carte) !important;
}

html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card .welcome {
    color: var(--accent-tres-clair) !important;
    text-shadow: none !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card .subtitle,
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-slogan,
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-byessia span,
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-header .app-title {
    color: var(--texte-attenue) !important;
}

/* Champs : style_login_refonte.css les peint en bleu nuit avec !important. */
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card input[type="text"],
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card input[type="password"] {
    background: var(--surface) !important;
    border: 1px solid var(--bordure) !important;
    box-shadow: none !important;
    color: var(--texte) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card input[type="text"]:hover,
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card input[type="password"]:hover,
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card input[type="text"]:focus,
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card input[type="password"]:focus {
    background: var(--surface) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-fond) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card input::placeholder {
    color: var(--texte-faible) !important;
    opacity: 1;
}

/* Bouton Connexion */
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card .form_input_button_login {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: var(--sur-accent) !important;
    text-shadow: none !important;
    box-shadow: var(--ombre-carte) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card .form_input_button_login:hover {
    background: var(--accent-vif) !important;
    border-color: var(--accent-vif) !important;
    box-shadow: var(--ombre-carte) !important;
}

/* Oeil « afficher le mot de passe » */
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .pw-eye {
    color: var(--texte-attenue) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .pw-eye:hover {
    color: var(--accent) !important;
}

/* Badges bas de carte */
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-badge {
    background: var(--accent-fond) !important;
    border: 1px solid var(--accent-bordure) !important;
    color: var(--texte-attenue) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-badge .dot {
    background: var(--accent) !important;
}

/* Liens de la carte */
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card a {
    color: var(--lien) !important;
}
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-card a:hover {
    color: var(--accent-vif) !important;
    text-shadow: none !important;
}

/* Messages succes/erreur */
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-msg {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    border: 1px solid var(--bordure) !important;
    color: var(--texte) !important;
}

/* Le logo HUB porte une ombre portee pensee pour un fond noir. */
html:is([data-theme='clair'], [data-theme='couleur']) body.login-page .login-header .login-hub {
    filter: drop-shadow(0 4px 12px rgba(16,24,40,.18)) !important;
}


/* ==========================================================================
 * SECTION 14 — MODALE D AIDE _aide_dashboard.php (04/08/2026)
 * --------------------------------------------------------------------------
 * La modale ecrit ses couleurs en STYLE EN LIGNE : impossible de les surcharger
 * sans !important partout. On a donc converti les valeurs en ligne en
 * `var(--erp-aide-x, <valeur historique>)` — un style en ligne peut consommer
 * une variable CSS. Le repli redonne exactement l ancienne modale sombre.
 * Seules les valeurs sont definies ici, aucune regle de selecteur.
 * ========================================================================== */
html:is([data-theme='clair'], [data-theme='couleur']) {
    --erp-aide-btn-fond:     var(--accent);
    --erp-aide-btn-texte:    var(--sur-accent);
    --erp-aide-voile:        rgba(15,23,42,.45);
    --erp-aide-fond:         var(--surface);
    --erp-aide-texte:        var(--texte);
    --erp-aide-bordure:      var(--bordure);
    --erp-aide-titre:        var(--texte);
    --erp-aide-fermer-fond:  var(--accent);
    --erp-aide-fermer-texte: var(--sur-accent);
    --erp-aide-chapo:        var(--texte-attenue);
    --erp-aide-h3:           var(--accent-tres-clair);
    --erp-aide-h3-admin:     var(--succes-texte);
}


/* ==========================================================================
 * SECTION 15 — MODALE « Consulter / Pointer » de planning.php (04/08/2026)
 * --------------------------------------------------------------------------
 * Meme methode que la SECTION 14 : les couleurs etaient en style EN LIGNE dans
 * planning.php, elles ont ete converties en var(--erp-modale-x, <historique>).
 * Le repli redonne exactement la modale sombre d origine.
 *
 * Contrastes mesures (texte) :
 *   sombre  (inchange) titre #cfe6ff / #0e2038 = 12.80:1
 *                      « Consulter » #cfe6ff / #16406a =  8.31:1
 *                      « Pointer »   #eaffea / #1f7a3d =  5.11:1
 *                      « Annuler »   #9fb6cf / #0e2038 =  7.85:1
 *   clair              titre  #111a24 / #ffffff = 17.54:1
 *                      « Consulter » #ffffff / #14639f =  6.33:1
 *                      « Pointer »   #ffffff / #15803d =  5.02:1
 *                      « Annuler »   #43566a / #ffffff =  7.56:1
 *   couleur            « Pointer »   #ffffff / #12703a =  6.17:1
 * ========================================================================== */
html:is([data-theme='clair'], [data-theme='couleur']) {
    --erp-modale-voile:      rgba(15,23,42,.45);
    --erp-modale-fond:       var(--surface);
    --erp-modale-titre:      var(--texte);
    --erp-modale-btn1-fond:  var(--accent);
    --erp-modale-btn1-texte: var(--sur-accent);
    --erp-modale-btn2-fond:  var(--succes);
    --erp-modale-btn2-texte: #ffffff;
    --erp-modale-annuler:    var(--texte-attenue);
}

/* --------------------------------------------------------------------------
 * 10.3 — En-tetes de colonnes de jours du calendrier
 * Constate par Dominique le 04/08/2026 sur mobile (planning) : le libelle du
 * jour (\« mar 04/08 \») est quasi invisible en theme clair et couleur.
 * Cause : la section 10.1 ne traite que .fc-col-header-cell, alors que le
 * texte est porte par .fc-col-header-cell-CUSHION, qui garde son #e6eefb
 * en dur (fc-maison.css l.108) — clair sur clair.
 * -------------------------------------------------------------------------- */
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-col-header-cell {
  background: #eaeff6 !important;
}
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-col-header-cell-cushion {
  color: #263445 !important;
}
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-col-header-cell.fc-day-today {
  background: #cfe0f2 !important;
}
html:is([data-theme=clair], [data-theme=couleur]) .fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
  color: #0f3a63 !important;
}

/* --------------------------------------------------------------------------
 * 12.7 — Separation du bandeau blanc (theme clair)
 * Dominique valide le bandeau blanc (04/08/2026) : le logo ne le derange pas.
 * Reste le second point souleve : sans contraste de fond, la barre de
 * navigation ne se distingue plus du contenu. On la « pose » sans la colorer :
 * une bordure basse nette + une ombre discrete suffisent a retablir la
 * hierarchie visuelle, sans toucher a l'identite.
 * N'affecte que le theme clair (le thème couleur garde son degrade).
 * -------------------------------------------------------------------------- */
html[data-theme=clair] .wrapper > nav,
html[data-theme=clair] nav.nav_bar,
html[data-theme=clair] .bg_total > nav {
  border-bottom: 1px solid #d3dce6 !important;
  box-shadow: 0 2px 6px rgba(15, 51, 87, 0.08) !important;
}

/* ==========================================================================
 * SECTION 16 — MODULE « POINTAGE DES ASTREINTES » (04/08/2026)
 * --------------------------------------------------------------------------
 * Constate par Dominique sur mobile le 04/08/2026 : le bandeau du haut suivait
 * le theme, mais TOUT le corps de l application restait sombre (fond bleu nuit,
 * titre « Techniciens » blanc, cartes techniciens sombres, barre de navigation
 * basse sombre).
 *
 * CAUSE : pointage_astreintes.php n incluait PAS _head.php. La page est un
 * document HTML autonome (pointage_astreintes_app.html) avec sa propre palette
 * :root, et le chargeur y injectait en plus un bloc <style> « skin » qui
 * re-forcait la palette bleu nuit. Ni css/theme.css ni js/theme.js n etaient
 * charges : data-theme n etait jamais pose sur <html>, la page ne pouvait donc
 * pas suivre le theme. Le bandeau semblait suivre le theme parce qu il est
 * simplement blanc/clair par construction, pas parce qu il etait theme.
 *
 * CORRECTIF : le chargeur du STAGING inclut desormais _head.php, et les 65
 * couleurs en dur de la page (hors modele de document exporte) ont ete
 * converties en var(--erp-pa-<nom>, <valeur historique>). En theme sombre
 * AUCUNE variable --erp-pa-* n est definie : les replis s appliquent et le
 * rendu est strictement identique a l existant (diff pixel : 0).
 *
 * PORTEE : tout est prefixe par `body.pa-page` — rien ne fuit vers l iframe
 * du widget Elsa ni vers les autres pages.
 *
 * Contrastes MESURES (texte, WCAG 2.1, compositage alpha inclus) :
 *   clair    corps #111a24 / #f3f5f8              = 16.06:1
 *            carte #111a24 / #ffffff              = 17.54:1
 *            libelle attenue #43566a / #ffffff    =  7.56:1
 *            en-tete tableau #43566a / #eaeff6    =  6.54:1
 *            bouton primaire #ffffff / #14639f    =  6.33:1
 *            bouton danger #ffffff / #a51616      =  7.70:1
 *            badge orange #14639f / tuile 12%     =  5.31:1
 *            badge vert #12703a / tuile 12%       =  5.18:1
 *            badge bleu #14639f / tuile 12%       =  5.31:1
 *            badge rouge #a51616 / tuile 10%      =  6.45:1
 *            barre basse #43566a / #ffffff        =  7.56:1
 *            techniciens (5 couleurs) / #ffffff   = 5.02 a 7.45:1
 *   couleur  memes paires                         = 5.18 a 18.29:1
 *   sombre   INCHANGE (replis) — mesures reportees dans le compte rendu.
 * ========================================================================== */

/* --- 16.1 Palette de la page, par theme ----------------------------------
 * ATTENTION : ne JAMAIS referencer var(--surface) ni var(--accent) ici. Ces
 * deux noms sont redefinis sur body.pa-page par le bloc « skin » du chargeur ;
 * y faire reference creerait un cycle, la propriete deviendrait invalide et
 * l element serait rendu transparent. On passe par les noms non conflictuels
 * --fond-panneau et --accent-cyan, qui valent la meme chose dans les 3 themes.
 * ------------------------------------------------------------------------ */
html:is([data-theme='clair'], [data-theme='couleur']) body.pa-page {
    /* Fonds et surfaces */
    --erp-pa-fond:        var(--fond);
    --erp-pa-surface:     var(--fond-panneau);
    --erp-pa-surface2:    var(--surface-haute);
    --erp-pa-bordure:     var(--bordure);
    --erp-pa-corps-fond:  var(--fond);
    --erp-pa-bandeau-fond:    var(--fond-panneau);
    --erp-pa-bandeau-bordure: var(--bordure);
    --erp-pa-menu-fond:   var(--fond-panneau);
    --erp-pa-nav-fond:    var(--fond-panneau);
    --erp-pa-logo-fond:   var(--fond-panneau);
    --erp-pa-scan-fond:   var(--surface-haute);

    /* Textes */
    --erp-pa-texte:       var(--texte);
    --erp-pa-attenue:     var(--texte-attenue);
    --erp-pa-sur-accent:  var(--sur-accent);
    --erp-pa-lien:        var(--lien);
    --erp-pa-lien-bordure: var(--accent-bordure);

    /* Accent */
    --erp-pa-accent:      var(--accent-cyan);
    --erp-pa-accent2:     var(--accent-vif);
    --erp-pa-logo-degrade: linear-gradient(135deg, var(--accent-cyan), var(--accent-vif));
    --erp-pa-logo-ombre:  var(--accent-bordure);
    --erp-pa-fab-ombre:   var(--accent-bordure);
    --erp-pa-navitem-actif-fond:  var(--erp-pa-accent-fond);
    --erp-pa-navitem-actif-texte: var(--accent-cyan);

    /* Couleurs d etat */
    --erp-pa-vert:        var(--accent-green);
    --erp-pa-rouge:       var(--accent-red);
    --erp-pa-bleu:        var(--accent-blue);
    --erp-pa-violet:      var(--accent-purple);
    --erp-pa-jaune:       var(--ambre-texte);

    /* Voiles et survols */
    --erp-pa-voile:       rgba(15, 23, 42, .45);
    --erp-pa-voile-menu:  rgba(15, 23, 42, .40);
    --erp-pa-ombre-toast: rgba(16, 24, 40, .18);
    --erp-pa-survol:      rgba(15, 51, 87, .05);
}

/* --- 16.2 Teintes : elles doivent suivre l accent du theme --------------- */
html[data-theme='clair'] body.pa-page {
    --erp-pa-accent-fond:       rgba(20, 99, 159, .12);
    --erp-pa-accent-fond-doux:  rgba(20, 99, 159, .06);
    --erp-pa-accent-fond-ligne: rgba(20, 99, 159, .08);
    --erp-pa-accent-ombre:      rgba(20, 99, 159, .30);
    --erp-pa-vert-fond:         rgba(18, 112, 58, .12);
    --erp-pa-vert-bordure:      rgba(18, 112, 58, .40);
    --erp-pa-vert-fond-doux:    rgba(18, 112, 58, .06);
    --erp-pa-vert-fond-etat:    rgba(18, 112, 58, .10);
    --erp-pa-bleu-fond:         rgba(20, 99, 159, .12);
    --erp-pa-bleu-bordure:      rgba(20, 99, 159, .40);
    --erp-pa-bleu-fond-doux:    rgba(20, 99, 159, .06);
    --erp-pa-bleu-fond-etat:    rgba(20, 99, 159, .10);
    --erp-pa-rouge-fond:        rgba(165, 22, 22, .10);
    --erp-pa-rouge-bordure:     rgba(165, 22, 22, .40);
    --erp-pa-rouge-fond-doux:   rgba(165, 22, 22, .06);
    --erp-pa-rouge-fond-etat:   rgba(165, 22, 22, .10);
    --erp-pa-jaune-fond:        rgba(138, 64, 8, .12);

    --erp-pa-tech-orange: #9a3412;  --erp-pa-tech-orange-fond: rgba(154, 52, 18, .12);
    --erp-pa-tech-bleu:   #14639f;  --erp-pa-tech-bleu-fond:   rgba(20, 99, 159, .12);
    --erp-pa-tech-vert:   #12703a;  --erp-pa-tech-vert-fond:   rgba(18, 112, 58, .12);
    --erp-pa-tech-violet: #6d3fa0;  --erp-pa-tech-violet-fond: rgba(109, 63, 160, .12);
    --erp-pa-tech-jaune:  #8a4008;  --erp-pa-tech-jaune-fond:  rgba(138, 64, 8, .12);
    --erp-pa-tech-defaut: #4b5e73;
}

html[data-theme='couleur'] body.pa-page {
    --erp-pa-accent-fond:       rgba(19, 88, 176, .12);
    --erp-pa-accent-fond-doux:  rgba(19, 88, 176, .06);
    --erp-pa-accent-fond-ligne: rgba(19, 88, 176, .08);
    --erp-pa-accent-ombre:      rgba(19, 88, 176, .30);
    --erp-pa-vert-fond:         rgba(18, 112, 58, .12);
    --erp-pa-vert-bordure:      rgba(18, 112, 58, .40);
    --erp-pa-vert-fond-doux:    rgba(18, 112, 58, .06);
    --erp-pa-vert-fond-etat:    rgba(18, 112, 58, .10);
    --erp-pa-bleu-fond:         rgba(19, 88, 176, .12);
    --erp-pa-bleu-bordure:      rgba(19, 88, 176, .40);
    --erp-pa-bleu-fond-doux:    rgba(19, 88, 176, .06);
    --erp-pa-bleu-fond-etat:    rgba(19, 88, 176, .10);
    --erp-pa-rouge-fond:        rgba(157, 21, 21, .10);
    --erp-pa-rouge-bordure:     rgba(157, 21, 21, .40);
    --erp-pa-rouge-fond-doux:   rgba(157, 21, 21, .06);
    --erp-pa-rouge-fond-etat:   rgba(157, 21, 21, .10);
    --erp-pa-jaune-fond:        rgba(125, 59, 7, .12);

    --erp-pa-tech-orange: #9a3412;  --erp-pa-tech-orange-fond: rgba(154, 52, 18, .12);
    --erp-pa-tech-bleu:   #1358b0;  --erp-pa-tech-bleu-fond:   rgba(19, 88, 176, .12);
    --erp-pa-tech-vert:   #12703a;  --erp-pa-tech-vert-fond:   rgba(18, 112, 58, .12);
    --erp-pa-tech-violet: #6a3aa5;  --erp-pa-tech-violet-fond: rgba(106, 58, 165, .12);
    --erp-pa-tech-jaune:  #7d3b07;  --erp-pa-tech-jaune-fond:  rgba(125, 59, 7, .12);
    --erp-pa-tech-defaut: #48566e;
}

/* --- 16.3 Neutralisation des surcharges GENERIQUES de la section 4 -------
 * La section 4 pose `html:is(clair,couleur) button { color: var(--texte) }`
 * et `... a { color: var(--lien) }`. Sur cette page, `button` (0,2,1) bat
 * `.btn-primary` (0,1,0) : le texte des boutons pleins deviendrait sombre sur
 * fond accent. Idem pour `input/select` qui ecraserait le champ de saisie.
 * On rend donc a la page ses propres couleurs, sans regle generique nouvelle.
 * ------------------------------------------------------------------------ */
html:is([data-theme='clair'], [data-theme='couleur']) body.pa-page .btn-primary,
html:is([data-theme='clair'], [data-theme='couleur']) body.pa-page .btn-danger,
html:is([data-theme='clair'], [data-theme='couleur']) body.pa-page .month-btn.active,
html:is([data-theme='clair'], [data-theme='couleur']) body.pa-page .mnav-fab {
    color: var(--erp-pa-sur-accent, #fff);
}
html:is([data-theme='clair'], [data-theme='couleur']) body.pa-page .btn-ghost {
    color: var(--erp-pa-attenue, #8fa6c8);
}
html:is([data-theme='clair'], [data-theme='couleur']) body.pa-page .mnav-btn {
    color: var(--erp-pa-attenue, #8fa6c8);
}
html:is([data-theme='clair'], [data-theme='couleur']) body.pa-page .mnav-btn.active,
html:is([data-theme='clair'], [data-theme='couleur']) body.pa-page .nav-item.active {
    color: var(--erp-pa-accent, #4fc3f7);
}
html:is([data-theme='clair'], [data-theme='couleur']) body.pa-page .saisie-input {
    background-color: var(--erp-pa-surface2, #16294d);
    color: var(--erp-pa-texte, #e6edf3);
}
/* Les en-tetes de colonnes : le texte est porte par le <th> lui-meme, mais la
 * section 4 le repeint en --texte-doux. On garde le gris attenue maison, qui
 * reste mesure a 6.54:1 en clair. */
html:is([data-theme='clair'], [data-theme='couleur']) body.pa-page th {
    color: var(--erp-pa-attenue, #8fa6c8);
}

/* --------------------------------------------------------------------------
 * CORRECTIF 06/08/2026 20h30 — infobulles des icones du tableau de bord.
 * Signale par Dominique en PROD : « le bleu sur le noir ».
 * Cause : la regle de style.css qui colore les raccourcis porte des selecteurs
 * d ID (#icon_list_stock, #icon_post…) AVEC !important ; en clair elle vaut
 * --accent-tres-clair (#0e4570). Le <span class="tooltiptext"> est enfant de
 * ce <a> et son propre `color:#fff` (sans !important) ne tient pas.
 * Le fond de l infobulle reste #222 dans les TROIS themes : son texte doit
 * donc rester blanc partout. On le force explicitement, au meme poids.
 * -------------------------------------------------------------------------- */
.tooltip_icon .tooltiptext,
.tooltip_icon_like .tooltiptext_like,
.dash_container_icons .tooltiptext {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
 * CORRECTIF 06/08/2026 20h35 — barre « Filtre type » du planning maison.
 * Signale par Dominique : le planning semblait VIDE en prod.
 * Les donnees etaient intactes : un filtre etait actif (localStorage
 * `pm_hidden_types`), et les pastilles des types MASQUES sont stylees
 * `.pm-fchip.off { opacity:.4; background:transparent }` avec `color:#e6eefb`
 * en dur (blanc bleute) — donc INVISIBLES sur fond clair. Impossible de voir
 * qu un filtre etait actif, ni de le desactiver.
 * Ce bloc n avait pas ete converti (il fait partie des cas restants).
 * -------------------------------------------------------------------------- */
html:is([data-theme='clair'], [data-theme='couleur']) .pm-typefilter .pm-flabel {
    color: var(--texte);
}
html:is([data-theme='clair'], [data-theme='couleur']) .pm-fchip {
    background: var(--surface-haute);
    border-color: var(--bordure);
    color: var(--texte);
}
html:is([data-theme='clair'], [data-theme='couleur']) .pm-fchip.off {
    background: transparent;
    color: var(--texte-attenue);
    opacity: 1;              /* la barre + le gris suffisent a marquer l etat */
}
html:is([data-theme='clair'], [data-theme='couleur']) .pm-fall {
    border-color: var(--bordure);
    color: var(--accent);
}
