/*
 * Habillage Fluent 2 (Fluent UI Web Components v3 / React v9) du portail Fiscalis.
 * Semantic UI reste en place pour son balisage et son JavaScript ; cette feuille, chargée après lui,
 * reprend les jetons de conception de Fluent 2 et restyle ses composants.
 * Thème sombre : attribut data-theme="dark" sur <html>.
 */

/* ===== 1. Jetons Fluent 2 ===== */
:root {
    --fontFamilyBase: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
    --fontFamilyDisplay: 'Segoe UI Variable Display', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
    --fontFamilyMonospace: Consolas, 'Courier New', Courier, monospace;

    --borderRadiusSmall: 2px;
    --borderRadiusMedium: 4px;
    --borderRadiusLarge: 6px;
    --borderRadiusXLarge: 8px;
    --borderRadiusCircular: 10000px;

    --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1);
    --durationFaster: 100ms;
    --durationNormal: 200ms;

    --colorNeutralForeground1: #242424;
    --colorNeutralForeground2: #424242;
    --colorNeutralForeground3: #616161;
    --colorNeutralForeground4: #707070;
    --colorNeutralForegroundDisabled: #bdbdbd;
    --colorNeutralForegroundOnBrand: #ffffff;

    --colorNeutralBackground1: #ffffff;
    --colorNeutralBackground1Hover: #f5f5f5;
    --colorNeutralBackground1Pressed: #e0e0e0;
    --colorNeutralBackground1Selected: #ebebeb;
    --colorNeutralBackground2: #fafafa;
    --colorNeutralBackground3: #f5f5f5;
    --colorNeutralBackground4: #f0f0f0;
    --colorNeutralBackground4Hover: #fafafa;
    --colorNeutralBackground4Selected: #ffffff;
    --colorNeutralBackground5: #ebebeb;
    --colorNeutralBackgroundDisabled: #f0f0f0;
    --colorSubtleBackgroundHover: #f5f5f5;
    --colorSubtleBackgroundPressed: #e0e0e0;

    --colorNeutralStroke1: #d1d1d1;
    --colorNeutralStroke1Hover: #c7c7c7;
    --colorNeutralStroke2: #e0e0e0;
    --colorNeutralStroke3: #f0f0f0;
    --colorNeutralStrokeAccessible: #616161;
    --colorNeutralStrokeAccessibleHover: #575757;
    --colorNeutralStrokeDisabled: #e0e0e0;
    --colorStrokeFocus2: #000000;

    --colorBrandBackground: #0f6cbd;
    --colorBrandBackgroundHover: #115ea3;
    --colorBrandBackgroundPressed: #0c3b5e;
    --colorBrandBackground2: #ebf3fc;
    --colorBrandForeground1: #0f6cbd;
    --colorBrandForeground2: #115ea3;
    --colorBrandForegroundLink: #115ea3;
    --colorBrandForegroundLinkHover: #0f548c;
    --colorBrandStroke2: #b4d6fa;

    --colorStatusSuccessBackground1: #f1faf1;
    --colorStatusSuccessForeground1: #0e700e;
    --colorStatusSuccessBorder1: #9fd89f;
    --colorStatusSuccessBackground3: #107c10;
    --colorStatusWarningBackground1: #fff9f5;
    --colorStatusWarningForeground1: #bc4b09;
    --colorStatusWarningBorder1: #fdcfb4;
    --colorStatusDangerBackground1: #fdf3f4;
    --colorStatusDangerForeground1: #b10e1c;
    --colorStatusDangerBorder1: #eeacb2;
    --colorStatusDangerBackground3: #c50f1f;
    --colorStatusDangerBackground3Hover: #b10e1c;

    --colorBackgroundOverlay: rgba(0, 0, 0, 0.4);

    --shadow2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
    --shadow4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
    --shadow8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
    --shadow16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
    --shadow28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14);
    --shadow64: 0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14);

    /* Anciennes variables du portail, rattachées aux jetons : les styles des pages suivent. */
    --bg-body: var(--colorNeutralBackground2);
    --bg-card: var(--colorNeutralBackground1);
    --bg-sidebar: var(--colorNeutralBackground4);
    --bg-panel: var(--colorNeutralBackground1);
    --bg-modal-header: var(--colorNeutralBackground1);
    --bg-modal-body: var(--colorNeutralBackground1);
    --bg-fiscal-section: var(--colorNeutralBackground3);
    --text-primary: var(--colorNeutralForeground1);
    --text-secondary: var(--colorNeutralForeground3);
    --border-color: var(--colorNeutralStroke2);
    --hover-color: var(--colorNeutralBackground3);
    --active-bg: var(--colorBrandBackground2);
    --active-text: var(--colorBrandForeground1);
    --key-display-bg: var(--colorNeutralBackground3);
    --shadow: var(--shadow4);
    --success-bg: var(--colorStatusSuccessBackground1);
    --success-text: var(--colorStatusSuccessForeground1);
    --warning-bg: var(--colorStatusWarningBackground1);
    --warning-text: var(--colorStatusWarningForeground1);
    --error-bg: var(--colorStatusDangerBackground1);
    --error-text: var(--colorStatusDangerForeground1);
    --badge-prod-bg: var(--colorBrandBackground2);
    --badge-prod-text: var(--colorBrandForeground2);
    --badge-dev-bg: var(--colorStatusWarningBackground1);
    --badge-dev-text: var(--colorStatusWarningForeground1);

    color-scheme: light;
}

[data-theme="dark"] {
    --colorNeutralForeground1: #ffffff;
    --colorNeutralForeground2: #d6d6d6;
    --colorNeutralForeground3: #adadad;
    --colorNeutralForeground4: #999999;
    --colorNeutralForegroundDisabled: #5c5c5c;

    --colorNeutralBackground1: #292929;
    --colorNeutralBackground1Hover: #3d3d3d;
    --colorNeutralBackground1Pressed: #1f1f1f;
    --colorNeutralBackground1Selected: #383838;
    --colorNeutralBackground2: #1f1f1f;
    --colorNeutralBackground3: #141414;
    --colorNeutralBackground4: #0a0a0a;
    --colorNeutralBackground4Hover: #1f1f1f;
    --colorNeutralBackground4Selected: #292929;
    --colorNeutralBackground5: #000000;
    --colorNeutralBackgroundDisabled: #141414;
    --colorSubtleBackgroundHover: #383838;
    --colorSubtleBackgroundPressed: #2e2e2e;

    --colorNeutralStroke1: #666666;
    --colorNeutralStroke1Hover: #757575;
    --colorNeutralStroke2: #525252;
    --colorNeutralStroke3: #3d3d3d;
    --colorNeutralStrokeAccessible: #adadad;
    --colorNeutralStrokeAccessibleHover: #bdbdbd;
    --colorNeutralStrokeDisabled: #424242;
    --colorStrokeFocus2: #ffffff;

    --colorBrandBackground: #115ea3;
    --colorBrandBackgroundHover: #0f6cbd;
    --colorBrandBackgroundPressed: #0c3b5e;
    --colorBrandBackground2: #082338;
    --colorBrandForeground1: #479ef5;
    --colorBrandForeground2: #62abf5;
    --colorBrandForegroundLink: #479ef5;
    --colorBrandForegroundLinkHover: #62abf5;
    --colorBrandStroke2: #0e4775;

    --colorStatusSuccessBackground1: #052505;
    --colorStatusSuccessForeground1: #54b054;
    --colorStatusSuccessBorder1: #107c10;
    --colorStatusWarningBackground1: #411200;
    --colorStatusWarningForeground1: #faa06b;
    --colorStatusWarningBorder1: #da3b01;
    --colorStatusDangerBackground1: #3b0509;
    --colorStatusDangerForeground1: #dc626d;
    --colorStatusDangerBorder1: #c50f1f;

    --colorBackgroundOverlay: rgba(0, 0, 0, 0.5);

    --shadow2: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28);
    --shadow4: 0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28);
    --shadow8: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28);
    --shadow16: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28);
    --shadow28: 0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28);
    --shadow64: 0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28);

    color-scheme: dark;
}

/* ===== 2. Base et typographie (Body1 : 14/20) ===== */
html { font-size: 14px; }

body {
    font-family: var(--fontFamilyBase);
    font-size: 14px;
    line-height: 20px;
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground2);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .ui.header, .ui.button, .ui.input, .ui.form, .ui.form input, .ui.form textarea, .ui.form select,
.ui.dropdown, .ui.dropdown .menu, .ui.menu, .ui.table, .ui.message, .ui.label, .ui.modal, .ui.checkbox, .ui.card, .ui.cards > .card,
.ui.list, .ui.statistic, .ui.statistic > .value, .ui.statistic > .label, input, textarea, select, button {
    font-family: var(--fontFamilyBase);
}

h1, .title1 { font-family: var(--fontFamilyDisplay); font-size: 28px; line-height: 36px; font-weight: 600; }
h2 { font-size: 24px; line-height: 32px; font-weight: 600; }
h3, .ui.header { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--colorNeutralForeground1); }
h4 { font-size: 16px; line-height: 22px; font-weight: 600; }
h1, h2, h3, h4 { color: var(--colorNeutralForeground1); }
.ui.header .sub.header, .ui.header > .sub.header { color: var(--colorNeutralForeground3); font-size: 14px; font-weight: 400; }
.ui.dividing.header { border-bottom-color: var(--colorNeutralStroke2); padding-bottom: 8px; }

a { color: var(--colorBrandForegroundLink); text-decoration: none; }
a:hover { color: var(--colorBrandForegroundLinkHover); text-decoration: underline; }
a.menu-item:hover, a.ui.button:hover, a.item:hover, a.ui.label:hover { text-decoration: none; }

small, .caption { font-size: 12px; line-height: 16px; color: var(--colorNeutralForeground3); }
code, pre, .monospace-text { font-family: var(--fontFamilyMonospace); }

::selection { background: var(--colorBrandBackground2); color: var(--colorNeutralForeground1); }

/* Focus clavier Fluent : anneau noir (ou blanc en sombre) de 2 px. */
:focus-visible {
    outline: 2px solid var(--colorStrokeFocus2) !important;
    outline-offset: 1px;
}

/* ===== 3. Icônes Fluent UI System Icons (masques SVG, à la place des glyphes Semantic) ===== */
i.icon {
    width: 20px;
    height: 20px;
    margin: 0 4px 0 0;
    font-size: 20px;
    line-height: 20px;
    vertical-align: middle;
    display: inline-block;
    opacity: 1;
}

i.icon:before {
    content: '' !important;
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor !important;
    -webkit-mask: var(--fi) center / contain no-repeat;
    mask: var(--fi) center / contain no-repeat;
}

i.icon.link { cursor: pointer; }
i.icon.green, i.green.icon { color: var(--colorStatusSuccessForeground1) !important; }

i.icon.home                 { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/home_20_regular.svg"); }
i.icon.building             { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/building_20_regular.svg"); }
i.icon.file                 { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/document_20_regular.svg"); }
i.icon.code                 { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/code_20_regular.svg"); }
i.icon.cog                  { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/settings_20_regular.svg"); }
i.icon.sign.out             { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/sign_out_20_regular.svg"); }
i.icon.layer.group          { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/layer_20_regular.svg"); }
i.icon.cloud                { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/cloud_20_regular.svg"); }
i.icon.plus                 { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/add_20_regular.svg"); }
i.icon.microchip            { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/developer_board_20_regular.svg"); }
i.icon.hdd                  { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/hard_drive_20_regular.svg"); }
i.icon.dropdown             { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/chevron_down_20_regular.svg"); }
i.icon.close, i.icon.times  { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/dismiss_20_regular.svg"); }
i.icon.times.circle         { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/dismiss_circle_20_regular.svg"); }
i.icon.server               { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/server_20_regular.svg"); }
i.icon.search               { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/search_20_regular.svg"); }
i.icon.eye                  { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/eye_20_regular.svg"); }
i.icon.eye.slash            { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/eye_off_20_regular.svg"); }
i.icon.copy                 { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/copy_20_regular.svg"); }
i.icon.trash                { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/delete_20_regular.svg"); }
i.icon.sync                 { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/arrow_sync_20_regular.svg"); }
i.icon.shield               { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/shield_20_regular.svg"); }
i.icon.redo                 { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/arrow_redo_20_regular.svg"); }
i.icon.moon                 { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/weather_moon_20_regular.svg"); }
i.icon.sun                  { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/weather_sunny_20_regular.svg"); }
i.icon.key                  { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/key_20_regular.svg"); }
i.icon.info                 { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/info_20_regular.svg"); }
i.icon.filter               { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/filter_20_regular.svg"); }
i.icon.exclamation          { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/warning_20_regular.svg"); }
i.icon.ellipsis             { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/more_horizontal_20_regular.svg"); }
i.icon.download             { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/arrow_download_20_regular.svg"); }
i.icon.clock                { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/clock_20_regular.svg"); }
i.icon.check                { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/checkmark_20_regular.svg"); }
i.icon.check.circle         { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/checkmark_circle_20_regular.svg"); }
i.icon.chart                { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/data_bar_vertical_20_regular.svg"); }
i.icon.arrow.up             { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/arrow_up_20_regular.svg"); }
i.icon.arrow.left           { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/arrow_left_20_regular.svg"); }

/* Icône de Bootstrap Icons restée dans le menu de compte. */
i.bi-person-circle:before {
    content: '' !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: currentColor;
    -webkit-mask: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/person_circle_20_regular.svg") center / contain no-repeat;
    mask: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/person_circle_20_regular.svg") center / contain no-repeat;
}

/* ===== 4. Boutons ===== */
.ui.button {
    font-family: var(--fontFamilyBase);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    min-height: 32px;
    padding: 5px 12px;
    margin: 0 4px 0 0;
    border-radius: var(--borderRadiusMedium);
    border: 1px solid var(--colorNeutralStroke1);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    transition: background var(--durationFaster) var(--curveEasyEase), border-color var(--durationFaster) var(--curveEasyEase);
}

.ui.button:hover {
    background: var(--colorNeutralBackground1Hover);
    border-color: var(--colorNeutralStroke1Hover);
    color: var(--colorNeutralForeground1);
}

.ui.button:active, .ui.active.button {
    background: var(--colorNeutralBackground1Pressed);
    border-color: var(--colorNeutralStroke1);
    color: var(--colorNeutralForeground1);
}

.ui.button > .icon:not(.button) { margin: 0 !important; opacity: 1; height: 20px; }

.ui.basic.button, .ui.basic.buttons .button, .ui.secondary.button {
    background: var(--colorNeutralBackground1) !important;
    color: var(--colorNeutralForeground1) !important;
    border: 1px solid var(--colorNeutralStroke1) !important;
    box-shadow: none !important;
}

.ui.basic.button:hover, .ui.secondary.button:hover {
    background: var(--colorNeutralBackground1Hover) !important;
    border-color: var(--colorNeutralStroke1Hover) !important;
}

.ui.primary.button, .ui.primary.buttons .button, .ui.blue.button {
    background: var(--colorBrandBackground) !important;
    color: var(--colorNeutralForegroundOnBrand) !important;
    border-color: transparent !important;
}

.ui.primary.button:hover, .ui.blue.button:hover { background: var(--colorBrandBackgroundHover) !important; }
.ui.primary.button:active, .ui.blue.button:active { background: var(--colorBrandBackgroundPressed) !important; }

.ui.negative.button, .ui.red.button {
    background: var(--colorStatusDangerBackground3) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.ui.negative.button:hover, .ui.red.button:hover { background: var(--colorStatusDangerBackground3Hover) !important; }

.ui.basic.negative.button, .ui.basic.red.button {
    background: var(--colorNeutralBackground1) !important;
    color: var(--colorStatusDangerForeground1) !important;
    border-color: var(--colorNeutralStroke1) !important;
}

.ui.positive.button, .ui.green.button {
    background: var(--colorStatusSuccessBackground3) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.ui.small.button, .ui.small.buttons .button { min-height: 28px; padding: 3px 10px; font-size: 14px; }
.ui.tiny.button, .ui.mini.button, .ui.tiny.buttons .button { min-height: 24px; padding: 2px 8px; font-size: 12px; line-height: 16px; gap: 4px; }
.ui.tiny.button > .icon, .ui.mini.button > .icon { width: 16px; height: 16px; }
.ui.large.button, .ui.big.button { min-height: 40px; padding: 8px 16px; font-size: 16px; line-height: 22px; }
.ui.fluid.button { display: flex; width: 100%; }
.ui.icon.button:not(.labeled) { padding: 5px; min-width: 32px; }
.ui.circular.button { border-radius: var(--borderRadiusCircular); }

.ui.button:disabled, .ui.buttons .disabled.button, .ui.disabled.button, .ui.disabled.active.button {
    background: var(--colorNeutralBackgroundDisabled) !important;
    color: var(--colorNeutralForegroundDisabled) !important;
    border-color: var(--colorNeutralStrokeDisabled) !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

.ui.loading.button:after { border-color: var(--colorNeutralForegroundOnBrand) transparent transparent; }

/* ===== 5. Champs de saisie ===== */
.ui.form input:not([type]), .ui.form input[type=date], .ui.form input[type=datetime-local], .ui.form input[type=email],
.ui.form input[type=number], .ui.form input[type=password], .ui.form input[type=search], .ui.form input[type=tel],
.ui.form input[type=text], .ui.form input[type=time], .ui.form input[type=url], .ui.form input[type=file],
.ui.input > input, .ui.form textarea, .ui.form select, .ui.selection.dropdown, .ui.form .ui.selection.dropdown {
    font-family: var(--fontFamilyBase) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    min-height: 32px;
    padding: 5px 10px !important;
    color: var(--colorNeutralForeground1) !important;
    background: var(--colorNeutralBackground1) !important;
    border: 1px solid var(--colorNeutralStroke1) !important;
    border-bottom-color: var(--colorNeutralStrokeAccessible) !important;
    border-radius: var(--borderRadiusMedium) !important;
    box-shadow: none !important;
    transition: border-color var(--durationFaster) var(--curveEasyEase), box-shadow var(--durationNormal) var(--curveEasyEase);
}

.ui.form input:hover, .ui.input > input:hover, .ui.form textarea:hover, .ui.form select:hover, .ui.selection.dropdown:hover {
    border-color: var(--colorNeutralStroke1Hover) !important;
    border-bottom-color: var(--colorNeutralStrokeAccessibleHover) !important;
}

/* Soulignement de marque à la saisie, comme Fluent 2. */
.ui.form input:focus, .ui.input > input:focus, .ui.form textarea:focus, .ui.form select:focus,
.ui.selection.active.dropdown, .ui.selection.dropdown:focus, .ui.form .field .ui.selection.active.dropdown {
    border-color: var(--colorNeutralStroke1) !important;
    border-bottom-color: var(--colorBrandForeground1) !important;
    box-shadow: inset 0 -1px 0 0 var(--colorBrandForeground1) !important;
    outline: none !important;
    border-radius: var(--borderRadiusMedium) !important;
}

.ui.form input::placeholder, .ui.input > input::placeholder, .ui.form textarea::placeholder { color: var(--colorNeutralForeground4) !important; opacity: 1; }
.ui.form textarea { min-height: 52px; padding: 6px 10px !important; }
.ui.form input[readonly], .ui.form input:disabled, .ui.form textarea:disabled {
    background: var(--colorNeutralBackgroundDisabled) !important;
    color: var(--colorNeutralForegroundDisabled) !important;
    border-color: var(--colorNeutralStrokeDisabled) !important;
}
.ui.form input[readonly] { color: var(--colorNeutralForeground2) !important; }

.ui.form .field > label, .ui.form .fields > label, .ui.form .inline.fields .field > label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--colorNeutralForeground1);
    margin: 0 0 4px 0;
}

.ui.form .required.field > label:after, .ui.form .field.required > label:after { color: var(--colorStatusDangerForeground1); margin-left: 4px; content: '*'; }
.ui.form .field { margin-bottom: 16px; }
.ui.form .fields { margin-bottom: 16px; }
.ui.form .fields > .field { margin-bottom: 0; }
.ui.form .field > small, .ui.form small { display: block; margin-top: 4px; }

.ui.form .field.error input, .ui.form .field.error textarea, .ui.form .error.field .ui.dropdown {
    background: var(--colorNeutralBackground1) !important;
    border-color: var(--colorStatusDangerBorder1) !important;
    border-bottom-color: var(--colorStatusDangerForeground1) !important;
    color: var(--colorNeutralForeground1) !important;
}
.ui.form .field.error > label, .field-validation-error, .text-danger, .validation-summary-errors { color: var(--colorStatusDangerForeground1) !important; font-size: 12px; }

/* Champ avec icône (mot de passe, recherche). */
.ui.icon.input > i.icon {
    width: 32px !important;
    height: 100%;
    opacity: 1;
    color: var(--colorNeutralForeground3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ui.icon.input > i.icon:before { width: 20px; height: 20px; margin: 0 auto; position: static; }
.ui.icon.input > i.link.icon:hover { color: var(--colorNeutralForeground1); }
.ui.icon.input > input { padding-right: 36px !important; }

/* ===== 6. Listes déroulantes et menus contextuels ===== */
.ui.dropdown .menu, .ui.selection.dropdown .menu, .ui.selection.active.dropdown .menu {
    background: var(--colorNeutralBackground1) !important;
    border: 1px solid transparent !important;
    border-radius: var(--borderRadiusMedium) !important;
    box-shadow: var(--shadow16) !important;
    padding: 4px !important;
    margin-top: 4px !important;
}

.ui.selection.dropdown .menu { border-top-width: 1px !important; min-width: 100% !important; width: auto; }

.ui.dropdown .menu > .item, .ui.selection.dropdown .menu > .item {
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--colorNeutralForeground2) !important;
    padding: 6px 8px !important;
    border: none !important;
    border-radius: var(--borderRadiusMedium);
    min-height: 32px;
}

.ui.dropdown .menu > .item:hover, .ui.selection.dropdown .menu > .item:hover {
    background: var(--colorNeutralBackground1Hover) !important;
    color: var(--colorNeutralForeground1) !important;
}

.ui.dropdown .menu .active.item, .ui.dropdown .menu .selected.item {
    background: var(--colorNeutralBackground1Selected) !important;
    color: var(--colorNeutralForeground1) !important;
    font-weight: 600 !important;
}

.ui.dropdown > .dropdown.icon, .ui.selection.dropdown > .dropdown.icon { width: 16px; height: 16px; margin: 0 0 0 8px; opacity: 1; color: var(--colorNeutralForeground3); }
.ui.selection.dropdown > .dropdown.icon { top: 50% !important; transform: translateY(-50%); right: 10px !important; padding: 0 !important; margin: 0 !important; }
.ui.dropdown .text, .ui.selection.dropdown > .text { color: var(--colorNeutralForeground1); }
.ui.dropdown > .default.text, .ui.selection.dropdown > .default.text { color: var(--colorNeutralForeground4) !important; }

/* ===== 7. Cases à cocher et interrupteurs ===== */
.ui.checkbox { min-height: 20px; }
.ui.checkbox label, .ui.checkbox + label {
    font-size: 14px;
    line-height: 20px;
    color: var(--colorNeutralForeground1) !important;
    padding-left: 28px;
}

.ui.checkbox:not(.toggle):not(.slider) label:before, .ui.checkbox:not(.toggle):not(.slider) .box:before {
    width: 16px;
    height: 16px;
    top: 2px;
    border-radius: var(--borderRadiusSmall);
    border: 1px solid var(--colorNeutralStrokeAccessible) !important;
    background: var(--colorNeutralBackground1) !important;
}

.ui.checkbox:not(.toggle):not(.slider) label:hover:before { border-color: var(--colorNeutralStrokeAccessibleHover) !important; }

.ui.checkbox:not(.toggle):not(.slider) input:checked ~ label:before, .ui.checkbox:not(.toggle):not(.slider) input:checked ~ .box:before {
    background: var(--colorBrandBackground) !important;
    border-color: var(--colorBrandBackground) !important;
}

.ui.checkbox:not(.toggle):not(.slider) label:after, .ui.checkbox:not(.toggle):not(.slider) .box:after {
    content: '' !important;
    width: 12px;
    height: 12px;
    top: 4px;
    left: 2px;
    background: var(--colorNeutralForegroundOnBrand);
    -webkit-mask: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/checkmark_12_regular.svg") center / contain no-repeat;
    mask: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/checkmark_12_regular.svg") center / contain no-repeat;
    opacity: 0;
}

.ui.checkbox:not(.toggle):not(.slider) input:checked ~ label:after { opacity: 1; color: transparent !important; }

/* Interrupteur Fluent 2 : piste de 40 × 20, curseur de 14 px. */
.ui.toggle.checkbox { min-height: 20px; }
.ui.toggle.checkbox label { padding-left: 52px !important; min-height: 20px; padding-top: 0; }
.ui.toggle.checkbox label:before, .ui.toggle.checkbox input ~ label:before, .ui.toggle.checkbox input:focus ~ label:before {
    width: 40px !important;
    height: 20px !important;
    top: 0;
    border-radius: var(--borderRadiusCircular);
    background: transparent !important;
    border: 1px solid var(--colorNeutralStrokeAccessible) !important;
    box-shadow: none !important;
}

.ui.toggle.checkbox label:after, .ui.toggle.checkbox input ~ label:after {
    width: 14px !important;
    height: 14px !important;
    top: 3px !important;
    left: 3px !important;
    background: var(--colorNeutralForeground3) !important;
    box-shadow: none !important;
    border-radius: 50%;
    transition: left var(--durationNormal) var(--curveEasyEase);
}

.ui.toggle.checkbox input:checked ~ label:before, .ui.toggle.checkbox input:focus:checked ~ label:before {
    background: var(--colorBrandBackground) !important;
    border-color: transparent !important;
}

.ui.toggle.checkbox input:checked ~ label:after { left: 23px !important; background: var(--colorNeutralForegroundOnBrand) !important; }
.ui.toggle.checkbox input:checked ~ label { color: var(--colorNeutralForeground1) !important; }

/* ===== 8. Cartes et surfaces ===== */
.fluent-card, .ui.segment, .ui.card, .ui.cards > .card {
    background: var(--colorNeutralBackground1) !important;
    border: 1px solid transparent !important;
    border-radius: var(--borderRadiusXLarge) !important;
    box-shadow: var(--shadow4) !important;
    color: var(--colorNeutralForeground1);
}

[data-theme="dark"] .fluent-card, [data-theme="dark"] .ui.segment, [data-theme="dark"] .ui.card {
    border-color: var(--colorNeutralStroke3) !important;
}

.fluent-card { padding: 20px; margin-bottom: 16px; }
.card-header { border-bottom: 1px solid var(--colorNeutralStroke2); margin-bottom: 16px; padding-bottom: 12px; }
.card-header h3 { font-size: 16px; line-height: 22px; font-weight: 600; }

.ui.card > .content, .ui.cards > .card > .content { border-top-color: var(--colorNeutralStroke2) !important; }
.ui.card > .content > .header, .ui.cards > .card > .content > .header { color: var(--colorNeutralForeground1); font-family: var(--fontFamilyBase); font-weight: 600; }
.ui.card .meta, .ui.card > .content > .description { color: var(--colorNeutralForeground3); }

.ui.divider { border-color: var(--colorNeutralStroke2) !important; }
hr { border: none; border-top: 1px solid var(--colorNeutralStroke2); }

/* ===== 9. Tableaux (DataGrid) ===== */
.ui.table {
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusXLarge);
    box-shadow: none;
    font-size: 14px;
    overflow: hidden;
    border-collapse: separate;
}

.ui.table thead th {
    background: var(--colorNeutralBackground1) !important;
    color: var(--colorNeutralForeground1) !important;
    font-weight: 600 !important;
    font-size: 14px;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--colorNeutralStroke2) !important;
    border-left: none !important;
}

.ui.table td {
    padding: 10px 12px !important;
    border-top: 1px solid var(--colorNeutralStroke2) !important;
    border-left: none !important;
    color: var(--colorNeutralForeground1);
    vertical-align: middle;
}

.ui.table tbody tr:first-child td { border-top: none !important; }
.ui.table tbody tr:hover, .ui.selectable.table tbody tr:hover { background: var(--colorNeutralBackground1Hover) !important; }
.ui.celled.table tr td, .ui.celled.table tr th { border-left: none !important; }
.ui.very.basic.table { border: none; }
.ui.very.basic.table thead th { background: transparent !important; }
.ui.table tfoot th { background: var(--colorNeutralBackground2) !important; border-top: 1px solid var(--colorNeutralStroke2) !important; color: var(--colorNeutralForeground2); }

/* ===== 10. Barres de message (MessageBar) ===== */
.ui.message {
    background: var(--colorNeutralBackground3);
    color: var(--colorNeutralForeground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    box-shadow: none !important;
    padding: 8px 40px 8px 12px;
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 16px 0;
}

.ui.message .header { font-family: var(--fontFamilyBase); font-size: 14px; font-weight: 600; margin-bottom: 2px; color: inherit; }
.ui.message p { margin: 0; opacity: 1; }
.ui.message > .close.icon { top: 8px; right: 8px; width: 20px; height: 20px; opacity: 1; color: var(--colorNeutralForeground2); }

.ui.success.message, .ui.positive.message, .ui.green.message {
    background: var(--colorStatusSuccessBackground1); border-color: var(--colorStatusSuccessBorder1); color: var(--colorNeutralForeground1);
}
.ui.success.message .header, .ui.positive.message .header { color: var(--colorStatusSuccessForeground1); }

.ui.warning.message, .ui.yellow.message, .ui.orange.message {
    background: var(--colorStatusWarningBackground1); border-color: var(--colorStatusWarningBorder1); color: var(--colorNeutralForeground1);
}
.ui.warning.message .header { color: var(--colorStatusWarningForeground1); }

.ui.error.message, .ui.negative.message, .ui.red.message {
    background: var(--colorStatusDangerBackground1); border-color: var(--colorStatusDangerBorder1); color: var(--colorNeutralForeground1);
}
.ui.error.message .header, .ui.negative.message .header { color: var(--colorStatusDangerForeground1); }

.ui.info.message, .ui.blue.message {
    background: var(--colorBrandBackground2); border-color: var(--colorBrandStroke2); color: var(--colorNeutralForeground1);
}

.ui.form .success.message, .ui.form .error.message, .ui.form .warning.message { display: none; }
.ui.form.success .success.message, .ui.form.error .error.message, .ui.form.warning .warning.message { display: block; }

/* ===== 11. Badges ===== */
.ui.label {
    font-family: var(--fontFamilyBase);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    padding: 2px 8px;
    min-height: 20px;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorNeutralBackground5);
    color: var(--colorNeutralForeground2);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ui.label > .icon { width: 12px; height: 12px; margin: 0; }
.ui.basic.label { background: transparent; border-color: var(--colorNeutralStroke1); color: var(--colorNeutralForeground1); }
.ui.green.label, .ui.green.labels .label { background: var(--colorStatusSuccessBackground1) !important; color: var(--colorStatusSuccessForeground1) !important; border-color: var(--colorStatusSuccessBorder1) !important; }
.ui.orange.label, .ui.yellow.label { background: var(--colorStatusWarningBackground1) !important; color: var(--colorStatusWarningForeground1) !important; border-color: var(--colorStatusWarningBorder1) !important; }
.ui.red.label { background: var(--colorStatusDangerBackground1) !important; color: var(--colorStatusDangerForeground1) !important; border-color: var(--colorStatusDangerBorder1) !important; }
.ui.blue.label, .ui.teal.label { background: var(--colorBrandBackground2) !important; color: var(--colorBrandForeground2) !important; border-color: var(--colorBrandStroke2) !important; }
.ui.grey.label { background: var(--colorNeutralBackground5) !important; color: var(--colorNeutralForeground2) !important; }

/* ===== 12. Boîte de dialogue (modale) ===== */
.ui.dimmer, .ui.page.dimmer, .ui.modals.dimmer { background: var(--colorBackgroundOverlay) !important; }

.ui.modal {
    background: var(--colorNeutralBackground1) !important;
    border-radius: var(--borderRadiusXLarge) !important;
    box-shadow: var(--shadow64) !important;
    border: 1px solid transparent;
    overflow: hidden;
}

.ui.modal > .header {
    font-family: var(--fontFamilyBase) !important;
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    padding: 24px 24px 8px !important;
    border-bottom: none !important;
    background: var(--colorNeutralBackground1) !important;
    color: var(--colorNeutralForeground1) !important;
}

.ui.modal > .content { padding: 8px 24px 16px !important; background: var(--colorNeutralBackground1) !important; color: var(--colorNeutralForeground1) !important; font-size: 14px; }

.ui.modal > .actions {
    padding: 8px 24px 24px !important;
    background: var(--colorNeutralBackground1) !important;
    border-top: none !important;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ui.modal > .actions > .button { margin: 0 !important; }
.ui.modal > .close { top: 20px !important; right: 20px !important; color: var(--colorNeutralForeground2) !important; width: 20px; height: 20px; }

/* ===== 13. Barre de progression ===== */
.ui.progress {
    height: 6px;
    background: var(--colorNeutralBackground5) !important;
    border-radius: var(--borderRadiusCircular) !important;
    box-shadow: none;
    overflow: hidden;
    margin: 0 0 8px 0;
}

.ui.progress .bar { height: 6px !important; min-width: 0 !important; background: var(--colorBrandBackground) !important; border-radius: var(--borderRadiusCircular) !important; }
.ui.progress.success .bar, .ui.green.progress .bar { background: var(--colorStatusSuccessBackground3) !important; }
.ui.progress.warning .bar, .ui.orange.progress .bar, .ui.yellow.progress .bar { background: #da3b01 !important; }
.ui.progress.error .bar, .ui.red.progress .bar { background: var(--colorStatusDangerBackground3) !important; }
.ui.progress > .label { color: var(--colorNeutralForeground3); font-weight: 400; font-size: 12px; }

/* ===== 14. Statistiques, listes, menus Semantic ===== */
.ui.statistic > .value { font-family: var(--fontFamilyDisplay); font-weight: 600; color: var(--colorNeutralForeground1) !important; }
.ui.statistic > .label { font-family: var(--fontFamilyBase); text-transform: none; font-weight: 400; font-size: 14px; color: var(--colorNeutralForeground3) !important; }
.ui.list > .item, .ui.list .list > .item { color: var(--colorNeutralForeground1); }
.ui.list .item .description { color: var(--colorNeutralForeground3); }
.ui.menu { background: var(--colorNeutralBackground1); border: 1px solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusMedium); box-shadow: none; }
.ui.menu .item { color: var(--colorNeutralForeground2); }
.ui.menu .active.item { background: var(--colorNeutralBackground1Selected); color: var(--colorNeutralForeground1); font-weight: 600; }
.ui.secondary.pointing.menu .active.item { border-color: var(--colorBrandForeground1); color: var(--colorNeutralForeground1); background: transparent; }

/* ===== 15. Structure de l'application : navigation et en-tête ===== */
.sidebar-menu {
    width: 260px;
    background: var(--colorNeutralBackground4) !important;
    border-right: 1px solid var(--colorNeutralStroke3) !important;
    padding: 12px 8px !important;
    gap: 2px;
}

.brand {
    padding: 4px 12px 20px !important;
    font-family: var(--fontFamilyDisplay);
    font-size: 20px !important;
    line-height: 28px;
    font-weight: 600 !important;
    color: var(--colorNeutralForeground1) !important;
    gap: 10px !important;
}

.brand > i.icon {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 6px;
    border-radius: var(--borderRadiusMedium);
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
}

.menu-item {
    position: relative;
    min-height: 40px;
    padding: 0 12px !important;
    margin: 0;
    border-radius: var(--borderRadiusMedium);
    border-left: none !important;
    color: var(--colorNeutralForeground2) !important;
    font-size: 14px !important;
    line-height: 20px;
    gap: 10px !important;
    transition: background var(--durationFaster) var(--curveEasyEase);
}

.menu-item > i.icon { margin: 0; color: var(--colorNeutralForeground2); }
.menu-item:hover { background: var(--colorNeutralBackground4Hover) !important; color: var(--colorNeutralForeground2) !important; }

.menu-item.active {
    background: var(--colorNeutralBackground4Selected) !important;
    color: var(--colorNeutralForeground1) !important;
    font-weight: 600 !important;
}

/* Indicateur de sélection Fluent 2 : trait vertical de marque, arrondi. */
.menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 20px;
    margin-top: -10px;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorBrandForeground1);
}

.menu-item.active > i.icon { color: var(--colorBrandForeground1); }
.menu-item.active > i.icon.home     { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/home_20_filled.svg"); }
.menu-item.active > i.icon.building { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/building_20_filled.svg"); }
.menu-item.active > i.icon.file     { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/document_20_filled.svg"); }
.menu-item.active > i.icon.code     { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/code_20_filled.svg"); }
.menu-item.active > i.icon.cog      { --fi: url("https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.338/icons/settings_20_filled.svg"); }

.main-content {
    margin-left: 260px !important;
    padding: 24px 32px 40px !important;
    min-width: 0;
    background: var(--colorNeutralBackground2);
}

.page-header { margin-bottom: 24px !important; gap: 16px; flex-wrap: wrap; }
.page-header h1 { font-family: var(--fontFamilyDisplay); font-size: 28px !important; line-height: 36px; font-weight: 600; }
.page-header p { color: var(--colorNeutralForeground3) !important; margin-top: 4px !important; }

/* Bouton d'icône discret (thème clair/sombre). */
.theme-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--borderRadiusMedium) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--colorNeutralForeground2) !important;
    margin: 0 4px !important;
}

.theme-toggle-btn:hover { background: var(--colorSubtleBackgroundHover) !important; color: var(--colorNeutralForeground1) !important; }
.theme-toggle-btn > i.icon { margin: 0; }

.ui.dropdown.button { gap: 8px; }
.ui.dropdown.button > .icon { margin: 0 !important; }

/* Volet latéral (organisations). */
.side-panel { box-shadow: var(--shadow64) !important; border-left: none !important; border-radius: var(--borderRadiusXLarge) 0 0 var(--borderRadiusXLarge); }
.side-panel-overlay { background: var(--colorBackgroundOverlay) !important; }
.panel-header h2 { font-size: 20px !important; line-height: 28px; font-weight: 600; }
.radio-card-option { border-radius: var(--borderRadiusXLarge) !important; }

/* Badges d'environnement et de statut propres aux pages. */
.badge, .env-badge, .plan-badge, .status-badge {
    font-family: var(--fontFamilyBase);
    border-radius: var(--borderRadiusCircular) !important;
    font-size: 12px !important;
    line-height: 16px;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.plan-badge { border-color: var(--colorBrandStroke2) !important; }

/* Mobile : la navigation se réduit aux icônes. */
@media (max-width: 900px) {
    .sidebar-menu { width: 56px; padding: 12px 6px !important; }
    .brand, .menu-item { font-size: 0 !important; justify-content: center; padding: 0 !important; }
    .brand { padding-bottom: 16px !important; }
    .menu-item.active::before { left: -2px; }
    .main-content { margin-left: 56px !important; padding: 16px !important; }
    .page-header h1 { font-size: 24px !important; line-height: 32px; }
    .page-header > div:last-child { flex-wrap: wrap; gap: 8px; width: 100%; }
    .page-header .ui.dropdown.button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

/* ===== 16. Pages d'authentification ===== */
body.auth-page {
    min-height: 100vh;
    display: flex;
    /* Centrage par marges automatiques : une page plus haute que l'écran n'est pas coupée en haut. */
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    padding: 24px 16px;
    background-color: var(--colorNeutralBackground3);
    background-image:
        radial-gradient(1200px 600px at 10% -10%, var(--colorBrandBackground2) 0%, transparent 60%),
        radial-gradient(900px 500px at 110% 110%, var(--colorBrandBackground2) 0%, transparent 55%);
    box-sizing: border-box;
}

.login-card {
    margin: auto;
    background: var(--colorNeutralBackground1);
    width: 100%;
    padding: 44px 44px 36px;
    border-radius: var(--borderRadiusXLarge);
    box-shadow: var(--shadow16);
    border: 1px solid transparent;
    box-sizing: border-box;
}

[data-theme="dark"] .login-card { border-color: var(--colorNeutralStroke3); }

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-family: var(--fontFamilyDisplay);
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.auth-brand > i.icon {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 6px;
    border-radius: var(--borderRadiusMedium);
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
}

.login-header { margin-bottom: 24px; text-align: left; }
.login-header h2 { font-family: var(--fontFamilyDisplay); font-size: 24px; line-height: 32px; font-weight: 600; color: var(--colorNeutralForeground1); margin: 0 0 4px; }
.login-header p { color: var(--colorNeutralForeground3); font-size: 14px; line-height: 20px; margin: 0; }

.login-card .ui.form .field { margin-bottom: 16px; }
.login-card .ui.primary.button[type=submit] { width: 100%; min-height: 40px; font-size: 16px; line-height: 22px; margin: 8px 0 0; }

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 16px;
    font-size: 14px;
}

.bottom-text, .legal-text { color: var(--colorNeutralForeground3); font-size: 14px; line-height: 20px; }
.bottom-text { margin-top: 24px; text-align: center; }
.bottom-text a, .legal-text a, .form-footer a { color: var(--colorBrandForegroundLink); font-weight: 400; }

.auth-footer {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--colorNeutralStroke2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}

@media (max-width: 480px) {
    .login-card { padding: 28px 20px 24px; box-shadow: var(--shadow8); }
}

/* Bouton discret (Fluent « subtle ») : icônes de fermeture, actions secondaires. */
.ui.borderless.button, .ui.basic.borderless.button {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--colorNeutralForeground2) !important;
}
.ui.borderless.button:hover { background: var(--colorSubtleBackgroundHover) !important; color: var(--colorNeutralForeground1) !important; }

/* Intertitres de formulaire : Subtitle 2 (16/22). */
.ui.header.section-heading {
    font-size: 16px !important;
    line-height: 22px;
    font-weight: 600;
    color: var(--colorNeutralForeground1) !important;
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 12px;
}

/* Résumé de validation ASP.NET : visible seulement quand il contient des erreurs. */
.ui.form .validation-summary-errors.message { display: block; }
.ui.form .validation-summary-valid.message { display: none; }
.ui.form .validation-summary-errors.message ul { margin: 0; padding-left: 18px; }

/* Pages légales : lecture confortable (Body1, intertitres Subtitle 1). */
.legal { font-size: 14px; line-height: 22px; color: var(--colorNeutralForeground1); }
.legal h3 { font-size: 16px; line-height: 22px; font-weight: 600; margin: 24px 0 8px; }
.legal p, .legal ul { margin: 0 0 12px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 4px; }
.legal .caption { margin-top: 24px; }

/* Liens légaux en bas de la navigation. */
.nav-legal { padding: 12px 12px 4px; font-size: 12px; line-height: 16px; color: var(--colorNeutralForeground3); }
.nav-legal a { color: var(--colorNeutralForeground3); }
.nav-legal a:hover { color: var(--colorBrandForegroundLink); }
.auth-footer a { color: var(--colorNeutralForeground3); }
.auth-footer a:hover { color: var(--colorBrandForegroundLink); }
@media (max-width: 900px) { .nav-legal { display: none; } }

/* Croix de fermeture des cartes de message : cliquable, avec retour au survol. */
.ui.message > .close.icon { cursor: pointer; border-radius: var(--borderRadiusMedium); }
.ui.message > .close.icon:hover { color: var(--colorNeutralForeground1); background: var(--colorSubtleBackgroundHover); }