:root {
    --font-title: "Space Grotesk", sans-serif;
    --font-body: "Outfit", sans-serif;
    --brand-blue: #1F4E8C;
    --brand-cyan: #0ea5e9;
    --brand-white: #FFFFFF;
    --brand-red: #D62828;
    --brand-orange: #F77F00;
    --brand-charcoal: #2B2D42;
    --radius-lg: 28px;
    --radius-md: 18px;
    --shadow-soft: 0 24px 66px rgba(9, 20, 46, 0.16);
    --shadow-strong: 0 20px 44px rgba(10, 23, 52, 0.2);
    --transition-fast: 180ms ease;
    --transition-medium: 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --calendar-weekend-bg: #eef4ff;
    --calendar-weekend-border: #a8bddf;
    --calendar-holiday-bg: #c2410c;
    --calendar-holiday-text: #ffffff;
    --calendar-holiday-border: #7a2b08;
    --select-arrow-svg-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23606b80' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --select-arrow-svg-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d8e0ee' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --select-arrow-svg: var(--select-arrow-svg-light);
    --time-field-icon-svg-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23707c8e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7.5v5l3 2'/%3E%3C/svg%3E");
    --time-field-icon-svg-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6deea' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7.5v5l3 2'/%3E%3C/svg%3E");
    --time-field-icon-svg: var(--time-field-icon-svg-light);
    --theme-bg-layer-1: radial-gradient(circle at 8% 0%, rgba(247, 127, 0, 0.2), transparent 34%);
    --theme-bg-layer-2: radial-gradient(circle at 90% 100%, rgba(31, 78, 140, 0.18), transparent 38%);
    --theme-bg-layer-3: radial-gradient(circle at 72% 8%, rgba(14, 165, 233, 0.16), transparent 28%);
    --bg-base: var(--bg);
    --surface: var(--bg-elevated);
    --surface-soft: color-mix(in srgb, var(--bg-elevated) 88%, var(--accent-soft));
    --text-muted: var(--muted);
    --text-soft: color-mix(in srgb, var(--text) 72%, transparent);
    --success-strong: color-mix(in srgb, var(--success) 38%, var(--text) 62%);
    --danger: var(--error);
    --danger-strong: color-mix(in srgb, var(--error) 40%, var(--text) 60%);
    --line-strong: color-mix(in srgb, var(--line) 74%, var(--text) 26%);
    --border: var(--line);
    --border-color: var(--line);
    --border-radius: var(--radius-sm);
    --radius-pill: 999px;
    --ring: color-mix(in srgb, var(--accent) 44%, transparent);
    --charcoal: var(--brand-charcoal);
    --brand-primary: var(--brand-blue);
    --admin-quick-nav-offset: 7.75rem;
    --calendar-sticky-top: calc(0.5rem + env(safe-area-inset-top, 0px));
    --dashboard-title-strong: color-mix(in srgb, var(--accent-strong) 86%, var(--text) 14%);
    --dashboard-title-interactive: color-mix(in srgb, var(--accent-strong) 82%, var(--text) 18%);
    --dashboard-title-emphasis: color-mix(in srgb, var(--accent-strong) 80%, var(--text) 20%);
    --dashboard-title-hover-bg: color-mix(in srgb, var(--accent-soft) 44%, transparent);
    --dashboard-title-hover-border: color-mix(in srgb, var(--accent) 50%, var(--line));
    --admin-quick-primary-bg: linear-gradient(145deg, color-mix(in srgb, var(--brand-blue) 88%, #ffffff 12%), color-mix(in srgb, var(--brand-blue) 62%, var(--brand-cyan) 38%));
    --admin-quick-primary-border: color-mix(in srgb, var(--brand-blue) 54%, #000000 46%);
    --admin-quick-primary-text: #ffffff;
    --admin-quick-primary-heading-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    --admin-quick-primary-count-bg: color-mix(in srgb, #ffffff 18%, transparent);
    --admin-quick-primary-count-border: color-mix(in srgb, #ffffff 42%, transparent);
    --admin-quick-primary-pill-bg: color-mix(in srgb, #ffffff 10%, transparent);
    --admin-quick-primary-pill-border: color-mix(in srgb, #ffffff 18%, transparent);
    --admin-quick-primary-pill-text: color-mix(in srgb, #ffffff 78%, transparent);
    --admin-quick-primary-actions-bg: color-mix(in srgb, #ffffff 8%, transparent);
    --admin-quick-primary-actions-border: color-mix(in srgb, #ffffff 16%, transparent);
}

html[data-theme="light"] {
    --bg: #f7f9ff;
    --bg-elevated: rgba(255, 255, 255, 0.94);
    --bg-elevated-strong: rgba(255, 255, 255, 0.99);
    --text: #182033;
    --on-elevated: #182033;
    --on-accent: #ffffff;
    --muted: #4f5f7a;
    --line: rgba(24, 32, 51, 0.16);
    --accent: #1f62c4;
    --accent-strong: #144a96;
    --accent-soft: #d8e8ff;
    --card-highlight: linear-gradient(140deg, rgba(31, 98, 196, 0.2), rgba(247, 127, 0, 0.34), rgba(255, 164, 57, 0.24));
    --warning: #ffe4bf;
    --success: #d9f0e5;
    --error: #ffd9d9;
    --announcement-bg-color: #fff0df;
    --calendar-weekend-bg: #e3ecff;
    --calendar-weekend-border: #9cb6e6;
    --calendar-holiday-bg: #c45d10;
    --calendar-holiday-text: #fffaf5;
    --calendar-holiday-border: #84400d;
    --theme-bg-layer-1: radial-gradient(circle at 8% 0%, rgba(247, 127, 0, 0.34), transparent 34%);
    --theme-bg-layer-2: radial-gradient(circle at 90% 100%, rgba(31, 98, 196, 0.18), transparent 38%);
    --theme-bg-layer-3: radial-gradient(circle at 72% 8%, rgba(14, 165, 233, 0.14), transparent 28%);
    --logo-glow-color: rgba(31, 98, 196, 0.35);
}

html[data-theme="dark"] {
    --bg: #04070d;
    --bg-elevated: rgba(7, 14, 30, 0.9);
    --bg-elevated-strong: rgba(10, 18, 38, 0.96);
    --text: #f1f6ff;
    --on-elevated: #f1f6ff;
    --on-accent: #000000;
    --muted: #b4c2da;
    --line: rgba(241, 246, 255, 0.14);
    --accent: #2f72dc;
    --accent-strong: #88b4ff;
    --accent-soft: rgba(47, 114, 220, 0.2);
    --card-highlight: linear-gradient(140deg, rgba(47, 114, 220, 0.32), rgba(189, 82, 6, 0.3), rgba(14, 165, 233, 0.14));
    --warning: #6a4a10;
    --success: #28513f;
    --error: #6a2a31;
    --announcement-bg-color: #111a2b;
    --shadow-soft: 0 30px 90px rgba(1, 3, 8, 0.62);
    --calendar-weekend-bg: rgba(47, 114, 220, 0.22);
    --calendar-weekend-border: rgba(136, 180, 255, 0.4);
    --calendar-holiday-bg: #9a4708;
    --calendar-holiday-text: #fff7ed;
    --calendar-holiday-border: #d9813e;
    --time-field-icon-svg: var(--time-field-icon-svg-dark);
    --select-arrow-svg: var(--select-arrow-svg-dark);
    --theme-bg-layer-1: radial-gradient(circle at 8% 0%, rgba(189, 82, 6, 0.24), transparent 36%);
    --theme-bg-layer-2: radial-gradient(circle at 90% 100%, rgba(47, 114, 220, 0.2), transparent 40%);
    --theme-bg-layer-3: radial-gradient(circle at 72% 8%, rgba(14, 165, 233, 0.12), transparent 30%);
    --logo-glow-color: rgba(136, 180, 255, 0.52);
}

html[data-theme="contrast-light"] {
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --text: #000000;
    --on-elevated: #000000;
    --on-accent: #ffffff;
    --muted: #1f1f1f;
    --line: #000000;
    --accent: #005fcc;
    --accent-strong: #00459a;
    --accent-soft: #eaf2ff;
    --bg-elevated-strong: #ffffff;
    --card-highlight: linear-gradient(135deg, rgba(0, 95, 204, 0.12), rgba(255, 215, 0, 0.22));
    --warning: #fff2a8;
    --success: #dff6df;
    --error: #ffd9d9;
    --announcement-bg-color: #eaf2ff;
    --shadow-soft: none;
    --calendar-weekend-bg: #dcefff;
    --calendar-weekend-border: #005fcc;
    --calendar-holiday-bg: #a83a00;
    --calendar-holiday-text: #ffffff;
    --calendar-holiday-border: #000000;
    --logo-glow-color: rgba(0, 95, 204, 0.32);
}

html[data-theme="contrast-dark"] {
    --bg: #000000;
    --bg-elevated: #090909;
    --text: #ffffff;
    --on-elevated: #ffffff;
    --on-accent: #000000;
    --muted: #f1f1f1;
    --line: #ffffff;
    --accent: #00e5ff;
    --accent-strong: #72efff;
    --accent-soft: rgba(0, 229, 255, 0.15);
    --bg-elevated-strong: #0f0f0f;
    --card-highlight: linear-gradient(135deg, rgba(0, 229, 255, 0.24), rgba(255, 221, 87, 0.16));
    --warning: #5d5400;
    --success: #103b10;
    --error: #4b1111;
    --announcement-bg-color: #0a1f36;
    --shadow-soft: none;
    --calendar-weekend-bg: rgba(0, 229, 255, 0.2);
    --calendar-weekend-border: #00e5ff;
    --calendar-holiday-bg: #ffbf47;
    --calendar-holiday-text: #000000;
    --calendar-holiday-border: #ffffff;
    --time-field-icon-svg: var(--time-field-icon-svg-dark);
    --select-arrow-svg: var(--select-arrow-svg-dark);
    --logo-glow-color: rgba(114, 239, 255, 0.56);
}

html[data-theme="aurora"] {
    --bg: #08131a;
    --bg-elevated: rgba(14, 28, 40, 0.9);
    --bg-elevated-strong: rgba(18, 35, 49, 0.95);
    --text: #eef9ff;
    --on-elevated: #eef9ff;
    --on-accent: #000000;
    --muted: #b9d5df;
    --line: rgba(170, 228, 224, 0.24);
    --accent: #3fb8a9;
    --accent-strong: #88e4d8;
    --accent-soft: rgba(63, 184, 169, 0.2);
    --card-highlight: linear-gradient(140deg, rgba(63, 184, 169, 0.28), rgba(72, 108, 225, 0.24), rgba(162, 84, 255, 0.18));
    --warning: #6e5a20;
    --success: #1f5a49;
    --error: #6b2b3a;
    --announcement-bg-color: #103140;
    --shadow-soft: 0 28px 80px rgba(2, 8, 18, 0.52);
    --calendar-weekend-bg: rgba(72, 108, 225, 0.26);
    --calendar-weekend-border: rgba(136, 198, 255, 0.46);
    --calendar-holiday-bg: #bf5af2;
    --calendar-holiday-text: #fdf6ff;
    --calendar-holiday-border: #e7b5ff;
    --time-field-icon-svg: var(--time-field-icon-svg-dark);
    --select-arrow-svg: var(--select-arrow-svg-dark);
    --theme-bg-layer-1: radial-gradient(circle at 8% 0%, rgba(63, 184, 169, 0.2), transparent 34%);
    --theme-bg-layer-2: radial-gradient(circle at 88% 14%, rgba(72, 108, 225, 0.2), transparent 38%);
    --theme-bg-layer-3: radial-gradient(circle at 70% 100%, rgba(191, 90, 242, 0.15), transparent 42%);
    --logo-glow-color: rgba(136, 228, 216, 0.46);
}

html[data-theme="aurora-light"] {
    --bg: #eef8f7;
    --bg-elevated: rgba(247, 252, 252, 0.92);
    --bg-elevated-strong: rgba(251, 254, 254, 0.98);
    --text: #163038;
    --on-elevated: #163038;
    --on-accent: #ffffff;
    --muted: #48616a;
    --line: rgba(22, 48, 56, 0.2);
    --accent: #2d9385;
    --accent-strong: #1f6f63;
    --accent-soft: rgba(45, 147, 133, 0.2);
    --card-highlight: linear-gradient(140deg, rgba(63, 184, 169, 0.24), rgba(72, 108, 225, 0.18), rgba(162, 84, 255, 0.12));
    --warning: #f8e8bf;
    --success: #d9efe8;
    --error: #f7d8dc;
    --announcement-bg-color: #dff3ef;
    --calendar-weekend-bg: rgba(63, 184, 169, 0.16);
    --calendar-weekend-border: rgba(45, 147, 133, 0.38);
    --calendar-holiday-bg: #5f43b2;
    --calendar-holiday-text: #f7f3ff;
    --calendar-holiday-border: #3b2776;
    --theme-bg-layer-1: radial-gradient(circle at 8% 0%, rgba(63, 184, 169, 0.2), transparent 34%);
    --theme-bg-layer-2: radial-gradient(circle at 88% 14%, rgba(72, 108, 225, 0.18), transparent 38%);
    --theme-bg-layer-3: radial-gradient(circle at 70% 100%, rgba(162, 84, 255, 0.12), transparent 42%);
    --logo-glow-color: rgba(45, 147, 133, 0.28);
}

html[data-theme="sunset"] {
    --bg: #fff7ef;
    --bg-elevated: rgba(255, 250, 243, 0.9);
    --bg-elevated-strong: rgba(255, 252, 246, 0.97);
    --text: #3e2a2a;
    --on-elevated: #3e2a2a;
    --on-accent: #ffffff;
    --muted: #775b5b;
    --line: rgba(150, 86, 66, 0.24);
    --accent: #d95d39;
    --accent-strong: #a9442b;
    --accent-soft: #ffe2cf;
    --card-highlight: linear-gradient(140deg, rgba(217, 93, 57, 0.25), rgba(247, 164, 90, 0.24), rgba(255, 210, 122, 0.2));
    --warning: #fff1b8;
    --success: #dff3d9;
    --error: #ffd9d2;
    --announcement-bg-color: #ffe4d2;
    --calendar-weekend-bg: #ffe7d6;
    --calendar-weekend-border: #e4a17f;
    --calendar-holiday-bg: #c84f2f;
    --calendar-holiday-text: #fffaf7;
    --calendar-holiday-border: #8f341f;
    --theme-bg-layer-1: radial-gradient(circle at 6% 0%, rgba(247, 164, 90, 0.28), transparent 32%);
    --theme-bg-layer-2: radial-gradient(circle at 92% 16%, rgba(217, 93, 57, 0.24), transparent 36%);
    --theme-bg-layer-3: radial-gradient(circle at 72% 100%, rgba(255, 210, 122, 0.24), transparent 40%);
    --logo-glow-color: rgba(217, 93, 57, 0.38);
}

html[data-theme="sunset-dark"] {
    --bg: #22120f;
    --bg-elevated: rgba(42, 22, 18, 0.9);
    --bg-elevated-strong: rgba(52, 28, 22, 0.96);
    --text: #ffefe4;
    --on-elevated: #ffefe4;
    --on-accent: #000000;
    --muted: #e0b9a0;
    --line: rgba(255, 224, 204, 0.18);
    --accent: #f08f5a;
    --accent-strong: #ffc7a2;
    --accent-soft: rgba(240, 143, 90, 0.18);
    --card-highlight: linear-gradient(140deg, rgba(240, 143, 90, 0.26), rgba(217, 93, 57, 0.22), rgba(255, 210, 122, 0.18));
    --warning: #6d4f1c;
    --success: #25493a;
    --error: #6b2d2a;
    --announcement-bg-color: #3a201a;
    --shadow-soft: 0 30px 90px rgba(11, 6, 5, 0.58);
    --calendar-weekend-bg: rgba(240, 143, 90, 0.22);
    --calendar-weekend-border: rgba(255, 199, 162, 0.38);
    --calendar-holiday-bg: #d65f39;
    --calendar-holiday-text: #fff4ed;
    --calendar-holiday-border: #ffc9ad;
    --time-field-icon-svg: var(--time-field-icon-svg-dark);
    --select-arrow-svg: var(--select-arrow-svg-dark);
    --theme-bg-layer-1: radial-gradient(circle at 6% 0%, rgba(247, 164, 90, 0.18), transparent 32%);
    --theme-bg-layer-2: radial-gradient(circle at 92% 16%, rgba(217, 93, 57, 0.2), transparent 36%);
    --theme-bg-layer-3: radial-gradient(circle at 72% 100%, rgba(255, 210, 122, 0.16), transparent 40%);
    --logo-glow-color: rgba(240, 143, 90, 0.52);
}

html[data-theme="paper-ink"] {
    --bg: #f5f2e8;
    --bg-elevated: rgba(250, 247, 239, 0.92);
    --bg-elevated-strong: rgba(253, 250, 243, 0.97);
    --text: #1f2937;
    --on-elevated: #1f2937;
    --on-accent: #ffffff;
    --muted: #4b5563;
    --line: rgba(31, 41, 55, 0.22);
    --accent: #1f4e8c;
    --accent-strong: #12345f;
    --accent-soft: #d8e3f2;
    --card-highlight: linear-gradient(140deg, rgba(31, 78, 140, 0.16), rgba(120, 104, 84, 0.16), rgba(31, 41, 55, 0.1));
    --warning: #efe2b8;
    --success: #dce9d8;
    --error: #ecd2cf;
    --announcement-bg-color: #e9e3d3;
    --calendar-weekend-bg: #e5edf8;
    --calendar-weekend-border: #9db4d4;
    --calendar-holiday-bg: #9b3f31;
    --calendar-holiday-text: #fff8f5;
    --calendar-holiday-border: #5e251d;
    --theme-bg-layer-1: radial-gradient(circle at 10% 0%, rgba(120, 104, 84, 0.14), transparent 32%);
    --theme-bg-layer-2: radial-gradient(circle at 92% 100%, rgba(31, 78, 140, 0.14), transparent 38%);
    --theme-bg-layer-3: radial-gradient(circle at 70% 8%, rgba(31, 41, 55, 0.1), transparent 28%);
    --logo-glow-color: rgba(31, 78, 140, 0.30);
}

html[data-theme="paper-ink-dark"] {
    --bg: #111316;
    --bg-elevated: rgba(23, 27, 32, 0.9);
    --bg-elevated-strong: rgba(29, 34, 40, 0.96);
    --text: #f0f2f5;
    --on-elevated: #f0f2f5;
    --on-accent: #000000;
    --muted: #c3cad2;
    --line: rgba(240, 242, 245, 0.16);
    --accent: #7aa0d5;
    --accent-strong: #b5cceb;
    --logo-glow-color: color-mix(in srgb, var(--accent) 46%, transparent);
    --accent-soft: rgba(122, 160, 213, 0.18);
    --card-highlight: linear-gradient(140deg, rgba(122, 160, 213, 0.24), rgba(120, 104, 84, 0.16), rgba(31, 41, 55, 0.2));
    --warning: #615227;
    --success: #285046;
    --error: #5a2f34;
    --announcement-bg-color: #252a33;
    --shadow-soft: 0 30px 90px rgba(5, 8, 12, 0.56);
    --calendar-weekend-bg: rgba(122, 160, 213, 0.2);
    --calendar-weekend-border: rgba(181, 204, 235, 0.36);
    --calendar-holiday-bg: #b05b4e;
    --calendar-holiday-text: #fff4f1;
    --calendar-holiday-border: #e5b0a8;
    --time-field-icon-svg: var(--time-field-icon-svg-dark);
    --select-arrow-svg: var(--select-arrow-svg-dark);
    --theme-bg-layer-1: radial-gradient(circle at 10% 0%, rgba(120, 104, 84, 0.12), transparent 32%);
    --theme-bg-layer-2: radial-gradient(circle at 92% 100%, rgba(122, 160, 213, 0.14), transparent 38%);
    --theme-bg-layer-3: radial-gradient(circle at 70% 8%, rgba(31, 41, 55, 0.14), transparent 28%);
}

html[data-theme="vampire"] {
    --bg: #120814;
    --bg-elevated: rgba(28, 12, 33, 0.9);
    --bg-elevated-strong: rgba(38, 16, 44, 0.96);
    --text: #f7edf5;
    --on-elevated: #f7edf5;
    --on-accent: #000000;
    --muted: #d5bbd0;
    --line: rgba(247, 237, 245, 0.14);
    --accent: #c13c69;
    --accent-strong: #ff9ac0;
    --accent-soft: rgba(193, 60, 105, 0.18);
    --card-highlight: linear-gradient(140deg, rgba(193, 60, 105, 0.3), rgba(109, 40, 217, 0.2), rgba(73, 119, 255, 0.14));
    --warning: #6d4c16;
    --success: #214a38;
    --error: #6b2231;
    --announcement-bg-color: #2a1024;
    --shadow-soft: 0 30px 90px rgba(7, 2, 12, 0.58);
    --calendar-weekend-bg: rgba(109, 40, 217, 0.2);
    --calendar-weekend-border: rgba(215, 170, 255, 0.32);
    --calendar-holiday-bg: #b3124b;
    --calendar-holiday-text: #fff1f6;
    --calendar-holiday-border: #ff82ad;
    --time-field-icon-svg: var(--time-field-icon-svg-dark);
    --select-arrow-svg: var(--select-arrow-svg-dark);
    --theme-bg-layer-1: radial-gradient(circle at 10% 0%, rgba(193, 60, 105, 0.24), transparent 34%);
    --theme-bg-layer-2: radial-gradient(circle at 90% 12%, rgba(109, 40, 217, 0.18), transparent 38%);
    --logo-glow-color: rgba(255, 79, 164, 0.54);
    --theme-bg-layer-3: radial-gradient(circle at 76% 100%, rgba(73, 119, 255, 0.12), transparent 42%);
}

html[data-theme="vampire-light"] {
    --bg: #fff4fa;
    --bg-elevated: rgba(255, 248, 252, 0.92);
    --bg-elevated-strong: rgba(255, 251, 254, 0.98);
    --text: #40253b;
    --on-elevated: #40253b;
    --on-accent: #ffffff;
    --muted: #7a5b73;
    --line: rgba(64, 37, 59, 0.18);
    --accent: #b13d73;
    --accent-strong: #7f2a52;
    --accent-soft: rgba(177, 61, 115, 0.16);
    --card-highlight: linear-gradient(140deg, rgba(193, 60, 105, 0.24), rgba(109, 40, 217, 0.14), rgba(73, 119, 255, 0.1));
    --warning: #f8e6bf;
    --success: #d9eee0;
    --error: #f7d6e1;
    --announcement-bg-color: #fde5f0;
    --calendar-weekend-bg: rgba(193, 60, 105, 0.12);
    --calendar-weekend-border: rgba(177, 61, 115, 0.34);
    --calendar-holiday-bg: #932d5c;
    --calendar-holiday-text: #fff4fa;
    --calendar-holiday-border: #66203f;
    --theme-bg-layer-1: radial-gradient(circle at 10% 0%, rgba(193, 60, 105, 0.18), transparent 34%);
    --logo-glow-color: rgba(217, 70, 166, 0.32);
    --theme-bg-layer-2: radial-gradient(circle at 90% 12%, rgba(109, 40, 217, 0.12), transparent 38%);
    --theme-bg-layer-3: radial-gradient(circle at 76% 100%, rgba(73, 119, 255, 0.08), transparent 42%);
}

/* Dashboard admin: calibration theme par theme des titres de cartes */
html[data-theme="light"] {
    --dashboard-title-strong: #0f3d7d;
    --dashboard-title-interactive: #13498f;
    --dashboard-title-emphasis: #123f7f;
    --admin-quick-primary-bg: linear-gradient(145deg, #2f68b4, #2e5f9f);
    --admin-quick-primary-border: #214e88;
}

html[data-theme="dark"] {
    --dashboard-title-strong: #d9e8ff;
    --dashboard-title-interactive: #e8f1ff;
    --dashboard-title-emphasis: #dceaff;
    --dashboard-title-hover-bg: color-mix(in srgb, var(--accent-soft) 62%, transparent);
    --admin-quick-primary-bg: linear-gradient(145deg, #1f467f, #16345e);
    --admin-quick-primary-border: #3f6aa6;
}

html[data-theme="contrast-light"] {
    --dashboard-title-strong: #000000;
    --dashboard-title-interactive: #000000;
    --dashboard-title-emphasis: #000000;
    --dashboard-title-hover-bg: #eaf2ff;
    --dashboard-title-hover-border: #000000;
    --admin-quick-primary-bg: linear-gradient(145deg, #005fcc, #00459a);
    --admin-quick-primary-border: #000000;
    --admin-quick-primary-count-border: #ffffff;
    --admin-quick-primary-pill-border: #ffffff;
    --admin-quick-primary-actions-border: #ffffff;
}

html[data-theme="contrast-dark"] {
    --dashboard-title-strong: #ffffff;
    --dashboard-title-interactive: #ffffff;
    --dashboard-title-emphasis: #ffffff;
    --dashboard-title-hover-bg: rgba(0, 229, 255, 0.2);
    --dashboard-title-hover-border: #ffffff;
    --admin-quick-primary-bg: linear-gradient(145deg, #035c66, #023a42);
    --admin-quick-primary-border: #72efff;
}

html[data-theme="aurora"] {
    --dashboard-title-strong: #d4fff7;
    --dashboard-title-interactive: #e6fffb;
    --dashboard-title-emphasis: #d6fff8;
    --dashboard-title-hover-bg: color-mix(in srgb, var(--accent-soft) 64%, transparent);
    --admin-quick-primary-bg: linear-gradient(145deg, #2d7f77, #245e78);
    --admin-quick-primary-border: #5dbab1;
}

html[data-theme="aurora-light"] {
    --dashboard-title-strong: #17584f;
    --dashboard-title-interactive: #1e665c;
    --dashboard-title-emphasis: #1c5f56;
    --admin-quick-primary-bg: linear-gradient(145deg, #2f8578, #2a6e87);
    --admin-quick-primary-border: #23645a;
}

html[data-theme="sunset"] {
    --dashboard-title-strong: #7a2f1f;
    --dashboard-title-interactive: #8a3824;
    --dashboard-title-emphasis: #7f311f;
    --admin-quick-primary-bg: linear-gradient(145deg, #c35a37, #9d4229);
    --admin-quick-primary-border: #7d3521;
}

html[data-theme="sunset-dark"] {
    --dashboard-title-strong: #ffe0cc;
    --dashboard-title-interactive: #ffe9da;
    --dashboard-title-emphasis: #ffe3d1;
    --dashboard-title-hover-bg: color-mix(in srgb, var(--accent-soft) 66%, transparent);
    --admin-quick-primary-bg: linear-gradient(145deg, #a95336, #6f331f);
    --admin-quick-primary-border: #d68458;
}

html[data-theme="paper-ink"] {
    --dashboard-title-strong: #25364f;
    --dashboard-title-interactive: #1f3249;
    --dashboard-title-emphasis: #293a52;
    --admin-quick-primary-bg: linear-gradient(145deg, #435f86, #314965);
    --admin-quick-primary-border: #2a3d53;
}

html[data-theme="paper-ink-dark"] {
    --dashboard-title-strong: #e1e9f4;
    --dashboard-title-interactive: #eef3fa;
    --dashboard-title-emphasis: #e4ebf6;
    --dashboard-title-hover-bg: color-mix(in srgb, var(--accent-soft) 62%, transparent);
    --admin-quick-primary-bg: linear-gradient(145deg, #4f6c92, #354a65);
    --admin-quick-primary-border: #96b1d2;
}

html[data-theme="vampire"] {
    --dashboard-title-strong: #ffd8ea;
    --dashboard-title-interactive: #ffe6f2;
    --dashboard-title-emphasis: #ffdced;
    --dashboard-title-hover-bg: color-mix(in srgb, var(--accent-soft) 62%, transparent);
    --admin-quick-primary-bg: linear-gradient(145deg, #9e3e66, #6c2d58);
    --admin-quick-primary-border: #d079a0;
}

html[data-theme="vampire-light"] {
    --dashboard-title-strong: #6f2145;
    --dashboard-title-interactive: #7a2750;
    --dashboard-title-emphasis: #74254b;
    --admin-quick-primary-bg: linear-gradient(145deg, #9d3f69, #7a2f54);
    --admin-quick-primary-border: #642845;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    background:
        var(--theme-bg-layer-1),
        var(--theme-bg-layer-2),
        var(--theme-bg-layer-3),
        var(--bg);
    color: var(--text);
    position: relative;
    overflow-x: hidden;
    isolation: isolate;
}

body.mobile-nav-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

p {
    line-height: 1.7;
}

h1,
h2,
h3 {
    font-family: var(--font-title);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
}

h1 {
    font-size: clamp(2rem, 4.2vw, 3.2rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
}

.is-admin .section-heading h1 {
    font-size: clamp(1.45rem, 2.4vw, 2.05rem);
}

.is-admin .section-heading h2,
.is-admin .table-heading h2 {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.container {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(16px) saturate(1.15);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.4s ease, border-color 0.4s ease;
}

/* Quand le bandeau dev est présent, le header doit coller sous lui */
body.has-dev-banner .site-header {
    top: var(--dev-banner-height, calc(1.32rem + 2px));
}

.site-header--scrolled {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 86%, transparent), color-mix(in srgb, var(--bg) 70%, transparent));
    border-bottom-color: var(--line);
}

@media (min-width: 961px) {
    .site-header--compact {
        backdrop-filter: blur(18px) saturate(1.18);
    }

    .site-header--compact .topbar {
        padding: 0.52rem 0;
        row-gap: 0.34rem;
    }

    .site-header--compact .brand-mark {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .site-header--compact .brand-mark img {
        padding: 0.22rem;
        border-radius: 10px;
    }

    .site-header--compact .brand strong {
        font-size: 0.94rem;
        line-height: 1.14;
    }

    .site-header--compact .brand small {
        max-height: 0;
        opacity: 0;
        transform: translateY(-0.15rem);
    }

    .site-header--compact .main-nav {
        gap: 0.55rem;
    }

    .site-header--compact .main-nav .nav-link {
        padding: 0.18rem 0.48rem;
    }

    .site-header--compact .main-nav .nav-submenu-toggle {
        padding-right: 0.48rem;
    }

    .site-header--compact .main-nav .nav-submenu-toggle .nav-submenu-caret {
        display: none;
    }

    .site-header--compact .session-links {
        gap: 0.55rem;
    }

    .site-header--compact .profile-menu-toggle {
        width: auto;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        padding: 0.35rem;
        gap: 0;
    }

    .site-header--compact .profile-menu-toggle::after {
        display: none;
    }

    .site-header--compact .profile-menu-label,
    .site-header--compact .profile-menu:focus-within .profile-menu-label,
    .site-header--compact .profile-menu[open] .profile-menu-label {
        display: none;
        max-width: 0;
        opacity: 0;
        transform: translateX(-0.2rem);
    }
}

.site-announcement {
    border-bottom: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom left;
    background-color: var(--announcement-bg-color);
    color: var(--announcement-text-color);
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.site-announcement-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
}

.site-announcement-inner p {
    margin: 0;
    font-weight: 600;
}

.site-announcement-inner a.text-link {
    color: var(--announcement-text-color);
    opacity: 0.85;
    text-decoration: underline;
}

.site-announcement--payment {
    background: var(--payment-announcement-bg-color, var(--announcement-bg-color));
    color: var(--payment-announcement-text-color, var(--announcement-text-color));
}

.site-announcement--payment .site-announcement-inner a.text-link {
    color: var(--payment-announcement-text-color, var(--announcement-text-color));
}

.site-announcement--payment .site-announcement-message-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

.site-announcement--payment.site-announcement--payment-info {
    border-bottom-color: color-mix(in srgb, #0a6ebd 22%, var(--line));
}

.site-announcement--payment.site-announcement--payment-warning {
    border-bottom-color: color-mix(in srgb, #f08c00 32%, var(--line));
}

.site-announcement--payment.site-announcement--payment-critical {
    border-bottom-color: color-mix(in srgb, #b42318 34%, var(--line));
}

.site-announcement-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.78;
    flex-shrink: 0;
}

.site-announcement-close:hover,
.site-announcement-close:focus-visible {
    opacity: 1;
}

/* ---- Bandeau environnement de développement local ---- */
.dev-banner {
    position: sticky;
    top: 0;
    z-index: 9999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    row-gap: 0.35rem;
    padding: 0.3rem 1rem;
    background: #2a2a2a;
    border-bottom: 2px solid #c9a000;
    color: #e0e0e0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.dev-banner-text {
    color: #c9a000;
}

.dev-banner-feedback-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.65rem;
    border: 1px solid color-mix(in srgb, #c9a000 74%, #ffffff 26%);
    border-radius: 999px;
    color: #ffe7a6;
    text-decoration: none;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    line-height: 1.15;
    pointer-events: auto;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.dev-banner-feedback-link:hover,
.dev-banner-feedback-link:focus-visible {
    background: color-mix(in srgb, #c9a000 22%, transparent);
    color: #fff5d6;
    border-color: #e3be41;
}

.dev-banner-feedback-link:focus-visible {
    outline: 2px solid #f6d778;
    outline-offset: 2px;
}

.dev-banner-icon {
    color: #666;
    font-size: 0.75rem;
}

@media (max-width: 960px) {
    .dev-banner {
        justify-content: flex-start;
        padding: 0.35rem 0.75rem;
        line-height: 1.15;
    }

    .dev-banner-feedback-link {
        width: 100%;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        font-size: 0.7rem;
        letter-spacing: 0.03em;
    }
}

.topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "brand toolbar"
        "nav nav";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.8rem;
    padding: 1rem 0;
    min-height: var(--topbar-height, 90px);
    transition: padding 220ms ease, row-gap 220ms ease;
}

.brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    min-height: 44px;
    min-width: 0;
}

.brand strong,
.brand small {
    display: block;
}

.brand-copy {
    min-width: 0;
}

.brand strong {
    font-size: 1.02rem;
    line-height: 1.18;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    transition: font-size 220ms ease, line-height 220ms ease;
}

.brand small {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: max-height 220ms ease, opacity 180ms ease, transform 220ms ease;
    max-height: 2rem;
}

.brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-family: var(--font-title);
    font-weight: 700;
    background:
        radial-gradient(circle at 28% 22%, color-mix(in srgb, #ffffff 42%, transparent), transparent 42%),
        linear-gradient(140deg, var(--brand-blue), var(--brand-cyan));
    color: var(--brand-white);
    border: 1px solid color-mix(in srgb, var(--brand-blue) 75%, #000000 25%);
    box-shadow:
        0 10px 22px color-mix(in srgb, var(--brand-blue) 26%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 42%, transparent);
    overflow: hidden;
    isolation: isolate;
    transform-origin: center;
    transition: transform 260ms cubic-bezier(0.22, 0.78, 0.22, 1), box-shadow 280ms cubic-bezier(0.22, 0.78, 0.22, 1), width 220ms ease, height 220ms ease, border-radius 220ms ease;
}

.brand-mark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, color-mix(in srgb, #ffffff 28%, transparent), transparent 54%);
    pointer-events: none;
    z-index: 1;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.32rem;
    border-radius: 14px;
    background: var(--brand-logo-inner-bg, color-mix(in srgb, var(--bg-elevated-strong) 92%, #ffffff 8%));
    border: 1px solid var(--brand-logo-inner-border, color-mix(in srgb, var(--line) 72%, #ffffff 28%));
    box-shadow:
        inset 0 0 0 1px var(--brand-logo-inner-ring, color-mix(in srgb, #ffffff 48%, transparent)),
        0 1px 2px color-mix(in srgb, #000000 14%, transparent);
    position: relative;
    z-index: 2;
    transform-origin: center;
    transition: transform 260ms cubic-bezier(0.22, 0.78, 0.22, 1), padding 220ms ease, border-radius 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .brand:hover .brand-mark,
    .brand:focus-visible .brand-mark {
        transform: scale(1.14);
    }

    .brand:hover .brand-mark img,
    .brand:focus-visible .brand-mark img {
        transform: scale(1.08);
    }
}

html[data-theme="light"] .brand-mark.has-logo img,
html[data-theme="sunset"] .brand-mark.has-logo img,
html[data-theme="paper-ink"] .brand-mark.has-logo img,
html[data-theme="contrast-light"] .brand-mark.has-logo img {
    --brand-logo-inner-bg: color-mix(in srgb, #ffffff 90%, var(--bg-elevated-strong) 10%);
    --brand-logo-inner-border: color-mix(in srgb, var(--line) 74%, #000000 26%);
    --brand-logo-inner-ring: color-mix(in srgb, #ffffff 66%, transparent);
}

html[data-theme="dark"] .brand-mark.has-logo img,
html[data-theme="aurora"] .brand-mark.has-logo img,
html[data-theme="vampire"] .brand-mark.has-logo img,
html[data-theme="contrast-dark"] .brand-mark.has-logo img {
    --brand-logo-inner-bg: color-mix(in srgb, var(--bg-elevated-strong) 78%, #000000 22%);
    --brand-logo-inner-border: color-mix(in srgb, #ffffff 56%, var(--line) 44%);
    --brand-logo-inner-ring: color-mix(in srgb, #ffffff 34%, transparent);
}

.brand-mark.has-logo {
    font-size: 0;
}

.brand-mark.has-logo .brand-logo-main {
    display: block;
}

.brand-logo-compact {
    display: none;
}

/* Logo Frame Style Variations */
body[data-logo-frame-style="solid"] .brand-mark {
    background: var(--brand-blue);
    border: 1px solid color-mix(in srgb, var(--brand-blue) 88%, #000000 12%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-blue) 20%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 32%, transparent);
}

body[data-logo-frame-style="outline"] .brand-mark {
    background: transparent;
    border: 2px solid var(--brand-blue);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-blue) 16%, transparent);
}

body[data-logo-frame-style="glass"] .brand-mark {
    background: color-mix(in srgb, var(--brand-blue) 18%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, #ffffff 32%, transparent);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--brand-blue) 16%, transparent);
}

body[data-logo-frame-style="minimal"] .brand-mark {
    background: none;
    border: none;
    box-shadow: none;
}

body[data-logo-frame-style="none"] .brand-mark {
    background: transparent;
    border: none;
    box-shadow: none;
}

body[data-logo-frame-style="none"] .brand-mark::before {
    display: none;
}

body[data-logo-frame-style="none"] .brand-mark.has-logo img {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Logo Shadow Intensity Variations */
body[data-logo-shadow-intensity="none"] .brand-mark {
    box-shadow: none;
}

body[data-logo-shadow-intensity="contour"] .brand-mark {
    box-shadow: none;
}

body[data-logo-shadow-intensity="contour"] .brand-mark.has-logo img {
    --logo-contour-shadow-y: 6px;
    --logo-contour-shadow-blur: 14px;
    --logo-contour-shadow-color: color-mix(in srgb, var(--text) 26%, transparent);
    filter: drop-shadow(0 var(--logo-contour-shadow-y) var(--logo-contour-shadow-blur) var(--logo-contour-shadow-color));
}

html[data-theme="dark"] body[data-logo-shadow-intensity="contour"] .brand-mark.has-logo img,
html[data-theme="aurora"] body[data-logo-shadow-intensity="contour"] .brand-mark.has-logo img,
html[data-theme="vampire"] body[data-logo-shadow-intensity="contour"] .brand-mark.has-logo img,
html[data-theme="contrast-dark"] body[data-logo-shadow-intensity="contour"] .brand-mark.has-logo img,
html[data-theme="sunset-dark"] body[data-logo-shadow-intensity="contour"] .brand-mark.has-logo img,
html[data-theme="paper-ink-dark"] body[data-logo-shadow-intensity="contour"] .brand-mark.has-logo img {
    --logo-contour-shadow-color: color-mix(in srgb, #000000 58%, transparent);
}

body[data-logo-shadow-intensity="contour"][data-logo-contour-shadow-intensity="light"] .brand-mark.has-logo img {
    --logo-contour-shadow-y: 4px;
    --logo-contour-shadow-blur: 9px;
    --logo-contour-shadow-color: color-mix(in srgb, var(--text) 18%, transparent);
}

body[data-logo-shadow-intensity="contour"][data-logo-contour-shadow-intensity="medium"] .brand-mark.has-logo img {
    --logo-contour-shadow-y: 6px;
    --logo-contour-shadow-blur: 14px;
    --logo-contour-shadow-color: color-mix(in srgb, var(--text) 26%, transparent);
}

body[data-logo-shadow-intensity="contour"][data-logo-contour-shadow-intensity="strong"] .brand-mark.has-logo img {
    --logo-contour-shadow-y: 8px;
    --logo-contour-shadow-blur: 20px;
    --logo-contour-shadow-color: color-mix(in srgb, var(--text) 36%, transparent);
}

body[data-logo-shadow-intensity="light"] .brand-mark {
    box-shadow: 0 4px 8px color-mix(in srgb, var(--brand-blue) 14%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 32%, transparent);
}

body[data-logo-shadow-intensity="strong"] .brand-mark {
    box-shadow: 0 16px 40px color-mix(in srgb, var(--brand-blue) 32%, transparent), inset 0 1px 0 color-mix(in srgb, #ffffff 42%, transparent);
}

/* Reduce glow intensity when shadow is "none" */
body[data-logo-shadow-intensity="none"] .brand-mark.has-logo img {
    box-shadow: 
        0 0 20px 8px var(--logo-glow-color),
        0 0 40px 16px rgba(0, 0, 0, 0.05),
        0 0 60px 24px rgba(0, 0, 0, 0.02);
}

/* Logo Glow Effect — Luminescent aura behind the logo */
.brand-mark.has-logo img {
    box-shadow: 
        0 0 30px 14px var(--logo-glow-color),
        0 0 60px 28px rgba(0, 0, 0, 0.08),
        0 0 100px 45px rgba(0, 0, 0, 0.04);
}

/* Reduce glow on mobile for better space efficiency */
@media (max-width: 640px) {
    .brand-mark.has-logo img {
        box-shadow: 
            0 0 20px 10px var(--logo-glow-color),
            0 0 40px 18px rgba(0, 0, 0, 0.08),
            0 0 60px 30px rgba(0, 0, 0, 0.04);
    }
}

@media (max-width: 480px) {
    .brand-mark.has-logo img {
        box-shadow: 
            0 0 14px 6px var(--logo-glow-color),
            0 0 28px 12px rgba(0, 0, 0, 0.08),
            0 0 44px 20px rgba(0, 0, 0, 0.04);
    }
}

/* Logo Border Radius Variations */
body[data-logo-border-radius="sharp"] .brand-mark {
    border-radius: 4px;
}

body[data-logo-border-radius="sharp"] .brand-mark img {
    border-radius: 2px;
}

body[data-logo-border-radius="slightly-rounded"] .brand-mark {
    border-radius: 10px;
}

body[data-logo-border-radius="slightly-rounded"] .brand-mark img {
    border-radius: 8px;
}

body[data-logo-border-radius="very-rounded"] .brand-mark {
    border-radius: 28px;
}

body[data-logo-border-radius="very-rounded"] .brand-mark img {
    border-radius: 24px;
}

/* Logo Inner Background Mode Variations */
body[data-logo-inner-bg-mode="light"] .brand-mark.has-logo img {
    --brand-logo-inner-bg: color-mix(in srgb, #ffffff 92%, var(--bg-elevated-strong) 8%);
    --brand-logo-inner-border: color-mix(in srgb, var(--line) 72%, #000000 28%);
    --brand-logo-inner-ring: color-mix(in srgb, #ffffff 68%, transparent);
}

body[data-logo-inner-bg-mode="auto"] .brand-mark.has-logo img {
    --brand-logo-inner-bg: var(--brand-logo-inner-bg-auto, color-mix(in srgb, var(--bg-elevated-strong) 88%, #ffffff 12%));
    --brand-logo-inner-border: var(--brand-logo-inner-border-auto, color-mix(in srgb, var(--line) 66%, #ffffff 34%));
    --brand-logo-inner-ring: var(--brand-logo-inner-ring-auto, color-mix(in srgb, #ffffff 52%, transparent));
}

body[data-logo-inner-bg-mode="dark"] .brand-mark.has-logo img {
    --brand-logo-inner-bg: color-mix(in srgb, var(--bg-elevated-strong) 82%, #000000 18%);
    --brand-logo-inner-border: color-mix(in srgb, #ffffff 52%, var(--line) 48%);
    --brand-logo-inner-ring: color-mix(in srgb, #ffffff 32%, transparent);
}

body[data-logo-inner-bg-mode="transparent"] .brand-mark.has-logo img {
    --brand-logo-inner-bg: transparent;
    --brand-logo-inner-border: color-mix(in srgb, var(--line) 48%, transparent);
    --brand-logo-inner-ring: transparent;
}

body[data-logo-inner-bg-mode="none"] .brand-mark.has-logo img {
    --brand-logo-inner-bg: transparent;
    --brand-logo-inner-border: transparent;
    --brand-logo-inner-ring: transparent;
    border: none;
    box-shadow: none;
}

/* Site Corner Style Variations */
body[data-site-corner-style="sharp"] {
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-sm: 6px;
}

body[data-site-corner-style="soft"] {
    --radius-lg: 38px;
    --radius-md: 24px;
    --radius-sm: 16px;
}

body[data-site-corner-style="pill"] {
    --radius-lg: 999px;
    --radius-md: 999px;
    --radius-sm: 999px;
}

body[data-site-corner-style="sharp"] :is(.hero-copy, .hero-panel, .content-card, .form-card, .table-wrap, .flash) {
    border-radius: 10px;
}

body[data-site-corner-style="soft"] :is(.hero-copy, .hero-panel, .content-card, .form-card, .table-wrap, .flash) {
    border-radius: 34px;
}

/* Button Shape Style Variations */
body[data-button-shape-style="rounded"] .button,
body[data-button-shape-style="rounded"] .submit-button {
    border-radius: 14px;
}

body[data-button-shape-style="square"] .button,
body[data-button-shape-style="square"] .submit-button {
    border-radius: 8px;
}

/* Surface Style Variations */
body[data-surface-style="flat"] :is(.hero-copy, .hero-panel, .card, .form-card, .content-card) {
    box-shadow: none;
    backdrop-filter: none;
}

body[data-surface-style="outline"] :is(.hero-copy, .hero-panel, .card, .form-card, .content-card) {
    box-shadow: none;
    border-width: 2px;
}

.main-nav {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.85rem;
    transition: gap 220ms ease;
    position: relative;
}

.nav-submenu {
    position: relative;
}

.nav-submenu summary {
    list-style: none;
    cursor: pointer;
}

.nav-submenu summary::-webkit-details-marker {
    display: none;
}

.nav-submenu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
}

.nav-submenu-toggle::before {
    content: "+";
    font-weight: 700;
    line-height: 1;
}

.nav-submenu[open] .nav-submenu-toggle::before,
.nav-submenu.is-active .nav-submenu-toggle::before {
    content: "-";
}

.nav-submenu-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 220px;
    padding: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated-strong) 94%, transparent);
    box-shadow: var(--shadow-soft);
    display: none;
    z-index: 18;
    transform-origin: top right;
}

.nav-submenu-panel .nav-link {
    display: block;
    width: 100%;
    border-radius: 10px;
    padding: 0.5rem 0.62rem;
}

.nav-submenu[open] .nav-submenu-panel {
    display: grid;
    gap: 0.12rem;
    animation: dropdown-fade-in 180ms ease-out both;
}

.main-nav a,
.text-link,
.text-button,
.session-links a {
    color: var(--accent-strong);
    font-weight: 600;
}

.main-nav .nav-link {
    --nav-link-base-color: var(--accent-strong);
    --nav-link-hover-color: var(--accent);
    --nav-link-color-transition: 140ms;
    position: relative;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    transition: color var(--nav-link-color-transition) ease-out, border-color var(--nav-link-color-transition) ease-out, padding 220ms ease;
    border: 1px solid transparent;
    color: transparent;
    z-index: 1;
}

.main-nav .nav-link::before,
.main-nav .nav-link::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    padding: inherit;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.main-nav .nav-link::before {
    color: var(--nav-link-base-color);
}

.main-nav .nav-link::after {
    color: var(--nav-link-hover-color);
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--nav-link-color-transition) ease-out;
}

.main-nav .nav-link:not(.is-active):hover::after,
.main-nav .nav-link:not(.is-active):focus-visible::after {
    clip-path: inset(0 0 0 0);
}

/* Pas d'animation de couleur sur le toggle quand le panel est ouvert */
.main-nav .nav-submenu[open] .nav-submenu-toggle:hover::after,
.main-nav .nav-submenu[open] .nav-submenu-toggle:focus-visible::after {
    clip-path: inset(0 100% 0 0);
}

.main-nav .nav-link.is-active::after {
    content: "";
    position: absolute;
    inset: auto;
    left: 0.55rem;
    right: 0.55rem;
    bottom: 0.24rem;
    width: auto;
    height: 2px;
    display: block;
    padding: 0;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--accent);
    transition: transform var(--transition-fast);
}

.main-nav .nav-link-primary {
    background: color-mix(in srgb, var(--accent-soft) 44%, transparent);
    border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
}

.main-nav .nav-link-secondary {
    font-size: 0.94rem;
    --nav-link-base-color: color-mix(in srgb, var(--accent-strong) 86%, var(--text) 14%);
    --nav-link-hover-color: var(--accent);
}

.main-nav .nav-link-highlight {
    background: color-mix(in srgb, var(--accent-soft) 44%, transparent);
    border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
    --nav-link-base-color: color-mix(in srgb, var(--accent-strong) 90%, var(--text) 10%);
    --nav-link-hover-color: color-mix(in srgb, var(--accent) 88%, var(--accent-strong) 12%);
}

.main-nav .nav-link-temporary {
    cursor: default;
    background: color-mix(in srgb, var(--bg-elevated) 76%, transparent);
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
    border-style: dashed;
    --nav-link-base-color: color-mix(in srgb, var(--accent-strong) 82%, var(--text) 18%);
    --nav-link-hover-color: var(--nav-link-base-color);
}

.main-nav .nav-link-temporary::after {
    display: none;
}

.main-nav .nav-link.is-active {
    background: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
    border-color: color-mix(in srgb, var(--accent) 84%, #000000 16%);
    --nav-link-base-color: #ffffff;
    color: transparent;
}

.main-nav[data-button-indicator-ready] .nav-link.is-active::after {
    content: none;
}

.main-nav .nav-link.is-active::before,
.main-nav .nav-link.is-button-indicator-pending::before {
    color: #ffffff;
}

/* Garder le data-label visible dans .main-nav même quand le <details> est ouvert/actif */
.main-nav .nav-submenu[open] .nav-submenu-toggle::before,
.main-nav .nav-submenu.is-active .nav-submenu-toggle::before {
    content: attr(data-label);
}

/* Neutraliser font-weight:700 et line-height:1 hérités de .nav-submenu-toggle::before
   pour que ::before et ::after aient le même rendu typographique (alignement hover) */
.main-nav .nav-submenu-toggle::before,
.main-nav .nav-submenu-toggle::after {
    font-weight: 600;
    line-height: inherit;
}

/* Chevron indicateur sur les submenus du main-nav — sorti du flux pour ne pas perturber
   la largeur de l'élément (qui doit coïncider exactement avec data-label pour le hover) */
.main-nav .nav-submenu-toggle {
    padding-right: 1.72em;
    white-space: nowrap;
    transition: color var(--nav-link-color-transition) ease-out, border-color var(--nav-link-color-transition) ease-out, background 140ms ease-out, padding 220ms ease;
}

.main-nav .nav-submenu-toggle .nav-submenu-caret {
    position: absolute;
    right: 0.54em;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 0.78em;
    line-height: 1;
    pointer-events: none;
    z-index: 3;
    color: var(--nav-link-base-color);
    transition: transform 180ms ease, color 140ms ease-out;
}

.main-nav .nav-submenu[open] .nav-submenu-toggle .nav-submenu-caret {
    transform: translateY(-50%) rotate(180deg);
}

.main-nav .nav-link:not(.is-active):hover .nav-submenu-caret,
.main-nav .nav-link:not(.is-active):focus-visible .nav-submenu-caret {
    color: var(--nav-link-hover-color);
}

/* Pas de changement de couleur sur le chevron quand le panel est ouvert */
.main-nav .nav-submenu[open] .nav-submenu-toggle:hover .nav-submenu-caret,
.main-nav .nav-submenu[open] .nav-submenu-toggle:focus-visible .nav-submenu-caret {
    color: var(--nav-link-base-color);
}

/* ── Nav glider — indicateur actif fluide ───────────────────── */
.main-nav .calendar-member-filter-indicator {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
    border: 1px solid color-mix(in srgb, var(--accent) 84%, #000000 16%);
    box-shadow: none;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: none;
}

.main-nav[data-button-indicator-animate="1"] .calendar-member-filter-indicator {
    transition:
    transform var(--nav-indicator-move-duration, 260ms) cubic-bezier(0.22, 1, 0.36, 1),
    width var(--nav-indicator-size-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1),
    height var(--nav-indicator-size-duration, 220ms) cubic-bezier(0.4, 0, 0.2, 1),
        opacity 160ms ease;
}

.main-nav[data-button-indicator-ready] .calendar-member-filter-indicator {
    opacity: 1;
}

/* Avec le glider actif: le lien actif/en attente est transparent (le glider fournit le fond) */
.main-nav[data-button-indicator-ready] .nav-link.is-active,
.main-nav[data-button-indicator-ready] .nav-link.is-button-indicator-pending {
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.main-nav a:hover,
.text-link:hover,
.text-button:hover,
.session-links a:hover {
    text-decoration: none;
}

/* ── Items du panel — état actif avec glider ───────────────── */
/* Le glider se positionne sur le summary, pas sur les items du panel;
   on restaure leur style actif visible (bleu) pour eux spécifiquement */
.main-nav[data-button-indicator-ready] .nav-submenu-panel .nav-link.is-active {
    background: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
    border-color: color-mix(in srgb, var(--accent) 84%, #000000 16%);
}

/* ── Hover background sur items du panel ───────────────────── */
.main-nav .nav-submenu-panel .nav-link:not(.is-active):hover,
.main-nav .nav-submenu-panel .nav-link:not(.is-active):focus-visible {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.main-nav .nav-link:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
}

.toolbar {
    grid-area: toolbar;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Hamburger toggle (mobile nav) ─────────────────────────── */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text);
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.nav-toggle:hover {
    background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.session-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
}

.page-manage-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.page-manage-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-height: 44px;
    padding: 0.38rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    color: color-mix(in srgb, var(--text-muted) 82%, var(--text) 18%);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.page-manage-action i {
    font-size: 1rem;
    line-height: 1;
}

.page-manage-action:hover,
.page-manage-action:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 36%, var(--bg-elevated));
    color: color-mix(in srgb, var(--accent-strong) 72%, var(--text) 28%);
}

/* Thème dans la barre de nav (côté connecté) — annule le margin-left: auto du composant standalone */
.session-links .theme-picker {
    margin-left: 0;
}

.session-login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.55rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 48%, transparent);
    color: var(--accent-strong);
    white-space: nowrap;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.session-login-link:hover,
.session-login-link:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 66%, transparent);
}

.session-login-link--icon {
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 12px;
}

.session-login-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
}

.session-login-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.session-user {
    color: var(--muted);
}

.profile-menu {
    position: relative;
}

.profile-menu summary {
    list-style: none;
}

.profile-menu summary::-webkit-details-marker {
    display: none;
}

.profile-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    padding: 0.35rem 0.65rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.profile-menu-toggle .session-user-icon,
.profile-menu-toggle .session-user-initials,
.profile-menu-toggle .session-user-theme-icon {
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.profile-menu-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    transform: translateX(-0.2rem);
    transition: max-width var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.profile-menu-toggle--icon {
    width: max-content;
}

.profile-menu-toggle::after {
    content: "▾";
    font-size: 0.8rem;
    color: var(--muted);
    flex-shrink: 0;
    transform-origin: center;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.profile-menu[open] .profile-menu-toggle::after {
    transform: rotate(180deg);
    color: var(--accent-strong);
}

.profile-menu:focus-within .profile-menu-toggle,
.profile-menu[open] .profile-menu-toggle {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
}

.profile-menu:focus-within .profile-menu-label,
.profile-menu[open] .profile-menu-label {
    max-width: 8.5rem;
    opacity: 1;
    transform: translateX(0);
}

.profile-menu:focus-within .profile-menu-toggle .session-user-icon,
.profile-menu:focus-within .profile-menu-toggle .session-user-initials,
.profile-menu:focus-within .profile-menu-toggle .session-user-theme-icon,
.profile-menu:focus-within .profile-menu-toggle .session-user-preview-icon,
.profile-menu[open] .profile-menu-toggle .session-user-icon,
.profile-menu[open] .profile-menu-toggle .session-user-initials,
.profile-menu[open] .profile-menu-toggle .session-user-theme-icon,
.profile-menu[open] .profile-menu-toggle .session-user-preview-icon {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
    color: var(--accent-strong);
}

@media (hover: hover) and (pointer: fine) {
    .profile-menu-toggle:hover {
        border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
        background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
    }

    .profile-menu-toggle:hover .profile-menu-label {
        max-width: 8.5rem;
        opacity: 1;
        transform: translateX(0);
    }

    .profile-menu-toggle:hover .session-user-icon,
    .profile-menu-toggle:hover .session-user-initials,
    .profile-menu-toggle:hover .session-user-theme-icon,
    .profile-menu-toggle:hover .session-user-preview-icon {
        border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
        background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
        color: var(--accent-strong);
    }
}

.profile-menu:hover .profile-menu-toggle--icon,
.profile-menu:focus-within .profile-menu-toggle--icon,
.profile-menu[open] .profile-menu-toggle--icon,
.profile-menu-toggle--icon:hover {
    gap: 0.65rem;
}

.profile-menu-count {
    width: 1.6rem;
    height: 1.6rem;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
    flex-shrink: 0;
}

.count-badge,
.admin-nav-card__count {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
    flex-shrink: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.badge.count-badge {
    justify-content: center;
}

[data-unread-badge][hidden],
[data-message-dashboard-unread-count="true"][hidden],
[data-message-dashboard-unread-badge="true"][hidden] {
    display: none;
    visibility: hidden;
}

.count-badge--wide,
.admin-nav-card__count.count-badge--wide {
    width: auto;
    min-width: 1.6rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.68rem;
    letter-spacing: -0.03em;
}

.session-user-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent-soft) 65%, transparent);
    color: var(--accent-strong);
    font-size: 1.1rem;
    line-height: 1;
}

.session-user-initials {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent-soft) 65%, transparent);
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.session-user-theme-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent-soft) 65%, transparent);
    color: var(--accent-strong);
    flex-shrink: 0;
}

.session-user-theme-icon::before {
    content: "";
    width: 1.08rem;
    height: 1.08rem;
    background: url("../themes/palette.svg") center / contain no-repeat;
}

.session-user-preview-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent-soft) 65%, transparent);
    color: var(--accent-strong);
    flex-shrink: 0;
}

.session-user-preview-icon::before {
    content: "";
    width: 1.08rem;
    height: 1.08rem;
    -webkit-mask: url("../themes/eye.svg") center / contain no-repeat;
    mask: url("../themes/eye.svg") center / contain no-repeat;
    background-color: currentColor;
    opacity: 0.75;
}

.profile-menu--preview.is-preview-active .profile-menu-toggle {
    border-color: color-mix(in srgb, var(--brand-orange, #e07a10) 55%, var(--line));
    background: color-mix(in srgb, var(--brand-orange, #e07a10) 12%, transparent);
}

.profile-menu--preview.is-preview-active .session-user-preview-icon {
    border-color: color-mix(in srgb, var(--brand-orange, #e07a10) 50%, var(--line));
    background: color-mix(in srgb, var(--brand-orange, #e07a10) 18%, transparent);
}

.profile-menu--preview.is-preview-active .session-user-preview-icon::before,
.profile-menu-toggle:hover .session-user-preview-icon::before,
.profile-menu:focus-within .profile-menu-toggle .session-user-preview-icon::before,
.profile-menu[open] .profile-menu-toggle .session-user-preview-icon::before {
    opacity: 1;
}

.profile-menu-panel--preview {
    min-width: 200px;
}

.profile-preview-form {
    display: contents;
}

.profile-preview-option {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    border-radius: 10px;
    padding: 0.52rem 0.6rem;
    text-align: left;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.profile-preview-option:hover {
    background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
}

.profile-preview-option.is-active {
    background: color-mix(in srgb, var(--accent-soft) 75%, transparent);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    color: var(--accent-strong);
}

.profile-menu-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    min-width: 220px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated-strong) 94%, transparent);
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: 0.15rem;
    padding: 0.35rem;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.profile-menu[open] .profile-menu-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    animation: dropdown-fade-in 170ms ease-out both;
}

.profile-menu-panel--theme {
    min-width: 240px;
}

.profile-menu-panel--theme .theme-auto-toggle {
    margin: 0.2rem 0.2rem 0.42rem;
}

.profile-menu-panel--theme .profile-theme-options {
    padding: 0;
}

.profile-menu-panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    padding: 0.52rem 0.6rem;
    color: var(--text);
    font-weight: 600;
}

.profile-menu-name {
    margin: 0;
    padding: 0.42rem 0.6rem;
    color: var(--muted);
    font-size: 0.86rem;
    border-bottom: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) bottom / 100% 1px no-repeat;
}

.profile-menu-panel a:hover {
    background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
    text-decoration: none;
}

.profile-menu-separator {
    border: none;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    margin: 0.25rem 0.75rem;
}

.profile-menu-panel a.menu-logout {
    color: color-mix(in srgb, var(--brand-red) 85%, #000000 15%);
    font-weight: 700;
}

.profile-menu-panel a.menu-logout:hover {
    background: color-mix(in srgb, var(--brand-red) 14%, transparent);
    color: color-mix(in srgb, var(--brand-red) 92%, #000000 8%);
}

.profile-menu-section-title {
    margin: 0.3rem 0.6rem 0.35rem;
    color: var(--muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.profile-menu-panel a.menu-link--admin,
.profile-menu-panel a.menu-link--sysadmin {
    padding-left: 0.95rem;
    position: relative;
}

.profile-menu-panel a.menu-link--admin::before,
.profile-menu-panel a.menu-link--sysadmin::before {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.05rem;
    border-radius: 2px;
    flex-shrink: 0;
}

.profile-menu-panel a.menu-link--admin::before {
    background: var(--accent);
}

.profile-menu-panel a.menu-link--admin:hover {
    background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
}

.profile-menu-panel a.menu-link--sysadmin::before {
    background: var(--brand-red);
}

.profile-menu-panel a.menu-link--sysadmin {
    color: color-mix(in srgb, var(--brand-red) 72%, var(--text));
}

.profile-menu-panel a.menu-link--sysadmin:hover {
    background: color-mix(in srgb, var(--brand-red) 10%, transparent);
    color: color-mix(in srgb, var(--brand-red) 85%, var(--text));
}

.menu-link__ext {
    font-size: 0.75em;
    opacity: 0.6;
    font-weight: 400;
    margin-left: 0.15rem;
    flex-shrink: 0;
}

.profile-theme-picker {
    padding: 0.2rem 0 0.1rem;
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
    margin-top: 0.15rem;
}

hr,
hr.section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
}

.line-separator {
    --line-separator-position: bottom;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: left var(--line-separator-position);
}

.profile-theme-disclosure {
    padding: 0 0.35rem;
}

.profile-theme-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    padding: 0.52rem 0.6rem;
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.profile-theme-summary__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-theme-summary::-webkit-details-marker {
    display: none;
}

.profile-theme-summary::after {
    content: "▾";
    font-size: 0.8rem;
    color: var(--muted);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.profile-theme-disclosure[open] .profile-theme-summary::after {
    transform: rotate(180deg);
    color: var(--accent-strong);
}

.profile-theme-summary:hover {
    background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
}

.profile-theme-disclosure-panel {
    padding: 0.2rem 0 0.05rem;
}

.theme-auto-toggle {
    margin: 0 0.72rem 0.45rem;
}

.theme-auto-toggle .ui-toggle__text {
    font-size: 0.84rem;
    font-weight: 700;
}

.profile-theme-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.24rem;
    padding: 0 0.35rem;
}

.profile-theme-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    border-radius: 10px;
    padding: 0.52rem 0.6rem;
    text-align: left;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.profile-theme-option:hover {
    background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
}

.profile-theme-option.is-active {
    background: color-mix(in srgb, var(--accent-soft) 75%, transparent);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    color: var(--accent-strong);
}

.profile-theme-option[hidden] {
    display: none;
}

.profile-role-preview {
    padding: 0.2rem 0.35rem 0.1rem;
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
    margin-top: 0.15rem;
}

.profile-role-preview-form {
    display: grid;
    gap: 0.32rem;
}

.profile-role-preview-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.profile-role-preview-select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    padding: 0.52rem 0.6rem;
    min-height: 42px;
}

.profile-role-preview-select:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.emoji-picker {
    margin-top: 0.15rem;
}

.emoji-picker--mart {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: min(640px, calc(100vw - 2rem));
}

.emoji-picker__trigger {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--line) 92%, var(--accent) 8%);
    border-radius: 12px;
    min-height: 44px;
    background: var(--bg-elevated);
    color: var(--text);
    font: inherit;
    padding: 0.32rem 0.56rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.52rem;
    align-items: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.emoji-picker__trigger:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    background: var(--bg-elevated-strong);
}

.emoji-picker__trigger:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.emoji-picker__trigger-glyph {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--bg-elevated-strong);
    font-size: 1.02rem;
    line-height: 1;
}

.emoji-picker__trigger-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-soft);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emoji-picker__trigger-caret {
    font-size: 0.82rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.emoji-picker--mart.is-open .emoji-picker__trigger-caret {
    transform: rotate(180deg);
}

.emoji-picker__panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 260;
    width: min(640px, calc(100vw - 2rem));
    max-height: min(66vh, 520px);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-elevated-strong);
    box-shadow: none;
    padding: 0.54rem;
    display: grid;
    gap: 0.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.emoji-picker--mart.is-open .emoji-picker__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    --dropdown-enter-base: translateY(0);
    animation: dropdown-fade-in 170ms ease-out both;
    z-index: 2147483647;
}

.emoji-picker__panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    --dropdown-enter-base: translateY(0);
    animation: dropdown-fade-in 170ms ease-out both;
    z-index: 2147483647;
}

.emoji-picker__toolbar {
    display: grid;
    gap: 0.38rem;
}

.emoji-picker__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.2rem;
}

.emoji-picker__search {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--line) 90%, var(--accent) 10%);
    border-radius: 10px;
    min-height: 40px;
    padding: 0.42rem 0.6rem;
    background: var(--bg-elevated-strong);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
}

.emoji-picker__search:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.emoji-picker__tab {
    border: 0;
    border-bottom: 2px solid var(--line);
    border-radius: 0;
    min-height: 2.1rem;
    min-width: 1.95rem;
    padding: 0.14rem 0.38rem;
    background: var(--bg-elevated-strong);
    color: var(--text-soft);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: color var(--transition-fast), border-color var(--transition-fast), transform 140ms ease;
}

.emoji-picker__tab:hover {
    border-bottom-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    color: var(--text);
    transform: translateY(-1px);
}

.emoji-picker__tab.is-active {
    border-bottom-color: var(--accent-strong);
    background: var(--bg-elevated-strong);
    color: var(--accent-strong);
    box-shadow: none;
}

.emoji-picker__tab-icon {
    font-size: 1rem;
    line-height: 1;
}

.emoji-picker__tab-text {
    display: none;
}

.emoji-picker__grid {
    --emoji-tile-min: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--emoji-tile-min), 1fr));
    gap: 0.34rem;
    max-height: min(46vh, 340px);
    overflow: auto;
    padding-right: 0.08rem;
}

.emoji-picker__item {
    border: 1px solid var(--bg-elevated-strong);
    background: var(--bg-elevated-strong);
    border-radius: 8px;
    min-height: 2.9rem;
    display: grid;
    place-items: center;
    gap: 0;
    padding: 0.22rem;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.emoji-picker__item:hover {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    background: var(--bg-elevated);
    transform: translateY(-1px);
}

.emoji-picker__item.is-selected,
.emoji-picker__item[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, var(--line));
    animation: emoji-picker-select-in 130ms ease-out;
}

.emoji-picker__item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.emoji-picker__item--none {
    font-size: inherit;
}

.emoji-picker__glyph {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    border: none;
    background: var(--bg-elevated-strong);
    box-shadow: none;
    font-size: 1.2rem;
    line-height: 1;
}

.emoji-picker__glyph--none {
    font-size: 0.76rem;
    font-weight: 800;
}

.emoji-picker__item.is-selected .emoji-picker__glyph,
.emoji-picker__item[aria-checked="true"] .emoji-picker__glyph {
    border: none;
    background: var(--accent-soft);
}

.emoji-picker__label {
    display: none;
}

.emoji-picker__item.is-selected .emoji-picker__label,
.emoji-picker__item[aria-checked="true"] .emoji-picker__label {
    color: inherit;
    font-weight: inherit;
}

.emoji-picker__item[hidden] {
    display: none !important;
}

.emoji-picker__status {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .emoji-picker--mart:hover .emoji-picker__trigger {
        border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
        background: var(--bg-elevated-strong);
    }
}

@media (max-width: 960px) {
    .emoji-picker--mart {
        max-width: 100%;
    }

    .emoji-picker__panel {
        width: min(100%, calc(100vw - 1.2rem));
        max-height: min(62vh, 460px);
    }
}

@media (max-width: 640px) {
    .emoji-picker__grid {
        --emoji-tile-min: 44px;
    }
}

@media (max-width: 480px) {
    .emoji-picker__panel {
        padding: 0.5rem;
        left: 50%;
        transform: translate(-50%, -4px);
    }

    .emoji-picker--mart.is-open .emoji-picker__panel {
        --dropdown-enter-base: translate(-50%, 0);
        transform: translate(-50%, 0);
    }

    .emoji-picker__grid {
        --emoji-tile-min: 42px;
    }

    .emoji-picker__item {
        min-height: 2.65rem;
        padding: 0.18rem;
    }
}

@keyframes dropdown-fade-in {
    from {
        opacity: 0;
        transform: var(--dropdown-enter-base, translateY(0)) scale(0.98);
        filter: brightness(0.98);
    }

    72% {
        opacity: 1;
        transform: var(--dropdown-enter-base, translateY(0)) scale(1.012);
        filter: brightness(1.01);
    }

    to {
        opacity: 1;
        transform: var(--dropdown-enter-base, translateY(0)) scale(1);
        filter: brightness(1);
    }
}

@keyframes emoji-picker-select-in {
    from {
        transform: scale(0.96);
    }

    to {
        transform: scale(1);
    }
}

.theme-picker {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    font-size: 0.95rem;
    margin-left: auto;
}

.theme-picker select,
.form-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    background: var(--bg-elevated);
    color: var(--text);
    border-radius: 14px;
    padding: 0.95rem 1rem;
    font: inherit;
    backdrop-filter: blur(8px);
}

.course-color-picker {
    display: grid;
    gap: 0;
    position: relative;
}

.course-color-picker__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    cursor: pointer;
}

.course-color-picker__trigger::after {
    content: "\25BE";
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 0.6rem;
}

.course-color-picker__trigger.form-input {
    padding-right: 2.8rem;
}

.course-color-picker__panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: -1.3rem;
    z-index: 2147483010;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
    width: min(100%, 20rem);
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    pointer-events: none;
    transform-origin: top left;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.course-color-picker__panel[hidden] {
    display: none;
}

.course-color-picker.is-open .course-color-picker__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: dropdown-fade-in 170ms ease-out both;
}

.course-color-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--bg-elevated) 95%, transparent);
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.course-color-option:hover,
.course-color-option:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    outline: none;
}

.course-color-option.is-active {
    border-color: color-mix(in srgb, var(--accent) 66%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
    background: color-mix(in srgb, var(--accent-soft) 38%, var(--bg-elevated));
}

.course-color-picker__hint {
    margin: 0;
}

.course-color-picker__hint-action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    color: var(--text);
    padding: 0.28rem 0.6rem;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.course-color-picker__hint-action:hover,
.course-color-picker__hint-action:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
    outline: none;
}

.course-color-swatch {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 1.35rem;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--line) 78%, var(--text));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 16%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 90%, var(--muted) 10%);
}

@media (max-width: 640px) {
    .course-color-picker__panel {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: 100%;
    }
}

.course-color-swatch--auto {
    background: linear-gradient(140deg, #8b5e00 0%, #f0c419 14%, #4f83d9 28%, #d6453d 42%, #1d8b5f 58%, #6b3da8 74%, #a0264a 88%, #465b76 100%);
}

.course-color-swatch--kobudo {
    background: linear-gradient(145deg, #d2ba8f 0%, #8b5e00 100%);
}

.course-color-swatch--cardio {
    background: linear-gradient(145deg, #f8e7a6 0%, #d4a90f 100%);
}

.course-color-swatch--budo {
    background: linear-gradient(145deg, #a9c8f2 0%, #2e5ea8 100%);
}

.course-color-swatch--eveil {
    background: linear-gradient(145deg, #f7b56d 0%, #d6453d 100%);
}

.course-color-swatch--menthe {
    background: linear-gradient(145deg, #bdeed7 0%, #1d8b5f 100%);
}

.course-color-swatch--violet {
    background: linear-gradient(145deg, #d7c8f5 0%, #6b3da8 100%);
}

.course-color-swatch--rubis {
    background: linear-gradient(145deg, #f4bfd0 0%, #a0264a 100%);
}

.course-color-swatch--ardoise {
    background: linear-gradient(145deg, #d5dde8 0%, #465b76 100%);
}

select.form-input:not([multiple]),
.theme-picker select:not([multiple]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.35rem;
    background-image: var(--select-arrow-svg);
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.9rem 0.9rem;
}

select.form-input:not([multiple])::-ms-expand,
.theme-picker select:not([multiple])::-ms-expand {
    display: none;
}

select.form-input option,
.theme-picker select option {
    background: var(--bg-elevated-strong);
    color: var(--text);
}

/* Le select thème n'a pas besoin de prendre toute la largeur */
.theme-picker select {
    width: auto;
}

.custom-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.custom-select {
    position: relative;
    width: 100%;
}

.custom-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 44px;
    text-align: left;
    cursor: pointer;
    padding-right: 2.35rem;
    background-image: var(--select-arrow-svg);
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.9rem 0.9rem;
}

.custom-select__trigger:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.custom-select__trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select__panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    box-shadow: var(--shadow-soft);
    padding: 0.6rem;
    display: grid;
    gap: 0;
}

.custom-select__panel[hidden] {
    display: none;
}

.custom-select__panel:not([hidden]) {
    animation: dropdown-fade-in 170ms ease-out both;
}

.custom-select.custom-select--opens-up .custom-select__panel {
    top: auto;
    bottom: calc(100% + 0.45rem);
}

.custom-select__controls {
    display: grid;
    align-items: center;
    gap: 0;
    margin-bottom: 0.20rem;
}

.custom-select__search-wrap .form-input {
    min-height: 44px;
    padding: 0.72rem 0.9rem;
    border-radius: 12px;
}

.custom-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.custom-select__option-row {
    margin: 0;
}

.custom-select__option-button {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 0.62rem 0.72rem;
    border-radius: 10px;
    cursor: pointer;
    min-height: 40px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.custom-select__option-button:hover {
    background: color-mix(in srgb, var(--accent-soft) 68%, transparent);
}

.custom-select__option-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
    outline-offset: 1px;
}

.custom-select__option-button.is-selected {
    background: color-mix(in srgb, var(--accent-soft) 82%, transparent);
    color: color-mix(in srgb, var(--accent) 70%, var(--text));
    font-weight: 700;
}

.custom-select__option-button:disabled {
    color: var(--muted);
    cursor: not-allowed;
}

.custom-select__empty {
    color: var(--muted);
    padding: 0.6rem 0.72rem;
}

.custom-select__meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.theme-picker--public {
    position: relative;
}

.theme-picker__details {
    position: relative;
}

.theme-picker__summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.62rem 0.9rem 0.62rem 0.78rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 94%, var(--accent-soft) 6%);
    color: var(--text);
    cursor: pointer;
    user-select: none;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.theme-picker__summary::-webkit-details-marker {
    display: none;
}

.theme-picker__summary:hover {
    background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

.theme-picker__details[open] .theme-picker__summary {
    border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 76%, transparent);
}

.theme-picker__summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 2px;
}

.theme-picker__summary::after {
    content: "▾";
    color: var(--muted);
    font-size: 0.8rem;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.theme-picker__details[open] .theme-picker__summary::after {
    transform: rotate(180deg);
    color: var(--accent-strong);
}

.theme-picker__summary-icon {
    width: 1.12rem;
    height: 1.12rem;
    flex: 0 0 1.12rem;
    background: url("../themes/palette.svg") center / contain no-repeat;
    opacity: 0.98;
}

.theme-picker__summary-label {
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}

.theme-picker__panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 80;
    width: min(18rem, calc(100vw - 1rem));
    padding: 0.42rem;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-elevated-strong) 96%, var(--accent-soft) 4%);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
    transform-origin: top right;
}

.theme-picker__details[open] .theme-picker__panel {
    animation: dropdown-fade-in 170ms ease-out both;
}

.theme-picker__auto-toggle {
    margin: 0 0.18rem 0.42rem;
}

.theme-picker__options {
    display: grid;
    gap: 0.24rem;
}

.theme-picker__option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.14rem;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 0.62rem 0.72rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.theme-picker__option[hidden] {
    display: none;
}

.theme-picker__option-label {
    display: block;
    line-height: 1.25;
}

.theme-picker__option-note {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.2;
}

.theme-picker__option:hover {
    background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
}

.theme-picker__option.is-active {
    background: color-mix(in srgb, var(--accent-soft) 78%, transparent);
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    color: var(--accent-strong);
}

.theme-picker__option.is-active .theme-picker__option-note {
    color: color-mix(in srgb, var(--accent-strong) 72%, var(--text) 28%);
}

.theme-picker__option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.theme-picker select:focus,
.form-input:focus,
.text-button:focus,
.button:focus {
    outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 2px;
}

.input-error-highlight {
    border-color: #b42318;
    background: color-mix(in srgb, #b42318 8%, var(--bg-elevated));
    box-shadow: 0 0 0 3px color-mix(in srgb, #b42318 14%, transparent);
}

.input-error-highlight:focus {
    outline-color: color-mix(in srgb, #b42318 28%, transparent);
}

/* ---- Password toggle ---- */
.password-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field-wrap .form-input {
    padding-right: 3rem;
}

.password-toggle-btn {
    position: absolute;
    right: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--text-muted, #888);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s;
    flex-shrink: 0;
}

.password-toggle-btn:hover {
    color: var(--text);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* ---- /Password toggle ---- */

.hero,
.section {
    padding: 3.2rem 0 1.6rem;
}

.hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.6rem;
    align-items: stretch;
}

.hero--full-width {
    grid-template-columns: 1fr;
}

.hero-panel,
.card,
.form-card,
.content-card {
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-soft) 68%, transparent), transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--bg-elevated-strong) 95%, var(--accent-soft) 5%), var(--bg-elevated));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
}

.content-card--max-480 {
    max-width: 480px;
}

.content-card--max-640 {
    max-width: 640px;
}

.content-card--max-960 {
    max-width: 960px;
}

.content-card--compact {
    padding: .75rem 1rem;
}

.inline-toggle-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.inline-toggle-row__text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    line-height: 1.3;
}

.inline-toggle-row__text strong {
    font-size: .95rem;
}

.inline-toggle-row__text .ui-toggle__text {
    font-size: .82rem;
    color: var(--text-muted);
}

.hero-copy {
    padding: 2.3rem;
    border-radius: 36px;
    position: relative;
    overflow: hidden;
}

.hero-copy::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -150px;
    top: -190px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-cyan) 35%, transparent), transparent 70%);
    pointer-events: none;
}

.hero-panel {
    padding: 1.5rem;
    border-radius: 30px;
}

.eyebrow {
    margin: 0 0 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
}

.hero-text,
.panel-note,
.section-heading p {
    color: var(--muted);
}

.section-heading .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.82rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
}

.section-heading .eyebrow::before {
    content: "";
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
}

.section-heading h1,
.section-heading h2,
.hero-copy h1 {
    letter-spacing: -0.03em;
    text-wrap: balance;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .section-heading h1,
    .section-heading h2,
    .hero-copy h1 {
        background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--text) 76%, var(--accent-strong) 24%),
            color-mix(in srgb, var(--accent) 72%, var(--text) 28%)
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.hero-actions,
.inline-actions,
.toggle-grid,
.role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.4rem;
}

.admin-header-actions {
    align-items: center;
    justify-content: flex-end;
}

.admin-header-actions .button {
    white-space: nowrap;
}

.inline-actions--spaced {
    margin-top: 1.5rem;
}

/* ---- Role chip picker ---- */
.role-chip-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.35rem;
}

.role-chip-picker--detailed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--bg-elevated);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.role-chip--detailed {
    align-items: flex-start;
    border-radius: 18px;
    padding: 0.9rem;
    min-height: 100%;
}

.role-chip__body {
    display: grid;
    gap: 0.25rem;
}

.role-chip__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.role-chip__meta {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.role-chip__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.role-chip__description {
    font-size: 0.9rem;
    line-height: 1.45;
    font-weight: 500;
    color: var(--text-muted);
}

.role-chip__hint {
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--text-soft);
}

.role-chip__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.role-chip__check {
    display: none;
    font-size: 0.8em;
    line-height: 1;
}

.role-chip:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
}

.role-chip:active {
    transform: scale(0.99);
}

.role-chip:has(.role-chip__input:focus-visible) {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bg-elevated) 98%, transparent),
        0 0 0 5px color-mix(in srgb, var(--accent) 26%, transparent);
}

.role-chip.is-selected {
    background:
        radial-gradient(circle at 24% 22%, color-mix(in srgb, #ffffff 24%, transparent) 0%, transparent 52%),
        color-mix(in srgb, var(--accent) 16%, var(--bg-elevated));
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
}

.role-chip.is-selected .role-chip__check {
    display: inline;
}

.role-chip--detailed.is-selected .role-chip__meta,
.role-chip--detailed.is-selected .role-chip__description,
.role-chip--detailed.is-selected .role-chip__hint {
    color: inherit;
}
/* ---- /Role chip picker ---- */

.admin-user-rights-section {
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    padding: 0.95rem;
    display: grid;
    gap: 0.55rem;
}

.admin-user-rights-summary strong,
.admin-user-rights-summary p {
    margin: 0;
}

.admin-user-rights-summary__list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--text-muted);
}

.admin-user-rights-summary__list li + li {
    margin-top: 0.22rem;
}

.admin-user-role-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
}

.admin-user-role-guide {
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    padding: 0.9rem;
    display: grid;
    gap: 0.45rem;
}

.admin-user-role-guide__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-user-role-guide__head .badge {
    font-size: 0.72rem;
    word-break: break-word;
    min-width: 0;
}

.admin-user-role-guide p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.admin-user-search-form {
    flex-wrap: wrap;
}

.admin-users-tools {
    width: auto;
    gap: 0.45rem;
}

.admin-users-tools .filter-collapse {
    flex: 1 1 100%;
    width: 100%;
}

.admin-users-filter-top {
    margin-bottom: 0.75rem;
}

.admin-user-search-input {
    min-width: 220px;
}

.verify-email-resend-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.verify-email-resend-field {
    flex: 1 1 12.5rem;
    min-width: 0;
}

/* ---- Unified toggle styling ---- */
.ui-toggle,
.sys-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.75rem;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    touch-action: manipulation;
}

.ui-toggle__input,
.sys-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ui-toggle__track,
.sys-toggle__track {
    width: 2.9rem;
    height: 1.7rem;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--line) 80%, var(--accent) 20%);
    background:
        radial-gradient(circle at 20% 24%, color-mix(in srgb, #ffffff 62%, transparent) 0%, transparent 48%),
        color-mix(in srgb, var(--line) 50%, var(--bg-elevated));
    display: inline-flex;
    align-items: center;
    padding: 0.14rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.ui-toggle__track::after,
.sys-toggle__track::after {
    content: "";
    position: absolute;
    inset: -22%;
    border-radius: inherit;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent) 0%, color-mix(in srgb, var(--accent) 0%, transparent) 70%);
    opacity: 0;
    transform: scale(0.2);
    pointer-events: none;
}

.ui-toggle__thumb,
.sys-toggle__thumb {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, color-mix(in srgb, #ffffff 88%, transparent) 0%, transparent 52%),
        var(--bg-elevated);
    box-shadow:
        0 2px 8px color-mix(in srgb, #000000 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 60%, transparent);
    transform: translateX(0);
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.ui-toggle:hover .ui-toggle__track,
.sys-toggle:hover .sys-toggle__track {
    border-color: color-mix(in srgb, var(--accent) 66%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-0.5px);
}

.ui-toggle__input:checked + .ui-toggle__track,
.sys-toggle__input:checked + .sys-toggle__track {
    background:
        radial-gradient(circle at 24% 26%, color-mix(in srgb, #ffffff 30%, transparent) 0%, transparent 46%),
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 52%, var(--bg-elevated)), color-mix(in srgb, var(--accent) 66%, #0f172a 34%));
    border-color: var(--accent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
}

.ui-toggle__input:checked + .ui-toggle__track .ui-toggle__thumb,
.sys-toggle__input:checked + .sys-toggle__track .sys-toggle__thumb {
    transform: translateX(1.2rem);
    animation: toggle-thumb-bump-checked 220ms cubic-bezier(0.2, 0.85, 0.35, 1);
    background:
        radial-gradient(circle at 30% 24%, color-mix(in srgb, #ffffff 92%, transparent) 0%, transparent 54%),
        var(--brand-white);
    box-shadow:
        0 3px 11px color-mix(in srgb, #000000 24%, transparent),
        0 0 0 2px color-mix(in srgb, #ffffff 45%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

.ui-toggle:active .ui-toggle__track,
.sys-toggle:active .sys-toggle__track {
    transform: scale(0.98);
}

.ui-toggle:active .ui-toggle__track::after,
.sys-toggle:active .sys-toggle__track::after {
    animation: toggle-track-ripple 280ms ease-out;
}

.ui-toggle__input:focus-visible + .ui-toggle__track,
.sys-toggle__input:focus-visible + .sys-toggle__track {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bg-elevated) 98%, transparent),
        0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent);
}

.ui-toggle__text,
.sys-toggle__text {
    line-height: 1.35;
}

/* Toggle avec libellé gauche/droite selon l'état */
.ui-toggle--labeled {
    gap: 0.6rem;
}

.ui-toggle__label-off,
.ui-toggle__label-on {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    transition: color var(--transition-fast), opacity var(--transition-fast);
    min-width: 0;
}

/* label-off est après le track dans le DOM mais doit apparaître à sa gauche */
.ui-toggle--labeled .ui-toggle__label-off {
    order: -1;
    text-align: right;
}

.ui-toggle--labeled .ui-toggle__label-on {
    text-align: left;
}

/* État OFF (défaut) : gauche actif, droite estompée */
.ui-toggle__label-off {
    color: var(--text-secondary, var(--muted));
    opacity: 1;
}

.ui-toggle__label-on {
    color: var(--muted);
    opacity: 0.45;
}

/* État ON (coché) : gauche estompé, droite actif en accent */
.ui-toggle__input:checked ~ .ui-toggle__label-off {
    color: var(--muted);
    opacity: 0.45;
}

.ui-toggle__input:checked ~ .ui-toggle__label-on {
    color: var(--accent);
    opacity: 1;
}

.ui-toggle--field {
    margin-top: 0.5rem;
}

.registration-consent-toggle {
    width: 100%;
    justify-content: flex-end;
    text-align: right;
}

.ui-toggle.is-disabled,
.sys-toggle.is-disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.ui-toggle__input:disabled + .ui-toggle__track,
.sys-toggle__input:disabled + .sys-toggle__track {
    border-color: color-mix(in srgb, var(--line) 92%, transparent);
    background: color-mix(in srgb, var(--line) 62%, var(--bg-elevated));
}

.ui-toggle__input:disabled + .ui-toggle__track .ui-toggle__thumb,
.sys-toggle__input:disabled + .sys-toggle__track .sys-toggle__thumb {
    box-shadow: none;
}

.ui-toggle__input:disabled ~ .ui-toggle__text,
.sys-toggle__input:disabled ~ .sys-toggle__text {
    color: var(--text-muted);
}

/* ---- Unified radio card styling ---- */
.ui-radio-card {
    position: relative;
    display: block;
    min-height: 3.15rem;
    padding: 0.85rem 0.9rem;
    border: 1.75px solid color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
    border-radius: 14px;
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, #ffffff 38%, transparent) 0%, transparent 55%),
        color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.ui-radio-card__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.ui-radio-card__body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.25rem;
    padding-left: 2rem;
}

.ui-radio-card__body::before,
.ui-radio-card__body::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ui-radio-card__body::before {
    width: 1.34rem;
    height: 1.34rem;
    left: 0;
    top: 0.02rem;
    border: 1.9px solid color-mix(in srgb, var(--line) 76%, var(--accent) 24%);
    background:
        radial-gradient(circle at 30% 26%, color-mix(in srgb, #ffffff 82%, transparent) 0%, transparent 48%),
        color-mix(in srgb, var(--bg-elevated) 94%, var(--line));
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.ui-radio-card__body::after {
    width: 0.68rem;
    height: 0.68rem;
    left: 0.33rem;
    top: 0.35rem;
    background: var(--brand-white);
    transform: scale(0);
    box-shadow: 0 0 0 0.06rem color-mix(in srgb, #ffffff 52%, transparent);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.ui-radio-card:hover {
    border-color: color-mix(in srgb, var(--accent) 66%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-0.5px);
}

.ui-radio-card:active {
    transform: scale(0.992);
}

.ui-radio-card:has(.ui-radio-card__input:checked) {
    border-color: var(--accent);
    background:
        radial-gradient(circle at 22% 18%, color-mix(in srgb, #ffffff 26%, transparent) 0%, transparent 48%),
        color-mix(in srgb, var(--accent-soft) 48%, var(--bg-elevated));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
}

.ui-radio-card:has(.ui-radio-card__input:checked) .ui-radio-card__body::before {
    border-color: var(--accent);
    background:
        radial-gradient(circle at 34% 28%, color-mix(in srgb, #ffffff 34%, transparent) 0%, transparent 42%),
        radial-gradient(circle at 68% 74%, color-mix(in srgb, #0f172a 28%, transparent) 0%, transparent 46%),
        color-mix(in srgb, var(--accent) 84%, #0f172a 16%);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 26%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #0f172a 36%, transparent);
}

.ui-radio-card:has(.ui-radio-card__input:checked) .ui-radio-card__body::after {
    transform: scale(1);
    animation: control-radio-dot-in 210ms cubic-bezier(0.18, 0.8, 0.22, 1);
}

.ui-radio-card:has(.ui-radio-card__input:focus-visible) {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bg-elevated) 98%, transparent),
        0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent);
}

.ui-radio-card:has(.ui-radio-card__input:disabled) {
    opacity: 0.62;
    cursor: not-allowed;
}

@keyframes toggle-track-ripple {
    0% {
        opacity: 0.48;
        transform: scale(0.2);
    }
    100% {
        opacity: 0;
        transform: scale(1.22);
    }
}

@keyframes toggle-thumb-bump-checked {
    0% {
        transform: translateX(1.1rem) scale(0.94);
    }
    72% {
        transform: translateX(1.22rem) scale(1.04);
    }
    100% {
        transform: translateX(1.2rem) scale(1);
    }
}

.sys-role-chip-picker {
    gap: 0.6rem;
}

.sys-role-chip {
    border-width: 1.75px;
    padding: 0.45rem 1rem;
}

.sys-role-chip .role-chip__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--line) 75%, var(--bg-elevated));
    color: transparent;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.sys-role-chip.is-selected .role-chip__check {
    background: var(--accent);
    color: var(--brand-white);
    transform: scale(1.03);
}

.sys-role-chip:has(.role-chip__input:focus-visible) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* ---- /Sysadmin checkbox styling ---- */

.button,
.submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.9rem 1.3rem;
    font-weight: 700;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.button::before,
.submit-button::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.24), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.1));
    pointer-events: none;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.button:hover,
.submit-button:hover {
    transform: translateY(-2px);
    filter: saturate(1.04);
}

.button.primary,
.submit-button {
    background: linear-gradient(
        140deg,
        color-mix(in srgb, var(--accent) 60%, var(--brand-blue) 40%),
        color-mix(in srgb, var(--accent-strong) 56%, var(--brand-cyan) 44%)
    );
    border-color: color-mix(in srgb, var(--accent) 60%, #000000 40%);
    color: var(--brand-white);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 28%, transparent);
}

.button.primary:hover,
.submit-button:hover {
    background: linear-gradient(
        140deg,
        color-mix(in srgb, var(--accent-strong) 36%, var(--accent) 64%),
        color-mix(in srgb, var(--brand-orange) 22%, var(--accent-strong) 78%)
    );
    box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 36%, transparent);
}

.button.secondary {
    background: linear-gradient(
        140deg,
        color-mix(in srgb, var(--accent-soft) 48%, var(--bg-elevated)),
        color-mix(in srgb, var(--bg-elevated-strong) 88%, var(--accent-soft) 12%)
    );
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    color: var(--text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
    font-weight: 650;
}

.button.secondary:hover {
    background: linear-gradient(
        140deg,
        color-mix(in srgb, var(--accent-soft) 64%, var(--bg-elevated)),
        color-mix(in srgb, var(--bg-elevated-strong) 80%, var(--accent-soft) 20%)
    );
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

.button.small {
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
}

.button.danger {
    background: linear-gradient(140deg, var(--brand-red), color-mix(in srgb, var(--brand-red) 80%, #000000 20%));
    border-color: color-mix(in srgb, var(--brand-red) 60%, #000000 40%);
    color: var(--brand-white);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-red) 22%, transparent);
}

.button.danger:hover {
    background: linear-gradient(140deg, color-mix(in srgb, var(--brand-red) 85%, #000000 15%), color-mix(in srgb, var(--brand-red) 70%, #000000 30%));
    box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-red) 30%, transparent);
}

.button.warning {
    background: linear-gradient(
        140deg,
        color-mix(in srgb, var(--warning) 78%, var(--brand-orange) 22%),
        color-mix(in srgb, var(--warning) 64%, var(--brand-orange) 36%)
    );
    border-color: color-mix(in srgb, var(--brand-orange) 54%, var(--line));
    color: var(--text);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-orange) 18%, transparent);
}

.button.warning:hover {
    background: linear-gradient(
        140deg,
        color-mix(in srgb, var(--warning) 70%, var(--brand-orange) 30%),
        color-mix(in srgb, var(--warning) 56%, var(--brand-orange) 44%)
    );
    border-color: color-mix(in srgb, var(--brand-orange) 66%, var(--line));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-orange) 26%, transparent);
}

/* Orange — actions sensibles (annuler, refuser, révoquer) mais pas irréversibles */
.button.orange {
    background: linear-gradient(140deg, var(--brand-orange), color-mix(in srgb, var(--brand-orange) 78%, #000000 22%));
    border-color: color-mix(in srgb, var(--brand-orange) 62%, #000000 38%);
    color: var(--brand-white);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-orange) 24%, transparent);
}

.button.orange:hover {
    background: linear-gradient(140deg, color-mix(in srgb, var(--brand-orange) 92%, #ffffff 8%), color-mix(in srgb, var(--brand-orange) 68%, #000000 32%));
    border-color: color-mix(in srgb, var(--brand-orange) 74%, #000000 26%);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-orange) 32%, transparent);
}

.button.ghost {
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--line) 70%, transparent);
    color: var(--text);
    padding: 0.58rem 1rem;
    min-height: 44px;
    line-height: 1.25;
    cursor: pointer;
    font: inherit;
    gap: 0.3rem;
    font-weight: 600;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.button.ghost::before {
    opacity: 0;
}

.button.ghost.small {
    padding: 0.52rem 0.95rem;
    min-height: 40px;
    font-size: 0.92rem;
    font-weight: 600;
}

.button.ghost:hover,
.button.ghost:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 68%, transparent);
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    color: var(--accent-strong);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-1px);
}

.text-button {
    background: transparent;
    border: none;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    font: inherit;
    line-height: 1.4;
}

.text-button.danger {
    color: #b42318;
}

.text-button.danger:hover {
    color: color-mix(in srgb, #b42318 80%, #000000 20%);
}

.btn-icon {
    --btn-icon-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--accent-soft) 70%, var(--bg-elevated) 30%),
        color-mix(in srgb, var(--accent-soft) 38%, var(--bg-elevated-strong) 62%)
    );
    --btn-icon-border: color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
    --btn-icon-color: color-mix(in srgb, var(--accent-strong) 74%, var(--text) 26%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--btn-icon-border);
    background: var(--btn-icon-bg);
    color: var(--btn-icon-color);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 12%, transparent);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-icon i {
    font-size: 1.05rem;
    line-height: 1;
}

.cover-star-glyph {
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 700;
}

.btn-icon:hover {
    transform: translateY(-1px);
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--accent-soft) 84%, var(--bg-elevated) 16%),
        color-mix(in srgb, var(--accent-soft) 54%, var(--bg-elevated-strong) 46%)
    );
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line) 52%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

.btn-icon:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent),
        0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

.btn-icon.success,
.btn-icon.active {
    --btn-icon-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--success) 78%, var(--bg-elevated) 22%),
        color-mix(in srgb, var(--success) 56%, var(--bg-elevated-strong) 44%)
    );
    --btn-icon-border: color-mix(in srgb, var(--success-strong) 42%, var(--line) 58%);
    --btn-icon-color: color-mix(in srgb, var(--success-strong) 84%, var(--text) 16%);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--success-strong) 18%, transparent);
}

.btn-icon.success:hover,
.btn-icon.active:hover {
    border-color: color-mix(in srgb, var(--success-strong) 54%, var(--line) 46%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--success-strong) 24%, transparent);
}

.btn-icon.danger {
    --btn-icon-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--danger) 76%, var(--bg-elevated) 24%),
        color-mix(in srgb, var(--danger) 56%, var(--bg-elevated-strong) 44%)
    );
    --btn-icon-border: color-mix(in srgb, var(--danger-strong) 44%, var(--line) 56%);
    --btn-icon-color: color-mix(in srgb, var(--danger-strong) 88%, var(--text) 12%);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--danger-strong) 20%, transparent);
}

.btn-icon.danger:hover {
    border-color: color-mix(in srgb, var(--danger-strong) 56%, var(--line) 44%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--danger-strong) 26%, transparent);
}

/* Orange — actions sensibles (annuler, refuser, révoquer) mais pas irréversibles */
.btn-icon.orange {
    --btn-icon-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--brand-orange) 24%, var(--bg-elevated) 76%),
        color-mix(in srgb, var(--brand-orange) 14%, var(--bg-elevated-strong) 86%)
    );
    --btn-icon-border: color-mix(in srgb, var(--brand-orange) 48%, var(--line) 52%);
    --btn-icon-color: color-mix(in srgb, var(--brand-orange) 90%, var(--text) 10%);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-orange) 18%, transparent);
}

.btn-icon.orange:hover {
    border-color: color-mix(in srgb, var(--brand-orange) 60%, var(--line) 40%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-orange) 26%, transparent);
}

/* Warning (icône) — même tonalité ambre que button.warning */
.btn-icon.warning {
    --btn-icon-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--warning) 78%, var(--bg-elevated) 22%),
        color-mix(in srgb, var(--warning) 58%, var(--bg-elevated-strong) 42%)
    );
    --btn-icon-border: color-mix(in srgb, var(--brand-orange) 44%, var(--line) 56%);
    --btn-icon-color: color-mix(in srgb, var(--brand-orange) 86%, var(--text) 14%);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-orange) 14%, transparent);
}

.btn-icon.warning:hover {
    border-color: color-mix(in srgb, var(--brand-orange) 56%, var(--line) 44%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-orange) 20%, transparent);
}

.btn-icon:disabled,
.btn-icon[aria-disabled="true"],
.btn-icon.u-disabled-look {
    opacity: 0.52;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(0.1);
    box-shadow: none;
}

.attendance-adjust-control {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: nowrap;
}

.attendance-adjust-count {
    min-width: 2.85rem;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

#balloon-trigger-btn {
    transition: transform var(--transition-fast);
}

#balloon-trigger-btn:hover,
#balloon-trigger-btn:focus-visible {
    transform: scale(1.1) rotate(-12deg);
}

@media (prefers-reduced-motion: reduce) {
    #balloon-trigger-btn:hover,
    #balloon-trigger-btn:focus-visible {
        transform: scale(1.05);
    }
}

@media (max-width: 960px) {
    .btn-icon {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .attendance-adjust-control {
        gap: 0.3rem;
    }

    .attendance-adjust-count {
        min-width: 2.4rem;
    }

    .split-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .split-heading .inline-actions {
        margin-top: 0.75rem;
        width: 100%;
    }

    .split-heading .inline-actions.compact-actions {
        width: auto;
    }
}

.badge,
.role-badges span {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1.2px solid var(--line);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.badge--longform {
    align-items: flex-start;
    max-inline-size: min(100%, 42rem);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.35;
    text-align: left;
}

.badge--longform .badge__label {
    font-weight: 800;
}

.session-copy-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 0.9rem;
}

.session-copy-summary-card {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    min-height: 100%;
    padding: 0.95rem 1rem;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 90%, var(--accent-soft));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.session-copy-summary-card--secondary {
    background: color-mix(in srgb, var(--bg-elevated) 86%, var(--brand-cyan) 14%);
}

.session-copy-summary-card--wide {
    grid-column: 1 / -1;
}

.session-copy-summary-card__label {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
}

.session-copy-summary-card__body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    font-weight: 650;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
}

.session-copy-summary-list {
    display: grid;
    gap: 0.55rem;
    margin: 0.15rem 0 0;
    padding: 0;
    list-style: none;
}

.session-copy-summary-list li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.93rem;
    line-height: 1.45;
    color: var(--text);
    overflow-wrap: anywhere;
}

.session-copy-summary-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--brand-cyan);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-cyan) 18%, transparent);
}

.session-copy-summary-list strong {
    font-weight: 800;
}

.badge-success {
    background: color-mix(in srgb, #1f7a45 20%, var(--accent-soft));
}

.badge-danger {
    background: color-mix(in srgb, #b42318 16%, var(--accent-soft));
}

.warning-badge {
    background: color-mix(in srgb, #92400e 13%, var(--accent-soft));
    color: color-mix(in srgb, #92400e 85%, var(--text));
    border-color: color-mix(in srgb, #92400e 28%, var(--line));
    gap: 0.35rem;
}

.muted-badge {
    color: var(--muted);
}

.panel-grid,
.feature-grid,
.dashboard-grid,
.form-grid,
.footer-grid {
    display: grid;
    gap: 1rem;
}

.panel-grid {
    grid-template-columns: repeat(3, 1fr);
}

.hero-panel .panel-grid {
    grid-template-columns: 1fr;
}

.metric-card,
.card {
    border-radius: var(--radius-lg);
    padding: 1.35rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.metric-card:hover,
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
    border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
}

.metric-card {
    --metric-highlight-bg: var(--card-highlight);
    --metric-highlight-line: var(--line);
    --metric-highlight-bubble: color-mix(in srgb, #ffffff 18%, transparent);
    background: var(--metric-highlight-bg);
    border: 1px solid var(--metric-highlight-line);
    position: relative;
    overflow: hidden;
}

.metric-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -34px;
    bottom: -40px;
    border-radius: 50%;
    background: var(--metric-highlight-bubble);
}

.metric-card--traffic {
    --metric-highlight-bg: linear-gradient(160deg, color-mix(in srgb, var(--brand-blue) 12%, var(--card-highlight)), var(--card-highlight));
    --metric-highlight-line: color-mix(in srgb, var(--brand-blue) 34%, var(--line));
    --metric-highlight-bubble: color-mix(in srgb, var(--brand-blue) 22%, #ffffff 18%);
}

.metric-card--audience {
    --metric-highlight-bg: linear-gradient(160deg, color-mix(in srgb, var(--brand-cyan) 11%, var(--card-highlight)), var(--card-highlight));
    --metric-highlight-line: color-mix(in srgb, var(--brand-cyan) 34%, var(--line));
    --metric-highlight-bubble: color-mix(in srgb, var(--brand-cyan) 24%, #ffffff 16%);
}

.metric-card--retention {
    --metric-highlight-bg: linear-gradient(160deg, color-mix(in srgb, #1f7a45 14%, var(--card-highlight)), var(--card-highlight));
    --metric-highlight-line: color-mix(in srgb, #1f7a45 40%, var(--line));
    --metric-highlight-bubble: color-mix(in srgb, #1f7a45 24%, #ffffff 15%);
}

.metric-card--duration {
    --metric-highlight-bg: linear-gradient(160deg, color-mix(in srgb, var(--brand-orange) 11%, var(--card-highlight)), var(--card-highlight));
    --metric-highlight-line: color-mix(in srgb, var(--brand-orange) 36%, var(--line));
    --metric-highlight-bubble: color-mix(in srgb, var(--brand-orange) 24%, #ffffff 16%);
}

.metric-card--public {
    --metric-highlight-bg: linear-gradient(160deg, color-mix(in srgb, var(--brand-blue) 10%, var(--card-highlight)), var(--card-highlight));
    --metric-highlight-line: color-mix(in srgb, var(--brand-blue) 30%, var(--line));
    --metric-highlight-bubble: color-mix(in srgb, var(--brand-blue) 18%, #ffffff 18%);
}

.metric-card--member {
    --metric-highlight-bg: linear-gradient(160deg, color-mix(in srgb, var(--brand-cyan) 10%, var(--card-highlight)), var(--card-highlight));
    --metric-highlight-line: color-mix(in srgb, var(--brand-cyan) 30%, var(--line));
    --metric-highlight-bubble: color-mix(in srgb, var(--brand-cyan) 18%, #ffffff 18%);
}

.metric-card--admin {
    --metric-highlight-bg: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--card-highlight)), var(--card-highlight));
    --metric-highlight-line: color-mix(in srgb, var(--accent) 30%, var(--line));
    --metric-highlight-bubble: color-mix(in srgb, var(--accent) 20%, #ffffff 16%);
}

.metric-card--auth {
    --metric-highlight-bg: linear-gradient(160deg, color-mix(in srgb, var(--brand-orange) 10%, var(--card-highlight)), var(--card-highlight));
    --metric-highlight-line: color-mix(in srgb, var(--brand-orange) 30%, var(--line));
    --metric-highlight-bubble: color-mix(in srgb, var(--brand-orange) 20%, #ffffff 16%);
}

.metric-card--authenticated {
    --metric-highlight-bg: linear-gradient(160deg, color-mix(in srgb, #1f7a45 10%, var(--card-highlight)), var(--card-highlight));
    --metric-highlight-line: color-mix(in srgb, #1f7a45 30%, var(--line));
    --metric-highlight-bubble: color-mix(in srgb, #1f7a45 20%, #ffffff 16%);
}

.metric-card--anonymous {
    --metric-highlight-bg: linear-gradient(160deg, color-mix(in srgb, var(--brand-red) 10%, var(--card-highlight)), var(--card-highlight));
    --metric-highlight-line: color-mix(in srgb, var(--brand-red) 30%, var(--line));
    --metric-highlight-bubble: color-mix(in srgb, var(--brand-red) 20%, #ffffff 16%);
}

.metric-card span {
    display: block;
    font-family: var(--font-title);
    font-size: 2rem;
    margin-bottom: 0.3rem;
}

.import-stats-grid {
    gap: 0.75rem;
}

.import-stat-card {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    border-left-width: 6px;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.import-stat-card__label {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
}

.import-stat-card__value {
    margin: 0.22rem 0 0;
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--text);
}

.import-stat-card--good {
    border-left-color: #1f7a45;
    background: color-mix(in srgb, #1f7a45 11%, var(--bg-elevated));
}

.import-stat-card--warn {
    border-left-color: #c46c07;
    background: color-mix(in srgb, #f77f00 14%, var(--bg-elevated));
}

.import-stat-card--bad {
    border-left-color: #b42318;
    background: color-mix(in srgb, #d62828 13%, var(--bg-elevated));
}

.feature-grid {
    grid-template-columns: repeat(3, 1fr);
}

.faq-shell {
    display: grid;
    gap: 1.15rem;
}

.faq-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: end;
    padding: 0.95rem;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: calc(var(--radius-lg) - 6px);
    background:
        linear-gradient(130deg, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 52%),
        color-mix(in srgb, var(--bg-elevated) 94%, transparent);
}

.faq-search-wrap {
    display: grid;
    gap: 0.42rem;
}

.faq-search-wrap .form-label {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.faq-search-input {
    min-height: 46px;
}

.faq-results-count {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.faq-card {
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: var(--radius-lg);
    background:
        linear-gradient(172deg, color-mix(in srgb, var(--accent-soft) 36%, transparent), transparent 35%),
        var(--bg-elevated);
    box-shadow: var(--shadow-soft);
    overflow: clip;
}

.faq-item {
    height: 100%;
}

.faq-question {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1rem 0.8rem;
    display: grid;
    gap: 0.62rem;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question-text {
    display: block;
    color: var(--text);
    font-size: 1.02rem;
    line-height: 1.45;
    font-weight: 700;
}

.faq-answer-wrap {
    display: grid;
    gap: 0.6rem;
    margin: 0 1rem 1rem;
    padding: 0.88rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    background: color-mix(in srgb, var(--bg) 74%, transparent);
}

.faq-answer {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.72;
}

.faq-answer-quick {
    margin: 0;
    padding: 0.48rem 0.62rem;
    border-radius: calc(var(--radius-sm) + 2px);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 32%, transparent);
    color: color-mix(in srgb, var(--text) 82%, var(--accent-strong) 18%);
    font-size: 0.9rem;
    line-height: 1.45;
    font-weight: 600;
}

.faq-highlight {
    background: color-mix(in srgb, #f9de6f 74%, transparent);
    color: var(--text);
    border-radius: 0.26rem;
    padding: 0.04rem 0.16rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.faq-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 32px;
    padding: 0.2rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.faq-chip--question {
    color: color-mix(in srgb, var(--accent-strong) 85%, var(--text) 15%);
    border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 68%, transparent);
}

.faq-chip--answer {
    color: color-mix(in srgb, #1f7a45 76%, var(--text) 24%);
    border: 1px solid color-mix(in srgb, #1f7a45 40%, var(--line));
    background: color-mix(in srgb, #1f7a45 13%, var(--bg-elevated));
}

.faq-card[hidden] {
    display: none;
}

.faq-empty-search {
    margin: 0;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    border: 1px dashed color-mix(in srgb, var(--accent) 36%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 26%, transparent);
    color: var(--text-soft);
}

.faq-card--empty {
    padding: 1.25rem;
}

.faq-card--empty h3,
.faq-card--empty p {
    margin-top: 0;
}

@media (max-width: 960px) {
    .faq-toolbar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .faq-results-count {
        white-space: normal;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .faq-question-text {
        font-size: 0.98rem;
    }
}

@media (max-width: 640px) {
    .faq-toolbar {
        padding: 0.82rem;
    }

    .faq-question {
        padding: 0.88rem 0.88rem 0.72rem;
    }

    .faq-answer-wrap {
        margin: 0 0.88rem 0.88rem;
        padding: 0.72rem;
    }

    .faq-answer-quick {
        font-size: 0.86rem;
        padding: 0.42rem 0.52rem;
    }
}

@media (max-width: 480px) {
    .faq-chip {
        min-height: 30px;
        font-size: 0.68rem;
    }
}

@media (max-width: 360px) {
    .faq-toolbar {
        padding: 0.72rem;
    }

    .faq-question,
    .faq-answer-wrap {
        border-radius: calc(var(--radius-md) - 4px);
    }
}

.home-card-section .section-heading {
    margin-bottom: 1.35rem;
}

@media (max-width: 720px) {
    .home-card-section .section-heading {
        margin-bottom: 0.95rem;
    }
}

.doc-flow-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.85rem;
}

.doc-flow-filter {
    display: inline-flex;
    gap: 0.45rem;
    margin-bottom: 0.95rem;
    padding: 0.28rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
}

.doc-flow-filter__legend {
    margin-top: -0.35rem;
    margin-bottom: 0.95rem;
    color: var(--muted);
}

.doc-flow-filter__button {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.88rem;
    min-height: 44px;
    padding: 0.48rem 0.95rem;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.doc-flow-filter__button:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

.doc-flow-filter__button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 52%, transparent);
    outline-offset: 1px;
}

.doc-flow-filter__button.is-active {
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
}

.doc-flow-step {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    border-radius: 18px;
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--accent-soft) 36%, transparent), transparent 42%),
        linear-gradient(165deg, var(--bg-elevated-strong), var(--bg-elevated));
    padding: 1rem 0.95rem;
    display: grid;
    gap: 0.45rem;
    align-content: start;
    min-height: 230px;
}

.doc-flow-step::after {
    content: "";
    position: absolute;
    top: 42px;
    right: -0.75rem;
    width: 0.65rem;
    height: 2px;
    background: color-mix(in srgb, var(--accent) 44%, var(--line));
}

.doc-flow-step:last-child::after {
    display: none;
}

.doc-flow-step__index {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
    color: var(--accent-strong);
    font-weight: 800;
    font-size: 0.95rem;
    display: inline-grid;
    place-items: center;
}

.doc-flow-step__actor {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.doc-flow-step h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
}

.doc-flow-step p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.doc-flow-step .button {
    margin-top: auto;
    min-height: 44px;
    justify-content: center;
}

.doc-flow-step.is-flow-filtered-out {
    opacity: 0.35;
    filter: grayscale(0.2);
}

.doc-flow-step.is-flow-filtered-out .button {
    pointer-events: none;
}

.campaign-card,
.testimonial-card,
.contact-cta-card,
.home-dynamic-card,
.card.emphasis {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.campaign-card::before,
.testimonial-card::before,
.contact-cta-card::before,
.home-dynamic-card::before,
.card.emphasis::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 24%, transparent), transparent 34%),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.campaign-card > *,
.testimonial-card > *,
.contact-cta-card > *,
.home-dynamic-card > *,
.card.emphasis > * {
    position: relative;
    z-index: 1;
}

.campaign-card {
    border-left: 4px solid var(--brand-cyan);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 22%, transparent), transparent 38%),
        linear-gradient(160deg, var(--bg-elevated-strong), var(--bg-elevated));
}

.testimonial-card {
    border-top: 3px solid color-mix(in srgb, var(--brand-blue) 60%, transparent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent-strong) 10%, transparent), transparent 40%),
        linear-gradient(160deg, var(--bg-elevated-strong), var(--bg-elevated));
}

.contact-cta-card,
.home-dynamic-card {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-soft) 48%, transparent), transparent 36%),
        linear-gradient(160deg, color-mix(in srgb, var(--bg-elevated-strong) 94%, var(--accent-soft) 6%), var(--bg-elevated));
}

.home-welcome-card {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1rem;
    max-width: min(100%, 36rem);
}

.home-welcome-card h2,
.home-welcome-card p,
.home-welcome-card .card-tag {
    margin: 0;
}

.home-welcome-card p:last-child {
    color: var(--muted);
}

.testimonial-quote {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
}

.testimonial-author {
    margin: 0.9rem 0 0.3rem;
    font-weight: 700;
}

.social-widget-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.social-widget-card {
    display: grid;
    gap: 1rem;
}

.social-widget-card[hidden] {
    display: none;
}

.social-widget-card__header {
    display: grid;
    gap: 0.45rem;
}

.social-widget-card__header h3,
.social-widget-card__header p {
    margin: 0;
}

.social-widget-card iframe {
    width: 100%;
    max-width: 100%;
    min-height: 320px;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius-md) * 0.9);
    background: var(--surface-soft);
}

.social-widget-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.home-dynamic-card {
    display: grid;
    gap: 1rem;
}

.home-dynamic-copy {
    display: grid;
    gap: 0.55rem;
}

.home-dynamic-copy p {
    margin: 0;
}

.home-media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: center;
}

.home-dynamic-card--media-right .home-media-grid {
    direction: rtl;
}

.home-dynamic-card--media-right .home-media-grid > * {
    direction: ltr;
}

.home-dynamic-media {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}

.home-dynamic-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    min-height: 240px;
}

.home-media-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.8rem;
}

.home-media-strip--carousel {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scroll-snap-type: x mandatory;
}

.home-carousel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.45rem;
}

.home-carousel-control {
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    color: var(--text);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.home-carousel-control:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 48%, transparent);
}

.home-carousel--faux-3d .home-media-strip--carousel {
    perspective: 1100px;
    padding: 0.45rem 0.3rem 0.7rem;
    scroll-padding-inline: 50%;
    padding-inline: max(0px, calc(50% - 130px));
}

.home-carousel--faux-3d .home-media-item {
    transition: transform 220ms ease, opacity 220ms ease, filter 220ms ease, box-shadow 220ms ease;
    transform-origin: center center;
    transform: scale(0.92);
    opacity: 0.74;
    filter: saturate(0.82);
    will-change: transform;
    scroll-snap-align: center;
    position: relative;
    z-index: 1;
}

.home-carousel--faux-3d .home-media-item.is-active {
    transform: translateZ(0) scale(1.24);
    opacity: 1;
    filter: none;
    box-shadow: 0 0.95rem 1.9rem color-mix(in srgb, var(--brand-blue) 18%, transparent);
    z-index: 4;
}

.home-carousel--faux-3d .home-media-item.is-prev {
    transform: perspective(1100px) rotateY(10deg) scale(0.95);
    opacity: 0.9;
    z-index: 3;
}

.home-carousel--faux-3d .home-media-item.is-next {
    transform: perspective(1100px) rotateY(-10deg) scale(0.95);
    opacity: 0.9;
    z-index: 3;
}

.home-carousel--faux-3d .home-media-item.is-far {
    transform: scale(0.88);
    opacity: 0.62;
    filter: saturate(0.72);
    z-index: 2;
}

.home-carousel--faux-3d:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
    outline-offset: 3px;
}

.section-preview-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.8rem;
}

.section-preview-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.8rem;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    display: grid;
    gap: 0.65rem;
}

.section-preview-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.section-preview-card__head p,
.section-preview-card__head strong {
    margin: 0;
}

.section-preview-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.site-customization-page .section-preview-card__meta .badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.24rem 0.56rem;
    line-height: 1.2;
}

.site-customization-page {
    scroll-margin-top: 1.5rem;
}

.admin-quick-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 1rem;
    align-items: center;
    position: sticky;
    top: calc(var(--admin-quick-nav-offset, 7.75rem) + env(safe-area-inset-top, 0px));
    max-height: calc(100vh - var(--admin-quick-nav-offset, 7.75rem) - env(safe-area-inset-top, 0px) - 0.85rem);
    overflow-y: auto;
    z-index: 12;
    backdrop-filter: blur(14px) saturate(1.08);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}

.admin-quick-nav .button.is-active {
    background: linear-gradient(140deg, var(--brand-blue), color-mix(in srgb, var(--brand-blue) 76%, var(--brand-cyan) 24%));
    border-color: color-mix(in srgb, var(--brand-blue) 64%, #000000 36%);
    color: var(--brand-white);
}

.admin-quick-nav__status {
    margin-left: auto;
}

.admin-quick-nav--linked {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    padding: 0.85rem 1rem;
    gap: 0.6rem;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 35%, transparent) transparent;
}

.admin-quick-nav--linked::after {
    content: none;
}

.admin-quick-nav--linked::before {
    content: none;
}

.admin-quick-nav--linked .button.small {
    flex: 0 0 auto;
    min-height: 2.5rem;
    white-space: nowrap;
}

.admin-quick-nav--linked::-webkit-scrollbar {
    height: 0.45rem;
}

.admin-quick-nav--linked::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 999px;
}

.admin-quick-nav--linked::-webkit-scrollbar-track {
    background: transparent;
}

.site-preview-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1rem 1.2rem;
    align-items: center;
}

.is-admin .settings-subcard[id],
.is-admin .content-card[id] {
    scroll-margin-top: calc(var(--admin-quick-nav-offset, 7.75rem) + 4.5rem);
}

/* ── Fil d'Ariane (breadcrumb) admin ──────────────────────────── */
.admin-breadcrumb {
    background: transparent;
}

.admin-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0.55rem 0 0.1rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.admin-breadcrumb__item {
    display: flex;
    align-items: center;
}

.admin-breadcrumb__item + .admin-breadcrumb__item::before {
    content: '›';
    margin: 0 0.4rem;
    color: var(--line);
    font-size: 1rem;
    line-height: 1;
}

.admin-breadcrumb__link {
    color: var(--muted);
    text-decoration: none;
    border-radius: 4px;
    padding: 0.1rem 0.2rem;
    transition: color var(--transition-fast);
}

.admin-breadcrumb__link:hover,
.admin-breadcrumb__link:focus-visible {
    color: var(--text);
    text-decoration: underline;
}

.admin-breadcrumb__item[aria-current="page"] {
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 480px) {
    .admin-breadcrumb__list {
        font-size: 0.78rem;
    }
}
/* ── /Fil d'Ariane ─────────────────────────────────────────────── */

.admin-nav-stack,
.finance-nav-stack {
    display: grid;
    gap: 0.95rem;
    padding: 1rem;
}

.admin-nav-stack--linked,
.finance-nav-stack--linked {
    position: static;
    top: auto;
    z-index: auto;
    backdrop-filter: none;
    transition: padding 0.28s ease, gap 0.28s ease;
}

.admin-nav-stack__group,
.finance-nav-stack__group {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.admin-nav-stack__group--summary,
.finance-nav-stack__group--summary {
    padding-top: 0.9rem;
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
}

.admin-nav-stack__label,
.finance-nav-stack__label {
    margin: 0;
}

.admin-nav-stack .admin-quick-nav,
.finance-nav-stack .admin-quick-nav {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
}

.admin-nav-stack .admin-quick-nav--muted,
.finance-nav-stack .admin-quick-nav--muted {
    gap: 0.55rem;
}

.admin-nav-stack .admin-quick-nav--muted .button.small,
.finance-nav-stack .admin-quick-nav--muted .button.small {
    min-height: 2.25rem;
    padding: 0.48rem 0.72rem;
    border-style: dashed;
    color: var(--muted);
    background: color-mix(in srgb, var(--bg-elevated) 62%, transparent);
}

.admin-nav-stack .admin-quick-nav--muted .button.small:hover,
.admin-nav-stack .admin-quick-nav--muted .button.small:focus-visible,
.finance-nav-stack .admin-quick-nav--muted .button.small:hover,
.finance-nav-stack .admin-quick-nav--muted .button.small:focus-visible {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 48%, var(--bg-elevated) 52%);
}

.admin-nav-stack .admin-quick-nav--summary,
.finance-nav-stack .admin-quick-nav--summary {
    gap: 0.7rem;
}

.admin-nav-stack .admin-quick-nav--summary .button.small,
.finance-nav-stack .admin-quick-nav--summary .button.small {
    min-height: 2.55rem;
}

/* ---- Sticky nav-stack : réduction fluide au scroll ---- */
.admin-nav-stack--linked .admin-nav-stack__label,
.finance-nav-stack--linked .finance-nav-stack__label {
    overflow: hidden;
    max-height: 2.5em;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.22s ease;
}

.admin-nav-stack--linked .admin-nav-stack__group--pages,
.finance-nav-stack--linked .finance-nav-stack__group--pages {
    transition: gap 0.3s ease;
}

.admin-nav-stack--linked .admin-quick-nav--muted .button.small,
.finance-nav-stack--linked .admin-quick-nav--muted .button.small {
    transition: min-height 0.28s ease, padding 0.28s ease, font-size 0.22s ease;
}

.admin-nav-stack--linked.admin-nav-stack--compact,
.finance-nav-stack--linked.finance-nav-stack--compact {
    padding-block: 1rem;
    gap: 0.95rem;
}

.admin-nav-stack--linked.admin-nav-stack--compact .admin-nav-stack__label,
.finance-nav-stack--linked.finance-nav-stack--compact .finance-nav-stack__label {
    max-height: 2.5em;
    opacity: 1;
}

.admin-nav-stack--linked.admin-nav-stack--compact .admin-nav-stack__group--pages,
.finance-nav-stack--linked.finance-nav-stack--compact .finance-nav-stack__group--pages {
    gap: 0.5rem;
}

.admin-nav-stack--linked.admin-nav-stack--compact .admin-quick-nav--muted .button.small,
.finance-nav-stack--linked.finance-nav-stack--compact .admin-quick-nav--muted .button.small {
    min-height: 2.25rem;
    padding: 0.48rem 0.72rem;
    font-size: inherit;
}

.site-preview-strip h2,
.site-preview-strip p {
    margin: 0;
}

.site-preview-strip__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-start;
}

.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding-bottom: 0.2rem;
}

.settings-tab {
    appearance: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.settings-tab:hover,
.settings-tab:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
}

.settings-tab.is-active {
    background: linear-gradient(140deg, var(--brand-blue), color-mix(in srgb, var(--brand-blue) 76%, var(--brand-cyan) 24%));
    border-color: color-mix(in srgb, var(--brand-blue) 64%, #000000 36%);
    color: var(--brand-white);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-blue) 22%, transparent);
}

.settings-panel {
    margin-top: 0;
}

.settings-panel[hidden] {
    display: none;
}

.section-panel-heading {
    align-items: flex-start;
}

.section-panel-heading h2,
.section-panel-heading p {
    margin: 0;
}

.survey-meta-form {
    position: relative;
    z-index: 18;
}

.survey-meta-form .custom-select {
    z-index: 24;
}

.compact-actions {
    margin-top: 0;
    gap: 0.55rem;
    justify-content: flex-end;
}

.federation-school-year-actions {
    justify-content: flex-start;
    align-items: center;
}

.site-customization-page .form-card {
    padding: 1.15rem;
}

.site-customization-page .inner-form-card {
    padding: 1rem;
}

.site-customization-page .sortable-item .inline-actions,
.site-customization-page .section-preview-card .inline-actions {
    margin-top: 0;
    align-items: center;
    justify-content: flex-end;
}

.site-customization-page .sortable-item .button.small,
.site-customization-page .section-preview-card .button.small {
    padding: 0.48rem 0.8rem;
}

.site-customization-page .button.small {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}

.site-customization-page .section-preview-card .inline-actions > * {
    min-width: 0;
}

.site-customization-page .section-preview-card .inline-actions .button,
.site-customization-page .section-preview-card .inline-actions .text-button {
    max-width: 100%;
}

.admin-quick-nav .button.small {
    max-width: 100%;
    min-height: 2.2rem;
}

.home-media-item {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}

.home-media-strip--carousel .home-media-item {
    min-width: 260px;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.home-media-item img {
    width: 100%;
    height: 315px;
    display: block;
    object-fit: cover;
}

.home-media-item figcaption {
    padding: 0.55rem 0.7rem;
    color: var(--muted);
    font-size: 0.84rem;
}

.home-dynamic-card--text-center .home-dynamic-copy {
    text-align: center;
}

@media (max-width: 960px) {
    .home-carousel--faux-3d .home-media-item,
    .home-carousel--faux-3d .home-media-item.is-prev,
    .home-carousel--faux-3d .home-media-item.is-next,
    .home-carousel--faux-3d .home-media-item.is-far {
        transform: scale(0.97);
        opacity: 0.9;
        filter: none;
        box-shadow: none;
    }

    .home-carousel--faux-3d .home-media-item.is-active {
        transform: scale(1.09);
        opacity: 1;
        box-shadow: 0 0.65rem 1.35rem color-mix(in srgb, var(--brand-blue) 14%, transparent);
    }
}

@media (max-width: 900px) {
    .home-media-grid {
        grid-template-columns: 1fr;
    }

    .admin-nav-stack,
    .finance-nav-stack {
        padding: 0.85rem;
        gap: 0.8rem;
    }

    .admin-nav-stack--linked,
    .finance-nav-stack--linked {
        position: static;
        top: auto;
    }

    .admin-nav-stack .admin-quick-nav,
    .finance-nav-stack .admin-quick-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .admin-nav-stack .admin-quick-nav .button.small,
    .finance-nav-stack .admin-quick-nav .button.small {
        flex: 0 0 auto;
        min-width: max-content;
        scroll-snap-align: start;
    }

    .admin-nav-stack .admin-quick-nav__status,
    .finance-nav-stack .admin-quick-nav__status {
        flex: 0 0 auto;
        min-width: max-content;
    }
    .home-dynamic-card--media-right .home-media-grid {
        direction: ltr;
    }
}

.registration-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.6rem;
}

.registration-progress-meta {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 0.95rem 1rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 46%, transparent), color-mix(in srgb, var(--bg-elevated) 88%, transparent));
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.9rem;
}

.registration-progress-meta__header {
    display: grid;
    gap: 0.2rem;
    margin-bottom: 0.85rem;
}

.registration-progress-meta__eyebrow {
    margin: 0;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.registration-progress-meta__status {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.registration-progress-meta__hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.registration-step-picker {
    display: none;
}

.registration-step-picker__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.registration-step-picker__select-wrap {
    min-width: 0;
}

.registration-step-picker__select {
    min-height: 44px;
    padding-right: 2.4rem;
    font-size: 0.92rem;
}

.registration-step-picker__button {
    min-height: 44px;
    min-width: 0;
    white-space: nowrap;
}

.registration-step {
    border: 1px solid color-mix(in srgb, var(--line) 76%, var(--accent) 24%);
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.registration-step:hover {
    transform: translateY(-2px);
}

.registration-step__index {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.registration-step__body {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.registration-step__body small {
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.registration-step.is-current {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 12%, transparent);
}

.registration-step.is-done {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}

.registration-step.is-disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.registration-step.is-disabled:hover {
    transform: none;
}

.registration-step.is-skipped {
    opacity: 0.4;
    pointer-events: none;
}

.registration-step strong {
    font-size: 0.95rem;
    line-height: 1.25;
}

.registration-tab-viewport {
    overflow: hidden;
    border-radius: 18px;
    transition: height 280ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.registration-tab-track {
    display: flex;
    align-items: flex-start;
    width: 100%;
    transition: transform 320ms cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}

.registration-step-panel {
    display: grid;
    gap: 1rem;
    min-width: 100%;
    padding: 0.25rem;
}

.registration-step-panel + .registration-step-panel {
    margin-top: 0;
}

.registration-nav {
    justify-content: flex-end;
    margin-top: 0.2rem;
    align-items: center;
}

.registration-nav__family-link {
    margin-right: auto;
}

.registration-nav__draft-clear {
    order: -1;
    margin-right: auto;
    min-width: 0;
}

.registration-nav .button,
.registration-nav .submit-button,
.registration-nav input.button,
.registration-nav input.submit-button {
    min-height: 2.75rem;
    min-width: 9.5rem;
    padding: 0.65rem 1.15rem;
    line-height: 1.2;
}

/* ── Member selection cards ──────────────────────────────────── */
.member-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.65rem;
    margin-top: 0.55rem;
}

.member-select-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.selection-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.selection-card__control {
    -webkit-appearance: none;
    appearance: none;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    align-self: center;
    flex-shrink: 0;
    border-radius: 0.36rem;
    border: 1.7px solid color-mix(in srgb, var(--line) 74%, var(--accent) 26%);
    background: color-mix(in srgb, var(--bg-elevated) 94%, var(--line));
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.selection-card__control::before {
    content: "";
    width: 0.64rem;
    height: 0.64rem;
    transform: scale(0);
    transform-origin: center;
    clip-path: polygon(14% 50%, 0 64%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
    background: var(--brand-white);
    transition: transform var(--transition-fast);
}

.selection-card__control:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.selection-card__control:checked {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 84%, #0f172a 16%);
}

.selection-card__control:checked::before {
    transform: scale(1);
}

.selection-card__control:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.selection-card__control:disabled {
    opacity: 0.56;
    cursor: not-allowed;
}

.selection-card__control[type="radio"] {
    border-radius: 50%;
    width: 1.34rem;
    height: 1.34rem;
    border: 1.9px solid color-mix(in srgb, var(--line) 76%, var(--accent) 24%);
    background: color-mix(in srgb, var(--bg-elevated) 94%, var(--line));
    background-image: radial-gradient(circle at 30% 26%, color-mix(in srgb, #ffffff 82%, transparent) 0%, transparent 48%);
    position: relative;
    isolation: isolate;
    overflow: visible;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast);
}

.selection-card__control[type="radio"]::before {
    width: 0.68rem;
    height: 0.68rem;
    clip-path: circle(50% at 50% 50%);
    box-shadow: 0 0 0 0.06rem color-mix(in srgb, #ffffff 52%, transparent);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.selection-card__control[type="radio"]::after {
    content: "";
    position: absolute;
    inset: -0.26rem;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    opacity: 0;
    transform: scale(0.35);
    pointer-events: none;
}

.selection-card__control[type="radio"]:hover {
    transform: translateY(-0.5px);
}

.selection-card__control[type="radio"]:active {
    animation: control-pulse 210ms ease-out;
    transform: scale(0.93);
}

.selection-card__control[type="radio"]:active::after {
    animation: control-radio-ripple 280ms ease-out;
}

.selection-card__control[type="radio"]:checked {
    background:
        radial-gradient(circle at 34% 28%, color-mix(in srgb, #ffffff 34%, transparent) 0%, transparent 42%),
        radial-gradient(circle at 68% 74%, color-mix(in srgb, #0f172a 28%, transparent) 0%, transparent 46%),
        color-mix(in srgb, var(--accent) 84%, #0f172a 16%);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 26%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #0f172a 36%, transparent);
    animation: control-pop 170ms cubic-bezier(0.2, 0.85, 0.35, 1);
}

.selection-card__control[type="radio"]:checked::before {
    animation: control-radio-dot-in 210ms cubic-bezier(0.18, 0.8, 0.22, 1);
}

.selection-card__control[type="radio"]:focus-visible {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bg-elevated) 98%, transparent),
        0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent);
}

.selection-card__content {
    flex: 1;
}

.member-select-card {
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.member-select-card:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
}

.member-select-card input[type="radio"] {
    margin: 0;
}

.member-select-card:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 65%, transparent);
}

.member-select-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.member-select-card__content strong {
    font-size: 0.98rem;
}

.member-select-card__content small {
    color: var(--muted);
    font-size: 0.82rem;
}

/* ── Group selection cards ───────────────────────────────────── */
.group-select-grid {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.55rem;
}

.group-select-period-stack {
    display: grid;
    gap: 0.95rem;
    margin-top: 0.55rem;
}

.group-select-period {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0.72rem 0.8rem 0.85rem;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.group-select-period[data-season="hiver"] {
    border-color: color-mix(in srgb, #7bb8e8 40%, var(--line));
    background: color-mix(in srgb, #7bb8e8 8%, var(--bg-elevated));
}

.group-select-period[data-season="printemps"] {
    border-color: color-mix(in srgb, #72c47a 40%, var(--line));
    background: color-mix(in srgb, #72c47a 8%, var(--bg-elevated));
}

.group-select-period[data-season="ete"] {
    border-color: color-mix(in srgb, #e8c24a 40%, var(--line));
    background: color-mix(in srgb, #e8c24a 8%, var(--bg-elevated));
}

.group-select-period[data-season="automne"] {
    border-color: color-mix(in srgb, #e89a4a 40%, var(--line));
    background: color-mix(in srgb, #e89a4a 8%, var(--bg-elevated));
}

.group-select-period__title {
    margin: 0;
    font-size: 1rem;
}

.group-select-period .group-select-grid {
    margin-top: 0.62rem;
}

.group-select-card {
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.group-select-card:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
}

.group-select-card.is-full {
    opacity: 0.55;
    cursor: not-allowed;
}

.group-select-card.is-unavailable {
    opacity: 1;
    cursor: not-allowed;
}

.group-select-card.is-unavailable .group-select-card__name,
.group-select-card.is-unavailable .group-select-card__meta,
.group-select-card.is-unavailable .group-select-card__pricing {
    opacity: 0.58;
}

.group-select-card.is-unavailable input[type="checkbox"] {
    opacity: 0.5;
}

.group-select-card.is-full:hover {
    border-color: var(--line);
    background: transparent;
}

.group-select-card.is-unavailable:hover {
    border-color: var(--line);
    background: transparent;
}

.group-select-card input[type="checkbox"] {
    margin: 0;
}

.group-select-card:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 65%, transparent);
}

.group-select-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.group-select-card__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.group-select-card__header .badge:not(.badge-already-registered) {
    opacity: 0.72;
    filter: saturate(0.8);
}

.group-select-card__name {
    font-size: 1rem;
}

.group-select-card__meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.1rem;
    row-gap: 0.2rem;
    font-size: 0.84rem;
    color: var(--muted);
}

.group-select-card__pricing {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-size: 0.83rem;
    color: var(--accent-strong);
    font-weight: 600;
}

.group-select-card__pricing--choice {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.2rem;
}

.group-pricing-choice__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.1rem;
}

.group-pricing-choice__option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    cursor: pointer;
    background: color-mix(in srgb, var(--accent-soft) 10%, transparent);
    transition: border-color 0.15s, background 0.15s;
}

.group-pricing-choice__option:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 28%, transparent);
}

.group-pricing-choice__option:has(.group-pricing-choice__control:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}

.group-pricing-choice__control {
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--accent);
}

.group-pricing-choice__text {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--accent-strong);
    line-height: 1.3;
}

.group-pricing-choice__prorata {
    display: block;
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.1rem;
}

@media (max-width: 480px) {
    .group-pricing-choice__option {
        padding: 0.35rem 0.45rem;
    }
}

.registration-member-substeps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.7rem;
}

.registration-member-substep {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 30%, transparent);
    color: var(--text);
    min-height: 2.2rem;
    padding: 0.4rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.registration-member-substep strong {
    line-height: 1.2;
}

.registration-member-substep[hidden] {
    display: none;
}

.registration-member-substep:hover {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
}

.registration-member-substep.is-current {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 68%, transparent);
}

.registration-member-substep__index {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 24%, transparent);
    display: inline-grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 700;
}

.member-step-empty {
    margin-top: 0.6rem;
}

.member-empty-state {
    margin: 0.7rem 0 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--warning);
    color: inherit;
    font-size: 0.92rem;
    line-height: 1.4;
}

.not-found-page {
    min-height: 58vh;
    display: grid;
    align-items: center;
}

.not-found-card {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(1.4rem, 3.5vw, 2.4rem);
    text-align: center;
}

.not-found-icon {
    width: 96px;
    height: 96px;
    margin: 0.2rem auto 1.1rem;
    border-radius: 26px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent-soft) 75%, transparent);
    color: var(--accent-strong);
    border: 1px solid var(--line);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 14%, transparent);
}

.not-found-icon svg {
    width: 54px;
    height: 54px;
}

.not-found-lead {
    color: var(--muted);
    max-width: 52ch;
    margin: 0.9rem auto 0;
}

.not-found-diagnostics-card {
    margin-top: 1rem;
    text-align: left;
}

.not-found-copy-note {
    margin-top: 0.5rem;
}

.not-found-copy-actions {
    margin-top: 0.55rem;
    gap: 0.6rem;
    align-items: center;
}

.not-found-actions {
    justify-content: center;
    margin-top: 1.6rem;
}

.legal-copy-text {
    white-space: pre-line;
}

.landing-heading {
    text-align: center;
    margin-bottom: 2.5rem;
}

.landing-owner-request-hint {
    text-align: center;
    margin-top: 2rem;
}

.landing-dojo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.landing-dojo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.95rem;
    min-height: 220px;
    padding: 1.6rem 1.25rem;
    text-align: center;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.landing-dojo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
    border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
}

.landing-dojo-card__logo-wrap {
    width: 108px;
    height: 108px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 92%, white 8%), color-mix(in srgb, var(--bg-elevated) 90%, transparent));
    border: 1px solid var(--line);
}

.landing-dojo-card__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-dojo-card__fallback {
    font-family: var(--font-title);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--accent-strong);
}

.landing-dojo-card__name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--muted);
}

.landing-empty-state {
    text-align: center;
    color: var(--muted);
}

.registration-member-panels {
    margin-top: 0.65rem;
}

.registration-member-panel {
    display: none;
}

.registration-member-panel[hidden] {
    display: none;
}

.registration-member-panel.is-current {
    display: block;
}

/* ── Registration summary (step 3) ──────────────────────────── */
.registration-summary {
    min-height: 1rem;
}

.summary-block {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--accent-soft) 42%, transparent),
            color-mix(in srgb, var(--bg-elevated) 96%, transparent));
    display: grid;
    gap: 0.52rem;
    box-shadow: 0 10px 26px color-mix(in srgb, #000000 18%, transparent);
}

.summary-label {
    font-weight: 700;
    color: var(--accent-strong);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.76rem;
    margin: 0;
}

.summary-label--with-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.badge-estimation {
    background: color-mix(in srgb, var(--brand-orange) 16%, var(--accent-soft));
    border-color: color-mix(in srgb, var(--brand-orange) 30%, var(--line));
    color: color-mix(in srgb, var(--brand-orange) 85%, var(--text));
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: none;
    position: relative;
    cursor: help;
}

.badge-estimation[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
    min-width: 220px;
    max-width: min(34ch, 80vw);
    padding: 0.5rem 0.65rem;
    border-radius: 0.6rem;
    border: 1px solid var(--line);
    background: var(--bg-elevated-strong);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-soft);
    z-index: 5;
}

.badge-estimation[data-tooltip]:hover::after,
.badge-estimation[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.badge-server-quote {
    background: color-mix(in srgb, #15803d 14%, var(--accent-soft));
    border-color: color-mix(in srgb, #15803d 28%, var(--line));
    color: color-mix(in srgb, #15803d 82%, var(--text));
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.summary-block--loading {
    opacity: 0.92;
}

.summary-note {
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius-md) - 0.2rem);
    font-size: 0.9rem;
    line-height: 1.45;
}

.summary-note--info {
    background: color-mix(in srgb, var(--accent-soft) 48%, transparent);
}

.summary-note--warning {
    background: color-mix(in srgb, #d97706 12%, var(--surface));
    border-color: color-mix(in srgb, #d97706 30%, var(--line));
    border-left-width: 3px;
    display: flex;
    gap: 0.45rem;
    align-items: center;
    font-size: 0.93rem;
}

.summary-note--warning i[class*="ph"] {
    flex-shrink: 0;
    font-size: 1.15em;
    color: #d97706;
}

.registration-nav .button[disabled],
.registration-nav input.button[disabled] {
    opacity: 0.62;
    cursor: not-allowed;
    box-shadow: none;
}

.summary-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0.4rem;
    font-size: 0.93rem;
    align-items: center;
    padding: 0.5rem 0.62rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}

.summary-row--courses {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
}

.summary-row--subtotal,
.summary-row--linked {
    border-color: color-mix(in srgb, #38bdf8 18%, var(--line));
    background: color-mix(in srgb, #38bdf8 5%, var(--bg-elevated));
}

.summary-row--discount {
    border-color: color-mix(in srgb, #fb7185 22%, var(--line));
    background: color-mix(in srgb, #fb7185 6%, var(--bg-elevated));
}

.summary-row--fee {
    border-color: color-mix(in srgb, #f59e0b 20%, var(--line));
    background: color-mix(in srgb, #f59e0b 6%, var(--bg-elevated));
}

.summary-row--payment-now,
.summary-row--upcoming-payments,
.summary-row--grand-total {
    border-radius: 12px;
    padding: 0.62rem 0.72rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    background: color-mix(in srgb, var(--surface) 78%, var(--accent-soft));
}

.summary-row > span:last-child {
    justify-self: end;
    text-align: right;
    font-weight: 700;
}

.summary-row--payment-now {
    border-color: color-mix(in srgb, #0f766e 30%, var(--line));
    background: linear-gradient(120deg,
        color-mix(in srgb, #14b8a6 12%, var(--surface)),
        color-mix(in srgb, #0f766e 4%, var(--surface)));
}

.summary-row--upcoming-payments {
    border-color: color-mix(in srgb, #2563eb 30%, var(--line));
    background: linear-gradient(120deg,
        color-mix(in srgb, #60a5fa 12%, var(--surface)),
        color-mix(in srgb, #2563eb 4%, var(--surface)));
}

.summary-row--grand-total {
    border-width: 2px;
    border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--accent-soft) 72%, var(--surface)),
        color-mix(in srgb, var(--accent) 10%, var(--surface)));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 16%, transparent);
}

.summary-row--payment-now .summary-key,
.summary-row--upcoming-payments .summary-key,
.summary-row--grand-total .summary-key {
    color: var(--text);
}

.summary-row--payment-now strong,
.summary-row--upcoming-payments strong,
.summary-row--grand-total strong {
    font-size: 1rem;
}

.summary-row--grand-total strong {
    font-size: 1.14rem;
    letter-spacing: 0.01em;
}

.summary-key {
    font-weight: 700;
    color: var(--muted);
    font-size: 0.83rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.summary-key--with-help {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    column-gap: 0.35rem;
    flex-wrap: nowrap;
}

.summary-key__label {
    min-width: 0;
    white-space: nowrap;
}

.summary-key--with-help .help-tooltip {
    justify-self: end;
    flex: 0 0 auto;
}

.summary-key .field-help {
    width: 1.55rem;
    height: 1.55rem;
    min-width: 1.55rem;
    min-height: 1.55rem;
}

.summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}

.summary-list li {
    line-height: 1.4;
}

.summary-course-item {
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    background: color-mix(in srgb, var(--bg-elevated) 90%, var(--accent-soft));
    box-shadow: 0 6px 16px color-mix(in srgb, #000000 14%, transparent);
}

.summary-course-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.summary-course-head {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}


.summary-list--details {
    gap: 0.45rem;
}

.summary-course-amount {
    display: inline-block;
    margin-left: 0.45rem;
    font-weight: 700;
}

.summary-course-amount-prorata {
    display: block;
    margin-top: 0.06rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: color-mix(in srgb, #72c47a 72%, var(--text));
}

.summary-course-amount-base {
    display: block;
    margin-top: 0.06rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}

.summary-course-meta {
    display: block;
    margin-top: 0.1rem;
    color: var(--muted);
    font-size: 0.84rem;
    text-align: left;
}

.summary-course-meta__schedule {
    font-weight: 600;
    color: var(--text);
}

.summary-course-meta__dot {
    display: inline;
}

/* ── Season groups in cost summary ── */
.summary-season-groups {
    display: grid;
    gap: 0.55rem;
}

.summary-season-group {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.6rem 0.75rem 0.7rem;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.summary-season-group[data-season="hiver"] {
    border-color: color-mix(in srgb, #7bb8e8 40%, var(--line));
    background: color-mix(in srgb, #7bb8e8 8%, var(--bg-elevated));
}

.summary-season-group[data-season="printemps"] {
    border-color: color-mix(in srgb, #72c47a 40%, var(--line));
    background: color-mix(in srgb, #72c47a 8%, var(--bg-elevated));
}

.summary-season-group[data-season="ete"] {
    border-color: color-mix(in srgb, #e8c24a 40%, var(--line));
    background: color-mix(in srgb, #e8c24a 8%, var(--bg-elevated));
}

.summary-season-group[data-season="automne"] {
    border-color: color-mix(in srgb, #e89a4a 40%, var(--line));
    background: color-mix(in srgb, #e89a4a 8%, var(--bg-elevated));
}

.summary-season-group[data-season="autre"] {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 20%, var(--bg-elevated));
}

.summary-linked-lot-block {
    border: 1px solid color-mix(in srgb, var(--brand-orange) 34%, var(--line));
    border-radius: 12px;
    padding: 0.58rem 0.7rem 0.68rem;
    margin-bottom: 0.55rem;
    background: color-mix(in srgb, var(--brand-orange) 8%, var(--bg-elevated));
    display: grid;
    gap: 0.45rem;
}

.summary-linked-lot-block__title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--brand-orange) 72%, var(--text));
}

.summary-course-item--linked {
    border-style: dashed;
}

.summary-season-group__title {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    text-align: left;
}

/* ── Member groups in cost summary ── */
.summary-member-groups {
    display: grid;
    gap: 0.55rem;
}

.summary-member-group {
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: 12px;
    padding: 0.65rem 0.8rem 0.75rem;
    background: color-mix(in srgb, var(--accent-soft) 25%, transparent);
    display: grid;
    gap: 0.45rem;
}

.summary-member-group__title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--accent-strong);
}

.summary-member-group .summary-season-groups {
    gap: 0.4rem;
}

.summary-member-group .summary-season-group {
    border-radius: 8px;
    padding: 0.45rem 0.6rem 0.55rem;
}

/* ── Discounts group in cost summary ── */
.summary-discounts-group {
    border: 1px solid color-mix(in srgb, #15803d 25%, var(--line));
    border-radius: 12px;
    padding: 0.6rem 0.8rem 0.7rem;
    background: color-mix(in srgb, #15803d 6%, var(--surface));
    display: grid;
    gap: 0.35rem;
}

.summary-discounts-group__title {
    margin: 0 0 0.15rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, #15803d 75%, var(--muted));
}

@media (max-width: 640px) {
    .summary-label--with-badge {
        align-items: flex-start;
        flex-direction: column;
    }

    .summary-course-line {
        flex-direction: column;
        gap: 0.25rem;
    }

    .summary-course-item {
        padding: 0.55rem 0.58rem;
    }

    .summary-linked-lot-block {
        padding: 0.55rem 0.58rem 0.62rem;
    }

    .summary-course-head {
        align-items: flex-start;
    }

    .summary-row {
        padding: 0.45rem 0.52rem;
    }

    .summary-key,
    .summary-key__label {
        white-space: normal;
    }

    .summary-key {
        flex-wrap: wrap;
    }

    .summary-course-meta__schedule,
    .summary-course-meta__date {
        display: block;
    }

    .summary-course-meta__dot {
        display: none;
    }

    .summary-course-meta__date {
        margin-top: 0.05rem;
    }

    .summary-course-amount {
        display: block;
        margin-left: 0;
        margin-top: 0.2rem;
    }

    .summary-member-group {
        padding: 0.5rem 0.6rem 0.6rem;
    }

    .summary-member-group .summary-season-group {
        padding: 0.4rem 0.5rem 0.45rem;
    }

    .summary-discounts-group {
        padding: 0.5rem 0.6rem 0.6rem;
    }

    .summary-row--payment-now,
    .summary-row--upcoming-payments,
    .summary-row--grand-total {
        padding: 0.55rem 0.58rem;
    }

    .federation-rules-editor {
        padding: 0.58rem;
    }

    .federation-rules-editor__row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .federation-rules-editor__row-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .registration-steps {
        grid-template-columns: 1fr;
    }
}

.card.emphasis {
    background: var(--card-highlight);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}

html[data-theme="dark"] .button.primary,
html[data-theme="aurora"] .button.primary,
html[data-theme="vampire"] .button.primary,
html[data-theme="dark"] .submit-button,
html[data-theme="aurora"] .submit-button,
html[data-theme="vampire"] .submit-button {
    box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 38%, transparent);
}

html[data-theme="paper-ink"] .section-heading .eyebrow {
    background: color-mix(in srgb, #ffffff 42%, var(--accent-soft));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

html[data-theme="sunset"] .campaign-card,
html[data-theme="sunset"] .contact-cta-card,
html[data-theme="sunset"] .home-dynamic-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(247, 164, 90, 0.28), transparent 34%),
        linear-gradient(160deg, rgba(255, 252, 246, 0.98), rgba(255, 247, 239, 0.94));
}

html[data-theme="aurora"] .campaign-card,
html[data-theme="aurora"] .contact-cta-card,
html[data-theme="aurora"] .home-dynamic-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(63, 184, 169, 0.22), transparent 34%),
        linear-gradient(160deg, rgba(18, 35, 49, 0.98), rgba(14, 28, 40, 0.92));
}

html[data-theme="vampire"] .campaign-card,
html[data-theme="vampire"] .contact-cta-card,
html[data-theme="vampire"] .home-dynamic-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(193, 60, 105, 0.24), transparent 34%),
        linear-gradient(160deg, rgba(38, 16, 44, 0.98), rgba(28, 12, 33, 0.92));
}

.card-tag {
    margin: 0 0 0.7rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-strong);
    font-weight: 700;
}

.narrow {
    width: min(780px, calc(100% - 2rem));
}

.form-card,
.content-card {
    border-radius: 30px;
    padding: 1.4rem;
}

.branding-preview {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1rem;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
}

.branding-preview-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.branding-preview-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--brand-blue), var(--brand-cyan));
    color: #fff;
    font-weight: 700;
    overflow: hidden;
}

.branding-preview-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.branding-preview-head small {
    display: block;
    color: var(--muted);
}

.table-wrap table tbody tr {
    transition: background var(--transition-fast);
}

.table-wrap table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-soft) 48%, transparent);
}

.compact-card {
    max-width: 480px;
}

/* Dans une grille multi-colonnes, les compact-cards remplissent leur colonne */
.form-grid > .compact-card {
    max-width: none;
}

.form-card {
    display: grid;
    gap: 1rem;
}

/* Champs conditionnels du formulaire de mode de paiement */
.pm-field--hidden {
    display: none !important;
}

@keyframes pm-reveal {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pm-field--revealed {
    animation: pm-reveal 0.18s ease forwards;
}

/* Séparateur de section dans un form-card */
.form-section-divider {
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
    padding-top: 0.5rem;
}

.form-section-divider .eyebrow {
    margin-bottom: 0.15rem;
}

/* Bloc de code (ex: URL webhook à copier) */
.code-block {
    display: block;
    font-family: var(--font-mono, ui-monospace, "Cascadia Code", "Source Code Pro", monospace);
    font-size: 0.82rem;
    background: color-mix(in srgb, var(--bg-elevated-strong) 85%, var(--accent-soft) 15%);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: var(--radius-sm, 6px);
    padding: 0.55rem 0.75rem;
    color: var(--text-muted, var(--text));
    overflow-wrap: anywhere;
    word-break: break-all;
    line-height: 1.5;
    flex: 1 1 0;
    min-width: 0;
}

/* Ligne URL webhook : code + bouton copier */
.webhook-url-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* Suggestions d'emojis compactes sous le champ icone */
.emoji-suggestions-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.3rem;
}

.emoji-suggestion-chip {
    width: 1.9rem;
    height: 1.9rem;
    min-width: 1.9rem;
    min-height: 1.9rem;
    border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg-elevated) 92%, var(--accent-soft) 8%);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
    padding: 0;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.emoji-suggestion-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line) 48%);
    background: color-mix(in srgb, var(--accent-soft) 24%, var(--bg-elevated) 76%);
}

.emoji-suggestion-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.emoji-suggestion-chip.active {
    border-color: color-mix(in srgb, var(--accent) 72%, var(--line) 28%);
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--bg-elevated) 58%);
}

@media (max-width: 640px) {
    .emoji-suggestion-chip {
        width: 2.1rem;
        height: 2.1rem;
        min-width: 2.1rem;
        min-height: 2.1rem;
        font-size: 1.03rem;
    }
}

.settings-board {
    display: grid;
    gap: 0.85rem;
}

.settings-section {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.95rem;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    display: grid;
    gap: 0.9rem;
}

.settings-section.is-dragging {
    opacity: 0.6;
    border-style: dashed;
}

.settings-section.drop-target {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
}

.settings-section.snap-in {
    animation: sortable-snap-in 220ms ease-out;
}

.settings-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.settings-section-head .eyebrow {
    margin-bottom: 0;
}

.section-drag-handle {
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
    color: var(--muted);
    border-radius: 10px;
    min-width: 2.35rem;
    min-height: 2.15rem;
    cursor: grab;
    font-weight: 700;
    position: relative;
}

.section-drag-handle:active {
    cursor: grabbing;
}

.settings-section-content {
    display: grid;
    gap: 0.95rem;
}

.settings-subcard {
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 12px;
    padding: 0.9rem;
    background: color-mix(in srgb, var(--bg-elevated) 95%, transparent);
    display: grid;
    gap: 0.7rem;
}

.settings-subcard .eyebrow {
    margin-bottom: 0;
}

.dojo-settings-page .settings-domain-form {
    display: grid;
    gap: 0.95rem;
}

.dojo-settings-page .settings-section-head > div {
    min-width: 0;
}

.dojo-settings-page .settings-section-head h2 {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.dojo-settings-page .autosave-status {
    min-height: 1.25rem;
    margin: 0;
}

.dojo-settings-page .settings-section[id] {
    scroll-margin-top: calc(var(--admin-quick-nav-offset, 7.75rem) + 1.2rem);
}

.dojo-settings-page {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
}

.finance-page .form-grid,
.finance-page .form-grid--2,
.finance-page .form-grid--3,
.finance-page .form-grid > div,
.finance-page .settings-subcard,
.finance-page .settings-subcard > div,
.finance-page .settings-subcard label,
.finance-page .settings-subcard .form-input {
    min-width: 0;
}

.finance-page select.form-input:not([multiple]) {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.helper-accordion {
    border: 1px solid color-mix(in srgb, var(--line) 84%, var(--accent) 16%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-soft) 30%, var(--bg-elevated));
    padding: 0.1rem;
}

.helper-accordion summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
    list-style: none;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
}

.helper-accordion summary::-webkit-details-marker {
    display: none;
}

.helper-accordion summary::after {
    content: "+";
    margin-left: auto;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1;
}

.helper-accordion[open] summary::after {
    content: "-";
}

.helper-accordion__content {
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
    padding: 0.62rem 0.7rem 0.72rem;
    display: grid;
    gap: 0.42rem;
}

.pos-history {
    min-width: 17.5rem;
    background: color-mix(in srgb, var(--bg-elevated) 76%, var(--accent-soft) 24%);
}

.pos-history__summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pos-history__count {
    font-weight: 700;
    color: var(--text);
}

.pos-history__total {
    margin-left: auto;
    font-weight: 800;
    color: var(--accent-strong);
}

.pos-history__content {
    display: grid;
    gap: 0.45rem;
}

.pos-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.pos-history__item {
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--accent-soft) 12%);
    padding: 0.45rem 0.55rem;
    display: grid;
    gap: 0.28rem;
}

.pos-history__meta {
    display: flex;
    align-items: center;
    gap: 0.34rem;
    flex-wrap: wrap;
    font-size: 0.92rem;
}

.pos-history__sep {
    color: var(--muted);
    font-size: 0.72rem;
}

.pos-history__amount {
    margin-left: auto;
    font-weight: 800;
    color: var(--text);
}

.pos-history__note {
    line-height: 1.32;
    font-size: 0.86rem;
}

@media (max-width: 960px) {
    .dojo-settings-page .settings-section {
        padding: 0.85rem;
    }

    .dojo-settings-page .settings-subcard {
        padding: 0.8rem;
    }
}

@media (max-width: 640px) {
    .dojo-settings-page .settings-section-head {
        align-items: flex-start;
    }

    .dojo-settings-page .settings-section-head h2 {
        font-size: clamp(1.05rem, 5vw, 1.28rem);
    }

    .dojo-settings-page .admin-quick-nav--linked {
        gap: 0.5rem;
    }

    .dojo-settings-page .admin-quick-nav--linked .button.small {
        flex: 1 1 100%;
        justify-content: center;
        min-height: 44px;
        width: 100%;
        white-space: normal;
        line-height: 1.25;
        text-align: center;
    }

    .dojo-settings-page .inline-actions.compact-actions {
        width: 100%;
    }

    .pos-history {
        min-width: 15.25rem;
    }

    .pos-history__meta {
        font-size: 0.88rem;
    }

    .pos-history__amount {
        width: 100%;
        margin-left: 0;
    }


@media (max-width: 480px) {
    .pos-history {
        min-width: 14.5rem;
    }

    .pos-history__summary {
        gap: 0.35rem;
    }

    .pos-history__count,
    .pos-history__total {
        font-size: 0.95rem;
    }
}
    .dojo-settings-page .inline-actions.compact-actions .button.small {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 360px) {
    .dojo-settings-page .admin-quick-nav--linked .button.small {
        font-size: 0.88rem;
    }
}

@media (max-width: 480px) {
    .dojo-settings-page .settings-section {
        padding: 0.75rem;
    }

    .dojo-settings-page .settings-subcard {
        padding: 0.72rem;
    }

    .dojo-settings-page .form-label-with-help {
        align-items: flex-start;
        gap: 0.4rem;
    }
}

.helper-accordion__content p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.helper-accordion__content strong {
    color: var(--text);
}

.family-payment-accordion-stack {
    display: grid;
    gap: 0.65rem;
}

.federation-rules-editor {
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 12px;
    padding: 0.55rem;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    display: grid;
    gap: 0.45rem;
}

.federation-rules-editor__legend {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0 0.2rem;
}

.federation-rules-editor__legend--sticky {
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
}

.federation-rules-editor__toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.federation-rules-editor__toolbar .form-input {
    min-height: 40px;
}

.federation-rules-editor__count {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.federation-rules-editor__empty-filter {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.federation-rules-editor__rows {
    display: grid;
    gap: 0.4rem;
}

.federation-rules-editor__rows--scrollable {
    max-height: 24rem;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.federation-rules-editor__row {
    display: grid;
    grid-template-columns: minmax(6.25rem, 0.56fr) minmax(0, 1.44fr) auto;
    gap: 0.5rem;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 10px;
    padding: 0.45rem;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    min-width: 0;
}

.federation-rules-editor__row .form-input {
    min-height: 42px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.federation-rules-editor__field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
}

.federation-rules-editor__field--inline {
    align-content: start;
}

.federation-rules-editor__mobile-label {
    display: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
    line-height: 1.2;
}

.federation-rules-editor__year-amount {
    display: grid;
    grid-template-columns: minmax(6.75rem, 0.8fr) minmax(7.5rem, 0.9fr) minmax(10rem, 1.15fr) minmax(10rem, 1.15fr);
    gap: 0.5rem;
    min-width: 0;
}

.federation-rules-editor__row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 42px;
}

@media (max-width: 640px) {
    .federation-rules-editor__legend {
        display: none;
    }

    .federation-rules-editor__toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .federation-rules-editor__count {
        white-space: normal;
    }

    .federation-rules-editor__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.7rem;
        min-width: 0;
    }

    .federation-rules-editor__year-amount {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
        min-width: 0;
    }

    .federation-rules-editor__year-amount > label {
        min-width: 0;
    }

    .federation-rules-editor__mobile-label {
        display: block;
    }

    .federation-rules-editor__row-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .federation-rules-editor__row-actions .button {
        width: 100%;
    }

    .federation-rules-editor__rows--scrollable {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
}

@media (max-width: 960px) {
    .finance-page .form-grid,
    .finance-page .form-grid--2,
    .finance-page .form-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.theme-import-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.65rem;
}

.theme-import-tools .text-link {
    font-size: 0.92rem;
}

.gmail-oauth-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    display: grid;
    gap: 0.75rem;
}

.gmail-oauth-card h3,
.gmail-oauth-card p {
    margin: 0;
}

.gmail-oauth-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.gmail-oauth-actions {
    align-items: center;
}

.oauth-callback-url {

    .oauth-callback-list {
        list-style: none;
        margin: 0.6rem 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .oauth-callback-list li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        background: var(--surface-2, var(--bg-alt));
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 0.45rem 0.7rem;
    }

    .oauth-callback-label {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--muted);
        white-space: nowrap;
        min-width: 9rem;
    }

    .btn-copy-small {
        flex-shrink: 0;
        background: none;
        border: 1px solid var(--line);
        border-radius: 5px;
        padding: 0.1rem 0.4rem;
        cursor: pointer;
        font-size: 0.8rem;
        color: var(--muted);
        transition: color var(--transition-fast), border-color var(--transition-fast);
    }

    .btn-copy-small:hover {
        color: var(--accent);
        border-color: var(--accent);
    }

    .settings-advanced-toggle {
        margin-top: 0.75rem;
    }

    .settings-advanced-toggle > summary {
        cursor: pointer;
        color: var(--muted);
        font-size: 0.85rem;
        user-select: none;
    }

    .settings-advanced-toggle > summary:hover {
        color: var(--text);
    }
    word-break: break-all;
    color: var(--accent-strong);
}

.logo-drop-zone {
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 0.95rem;
    background: color-mix(in srgb, var(--accent-soft) 30%, transparent);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.logo-drop-zone.is-drop-target {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 68%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.logo-drop-zone p {
    margin: 0;
}

.asset-drop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.8rem;
}

.asset-drop-card {
    display: grid;
    gap: 0.6rem;
    cursor: pointer;
}

.asset-drop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-height: 1.5rem;
}

.asset-drop-title {
    font-weight: 700;
    color: var(--accent-strong);
}

.asset-remove-btn {
    flex: 0 0 auto;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.18rem 0.42rem;
    border-radius: 6px;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.asset-remove-btn:hover {
    color: #e53e3e;
    background: color-mix(in srgb, #e53e3e 12%, transparent);
    border-color: color-mix(in srgb, #e53e3e 22%, transparent);
}

.asset-drop-preview {
    min-height: 72px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.asset-drop-preview.is-favicon {
    min-height: 64px;
}

.asset-drop-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    opacity: 0.45;
    pointer-events: none;
}

.asset-drop-preview img {
    display: none;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
}

#dojo-logo-preview-image,
#dojo-logo-compact-preview-image {
    max-width: 58px;
    max-height: 58px;
}

#dojo-favicon-preview-image {
    max-width: 32px;
    max-height: 32px;
}

#assistant-icon-preview-image {
    max-width: 111px;
    max-height: 111px;
}

.color-input-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.color-input-row--picker-only {
    justify-content: flex-start;
}

.color-picker-input {
    width: 3rem;
    min-width: 3rem;
    height: 2.9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-elevated);
    padding: 0.2rem;
    cursor: pointer;
}

.color-picker-input--large {
    width: 5.5rem;
    min-width: 5.5rem;
    height: 3rem;
}

.color-picker-input::-webkit-color-swatch {
    border: none;
    border-radius: 8px;
}

.color-picker-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.inline-color-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.color-swatch-input {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}

.color-swatch-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.color-swatch-input::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
}

.form-grid {
    grid-template-columns: repeat(2, 1fr);
}

.form-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.member-document-form {
    display: grid;
    gap: 1.1rem;
}

.member-document-form-section {
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
}

.member-document-form-section__heading {
    margin-bottom: 0.3rem;
}

.member-document-form-section__heading h2 {
    margin-bottom: 0;
}

.member-document-form-grid {
    gap: 0.9rem 1rem;
}

.member-document-form .form-input {
    width: 100%;
}

.member-document-body-input {
    min-height: 11rem;
    line-height: 1.6;
    resize: vertical;
}

.member-document-form .table-wrap td .form-input {
    min-height: 2.6rem;
}

.member-document-token-toolbar {
    margin-top: 0.35rem;
}

.member-document-groups-panel {
    display: grid;
    gap: 0.7rem;
}

.member-document-groups-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.member-document-groups-toolbar__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    align-items: end;
}

.member-document-groups-toolbar__filters .form-label {
    margin-bottom: 0.32rem;
}

.member-document-groups-toolbar .form-input {
    margin: 0;
}

.member-document-groups-toolbar__actions {
    margin-top: 0;
}

.member-document-groups-fieldset legend {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.member-document-group-picker {
    max-height: 20rem;
    overflow: auto;
    padding-right: 0.3rem;
}

.member-document-group-chip {
    min-height: 4.5rem;
}

.member-document-group-chip .role-chip__label {
    font-size: 0.94rem;
    line-height: 1.35;
}

@media (max-width: 960px) {
    .member-document-groups-toolbar {
        grid-template-columns: 1fr;
    }

    .member-document-groups-toolbar__actions {
        justify-content: flex-start;
    }

    .member-document-groups-toolbar__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-document-group-picker {
        max-height: 18rem;
    }
}

@media (max-width: 640px) {
    .member-document-form-section {
        padding: 0.9rem;
    }

    .member-document-token-toolbar .button,
    .member-document-groups-toolbar__actions .button {
        width: 100%;
    }

    .member-document-groups-toolbar__filters {
        grid-template-columns: 1fr;
    }

    .member-document-token-toolbar,
    .member-document-groups-toolbar__actions {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .member-document-group-chip {
        padding: 0.8rem;
    }

    .member-document-group-chip .role-chip__meta {
        font-size: 0.68rem;
    }
}

@media (max-width: 360px) {
    .member-document-form-section {
        padding: 0.75rem;
    }
}

.form-group-fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem 1.25rem;
    display: grid;
    gap: 0.75rem;
}

.form-group-fieldset legend {
    padding: 0 0.4rem;
    font-weight: 700;
}

/* ── Schedules Editor (horaires du groupe) ────────────────── */
.schedules-editor {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: 1.25rem;
}

.schedules-editor__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.2rem;
    border-bottom: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom left;
    background-color: color-mix(in srgb, var(--accent-soft) 40%, transparent);
}

.schedules-editor__title {
    font-weight: 700;
    font-size: 0.95rem;
}

.schedules-editor__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.schedules-editor__empty {
    padding: 1rem 1.2rem;
    color: var(--muted);
    font-size: 0.875rem;
    font-style: italic;
}

.schedule-editor-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.2rem;
    border-bottom: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom left;
    transition: background var(--transition-fast);
}

.schedule-editor-row:hover {
    background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

.schedule-editor-row__info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}

.schedule-editor-row__day {
    font-weight: 700;
    font-size: 0.875rem;
    min-width: 5.5rem;
}

.schedule-editor-row__time {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: 0.875rem;
}

.schedule-editor-row__chip {
    font-size: 0.78rem;
    background: var(--accent-soft);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
}

.schedule-editor-row__chip--note {
    font-style: italic;
}

.schedule-editor-row__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    flex-shrink: 0;
}

.schedule-editor-row__actions form {
    display: inline-flex;
    margin: 0;
}

.schedules-editor__add {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    padding: 0.875rem 1.2rem;
    flex-wrap: wrap;
    border-top: 2px dashed var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
}

.schedules-editor__add-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.schedules-editor__add-field--location {
    flex: 1;
    min-width: 8rem;
}

.schedules-editor__add-field--note {
    flex: 1.2;
    min-width: 12rem;
}

.schedules-editor__add-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.schedules-editor__add .form-input {
    padding-block: 0.4rem;
    font-size: 0.875rem;
}

[data-time-field='true'] {
    padding-left: 2rem;
    background-image: var(--time-field-icon-svg);
    background-repeat: no-repeat;
    background-size: 0.95rem 0.95rem;
    background-position: 0.65rem 50%;
}

.schedules-editor__add-submit {
    padding-bottom: 0.05rem;
}

.schedules-editor__add-action {
    padding: 0.875rem 1.2rem;
}

.schedules-editor__list .schedules-editor__add--row {
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    background-color: transparent;
}

.schedules-editor__list .schedules-editor__add--row:first-child {
    border-top: none;
}

.session-form-page #courses-no-group-list {
    margin-top: 0.5rem;
}

.session-form-page #start-date-suggestion {
    margin-top: 0.5rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* ── / Schedules Editor ───────────────────────────────────── */

.sys-dojo-form-card {
    width: 100%;
    max-width: none;
}

.sys-dojo-form {
    display: grid;
    gap: 1.5rem;
}

.sys-dojo-form-grid {
    align-items: start;
}

.sys-dojo-address-block {
    grid-column: 1 / -1;
    margin: 0;
    padding: 1.25rem;
    border-color: color-mix(in srgb, var(--brand-blue) 34%, var(--line));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--brand-blue) 12%, var(--bg-elevated-strong)), color-mix(in srgb, var(--brand-cyan) 8%, var(--bg-elevated))),
        var(--bg-elevated-strong);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--brand-white) 22%, transparent),
        0 10px 24px color-mix(in srgb, var(--brand-blue) 10%, transparent);
}

.sys-dojo-address-block legend {
    color: var(--accent-strong);
}

.sys-dojo-address-block .form-hint {
    color: color-mix(in srgb, var(--text) 68%, var(--muted));
}

.sys-dojo-address-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.sys-dojo-field {
    grid-column: span 2;
}

.sys-dojo-field--wide {
    grid-column: span 3;
}

.form-hint {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0;
}

.form-hint--action {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.secure-field-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    width: 100%;
    text-align: left;
}

.text-button--inline-hint {
    min-width: 0;
    padding: 0.1rem 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.pricing-form-page .form-card,
.pricing-form-page .form-card > div,
.pricing-form-page .form-card .form-input {
    min-width: 0;
}

.pricing-form-page .form-card {
    gap: 1rem;
}

.pricing-form-page__fieldset {
    background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
    border-color: color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
    gap: 0.9rem;
}

.pricing-form-page__fieldset legend {
    color: color-mix(in srgb, var(--accent-strong) 78%, var(--text));
}

.pricing-form-page #non_refundable_included_amount:disabled {
    cursor: not-allowed;
    opacity: 0.72;
    background: color-mix(in srgb, var(--bg-muted) 88%, var(--bg-elevated));
}

.pricing-form-page select.form-input:not([multiple]) {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .pricing-form-page__fieldset {
        padding: 0.9rem 0.95rem 1rem;
    }

    .pricing-form-page .form-hint--action {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.18rem;
    }

    .pricing-form-page .text-button--inline-hint {
        display: inline;
        min-height: 0;
        padding: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .pricing-form-page #previous-season-amount-meta,
    .pricing-form-page #groups-no-pricing-list,
    .pricing-form-page #previous-season-amount-hint,
    .pricing-form-page #group-no-pricing-hint {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

.form-label {
    display: block;
    margin-bottom: 0.45rem;
    font-weight: 700;
}

.form-label-with-help {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    margin-bottom: 0.45rem;
    font-weight: 700;
}

.form-label--inline {
    margin-bottom: 0;
}

.form-label-optional {
    font-weight: 400;
    color: var(--muted);
    font-size: 0.82em;
    margin-left: 0.2em;
}

.field-help {
    position: relative;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 64%, transparent);
    color: color-mix(in srgb, var(--accent-strong) 84%, var(--text));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    cursor: help;
    user-select: none;
    flex: 0 0 auto;
    touch-action: manipulation;
}

.field-help::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.45rem);
    transform: translate(-50%, 4px);
    min-width: 210px;
    max-width: min(34ch, calc(100vw - 2rem));
    padding: 0.5rem 0.62rem;
    border-radius: 0.62rem;
    border: 1px solid var(--line);
    background: var(--bg-elevated-strong);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.34;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: 6;
}

.field-help:hover::after,
.field-help:focus::after,
.field-help:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.field-help:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 62%, #ffffff);
    outline-offset: 2px;
}

.field-help.help-tooltip__trigger {
    appearance: none;
    padding: 0;
}

.field-help.help-tooltip__trigger::after {
    content: none;
    display: none;
}

.help-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    z-index: 2147483000;
}

.help-tooltip-anchor {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
}

.help-tooltip--generated {
    margin-left: 0.2rem;
}

.help-tooltip--standalone {
    margin-top: 0.3rem;
}

.help-tooltip__panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 50%;
    transform: translate(-50%, -4px);
    min-width: 220px;
    max-width: min(38ch, calc(100vw - 1.5rem));
    max-height: min(50vh, 360px);
    overflow: auto;
    padding: 0.7rem 0.8rem;
    border-radius: 0.75rem;
    border: 1px solid var(--line);
    background: var(--bg-elevated-strong);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: 2147483001;
    -webkit-overflow-scrolling: touch;
}

.help-tooltip__panel[hidden] {
    display: none;
}

.help-tooltip--align-start .help-tooltip__panel {
    left: 0;
    transform: translateY(-4px);
}

.help-tooltip--align-end .help-tooltip__panel {
    left: auto;
    right: 0;
    transform: translateY(-4px);
}

.help-tooltip[data-open="true"] .help-tooltip__panel,
.help-tooltip__panel--open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.help-tooltip--align-start[data-open="true"] .help-tooltip__panel,
.help-tooltip--align-end[data-open="true"] .help-tooltip__panel,
.help-tooltip__panel--open.help-tooltip__panel--align-start,
.help-tooltip__panel--open.help-tooltip__panel--align-end {
    transform: translateY(0);
}

.help-tooltip[data-open="true"] .help-tooltip__trigger {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 78%, transparent);
    color: var(--accent-strong);
}

.help-tooltip[data-open="true"] {
    z-index: 2147483002;
}

.help-tooltip__panel p,
.help-tooltip__panel ul,
.help-tooltip__panel ol {
    margin: 0;
}

.help-tooltip__panel > * + * {
    margin-top: 0.45rem;
}

.help-tooltip__panel a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 0.12rem;
}

.help-tooltip__panel code {
    font-size: 0.76rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 960px) {
    .field-help {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 0.86rem;
    }

    .field-help::after {
        max-width: min(32ch, calc(100vw - 1.5rem));
    }

    .help-tooltip--standalone {
        margin-top: 0.2rem;
    }

    .help-tooltip__panel {
        max-width: min(34ch, calc(100vw - 1rem));
    }
}

.form-label small {
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--muted);
}

.form-textarea,
.content-editor {
    min-height: 180px;
    resize: vertical;
}

textarea.form-input {
    max-width: 100%;
    resize: vertical;
}

textarea {
    max-width: 100%;
    resize: vertical;
}

.form-multiselect {
    min-height: 8.5rem;
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    min-height: 1.8rem;
    padding: 0.08rem 0;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
    line-height: 1.35;
    min-height: 1.8rem;
    padding: 0.08rem 0;
}

.checkbox-row span,
.checkbox-inline span {
    line-height: 1.35;
}

.form-input[aria-disabled="true"] {
    background: color-mix(in srgb, var(--bg-elevated) 74%, var(--line));
    border-style: dashed;
}

.form-input[aria-disabled="true"] .badge {
    margin-right: 0.38rem;
}

.form-input[aria-disabled="true"] p {
    margin: 0.55rem 0 0;
    color: var(--muted);
    font-size: 0.84rem;
}

.checkbox-row input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input),
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input),
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.form-checkbox),
input[type="checkbox"].form-checkbox {
    -webkit-appearance: none;
    appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.08rem 0 0;
    border-radius: 0.34rem;
    border: 1.6px solid color-mix(in srgb, var(--line) 76%, var(--accent) 24%);
    background: color-mix(in srgb, var(--bg-elevated) 94%, var(--line));
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.checkbox-row input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input)::before,
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input)::before,
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.form-checkbox)::before,
input[type="checkbox"].form-checkbox::before {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    transform: scale(0);
    transform-origin: center;
    clip-path: polygon(14% 50%, 0 64%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
    background: var(--brand-white);
    transition: transform var(--transition-fast);
}

.checkbox-row input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):hover,
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):hover,
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.form-checkbox):hover,
input[type="checkbox"].form-checkbox:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.checkbox-row input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):checked,
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):checked,
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.form-checkbox):checked,
input[type="checkbox"].form-checkbox:checked {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 84%, #0f172a 16%);
    animation: control-pop 170ms cubic-bezier(0.2, 0.85, 0.35, 1);
}

.checkbox-row input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):checked::before,
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):checked::before,
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.form-checkbox):checked::before,
input[type="checkbox"].form-checkbox:checked::before {
    transform: scale(1);
}

.checkbox-row input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):focus-visible,
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):focus-visible,
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.form-checkbox):focus-visible,
input[type="checkbox"].form-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.checkbox-row input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):disabled,
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):disabled,
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.form-checkbox):disabled,
input[type="checkbox"].form-checkbox:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

.checkbox-row input[type="radio"]:not(.selection-card__control),
.checkbox-inline input[type="radio"]:not(.selection-card__control),
input[type="radio"].form-radio,
input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input) {
    -webkit-appearance: none;
    appearance: none;
    width: 1.34rem;
    height: 1.34rem;
    margin: 0.08rem 0 0;
    border-radius: 50%;
    border: 1.9px solid color-mix(in srgb, var(--line) 76%, var(--accent) 24%);
    background: color-mix(in srgb, var(--bg-elevated) 94%, var(--line));
    background-image: radial-gradient(circle at 30% 26%, color-mix(in srgb, #ffffff 82%, transparent) 0%, transparent 48%);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    overflow: visible;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast);
}

.checkbox-row input[type="radio"]:not(.selection-card__control)::before,
.checkbox-inline input[type="radio"]:not(.selection-card__control)::before,
input[type="radio"].form-radio::before,
input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input)::before {
    content: "";
    width: 0.68rem;
    height: 0.68rem;
    border-radius: 50%;
    background: var(--brand-white);
    transform: scale(0);
    box-shadow: 0 0 0 0.06rem color-mix(in srgb, #ffffff 52%, transparent);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.checkbox-row input[type="radio"]:not(.selection-card__control)::after,
.checkbox-inline input[type="radio"]:not(.selection-card__control)::after,
input[type="radio"].form-radio::after,
input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input)::after {
    content: "";
    position: absolute;
    inset: -0.26rem;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    opacity: 0;
    transform: scale(0.35);
    pointer-events: none;
}

.checkbox-row input[type="radio"]:not(.selection-card__control):hover,
.checkbox-inline input[type="radio"]:not(.selection-card__control):hover,
input[type="radio"].form-radio:hover,
input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input):hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-0.5px);
}

.checkbox-row input[type="radio"]:not(.selection-card__control):active,
.checkbox-inline input[type="radio"]:not(.selection-card__control):active,
input[type="radio"].form-radio:active,
input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input):active,
.selection-card__control[type="radio"]:active {
    animation: control-pulse 210ms ease-out;
    transform: scale(0.93);
}

.checkbox-row input[type="radio"]:not(.selection-card__control):active::after,
.checkbox-inline input[type="radio"]:not(.selection-card__control):active::after,
input[type="radio"].form-radio:active::after,
input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input):active::after {
    animation: control-radio-ripple 280ms ease-out;
}

.checkbox-row input[type="radio"]:not(.selection-card__control):checked,
.checkbox-inline input[type="radio"]:not(.selection-card__control):checked,
input[type="radio"].form-radio:checked,
input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input):checked {
    border-color: var(--accent);
    background:
        radial-gradient(circle at 34% 28%, color-mix(in srgb, #ffffff 34%, transparent) 0%, transparent 42%),
        radial-gradient(circle at 68% 74%, color-mix(in srgb, #0f172a 28%, transparent) 0%, transparent 46%),
        color-mix(in srgb, var(--accent) 84%, #0f172a 16%);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 26%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #0f172a 36%, transparent);
    animation: control-pop 170ms cubic-bezier(0.2, 0.85, 0.35, 1);
}

.checkbox-row input[type="radio"]:not(.selection-card__control):checked::before,
.checkbox-inline input[type="radio"]:not(.selection-card__control):checked::before,
input[type="radio"].form-radio:checked::before,
input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input):checked::before {
    transform: scale(1);
    animation: control-radio-dot-in 210ms cubic-bezier(0.18, 0.8, 0.22, 1);
}

.checkbox-row input[type="radio"]:not(.selection-card__control):focus-visible,
.checkbox-inline input[type="radio"]:not(.selection-card__control):focus-visible,
input[type="radio"].form-radio:focus-visible,
input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input):focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--bg-elevated) 98%, transparent),
        0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent);
}

.checkbox-row input[type="radio"]:not(.selection-card__control):disabled,
.checkbox-inline input[type="radio"]:not(.selection-card__control):disabled,
input[type="radio"].form-radio:disabled,
input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input):disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

@keyframes control-pop {
    0% {
        transform: scale(0.9);
    }
    60% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes control-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 24%, transparent);
    }
    70% {
        transform: scale(0.92);
        box-shadow: 0 0 0 0.42rem color-mix(in srgb, var(--accent) 0%, transparent);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    }
}

@keyframes control-radio-ripple {
    0% {
        opacity: 0.5;
        transform: scale(0.35);
    }
    100% {
        opacity: 0;
        transform: scale(1.38);
    }
}

@keyframes control-radio-dot-in {
    0% {
        transform: scale(0.2);
    }
    72% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}

@media (max-width: 640px) {
    .checkbox-row,
    .checkbox-inline {
        gap: 0.72rem;
    }

    .checkbox-row input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input),
    .checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input),
    input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.form-checkbox),
    input[type="checkbox"].form-checkbox,
    .checkbox-row input[type="radio"]:not(.selection-card__control),
    .checkbox-inline input[type="radio"]:not(.selection-card__control),
    input[type="radio"].form-radio,
    input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input),
    .selection-card__control {
        width: 1.28rem;
        height: 1.28rem;
    }

    .checkbox-row input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input)::before,
    .checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input)::before,
    input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.form-checkbox)::before,
    input[type="checkbox"].form-checkbox::before,
    .selection-card__control::before {
        width: 0.7rem;
        height: 0.7rem;
    }

    .checkbox-row input[type="radio"]:not(.selection-card__control),
    .checkbox-inline input[type="radio"]:not(.selection-card__control),
    input[type="radio"].form-radio,
    input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input),
    .selection-card__control[type="radio"] {
        width: 1.42rem;
        height: 1.42rem;
    }

    .checkbox-row input[type="radio"]:not(.selection-card__control)::before,
    .checkbox-inline input[type="radio"]:not(.selection-card__control)::before,
    input[type="radio"].form-radio::before,
    input[type="radio"]:not(.selection-card__control):not(.role-chip__input):not(.home-layout-option__input):not(.texture-option__input)::before,
    .selection-card__control[type="radio"]::before {
        width: 0.64rem;
        height: 0.64rem;
    }
}

.form-error {
    margin: 0.4rem 0 0;
    color: #b42318;
    font-size: 0.92rem;

}

.form-success {
    margin: 0.4rem 0 0;
    color: #2d6a4f;
    font-size: 0.92rem;
}

.recaptcha-container {
    margin: 1.2rem 0;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    border: 1px solid var(--line);
    display: flex;
    justify-content: center;
}

.g-recaptcha {
    margin: 0;
}

.helper-text {
    margin: 0;
    color: var(--muted);
}

.helper-text--centered-spaced {
    margin-top: 1.5rem;
    text-align: center;
}

.u-hidden {
    display: none;
}

.u-block {
    display: block;
}

.u-m0 {
    margin: 0;
}

.u-mt-0 {
    margin-top: 0;
}

.u-mt-05 {
    margin-top: 0.5rem;
}

.u-mt-055 {
    margin-top: 0.55rem;
}

.u-mt-06 {
    margin-top: 0.6rem;
}

.u-mt-075 {
    margin-top: 0.75rem;
}

.u-mt-1 {
    margin-top: 1rem;
}

.u-mb-1 {
    margin-bottom: 1rem;
}

.u-mb-15 {
    margin-bottom: 1.5rem;
}

.u-my-02 {
    margin: 0.2rem 0;
}

.u-my-01 {
    margin: 0.1rem 0;
}

.u-my-04 {
    margin: 0.4rem 0;
}

.u-my-055-top {
    margin: 0.55rem 0 0;
}

.u-mb-035 {
    margin: 0 0 0.35rem 0;
}

.u-mb-08 {
    margin: 0 0 0.8rem;
}

.u-mt-045 {
    margin: 0.45rem 0 0;
}

.u-my-025-top {
    margin: 0.25rem 0 0;
}

.u-my-02-top {
    margin: 0.2rem 0 0;
}

.u-text-muted {
    color: var(--text-muted);
}

.u-danger-text {
    color: var(--danger, #b42318);
}

.u-font-sm {
    font-size: 0.92rem;
}

.u-font-code-sm {
    font-size: 0.85em;
}

.u-cursor-pointer {
    cursor: pointer;
}

.u-user-select-none {
    user-select: none;
}

.u-align-end {
    align-items: flex-end;
}

.u-width-auto {
    width: auto;
}

.u-w-full {
    width: 100%;
}

.u-text-center {
    text-align: center;
}

.u-flex-1 {
    flex: 1;
}

.u-flex-wrap {
    flex-wrap: wrap;
}

.u-key-cell {
    width: 40%;
}

.u-pre-wrap-break {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Wave 3 utilities */
.u-mt-15 {
    margin-top: 1.5rem;
}

.u-mt-2 {
    margin-top: 2rem;
}

.u-mt-035 {
    margin-top: 0.35rem;
}

.u-mt-085 {
    margin-top: 0.85rem;
}

.u-mb-05 {
    margin-bottom: 0.5rem;
}

.u-mb-075 {
    margin-bottom: 0.75rem;
}

.u-flex {
    display: flex;
}

.u-display-inline {
    display: inline;
}

.u-justify-end {
    justify-content: flex-end;
}

.u-align-self-center {
    align-self: center;
}

.u-font-normal {
    font-weight: 400;
}

.u-font-xs {
    font-size: 0.88rem;
}

.u-italic {
    font-style: italic;
}

.u-break-all {
    word-break: break-all;
}

.u-grid-full {
    grid-column: 1 / -1;
}

.u-disabled-look {
    opacity: 0.35;
    cursor: not-allowed;
}

.u-user-select-text {
    -webkit-user-select: text;
    user-select: text;
}

.u-success-text {
    color: #4caf50;
    font-weight: 500;
}

/* Facebook preview widget */
.fb-preview-section {
    border: 1px solid var(--line, #d0d0d0);
    border-radius: var(--border-radius, 6px);
    padding: 1rem;
    background: var(--bg-elevated, #fafafa);
}

.fb-preview-box {
    background: var(--bg-base, #fff);
    border: 1px solid var(--line, #e5e7eb);
    border-radius: 4px;
    padding: 0.75rem;
    min-height: 60px;
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: break-word;
}

/* Instagram preview widget */
.ig-preview-box {
    background: var(--bg-base, #fff);
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    border-top: 3px solid;
    border-image: linear-gradient(90deg, #f9ce34, #ee2a7b, #6228d7) 1;
    padding: 0.75rem;
    min-height: 60px;
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: break-word;
}

/* JS-generated Facebook preview content */
.fb-preview-tags {
    color: #0052cc;
    font-weight: 500;
    margin-top: 8px;
}

.fb-preview-link {
    color: #0052cc;
    font-size: 13px;
    margin-top: 8px;
    text-decoration: underline;
}

.fb-preview-media-count {
    color: #65676b;
    font-size: 13px;
    margin-top: 8px;
}

.fb-preview-media-url {
    word-break: break-all;
    color: #0052cc;
    font-size: 12px;
    margin-top: 4px;
}

.fb-preview-media-more {
    color: #65676b;
    font-size: 12px;
    margin-top: 4px;
}

.fb-preview-empty {
    color: var(--text-muted, #999);
    font-style: italic;
}

/* Grade management */
.grade-summary-highlight {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, var(--brand-cyan) 28%), color-mix(in srgb, var(--accent-strong) 68%, var(--brand-red) 32%));
    color: var(--brand-white);
    border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.badge--promotion {
    background: color-mix(in srgb, var(--brand-orange) 16%, var(--accent-soft));
    border-color: color-mix(in srgb, var(--brand-orange) 28%, var(--line));
    color: color-mix(in srgb, var(--brand-orange) 86%, var(--text));
}

.badge--muted {
    background: color-mix(in srgb, var(--text-light) 10%, var(--accent-soft));
    border-color: color-mix(in srgb, var(--text-light) 20%, var(--line));
    color: var(--text-light);
    font-weight: 400;
}

.team-grade-page .bulk-actions-toolbar {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.team-grade-page .team-grade-toolbar {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft));
    border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
    border-radius: var(--radius-md);
}

.team-grade-page .bulk-actions-toolbar__cell {
    flex: 1;
    min-width: 0;
}

.team-grade-page .bulk-actions-toolbar__selection {
    max-width: 16rem;
}

.team-grade-page .bulk-actions-toolbar__submit {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.team-grade-page .bulk-actions-toolbar__submit .button {
    width: 100%;
}

.team-grade-page .team-grade-select-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    cursor: pointer;
}

.team-grade-page .team-grade-selection-col {
    width: 4.25rem;
}

.team-grade-page .team-grade-empty-state {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.team-grade-page .team-grade-seniority-list {
    display: grid;
    gap: 0.25rem;
}

.team-grade-page .team-grade-muted {
    color: var(--text-muted);
}

@media (max-width: 960px) {
    .team-grade-page .bulk-actions-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .team-grade-page .bulk-actions-toolbar__cell {
        width: 100%;
    }

    .team-grade-page .bulk-actions-toolbar__submit {
        justify-content: stretch;
    }
}

@media (min-width: 600px) and (max-width: 960px) {
    .team-grade-page .bulk-actions-toolbar__cell {
        min-width: 120px;
    }
}

@media (max-width: 640px) {
    .team-grade-page table {
        font-size: 0.875rem;
    }

    .team-grade-page th,
    .team-grade-page td {
        padding: 0.5rem;
    }

    .team-grade-page .bulk-actions-toolbar {
        flex-direction: column;
    }

    .team-grade-page .bulk-actions-toolbar__cell {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .team-grade-page table th:nth-child(5),
    .team-grade-page table th:nth-child(6),
    .team-grade-page table th:nth-child(7),
    .team-grade-page table td:nth-child(5),
    .team-grade-page table td:nth-child(6),
    .team-grade-page table td:nth-child(7) {
        display: none;
    }
}

/* Theme colors page */
.theme-export-actions {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0 1.5rem 0;
    align-items: flex-start;
}

/* Public dojo page — instructors */
.le-dojo-instructors-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.le-dojo-instructor-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.le-dojo-instructor-card.has-photo {
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
}

.le-dojo-instructor-main > :first-child {
    margin-top: 0;
}

.instructor-photo {
    width: 100%;
    max-width: 320px;
    align-self: start;
    border-radius: 12px;
    margin-bottom: 0;
}

@media (max-width: 960px) {
    .le-dojo-instructor-card,
    .le-dojo-instructor-card.has-photo {
        grid-template-columns: 1fr;
    }

    .instructor-photo {
        max-width: min(320px, 100%);
    }
}

/* Embedded map iframe */
.u-iframe-rounded {
    border: 0;
    border-radius: 14px;
}

.import-source-card {
    padding: 1rem;
    background: var(--bg-elevated);
    border-radius: var(--border-radius, 0.5rem);
    margin: 1rem 0;
}

.import-source-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.import-source-label {
    margin: 0;
    flex-shrink: 0;
}

.import-source-option {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.import-drop-zone {
    min-height: 11rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 1.25rem;
}

.sys-drop-zone {
    display: block;
    cursor: pointer;
    padding: 1rem 1.2rem;
}

.historique-actions {
    display: flex;
    align-items: stretch;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.historique-progress-button,
.dojo-long-task-button {
    --historique-progress: 0%;
    --dojo-long-task-progress: 0%;
    min-width: min(100%, 19.5rem);
    padding: 0.7rem 1rem 0.72rem;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.3rem;
}

.historique-progress-button__label,
.dojo-long-task-button__label {
    display: block;
    width: 100%;
    font-weight: 750;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.historique-progress-button__status,
.dojo-long-task-button__status {
    display: block;
    width: 100%;
    font-size: 0.78rem;
    color: color-mix(in srgb, currentColor 78%, transparent);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.historique-progress-button__track,
.dojo-long-task-button__track {
    display: block;
    width: 100%;
    height: 0.38rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 24%, transparent);
    overflow: hidden;
    margin-top: 0.05rem;
}

.historique-progress-button__bar,
.dojo-long-task-button__bar {
    display: block;
    width: max(var(--historique-progress), var(--dojo-long-task-progress));
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, currentColor 88%, var(--brand-cyan) 12%),
        color-mix(in srgb, var(--brand-cyan) 78%, currentColor 22%)
    );
    transition: width 420ms ease;
}

.historique-progress-button.is-running,
.historique-progress-button.is-running:hover,
.dojo-long-task-button.is-running,
.dojo-long-task-button.is-running:hover {
    transform: none;
    filter: saturate(1.08);
    cursor: progress;
}

.historique-progress-button.is-running .historique-progress-button__track,
.dojo-long-task-button.is-running .dojo-long-task-button__track {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-white) 20%, transparent);
}

@media (max-width: 960px) {
    .historique-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .historique-actions .button {
        width: 100%;
    }

    .historique-progress-button {
        min-width: 100%;
    }

    .dojo-long-task-button {
        min-width: 100%;
    }

    .federation-members-filter-actions {
        width: 100%;
    }
}

.sys-card-muted {
    margin-bottom: 1rem;
    border: 1px solid var(--line);
}

.sys-card-muted--soft {
    background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
}

.sys-card-muted--medium {
    background: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}

.sys-card-dashed {
    margin-bottom: 1rem;
    border: 1px dashed var(--line);
}

.sys-maintenance-intro,
.sys-maintenance-note {
    margin: 0;
}

.sys-maintenance-details {
    margin-bottom: 1rem;
}

.sys-maintenance-report {
    margin-top: 0.6rem;
}

.sys-maintenance-row {
    margin: 0.1rem 0;
}

.sys-maintenance-table-wrap,
.sys-maintenance-subdetails {
    margin-top: 0.75rem;
}

.sys-maintenance-key {
    white-space: nowrap;
    font-weight: 600;
}

.sys-maintenance-stderr {
    white-space: pre-wrap;
    word-break: break-word;
}

.sys-maintenance-form-grid {
    margin-bottom: 1rem;
}

.sys-maintenance-dojo-wrapper {
    display: none;
}

.sys-maintenance-preset-card {
    margin-bottom: 1rem;
}

.sys-maintenance-preset-title {
    margin-bottom: 0.35rem;
}

.sys-maintenance-preset-help {
    margin-bottom: 0.8rem;
}

.sys-maintenance-preset-description {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.sys-maintenance-summary-title {
    margin: 0 0 0.35rem;
}

.sys-maintenance-summary-note {
    margin: 0.45rem 0 0;
    font-size: 0.92rem;
}

.sys-maintenance-engine-text {
    margin-top: 0;
}

.sys-maintenance-drop-title {
    display: block;
}

.sys-maintenance-faq-grid {
    margin-bottom: 0.75rem;
}

.sys-maintenance-faq-toggle,
.sys-maintenance-faq-actions,
.sys-maintenance-faq-file-label {
    margin-top: 0.8rem;
}

.sys-maintenance-uploads-alert {
    margin-bottom: 1rem;
}

.split-heading--flush {
    margin-bottom: 0;
}

.split-heading--spaced {
    margin-bottom: 1rem;
}

.sys-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

.sys-stat-label {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.admin-current-balance {
    font-size: 1.1rem;
    font-weight: 600;
}

.inline-action-form {
    display: inline;
}

.text-link-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.optional-block {
    border: 1px dashed var(--line);
    border-radius: 16px;
    padding: 0.75rem 0.95rem;
    background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
}

.optional-block summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--accent-strong);
}

.family-form-details {
    margin-bottom: 1rem;
}

.family-form-details summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.family-form-details summary::-webkit-details-marker {
    display: none;
}

.family-form-details summary::before {
    content: "▸";
    font-size: 0.9rem;
    color: var(--accent-strong);
    transform-origin: center;
    transition: transform var(--transition-fast);
}

.family-form-details[open] summary::before {
    transform: rotate(90deg);
}

.family-add-layout {
    display: grid;
    grid-template-columns: minmax(150px, 176px) minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
}

.family-add-layout:has(#family-photo-preview-item:not([hidden])),
.family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) {
    grid-template-columns: fit-content(220px) minmax(0, 1fr);
    gap: 0.95rem 1.25rem;
}

.family-add-photo-panel {
    min-width: 0;
    display: grid;
    gap: 0.5rem;
    align-content: start;
}

.family-add-fields {
    min-width: 0;
}

.family-add-layout:has(#family-photo-preview-item:not([hidden])) .family-add-fields,
.family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) .family-add-fields {
    padding-top: 0.2rem;
}

.family-add-layout:has(#family-photo-preview-item:not([hidden])) .family-add-photo-panel,
.family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) .family-add-photo-panel {
    width: min(100%, 220px);
    max-width: 220px;
}

.family-add-layout:has(#family-photo-preview-item:not([hidden])) .family-add-fields .form-grid,
.family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) .family-add-fields .form-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 0.85rem 0.9rem;
}

.family-add-photo-panel .form-label-with-help {
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 0;
}

.family-add-photo-panel .form-label {
    line-height: 1.15;
}

.family-add-photo-drop-zone {
    min-height: 100%;
    aspect-ratio: 3 / 4;
    display: grid;
    align-content: start;
    padding: 0.5rem;
    border-color: color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--accent-soft) 6%) 0%, color-mix(in srgb, var(--surface) 98%, transparent) 100%);
}

.family-add-layout:has(#family-photo-preview-item:not([hidden])) .family-add-photo-drop-zone,
.family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) .family-add-photo-drop-zone {
    min-height: 0;
    aspect-ratio: var(--family-photo-preview-ratio, 3 / 4);
    align-content: start;
    width: min(100%, 220px);
    max-width: 220px;
    padding: 0;
    border-color: transparent;
    background: transparent;
}

.family-add-photo-drop-zone .photo-drop-hint {
    min-height: 100%;
    display: grid;
    place-items: center;
    align-content: center;
    text-wrap: balance;
    padding: 0.85rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.5;
}

.family-add-photo-drop-zone .photo-drop-hint[hidden] {
    display: none;
}

.family-add-photo-drop-zone .photo-sortable-item {
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.9rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    gap: 0.6rem;
}

.family-add-layout:has(#family-photo-preview-item:not([hidden])) .family-add-photo-drop-zone .photo-sortable-item,
.family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) .family-add-photo-drop-zone .photo-sortable-item {
    min-height: 0;
    justify-content: stretch;
    align-items: stretch;
    padding: 0;
    width: 100%;
    max-width: none;
    aspect-ratio: var(--family-photo-preview-ratio, 3 / 4);
    overflow: hidden;
    border-style: solid;
}

.family-add-photo-drop-zone .photo-sortable {
    min-height: 100%;
    margin-top: 0;
}

.family-add-layout:has(#family-photo-preview-item:not([hidden])) .family-add-photo-drop-zone .photo-sortable,
.family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) .family-add-photo-drop-zone .photo-sortable {
    min-height: 0;
    width: 100%;
    max-width: none;
}

.family-add-photo-drop-zone .photo-thumb {
    width: min(100%, 88px);
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: 118px;
    border-radius: 14px;
}

.family-add-layout:has(#family-photo-preview-item:not([hidden])) .family-add-photo-drop-zone .photo-thumb,
.family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) .family-add-photo-drop-zone .photo-thumb {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    aspect-ratio: auto;
    border-radius: inherit;
    border: 0;
}

.family-add-layout:has(#family-photo-preview-item:not([hidden])) .family-add-photo-drop-zone .photo-name-input,
.family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) .family-add-photo-drop-zone .photo-name-input {
    display: none;
}

.family-add-layout:has(#family-photo-preview-item:not([hidden])) .family-add-photo-panel .helper-text,
.family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) .family-add-photo-panel .helper-text {
    width: fit-content;
    max-width: 220px;
}

.family-add-photo-drop-zone .photo-name-input {
    width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
}

.family-add-photo-drop-zone .photo-delete-btn {
    margin-left: 0;
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 88%, var(--accent) 12%);
}

.family-add-photo-panel .helper-text {
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--muted) 90%, var(--text) 10%);
}

/* Rend le form photo transparent au grid du panel (identique au comportement page ajout) */
#family-photo-form {
    display: contents;
}

.optional-grid {
    margin-top: 0.85rem;
}

.inner-form-card {
    border-radius: 20px;
    box-shadow: none;
    margin-bottom: 1rem;
    display: grid;
    gap: 1rem;
}

/* --- Survey admin option builder --- */
.survey-option-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

.survey-option-image-col {
    display: grid;
    gap: 0.4rem;
}

.survey-option-drop-zone {
    min-height: 72px;
    padding: 0.6rem;
    gap: 0.4rem;
    display: grid;
    place-content: center;
    text-align: center;
    cursor: pointer;
}

.survey-option-drop-zone .asset-drop-title {
    font-size: 0.78rem;
    margin: 0;
}

.survey-option-image-preview {
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.survey-option-url-input {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
}

.survey-option-remove-img {
    font-size: 0.78rem;
    justify-self: start;
}

.survey-option-fields-col {
    display: grid;
    gap: 0.5rem;
}

.survey-option-fields-col .btn-icon {
    justify-self: end;
    align-self: end;
}

@media (max-width: 640px) {
    .survey-option-row {
        grid-template-columns: 1fr;
    }
    .survey-option-image-col {
        grid-template-columns: 100px minmax(0, 1fr);
        align-items: start;
    }
    .survey-option-drop-zone {
        min-height: 56px;
    }
    .survey-option-image-preview {
        max-height: 70px;
    }
}

/* --- Public survey answer choices --- */
:is(.survey-take-page, .home-survey-widget) .inner-form-card {
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-soft) 36%, transparent), transparent 38%),
        linear-gradient(160deg, color-mix(in srgb, var(--bg-elevated-strong) 96%, var(--accent-soft) 4%), var(--bg-elevated));
    box-shadow: 0 22px 46px color-mix(in srgb, var(--accent) 10%, transparent);
}

:is(.survey-take-page, .home-survey-widget) .survey-choice-stack {
    display: grid;
    gap: 0.72rem;
}

:is(.survey-take-page, .home-survey-widget) .survey-choice-card {
    position: relative;
    align-items: flex-start;
    gap: 0.78rem;
    min-height: 54px;
    padding: 0.82rem 0.92rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent) 20%);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 94%, transparent), color-mix(in srgb, var(--bg-elevated-strong) 94%, transparent));
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
    overflow: hidden;
}

:is(.survey-take-page, .home-survey-widget) .survey-choice-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0%, color-mix(in srgb, var(--accent-soft) 24%, transparent) 48%, transparent 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

:is(.survey-take-page, .home-survey-widget) .survey-choice-card:focus-within {
    border-color: color-mix(in srgb, var(--accent) 64%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

:is(.survey-take-page, .home-survey-widget) .survey-choice-card:has(.selection-card__control:checked) {
    border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 52%, var(--bg-elevated)), color-mix(in srgb, var(--bg-elevated-strong) 90%, var(--accent-soft) 10%));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 20%, transparent);
    transform: translateY(-1px);
    animation: survey-choice-confirm 220ms ease-out;
}

:is(.survey-take-page, .home-survey-widget) .survey-choice-card:has(.selection-card__control:checked)::before {
    opacity: 1;
}

:is(.survey-take-page, .home-survey-widget) .survey-choice-card .selection-card__control {
    width: 1.28rem;
    height: 1.28rem;
    margin-top: 0.2rem;
}

:is(.survey-take-page, .home-survey-widget) .survey-choice-card__content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.72rem;
    align-items: center;
    min-width: 0;
    width: 100%;
}

:is(.survey-take-page, .home-survey-widget) .survey-choice-card__media {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated-strong) 94%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}

:is(.survey-take-page, .home-survey-widget) .survey-choice-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

:is(.survey-take-page, .home-survey-widget) .survey-choice-card__text {
    display: block;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: color-mix(in srgb, var(--text) 95%, var(--accent-strong) 5%);
    overflow-wrap: anywhere;
}

:is(.survey-take-page, .home-survey-widget) .survey-choice-card__text i {
    font-size: 1.15rem;
    line-height: 1;
}

:is(.survey-take-page, .home-survey-widget) .table-heading.stacked-heading p i {
    margin-right: 0.28rem;
    color: var(--accent-strong);
}

:is(.survey-take-page, .home-survey-widget) .survey-binary-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(.survey-take-page, .home-survey-widget) .survey-likert-stack {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

:is(.survey-take-page, .home-survey-widget) .survey-score-card .survey-choice-card__content,
:is(.survey-take-page, .home-survey-widget) .survey-scale-card .survey-choice-card__content {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0;
}

:is(.survey-take-page, .home-survey-widget) .survey-scale-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
}

:is(.survey-take-page, .home-survey-widget) .survey-progress-button {
    --survey-progress: 0%;
    --survey-progress-track: color-mix(in srgb, #ffffff 18%, transparent);
    --survey-progress-bar: color-mix(in srgb, var(--brand-cyan) 62%, #ffffff 38%);
    position: relative;
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 0.75rem;
    overflow: hidden;
    min-width: 230px;
    min-height: 50px;
}

:is(.survey-take-page, .home-survey-widget) .survey-progress-button__label,
:is(.survey-take-page, .home-survey-widget) .survey-progress-button__status,
:is(.survey-take-page, .home-survey-widget) .survey-progress-button__track {
    position: relative;
    z-index: 1;
}

:is(.survey-take-page, .home-survey-widget) .survey-progress-button__status {
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.96;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #ffffff 28%, transparent);
    background: color-mix(in srgb, #000000 16%, transparent);
    line-height: 1.1;
}

:is(.survey-take-page, .home-survey-widget) .survey-progress-button__track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--survey-progress-track);
}

:is(.survey-take-page, .home-survey-widget) .survey-progress-button__bar {
    display: block;
    width: var(--survey-progress);
    height: 100%;
    background: var(--survey-progress-bar);
    transition: width 260ms ease-out;
}

html[data-theme="dark"] :is(.survey-take-page, .home-survey-widget) .survey-progress-button,
html[data-theme="vampire"] :is(.survey-take-page, .home-survey-widget) .survey-progress-button,
html[data-theme="aurora"] :is(.survey-take-page, .home-survey-widget) .survey-progress-button {
    --survey-progress-track: color-mix(in srgb, #ffffff 24%, transparent);
    --survey-progress-bar: color-mix(in srgb, var(--brand-cyan) 72%, #ffffff 28%);
}

html[data-theme="sunset"] :is(.survey-take-page, .home-survey-widget) .survey-progress-button {
    --survey-progress-track: color-mix(in srgb, #0d2e4f 20%, transparent);
    --survey-progress-bar: color-mix(in srgb, var(--brand-blue) 56%, var(--brand-cyan) 44%);
}

@keyframes survey-choice-confirm {
    0% {
        transform: translateY(0) scale(0.996);
    }
    55% {
        transform: translateY(-1px) scale(1.006);
    }
    100% {
        transform: translateY(-1px) scale(1);
    }
}

@media (hover: hover) and (pointer: fine) {
    :is(.survey-take-page, .home-survey-widget) .survey-choice-card:hover {
        border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
        box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 16%, transparent);
        transform: translateY(-1px);
    }

    :is(.survey-take-page, .home-survey-widget) .survey-choice-card:hover::before {
        opacity: 1;
    }
}

@media (max-width: 960px) {
    :is(.survey-take-page, .home-survey-widget) .survey-binary-stack {
        grid-template-columns: 1fr;
    }

    :is(.survey-take-page, .home-survey-widget) .survey-likert-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :is(.survey-take-page, .home-survey-widget) .survey-scale-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    :is(.survey-take-page, .home-survey-widget) .survey-progress-button {
        width: 100%;
        grid-template-columns: 1fr;
        justify-items: start;
    }

    :is(.survey-take-page, .home-survey-widget) .survey-progress-button__status {
        font-size: 0.75rem;
    }
}

@media (max-width: 640px) {
    :is(.survey-take-page, .home-survey-widget) .survey-choice-card {
        padding: 0.72rem 0.76rem;
        border-radius: 14px;
    }

    :is(.survey-take-page, .home-survey-widget) .survey-choice-card__media {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }

    :is(.survey-take-page, .home-survey-widget) .survey-scale-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    :is(.survey-take-page, .home-survey-widget) .survey-likert-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :is(.survey-take-page, .home-survey-widget) .survey-scale-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :is(.survey-take-page, .home-survey-widget) .survey-progress-button {
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.survey-take-page, .home-survey-widget) .survey-choice-card:has(.selection-card__control:checked) {
        animation: none;
    }
}
/* --- /Public survey answer choices --- */

.inner-form-card--tight {
    gap: 0.75rem;
}

.form-grid-actions-end {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 0.6rem;
}

.bulk-grade-filter--spaced {
    margin-bottom: 1.5rem;
}

.inner-form-card > .toggle-grid {
    margin-top: 0;
}

.password-security-section {
    display: grid;
    gap: 1rem;
}

.profile-password-heading {
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}

.profile-password-heading h2 {
    margin-bottom: 0;
}

.profile-password-heading > .inline-actions {
    margin-top: 0;
}

.password-security-form {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
}

.password-security-form .form-grid {
    align-items: end;
}

.password-security-form .form-grid .form-label {
    margin-bottom: 0;
}

.password-security-form .submit-button {
    width: 100%;
}

.password-security-form .autosave-status {
    margin-top: 0.2rem;
}

@media (min-width: 641px) {
    .password-security-form .form-grid > div {
        display: grid;
        gap: 0.18rem;
    }

    .password-security-form .form-grid > div .form-label {
        min-height: 2.7em;
    }
}

.inline-delete-form {
    margin-top: 0.65rem;
}

.member-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.65rem;
}

.member-actions-form {
    display: inline-flex;
    margin: 0;
}

.member-actions .btn-icon.birthday-visibility-toggle i {
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.member-actions .btn-icon.birthday-visibility-toggle.is-active i {
    color: color-mix(in srgb, var(--success-strong) 88%, #ffffff 12%);
}

.member-actions .btn-icon.birthday-visibility-toggle.is-inactive i {
    color: color-mix(in srgb, var(--text-muted) 60%, var(--text) 40%);
}

.member-actions .btn-icon.birthday-visibility-toggle:hover i,
.member-actions .btn-icon.birthday-visibility-toggle:focus-visible i {
    transform: scale(1.05);
}

.member-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    text-decoration: none;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0;
}

.member-action-icon:hover,
.member-action-icon:focus-visible {
    border-color: color-mix(in srgb, var(--brand-blue) 36%, var(--line));
    background: color-mix(in srgb, var(--brand-blue) 10%, var(--surface));
    text-decoration: none;
}

.member-action-icon--button {
    min-height: 2.5rem;
    padding: 0;
}

.member-actions .inline-delete-form {
    margin-top: 0;
}

.is-admin .member-actions .text-link,
.is-admin .member-actions .text-button {
    line-height: 1.4;
    vertical-align: baseline;
}

.is-admin .member-actions .text-button {
    min-height: auto;
    padding: 0;
}

.modal-open {
    overflow: hidden;
}

.transfer-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.transfer-modal[hidden] {
    display: none !important;
}

.transfer-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
}

.transfer-modal__dialog {
    position: relative;
    width: min(560px, calc(100% - 1.5rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.transfer-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom left;
}

.transfer-modal__title {
    margin: 0;
    font-size: 1.05rem;
}

.transfer-modal__body {
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
}

.transfer-modal__form {
    display: grid;
    gap: 0.75rem;
}

.transfer-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

@media (max-width: 640px) {
    .transfer-modal {
        padding: 0.6rem;
    }

    .transfer-modal__dialog {
        width: calc(100% - 0.4rem);
    }

    .transfer-modal__actions {
        flex-direction: column-reverse;
    }

    .transfer-modal__actions .button {
        width: 100%;
    }
}

.logo-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 2400;
    background: rgba(15, 23, 42, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

.logo-editor-modal[hidden] {
    display: none !important;
}

.logo-editor-panel {
    width: min(700px, calc(100% - 2rem));
    max-height: calc(100vh - 2rem);
    max-height: calc(100svh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--line, #dbe2ea);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-soft, 0 20px 40px rgba(15, 23, 42, 0.22));
    padding: 0.65rem;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 0.45rem;
}

.logo-editor-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.logo-editor-header h2 {
    margin: 0.1rem 0;
}

.logo-editor-controls {
    display: grid;
    gap: 0.3rem;
}

.logo-editor-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.45rem;
    min-height: 0;
}

.logo-editor-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: sticky;
    top: 0;
    z-index: 3;
}

.logo-editor-workspace {
    display: grid;
    grid-template-columns: minmax(160px, 188px) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: start;
    min-height: 0;
    padding-bottom: 0.3rem;
}

.logo-editor-sidebar {
    display: grid;
    gap: 0.4rem;
    min-height: 0;
    overflow: visible;
    align-content: start;
    padding-bottom: 0.2rem;
    scrollbar-gutter: stable;
}

.logo-editor-sidebar-card,
.logo-editor-tool-palette,
.logo-editor-tool-group[role="group"],
.logo-editor-sliders {
    display: grid;
    gap: 0.35rem;
}

.logo-editor-sidebar-card,
.logo-editor-sliders {
    padding: 0.28rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--line, #dbe2ea) 80%, var(--accent, #2563eb) 20%);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated, #fff) 96%, #ffffff 4%) 0%, color-mix(in srgb, var(--bg-elevated, #fff) 90%, var(--accent-soft, #dbeafe) 10%) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent);
}

.logo-editor-sidebar-title {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text, #0f172a) 72%, var(--accent, #2563eb) 28%);
}

.logo-editor-tool-palette,
.logo-editor-tool-group[role="group"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.22rem;
    padding: 0.22rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--line, #dbe2ea) 78%, var(--accent, #2563eb) 22%);
    background: color-mix(in srgb, var(--bg-elevated, #fff) 92%, var(--accent-soft, #dbeafe) 8%);
}

.logo-editor-tool-palette {
    justify-content: flex-end;
    width: auto;
    margin-left: auto;
    padding: 0.22rem;
}

.logo-editor-tool-group[role="group"] {
    justify-content: stretch;
}

.logo-editor-tool-group[role="group"] .button.small {
    flex: 1 1 0;
    min-width: 0;
}

.logo-editor-tool-grid {
    display: grid !important;
    align-items: stretch;
    justify-items: stretch;
}

.logo-editor-tool-grid--double {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.logo-editor-tool-grid--triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.logo-editor-tool-grid .button.small {
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    aspect-ratio: 1 / 1;
    padding: 0.18rem;
}

.logo-editor-tool-grid .button.small i {
    font-size: 1rem;
}

.logo-editor-tool-grid--double .button.small {
    min-height: 2rem;
    aspect-ratio: auto;
}

.logo-editor-tool-grid--triple .button.small {
    min-height: 2.3rem;
}

.logo-editor-footer {
    justify-content: flex-end;
    position: static;
    margin-top: 0;
    padding-top: 0.25rem;
    background: transparent;
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
}

.logo-editor-footer .button {
    flex: 1 1 0;
    min-width: 0;
}

.logo-editor-controls .button.small {
    min-width: 2.05rem;
    min-height: 2.05rem;
    padding: 0.22rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.logo-editor-controls .button.small i {
    font-size: 0.98rem;
    line-height: 1;
}

.logo-editor-controls .button.secondary.small {
    border-color: color-mix(in srgb, var(--line, #dbe2ea) 72%, var(--accent, #2563eb) 28%);
    background: color-mix(in srgb, var(--bg-elevated, #fff) 94%, var(--accent-soft, #dbeafe) 6%);
}

.logo-editor-controls .button.secondary.small:hover,
.logo-editor-controls .button.secondary.small:focus-visible {
    border-color: color-mix(in srgb, var(--accent, #2563eb) 58%, transparent);
    background: color-mix(in srgb, var(--accent-soft, #dbeafe) 48%, var(--bg-elevated, #fff) 52%);
}

.logo-editor-controls .button.primary.small {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-strong, #1d4ed8) 28%, transparent);
}

.logo-editor-tool-group input[type="color"] {
    width: 100%;
    min-height: 2rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--line, #dbe2ea) 78%, var(--accent, #2563eb) 22%);
    padding: 0.1rem;
}

.logo-editor-setting {
    display: grid;
    gap: 0.04rem;
}

.logo-editor-setting-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.1rem;
}

.logo-editor-setting input[type="range"] {
    margin: 0;
    padding: 0;
    min-height: 1rem;
    height: 1rem;
    border: 0;
    background: transparent;
}

.logo-editor-sliders {
    gap: 0.12rem;
}

.logo-editor-setting-head .helper-text {
    line-height: 1;
    font-size: 0.9rem;
}

.logo-editor-setting-head .inline-actions.compact-actions {
    gap: 0.18rem;
}

.logo-editor-setting-head .inline-actions.compact-actions .button.small {
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0.12rem;
}

.logo-editor-setting-head .inline-actions {
    margin-top: 0;
}

.logo-editor-stage {
    display: grid;
    grid-template-rows: auto auto;
    gap: 0.35rem;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    padding-bottom: 0.2rem;
}

.logo-editor-canvas-wrap {
    border-radius: 10px;
    border: 1px solid var(--line, #dbe2ea);
    padding: 0.45rem;
    overflow: auto;
    min-height: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:
        linear-gradient(45deg, rgba(148, 163, 184, 0.26) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148, 163, 184, 0.26) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.26) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.26) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

#logo-editor-canvas,
#assistant-icon-editor-canvas {
    display: block;
    width: auto;
    max-width: min(100%, 540px);
    height: auto;
    max-height: 52vh;
    margin: 0 auto;
    touch-action: none;
    cursor: crosshair;
}

@media (max-width: 960px) {
    .logo-editor-modal {
        padding: 0.7rem;
        align-items: flex-start;
    }

    .logo-editor-panel {
        width: calc(100% - 1rem);
        max-height: calc(100vh - 1rem);
        max-height: calc(100svh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .logo-editor-footer .button {
        width: 100%;
    }

    .logo-editor-workspace {
        grid-template-columns: 1fr;
    }

    .logo-editor-stage {
        order: -1;
    }

    .logo-editor-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .logo-editor-canvas-wrap {
        min-height: 0;
    }

    .logo-editor-footer {
        gap: 0.5rem;
    }
}

@media (max-width: 640px) {
    .logo-editor-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .logo-editor-header .button {
        width: 100%;
    }

    .logo-editor-topbar {
        justify-content: stretch;
    }

    .logo-editor-tool-palette {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        width: 100%;
        margin-left: 0;
    }

    .logo-editor-sidebar {
        grid-template-columns: 1fr;
    }

    .logo-editor-tool-grid .button.small {
        min-height: 2.35rem;
    }

    .logo-editor-tool-grid--double .button.small {
        min-height: 2.05rem;
    }

    .logo-editor-setting-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.04rem;
    }

    .logo-editor-controls .button.small {
        min-width: 2.2rem;
        min-height: 2.2rem;
    }

    .logo-editor-canvas-wrap {
        min-height: 0;
        padding: 0.55rem;
        align-items: flex-start;
    }

    #logo-editor-canvas,
    #assistant-icon-editor-canvas {
        max-width: min(100%, 460px);
        max-height: 42vh;
    }

    .logo-editor-footer {
        gap: 0.45rem;
    }

    .logo-editor-footer .button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .logo-editor-panel {
        padding: 0.6rem;
        gap: 0.5rem;
    }

    .logo-editor-footer {
        flex-direction: column-reverse;
    }

    .logo-editor-tool-palette {
        padding: 0.35rem;
    }
}

/* Fiche membre de famille — pill de grade positionnée */
.family-member-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    height: 100%;
    padding: 1rem;
    padding-top: 0.95rem;
    border-radius: calc(var(--radius-lg) + 0.15rem);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-blue) 9%, transparent) 0%, transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent-soft) 8%) 0%, var(--surface) 100%);
    border: 1px solid color-mix(in srgb, var(--brand-blue) 14%, var(--line));
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.family-member-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.35rem;
    background: linear-gradient(180deg, var(--brand-blue) 0%, color-mix(in srgb, var(--success-strong) 72%, var(--brand-blue)) 100%);
    opacity: 0.92;
}

.family-member-item:hover,
.family-member-item:focus-within {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--brand-blue) 26%, var(--line));
    box-shadow: 0 20px 34px rgba(15, 23, 42, 0.1);
}

.family-member-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0;
}

.family-member-identity {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
}

.family-member-header h3 {
    margin: 0;
    min-width: 0;
    font-size: clamp(1.08rem, 1.4vw, 1.24rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.family-member-meta {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.34rem 0.62rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface) 20%);
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

.family-member-item > small {
    margin: -0.2rem 0 0;
    color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
    font-size: 0.9rem;
}

.family-member-badges {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    max-width: min(62%, 22rem);
    margin-left: auto;
}

.family-member-badges[hidden] {
    display: none;
}

.family-grade-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.24rem 0.58rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-blue) 16%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand-blue) 30%, var(--line));
    color: var(--text);
    line-height: 1.35;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    text-align: left;
}

.family-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.95rem;
    line-height: 1;
    background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft) 12%);
    border: 1px solid color-mix(in srgb, var(--line) 88%, var(--brand-blue) 12%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.family-status-badge[hidden] {
    display: none;
}

.family-status-badge[data-birthday-corner-indicator="true"] {
    transform-origin: 50% 50%;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.family-status-badge[data-birthday-corner-indicator="true"].is-hidden {
    opacity: 0;
    transform: scale(0.84) translateY(-1px);
}

.family-member-item .member-actions {
    margin-top: auto;
    padding-top: 0.8rem;
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
}

.family-member-item .member-actions .btn-icon {
    min-width: 2.65rem;
    min-height: 2.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft) 10%);
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--brand-blue) 18%);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.family-member-item .member-actions .btn-icon:hover,
.family-member-item .member-actions .btn-icon:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--brand-blue) 34%, var(--line));
    background: color-mix(in srgb, var(--brand-blue) 8%, var(--surface));
}

.family-member-item .member-actions .btn-icon.success {
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 48%, var(--line));
    color: color-mix(in srgb, var(--success) 92%, #ffffff);
}

@media (max-width: 960px) {
    .family-add-layout {
        grid-template-columns: 1fr;
    }

    .family-add-layout:has(#family-photo-preview-item:not([hidden])),
    .family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .family-add-layout:has(#family-photo-preview-item:not([hidden])) .family-add-fields,
    .family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) .family-add-fields {
        padding-top: 0;
    }

    .family-add-layout:has(#family-photo-preview-item:not([hidden])) .family-add-fields .form-grid,
    .family-add-layout:has(#family-photo-edit-preview-item:not([hidden])) .family-add-fields .form-grid {
        grid-template-columns: 1fr;
    }

    .family-add-photo-drop-zone {
        aspect-ratio: auto;
    }

    .family-member-item {
        gap: 0.75rem;
        padding: 0.95rem;
    }

    .family-member-badges {
        max-width: min(72%, 22rem);
    }

    .family-grade-badge {
        font-size: 0.78rem;
        padding: 0.22rem 0.56rem;
    }
}

@media (max-width: 640px) {
    .family-add-photo-drop-zone .photo-drop-hint,
    .family-add-photo-drop-zone .photo-sortable-item {
        min-height: 7.5rem;
    }

    .family-add-photo-drop-zone .photo-thumb {
        width: min(100%, 144px);
        max-height: 192px;
    }

    .family-member-item {
        padding: 0.9rem;
    }

    .family-member-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .family-member-badges {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .family-member-item .member-actions {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .family-member-item {
        transition: none;
    }

    .family-member-item:hover,
    .family-member-item:focus-within {
        transform: none;
    }

    .family-status-badge[data-birthday-corner-indicator="true"] {
        transition: none;
    }

    .family-status-badge[data-birthday-corner-indicator="true"].is-hidden {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 480px) {
    .family-member-item {
        padding: 0.82rem;
    }

    .family-member-badges {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .family-member-item > p {
        width: 100%;
        border-radius: var(--radius-md);
    }

    .family-grade-badge {
        font-size: 0.74rem;
        padding: 0.2rem 0.48rem;
        max-width: 100%;
    }

    .member-action-icon,
    .member-action-icon--button {
        width: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

@media (max-width: 360px) {
    .family-grade-badge {
        font-size: 0.7rem;
        padding: 0.18rem 0.44rem;
    }
}

.flashes {
    padding-top: 1.25rem;
}

.flash {
    padding: 1rem 1.1rem;
    border-radius: 16px;
    margin-bottom: 0.85rem;
    border: 1px solid var(--line);
}

html.js .flashes {
    display: none;
}

.flash-success {
    background: var(--success);
}

.flash-warning {
    background: var(--warning);
}

.flash-error {
    background: color-mix(in srgb, var(--brand-red) 20%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--brand-red) 40%, var(--line));
}

.role-preview-banner-wrap {
    margin-top: 0.75rem;
}

.role-preview-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--brand-orange) 44%, var(--line));
    border-left-width: 6px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand-orange) 12%, var(--bg-elevated));
}

.role-preview-banner p {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.role-preview-banner-form {
    margin: 0;
}

.role-preview-banner-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--brand-orange) 50%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    color: color-mix(in srgb, var(--brand-orange) 82%, #1d1d1d 18%);
    font: inherit;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.role-preview-banner-close:hover,
.role-preview-banner-close:focus-visible {
    background: color-mix(in srgb, var(--brand-orange) 22%, transparent);
    border-color: color-mix(in srgb, var(--brand-orange) 72%, var(--line));
    outline: none;
}

.split-heading,
.table-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

/* ── Icône bouton dojo-switcher (toolbar header) ─────────────────────────── */
.session-user-dojo-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent-soft) 65%, transparent);
    color: var(--accent-strong);
    flex-shrink: 0;
    font-size: 1rem;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.profile-menu-panel--dojo-switcher {
    min-width: 200px;
    max-width: 320px;
}

.profile-menu-dojo-slug {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--muted);
}

.section-heading.split-heading > :first-child {
    min-width: 0;
}

.section-heading.split-heading .admin-header-actions {
    margin-left: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* Uniformisation: boutons dans les en-têtes de section → taille 'small' par défaut pour la cohérence visuelle */
.section-heading .inline-actions .button {
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
}

.stacked-heading {
    display: block;
}

.dashboard-grid {
    grid-template-columns: 1.35fr 0.85fr;
}

.message-thread-layout {
    grid-template-columns: 1fr 1fr;
}

#message-thread-reply-form {
    width: 100%;
}

#message-thread-reply-form.compact-card {
    max-width: none;
}

#message-thread-reply-form .form-input {
    width: 100%;
}

.admin-message-thread-layout {
    grid-template-columns: 0.72fr 1.28fr;
}

.admin-message-thread-layout > .content-card:last-child {
    min-width: 0;
}

#admin-message-thread-reply-form {
    width: 100%;
}

#admin-message-thread-reply-form .form-input {
    width: 100%;
}

.spaced-top {
    margin-top: 1rem;
}

.spaced-top-sm {
    margin-top: 0.75rem;
}

/* Uniformisation admin: aligner les espacements de sections et d'actions sur la reference groupes. */
.is-admin .container.section > .content-card:first-of-type:not(.spaced-top):not(.spaced-top-sm),
.is-admin .container.section > .content-card + .content-card:not(.spaced-top):not(.spaced-top-sm) {
    margin-top: 1rem;
}

.is-admin .section-heading.split-heading > .inline-actions,
.is-admin .table-heading > .inline-actions {
    margin-top: 0;
    align-items: center;
    gap: 0.55rem;
}

.import-section-title {
    margin: 0.9rem 0 0.55rem 0;
}

.import-subsection-title {
    margin: 0 0 0.35rem 0;
}

.import-table-wrap-compact {
    margin-top: 0.6rem;
}

.import-stats-grid--compact {
    margin-top: 0.25rem;
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.is-admin .table-wrap {
    border: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent) 14%);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    padding: 0.95rem 0.75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.is-admin th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--bg-elevated-strong) 92%, var(--accent-soft) 8%);
    color: color-mix(in srgb, var(--text) 88%, var(--accent-strong) 12%);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.is-admin th.is-sortable-column {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.is-admin th.is-sortable-column:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-strong) 64%, white 36%);
    outline-offset: -2px;
}

.is-admin th.is-sortable-column .table-sort-indicator {
    margin-left: 0.38rem;
    font-size: 0.92rem;
    opacity: 0.52;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.is-admin th.is-sortable-column.is-sorted-asc .table-sort-indicator,
.is-admin th.is-sortable-column.is-sorted-desc .table-sort-indicator {
    opacity: 0.94;
}

.is-admin th.is-sortable-column.is-sorted-asc .table-sort-indicator {
    transform: rotate(180deg);
}

.is-admin tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--accent-soft) 20%, transparent);
}

.is-admin .table-wrap table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
}

.is-admin .family-payment-debug-table,
.is-admin .family-payment-debug-table * {
    -webkit-user-select: text;
    user-select: text;
}

.is-admin .family-payment-debug-table tbody tr.family-payment-debug-row--warning {
    background: color-mix(in srgb, #f59e0b 10%, var(--bg-elevated));
}

.is-admin .family-payment-debug-table tbody tr.family-payment-debug-row--danger {
    background: color-mix(in srgb, #b42318 10%, var(--bg-elevated));
}

.is-admin .family-payment-debug-table tbody tr.family-payment-debug-row--warning:hover,
.is-admin .family-payment-debug-table tbody tr.family-payment-debug-row--danger:hover {
    background: color-mix(in srgb, var(--accent-soft) 34%, var(--bg-elevated));
}

.is-admin .family-payment-debug-table td.family-payment-debug-cell--warning {
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    font-weight: 700;
}

.is-admin .family-payment-debug-table td.family-payment-debug-cell--danger {
    background: color-mix(in srgb, #b42318 13%, transparent);
    font-weight: 700;
}

.family-payment-debug-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.actions-cell,
td.actions {
    vertical-align: middle;
    white-space: nowrap;
    min-width: 6rem;
}

.actions-cell > *,
td.actions > *,
.is-admin td.actions > *,
.is-admin .actions-cell > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0;
}

.actions-cell > * + *,
td.actions > * + *,
.is-admin td.actions > * + *,
.is-admin .actions-cell > * + * {
    margin-left: 0.55rem;
}

.actions-cell .text-link,
.actions-cell .text-button,
td.actions .text-link,
td.actions .text-button,
.is-admin td.actions .text-link,
.is-admin .actions-cell .text-link,
.is-admin td.actions .text-button,
.is-admin .actions-cell .text-button {
    line-height: 1.4;
    vertical-align: middle;
}

.actions-cell .text-button,
td.actions .text-button,
.is-admin td.actions .text-button,
.is-admin .actions-cell .text-button {
    min-height: auto;
    padding: 0;
}

.actions-cell form,
td.actions form,
.is-admin td.actions form,
.is-admin .actions-cell form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.actions-cell .btn-icon,
td.actions .btn-icon {
    flex: 0 0 auto;
    vertical-align: middle;
}

.actions-inline--grouped {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.actions-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.actions-group > *,
.actions-group form {
    margin: 0;
}

.actions-divider {
    width: 1px;
    height: 1.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 76%, var(--text) 24%);
    opacity: 0.75;
    flex: 0 0 1px;
}

.family-payment-mobile-list {
    display: none;
}

.family-payment-mobile-card {
    border: 1px solid color-mix(in srgb, var(--line) 88%, var(--accent) 12%);
    border-radius: 14px;
    padding: 0.85rem;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    display: grid;
    gap: 0.55rem;
}

.family-payment-mobile-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
}

.family-payment-mobile-card__head .eyebrow {
    margin-bottom: 0.25rem;
}

.family-payment-mobile-card__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.family-payment-mobile-card__line > span {
    color: var(--muted);
    font-size: 0.86rem;
}

.family-payment-mobile-card__line--subtle > span:last-child {
    color: var(--text);
    font-size: 0.9rem;
}

.family-payment-mobile-card__discounts {
    display: grid;
    gap: 0.2rem;
}

.family-payment-mobile-card__discounts small {
    color: var(--muted);
}

.family-payment-mobile-card__actions {
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
    padding-top: 0.55rem;
}

.family-payment-mobile-card__actions .text-button {
    margin: 0;
}

.family-payment-total-row th,
.family-payment-total-row td {
    border-top: 2px solid color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
    background: color-mix(in srgb, var(--bg-elevated) 92%, var(--accent-soft) 8%);
    vertical-align: top;
}

.family-payment-total-row__label {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.family-payment-total-row__label .eyebrow,
.family-payment-total-row__label p {
    margin-bottom: 0.2rem;
}

.family-payment-mobile-card--total {
    border-width: 2px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--accent-soft) 12%);
}

.family-components-toggle-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-start;
}

.family-components-toggle-row .form-label {
    margin: 0;
}

.family-components-toggle-row .ui-toggle {
    margin-left: 0.15rem;
}

@media (max-width: 640px) {
    .family-payment-table-desktop {
        display: none;
    }

    .family-payment-mobile-list {
        display: grid;
        gap: 0.7rem;
    }

    .family-components-toggle-row {
        justify-content: flex-start;
        align-items: center;
    }

    .family-components-toggle-row .ui-toggle {
        margin-left: 0;
    }

    .helper-accordion summary {
        padding: 0.52rem 0.62rem;
        font-size: 0.95rem;
    }

    .helper-accordion__content {
        padding: 0.55rem 0.62rem 0.65rem;
        gap: 0.38rem;
    }

    .helper-accordion__content p {
        font-size: 0.88rem;
    }

    .family-payment-accordion-stack {
        gap: 0.5rem;
    }
}

.member-grade-history-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.member-grade-history-actions form {
    margin: 0;
}

.is-admin .admin-pricing-tree,
.is-admin .admin-session-tree {
    display: grid;
    gap: 0.7rem;
}

.is-admin .admin-pricing-node,
.is-admin .admin-session-node {
    border: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent) 14%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
}

.is-admin .admin-pricing-node--year,
.is-admin .admin-session-node--year {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}

.is-admin .admin-pricing-node--season,
.is-admin .admin-session-node--season {
    margin: 0.65rem;
}

.is-admin .admin-pricing-node--course {
    margin: 0.55rem;
}

.is-admin .admin-pricing-summary,
.is-admin .admin-session-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 44px;
    padding: 0.62rem 0.78rem;
    cursor: pointer;
    user-select: none;
    border-radius: 10px;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.is-admin .admin-pricing-summary::-webkit-details-marker,
.is-admin .admin-session-summary::-webkit-details-marker {
    display: none;
}

.is-admin .admin-pricing-summary::before,
.is-admin .admin-session-summary::before {
    content: "▸";
    margin-right: 0.55rem;
    color: var(--muted);
    transition: transform var(--transition-fast);
}

.is-admin details[open] > .admin-pricing-summary::before,
.is-admin details[open] > .admin-session-summary::before {
    transform: rotate(90deg);
}

.is-admin .admin-pricing-summary:hover,
.is-admin .admin-session-summary:hover {
    background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
}

.is-admin .admin-pricing-summary:focus-visible,
.is-admin .admin-session-summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 65%, var(--line));
    outline-offset: 2px;
}

.is-admin .admin-pricing-summary__title,
.is-admin .admin-session-summary__title {
    font-weight: 650;
    line-height: 1.35;
}

.is-admin .admin-pricing-summary__meta,
.is-admin .admin-session-summary__meta {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--muted);
    white-space: nowrap;
}

.is-admin .admin-pricing-summary--year,
.is-admin .admin-session-summary--year {
    padding: 0.72rem 0.9rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-soft) 36%, transparent);
}

.is-admin .admin-pricing-summary--year .admin-pricing-summary__title,
.is-admin .admin-session-summary--year .admin-session-summary__title {
    font-size: 1.02rem;
}

.is-admin .admin-pricing-summary--season,
.is-admin .admin-session-summary--season {
    background: color-mix(in srgb, var(--accent-soft) 20%, transparent);
}

.is-admin .admin-pricing-summary--course {
    background: color-mix(in srgb, var(--bg-elevated-strong) 88%, transparent);
}

.is-admin .admin-pricing-table-wrap {
    margin: 0.35rem 0.6rem 0.75rem;
}

.is-admin .admin-pricing-insights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.is-admin .admin-pricing-insights .badge {
    line-height: 1.2;
}

.is-admin .admin-pricing-toolbar {
    align-items: center;
}

.is-admin .admin-pricing-mobile-hint {
    margin-top: 0.4rem;
}

.is-admin .admin-pricing-cell-main {
    display: block;
    line-height: 1.25;
}

.is-admin .admin-pricing-cell-sub {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.79rem;
    color: var(--muted);
    line-height: 1.28;
}

.is-admin .admin-pricing-cell-sub .help-tooltip {
    margin-left: 0.35rem;
}

.is-admin .admin-pricing-empty {
    border: 1px dashed color-mix(in srgb, var(--line) 84%, var(--accent) 16%);
    border-radius: 12px;
    padding: 0.85rem 0.95rem;
    background: color-mix(in srgb, var(--accent-soft) 28%, transparent);
    display: grid;
    gap: 0.6rem;
}

.is-admin .admin-pricing-empty p {
    margin: 0;
}

.is-admin .admin-session-sortable-list {
    margin: 0;
    padding: 0 0.65rem 0.75rem;
}

.is-admin .admin-session-sortable-list .sortable-item {
    margin: 0;
}

.member-grade-history-table th:last-child,
.member-grade-history-table td:last-child {
    min-width: 12.5rem;
}

.member-grade-assignment-form {
    max-width: none;
}

.member-grade-assignment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1.15fr) auto;
    align-items: end;
    gap: 0.85rem;
}

.member-grade-inline-submit {
    align-items: flex-end;
    justify-content: flex-end;
    margin-top: 0;
}

.registration-list {
    display: grid;
    gap: 0.8rem;
}

.registration-list > * {
    min-width: 0;
}

.registration-item {
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    border: 1px solid var(--line);
}

.registration-item p,
.registration-item small,
.registration-item strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.registration-list--compact {
    gap: 0.55rem;
}

.family-member-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.family-member-list > p {
    grid-column: 1 / -1;
}

.registration-item--compact {
    padding: 0.72rem 0.82rem;
    display: grid;
    gap: 0.38rem;
}

.registration-item__meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.registration-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.registration-item__foot small {
    margin: 0;
    color: var(--muted);
}

.contact-cta-card {
    display: grid;
    gap: 1rem;
}

.contact-cta-card .form-card.compact-card {
    width: 100%;
    max-width: min(860px, 100%);
}

.message-thread {
    display: grid;
    gap: 0.9rem;
}

.message-bubble {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1rem 1.1rem;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
}

.message-bubble--admin {
    background: color-mix(in srgb, var(--brand-blue) 14%, var(--bg-elevated));
}

.message-bubble--member {
    background: color-mix(in srgb, var(--brand-cyan) 12%, var(--bg-elevated));
}

.message-bubble__meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
    color: var(--muted);
    font-size: 0.88rem;
}

.message-bubble p {
    margin: 0;
}

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

.empty-state p {
    margin: 0 0 2rem;
    color: var(--muted);
}

.empty-state-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.federation-members-subtitle {
    color: var(--text-secondary);
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.federation-members-saison-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--background-secondary);
    border-radius: var(--radius) var(--radius) 0 0;
}

.federation-members-saison-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    margin-right: 0.25rem;
}

.federation-members-saison-pills .badge {
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.federation-members-saison-pills .badge--active {
    background: var(--primary);
    color: #fff;
}

.federation-members-saison-pills .badge:not(.badge--active):hover {
    background: color-mix(in srgb, var(--primary) 15%, var(--surface));
}

.federation-members-filter-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.federation-members-range-fields {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.federation-members-range-fields .form-group {
    flex: 1;
    min-width: 160px;
}

.federation-members-range-sep {
    padding-bottom: 0.65rem;
    color: var(--text-secondary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.federation-members-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.federation-members-stat-card {
    padding: 1rem;
    background: var(--background-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.federation-members-stat-label {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.federation-members-stat-value {
    margin: 0.5rem 0 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
}

.admin-table tbody tr.is-new {
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    font-weight: 500;
}

/* Lien inline discret sur un nom dans un tableau ou une liste admin */
.link-name {
    color: var(--accent-strong);
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--accent-strong) 45%, transparent);
    transition: color 120ms ease, border-color 120ms ease;
}
.link-name:hover,
.link-name:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
    outline: none;
}

.federation-members-col-address {
    max-width: 200px;
}

.federation-members-cell-center {
    text-align: center;
}

.federation-members-cell-address {
    font-size: 0.9rem;
    max-width: 200px;
    overflow-wrap: anywhere;
}

.federation-members-cell-email {
    font-size: 0.9rem;
}

.federation-members-cell-email a {
    overflow-wrap: anywhere;
}

.federation-members-empty-state {
    padding: 3rem;
    text-align: center;
}

.federation-members-empty-text {
    color: var(--text-secondary);
    margin: 0;
}

.federation-members-results-toolbar {
    display: flex;
    justify-content: flex-end;
}

#federation-members-results {
    transition: opacity 0.15s;
}

#federation-members-results.federation-members-loading {
    opacity: 0.4;
    pointer-events: none;
}

.text-center {
    text-align: center;
}

.registrations-page .period-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.messaging-page .section-heading {
    gap: 0.7rem;
}

.messaging-page .section-heading h1,
.messaging-page .section-heading p,
.messaging-page .table-heading h2,
.messaging-page .table-heading p {
    margin: 0;
}

.messaging-page .inline-actions {
    gap: 0.45rem;
}

.messaging-page .spaced-top {
    margin-top: 0.65rem;
}

.messaging-page .content-card {
    border-radius: 22px;
    padding: 0.95rem 1rem;
}

.messaging-page .content-card .content-card {
    border-radius: 16px;
    padding: 0.72rem 0.8rem;
}

.messaging-page .form-card {
    border-radius: 16px;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
}

.messaging-page .inner-form-card {
    border-radius: 14px;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
}

.messaging-page .conversations-list {
    gap: 0.65rem;
}

.messaging-page .conversation-item {
    border-radius: 16px;
    padding: 0.95rem;
}

.messaging-page .conversation-title {
    gap: 0.5rem;
}

.messaging-page .conversation-meta {
    margin-top: 0.2rem;
}

.messaging-page .message-thread {
    gap: 0.65rem;
}

.messaging-page .message-bubble {
    border-radius: 14px;
    padding: 0.72rem 0.82rem;
}

.messaging-page .message-bubble__meta {
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.messaging-page .message-recipient-list {
    margin-top: 0.3rem;
}

.messaging-page .message-recipient-list li + li {
    margin-top: 0.2rem;
}

.messaging-page .message-recipient-item {
    gap: 0.45rem;
}

.messaging-page .message-contact-card {
    gap: 0.45rem;
}

.messaging-page .recipient-picker {
    gap: 0.45rem;
}

.messaging-page .recipient-picker__add-row {
    gap: 0.45rem;
}

.messaging-page .recipient-picker__list {
    gap: 0.35rem;
}

.messaging-page .recipient-picker__item {
    border-radius: 10px;
    gap: 0.5rem;
    padding: 0.36rem 0.5rem;
}

.messaging-page .table-wrap th,
.messaging-page .table-wrap td {
    padding: 0.72rem 0.55rem;
}

.registrations-page .period-label {
    text-align: center;
    font-weight: 700;
    flex: 1;
    min-width: 200px;
}

.registrations-page .registrations-list,
.conversations-page .conversations-list,
.print-layout .print-registrations {
    display: grid;
    gap: 1rem;
}

.registrations-page .registration-item,
.conversations-page .conversation-item,
.print-layout .print-registration {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.registrations-page .registration-item--canceled {
    opacity: 0.72;
}

.registrations-page .registration-header,
.conversations-page .conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.registrations-page .registration-header {
    margin-bottom: 1rem;
}

.registrations-page .registration-header h3,
.print-layout .print-registration h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.conversations-page .conversation-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.conversations-page .conversation-title strong {
    font-size: 1rem;
}

.conversations-page .conversation-title .badge {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.76rem;
}

.registrations-page .registration-meta,
.registrations-page .registration-schedule,
.registrations-page .registration-member,
.conversations-page .conversation-meta,
.conversations-page .conversation-footer small,
.print-layout .no-registrations,
.print-layout .print-footer {
    color: var(--muted);
}

.conversations-page .conversation-meta {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

.registrations-page .registration-meta,
.registrations-page .registration-schedule,
.registrations-page .registration-member {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.registrations-page .registration-status {
    flex-shrink: 0;
}

.registrations-page .registration-status .badge {
    align-self: flex-start;
}

.registrations-page .registration-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.registrations-page .registration-actions form {
    margin: 0;
}

.registrations-page .text-center {
    padding: 2rem 0;
}

.registrations-page > .content-card:first-of-type:not(.spaced-top):not(.spaced-top-sm),
.registrations-page > .content-card + .content-card:not(.spaced-top):not(.spaced-top-sm) {
    margin-top: 0.95rem;
}

.registration-payment-page .content-card + .content-card {
    margin-top: 1.1rem;
}

.registration-payment-page .payment-summary-block {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.registration-payment-page .payment-summary-block .table-heading h3 {
    margin: 0;
}

.registration-payment-page .payment-method-card-grid {
    display: grid;
    gap: 0.85rem;
}

.registration-payment-page .payment-method-card {
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: var(--radius-md);
    padding: 1rem;
    background: color-mix(in srgb, var(--bg-elevated) 95%, transparent);
    display: grid;
    gap: 0.75rem;
}

.registration-payment-page .payment-method-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.registration-payment-page .payment-method-card__head h3 {
    margin: 0.15rem 0 0;
}

.registration-payment-page .payment-method-card .inline-actions {
    margin-top: 0.15rem;
}

.registration-payment-page .payment-history-note {
    margin-bottom: 0.9rem;
}

.catalog-page .catalog-search-toolbar {
    display: grid;
    grid-template-columns: minmax(300px, 620px) auto;
    gap: 0.9rem 1rem;
    align-items: end;
}

.catalog-page .catalog-header-actions {
    align-items: stretch;
    justify-content: flex-end;
}

.catalog-page .catalog-header-actions .button:not(.catalog-order-button) {
    min-height: 3.2rem;
}

.catalog-page .catalog-order-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.6rem;
    min-height: 3.2rem;
    padding: 0.8rem 1rem;
}

.catalog-page .catalog-order-button i {
    font-size: clamp(1.45rem, 2vw, 1.8rem);
    line-height: 1;
}

.catalog-page .catalog-order-button__badge {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #ef476f 0%, #d62852 62%, #b41f43 100%);
    color: #fff;
    border: 2px solid color-mix(in srgb, var(--surface) 72%, var(--brand-blue) 28%);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 10px 20px rgba(17, 34, 68, 0.26);
}

.catalog-page .catalog-search-toolbar__field {
    min-width: 0;
}

.catalog-page .catalog-search-toolbar__meta {
    margin-top: 0;
    justify-content: flex-start;
    align-self: end;
}

.catalog-page .catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 420px));
    justify-content: flex-start;
    align-items: stretch;
    gap: 1rem;
}

.catalog-page .catalog-item-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.catalog-page .catalog-item-top {
    flex: 1;
}

.catalog-page .catalog-item-meta {
    justify-content: flex-start;
    align-items: center;
    row-gap: 0.45rem;
    margin-top: 0.75rem;
}

.catalog-page .catalog-item-purchase {
    margin-top: auto;
    padding-top: 1rem;
}

.catalog-page .catalog-item-meta .admin-stat-pill--alert {
    flex: 0 1 auto;
}

.catalog-page .catalog-item-media {
    margin: -1rem -1rem 0.9rem;
    border-radius: 0.95rem 0.95rem 0.75rem 0.75rem;
    overflow: hidden;
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(145deg, rgba(12, 105, 196, 0.12), rgba(8, 30, 59, 0.24));
}

.catalog-fly-item {
    position: fixed;
    margin: 0;
    pointer-events: none;
    overflow: hidden;
    max-width: none;
    z-index: 1200;
    transform-origin: center center;
    will-change: transform, opacity, filter, border-radius;
    box-shadow: 0 20px 36px rgba(8, 30, 59, 0.18);
}

.catalog-fly-item.catalog-item-card {
    border: 1px solid color-mix(in srgb, var(--border) 75%, var(--surface) 25%);
}

.catalog-fly-item img,
.catalog-fly-item .catalog-item-media__placeholder {
    width: 100%;
    height: 100%;
}

.catalog-page .catalog-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.catalog-page .catalog-item-card:hover .catalog-item-media img,
.catalog-page .catalog-item-card:focus-within .catalog-item-media img {
    transform: scale(1.03);
}

.catalog-page .catalog-item-media__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    gap: 0.45rem;
    color: rgba(5, 23, 45, 0.8);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    padding: 0.75rem;
}

.catalog-page .catalog-item-media__placeholder i {
    font-size: 2.15rem;
    opacity: 0.72;
}

.catalog-page .catalog-item-purchase-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 0.8rem;
    align-items: end;
}

.catalog-page .catalog-item-purchase-cta {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.catalog-page .catalog-item-purchase-cta .button {
    flex: 1 1 180px;
    min-height: 44px;
    justify-content: center;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .catalog-page .catalog-header-actions {
        width: 100%;
    }

    .catalog-page .catalog-search-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .catalog-page .catalog-search-toolbar__meta {
        justify-content: flex-start;
    }

    .catalog-page .catalog-grid {
        grid-template-columns: 1fr;
    }

    .catalog-page .catalog-item-card {
        max-width: none;
    }

    .catalog-page .catalog-item-media {
        margin: -1rem -1rem 0.8rem;
    }

    .catalog-page .catalog-item-purchase-row {
        grid-template-columns: 1fr;
    }

    .catalog-page .catalog-item-purchase-cta {
        flex-direction: column;
    }

    .catalog-page .catalog-item-purchase-cta .button {
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .catalog-page .catalog-header-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: stretch;
        gap: 0.55rem;
    }

    .catalog-page .catalog-header-actions .button {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .catalog-page .catalog-header-actions {
        grid-template-columns: 1fr;
    }

    .catalog-page .catalog-header-actions .button,
    .catalog-page .catalog-header-actions .catalog-order-button {
        width: 100%;
        min-width: 0;
    }

    .catalog-page .catalog-item-purchase-cta .button {
        min-height: 46px;
        padding: 0.68rem 0.9rem;
        white-space: normal;
        line-height: 1.25;
    }
}

@media (max-width: 360px) {
    .catalog-page .catalog-item-purchase-cta .button {
        min-height: 44px;
        padding: 0.62rem 0.8rem;
        font-size: 0.95rem;
    }
}

@media (min-width: 600px) and (max-width: 960px) {
    .catalog-page .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.registrations-page .registration-state-timeline {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.registrations-page .registration-state-step {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
    display: grid;
    gap: 0.45rem;
}

.registrations-page .registration-state-step.is-done {
    border-color: color-mix(in srgb, #2f7d4f 32%, var(--line));
}

.registrations-page .registration-state-step.is-current {
    border-color: color-mix(in srgb, #0a6ebd 38%, var(--line));
    background: color-mix(in srgb, var(--surface) 88%, #dbeeff);
}

.registrations-page .registration-state-step__index {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    border: 1px solid var(--line);
}

.registrations-page .registration-state-step.is-done .registration-state-step__index {
    color: color-mix(in srgb, #2f7d4f 80%, var(--text));
    border-color: color-mix(in srgb, #2f7d4f 45%, var(--line));
}

.registrations-page .registration-state-step.is-current .registration-state-step__index {
    color: color-mix(in srgb, #0a6ebd 84%, var(--text));
    border-color: color-mix(in srgb, #0a6ebd 45%, var(--line));
}

.registrations-page .registration-state-step__title {
    margin: 0;
    font-weight: 700;
}

.registrations-page .registration-state-step__desc {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.registrations-page .registration-reminder-card {
    border-left: 4px solid color-mix(in srgb, #0a6ebd 55%, var(--line));
}

.conversations-page .conversation-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
}

.conversations-page .text-link {
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.schedule-page .schedule-summary-card {
    margin-top: 1rem;
}

.schedule-page .schedule-summary-card .schedule-summary-item h2 {
    margin: 0;
}

.pricing-page .pricing-year-stack,
.pricing-page .pricing-season-stack,
.pricing-page .pricing-group-stack,
.schedule-page .pricing-year-stack,
.schedule-page .pricing-season-stack,
.schedule-page .pricing-group-stack {
    display: grid;
    gap: 1rem;
}

.details-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.details-bulk-actions .button {
    min-height: 44px;
}

.pricing-page .pricing-year-card {
    border: 1px solid var(--line);
}

.pricing-page .pricing-season-card,
.pricing-page .pricing-group-card {
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
}

.pricing-page .pricing-season-card {
    border-radius: 14px;
    padding: 0.9rem;
}

.pricing-page .pricing-season-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.pricing-page .pricing-season-summary::-webkit-details-marker {
    display: none;
}

.pricing-page .pricing-season-title {
    font-size: clamp(1.08rem, 1.8vw, 1.22rem);
    margin: 0;
}

.pricing-page .pricing-season-chevron {
    flex-shrink: 0;
    color: var(--muted);
    transition: transform var(--transition-fast);
}

.pricing-page details[open] .pricing-season-chevron {
    transform: rotate(180deg);
}

.pricing-page .pricing-group-stack {
    margin-top: 0.75rem;
}

.pricing-page .pricing-list,
.schedule-page .pricing-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.pricing-page .pricing-list-item,
.schedule-page .pricing-list-item {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}

.pricing-page .pricing-list-item-empty,
.schedule-page .pricing-list-item-empty {
    opacity: 0.9;
}

.pricing-page .pricing-line-main,
.pricing-page .pricing-line-meta,
.schedule-page .pricing-line-main,
.schedule-page .pricing-line-meta {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.pricing-page .pricing-line-main,
.schedule-page .pricing-line-main {
    font-size: 0.95rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pricing-page .pricing-course,
.pricing-page .pricing-amount,
.schedule-page .pricing-course,
.schedule-page .pricing-amount {
    font-weight: 700;
}

.pricing-page .pricing-title-row,
.schedule-page .pricing-title-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.pricing-page .pricing-age-chip,
.schedule-page .pricing-age-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
    color: var(--accent-strong);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.24rem 0.56rem;
}

.pricing-page .pricing-dot,
.schedule-page .pricing-dot {
    color: var(--muted);
}

.schedule-page .pricing-course-count {
    white-space: nowrap;
    color: var(--muted);
    font-weight: 700;
}

.pricing-page .pricing-line-meta,
.schedule-page .pricing-line-meta {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.2;
    flex-wrap: wrap;
    white-space: normal;
}

.pricing-page .pricing-line-meta span:not(.pricing-meta-chip):not(:first-child)::before,
.schedule-page .pricing-line-meta span:not(.pricing-meta-chip):not(:first-child)::before {
    content: "•";
    margin-right: 0.35rem;
    color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.pricing-page .pricing-line-meta-slots,
.schedule-page .pricing-line-meta-slots {
    margin-top: 0.35rem;
}

.pricing-page .pricing-meta-chip,
.schedule-page .pricing-meta-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.22rem 0.55rem;
}

.pricing-page .pricing-detail-text,
.schedule-page .pricing-detail-text {
    display: inline-block;
    max-width: 38ch;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

@media (hover: hover) and (pointer: fine) {
    .pricing-page .pricing-detail-text {
        position: relative;
        cursor: help;
    }

    .schedule-page .pricing-detail-text {
        position: relative;
        cursor: help;
    }

    .pricing-page .pricing-detail-text:hover::after,
    .schedule-page .pricing-detail-text:hover::after {
        content: attr(data-full);
        position: absolute;
        left: 0;
        bottom: calc(100% + 0.45rem);
        max-width: min(70ch, 80vw);
        padding: 0.55rem 0.65rem;
        border-radius: 8px;
        border: 1px solid var(--line);
        background: color-mix(in srgb, var(--bg-elevated-strong) 94%, black 6%);
        color: var(--text);
        white-space: normal;
        line-height: 1.3;
        box-shadow: var(--shadow-soft);
        z-index: 12;
    }
}

.schedule-page .schedule-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.schedule-page .schedule-summary-item {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    background: color-mix(in srgb, var(--accent-soft) 28%, transparent);
}

.schedule-page .schedule-summary-item .eyebrow {
    margin-bottom: 0.45rem;
}

.schedule-page .schedule-summary-item h2 {
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
}

.schedule-page .schedule-group-stack {
    display: grid;
    gap: 1rem;
}

.schedule-page .schedule-year-card {
    display: grid;
    gap: 1rem;
}

.schedule-page .schedule-year-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.schedule-page .schedule-year-head h2 {
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}

.schedule-page .schedule-season-stack {
    display: grid;
    gap: 0.9rem;
}

.schedule-page .schedule-season-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.9rem;
    background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
}

.schedule-page .schedule-season-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.schedule-page .schedule-season-summary::-webkit-details-marker {
    display: none;
}

.schedule-page .schedule-season-title {
    font-size: clamp(1.08rem, 1.8vw, 1.22rem);
    margin: 0;
}

.schedule-page .season-chevron {
    flex-shrink: 0;
    color: var(--muted);
    transition: transform var(--transition-fast);
}

.schedule-page details[open] .season-chevron {
    transform: rotate(180deg);
}

.schedule-page .schedule-season-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-top: 0.75rem;
}

@media (min-width: 961px) {
    .schedule-page .schedule-season-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.schedule-page .schedule-group-card {
    display: grid;
    gap: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
}

.schedule-page .schedule-group-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
}

.schedule-page .schedule-group-head h2 {
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
}

.schedule-page .schedule-group-head h4 {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    margin: 0;
}

.schedule-page .schedule-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.schedule-page .schedule-course-swatch {
    display: inline-block;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg) 90%, transparent);
    flex: 0 0 auto;
}

.schedule-page .schedule-age-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
    color: var(--accent-strong);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.42rem 0.8rem;
}

.schedule-page .schedule-meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.schedule-page .schedule-meta-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    padding: 0.33rem 0.68rem;
    font-size: 0.86rem;
    color: var(--muted);
}

@media (min-width: 1400px) {
    .schedule-page .schedule-group-head > div {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        flex-wrap: wrap;
    }

    .schedule-page .schedule-group-head > div .schedule-meta-list {
        margin: 0;
    }

    .schedule-page .schedule-group-head > div .schedule-meta-chip {
        white-space: nowrap;
    }
}

.schedule-page .schedule-slots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.schedule-page .schedule-slot-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
}

.schedule-page .schedule-slot-main {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
}

.schedule-page .schedule-slot-main strong {
    font-size: 0.98rem;
}

.schedule-page .schedule-slot-main span,
.schedule-page .schedule-slot-sub {
    color: var(--muted);
    font-size: 0.92rem;
}

.schedule-page .schedule-slot-sub {
    margin: 0.35rem 0 0;
}

.schedule-page .schedule-slot-note {
    margin: 0.45rem 0 0;
    padding-top: 0.45rem;
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    color: var(--text);
    font-size: 0.92rem;
}

.schedule-page .schedule-empty {
    margin: 0;
    color: var(--muted);
}

.schedule-page .schedule-pricing-section {
    display: grid;
    gap: 0.45rem;
}

.schedule-page .schedule-pricing-section .eyebrow {
    margin: 0;
}

.schedule-page .schedule-pricing-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.schedule-page .schedule-pricing-more {
    margin-top: 0.45rem;
}

.schedule-page .schedule-pricing-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    cursor: pointer;
    color: var(--accent-strong);
    font-weight: 700;
    list-style: none;
}

.schedule-page .schedule-pricing-more-toggle::-webkit-details-marker {
    display: none;
}

.schedule-page .schedule-pricing-more-toggle::before {
    content: "+";
    font-size: 1.05rem;
    line-height: 1;
}

.schedule-page .schedule-pricing-more[open] .schedule-pricing-more-toggle::before {
    content: "-";
}

.schedule-page .pricing-list-overflow {
    margin-top: 0.35rem;
}

.schedule-page .schedule-group-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.schedule-page .schedule-group-actions .button {
    min-height: 44px;
}

.pricing-page .pricing-line-meta-actions,
.schedule-page .pricing-line-meta-actions {
    margin-top: 0.2rem;
}

.pricing-page .pricing-discipline-link,
.schedule-page .pricing-discipline-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
}

.pricing-page .pricing-discipline-link::after,
.schedule-page .pricing-discipline-link::after {
    content: ">";
    font-weight: 800;
    line-height: 1;
}

@media screen {
    .print-layout {
        background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
        color: var(--text);
    }
}

.print-layout .print-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--line);
}

.print-layout .print-header h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.6rem, 2.8vw, 2.1rem);
}

.print-layout .print-info {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: 0.92rem;
}

.print-layout .print-info p {
    margin: 0.5rem 0;
}

.print-layout .print-registrations {
    margin: 2rem 0;
    gap: 1.5rem;
}

.print-layout .print-registration h3 {
    color: var(--accent-strong);
}

.print-layout .print-details {
    display: grid;
    gap: 0.75rem;
}

.print-layout .detail-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.92rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
}

.print-layout .detail-row:last-child {
    border-bottom: none;
}

.print-layout .detail-row .label {
    font-weight: 700;
    min-width: 120px;
}

.print-layout .detail-row .value {
    flex: 1;
    text-align: right;
}

.print-layout .no-registrations {
    text-align: center;
    padding: 2rem;
    font-style: italic;
}

.print-layout .print-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 0.8rem;
}

@media print {
    body {
        margin: 0;
        padding: 0;
        background: #ffffff;
        color: #000000;
    }

    .print-layout.container {
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    .print-layout {
        page-break-inside: avoid;
        background: #ffffff;
        color: #000000;
        box-shadow: none;
    }

    .print-layout .print-registration {
        page-break-inside: avoid;
        background: #ffffff;
        border-color: rgba(0, 0, 0, 0.24);
    }

    .print-layout .no-screen {
        display: block;
    }
}

.message-recipient-list {
    margin: 0.5rem 0 0;
    padding-left: 1rem;
}

.message-recipient-list li + li {
    margin-top: 0.35rem;
}

.message-contact-card {
    gap: 0.6rem;
}

.message-contact-details {
    display: grid;
    gap: 0.35rem;
}

.message-contact-line,
.message-contact-recipients-title {
    margin: 0;
}

.message-recipient-list--compact {
    margin-top: 0.15rem;
}

.message-recipient-list--compact li + li {
    margin-top: 0.2rem;
}

.message-recipient-item {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}

.message-recipient-list--actions {
    padding-left: 0;
}

.message-recipient-item__meta {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.message-recipient-item__meta small {
    color: var(--muted);
}

.message-recipient-item__action {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.message-recipient-item__action .btn-icon {
    flex-shrink: 0;
}

.recipient-picker {
    display: grid;
    gap: 0.6rem;
}

.recipient-picker__add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: end;
}

.recipient-picker__source-wrap {
    min-width: 0;
}

.recipient-picker__add-btn {
    min-height: 44px;
}

.recipient-picker__hidden-field {
    display: none;
}

.recipient-picker__selected-label {
    margin: 0;
}

.recipient-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.recipient-picker__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}

.recipient-picker__item-label {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.recipient-picker__remove {
    white-space: nowrap;
}

.recipient-picker__empty {
    margin: 0;
}

@media (max-width: 640px) {
    .recipient-picker__add-row {
        grid-template-columns: 1fr;
    }

    .recipient-picker__add-btn {
        width: 100%;
    }
}

.sortable-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.sortable-list > li,
.message-recipient-list > li,
.admin-favorites-list > li {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sortable-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
}

.sortable-item-main {
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.sortable-item-main p {
    margin: 0.35rem 0 0;
    color: var(--muted);
}

.faq-sortable-item .sortable-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

.faq-sortable-item .sortable-item-main > div {
    min-width: 0;
}

.faq-sortable-item .sortable-item-main strong,
.faq-sortable-item .sortable-item-main p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.faq-sortable-item__actions {
    flex: 0 0 auto;
    margin-top: 0;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.55rem;
}

.faq-sortable-item__actions form {
    margin: 0;
    display: inline-flex;
}

.faq-sortable-item__actions .button.small {
    white-space: nowrap;
}

/* Centrage vertical des btn-icon dans les items de liste triables */
.sortable-item > .inline-actions {
    margin-top: 0;
    align-items: center;
    flex-wrap: nowrap;
}

.sortable-item > .inline-actions form {
    margin: 0;
    display: inline-flex;
}

.drag-handle {
    font-weight: 800;
    color: color-mix(in srgb, var(--accent) 60%, var(--muted));
    cursor: grab;
    padding: 0.15rem 0.38rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-soft) 54%, transparent);
    user-select: none;
    letter-spacing: 0.04em;
    position: relative;
}

.drag-handle[data-tooltip]:hover::after,
.drag-handle[data-tooltip]:focus-visible::after,
.section-drag-handle[data-tooltip]:hover::after,
.section-drag-handle[data-tooltip]:focus-visible::after,
.photo-handle[data-tooltip]:hover::after,
.photo-handle[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0.28rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    color: var(--text);
    font-size: 0.75rem;
    z-index: 4;
}

@media (max-width: 720px) {
    .admin-quick-nav {
        position: static;
        top: auto;
        padding: 0.85rem;
    }

    .admin-quick-nav .button.small {
        flex: 1 1 calc(50% - 0.35rem);
        min-height: 2.45rem;
        padding: 0.6rem 0.8rem;
    }

    .admin-quick-nav__status {
        margin-left: 0;
    }

    .admin-quick-nav--linked {
        position: relative;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding: 0.75rem 0.85rem 0.9rem;
    }

    .admin-quick-nav--linked .button.small {
        flex: 0 0 auto;
        min-width: max-content;
        scroll-snap-align: start;
    }

    .admin-quick-nav--linked::before {
        content: "›";
        position: sticky;
        right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 2.2rem;
        margin-left: -2.2rem;
        align-self: stretch;
        font-size: 1.15rem;
        font-weight: 700;
        color: color-mix(in srgb, var(--text) 44%, transparent);
        z-index: 1;
        pointer-events: none;
    }

    .admin-quick-nav--linked::after {
        content: "";
        position: sticky;
        right: 0;
        display: block;
        flex: 0 0 auto;
        width: 3.8rem;
        margin-left: -3.8rem;
        align-self: stretch;
        background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--bg-elevated) 72%, transparent) 38%, var(--bg-elevated) 100%);
        pointer-events: none;
    }

    .site-preview-strip {
        grid-template-columns: 1fr;
    }

    .section-panel-heading,
    .site-customization-page .sortable-item,
    .site-customization-page .section-preview-card {
        align-items: stretch;
    }

    .site-customization-page .sortable-item,
    .site-customization-page .section-preview-card {
        flex-direction: column;
    }

    .compact-actions,
    .site-customization-page .sortable-item .inline-actions,
    .site-customization-page .section-preview-card .inline-actions {
        justify-content: flex-start;
    }

    .site-customization-page .section-preview-card .inline-actions .button.small {
        min-height: 2.35rem;
    }

    .drag-handle[data-tooltip]:hover::after,
    .drag-handle[data-tooltip]:focus-visible::after,
    .section-drag-handle[data-tooltip]:hover::after,
    .section-drag-handle[data-tooltip]:focus-visible::after,
    .photo-handle[data-tooltip]:hover::after,
    .photo-handle[data-tooltip]:focus-visible::after {
        top: calc(100% + 6px);
        padding: 0.22rem 0.42rem;
        font-size: 0.7rem;
    }
}

@media (max-width: 960px) {
    .session-form-page .section-heading.split-heading > .inline-actions {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .session-form-page .section-heading.split-heading > .inline-actions .button {
        width: 100%;
        justify-content: center;
    }

    .session-form-page .schedule-editor-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }

    .session-form-page .schedule-editor-row__info,
    .session-form-page .schedule-editor-row__actions {
        width: 100%;
    }

    .session-form-page .schedule-editor-row__actions {
        justify-content: flex-start;
    }

    .session-form-page .schedules-editor__add-field--location,
    .session-form-page .schedules-editor__add-field--note {
        min-width: 0;
    }

    .session-form-page #courses-no-group-list {
        display: grid;
        gap: 0.35rem;
    }

    .session-form-page #courses-no-group-list .text-button {
        min-height: 44px;
        justify-content: flex-start;
        text-align: left;
    }

    /* Unified mobile behavior for admin list tables: keep overflow inside table-wrap. */
    .is-admin .content-card .table-wrap:not(.registrations-table-wrap),
    .is-admin .form-card .table-wrap:not(.registrations-table-wrap) {
        inline-size: 100%;
        max-inline-size: 100%;
        min-inline-size: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .is-admin .content-card .table-wrap:not(.registrations-table-wrap) table,
    .is-admin .form-card .table-wrap:not(.registrations-table-wrap) table {
        inline-size: max-content;
        min-inline-size: 100%;
    }

    .is-admin .content-card .table-wrap:not(.registrations-table-wrap) th,
    .is-admin .content-card .table-wrap:not(.registrations-table-wrap) td,
    .is-admin .form-card .table-wrap:not(.registrations-table-wrap) th,
    .is-admin .form-card .table-wrap:not(.registrations-table-wrap) td {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .is-admin .content-card details,
    .is-admin .content-card details > * {
        min-width: 0;
    }

    .is-admin .admin-pricing-list,
    .is-admin .admin-pricing-list .admin-pricing-tree,
    .is-admin .admin-pricing-list .admin-pricing-node,
    .is-admin .admin-pricing-list .admin-pricing-node--year,
    .is-admin .admin-pricing-list .admin-pricing-node--season,
    .is-admin .admin-pricing-list .admin-pricing-node--course {
        min-width: 0;
        max-width: 100%;
    }

    .is-admin .admin-pricing-node--season,
    .is-admin .admin-session-node--season {
        margin: 0.45rem;
    }

    /* Prevent long admin list content from widening the viewport on mobile/tablet. */
    .is-admin .content-card,
    .is-admin .form-card {
        min-width: 0;
    }

    .is-admin .content-card p,
    .is-admin .content-card li,
    .is-admin .content-card .helper-text,
    .is-admin .content-card .form-hint,
    .is-admin .content-card .text-button,
    .is-admin .form-card p,
    .is-admin .form-card li,
    .is-admin .form-card .helper-text,
    .is-admin .form-card .form-hint,
    .is-admin .form-card .text-button {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .is-admin .content-card .badge,
    .is-admin .form-card .badge {
        max-width: 100%;
        white-space: normal;
        line-height: 1.22;
        text-align: left;
    }

    .session-copy-summary-grid {
        grid-template-columns: 1fr;
    }

    .session-copy-summary-card {
        padding: 0.9rem 0.95rem;
    }

    .session-copy-summary-card--wide {
        grid-column: auto;
    }

    .is-admin .content-card .inline-actions.compact-actions,
    .is-admin .form-card .inline-actions.compact-actions {
        align-items: flex-start;
    }

    .is-admin .content-card .inline-actions.compact-actions > *,
    .is-admin .form-card .inline-actions.compact-actions > * {
        min-width: 0;
        max-width: 100%;
    }

    .is-admin .section-heading.split-heading > .inline-actions {
        width: 100%;
        justify-content: flex-start;
    }

    /* Empêche les champs de formulaire admin de forcer un débordement horizontal. */
    .is-admin .content-card .form-grid > *,
    .is-admin .form-card .form-grid > * {
        min-width: 0;
    }

    .is-admin .content-card form,
    .is-admin .form-card form,
    .is-admin .content-card .form-grid,
    .is-admin .form-card .form-grid,
    .is-admin .content-card .form-grid > *,
    .is-admin .form-card .form-grid > * {
        max-width: 100%;
    }

    .is-admin .content-card .form-input,
    .is-admin .form-card .form-input,
    .is-admin .content-card .custom-select,
    .is-admin .form-card .custom-select {
        min-width: 0;
        max-width: 100%;
        inline-size: 100%;
    }

    .is-admin .content-card select.form-input:not([multiple]),
    .is-admin .form-card select.form-input:not([multiple]) {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .is-admin .admin-pricing-node--course {
        margin: 0.42rem;
    }

    .is-admin .admin-pricing-summary,
    .is-admin .admin-session-summary {
        padding: 0.58rem 0.66rem;
    }

    .is-admin .admin-pricing-summary__meta,
    .is-admin .admin-session-summary__meta {
        font-size: 0.78rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .is-admin .admin-pricing-table-wrap {
        inline-size: 100%;
        max-inline-size: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        margin: 0.3rem 0.4rem 0.55rem;
    }

    .is-admin .admin-pricing-list .table-wrap table {
        table-layout: auto;
        inline-size: 100%;
        min-inline-size: 1120px;
    }

    .is-admin .admin-pricing-list .table-wrap th:nth-child(1),
    .is-admin .admin-pricing-list .table-wrap td:nth-child(1) {
        min-width: 6.5rem;
    }

    .is-admin .admin-pricing-list .table-wrap th:nth-child(2),
    .is-admin .admin-pricing-list .table-wrap td:nth-child(2) {
        min-width: 8rem;
    }

    .is-admin .admin-pricing-list .table-wrap th:nth-child(3),
    .is-admin .admin-pricing-list .table-wrap td:nth-child(3) {
        min-width: 18rem;
    }

    .is-admin .admin-pricing-list .table-wrap th:nth-child(4),
    .is-admin .admin-pricing-list .table-wrap td:nth-child(4) {
        min-width: 10.5rem;
    }

    .is-admin .admin-pricing-list .table-wrap th:nth-child(5),
    .is-admin .admin-pricing-list .table-wrap td:nth-child(5),
    .is-admin .admin-pricing-list .table-wrap th:nth-child(6),
    .is-admin .admin-pricing-list .table-wrap td:nth-child(6),
    .is-admin .admin-pricing-list .table-wrap th:nth-child(7),
    .is-admin .admin-pricing-list .table-wrap td:nth-child(7),
    .is-admin .admin-pricing-list .table-wrap th:nth-child(8),
    .is-admin .admin-pricing-list .table-wrap td:nth-child(8),
    .is-admin .admin-pricing-list .table-wrap th:nth-child(9),
    .is-admin .admin-pricing-list .table-wrap td:nth-child(9),
    .is-admin .admin-pricing-list .table-wrap th:nth-child(10),
    .is-admin .admin-pricing-list .table-wrap td:nth-child(10) {
        min-width: 8rem;
    }

    .is-admin .admin-pricing-list .table-wrap th,
    .is-admin .admin-pricing-list .table-wrap td {
        white-space: nowrap;
        line-height: 1.22;
    }

    .is-admin .admin-pricing-list .table-wrap th:nth-child(3),
    .is-admin .admin-pricing-list .table-wrap td:nth-child(3),
    .is-admin .admin-pricing-list .table-wrap th:nth-child(9),
    .is-admin .admin-pricing-list .table-wrap td:nth-child(9) {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .is-admin .admin-session-sortable-list {
        padding: 0 0.45rem 0.55rem;
    }

    /* Keep key admin pages dense but readable after enabling wrapping guards. */
    .is-admin .admin-pricing-list .inline-actions,
    .is-admin .admin-session-list .inline-actions,
    .is-admin .finance-page .inline-actions,
    .is-admin .registrations-table-wrap ~ .table-heading .inline-actions {
        gap: 0.4rem;
    }

    .is-admin .admin-pricing-insights {
        margin-top: 0.5rem;
    }

    .is-admin .admin-pricing-toolbar {
        justify-content: flex-start;
    }

    .is-admin .admin-pricing-mobile-hint {
        margin-top: 0.3rem;
    }

    .is-admin .admin-pricing-list .badge,
    .is-admin .admin-session-list .badge,
    .is-admin .finance-page .badge,
    .is-admin .registrations-table-wrap ~ .table-heading .badge {
        font-size: 0.74rem;
        padding: 0.24rem 0.5rem;
        line-height: 1.18;
    }

    .is-admin .admin-hub-stats {
        font-size: 0.88rem;
        line-height: 1.32;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 640px) {
    .session-form-page .schedules-editor__header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .session-form-page .schedules-editor__add {
        flex-direction: column;
        align-items: stretch;
    }

    .session-form-page .schedules-editor__add-submit {
        align-self: stretch;
        padding-bottom: 0;
    }

    .session-form-page .schedules-editor__add-submit .button {
        width: 100%;
        justify-content: center;
    }

    .session-form-page .schedules-editor__add-action {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .session-form-page .schedules-editor__add-action .button {
        width: 100%;
        justify-content: center;
    }

    .session-form-page .schedule-editor-row__actions {
        gap: 0.4rem;
    }

    .faq-sortable-item__actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .is-admin .admin-pricing-list .table-wrap table {
        min-inline-size: 980px;
    }

    .is-admin .admin-pricing-summary,
    .is-admin .admin-session-summary {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 0.25rem;
    }

    .is-admin .admin-pricing-summary__meta,
    .is-admin .admin-session-summary__meta {
        width: 100%;
        margin-left: 0;
        white-space: normal;
    }

    .is-admin .admin-pricing-list .inline-actions .button,
    .is-admin .admin-session-list .inline-actions .button,
    .is-admin .finance-page .inline-actions .button,
    .is-admin .registrations-table-wrap ~ .table-heading .inline-actions .button {
        max-width: 100%;
        white-space: normal;
        line-height: 1.22;
        text-align: center;
    }

    .is-admin .admin-pricing-insights {
        gap: 0.3rem;
    }

    .is-admin .admin-pricing-toolbar .button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .session-form-page .schedules-editor__header,
    .session-form-page .schedules-editor__empty,
    .session-form-page .schedule-editor-row,
    .session-form-page .schedules-editor__add,
    .session-form-page .schedules-editor__add-action {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .session-form-page .schedule-editor-row__chip {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .is-admin .admin-pricing-summary,
    .is-admin .admin-session-summary {
        min-height: 44px;
        padding: 0.5rem 0.55rem;
    }

    .is-admin .admin-pricing-summary__title,
    .is-admin .admin-session-summary__title {
        font-size: 0.96rem;
    }

    .is-admin .admin-pricing-summary__meta,
    .is-admin .admin-session-summary__meta {
        font-size: 0.74rem;
    }
}

@media (max-width: 360px) {
    .session-form-page .schedules-editor__header,
    .session-form-page .schedules-editor__empty,
    .session-form-page .schedule-editor-row,
    .session-form-page .schedules-editor__add,
    .session-form-page .schedules-editor__add-action {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .session-form-page .schedule-editor-row__actions {
        gap: 0.3rem;
    }

    .is-admin .admin-pricing-summary__title,
    .is-admin .admin-session-summary__title {
        font-size: 0.9rem;
    }
}

.sortable-item:hover .drag-handle,
.section-preview-card:hover .drag-handle {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    color: var(--accent-strong);
}

.sortable-item.is-dragging {
    opacity: 0.92;
    border-style: solid;
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
    box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 22%, transparent);
    transform: scale(1.01);
}

.sortable-item.snap-in {
    animation: sortable-snap-in 220ms ease-out;
}

@keyframes sortable-snap-in {
    0% { transform: scale(1.02); }
    60% { transform: scale(0.995); }
    100% { transform: scale(1); }
}

.sortable-item.drop-target {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
}

.sortable-list.is-sorting .sortable-item:not(.is-dragging),
.section-preview-board.is-sorting .sortable-item:not(.is-dragging) {
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.sortable-item.is-dragging .drag-handle {
    cursor: grabbing;
}

.sortable-empty {
    padding: 0.8rem;
    border: 1px dashed var(--line);
    border-radius: 12px;
    color: var(--muted);
}

.autosave-status {
    margin: 0.65rem 0 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.autosave-status.ok {
    color: color-mix(in srgb, #1f7a45 72%, var(--text));
}

.autosave-status.error {
    color: #b42318;
}

.autosave-status.warning {
    color: color-mix(in srgb, var(--warning) 70%, var(--brand-orange) 30%);
}

html.js .autosave-status {
    display: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.user-contact-stack {
    display: grid;
    gap: 0.2rem;
}

.secondary-contact-details {
    display: grid;
    gap: 0.2rem;
}

.secondary-contact-details summary {
    cursor: pointer;
    color: var(--text-muted);
}

.secondary-contact-line {
    color: var(--text-muted);
    font-size: 0.94rem;
}

.contact-email {
    font-size: 0.94rem;
}

.prose {
    white-space: pre-line;
    font-size: 1.06rem;
}

.disciplines-page {
    position: relative;
}

.disciplines-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 6%, color-mix(in srgb, var(--accent-soft) 56%, transparent) 0%, transparent 42%),
        radial-gradient(circle at 90% 82%, color-mix(in srgb, var(--accent-soft) 48%, transparent) 0%, transparent 38%);
    opacity: 0.55;
}

.disciplines-hero {
    position: relative;
    padding: clamp(0.75rem, 1.7vw, 1rem);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 16px;
    background:
        radial-gradient(circle at 95% 12%, color-mix(in srgb, var(--accent-soft) 72%, transparent) 0%, transparent 44%),
        linear-gradient(155deg, color-mix(in srgb, var(--bg-elevated) 92%, transparent), color-mix(in srgb, var(--accent-soft) 42%, transparent));
    box-shadow: var(--shadow-soft);
}

.disciplines-hero h1 {
    margin-bottom: 0.3rem;
}

.disciplines-hero__lead {
    margin: 0;
    max-width: 62ch;
    color: var(--text);
    font-size: 0.98rem;
}

.disciplines-hero__meta {
    margin: 0.45rem 0 0;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.01em;
    font-size: 0.88rem;
}

.disciplines-hero .inline-actions {
    gap: 0.45rem;
}

.disciplines-hero .inline-actions .button {
    min-height: 40px;
    padding: 0.5rem 0.85rem;
}

.discipline-current-carousel-block {
    display: grid;
    gap: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent-soft) 62%, transparent) 0%, transparent 52%),
        linear-gradient(150deg, color-mix(in srgb, var(--bg-elevated) 94%, transparent), color-mix(in srgb, var(--accent-soft) 30%, transparent));
    box-shadow: var(--shadow-soft);
}

.discipline-current-carousel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.discipline-current-carousel-head h2 {
    margin: 0.2rem 0;
}

.discipline-current-carousel-head p {
    margin: 0;
    color: var(--text-muted);
}

.discipline-current-carousel-nav {
    gap: 0.45rem;
}

.discipline-current-carousel {
    border-radius: 14px;
    outline: none;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}

.discipline-current-carousel::before,
.discipline-current-carousel::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    pointer-events: none;
    cursor: default;
    font-size: 2rem;
    font-weight: 600;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.discipline-current-carousel::before {
    content: '←';
    left: 0;
    justify-content: flex-start;
    padding-left: 1.2rem;
    background: linear-gradient(
        to left,
        color-mix(in srgb, var(--bg-elevated) 0%, transparent),
        color-mix(in srgb, var(--bg-elevated) 85%, transparent) 60%,
        color-mix(in srgb, var(--bg-elevated) 95%, transparent)
    );
    animation: pulse-arrow-left 1.5s ease-in-out infinite;
    border-radius: 14px 0 0 14px;
}

.discipline-current-carousel::after {
    content: '→';
    position: absolute;
    right: 0;
    justify-content: flex-end;
    padding-right: 1.2rem;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--bg-elevated) 0%, transparent),
        color-mix(in srgb, var(--bg-elevated) 85%, transparent) 60%,
        color-mix(in srgb, var(--bg-elevated) 95%, transparent)
    );
    animation: pulse-arrow 1.5s ease-in-out infinite;
    border-radius: 0 14px 14px 0;
}

.discipline-current-carousel.show-scroll-left::before,
.discipline-current-carousel.show-scroll-right::after {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

@keyframes pulse-arrow {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(6px);
    }
}

@keyframes pulse-arrow-left {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-6px);
    }
}

.discipline-current-carousel:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.discipline-current-carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 280px;
    gap: 0.7rem;
    overflow-x: auto;
    padding: 0.22rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

@media (max-width: 960px) {
    .discipline-current-carousel-track {
        grid-auto-columns: 240px;
    }
}

@media (max-width: 640px) {
    .discipline-current-carousel-track {
        grid-auto-columns: 200px;
    }
}

.discipline-current-card {
    scroll-snap-align: start;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: 12px;
    padding: 0.72rem;
    background: color-mix(in srgb, var(--bg-elevated) 95%, transparent);
    display: grid;
    align-content: start;
    gap: 0.4rem;
    min-height: 100%;
}

.discipline-current-card__kicker {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-muted);
}

.discipline-current-card h3 {
    margin: 0;
    font-size: 1.03rem;
}

.discipline-current-card__age {
    margin: 0;
    font-weight: 700;
    color: var(--accent-strong);
    font-size: 0.92rem;
}

.discipline-current-card__summary {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.45;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discipline-current-card__actions {
    margin-top: auto;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.discipline-current-card__actions .button {
    width: 100%;
    min-height: 44px;
}

.course-lines {
    display: grid;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.discipline-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.65fr);
    gap: clamp(0.75rem, 1.8vw, 1.1rem);
    align-items: stretch;
    width: 100%;
    margin: 0 auto;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-left-width: 5px;
    background:
        linear-gradient(128deg, color-mix(in srgb, var(--bg-elevated) 93%, transparent), color-mix(in srgb, var(--accent-soft) 35%, transparent));
    box-shadow: var(--shadow-soft);
    min-height: 460px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.discipline-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.discipline-row--reverse {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1.35fr);
}

.discipline-row--reverse .discipline-text {
    order: 2;
}

.discipline-row--reverse .discipline-media {
    order: 1;
}

.discipline-row--no-media {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.65fr);
}

.discipline-row--reverse.discipline-row--no-media {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1.35fr);
}

.discipline-text h2 {
    margin-top: 0;
    margin-bottom: 0.42rem;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.discipline-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
}

.discipline-kicker {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 800;
}

.discipline-trust-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.16rem 0.52rem;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
    color: var(--text-muted);
    white-space: nowrap;
}

.discipline-text {
    font-size: 0.98rem;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 12px;
    padding: 0.85rem;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    height: 100%;
    display: grid;
    align-content: start;
}

.discipline-text p {
    margin: 0 0 0.48rem;
}

.discipline-description {
    display: grid;
    gap: 0.32rem;
}

.discipline-description__content {
    line-height: 1.45;
    max-height: none;
    overflow: hidden;
}

.discipline-description__content.is-expanded {
    max-height: none;
}

.discipline-description__content p:last-child {
    margin-bottom: 0;
}

.discipline-actions {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.discipline-actions .button {
    flex: 1 1 160px;
    min-height: 44px;
    gap: 0.45rem;
}

.discipline-media {
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

.discipline-media-stage,
.discipline-media-placeholder {
    order: 2;
}

.discipline-media-stage {
    display: grid;
    gap: 0.58rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 12px;
    padding: 0.56rem;
    min-height: 100%;
    background:
        linear-gradient(164deg, color-mix(in srgb, var(--bg-elevated) 95%, transparent), color-mix(in srgb, var(--accent-soft) 30%, transparent));
}

.discipline-media-stage__label {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-muted);
}

.discipline-photo {
    margin: 0;
}

.discipline-photo-trigger {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 10px;
    cursor: zoom-in;
    overflow: hidden;
    display: block;
}

.discipline-photo-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.discipline-photo-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    display: block;
}

.discipline-photo--lead .discipline-photo-trigger {
    aspect-ratio: 1 / 1;
    height: auto;
}

.discipline-photo--lead .discipline-photo-trigger img {
    min-height: 0;
}

.discipline-photo-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
}

.discipline-photo-grid .discipline-photo img {
    aspect-ratio: 1 / 1;
    max-height: none;
}

.discipline-photo-grid .discipline-photo {
    grid-column: span 3;
}

.discipline-photo-grid .discipline-photo:nth-child(1),
.discipline-photo-grid .discipline-photo:nth-child(4) {
    grid-column: span 4;
}

.discipline-photo-grid .discipline-photo:nth-child(2),
.discipline-photo-grid .discipline-photo:nth-child(3) {
    grid-column: span 2;
}

.discipline-gallery-more {
    margin: 0;
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    padding-top: 0.34rem;
}

.discipline-gallery-more__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    list-style: none;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.84rem;
    padding: 0.22rem 0.16rem;
    border-radius: 8px;
    transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.discipline-gallery-more__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9em;
    padding: 0.08rem 0.34rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    color: var(--text);
    font-size: 0.76rem;
    line-height: 1.2;
}

.discipline-gallery-more__toggle::-webkit-details-marker {
    display: none;
}

.discipline-gallery-more__toggle::before {
    content: ">";
    display: inline-block;
    font-weight: 800;
    transform-origin: 45% 52%;
    transition: transform var(--transition-fast);
}

.discipline-gallery-more[open] .discipline-gallery-more__toggle::before {
    transform: rotate(90deg);
}

.discipline-gallery-more__toggle:hover {
    color: color-mix(in srgb, var(--accent) 78%, var(--text));
    background: color-mix(in srgb, var(--accent-soft) 44%, transparent);
}

.discipline-gallery-more__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
    background: color-mix(in srgb, var(--accent-soft) 54%, transparent);
}

.discipline-photo-grid--extra {
    margin-top: 0.4rem;
    animation: discipline-gallery-reveal 180ms ease-out both;
}

.discipline-media--placeholder {
    align-content: stretch;
}

.discipline-media-placeholder {
    min-height: 100%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--accent) 34%, var(--line));
    background:
        linear-gradient(140deg, color-mix(in srgb, var(--accent-soft) 40%, transparent), color-mix(in srgb, var(--bg-elevated) 92%, transparent));
    display: grid;
    place-items: center;
    gap: 1rem;
    padding: clamp(1.25rem, 2vw, 1.8rem);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-align: center;
}

.discipline-media-placeholder::before,
.discipline-media-placeholder::after {
    content: "";
    position: absolute;
    inset: auto;
    border-radius: 999px;
    pointer-events: none;
    z-index: -1;
}

.discipline-media-placeholder::before {
    width: 11rem;
    height: 11rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-soft) 46%, transparent) 0%, transparent 72%);
    top: -1.8rem;
    right: -1.2rem;
    opacity: 0.95;
}

.discipline-media-placeholder::after {
    width: 9rem;
    height: 9rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 74%);
    bottom: -1.6rem;
    left: -1rem;
    opacity: 0.9;
}

.discipline-media-placeholder__art {
    width: clamp(5.5rem, 12vw, 8.25rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: color-mix(in srgb, var(--accent) 24%, var(--text-muted));
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent-soft) 52%, transparent), color-mix(in srgb, var(--bg-elevated) 90%, transparent));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
        0 18px 40px color-mix(in srgb, var(--accent) 8%, transparent);
}

.discipline-media-placeholder__art svg {
    width: 68%;
    height: auto;
    opacity: 0.82;
}

.discipline-media-placeholder__art img {
    width: 68%;
    height: auto;
    opacity: 0.9;
    object-fit: contain;
}

.discipline-media-placeholder__label {
    max-width: 15ch;
    color: color-mix(in srgb, var(--text-muted) 88%, var(--accent) 12%);
    line-height: 1.35;
}

.discipline-empty-state {
    text-align: center;
    display: grid;
    gap: 0.55rem;
    justify-items: center;
}

.discipline-empty-state h2,
.discipline-empty-state p {
    margin: 0;
}

.discipline-lightbox {
    width: min(920px, calc(100vw - 1.5rem));
    max-width: 920px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0;
    background: color-mix(in srgb, var(--bg-elevated) 97%, transparent);
    color: var(--text);
    box-shadow: var(--shadow-strong);
}

.discipline-lightbox::backdrop {
    background: rgba(10, 18, 28, 0.72);
}

.discipline-lightbox__panel {
    padding: 0.75rem;
    display: grid;
    gap: 0.52rem;
}

.discipline-lightbox__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.discipline-lightbox__header-main {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 0.28rem;
}

.discipline-lightbox__counter {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.discipline-lightbox__album-name {
    margin: 0;
    max-width: 58ch;
    color: color-mix(in srgb, var(--text) 82%, var(--accent));
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discipline-lightbox__progress {
    position: relative;
    width: 100%;
    height: 0.38rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--line) 78%, transparent);
}

.discipline-lightbox__progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-strong) 74%, var(--accent)) 0%, color-mix(in srgb, var(--accent-soft) 72%, #fff) 100%);
    transition: width 180ms ease;
}

.discipline-lightbox__progress.is-advancing .discipline-lightbox__progress-fill {
    animation: gallery-progress-pulse 360ms ease;
}

.discipline-lightbox__figure {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

.discipline-lightbox__figure img {
    width: 100%;
    max-height: min(72vh, 680px);
    object-fit: contain;
    display: block;
}

.discipline-lightbox__figure--gallery {
    --gallery-pointer-x: 50%;
    --gallery-pointer-y: 50%;
    position: relative;
    min-height: min(48vh, 520px);
    display: grid;
    place-items: center;
}

.discipline-lightbox__figure--gallery::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 48%, color-mix(in srgb, #000 18%, transparent) 100%);
    pointer-events: none;
}

.discipline-lightbox__figure--gallery::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--gallery-pointer-x) var(--gallery-pointer-y), color-mix(in srgb, #fff 12%, transparent), transparent 40%);
    opacity: 0.8;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.discipline-lightbox__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: min(72vh, 680px);
    object-fit: contain;
    opacity: 0;
    transform: scale(1.018);
    transition: opacity 320ms ease, transform 420ms ease;
    will-change: opacity, transform;
}

.discipline-lightbox__figure--gallery[data-direction="next"] .discipline-lightbox__image.is-prepared {
    transform: translateX(20px) scale(1.02);
}

.discipline-lightbox__figure--gallery[data-direction="prev"] .discipline-lightbox__image.is-prepared {
    transform: translateX(-20px) scale(1.02);
}

.discipline-lightbox__image.is-active {
    opacity: 1;
    transform: scale(1);
}

.discipline-lightbox__figure--gallery img {
    transition: opacity var(--transition-fast);
}

.discipline-lightbox__figure--gallery.is-loading img {
    opacity: 0.35;
}

.discipline-lightbox__figure--gallery.is-transitioning .discipline-lightbox__image.is-active {
    animation: gallery-image-settle 420ms ease;
}

.course-schedule-modal {
    width: min(1120px, calc(100vw - 1.5rem));
    max-width: 1120px;
}

.course-schedule-modal .discipline-lightbox__panel {
    gap: 0.7rem;
}

.course-schedule-modal__status {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.course-schedule-modal__body {
    max-height: min(70vh, 760px);
    overflow-y: auto;
    padding-right: 0.2rem;
}

.course-schedule-modal__body .schedule-modal-page {
    padding: 0;
}

.course-schedule-modal__body .schedule-group-stack {
    gap: 0.85rem;
}

.course-schedule-modal__body .schedule-action-course {
    display: none;
}

.course-schedule-modal__body .schedule-season-groups {
    grid-template-columns: 1fr;
}

.course-schedule-modal__body .schedule-season-card {
    display: grid;
    gap: 0.75rem;
    padding: 0.7rem;
}

.course-schedule-modal__body .schedule-season-title {
    font-size: clamp(1.05rem, 1.8vw, 1.18rem);
    margin: 0;
    padding-bottom: 0.35rem;
    border-bottom: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom left;
}

.course-schedule-modal__body .content-card {
    padding: 0.85rem;
}

/* Compacité du contenu injecté dans la modale */
.course-schedule-modal__body .schedule-year-head {
    gap: 0.15rem;
}

.course-schedule-modal__body .schedule-year-head .eyebrow {
    display: none;
}

.course-schedule-modal__body .schedule-year-head h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    margin: 0 0 0.25rem;
}

@media (max-width: 960px) {
    .course-schedule-modal {
        width: min(100vw - 1rem, 1120px);
    }

    .course-schedule-modal__body {
        max-height: 72vh;
    }
}

@media (max-width: 640px) {
    .course-schedule-modal {
        width: calc(100vw - 0.75rem);
        max-width: calc(100vw - 0.75rem);
        max-height: calc(100dvh - 1rem);
        margin: auto;
        border-radius: 18px 18px 12px 12px;
    }

    .course-schedule-modal .discipline-lightbox__panel {
        padding: 0.75rem 0.65rem 0.8rem;
    }

    .course-schedule-modal__body {
        max-height: 74vh;
    }

    .course-schedule-modal .discipline-lightbox__header {
        align-items: flex-start;
        gap: 0.6rem;
    }

    .course-schedule-modal .discipline-lightbox__header h2 {
        font-size: clamp(1rem, 4.5vw, 1.22rem);
        line-height: 1.2;
        margin: 0;
        flex: 1;
        min-width: 0;
    }

    .course-schedule-modal .discipline-lightbox__header .button {
        flex: 0 0 auto;
        padding: 0.3rem 0.75rem;
        font-size: 0.85rem;
        min-height: 36px;
    }

    .course-schedule-modal__body .content-card {
        padding: 0.65rem;
    }

    .course-schedule-modal__body .schedule-season-card {
        padding: 0.55rem;
    }

    .course-schedule-modal__body .schedule-group-stack {
        gap: 0.65rem;
    }

    .course-schedule-modal__body .schedule-season-title {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .course-schedule-modal {
        width: calc(100vw - 0.5rem);
        max-width: calc(100vw - 0.5rem);
    }

    .course-schedule-modal .discipline-lightbox__panel {
        padding: 0.5rem 0.4rem 0.55rem;
        gap: 0.35rem;
    }

    .course-schedule-modal__body {
        max-height: 76vh;
    }

    .course-schedule-modal .discipline-lightbox__header {
        gap: 0.4rem;
        margin-bottom: 0.1rem;
    }

    .course-schedule-modal .discipline-lightbox__header h2 {
        font-size: clamp(0.95rem, 3.8vw, 1.1rem);
        line-height: 1.1;
    }

    .course-schedule-modal .discipline-lightbox__header .button {
        padding: 0.25rem 0.6rem;
        font-size: 0.8rem;
        min-height: 32px;
    }

    .course-schedule-modal__body .content-card {
        padding: 0.45rem;
    }

    .course-schedule-modal__body .schedule-season-card {
        padding: 0.4rem;
        gap: 0.45rem;
    }

    .course-schedule-modal__body .schedule-group-stack {
        gap: 0.5rem;
    }

    .course-schedule-modal__body .schedule-season-title {
        font-size: 0.85rem;
        padding-bottom: 0.2rem;
    }

    .course-schedule-modal__body .schedule-year-head h2 {
        font-size: clamp(0.95rem, 2vw, 1.1rem);
        margin-bottom: 0.15rem;
    }

    /* Compacité extrême des cartes de cours */
    .course-schedule-modal__body .schedule-group-card {
        gap: 0.35rem;
        padding: 0.4rem;
        border-radius: 8px;
    }

    .course-schedule-modal__body .schedule-group-head {
        gap: 0.3rem;
    }

    .course-schedule-modal__body .schedule-group-head h2 {
        font-size: clamp(0.85rem, 2.2vw, 0.98rem);
    }

    .course-schedule-modal__body .schedule-group-head h4 {
        font-size: clamp(0.8rem, 1.8vw, 0.9rem);
    }

    .course-schedule-modal__body .schedule-age-chip {
        font-size: 0.85rem;
        padding: 0.3rem 0.6rem;
    }

    .course-schedule-modal__body .schedule-meta-chip {
        font-size: 0.75rem;
        padding: 0.22rem 0.5rem;
    }

    .course-schedule-modal__body .schedule-title-row {
        gap: 0.35rem;
    }

    .course-schedule-modal__body .schedule-slots {
        gap: 0.4rem;
    }

    .course-schedule-modal__body .schedule-slot-item {
        padding: 0.5rem;
        border-radius: 8px;
    }

    .course-schedule-modal__body .schedule-slot-main {
        gap: 0.5rem;
    }

    .course-schedule-modal__body .schedule-slot-main strong {
        font-size: 0.85rem;
    }

    .course-schedule-modal__body .schedule-slot-main span,
    .course-schedule-modal__body .schedule-slot-sub {
        font-size: 0.8rem;
    }

    .course-schedule-modal__body .schedule-pricing-section {
        gap: 0.3rem;
    }

    .course-schedule-modal__body .schedule-group-actions {
        gap: 0.35rem;
    }

    .course-schedule-modal__body .schedule-group-actions .button {
        min-height: 36px;
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    /* Force le passage sur plusieurs lignes des tarifs */
    .course-schedule-modal__body .pricing-line-main {
        white-space: normal;
        flex-wrap: wrap;
        gap: 0.2rem;
    }

    .course-schedule-modal__body .pricing-list-item {
        padding: 0.35rem 0.5rem;
    }

    .course-schedule-modal__body .pricing-amount {
        font-size: 0.9rem;
    }

    .course-schedule-modal__body .pricing-course-count {
        font-size: 0.8rem;
    }

    .course-schedule-modal__body .pricing-dot {
        display: none;
    }

    /* Réduction des badges capacité dans la modale */
    .course-schedule-modal__body .schedule-group-head .badge {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
        border-radius: 8px;
    }
}

@media (max-width: 360px) {
    .course-schedule-modal__status {
        font-size: 0.9rem;
    }
}

.discipline-lightbox__image.is-leaving {
    opacity: 0;
}

.discipline-lightbox__figure--gallery[data-direction="next"] .discipline-lightbox__image.is-leaving {
    transform: translateX(-16px) scale(0.995);
}

.discipline-lightbox__figure--gallery[data-direction="prev"] .discipline-lightbox__image.is-leaving {
    transform: translateX(16px) scale(0.995);
}

.discipline-lightbox__hotspot {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18%;
    border: 0;
    background: transparent;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.discipline-lightbox__hotspot::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    background: color-mix(in srgb, #000 40%, transparent);
    transform: translateY(-50%);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.discipline-lightbox__hotspot--prev {
    left: 0;
}

.discipline-lightbox__hotspot--prev::before {
    left: 0.6rem;
    clip-path: polygon(64% 22%, 37% 50%, 64% 78%, 52% 89%, 15% 50%, 52% 11%);
}

.discipline-lightbox__hotspot--next {
    right: 0;
}

.discipline-lightbox__hotspot--next::before {
    right: 0.6rem;
    clip-path: polygon(36% 22%, 63% 50%, 36% 78%, 48% 89%, 85% 50%, 48% 11%);
}

@media (hover: hover) and (pointer: fine) {
    .discipline-lightbox__figure--gallery:hover .discipline-lightbox__hotspot,
    .discipline-lightbox__hotspot:focus-visible {
        opacity: 1;
    }

    .discipline-lightbox__hotspot:hover {
        background: color-mix(in srgb, #000 8%, transparent);
    }

    .discipline-lightbox__hotspot:hover::before,
    .discipline-lightbox__hotspot:focus-visible::before {
        transform: translateY(-50%) scale(1.05);
        background: color-mix(in srgb, #000 52%, transparent);
    }
}

.discipline-lightbox__hotspot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.discipline-lightbox__hotspot:disabled {
    cursor: not-allowed;
    opacity: 0;
}

.discipline-lightbox__loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.discipline-lightbox__loading[hidden] {
    display: none;
}

.discipline-lightbox__caption {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.discipline-lightbox__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.discipline-lightbox__actions--gallery {
    justify-content: space-between;
}

.discipline-lightbox__actions--gallery .button {
    min-width: 132px;
}

.discipline-lightbox__hint {
    margin: 0;
    text-align: center;
}

.discipline-lightbox--gallery {
    width: min(1020px, calc(100vw - 1rem));
    max-width: 1020px;
    border-radius: 18px;
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    background:
        radial-gradient(circle at 96% 10%, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 48%),
        color-mix(in srgb, var(--bg-elevated) 97%, transparent);
    box-shadow: 0 22px 56px color-mix(in srgb, #000 34%, transparent);
}

.discipline-lightbox--gallery::backdrop {
    background: radial-gradient(circle at 50% 18%, rgba(29, 70, 122, 0.25), rgba(10, 18, 28, 0.82));
}

.discipline-lightbox--gallery[open] {
    animation: gallery-modal-enter 180ms ease-out both;
}

.discipline-lightbox--gallery .discipline-lightbox__panel {
    gap: 0.72rem;
    padding: 0.85rem;
}

.discipline-lightbox--gallery .discipline-lightbox__header {
    gap: 0.75rem;
    align-items: flex-start;
}

.discipline-lightbox--gallery .discipline-lightbox__counter {
    color: color-mix(in srgb, var(--accent-strong) 70%, var(--text-muted));
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.76rem;
}

.discipline-lightbox--gallery .discipline-lightbox__figure {
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.discipline-lightbox--gallery .discipline-lightbox__figure--gallery {
    min-height: min(62vh, 640px);
    background:
        radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--accent-soft) 22%, transparent), transparent 44%),
        color-mix(in srgb, var(--bg-elevated) 84%, transparent);
}

.discipline-lightbox--gallery .discipline-lightbox__loading {
    border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    box-shadow: 0 8px 28px color-mix(in srgb, #000 24%, transparent);
}

.discipline-lightbox--gallery .discipline-lightbox__caption {
    padding: 0.42rem 0.6rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
}

.discipline-lightbox--gallery .discipline-lightbox__actions {
    gap: 0.55rem;
}

.discipline-lightbox--gallery .discipline-lightbox__actions--gallery .button {
    min-height: 44px;
}

.discipline-lightbox__close-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
}

.discipline-lightbox__close-button i {
    font-size: 1rem;
}

.discipline-lightbox__nav-button {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--bg-elevated) 95%, transparent), color-mix(in srgb, var(--accent-soft) 16%, transparent));
    color: color-mix(in srgb, var(--text) 88%, var(--accent));
    box-shadow: 0 8px 22px color-mix(in srgb, #000 14%, transparent);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.discipline-lightbox__nav-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, #fff 16%, transparent) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 420ms ease;
    pointer-events: none;
}

.discipline-lightbox__nav-button i {
    font-size: 1rem;
}

@media (hover: hover) and (pointer: fine) {
    .discipline-lightbox__nav-button:hover {
        transform: translateY(-1px) scale(1.01);
        border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
        box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 22%, transparent);
        color: var(--accent-strong);
    }

    .discipline-lightbox__nav-button:hover::after {
        transform: translateX(120%);
    }
}

.discipline-lightbox__nav-button:active {
    transform: translateY(1px) scale(0.99);
}

.discipline-lightbox--gallery .discipline-lightbox__hint {
    color: color-mix(in srgb, var(--text-muted) 82%, var(--accent));
}

@keyframes gallery-modal-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes gallery-image-settle {
    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1);
    }
}

@keyframes gallery-progress-pulse {
    from {
        filter: saturate(1.08);
    }

    to {
        filter: saturate(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .discipline-lightbox__image,
    .discipline-lightbox__hotspot,
    .discipline-lightbox__hotspot::before,
    .discipline-lightbox__progress-fill,
    .discipline-lightbox__nav-button,
    .discipline-lightbox__nav-button::after,
    .discipline-lightbox--gallery[open] {
        animation: none !important;
        transition: none !important;
    }

    .discipline-lightbox__figure--gallery::before {
        display: none;
    }
}

.discipline-lightbox__actions[hidden] {
    display: none;
}

.dojo-confirm-dialog .discipline-lightbox__panel {
    padding: 1.15rem;
    gap: 0.72rem;
}

.dojo-confirm-dialog--progress {
    width: min(560px, calc(100vw - 1.5rem));
    max-width: 560px;
}

.dojo-confirm-progress {
    padding: 0;
    gap: 0.8rem;
}

.dojo-confirm-dialog .form-hint {
    font-size: 1.05rem;
    line-height: 1.5;
    color: inherit;
}

.member-grade-create-dialog {
    width: min(760px, calc(100vw - 1.5rem));
    max-width: 760px;
}

.member-grade-create-dialog .form-card {
    max-width: none;
}

#dojo-confirm-message {
    white-space: pre-line;
}

.dojo-long-task-dialog {
    width: min(560px, calc(100vw - 1.5rem));
    max-width: 560px;
}

.dojo-long-task {
    padding: 1rem;
    gap: 0.8rem;
}

.dojo-long-task__header h2 {
    margin: 0;
}

.dojo-long-task__message {
    margin: 0;
}

.dojo-long-task__progress-wrap {
    display: grid;
    gap: 0.42rem;
}

.dojo-long-task__progress-text {
    margin: 0;
    color: var(--text-muted);
}

.dojo-long-task__progress {
    width: 100%;
    height: 0.9rem;
    accent-color: var(--accent);
}

@media (max-width: 640px) {
    .discipline-lightbox--gallery {
        width: min(100vw - 0.6rem, 1020px);
        border-radius: 14px;
    }

    .discipline-lightbox--gallery .discipline-lightbox__panel {
        padding: 0.65rem;
    }

    .discipline-lightbox--gallery .discipline-lightbox__header {
        flex-direction: column;
        align-items: stretch;
    }

    .discipline-lightbox--gallery .discipline-lightbox__header .button {
        width: 100%;
    }

    .discipline-lightbox--gallery .discipline-lightbox__figure--gallery {
        min-height: min(50vh, 520px);
    }

    .discipline-lightbox__hotspot {
        width: 22%;
        opacity: 1;
    }

    .discipline-lightbox__hotspot::before {
        width: 30px;
        height: 30px;
    }

    .discipline-lightbox--gallery .discipline-lightbox__actions--gallery {
        flex-direction: column;
    }

    .discipline-lightbox--gallery .discipline-lightbox__actions--gallery .button {
        width: 100%;
    }

    .dojo-confirm-dialog .discipline-lightbox__panel {
        padding: 1rem;
    }

    .dojo-confirm-dialog--progress {
        width: min(100vw - 1rem, 560px);
    }
}

.dojo-toast-container {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    width: min(380px, calc(100vw - 2rem));
    min-height: 86px;
    pointer-events: none;
}

.dojo-toast-card {
    --toast-stack-index: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    box-shadow: var(--shadow-strong);
    padding: 0.72rem 0.82rem;
    display: grid;
    gap: 0.25rem;
    transform: translateX(calc(var(--toast-stack-index) * -2px)) translateY(calc(var(--toast-stack-index) * -8px)) scale(calc(1 - var(--toast-stack-index) * 0.02));
    opacity: calc(1 - var(--toast-stack-index) * 0.18);
    transition: transform 160ms ease, opacity 160ms ease;
    animation: dojo-toast-in 180ms ease-out both;
    pointer-events: auto;
}

.dojo-toast-card__title {
    font-size: 0.88rem;
    line-height: 1.25;
}

.dojo-toast-card__message {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.dojo-toast-card__summary {
    margin: 0.08rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--accent) 82%, var(--text));
    line-height: 1.25;
}

.dojo-toast-card__copy-btn {
    position: absolute;
    top: 0.4rem;
    right: 2.1rem;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    flex-shrink: 0;
    box-sizing: border-box;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}

.dojo-toast-card__close-btn {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    flex-shrink: 0;
    box-sizing: border-box;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}

.dojo-toast-card__copy-btn:hover {
    background: color-mix(in srgb, var(--bg-elevated) 40%, transparent);
    color: var(--text);
    border-color: var(--accent);
}

.dojo-toast-card__close-btn:hover {
    background: color-mix(in srgb, var(--bg-elevated) 40%, transparent);
    color: var(--text);
    border-color: var(--accent);
}

.dojo-toast-card__copy-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.dojo-toast-card__close-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.dojo-toast-card__copy-btn:active {
    transform: scale(0.92);
}

.dojo-toast-card__close-btn:active {
    transform: scale(0.92);
}

.dojo-toast-card__copy-btn.is-copied {
    color: #1f9d57;
    border-color: color-mix(in srgb, #1f9d57 50%, var(--line));
}

.dojo-toast-card--success {
    border-left-color: color-mix(in srgb, #1f9d57 74%, var(--line));
}

.dojo-toast-card--error {
    border-left-color: color-mix(in srgb, var(--brand-red) 78%, var(--line));
    padding-right: 4rem;
}

.dojo-toast-card--info {
    border-left-color: color-mix(in srgb, var(--accent) 76%, var(--line));
}

.dojo-toast-card--warning {
    border-left-color: color-mix(in srgb, var(--warning) 72%, var(--brand-orange) 28%);
}

.dojo-toast-card.is-hiding {
    animation: dojo-toast-out 220ms ease-in both;
}

@keyframes dojo-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dojo-toast-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
}

@keyframes discipline-gallery-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.photo-sortable {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.photo-drop-zone {
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 0.6rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.photo-drop-hint {
    margin: 0;
    padding: 1.4rem 1rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.875rem;
    pointer-events: none;
    user-select: none;
}

.photo-drop-zone:has(.photo-sortable:not(:empty)) {
    cursor: default;
}

.photo-drop-zone.is-drop-target {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.photo-sortable-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-soft) 56%, transparent);
    padding: 0.55rem 0.7rem;
}

.photo-sortable-item[hidden] {
    display: none;
}

.photo-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--line);
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
    filter: saturate(0.92) contrast(0.96) brightness(1.04);
    transition: filter var(--transition-fast);
}

.photo-sortable-item:hover .photo-thumb,
.photo-sortable-item:focus-within .photo-thumb {
    filter: saturate(0.96) contrast(0.98) brightness(1.02);
}

.photo-sortable-item.is-dragging {
    opacity: 0.65;
}

.photo-sortable-item.drop-target {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 52%, transparent);
}

.photo-sortable-item.snap-in {
    animation: sortable-snap-in 220ms ease-out;
}

.photo-drop-zone--preview .photo-sortable {
    gap: 0.72rem;
}

.photo-drop-zone--preview .photo-thumb {
    width: 104px;
    height: 104px;
    border-radius: 12px;
}

.photo-thumb-button {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: zoom-in;
    border-radius: 12px;
    line-height: 0;
    flex: 0 0 auto;
}

.photo-thumb-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 74%, #ffffff);
    outline-offset: 2px;
}

.photo-thumb-button .photo-thumb {
    display: block;
}

.photo-handle {
    cursor: grab;
    color: var(--muted);
    font-weight: 700;
    position: relative;
}

.photo-name-input {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.9rem;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--text);
    padding: 0.1rem 0.2rem;
    border-radius: 0;
    outline: none;
    transition: border-color var(--transition-fast);
}

.photo-name-input:hover {
    border-bottom-color: var(--muted);
}

.photo-name-input:focus {
    border-bottom-color: var(--accent);
}

.photo-delete-btn {
    margin-left: auto;
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.photo-delete-btn:hover {
    color: #e53e3e;
    background: color-mix(in srgb, #e53e3e 12%, transparent);
}

.admin-photo-preview-dialog::backdrop {
    background: rgba(6, 10, 18, 0.72);
}

.admin-photo-preview-dialog {
    width: min(96vw, 1080px);
    max-width: min(96vw, 1080px);
    height: calc(100dvh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

.admin-photo-preview-panel {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.52rem;
    overflow: hidden;
}

.admin-photo-preview-stage {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.admin-photo-preview-stage img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.admin-photo-preview-caption {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 640px) {
    .photo-drop-zone--preview .photo-thumb {
        width: 90px;
        height: 90px;
    }

    .admin-photo-preview-stage {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .photo-drop-zone--preview .photo-thumb {
        width: 78px;
        height: 78px;
    }
}

.theme-catalog-zone {
    padding: 0.85rem;
    background: linear-gradient(140deg, color-mix(in srgb, var(--accent-soft) 38%, transparent), color-mix(in srgb, var(--bg-elevated) 92%, transparent));
}

.theme-catalog-zone:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
    outline-offset: 2px;
}

.theme-catalog-zone__hint {
    font-weight: 600;
}

.theme-catalog-list {
    margin-top: 0;
}

.theme-catalog-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.55rem 0.7rem;
    border-style: solid;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

.theme-catalog-item__title {
    font-weight: 700;
    border-bottom: none;
    padding: 0.15rem 0;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

.theme-catalog-item__title--imported {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.theme-catalog-item__title:hover,
.theme-catalog-item__title:focus {
    border-bottom-color: transparent;
}

.theme-catalog-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
}

.theme-catalog-item__control {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
}

.theme-catalog-item__control span {
    font-size: 0.82rem;
}

.theme-catalog-item__remove {
    font-size: 1.35rem;
}

@media (max-width: 960px) {
    .theme-catalog-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "handle title badge"
            "toggle toggle default"
            "remove remove remove";
        align-items: center;
    }

    .theme-catalog-item .photo-handle {
        grid-area: handle;
    }

    .theme-catalog-item__title {
        grid-area: title;
    }

    .theme-catalog-item__badge {
        grid-area: badge;
        justify-self: end;
    }

    .theme-catalog-item__control:first-of-type {
        grid-area: toggle;
    }

    .theme-catalog-item__control:last-of-type {
        grid-area: default;
        justify-self: end;
    }

    .theme-catalog-item__remove {
        grid-area: remove;
        justify-self: end;
    }
}

@media (max-width: 640px) {
    .theme-catalog-item {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "handle title title"
            "badge toggle default"
            "remove remove";
        gap: 0.45rem 0.55rem;
    }

    .theme-catalog-item__title {
        align-self: center;
    }

    .theme-catalog-item__control {
        width: auto;
        white-space: nowrap;
        gap: 0.4rem;
        min-width: 0;
        align-self: center;
    }

    .theme-catalog-item__badge {
        justify-self: start;
        align-self: center;
        padding: 0.18rem 0.48rem;
    }

    .theme-catalog-item__control:first-of-type {
        justify-self: start;
    }

    .theme-catalog-item__control:last-of-type {
        justify-self: end;
    }

    .theme-catalog-item__remove {
        justify-self: end;
    }

    .theme-catalog-item__control .ui-toggle__text,
    .theme-catalog-item__default span {
        overflow-wrap: normal;
        word-break: normal;
    }
}

@media (max-width: 480px) {
    .theme-catalog-item {
        gap: 0.4rem 0.45rem;
    }

    .theme-catalog-item__badge {
        font-size: 0.72rem;
    }

    .theme-catalog-item__control {
        gap: 0.35rem;
    }

    .theme-catalog-item__control span {
        font-size: 0.78rem;
    }
}

    .theme-presets-grid {
        gap: 0.75rem;
    }

    .theme-preset-card {
        max-width: none;
        padding: 0.8rem;
        display: grid;
        gap: 0.55rem;
        align-content: start;
    }

    .theme-preset-card__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.45rem;
    }

    .theme-preset-card h3 {
        margin: 0;
        line-height: 1.2;
    }

    .theme-preset-card .help-tooltip--standalone {
        margin: 0;
    }

    @media (max-width: 960px) {
        .theme-presets-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.62rem;
        }

        .theme-preset-card {
            padding: 0.68rem;
            gap: 0.45rem;
        }

        .theme-preset-card h3 {
            font-size: 0.95rem;
        }

        .theme-preset-card .button {
            width: 100%;
        }
    }

    @media (max-width: 640px) {
        .theme-presets-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .theme-preset-card {
            padding: 0.62rem;
        }

        .theme-preset-card h3 {
            font-size: 0.89rem;
        }

        .theme-preset-card .button {
            min-height: 44px;
            padding-inline: 0.6rem;
        }
    }

    @media (max-width: 360px) {
        .theme-presets-grid {
            grid-template-columns: 1fr;
        }
    }

.site-footer {
    padding: 3rem 0;
}

.footer-grid {
    grid-template-columns: repeat(2, 1fr);
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    padding-top: 1.4rem;
}

.footer-version {
    margin-top: 1.4rem;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    opacity: 0.55;
}

.footer-social-links {
    margin-top: 1.1rem;
}

.footer-social-links-list,
.contact-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin-top: 0.6rem;
}

.social-icon-link {
    min-width: 44px;
    min-height: 44px;
}

.social-icon-mask {
    width: 1.22rem;
    height: 1.22rem;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: var(--social-icon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--social-icon-url);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.social-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.social-icon-badge--brand {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
}

.social-icon-svg {
    width: 1.3rem;
    height: 1.3rem;
    display: block;
}

.contact-social-card {
    align-self: start;
}

.social-links-admin__list {
    display: grid;
    gap: 0.55rem;
}

.social-links-admin__row {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(170px, 240px) auto auto;
    gap: 0.55rem;
    align-items: center;
}

.site-customization-page .social-links-admin__row {
    padding: 0.68rem;
}

.social-links-admin__controls {
    align-items: center;
    justify-content: flex-end;
    margin-top: 0;
}

.social-links-admin__row.is-disabled {
    opacity: 0.72;
}

@media (max-width: 960px) {
    .social-links-admin__row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    }

    .social-links-admin__row > [data-social-custom-label-wrap] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .social-links-admin__row {
        grid-template-columns: 1fr;
    }

    .social-links-admin__row .social-links-admin__controls {
        justify-content: flex-start;
    }
}

.follow-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.follow-social-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 44px;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--text);
    text-decoration: none;
}

.follow-social-card:hover,
.follow-social-card:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line) 58%);
    box-shadow: var(--shadow-soft);
}

.follow-social-card__label {
    font-weight: 600;
}

@media (max-width: 960px) {
    .social-icon-badge--brand {
        width: 2.75rem;
        height: 2.75rem;
    }
}

.footer-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.page-access-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.28rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    color: var(--muted);
    cursor: help;
}

.page-access-indicator:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.page-access-indicator__icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    flex-shrink: 0;
}

.page-access-indicator__icon svg {
    width: 18px;
    height: 18px;
}

.page-access-indicator__label {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.page-access-indicator__tooltip {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.55rem);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 160ms ease, transform 160ms ease;
    min-width: 220px;
    max-width: min(86vw, 420px);
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    background: color-mix(in srgb, var(--surface) 95%, var(--charcoal) 5%);
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.4;
    box-shadow: var(--shadow-soft);
    z-index: 15;
}

.page-access-indicator:is(:hover, :focus-visible) .page-access-indicator__tooltip {
    opacity: 1;
    transform: translateY(0);
}

.page-access-indicator[data-open="true"] .page-access-indicator__tooltip {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 640px) {
    .page-access-indicator {
        width: 100%;
        justify-content: flex-start;
    }

    .page-access-indicator__label {
        white-space: normal;
    }
}

.background-orb {
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.56;
    pointer-events: none;
    animation: float-orb 12s ease-in-out infinite;
}

.orb-one {
    top: -120px;
    left: -120px;
    background: rgba(247, 127, 0, 0.32);
}

.orb-two {
    bottom: -140px;
    right: -100px;
    background: rgba(31, 78, 140, 0.2);
    animation-delay: -4s;
}

.orb-three {
    top: 28%;
    right: 16%;
    width: 240px;
    height: 240px;
    background: rgba(14, 165, 233, 0.2);
    filter: blur(50px);
    animation-delay: -7s;
}

html[data-theme="dark"] .background-orb,
html[data-theme="vampire"] .background-orb {
    opacity: 0.34;
}

html[data-theme="dark"] .orb-one,
html[data-theme="vampire"] .orb-one {
    background: rgba(247, 127, 0, 0.16);
}

html[data-theme="dark"] .orb-two,
html[data-theme="vampire"] .orb-two {
    background: rgba(31, 78, 140, 0.14);
}

html[data-theme="dark"] .orb-three,
html[data-theme="vampire"] .orb-three {
    background: rgba(14, 165, 233, 0.12);
}

.reveal {
    animation: rise-in 700ms ease both;
}

.delay-1 {
    animation-delay: 120ms;
}

.delay-2 {
    animation-delay: 180ms;
}

.delay-3 {
    animation-delay: 240ms;
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float-orb {
    0%,
    100% {
        transform: translateY(0) translateX(0) scale(1);
    }
    50% {
        transform: translateY(-16px) translateX(12px) scale(1.05);
    }
}

@media (max-width: 960px) {
    .hero,
    .dashboard-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile/tablette : une seule colonne pour discipline-row,
       peu importe que l'image soit à gauche ou à droite sur desktop.
       L'image bascule toujours en dessous du texte.
       Le sélecteur composé .discipline-row--reverse.discipline-row--no-media
       est requis pour égaliser la spécificité 0-2-0 de la règle de base. */
    .discipline-row,
    .discipline-row--reverse,
    .discipline-row--no-media,
    .discipline-row--reverse.discipline-row--no-media {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .discipline-row > .discipline-text {
        order: 1;
    }

    .discipline-row > .discipline-media {
        order: 2;
    }

    /* Trop de texte en mobile : barre de défilement dans la description */
    .discipline-description__content {
        max-height: 200px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .site-announcement-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-announcement--payment .site-announcement-inner {
        flex-direction: row;
        align-items: flex-start;
    }

    .site-announcement--payment .site-announcement-message-wrap {
        width: 100%;
    }

    .site-announcement-close {
        margin-left: auto;
    }

    .social-widget-grid {
        grid-template-columns: 1fr;
    }

    .social-widget-card iframe {
        min-height: 280px;
    }

    /* Topbar: hamburger + brand + toolbar on first row, then nav */
    .topbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        padding: 0.7rem 0;
        gap: 0.45rem;
        min-height: var(--topbar-height, 66px);
    }

    .brand,
    .toolbar,
    .main-nav {
        grid-area: auto;
    }

    .brand {
        order: 2;
        min-width: 0;
        gap: 0;
    }

    .brand .brand-mark {
        display: none;
    }

    .brand-copy {
        max-width: 100%;
    }

    .brand strong {
        font-size: 0.94rem;
    }

    .brand strong.brand-title.brand-title-compact {
        font-size: 0.84rem;
        line-height: 1.1;
    }

    .brand.brand--hide-mark {
        gap: 0;
    }

    .brand.brand--hide-mark .brand-mark {
        display: none;
    }

    .brand.brand--hide-mark .brand-copy {
        max-width: 100%;
    }

    .toolbar {
        order: 3;
        width: auto;
        min-width: 0;
        justify-content: flex-end;
        gap: 0.55rem;
        padding: 0;
        border-top: 0;
        flex-wrap: nowrap;
    }

    .session-links {
        min-width: 0;
        position: relative;
    }

    .page-manage-actions {
        gap: 0.3rem;
    }

    .page-manage-action {
        width: 44px;
        min-width: 44px;
        padding: 0;
        border-radius: 12px;
        gap: 0;
    }

    .page-manage-action span {
        display: none;
    }

    .session-login-link {
        padding-inline: 0.82rem;
        font-size: 0.92rem;
    }

    .session-login-link--icon {
        width: 44px;
        min-width: 44px;
        padding: 0;
    }

    .nav-toggle {
        display: flex;
        order: 1;
        margin-left: 0;
    }

    /* Nav hidden by default — revealed by hamburger with .is-open class */
    .main-nav {
        order: 4;
        grid-column: 1 / -1;
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 0.6rem 0 0.5rem;
        border-top: 0;
        background-image: linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        );
        background-repeat: no-repeat;
        background-size: 100% 1px;
        background-position: top left;
    }

    .main-nav.is-open {
        display: flex;
        max-height: min(70vh, 520px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    @supports (-webkit-touch-callout: none) {
        .main-nav.is-open {
            max-height: min(70dvh, 520px);
            padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
            overscroll-behavior: contain;
        }
    }

    .main-nav a {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0.72rem 0.78rem;
        border-radius: 12px;
        min-height: 46px;
    }

    .main-nav .nav-link-temporary {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0.72rem 0.78rem;
        border-radius: 12px;
        min-height: 46px;
    }

    .main-nav .nav-link-primary {
        background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
    }

    .main-nav .nav-link-secondary {
        background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
        border-color: color-mix(in srgb, var(--line) 92%, transparent);
    }

    .main-nav .nav-link-highlight {
        background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
        border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    }

    .nav-submenu {
        width: 100%;
    }

    .nav-submenu-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 46px;
    }

    .nav-submenu-panel {
        position: static;
        display: none;
        min-width: 0;
        margin-top: 0.22rem;
        border-radius: 12px;
        box-shadow: none;
        background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
    }

    .nav-submenu[open] .nav-submenu-panel {
        display: grid;
    }

    .main-nav .calendar-member-filter-indicator {
        display: none;
    }

    /* Restaurer le style actif sur mobile (pas de glider) */
    .main-nav[data-button-indicator-ready] .nav-link.is-active {
        background: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
        border-color: color-mix(in srgb, var(--accent) 84%, #000000 16%);
    }

    .main-nav a::after {
        display: none;
    }

    .main-nav summary::after {
        display: none;
    }

    .profile-menu-panel {
        right: 0;
        left: auto;
        min-width: min(250px, calc(100vw - 3.75rem));
        width: min(85vw, 320px);
        max-width: calc(100vw - 3.75rem);
        max-height: min(70vh, 520px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 24;
    }

    @supports (-webkit-touch-callout: none) {
        .profile-menu-panel {
            max-height: min(70dvh, 520px);
            padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
        }
    }

    .session-links .profile-menu {
        position: static;
    }

    .profile-preview-option {
        min-height: 44px;
        padding: 0.55rem 0.62rem;
    }

    .profile-menu-toggle {
        width: auto;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        padding: 0.35rem;
        gap: 0;
    }

    .profile-menu-toggle .session-user {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .profile-menu-toggle::after {
        display: none;
    }

    .profile-menu-label,
    .profile-menu:focus-within .profile-menu-label,
    .profile-menu[open] .profile-menu-label {
        display: none;
        max-width: 0;
        opacity: 0;
        transform: translateX(-0.2rem);
    }

    .profile-menu-panel a {
        min-height: 44px;
        padding: 0.55rem 0.62rem;
    }

    .profile-role-preview-select {
        min-height: 44px;
    }

    .role-preview-banner {
        align-items: flex-start;
    }

    .theme-picker {
        margin-left: 0;
    }

    .theme-picker > span {
        display: none;
    }

    .theme-picker__summary {
        min-height: 44px;
    }

    .theme-picker__summary-label {
        display: none;
    }

    .theme-picker--public {
        max-width: calc(100vw - 1rem);
    }

    .theme-picker__panel {
        max-width: calc(100vw - 1rem);
    }

    h1 {
        font-size: clamp(1.9rem, 5.8vw, 2.55rem);
        line-height: 1.04;
    }

    h2 {
        font-size: clamp(1.35rem, 4.2vw, 1.9rem);
        line-height: 1.08;
    }

    h3 {
        font-size: clamp(1.05rem, 2.8vw, 1.25rem);
        line-height: 1.15;
    }

    .section-heading {
        gap: 0.85rem;
    }

    .section-heading p {
        font-size: 0.98rem;
        line-height: 1.6;
    }

    .section-heading .eyebrow {
        gap: 0.38rem;
        padding: 0.34rem 0.68rem;
        font-size: 0.72rem;
        letter-spacing: 0.13em;
    }

    .section-heading .eyebrow::before {
        width: 0.48rem;
        height: 0.48rem;
    }

    .section-heading h1,
    .section-heading h2,
    .hero-copy h1 {
        max-width: 14ch;
        line-height: 1.04;
    }

    .split-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .feature-grid,
    .panel-grid,
    .form-grid,
    .form-grid--3 {
        grid-template-columns: 1fr;
    }

    .doc-flow-grid {
        grid-template-columns: 1fr;
    }

    .doc-flow-filter {
        width: 100%;
        justify-content: center;
    }

    .doc-flow-filter__button {
        flex: 1 1 0;
        justify-content: center;
    }

    .doc-flow-step {
        min-height: auto;
    }

    .doc-flow-step::after {
        right: auto;
        top: auto;
        bottom: -0.45rem;
        left: calc(50% - 1px);
        width: 2px;
        height: 0.5rem;
    }

    .sys-dojo-address-grid {
        grid-template-columns: 1fr;
    }

    .sys-dojo-field,
    .sys-dojo-field--wide {
        grid-column: auto;
    }

    .registration-steps {
        grid-template-columns: 1fr;
    }

    .sortable-item {
        flex-direction: column;
    }

    .hero,
    .hero-copy,
    .hero-panel {
        border-radius: 24px;
    }

    .brand-mark {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .brand-mark img {
        padding: 0.25rem;
        border-radius: 12px;
    }

    .brand-mark.has-compact .brand-logo-main {
        display: none;
    }

    .brand-mark.has-compact .brand-logo-compact {
        display: block;
    }

    .background-orb {
        opacity: 0.42;
    }

    /* Minimum touch target for inline action buttons */
    .text-button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .inline-actions {
        margin-top: 0.75rem;
    }

    .admin-header-actions {
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-left: 0;
        flex-shrink: 1;
    }

    .ui-toggle,
    .sys-toggle {
        display: flex;
        width: 100%;
        align-items: flex-start;
        gap: 0.8rem;
        min-height: 44px;
        padding: 0.22rem 0;
    }

    .ui-toggle__track,
    .sys-toggle__track {
        flex: 0 0 auto;
        margin-top: 0.02rem;
    }

    .ui-toggle__text,
    .sys-toggle__text {
        flex: 1 1 auto;
        line-height: 1.45;
    }

    .registration-consent-toggle {
        justify-content: flex-start;
        text-align: left;
    }

    .member-grade-history-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: auto;
        min-width: 0;
    }

    .member-grade-history-actions .button,
    .member-grade-history-actions .btn-icon {
        justify-content: center;
    }

    .member-grade-assignment-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .member-grade-inline-submit {
        align-items: stretch;
    }

    .member-grade-inline-submit .button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .federation-members-filter-actions .button {
        width: 100%;
        justify-content: center;
    }

    .registration-progress-meta__header {
        margin-bottom: 0;
    }

    .registration-step-picker {
        display: block;
        align-items: center;
        margin-top: 0.75rem;
    }

    .registration-step-picker__button {
        display: none;
    }

    .registration-steps {
        display: none;
    }

    .registration-page .registration-nav {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0.55rem;
    }

    .registration-page .registration-nav__family-link,
    .registration-page .registration-nav__draft-clear {
        margin-right: 0;
    }

    .registration-page .registration-nav .button,
    .registration-page .registration-nav .submit-button,
    .registration-page .registration-nav input.button,
    .registration-page .registration-nav input.submit-button {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .registration-member-substeps {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.2rem;
        margin-inline: -0.1rem;
        padding-inline: 0.1rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .registration-member-substep {
        flex: 0 0 auto;
        min-height: 44px;
        scroll-snap-align: start;
    }

    .role-preview-banner {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0.6rem;
        padding: 0.72rem 0.8rem;
    }

    .role-preview-banner p {
        flex: 1 1 auto;
        min-width: 0;
    }

    .role-preview-banner-form {
        width: auto;
        margin-left: 0;
        align-self: flex-start;
        display: inline-flex;
        justify-content: flex-end;
        flex: 0 0 auto;
    }

    .role-preview-banner-close {
        width: 46px;
        height: 46px;
        min-width: 46px;
        min-height: 46px;
        font-size: 1.05rem;
    }

    .summary-row {
        grid-template-columns: 1fr;
        gap: 0.12rem;
    }

    .summary-key {
        font-size: 0.78rem;
    }

    .topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    @supports (-webkit-touch-callout: none) {
        .topbar {
            padding-left: max(0.45rem, env(safe-area-inset-left));
            padding-right: max(0.45rem, env(safe-area-inset-right));
        }

        .profile-menu-panel,
        .theme-picker__panel {
            max-width: calc(100vw - 0.75rem);
        }
    }

    .brand small {
        display: none;
    }

    .brand-copy {
        max-width: 100%;
    }

    .brand strong {
        font-size: 0.91rem;
        line-height: 1.12;
        text-wrap: normal;
    }

    .brand strong.brand-title.brand-title-compact {
        font-size: 0.8rem;
        line-height: 1.08;
    }

    .theme-picker__summary {
        min-width: 42px;
        min-height: 42px;
        justify-content: center;
        padding: 0.58rem;
    }

    .theme-picker__summary-label {
        display: none;
    }

    .theme-picker__summary::after {
        display: none;
    }

    h1 {
        font-size: clamp(1.78rem, 7vw, 2.15rem);
    }

    h2 {
        font-size: clamp(1.24rem, 5.1vw, 1.58rem);
        line-height: 1.1;
    }

    .section-heading {
        gap: 0.7rem;
    }

    .section-heading p {
        font-size: 0.93rem;
        line-height: 1.55;
    }

    .section-heading .eyebrow {
        max-width: 100%;
        font-size: 0.68rem;
        letter-spacing: 0.11em;
    }

    .section-heading h1,
    .section-heading h2,
    .hero-copy h1 {
        max-width: 12ch;
    }

    .session-user {
        max-width: 112px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ui-toggle,
    .sys-toggle {
        gap: 0.72rem;
    }

    .ui-toggle__text,
    .sys-toggle__text {
        font-size: 0.95rem;
    }

    .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
        justify-content: center;
    }

    .schedule-page .inline-actions {
        width: 100%;
    }

    .schedule-page .inline-actions .button {
        width: 100%;
        justify-content: center;
    }

    .admin-header-actions .button.primary {
        width: auto;
    }

    .details-bulk-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .details-bulk-actions .button.small {
        order: 2;
        width: calc(50% - 0.25rem);
    }

    .details-bulk-actions .button:not(.small) {
        order: 1;
        width: 100%;
    }

    .calendar-page .cal-period-nav--top {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .calendar-page .calendar-ics-share__body {
        grid-template-columns: 1fr;
    }

    .calendar-page .calendar-ics-share__summary {
        grid-template-columns: 1fr auto;
    }

    .calendar-page .calendar-ics-share .calendar-section-toggle {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        justify-self: end;
    }

    .calendar-page .calendar-ics-share__qr-wrap {
        justify-self: start;
    }

    .calendar-page .cal-period-nav__button {
        width: 100%;
        white-space: normal;
    }

    .calendar-page .calendar-ics-share__url a {
        width: 100%;
        display: inline-flex;
        justify-content: center;
    }

    .calendar-page .cal-legend {
        gap: 0.6rem;
        grid-template-columns: 1fr;
    }

    .calendar-page .cal-grid {
        min-width: 420px;
    }

    .calendar-page .cal-day {
        min-height: 72px;
    }

    .profile-page .role-badges {
        width: 100%;
    }

    .profile-page .role-badges .badge {
        white-space: normal;
    }

    .profile-page .family-form-details .submit-button {
        width: 100%;
        justify-content: center;
    }

    .registrations-page .period-navigation,
    .registrations-page .registration-header,
    .conversations-page .conversation-header,
    .conversations-page .conversation-footer,
    .print-layout .detail-row {
        flex-direction: column;
    }

    .registrations-page .period-label,
    .registrations-page .registration-status {
        width: 100%;
    }

    .registrations-page .registration-state-timeline {
        grid-template-columns: 1fr;
    }

    .conversations-page .conversation-footer,
    .print-layout .detail-row .value {
        align-items: flex-start;
        text-align: left;
    }

    .conversations-page .conversation-footer,
    .print-layout .detail-row {
        gap: 0.75rem;
    }

    .print-layout .print-info {
        gap: 0.9rem;
    }

    .schedule-page .schedule-summary-grid {
        grid-template-columns: 1fr;
    }

    .schedule-page .schedule-group-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .schedule-page .schedule-group-head .badge {
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }

    .schedule-page .schedule-slot-main {
        flex-direction: row;
        align-items: center;
        width: 100%;
        gap: 0.35rem;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
    }

    .schedule-page .schedule-slot-main span {
        margin-left: 0;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .schedule-page .schedule-slot-main .pricing-dot {
        display: none;
    }

    .pricing-page .pricing-line-main,
    .schedule-page .pricing-line-main {
        flex-wrap: nowrap;
        align-items: baseline;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pricing-page .pricing-amount,
    .schedule-page .pricing-amount {
        white-space: nowrap;
    }

    .schedule-page .pricing-course-count {
        width: auto;
        margin-left: 0;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .schedule-page .schedule-age-chip {
        font-size: 0.94rem;
    }

    .schedule-page .schedule-course-swatch {
        width: 0.88rem;
        height: 0.88rem;
    }

    .schedule-page .schedule-group-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .schedule-page .schedule-group-actions .button {
        width: 100%;
        justify-content: center;
    }

    .schedule-page .schedule-group-actions .schedule-action-register {
        grid-column: 1 / -1;
    }

    .pricing-page .pricing-discipline-link,
    .schedule-page .pricing-discipline-link {
        width: 100%;
        justify-content: flex-start;
    }

    .discipline-row,
    .discipline-row--reverse,
    .discipline-row--no-media,
    .discipline-row--reverse.discipline-row--no-media {
        grid-template-columns: 1fr;
        width: 100%;
        margin: 0;
        border-left-width: 1px;
        min-height: 0;
    }

    .discipline-row > .discipline-text {
        order: 1;
    }

    .discipline-row > .discipline-media {
        order: 2;
    }

    .discipline-schedule-cta {
        min-height: 0;
        padding-block: 0.35rem;
        border-radius: 10px;
        padding-inline: 0.95rem;
    }

    .discipline-media-stage {
        padding: 0.48rem;
        min-height: 0;
    }

    .discipline-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discipline-photo-grid .discipline-photo,
    .discipline-photo-grid .discipline-photo:nth-child(1),
    .discipline-photo-grid .discipline-photo:nth-child(2),
    .discipline-photo-grid .discipline-photo:nth-child(3),
    .discipline-photo-grid .discipline-photo:nth-child(4) {
        grid-column: span 1;
    }

    .discipline-photo--lead .discipline-photo-trigger {
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .discipline-heading-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .disciplines-hero .inline-actions {
        width: 100%;
    }

    .disciplines-hero .inline-actions .button {
        width: 100%;
        justify-content: center;
    }

    .discipline-current-carousel-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .discipline-current-carousel-nav {
        width: 100%;
    }

    .discipline-current-carousel-nav .button {
        flex: 1 1 0;
    }

    .discipline-current-carousel-track {
        grid-auto-columns: minmax(250px, 70%);
    }

    .member-grade-history-filters__actions {
        width: 100%;
    }

    .member-grade-history-filters__actions .button {
        width: 100%;
        justify-content: center;
    }

    .member-grade-history-page .table-wrap {
        overflow-x: auto;
    }

    .member-grade-history-table {
        min-width: 680px;
    }

    .admin-user-search-input {
        min-width: 0;
        width: 100%;
    }

    .verify-email-resend-row .button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .main-nav.is-open {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: flex-start;
        gap: 0.45rem;
        max-height: min(64vh, 460px);
        padding-top: 0.55rem;
    }

    .main-nav a,
    .main-nav .nav-submenu-toggle {
        min-height: 46px;
        padding: 0.62rem 0.66rem;
        font-size: 0.92rem;
    }

    .main-nav .nav-link-temporary {
        min-height: 46px;
        padding: 0.62rem 0.66rem;
        font-size: 0.92rem;
    }

    .main-nav .nav-submenu {
        grid-column: 1 / -1;
    }

    .main-nav .nav-submenu-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
        padding: 0.4rem;
    }

    .main-nav .nav-submenu-panel .nav-link {
        min-height: 44px;
    }

    .federation-members-filter-actions {
        gap: 0.7rem;
    }

    .federation-members-stat-value {
        font-size: 1.3rem;
    }

    .federation-members-col-address,
    .federation-members-cell-address {
        max-width: 170px;
    }

    .discipline-current-carousel-track {
        grid-auto-columns: minmax(220px, 92%);
    }

    .discipline-current-card__actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 360px) {
    .main-nav.is-open,
    .main-nav .nav-submenu-panel {
        grid-template-columns: 1fr;
    }

    .federation-members-stat-card {
        padding: 0.75rem;
    }

    .federation-members-stat-value {
        font-size: 1.15rem;
    }

    .federation-members-col-address,
    .federation-members-cell-address {
        max-width: 150px;
    }

    .discipline-current-carousel-track {
        grid-auto-columns: minmax(200px, 96%);
    }
}

body[data-motion-level="reduced"] .reveal,
body[data-motion-level="reduced"] .background-orb {
    animation: none !important;
}

body[data-motion-level="reduced"] * {
    transition-duration: 0ms !important;
}

body[data-motion-level="dynamic"] .reveal {
    animation-duration: 860ms;
}

body[data-motion-level="dynamic"] .background-orb {
    animation-duration: 9s;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════
   PETITS ÉCRANS (≤ 480px)
═══════════════════════════════════════ */

@media (max-width: 560px) {
    .schedule-editor-row__day {
        min-width: unset;
    }

    .schedules-editor__add {
        flex-direction: column;
        align-items: stretch;
    }

    .schedules-editor__add-submit {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    .registration-progress-meta {
        padding: 0.85rem 0.9rem;
        border-radius: 16px;
    }

    .registration-progress-meta__header {
        margin-bottom: 0.7rem;
    }

    .registration-progress-meta__status {
        font-size: 0.95rem;
    }

    .registration-progress-meta__hint {
        font-size: 0.88rem;
    }

    .registration-step-picker {
        display: block;
    }

    .registration-step-picker__select {
        width: 100%;
        justify-content: center;
    }

    .hero,
    .section {
        padding: 2rem 0 1.2rem;
    }

    .hero-copy {
        padding: 1.4rem 1.2rem;
    }

    .content-card,
    .form-card {
        padding: 1.1rem;
        border-radius: 20px;
    }

    h1 {
        font-size: clamp(1.62rem, 8vw, 1.95rem);
        line-height: 1.05;
    }

    h2 {
        font-size: clamp(1.16rem, 6.2vw, 1.42rem);
    }

    h3 {
        font-size: 1rem;
    }

    .hero-copy h1,
    .section-heading h1,
    .section-heading h2 {
        max-width: 11ch;
    }

    .section-heading p {
        font-size: 0.9rem;
    }

    .section-heading .eyebrow {
        padding: 0.3rem 0.56rem;
        font-size: 0.64rem;
        letter-spacing: 0.1em;
    }

    /* Masquer l'étiquette "Thème" pour gagner de la place */
    .theme-picker > span {
        display: none;
    }

    .profile-menu-panel {
        width: min(85vw, 300px);
        max-width: calc(100vw - 3.4rem);
    }

    .role-preview-banner {
        padding: 0.68rem 0.75rem;
    }

    .role-preview-banner p {
        font-size: 0.9rem;
    }

    /* Réduire la marque dans la barre d'en-tête */
    .brand-mark {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .brand-mark img {
        padding: 0.22rem;
        border-radius: 11px;
    }

    .topbar {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "toggle brand"
            "toolbar toolbar"
            "nav nav";
        column-gap: 0.5rem;
        row-gap: 0.55rem;
    }

    .nav-toggle {
        grid-area: toggle;
        order: 0;
    }

    .brand {
        grid-area: brand;
        order: 0;
        min-width: 0;
        gap: 0.55rem;
    }

    .brand strong {
        font-size: 0.9rem;
        line-height: 1.14;
        overflow-wrap: normal;
        word-break: keep-all;
    }

    .toolbar {
        grid-area: toolbar;
        order: 0;
        width: 100%;
        justify-content: flex-end;
        overflow: visible;
        flex-wrap: wrap;
    }

    .session-links {
        min-width: 0;
    }

    .session-login-link {
        padding: 0.5rem 0.72rem;
        font-size: 0.88rem;
    }

    .session-login-link--icon {
        width: 40px;
        min-width: 40px;
    }

    .theme-picker__summary {
        min-width: 40px;
        min-height: 40px;
    }

    .theme-picker__summary-icon {
        width: 1.05rem;
        height: 1.05rem;
    }

    .member-grade-history-table {
        min-width: 620px;
    }

    .brand-copy {
        max-width: 100%;
    }

    .ui-toggle,
    .sys-toggle {
        gap: 0.65rem;
    }

    .ui-toggle__track,
    .sys-toggle__track {
        width: 3rem;
        height: 1.78rem;
    }

    .ui-toggle__thumb,
    .sys-toggle__thumb {
        width: 1.34rem;
        height: 1.34rem;
    }

    .ui-toggle__input:checked + .ui-toggle__track .ui-toggle__thumb,
    .sys-toggle__input:checked + .sys-toggle__track .sys-toggle__thumb {
        transform: translateX(1.22rem);
    }

    /* Tables : réduire le padding des cellules pour gagner de la place */
    th,
    td {
        padding: 0.7rem 0.5rem;
        font-size: 0.9rem;
    }

    /* Espacement réduit pour les sections admin */
    .is-admin .section-heading h1 {
        font-size: clamp(1.3rem, 6vw, 1.6rem);
    }

    /* Empiler les actions dans split-heading */
    .split-heading .inline-actions {
        width: 100%;
    }

    .details-bulk-actions .button.small {
        width: 100%;
    }

    .admin-nav-stack .admin-quick-nav .button[data-short-label] {
        font-size: 0;
        letter-spacing: 0;
        padding-inline: 0.62rem;
    }

    .admin-nav-stack .admin-quick-nav .button[data-short-label]::after {
        content: attr(data-short-label);
        font-size: 0.79rem;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: normal;
    }

    /* Grille de sélection de membres : 1 colonne */
    .member-select-grid {
        grid-template-columns: 1fr;
    }

    /* Boutons registration step : empiler */
    .registration-nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .registration-nav .button,
    .registration-nav .submit-button,
    .registration-nav input.button,
    .registration-nav input.submit-button {
        width: 100%;
        justify-content: center;
    }

    .registration-step {
        padding: 0.7rem;
    }

    .registration-step__body strong {
        font-size: 0.92rem;
    }

    .member-select-card,
    .group-select-card {
        padding: 0.8rem 0.85rem;
    }

    /* Footer en 1 colonne */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .admin-hub-card .eyebrow {
        font-size: 0.78rem;
        letter-spacing: 0.11em;
    }

    .schedule-page .schedule-season-summary,
    .pricing-page .pricing-season-summary {
        min-height: 44px;
        align-items: flex-start;
    }

    .schedule-page .schedule-slot-main {
        flex-direction: row;
        align-items: center;
        gap: 0.28rem;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
    }

    .schedule-page .schedule-slot-main span {
        margin-left: 0;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .schedule-page .schedule-slot-main strong {
        flex: 0 0 auto;
    }

    .schedule-page .schedule-group-card,
    .schedule-page .schedule-slot-item,
    .schedule-page .pricing-list-item {
        padding: 0.72rem;
    }

    .schedule-page .schedule-group-actions {
        grid-template-columns: 1fr;
    }

    /* Admin nav : 2 colonnes pour garder des cartes lisibles */
    .admin-nav-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .admin-nav-card {
        min-height: 124px;
        font-size: 0.9rem;
        padding: 0.95rem 0.75rem;
    }

    .discipline-photo-grid {
        grid-template-columns: 1fr;
    }

    .discipline-media-stage__label {
        font-size: 0.74rem;
        letter-spacing: 0.1em;
    }

    .discipline-media-placeholder {
        min-height: 172px;
    }

    .discipline-lightbox__actions {
        justify-content: stretch;
    }

    .discipline-lightbox__actions .button {
        width: 50%;
        justify-content: center;
    }

    .social-widget-card iframe {
        min-height: 240px;
    }

    .import-stat-card {
        padding: 0.72rem 0.78rem;
    }

    .import-stat-card__label {
        font-size: 0.72rem;
    }

    .import-stat-card__value {
        font-size: 1.15rem;
    }
}

/* ═══════════════════════════════════════
   TABLETTES ET GRANDS TÉLÉPHONES (600px – 960px)
   iPad mini portrait, Galaxy Tab, iPhone Plus paysage
═══════════════════════════════════════ */

@media (min-width: 600px) and (max-width: 960px) {
    /* Rétablir les grilles à 2 colonnes sur tablette
       (la règle max-width:960 les a passées à 1 col) */
    .feature-grid,
    .panel-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .doc-flow-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .doc-flow-step::after {
        display: none;
    }

    .form-grid,
    .form-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sys-dojo-address-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sys-dojo-field,
    .sys-dojo-field--wide {
        grid-column: span 1;
    }

    .discipline-row {
        width: 100%;
    }

    .discipline-current-carousel-track {
        grid-auto-columns: minmax(250px, 46%);
    }

    /* Hero : restaurer les 2 colonnes côte à côte */
    .hero {
        grid-template-columns: 1.1fr 0.9fr;
    }

    /* Dashboard : conserver les 2 blocs côte à côte */
    .dashboard-grid {
        grid-template-columns: 1.35fr 0.85fr;
    }

    .message-thread-layout {
        grid-template-columns: 1fr 1fr;
    }

    .admin-message-thread-layout {
        grid-template-columns: 0.8fr 1.2fr;
    }

    /* Footer : 2 colonnes */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .social-widget-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Section-heading avec actions : côte à côte si l'espace le permet */
    .split-heading {
        flex-direction: row;
        align-items: flex-end;
    }
}

/* ═══════════════════════════════════════
   TRÈS PETITS ÉCRANS (≤ 360px)
   iPhone SE 1ʳᵉ gen, Galaxy A13, petits Android
═══════════════════════════════════════ */

@media (max-width: 360px) {
    .container {
        width: calc(100% - 1.25rem);
    }

    h1 {
        font-size: clamp(1.42rem, 8.4vw, 1.78rem);
        line-height: 1.06;
    }

    h2 {
        font-size: clamp(1.08rem, 6.4vw, 1.28rem);
        line-height: 1.12;
    }

    .section-heading p {
        font-size: 0.86rem;
    }

    .section-heading .eyebrow {
        gap: 0.3rem;
        padding: 0.28rem 0.5rem;
        font-size: 0.6rem;
    }

    .section-heading .eyebrow::before {
        width: 0.42rem;
        height: 0.42rem;
    }

    .hero-copy h1,
    .section-heading h1,
    .section-heading h2 {
        max-width: 10ch;
    }

    .role-preview-banner {
        border-radius: 12px;
    }

    .role-preview-banner p {
        font-size: 0.86rem;
    }

    .button,
    .submit-button {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .social-widget-card iframe {
        min-height: 220px;
    }

    /* Select thème ultra-compact */
    .theme-picker select {
        font-size: 0.82rem;
        padding: 0.45rem 0.35rem;
    }

    /* Cellules de tableau encore plus compactes */
    th,
    td {
        padding: 0.5rem 0.35rem;
        font-size: 0.82rem;
    }

    /* Cartes et formulaires sans arrondi excessif */
    .content-card,
    .form-card {
        border-radius: 16px;
    }

    .member-grade-history-table {
        min-width: 580px;
    }

    .brand {
        gap: 0.45rem;
    }

    .brand-copy {
        max-width: 100%;
    }

    .brand strong {
        font-size: 0.86rem;
    }

    .brand strong.brand-title.brand-title-compact {
        font-size: 0.76rem;
        line-height: 1.06;
    }

    .session-login-link {
        padding: 0.46rem 0.62rem;
        font-size: 0.82rem;
    }

    .session-login-link--icon {
        width: 38px;
        min-width: 38px;
    }

    .theme-picker__summary {
        min-width: 38px;
        min-height: 38px;
    }

    .theme-picker__summary-icon {
        width: 0.98rem;
        height: 0.98rem;
    }

    .import-stat-card {
        padding: 0.62rem 0.65rem;
    }

    .import-stat-card__label {
        font-size: 0.68rem;
    }

    .import-stat-card__value {
        font-size: 1.02rem;
    }

    .brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .brand-mark img {
        padding: 0.19rem;
        border-radius: 9px;
    }

    .profile-menu-toggle {
        width: min(100%, 250px);
        padding: 0.3rem 0.5rem;
        gap: 0.4rem;
    }

    .profile-menu-toggle::after {
        font-size: 0.72rem;
    }

    .profile-menu-toggle .session-user {
        max-width: 92px;
    }

    .profile-menu-panel {
        top: calc(100% + 0.35rem);
        right: 0;
        min-width: 0;
        width: min(84vw, 268px);
        max-width: calc(100vw - 3.75rem);
        border-radius: 12px;
        padding: 0.28rem;
        gap: 0.12rem;
    }

    .profile-menu-name {
        padding: 0.34rem 0.5rem;
        font-size: 0.8rem;
    }

    .profile-menu-panel a {
        min-height: 44px;
        padding: 0.48rem 0.5rem;
        font-size: 0.92rem;
    }

    .profile-menu-separator {
        margin: 0.2rem 0.5rem;
    }

    .profile-menu-count,
    .count-badge {
        width: 1.45rem;
        height: 1.45rem;
        min-width: 1.45rem;
        font-size: 0.66rem;
    }

    .count-badge--wide {
        width: auto;
        min-width: 1.45rem;
        padding: 0 0.3rem;
    }

    .admin-nav-grid,
    .admin-health-grid {
        grid-template-columns: 1fr;
    }

    .admin-nav-card {
        min-height: 108px;
        align-items: flex-start;
        text-align: left;
    }

    .calendar-page .cal-period-nav__button {
        font-size: 0.88rem;
        padding-inline: 0.7rem;
    }

    .calendar-page .calendar-ics-share__qr {
        max-width: 240px;
    }

    .calendar-page .cal-period-nav__direction {
        font-size: 0.85rem;
    }
}

/* ═══════════════════════════════════════
   GRANDS ÉCRANS (≥ 1400px)
   iMac, moniteurs 1440p, laptops 15"+
═══════════════════════════════════════ */

@media (min-width: 1400px) {
    .container {
        width: min(1360px, calc(100% - 4rem));
    }

    .content-card,
    .form-card {
        padding: 1.8rem 2rem;
    }

    .hero-copy {
        padding: 2.8rem;
    }

    .hero-panel {
        padding: 2rem;
    }

    .dashboard-grid {
        gap: 1.4rem;
    }

    /* Légèrement plus d'espace entre items de nav */
    .main-nav {
        gap: 1.1rem;
    }
}

/* ═══════════════════════════════════════
   ULTRA-LARGE (≥ 1920px)
   Moniteurs 4K, 32" et plus
═══════════════════════════════════════ */

@media (min-width: 1920px) {
    .container {
        width: min(1600px, calc(100% - 6rem));
    }

    h1 {
        font-size: 3.6rem;
    }

    h2 {
        font-size: 2.6rem;
    }

    .panel-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .feature-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .topbar {
        padding: 1.2rem 0;
        min-height: var(--topbar-height, 96px);
    }
}

/* ═══════════════════════════════════════
   APPAREILS TACTILES (pointer: coarse)
   Tous les téléphones et tablettes tactiles
═══════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    /* Supprimer les effets hover qui restent bloqués après le tap */
    .button:hover,
    .submit-button:hover {
        transform: none;
        filter: none;
    }

    .metric-card:hover,
    .card:hover {
        transform: none;
        box-shadow: var(--shadow-soft);
        border-color: var(--line);
    }

    .main-nav a:hover,
    .main-nav a:focus-visible {
        background: color-mix(in srgb, var(--accent-soft) 46%, transparent);
    }

    /* Cibles de tap ≥ 48px (recommandation WCAG) */
    .button,
    .submit-button {
        min-height: 48px;
    }

    .text-button {
        min-height: 44px;
        padding: 0.5rem 0.65rem;
        display: inline-flex;
        align-items: center;
    }

    .main-nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Select thème plus facile à manipuler */
    .theme-picker select {
        min-height: 44px;
    }

    /* Formulaires : légèrement plus grand */
    .form-input {
        padding: 1.05rem 1rem;
    }
}

/* ═══════════════════════════════════════
   TÉLÉPHONE EN MODE PAYSAGE (h ≤ 500px)
   iPhone 12/13/14 en landscape, etc.
═══════════════════════════════════════ */

@media (orientation: landscape) and (max-height: 500px) {
    /* Retirer le sticky header pour ne pas gaspiller la moitié de l'écran */
    .site-header {
        position: relative;
    }

    .topbar {
        padding: 0.45rem 0;
        min-height: var(--topbar-height, 52px);
    }

    .brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .hero,
    .section {
        padding: 1.5rem 0 1rem;
    }

    /* Nav ouverte : limiter la hauteur et permettre le défilement */
    .main-nav.is-open {
        max-height: 55vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Moins d'orbes visuelles (économie GPU) */
    .background-orb {
        opacity: 0.22;
    }
}

/* ═══════════════════════════════════════
   ADMINISTRATION
═══════════════════════════════════════ */

/* ── Admin nav grid (dashboard navigation) ─────────────────── */
.admin-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.65rem;
    margin-top: 1.2rem;
}

.dashboard-layout {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: row dense;
    gap: 0.9rem;
    align-items: stretch;
}

.dashboard-layout .spaced-top {
    margin-top: 0;
}

/* En mode optimisé, les paliers de hauteur utilisent 7rem au lieu de 10rem */
.dashboard-layout.dashboard-layout--optimized .dashboard-widget--height-fixed {
    min-height: calc((var(--dashboard-height-step, 1) - 1) * 7rem);
}

.dashboard-widget {
    --dashboard-col-span: 8;
    --dashboard-height-step: 1;
    grid-column: span var(--dashboard-col-span);
    min-width: 0;
    display: grid;
    gap: 0.55rem;
    align-content: start;
    position: relative;
    transform: translateZ(0);
    transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 120ms ease;
}

.dashboard-widget[hidden] {
    display: none;
}

/* Min height lié au widget, pas à la rangée grille.
   step=1 → 0rem (hauteur contenu), step=2 → 10rem, step=3 → 20rem… */
.dashboard-widget--height-fixed {
    min-height: calc((var(--dashboard-height-step, 1) - 1) * 10rem);
}

/* Au minimum, le widget épouse son contenu sans s'étirer
   pour remplir une rangée rendue haute par un voisin. */
.dashboard-widget--at-min {
    align-self: start;
}

.dashboard-widget.is-resizing {
    z-index: 32;
    box-shadow: 0 18px 38px color-mix(in srgb, var(--accent) 18%, transparent);
}

.dashboard-widget.is-resizing::before {
    content: "";
    position: absolute;
    inset: -0.2rem;
    border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: calc(var(--radius-lg) + 0.15rem);
    pointer-events: none;
    opacity: 0.95;
}

.dashboard-widget.is-resizing::after {
    content: "";
    position: absolute;
    inset: 0.45rem;
    border-radius: calc(var(--radius-md) * 0.95);
    pointer-events: none;
    opacity: 0.34;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px);
    background-size:
        var(--dashboard-resize-grid-x, 32px) 100%,
        100% var(--dashboard-resize-grid-y, 48px);
    background-position: top left;
}

body.dashboard-resize-active,
body.dashboard-resize-active * {
    cursor: var(--dashboard-resize-cursor, nwse-resize) !important;
    user-select: none;
}

body.dashboard-resize-active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px);
    background-size:
        var(--dashboard-resize-grid-x, 32px) 100%,
        100% var(--dashboard-resize-grid-y, 48px);
    background-position: top left;
    opacity: 0.42;
}

.dashboard-widget > :not(.dashboard-widget-resize-handle) {
    transition: opacity 120ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dashboard-widget.is-reflowing > :not(.dashboard-widget-toolbar):not(.dashboard-widget-resize-handle) {
    opacity: 0.94;
    transform: translateY(2px);
}

.dashboard-widget--width-full {
    grid-column: 1 / -1;
}

.dashboard-widget-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    border: 2px dashed color-mix(in srgb, var(--accent) 46%, var(--line));
    border-radius: 12px;
    padding: 0.45rem 0.55rem;
    background: color-mix(in srgb, var(--accent-soft) 56%, transparent);
}

.dashboard-widget-title-zone {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.2rem 0.3rem;
}


.dashboard-widget-resize-handle {
    position: absolute;
    right: 0.2rem;
    bottom: 0.12rem;
    z-index: 2;
    border: 0;
    background: transparent;
    color: transparent;
    border-radius: 999px;
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    cursor: nwse-resize;
    line-height: 1;
    font-size: 0;
    opacity: 0.8;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.dashboard-widget-resize-handle span {
    display: none;
}

.dashboard-widget-resize-feedback {
    position: absolute;
    right: 2.6rem;
    bottom: 0.55rem;
    z-index: 3;
    min-width: 8.2rem;
    max-width: calc(100% - 4.8rem);
    display: grid;
    gap: 0.1rem;
    padding: 0.38rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elevated-strong) 92%, var(--accent-soft));
    box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 10%, transparent);
    text-align: right;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.dashboard-widget-resize-feedback.is-snapped {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
}

.dashboard-widget-resize-feedback.is-minimum {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
}

.dashboard-widget-resize-feedback__size {
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
}

.dashboard-widget-resize-feedback__hint {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-widget--resize-disabled .dashboard-widget-resize-handle {
    display: none;
}

.dashboard-widget-resize-handle::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1.56rem;
    height: 1.56rem;
    border-right: 0.2rem solid color-mix(in srgb, var(--accent) 78%, var(--bg-elevated-strong));
    border-bottom: 0.2rem solid color-mix(in srgb, var(--accent) 78%, var(--bg-elevated-strong));
    border-bottom-right-radius: calc(var(--radius-md) * 0.88);
    box-sizing: border-box;
}

body[data-site-corner-style="sharp"] .dashboard-widget-resize-handle::after {
    width: 1.42rem;
    height: 1.42rem;
    border-bottom-right-radius: 0;
}

body[data-site-corner-style="soft"] .dashboard-widget-resize-handle::after,
body[data-site-corner-style="pill"] .dashboard-widget-resize-handle::after {
    right: 3px;
    bottom: 3px;
    width: 1.95rem;
    height: 1.95rem;
    border: 0.22rem solid color-mix(in srgb, var(--accent) 78%, var(--bg-elevated-strong));
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
}

.dashboard-widget:hover .dashboard-widget-resize-handle,
.dashboard-widget:focus-within .dashboard-widget-resize-handle,
.dashboard-widget.is-resizing .dashboard-widget-resize-handle {
    opacity: 1;
}

.dashboard-widget-resize-handle:hover,
.dashboard-widget-resize-handle:focus-visible {
    transform: scale(1.02);
}

.dashboard-widget-resize-handle:hover::after,
.dashboard-widget-resize-handle:focus-visible::after {
    border-right-color: color-mix(in srgb, var(--accent) 90%, var(--bg-elevated-strong));
    border-bottom-color: color-mix(in srgb, var(--accent) 90%, var(--bg-elevated-strong));
}

body[data-site-corner-style="soft"] .dashboard-widget-resize-handle:hover::after,
body[data-site-corner-style="soft"] .dashboard-widget-resize-handle:focus-visible::after,
body[data-site-corner-style="pill"] .dashboard-widget-resize-handle:hover::after,
body[data-site-corner-style="pill"] .dashboard-widget-resize-handle:focus-visible::after {
    border-color: color-mix(in srgb, var(--accent) 90%, var(--bg-elevated-strong));
    border-top-color: transparent;
    border-left-color: transparent;
}


.dashboard-widget.is-dragging,
.dashboard-widget.is-resizing {
    opacity: 0.7;
    z-index: 30;
}

.dashboard-widget.drop-target {
    outline: 2px dashed color-mix(in srgb, var(--accent) 48%, var(--line));
    outline-offset: 2px;
}

.dashboard-widget.dashboard-widget--resize-ready-x,
.dashboard-widget.dashboard-widget--resize-ready-y {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}

.dashboard-widget.dashboard-widget--resize-ready-x {
    cursor: ew-resize;
}

.dashboard-widget.dashboard-widget--resize-ready-y {
    cursor: ns-resize;
}

.dashboard-widget.dashboard-widget--resize-ready-x.dashboard-widget--resize-ready-y {
    cursor: nwse-resize;
}

.dashboard-widget-title {
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--dashboard-title-strong);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-right: auto;
}

.dashboard-widget-title--drag {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--dashboard-title-interactive);
    border-radius: 10px;
    padding: 0.24rem 0.56rem;
    text-align: left;
    cursor: grab;
    user-select: none;
    touch-action: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-widget-title--drag:active {
    cursor: grabbing;
}

.dashboard-widget-title--drag:hover,
.dashboard-widget-title--drag:focus-visible {
    border-color: transparent;
    background: transparent;
    color: var(--dashboard-title-strong);
}

.dashboard-widget-title--drag:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--dashboard-title-hover-border) 72%, transparent);
    outline-offset: 2px;
}

.dashboard-step-indicator {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.18rem 0.48rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--muted);
    background: color-mix(in srgb, var(--accent-soft) 32%, transparent);
}

.dashboard-list-indicator {
    display: block;
    width: 100%;
    flex-basis: 100%;
    grid-column: 1 / -1;
    margin: 0.1rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.recent-users-list {
    gap: 0.55rem;
}

.recent-user-item {
    padding: 0.72rem 0.8rem;
    display: grid;
    gap: 0.35rem;
}

.recent-user-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.recent-user-head strong {
    margin: 0;
    line-height: 1.2;
}

.recent-user-head small {
    color: var(--muted);
    line-height: 1.2;
}

.recent-user-meta {
    margin: 0;
    font-size: 0.9rem;
}

.recent-user-roles {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.recent-user-roles .badge {
    font-size: 0.72rem;
    padding: 0.14rem 0.42rem;
}

.admin-section-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.admin-dashboard-command {
    display: grid;
    gap: 0.85rem;
}

.admin-dashboard-search-row {
    display: grid;
    gap: 0.45rem;
}

.admin-dashboard-search-label-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-dashboard-search-label-row .form-label {
    margin: 0;
}

.admin-dashboard-search-label-row .help-tooltip--standalone {
    margin-top: 0;
}

.admin-dashboard-search-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.admin-dashboard-search-box .form-input {
    min-height: 46px;
}

.admin-dashboard-link-groups {
    display: grid;
    gap: 0.72rem;
}

.admin-dashboard-link-group {
    display: grid;
    gap: 0.5rem;
}

.admin-dashboard-link-group__label,
.admin-dashboard-presets__label {
    display: block;
    flex-basis: 100%;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
}

.admin-dashboard-section-separator {
    border-top: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    height: 1px;
    margin: 0.35rem 0 0.5rem;
}

.admin-dashboard-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.admin-dashboard-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin-top: 0.2rem;
}

.admin-dashboard-saved-layouts {
    display: grid;
    gap: 0.55rem;
}

.admin-dashboard-saved-layouts__form,
.admin-dashboard-saved-layouts__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
}

.admin-dashboard-saved-layouts__actions {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.admin-dashboard-saved-layouts .form-input {
    min-height: 44px;
}

.admin-dashboard-quick-link,
.admin-dashboard-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    background: var(--bg-elevated-strong);
    color: var(--text);
    border-radius: 999px;
    padding: 0.42rem 0.92rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.admin-dashboard-quick-link {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 34%, transparent);
}

.admin-dashboard-preset:hover,
.admin-dashboard-quick-link:hover,
.admin-dashboard-quick-link:focus-visible,
.admin-dashboard-preset:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 52%, transparent);
    transform: translateY(-1px);
}

.admin-dashboard-preset.is-active {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-elevated-strong));
    color: var(--accent-strong);
}

.admin-dashboard-preset--restore:not(:disabled) {
    border-style: dashed;
}

.admin-dashboard-preset:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.admin-dashboard-quick-link--jump {
    color: var(--text);
}

.admin-dashboard-quick-link--parcours {
    color: var(--text);
}

.admin-dashboard-quick-link--parcours:hover,
.admin-dashboard-quick-link--parcours:focus-visible,
.admin-dashboard-quick-link--jump:hover,
.admin-dashboard-quick-link--jump:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 52%, transparent);
    color: var(--accent-strong);
}

.sys-dashboard-stats-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: stretch;
}

.sys-dashboard-stat-card {
    flex: 1 1 calc(33.333% - 0.67rem);
    min-width: 0;
    padding: 1.25rem 1rem;
}

.sys-dashboard-transfer-actions {
    align-items: stretch;
}

.sys-dashboard-upload-form {
    flex: 1 1 19rem;
    min-width: min(100%, 19rem);
}

.sys-kamatera-billing-stats {
    margin-top: 1rem;
}

.sys-kamatera-billing-period {
    margin-top: 1rem;
}

.sys-kamatera-billing-table-wrap {
    margin-top: 1rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--accent-soft) 24%, transparent) 0%, transparent 44%),
        linear-gradient(165deg, color-mix(in srgb, var(--bg-elevated-strong) 92%, var(--accent-soft) 8%), var(--bg-elevated));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

.sys-kamatera-billing-table thead th {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.76rem;
}

.sys-kamatera-billing-table tbody tr {
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.sys-kamatera-billing-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
}

.sys-kamatera-billing-row--credit {
    background: color-mix(in srgb, #16a34a 8%, transparent);
}

.sys-kamatera-billing-row--traffic {
    background: color-mix(in srgb, #0ea5e9 7%, transparent);
}

.sys-kamatera-billing-units,
.sys-kamatera-billing-cost {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sys-kamatera-billing-cost {
    text-align: right;
}

.sys-kamatera-cost-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.sys-kamatera-cost-pill--credit {
    border-color: color-mix(in srgb, #16a34a 52%, var(--line));
    background: color-mix(in srgb, #16a34a 24%, var(--accent-soft));
    color: color-mix(in srgb, #f0fdf4 92%, #ffffff 8%);
}

.sys-kamatera-cost-pill--debit {
    border-color: color-mix(in srgb, var(--line) 76%, #ffffff 24%);
    background: color-mix(in srgb, var(--bg-elevated-strong) 76%, var(--accent-soft) 24%);
    color: var(--text);
}

.sys-kamatera-cost-pill--traffic {
    border-color: color-mix(in srgb, #0ea5e9 44%, var(--line));
    background: color-mix(in srgb, #0ea5e9 18%, var(--accent-soft));
    color: color-mix(in srgb, #e0f2fe 88%, #ffffff 12%);
}

.sys-kamatera-raw-details {
    margin-top: 1rem;
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated-strong) 86%, var(--accent-soft) 14%);
    overflow: hidden;
}

.sys-kamatera-raw-summary {
    width: 100%;
    min-height: 44px;
    padding: 0.72rem 0.95rem;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.sys-kamatera-raw-pre {
    margin: 0;
    padding: 0.8rem 0.95rem 1rem;
    white-space: pre-wrap;
    overflow: auto;
    max-height: 360px;
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    font-size: 0.84rem;
    line-height: 1.45;
}

.sys-dashboard-drop-zone {
    min-height: 44px;
}

.admin-item-headline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.admin-empty-state {
    border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: 16px;
    padding: 1rem 1.05rem;
    background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
}

.admin-empty-state strong {
    display: block;
    margin-bottom: 0.25rem;
}

.admin-empty-state p {
    margin: 0;
    color: var(--muted);
}

.admin-favorites-list {
    display: grid;
    gap: 0.65rem;
}

.admin-favorite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(160deg, var(--bg-elevated-strong), color-mix(in srgb, var(--accent-soft) 18%, var(--bg-elevated)));
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.admin-favorite-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--bg-elevated));
}

.admin-favorite-item__content {
    min-width: 0;
}

.admin-favorite-item__content strong {
    display: block;
    margin-bottom: 0.2rem;
}

.admin-favorite-item__content p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.admin-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    justify-items: stretch;
}

.admin-quick-card {
    border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
    border-radius: 20px;
    padding: 1.1rem 1.15rem;
    background:
        radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--accent-soft) 18%, transparent) 0%, transparent 38%),
        linear-gradient(160deg, var(--bg-elevated-strong), color-mix(in srgb, var(--accent-soft) 14%, var(--bg-elevated)));
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 4%, transparent);
    transition: border-color var(--transition-medium), box-shadow var(--transition-medium),
                opacity 0.17s ease, transform 0.17s ease;
}

.admin-quick-card.is-filter-exiting {
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
}

.admin-quick-card.is-filter-hidden {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .admin-quick-card.is-filter-exiting {
        transition: none;
    }
}

.admin-quick-card:hover {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 8%, transparent);
    transform: translateY(-2px);
}

.admin-quick-card--primary {
    background: var(--admin-quick-primary-bg);
    border-color: color-mix(in srgb, var(--admin-quick-primary-border) 90%, var(--accent) 10%);
    color: var(--admin-quick-primary-text);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--admin-quick-primary-text) 8%, transparent);
}

.admin-quick-card--primary:hover {
    border-color: color-mix(in srgb, var(--admin-quick-primary-border) 88%, var(--accent) 12%);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--admin-quick-primary-text) 12%, transparent);
    transform: translateY(-2px);
}

.admin-quick-card--primary .eyebrow,
.admin-quick-card--primary .admin-quick-card__description,
.admin-quick-card--primary .admin-stat-pill {
    color: inherit;
}

.admin-quick-card--primary .admin-quick-card__head .eyebrow {
    color: var(--admin-quick-primary-text);
    text-shadow: var(--admin-quick-primary-heading-shadow);
}

.admin-quick-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding-bottom: 0.3rem;
    border-bottom: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) bottom / 100% 1px no-repeat;
}

.admin-quick-card__head h2 {
    font-size: clamp(1.08rem, 1.9vw, 1.38rem);
    font-weight: 800;
    line-height: 1.15;
}

.admin-quick-card__head .eyebrow {
    font-size: clamp(1.08rem, 1.9vw, 1.38rem);
    font-weight: 800;
    color: var(--dashboard-title-emphasis);
    line-height: 1.15;
    margin: 0;
    flex: 1;
}

.admin-health-item .eyebrow {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--dashboard-title-emphasis);
}

.admin-quick-card__count {
    display: inline-grid;
    place-items: center;
    min-width: 2.65rem;
    min-height: 2.65rem;
    padding: 0.45rem 0.65rem;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    border-radius: 12px;
    transition: all var(--transition-fast);
}

.admin-quick-card--primary .admin-quick-card__count {
    background: var(--admin-quick-primary-count-bg);
    border-color: var(--admin-quick-primary-count-border);
    color: var(--admin-quick-primary-text);
}

.admin-quick-card__description {
    margin: 0;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.4;
    letter-spacing: 0.3px;
    margin-bottom: -0.25rem;
}

.admin-quick-card__metrics,
.admin-quick-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.admin-quick-card__metrics {
    min-height: 1.8rem;
}

.admin-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.68rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 65%, var(--accent-soft) 35%);
    color: var(--muted);
    font-size: 0.81rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    cursor: default;
    transition: all var(--transition-fast);
}

.admin-stat-pill--alert {
    background: color-mix(in srgb, #b42318 20%, var(--bg-elevated));
    border-color: color-mix(in srgb, #b42318 52%, var(--line));
    color: color-mix(in srgb, #6f120c 72%, var(--text));
    font-weight: 800;
}

.admin-stat-pill--alert i {
    font-size: 0.95rem;
}

.admin-quick-card--primary .admin-stat-pill {
    background: var(--admin-quick-primary-pill-bg);
    border-color: var(--admin-quick-primary-pill-border);
    color: var(--admin-quick-primary-pill-text);
}

.admin-quick-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0;
    background: transparent;
    border: none;
    margin-top: 0.65rem;
    transition: all var(--transition-fast);
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
    padding-top: 0.75rem;
}

.admin-quick-card--primary .admin-quick-card__actions {
    background: var(--admin-quick-primary-actions-bg);
    border-color: var(--admin-quick-primary-actions-border);
}

.admin-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    justify-items: stretch;
}

.admin-hub-spotlight {
    gap: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    background:
        radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--accent-soft) 30%, transparent) 0%, transparent 42%),
        color-mix(in srgb, var(--bg-elevated) 92%, var(--accent-soft) 8%);
}

.admin-hub-spotlight__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.admin-hub-card {
    display: grid;
    gap: 0.75rem;
    border-radius: 20px;
    overflow: hidden;
    transition: all var(--transition-medium);
    align-content: start;
    scroll-margin-top: calc(var(--header-height-compact, 3.8rem) + 3rem);
}

/* Widget bienvenue complété — version compacte ─────────────────── */
.admin-hub-card--setup-complete [data-dashboard-panel-content] {
    display: none;
}

.admin-hub-card--setup-complete .dashboard-panel-header {
    display: none;
}

.admin-hub-card--setup-complete .admin-hub-head {
    padding-bottom: 0;
}

.admin-hub-card--setup-complete .admin-hub-setup-done {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.15rem 0 0.35rem;
}

.admin-hub-setup-done {
    display: none;
}
/* /Widget bienvenue complété ─────────────────────────────────── */

.admin-hub-card:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 8%, transparent);
    transform: translateY(-2px);
}

.admin-hub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.admin-hub-card .eyebrow {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--accent-strong) 72%, var(--text) 28%);
    text-transform: uppercase;
}

.admin-hub-stats {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.admin-hub-description {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.35;
    letter-spacing: 0.2px;
}

.admin-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    transition: all var(--transition-fast);
}

.admin-hub-actions--quick {
    margin-top: 0.25rem;
}

.admin-hub-metrics + .admin-hub-actions {
    margin-top: 0.85rem;
}

.admin-hub-actions--secondary {
    padding-top: 0.5rem;
}

.admin-hub-actions-group {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.admin-hub-actions-group .admin-hub-actions {
    padding: 0.62rem 0.7rem;
}

.admin-hub-actions-group .admin-hub-actions--secondary {
    padding: 0.5rem 0.7rem;
    background: color-mix(in srgb, var(--bg-elevated) 55%, transparent);
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat,
        color-mix(in srgb, var(--bg-elevated) 55%, transparent);
}

.admin-hub-workflow {
    margin: 0.2rem 0 0;
    padding-left: 1.15rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.admin-hub-workflow li + li {
    margin-top: 0.35rem;
}

.admin-hub-more {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
    margin-top: 0;
    padding-top: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease, padding-top 0.2s ease;
}

.admin-hub-card:hover .admin-hub-more,
.admin-hub-card:focus-within .admin-hub-more,
.admin-hub-card.is-search-match .admin-hub-more {
    max-height: 25rem;
    opacity: 1;
    pointer-events: auto;
    margin-top: 0.35rem;
    padding-top: 0.45rem;
}

@media (hover: none), (max-width: 960px) {
    .admin-hub-more {
        max-height: none;
        opacity: 1;
        pointer-events: auto;
        margin-top: 0.35rem;
        padding-top: 0.45rem;
        transition: none;
    }
}

/* ── Hub disclosure toggle (grille modules repliable) ──────────── */
.admin-hubs-disclosure {
    margin-top: 0;
}

.admin-hubs-disclosure__toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    list-style: none;
    cursor: pointer;
    padding: 0.65rem 1rem;
    margin-top: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 10px);
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    color: var(--text);
    opacity: 0.72;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
    user-select: none;
}

.admin-hubs-disclosure__toggle::-webkit-details-marker,
.admin-hubs-disclosure__toggle::marker {
    display: none;
    content: "";
}

.admin-hubs-disclosure__toggle::after {
    content: "▸";
    font-size: 0.82rem;
    margin-left: auto;
    transition: transform var(--transition-fast);
}

.admin-hubs-disclosure[open] > .admin-hubs-disclosure__toggle::after {
    content: "▾";
}

.admin-hubs-disclosure__toggle:hover,
.admin-hubs-disclosure__toggle:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
    color: var(--text);
    opacity: 1;
}

.admin-hubs-disclosure[open] > .admin-hubs-disclosure__toggle {
    color: var(--text);
    opacity: 1;
    border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}

.admin-hubs-disclosure__label {
    flex: 1;
}

.admin-hubs-disclosure__hint {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--muted);
    opacity: 0.7;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 640px) {
    .admin-hubs-disclosure__hint {
        display: none;
    }
}

/* ── Hub jump-nav (nav sticky entre domaines) ─────────────────── */
.admin-hub-jump-nav {
    position: sticky;
    top: calc(var(--header-height-compact, 3.8rem) + 0.4rem);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0 0.4rem;
    margin-top: 0.4rem;
    background: color-mix(in srgb, var(--bg, #fff) 94%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.admin-hub-jump-nav::-webkit-scrollbar {
    display: none;
}

.admin-hub-jump-nav__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-right: 0.1rem;
    flex-shrink: 0;
}

.admin-hub-jump-link {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.62rem;
    border-radius: 99px;
    border: 1px solid var(--line);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg-elevated);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.admin-hub-jump-link:hover,
.admin-hub-jump-link:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
    color: var(--text);
    text-decoration: none;
}

.admin-hub-jump-link.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
    color: var(--accent);
}

@media (max-width: 640px) {
    .admin-hub-jump-nav__label {
        display: none;
    }
}

/* ── Quick-actions role filter pills ──────────────────────────── */
.admin-quick-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.admin-quick-filter__pill {
    padding: 0.24rem 0.7rem;
    border-radius: 99px;
    border: 1px solid var(--line);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.admin-quick-filter__pill:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    color: var(--text);
}

.admin-quick-filter__pill.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
    color: var(--accent);
}

/* ── Search autocomplete suggestions ─────────────────────────── */

.admin-dashboard-search-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.3rem);
    z-index: 200;
    background: var(--bg-elevated-strong, var(--bg-elevated));
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--shadow-color, #000) 10%, transparent);
    overflow: hidden;
}

.admin-dashboard-search-suggestions[hidden],
.admin-search-suggestions__results[hidden],
.admin-search-suggestions__examples[hidden] {
    display: none;
}

.admin-search-suggestions__examples {
    padding: 0.65rem 0.8rem 0.55rem;
}

.admin-search-suggestions__hint {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.4rem;
}

.admin-search-suggestions__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.admin-search-suggestion {
    padding: 0.2rem 0.52rem;
    border-radius: 99px;
    border: 1px solid var(--line);
    font-size: 0.79rem;
    color: var(--text);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.admin-search-suggestion:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

.admin-search-suggestions__results {
    list-style: none;
    margin: 0;
    padding: 0.2rem 0;
    max-height: 13rem;
    overflow-y: auto;
    border-top: 1px solid var(--line);
}

.admin-search-result-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-align: left;
    width: 100%;
    border: none;
    background: transparent;
}

.admin-search-result-item:hover,
.admin-search-result-item.is-highlighted {
    background: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}

.admin-search-result-item__label {
    font-weight: 600;
    flex: 1;
}

.admin-search-result-item__hub {
    font-size: 0.73rem;
    color: var(--muted);
    flex-shrink: 0;
}

.admin-search-no-results {
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
    color: var(--muted);
    font-style: italic;
    margin: 0;
}

.dashboard-widget.is-search-match,
.dashboard-widget .is-search-match {
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.dashboard-widget.is-search-match {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}

.dashboard-widget .is-search-match {
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 64%, transparent);
}

.dashboard-widget a.is-search-match,
.dashboard-widget button.is-search-match,
.dashboard-widget summary.is-search-match {
    border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 82%, var(--bg-elevated-strong));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent-strong);
}

.dashboard-widget a.is-search-best-match,
.dashboard-widget button.is-search-best-match,
.dashboard-widget summary.is-search-best-match {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 92%, var(--bg-elevated-strong));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}

.dashboard-widget summary.is-search-match {
    border-radius: 0.8rem;
}

.dashboard-widget .text-link.is-search-match {
    text-decoration: none;
}

.stats-filter-group {
    justify-content: flex-end;
}

.analytics-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.analytics-summary-grid--overview {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.analytics-summary-grid--details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.analytics-summary-grid .metric-card strong,
.analytics-summary-grid .metric-card p {
    position: relative;
    z-index: 1;
}

.analytics-summary-grid .metric-card p {
    margin: 0.18rem 0 0;
    color: var(--muted);
}

.stats-overview-details {
    border: 1px solid color-mix(in srgb, var(--line) 84%, var(--accent) 16%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
    padding: 0.25rem;
}

.stats-overview-details__summary {
    list-style: none;
    display: none;
    align-items: center;
    min-height: 44px;
    padding: 0.58rem 0.78rem;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
}

.stats-overview-details__summary::-webkit-details-marker {
    display: none;
}

.stats-overview-details__summary::after {
    content: "+";
    margin-left: auto;
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 1;
}

.stats-overview-details[open] .stats-overview-details__summary::after {
    content: "-";
}

.analytics-area-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.analytics-area-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0.9rem 1rem;
    background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
    display: grid;
    gap: 0.18rem;
}

.analytics-area-card strong {
    font-size: 1.15rem;
    line-height: 1.2;
}

.analytics-area-card p {
    margin: 0;
    color: var(--muted);
}

.analytics-auth-split {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.analytics-chart-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1rem;
    background: linear-gradient(160deg, var(--bg-elevated-strong), color-mix(in srgb, var(--accent-soft) 16%, var(--bg-elevated)));
}

.analytics-bar-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
    gap: 0.7rem;
    align-items: end;
    min-height: 220px;
}

.analytics-bar-chart__item {
    display: grid;
    gap: 0.45rem;
    justify-items: center;
}

.analytics-bar-chart__bar-wrap {
    width: 100%;
    min-height: 160px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 16%, transparent), color-mix(in srgb, var(--accent-soft) 34%, transparent));
    display: flex;
    align-items: flex-end;
    padding: 0.35rem;
}

.analytics-bar-chart__bar {
    width: 100%;
    height: max(var(--bar-height, 0%), 10px);
    border-radius: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-cyan) 72%, #ffffff 28%), color-mix(in srgb, var(--brand-blue) 82%, #000000 18%));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.analytics-bar-chart__item strong,
.analytics-bar-chart__item span {
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.2;
}

.analytics-bar-chart__item span {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.analytics-horizontal-chart {
    display: grid;
    gap: 0.75rem;
}

.analytics-horizontal-chart__item {
    display: grid;
    gap: 0.42rem;
}

.analytics-horizontal-chart__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.analytics-horizontal-chart__meta span {
    color: var(--muted);
    font-size: 0.88rem;
}

.analytics-horizontal-chart__track {
    position: relative;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 28%, transparent);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
}

.analytics-horizontal-chart__fill {
    display: block;
    height: 100%;
    width: max(var(--fill-width, 0%), 10px);
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-cyan) 78%, #ffffff 22%), color-mix(in srgb, var(--brand-blue) 84%, #000000 16%));
}

.analytics-horizontal-chart__fill--warm {
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-orange) 82%, #ffffff 18%), color-mix(in srgb, var(--brand-red) 72%, #000000 28%));
}

.analytics-trend-list {
    display: grid;
    gap: 0.6rem;
}

.analytics-trend-item {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.78rem 0.9rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
}

.analytics-trend-item span:last-child {
    color: var(--muted);
}

.admin-health-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    grid-auto-rows: minmax(auto, 1fr);
}

.admin-health-item {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.35rem 1.45rem;
    background: color-mix(in srgb, var(--accent-soft) 22%, transparent);
    display: grid;
    gap: 0.4rem;
    transition: all var(--transition-medium);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 4%, transparent);
    grid-template-columns: 1fr;
    align-content: start;
}

.admin-health-item:hover {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 8%, transparent);
    transform: translateY(-2px);
}

.admin-health-item--neutral {
    background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
    border-color: var(--line);
}

.admin-health-item--good {
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, #1f7a45 12%, transparent) 0%, transparent 28%),
        color-mix(in srgb, #1f7a45 8%, var(--accent-soft));
    border-color: color-mix(in srgb, #1f7a45 28%, var(--line));
}

.admin-health-item--warning {
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--brand-orange) 14%, transparent) 0%, transparent 28%),
        color-mix(in srgb, var(--brand-orange) 10%, var(--accent-soft));
    border-color: color-mix(in srgb, var(--brand-orange) 28%, var(--line));
}

.admin-health-item--critical {
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--brand-red) 14%, transparent) 0%, transparent 28%),
        color-mix(in srgb, var(--brand-red) 10%, var(--accent-soft));
    border-color: color-mix(in srgb, var(--brand-red) 28%, var(--line));
}

.admin-health-value {
    margin: 0.1rem 0 0 0;
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 950;
    color: var(--accent-strong);
    letter-spacing: -0.03em;
}

.admin-health-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.3;
    letter-spacing: 0.1px;
}

.admin-next-actions {
    display: grid;
    gap: 0.65rem;
}

.admin-next-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 0.85rem 1rem;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text);
    background: color-mix(in srgb, var(--accent-soft) 28%, transparent);
    transition: all var(--transition-medium);
    text-decoration: none;
}

.admin-next-action:hover {
    background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    transform: translateX(3px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 6%, transparent);
}

.admin-next-action__icon {
    width: 1.6rem;
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 0.88rem;
    font-weight: 900;
    border: 1.5px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    transition: all var(--transition-fast);
}

.admin-next-action--urgent {
    background: color-mix(in srgb, var(--brand-orange) 20%, var(--accent-soft));
    border-color: color-mix(in srgb, var(--brand-orange) 32%, var(--line));
}

.admin-next-action--urgent:hover {
    background: color-mix(in srgb, var(--brand-orange) 36%, var(--accent-soft));
    border-color: color-mix(in srgb, var(--brand-orange) 48%, var(--line));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-orange) 12%, transparent);
}

.admin-next-action--urgent .admin-next-action__icon {
    background: color-mix(in srgb, var(--brand-orange) 28%, transparent);
    border-color: color-mix(in srgb, var(--brand-orange) 48%, var(--line));
    color: color-mix(in srgb, var(--brand-orange) 82%, var(--text));
}

.admin-next-action--info {
    background: color-mix(in srgb, var(--brand-blue) 14%, var(--accent-soft));
    border-color: color-mix(in srgb, var(--brand-blue) 26%, var(--line));
}

.admin-next-action--info:hover {
    background: color-mix(in srgb, var(--brand-blue) 28%, var(--accent-soft));
    border-color: color-mix(in srgb, var(--brand-blue) 38%, var(--line));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-blue) 10%, transparent);
}

.admin-next-action--info .admin-next-action__icon {
    background: color-mix(in srgb, var(--brand-blue) 22%, transparent);
    border-color: color-mix(in srgb, var(--brand-blue) 42%, var(--line));
    color: color-mix(in srgb, var(--brand-blue) 80%, var(--text));
}

.admin-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 0.9rem 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, var(--bg-elevated-strong), var(--bg-elevated));
    backdrop-filter: blur(8px);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--text);
    overflow-wrap: anywhere;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-nav-card:hover {
    background: color-mix(in srgb, var(--accent-soft) 60%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 10%, transparent);
}

.admin-nav-card__icon {
    font-size: 1.45rem;
    line-height: 1;
}

.admin-nav-card__count {
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    font-size: 0.78rem;
    font-weight: 800;
}

.admin-nav-card--primary .admin-nav-card__count {
    background: color-mix(in srgb, #ffffff 26%, transparent);
    border-color: color-mix(in srgb, #ffffff 55%, transparent);
    color: #ffffff;
}

.admin-nav-card--primary {
    background: linear-gradient(140deg, var(--brand-blue), color-mix(in srgb, var(--brand-blue) 76%, var(--brand-cyan) 24%));
    border-color: color-mix(in srgb, var(--brand-blue) 64%, #000000 36%);
    color: var(--brand-white);
}

.admin-nav-card--primary:hover {
    background: linear-gradient(140deg, color-mix(in srgb, var(--brand-blue) 80%, var(--brand-cyan) 20%), color-mix(in srgb, var(--brand-blue) 64%, var(--brand-orange) 36%));
    color: var(--brand-white);
    border-color: color-mix(in srgb, var(--brand-blue) 50%, #000000 50%);
}

.admin-nav-card--danger {
    background: color-mix(in srgb, var(--brand-red) 10%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--brand-red) 30%, var(--line));
    color: color-mix(in srgb, var(--brand-red) 80%, var(--text));
}

.admin-nav-card--danger:hover {
    background: color-mix(in srgb, var(--brand-red) 18%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--brand-red) 50%, var(--line));
}

/* Dashboard Panel Collapse/Expand Controls */

.dashboard-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

[data-dashboard-panel-toggle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 16%, transparent);
    color: var(--muted);
    cursor: pointer;
    font-size: 1.2rem;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

[data-dashboard-panel-toggle]:hover {
    background: color-mix(in srgb, var(--accent-soft) 36%, transparent);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    color: var(--accent-strong);
}

[data-dashboard-panel-toggle]:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

[data-dashboard-panel-toggle].is-collapsed {
    color: var(--muted);
    background: color-mix(in srgb, var(--brand-gray) 8%, transparent);
}

[data-dashboard-panel-toggle].is-collapsed::after {
    content: " ";
}

[data-dashboard-panel-content] {
    transition: all var(--transition-standard);
}

[data-dashboard-panel-collapsed="true"] [data-dashboard-panel-content] {
    opacity: 0;
    pointer-events: none;
}

.dashboard-panel-section {
    display: grid;
    gap: 1rem;
    margin: 1.2rem 0 0;
    padding: 1rem 0 0;
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
}

.dashboard-panel-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.dashboard-panel-section-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dashboard-panel-section-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 1rem;
    background: var(--accent-strong);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Responsive adjustments for panel controls */

@media (max-width: 960px) {
    .dashboard-panel-header {
        flex-direction: column;
        align-items: flex-start;
    }

    [data-dashboard-panel-toggle] {
        align-self: flex-end;
    }
}

.admin-scroll-top {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
    background: color-mix(in srgb, var(--accent) 84%, var(--bg-elevated));
    color: var(--brand-white);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 14px 26px color-mix(in srgb, var(--accent) 26%, transparent);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
    z-index: 65;
}

.admin-scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.admin-scroll-top:hover,
.admin-scroll-top:focus-visible {
    background: color-mix(in srgb, var(--accent) 92%, var(--bg-elevated));
}

/* ── Desktop compact density (admin + system) ──────────────── */
@media (min-width: 961px) {
    .is-admin .content-card,
    .is-admin .form-card {
        padding: 1.15rem 1.2rem;
        border-radius: 24px;
    }

    .is-admin .form-card,
    .is-admin .form-grid,
    .is-admin .form-grid--3 {
        gap: 0.82rem;
    }

    .is-admin .inline-actions {
        margin-top: 1rem;
        gap: 0.6rem;
    }

    .is-admin th,
    .is-admin td {
        padding: 0.74rem 0.62rem;
    }

    .is-admin .table-wrap .text-button {
        padding: 0.2rem 0.35rem;
    }

    .is-admin .button.small {
        padding: 0.45rem 0.78rem;
        font-size: 0.86rem;
    }
}
/* ── /Desktop compact density (admin + system) ─────────────── */

@media (max-width: 1000px) {
    .dashboard-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-widget-resize-handle {
        display: none;
    }


    .dojo-toast-container {
        right: 0.75rem;
        bottom: 0.75rem;
        width: calc(100vw - 1.5rem);
    }
    .dashboard-widget {
        grid-column: span 1;
    }

    .dashboard-widget--width-full {
        grid-column: 1 / -1;
    }

    .admin-hub-grid {
        grid-template-columns: 1fr;
    }

    .admin-quick-grid {
        grid-template-columns: 1fr;
    }

    .analytics-summary-grid,
    .analytics-area-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-bar-chart {
        grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
    }

    .admin-health-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Toast mobile repositioning (must come after 1000px rule to override) ─ */
/*
 * Sur mobile, les toasts se repositionnent en haut de l'écran, juste sous
 * l'en-tête sticky. --dojo-header-height est mis à jour en JS (ui_modal.js)
 * via ResizeObserver sur .site-header. Le fallback 4.5rem couvre la topbar
 * mobile standard (~66 px) sans JS.
 */
@media (max-width: 960px) {
    .dojo-toast-container {
        /* Placer sous l'en-tête sticky + zone de sécurité iOS (notch/Dynamic Island) */
        top: calc(var(--dojo-header-height, 4.5rem) + 0.5rem + env(safe-area-inset-top, 0px));
        bottom: auto;
        /* Centrer horizontalement */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(400px, calc(100vw - 2rem));
        min-height: 60px;
    }

    /* Les cartes s'ancrent en haut du conteneur et empilent vers le bas */
    .dojo-toast-card {
        top: 0;
        bottom: auto;
        left: 0;
        right: auto;
        width: 100%;
        /* Empiler vers le bas (positif) au lieu de vers le haut (négatif) */
        transform: translateX(calc(var(--toast-stack-index) * -2px))
                   translateY(calc(var(--toast-stack-index) * 8px))
                   scale(calc(1 - var(--toast-stack-index) * 0.02));
        animation-name: dojo-toast-in-top;
    }

    .dojo-toast-card.is-hiding {
        animation-name: dojo-toast-out-top;
    }

    .dojo-toast-card__copy-btn,
    .dojo-toast-card__close-btn {
        width: 44px;
        height: 44px;
        top: 0.35rem;
    }

    .dojo-toast-card__copy-btn {
        right: 2.95rem;
    }

    .dojo-toast-card__close-btn {
        right: 0.35rem;
    }

    .dojo-toast-card--error {
        padding-right: 6rem;
    }

    .stats-overview-details {
        padding: 0.12rem;
    }

    .stats-overview-details__summary {
        display: flex;
    }

    .stats-overview-details:not([open]) > :not(summary) {
        display: none;
    }
}

@media (min-width: 961px) {
    .stats-overview-details {
        border: 0;
        background: transparent;
        padding: 0;
    }

    .stats-overview-details > summary {
        display: none;
    }
}

/* Animations pour toasts positionnés en haut (mobile) — glissement depuis le haut */
@keyframes dojo-toast-in-top {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dojo-toast-out-top {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.985);
    }
}

@media (max-width: 640px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-widget,
    .dashboard-widget--width-full {
        grid-column: 1 / -1 !important;
        grid-row: span 1 !important;
    }

    .dashboard-widget {
        gap: 0.7rem;
    }

    .dashboard-widget-toolbar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
        padding: 0.4rem 0.5rem;
        border-style: solid;
    }

    .dashboard-width-switch,
    [data-dashboard-reset] {
        display: none;
    }

    .dashboard-widget-title--drag {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.2rem 0.55rem;
    }

    .dashboard-widget-resize-handle {
        width: 44px;
        height: 44px;
        right: 0.15rem;
        bottom: 0.1rem;
    }

    .dashboard-widget-resize-feedback {
        right: 2.8rem;
        bottom: 0.45rem;
        min-width: 7.4rem;
        padding: 0.34rem 0.48rem;
    }

    .dashboard-widget-resize-handle::after {
        width: 1.68rem;
        height: 1.68rem;
        right: 0;
        bottom: 0;
        border-right-width: 0.22rem;
        border-bottom-width: 0.22rem;
    }

    body[data-site-corner-style="soft"] .dashboard-widget-resize-handle::after,
    body[data-site-corner-style="pill"] .dashboard-widget-resize-handle::after {
        right: -1px;
        bottom: -1px;
        width: 2.08rem;
        height: 2.08rem;
        border-width: 0.24rem;
    }

    .dashboard-list-indicator {
        font-size: 0.8rem;
    }

    .admin-nav-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .admin-quick-card {
        padding: 1rem;
    }

    .admin-quick-card__head {
        gap: 0.65rem;
    }

    .admin-quick-card__head .eyebrow {
        font-size: clamp(0.95rem, 2.5vw, 1.2rem);
    }

    .admin-quick-card__count {
        min-width: 2.4rem;
        min-height: 2.4rem;
        padding: 0.35rem 0.55rem;
        font-size: 0.95rem;
    }

    .admin-quick-card__metrics {
        margin-bottom: 0.4rem;
    }

    .admin-quick-card__actions {
        padding: 0.7rem;
        gap: 0.5rem;
        margin-top: 0.45rem;
    }

    .admin-quick-grid {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .analytics-summary-grid,
    .analytics-area-grid,
    .analytics-dual-grid {
        grid-template-columns: 1fr;
    }

    .analytics-chart-card {
        padding: 0.9rem;
    }

    .analytics-horizontal-chart__meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }

    .analytics-bar-chart {
        min-height: 180px;
    }

    .analytics-bar-chart__bar-wrap {
        min-height: 132px;
    }

    .analytics-trend-item {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .admin-favorite-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-nav-card {
        min-height: auto;
        padding: 1rem 0.8rem;
        font-size: 0.92rem;
        line-height: 1.35;
        align-items: flex-start;
        text-align: left;
    }

    .admin-nav-card__icon {
        font-size: 1.55rem;
    }

    .dashboard-widget-title {
        order: -1;
        width: 100%;
        margin-right: 0;
        font-size: 0.84rem;
    }

    .admin-health-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-section-topbar {
        align-items: stretch;
    }

    .admin-dashboard-search-box {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-search-box [data-admin-dashboard-search-clear] {
        width: 100%;
    }

    .admin-dashboard-quick-link {
        min-height: 44px;
        width: 100%;
        justify-content: center;
    }

    .admin-dashboard-presets {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-dashboard-preset {
        width: 100%;
        min-height: 44px;
    }

    .admin-dashboard-saved-layouts__form,
    .admin-dashboard-saved-layouts__actions {
        grid-template-columns: 1fr;
    }

    .admin-scroll-top {
        right: 0.8rem;
        bottom: 0.8rem;
    }

    .registration-item__foot {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .sys-dashboard-stat-card {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

@media (max-width: 640px) {
    .sys-dashboard-stats-row {
        gap: 0.75rem;
    }

    .sys-dashboard-stat-card {
        flex: 1 1 calc(50% - 0.375rem);
        padding: 1rem 0.75rem;
    }

    .sys-dashboard-transfer-actions {
        width: 100%;
    }

    .sys-dashboard-transfer-actions > form {
        width: 100%;
    }

    .sys-dashboard-transfer-actions .button {
        width: 100%;
        justify-content: center;
    }

    .sys-dashboard-upload-form {
        flex-basis: 100%;
        min-width: 0;
    }

    .sys-kamatera-billing-table thead th {
        font-size: 0.72rem;
    }

    .sys-kamatera-cost-pill {
        min-height: 32px;
        padding: 0.16rem 0.62rem;
        font-size: 0.84rem;
    }

    .sys-kamatera-raw-summary {
        padding: 0.64rem 0.8rem;
    }

    .sys-kamatera-raw-pre {
        padding: 0.72rem 0.8rem 0.86rem;
        font-size: 0.79rem;
    }
}

@media (max-width: 480px) {
    .admin-dashboard-quick-links {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-scroll-top {
        width: 46px;
        height: 46px;
    }

    .sys-dashboard-stat-card {
        flex: 1 1 100%;
        padding: 1rem 0.75rem;
    }

    .sys-stat-value {
        font-size: 1.25rem;
    }

    .sys-kamatera-billing-period {
        font-size: 0.92rem;
    }

    .sys-kamatera-cost-pill {
        min-height: 30px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {
    .admin-scroll-top {
        right: 0.65rem;
        bottom: 0.65rem;
    }
}

/* ── Registration status badges ─────────────────────────────── */
.badge-pending {
    background: color-mix(in srgb, var(--brand-orange) 40%, var(--accent-soft));
    border-color: color-mix(in srgb, var(--brand-orange) 65%, var(--line));
    color: color-mix(in srgb, var(--brand-orange) 70%, #4a2200);
}

.badge-already-registered {
    background: color-mix(in srgb, #12b886 42%, var(--accent-soft));
    border-color: color-mix(in srgb, #12b886 70%, var(--line));
    color: #ecfff8;
    box-shadow: 0 0 0 1px color-mix(in srgb, #12b886 45%, transparent), 0 6px 16px color-mix(in srgb, #12b886 22%, transparent);
}

.badge-already-registered--pending {
    background: color-mix(in srgb, #d97706 24%, var(--accent-soft));
    border-color: color-mix(in srgb, #d97706 52%, var(--line));
    color: color-mix(in srgb, #fff7ed 88%, #ffffff 12%);
    box-shadow: 0 0 0 1px color-mix(in srgb, #d97706 30%, transparent), 0 6px 16px color-mix(in srgb, #d97706 18%, transparent);
}

.badge-already-registered--confirmed {
    background: color-mix(in srgb, #12b886 42%, var(--accent-soft));
    border-color: color-mix(in srgb, #12b886 70%, var(--line));
    color: #ecfff8;
}

.badge-already-registered--waitlist {
    background: color-mix(in srgb, #b45309 26%, var(--accent-soft));
    border-color: color-mix(in srgb, #b45309 54%, var(--line));
    color: color-mix(in srgb, #fff7ed 90%, #ffffff 10%);
    box-shadow: 0 0 0 1px color-mix(in srgb, #b45309 34%, transparent), 0 6px 16px color-mix(in srgb, #b45309 20%, transparent);
}

.badge-already-registered--canceled {
    background: color-mix(in srgb, #b42318 26%, var(--accent-soft));
    border-color: color-mix(in srgb, #b42318 56%, var(--line));
    color: color-mix(in srgb, #fff2f1 90%, #ffffff 10%);
    box-shadow: 0 0 0 1px color-mix(in srgb, #b42318 32%, transparent), 0 6px 16px color-mix(in srgb, #b42318 20%, transparent);
}

.badge-already-registered--refunded {
    background: color-mix(in srgb, #2563eb 24%, var(--accent-soft));
    border-color: color-mix(in srgb, #2563eb 54%, var(--line));
    color: color-mix(in srgb, #eff6ff 92%, #ffffff 8%);
    box-shadow: 0 0 0 1px color-mix(in srgb, #2563eb 32%, transparent), 0 6px 16px color-mix(in srgb, #2563eb 18%, transparent);
}

html[data-theme="dark"] .badge-pending,
html[data-theme="vampire"] .badge-pending,
html[data-theme="contrast-dark"] .badge-pending {
    color: color-mix(in srgb, var(--brand-orange) 90%, #ffffff 10%);
}

html[data-theme="dark"] .badge-already-registered,
html[data-theme="vampire"] .badge-already-registered,
html[data-theme="contrast-dark"] .badge-already-registered {
    color: color-mix(in srgb, #8ff0cb 90%, #ffffff 10%);
}

.badge-confirmed {
    background: color-mix(in srgb, #1f7a45 18%, var(--accent-soft));
    border-color: color-mix(in srgb, #1f7a45 30%, var(--line));
    color: color-mix(in srgb, #1f7a45 80%, var(--text));
}

html[data-theme="dark"] .badge-confirmed,
html[data-theme="vampire"] .badge-confirmed,
html[data-theme="contrast-dark"] .badge-confirmed {
    color: color-mix(in srgb, #4caf78 90%, #ffffff 10%);
}

.badge-partial {
    background: color-mix(in srgb, #0a6ebd 14%, var(--accent-soft));
    border-color: color-mix(in srgb, #0a6ebd 28%, var(--line));
    color: color-mix(in srgb, #0a6ebd 85%, var(--text));
}

html[data-theme="dark"] .badge-partial,
html[data-theme="vampire"] .badge-partial,
html[data-theme="contrast-dark"] .badge-partial {
    color: color-mix(in srgb, #5ab4f5 90%, #ffffff 10%);
}

.badge-imported {
    background: color-mix(in srgb, var(--brand-cyan) 15%, var(--accent-soft));
    border-color: color-mix(in srgb, var(--brand-cyan) 34%, var(--line));
    color: color-mix(in srgb, var(--brand-cyan) 82%, var(--text));
}

html[data-theme="dark"] .badge-imported,
html[data-theme="vampire"] .badge-imported,
html[data-theme="contrast-dark"] .badge-imported {
    color: color-mix(in srgb, #7ad8ff 90%, #ffffff 10%);
}

.badge-canceled {
    background: color-mix(in srgb, #b42318 12%, var(--accent-soft));
    border-color: color-mix(in srgb, #b42318 25%, var(--line));
    color: #b42318;
}

.badge-mixed {
    background: color-mix(in srgb, #7c3aed 12%, var(--accent-soft));
    border-color: color-mix(in srgb, #7c3aed 28%, var(--line));
    color: color-mix(in srgb, #7c3aed 85%, var(--text));
}

html[data-theme="dark"] .badge-mixed,
html[data-theme="vampire"] .badge-mixed,
html[data-theme="contrast-dark"] .badge-mixed {
    color: color-mix(in srgb, #c4b5fd 90%, #ffffff 10%);
}

.registration-origin-row {
    margin-top: 0.35rem;
}

.registration-origin-badges {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.registration-import-note {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--brand-cyan) 28%, var(--line));
    background: color-mix(in srgb, var(--brand-cyan) 8%, var(--bg-elevated));
}

.registration-import-note .form-hint {
    flex: 1 1 18rem;
}

/* ── Interac table: lignes normalisées desktop + mobile ─────── */

.interac-status-badge--split {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.12;
    min-height: 2.2rem;
    max-width: 6.6rem;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.interac-mail-cell {
    min-width: 18rem;
}

.interac-mail-line {
    display: block;
}

.interac-mail-line--primary {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.8fr) minmax(7rem, 1.2fr) minmax(8rem, 1.3fr);
    align-items: baseline;
    column-gap: 0.38rem;
    white-space: nowrap;
}

.interac-mail-subject,
.interac-mail-name,
.interac-mail-address {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.interac-mail-subject {
    font-weight: 700;
}

.interac-mail-name {
    color: var(--text-muted);
}

.interac-mail-address {
    color: color-mix(in srgb, var(--accent-strong) 78%, var(--text));
}

.interac-mail-separator {
    display: none;
}

.interac-mail-line--secondary {
    margin-top: 0.14rem;
    white-space: nowrap;
    color: var(--text-muted);
}

.interac-mail-line--secondary small {
    font-size: 0.78rem;
}

/* ── Filter disclosure (all list pages) ───────────────────────── */

.filter-collapse {
    border: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent) 14%);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    margin-bottom: 1rem;
}

.filter-collapse__summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.7rem 0.95rem;
    cursor: pointer;
}

.filter-collapse__summary::-webkit-details-marker {
    display: none;
}

.filter-collapse__title {
    font-weight: 700;
    color: var(--text);
}

.filter-collapse__meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: right;
}

.filter-collapse__summary::after {
    content: "▾";
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: transform var(--transition-fast);
}

.filter-collapse[open] .filter-collapse__summary::after {
    transform: rotate(180deg);
}

.filter-collapse__body {
    padding: 0 0.9rem 0.9rem;
}

.filter-collapse__body > .form-card,
.filter-collapse__body > .inner-form-card,
.filter-collapse__body > .form-grid,
.filter-collapse__body > .team-members-filter,
.filter-collapse__body > .bulk-grade-filter,
.filter-collapse__body > .filter-form {
    margin: 0;
}

.filter-collapse--inline {
    margin-bottom: 0;
}

.filter-collapse--inline .filter-collapse__summary {
    padding: 0.45rem 0.75rem;
}

.filter-collapse--inline .filter-collapse__body {
    padding: 0 0.75rem 0.75rem;
}

@media (max-width: 960px) {
    .filter-collapse__summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .filter-collapse__meta {
        width: 100%;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .filter-collapse__summary {
        padding: 0.65rem 0.8rem;
    }

    .filter-collapse__body {
        padding: 0 0.8rem 0.8rem;
    }
}

/* ── Filter form: search row + mobile toggle ─────────────────── */

.reg-filter-search-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.reg-filter-search-field {
    flex: 1 1 0;
    min-width: 0;
}

.reg-filter-toggle-btn {
    display: none; /* hidden on desktop */
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.5rem 0.85rem;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    color: var(--accent-strong);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.reg-filter-toggle-btn:hover {
    background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

.reg-filter-caret {
    transition: transform var(--transition-fast);
}

.reg-filter-toggle-btn[aria-expanded="true"] .reg-filter-caret {
    transform: rotate(180deg);
}

.admin-registrations-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

.expand-cell {
    width: 3.1rem;
}

.expand-toggle {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--line) 70%, var(--accent) 30%);
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent-soft) 30%, transparent), color-mix(in srgb, var(--bg-elevated) 92%, transparent));
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent);
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.expand-toggle:hover,
.expand-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 65%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 35%, transparent);
}

.expand-toggle .toggle-icon {
    display: inline-block;
    font-size: 1.15rem;
    color: color-mix(in srgb, var(--accent-strong) 78%, var(--text));
    transition: transform var(--transition-fast);
}

.expand-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(90deg);
}

.group-actions-panel {
    border: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent) 14%);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    padding: 0.45rem 0.55rem;
    display: grid;
    gap: 0.28rem;
}

.group-actions-panel h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.member-group-block {
    display: grid;
    gap: 0.18rem;
}

.member-group-block .eyebrow {
    margin: 0.2rem 0 0.08rem;
    font-size: 0.75rem;
}

.actions-list {
    display: grid;
    gap: 0.25rem;
}

.action-item {
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 8px;
    padding: 0.34rem 0.45rem;
    background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
}

.action-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.action-buttons {
    margin-top: 0.16rem;
}

.group-actions-panel .action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.group-actions-panel .action-buttons > form,
.group-actions-panel .action-buttons > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex: 0 0 auto;
}

.group-actions-panel .action-buttons .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.group-actions-panel .action-buttons .btn-icon i {
    display: block;
    line-height: 1;
}

.reg-actions__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.action-buttons form {
    margin: 0;
}

.reg-actions__inner form {
    margin: 0;
}

.registration-inline-alert {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.35;
}

.registration-inline-alert small {
    display: inline;
    margin: 0;
}

.registration-inline-alert small strong {
    display: inline;
}


.actions-cell .actions-inline {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    white-space: normal;
}

.actions-cell .actions-inline form {
    margin: 0;
}

.actions-cell--icons {
    white-space: nowrap;
}

.actions-cell--icons > a,
.actions-cell--icons > form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0 0.45rem 0 0;
}

.actions-cell--icons > :last-child {
    margin-right: 0;
}

.actions-cell--icons .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: 0 0 auto;
}

.actions-cell--icons .btn-icon i {
    display: block;
    line-height: 1;
}

@media (max-width: 960px) {
    .registration-origin-badges {
        justify-content: flex-start;
        margin-top: 0.45rem;
    }

    .registration-import-note {
        align-items: flex-start;
    }

    .action-header {
        flex-direction: column;
    }

    .action-buttons {
        gap: 0.4rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .admin-registrations-filter-actions {
        justify-content: stretch;
    }

    .admin-registrations-filter-actions .button {
        width: 100%;
        justify-content: center;
    }

    .group-actions-panel {
        padding: 0.78rem;
    }

}

/* Filtre de statut (registrations) */
.status-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.status-filter-bar a {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.88rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    color: var(--accent-strong);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.status-filter-bar a:hover {
    background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
}

.status-filter-bar a.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.status-filter-bar__separator {
    width: 1px;
    align-self: stretch;
    background: var(--line);
    margin-inline: 0.25rem;
}

/* ── Reg table: icon action buttons ─────────────────────────── */

.reg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.reg-actions form {
    margin: 0;
}

.reg-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.reg-action-btn:hover,
.reg-action-btn:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 60%, var(--bg-elevated));
    text-decoration: none;
    outline-offset: 2px;
}

.reg-action-btn.success:hover,
.reg-action-btn.success:focus-visible {
    border-color: color-mix(in srgb, #16a34a 50%, var(--line));
    background: color-mix(in srgb, #16a34a 10%, var(--bg-elevated));
}

.reg-action-btn.danger:hover,
.reg-action-btn.danger:focus-visible {
    border-color: color-mix(in srgb, #dc2626 50%, var(--line));
    background: color-mix(in srgb, #dc2626 10%, var(--bg-elevated));
}

/* Tooltip au survol */
.reg-action-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 20;
}

.reg-action-btn[data-tooltip]:hover::after,
.reg-action-btn[data-tooltip]:focus-visible::after {
    opacity: 1;
}

/* Desktop avec pointer précis : les icônes se révèlent au survol de la rangée */
@media (hover: hover) and (pointer: fine) {
    .actions-cell .btn-icon,
    .actions .btn-icon,
    .actions-cell .actions-divider,
    .actions .actions-divider,
    .action-buttons .btn-icon,
    .actions-list .btn-icon,
    .registrations-table .group-summary-row .actions-cell--icons .btn-icon,
    .group-actions-panel .action-item .action-buttons .btn-icon,
    .reg-action-btn {
        opacity: 0;
        transform: translateY(4px) scale(0.96);
        pointer-events: none;
        transition: opacity 220ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
    }

    .table-wrap tbody tr:hover .actions-cell .btn-icon,
    .table-wrap tbody tr:focus-within .actions-cell .btn-icon,
    .table-wrap tbody tr:hover .actions-cell .actions-divider,
    .table-wrap tbody tr:focus-within .actions-cell .actions-divider,
    .table-wrap tbody tr:hover .actions .btn-icon,
    .table-wrap tbody tr:focus-within .actions .btn-icon,
    .table-wrap tbody tr:hover .actions .actions-divider,
    .table-wrap tbody tr:focus-within .actions .actions-divider,
    .sortable-item:hover .actions-cell .btn-icon,
    .sortable-item:focus-within .actions-cell .btn-icon,
    .sortable-item:hover .actions-cell .actions-divider,
    .sortable-item:focus-within .actions-cell .actions-divider,
    .actions-cell:hover .btn-icon,
    .actions-cell:focus-within .btn-icon,
    .actions-cell:hover .actions-divider,
    .actions-cell:focus-within .actions-divider,
    .actions:hover .btn-icon,
    .actions:focus-within .btn-icon,
    .actions:hover .actions-divider,
    .actions:focus-within .actions-divider,
    .action-buttons:hover .btn-icon,
    .action-buttons:focus-within .btn-icon,
    .registrations-table .group-summary-row:hover .actions-cell--icons .btn-icon,
    .registrations-table .group-summary-row:focus-within .actions-cell--icons .btn-icon,
    .group-actions-panel .action-item:hover .action-buttons .btn-icon,
    .group-actions-panel .action-item:focus-within .action-buttons .btn-icon,
    .group-summary-row:hover .reg-action-btn,
    .group-summary-row:focus-within .reg-action-btn,
    .action-item:hover .reg-action-btn,
    .action-item:focus-within .reg-action-btn {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .actions-cell--always-visible .btn-icon,
    .actions-cell--always-visible .actions-divider {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    /* Actions de lot: compactes par defaut, expansion au survol/focus */
    .group-actions-panel .action-item {
        padding-top: 0.42rem;
        padding-bottom: 0.42rem;
        transition: padding var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
    }

    .group-actions-panel .action-item .action-buttons {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.3rem;
        margin-top: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 340ms ease, margin-top 340ms ease;
    }

    .group-actions-panel .action-item .action-buttons .btn-icon {
        transition: opacity 360ms ease, transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .group-actions-panel .action-item:hover,
    .group-actions-panel .action-item:focus-within {
        padding-top: 0.52rem;
        padding-bottom: 0.52rem;
        background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
        border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    }

    .group-actions-panel .action-item:hover .action-buttons,
    .group-actions-panel .action-item:focus-within .action-buttons {
        max-height: 3.2rem;
        opacity: 1;
        margin-top: 0.18rem;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .group-actions-panel .action-item:hover .action-buttons .btn-icon,
    .group-actions-panel .action-item:focus-within .action-buttons .btn-icon {
        transition-delay: 55ms;
    }
}

@media (max-width: 640px) {
    .actions-inline--grouped {
        gap: 0.35rem;
    }

    .actions-group {
        gap: 0.3rem;
    }

    .actions-divider {
        height: 1.2rem;
    }
}

/* ── Registrations table: compact ─────────────────────────── */
.registrations-table th,
.registrations-table td {
    padding: 0.6rem 0.5rem;
}

.registrations-table .group-summary-row td {
    padding: 0.55rem 0.5rem;
    vertical-align: top;
}

.registrations-table small {
    display: block;
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    line-height: 1.3;
}

.registrations-table td > strong {
    display: block;
    margin-bottom: 0.1rem;
}

.registrations-table .contact-email {
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 0.08rem;
}

.registrations-table .lot-primary-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.registrations-table .lot-meta-line {
    color: var(--muted);
}

.registrations-table .members-compact {
    display: block;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.registrations-table .payment-amount-inline {
    display: block;
    margin: 0.2rem 0 0 0;
    white-space: nowrap;
}

.registrations-table .registration-origin-row {
    margin: 0.12rem 0 0 0;
}

.registrations-table strong + .registration-origin-row {
    margin-top: 0.2rem;
}

/* Compact heading with inline actions */
.registrations-table-wrap ~ .table-heading {
    gap: 0.5rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.registrations-table-wrap ~ .table-heading .inline-actions,
.registrations-table-wrap ~ .table-heading .compact-actions {
    gap: 0.4rem;
    margin-top: 0;
}

/* ── Registrations: desktop polish ──────────────────────────── */

.registrations-table .group-summary-row:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 62%, var(--line) 38%);
    outline-offset: -2px;
}

.group-actions-panel .action-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 58%, var(--line) 42%);
    outline-offset: 2px;
    border-radius: 10px;
}

.registrations-table .group-summary-row .actions-cell {
    vertical-align: middle;
}

.list-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.28rem;
    padding: 0.28rem 0;
    border: 1px solid transparent;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: transparent;
}

.list-pagination--compact .button.small {
    min-height: 34px;
    padding: 0.25rem 0.5rem;
    border-color: transparent;
    background: transparent;
    color: color-mix(in srgb, var(--text-muted) 78%, var(--text) 22%);
    box-shadow: none;
}

.list-pagination--compact .button.small:focus-visible {
    border-color: color-mix(in srgb, var(--line) 76%, var(--accent) 24%);
    background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
    color: color-mix(in srgb, var(--accent-strong) 72%, var(--text) 28%);
}

.list-pagination--compact .button.small[disabled] {
    opacity: 0.46;
}

.list-pagination .badge {
    white-space: nowrap;
    padding: 0.18rem 0.4rem;
    border-color: transparent;
    background: transparent;
    color: color-mix(in srgb, var(--text-muted) 82%, var(--text) 18%);
}

@media (hover: hover) and (pointer: fine) {
    .list-pagination:hover {
        border-top-color: color-mix(in srgb, var(--line) 90%, transparent);
        border-bottom-color: color-mix(in srgb, var(--line) 90%, transparent);
    }

    .list-pagination--compact .button.small:hover {
        border-color: color-mix(in srgb, var(--line) 76%, var(--accent) 24%);
        background: color-mix(in srgb, var(--accent-soft) 24%, transparent);
        color: color-mix(in srgb, var(--accent-strong) 72%, var(--text) 28%);
    }

    .list-pagination:hover .badge {
        border-color: color-mix(in srgb, var(--line) 94%, transparent);
    }
}

.list-pagination .list-pagination__summary {
    color: var(--text-muted);
}

.registrations-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.75rem 0;
}

.registrations-bulk-actions {
    flex-wrap: wrap;
}

/* ── Admin registrations: visual lightening (no feature change) ───────── */

.admin-registrations-page .content-card {
    border-color: color-mix(in srgb, var(--line) 90%, transparent);
    box-shadow: none;
}

.admin-registrations-page .filter-collapse {
    border-color: color-mix(in srgb, var(--line) 90%, var(--accent) 10%);
    background: color-mix(in srgb, var(--bg-elevated) 97%, transparent);
}

.admin-registrations-page .filter-collapse__summary {
    padding: 0.62rem 0.9rem;
}

.admin-registrations-page .filter-collapse__meta {
    font-size: 0.82rem;
}

.admin-registrations-page .status-filter-bar {
    gap: 0.42rem;
    margin-bottom: 0.75rem;
}

.admin-registrations-page .status-filter-bar a {
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    border-color: color-mix(in srgb, var(--line) 90%, transparent);
    font-weight: 600;
}

.admin-registrations-page .status-filter-bar a:hover {
    background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
    border-color: color-mix(in srgb, var(--line) 70%, var(--accent) 30%);
}

.admin-registrations-page .status-filter-bar a.is-active {
    background: color-mix(in srgb, var(--accent-soft) 78%, transparent);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    color: color-mix(in srgb, var(--accent-strong) 84%, var(--text));
}

.admin-registrations-page .status-filter-bar__separator {
    opacity: 0.55;
}

.admin-registrations-page .expand-toggle {
    border-color: color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    box-shadow: none;
}

.admin-registrations-page .expand-toggle:hover,
.admin-registrations-page .expand-toggle:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

.admin-registrations-page .group-actions-panel {
    border-color: color-mix(in srgb, var(--line) 90%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    padding: 0.5rem 0.6rem;
}

.admin-registrations-page .action-item {
    border-color: color-mix(in srgb, var(--line) 90%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 98%, transparent);
}

.admin-registrations-page .registrations-table th,
.admin-registrations-page .registrations-table td {
    border-color: color-mix(in srgb, var(--line) 88%, transparent);
}

.admin-registrations-page .actions-cell--icons .btn-icon,
.admin-registrations-page .group-actions-panel .action-buttons .btn-icon {
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    border-color: color-mix(in srgb, var(--line) 86%, transparent);
    box-shadow: none;
}

@media (max-width: 960px) {
    .admin-registrations-page .group-actions-panel {
        padding: 0.7rem;
    }

    .admin-registrations-page .registrations-table .group-summary-row {
        border-color: color-mix(in srgb, var(--line) 90%, transparent);
        background: color-mix(in srgb, var(--bg-elevated) 97%, transparent);
    }

}

/* ── Registrations: responsive card layout ≤ 960px ─────────── */

@media (max-width: 960px) {
    .registrations-table-wrap {
        overflow-x: visible;
    }

    .registrations-table {
        border: none;
    }

    .registrations-table thead {
        display: none;
    }

    .registrations-table tbody {
        display: grid;
        gap: 0.5rem;
    }

    .registrations-table .group-summary-row {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.25rem 0.5rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--bg-elevated);
        padding: 0.5rem;
    }

    .registrations-table .group-summary-row td {
        border: none;
        padding: 0.25rem 0;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .registrations-table .group-summary-row td[data-label=""]  {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
    }

    .registrations-table .group-summary-row td[data-label="Lot"] {
        grid-column: 2;
    }

    .registrations-table .group-summary-row td[data-label="Membres inscrits"],
    .registrations-table .group-summary-row td[data-label="Statuts"],
    .registrations-table .group-summary-row td[data-label="Montant"],
    .registrations-table .group-summary-row td[data-label="Paiement"] {
        grid-column: 1 / -1;
    }

    .registrations-table .group-summary-row td[data-label="Membres inscrits"]::before,
    .registrations-table .group-summary-row td[data-label="Statuts"]::before,
    .registrations-table .group-summary-row td[data-label="Montant"]::before,
    .registrations-table .group-summary-row td[data-label="Paiement"]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 0.15rem;
    }

    .registrations-table .group-summary-row td[data-label="Actions"] {
        grid-column: 1 / -1;
        border-top: 0;
        background-image: linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        );
        background-repeat: no-repeat;
        background-size: 100% 1px;
        background-position: top left;
        padding-top: 0.55rem;
        margin-top: 0.25rem;
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* Sur touch : icônes toujours visibles, taille tap-friendly, sans libellé */
    .reg-action-btn {
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 50%;
        font-size: 1.05rem;
    }

    /* Masquer les deux pseudo-éléments tooltip sur mobile */
    .reg-action-btn[data-tooltip]::before {
        display: none;
    }

    .reg-action-btn[data-tooltip]::after {
        display: none;
    }

    .registrations-table .group-details-row {
        display: block;
    }

    .registrations-table .group-details-row > td {
        display: block;
        padding: 0;
        border: none;
    }

    .status-filter-bar a {
        padding: 0.55rem 0.95rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Badges plus compacts sur mobile (admin inscriptions) */
    .registrations-table .badge,
    .group-actions-panel .badge,
    .interac-matches-table-wrap .badge,
    .registrations-bulk-actions .badge,
    .registrations-pagination .badge {
        font-size: 0.7rem;
        padding: 0.17rem 0.35rem;
        letter-spacing: 0.005em;
        white-space: nowrap;
    }

    .interac-matches-table-wrap .badge.interac-status-badge--split {
        white-space: normal;
    }

    .interac-mail-cell {
        min-width: 15rem;
    }

    .interac-mail-line--primary {
        grid-template-columns: minmax(4.8rem, 0.75fr) minmax(6.5rem, 1.15fr) minmax(7.5rem, 1.2fr);
        column-gap: 0.28rem;
    }

    .registrations-bulk-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .registrations-bulk-actions .badge {
        text-align: center;
    }

    .registrations-bulk-actions .button[data-short-label] {
        font-size: 0;
        letter-spacing: 0;
    }

    .registrations-bulk-actions .button[data-short-label]::after {
        content: attr(data-short-label);
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: normal;
    }

    .admin-registrations-filter-form .form-hint {
        display: none;
    }

    /* Mobile filter toggle: show button, activate collapsible */
    .reg-filter-toggle-btn {
        display: inline-flex;
    }

    .reg-filter-advanced.reg-filter-collapsed {
        display: none;
    }

    .reg-filter-advanced .form-grid {
        margin-top: 0;
    }

    .registrations-pagination {
        padding: 0.65rem 0;
    }

    .list-pagination {
        padding: 0.45rem 0;
        gap: 0.35rem;
    }

    .list-pagination--compact .button.small {
        min-height: 44px;
        padding: 0.45rem 0.7rem;
    }

    .registrations-pagination .button {
        min-height: 44px;
    }
}

/* ── Registrations: small phones ≤ 640px ───────────────────── */

@media (max-width: 640px) {
    .registrations-table .group-summary-row {
        padding: 0.65rem;
    }

    .registrations-table .group-summary-row td[data-label="Actions"] {
        flex-direction: row;
    }

    /* Tous les boutons d'action : rangée compacte de cercles 44px */
    .registrations-table .group-summary-row .reg-actions,
    .action-buttons .reg-actions,
    .reg-actions__inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
    }

    .registrations-table .group-summary-row .reg-actions form,
    .reg-actions__inner form {
        width: auto;
    }

    .registrations-table .group-summary-row .reg-action-btn,
    .action-buttons .reg-action-btn {
        flex: 0 0 auto;
    }


    .action-buttons .reg-action-btn {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
    }

    .registrations-bulk-actions .button {
        width: 100%;
        justify-content: center;
    }

    .status-filter-bar {
        gap: 0.35rem;
    }

    .status-filter-bar a {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
        font-size: 0.82rem;
        padding: 0.5rem 0.6rem;
    }

    .registrations-table .badge,
    .group-actions-panel .badge,
    .interac-matches-table-wrap .badge,
    .registrations-bulk-actions .badge,
    .registrations-pagination .badge {
        font-size: 0.7rem;
        padding: 0.18rem 0.4rem;
    }

    .interac-matches-table-wrap .badge.interac-status-badge--split {
        white-space: normal;
    }
}

/* ── Registrations: tiny phones ≤ 480px ────────────────────── */

@media (max-width: 480px) {
    /* Restore 2-col layout: toggle stays on left beside content */
    .registrations-table .group-summary-row {
        grid-template-columns: auto 1fr;
        padding: 0.55rem;
    }

    .registrations-table .group-summary-row td[data-label=""] {
        grid-row: 1 / span 3;
        grid-column: 1;
        align-self: start;
    }
}

/* ═══════════════════════════════════════
   CALENDAR
═══════════════════════════════════════ */

/* 8-colour palette for course chips */
html:root {
    --cc-0-bg: #1F4E8C; --cc-0-text: #ffffff;
    --cc-1-bg: #C0392B; --cc-1-text: #ffffff;
    --cc-2-bg: #E67E00; --cc-2-text: #ffffff;
    --cc-3-bg: #1E7A4A; --cc-3-text: #ffffff;
    --cc-4-bg: #6C3483; --cc-4-text: #ffffff;
    --cc-5-bg: #0E7F7F; --cc-5-text: #ffffff;
    --cc-6-bg: #8B5E00; --cc-6-text: #ffffff;
    --cc-7-bg: #A0264A; --cc-7-text: #ffffff;
}

.cc-0 { background: var(--cc-0-bg); color: var(--cc-0-text); }
.cc-1 { background: var(--cc-1-bg); color: var(--cc-1-text); }
.cc-2 { background: var(--cc-2-bg); color: var(--cc-2-text); }
.cc-3 { background: var(--cc-3-bg); color: var(--cc-3-text); }
.cc-4 { background: var(--cc-4-bg); color: var(--cc-4-text); }
.cc-5 { background: var(--cc-5-bg); color: var(--cc-5-text); }
.cc-6 { background: var(--cc-6-bg); color: var(--cc-6-text); }
.cc-7 { background: var(--cc-7-bg); color: var(--cc-7-text); }

.cal-chip--kobudo-0 { background: #d2ba8f; color: #4e3500; }
.cal-chip--kobudo-1 { background: #ba965f; color: #3f2a00; }
.cal-chip--kobudo-2 { background: #a37628; color: #ffffff; }
.cal-chip--kobudo-3 { background: #8b5e00; color: #ffffff; }

.cal-chip--cardio-0 { background: #f8e7a6; color: #4e3a00; }
.cal-chip--cardio-1 { background: #f3d96b; color: #4a3600; }
.cal-chip--cardio-2 { background: #e7bf2e; color: #3d2b00; }
.cal-chip--cardio-3 { background: #d4a90f; color: #3a2800; }

.cal-chip--budo-0 { background: #d3e2f8; color: #1a426f; }
.cal-chip--budo-1 { background: #a9c8f2; color: #173a63; }
.cal-chip--budo-2 { background: #4f83d9; color: #ffffff; }
.cal-chip--budo-3 { background: #2e5ea8; color: #ffffff; }

.cal-chip--eveil-0 { background: #f7cf9d; color: #6f2f12; }
.cal-chip--eveil-1 { background: #f3b16d; color: #692810; }
.cal-chip--eveil-2 { background: #ef8b1f; color: #ffffff; }
.cal-chip--eveil-3 { background: #d6453d; color: #ffffff; }

.cal-chip--menthe-0 { background: #d9f4e8; color: #1e5a43; }
.cal-chip--menthe-1 { background: #bdeed7; color: #1c533f; }
.cal-chip--menthe-2 { background: #5dc89a; color: #12412f; }
.cal-chip--menthe-3 { background: #1d8b5f; color: #ffffff; }

.cal-chip--violet-0 { background: #e6dcf8; color: #42275f; }
.cal-chip--violet-1 { background: #d1bff0; color: #3a2158; }
.cal-chip--violet-2 { background: #9a76d6; color: #ffffff; }
.cal-chip--violet-3 { background: #6b3da8; color: #ffffff; }

.cal-chip--rubis-0 { background: #f8d7e2; color: #6a1f36; }
.cal-chip--rubis-1 { background: #f1b2c9; color: #5f1b31; }
.cal-chip--rubis-2 { background: #d75b85; color: #ffffff; }
.cal-chip--rubis-3 { background: #a0264a; color: #ffffff; }

.cal-chip--ardoise-0 { background: #e2e8f0; color: #314052; }
.cal-chip--ardoise-1 { background: #c7d1de; color: #2c3b4d; }
.cal-chip--ardoise-2 { background: #7b90ab; color: #ffffff; }
.cal-chip--ardoise-3 { background: #465b76; color: #ffffff; }

/* Chip base style */
.cal-chip {
    display: flex;
    align-items: center;
    gap: 0.34rem;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.4;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

.cal-chip__label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-session-chip-line {
    display: flex;
    align-items: center;
    gap: 0.34rem;
    min-width: 0;
    max-width: 100%;
}

.cal-calendar-item-trigger,
.cal-event-chip-trigger {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cal-event-chip-trigger {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.cal-event-chip-trigger--allday {
    display: flex;
    width: 100%;
}

.cal-event-chip-trigger--allday .cal-chip {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-calendar-item-trigger:focus-visible,
.cal-event-chip-trigger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, var(--line));
    outline-offset: 2px;
    border-radius: 8px;
}

@media (hover: hover) and (pointer: fine) {
    .cal-calendar-item-trigger:hover .cal-chip,
    .cal-event-chip-trigger:hover .cal-chip {
        filter: saturate(1.06) brightness(1.02);
    }
}

.cal-age-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--line) 74%, var(--text));
    background: color-mix(in srgb, var(--bg-elevated) 78%, var(--muted) 22%);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-age-badge--canceled {
    opacity: 0.68;
    text-decoration: line-through;
}

.cal-season-marker {
    width: 0.52rem;
    height: 0.52rem;
    flex: 0 0 0.52rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #000000 16%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, #ffffff 30%, transparent);
    background: color-mix(in srgb, var(--muted) 44%, var(--bg-elevated));
}

.cal-season-marker--automne {
    background: color-mix(in srgb, var(--brand-orange) 70%, var(--brand-red));
}

.cal-season-marker--hiver {
    background: color-mix(in srgb, var(--accent) 62%, #d8efff);
}

.cal-season-marker--printemps {
    background: color-mix(in srgb, #7bc67b 74%, #dff3b8);
}

.cal-season-marker--ete {
    background: color-mix(in srgb, #f5d34f 78%, #fff3b0);
}

.cal-season-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    margin-top: 0.65rem;
    color: var(--muted);
    font-size: 0.78rem;
}

.cal-season-key__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cal-session-chip-wrap {
    display: grid;
    gap: 2px;
}

.cal-session-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    min-width: 0;
    max-width: 100%;
    margin-left: 0.86rem;
}

.cal-session-meta .cal-age-badge,
.cal-mobile-session-meta .cal-age-badge {
    max-width: 6.2rem;
}

.cal-session-time {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-session-time--canceled {
    opacity: 0.68;
    text-decoration: line-through;
}

.cal-season-boundary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.25rem;
}

.cal-season-boundary {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 1px 5px;
    border: 1px dashed color-mix(in srgb, var(--line) 84%, var(--text));
    border-radius: 4px;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0.88;
    white-space: normal;
    overflow-wrap: anywhere;
}

.cal-season-boundary--start {
    justify-self: flex-start;
    color: color-mix(in srgb, var(--brand-orange) 66%, var(--text));
    border-color: color-mix(in srgb, var(--brand-orange) 38%, var(--line));
    background: color-mix(in srgb, var(--brand-orange) 6%, var(--bg-elevated));
}

.cal-season-boundary--end {
    margin-left: auto;
    color: color-mix(in srgb, var(--text) 80%, var(--brand-charcoal));
    border-color: color-mix(in srgb, var(--brand-charcoal) 40%, var(--line));
    background: color-mix(in srgb, var(--brand-charcoal) 12%, var(--bg-elevated));
}

.cal-season-boundary--ghost {
    visibility: hidden;
    pointer-events: none;
}

.cal-chip--canceled {
    opacity: 0.5;
    text-decoration: line-through;
}

.cal-chip--holiday {
    background: var(--calendar-holiday-bg);
    color: var(--calendar-holiday-text);
    border: 1px solid var(--calendar-holiday-border);
}

.cal-chip--event {
    background: color-mix(in srgb, var(--accent) 24%, var(--bg-elevated));
    color: var(--accent-strong);
    border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
}

.cal-chip--session-start {
    background: color-mix(in srgb, var(--brand-orange) 28%, var(--bg-elevated));
    color: color-mix(in srgb, var(--brand-red) 65%, var(--text));
    border: 1px solid color-mix(in srgb, var(--brand-orange) 60%, var(--line));
}

.cal-chip--session-end {
    background: color-mix(in srgb, var(--brand-charcoal) 28%, var(--bg-elevated));
    color: color-mix(in srgb, var(--text) 94%, var(--brand-charcoal));
    border: 1px solid color-mix(in srgb, var(--brand-charcoal) 56%, var(--line));
}

.calendar-ics-share {
    margin-top: 0.9rem;
    display: grid;
    gap: 0.75rem;
    background:
        linear-gradient(128deg, color-mix(in srgb, var(--accent) 13%, var(--bg-elevated-strong)), color-mix(in srgb, var(--brand-orange) 11%, var(--bg-elevated-strong)));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}

.calendar-compact-section {
    padding: 0.95rem 1.05rem;
}

.calendar-ics-share[open] {
    gap: 0.85rem;
}

.calendar-ics-share__summary {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.62rem;
    align-items: center;
    cursor: pointer;
}

.calendar-ics-share__summary::-webkit-details-marker {
    display: none;
}

.calendar-ics-share__summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, var(--line));
    outline-offset: 4px;
    border-radius: 12px;
}

.calendar-compact-heading {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.calendar-compact-heading h2,
.calendar-compact-heading p {
    margin: 0;
}

.calendar-icon-button,
.calendar-section-toggle {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    color: var(--accent-strong);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.calendar-icon-button:hover,
.calendar-section-toggle:hover {
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
}

.calendar-icon-button:focus-visible,
.calendar-section-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, var(--line));
    outline-offset: 2px;
}

.calendar-section-toggle i,
.calendar-icon-button i {
    font-size: 1.02rem;
}

.calendar-ics-share__body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(200px, 280px);
    gap: 1.1rem;
    align-items: center;
    padding-top: 0.95rem;
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
}

.calendar-ics-share__copy {
    display: grid;
    gap: 0.5rem;
}

.calendar-ics-share__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.calendar-ics-share__actions .button {
    min-height: 2.6rem;
    justify-content: center;
}

.calendar-ics-share__copy h2 {
    font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.calendar-ics-share__copy p {
    margin: 0;
}

.calendar-ics-share__url {
    margin-top: 0.2rem;
    word-break: break-all;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ics-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.22em 0.62em;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    border-radius: 6px;
    background: transparent;
    color: var(--accent-strong);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.ics-copy-btn:hover {
    background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.ics-copy-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, var(--line));
    outline-offset: 2px;
}

.ics-copy-btn--copied {
    color: #2d7a45;
    border-color: #2d7a45;
}

.calendar-ics-share__url a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    font-weight: 700;
}

.calendar-ics-share__url a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, var(--line));
    outline-offset: 2px;
    border-radius: 6px;
}

.calendar-ics-share__qr-wrap {
    margin: 0;
    justify-self: end;
    display: grid;
    gap: 0.42rem;
    justify-items: center;
}

.calendar-ics-share__qr {
    display: block;
    width: min(100%, 280px);
    border-radius: 18px;
    padding: 0.65rem;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--line) 84%, #000000);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 20%, transparent);
}

.calendar-ics-share__qr-wrap figcaption {
    font-size: 0.78rem;
    color: var(--muted);
    text-align: center;
}

/* ── Calendrier personnalisé (mes-inscriptions) ── */

.calendar-personal-card {
    display: grid;
    gap: 0.9rem;
}

.calendar-personal-card__summary {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.62rem;
    align-items: center;
    cursor: pointer;
}

.calendar-personal-card__summary::-webkit-details-marker {
    display: none;
}

.calendar-compact-heading h2 {
    font-size: clamp(1.1rem, 1.9vw, 1.38rem);
    line-height: 1.2;
    font-weight: 700;
}

.calendar-compact-heading p:last-child {
    font-size: clamp(0.96rem, 1.25vw, 1.08rem);
    line-height: 1.45;
    color: var(--muted);
}

.calendar-personal-card__summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, var(--line));
    outline-offset: 4px;
    border-radius: 12px;
}

.calendar-personal-filter-row {
    display: grid;
    gap: 0.5rem;
}

.calendar-member-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.calendar-member-filter[data-button-indicator-group] {
    position: relative;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.22rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 72%, transparent);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.calendar-member-filter[data-button-indicator-group] .calendar-member-pill {
    position: relative;
    z-index: 1;
    border-color: transparent;
}

.calendar-member-filter[data-button-indicator-group] .calendar-member-pill:not(.is-active) {
    color: color-mix(in srgb, var(--text) 88%, var(--muted));
}

.calendar-member-filter-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 90%, var(--accent) 10%);
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 18%, transparent);
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: transform 220ms ease, width 220ms ease, height 220ms ease, opacity 150ms ease;
}

.calendar-member-filter[data-button-indicator-ready] .calendar-member-filter-indicator {
    opacity: 1;
}

.calendar-member-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.85em;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
    line-height: 1.3;
}

.calendar-member-pill:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.calendar-member-pill:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 72%, var(--line));
    outline-offset: 2px;
}

.calendar-member-pill.is-active {
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated));
    border-color: var(--accent);
    color: var(--accent-strong);
    font-weight: 700;
}

.calendar-member-filter[data-button-indicator-group] .calendar-member-pill.is-active {
    background: transparent;
}

.calendar-member-pill.is-select-all.is-active {
    background: color-mix(in srgb, var(--brand-orange) 16%, var(--bg-elevated));
    border-color: var(--brand-orange, var(--accent));
    color: color-mix(in srgb, var(--brand-orange, var(--accent)) 85%, var(--text));
}

.calendar-member-filter[data-button-indicator-group] .calendar-member-pill.is-select-all.is-active {
    background: transparent;
}

.calendar-ics-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.calendar-ics-copy-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    width: 100%;
}

.calendar-ics-link-preview {
    font-size: 0.77rem;
    color: var(--muted);
    word-break: break-all;
    flex: 1 1 0;
    min-width: 0;
}

.calendar-token-details {
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
    padding-top: 0.72rem;
    margin-top: 0.2rem;
}

.calendar-token-details summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
    list-style: disclosure-closed;
    user-select: none;
}

.calendar-token-details[open] summary {
    list-style: disclosure-open;
    margin-bottom: 0.75rem;
}

.calendar-token-details__body {
    display: grid;
    gap: 0.75rem;
}

.calendar-token-details__body p {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0;
}

@media (max-width: 640px) {
    .calendar-icon-button,
    .calendar-section-toggle {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .calendar-ics-share__summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .calendar-personal-card__summary {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .calendar-compact-section {
        padding: 0.88rem 0.9rem;
    }

    .calendar-ics-share__actions {
        width: 100%;
    }

    .calendar-ics-share__actions .button {
        width: 100%;
    }

    .calendar-ics-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .calendar-ics-actions .button {
        text-align: center;
        justify-content: center;
    }

    .calendar-ics-copy-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .calendar-ics-link-preview {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .calendar-member-pill {
        font-size: 0.82rem;
        padding: 0.28em 0.7em;
    }
}

.profile-page .dashboard-grid {
    align-items: start;
}

.profile-sidebar-stack {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.profile-sidebar-stack .table-heading {
    display: grid;
    gap: 0.2rem;
    margin: 0;
}

.profile-sidebar-stack .table-heading h2,
.profile-sidebar-stack .section-label {
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 800;
    margin: 0;
}

.profile-sidebar-stack .table-heading p,
.profile-sidebar-stack .profile-team-space-subtitle,
.profile-sidebar-stack .inline-toggle-row__text .ui-toggle__text {
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-muted);
    margin: 0;
}

.profile-sidebar-stack .inline-toggle-row__text {
    gap: 0.2rem;
}

.profile-sidebar-stack .inline-toggle-row__text strong {
    margin: 0;
}

.profile-sidebar-stack .button:not(.small) {
    font-size: 0.92rem;
    padding: 0.58rem 1rem;
    min-height: 2.45rem;
}

.profile-page .profile-heading-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
}

.profile-page .profile-heading-aside .inline-actions,
.profile-page .profile-heading-aside .role-badges {
    margin-top: 0;
}

.profile-page .profile-heading-aside .role-badges {
    justify-content: flex-end;
}

.profile-main-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}

.profile-team-space-card {
    gap: 0.55rem;
}

.profile-team-space-heading {
    align-items: flex-start;
    gap: 0.7rem;
}

.profile-team-space-heading > div:first-child {
    min-width: 0;
}

.profile-team-space-heading h2 {
    margin-bottom: 0.25rem;
}

.profile-team-space-subtitle {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--muted);
}

.profile-team-space-card .inline-actions.compact-actions {
    margin-top: 0;
}

.profile-team-space-actions {
    margin-top: 0.1rem;
    gap: 0.55rem;
}

.profile-team-space-actions .button {
    flex: 1 1 0;
}

.profile-referral-card {
    display: grid;
    gap: 0.6rem;
}

.profile-referral-card .table-heading {
    margin-bottom: 0.05rem;
}

.profile-referral-card .table-heading p {
    margin: 0;
}

.profile-referral-details {
    margin-top: 0.15rem;
    border-style: solid;
    border-color: color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    display: grid;
    gap: 0.45rem;
}

.profile-referral-offer-line {
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.profile-referral-offer-line i {
    color: color-mix(in srgb, var(--accent) 66%, var(--text));
    font-size: 1rem;
    line-height: 1.3;
    margin-top: 0.08rem;
}

.profile-referral-generate {
    margin-top: 0.1rem;
}

.profile-referral-generate .button {
    width: 100%;
    justify-content: center;
}

.profile-referral-link-row {
    margin-top: 0.15rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
}

.profile-referral-link-row .form-input {
    margin: 0;
}

.profile-referral-link-input {
    font-size: 0.95rem;
}

.profile-referral-link-row .button {
    min-width: 7rem;
    justify-content: center;
}

.profile-gift-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.55rem;
}

.profile-gift-card-list__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.profile-gift-card-list__item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
}

.family-certification-block {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--surface-alt, var(--surface));
    border: 1px solid var(--border-subtle, var(--border));
}

.family-certification-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin: 0 0 0.15rem;
}

.family-certification-declaration {
    font-style: italic;
    margin-top: 0.2rem;
}

.profile-password-section {
    margin-top: 0;
    gap: 0.55rem;
    padding: 0.6rem 0.85rem;
}

.profile-password-section .password-security-form {
    gap: 0.45rem;
    padding: 0.8rem 0.9rem;
}

.profile-password-section .password-security-form .form-grid {
    gap: 0.65rem;
}

.profile-password-section .password-security-form .autosave-status {
    margin-top: 0;
}

@media (min-width: 641px) {
    .profile-password-section .password-security-form {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: 0.75rem;
        row-gap: 0.25rem;
    }

    .profile-password-section .password-security-form .submit-button {
        width: auto;
        white-space: nowrap;
        align-self: end;
        margin-bottom: 0;
    }

    .profile-password-section .password-security-form .autosave-status {
        grid-column: 1 / -1;
    }
}

.attendance-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.attendance-qr-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.attendance-qr-card__figure {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 0.55rem;
}

.attendance-qr-card__figure img {
    width: min(100%, 320px);
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--line) 84%, #000000);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 18%, transparent);
    padding: 0.65rem;
}

.attendance-qr-card__figure figcaption {
    color: var(--muted);
    text-align: center;
    font-size: 0.86rem;
}

.attendance-qr-card__meta {
    display: grid;
    gap: 0.45rem;
}

.attendance-qr-card__line {
    margin: 0;
}

.attendance-qr-result {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.8rem;
    padding: 2rem 1.25rem;
}

.attendance-qr-result__title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
}

.attendance-qr-result__sub {
    color: var(--muted);
    margin: 0;
    font-size: 0.95rem;
}

.attendance-qr-result--success {
    border-color: color-mix(in srgb, #2d7a45 52%, var(--line));
    background: color-mix(in srgb, #2d7a45 10%, transparent);
}

.attendance-qr-result--success .attendance-qr-result__title {
    color: #2d7a45;
}

.attendance-qr-result--already {
    border-color: color-mix(in srgb, #b36d00 48%, var(--line));
    background: color-mix(in srgb, #b36d00 10%, transparent);
}

.attendance-qr-result--already .attendance-qr-result__title {
    color: #b36d00;
}

.attendance-scan-grid {
    align-items: flex-start;
}

.attendance-scan-controls {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.attendance-toggle-group {
    display: grid;
    gap: 0.45rem;
}

.attendance-camera-wrap {
    position: relative;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 75%, transparent);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    min-height: 260px;
}

.attendance-camera-wrap video {
    width: 100%;
    height: 100%;
    min-height: 260px;
    display: block;
    object-fit: cover;
    background: #111111;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.attendance-camera-overlay {
    pointer-events: none;
    position: absolute;
    inset: 10%;
    border: 2px dashed color-mix(in srgb, var(--accent) 62%, #ffffff);
    border-radius: 14px;
}

.attendance-camera-state {
    margin: 0;
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 2;
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg) 88%, #000000 12%);
    border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    padding: 0.4rem 0.55rem;
    font-size: 0.86rem;
    color: var(--text);
}

.attendance-status {
    margin: 0.8rem 0;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    padding: 0.82rem 0.88rem;
    min-height: 44px;
    display: grid;
    gap: 0.2rem;
}

.attendance-status__title,
.attendance-status__meta {
    margin: 0;
}

.attendance-status__title {
    font-size: clamp(1.01rem, 1vw + 0.72rem, 1.2rem);
    font-weight: 760;
    line-height: 1.28;
}

.attendance-status__meta {
    font-size: 0.9rem;
    color: var(--muted);
}

.attendance-status[data-type="success"] {
    border-color: color-mix(in srgb, #2d7a45 52%, var(--line));
    background: color-mix(in srgb, #2d7a45 12%, transparent);
}

.attendance-status[data-type="warning"] {
    border-color: color-mix(in srgb, #b36d00 48%, var(--line));
    background: color-mix(in srgb, #b36d00 13%, transparent);
}

.attendance-status[data-type="error"] {
    border-color: color-mix(in srgb, var(--brand-red) 56%, var(--line));
    background: color-mix(in srgb, var(--brand-red) 12%, transparent);
}

.attendance-status[data-type="success"] .attendance-status__title {
    color: color-mix(in srgb, #2d7a45 88%, var(--text));
}

.attendance-status[data-type="warning"] .attendance-status__title {
    color: color-mix(in srgb, #8f5700 88%, var(--text));
}

.attendance-status[data-type="error"] .attendance-status__title {
    color: color-mix(in srgb, var(--brand-red) 86%, var(--text));
}

.attendance-manual-form {
    margin-top: 0.75rem;
    display: grid;
    gap: 0.55rem;
}

.attendance-recent-item {
    gap: 0.22rem;
}

@media (max-width: 960px) {
    .profile-page .profile-heading-aside {
        width: 100%;
        align-items: flex-start;
    }

    .profile-page .profile-heading-aside .inline-actions {
        width: 100%;
    }

    .profile-page .profile-heading-aside .inline-actions .button {
        width: 100%;
        justify-content: center;
    }

    .profile-page .profile-heading-aside .role-badges {
        justify-content: flex-start;
    }

    .attendance-qr-card {
        grid-template-columns: 1fr;
    }

    .attendance-profile-actions {
        flex-direction: column;
    }

    .attendance-profile-actions .button {
        width: 100%;
        justify-content: center;
    }

    .profile-team-space-heading {
        gap: 0.5rem;
    }

    .profile-team-space-card .inline-actions.compact-actions {
        width: auto;
    }

    .profile-referral-link-row .button {
        min-width: 6.5rem;
    }

    .attendance-camera-wrap,
    .attendance-camera-wrap video {
        min-height: 240px;
    }

    .attendance-status {
        padding: 0.75rem 0.8rem;
    }
}

@media (max-width: 640px) {
    .profile-referral-link-row {
        grid-template-columns: 1fr;
    }

    .profile-referral-link-row .button {
        width: 100%;
    }

    .attendance-scan-page .inline-actions {
        width: 100%;
    }

    .attendance-scan-page .inline-actions .button {
        width: 100%;
        justify-content: center;
    }

    .attendance-camera-wrap,
    .attendance-camera-wrap video {
        min-height: 240px;
    }

    .attendance-toggle-group .ui-toggle {
        width: 100%;
    }

    .attendance-status__title {
        font-size: 1.02rem;
    }

    .attendance-status__meta {
        font-size: 0.88rem;
    }
}

@media (max-width: 480px) {
    .attendance-camera-wrap,
    .attendance-camera-wrap video {
        min-height: 220px;
    }

    .attendance-camera-overlay {
        inset: 11%;
    }

    .attendance-status {
        padding: 0.72rem 0.72rem;
    }
}

/* ── Grid wrapper ── */
.calendar-page {
    font-family: "Avenir Next", "SF Pro Text", "Segoe UI", "Noto Sans", var(--font-body);
}

.calendar-page button,
.calendar-page input,
.calendar-page select,
.calendar-page textarea {
    font-family: inherit;
}

.cal-grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    min-width: 480px;
}

/* Day-of-week headers */
.cal-head {
    text-align: center;
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 2px;
    color: var(--muted);
}

/* Day cells */
.cal-day {
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 80px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--bg);
}

.cal-day--out {
    opacity: 0.3;
    background: transparent;
    border-color: transparent;
}

.cal-day__num {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1;
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: flex-start;
}

.cal-day--weekend {
    border-color: color-mix(in srgb, var(--calendar-weekend-border) 56%, var(--line));
    background: color-mix(in srgb, var(--calendar-weekend-bg) 36%, var(--bg));
}

.cal-day--holiday {
    border-color: color-mix(in srgb, var(--calendar-holiday-border) 58%, var(--line));
    background: color-mix(in srgb, var(--calendar-holiday-bg) 12%, var(--bg));
}

.cal-day--weekend.cal-day--holiday {
    border-color: color-mix(in srgb, var(--calendar-holiday-border) 40%, var(--calendar-weekend-border) 40%);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--calendar-holiday-bg) 18%, var(--bg)) 0%,
            color-mix(in srgb, var(--calendar-holiday-bg) 18%, var(--bg)) 48%,
            color-mix(in srgb, var(--calendar-weekend-bg) 42%, var(--bg)) 52%,
            color-mix(in srgb, var(--calendar-weekend-bg) 42%, var(--bg)) 100%
        );
}

.cal-day--today,
.cal-day--today.cal-day--weekend,
.cal-day--today.cal-day--holiday,
.cal-day--today.cal-day--weekend.cal-day--holiday {
    border-width: 3px;
    border-color: color-mix(in srgb, var(--accent) 88%, var(--line));
    background: color-mix(in srgb, var(--accent) 7%, var(--bg));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 56%, transparent),
        0 0 0 2px color-mix(in srgb, var(--accent) 42%, transparent),
        0 10px 22px color-mix(in srgb, var(--accent) 22%, transparent);
}

.cal-day--today .cal-day__num {
    background: transparent;
    color: var(--accent-strong);
    font-weight: 800;
}

.cal-day--jumped {
    animation: cal-today-pulse 0.9s ease-out;
}

.cal-mobile-list {
    display: none;
}

.cal-mobile-block {
    display: none;
}

.cal-mobile-page-filter {
    display: none;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin-top: 0.7rem;
}

.cal-mobile-filter__button {
    appearance: none;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
    color: var(--text);
    border-radius: 999px;
    padding: 0.34rem 0.66rem;
    min-height: 34px;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.cal-mobile-filter__button.is-active {
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    color: var(--accent-strong);
}

.cal-mobile-list__empty-filter {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.cal-mobile-day {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.8rem 0.85rem;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    display: grid;
    gap: 0.5rem;
}

.cal-mobile-day__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.cal-mobile-day__date {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--text);
}

.cal-mobile-day__badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.15rem 0.56rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
}

.cal-mobile-day__holiday {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--calendar-holiday-bg) 78%, var(--text));
}

.cal-mobile-sessions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.42rem;
}

.cal-mobile-events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.cal-mobile-events__item {
    display: grid;
    gap: 0.2rem;
}

.cal-mobile-events__description {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
}

.cal-mobile-sessions__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem 0.55rem;
    align-items: center;
}

.cal-mobile-sessions__item .cal-season-boundary-row {
    grid-column: 1 / -1;
}

.cal-mobile-sessions__item .cal-season-boundary {
    max-width: 100%;
    font-size: 0.68rem;
}

.cal-mobile-session-meta {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    min-width: 0;
    max-width: 100%;
}

.cal-mobile-sessions__time,
.cal-mobile-sessions__status,
.cal-mobile-day__empty,
.cal-mobile-list__empty {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
}

.cal-mobile-sessions__status {
    grid-column: 1 / -1;
}

.cal-mobile-sessions__item .cal-chip {
    font-size: 0.82rem;
    padding: 0.24rem 0.52rem;
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
}

.cal-mobile-session-chip-line {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    max-width: 100%;
}

.calendar-item-dialog {
    width: min(700px, calc(100vw - 1rem));
    max-width: 700px;
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-soft) 26%, transparent), transparent 52%),
        color-mix(in srgb, var(--bg-elevated) 98%, transparent);
    box-shadow: 0 20px 52px color-mix(in srgb, #000000 30%, transparent);
}

.calendar-item-dialog::backdrop {
    background: radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, #000000 72%, transparent));
}

.calendar-item-dialog__panel {
    gap: 0.75rem;
}

.calendar-item-dialog__eyebrow,
.calendar-item-dialog__subtitle,
.calendar-item-dialog__description {
    margin: 0;
}

.calendar-item-dialog__subtitle {
    color: var(--muted);
}

.calendar-item-dialog__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.42rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.calendar-item-dialog__meta-item {
    display: grid;
    gap: 0.12rem;
    border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    border-radius: 10px;
    padding: 0.5rem 0.58rem;
    background: color-mix(in srgb, var(--bg-elevated) 95%, transparent);
}

.calendar-item-dialog__meta-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.calendar-item-dialog__meta-value {
    font-size: 0.94rem;
    color: var(--text);
    overflow-wrap: anywhere;
}

.calendar-item-dialog__description {
    border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    border-radius: 10px;
    padding: 0.62rem 0.68rem;
    background: color-mix(in srgb, var(--bg) 75%, var(--bg-elevated));
    line-height: 1.5;
    color: var(--text);
}

.calendar-item-dialog__description[hidden],
.calendar-item-dialog__subtitle[hidden],
.calendar-item-dialog__gallery-action[hidden] {
    display: none;
}

.calendar-item-dialog__gallery-action {
    padding-top: 0.25rem;
}

.cal-legend-gallery-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
    margin-top: 2px;
}

.cal-legend-gallery-link:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .calendar-item-dialog {
        width: min(100vw - 0.7rem, 700px);
    }

    .calendar-item-dialog__meta {
        grid-template-columns: 1fr;
    }
}

.cal-mobile-sessions__item .cal-season-marker {
    width: 0.58rem;
    height: 0.58rem;
    flex-basis: 0.58rem;
}

.cal-mobile-sessions__item--canceled .cal-mobile-sessions__time {
    text-decoration: line-through;
}

.cal-mobile-day--today {
    border-width: 3px;
    border-color: color-mix(in srgb, var(--accent) 84%, var(--line));
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 48%, transparent),
        0 0 0 2px color-mix(in srgb, var(--accent) 36%, transparent),
        0 8px 18px color-mix(in srgb, var(--accent) 20%, transparent);
}

.cal-mobile-day--jumped {
    animation: cal-mobile-today-pulse 0.85s ease-out;
}

.cal-session-chip-wrap[hidden] {
    display: none;
}

.cal-mobile-day[hidden],
.cal-mobile-sessions[hidden],
.cal-mobile-sessions__item[hidden],
.cal-mobile-day__holiday[hidden],
.cal-mobile-day__empty[hidden],
.cal-mobile-list__empty-filter[hidden],
[data-month-section][hidden] {
    display: none;
}

@keyframes cal-today-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
    }
    100% {
        box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent);
    }
}

@keyframes cal-mobile-today-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 32%, transparent);
    }
    100% {
        box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent);
    }
}

/* ── Legend ── */
.cal-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    padding-top: 8px;
}

.cal-legend-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
    border: 1px solid var(--line);
}

.cal-legend-item--collapsible {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.cal-legend-item__summary {
    list-style: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    min-width: 0;
}

.cal-legend-item__summary:hover {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.cal-legend-item__summary:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 60%, var(--line));
    outline-offset: -2px;
}

.cal-legend-item__swatch {
    width: 0.92rem;
    height: 0.92rem;
    min-width: 0.92rem;
    border-radius: 999px;
    padding: 0;
    border: 1px solid color-mix(in srgb, #000000 20%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 42%, transparent);
}

.cal-legend-item__summary::-webkit-details-marker {
    display: none;
}

.cal-legend-item__summary-copy {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

.cal-legend-item__summary-copy strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--text);
    overflow-wrap: anywhere;
}

.cal-legend-item__summary-copy .cal-age-badge {
    font-size: 0.58rem;
    padding: 1px 5px;
}

.cal-legend-item__summary-copy span {
    display: block;
    font-size: 0.78rem;
    line-height: 1.25;
    color: var(--muted);
}

.cal-legend-item__chevron {
    color: var(--muted);
    font-size: 0.84rem;
    transition: transform 0.18s ease;
}

.cal-legend-item--collapsible[open] .cal-legend-item__chevron {
    transform: rotate(180deg);
}

.cal-legend-item--collapsible .cal-legend-details {
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
    padding: 0.65rem 0.75rem 0.75rem;
    background: color-mix(in srgb, var(--bg-elevated) 76%, transparent);
}

.cal-legend-item .cal-chip {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    margin-top: 0;
}

.cal-legend-item .cal-chip.cal-legend-item__swatch {
    white-space: normal;
}

.cal-legend-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.82rem;
    flex: 1;
    min-width: 0;
}

.cal-legend-details--grouped {
    gap: 0.5rem;
}

.cal-legend-detail-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cal-legend-detail-group span + span {
    margin-bottom: 0.3rem;
}

.cal-legend-detail-group + .cal-legend-detail-group {
    padding-top: 0.45rem;
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
}

.cal-legend-details strong {
    font-size: 0.88rem;
    color: var(--text);
}

.cal-legend-details span {
    color: var(--muted);
}

.cal-legend-panel .cal-season-key {
    max-width: 44rem;
}

.cal-season-boundary-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cal-season-boundary-column {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0;
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    overflow: hidden;
}

.cal-season-boundary-column__summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    cursor: pointer;
}

.cal-season-boundary-column__summary::-webkit-details-marker {
    display: none;
}

.cal-season-boundary-column__summary .eyebrow {
    margin: 0;
}

.cal-season-boundary-column__count,
.cal-legend-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    min-height: 1.2rem;
    padding: 0 0.42rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated));
    border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
}

.cal-season-boundary-column .cal-legend {
    padding: 0 0.7rem 0.7rem;
    gap: 0.6rem;
    grid-template-columns: 1fr;
}

.cal-season-boundary-column .cal-legend-item {
    background: none;
    border-color: transparent;
    padding: 6px 4px;
}

.cal-legend-section {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-elevated) 65%, transparent);
    overflow: hidden;
}

.cal-legend-section__summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text);
}

.cal-legend-section__summary::-webkit-details-marker {
    display: none;
}

.cal-legend-section .cal-legend {
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
    padding: 0.7rem;
}

.cal-legend-panel {
    position: relative;
    gap: 0;
}

.cal-legend-panel:not([hidden]) {
    display: grid;
}

.cal-legend-panel[hidden] {
    display: none;
}

.cal-legend-panel__toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--accent-strong);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: none;
}

.cal-legend-panel__toggle:hover {
    color: color-mix(in srgb, var(--accent) 82%, var(--text));
}

.cal-legend-panel__toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 64%, var(--line));
    outline-offset: 2px;
    border-radius: 4px;
}

.cal-legend-panel__overlay {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 20;
    width: min(900px, calc(100vw - 2rem));
    max-height: min(var(--legend-overlay-max-height, 78vh), 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: none;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated-strong) 96%, transparent);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--text) 14%, transparent);
}

.cal-legend-panel.is-open .cal-legend-panel__overlay {
    display: grid;
}

.cal-legend-panel--static {
    margin-top: 0.6rem;
}

.cal-legend-panel--static .cal-legend-panel__toggle {
    display: none;
}

.cal-legend-panel--static .cal-legend-panel__overlay {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    display: grid;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cal-month-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 40;
}

.cal-month-heading__legend-slot {
    flex: 0 0 min(420px, 38vw);
    min-width: 280px;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    position: relative;
    z-index: 45;
}

.cal-month-heading__legend-slot[hidden] {
    display: flex;
    visibility: hidden;
    pointer-events: none;
}

.calendar-page .cal-month-heading__legend-slot .cal-legend-panel .table-heading {
    margin: 0;
}

.calendar-page .cal-month-heading__legend-slot .cal-legend-panel--static {
    padding: 1.3rem 1.9rem;
}

.calendar-page .cal-month-heading__legend-slot .cal-legend-panel--static .cal-legend-panel__toggle {
    display: inline-flex;
    min-height: 0.4rem;
    height: 0.4rem;
    width: max-content;
    min-width: 0;
    padding: 0 0.04rem;
    font-size: 0.66rem;
    letter-spacing: 0.01em;
    line-height: 0.9;
    font-weight: 700;
}

.calendar-page .cal-month-heading__legend-slot .cal-legend-panel--static .cal-legend-panel__overlay {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    left: auto;
    z-index: 80;
    width: min(900px, calc(100vw - 2rem));
    max-height: min(var(--legend-overlay-max-height, 78vh), 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: none;
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elevated-strong) 96%, transparent);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--text) 14%, transparent);
}

.calendar-page .cal-month-heading__legend-slot .cal-legend-panel--static.is-open .cal-legend-panel__overlay {
    display: grid;
}

.calendar-page .cal-month-heading__legend-slot .cal-legend-panel__overlay .table-heading h2 {
    font-size: 1.05rem;
}

.calendar-page .cal-month-heading__legend-slot .cal-legend-panel__overlay .table-heading p {
    font-size: 0.84rem;
}

.calendar-page .cal-month-heading__legend-slot .cal-legend-panel__overlay .cal-legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    padding-top: 0.45rem;
    align-items: start;
}

.calendar-page .cal-month-heading__legend-slot .cal-legend-panel.is-month-snap .cal-legend-panel__toggle {
    animation: cal-legend-month-inline-snap 220ms ease;
}

@keyframes cal-legend-month-inline-snap {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 16%, transparent);
        border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
    }
    100% {
        box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 12%, transparent);
        border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    }
}

@media (max-width: 960px) {
    .cal-month-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .cal-month-heading__legend-slot {
        min-width: 0;
        width: 100%;
        flex-basis: auto;
        justify-content: flex-start;
    }

    .cal-month-heading__legend-slot[hidden] {
        display: none;
        visibility: hidden;
    }

    .cal-legend-panel__overlay {
        left: 0;
        right: auto;
        width: min(100%, 100vw - 2rem);
    }

    .cal-season-boundary-columns {
        grid-template-columns: 1fr;
    }

    .cal-legend {
        grid-template-columns: 1fr;
    }

    .cal-season-key {
        gap: 0.4rem 0.65rem;
        font-size: 0.74rem;
    }

    .cal-legend-item__summary {
        line-height: 1;
        vertical-align: baseline;
        padding: 0.62rem 0.68rem;
        gap: 0.45rem;
    }

    .cal-legend-item__summary-copy strong {
        font-size: 0.86rem;
    }

    .cal-legend-item__summary-copy span {
        font-size: 0.75rem;
    }
}

.cal-period-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1rem;
}

.cal-period-nav__button {
    flex: 0 0 auto;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-inline: 1rem;
    text-align: center;
    white-space: nowrap;
}

.cal-period-nav__button--next {
    justify-content: center;
}

.cal-period-nav__direction {
    font-size: 0.95rem;
    line-height: 1;
}

.cal-period-nav--top {
    justify-content: flex-end;
    margin-top: 1.6rem;
    margin-bottom: 0.7rem;
}

.cal-period-nav--bottom {
    justify-content: center;
    margin-top: 1.5rem;
}

.cal-period-nav--bottom .cal-period-nav__button {
    flex: 1 1 220px;
}

@media (max-width: 960px) {
    .registration-progress-meta {
        padding: 0.8rem;
    }

    .registration-step {
        gap: 0.5rem;
    }

    .registration-step__body small {
        font-size: 0.68rem;
    }

    .registration-step__body strong {
        font-size: 0.88rem;
    }

    .cal-period-nav--top,
    .cal-period-nav--bottom {
        justify-content: center;
    }

    .cal-period-nav {
        gap: 0.65rem;
    }

    .cal-period-nav--bottom .cal-period-nav__button {
        flex: 1 1 calc(50% - 0.4rem);
        min-height: 48px;
        font-size: 0.95rem;
        padding-inline: 0.9rem;
    }

    .cal-period-nav--bottom {
        position: sticky;
        bottom: 0;
        z-index: 12;
        margin-top: 1.25rem;
        margin-bottom: 0;
        padding: 0.75rem 0.8rem calc(0.75rem + env(safe-area-inset-bottom));
        border-top: 0;
        background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
        background-image: linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        );
        background-repeat: no-repeat;
        background-size: 100% 1px;
        background-position: top left;
        backdrop-filter: blur(6px);
    }
}

@media (max-width: 680px) {
    .family-member-list {
        grid-template-columns: 1fr;
    }

    .background-orb {
        display: none;
    }

    /* iOS Safari can break sticky descendants when parent keeps animated transforms. */
    .calendar-page.reveal {
        animation: none;
        transform: none;
        opacity: 1;
    }

    .cal-grid-wrap {
        display: none;
    }

    .cal-mobile-page-filter {
        display: flex;
        position: sticky;
        top: var(--calendar-sticky-top, calc(0.5rem + env(safe-area-inset-top)));
        z-index: 14;
        padding: 0.42rem;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
        backdrop-filter: blur(8px);
    }

    .cal-mobile-block {
        display: block;
    }

    .cal-mobile-list {
        display: grid;
        gap: 0.65rem;
    }

    .cal-period-nav--top {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .cal-period-nav__button {
        width: 100%;
        min-height: 48px;
        white-space: normal;
    }

    .cal-period-nav--bottom {
        display: none;
    }
}

.assistant-widget {
    --assistant-orb-size: 168px;
    --assistant-orb-mini-size: 111px;
    --assistant-panel-width: min(370px, calc(100vw - 1rem));
    --assistant-panel-max-height: min(70vh, 540px);
    --assistant-safe-bottom-default: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
    position: fixed;
    right: 1rem;
    bottom: var(--assistant-safe-bottom, var(--assistant-safe-bottom-default));
    z-index: 25;
    display: grid;
    justify-items: end;
    gap: 0.65rem;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease, bottom 300ms ease;
}

.assistant-widget.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.assistant-widget.is-genie-enter {
    will-change: transform, opacity, filter;
}

.assistant-widget.is-genie-enter:not(.is-open) .assistant-orb-cloud {
    animation: assistant-genie-cloud-in 1200ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.assistant-widget.is-genie-enter:not(.is-open) .assistant-orb-icon-wrap {
    animation: assistant-genie-icon-in 1140ms cubic-bezier(0.2, 0.82, 0.28, 1) both;
}

.assistant-widget.is-genie-enter.is-open .assistant-panel {
    transform-origin: calc(100% - 1.2rem) calc(100% - 1rem);
    animation: assistant-genie-panel-in 980ms cubic-bezier(0.18, 0.86, 0.27, 1) both;
}

.assistant-widget.is-genie-minimize.is-open .assistant-panel {
    transform-origin: calc(100% - 1.2rem) calc(100% - 1rem);
    animation: assistant-genie-panel-minimize 560ms cubic-bezier(0.5, 0.02, 0.78, 0.22) both;
}

.assistant-widget.is-genie-minimize .assistant-action-icon[data-assistant-minimize] {
    animation: assistant-minimize-click 230ms cubic-bezier(0.22, 0.85, 0.32, 1) both;
}

.assistant-widget.is-fullscreen {
    position: fixed;
    inset: var(--assistant-fullscreen-top-offset, 0) 0 0 0;
    right: auto;
    bottom: auto;
    top: auto;
    left: auto;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    padding: 0;
    background: var(--bg);
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.assistant-widget.is-fullscreen .assistant-orb {
    display: none;
}

.assistant-widget.is-fullscreen .assistant-panel {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
    border: none;
}

/* Body modifications when assistant is in fullscreen */
body.assistant-fullscreen-mode {
    overflow: hidden;
}

body.assistant-fullscreen-mode > *:not(.site-header):not(.assistant-widget):not(#dojo-toast-container):not([data-global-scroll-top]) {
    display: none;
}

.assistant-widget--admin .assistant-orb-cloud {
    background: none;
    box-shadow: none;
}

.assistant-widget--admin .assistant-orb-icon--admin {
    filter:
        drop-shadow(0 22px 34px var(--assistant-orb-shadow-soft))
        drop-shadow(0 8px 14px var(--assistant-orb-shadow-strong));
    animation: assistant-icon-sway 9.2s ease-in-out infinite;
}

.assistant-widget--admin .assistant-panel {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

.assistant-widget--admin .assistant-panel-head {
    background:
        linear-gradient(120deg,
            color-mix(in srgb, var(--accent-soft) 28%, transparent),
            color-mix(in srgb, var(--bg-elevated) 92%, transparent));
}

.assistant-orb {
    --assistant-orb-shadow-strong: color-mix(in srgb, var(--text) 38%, transparent);
    --assistant-orb-shadow-soft: color-mix(in srgb, var(--text) 20%, transparent);
    width: var(--assistant-orb-size);
    height: var(--assistant-orb-size);
    border-radius: 999px;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    position: relative;
    overflow: visible;
    isolation: isolate;
    transform-origin: center;
    transition: width 180ms ease, height 180ms ease, transform 180ms ease;
    animation: assistant-orb-float 8.6s ease-in-out infinite;
}

.assistant-orb[hidden] {
    display: none;
}

.assistant-orb:hover {
    transform: none;
    filter: none;
    box-shadow: none;
}

.assistant-orb.is-mini {
    width: var(--assistant-orb-mini-size);
    height: var(--assistant-orb-mini-size);
    animation-duration: 7.4s;
}

.assistant-orb-cloud {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    position: relative;
    display: block;
    animation: none;
    transform-origin: center;
    transition: transform 260ms cubic-bezier(0.22, 0.78, 0.22, 1);
}

.assistant-orb::before,
.assistant-orb::after {
    content: none;
}

.assistant-orb::before {
    background: none;
}

.assistant-orb::after {
    border: 0;
}

.assistant-orb-cloud::before,
.assistant-orb-cloud::after {
    content: none;
}

.assistant-orb-cloud::before {
    border: 0;
}

.assistant-orb-cloud::after {
    background: none;
}

.assistant-orb-icon-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
    mask-image: none;
    -webkit-mask-image: none;
    transform: translateZ(0);
}

.assistant-orb-icon {
    width: 99.2%;
    height: 99.2%;
    object-fit: contain;
    display: block;
    opacity: 1;
    transform: none;
    mix-blend-mode: normal;
    filter:
        drop-shadow(0 20px 32px var(--assistant-orb-shadow-soft))
        drop-shadow(0 7px 13px var(--assistant-orb-shadow-strong));
    transition: filter 260ms cubic-bezier(0.22, 0.78, 0.22, 1);
    animation: assistant-icon-sway 9.2s ease-in-out infinite;
    transform-origin: 50% 56%;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.assistant-widget:not(.assistant-widget--admin) .assistant-orb-icon {
    width: 116%;
    height: 116%;
}

@media (hover: hover) and (pointer: fine) {
    .assistant-orb:hover .assistant-orb-cloud,
    .assistant-orb:focus-visible .assistant-orb-cloud {
        transform: scale(1.14);
    }

    .assistant-orb:hover .assistant-orb-icon,
    .assistant-orb:focus-visible .assistant-orb-icon {
        filter:
            drop-shadow(0 24px 40px var(--assistant-orb-shadow-soft))
            drop-shadow(0 10px 18px var(--assistant-orb-shadow-strong));
    }
}

.assistant-orb.is-mini .assistant-orb-icon {
    width: 99.2%;
    height: 99.2%;
    animation-duration: 7.8s;
}

.assistant-orb-icon-wrap::before,
.assistant-orb-icon-wrap::after {
    content: none;
}

.assistant-orb-icon-wrap::before {
    background: none;
}

.assistant-orb-icon-wrap::after {
    border: 0;
}

.assistant-orb.is-mini .assistant-orb-icon-wrap {
    inset: 0;
}

.assistant-panel {
    width: var(--assistant-panel-width);
    max-height: var(--assistant-panel-max-height);
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 16px 42px color-mix(in srgb, var(--brand-charcoal) 30%, transparent);
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
}

.assistant-panel[hidden] {
    display: none;
}

.assistant-panel-head {
    padding: 0.75rem 0.85rem;
    border-bottom: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.assistant-panel-actions {
    margin-left: auto;
    justify-content: flex-end;
    gap: 0.35rem;
}

.assistant-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    color: var(--text);
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* Fullscreen control is mobile-only. Keep it hidden on larger viewports. */
.assistant-action-icon[data-assistant-fullscreen] {
    display: none !important;
}

.assistant-action-icon:hover,
.assistant-action-icon:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 56%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    color: var(--accent-strong);
}

.assistant-action-icon:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
    outline-offset: 2px;
}

.assistant-messages {
    padding: 0.95rem;
    overflow: auto;
    display: grid;
    gap: 0.72rem;
    scrollbar-gutter: stable;
}

.assistant-message {
    max-width: 94%;
    border-radius: 13px;
    padding: 0.62rem 0.8rem;
    font-size: 0.94rem;
    line-height: 1.58;
}

.assistant-message strong {
    font-weight: 750;
}

.assistant-message em {
    font-style: italic;
}

.assistant-message u {
    text-underline-offset: 0.12em;
}

.assistant-message code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.82em;
    padding: 0.1em 0.38em;
    border-radius: 4px;
    background: color-mix(in srgb, var(--line) 48%, var(--bg-elevated));
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    white-space: nowrap;
}

.assistant-message h4,
.assistant-message h5,
.assistant-message h6 {
    font-size: 0.88rem;
    font-weight: 720;
    margin: 0.5rem 0 0.15rem;
    line-height: 1.3;
    color: var(--on-elevated);
}

.assistant-message h4 { font-size: 0.9rem; }
.assistant-message h5 { font-size: 0.84rem; }
.assistant-message h6 { font-size: 0.8rem; opacity: 0.88; }

.assistant-message h4:first-child,
.assistant-message h5:first-child,
.assistant-message h6:first-child {
    margin-top: 0;
}

.assistant-message hr {
    border: none;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    margin: 0.5rem 0;
}

.assistant-message p {
    margin: 0;
}

.assistant-message p + p {
    margin-top: 0.45rem;
}

.assistant-message p + ul,
.assistant-message p + ol {
    margin-top: 0.18rem;
}

.assistant-message ul,
.assistant-message ol {
    margin: 0.3rem 0 0.1rem;
    padding-left: 1.08rem;
    display: grid;
    gap: 0.24rem;
}

.assistant-message li {
    margin: 0;
}

.assistant-message a {
    display: inline-flex;
    align-items: center;
    gap: 0.26rem;
    border-radius: 999px;
    padding: 0.06rem 0.48rem;
    font-weight: 650;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 36%, var(--bg-elevated));
    color: inherit;
}

.assistant-message a:hover,
.assistant-message a:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 52%, var(--bg-elevated));
}

.assistant-message a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
    outline-offset: 2px;
}

.assistant-message-bot {
    margin-right: auto;
    background: color-mix(in srgb, var(--bg-elevated) 92%, var(--accent-soft));
    border: 1px solid color-mix(in srgb, var(--line) 72%, var(--accent) 28%);
    border-radius: 13px 13px 13px 6px;
    color: var(--on-elevated);
}

/* Indicateur de frappe (3 points animés) */
.assistant-typing-indicator {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.9rem !important;
    min-height: unset;
}

.assistant-typing-indicator span {
    display: inline-block;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 60%, var(--on-elevated));
    animation: assistant-typing-dot 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

.assistant-typing-indicator span:nth-child(2) {
    animation-delay: 0.18s;
}

.assistant-typing-indicator span:nth-child(3) {
    animation-delay: 0.36s;
}

@keyframes assistant-typing-dot {
    0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-0.22rem); }
}

/* Curseur clignotant pendant le streaming */
.assistant-message.is-streaming::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 1em;
    background: currentColor;
    opacity: 0.7;
    margin-left: 0.15em;
    vertical-align: text-bottom;
    animation: assistant-cursor-blink 0.7s step-end infinite;
}

@keyframes assistant-cursor-blink {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0; }
}

/* Badge IA dans l'en-tête du panneau */
.assistant-ia-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.07rem 0.38rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--accent-strong) 94%, var(--text));
    background: color-mix(in srgb, var(--accent-soft) 72%, var(--bg-elevated));
    border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
    vertical-align: middle;
    line-height: 1;
}

/* Réponses rapides */
.assistant-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
    padding: 0.2rem 0.1rem 0.3rem;
}

.assistant-quick-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--accent-soft));
    color: color-mix(in srgb, var(--accent-strong) 88%, var(--text));
    font-size: 0.78rem;
    font-weight: 560;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
    white-space: nowrap;
}

.assistant-action-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.06rem 0.38rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--success) 58%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 74%, var(--bg-elevated));
    color: color-mix(in srgb, var(--success-strong) 82%, var(--text));
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

.assistant-quick-reply-btn:hover,
.assistant-quick-reply-btn:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 68%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
    color: var(--accent-strong);
    outline: none;
}

/* CTA d'escalade vers la messagerie */
.assistant-escalation {
    padding: 0.3rem 0;
    display: flex;
    justify-content: flex-start;
}

.assistant-escalation-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.34rem 0.82rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 56%, var(--bg-elevated));
    color: color-mix(in srgb, var(--accent-strong) 90%, var(--text));
    font-size: 0.8rem;
    font-weight: 580;
    text-decoration: none;
    transition: background 0.14s, border-color 0.14s;
}

.assistant-escalation-link:hover,
.assistant-escalation-link:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 82%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
    text-decoration: none;
}

.assistant-message-user {
    margin-left: auto;
    background: color-mix(in srgb, var(--accent-strong) 84%, var(--accent));
    border: 1px solid color-mix(in srgb, var(--accent-strong) 72%, var(--line));
    border-radius: 13px 13px 6px 13px;
    color: var(--on-accent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-strong) 22%, transparent);
}

.assistant-message-user a {
    border-color: color-mix(in srgb, var(--on-accent) 48%, transparent);
    background: color-mix(in srgb, var(--on-accent) 16%, transparent);
}

.assistant-message-user a:hover,
.assistant-message-user a:focus-visible {
    border-color: color-mix(in srgb, var(--on-accent) 68%, transparent);
    background: color-mix(in srgb, var(--on-accent) 24%, transparent);
}

.assistant-message-proactive::before {
    content: "Nouveau";
    display: inline-flex;
    position: absolute;
    top: 0.34rem;
    right: 0.44rem;
    z-index: 2;
    pointer-events: none;
    margin: 0;
    padding: 0.1rem 0.46rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 780;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--accent-strong) 92%, var(--text));
    background: color-mix(in srgb, var(--accent-soft) 72%, var(--bg-elevated));
    border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--line));
}

.assistant-message-proactive {
    position: relative;
}

.assistant-form {
    padding: 0.75rem;
    border-top: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--line) 72%, transparent) 14%,
            color-mix(in srgb, var(--line) 86%, transparent) 50%,
            color-mix(in srgb, var(--line) 72%, transparent) 86%,
            transparent 100%
        ) top / 100% 1px no-repeat;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
}

.assistant-form-feedback {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--muted);
}

.assistant-form-feedback.is-error {
    color: color-mix(in srgb, var(--danger-strong) 62%, var(--text) 38%);
}

.assistant-form .form-input.assistant-input-soft-invalid {
    border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
    background: color-mix(in srgb, var(--danger) 9%, var(--bg-elevated));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 12%, transparent);
}

.assistant-form .form-input.assistant-input-soft-invalid:focus {
    outline-color: color-mix(in srgb, var(--danger) 18%, var(--accent) 20%);
}

.assistant-submit {
    min-width: 2.9rem;
    min-height: 2.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== Animation loader IA ===== */
.ai-gen-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem 1rem;
    min-height: 240px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.ai-gen-loader__orbs {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.ai-gen-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid rgba(99, 102, 241, 0.15);
    border-top-color: #6366f1;
    border-right-color: #818cf8;
    animation: ai-ring-spin 1.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.ai-gen-loader__ring::after {
    content: ‘’;
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid rgba(167, 139, 250, 0.12);
    border-bottom-color: #a78bfa;
    border-left-color: #c4b5fd;
    animation: ai-ring-spin 0.75s cubic-bezier(0.4, 0, 0.6, 1) infinite reverse;
}

@keyframes ai-ring-spin {
    to { transform: rotate(360deg); }
}

.ai-gen-loader__orb {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
}

.ai-gen-loader__orb--1 {
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    background: radial-gradient(circle at 35% 35%, #a5b4fc, #6366f1);
    box-shadow: 0 0 8px 2px rgba(99, 102, 241, 0.6);
    animation: ai-orbit-1 2.4s linear infinite;
}

.ai-gen-loader__orb--2 {
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: radial-gradient(circle at 35% 35%, #f9a8d4, #ec4899);
    box-shadow: 0 0 7px 2px rgba(236, 72, 153, 0.55);
    animation: ai-orbit-2 2.4s linear infinite;
}

.ai-gen-loader__orb--3 {
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: radial-gradient(circle at 35% 35%, #6ee7b7, #059669);
    box-shadow: 0 0 7px 2px rgba(5, 150, 105, 0.5);
    animation: ai-orbit-3 2.4s linear infinite;
}

@keyframes ai-orbit-1 {
    from { transform: rotate(0deg)   translate(33px) rotate(0deg); }
    to   { transform: rotate(360deg) translate(33px) rotate(-360deg); }
}
@keyframes ai-orbit-2 {
    from { transform: rotate(120deg)  translate(33px) rotate(-120deg); }
    to   { transform: rotate(480deg)  translate(33px) rotate(-480deg); }
}
@keyframes ai-orbit-3 {
    from { transform: rotate(240deg)  translate(33px) rotate(-240deg); }
    to   { transform: rotate(600deg)  translate(33px) rotate(-600deg); }
}

.ai-gen-loader__label {
    font-size: 0.875rem;
    color: var(--text-muted, #888);
    font-style: italic;
    min-height: 1.4em;
    text-align: center;
    letter-spacing: 0.01em;
}

/* Version compacte pour les boutons */
.ai-gen-loader--sm {
    display: inline-flex;
    padding: 0;
    min-height: unset;
    width: auto;
    gap: 0;
    margin-right: 0.4rem;
}

.ai-gen-loader--sm .ai-gen-loader__orbs {
    width: 22px;
    height: 22px;
}

.ai-gen-loader--sm .ai-gen-loader__ring {
    border-width: 1.5px;
}

.ai-gen-loader--sm .ai-gen-loader__ring::after {
    border-width: 1px;
    inset: 5px;
}

.ai-gen-loader--sm .ai-gen-loader__orb--1 {
    width: 3.5px;
    height: 3.5px;
    margin: -1.75px 0 0 -1.75px;
    animation: ai-orbit-1-sm 2.4s linear infinite;
}

.ai-gen-loader--sm .ai-gen-loader__orb--2 {
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    animation: ai-orbit-2-sm 2.4s linear infinite;
}

.ai-gen-loader--sm .ai-gen-loader__orb--3 {
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
    animation: ai-orbit-3-sm 2.4s linear infinite;
}

@keyframes ai-orbit-1-sm {
    from { transform: rotate(0deg)   translate(8px) rotate(0deg); }
    to   { transform: rotate(360deg) translate(8px) rotate(-360deg); }
}
@keyframes ai-orbit-2-sm {
    from { transform: rotate(120deg)  translate(8px) rotate(-120deg); }
    to   { transform: rotate(480deg)  translate(8px) rotate(-480deg); }
}
@keyframes ai-orbit-3-sm {
    from { transform: rotate(240deg)  translate(8px) rotate(-240deg); }
    to   { transform: rotate(600deg)  translate(8px) rotate(-600deg); }
}

.assistant-submit__spinner {
    display: none;
}

.assistant-submit.is-sending {
    cursor: wait;
}

.assistant-submit.is-sending .assistant-submit__icon {
    display: none;
}

.assistant-submit.is-sending .assistant-submit__spinner {
    display: inline-flex;
}

/* Spinner centré dans la modal d’IA image */
.ai-image-modal-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes assistant-genie-cloud-in {
    0% {
        transform: translateY(18px) scale(0.44) rotate(-8deg);
        opacity: 0;
        filter: blur(8px) saturate(1.25);
    }
    45% {
        transform: translateY(-6px) scale(1.08) rotate(4deg);
        opacity: 1;
        filter: blur(0) saturate(1.08);
    }
    72% {
        transform: translateY(2px) scale(0.97) rotate(-1.8deg);
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0) saturate(1);
    }
}

@keyframes assistant-genie-icon-in {
    0% {
        transform: translateY(14px) scale(0.58);
        opacity: 0;
        filter: blur(6px);
    }
    60% {
        transform: translateY(-3px) scale(1.06);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes assistant-genie-panel-in {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.58);
        filter: blur(7px);
    }
    52% {
        opacity: 1;
        transform: translateY(-3px) scale(1.04);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes assistant-genie-panel-minimize {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(22px) scale(0.62);
        filter: blur(6px);
    }
}

@keyframes assistant-minimize-click {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(0.85);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes assistant-orb-float {
    0% {
        transform: translateY(0) scale(1);
    }
    24% {
        transform: translateY(-2px) scale(1.008);
    }
    58% {
        transform: translateY(1px) scale(0.998);
    }
    88% {
        transform: translateY(-11px) scale(1.04);
    }
    92% {
        transform: translateY(3px) scale(0.994);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes assistant-orb-breathe {
    0% {
        filter: saturate(1);
    }
    50% {
        filter: saturate(1.08);
    }
    100% {
        filter: saturate(1);
    }
}

@keyframes assistant-icon-sway {
    0% {
        transform: rotate(0deg) scale(1);
    }
    16% {
        transform: rotate(-1deg) scale(1.006);
    }
    42% {
        transform: rotate(0.8deg) scale(1.012);
    }
    68% {
        transform: rotate(-0.6deg) scale(1.004);
    }
    89% {
        transform: rotate(4.1deg) scale(1.075);
    }
    93% {
        transform: rotate(-1.9deg) scale(0.99);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

@media (min-width: 1400px) {
    .assistant-widget {
        --assistant-orb-size: 182px;
        --assistant-orb-mini-size: 118px;
        --assistant-panel-width: min(430px, calc(100vw - 2rem));
        --assistant-panel-max-height: min(72vh, 620px);
    }

    .assistant-widget--admin {
        --assistant-panel-width: min(450px, calc(100vw - 2rem));
    }
}

@media (min-width: 1920px) {
    .assistant-widget {
        --assistant-orb-size: 196px;
        --assistant-orb-mini-size: 126px;
        --assistant-panel-width: min(480px, calc(100vw - 2.4rem));
        --assistant-panel-max-height: min(74vh, 680px);
    }

    .assistant-widget--admin {
        --assistant-panel-width: min(500px, calc(100vw - 2.4rem));
    }
}

@media (max-width: 960px) {
    .assistant-widget {
        --assistant-orb-size: 138px;
        --assistant-orb-mini-size: 96px;
        --assistant-panel-width: min(360px, calc(100vw - 1rem));
        --assistant-panel-max-height: min(72vh, 540px);
    }

    .assistant-action-icon {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
}

@media (max-width: 640px) {
    .assistant-action-icon[data-assistant-fullscreen] {
        display: inline-flex !important;
    }

    .assistant-widget {
        --assistant-orb-size: 123px;
        --assistant-orb-mini-size: 87px;
        --assistant-panel-width: min(350px, calc(100vw - 0.8rem));
        --assistant-panel-max-height: min(74vh, 540px);
        --assistant-safe-bottom-default: max(0.7rem, calc(env(safe-area-inset-bottom, 0px) + 0.45rem));
        right: 0.7rem;
        bottom: var(--assistant-safe-bottom, var(--assistant-safe-bottom-default));
    }

    /* Fullscreen styles for mobile */
    .assistant-widget.is-fullscreen {
        display: flex;
        flex-direction: column;
    }

    .assistant-widget.is-fullscreen .assistant-panel {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
    }

    body.assistant-fullscreen-mode {
        overflow: hidden;
    }

    /* Hide all page content except the assistant */
    body.assistant-fullscreen-mode > *:not(.site-header):not(.assistant-widget):not(#dojo-toast-container) {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .assistant-widget {
        --assistant-orb-size: 110px;
        --assistant-orb-mini-size: 78px;
        --assistant-panel-width: calc(100vw - 0.5rem);
        --assistant-panel-max-height: min(78vh, 520px);
        --assistant-safe-bottom-default: max(0.55rem, calc(env(safe-area-inset-bottom, 0px) + 0.35rem));
        right: 0.55rem;
        bottom: var(--assistant-safe-bottom, var(--assistant-safe-bottom-default));
    }

    .assistant-panel {
        border-radius: 15px;
    }

    .assistant-panel-head {
        padding: 0.62rem 0.65rem;
    }

    .assistant-panel-actions {
        gap: 0.25rem;
    }

    .assistant-messages {
        padding: 0.72rem;
        gap: 0.58rem;
    }

    .assistant-message {
        max-width: 97%;
        padding: 0.52rem 0.66rem;
        font-size: 0.91rem;
        line-height: 1.5;
    }

    .assistant-form {
        padding: 0.62rem;
        gap: 0.42rem;
    }
}

@media (max-width: 360px) {
    .assistant-widget {
        --assistant-orb-size: 102px;
        --assistant-orb-mini-size: 72px;
        --assistant-panel-width: calc(100vw - 0.35rem);
        --assistant-panel-max-height: min(80vh, 500px);
    }

    .assistant-panel {
        border-radius: 13px;
    }

    .assistant-action-icon {
        min-width: 2.65rem;
        min-height: 2.65rem;
    }

    .assistant-panel-head {
        padding: 0.55rem;
        gap: 0.35rem;
    }

    .assistant-messages {
        padding: 0.6rem;
    }

    .assistant-message {
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .assistant-form {
        padding: 0.5rem;
    }
}

/* ── Bulk Action Panels (batch action context) ──────────── */
.bulk-actions-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 22;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated-strong) 96%, transparent), color-mix(in srgb, var(--bg-elevated-strong) 92%, transparent) 12%, color-mix(in srgb, var(--bg-elevated) 88%, transparent));
    border-top: 2px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    backdrop-filter: blur(16px) saturate(1.1);
    box-shadow: 0 -16px 48px color-mix(in srgb, #000000 18%, transparent);
    padding: 1rem 0;
    animation: slide-up-from-bottom 240ms cubic-bezier(0.2, 0.85, 0.35, 1) both;
}

.bulk-actions-panel[hidden] {
    display: none;
}

@keyframes slide-up-from-bottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.bulk-actions-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0;
}

.bulk-actions-info {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex: 1;
    min-width: 0;
}

.bulk-actions-count {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    white-space: nowrap;
    font-weight: 700;
    color: var(--text);
}

.bulk-actions-count span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent-strong);
    font-size: 0.92rem;
    font-weight: 800;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
}

.bulk-actions-description {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.3;
}

.bulk-actions-controls {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.bulk-actions-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.6rem 1.2rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
    white-space: nowrap;
}

.bulk-actions-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.04);
}

.bulk-actions-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 2px;
}

.bulk-actions-btn.primary {
    background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 72%, var(--brand-blue) 28%), color-mix(in srgb, var(--accent-strong) 68%, var(--brand-cyan) 32%));
    border-color: color-mix(in srgb, var(--accent) 60%, #000000 40%);
    color: var(--brand-white);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 28%, transparent);
}

.bulk-actions-btn.primary:hover {
    background: linear-gradient(140deg, color-mix(in srgb, var(--accent-strong) 48%, var(--accent) 52%), color-mix(in srgb, var(--brand-orange) 28%, var(--accent-strong) 72%));
    box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 36%, transparent);
}

.bulk-actions-btn.secondary {
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    color: var(--text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent);
}

.bulk-actions-btn.secondary:hover {
    background: color-mix(in srgb, var(--accent-soft) 48%, var(--bg-elevated) 52%);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 12%, transparent);
}

.bulk-actions-btn.danger {
    background: linear-gradient(140deg, color-mix(in srgb, var(--brand-red) 80%, #000000 20%), color-mix(in srgb, var(--brand-red) 72%, #ffffff 28%));
    border-color: color-mix(in srgb, var(--brand-red) 58%, #000000 42%);
    color: var(--brand-white);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-red) 24%, transparent);
}

.bulk-actions-btn.danger:hover {
    background: linear-gradient(140deg, color-mix(in srgb, var(--brand-red) 88%, #000000 12%), color-mix(in srgb, var(--brand-red) 76%, #ffffff 24%));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-red) 32%, transparent);
}

.bulk-actions-close {
    background: none;
    border: none;
    padding: 0.5rem;
    color: var(--muted);
    cursor: pointer;
    border-radius: 10px;
    transition: background var(--transition-fast), color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    min-height: 2.4rem;
}

.bulk-actions-close:hover {
    background: color-mix(in srgb, var(--accent-soft) 52%, transparent);
    color: var(--text);
}

@media (max-width: 900px) {
    .bulk-actions-panel {
        padding: 0.85rem 0;
    }

    .bulk-actions-container {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .bulk-actions-info {
        flex-direction: column;
        gap: 0.8rem;
    }

    .bulk-actions-controls {
        justify-content: stretch;
    }

    .bulk-actions-btn {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }

    .bulk-actions-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
}

@media (max-width: 640px) {
    .bulk-actions-panel {
        padding: 0.75rem 0;
    }

    .bulk-actions-count {
        font-size: 0.9rem;
    }

    .bulk-actions-count span {
        min-width: 2rem;
        height: 2rem;
        font-size: 0.85rem;
    }

    .bulk-actions-description {
        font-size: 0.88rem;
    }

    .bulk-actions-btn {
        min-height: 2.4rem;
        padding: 0.5rem 1rem;
        font-size: 0.92rem;
    }

    .bulk-actions-btn.primary {
        box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 22%, transparent);
    }
}
/* ── /Bulk Action Panels ───────────────────────────────── */

/* ── Registrations — Regroupement par membre ───────────── */
.registrations-table .member-group-block {
    padding: 0.75rem 0;
    border-top: 1px solid var(--border);
}

.registrations-table .member-group-block:first-child {
    border-top: none;
    padding-top: 0;
}

.registrations-table .member-group-block > .eyebrow {
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
}
/* ── /Registrations — Regroupement par membre ──────────── */

/* ── Texture Selector — Sélecteur de textures ─────────────── */
.texture-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem 0;
}

.texture-option {
    display: block;
    cursor: pointer;
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 2px solid var(--line);
    transition: all 0.2s ease;
}

.texture-option:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.texture-option__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
    z-index: 1;
}

.texture-option--active {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.texture-option__preview {
    width: 100%;
    padding-bottom: 100%; /* 1:1 aspect ratio */
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: var(--bg-elevated);
    background-size: cover;
    background-position: center;
}

.texture-option__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    padding: 0.5rem;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent);
    width: 100%;
    white-space: normal;
    word-break: break-word;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Responsive: Pour les petits écrans, réduire la grille */
@media (max-width: 640px) {
    .texture-selector-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 0.75rem;
    }
}

/* ── /Texture Selector — Sélecteur de textures ──────────── */

/* ── Background Texture — Affichage de la texture de fond ──── */
body::after {
    content: '';
    position: fixed;
    bottom: 0;
    right: 0;
    width: 840px;
    height: 840px;
    opacity: 0.55;
    pointer-events: none;
    z-index: -1;
    background-size: cover;
    background-position: right bottom;
    mix-blend-mode: soft-light;
}

/* Safari repaint fix: disable fixed watermark layer entirely on Safari. */
html[data-browser="safari"] body::after,
body[data-browser="safari"]::after {
    display: none;
}

/* Appliquer la texture de fond selon le choix */
body[data-background-texture="seigaiha"]::after {
    background-image: url('/static/textures/seigaiha.svg');
}

body[data-background-texture="geometric-modern"]::after {
    background-image: url('/static/textures/geometric-modern.svg');
}

body[data-background-texture="dots-subtle"]::after {
    background-image: url('/static/textures/dots-subtle.svg');
}

body[data-background-texture="organic-flow"]::after {
    background-image: url('/static/textures/organic-flow.svg');
}

body[data-background-texture="marble-subtle"]::after {
    background-image: url('/static/textures/marble-subtle.svg');
}

body[data-background-texture="aucune"]::after {
    background-image: none;
}

/* Responsive: Sur mobile, réduire la taille de la texture de fond */
@media (max-width: 640px) {
    body::after {
        width: 520px;
        height: 520px;
        right: 0;
        bottom: 0;
    }
}

/* ── /Background Texture — Affichage de la texture de fond ─── */

/* ─────────────────────────────────────────────────────────────
   Layouts page d'accueil — [data-home-layout]
   ───────────────────────────────────────────────────────────── */

/* --- layout: hero_grid (defaut structurel) --- */
[data-home-layout="hero_grid"] .hero.hero--full-width {
    padding-top: 2.8rem;
    padding-bottom: 2.2rem;
}

[data-home-layout="hero_grid"] .hero.hero--full-width .hero-copy {
    max-width: 820px;
    margin: 0 auto;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    box-shadow:
        var(--shadow-soft),
        0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

[data-home-layout="hero_grid"] .home-card-section .content-card,
[data-home-layout="hero_grid"] .home-card-section .card {
    border-top-width: 3px;
    border-top-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* --- layout: full_hero (cinématique plein écran) --- */
[data-home-layout="full_hero"] .hero.hero--full-width {
    min-height: 94svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5.2rem 1.5rem 4.5rem;
    position: relative;
}

[data-home-layout="full_hero"] .hero.hero--full-width::before {
    content: "";
    position: absolute;
    inset: 1.2rem 0 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 12%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 38%),
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--brand-cyan) 24%, transparent), transparent 40%);
    opacity: 0.95;
}

[data-home-layout="full_hero"] .hero.hero--full-width .hero-copy {
    max-width: 860px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent-soft) 82%, transparent), transparent 62%),
        linear-gradient(160deg, color-mix(in srgb, var(--bg-elevated-strong) 90%, var(--accent-soft) 10%), var(--bg-elevated));
    box-shadow:
        0 26px 64px color-mix(in srgb, #000000 16%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
    padding: 4rem 4.4rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
    z-index: 1;
}

[data-home-layout="full_hero"] .hero.hero--full-width h1 {
    font-size: clamp(2.2rem, 5.8vw, 4rem);
}

[data-home-layout="full_hero"] .hero.hero--full-width .hero-actions {
    justify-content: center;
}

[data-home-layout="full_hero"] .hero.hero--full-width .hero-actions .button {
    min-width: 11rem;
}

[data-home-layout="full_hero"] .home-card-section {
    position: relative;
}

[data-home-layout="full_hero"] .home-card-section .content-card {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}

[data-home-layout="full_hero"] .home-welcome-card,
[data-home-layout="card_grid"] .home-welcome-card,
[data-home-layout="minimal_typo"] .home-welcome-card {
    margin-left: auto;
    margin-right: auto;
}

[data-home-layout="full_hero"] .home-welcome-card,
[data-home-layout="card_grid"] .home-welcome-card {
    text-align: center;
}

/* --- layout: card_grid (grille de cartes proéminente) --- */
[data-home-layout="card_grid"] .hero.hero--full-width {
    grid-template-columns: 1fr;
    padding-top: 1.8rem;
    padding-bottom: 0.8rem;
}

[data-home-layout="card_grid"] .hero.hero--full-width .hero-copy {
    max-width: 980px;
    margin: 0 auto;
    border-radius: 22px;
    text-align: left;
    background:
        linear-gradient(125deg, color-mix(in srgb, var(--accent-soft) 30%, transparent), transparent 45%),
        color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    box-shadow: 0 12px 30px color-mix(in srgb, #000000 8%, transparent);
    padding: 1.5rem 1.7rem;
}

[data-home-layout="card_grid"] .hero.hero--full-width .hero-copy h1 {
    font-size: clamp(1.55rem, 3vw, 2.15rem);
}

[data-home-layout="card_grid"] .hero--full-width .hero-actions {
    justify-content: flex-start;
    margin-top: 1rem;
}

[data-home-layout="card_grid"] .home-card-section .feature-grid {
    margin-top: 0.55rem;
}

[data-home-layout="card_grid"] .home-card-section .content-card {
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    box-shadow: 0 16px 34px color-mix(in srgb, #000000 11%, transparent);
}

[data-home-layout="card_grid"] .home-card-section .card {
    box-shadow: 0 14px 28px color-mix(in srgb, #000000 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: 20px;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 22%, transparent), transparent 48%),
        color-mix(in srgb, var(--bg-elevated) 96%, transparent);
}

[data-home-layout="card_grid"] .home-card-section .card .eyebrow {
    margin-bottom: 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.13em;
}

@media (hover: hover) and (pointer: fine) {
    [data-home-layout="card_grid"] .home-card-section .card {
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    [data-home-layout="card_grid"] .home-card-section .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 32px color-mix(in srgb, #000000 14%, transparent);
    }
}

/* --- layout: split_screen (2 colonnes) --- */
[data-home-layout="split_screen"] .hero.hero--full-width {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
    align-items: center;
    min-height: 72svh;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.home-split-visual {
    display: none;
}

[data-home-layout="split_screen"] .home-split-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: 2.5rem;
    border-radius: 32px;
    position: relative;
    overflow: hidden;
    background: var(--split-visual-bg, color-mix(in srgb, var(--bg-elevated-strong) 92%, #ffffff 8%));
    border: 1px solid var(--split-visual-border, color-mix(in srgb, var(--line) 72%, #000000 28%));
    box-shadow:
        inset 0 0 0 1px var(--split-visual-ring, color-mix(in srgb, #ffffff 48%, transparent)),
        var(--shadow-soft);
}

[data-home-layout="split_screen"] .home-split-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, color-mix(in srgb, #ffffff 18%, transparent), transparent 56%);
    pointer-events: none;
}

[data-home-layout="split_screen"] .home-split-visual .split-brand-mark {
    width: min(82%, 320px);
    max-width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-size: clamp(4.5rem, 10vw, 6.75rem);
    font-weight: 800;
    line-height: 1;
    color: var(--brand-blue);
    position: relative;
    z-index: 1;
}

[data-home-layout="split_screen"] .home-split-visual .split-brand-mark img {
    width: 100%;
    max-height: 320px;
    height: auto;
    display: block;
    object-fit: contain;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: none;
}

html[data-theme="light"] [data-home-layout="split_screen"] .home-split-visual,
html[data-theme="sunset"] [data-home-layout="split_screen"] .home-split-visual,
html[data-theme="paper-ink"] [data-home-layout="split_screen"] .home-split-visual,
html[data-theme="contrast-light"] [data-home-layout="split_screen"] .home-split-visual {
    --split-visual-bg: color-mix(in srgb, #ffffff 90%, var(--bg-elevated-strong) 10%);
    --split-visual-border: color-mix(in srgb, var(--line) 74%, #000000 26%);
    --split-visual-ring: color-mix(in srgb, #ffffff 66%, transparent);
}

html[data-theme="dark"] [data-home-layout="split_screen"] .home-split-visual,
html[data-theme="aurora"] [data-home-layout="split_screen"] .home-split-visual,
html[data-theme="vampire"] [data-home-layout="split_screen"] .home-split-visual,
html[data-theme="contrast-dark"] [data-home-layout="split_screen"] .home-split-visual {
    --split-visual-bg: color-mix(in srgb, var(--bg-elevated-strong) 78%, #000000 22%);
    --split-visual-border: color-mix(in srgb, #ffffff 56%, var(--line) 44%);
    --split-visual-ring: color-mix(in srgb, #ffffff 34%, transparent);
}

body[data-logo-inner-bg-mode="light"] [data-home-layout="split_screen"] .home-split-visual {
    --split-visual-bg: color-mix(in srgb, #ffffff 92%, var(--bg-elevated-strong) 8%);
    --split-visual-border: color-mix(in srgb, var(--line) 72%, #000000 28%);
    --split-visual-ring: color-mix(in srgb, #ffffff 68%, transparent);
}

body[data-logo-inner-bg-mode="auto"] [data-home-layout="split_screen"] .home-split-visual {
    --split-visual-bg: var(--brand-logo-inner-bg-auto, color-mix(in srgb, var(--bg-elevated-strong) 88%, #ffffff 12%));
    --split-visual-border: var(--brand-logo-inner-border-auto, color-mix(in srgb, var(--line) 66%, #ffffff 34%));
    --split-visual-ring: var(--brand-logo-inner-ring-auto, color-mix(in srgb, #ffffff 52%, transparent));
}

body[data-logo-inner-bg-mode="dark"] [data-home-layout="split_screen"] .home-split-visual {
    --split-visual-bg: color-mix(in srgb, var(--bg-elevated-strong) 82%, #000000 18%);
    --split-visual-border: color-mix(in srgb, #ffffff 52%, var(--line) 48%);
    --split-visual-ring: color-mix(in srgb, #ffffff 32%, transparent);
}

body[data-logo-inner-bg-mode="transparent"] [data-home-layout="split_screen"] .home-split-visual,
body[data-logo-inner-bg-mode="none"] [data-home-layout="split_screen"] .home-split-visual {
    --split-visual-bg: transparent;
    --split-visual-border: transparent;
    --split-visual-ring: transparent;
    box-shadow: none;
}

/* --- layout: minimal_typo (typographie minimaliste) --- */
[data-home-layout="minimal_typo"] .hero.hero--full-width {
    grid-template-columns: 1fr;
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

[data-home-layout="minimal_typo"] .hero.hero--full-width .hero-copy {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    max-width: 860px;
}

[data-home-layout="minimal_typo"] .hero.hero--full-width .hero-copy::after {
    display: none;
}

[data-home-layout="minimal_typo"] .hero.hero--full-width h1 {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 1.35rem;
}

[data-home-layout="minimal_typo"] .hero.hero--full-width .eyebrow {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.8rem;
    opacity: 0.72;
}

[data-home-layout="minimal_typo"] .hero.hero--full-width .hero-text {
    font-size: 1.18rem;
    opacity: 0.84;
    max-width: 580px;
}

[data-home-layout="minimal_typo"] .hero.hero--full-width .hero-actions {
    gap: 0.55rem;
}

[data-home-layout="minimal_typo"] .hero.hero--full-width .hero-actions .button {
    border-radius: 999px;
    background: transparent;
    border-width: 1px;
    box-shadow: none;
}

[data-home-layout="minimal_typo"] .hero.hero--full-width .hero-actions .button.primary {
    color: var(--text);
    border-color: color-mix(in srgb, var(--text) 26%, transparent);
}

[data-home-layout="minimal_typo"] .hero.hero--full-width .hero-actions .button.secondary {
    color: var(--muted);
    border-color: color-mix(in srgb, var(--line) 88%, transparent);
}

[data-home-layout="minimal_typo"] .home-card-section .card {
    background: none;
    border: none;
    box-shadow: none;
    padding-left: 0;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    border-radius: 0;
}

[data-home-layout="minimal_typo"] .home-card-section .content-card {
    border: 0;
    background: none;
    box-shadow: none;
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    border-radius: 0;
}

@media (max-width: 960px) {
    [data-home-layout="full_hero"] .hero.hero--full-width {
        min-height: auto;
        padding-top: 3.5rem;
        padding-bottom: 2.8rem;
    }

    [data-home-layout="full_hero"] .hero.hero--full-width .hero-copy {
        padding: 2.6rem 2rem;
    }

    [data-home-layout="card_grid"] .hero.hero--full-width .hero-copy {
        text-align: center;
        padding: 1.35rem 1.2rem;
    }

    [data-home-layout="card_grid"] .hero--full-width .hero-actions {
        justify-content: center;
    }

    [data-home-layout="split_screen"] .hero.hero--full-width {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    [data-home-layout="split_screen"] .home-split-visual {
        min-height: 220px;
        order: -1;
        padding: 1.75rem;
    }

    [data-home-layout="split_screen"] .home-split-visual .split-brand-mark {
        width: min(78%, 220px);
    }

    [data-home-layout="split_screen"] .home-split-visual .split-brand-mark img {
        max-height: 220px;
    }

    [data-home-layout="minimal_typo"] .hero.hero--full-width {
        padding-top: 3.8rem;
        padding-bottom: 3rem;
    }
}

@media (max-width: 640px) {
    [data-home-layout="full_hero"] .hero.hero--full-width .hero-copy {
        padding: 2rem 1.3rem;
    }

    [data-home-layout="full_hero"] .hero.hero--full-width .hero-actions .button {
        min-width: 100%;
    }
}

/* ── /Layouts page d'accueil ───────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   Sélecteur visuel de mise en page accueil (admin)
   ───────────────────────────────────────────────────────────── */
.home-layout-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.6rem;
}

.home-layout-option {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 1rem 1.1rem 1rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-card, 16px);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
    --layout-accent: var(--brand-blue);
    --layout-accent-soft: color-mix(in srgb, var(--accent-soft) 55%, var(--bg-elevated));
    --layout-thumb-bg:
        linear-gradient(135deg, color-mix(in srgb, var(--layout-accent) 16%, transparent), transparent 60%),
        var(--bg);
}

.home-layout-option::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--layout-accent), color-mix(in srgb, var(--layout-accent) 48%, transparent));
    opacity: 0.92;
}

.home-layout-option:hover {
    border-color: var(--layout-accent);
    background: color-mix(in srgb, var(--layout-accent-soft) 55%, var(--bg-elevated));
}

.home-layout-option.is-selected {
    border-color: var(--layout-accent);
    background: color-mix(in srgb, var(--layout-accent-soft) 72%, var(--bg-elevated));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--layout-accent) 22%, transparent);
}

.home-layout-option__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.home-layout-option__thumb {
    align-self: stretch;
    width: 100%;
    height: 52px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--layout-thumb-bg);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0.15rem;
}

.home-layout-option__thumb svg {
    display: block;
    width: 100%;
    height: 52px;
}

.home-layout-option__thumb .thumb-fill-hero {
    fill: color-mix(in srgb, var(--layout-accent) 18%, #ffffff 82%);
    stroke: color-mix(in srgb, var(--layout-accent) 34%, transparent);
    stroke-width: 0.5;
}

.home-layout-option__thumb .thumb-fill-card {
    fill: color-mix(in srgb, var(--bg-elevated) 88%, var(--layout-accent) 12%);
    stroke: color-mix(in srgb, var(--layout-accent) 14%, var(--line));
    stroke-width: 0.5;
}

.home-layout-option__thumb .thumb-fill-line {
    fill: color-mix(in srgb, var(--layout-accent) 34%, var(--muted));
    opacity: 0.72;
}

.home-layout-option.is-selected .home-layout-option__thumb {
    border-color: color-mix(in srgb, var(--layout-accent) 40%, transparent);
}

.home-layout-option.is-selected .thumb-fill-hero {
    fill: color-mix(in srgb, var(--layout-accent) 28%, #ffffff 72%);
}

.home-layout-option__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
}

.home-layout-option__icon {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--layout-accent) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--layout-accent) 16%, transparent);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.home-layout-option__desc {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}

.home-layout-option[data-layout-option="hero_grid"] {
    --layout-accent: #2f72dc;
    --layout-accent-soft: color-mix(in srgb, #d9e8ff 68%, var(--bg-elevated));
    --layout-thumb-bg:
        linear-gradient(180deg, color-mix(in srgb, #dceaff 88%, transparent), color-mix(in srgb, #ffffff 84%, transparent));
}

.home-layout-option[data-layout-option="full_hero"] {
    --layout-accent: #9356d8;
    --layout-accent-soft: color-mix(in srgb, #eadbff 64%, var(--bg-elevated));
    --layout-thumb-bg:
        radial-gradient(circle at 50% 28%, color-mix(in srgb, #f4e8ff 88%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, #dac0ff 78%, transparent), color-mix(in srgb, #7b4bb6 24%, transparent));
}

.home-layout-option[data-layout-option="card_grid"] {
    --layout-accent: #d68f1f;
    --layout-accent-soft: color-mix(in srgb, #fff0c8 68%, var(--bg-elevated));
    --layout-thumb-bg:
        linear-gradient(180deg, color-mix(in srgb, #fff7de 92%, transparent), color-mix(in srgb, #ffe2a4 48%, transparent));
}

.home-layout-option[data-layout-option="split_screen"] {
    --layout-accent: #168f7f;
    --layout-accent-soft: color-mix(in srgb, #d7fbf1 66%, var(--bg-elevated));
    --layout-thumb-bg:
        linear-gradient(90deg, color-mix(in srgb, #ffffff 92%, transparent) 0 50%, color-mix(in srgb, #bdeee3 90%, transparent) 50% 100%);
}

.home-layout-option[data-layout-option="minimal_typo"] {
    --layout-accent: #5a6472;
    --layout-accent-soft: color-mix(in srgb, #edf1f6 72%, var(--bg-elevated));
    --layout-thumb-bg:
        linear-gradient(180deg, color-mix(in srgb, #f9fbfc 96%, transparent), color-mix(in srgb, #e5ebf1 72%, transparent));
}

.home-layout-option[data-layout-option="full_hero"] .home-layout-option__thumb {
    height: 56px;
}

.home-layout-option[data-layout-option="card_grid"] .home-layout-option__thumb .thumb-fill-card {
    filter: drop-shadow(0 1px 0 color-mix(in srgb, #ffffff 48%, transparent));
}

.home-layout-option[data-layout-option="split_screen"] .home-layout-option__thumb .thumb-fill-hero:last-child {
    fill: color-mix(in srgb, var(--layout-accent) 22%, #ffffff 78%);
}

.home-layout-option[data-layout-option="minimal_typo"] .home-layout-option__thumb .thumb-fill-card {
    fill: color-mix(in srgb, var(--layout-accent) 16%, transparent);
    stroke: color-mix(in srgb, var(--layout-accent) 20%, transparent);
}

@media (max-width: 640px) {
    .home-layout-picker {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .home-layout-picker {
        grid-template-columns: 1fr;
    }
}

/* ── /Sélecteur visuel de mise en page accueil ─────────────── */

/* ─────────────────────────────────────────────────────────────
   Swatches de thème (nav + sélecteur profil)
   ───────────────────────────────────────────────────────────── */
.theme-swatch {
    display: inline-block;
    flex-shrink: 0;
    width: 30px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid rgba(128, 128, 128, 0.22);
    overflow: hidden;
    vertical-align: middle;
}

/* light */
.profile-theme-option[data-theme-option="light"] .theme-swatch {
    background: linear-gradient(90deg, #f7f9ff 55%, #1f62c4 55%);
}
/* dark */
.profile-theme-option[data-theme-option="dark"] .theme-swatch {
    background: linear-gradient(90deg, #04070d 55%, #2f72dc 55%);
    border-color: rgba(255, 255, 255, 0.12);
}
/* contrast-light */
.profile-theme-option[data-theme-option="contrast-light"] .theme-swatch {
    background: linear-gradient(90deg, #ffffff 55%, #005fcc 55%);
    border-color: rgba(0, 0, 0, 0.2);
}
/* contrast-dark */
.profile-theme-option[data-theme-option="contrast-dark"] .theme-swatch {
    background: linear-gradient(90deg, #000000 55%, #00e5ff 55%);
    border-color: rgba(255, 255, 255, 0.2);
}
/* aurora */
.profile-theme-option[data-theme-option="aurora"] .theme-swatch {
    background: linear-gradient(90deg, #08131a 55%, #3fb8a9 55%);
    border-color: rgba(63, 184, 169, 0.25);
}
/* aurora-light */
.profile-theme-option[data-theme-option="aurora-light"] .theme-swatch {
    background: linear-gradient(90deg, #eef8f7 55%, #2d9385 55%);
}
/* sunset */
.profile-theme-option[data-theme-option="sunset"] .theme-swatch {
    background: linear-gradient(90deg, #fff7ef 55%, #d95d39 55%);
}
/* sunset-dark */
.profile-theme-option[data-theme-option="sunset-dark"] .theme-swatch {
    background: linear-gradient(90deg, #22120f 55%, #f08f5a 55%);
    border-color: rgba(240, 143, 90, 0.2);
}
/* paper-ink */
.profile-theme-option[data-theme-option="paper-ink"] .theme-swatch {
    background: linear-gradient(90deg, #f5f2e8 55%, #1f4e8c 55%);
}
/* paper-ink-dark */
.profile-theme-option[data-theme-option="paper-ink-dark"] .theme-swatch {
    background: linear-gradient(90deg, #111316 55%, #7aa0d5 55%);
    border-color: rgba(122, 160, 213, 0.2);
}
/* vampire */
.profile-theme-option[data-theme-option="vampire"] .theme-swatch {
    background: linear-gradient(90deg, #120814 55%, #c13c69 55%);
    border-color: rgba(193, 60, 105, 0.15);
}
/* vampire-light */
.profile-theme-option[data-theme-option="vampire-light"] .theme-swatch {
    background: linear-gradient(90deg, #fff4fa 55%, #b13d73 55%);
}

/* ── /Swatches de thème ────────────────────────────────────── */

.module-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module-card {
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 16px;
    padding: 1rem;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    display: grid;
    gap: 0.75rem;
}

.module-card--optional {
    border-color: color-mix(in srgb, var(--warning) 48%, var(--line));
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--warning) 28%, var(--bg-elevated) 72%),
        color-mix(in srgb, var(--bg-elevated) 95%, transparent)
    );
}

.module-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.module-card__head h2 {
    margin: 0.15rem 0 0;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.module-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.module-card__state {
    display: grid;
    gap: 0.4rem;
    border: 1px dashed color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 12px;
    padding: 0.65rem 0.75rem;
    background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
}

.module-card__state p {
    margin: 0;
    font-size: 0.95rem;
}

.module-card__state .helper-text {
    margin-top: 0;
}

.module-card__actions {
    gap: 0.6rem;
}

/* Historique de facturation — carte module admin */
.module-card__billing-history {
    margin: 0.6rem 0 0.25rem;
    font-size: 0.85rem;
}

.module-billing-history-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.module-billing-history-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    background: var(--color-surface-1, #f8f9fa);
    border-radius: 0.25rem;
    font-size: 0.82rem;
}

.badge--xs {
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
}

.module-card__access-cta {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--brand-orange) 68%, transparent),
        0 12px 24px color-mix(in srgb, var(--brand-orange) 36%, transparent);
    border-color: color-mix(in srgb, var(--brand-orange) 74%, var(--line));
}

.module-card__access-cta:hover,
.module-card__access-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand-orange) 82%, transparent),
    0 14px 30px color-mix(in srgb, var(--brand-orange) 46%, transparent);
}

.module-card__access-cta:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-orange) 34%, transparent);
    outline-offset: 2px;
}

.button.module-locked-highlight,
.admin-dashboard-quick-link.module-locked-highlight {
    border-color: color-mix(in srgb, var(--brand-orange) 76%, var(--line));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--brand-orange) 62%, transparent),
        0 12px 28px color-mix(in srgb, var(--brand-orange) 34%, transparent);
}

.button.module-locked-highlight::after,
.admin-dashboard-quick-link.module-locked-highlight::after {
    content: ' 🔒';
    font-size: 0.75em;
    opacity: 0.85;
}

.button.module-locked-highlight:hover,
.button.module-locked-highlight:focus-visible,
.admin-dashboard-quick-link.module-locked-highlight:hover,
.admin-dashboard-quick-link.module-locked-highlight:focus-visible {
    transform: translateY(-1px);
    box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand-orange) 84%, transparent),
    0 14px 32px color-mix(in srgb, var(--brand-orange) 48%, transparent);
}

body.hide-locked-optional-cta .module-locked-highlight {
    display: none !important;
}

.sys-module-inline-form {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.sys-module-inline-form .form-input {
    max-width: 8.5rem;
    min-height: 42px;
}

@media (max-width: 960px) {
    .module-card-grid {
        grid-template-columns: 1fr;
    }

    .module-card__actions .button {
        width: 100%;
    }
}

/* ── Tableaux sysadmin + admin — colonnes texte larges sur mobile ── */
@media (max-width: 960px) {

    /* sys-dojos-table: Nom (1), Adresse (3), Propriétaire (4) */
    .sys-dojos-table th:nth-child(1),
    .sys-dojos-table td:nth-child(1) { min-width: 160px; }
    .sys-dojos-table th:nth-child(3),
    .sys-dojos-table td:nth-child(3) { min-width: 220px; }
    .sys-dojos-table th:nth-child(4),
    .sys-dojos-table td:nth-child(4) { min-width: 160px; }

    /* sys-users-table: Nom (1), Courriel (2), École (3) */
    .sys-users-table th:nth-child(1),
    .sys-users-table td:nth-child(1),
    .sys-users-table th:nth-child(3),
    .sys-users-table td:nth-child(3) { min-width: 160px; }
    .sys-users-table th:nth-child(2),
    .sys-users-table td:nth-child(2) { min-width: 200px; }

    /* sys-test-accounts-table: Nom (1), Courriel (2) */
    .sys-test-accounts-table th:nth-child(1),
    .sys-test-accounts-table td:nth-child(1) { min-width: 160px; }
    .sys-test-accounts-table th:nth-child(2),
    .sys-test-accounts-table td:nth-child(2) { min-width: 200px; }

    /* sys-logs-table: École (2), Utilisateur (3), Page (5), Question (6), Réponse (7) */
    .sys-logs-table th:nth-child(2),
    .sys-logs-table td:nth-child(2),
    .sys-logs-table th:nth-child(3),
    .sys-logs-table td:nth-child(3) { min-width: 140px; }
    .sys-logs-table th:nth-child(5),
    .sys-logs-table td:nth-child(5) { min-width: 180px; }
    .sys-logs-table th:nth-child(6),
    .sys-logs-table td:nth-child(6),
    .sys-logs-table th:nth-child(7),
    .sys-logs-table td:nth-child(7) { min-width: 260px; }

    /* sys-owner-requests-table: École demandée (1), Propriétaire (2) */
    .sys-owner-requests-table th:nth-child(1),
    .sys-owner-requests-table td:nth-child(1),
    .sys-owner-requests-table th:nth-child(2),
    .sys-owner-requests-table td:nth-child(2) { min-width: 200px; }
    .sys-owner-requests-table th:nth-child(3),
    .sys-owner-requests-table td:nth-child(3) { white-space: nowrap; }

    /* sys-billing: Module (1) dans prix */
    .sys-billing-prices-table th:nth-child(1),
    .sys-billing-prices-table td:nth-child(1) { min-width: 180px; }

    /* sys-billing-orders-table: École (2), Module (3) */
    .sys-billing-orders-table th:nth-child(2),
    .sys-billing-orders-table td:nth-child(2),
    .sys-billing-orders-table th:nth-child(3),
    .sys-billing-orders-table td:nth-child(3) { min-width: 160px; }

    /* sys-kamatera-billing-table: Service (2), Datacenter (3), Début (4), Fin (5), Unités (6), Coût (7) */
    .sys-kamatera-billing-table th:nth-child(2),
    .sys-kamatera-billing-table td:nth-child(2) { min-width: 180px; }
    .sys-kamatera-billing-table th:nth-child(3),
    .sys-kamatera-billing-table td:nth-child(3) { min-width: 120px; }
    .sys-kamatera-billing-table th:nth-child(4),
    .sys-kamatera-billing-table td:nth-child(4),
    .sys-kamatera-billing-table th:nth-child(5),
    .sys-kamatera-billing-table td:nth-child(5) { min-width: 148px; }
    .sys-kamatera-billing-table th:nth-child(6),
    .sys-kamatera-billing-table td:nth-child(6) { min-width: 112px; }
    .sys-kamatera-billing-table th:nth-child(7),
    .sys-kamatera-billing-table td:nth-child(7) { min-width: 128px; }

    /* admin-members-table: Membre (1), Responsable (2) */
    .admin-members-table th:nth-child(1),
    .admin-members-table td:nth-child(1),
    .admin-members-table th:nth-child(2),
    .admin-members-table td:nth-child(2) { min-width: 160px; }

    /* admin-users-table: Nom (1), Roles (2), Messagerie (3), Actions (6) */
    .admin-users-table th:nth-child(1),
    .admin-users-table td:nth-child(1) { min-width: 160px; }
    .admin-users-table th:nth-child(2),
    .admin-users-table td:nth-child(2) { width: 140px; min-width: 140px; }
    .admin-users-table th:nth-child(3),
    .admin-users-table td:nth-child(3) { width: 120px; min-width: 120px; }
    .admin-users-table th:nth-child(6),
    .admin-users-table td:nth-child(6) { min-width: 200px; }

    /* admin-schedules-table: Groupe (1), Cours (4), Lieu (5) */
    .admin-schedules-table th:nth-child(1),
    .admin-schedules-table td:nth-child(1),
    .admin-schedules-table th:nth-child(5),
    .admin-schedules-table td:nth-child(5) { min-width: 160px; }
    .admin-schedules-table th:nth-child(4),
    .admin-schedules-table td:nth-child(4) { min-width: 180px; }

    /* admin-discount-codes-table: Nom (1) */
    .admin-discount-codes-table th:nth-child(1),
    .admin-discount-codes-table td:nth-child(1) { min-width: 160px; }

    /* admin-pages-table: Titre (1) */
    .admin-pages-table th:nth-child(1),
    .admin-pages-table td:nth-child(1) { min-width: 200px; }

    /* admin-events-table: Titre (1), Description (4) */
    .admin-events-table th:nth-child(1),
    .admin-events-table td:nth-child(1) { min-width: 160px; }
    .admin-events-table th:nth-child(4),
    .admin-events-table td:nth-child(4) { min-width: 220px; }

    /* admin-messages-table: Sujet (1), École (2), Expéditeur (3) */
    .admin-messages-table th:nth-child(1),
    .admin-messages-table td:nth-child(1) { min-width: 200px; }
    .admin-messages-table th:nth-child(2),
    .admin-messages-table td:nth-child(2),
    .admin-messages-table th:nth-child(3),
    .admin-messages-table td:nth-child(3) { min-width: 140px; }

    /* admin-gift-cards-table: Libellé (1), Acheteur (5), Destinataire (6) */
    .admin-gift-cards-table th:nth-child(1),
    .admin-gift-cards-table td:nth-child(1) { min-width: 160px; }
    .admin-gift-cards-table th:nth-child(5),
    .admin-gift-cards-table td:nth-child(5),
    .admin-gift-cards-table th:nth-child(6),
    .admin-gift-cards-table td:nth-child(6) { min-width: 140px; }

    /* admin-surveys-table: Titre (1) */
    .admin-surveys-table th:nth-child(1),
    .admin-surveys-table td:nth-child(1) { min-width: 200px; }

    /* social-pub-preview-table: Aperçu (2), Hashtags (3) */
    .social-pub-preview-table th:nth-child(2),
    .social-pub-preview-table td:nth-child(2),
    .social-pub-preview-table th:nth-child(3),
    .social-pub-preview-table td:nth-child(3) { min-width: 200px; }

    /* social-pub-scheduled-table (FB + Instagram): Message (3) */
    .social-pub-scheduled-table th:nth-child(3),
    .social-pub-scheduled-table td:nth-child(3) { min-width: 240px; }

    /* social-pub-history-table (FB + Instagram): Publication (4), Erreur (5) */
    .social-pub-history-table th:nth-child(4),
    .social-pub-history-table td:nth-child(4),
    .social-pub-history-table th:nth-child(5),
    .social-pub-history-table td:nth-child(5) { min-width: 220px; }
}

/* ── Module activation list (sys/modules) ── */
.module-activation-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.module-activation-block {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.module-activation-block.is-active {
    border-color: color-mix(in srgb, var(--success) 55%, transparent);
}

.module-activation-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.875rem 1.125rem;
    transition: background var(--transition-fast);
}

.module-activation-block.is-active .module-activation-item {
    background: color-mix(in srgb, var(--success) 18%, transparent);
}

.module-activation-block:not(.is-active) .module-activation-item:hover {
    background: color-mix(in srgb, var(--accent-soft) 28%, transparent);
}

.module-activation-block.is-active .module-activation-item:hover {
    background: color-mix(in srgb, var(--success) 30%, transparent);
}

.module-activation-item__name {
    flex: 1;
    min-width: 140px;
    font-weight: 500;
}

.module-activation-item__form {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
}

.module-activation-item__price {
    width: 7.5rem;
    text-align: right;
}

.module-periods-section {
    padding: 0.875rem 1.125rem;
    background: var(--color-surface-1);
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
}

@media (max-width: 640px) {
    .module-activation-item {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
    }

    .module-activation-item__name {
        width: 100%;
        min-width: unset;
    }

    .module-activation-item__price {
        width: 6rem;
    }
}


/* --- Sysadmin test accounts layout polish --- */
.test-accounts-create-grid {
    gap: 1.5rem;
}

.test-accounts-col-1 {
    grid-column: 1;
}

.test-accounts-col-2 {
    grid-column: 2;
}

.test-accounts-col-full,
.test-accounts-submit-row {
    grid-column: 1 / -1;
}

.test-accounts-submit-row {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
}

.test-accounts-list-heading {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.test-accounts-env-card {
    margin-top: 3rem;
    padding: 1.5rem;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-accent-info);
}

.test-accounts-env-title {
    margin-top: 0;
}

.test-accounts-env-copy {
    margin-bottom: 1rem;
}

.test-accounts-env-code {
    background: var(--color-bg-secondary);
    padding: 1rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 0.85rem;
}

.empty-state--table {
    padding: 1.25rem 0.75rem;
}

.empty-state--table p {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .test-accounts-col-1,
    .test-accounts-col-2 {
        grid-column: 1 / -1;
    }

    .test-accounts-submit-row .button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .test-accounts-env-card {
        padding: 1rem;
    }

    .test-accounts-env-code {
        font-size: 0.8rem;
    }
}
/* --- /Sysadmin test accounts layout polish --- */

/* --- Demandes d'école: modal d'actions ── */
.request-actions-modal {
    width: min(42rem, calc(100vw - 2rem));
    max-width: 42rem;
}

.request-actions-modal__panel {
    padding: 1rem;
    gap: 1rem;
}

.request-actions-modal__header {
    align-items: flex-start;
}

.request-actions-modal__eyebrow {
    margin: 0;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.request-actions-modal__meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.request-actions-panel {
    padding: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--shadow-color, #000) 18%, transparent);
    white-space: normal;
    width: 100%;
    min-width: 0;
    max-width: none;
}

.request-actions-form,
.request-actions-panel form,
.is-admin td.actions .request-actions-panel form,
td.actions .request-actions-panel form {
    display: grid;
    gap: 0.8rem;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
}

.request-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.request-actions-field {
    min-width: 0;
}

.request-actions-field--full {
    grid-column: 1 / -1;
}

.request-actions-panel .form-label {
    margin-top: 0;
    margin-bottom: 0.35rem;
}

.request-actions-panel .form-input {
    margin-bottom: 0;
}

.request-actions-panel textarea.form-input {
    min-height: 6rem;
    resize: vertical;
}

.request-actions-panel .button {
    margin-top: 0;
    width: 100%;
    justify-content: center;
}

.request-actions-panel__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin: 0 0 0.5rem;
}

.request-actions-panel__divider {
    border: none;
    border-top: 1px solid var(--line);
    margin: 0.85rem 0;
}

@media (max-width: 960px) {
    .request-actions-modal {
        width: min(38rem, calc(100vw - 1.5rem));
    }
}

@media (max-width: 640px) {
    .request-actions-modal__header {
        flex-direction: column;
        align-items: stretch;
    }

    .request-actions-modal__header .button {
        width: 100%;
    }

    .request-actions-grid {
        grid-template-columns: 1fr;
    }
}
/* --- /Demandes d'école: modal d'actions ── */


.admin-dashboard-command-collapse {
    margin-top: 0.15rem;
}

.admin-dashboard-command-collapse .filter-collapse__summary {
    padding: 0.65rem 0.85rem;
}

.admin-dashboard-command-collapse .filter-collapse__body {
    padding-top: 0.9rem;
    display: grid;
    gap: 0.55rem;
}

@media (max-width: 960px) {
    .admin-dashboard-command-collapse .filter-collapse__summary {
        min-height: 44px;
    }
}
/* --- /Admin dashboard command collapse --- */

/* === Galerie publique — experience visuelle === */
.gallery-heading p {
    max-width: 70ch;
}

.gallery-hero-panel {
    margin-top: 1.15rem;
    display: grid;
    gap: 1rem;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    background:
        radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--accent-soft) 80%, transparent) 0, transparent 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 90%, var(--accent-soft) 10%) 0%, color-mix(in srgb, var(--bg-elevated) 96%, transparent) 62%);
    overflow: hidden;
}

.gallery-hero-panel h2 {
    margin-bottom: 0.55rem;
}

.gallery-hero-panel p {
    margin: 0;
}

.gallery-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.gallery-hero-stat {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.48rem 0.72rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
}

.gallery-hero-stat strong {
    margin-right: 0.35rem;
    color: var(--accent-strong);
}

.gallery-album-meta {
    margin-top: 0.7rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.gallery-album-meta__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0.26rem 0.6rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.gallery-albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.2rem;
    margin-top: 2rem;
}

.gallery-album-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: color-mix(in srgb, var(--bg-elevated) 97%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--bg) 82%, transparent);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.gallery-album-card::after {
    content: "";
    position: absolute;
    inset: auto -20% -36% -20%;
    height: 55%;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 30%, transparent) 0, transparent 72%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
    .gallery-album-card:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
        box-shadow: 0 18px 36px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .gallery-album-card:hover::after {
        opacity: 1;
    }
}

.gallery-album-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.gallery-album-card__cover {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
}

.gallery-album-card__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 34%, color-mix(in srgb, #000 34%, transparent) 100%);
    pointer-events: none;
}

.gallery-album-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

@media (hover: hover) and (pointer: fine) {
    .gallery-album-card:hover .gallery-album-card__cover img {
        transform: scale(1.06);
    }
}

.gallery-album-card__cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: color-mix(in srgb, var(--accent) 64%, var(--text-muted));
    font-size: 2.7rem;
}

.gallery-album-card__count,
.gallery-album-card__chip {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.gallery-album-card__count {
    right: 0.65rem;
    bottom: 0.6rem;
    color: #fff;
    background: color-mix(in srgb, #000 62%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.26);
}

.gallery-album-card__chip {
    left: 0.65rem;
    top: 0.6rem;
    color: color-mix(in srgb, var(--accent-strong) 78%, #05192f);
    background: color-mix(in srgb, var(--accent-soft) 70%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
}

.gallery-album-card__body {
    position: relative;
    z-index: 1;
    padding: 1rem 1rem 1.05rem;
    flex: 1;
    display: grid;
    align-content: start;
    gap: 0.28rem;
}

.gallery-album-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.gallery-album-card__desc {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.gallery-album-card__event {
    display: grid;
    gap: 0.16rem;
    margin-top: 0.35rem;
    padding: 0.48rem 0.56rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 38%, var(--bg-elevated));
}

.gallery-album-card__event-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.gallery-album-card__event-date,
.gallery-album-card__event-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.gallery-event-card {
    margin-top: 0.9rem;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 34%, var(--bg-elevated));
}

.gallery-event-card h2 {
    margin: 0.15rem 0 0.3rem;
    font-size: 1.15rem;
}

.gallery-event-card__date,
.gallery-event-card__desc {
    margin: 0;
    color: var(--text-muted);
}

.gallery-event-card__date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.gallery-event-card__desc {
    margin-top: 0.32rem;
}

.gallery-event-card--side {
    margin-top: 0.65rem;
    width: min(420px, 100%);
    margin-left: auto;
}

.gallery-album-actions {
    margin-left: auto;
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.gallery-album-actions > .button {
    align-self: flex-end;
}

@media (max-width: 960px) {
    .gallery-album-actions {
        margin-left: 0;
        width: 100%;
        align-items: flex-start;
    }

    .gallery-album-actions > .button {
        align-self: flex-start;
    }

    .gallery-event-card--side {
        margin-left: 0;
        width: 100%;
    }
}

.gallery-album-card__cta {
    margin-top: 0.45rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--accent-strong);
    font-size: 0.83rem;
    font-weight: 700;
}

.gallery-photo-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 0.62rem;
    margin-top: 1.45rem;
}

.gallery-photo-grid__item {
    position: relative;
    grid-column: span 3;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    padding: 0;
    cursor: zoom-in;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    animation: gallery-photo-rise 480ms ease both;
    animation-delay: var(--gallery-photo-delay, 0ms);
}

.gallery-photo-grid__item--wide {
    grid-column: span 6;
    aspect-ratio: 16 / 9;
}

.gallery-photo-grid__item--tall {
    grid-column: span 3;
    aspect-ratio: 4 / 5;
}

.gallery-photo-grid__item--large {
    grid-column: span 6;
    aspect-ratio: 4 / 3;
}

.gallery-photo-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.gallery-photo-grid__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0.55rem;
    background: linear-gradient(180deg, color-mix(in srgb, #000 18%, transparent) 0%, transparent 36%, color-mix(in srgb, #000 34%, transparent) 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.gallery-photo-grid__zoom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: #fff;
    background: color-mix(in srgb, #000 52%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.gallery-photo-grid__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.45rem 0.58rem;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 600;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, #000 68%, transparent) 100%);
    transform: translateY(0);
    transition: transform var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
    .gallery-photo-grid__item:hover img,
    .gallery-photo-grid__item:focus-visible img {
        transform: scale(1.08);
    }

    .gallery-photo-grid__item:hover .gallery-photo-grid__overlay,
    .gallery-photo-grid__item:focus-visible .gallery-photo-grid__overlay {
        opacity: 1;
    }

    .gallery-photo-grid__item:hover .gallery-photo-grid__caption,
    .gallery-photo-grid__item:focus-visible .gallery-photo-grid__caption {
        transform: translateY(-1px);
    }
}

.gallery-photo-grid__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@keyframes gallery-photo-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* === /Galerie publique — experience visuelle === */

/* === Admin galerie — badge couverture sur photo sortable === */
.photo-sortable-cover-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    pointer-events: none;
}
/* === /Admin galerie — badge couverture sur photo sortable === */

@media (max-width: 640px) {
    .gallery-hero-panel {
        border-radius: 16px;
    }

    .gallery-albums-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem;
    }

    .gallery-photo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gallery-photo-grid__item,
    .gallery-photo-grid__item--tall {
        grid-column: span 2;
        aspect-ratio: 1 / 1;
    }

    .gallery-photo-grid__item--wide,
    .gallery-photo-grid__item--large {
        grid-column: span 4;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 480px) {
    .gallery-hero-stat {
        width: 100%;
    }

    .gallery-albums-grid {
        grid-template-columns: 1fr;
    }

    .gallery-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-photo-grid__item,
    .gallery-photo-grid__item--tall {
        grid-column: span 1;
        aspect-ratio: 1 / 1;
    }

    .gallery-photo-grid__item--wide,
    .gallery-photo-grid__item--large {
        grid-column: span 2;
        aspect-ratio: 4 / 3;
    }

    .gallery-photo-grid__overlay {
        opacity: 1;
    }
}

@media (max-width: 960px) {
    .gallery-photo-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .gallery-photo-grid__item,
    .gallery-photo-grid__item--tall {
        grid-column: span 4;
    }

    .gallery-photo-grid__item--wide,
    .gallery-photo-grid__item--large {
        grid-column: span 8;
    }

    .gallery-photo-grid__caption {
        font-size: 0.8rem;
        padding: 0.5rem 0.62rem;
    }
}

@media (max-width: 360px) {
    .gallery-photo-grid {
        gap: 0.5rem;
    }

    .gallery-album-card__body {
        padding: 0.85rem;
    }
}

/* AI Text Enhancer Styles */
.ai-text-enhancer {
    width: 100%;
}

.ai-text-enhancer__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.ai-text-enhancer__button {
    flex-shrink: 0;
}

.ai-text-enhancer__status {
    margin: 0.4rem 0 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ai-text-enhancer__style:hover {
    background: var(--bg-elevated-strong);
    border-color: var(--accent);
}

.ai-text-enhancer__style:focus,
.ai-text-enhancer__style:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ai-text-enhancer__style:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    @supports (-webkit-touch-callout: none) {
        .main-nav.is-open {
            padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
        }
    }
}

@media (max-width: 360px) {
    @supports (-webkit-touch-callout: none) {
        .profile-menu-panel,
        .theme-picker__panel {
            max-width: calc(100vw - 0.5rem);
        }
    }
}

/* =========================================================
   Modale admin générique (dialog natif)
   ========================================================= */
.admin-modal::backdrop {
    background: rgba(6, 10, 18, 0.72);
    backdrop-filter: blur(2px);
}

.admin-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(92vw, 420px);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg-elevated);
    color: var(--text);
    padding: 0;
    box-shadow: var(--shadow-strong);
}

.admin-modal--wide {
    width: min(96vw, 760px);
}

.admin-modal > form {
    padding: 1.25rem 1.5rem 1.5rem;
    display: grid;
    gap: 0.9rem;
}

.admin-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom left;
    margin-bottom: 0.1rem;
}

.admin-modal__title {
    margin: 0;
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-modal__close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.admin-modal__close:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text);
    border-color: var(--line);
}

.admin-modal__close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.admin-modal__desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.55;
    background: color-mix(in srgb, var(--line) 22%, transparent);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
}

.admin-modal__actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: 0.6rem;
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    margin-top: 0.1rem;
}

.lesson-plan-ai-suggestions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.lesson-plan-ai-suggestions .button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
    min-height: 44px;
}

@media (max-width: 640px) {
    .lesson-plan-ai-suggestions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .admin-modal__actions {
        flex-direction: column-reverse;
    }

    .admin-modal__actions .button {
        width: 100%;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BOUTIQUE — Cartes de mode de paiement
   ═══════════════════════════════════════════════════════════════ */

.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.payment-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.95rem 1.1rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    user-select: none;
}

.payment-card:hover {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
    box-shadow: 0 2px 14px color-mix(in srgb, var(--accent) 10%, transparent);
}

.payment-card.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 38%, var(--bg-elevated));
    box-shadow: 0 2px 18px color-mix(in srgb, var(--accent) 16%, transparent);
}

.payment-card__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.payment-card__header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.payment-card__icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

.payment-card__name {
    font-weight: 600;
    font-size: 0.96rem;
    flex: 1;
    color: var(--text);
}

.payment-card__check {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--bg);
    flex-shrink: 0;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-card.is-selected .payment-card__check {
    border-color: var(--accent);
    background: var(--accent);
}

.payment-card.is-selected .payment-card__check::after {
    content: '';
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: var(--on-accent, #ffffff);
}

.payment-card__mode-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.13rem 0.48rem;
    border-radius: var(--radius-pill);
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

.payment-card__mode-badge--online {
    background: color-mix(in srgb, var(--success) 70%, var(--bg));
    color: var(--success-strong, #14532d);
}

.payment-card__mode-badge--manual {
    background: color-mix(in srgb, var(--warning) 70%, var(--bg));
    color: color-mix(in srgb, #7c5a00 80%, var(--text));
}

.payment-card__mode-badge--link {
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--bg));
    color: var(--accent-strong);
}

.payment-card__instructions {
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.48;
    margin: 0;
    padding-top: 0.25rem;
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    display: none;
}

.payment-card.is-selected .payment-card__instructions {
    display: block;
}

@media (max-width: 640px) {
    .payment-method-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Boutique : Résumé de commande ─────────────────────────────── */

.shop-order-summary {
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--accent-soft));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.2rem;
    margin-top: 0.75rem;
}

.shop-order-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.28rem 0;
    font-size: 0.92rem;
    gap: 0.75rem;
}

.shop-order-summary__row--total {
    font-weight: 700;
    font-size: 1.05rem;
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    margin-top: 0.2rem;
    padding-top: 0.45rem;
}

.shop-order-summary__label {
    color: var(--muted);
}

.shop-order-summary__value {
    font-variant-numeric: tabular-nums;
}

/* ── Boutique : Historique des commandes ────────────────────────── */

.shop-orders-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.shop-order-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.shop-order-card:hover {
    border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
    box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 8%, transparent);
}

.shop-order-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.1rem;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.shop-order-card__left {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.shop-order-card__id {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--accent-strong);
}

.shop-order-card__meta {
    font-size: 0.8rem;
    color: var(--muted);
}

.shop-order-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.shop-order-card__amount {
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.shop-order-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    justify-content: flex-end;
}

.shop-order-card__body {
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    padding: 0.7rem 1.1rem;
}

.shop-order-card__lines {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.shop-order-card__line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.86rem;
    gap: 0.5rem;
    color: color-mix(in srgb, var(--text) 78%, transparent);
}

.shop-order-card__line-label {
    flex: 1;
}

.shop-order-card__line-price {
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    color: var(--text);
}

.shop-order-card__footer {
    background: color-mix(in srgb, var(--bg) 55%, var(--bg-elevated));
    border-top: 0;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--line) 72%, transparent) 14%,
        color-mix(in srgb, var(--line) 86%, transparent) 50%,
        color-mix(in srgb, var(--line) 72%, transparent) 86%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top left;
    padding: 0.55rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.shop-order-card__payment-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
    color: var(--muted);
    flex-wrap: wrap;
}

.shop-order-card__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .shop-order-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .shop-order-card__right {
        align-items: flex-start;
    }

    .shop-order-card__badges {
        justify-content: flex-start;
    }
}

/* ── POS : sélecteur de type de paiement (pills) ─────────────────────── */
.pos-payment-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.3rem;
}

.pos-payment-type-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.75rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    line-height: 1;
}

.pos-payment-type-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.pos-payment-type-btn.is-selected {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.pos-payment-type-btn__icon {
    font-size: 1rem;
    line-height: 1;
}

.pos-payment-type-btn__label {
    font-size: 0.82rem;
}

@media (max-width: 480px) {
    .pos-payment-type-grid {
        gap: 0.35rem;
    }
    .pos-payment-type-btn {
        padding: 0.32rem 0.6rem;
        font-size: 0.8rem;
    }
    .pos-payment-type-btn__icon {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   Module Compétitions — styles dédiés
   ══════════════════════════════════════════════════════════ */

/* Grille de statistiques */
.comp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.comp-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem 1.3rem;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    gap: 0.25rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.comp-stat-card:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 8%, transparent);
}

.comp-stat-card__icon {
    font-size: 1.5rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.comp-stat-card__value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}

.comp-stat-card__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-top: 0.1rem;
}

/* Grille d'actions du tableau de bord */
.comp-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 0.7rem;
    margin-bottom: 2rem;
}

.comp-action-grid .button {
    justify-content: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    height: auto;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.comp-action-grid .button i {
    font-size: 1.1rem;
    flex-shrink: 0;
    opacity: 0.85;
}

.comp-action-grid .button.primary {
    grid-column: span 2;
}

/* ── Utilitaires de formulaire (module compétitions) ── */

.form-control {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    background: var(--bg-elevated);
    color: var(--text);
    border-radius: 14px;
    padding: 0.78rem 1rem;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
}

.form-control::placeholder {
    color: var(--muted);
    opacity: 0.65;
}

select.form-control {
    cursor: pointer;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234f5f7a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

textarea.form-control {
    resize: vertical;
    min-height: 5rem;
}

.form-control--short {
    max-width: 10rem;
}

.form-control--inline {
    width: 5.5rem;
    min-width: 0;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.1rem;
    min-width: 0;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.form-row > .form-group {
    margin-bottom: 0;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.required {
    color: #cc3300;
    margin-left: 0.1em;
}

.inline-form-mini {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Utilitaires de layout (page-header, breadcrumb — partagés) ── */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.page-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
}

.page-subtitle {
    color: var(--muted);
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.breadcrumb-link {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 0.4rem;
}

.breadcrumb-link:hover {
    color: var(--text);
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Blocs de section avec titre */
.comp-section {
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-soft) 52%, transparent), transparent 38%),
        linear-gradient(160deg, color-mix(in srgb, var(--bg-elevated-strong) 97%, var(--accent-soft) 3%), var(--bg-elevated));
    box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 6%, transparent);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}

.comp-section__title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin: 0 0 1.25rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, var(--accent) 30%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comp-section__title i {
    font-size: 0.95rem;
    color: var(--accent);
    opacity: 0.9;
}

/* Bloc section générique (utilisé dans public et admin) */
.section-block {
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-soft) 52%, transparent), transparent 38%),
        linear-gradient(160deg, color-mix(in srgb, var(--bg-elevated-strong) 97%, var(--accent-soft) 3%), var(--bg-elevated));
    box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 6%, transparent);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}

.section-block h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

/* État vide inline */
.comp-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
}

.comp-empty i {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.35;
}

.comp-empty p {
    margin: 0;
}

.empty-state-inline {
    display: block;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
}

/* Formulaire d'inscription public — sections */
.comp-reg-section {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}

.comp-reg-section__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.comp-reg-section__header i {
    font-size: 1.25rem;
    color: var(--accent);
    flex-shrink: 0;
}

.comp-reg-section__header h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.comp-reg-section__header p {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0.2rem 0 0;
}

/* Formulaire de détail de compétition public */
.comp-detail-hero {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 2rem 2rem 1.75rem;
    margin-bottom: 1.5rem;
}

.comp-detail-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.comp-detail-hero__meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.comp-detail-hero__meta i {
    font-size: 1rem;
    color: var(--accent);
}

.comp-discipline-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--accent-soft);
    color: var(--text);
    border: 1.2px solid var(--line);
}

.comp-discipline-badge--kata {
    background: color-mix(in srgb, #0a6ebd 14%, var(--accent-soft));
    border-color: color-mix(in srgb, #0a6ebd 28%, var(--line));
    color: color-mix(in srgb, #0a6ebd 85%, var(--text));
}

.comp-discipline-badge--kumite {
    background: color-mix(in srgb, #b42318 12%, var(--accent-soft));
    border-color: color-mix(in srgb, #b42318 25%, var(--line));
    color: color-mix(in srgb, #b42318 85%, var(--text));
}

.comp-discipline-badge--arme {
    background: color-mix(in srgb, #c27803 14%, var(--accent-soft));
    border-color: color-mix(in srgb, #c27803 28%, var(--line));
    color: color-mix(in srgb, #c27803 90%, var(--text));
}

.comp-discipline-badge--sol {
    background: color-mix(in srgb, #7c3aed 12%, var(--accent-soft));
    border-color: color-mix(in srgb, #7c3aed 28%, var(--line));
    color: color-mix(in srgb, #7c3aed 85%, var(--text));
}

html[data-theme="dark"] .comp-discipline-badge--kata,
html[data-theme="vampire"] .comp-discipline-badge--kata,
html[data-theme="contrast-dark"] .comp-discipline-badge--kata {
    color: color-mix(in srgb, #5ab4f5 90%, #ffffff 10%);
}

html[data-theme="dark"] .comp-discipline-badge--kumite,
html[data-theme="vampire"] .comp-discipline-badge--kumite,
html[data-theme="contrast-dark"] .comp-discipline-badge--kumite {
    color: color-mix(in srgb, #f87171 90%, #ffffff 10%);
}

html[data-theme="dark"] .comp-discipline-badge--arme,
html[data-theme="vampire"] .comp-discipline-badge--arme,
html[data-theme="contrast-dark"] .comp-discipline-badge--arme {
    color: color-mix(in srgb, #fbbf24 90%, #ffffff 10%);
}

html[data-theme="dark"] .comp-discipline-badge--sol,
html[data-theme="vampire"] .comp-discipline-badge--sol,
html[data-theme="contrast-dark"] .comp-discipline-badge--sol {
    color: color-mix(in srgb, #a78bfa 90%, #ffffff 10%);
}

/* ── Lien ressource dans le tableau ── */
.resource-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text);
    text-decoration: none;
}

.resource-link:hover {
    color: var(--accent);
}

/* ── Gabarits de catégories — liste de cases à cocher ── */
.template-checkboxes { display: flex; flex-direction: column; gap: 0.45rem; }
.template-checkbox-item { display: flex; align-items: center; gap: 0.65rem; cursor: pointer; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm, 6px); transition: background 0.15s ease; }
.template-checkbox-item:hover { background: color-mix(in srgb, var(--accent-soft) 22%, transparent); }
.template-checkbox-item input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.template-checkbox-label { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem; }

/* ── Zone de dépôt fichier (drag & drop) ── */
.drop-zone {
    position: relative;
    border: 2px dashed color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: var(--radius-md);
    padding: 2.25rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
}

.drop-zone:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 32%, transparent);
}

.drop-zone--over {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
    border-style: solid;
}

.drop-zone--has-file {
    border-color: color-mix(in srgb, var(--green, #22c55e) 70%, transparent);
    border-style: solid;
    background: color-mix(in srgb, var(--green, #22c55e) 8%, transparent);
}

.drop-zone__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.drop-zone__icon {
    font-size: 2.75rem;
    color: var(--accent);
    opacity: 0.55;
    display: block;
    margin: 0 auto 0.65rem;
    pointer-events: none;
}

.drop-zone__icon--ok {
    color: var(--green, #22c55e);
    opacity: 0.85;
}

.drop-zone__label {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0;
    pointer-events: none;
}

.drop-zone__label strong {
    color: var(--accent);
}

.drop-zone--has-file .drop-zone__label strong {
    color: var(--green, #22c55e);
}

.drop-zone__filename {
    font-size: 0.875rem;
    color: var(--text);
    font-weight: 600;
    margin: 0.5rem 0 0;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 640px) {
    .comp-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .comp-action-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .comp-action-grid .button.primary {
        grid-column: span 2;
    }

    .comp-section,
    .section-block,
    .comp-reg-section {
        padding: 1.25rem;
    }

    .comp-stat-card__value {
        font-size: 1.7rem;
    }

    .drop-zone {
        padding: 1.75rem 1rem;
    }
}

/* ── Interface table de compétition ── */

/* Grille de sélection des rings */
.ring-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.ring-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    background: var(--bg-elevated);
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text);
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    cursor: pointer;
}

.ring-card:hover,
.ring-card:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 15%, transparent);
    transform: translateY(-2px);
}

.ring-card:active {
    transform: translateY(0);
}

.ring-card__number {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
}

.ring-card__name {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 500;
}

/* Carte match en cours (ring dashboard) */
.live-match-card {
    background: color-mix(in srgb, var(--bg-elevated) 80%, var(--accent-soft) 20%);
    border: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.live-match-names {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.live-match-names .aka-name {
    font-weight: 700;
    color: #dc2626;
    font-size: 1.05rem;
}

.live-match-names .ao-name {
    font-weight: 700;
    color: #2563eb;
    font-size: 1.05rem;
}

.live-badge {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    animation: live-pulse 1.5s infinite;
    flex-shrink: 0;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Tableau des prochains matchs — optimisé tablette */
.upcoming-matches-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.upcoming-matches-table thead th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

.upcoming-matches-table tbody tr {
    border-bottom: 1px solid var(--line);
}

.upcoming-matches-table tbody tr:last-child {
    border-bottom: none;
}

.upcoming-matches-table tbody td {
    padding: 0.75rem;
    vertical-align: middle;
}

.upcoming-matches-table .competitor-cell strong {
    display: block;
    font-size: 1rem;
}

.upcoming-matches-table .dojo-cell {
    font-size: 0.8rem;
    color: var(--muted);
}

.upcoming-matches-table .vs-cell {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .ring-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .ring-card {
        padding: 1.5rem 1rem;
    }

    .upcoming-matches-table .dojo-cell {
        display: none;
    }
}